From ad44fa8a445234c1e2be0c6386dd1374feba03b0 Mon Sep 17 00:00:00 2001
From: Christoph Jerolimov <jerolimov+git@redhat.com>
Date: Wed, 21 Feb 2024 17:15:59 +0100
Subject: [PATCH] fix(rbac): fix labels and dropdowns in dark theme by
 aligning/downgrading components to MUI v4 (#1243)

---
 .../components/CreateRole/AddMembersForm.tsx  |  2 +-
 .../CreateRole/PermissionPoliciesForm.tsx     |  4 +--
 .../CreateRole/PermissionPoliciesFormRow.tsx  | 34 ++++++-------------
 .../CreateRole/PoliciesCheckboxGroup.tsx      | 10 +++---
 .../src/components/CreateRole/ReviewStep.tsx  |  2 +-
 .../components/RolesList/RolesListToolbar.tsx |  4 +--
 plugins/rbac/src/components/SnackbarAlert.tsx |  4 +--
 7 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx b/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx
index 313937593a..383df83029 100644
--- a/plugins/rbac/src/components/CreateRole/AddMembersForm.tsx
+++ b/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';
diff --git a/plugins/rbac/src/components/CreateRole/PermissionPoliciesForm.tsx b/plugins/rbac/src/components/CreateRole/PermissionPoliciesForm.tsx
index 0b4a4a04dc..e2871b4423 100644
--- a/plugins/rbac/src/components/CreateRole/PermissionPoliciesForm.tsx
+++ b/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';
diff --git a/plugins/rbac/src/components/CreateRole/PermissionPoliciesFormRow.tsx b/plugins/rbac/src/components/CreateRole/PermissionPoliciesFormRow.tsx
index 1f87b71fa0..d24a5b95e3 100644
--- a/plugins/rbac/src/components/CreateRole/PermissionPoliciesFormRow.tsx
+++ b/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,19 +69,17 @@ 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
@@ -97,10 +87,8 @@ export const PermissionPoliciesFormRow = ({
               : undefined,
           )
         }
-        inputValue={permissionSearch}
-        onInputChange={(_e, newSearch) => setPermissionSearch(newSearch)}
         getOptionDisabled={getPermissionDisabled}
-        renderInput={params => (
+        renderInput={(params: any) => (
           <TextField
             {...params}
             label="Permission"
diff --git a/plugins/rbac/src/components/CreateRole/PoliciesCheckboxGroup.tsx b/plugins/rbac/src/components/CreateRole/PoliciesCheckboxGroup.tsx
index d85552b634..e4e69b9f86 100644
--- a/plugins/rbac/src/components/CreateRole/PoliciesCheckboxGroup.tsx
+++ b/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';
diff --git a/plugins/rbac/src/components/CreateRole/ReviewStep.tsx b/plugins/rbac/src/components/CreateRole/ReviewStep.tsx
index 8c01af2ad3..8df18ec1b1 100644
--- a/plugins/rbac/src/components/CreateRole/ReviewStep.tsx
+++ b/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';
diff --git a/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx b/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx
index 54e40c6548..fcc217476f 100644
--- a/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx
+++ b/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: {
diff --git a/plugins/rbac/src/components/SnackbarAlert.tsx b/plugins/rbac/src/components/SnackbarAlert.tsx
index 25a4f68656..17915b97bb 100644
--- a/plugins/rbac/src/components/SnackbarAlert.tsx
+++ b/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,