feat: resolve vqa comments for custom roles

package.json

@@ -74,7 +74,7 @@
     "@uiw/codemirror-theme-github": "^4.21.18",
     "@uiw/react-codemirror": "^4.21.18",
     "@zesty-io/live-editor": "^2.0.30",
-    "@zesty-io/material": "^0.15.6",
+    "@zesty-io/material": "^0.15.7",
     "@zesty-io/react-autolayout": "^1.0.0-beta.16",
     "algoliasearch": "^4.20.0",
     "aos": "^2.3.4",

src/components/accounts/instances/lang.js

@@ -4,11 +4,11 @@ export const lang = {
       '': 'Overview',
       users: 'Users',
       roles: 'Roles & Permissions',
-      teams: 'Teams',
+      teams: 'Team Access',
       domains: 'Domains',
       usage: 'Usage',
       support: 'Support',
-      apis: 'APIs',
+      apis: 'API Tokens',
       webhooks: 'Webhooks',
       settings: 'Settings',
       billing: 'Billing',

src/components/accounts/instances/tabs.js

@@ -18,59 +18,59 @@ export const instanceTabs = [
     label: 'Overview',
     sort: 0,
   },
-  {
-    icon: <AccountBoxRoundedIcon fontSize="medium" />,
-    filename: 'roles',
-    label: 'Roles & Permissions',
-    sort: 1,
-  },
   {
     icon: <PeopleIcon fontSize="medium" />,
     filename: 'users',
     label: 'Users',
     sort: 2,
   },
+  {
+    icon: <AccountBoxRoundedIcon fontSize="medium" />,
+    filename: 'roles',
+    label: 'Roles & Permissions',
+    sort: 3,
+  },
   {
     icon: <GroupsIcon fontSize="medium" />,
     filename: 'teams',
-    label: 'Teams',
-    sort: 3,
+    label: 'Team Access',
+    sort: 4,
   },
   {
     icon: <LanguageIcon fontSize="medium" />,
     filename: 'domains',
     label: 'Domains',
-    sort: 4,
+    sort: 5,
   },
   {
     icon: <LeaderboardIcon fontSize="medium" />,
     filename: 'usage',
     label: 'Usage',
-    sort: 5,
+    sort: 6,
   },
   {
     icon: <TranslateIcon fontSize="medium" />,
     filename: 'locales',
     label: 'Locales',
-    sort: 6,
+    sort: 7,
   },
   {
     icon: <ApiIcon fontSize="medium" />,
     filename: 'apis',
-    label: 'APIs & Tokens',
-    sort: 7,
+    label: 'API Tokens',
+    sort: 8,
   },
   {
     icon: <WebhookIcon fontSize="medium" />,
     filename: 'webhooks',
     label: 'Webhooks',
-    sort: 8,
+    sort: 9,
   },
   {
     icon: <SupportAgentIcon fontSize="medium" />,
     filename: 'support',
     label: 'Support',
-    sort: 9,
+    sort: 10,
   },
   // comment out for now
   // {
@@ -83,6 +83,6 @@ export const instanceTabs = [
     icon: <CreditCardIcon fontSize="medium" />,
     filename: 'settings',
     label: 'Settings',
-    sort: 10,
+    sort: 11,
   },
 ];

src/components/accounts/roles/BaseRoles.tsx

@@ -120,7 +120,7 @@ export const BaseRoles = ({ baseRoles }: BaseRolesProps) => {
               p: 2,
               border: (theme) => `1px solid ${theme.palette.border}`,
               borderRadius: 2,
-              mb: index + 1 < baseRoles?.length ? 1 : 0,
+              mb: index + 1 < baseRoles?.length ? 2 : 0,
             }}
           >
             <ListItemAvatar>
@@ -137,6 +137,9 @@ export const BaseRoles = ({ baseRoles }: BaseRolesProps) => {
                   {BASE_ROLES_CONFIG[role.name.toLowerCase()]?.description}
                 </Typography>
               }
+              sx={{
+                my: 0,
+              }}
             />
           </ListItem>
         ))}

src/components/accounts/roles/CreateCustomRoleDialog.tsx

