refactor: Update error message while adding library team member [FC-0062] (#1572)

Update the error message while adding a library team member to show the error message generated by the server

src/library-authoring/library-team/LibraryTeam.test.tsx

@@ -183,10 +183,10 @@ describe('<LibraryTeam />', () => {
     expect(await screen.findByText('Team Member added')).toBeInTheDocument();
   });
 
-  it('shows error when user do not exist', async () => {
+  it('shows error when specific error (string)', async () => {
     const url = getLibraryTeamApiUrl(libraryId);
     const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    axiosMock.onPost(url).reply(400, { email: 'Error' });
+    axiosMock.onPost(url).reply(400, { email: 'This is a specific error.' });
 
     await renderLibraryTeam();
 
@@ -204,7 +204,32 @@ describe('<LibraryTeam />', () => {
     });
 
     expect(await screen.findByText(
-      'Error adding Team Member. Please verify that the email is correct and belongs to a registered user.',
+      'Error adding Team Member. This is a specific error.',
+    )).toBeInTheDocument();
+  });
+
+  it('shows error when specific error (Array)', async () => {
+    const url = getLibraryTeamApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(url).reply(400, { email: ['This is a specific error.'] });
+
+    await renderLibraryTeam();
+
+    const addButton = screen.getByRole('button', { name: 'New team member' });
+    userEvent.click(addButton);
+    const emailInput = screen.getByRole('textbox', { name: 'User\'s email address' });
+    userEvent.click(emailInput);
+    userEvent.type(emailInput, 'another@user.tld');
+
+    const saveButton = screen.getByRole('button', { name: /add member/i });
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+    });
+
+    expect(await screen.findByText(
+      'Error adding Team Member. This is a specific error.',
     )).toBeInTheDocument();
   });
 

src/library-authoring/library-team/LibraryTeam.tsx

@@ -68,7 +68,16 @@ const LibraryTeam: React.FC<Record<never, never>> = () => {
       }).catch((addMemberError) => {
         const errorData = typeof addMemberError === 'object' ? addMemberError.response?.data : undefined;
         if (errorData && 'email' in errorData) {
-          showToast(intl.formatMessage(messages.addMemberEmailError));
+          const errorEmail = errorData.email;
+          if (typeof errorEmail === 'string') {
+            showToast(intl.formatMessage(messages.addMemberSpecificError, {
+              message: errorEmail,
+            }));
+          } else {
+            showToast(intl.formatMessage(messages.addMemberSpecificError, {
+              message: errorEmail[0],
+            }));
+          }
         } else {
           showToast(intl.formatMessage(messages.addMemberError));
         }

src/library-authoring/library-team/messages.ts

@@ -124,10 +124,10 @@ const messages = defineMessages({
     defaultMessage: 'Error adding Team Member',
     description: 'Message shown when an error occurs while adding a Library Team member',
   },
-  addMemberEmailError: {
-    id: 'course-authoring.library-authoring.library-team.add-member-email-error',
-    defaultMessage: 'Error adding Team Member. Please verify that the email is correct and belongs to a registered user.',
-    description: 'Message shown when an error occurs with email while adding a Library Team member.',
+  addMemberSpecificError: {
+    id: 'course-authoring.library-authoring.library-team.add-member-specific-error',
+    defaultMessage: 'Error adding Team Member. {message}',
+    description: 'Message shown when an error occurs while adding a Library Team member, including a specific error message.',
   },
   deleteMemberSuccess: {
     id: 'course-authoring.library-authoring.library-team.delete-member-success',