Updates for comments

Signed-off-by: Yi Cai <[email protected]>
janus-idp · Jul 11, 2024 · 0351ee0 · 0351ee0
1 parent 815be0a
commit 0351ee0
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 25 deletions.
diff --git a/plugins/rbac/dev/index.tsx b/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

diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionalAccessSidebar.tsx b/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';
 
@@ -27,7 +27,6 @@ const useDrawerContentStyles = makeStyles(theme => ({
     display: 'flex',
     flexFlow: 'column',
     justifyContent: 'space-between',
-    backgroundColor: `${theme.palette.background.default} !important`,
   },
   header: {
     display: 'flex',

diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsForm.tsx b/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';
@@ -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);

diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx b/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,21 +21,23 @@ const useStyles = makeStyles(theme => ({
     borderRadius: '4px',
     backgroundColor: theme.palette.background.default,
     '& input': {
-      backgroundColor: `${theme.palette.background.paper}!important`,
+      backgroundColor: `${theme.palette.background.default}!important`,
+      color: `${theme.palette.textContrast}!important`,
+    },
+    '& button': {
+      textTransform: 'none',
     },
   },
   criteriaButtonGroup: {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: 'inherit',
     width: '80%',
   },
   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 +151,7 @@ export const ConditionsFormRow = ({
                 : {}
             }
             className={classes.criteriaButton}
+            disabled={val === criteria}
             size="large"
           >
             {label}

diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRowFields.tsx b/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRowFields.tsx
@@ -14,11 +14,8 @@ 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,
+    color: theme.typography.body1.color, // doesn't work
   },
 }));
 
@@ -115,7 +112,6 @@ export const ConditionsFormRowFields = ({
         renderInput={(params: any) => (
           <TextField
             {...params}
-            className={classes.bgPaper}
             label="Rule"
             variant="outlined"
             placeholder="Select a rule"
@@ -148,7 +144,6 @@ export const ConditionsFormRowFields = ({
         ) : (
           <TextField
             style={{ width: '100%', marginTop: '27px' }}
-            className={classes.bgPaper}
             disabled
             label="string, string"
             required

diff --git a/plugins/rbac/src/components/ConditionalAccess/CustomArrayField.tsx b/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"
       />