From 3d38bdfc625b19de62c5c0db298723fc63a74a92 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 18 Dec 2024 07:45:45 +0800 Subject: [PATCH 1/6] feat: close model on update role success --- src/components/accounts/roles/EditCustomRoleDialog/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/accounts/roles/EditCustomRoleDialog/index.tsx b/src/components/accounts/roles/EditCustomRoleDialog/index.tsx index 49a4675aa..7e10b41e2 100644 --- a/src/components/accounts/roles/EditCustomRoleDialog/index.tsx +++ b/src/components/accounts/roles/EditCustomRoleDialog/index.tsx @@ -318,6 +318,8 @@ export const EditCustomRoleDialog = ({ setActiveTab('permissions'); } else if (!!fieldErrors?.usersTab?.length) { setActiveTab('users'); + } else { + onClose(); } }); }; From 311a81cbb9f7520334ce1448e6ad539d17bcbfe8 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 18 Dec 2024 12:31:20 +0800 Subject: [PATCH 2/6] fix: add top and bottom margin for modal --- .../accounts/roles/CreateCustomRoleDialog.tsx | 3 ++- .../roles/EditCustomRoleDialog/index.tsx | 16 +++++++++++++--- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/accounts/roles/CreateCustomRoleDialog.tsx b/src/components/accounts/roles/CreateCustomRoleDialog.tsx index e146e96a8..a127b9d83 100644 --- a/src/components/accounts/roles/CreateCustomRoleDialog.tsx +++ b/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, }, }} > diff --git a/src/components/accounts/roles/EditCustomRoleDialog/index.tsx b/src/components/accounts/roles/EditCustomRoleDialog/index.tsx index 7e10b41e2..181acf60a 100644 --- a/src/components/accounts/roles/EditCustomRoleDialog/index.tsx +++ b/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, @@ -74,6 +74,8 @@ export const EditCustomRoleDialog = ({ updateUserRole, getUsersWithRoles, } = useRoles((state) => state); + const containerRef = useRef(null); + const [minHeight, setMinHeight] = useState(0); const [activeTab, setActiveTab] = useState(tabToOpen); const [isSaving, setIsSaving] = useState(false); const [fieldErrors, updateFieldErrors] = useReducer( @@ -102,6 +104,12 @@ export const EditCustomRoleDialog = ({ }, ); + useEffect(() => { + setTimeout(() => { + setMinHeight(containerRef.current?.clientHeight); + }); + }, []); + const roleUsers = useMemo(() => { if (!usersWithRoles?.length) return []; @@ -218,7 +226,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)) { @@ -330,10 +337,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, }, }} > From 733d8b6e352321a6817f0d89d8ebaf9dee86c260 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 18 Dec 2024 13:48:50 +0800 Subject: [PATCH 3/6] fix: vqa updates --- src/components/accounts/instances/lang.js | 4 +-- src/components/accounts/instances/tabs.js | 32 +++++++++---------- src/components/accounts/roles/BaseRoles.tsx | 5 ++- .../accounts/roles/CreateCustomRoleDialog.tsx | 6 ++-- src/components/accounts/roles/CustomRoles.tsx | 8 +++-- .../roles/EditCustomRoleDialog/index.tsx | 6 ++-- .../tabs/Permissions/ResourceSelector.tsx | 24 +++++++++++--- .../tabs/Permissions/index.tsx | 9 ++++-- src/components/accounts/ui/header/index.js | 2 +- src/components/globals/NoPermission.jsx | 1 + src/views/accounts/instances/Roles.tsx | 2 +- 11 files changed, 63 insertions(+), 36 deletions(-) diff --git a/src/components/accounts/instances/lang.js b/src/components/accounts/instances/lang.js index 5ac609245..1373cd35c 100644 --- a/src/components/accounts/instances/lang.js +++ b/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', diff --git a/src/components/accounts/instances/tabs.js b/src/components/accounts/instances/tabs.js index 734cdc0e7..c1094b589 100644 --- a/src/components/accounts/instances/tabs.js +++ b/src/components/accounts/instances/tabs.js @@ -18,59 +18,59 @@ export const instanceTabs = [ label: 'Overview', sort: 0, }, - { - icon: , - filename: 'roles', - label: 'Roles & Permissions', - sort: 1, - }, { icon: , filename: 'users', label: 'Users', sort: 2, }, + { + icon: , + filename: 'roles', + label: 'Roles & Permissions', + sort: 3, + }, { icon: , filename: 'teams', - label: 'Teams', - sort: 3, + label: 'Team Access', + sort: 4, }, { icon: , filename: 'domains', label: 'Domains', - sort: 4, + sort: 5, }, { icon: , filename: 'usage', label: 'Usage', - sort: 5, + sort: 6, }, { icon: , filename: 'locales', label: 'Locales', - sort: 6, + sort: 7, }, { icon: , filename: 'apis', - label: 'APIs & Tokens', - sort: 7, + label: 'API Tokens', + sort: 8, }, { icon: , filename: 'webhooks', label: 'Webhooks', - sort: 8, + sort: 9, }, { icon: , filename: 'support', label: 'Support', - sort: 9, + sort: 10, }, // comment out for now // { @@ -83,6 +83,6 @@ export const instanceTabs = [ icon: , filename: 'settings', label: 'Settings', - sort: 10, + sort: 11, }, ]; diff --git a/src/components/accounts/roles/BaseRoles.tsx b/src/components/accounts/roles/BaseRoles.tsx index 37b673617..c1ce2e8c4 100644 --- a/src/components/accounts/roles/BaseRoles.tsx +++ b/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, }} > @@ -137,6 +137,9 @@ export const BaseRoles = ({ baseRoles }: BaseRolesProps) => { {BASE_ROLES_CONFIG[role.name.toLowerCase()]?.description} } + sx={{ + my: 0, + }} /> ))} diff --git a/src/components/accounts/roles/CreateCustomRoleDialog.tsx b/src/components/accounts/roles/CreateCustomRoleDialog.tsx index a127b9d83..e3ed621b4 100644 --- a/src/components/accounts/roles/CreateCustomRoleDialog.tsx +++ b/src/components/accounts/roles/CreateCustomRoleDialog.tsx @@ -393,7 +393,7 @@ export const CreateCustomRoleDialog = ({ - + Create Custom Role @@ -401,10 +401,10 @@ export const CreateCustomRoleDialog = ({ Creates a custom role that can have granular permissions applied to it - + onClose?.()}> - + `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 || ''} } + sx={{ + my: 0, + }} /> { evt.stopPropagation(); setAnchorEl(evt.currentTarget); setActiveZUID(role.ZUID); }} > - + - + Edit {roleData?.name} @@ -372,10 +372,10 @@ export const EditCustomRoleDialog = ({ Edit your custom role that can have granular permissions applied to it - + onClose?.()}> - + - + {option.type === 'model' ? : } - {option.label} - + primaryTypographyProps={{ + variant: 'body2', + color: 'text.secondary', + }} + primary={option.label} + /> ); }} @@ -133,6 +144,11 @@ export const ResourceSelector = ({ onKeyDown={(evt) => { evt.stopPropagation(); }} + slotProps={{ + paper: { + elevation: 8, + }, + }} /> ); }; diff --git a/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/index.tsx b/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/index.tsx index bc083ba8f..08953c9b2 100644 --- a/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/index.tsx +++ b/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/index.tsx @@ -95,14 +95,14 @@ export const Permissions = ({ return ( - + Resource Permissions Grant users access only to resources you specify - + ), }} + sx={{ + width: 240, + }} />