refactor(authz): display team members information agregated in the table

src/authz-module/authz-home/index.test.tsx

@@ -1,8 +1,10 @@
 import { screen } from '@testing-library/react';
-import { useAllRoleAssignments, useOrgs, useScopes } from '@src/authz-module/data/hooks';
+import { useTeamMembersAssignments, useOrgs, useScopes } from '@src/authz-module/data/hooks';
 import { renderWithAllProviders } from '@src/testUtils';
 import userEvent from '@testing-library/user-event';
 import { ToastManagerProvider } from '@src/components/ToastManager/ToastManagerContext';
+import { useViewTeamPermissions } from '@src/authz-module/hooks/useViewTeamPermissions';
+import { CustomErrors } from '@src/constants';
 import AuthzHome from './index';
 import messages from './messages';
 
@@ -14,8 +16,12 @@ jest.mock('@src/authz-module/hooks/useCourseAuthoringFlag', () => ({
   }),
 }));
 
+jest.mock('@src/authz-module/hooks/useViewTeamPermissions', () => ({
+  useViewTeamPermissions: jest.fn(),
+}));
+
 jest.mock('@src/authz-module/data/hooks', () => ({
-  useAllRoleAssignments: jest.fn(),
+  useTeamMembersAssignments: jest.fn(),
   useOrgs: jest.fn(),
   useScopes: jest.fn(),
 }));
@@ -38,6 +44,17 @@ const emptyScopesResponse = {
   isFetchingNextPage: false,
 };
 
