feat: enhance Add New Team Member functionality with user validation and error handling

Author: bra-i-am

src/authz-module/data/api.test.ts

@@ -112,7 +112,7 @@ describe('validateUsers', () => {
     const result = await validateUsers({ users: ['jdoe', 'unknown'] });
 
     expect(mockPost).toHaveBeenCalledWith(
-      'http://localhost:8000/api/authz/v1/users/validate',
+      'http://localhost:8000/api/authz/v1/users/validate/',
       { users: ['jdoe', 'unknown'] },
     );
     expect(result).toEqual(mockResponse);

src/authz-module/data/api.ts

@@ -91,7 +91,7 @@ export const validateUsers = async (
   data: ValidateUsersRequest,
 ): Promise<ValidateUsersResponse> => {
   const res = await getAuthenticatedHttpClient().post(
-    getApiUrl('/api/authz/v1/users/validate'),
+    getApiUrl('/api/authz/v1/users/validate/'),
     data,
   );
   return camelCaseObject(res.data);

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

@@ -1,18 +1,20 @@
-import React, { act } from 'react';
+import { act } from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
-import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
+import { useAssignTeamMembersRole, useValidateUsers } 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', () => {
@@ -54,12 +56,17 @@ 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', () => {
@@ -109,7 +116,7 @@ describe('AddNewTeamMemberTrigger', () => {
     await user.selectOptions(roleSelect, 'editor');
     await user.click(saveButton);
 
-    expect(mockMutate).toHaveBeenCalledWith(
+    await waitFor(() => expect(mockMutate).toHaveBeenCalledWith(
       {
         data: {
           users: ['[email protected]', '[email protected]'],
@@ -120,7 +127,7 @@ describe('AddNewTeamMemberTrigger', () => {
       expect.objectContaining({
         onSuccess: expect.any(Function),
       }),
-    );
+    ));
   });
 
   it('displays success toast and closes modal on successful addition with no errors', async () => {
@@ -130,10 +137,14 @@ 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);
 
-    // Simulate successful response with no errors
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [
@@ -157,10 +168,14 @@ 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);
 
-    // Simulate partial success response
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [
@@ -231,10 +246,14 @@ 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);
 
-    // Simulate all failed response
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [],
@@ -259,9 +278,14 @@ 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: [],
@@ -294,7 +318,8 @@ describe('AddNewTeamMemberTrigger', () => {
     await user.selectOptions(roleSelect, 'editor');
     await user.click(saveButton);
 
-    // Simulate successful response with no errors
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [{ userIdentifier: '[email protected]', status: 'role_added' }],
@@ -318,10 +343,14 @@ 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);
 
-    // Simulate successful response
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+
     const [, { onSuccess }] = mockMutate.mock.calls[0];
     onSuccess({
       completed: [{ userIdentifier: '[email protected]', status: 'role_added' }],
@@ -361,6 +390,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]');
+
     const saveButton = screen.getByRole('button', { name: 'Save team member' });
     await user.click(saveButton);
 
@@ -384,6 +416,38 @@ 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();
 
@@ -438,7 +502,7 @@ describe('AddNewTeamMemberTrigger', () => {
       expect(loadingIndicator).toHaveTextContent('Loading...');
     });
 
-    expect(mutateMock).toHaveBeenCalledWith(
+    await waitFor(() => expect(mutateMock).toHaveBeenCalledWith(
       {
         data: {
           users: ['[email protected]'],
@@ -447,6 +511,6 @@ describe('AddNewTeamMemberTrigger', () => {
         },
       },
       expect.any(Object),
-    );
+    ));
   });
 });

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

@@ -4,7 +4,7 @@ import { Button, useToggle } from '@openedx/paragon';
 import { Plus } from '@openedx/paragon/icons';
 
 import { PutAssignTeamMembersRoleResponse } from 'authz-module/data/api';
-import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
+import { useAssignTeamMembersRole, useValidateUsers } from '@src/authz-module/data/hooks';
 import { RoleOperationErrorStatus } from '@src/authz-module/constants';
 import { AppToast, useToastManager } from '@src/authz-module/libraries-manager/ToastManagerContext';
 import { DEFAULT_TOAST_DELAY } from '@src/authz-module/libraries-manager/constants';
@@ -28,7 +28,9 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
   const [isError, setIsError] = useState(false);
   const [errorUsers, setErrorUsers] = useState<string[]>([]);
 
-  const { mutate: assignTeamMembersRole, isPending } = useAssignTeamMembersRole();
+  const { mutate: assignTeamMembersRole, isPending: isAssigning } = useAssignTeamMembersRole();
+  const { mutateAsync: validateUsersAsync, isPending: isValidating } = useValidateUsers();
+  const isPending = isAssigning || isValidating;
   const {
     showToast, showErrorToast, Bold, Br,
   } = useToastManager();
@@ -128,16 +130,45 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
     };
   };
 
-  const handleAddTeamMember = () => {
+  const handleAddTeamMember = async () => {
     const normalizedUsers = [...new Set(
       formValues.users
         .split(',')
         .map((u) => u.trim())
         .filter(Boolean),
     )];
 
+    let usersToAssign = normalizedUsers;
+
+    try {
+      const { invalidUsers } = await validateUsersAsync({ data: { users: normalizedUsers } });
+
+      if (invalidUsers.length > 0) {
+        const notFoundMessage = intl.formatMessage(
+          messages['libraries.authz.manage.add.member.failure.not.found'],
+          {
+            count: invalidUsers.length,
+            userIds: invalidUsers.join(', '),
+            Bold,
+            Br,
+          },
+        );
+        showToast({ message: notFoundMessage, type: 'error', delay: DEFAULT_TOAST_DELAY });
+        setErrorUsers(invalidUsers);
+        setIsError(true);
+        setFormValues((prev) => ({ ...prev, users: invalidUsers.join(', ') }));
+        return;
+      }
+
+      usersToAssign = normalizedUsers.filter((u) => !invalidUsers.includes(u));
+    } catch (validationError) {
+      // If validation endpoint fails, fall through and let assignTeamMembersRole handle errors
+    }
+
+    if (usersToAssign.length === 0) { return; }
+
     const payload = {
-      users: normalizedUsers,
+      users: usersToAssign,
       role: formValues.role,
       scope: libraryId,
     };
@@ -167,7 +198,7 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
               ...roleAlreadyAssignedUsers.map(r => r.userIdentifier),
             ];
 
-            const errorUserIds = normalizedUsers.filter((user) => !successUserIds.includes(user));
+            const errorUserIds = usersToAssign.filter((user) => !successUserIds.includes(user));
             setErrorUsers(errorUserIds);
             setIsError(true);
             setFormValues((prev) => ({