From 7d2fd172a543af686d74db8e8aa9f73558d87a58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 23 Nov 2023 09:43:15 +0000
Subject: [PATCH] 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)
---
 .../PermissionAccordion.tsx                   | 14 ++++-----
 frontend/src/utils/permissions.ts             | 31 ++++++++++++++++---
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/admin/roles/RoleForm/PermissionAccordion/PermissionAccordion.tsx b/frontend/src/component/admin/roles/RoleForm/PermissionAccordion/PermissionAccordion.tsx
index 5010cd3c77..ce50bb5fc0 100644
--- 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
index a205a1f1d0..7ebcf36d5f 100644
--- 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 = (