feat: create the user management view

Author: dcoa

src/authz-module/index.scss

@@ -7,4 +7,31 @@
   .tab-content {
     background-color: var(--pgn-color-light-200);
   }
-}
+
+  .collapsible-card {
+    border: none;
+
+    .collapsible-body {
+      padding: 0;
+    }
+  }
+
+  .collapsible-trigger {
+    background-color: var(--pgn-color-info-100);
+    border: none;
+    border-radius: 0 !important;
+    color: var(--pgn-color-primary-base);
+    padding: 1rem 2rem 1rem 1rem;
+  }
+
+  .permission-chip {
+    .pgn__chip__label {
+      font-weight: var(--pgn-typography-font-weight-base);
+    }
+
+    svg {
+      width: var(--pgn-size-icon-xs);
+      height: var(--pgn-size-icon-xs);
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+import { useParams } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import { renderWrapper } from '@src/setupTest';
+import LibrariesUserManager from './LibrariesUserManager';
+import { useLibraryAuthZ } from './context';
+import { useLibrary, useTeamMembers } from '../data/hooks';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+jest.mock('./context', () => ({
+  useLibraryAuthZ: jest.fn(),
+}));
+
+jest.mock('../data/hooks', () => ({
+  useLibrary: jest.fn(),
+  useTeamMembers: jest.fn(),
+}));
+jest.mock('../components/RoleCard', () => ({
+  __esModule: true,
+  default: ({ title, description }: { title: string, description: string }) => (
+    <div data-testid="role-card">
+      <div>{title}</div>
+      <div>{description}</div>
+    </div>
+  ),
+}));
+
+describe('LibrariesUserManager', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Mock route params
+    (useParams as jest.Mock).mockReturnValue({ username: 'testuser' });
+
+    // Mock library authz context
+    (useLibraryAuthZ as jest.Mock).mockReturnValue({
+      libraryId: 'lib:123',
+      permissions: [{ key: 'view' }, { key: 'reuse' }],
+      roles: [
+        {
+          role: 'admin',
+          name: 'Admin',
+          description: 'Administrator Role',
+          permissions: ['view', 'reuse'],
+        },
+      ],
+      resources: [
+        { key: 'library', label: 'Library', description: '' },
+      ],
+    });
+
+    // Mock library data
+    (useLibrary as jest.Mock).mockReturnValue({
+      data: {
+        title: 'Test Library',
+        org: 'Test Org',
+      },
+    });
+
+    // Mock team members
+    (useTeamMembers as jest.Mock).mockReturnValue({
+      data: [
+        {
+          username: 'testuser',
+          email: 'testuser@example.com',
+          roles: ['admin'],
+        },
+      ],
+    });
+  });
+
+  it('renders the user roles correctly', () => {
+    renderWrapper(<LibrariesUserManager />);
+
+    // Breadcrumb check
+    expect(screen.getByText('Manage Access')).toBeInTheDocument();
+    expect(screen.getByText('Library Team Management')).toBeInTheDocument();
+    expect(screen.getByRole('listitem', { current: 'page' })).toHaveTextContent('testuser');
+    // Page title and subtitle
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('testuser');
+    expect(screen.getByRole('paragraph')).toHaveTextContent('testuser@example.com');
+
+    // RoleCard rendering
+    expect(screen.getByTestId('role-card')).toHaveTextContent('Admin');
+    expect(screen.getByTestId('role-card')).toHaveTextContent('Administrator Role');
+  });
+});

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

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Container } from '@openedx/paragon';
+import { ROUTES } from '@src/authz-module/constants';
+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 messages from './messages';
+
+const LibrariesUserManager = () => {
+  const intl = useIntl();
+  const { username } = useParams();
+  const {
+    libraryId, permissions, roles, resources,
+  } = useLibraryAuthZ();
+  const { data: library } = useLibrary(libraryId);
+  const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
+  const pageManageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
+
+  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;
+  }, [roles, user?.roles, permissions, resources, intl]);
+
+  return (
+    <div className="authz-libraries">
+      <AuthZLayout
+        context={{ id: libraryId, title: library.title, org: library.org }}
+        navLinks={[{ label: rootBreadcrumb }, { label: pageManageTitle, to: `/authz/${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}` }]}
+        activeLabel={user?.username || ''}
+        pageTitle={user?.username || ''}
+        pageSubtitle={<p>{user?.email}</p>}
+        actions={[]}
+      >
+        <Container className="bg-light-200 p-5">
+          {userRoles && userRoles.map(role => (
+            <RoleCard
+              key={`${role}-${username}`}
+              title={role.name}
+              objectName={library.title}
+              description={role.description}
+              showDelete
+              permissions={role.permissions as any[]}
+            />
+          ))}
+        </Container>
+      </AuthZLayout>
+    </div>
+  );
+};
+
+export default LibrariesUserManager;

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

@@ -0,0 +1,23 @@
+import { buildPermissionsByRoleMatrix } from './utils';
+
+describe('buildPermissionsByRoleMatrix', () => {
+  it('returns permissions matrix for given role', () => {
+    const rolePermissions = ['create_library'];
+    const permissions = [
+      { key: 'create_library', resource: 'library', label: 'Create Library' },
+      { key: 'edit_library', resource: 'library', label: 'Edit Library' },
+    ];
+    const resources = [
+      { key: 'library', label: 'Library', description: '' },
+    ];
+
+    const intl = { formatMessage: jest.fn((msg: any) => msg.defaultMessage) };
+    const matrix = buildPermissionsByRoleMatrix({
+      rolePermissions, permissions, resources, intl,
+    }) as Array<{ key: string; actions: Array<{ disabled: boolean }> }>;
+    expect(matrix[0].key).toBe('library');
+    expect(matrix[0].actions.length).toBe(2);
+    expect(matrix[0].actions[0].disabled).toBe(false);
+    expect(matrix[0].actions[1].disabled).toBe(true);
+  });
+});

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

@@ -0,0 +1,33 @@
+import { actionKeys } from '@src/authz-module/components/RoleCard/constants';
+import actionMessages from '../components/RoleCard/messages';
+
+const buildPermissionsByRoleMatrix = ({
+  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 = '';
+
+    permissionsMatrix[permission.resource] = permissionsMatrix[permission.resource]
+    || { key: permission.resource, label: resourceLabel, actions: [] };
+
+    if (actionKey === 'tag' || actionKey === 'team') {
+      messageKey = 'authz.permissions.actions.manage';
+      messageResource = actionKey === 'tag' ? 'Tags' : messageResource;
+    }
+
+    permissionsMatrix[permission.resource].actions.push({
+      key: actionKey,
+      label: permission.label || intl.formatMessage(actionMessages[messageKey], { resource: messageResource }),
+      disabled: !allowedPermissions.has(permission.key),
+    });
+  });
+  return Object.values(permissionsMatrix);
+};
+
+export { buildPermissionsByRoleMatrix };