fix(rbac): background color of sidebar in dark theme

plugins/rbac/dev/index.tsx

@@ -9,7 +9,7 @@ import {
   TestApiProvider,
 } from '@backstage/test-utils';
 
-import { createDevAppThemes } from '@redhat-developer/red-hat-developer-hub-theme';
+import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 
 import {
   PermissionAction,
@@ -154,7 +154,7 @@ const mockConfigApi = new MockConfigApi({
 
 createDevApp()
   .registerPlugin(rbacPlugin)
-  .addThemes(createDevAppThemes())
+  .addThemes(getAllThemes())
   .addPage({
     element: (
       <TestApiProvider

plugins/rbac/src/components/ConditionalAccess/ConditionalAccessSidebar.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core';
+import Drawer from '@material-ui/core/Drawer';
 import CloseIcon from '@mui/icons-material/Close';
 import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 
@@ -12,16 +12,20 @@ import { ConditionsData, RulesData } from './types';
 
 const useDrawerStyles = makeStyles(() => ({
   paper: {
-    width: '50%',
+    ['@media (max-width: 960px)']: {
+      width: '-webkit-fill-available',
+    },
+    width: '50vw',
+    height: '100vh',
     gap: '3%',
+    display: '-webkit-inline-box',
   },
 }));
 
 const useDrawerContentStyles = makeStyles(theme => ({
   sidebar: {
     display: 'flex',
     flexFlow: 'column',
-    height: '100%',
     justifyContent: 'space-between',
   },
   header: {

plugins/rbac/src/components/ConditionalAccess/ConditionsForm.test.tsx

@@ -5,6 +5,11 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { mockTransformedConditionRules } from '../../__fixtures__/mockTransformedConditionRules';
 import { ConditionsForm } from './ConditionsForm';
 
+jest.mock('@material-ui/core', () => ({
+  ...jest.requireActual('@material-ui/core'),
+  makeStyles: jest.fn().mockReturnValue(() => ({})),
+}));
+
 describe('ConditionsForm', () => {
   const selPluginResourceType = 'catalog-entity';
   const onSaveMock = jest.fn();

plugins/rbac/src/components/ConditionalAccess/ConditionsForm.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { makeStyles } from '@material-ui/core';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import { Box, Button, makeStyles } from '@material-ui/core';
 
 import { ConditionsFormRow } from './ConditionsFormRow';
 import { criterias } from './const';
@@ -11,9 +9,9 @@ import { ConditionsData, RuleParamsErrors, RulesData } from './types';
 const useStyles = makeStyles(theme => ({
   form: {
     padding: theme.spacing(2.5),
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
+    paddingTop: 0,
     flexGrow: 1,
+    overflow: 'auto',
   },
   addConditionButton: {
     color: theme.palette.primary.light,
@@ -25,6 +23,9 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'baseline',
     borderTop: `2px solid ${theme.palette.border}`,
     padding: theme.spacing(2.5),
+    '& button': {
+      textTransform: 'none',
+    },
   },
 }));
 
@@ -109,6 +110,7 @@ export const ConditionsForm = ({
       <Box className={classes.footer}>
         <Button
           variant="contained"
+          color="primary"
           data-testid="save-conditions"
           disabled={isSaveDisabled()}
           onClick={() => {
@@ -121,13 +123,15 @@ export const ConditionsForm = ({
         </Button>
         <Button
           variant="outlined"
+          color="primary"
           onClick={onClose}
           data-testid="cancel-conditions"
         >
           Cancel
         </Button>
         <Button
           variant="text"
+          color="primary"
           disabled={removeAllClicked || isNoRuleSelected()}
           onClick={() => {
             setRemoveAllClicked(true);

plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { PermissionCondition } from '@backstage/plugin-permission-common';
 
 import { IconButton, makeStyles, useTheme } from '@material-ui/core';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 import { ConditionsFormRowFields } from './ConditionsFormRowFields';
 import { conditionButtons, criterias } from './const';
@@ -21,7 +21,16 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '4px',
     backgroundColor: theme.palette.background.default,
     '& input': {
-      backgroundColor: `${theme.palette.background.paper}!important`,
+      color: `${theme.palette.textContrast}!important`,
+      '&:-internal-autofill-selected, &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
+        {
+          WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.paper} inset`,
+          WebkitTextFillColor: `${theme.palette.textContrast}!important`,
+          caretColor: `${theme.palette.textContrast}!important`,
+        },
+    },
+    '& button': {
+      textTransform: 'none',
     },
   },
   criteriaButtonGroup: {
@@ -30,12 +39,10 @@ const useStyles = makeStyles(theme => ({
   },
   criteriaButton: {
     width: '100%',
-    textTransform: 'none',
-    padding: theme.spacing(1),
+    padding: `${theme.spacing(1)}px !important`,
   },
   addRuleButton: {
     color: theme.palette.primary.light,
-    textTransform: 'none',
     marginTop: theme.spacing(1),
   },
   removeRuleButton: {
@@ -149,6 +156,7 @@ export const ConditionsFormRow = ({
                 : {}
             }
             className={classes.criteriaButton}
+            disabled={val === criteria}
             size="large"
           >
             {label}

plugins/rbac/src/components/ConditionalAccess/ConditionsFormRowFields.tsx

@@ -14,11 +14,43 @@ import { RulesDropdownOption } from './RulesDropdownOption';
 import { ConditionsData, RuleParamsErrors, RulesData } from './types';
 
 const useStyles = makeStyles(theme => ({
-  bgPaper: {
-    backgroundColor: theme.palette.background.paper,
-  },
   params: {
-    fontFamily: theme.typography.fontFamily,
+    '& div[class*="MuiInputBase-root"]': {
+      backgroundColor: theme.palette.background.paper,
+    },
+    '& span': {
+      color: theme.palette.textSubtle,
+    },
+    '& input': {
+      color: theme.palette.textContrast,
+    },
+    '& fieldset.MuiOutlinedInput-notchedOutline': {
+      borderColor: theme.palette.grey[500],
+    },
+    '& div.MuiOutlinedInput-root': {
+      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderColor: theme.palette.primary.light,
+      },
+      '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+        borderColor: theme.palette.status.error,
+        '&:hover': {
+          borderColor: theme.palette.status.error,
+        },
+      },
+    },
+    '& label.MuiFormLabel-root.Mui-focused': {
+      color: theme.palette.primary.light,
+    },
+    '& label.MuiFormLabel-root.Mui-error': {
+      color: theme.palette.status.error,
+    },
+    '& div.MuiOutlinedInput-root:hover fieldset': {
+      borderColor:
+        theme.palette.type === 'dark' ? theme.palette.textContrast : 'unset',
+    },
+    '& label': {
+      color: theme.palette.textSubtle,
+    },
   },
 }));
 
@@ -94,6 +126,7 @@ export const ConditionsFormRowFields = ({
     >
       <Autocomplete
         style={{ marginTop: '27px', width: '50%' }}
+        className={classes.params}
         options={rules ?? []}
         value={oldCondition?.rule || null}
         getOptionDisabled={option =>
@@ -115,7 +148,6 @@ export const ConditionsFormRowFields = ({
         renderInput={(params: any) => (
           <TextField
             {...params}
-            className={classes.bgPaper}
             label="Rule"
             variant="outlined"
             placeholder="Select a rule"
@@ -147,8 +179,8 @@ export const ConditionsFormRowFields = ({
           />
         ) : (
           <TextField
+            className={classes.params}
             style={{ width: '100%', marginTop: '27px' }}
-            className={classes.bgPaper}
             disabled
             label="string, string"
             required

plugins/rbac/src/components/ConditionalAccess/CustomArrayField.tsx

@@ -6,13 +6,10 @@ import { FieldProps } from '@rjsf/utils';
 import { getInnerSchemaForArrayItem } from '@rjsf/utils/lib/schema/getDefaultFormState';
 
 const useStyles = makeStyles(theme => ({
-  bgPaper: {
-    backgroundColor: theme.palette.background.paper,
-  },
   arrayFieldDescription: {
     marginTop: '5px',
     fontWeight: 500,
-    color: theme.palette.grey[700],
+    color: `${theme.palette.grey[500]} !important`,
   },
 }));
 
@@ -39,7 +36,6 @@ export const CustomArrayField = (props: FieldProps) => {
           setFieldVal(value);
           onChange(value ? value.split(',').map(val => val.trim()) : []);
         }}
-        className={classes.bgPaper}
         required={required}
         placeholder="string, string"
       />

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

@@ -7,6 +7,11 @@ import '@testing-library/jest-dom';
 import { mockTransformedConditionRules } from '../../__fixtures__/mockTransformedConditionRules';
 import { PermissionPoliciesFormRow } from './PermissionPoliciesFormRow';
 
+jest.mock('@material-ui/core', () => ({
+  ...jest.requireActual('@material-ui/core'),
+  makeStyles: jest.fn().mockReturnValue(() => ({})),
+}));
+
 describe('PermissionPoliciesFormRow', () => {
   const mockProps = {
     permissionPoliciesRowData: {

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

@@ -123,7 +123,7 @@ export const PermissionPoliciesFormRow = ({
             onChange={(_e, value) =>
               onChangePermission(
                 value ?? '',
-                permissionPoliciesData?.pluginsPermissions[
+                permissionPoliciesData?.pluginsPermissions?.[
                   permissionPoliciesRowData.plugin
                 ]?.policies[value ?? '']?.isResourced ?? false,
                 value
@@ -134,6 +134,7 @@ export const PermissionPoliciesFormRow = ({
               )
             }
             getOptionDisabled={getPermissionDisabled}
+            getOptionLabel={option => option || ''}
             renderInput={(params: any) => (
               <TextField
                 {...params}

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

@@ -241,7 +241,7 @@ export const RoleForm = ({
   };
 
   return (
-    <Card>
+    <Card style={{ overflow: 'auto' }}>
       <CardHeader title={titles.formTitle} />
       <Divider />
       <CardContent