From a9e9ae8c3e4d984431ee1b2c2ddc9a059a0d2053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 21 Jun 2023 08:16:37 +0100 Subject: [PATCH] feat: use new role components in project access (#4018) https://linear.app/unleash/issue/2-1143/adapt-project-roles-to-use-the-new-role-selector-and-role-description This PR further unifies roles, by having a single `IRole` interface to cover both types, and re-using the same components for project roles. --- .../admin/groups/GroupForm/GroupForm.tsx | 2 +- .../admin/roles/RoleForm/useRoleForm.ts | 2 +- frontend/src/component/admin/roles/Roles.tsx | 2 +- .../RoleDeleteDialog/RoleDeleteDialog.tsx | 2 +- .../RolePermissionsCell.tsx | 2 +- .../RolesActionsCell/RolesActionsCell.tsx | 2 +- .../roles/RolesTable/RolesCell/RolesCell.tsx | 2 +- .../admin/roles/RolesTable/RolesTable.tsx | 2 +- .../ServiceAccountModal.tsx | 2 +- .../ServiceAccountsTable.tsx | 2 +- .../admin/users/UserForm/UserForm.tsx | 2 +- .../admin/users/UsersList/UsersList.tsx | 2 +- .../admin/users/hooks/useAddUserForm.ts | 2 +- .../common/RoleSelect/RoleSelect.tsx | 9 +- .../ProjectAccessAssign.tsx | 52 +----- .../ProjectRoleDescription.tsx | 163 ------------------ ...tRoleDescriptionEnvironmentPermissions.tsx | 26 --- ...ojectRoleDescriptionProjectPermissions.tsx | 17 -- .../ProjectAccessRoleCell.tsx | 40 ----- .../ProjectAccessTable/ProjectAccessTable.tsx | 8 +- .../useProjectAccess/useProjectAccess.ts | 4 +- .../src/hooks/api/getters/useRole/useRole.ts | 2 +- .../hooks/api/getters/useRoles/useRoles.ts | 14 +- .../useServiceAccounts/useServiceAccounts.ts | 2 +- .../hooks/api/getters/useUsers/useUsers.ts | 2 +- frontend/src/interfaces/profile.ts | 2 +- frontend/src/interfaces/publicSignupTokens.ts | 2 +- frontend/src/interfaces/role.ts | 11 +- 28 files changed, 49 insertions(+), 331 deletions(-) delete mode 100644 frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx delete mode 100644 frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionEnvironmentPermissions/ProjectRoleDescriptionEnvironmentPermissions.tsx delete mode 100644 frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionProjectPermissions/ProjectRoleDescriptionProjectPermissions.tsx delete mode 100644 frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessRoleCell/ProjectAccessRoleCell.tsx diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx index 9d51f17073..1dfbf97850 100644 --- a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx +++ b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx @@ -10,7 +10,7 @@ import { ItemList } from 'component/common/ItemList/ItemList'; import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings'; import { Link } from 'react-router-dom'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { RoleSelect } from 'component/common/RoleSelect/RoleSelect'; diff --git a/frontend/src/component/admin/roles/RoleForm/useRoleForm.ts b/frontend/src/component/admin/roles/RoleForm/useRoleForm.ts index 4619bbcd9b..4b4062270f 100644 --- a/frontend/src/component/admin/roles/RoleForm/useRoleForm.ts +++ b/frontend/src/component/admin/roles/RoleForm/useRoleForm.ts @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import { IPermission, ICheckedPermissions } from 'interfaces/permissions'; -import IRole, { PredefinedRoleType } from 'interfaces/role'; +import { IRole, PredefinedRoleType } from 'interfaces/role'; import { useRoles } from 'hooks/api/getters/useRoles/useRoles'; import { permissionsToCheckedPermissions } from 'utils/permissions'; import { ROOT_ROLE_TYPE } from '@server/util/constants'; diff --git a/frontend/src/component/admin/roles/Roles.tsx b/frontend/src/component/admin/roles/Roles.tsx index 7d0fb0b52d..e6ab2a9cd5 100644 --- a/frontend/src/component/admin/roles/Roles.tsx +++ b/frontend/src/component/admin/roles/Roles.tsx @@ -17,7 +17,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { Add } from '@mui/icons-material'; import { UPDATE_ROLE } from '@server/types/permissions'; import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; const StyledPageContent = styled(PageContent)(({ theme }) => ({ '& .page-header': { diff --git a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialog.tsx b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialog.tsx index cdbda43d97..e405f5b371 100644 --- a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialog.tsx +++ b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialog.tsx @@ -3,7 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { useServiceAccounts } from 'hooks/api/getters/useServiceAccounts/useServiceAccounts'; import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { RoleDeleteDialogUsers } from './RoleDeleteDialogUsers/RoleDeleteDialogUsers'; import { RoleDeleteDialogServiceAccounts } from './RoleDeleteDialogServiceAccounts/RoleDeleteDialogServiceAccounts'; import { useGroups } from 'hooks/api/getters/useGroups/useGroups'; diff --git a/frontend/src/component/admin/roles/RolesTable/RolePermissionsCell/RolePermissionsCell.tsx b/frontend/src/component/admin/roles/RolesTable/RolePermissionsCell/RolePermissionsCell.tsx index 0560e85911..6934665c86 100644 --- a/frontend/src/component/admin/roles/RolesTable/RolePermissionsCell/RolePermissionsCell.tsx +++ b/frontend/src/component/admin/roles/RolesTable/RolePermissionsCell/RolePermissionsCell.tsx @@ -1,7 +1,7 @@ import { VFC } from 'react'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { useRole } from 'hooks/api/getters/useRole/useRole'; import { RoleDescription } from 'component/common/RoleDescription/RoleDescription'; import { PREDEFINED_ROLE_TYPES } from '@server/util/constants'; diff --git a/frontend/src/component/admin/roles/RolesTable/RolesActionsCell/RolesActionsCell.tsx b/frontend/src/component/admin/roles/RolesTable/RolesActionsCell/RolesActionsCell.tsx index e8ee369a3d..b7cf6d68b0 100644 --- a/frontend/src/component/admin/roles/RolesTable/RolesActionsCell/RolesActionsCell.tsx +++ b/frontend/src/component/admin/roles/RolesTable/RolesActionsCell/RolesActionsCell.tsx @@ -3,7 +3,7 @@ import { Box, styled } from '@mui/material'; import { PREDEFINED_ROLE_TYPES } from '@server/util/constants'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { VFC } from 'react'; const StyledBox = styled(Box)(() => ({ diff --git a/frontend/src/component/admin/roles/RolesTable/RolesCell/RolesCell.tsx b/frontend/src/component/admin/roles/RolesTable/RolesCell/RolesCell.tsx index 8131e3b257..81294f189e 100644 --- a/frontend/src/component/admin/roles/RolesTable/RolesCell/RolesCell.tsx +++ b/frontend/src/component/admin/roles/RolesTable/RolesCell/RolesCell.tsx @@ -1,7 +1,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Badge } from 'component/common/Badge/Badge'; import { styled } from '@mui/material'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { PREDEFINED_ROLE_TYPES } from '@server/util/constants'; diff --git a/frontend/src/component/admin/roles/RolesTable/RolesTable.tsx b/frontend/src/component/admin/roles/RolesTable/RolesTable.tsx index e52c9a825e..32f4ada533 100644 --- a/frontend/src/component/admin/roles/RolesTable/RolesTable.tsx +++ b/frontend/src/component/admin/roles/RolesTable/RolesTable.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from 'react'; import { TablePlaceholder, VirtualizedTable } from 'component/common/Table'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import IRole, { PredefinedRoleType } from 'interfaces/role'; +import { IRole, PredefinedRoleType } from 'interfaces/role'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { PageContent } from 'component/common/PageContent/PageContent'; diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx index d3ad103484..38f74fd654 100644 --- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx +++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx @@ -33,7 +33,7 @@ import { INewPersonalAPIToken } from 'interfaces/personalAPIToken'; import { ServiceAccountTokens } from './ServiceAccountTokens/ServiceAccountTokens'; import { IServiceAccount } from 'interfaces/service-account'; import { RoleSelect } from 'component/common/RoleSelect/RoleSelect'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; const StyledForm = styled('form')(() => ({ display: 'flex', diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx index 8013a338aa..bcf457d7c2 100644 --- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx +++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx @@ -1,7 +1,7 @@ import { useMemo, useState } from 'react'; import { TablePlaceholder, VirtualizedTable } from 'component/common/Table'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { PageContent } from 'component/common/PageContent/PageContent'; diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/frontend/src/component/admin/users/UserForm/UserForm.tsx index 6125ea605d..f9e5e70ab0 100644 --- a/frontend/src/component/admin/users/UserForm/UserForm.tsx +++ b/frontend/src/component/admin/users/UserForm/UserForm.tsx @@ -5,7 +5,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { EDIT } from 'constants/misc'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { RoleSelect } from 'component/common/RoleSelect/RoleSelect'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; const StyledForm = styled('form')(() => ({ display: 'flex', diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index 7b6ec6df6e..988af53a65 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -7,7 +7,7 @@ import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded'; import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi'; import { IUser } from 'interfaces/user'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { useUsersPlan } from 'hooks/useUsersPlan'; diff --git a/frontend/src/component/admin/users/hooks/useAddUserForm.ts b/frontend/src/component/admin/users/hooks/useAddUserForm.ts index 83db52a2c7..f23766a5f8 100644 --- a/frontend/src/component/admin/users/hooks/useAddUserForm.ts +++ b/frontend/src/component/admin/users/hooks/useAddUserForm.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { useRoles } from 'hooks/api/getters/useRoles/useRoles'; const useCreateUserForm = ( diff --git a/frontend/src/component/common/RoleSelect/RoleSelect.tsx b/frontend/src/component/common/RoleSelect/RoleSelect.tsx index 0f3df308b8..8e373dd9af 100644 --- a/frontend/src/component/common/RoleSelect/RoleSelect.tsx +++ b/frontend/src/component/common/RoleSelect/RoleSelect.tsx @@ -5,9 +5,10 @@ import { styled, } from '@mui/material'; import { useRoles } from 'hooks/api/getters/useRoles/useRoles'; -import IRole from 'interfaces/role'; +import { IRole, PredefinedRoleType } from 'interfaces/role'; import { RoleDescription } from '../RoleDescription/RoleDescription'; import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender'; +import { ROOT_ROLE_TYPE } from '@server/util/constants'; const StyledRoleOption = styled('div')(({ theme }) => ({ display: 'flex', @@ -20,18 +21,22 @@ const StyledRoleOption = styled('div')(({ theme }) => ({ interface IRoleSelectProps extends Partial> { + type?: PredefinedRoleType; value: IRole | null; setValue: (role: IRole | null) => void; required?: boolean; } export const RoleSelect = ({ + type = ROOT_ROLE_TYPE, value, setValue, required, ...rest }: IRoleSelectProps) => { - const { roles } = useRoles(); + const { roles: rootRoles, projectRoles } = useRoles(); + + const roles = type === ROOT_ROLE_TYPE ? rootRoles : projectRoles; const renderRoleOption = ( props: React.HTMLAttributes, diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx index e6e51c8778..6a2f3fa5ea 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx @@ -16,7 +16,7 @@ import useProjectAccess, { ENTITY_TYPE, IProjectAccess, } from 'hooks/api/getters/useProjectAccess/useProjectAccess'; -import { IProjectRole } from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import FormTemplate from 'component/common/FormTemplate/FormTemplate'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -25,7 +25,6 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { IUser } from 'interfaces/user'; import { IGroup } from 'interfaces/group'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { ProjectRoleDescription } from './ProjectRoleDescription/ProjectRoleDescription'; import { useNavigate } from 'react-router-dom'; import { GO_BACK } from 'constants/navigate'; import { @@ -36,6 +35,8 @@ import { } from 'utils/testIds'; import { caseInsensitiveSearch } from 'utils/search'; import { IServiceAccount } from 'interfaces/service-account'; +import { RoleSelect } from 'component/common/RoleSelect/RoleSelect'; +import { PROJECT_ROLE_TYPE } from '@server/util/constants'; const StyledForm = styled('form')(() => ({ display: 'flex', @@ -82,15 +83,6 @@ const StyledUserOption = styled('div')(({ theme }) => ({ }, })); -const StyledRoleOption = styled('div')(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - '& > span:last-of-type': { - fontSize: theme.fontSizes.smallerBody, - color: theme.palette.text.secondary, - }, -})); - interface IAccessOption { id: number; entity: IUser | IGroup; @@ -103,7 +95,7 @@ interface IProjectAccessAssignProps { users: IUser[]; serviceAccounts: IServiceAccount[]; groups: IGroup[]; - roles: IProjectRole[]; + roles: IRole[]; } export const ProjectAccessAssign = ({ @@ -190,7 +182,7 @@ export const ProjectAccessAssign = ({ id === selected?.entity.id && type === selected?.type ) ); - const [role, setRole] = useState( + const [role, setRole] = useState( roles.find(({ id }) => id === selected?.entity.roleId) ?? null ); @@ -317,18 +309,6 @@ export const ProjectAccessAssign = ({ ); }; - const renderRoleOption = ( - props: React.HTMLAttributes, - option: IProjectRole - ) => ( -
  • - - {option.name} - {option.description} - -
    • - ); - const isValid = selectedOptions.length > 0 && role; return ( @@ -451,29 +431,13 @@ export const ProjectAccessAssign = ({ Select the role to assign for this project - setRole(newValue)} - options={roles} - renderOption={renderRoleOption} - getOptionLabel={option => option.name} - renderInput={params => ( - - )} + setValue={role => setRole(role || null)} /> - - } - /> diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx deleted file mode 100644 index a33f374298..0000000000 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { styled, SxProps, Theme } from '@mui/material'; -import { ForwardedRef, forwardRef, useMemo, VFC } from 'react'; -import { useRole } from 'hooks/api/getters/useRole/useRole'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import useProjectAccess from 'hooks/api/getters/useProjectAccess/useProjectAccess'; -import { ProjectRoleDescriptionProjectPermissions } from './ProjectRoleDescriptionProjectPermissions/ProjectRoleDescriptionProjectPermissions'; -import { ProjectRoleDescriptionEnvironmentPermissions } from './ProjectRoleDescriptionEnvironmentPermissions/ProjectRoleDescriptionEnvironmentPermissions'; - -const StyledDescription = styled('div', { - shouldForwardProp: prop => - prop !== 'roleId' && prop !== 'popover' && prop !== 'sx', -})(({ theme, popover }) => ({ - width: '100%', - maxWidth: theme.spacing(50), - padding: theme.spacing(3), - backgroundColor: popover - ? theme.palette.background.paper - : theme.palette.neutral.light, - color: theme.palette.text.secondary, - fontSize: theme.fontSizes.smallBody, - borderRadius: theme.shape.borderRadiusMedium, -})); - -const StyledDescriptionBlock = styled('div')(({ theme }) => ({ - '& p:last-child': { - marginBottom: theme.spacing(2), - }, -})); - -const StyledDescriptionHeader = styled('p')(({ theme }) => ({ - color: theme.palette.text.primary, - fontSize: theme.fontSizes.smallBody, - fontWeight: theme.fontWeight.bold, - marginBottom: theme.spacing(2), -})); - -const StyledDescriptionSubHeader = styled('p')(({ theme }) => ({ - color: theme.palette.text.primary, - fontSize: theme.fontSizes.smallBody, - marginBottom: theme.spacing(1), -})); - -interface IProjectRoleDescriptionStyleProps { - popover?: boolean; - className?: string; - sx?: SxProps; -} - -interface IProjectRoleDescriptionProps - extends IProjectRoleDescriptionStyleProps { - roleId: number; - projectId: string; -} - -export const ProjectRoleDescription: VFC = - forwardRef( - ( - { - roleId, - projectId, - className, - sx, - ...props - }: IProjectRoleDescriptionProps, - ref: ForwardedRef - ) => { - const { role } = useRole(roleId.toString()); - const { access } = useProjectAccess(projectId); - const accessRole = access?.roles.find(role => role.id === roleId); - - const environments = useMemo(() => { - const environments = new Set(); - role?.permissions - ?.filter((permission: any) => permission.environment) - .forEach((permission: any) => { - environments.add(permission.environment); - }); - return [...environments].sort(); - }, [role]); - - const projectPermissions = useMemo(() => { - return role?.permissions?.filter( - (permission: any) => !permission.environment - ); - }, [role]); - - return ( - - 0 - )} - show={ - <> - - - Project permissions - - - - - - } - /> - - - Environment permissions - - {environments.map(environment => ( -
    - - {environment} - - - - -
    - ))} - - } - /> - - } - elseShow={ - <> - - {accessRole?.name} - - - {accessRole?.description} - - - } - /> -     - ); - } - ); diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionEnvironmentPermissions/ProjectRoleDescriptionEnvironmentPermissions.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionEnvironmentPermissions/ProjectRoleDescriptionEnvironmentPermissions.tsx deleted file mode 100644 index 6c0701278d..0000000000 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionEnvironmentPermissions/ProjectRoleDescriptionEnvironmentPermissions.tsx +++ /dev/null @@ -1,26 +0,0 @@ -interface IProjectRoleDescriptionEnvironmentPermissionsProps { - environment: string; - permissions: any[]; -} - -export const ProjectRoleDescriptionEnvironmentPermissions = ({ - environment, - permissions, -}: IProjectRoleDescriptionEnvironmentPermissionsProps) => ( - <> - {[ - ...new Set( - permissions - .filter( - (permission: any) => - permission.environment === environment - ) - .map((permission: any) => permission.displayName) - ), - ] - .sort() - .map((permission: any) => ( -

    {permission}

    - ))} - -); diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionProjectPermissions/ProjectRoleDescriptionProjectPermissions.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionProjectPermissions/ProjectRoleDescriptionProjectPermissions.tsx deleted file mode 100644 index cb2cc73aed..0000000000 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescriptionProjectPermissions/ProjectRoleDescriptionProjectPermissions.tsx +++ /dev/null @@ -1,17 +0,0 @@ -interface IProjectRoleDescriptionProjectPermissionsProps { - permissions: any[]; -} - -export const ProjectRoleDescriptionProjectPermissions = ({ - permissions, -}: IProjectRoleDescriptionProjectPermissionsProps) => ( - <> - {permissions - ?.filter((permission: any) => !permission.environment) - .map((permission: any) => permission.displayName) - .sort() - .map((permission: any) => ( -

    {permission}

    - ))} - -); diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessRoleCell/ProjectAccessRoleCell.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessRoleCell/ProjectAccessRoleCell.tsx deleted file mode 100644 index 661ed727b7..0000000000 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessRoleCell/ProjectAccessRoleCell.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; -import { VFC } from 'react'; -import { ProjectRoleDescription } from 'component/project/ProjectAccess/ProjectAccessAssign/ProjectRoleDescription/ProjectRoleDescription'; -import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; - -interface IProjectAccessRoleCellProps { - roleId: number; - projectId: string; - value?: string; - emptyText?: string; -} - -export const ProjectAccessRoleCell: VFC = ({ - roleId, - projectId, - value, - emptyText, -}) => { - if (!value) return {emptyText}; - - return ( - - - } - tooltipProps={{ - maxWidth: 500, - maxHeight: 600, - }} - > - {value} - - - ); -}; diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx index 182e5c2bb4..572f3320e2 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx @@ -43,7 +43,7 @@ import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton import { ProjectAccessCreate } from 'component/project/ProjectAccess/ProjectAccessCreate/ProjectAccessCreate'; import { ProjectAccessEditUser } from 'component/project/ProjectAccess/ProjectAccessEditUser/ProjectAccessEditUser'; import { ProjectAccessEditGroup } from 'component/project/ProjectAccess/ProjectAccessEditGroup/ProjectAccessEditGroup'; -import { ProjectAccessRoleCell } from './ProjectAccessRoleCell/ProjectAccessRoleCell'; +import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell'; import { PA_ASSIGN_BUTTON_ID, PA_EDIT_BUTTON_ID, @@ -168,11 +168,7 @@ export const ProjectAccessTable: VFC = () => { access?.roles.find(({ id }) => id === row.entity.roleId) ?.name, Cell: ({ value, row: { original: row } }: any) => ( - + ), maxWidth: 125, filterName: 'role', diff --git a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts index c33e0323f6..e5797a9037 100644 --- a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts +++ b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts @@ -2,7 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr'; import { useState, useEffect, useMemo } from 'react'; import { formatApiPath } from 'utils/formatPath'; import handleErrorResponses from '../httpErrorResponseHandler'; -import { IProjectRole } from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { IGroup } from 'interfaces/group'; import { IUser } from 'interfaces/user'; import { mapGroupUsers } from '../useGroup/useGroup'; @@ -30,7 +30,7 @@ export interface IProjectAccessGroup extends IGroup { export interface IProjectAccessOutput { users: IProjectAccessUser[]; groups: IProjectAccessGroup[]; - roles: IProjectRole[]; + roles: IRole[]; rows: IProjectAccess[]; } diff --git a/frontend/src/hooks/api/getters/useRole/useRole.ts b/frontend/src/hooks/api/getters/useRole/useRole.ts index d01aaa20be..46f34bbfce 100644 --- a/frontend/src/hooks/api/getters/useRole/useRole.ts +++ b/frontend/src/hooks/api/getters/useRole/useRole.ts @@ -2,7 +2,7 @@ import { SWRConfiguration } from 'swr'; import { useMemo } from 'react'; import { formatApiPath } from 'utils/formatPath'; import handleErrorResponses from '../httpErrorResponseHandler'; -import IRole, { IRoleWithPermissions } from 'interfaces/role'; +import { IRole, IRoleWithPermissions } from 'interfaces/role'; import useUiConfig from '../useUiConfig/useUiConfig'; import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR'; diff --git a/frontend/src/hooks/api/getters/useRoles/useRoles.ts b/frontend/src/hooks/api/getters/useRoles/useRoles.ts index 70723795fc..506875867e 100644 --- a/frontend/src/hooks/api/getters/useRoles/useRoles.ts +++ b/frontend/src/hooks/api/getters/useRoles/useRoles.ts @@ -1,4 +1,4 @@ -import IRole, { IProjectRole } from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { useMemo } from 'react'; import { formatApiPath } from 'utils/formatPath'; import handleErrorResponses from '../httpErrorResponseHandler'; @@ -11,7 +11,15 @@ import { PREDEFINED_ROLE_TYPES, } from '@server/util/constants'; -export const useRoles = () => { +interface IUseRolesOutput { + roles: IRole[]; + projectRoles: IRole[]; + loading: boolean; + refetch: () => void; + error?: Error; +} + +export const useRoles = (): IUseRolesOutput => { const { isEnterprise, uiConfig } = useUiConfig(); const { data, error, mutate } = useConditionalSWR( @@ -56,7 +64,7 @@ export const useRoles = () => { .filter(({ type }: IRole) => PROJECT_ROLE_TYPES.includes(type) ) - .sort(sortRoles) ?? []) as IProjectRole[], + .sort(sortRoles) ?? []) as IRole[], loading: !error && !data, refetch: () => mutate(), error, diff --git a/frontend/src/hooks/api/getters/useServiceAccounts/useServiceAccounts.ts b/frontend/src/hooks/api/getters/useServiceAccounts/useServiceAccounts.ts index 54de390260..078fcb1084 100644 --- a/frontend/src/hooks/api/getters/useServiceAccounts/useServiceAccounts.ts +++ b/frontend/src/hooks/api/getters/useServiceAccounts/useServiceAccounts.ts @@ -1,4 +1,4 @@ -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; import { IServiceAccount } from 'interfaces/service-account'; import { useMemo } from 'react'; import { formatApiPath } from 'utils/formatPath'; diff --git a/frontend/src/hooks/api/getters/useUsers/useUsers.ts b/frontend/src/hooks/api/getters/useUsers/useUsers.ts index f02ef9f7d8..ade6d255e6 100644 --- a/frontend/src/hooks/api/getters/useUsers/useUsers.ts +++ b/frontend/src/hooks/api/getters/useUsers/useUsers.ts @@ -3,7 +3,7 @@ import { useMemo } from 'react'; import { formatApiPath } from 'utils/formatPath'; import handleErrorResponses from '../httpErrorResponseHandler'; import { IUser } from 'interfaces/user'; -import IRole from 'interfaces/role'; +import { IRole } from 'interfaces/role'; interface IUseUsersOutput { users: IUser[]; diff --git a/frontend/src/interfaces/profile.ts b/frontend/src/interfaces/profile.ts index 777ce75130..7cbe28657f 100644 --- a/frontend/src/interfaces/profile.ts +++ b/frontend/src/interfaces/profile.ts @@ -1,4 +1,4 @@ -import IRole from './role'; +import { IRole } from './role'; export interface IProfile { rootRole: IRole; diff --git a/frontend/src/interfaces/publicSignupTokens.ts b/frontend/src/interfaces/publicSignupTokens.ts index 391ce1d2ef..767ba408e5 100644 --- a/frontend/src/interfaces/publicSignupTokens.ts +++ b/frontend/src/interfaces/publicSignupTokens.ts @@ -1,4 +1,4 @@ -import IRole from './role'; +import { IRole } from './role'; import { IUser } from './user'; export interface ICreateInvitedUser { diff --git a/frontend/src/interfaces/role.ts b/frontend/src/interfaces/role.ts index e2916413b3..ff0f9c42de 100644 --- a/frontend/src/interfaces/role.ts +++ b/frontend/src/interfaces/role.ts @@ -5,7 +5,7 @@ export type PredefinedRoleType = | typeof ROOT_ROLE_TYPE | typeof PROJECT_ROLE_TYPE; -interface IRole { +export interface IRole { id: number; name: string; project: string | null; @@ -16,12 +16,3 @@ interface IRole { export interface IRoleWithPermissions extends IRole { permissions: IPermission[]; } - -export interface IProjectRole { - id: number; - name: string; - description: string; - type: string; -} - -export default IRole;