@@ -374,7 +374,8 @@ export const CreateCustomRoleDialog = ({
         sx: {
           maxWidth: 960,
           width: 960,
-          minHeight: 800,
+          maxHeight: 'calc(100% - 40px)',
+          my: 2.5,
         },
       }}
     >
@@ -392,18 +393,18 @@ export const CreateCustomRoleDialog = ({
           <Avatar sx={{ bgcolor: 'blue.100' }}>
             <LocalPoliceOutlined color="info" />
           </Avatar>
-          <Box display="inline">
+          <Stack>
             <Typography variant="h5" fontWeight={700}>
               Create Custom Role
             </Typography>
             <Typography variant="body3" fontWeight={600} color="text.secondary">
               Creates a custom role that can have granular permissions applied
               to it
             </Typography>
-          </Box>
+          </Stack>
         </Stack>
         <IconButton size="small" onClick={() => onClose?.()}>
-          <Close />
+          <Close fontSize="small" />
         </IconButton>
       </Stack>
       <DialogContent

src/components/accounts/roles/CustomRoles.tsx

@@ -61,7 +61,7 @@ export const CustomRoles = forwardRef(
                     p: 2,
                     border: (theme) => `1px solid ${theme.palette.border}`,
                     borderRadius: 2,
-                    mb: index + 1 < customRoles?.length ? 1 : 0,
+                    mb: index + 1 < customRoles?.length ? 2 : 0,
                   }}
                   onClick={() => {
                     setZUIDToEdit(role.ZUID);
@@ -88,15 +88,19 @@ export const CustomRoles = forwardRef(
                         {role.description || ''}
                       </Typography>
                     }
+                    sx={{
+                      my: 0,
+                    }}
                   />
                   <IconButton
+                    size="small"
                     onClick={(evt) => {
                       evt.stopPropagation();
                       setAnchorEl(evt.currentTarget);
                       setActiveZUID(role.ZUID);
                     }}
                   >
-                    <MoreHorizRounded />
+                    <MoreHorizRounded fontSize="small" />
                   </IconButton>
                 </ListItemButton>
                 <Menu

src/components/accounts/roles/DeleteCustomRoleDialog.tsx

@@ -47,7 +47,9 @@ export const DeleteCustomRoleDialog = ({
       value: role.ZUID,
     }));
 
-    return [...customRolesOpts, ...baseRolesOpts];
+    return [...customRolesOpts, ...baseRolesOpts]?.sort(
+      (a, b) => a.label?.localeCompare(b.label),
+    );
   }, [customRoles, baseRoles]);
 
   const defaultBaseRole = baseRoles?.find(

src/components/accounts/roles/EditCustomRoleDialog/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useReducer, useEffect } from 'react';
+import { useMemo, useState, useReducer, useEffect, useRef } from 'react';
 import {
   Typography,
   Avatar,
@@ -19,6 +19,7 @@ import {
   InfoRounded,
   RuleRounded,
   GroupsRounded,
+  SaveRounded,
 } from '@mui/icons-material';
 import { useRouter } from 'next/router';
 
@@ -74,6 +75,8 @@ export const EditCustomRoleDialog = ({
     updateUserRole,
     getUsersWithRoles,
   } = useRoles((state) => state);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [minHeight, setMinHeight] = useState(0);
   const [activeTab, setActiveTab] = useState<TabName>(tabToOpen);
   const [isSaving, setIsSaving] = useState(false);
   const [fieldErrors, updateFieldErrors] = useReducer(
@@ -102,6 +105,12 @@ export const EditCustomRoleDialog = ({
     },
   );
 
+  useEffect(() => {
+    setTimeout(() => {
+      setMinHeight(containerRef.current?.clientHeight);
+    });
+  }, []);
+
   const roleUsers = useMemo(() => {
     if (!usersWithRoles?.length) return [];
 
@@ -218,7 +227,6 @@ export const EditCustomRoleDialog = ({
       (email) => !alreadyExistingUsers.includes(email),
     );
 
-    // TODO: Do something with emails that are not yet instance members
     const users = usersWithRoles?.reduce(
       (prev, curr) => {
         if (usersToAdd?.includes(curr.email)) {
@@ -318,6 +326,8 @@ export const EditCustomRoleDialog = ({
           setActiveTab('permissions');
         } else if (!!fieldErrors?.usersTab?.length) {
           setActiveTab('users');
+        } else {
+          onClose();
         }
       });
   };
@@ -328,10 +338,13 @@ export const EditCustomRoleDialog = ({
       fullWidth
       onClose={() => onClose?.()}
       PaperProps={{
+        ref: containerRef,
         sx: {
           maxWidth: 960,
           width: 960,
-          minHeight: 800,
+          minHeight: minHeight,
+          maxHeight: 'calc(100% - 40px)',
+          my: 2.5,
         },
       }}
     >
@@ -348,7 +361,7 @@ export const EditCustomRoleDialog = ({
             <Avatar sx={{ bgcolor: 'blue.100' }}>
               <LocalPoliceOutlined color="info" />
             </Avatar>
-            <Box display="inline">
+            <Stack>
               <Typography variant="h5" fontWeight={700}>
                 Edit {roleData?.name}
               </Typography>
@@ -360,10 +373,10 @@ export const EditCustomRoleDialog = ({
                 Edit your custom role that can have granular permissions applied
                 to it
               </Typography>
-            </Box>
+            </Stack>
           </Stack>
           <IconButton size="small" onClick={() => onClose?.()}>
-            <Close />
+            <Close fontSize="small" />
           </IconButton>
         </Stack>
         <Tabs
@@ -489,6 +502,7 @@ export const EditCustomRoleDialog = ({
           variant="contained"
           color="primary"
           onClick={handleSave}
+          startIcon={<SaveRounded />}
         >
           Save
         </LoadingButton>

src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/ResourceSelector.tsx

@@ -107,7 +107,15 @@ export const ResourceSelector = ({
               height: 36,
             }}
           >
-            <ListItemIcon sx={{ minWidth: 32 }}>
+            <ListItemIcon
+              sx={{
+                minWidth: 32,
+                '& .MuiSvgIcon-root': {
+                  width: 20,
+                  height: 20,
+                },
+              }}
+            >
               {option.type === 'model' ? <Database /> : <EditRounded />}
             </ListItemIcon>
             <ListItemText
@@ -119,9 +127,12 @@ export const ResourceSelector = ({
                 wordBreak: 'break-word',
                 wordWrap: 'break-word',
               }}
-            >
-              {option.label}
-            </ListItemText>
+              primaryTypographyProps={{
+                variant: 'body2',
+                color: 'text.secondary',
+              }}
+              primary={option.label}
+            />
           </ListItem>
         );
       }}

src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/index.tsx

@@ -95,14 +95,14 @@ export const Permissions = ({
   return (
     <Box>
       <Stack direction="row" justifyContent="space-between" mb={2} height={48}>
-        <Box>
+        <Stack gap={0.25}>
           <Typography variant="h5" fontWeight={700}>
             Resource Permissions
           </Typography>
           <Typography variant="body3" fontWeight={600} color="text.secondary">
             Grant users access only to resources you specify
           </Typography>
-        </Box>
+        </Stack>
         <Box>
           <TextField
             ref={searchFieldRef}
@@ -117,6 +117,9 @@ export const Permissions = ({
                 </InputAdornment>
               ),
             }}
+            sx={{
+              width: 240,
+            }}
           />
           <Button
             variant="outlined"
@@ -148,7 +151,7 @@ export const Permissions = ({
         />
       )}
       {showAddRule && (
-        <Box pt={2} ref={addGranularRoleRef}>
+        <Box pt={granularRoles?.length ? 2 : 0} ref={addGranularRoleRef}>
           <AddRule
             onCancel={() => setShowAddRule(false)}
             onAddRuleClick={(newRoleData) => {

src/components/accounts/ui/header/index.js

@@ -6,7 +6,7 @@ import { theme } from '@zesty-io/material';
 const Index = ({ title, description, info, children }) => {
   return (
     <ThemeProvider theme={theme}>
-      <Grid item xs={12} px={4} py={3}>
+      <Grid item xs={12} px={4} py={2}>
         <Stack direction={{ xs: 'column', md: 'row' }}>
           <Stack direction="column" justifyContent="space-between">
             <Stack direction="row" alignItems="center" mb={1.5} spacing={1}>