diff --git a/package-lock.json b/package-lock.json index a78f537e6..309bbc14b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,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", @@ -4852,9 +4852,9 @@ } }, "node_modules/@zesty-io/material": { - "version": "0.15.6", - "resolved": "https://registry.npmjs.org/@zesty-io/material/-/material-0.15.6.tgz", - "integrity": "sha512-zMWI1J+ArxhD7VX+A6JGRtwMO4oVNIPm+ZcjqugbGK1u/aaRRkRzhQ/ZsvTwHxOgK3rsatv6QWfYCttBTZF1KQ==", + "version": "0.15.7", + "resolved": "https://registry.npmjs.org/@zesty-io/material/-/material-0.15.7.tgz", + "integrity": "sha512-cfqKrX3MeB4d5rJAqRbasaG+8xQ1hIjH92KBG9LUl3oyNeH5KHkWaC7Ek5CnMlXlmJanoeEZRDkl8Qk/2JwKIg==", "license": "MIT", "dependencies": { "@emotion/react": "^11.9.0", diff --git a/package.json b/package.json index 7a000606d..b6a3181c4 100644 --- a/package.json +++ b/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", 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 e146e96a8..e3ed621b4 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, }, }} > @@ -392,7 +393,7 @@ export const CreateCustomRoleDialog = ({ - + Create Custom Role @@ -400,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); }} > - + a.label?.localeCompare(b.label), + ); }, [customRoles, baseRoles]); const defaultBaseRole = baseRoles?.find( diff --git a/src/components/accounts/roles/EditCustomRoleDialog/index.tsx b/src/components/accounts/roles/EditCustomRoleDialog/index.tsx index 49a4675aa..df51bacac 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, @@ -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(null); + const [minHeight, setMinHeight] = useState(0); const [activeTab, setActiveTab] = useState(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 = ({ - + Edit {roleData?.name} @@ -360,10 +373,10 @@ export const EditCustomRoleDialog = ({ Edit your custom role that can have granular permissions applied to it - + onClose?.()}> - + } > Save diff --git a/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/ResourceSelector.tsx b/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/ResourceSelector.tsx index a32a071d6..a44e7e6a1 100644 --- a/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/ResourceSelector.tsx +++ b/src/components/accounts/roles/EditCustomRoleDialog/tabs/Permissions/ResourceSelector.tsx @@ -107,7 +107,15 @@ export const ResourceSelector = ({ height: 36, }} > - + {option.type === 'model' ? : } - {option.label} - + primaryTypographyProps={{ + variant: 'body2', + color: 'text.secondary', + }} + primary={option.label} + /> ); }} 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, + }} />