Updates to address comment

Signed-off-by: Yi Cai <yicai@redhat.com>
janus-idp · Jul 11, 2024 · 81822c2 · 81822c2
1 parent dd810f1
commit 81822c2
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 63 deletions.
diff --git a/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx b/plugins/rbac/src/components/ConditionalAccess/ConditionsFormRow.tsx
@@ -5,7 +5,6 @@ import { PermissionCondition } from '@backstage/plugin-permission-common';
 import {
   FormControlLabel,
   IconButton,
-  makeStyles,
   Radio,
   RadioGroup,
   useTheme,
@@ -21,6 +20,7 @@ import {
   getDefaultRule,
   nestedConditionButtons,
   ruleOptionDisabled,
+  useConditionsFormRowStyles,
 } from '../../utils/conditional-access-utils';
 import { AddNestedConditionButton } from './AddNestedConditionButton';
 import { ConditionsFormRowFields } from './ConditionsFormRowFields';
@@ -33,67 +33,6 @@ import {
   NotConditionType,
 } from './types';
 
-const useStyles = makeStyles(theme => ({
-  conditionRow: {
-    padding: '20px',
-    border: `1px solid ${theme.palette.border}`,
-    borderRadius: '4px',
-    backgroundColor: theme.palette.background.default,
-    '& input': {
-      backgroundColor: `${theme.palette.background.paper}!important`,
-    },
-  },
-  nestedConditionRow: {
-    padding: '20px',
-    marginLeft: theme.spacing(3),
-    border: `1px solid ${theme.palette.border}`,
-    borderRadius: '4px',
-    backgroundColor: theme.palette.background.default,
-    '& input': {
-      backgroundColor: `${theme.palette.background.paper}!important`,
-    },
-  },
-  criteriaButtonGroup: {
-    backgroundColor: theme.palette.background.paper,
-    width: '80%',
-  },
-  nestedConditioncriteriaButtonGroup: {
-    backgroundColor: theme.palette.background.paper,
-    width: '60%',
-    height: '100%',
-  },
-  addRuleButton: {
-    display: 'flex',
-    color: theme.palette.primary.light,
-    textTransform: 'none',
-    marginTop: theme.spacing(2),
-  },
-  addNestedConditionButton: {
-    display: 'flex',
-    color: theme.palette.primary.light,
-    textTransform: 'none',
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(2),
-  },
-  removeRuleButton: {
-    color: theme.palette.grey[500],
-    flexGrow: 0,
-    alignSelf: 'baseline',
-    marginTop: theme.spacing(3.3),
-  },
-  removeNestedRuleButton: {
-    color: theme.palette.grey[500],
-    flexGrow: 0,
-    alignSelf: 'baseline',
-  },
-  radioGroup: {
-    margin: theme.spacing(1),
-  },
-  radioLabel: {
-    marginTop: theme.spacing(1),
-  },
-}));
-
 export const ConditionsFormRow = ({
   conditionRulesData,
   conditionRow,
@@ -104,7 +43,7 @@ export const ConditionsFormRow = ({
   handleSetErrors,
   setRemoveAllClicked,
 }: ConditionFormRowProps) => {
-  const classes = useStyles();
+  const classes = useConditionsFormRowStyles();
   const theme = useTheme();
   const [nestedConditionRow, setNestedConditionRow] = React.useState<
     Condition[]

diff --git a/plugins/rbac/src/utils/conditional-access-utils.ts b/plugins/rbac/src/utils/conditional-access-utils.ts
@@ -1,5 +1,7 @@
 import { PermissionCondition } from '@backstage/plugin-permission-common';
 
+import { makeStyles } from '@material-ui/core';
+
 import { conditionButtons } from '../components/ConditionalAccess/const';
 import { Condition } from '../components/ConditionalAccess/types';
 
@@ -33,3 +35,64 @@ export const getDefaultRule = (selPluginResourceType: string) => ({
   resourceType: selPluginResourceType,
   params: {},
 });
+
+export const useConditionsFormRowStyles = makeStyles(theme => ({
+  conditionRow: {
+    padding: '20px',
+    border: `1px solid ${theme.palette.border}`,
+    borderRadius: '4px',
+    backgroundColor: theme.palette.background.default,
+    '& input': {
+      backgroundColor: `${theme.palette.background.paper}!important`,
+    },
+  },
+  nestedConditionRow: {
+    padding: '20px',
+    marginLeft: theme.spacing(3),
+    border: `1px solid ${theme.palette.border}`,
+    borderRadius: '4px',
+    backgroundColor: theme.palette.background.default,
+    '& input': {
+      backgroundColor: `${theme.palette.background.paper}!important`,
+    },
+  },
+  criteriaButtonGroup: {
+    backgroundColor: theme.palette.background.paper,
+    width: '80%',
+  },
+  nestedConditioncriteriaButtonGroup: {
+    backgroundColor: theme.palette.background.paper,
+    width: '60%',
+    height: '100%',
+  },
+  addRuleButton: {
+    display: 'flex',
+    color: theme.palette.primary.light,
+    textTransform: 'none',
+    marginTop: theme.spacing(2),
+  },
+  addNestedConditionButton: {
+    display: 'flex',
+    color: theme.palette.primary.light,
+    textTransform: 'none',
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+  },
+  removeRuleButton: {
+    color: theme.palette.grey[500],
+    flexGrow: 0,
+    alignSelf: 'baseline',
+    marginTop: theme.spacing(3.3),
+  },
+  removeNestedRuleButton: {
+    color: theme.palette.grey[500],
+    flexGrow: 0,
+    alignSelf: 'baseline',
+  },
+  radioGroup: {
+    margin: theme.spacing(1),
+  },
+  radioLabel: {
+    marginTop: theme.spacing(1),
+  },
+}));