-
-
Notifications
You must be signed in to change notification settings - Fork 723
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add usage info to project role deletion dialog (#4464)
## About the changes <!-- Describe the changes introduced. What are they and why are they being introduced? Feel free to also add screenshots or steps to view the changes if they're visual. --> Adds projects user and group -usage information to the dialog shown when user wants to delete a project role <img width="670" alt="Skjermbilde 2023-08-10 kl 08 28 40" src="https://github.com/Unleash/unleash/assets/707867/a1df961b-2d0f-419d-b9bf-fedef896a84e"> --------- Co-authored-by: Nuno Góis <[email protected]>
- Loading branch information
Showing
16 changed files
with
453 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
...s/RolesTable/RoleDeleteDialog/RoleDeleteDialogProjectRole/RoleDeleteDialogProjectRole.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { Alert, styled } from '@mui/material'; | ||
| import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | ||
| import { Dialogue } from 'component/common/Dialogue/Dialogue'; | ||
| import { IRole } from 'interfaces/role'; | ||
| import { useProjectRoleAccessUsage } from 'hooks/api/getters/useProjectRoleAccessUsage/useProjectRoleAccessUsage'; | ||
| import { RoleDeleteDialogProjectRoleTable } from './RoleDeleteDialogProjectRoleTable'; | ||
|
|
||
| const StyledTableContainer = styled('div')(({ theme }) => ({ | ||
| marginTop: theme.spacing(1.5), | ||
| })); | ||
|
|
||
| const StyledLabel = styled('p')(({ theme }) => ({ | ||
| marginTop: theme.spacing(3), | ||
| })); | ||
|
|
||
| interface IRoleDeleteDialogProps { | ||
| role?: IRole; | ||
| open: boolean; | ||
| setOpen: React.Dispatch<React.SetStateAction<boolean>>; | ||
| onConfirm: (role: IRole) => void; | ||
| } | ||
|
|
||
| export const RoleDeleteDialogProjectRole = ({ | ||
| role, | ||
| open, | ||
| setOpen, | ||
| onConfirm, | ||
| }: IRoleDeleteDialogProps) => { | ||
| const { projects } = useProjectRoleAccessUsage(role?.id); | ||
|
|
||
| const entitiesWithRole = Boolean(projects?.length); | ||
|
|
||
| return ( | ||
| <Dialogue | ||
| title="Delete project role?" | ||
| open={open} | ||
| primaryButtonText="Delete role" | ||
| secondaryButtonText="Cancel" | ||
| disabledPrimaryButton={entitiesWithRole} | ||
| onClick={() => onConfirm(role!)} | ||
| onClose={() => { | ||
| setOpen(false); | ||
| }} | ||
| maxWidth="md" | ||
| > | ||
| <ConditionallyRender | ||
| condition={entitiesWithRole} | ||
| show={ | ||
| <> | ||
| <Alert severity="error"> | ||
| You are not allowed to delete a role that is | ||
| currently in use. Please change the role of the | ||
| following entities first: | ||
| </Alert> | ||
| <ConditionallyRender | ||
| condition={Boolean(projects?.length)} | ||
| show={ | ||
| <> | ||
| <StyledLabel> | ||
| Role assigned in {projects?.length}{' '} | ||
| projects: | ||
| </StyledLabel> | ||
| <StyledTableContainer> | ||
| <RoleDeleteDialogProjectRoleTable | ||
| projects={projects} | ||
| /> | ||
| </StyledTableContainer> | ||
| </> | ||
| } | ||
| /> | ||
| </> | ||
| } | ||
| elseShow={ | ||
| <p> | ||
| You are about to delete role:{' '} | ||
| <strong>{role?.name}</strong> | ||
| </p> | ||
| } | ||
| /> | ||
| </Dialogue> | ||
| ); | ||
| }; |
92 changes: 92 additions & 0 deletions
92
...esTable/RoleDeleteDialog/RoleDeleteDialogProjectRole/RoleDeleteDialogProjectRoleTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { VirtualizedTable } from 'component/common/Table'; | ||
| import { useMemo, useState } from 'react'; | ||
| import { useTable, useSortBy, useFlexLayout, Column } from 'react-table'; | ||
| import { sortTypes } from 'utils/sortTypes'; | ||
| import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; | ||
| import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; | ||
| import { IProjectRoleUsageCount } from 'interfaces/project'; | ||
| import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; | ||
|
|
||
| interface IRoleDeleteDialogProjectRoleTableProps { | ||
| projects: IProjectRoleUsageCount[]; | ||
| } | ||
|
|
||
| export const RoleDeleteDialogProjectRoleTable = ({ | ||
| projects, | ||
| }: IRoleDeleteDialogProjectRoleTableProps) => { | ||
| const [initialState] = useState(() => ({ | ||
| sortBy: [{ id: 'name' }], | ||
| })); | ||
|
|
||
| const columns = useMemo( | ||
| () => | ||
| [ | ||
| { | ||
| id: 'name', | ||
| Header: 'Project name', | ||
| accessor: (row: any) => row.project || '', | ||
| minWidth: 200, | ||
| Cell: ({ row: { original: item } }: any) => ( | ||
| <LinkCell | ||
| title={item.project} | ||
| to={`/projects/${item.project}`} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| id: 'users', | ||
| Header: 'Assigned users', | ||
| accessor: (row: any) => | ||
| row.userCount === 1 | ||
| ? '1 user' | ||
| : `${row.userCount} users`, | ||
| Cell: TextCell, | ||
| maxWidth: 150, | ||
| }, | ||
| { | ||
| id: 'serviceAccounts', | ||
| Header: 'Service accounts', | ||
| accessor: (row: any) => | ||
| row.serviceAccountCount === 1 | ||
| ? '1 account' | ||
| : `${row.serviceAccountCount} accounts`, | ||
| Cell: TextCell, | ||
| maxWidth: 150, | ||
| }, | ||
| { | ||
| id: 'groups', | ||
| Header: 'Assigned groups', | ||
| accessor: (row: any) => | ||
| row.groupCount === 1 | ||
| ? '1 group' | ||
| : `${row.groupCount} groups`, | ||
| Cell: TextCell, | ||
| maxWidth: 150, | ||
| }, | ||
| ] as Column<IProjectRoleUsageCount>[], | ||
| [] | ||
| ); | ||
|
|
||
| const { headerGroups, rows, prepareRow } = useTable( | ||
| { | ||
| columns, | ||
| data: projects, | ||
| initialState, | ||
| sortTypes, | ||
| autoResetHiddenColumns: false, | ||
| autoResetSortBy: false, | ||
| disableSortRemove: true, | ||
| disableMultiSort: true, | ||
| }, | ||
| useSortBy, | ||
| useFlexLayout | ||
| ); | ||
|
|
||
| return ( | ||
| <VirtualizedTable | ||
| rows={rows} | ||
| headerGroups={headerGroups} | ||
| prepareRow={prepareRow} | ||
| /> | ||
| ); | ||
| }; |
File renamed without changes.
Oops, something went wrong.