fix: role permissions UI improvements (#5388)

https://linear.app/unleash/issue/2-1657/role-permissions-improvements This PR includes 3 improvements: - Sort permissions alphabetically - Ensure we don't display duplicate permissions - Improve alignment of columns by using a proper grid ![image](https://github.com/Unleash/unleash/assets/14320932/7cb4a70e-8e39-4077-95a0-66f29b3c2e55)
Unleash · Nov 23, 2023 · 7d2fd17 · 7d2fd17
1 parent ce01687
commit 7d2fd17
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/frontend/src/component/admin/roles/RoleForm/PermissionAccordion/PermissionAccordion.tsx b/frontend/src/component/admin/roles/RoleForm/PermissionAccordion/PermissionAccordion.tsx
@@ -139,15 +139,15 @@ export const PermissionAccordion: VFC<IEnvironmentPermissionAccordionProps> = ({
                         {isAllChecked ? 'Unselect ' : 'Select '}
                         all {context} permissions
                     </Button>
-                    <Box>
+                    <Box
+                        display='grid'
+                        gridTemplateColumns={{
+                            sm: '1fr 1fr',
+                            xs: '1fr',
+                        }}
+                    >
                         {permissions?.map((permission: IPermission) => (
                             <FormControlLabel
-                                sx={{
-                                    minWidth: {
-                                        sm: '300px',
-                                        xs: 'auto',
-                                    },
-                                }}
                                 data-testid={getRoleKey(permission)}
                                 key={getRoleKey(permission)}
                                 control={

diff --git a/frontend/src/utils/permissions.ts b/frontend/src/utils/permissions.ts
@@ -75,8 +75,8 @@ export const toggleAllPermissions = (
 export const getCategorizedRootPermissions = (permissions: IPermission[]) => {
     const rootPermissions = permissions.filter(({ name }) => name !== 'ADMIN');
 
-    return rootPermissions
-        .reduce((categories: IPermissionCategory[], permission) => {
+    const categories = rootPermissions.reduce(
+        (categories: IPermissionCategory[], permission) => {
             const categoryLabel =
                 ROOT_PERMISSION_CATEGORIES.find((category) =>
                     category.permissions.includes(permission.name),
@@ -97,7 +97,21 @@ export const getCategorizedRootPermissions = (permissions: IPermission[]) => {
             }
 
             return categories;
-        }, [])
+        },
+        [],
+    );
+
+    return categories
+        .map((category) => ({
+            ...category,
+            permissions: [
+                ...new Set(
+                    category.permissions.sort((a, b) =>
+                        a.displayName.localeCompare(b.displayName),
+                    ),
+                ),
+            ],
+        }))
         .sort(sortCategories);
 };
 
@@ -146,7 +160,16 @@ export const getCategorizedProjectPermissions = (
         ),
     );
 
-    return categories;
+    return categories.map((category) => ({
+        ...category,
+        permissions: [
+            ...new Set(
+                category.permissions.sort((a, b) =>
+                    a.displayName.localeCompare(b.displayName),
+                ),
+            ),
+        ],
+    }));
 };
 
 export const flattenProjectPermissions = (