feat(authz): add team members table with sorting, pagination and filtering.

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

@@ -16,6 +16,10 @@ jest.mock('@openedx/paragon', () => ({
   Tabs: ({ children }: { children: React.ReactNode }) => <div data-testid="tabs">{children}</div>,
 }));
 
+jest.mock('@src/authz-module/team-members/TeamMembersTable', () => function MockTeamMembersTable() {
+  return <div>Team Members Table Content</div>;
+});
+
 describe('AuthzHome', () => {
   it('renders without crashing', () => {
     renderWrapper(<AuthzHome />);
@@ -37,4 +41,9 @@ describe('AuthzHome', () => {
     renderWrapper(<AuthzHome />);
     expect(screen.getByTestId('roles-permissions')).toBeInTheDocument();
   });
+
+  it('renders the TeamMembersTable component in the team members tab', () => {
+    renderWrapper(<AuthzHome />);
+    expect(screen.getByText('Team Members Table Content')).toBeInTheDocument();
+  });
 });

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

@@ -1,6 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import TeamMembersTable from '@src/authz-module/team-members/TeamMembersTable';
+import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import RolesPermissions from '../roles-permissions/RolesPermissions';
 import AuthZLayout from '../components/AuthZLayout';
 
@@ -9,8 +11,10 @@ import messages from './messages';
 const AuthzHome = () => {
   const { hash } = useLocation();
   const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const presetScope = searchParams.get('scope') || undefined;
 
-  const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']) || '';
+  const rootBreadcrumb = intl.formatMessage(messages['authz.breadcrumb.root']);
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
   return (
@@ -22,11 +26,7 @@ const AuthzHome = () => {
         pageTitle={pageTitle}
         pageSubtitle=""
         actions={
-          []
-          // this needs to be enable again once is refactored to be used outside of library context
-          // [
-          //   <AddNewTeamMemberTrigger libraryId="" key="add-new-member" />,
-          // ]
+          [<AddRoleButton key="add-role-button" />]
         }
       >
         <Tabs
@@ -35,8 +35,7 @@ const AuthzHome = () => {
           className="bg-light-100 px-5"
         >
           <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5">
-            {/* TODO: once TeamTable is refactored we can call it here. For now, this tab will be empty. */}
-            {/* <TeamTable /> */}
+            <TeamMembersTable presetScope={presetScope} />
           </Tab>
           <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])}>
             <RolesPermissions />

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

@@ -0,0 +1,134 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useNavigate } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+import { renderWrapper } from '@src/setupTest';
+import AddRoleButton from './AddRoleButton';
+
+// Mock react-router-dom navigation
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('AddRoleButton', () => {
+  const mockNavigate = jest.fn();
+
+  beforeAll(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 1,
+        username: 'testuser',
+        email: '[email protected]',
+      },
+    });
+  });
+
+  beforeEach(() => {
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders the assign role button with correct text', () => {
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('displays the plus icon', () => {
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('renders correctly when presetUsername is provided', () => {
+      renderWrapper(<AddRoleButton presetUsername="testuser123" />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('navigation behavior', () => {
+    it('navigates to assign role page without username when clicked', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('navigates to assign role page with username query parameter when presetUsername is provided', async () => {
+      const user = userEvent.setup();
+      const presetUsername = 'john.doe';
+      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith(`/authz/assign-role?username=${presetUsername}`);
+    });
+
+    it('handles special characters in presetUsername correctly', async () => {
+      const user = userEvent.setup();
+      const presetUsername = '[email protected]';
+      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(1);
+      expect(mockNavigate).toHaveBeenCalledWith(`/authz/assign-role?username=${presetUsername}`);
+    });
+  });
+
+  describe('user interactions', () => {
+    it('responds to keyboard navigation', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+
+      await user.tab();
+      expect(button).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('responds to spacebar activation', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+      button.focus();
+
+      await user.keyboard(' ');
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role');
+    });
+
+    it('handles multiple clicks gracefully', async () => {
+      const user = userEvent.setup();
+      renderWrapper(<AddRoleButton presetUsername="testuser" />);
+
+      const button = screen.getByRole('button', { name: /assign role/i });
+
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(mockNavigate).toHaveBeenCalledTimes(3);
+      expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role?username=testuser');
+    });
+  });
+});

src/authz-module/components/AddRoleButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+
+import baseMessages from '@src/authz-module/messages';
+import { useNavigate } from 'react-router-dom';
+
+interface AddRoleButtonProps {
+  presetUsername?: string;
+}
+
+const AddRoleButton = ({ presetUsername }: AddRoleButtonProps) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    const assignRolePath = `/authz/assign-role${presetUsername ? `?username=${presetUsername}` : ''}`;
+    navigate(assignRolePath);
+  };
+
+  return (
+    <Button
+      iconBefore={Plus}
+      onClick={handleClick}
+    >
+      {intl.formatMessage(baseMessages['authz.management.assign.role.title'])}
+    </Button>
+  );
+};
+
+export default AddRoleButton;

src/authz-module/components/AuthZLayout.tsx

@@ -14,9 +14,10 @@ interface AuthZLayoutProps extends AuthZTitleProps {
 const AuthZLayout = ({ children, context, ...props }: AuthZLayoutProps) => (
   <>
     <StudioHeader
-      number={context.id}
-      org={context.org}
-      title={context.title}
+      number={context?.id || null}
+      org={context?.org || null}
+      title={context?.title || null}
+      isHiddenMainMenu
     />
     <AuthZTitle {...props} />
     {children}