RBAC: Only display unique permissions in list (#54074)

* PermissionList: Only display one row for each user, team or builtin role

public/app/core/components/AccessControl/PermissionList.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { PermissionListItem } from './PermissionListItem';
 import { ResourcePermission } from './types';
 
 interface Props {
   title: string;
+  compareKey: 'builtInRole' | 'userLogin' | 'team';
   items: ResourcePermission[];
   permissionLevels: string[];
   canSet: boolean;
@@ -12,8 +13,24 @@ interface Props {
   onChange: (resourcePermission: ResourcePermission, permission: string) => void;
 }
 
-export const PermissionList = ({ title, items, permissionLevels, canSet, onRemove, onChange }: Props) => {
-  if (items.length === 0) {
+export const PermissionList = ({ title, items, compareKey, permissionLevels, canSet, onRemove, onChange }: Props) => {
+  const computed = useMemo(() => {
+    const keep: { [key: string]: ResourcePermission } = {};
+    for (let item of items) {
+      const key = item[compareKey]!;
+      if (!keep[key]) {
+        keep[key] = item;
+        continue;
+      }
+
+      if (item.actions.length > keep[key].actions.length) {
+        keep[key] = item;
+      }
+    }
+    return Object.keys(keep).map((k) => keep[k]);
+  }, [items, compareKey]);
+
+  if (computed.length === 0) {
     return null;
   }
 
@@ -31,7 +48,7 @@ export const PermissionList = ({ title, items, permissionLevels, canSet, onRemov
           </tr>
         </thead>
         <tbody>
-          {items.map((item, index) => (
+          {computed.map((item, index) => (
             <PermissionListItem
               item={item}
               onRemove={onRemove}

public/app/core/components/AccessControl/Permissions.tsx

@@ -102,7 +102,7 @@ export const Permissions = ({
     () =>
       sortBy(
         items.filter((i) => i.teamId),
-        ['team']
+        ['team', 'isManaged']
       ),
     [items]
   );
@@ -110,7 +110,7 @@ export const Permissions = ({
     () =>
       sortBy(
         items.filter((i) => i.userId),
-        ['userLogin']
+        ['userLogin', 'isManaged']
       ),
     [items]
   );
@@ -118,7 +118,7 @@ export const Permissions = ({
     () =>
       sortBy(
         items.filter((i) => i.builtInRole),
-        ['builtInRole']
+        ['builtInRole', 'isManaged']
       ),
     [items]
   );
@@ -148,6 +148,7 @@ export const Permissions = ({
         <PermissionList
           title="Role"
           items={builtInRoles}
+          compareKey={'builtInRole'}
           permissionLevels={desc.permissions}
           onChange={onChange}
           onRemove={onRemove}
@@ -156,6 +157,7 @@ export const Permissions = ({
         <PermissionList
           title="User"
           items={users}
+          compareKey={'userLogin'}
           permissionLevels={desc.permissions}
           onChange={onChange}
           onRemove={onRemove}
@@ -164,6 +166,7 @@ export const Permissions = ({
         <PermissionList
           title="Team"
           items={teams}
+          compareKey={'team'}
           permissionLevels={desc.permissions}
           onChange={onChange}
           onRemove={onRemove}