feat: create ResourceTooltip component and enhance types for permission matrix by role and resource

Author: dcoa

src/authz-module/components/PermissionTable.tsx

@@ -1,12 +1,12 @@
 import { Check, Close } from '@openedx/paragon/icons';
 import { Icon } from '@openedx/paragon';
-import { Role } from '@src/types';
-import { PermissionMatrix } from '@src/authz-module/libraries-manager/utils';
+import { PermissionsResourceGrouped, Role } from '@src/types';
 import { actionsDictionary } from './RoleCard/constants';
+import ResourceTooltip from './ResourceTooltip';
 
 type PermissionTableProps = {
   roles: Role[];
-  permissionsTable: PermissionMatrix;
+  permissionsTable: PermissionsResourceGrouped[];
 };
 
 const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => (
@@ -24,7 +24,8 @@ const PermissionTable = ({ permissionsTable, roles }: PermissionTableProps) => (
         <>
           <tr className="bg-info-100 text-primary">
             <td colSpan={roles.length + 1} className="text-start py-3 px-4">
-              <strong>{resourceGroup.resourceLabel}</strong>
+              <strong>{resourceGroup.label}</strong>
+              <ResourceTooltip resourceGroup={resourceGroup} />
             </td>
           </tr>
           {

src/authz-module/components/ResourceTooltip.tsx

@@ -0,0 +1,31 @@
+import { Icon, OverlayTrigger, Popover } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
+import { PermissionsResourceGrouped, RoleResourceGroup } from '@src/types';
+
+type ResourceTooltipProps = {
+  resourceGroup: PermissionsResourceGrouped | RoleResourceGroup;
+};
+
+const ResourceTooltip = ({ resourceGroup }:ResourceTooltipProps) => (
+  <OverlayTrigger
+    key={`overlay-${resourceGroup.key}`}
+    placement="right"
+    overlay={(
+      <Popover variant="light" id={`tooltip-${resourceGroup.label}`}>
+        <Popover.Content className="p-3">
+          <h3 className="text-primary">{resourceGroup.label}</h3>
+          <p>{resourceGroup.description}</p>
+          <ul>
+            {resourceGroup.permissions.map(permission => (
+              <li><b>{permission.label.trim()}:</b> {permission.description}</li>
+            ))}
+          </ul>
+        </Popover.Content>
+      </Popover>
+    )}
+  >
+    <Icon className="d-inline-block text-gray ml-2 my-auto" size="sm" src={Info} />
+  </OverlayTrigger>
+);
+
+export default ResourceTooltip;

src/authz-module/components/RoleCard/PermissionsRow.tsx

@@ -2,38 +2,34 @@ import { ComponentType } from 'react';
 import {
   Chip, Col, Row,
 } from '@openedx/paragon';
+import { RoleResourceGroup } from '@src/types';
 import { actionsDictionary, ActionKey } from './constants';
+import ResourceTooltip from '../ResourceTooltip';
 
-interface Action {
-  key: string;
-  label?: string;
-  disabled?: boolean;
-}
+type PermissionRowProps = {
+  resource: RoleResourceGroup;
+};
 
-interface PermissionRowProps {
-  resourceLabel: string;
-  actions: Action[];
-}
-
-const PermissionRow = ({ resourceLabel, actions }: PermissionRowProps) => (
+const PermissionRow = ({ resource }: PermissionRowProps) => (
   <Row className="row align-items-center border px-2 py-2">
     <Col md={2}>
-      <span className="small font-weight-bold">{resourceLabel}</span>
+      <span className="small font-weight-bold">{resource.label}</span>
+      <ResourceTooltip resourceGroup={resource} />
     </Col>
     <Col>
       <div className="w-100 d-flex flex-wrap align-items-center">
-        {actions.map((action, index) => (
+        {resource.permissions.map((action, index) => (
           <>
             <Chip
               key={action.key}
-              iconBefore={actionsDictionary[action.key as ActionKey] as ComponentType}
+              iconBefore={actionsDictionary[action.actionKey as ActionKey] as ComponentType}
               disabled={action.disabled}
               className="mx-3 my-2 px-3 bg-primary-100 border-0 permission-chip"
               variant="light"
             >
               {action.label}
             </Chip>
-            {(index === actions.length - 1) ? null
+            {(index === resource.permissions.length - 1) ? null
               : (<hr className="border-right mx-2" style={{ height: '24px' }} />)}
           </>
         ))}

src/authz-module/components/RoleCard/index.test.tsx

@@ -21,13 +21,17 @@ describe('RoleCard', () => {
     description: 'Can manage everything',
     showDelete: true,
     userCounter: 2,
-    permissions: [
+    permissionsByResource: [
       {
         key: 'library',
         label: 'Library Resource',
-        actions: [
-          { key: 'view', label: 'View' },
-          { key: 'manage', label: 'Manage', disabled: true },
+        permissions: [
+          {
+            key: 'view', label: 'View', actionKey: 'view', disabled: false,
+          },
+          {
+            key: 'manage', label: 'Manage', actionKey: 'manage', disabled: true,
+          },
         ],
       },
     ],
@@ -81,7 +85,7 @@ describe('RoleCard', () => {
   });
 
   it('handles empty permissions gracefully', () => {
-    renderWrapper(<RoleCard {...defaultProps} permissions={[]} />);
+    renderWrapper(<RoleCard {...defaultProps} permissionsByResource={[]} />);
     expect(screen.queryByText('Library Resource')).not.toBeInTheDocument();
   });
 });

src/authz-module/components/RoleCard/index.tsx

@@ -14,7 +14,7 @@ interface RoleCardProps extends CardTitleProps {
   objectName?: string | null;
   description: string;
   showDelete?: boolean;
-  permissions: any[];
+  permissionsByResource: any[];
 }
 
 const CardTitle = ({ title, userCounter }: CardTitleProps) => (
@@ -30,7 +30,7 @@ const CardTitle = ({ title, userCounter }: CardTitleProps) => (
 );
 
 const RoleCard = ({
-  title, objectName, description, showDelete, permissions, userCounter,
+  title, objectName, description, showDelete, permissionsByResource, userCounter,
 }: RoleCardProps) => {
   const intl = useIntl();
 
@@ -50,13 +50,11 @@ const RoleCard = ({
         title={intl.formatMessage(messages['authz.permissions.title'])}
       >
         <Container>
-          {permissions.map(({ key, label, actions }) => (
+          {permissionsByResource.map((resourceGroup) => (
             <PermissionRow
-              key={`${title}-${key}`}
-              resourceLabel={label}
-              actions={actions}
+              key={`${title}-${resourceGroup.key}`}
+              resource={resourceGroup}
             />
-
           ))}
         </Container>
       </Collapsible>

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

@@ -26,11 +26,15 @@ jest.mock('./components/TeamTable', () => ({
 
 jest.mock('../components/RoleCard', () => ({
   __esModule: true,
-  default: ({ title, description, permissions }: { title: string, description: string, permissions: any[] }) => (
+  default: ({ title, description, permissionsByResource }: {
+    title: string,
+    description: string,
+    permissionsByResource: any[]
+  }) => (
     <div data-testid="role-card">
       <div>{title}</div>
       <div>{description}</div>
-      <div>{permissions.length} permissions</div>
+      <div>{permissionsByResource.length} permissions</div>
     </div>
   ),
 }));

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

@@ -9,7 +9,7 @@ import AuthZLayout from '../components/AuthZLayout';
 import RoleCard from '../components/RoleCard';
 import PermissionTable from '../components/PermissionTable';
 import { useLibraryAuthZ } from './context';
-import { buildPermissionMatrix, buildPermissionsByRoleMatrix } from './utils';
+import { buildPermissionMatrixByResource, buildPermissionMatrixByRole } from './utils';
 
 import messages from './messages';
 
@@ -21,16 +21,17 @@ const LibrariesTeamManager = () => {
   const { data: library } = useLibrary(libraryId);
   const rootBradecrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
-  const libraryRoles = useMemo(() => roles.map(role => ({
-    ...role,
-    permissions: buildPermissionsByRoleMatrix({
-      rolePermissions: role.permissions, permissions, resources, intl,
-    }),
-  })), [roles, permissions, resources, intl]);
 
-  const permissionsTable = useMemo(() => {
-    if (!roles || !permissions || !resources) { return []; }
-    return buildPermissionMatrix(roles, permissions, resources, intl);
+  const [libraryPermissionsByRole, libraryPermissionsByResource] = useMemo(() => {
+    if (!roles && !permissions && !resources) { return [null, null]; }
+    const permissionsByRole = buildPermissionMatrixByRole({
+      roles, permissions, resources, intl,
+    });
+    const permissionsByResource = buildPermissionMatrixByResource({
+      roles, permissions, resources, intl,
+    });
+
+    return [permissionsByRole, permissionsByResource];
   }, [roles, permissions, resources, intl]);
 
   return (
@@ -53,21 +54,21 @@ const LibrariesTeamManager = () => {
           </Tab>
           <Tab eventKey="roles" title={intl.formatMessage(messages['library.authz.tabs.roles'])}>
             <Container className="p-5">
-              {libraryRoles && libraryRoles.map(role => (
+              {libraryPermissionsByRole && libraryPermissionsByRole.map(role => (
                 <RoleCard
                   key={`${role.role}-description`}
                   title={role.name}
                   userCounter={role.userCount}
                   description={role.description}
-                  permissions={role.permissions as any[]}
+                  permissionsByResource={role.resources as any[]}
                 />
               ))}
             </Container>
           </Tab>
           <Tab eventKey="permissions" title={intl.formatMessage(messages['library.authz.tabs.permissions'])}>
             <Container className="p-5 container-mw-lg">
-              {!permissionsTable ? <Skeleton count={2} height={200} />
-                : <PermissionTable permissionsTable={permissionsTable} roles={roles} />}
+              {!libraryPermissionsByResource ? <Skeleton count={2} height={200} />
+                : <PermissionTable permissionsTable={libraryPermissionsByResource} roles={roles} />}
             </Container>
           </Tab>
         </Tabs>

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

@@ -7,7 +7,7 @@ import AuthZLayout from '../components/AuthZLayout';
 import { useLibraryAuthZ } from './context';
 import RoleCard from '../components/RoleCard';
 import { useLibrary, useTeamMembers } from '../data/hooks';
-import { buildPermissionsByRoleMatrix } from './utils';
+import { buildPermissionMatrixByRole } from './utils';
 
 import messages from './messages';
 
@@ -24,14 +24,10 @@ const LibrariesUserManager = () => {
   const { data: teamMembers } = useTeamMembers(libraryId);
   const user = teamMembers?.find(member => member.username === username);
   const userRoles = useMemo(() => {
-    const assignedRoles = roles.filter(role => user?.roles.includes(role.role))
-      .map(role => ({
-        ...role,
-        permissions: buildPermissionsByRoleMatrix({
-          rolePermissions: role.permissions, permissions, resources, intl,
-        }),
-      }));
-    return assignedRoles;
+    const assignedRoles = roles.filter(role => user?.roles.includes(role.role));
+    return buildPermissionMatrixByRole({
+      roles: assignedRoles, permissions, resources, intl,
+    });
   }, [roles, user?.roles, permissions, resources, intl]);
 
   return (
@@ -52,7 +48,7 @@ const LibrariesUserManager = () => {
               objectName={library.title}
               description={role.description}
               showDelete
-              permissions={role.permissions as any[]}
+              permissionsByResource={role.resources as any[]}
             />
           ))}
         </Container>