feat: implement Add New Team Member functionality and enhance role management permissions

Author: bra-i-am

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

@@ -3,18 +3,11 @@ import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { useLibrary, useUpdateLibrary } from '@src/authz-module/data/hooks';
-import { useNavigate, useLocation } from 'react-router-dom';
 import { useLibraryAuthZ } from './context';
 import LibrariesTeamManager from './LibrariesTeamManager';
 import { ToastManagerProvider } from './ToastManagerContext';
 import { CONTENT_LIBRARY_PERMISSIONS } from './constants';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn(),
-  useLocation: jest.fn().mockReturnValue({ hash: '' }),
-}));
-
 jest.mock('./context', () => {
   const actual = jest.requireActual('./context');
   return {
@@ -36,6 +29,11 @@ jest.mock('./components/TeamTable', () => ({
   default: () => <div role="table" aria-label="Team Members Table">Team member list</div>,
 }));
 
+jest.mock('./components/AddNewTeamMemberModal', () => ({
+  __esModule: true,
+  AddNewTeamMemberTrigger: () => <button type="button">Add Team Member</button>,
+}));
+
 jest.mock('../components/RoleCard', () => ({
   __esModule: true,
   default: ({ title, description, permissionsByResource }: {
@@ -60,7 +58,6 @@ describe('LibrariesTeamManager', () => {
     allowPublicRead: false,
   };
   const mutate = jest.fn();
-  const mockNavigate = jest.fn();
   const libraryAuthZContext = {
     libraryId: libraryData.id,
     libraryName: libraryData.title,
@@ -98,8 +95,6 @@ describe('LibrariesTeamManager', () => {
       mutate,
       isPending: false,
     });
-    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
-    (useLocation as jest.Mock).mockReturnValue({ hash: '' });
   });
 
   it('renders tabs and layout content correctly', () => {
@@ -116,8 +111,8 @@ describe('LibrariesTeamManager', () => {
     // TeamTable is rendered
     expect(screen.getByRole('table', { name: 'Team Members Table' })).toBeInTheDocument();
 
-    // Assign Role button is rendered
-    expect(screen.getByRole('button', { name: 'Assign Role' })).toBeInTheDocument();
+    // AddNewTeamMemberTrigger is rendered
+    expect(screen.getByRole('button', { name: 'Add Team Member' })).toBeInTheDocument();
   });
 
   it('renders role cards when "Roles" tab is selected', async () => {
@@ -146,7 +141,7 @@ describe('LibrariesTeamManager', () => {
     const permissionsTab = await screen.findByRole('tab', { name: /permissions/i });
     await user.click(permissionsTab);
 
-    const tablePermissionMatrix = screen.getByRole('table');
+    const tablePermissionMatrix = await screen.getByRole('table');
     const matrixScope = within(tablePermissionMatrix);
 
     expect(matrixScope.getByText('Library')).toBeInTheDocument();
@@ -162,25 +157,4 @@ describe('LibrariesTeamManager', () => {
     // TODO: Update expected URL when dedicated Manage Access page is created
     expect(navLink).toHaveAttribute('href', '/authz/libraries/lib-001');
   });
-
-  it('navigates to assign role wizard when "Assign Role" button is clicked', async () => {
-    const user = userEvent.setup();
-    renderTeamManager();
-    await user.click(screen.getByRole('button', { name: 'Assign Role' }));
-    expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role?scope=lib-001');
-  });
-
-  it('does not render Assign Role button when canManageTeam is false', () => {
-    mockedUseLibraryAuthZ.mockReturnValue({ ...libraryAuthZContext, canManageTeam: false });
-    renderTeamManager();
-    expect(screen.queryByRole('button', { name: 'Assign Role' })).not.toBeInTheDocument();
-  });
-
-  it('defaults to permissions tab when hash is present in location', () => {
-    (useLocation as jest.Mock).mockReturnValue({ hash: '#permissions' });
-    renderTeamManager();
-    // Tabs renders with defaultActiveKey="permissions" when hash is truthy
-    const permissionsTab = screen.getByRole('tab', { name: /permissions/i });
-    expect(permissionsTab).toBeInTheDocument();
-  });
 });

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

@@ -11,15 +11,16 @@ import AuthZLayout from '../components/AuthZLayout';
 import RoleCard from '../components/RoleCard';
 import PermissionTable from '../components/PermissionTable';
 import { useLibraryAuthZ } from './context';
-import { buildPermissionMatrixByResource, buildPermissionMatrixByRole } from '@src/authz-module/roles-permissions/libraries/utils';
+import { AddNewTeamMemberTrigger } from './components/AddNewTeamMemberModal';
+import { buildPermissionMatrixByResource, buildPermissionMatrixByRole } from './utils';
 
 import messages from './messages';
 
 const LibrariesTeamManager = () => {
   const intl = useIntl();
   const { hash } = useLocation();
   const {
-    libraryId, roles, permissions, resources,
+    libraryId, canManageTeam, roles, permissions, resources,
   } = useLibraryAuthZ();
   const { data: library } = useLibrary(libraryId);
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
@@ -48,7 +49,11 @@ const LibrariesTeamManager = () => {
         activeLabel={pageTitle}
         pageTitle={pageTitle}
         pageSubtitle={libraryId}
-        actions={[]}
+        actions={
+          [
+            ...(canManageTeam ? [<AddNewTeamMemberTrigger libraryId={libraryId} key="add-new-member" />] : []),
+          ]
+        }
       >
         <Tabs
           variant="tabs"

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.test.tsx

@@ -1,20 +1,18 @@
-import { act } from 'react';
+import React, { act } from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
-import { useAssignTeamMembersRole, useValidateUsers } from '@src/authz-module/data/hooks';
+import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
 import { ToastManagerProvider } from '@src/authz-module/libraries-manager/ToastManagerContext';
 import AddNewTeamMemberTrigger from './AddNewTeamMemberTrigger';
 
 jest.mock('@edx/frontend-platform/logging');
 
 const mockMutate = jest.fn();
-const mockMutateAsync = jest.fn();
 
 // Mock the hooks module
 jest.mock('@src/authz-module/data/hooks', () => ({
   useAssignTeamMembersRole: jest.fn(),
-  useValidateUsers: jest.fn(),
 }));
 
 jest.mock('./AddNewTeamMemberModal', () => {
@@ -56,17 +54,12 @@ describe('AddNewTeamMemberTrigger', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    mockMutateAsync.mockResolvedValue({ validUsers: [], invalidUsers: [] });
     (useAssignTeamMembersRole as jest.Mock).mockReturnValue({
       mutate: mockMutate,
       isPending: false,
       isError: false,
       isSuccess: false,
     } as any);
-    (useValidateUsers as jest.Mock).mockReturnValue({
-      mutateAsync: mockMutateAsync,
-      isPending: false,
-    } as any);
   });
 
   it('renders the trigger button', () => {
@@ -116,7 +109,7 @@ describe('AddNewTeamMemberTrigger', () => {
     await user.selectOptions(roleSelect, 'editor');
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalledWith(
+    expect(mockMutate).toHaveBeenCalledWith(
       {
         data: {
           users: ['[email protected]', '[email protected]'],
@@ -127,7 +120,7 @@ describe('AddNewTeamMemberTrigger', () => {
       expect.objectContaining({
         onSuccess: expect.any(Function),
       }),
-    ));
+    );
   });
 
   it('displays success toast and closes modal on successful addition with no errors', async () => {
@@ -137,14 +130,10 @@ describe('AddNewTeamMemberTrigger', () => {
     const triggerButton = screen.getByRole('button', { name: /assign role/i });
     await user.click(triggerButton);
 
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    await user.type(usersInput, '[email protected], [email protected]');
-
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
-
+    // Simulate successful response with no errors
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [
@@ -168,14 +157,10 @@ describe('AddNewTeamMemberTrigger', () => {
     const triggerButton = screen.getByRole('button', { name: /assign role/i });
     await user.click(triggerButton);
 
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    await user.type(usersInput, '[email protected], [email protected]');
-
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
-
+    // Simulate partial success response
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [
@@ -246,14 +231,10 @@ describe('AddNewTeamMemberTrigger', () => {
     const triggerButton = screen.getByRole('button', { name: /assign role/i });
     await user.click(triggerButton);
 
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    await user.type(usersInput, '[email protected], [email protected]');
-
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
-
+    // Simulate all failed response
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [],
@@ -278,14 +259,9 @@ describe('AddNewTeamMemberTrigger', () => {
     const triggerButton = screen.getByRole('button', { name: /assign role/i });
     await user.click(triggerButton);
 
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    await user.type(usersInput, '[email protected], [email protected]');
-
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
-
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [],
@@ -318,8 +294,7 @@ describe('AddNewTeamMemberTrigger', () => {
     await user.selectOptions(roleSelect, 'editor');
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
-
+    // Simulate successful response with no errors
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [{ userIdentifier: '[email protected]', status: 'role_added' }],
@@ -343,14 +318,10 @@ describe('AddNewTeamMemberTrigger', () => {
     const triggerButton = screen.getByRole('button', { name: /assign role/i });
     await user.click(triggerButton);
 
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    await user.type(usersInput, '[email protected]');
-
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
-    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
-
+    // Simulate successful response
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [{ userIdentifier: '[email protected]', status: 'role_added' }],
@@ -390,9 +361,6 @@ describe('AddNewTeamMemberTrigger', () => {
     const triggerButton = screen.getByRole('button', { name: /assign role/i });
     await user.click(triggerButton);
 
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    await user.type(usersInput, '[email protected]');
-
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
@@ -416,38 +384,6 @@ describe('AddNewTeamMemberTrigger', () => {
     expect(mockMutate).toHaveBeenCalledTimes(2);
   });
 
-  it('shows error toast and highlights invalid users when validation finds unknown users', async () => {
-    const user = userEvent.setup();
-
-    mockMutateAsync.mockResolvedValue({ validUsers: [], invalidUsers: ['[email protected]'] });
-
-    renderWrapper(<ToastManagerProvider><AddNewTeamMemberTrigger libraryId={mockLibraryId} /></ToastManagerProvider>);
-
-    const triggerButton = screen.getByRole('button', { name: /assign role/i });
-    await user.click(triggerButton);
-
-    const usersInput = screen.getByRole('textbox', { name: 'Enter user emails or usernames' });
-    const roleSelect = screen.getByRole('combobox', { name: 'Select role' });
-    const saveButton = screen.getByRole('button', { name: 'Save team member' });
-
-    await user.type(usersInput, '[email protected]');
-    await user.selectOptions(roleSelect, 'editor');
-    await user.click(saveButton);
-
-    await waitFor(() => {
-      expect(screen.getByText(/We couldn't find a user for 1 email address or username/)).toBeInTheDocument();
-    });
-
-    // assignTeamMembersRole should NOT have been called
-    expect(mockMutate).not.toHaveBeenCalled();
-
-    // Modal should remain open
-    expect(screen.getByRole('dialog', { name: 'assign role' })).toBeInTheDocument();
-
-    // Input should be updated to show only invalid users
-    expect(usersInput).toHaveValue('[email protected]');
-  });
-
   it('displays loading state when adding team member', async () => {
     const user = userEvent.setup();
 
@@ -502,7 +438,7 @@ describe('AddNewTeamMemberTrigger', () => {
       expect(loadingIndicator).toHaveTextContent('Loading...');
     });
 
-    await waitFor(() => expect(mutateMock).toHaveBeenCalledWith(
+    expect(mutateMock).toHaveBeenCalledWith(
       {
         data: {
           users: ['[email protected]'],
@@ -511,6 +447,6 @@ describe('AddNewTeamMemberTrigger', () => {
         },
       },
       expect.any(Object),
-    ));
+    );
   });
 });

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx

@@ -136,8 +136,6 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
         .filter(Boolean),
     )];
 
-    if (normalizedUsers.length === 0) { return; }
-
     const payload = {
       users: normalizedUsers,
       role: formValues.role,