+// Nothing is allowed while the check is in flight; cases override only what they are about.
+const permissionsInFlight = {
+  isCourseViewAllowed: false,
+  isLibraryViewAllowed: false,
+  isLoading: true,
+};
+
+const mockViewTeamPermissions = (overrides: Partial<typeof permissionsInFlight> = {}) => {
+  (useViewTeamPermissions as jest.Mock).mockReturnValue({ ...permissionsInFlight, ...overrides });
+};
+
 const renderAuthzHome = () => renderWithAllProviders(
   <ToastManagerProvider>
     <AuthzHome />
@@ -46,7 +63,10 @@ const renderAuthzHome = () => renderWithAllProviders(
 
 describe('AuthzHome', () => {
   beforeEach(() => {
-    (useAllRoleAssignments as jest.Mock).mockReturnValue(emptyResponse);
+    // Call history is asserted on below, so it must not carry over between cases.
+    jest.clearAllMocks();
+    mockViewTeamPermissions({ isCourseViewAllowed: true, isLibraryViewAllowed: true, isLoading: false });
+    (useTeamMembersAssignments as jest.Mock).mockReturnValue(emptyResponse);
     (useOrgs as jest.Mock).mockReturnValue(emptyResponse);
     (useScopes as jest.Mock).mockReturnValue(emptyScopesResponse);
   });
@@ -77,14 +97,44 @@ describe('AuthzHome', () => {
     expect(screen.getByRole('button', { name: 'Libraries' })).toBeInTheDocument();
   });
 
+  it('denies access to the whole page when the user may view neither courses nor libraries', () => {
+    mockViewTeamPermissions({ isLoading: false });
+
+    // Neither tab has anything to show, so the page hands off to the error boundary.
+    expect(() => renderAuthzHome()).toThrow(CustomErrors.NO_ACCESS);
+  });
+
+  it('shows a loader instead of the page while the permission check is in flight', () => {
+    mockViewTeamPermissions();
+
+    renderAuthzHome();
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    expect(screen.getByText('Loading')).toBeInTheDocument();
+    // Nothing behind the gate renders yet, so no listing request is fired for a user
+    // who may turn out to be denied.
+    expect(screen.queryByText(messages['authz.manage.page.title'].defaultMessage)).not.toBeInTheDocument();
+    expect(useTeamMembersAssignments).not.toHaveBeenCalled();
+  });
+
+  it('renders the page when only library roles may be viewed', () => {
+    mockViewTeamPermissions({ isLibraryViewAllowed: true, isLoading: false });
+
+    renderAuthzHome();
+
+    expect(screen.getByText(messages['authz.manage.page.title'].defaultMessage)).toBeInTheDocument();
+  });
+
   it('renders the TeamMembersTable component in the team members tab', () => {
     renderAuthzHome();
     expect(screen.getByText(messages['authz.manage.page.title'].defaultMessage)).toBeInTheDocument();
-    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Username')).toBeInTheDocument();
     expect(screen.getByText('Email')).toBeInTheDocument();
-    expect(screen.getAllByText('Organization').length).toBe(2); // Header and org filter;
-    expect(screen.getAllByText('Scope').length).toBe(2); // Header and scope filter;
-    expect(screen.getAllByText('Role').length).toBe(2); // Header and role filter;
+    expect(screen.getByText('Assigned roles')).toBeInTheDocument();
+    // Org, scope and role are filter controls only — they are no longer column headers.
+    expect(screen.getAllByText('Organization').length).toBe(1);
+    expect(screen.getAllByText('Scope').length).toBe(1);
+    expect(screen.getAllByText('Role').length).toBe(1);
     expect(screen.getByText('Actions')).toBeInTheDocument();
   });
 });

src/authz-module/authz-home/index.tsx

@@ -1,8 +1,11 @@
 import { useIntl } from '@openedx/frontend-base';
 import { Tab, Tabs } from '@openedx/paragon';
 import { useLocation, useSearchParams } from 'react-router-dom';
-import TeamMembersTable from '@src/authz-module/team-members/TeamMembersTable';
+import { TeamMembersTable } from '@src/authz-module/team-members';
 import AddRoleButton from '@src/authz-module/components/AddRoleButton';
+import { useViewTeamPermissions } from '@src/authz-module/hooks/useViewTeamPermissions';
+import { CustomErrors } from '@src/constants';
+import LoadingPage from '@src/components/LoadingPage';
 import RolesPermissions from '@src/authz-module/roles-permissions/RolesPermissions';
 import AuthZLayout from '@src/authz-module/components/AuthZLayout';
 
@@ -20,6 +23,27 @@ const AuthzHome = () => {
 
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
+  const {
+    isCourseViewAllowed, isLibraryViewAllowed, isLoading: isLoadingPermissions,
+  } = useViewTeamPermissions();
+
+  /**
+   * It gates the whole page whether the user is allowed to view the team members. If
+   * the user is not allowed, an error is thrown to display the access denied message.
+   *
+   * Rendering is held until the check settles rather than started optimistically, so a
+   * user who turns out to be denied never fires the listing and filter requests behind
+   * the page. Both flags read false while it is in flight, which would otherwise deny
+   * everyone for a frame.
+   */
+  if (isLoadingPermissions) {
+    return <LoadingPage />;
+  }
+
+  if (!isCourseViewAllowed && !isLibraryViewAllowed) {
+    throw new Error(CustomErrors.NO_ACCESS);
+  }
+
   return (
     <AuthZLayout
       pageTitle={pageTitle}

src/authz-module/components/ExpandableButton.test.tsx

@@ -0,0 +1,79 @@
+import { screen } from '@testing-library/react';
+import { renderWrapper } from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+import ExpandableButton from './ExpandableButton';
+
+describe('ExpandableButton', () => {
+  const mockOnClick = jest.fn();
+  const defaultProps = {
+    label: 'View more details',
+    onClick: mockOnClick,
+    isExpanded: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('exposes the label as a button, not a link, since it triggers an action in place', () => {
+      renderWrapper(<ExpandableButton {...defaultProps} />);
+
+      expect(screen.getByRole('button', { name: 'View more details' })).toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('shows a chevron and announces itself as closed while collapsed', () => {
+      renderWrapper(<ExpandableButton {...defaultProps} />);
+
+      const button = screen.getByRole('button', { name: 'View more details' });
+      expect(button.querySelector('svg')).toBeInTheDocument();
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('announces itself as open once expanded', () => {
+      renderWrapper(<ExpandableButton {...defaultProps} isExpanded />);
+
+      const button = screen.getByRole('button', { name: 'View more details' });
+      expect(button.querySelector('svg')).toBeInTheDocument();
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onClick handler when user clicks the button', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<ExpandableButton {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'View more details' }));
+
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles multiple clicks correctly', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<ExpandableButton {...defaultProps} />);
+
+      const button = screen.getByRole('button', { name: 'View more details' });
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(mockOnClick).toHaveBeenCalledTimes(3);
+    });
+
+    it('can be reached and activated with the keyboard alone', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<ExpandableButton {...defaultProps} />);
+
+      await user.tab();
+      expect(screen.getByRole('button', { name: 'View more details' })).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+
+      await user.keyboard(' ');
+      expect(mockOnClick).toHaveBeenCalledTimes(2);
+    });
+  });
+});

src/authz-module/components/ExpandableButton.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@openedx/paragon';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+
+interface ExpandableButtonProps {
+  label: string;
+  onClick: () => void;
+  isExpanded: boolean;
+}
+
+/**
+ * Link-styled trigger that expands something in place: a table row, a list of items.
+ *
+ * A real `<button>` rather than an anchor — it navigates nowhere, and an anchor with no
+ * `href` is neither focusable nor activatable from the keyboard. `size="inline"` drops the
+ * button padding so it keeps sitting on the text baseline inside a table cell.
+ *
+ * `isExpanded` drives both halves of the state report, which have to agree: the chevron
+ * for sighted users and `aria-expanded` for a screen reader.
+ */
+const ExpandableButton = ({ label, onClick, isExpanded }: ExpandableButtonProps) => (
+  <Button
+    variant="link"
+    size="inline"
+    onClick={onClick}
+    iconAfter={isExpanded ? ExpandLess : ExpandMore}
+    aria-expanded={isExpanded}
+  >
+    {label}
+  </Button>
+);
+
+export default ExpandableButton;