feat: create permissions tab

Author: dcoa

src/authz-module/components/PermissionTable.tsx

@@ -0,0 +1,44 @@
+import { Check, Close } from "@openedx/paragon/icons";
+import { actionsDictionary } from "./RoleCard/constants";
+import { Icon } from "@openedx/paragon";
+
+const PermissionTable = ({ permissionsTable, roles }) => (
+  <table className="pgn__data-table bg-light-100">
+    <thead>
+      <tr>
+        <th className='bg-light-100'></th>
+        {roles.map(role => (
+          <th key={role.name} className="text-center bg-light-100">{role.name}</th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {permissionsTable.map(resourceGroup => (
+        <>
+          <tr className="bg-info-100 text-primary lead">
+            <td colSpan={roles.length + 1} className="text-start py-3">
+              <strong>{resourceGroup.resourceLabel}</strong>
+            </td>
+          </tr>
+          {
+            resourceGroup.permissions.map(permission => (
+              <tr key={permission.key} className='border-top'>
+                <td className="text-start d-flex align-items-center">{
+                  <Icon className="d-inline-block mr-2" size="sm" src={actionsDictionary[permission.actionKey]} />}
+                  {permission.label}
+                </td>
+                {roles.map(role => (
+                  <td key={role.name} className="text-center">
+                    {permission.roles[role.name] ? <Icon className="d-inline-block" src={Check} /> : <Icon className="text-danger d-inline-block" src={Close} />}
+                  </td>
+                ))}
+              </tr>
+            ))
+          }
+        </>
+      ))}
+    </tbody>
+  </table>
+);
+
+export default PermissionTable;

src/authz-module/libraries-manager/LibrariesTeamManager.tsx

@@ -5,8 +5,9 @@ import { useLibrary } from '@src/authz-module/data/hooks';
 import TeamTable from './components/TeamTable';
 import AuthZLayout from '../components/AuthZLayout';
 import RoleCard from '../components/RoleCard';
+import PermissionTable from '../components/PermissionTable';
 import { useLibraryAuthZ } from './context';
-import { buildPermissionsByRoleMatrix } from './utils';
+import { buildPermissionMatrix, buildPermissionsByRoleMatrix } from './utils';
 
 import messages from './messages';
 
@@ -25,6 +26,11 @@ const LibrariesTeamManager = () => {
     }),
   })), [roles, permissions, resources, intl]);
 
