fix: Update error messages when adding user to library [FC-0062]

src/generic/processing-notification/ProcessingNotification.test.jsx

@@ -26,7 +26,15 @@ describe('<ProcessingNotification />', () => {
     expect(screen.getByText('Undo')).toBeInTheDocument();
     expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
     userEvent.click(screen.getByText('Undo'));
-    expect(mockUndo).toBeCalled();
+    expect(mockUndo).toHaveBeenCalled();
+  });
+
+  it('renders with `disableCapitalize`', () => {
+    const title = 'ThIs IS a Test. OK?';
+    render(<ProcessingNotification {...props} close={() => {}} title={title} disableCapitalize />);
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.getByText('Undo')).toBeInTheDocument();
+    expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
   });
 
   it('add hide-close-button class if no close action is passed', () => {

src/generic/processing-notification/index.jsx

@@ -7,7 +7,7 @@ import { capitalize } from 'lodash';
 import classNames from 'classnames';
 
 const ProcessingNotification = ({
-  isShow, title, action, close,
+  isShow, title, action, close, disableCapitalize,
 }) => (
   <Toast
     className={classNames({ 'processing-notification-hide-close-button': !close })}
@@ -18,13 +18,16 @@ const ProcessingNotification = ({
   >
     <span className="d-flex align-items-center">
       <Icon className="processing-notification-icon mb-0 mr-2" src={IconSettings} />
-      <span className="font-weight-bold h4 mb-0 text-white">{capitalize(title)}</span>
+      <span className="font-weight-bold h4 mb-0 text-white">
+        {!disableCapitalize ? capitalize(title) : title}
+      </span>
     </span>
   </Toast>
 );
 
 ProcessingNotification.defaultProps = {
   close: null,
+  disableCapitalize: false,
 };
 
 ProcessingNotification.propTypes = {
@@ -35,6 +38,7 @@ ProcessingNotification.propTypes = {
     onClick: PropTypes.func,
   }),
   close: PropTypes.func,
+  disableCapitalize: PropTypes.bool,
 };
 
 export default ProcessingNotification;

src/generic/toast-context/index.test.tsx

@@ -9,11 +9,12 @@ export interface WraperProps {
   children: React.ReactNode;
 }
 
-const TestComponentToShow = () => {
+// eslint-disable-next-line react/prop-types
+const TestComponentToShow = ({ capitilize = false }) => {
   const { showToast } = React.useContext(ToastContext);
 
   React.useEffect(() => {
-    showToast('This is the toast!');
+    showToast('This is the Toast!', undefined, capitilize);
   }, [showToast]);
 
   return <div>Content</div>;
@@ -23,7 +24,7 @@ const TestComponentToClose = () => {
   const { showToast, closeToast } = React.useContext(ToastContext);
 
   React.useEffect(() => {
-    showToast('This is the toast!');
+    showToast('This is the Toast!');
     closeToast();
   }, [showToast]);
 
@@ -59,19 +60,24 @@ describe('<ToastProvider />', () => {
 
   it('should show toast', async () => {
     render(<RootWrapper><TestComponentToShow /></RootWrapper>);
+    expect(await screen.findByText('This is the Toast!')).toBeInTheDocument();
+  });
+
+  it('should capitilize toast', async () => {
+    render(<RootWrapper><TestComponentToShow capitilize /></RootWrapper>);
     expect(await screen.findByText('This is the toast!')).toBeInTheDocument();
   });
 
   it('should close toast after 5000ms', async () => {
     render(<RootWrapper><TestComponentToShow /></RootWrapper>);
-    expect(await screen.findByText('This is the toast!')).toBeInTheDocument();
+    expect(await screen.findByText('This is the Toast!')).toBeInTheDocument();
     jest.advanceTimersByTime(6000);
-    expect(screen.queryByText('This is the toast!')).not.toBeInTheDocument();
+    expect(screen.queryByText('This is the Toast!')).not.toBeInTheDocument();
   });
 
   it('should close toast', async () => {
     render(<RootWrapper><TestComponentToClose /></RootWrapper>);
     expect(await screen.findByText('Content')).toBeInTheDocument();
-    expect(screen.queryByText('This is the toast!')).not.toBeInTheDocument();
+    expect(screen.queryByText('This is the Toast!')).not.toBeInTheDocument();
   });
 });

src/generic/toast-context/index.tsx

@@ -10,7 +10,8 @@ export interface ToastActionData {
 export interface ToastContextData {
   toastMessage: string | null;
   toastAction?: ToastActionData;
-  showToast: (message: string, action?: ToastActionData) => void;
+  capitilize?: boolean;
+  showToast: (message: string, action?: ToastActionData, capitilize?: boolean) => void;
   closeToast: () => void;
 }
 
@@ -25,6 +26,7 @@ export interface ToastProviderProps {
 export const ToastContext = React.createContext<ToastContextData>({
   toastMessage: null,
   toastAction: undefined,
+  capitilize: false,
   showToast: () => {},
   closeToast: () => {},
 });
@@ -38,29 +40,33 @@ export const ToastProvider = (props: ToastProviderProps) => {
 
   const [toastMessage, setToastMessage] = React.useState<string | null>(null);
   const [toastAction, setToastAction] = React.useState<ToastActionData | undefined>(undefined);
+  const [capitilize, setCapitilize] = React.useState<boolean>(false);
 
   const resetState = React.useCallback(() => {
     setToastMessage(null);
     setToastAction(undefined);
+    setCapitilize(false);
   }, []);
 
   React.useEffect(() => () => {
     // Cleanup function to avoid updating state on unmounted component
     resetState();
   }, []);
 
-  const showToast = React.useCallback((message, action?: ToastActionData) => {
+  const showToast = React.useCallback((message, action?: ToastActionData, isCapitilize?: boolean) => {
     setToastMessage(message);
     setToastAction(action);
+    setCapitilize(isCapitilize ?? false);
   }, [setToastMessage, setToastAction]);
-  const closeToast = React.useCallback(() => resetState(), [setToastMessage, setToastAction]);
+  const closeToast = React.useCallback(() => resetState(), [setToastMessage, setToastAction, setCapitilize]);
 
   const context = React.useMemo(() => ({
     toastMessage,
     toastAction,
+    capitilize,
     showToast,
     closeToast,
-  }), [toastMessage, toastAction, showToast, closeToast]);
+  }), [toastMessage, toastAction, capitilize, showToast, closeToast]);
 
   return (
     <ToastContext.Provider value={context}>
@@ -71,6 +77,7 @@ export const ToastProvider = (props: ToastProviderProps) => {
           title={toastMessage}
           action={toastAction}
           close={closeToast}
+          disableCapitalize={!capitilize}
         />
       )}
     </ToastContext.Provider>

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

@@ -15,6 +15,7 @@ import {
   getLibraryTeamMemberApiUrl,
 } from '../data/api';
 import { LibraryProvider } from '../common/context';
+import { ToastProvider } from '../../generic/toast-context';
 import LibraryTeam from './LibraryTeam';
 
 mockContentLibrary.applyMock();
@@ -28,9 +29,11 @@ describe('<LibraryTeam />', () => {
   const { libraryId } = mockContentLibrary;
   const renderLibraryTeam = async () => {
     render(
-      <LibraryProvider libraryId={libraryId}>
-        <LibraryTeam />
-      </LibraryProvider>,
+      <ToastProvider>
+        <LibraryProvider libraryId={libraryId}>
+          <LibraryTeam />
+        </LibraryProvider>
+      </ToastProvider>,
     );
 
     await waitFor(() => {
@@ -176,6 +179,56 @@ describe('<LibraryTeam />', () => {
         `{"library_id":"${libraryId}","email":"[email protected]","access_level":"read"}`,
       );
     });
+
+    expect(await screen.findByText('Team Member added')).toBeInTheDocument();
+  });
+
+  it('shows error when user do not exist', async () => {
+    const url = getLibraryTeamApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(url).reply(400, { email: '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, '[email protected]');
+
+    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. Please verify that the email is correct and belongs to a registered user.',
+    )).toBeInTheDocument();
+  });
+
+  it('shows error', async () => {
+    const url = getLibraryTeamApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(url).reply(400, { error: '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, '[email protected]');
+
+    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')).toBeInTheDocument();
   });
 
   it('allows library team member roles to be changed', async () => {

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

@@ -65,8 +65,13 @@ const LibraryTeam: React.FC<Record<never, never>> = () => {
         accessLevel: LibraryRole.Reader.toString() as LibraryAccessLevel,
       }).then(() => {
         showToast(intl.formatMessage(messages.addMemberSuccess));
-      }).catch(() => {
-        showToast(intl.formatMessage(messages.addMemberError));
+      }).catch((addMemberError) => {
+        const errorData = addMemberError.response.data;
+        if ('email' in errorData) {
+          showToast(intl.formatMessage(messages.addMemberEmailError));
+        } else {
+          showToast(intl.formatMessage(messages.addMemberError));
+        }
       });
       closeAddLibraryTeamMember();
     },

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

@@ -124,6 +124,11 @@ 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.',
+  },
   deleteMemberSuccess: {
     id: 'course-authoring.library-authoring.library-team.delete-member-success',
     defaultMessage: 'Team Member deleted',