fix(rbac): fix labels and dropdowns in dark theme by aligning/downgrading components to MUI v4

plugins/rbac/src/components/CreateRole/AddMembersForm.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 
 import { LinearProgress, TextField } from '@material-ui/core';
+import FormHelperText from '@material-ui/core/FormHelperText';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import FormHelperText from '@mui/material/FormHelperText';
 import { FormikErrors } from 'formik';
 
 import { MemberEntity } from '../../types';

plugins/rbac/src/components/CreateRole/PermissionPoliciesForm.tsx

@@ -5,9 +5,9 @@ import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
 import { makeStyles } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import FormHelperText from '@material-ui/core/FormHelperText';
 import AddIcon from '@mui/icons-material/Add';
-import Button from '@mui/material/Button';
-import FormHelperText from '@mui/material/FormHelperText';
 import { FormikErrors } from 'formik';
 
 import { rbacApiRef } from '../../api/RBACBackendClient';

plugins/rbac/src/components/CreateRole/PermissionPoliciesFormRow.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 import RemoveIcon from '@mui/icons-material/Remove';
-import Autocomplete from '@mui/material/Autocomplete';
-import IconButton from '@mui/material/IconButton';
-import TextField from '@mui/material/TextField';
 import { FormikErrors } from 'formik';
 
 import { PermissionsData } from '../../types';
@@ -45,25 +45,17 @@ export const PermissionPoliciesFormRow = ({
   getPermissionDisabled,
 }: PermissionPoliciesFormRowProps) => {
   const classes = useStyles();
-  const [pluginSearch, setPluginSearch] = React.useState('');
-  const [permissionSearch, setPermissionSearch] = React.useState('');
   const { plugin: pluginError, permission: permissionError } =
     permissionPoliciesRowError;
 
   return (
     <div style={{ display: 'flex', gap: '20px', marginBottom: '25px' }}>
       <Autocomplete
-        disablePortal
         options={permissionPoliciesData?.plugins ?? []}
-        sx={{ width: '450px' }}
-        value={permissionPoliciesRowData.plugin}
-        isOptionEqualToValue={(option, value) => option === value}
-        onChange={(_e, value) => {
-          onChangePlugin(value || '');
-        }}
-        inputValue={pluginSearch}
-        onInputChange={(_e, newSearch) => setPluginSearch(newSearch)}
-        renderInput={params => (
+        style={{ width: '450px' }}
+        value={permissionPoliciesRowData.plugin ?? ''}
+        onChange={(_e, value) => onChangePlugin(value ?? '')}
+        renderInput={(params: any) => (
           <TextField
             {...params}
             label="Plugin"
@@ -77,30 +69,26 @@ export const PermissionPoliciesFormRow = ({
         )}
       />
       <Autocomplete
-        disablePortal
         disabled={!permissionPoliciesRowData.plugin}
         options={
           permissionPoliciesData?.pluginsPermissions?.[
             permissionPoliciesRowData.plugin
           ]?.permissions ?? []
         }
-        sx={{ width: '450px' }}
-        isOptionEqualToValue={(option, value) => option === value}
-        value={permissionPoliciesRowData.permission}
+        style={{ width: '450px' }}
+        value={permissionPoliciesRowData.permission ?? ''}
         onChange={(_e, value) =>
           onChangePermission(
-            value || '',
+            value ?? '',
             value
               ? permissionPoliciesData?.pluginsPermissions?.[
                   permissionPoliciesRowData.plugin
                 ]?.policies?.[value]
               : undefined,
           )
         }
-        inputValue={permissionSearch}
-        onInputChange={(_e, newSearch) => setPermissionSearch(newSearch)}
         getOptionDisabled={getPermissionDisabled}
-        renderInput={params => (
+        renderInput={(params: any) => (
           <TextField
             {...params}
             label="Permission"

plugins/rbac/src/components/CreateRole/PoliciesCheckboxGroup.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Checkbox from '@mui/material/Checkbox';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormGroup from '@mui/material/FormGroup';
-import FormLabel from '@mui/material/FormLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormLabel from '@material-ui/core/FormLabel';
 
 import { PermissionsData } from '../../types';
 import { RowPolicy } from './types';

plugins/rbac/src/components/CreateRole/ReviewStep.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { StructuredMetadataTable } from '@backstage/core-components';
 
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
 
 import { getPermissionsNumber } from '../../utils/create-role-utils';
 import { getMembers } from '../../utils/rbac-utils';

plugins/rbac/src/components/RolesList/RolesListToolbar.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { LinkButton } from '@backstage/core-components';
 
 import { makeStyles } from '@material-ui/core';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
+import Alert from '@material-ui/lab/Alert';
+import AlertTitle from '@material-ui/lab/AlertTitle';
 
 const useStyles = makeStyles(theme => ({
   toolbar: {

plugins/rbac/src/components/SnackbarAlert.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Alert from '@mui/material/Alert';
-import Snackbar from '@mui/material/Snackbar';
+import Snackbar from '@material-ui/core/Snackbar';
+import Alert from '@material-ui/lab/Alert';
 
 export const SnackbarAlert = ({
   toastMessage,