diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/PermissionAccordion/PermissionAccordion.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/PermissionAccordion/PermissionAccordion.tsx index 3e53e0e741..f6dcd31217 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/PermissionAccordion/PermissionAccordion.tsx +++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/PermissionAccordion/PermissionAccordion.tsx @@ -43,6 +43,30 @@ const StyledTitle = styled(StringTruncator)(({ theme }) => ({ marginRight: theme.spacing(1), })); +const getPermissionGroupName = ( + permission: IPermission +): [groupName: string, order: number] => { + const { name } = permission; + + if (name.endsWith('_PROJECT') || name === 'MOVE_FEATURE_TOGGLE') { + return ['Project', 0]; + } + if (name.endsWith('_FEATURE') || name === 'UPDATE_FEATURE_ENVIRONMENT') { + return ['Feature toggles', 1]; + } + if (name.endsWith('_VARIANTS')) { + return ['Variants', 2]; + } + if (name.endsWith('_STRATEGY')) { + return ['Strategies', 3]; + } + if (name.endsWith('_CHANGE_REQUEST')) { + return ['Change requests', 4]; + } + + return ['Other', 5]; +}; + export const PermissionAccordion: VFC = ({ title, permissions, @@ -78,6 +102,27 @@ export const PermissionAccordion: VFC = ({ [permissionCount, permissions] ); + const permissionGroups = useMemo( + () => + permissions + ?.reduce((prev, next) => { + const [groupName, order] = getPermissionGroupName(next); + const id = prev.findIndex(el => el.groupName === groupName); + if (id === -1) { + prev.push({ + groupName, + order, + groupPermissions: [next], + }); + } else { + prev[id].groupPermissions.push(next); + } + return prev; + }, [] as Array<{ groupName: string; order: number; groupPermissions: IPermission[] }>) + .sort((a, b) => a.order - b.order), + [permissions] + ); + return ( = ({ all {context} permissions - {permissions?.map((permission: IPermission) => { - return ( - ( + + + {groupName} + + {groupPermissions.map(permission => ( + + onPermissionChange( + permission + ) + } + color="primary" + /> } - onChange={() => - onPermissionChange(permission) - } - color="primary" + label={permission.displayName} /> - } - label={permission.displayName} - /> - ); - })} + ))} + + ) + )}