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,8 +186,17 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
                         all {context} permissions
                     </Button>
                     <Box>
-                        {permissions?.map((permission: IPermission) => {
+                        {permissionGroups.map(
-                            return (
+                            ({ groupName, groupPermissions }) => (
+                                <Box key={groupName} sx={{ mt: 1 }}>
+                                    <Typography
+                                        variant="body2"
+                                        color="text.secondary"
+                                        sx={{ mb: 0.5 }}
+                                    >
+                                        {groupName}
+                                    </Typography>
+                                    {groupPermissions.map(permission => (
                                         <FormControlLabel
                                             sx={{
                                                 minWidth: {
@@ -155,21 +209,27 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
                                                 <Checkbox
                                                     checked={
                                                         checkedPermissions[
-                                                    getRoleKey(permission)
+                                                            getRoleKey(
+                                                                permission
+                                                            )
                                                         ]
                                                             ? true
                                                             : false
                                                     }
                                                     onChange={() =>
-                                                onPermissionChange(permission)
+                                                        onPermissionChange(
+                                                            permission
+                                                        )
                                                     }
                                                     color="primary"
                                                 />
                                             }
                                             label={permission.displayName}
                                         />
-                            );
+                                    ))}
-                        })}
+                                </Box>
+                            )
+                        )}
                     </Box>
                 </AccordionDetails>
             </Accordion>