feat: group permissions on frontend

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<IEnvironmentPermissionAccordionProps> = ({
     title,
     permissions,
@@ -78,6 +102,27 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
         [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 (
         <Box
             sx={{
@@ -141,35 +186,50 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
                         all {context} permissions
                     </Button>
                     <Box>
-                        {permissions?.map((permission: IPermission) => {
+                        {permissionGroups.map(
-                            return (
+                            ({ groupName, groupPermissions }) => (
-                                <FormControlLabel
+                                <Box key={groupName} sx={{ mt: 1 }}>
-                                    sx={{
+                                    <Typography
-                                        minWidth: {
+                                        variant="body2"
-                                            sm: '300px',
+                                        color="text.secondary"
-                                            xs: 'auto',
+                                        sx={{ mb: 0.5 }}
-                                        },
+                                    >
-                                    }}
+                                        {groupName}
-                                    key={getRoleKey(permission)}
+                                    </Typography>
-                                    control={
+                                    {groupPermissions.map(permission => (
-                                        <Checkbox
+                                        <FormControlLabel
-                                            checked={
+                                            sx={{
-                                                checkedPermissions[
+                                                minWidth: {
-                                                    getRoleKey(permission)
+                                                    sm: '300px',
-                                                ]
+                                                    xs: 'auto',
-                                                    ? true
+                                                },
-                                                    : false
+                                            }}
+                                            key={getRoleKey(permission)}
+                                            control={
+                                                <Checkbox
+                                                    checked={
+                                                        checkedPermissions[
+                                                            getRoleKey(
+                                                                permission
+                                                            )
+                                                        ]
+                                                            ? true
+                                                            : false
+                                                    }
+                                                    onChange={() =>
+                                                        onPermissionChange(
+                                                            permission
+                                                        )
+                                                    }
+                                                    color="primary"
+                                                />
                                             }
-                                            onChange={() =>
+                                            label={permission.displayName}
-                                                onPermissionChange(permission)
-                                            }
-                                            color="primary"
                                         />
-                                    }
+                                    ))}
-                                    label={permission.displayName}
+                                </Box>
-                                />
+                            )
-                            );
+                        )}
-                        })}
                     </Box>
                 </AccordionDetails>
             </Accordion>