+  const permissionsTable = useMemo(() => {
+    if (!roles || !permissions || !resources) return [];
+    return buildPermissionMatrix(roles, permissions, resources, intl);
+  }, [roles, permissions, resources]);
+
   return (
     <div className="authz-libraries">
       <AuthZLayout
@@ -47,7 +53,7 @@ const LibrariesTeamManager = () => {
             <Container className="p-5">
               {libraryRoles && libraryRoles.map(role => (
                 <RoleCard
-                  key={`${role}-description`}
+                  key={`${role.role}-description`}
                   title={role.name}
                   userCounter={role.userCount}
                   description={role.description}
@@ -57,11 +63,13 @@ const LibrariesTeamManager = () => {
             </Container>
           </Tab>
           <Tab eventKey="permissions" title={intl.formatMessage(messages['library.authz.tabs.permissions'])}>
-            Permissions tab.
+            <Container className="p-5 container-mw-lg">
+              <PermissionTable permissionsTable={permissionsTable} roles={libraryRoles} />
+            </Container>
           </Tab>
         </Tabs>
       </AuthZLayout>
-    </div>
+    </div >
   );
 };
 

src/authz-module/libraries-manager/utils.ts

@@ -1,33 +1,118 @@
+import { IntlShape } from '@edx/frontend-platform/i18n';
 import { actionKeys } from '@src/authz-module/components/RoleCard/constants';
 import actionMessages from '../components/RoleCard/messages';
+import { PermissionMetadata, ResourceMetadata, Role } from 'types';
+
+function getPermissionMetadata(
+  permission: PermissionMetadata,
+  intl: IntlShape,
+): { label: string; actionKey: string | undefined } {
+  const actionKey = actionKeys.find(action => permission.key.includes(action));
+  let messageKey = `authz.permissions.actions.${actionKey}`;
+  let messageResource = '';
+
+  if (actionKey === 'tag' || actionKey === 'team') {
+    messageKey = 'authz.permissions.actions.manage';
+    messageResource = actionKey === 'tag' ? 'Tags' : '';
+  }
+
+  const label = permission.label || intl.formatMessage(actionMessages[messageKey], { resource: messageResource });
+
+  return { label, actionKey };
+}
+
 
 const buildPermissionsByRoleMatrix = ({
-  rolePermissions, permissions, resources, intl,
+  rolePermissions,
+  permissions,
+  resources,
+  intl,
 }) => {
   const permissionsMatrix = {};
   const allowedPermissions = new Set(rolePermissions);
 
   permissions.forEach((permission) => {
-    const resourceLabel = resources.find(r => r.key === permission.resource)?.label || permission.resource;
-    const actionKey = actionKeys.find(action => permission.key.includes(action));
-    let messageKey = `authz.permissions.actions.${actionKey}`;
-    let messageResource = '';
+    const resourceLabel =
+      resources.find((r) => r.key === permission.resource)?.label ||
+      permission.resource;
+
+    const { label, actionKey } = getPermissionMetadata(permission, intl);
 
-    permissionsMatrix[permission.resource] = permissionsMatrix[permission.resource]
-    || { key: permission.resource, label: resourceLabel, actions: [] };
+    if (!actionKey) return; // Skip unknown actions
 
-    if (actionKey === 'tag' || actionKey === 'team') {
-      messageKey = 'authz.permissions.actions.manage';
-      messageResource = actionKey === 'tag' ? 'Tags' : messageResource;
+    // Initialize resource group if not already present
+    if (!permissionsMatrix[permission.resource]) {
+      permissionsMatrix[permission.resource] = {
+        key: permission.resource,
+        label: resourceLabel,
+        actions: [],
+      };
     }
 
     permissionsMatrix[permission.resource].actions.push({
       key: actionKey,
-      label: permission.label || intl.formatMessage(actionMessages[messageKey], { resource: messageResource }),
+      label,
       disabled: !allowedPermissions.has(permission.key),
     });
   });
+
   return Object.values(permissionsMatrix);
 };
 
+
+
+
+type PermissionMatrix = {
+  resource: string;
+  resourceLabel: string;
+  permissions: {
+    key: string;
+    label: string;
+    roles: Record<string, boolean>;
+  }[];
+}[];
+
+export function buildPermissionMatrix(
+  roles: Role[],
+  permissions: PermissionMetadata[],
+  resources: ResourceMetadata[],
+  intl: IntlShape,
+): PermissionMatrix {
+  const permissionsByResource = permissions.reduce<Record<string, PermissionMetadata[]>>((acc, perm) => {
+    if (!acc[perm.resource]) acc[perm.resource] = [];
+    acc[perm.resource].push(perm);
+    return acc;
+  }, {});
+
+  const matrix: PermissionMatrix = resources.map(resource => {
+    const resourcePermissions = permissionsByResource[resource.key] || [];
+
+    const permissionRows = resourcePermissions.map(permission => {
+      const rolesMap: Record<string, boolean> = {};
+
+      roles.forEach(role => {
+        rolesMap[role.name] = role.permissions.includes(permission.key);
+      });
+
+      const { label, actionKey } = getPermissionMetadata(permission, intl);
+
+      return {
+        key: permission.key,
+        actionKey, // Important for icon mapping
+        label,
+        roles: rolesMap,
+      };
+    });
+
+    return {
+      resource: resource.key,
+      resourceLabel: resource.label,
+      permissions: permissionRows,
+    };
+  });
+
+  return matrix;
+}
+
+
 export { buildPermissionsByRoleMatrix };