refactor: Modify ToastManager for general feedback

Exposes a showToast for managing action errors and the showErrorToast for managing general server errors

Author: dcoa

jest.config.js

@@ -4,13 +4,13 @@ module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
   // If you want to add config BEFORE jest loads, use setupFiles instead.  
   setupFilesAfterEnv: [
-    '<rootDir>/src/setupTest.jsx',
+    '<rootDir>/src/setupTest.tsx',
   ],
   moduleNameMapper: {
     '^@src/(.*)$': '<rootDir>/src/$1',
   },
   coveragePathIgnorePatterns: [
-    'src/setupTest.jsx',
+    'src/setupTest.tsx',
     'src/i18n',
   ],
 });

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

@@ -47,7 +47,7 @@ const LibrariesUserManager = () => {
 
   const [roleToDelete, setRoleToDelete] = useState<Role | null>(null);
   const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
-  const { handleShowToast, handleDiscardToast } = useToastManager();
+  const { showToast, Bold, Br } = useToastManager();
 
   const {
     data: teamMember, isLoading: isLoadingTeamMember, isFetching: isFetchingMember,
@@ -78,7 +78,6 @@ const LibrariesUserManager = () => {
   const handleShowConfirmDeletionModal = (role: Role) => {
     if (isRevokingUserRole) { return; }
 
-    handleDiscardToast();
     setRoleToDelete(role);
     setShowConfirmDeletionModal(true);
   };
@@ -95,19 +94,26 @@ const LibrariesUserManager = () => {
     revokeUserRoles({ data }, {
       onSuccess: () => {
         const remainingRolesCount = userRoles.length - 1;
-        handleShowToast(intl.formatMessage(
-          messages['library.authz.team.remove.user.toast.success.description'],
-          {
-            role: roleToDelete.name,
-            rolesCount: remainingRolesCount,
-          },
-        ));
+        showToast({
+          message: intl.formatMessage(
+            messages['library.authz.team.remove.user.toast.success.description'],
+            {
+              role: roleToDelete.name,
+              rolesCount: remainingRolesCount,
+            },
+          ),
+          type: 'success',
+        });
+
         handleCloseConfirmDeletionModal();
       },
       onError: (error) => {
         logError(error);
-        // eslint-disable-next-line react/no-unstable-nested-components
-        handleShowToast(intl.formatMessage(messages['library.authz.team.default.error.toast.message'], { b: chunk => <b>{chunk}</b>, br: () => <br /> }));
+
+        showToast({
+          type: 'error',
+          message: intl.formatMessage(messages['library.authz.team.toast.default.error.message'], { Bold, Br }),
+        });
         handleCloseConfirmDeletionModal();
       },
     });

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

@@ -1,36 +1,26 @@
-import { screen, waitFor, render as rtlRender } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWrapper } from '@src/setupTest';
 import { ToastManagerProvider, useToastManager } from './ToastManagerContext';
 
-const render = (ui: React.ReactElement) => rtlRender(
-  <IntlProvider locale="en">
-    {ui}
-  </IntlProvider>,
-);
-
 const TestComponent = () => {
-  const { handleShowToast, handleDiscardToast } = useToastManager();
+  const { showToast } = useToastManager();
+
+  const handleShowToast = () => showToast({ message: 'Test toast message', type: 'error' });
+  const handleShowAnotherToast = () => showToast({ message: 'Another message', type: 'success' });
 
   return (
     <div>
-      <button type="button" onClick={() => handleShowToast('Test toast message')}>
-        Show Toast
-      </button>
-      <button type="button" onClick={() => handleShowToast('Another message')}>
-        Show Another Toast
-      </button>
-      <button type="button" onClick={handleDiscardToast}>
-        Discard Toast
-      </button>
+      <button type="button" onClick={handleShowToast}>Show Toast</button>
+      <button type="button" onClick={handleShowAnotherToast}>Show Another Toast</button>
     </div>
   );
 };
 
 describe('ToastManagerContext', () => {
   describe('ToastManagerProvider', () => {
     it('does not show toast initially', () => {
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
@@ -39,15 +29,14 @@ describe('ToastManagerContext', () => {
       expect(screen.queryByRole('alert')).not.toBeInTheDocument();
     });
 
-    it('shows toast when handleShowToast is called', async () => {
+    it('shows toast when showToast is called', async () => {
       const user = userEvent.setup();
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
       );
 
-      // handleShowToast is called on button click
       const showButton = screen.getByText('Show Toast');
       await user.click(showButton);
 
@@ -57,59 +46,29 @@ describe('ToastManagerContext', () => {
       });
     });
 
-    it('updates toast message when handleShowToast is called with different message', async () => {
+    it('adds multiple toasts when showToast is called multiple times', async () => {
       const user = userEvent.setup();
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
       );
 
-      // Show first toast
       const showButton = screen.getByText('Show Toast');
-      await user.click(showButton);
-
-      await waitFor(() => {
-        expect(screen.getByText('Test toast message')).toBeInTheDocument();
-      });
-
-      // Show another toast
       const showAnotherButton = screen.getByText('Show Another Toast');
-      await user.click(showAnotherButton);
 
-      await waitFor(() => {
-        expect(screen.getByText('Another message')).toBeInTheDocument();
-        expect(screen.queryByText('Test toast message')).not.toBeInTheDocument();
-      });
-    });
-
-    it('hides toast when handleDiscardToast is called', async () => {
-      const user = userEvent.setup();
-      render(
-        <ToastManagerProvider>
-          <TestComponent />
-        </ToastManagerProvider>,
-      );
-
-      const showButton = screen.getByText('Show Toast');
       await user.click(showButton);
+      await user.click(showAnotherButton);
 
       await waitFor(() => {
         expect(screen.getByText('Test toast message')).toBeInTheDocument();
-      });
-
-      // handleDiscardToast is called on button click
-      const discardButton = screen.getByText('Discard Toast');
-      await user.click(discardButton);
-
-      await waitFor(() => {
-        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(screen.getByText('Another message')).toBeInTheDocument();
       });
     });
 
     it('hides toast when close button is clicked', async () => {
       const user = userEvent.setup();
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
@@ -127,48 +86,22 @@ describe('ToastManagerContext', () => {
 
       await waitFor(() => {
         expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-      });
-    });
-
-    it('calls handleClose callback when toast is closed', async () => {
-      const user = userEvent.setup();
-      const mockHandleClose = jest.fn();
-
-      render(
-        <ToastManagerProvider handleClose={mockHandleClose}>
-          <TestComponent />
-        </ToastManagerProvider>,
-      );
-
-      const showButton = screen.getByText('Show Toast');
-      await user.click(showButton);
-
-      await waitFor(() => {
-        expect(screen.getByText('Test toast message')).toBeInTheDocument();
-      });
-
-      const closeButton = screen.getByLabelText('Close');
-      await user.click(closeButton);
-
-      await waitFor(() => {
-        expect(mockHandleClose).toHaveBeenCalledTimes(1);
-      });
+      }, { timeout: 500 });
     });
   });
 
   describe('useToastManager hook', () => {
     it('throws error when used outside ToastManagerProvider', () => {
-      // Suppress console.error for this test
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
 
       const TestComponentWithoutProvider = () => {
         useToastManager();
         return <div>Test</div>;
       };
 
       expect(() => {
-        render(<TestComponentWithoutProvider />);
-      }).toThrow('useToastManager must be used within an ToastManagerProvider');
+        renderWrapper(<TestComponentWithoutProvider />);
+      }).toThrow('useToastManager must be used within a ToastManagerProvider');
 
       consoleSpy.mockRestore();
     });

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

@@ -1,57 +1,117 @@
 import {
-  createContext, useContext, useMemo, useState,
+  createContext, useContext, useState, useMemo,
 } from 'react';
+import { logError } from '@edx/frontend-platform/logging';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Toast } from '@openedx/paragon';
+import messages from './messages';
+
+type ToastType = 'success' | 'error' | 'error-retry';
+
+export const ERROR_TOAST_MAP: Record<number | string, { type: ToastType; messageId: string }> = {
+  // Transient (retryable) server errors
+  500: { type: 'error-retry', messageId: 'library.authz.team.toast.500.error.message' },
+  502: { type: 'error-retry', messageId: 'library.authz.team.toast.502.error.message' },
+  503: { type: 'error-retry', messageId: 'library.authz.team.toast.503.error.message' },
+  408: { type: 'error-retry', messageId: 'library.authz.team.toast.408.error.message' },
+
+  // Generic fallback error
+  DEFAULT: { type: 'error-retry', messageId: 'library.authz.team.toast.default.error.message' },
+};
+
+interface AppToast {
+  id: string;
+  message: string;
+  type: ToastType;
+  onRetry?: () => void;
+}
+
+const Bold = (chunk: string) => <b>{chunk}</b>;
+const Br = () => <br />;
 
 type ToastManagerContextType = {
-  handleShowToast: (message: string) => void;
-  handleDiscardToast: () => void;
+  showToast: (toast: Omit<AppToast, 'id'>) => void;
+  showErrorToast: (error, retryFn?: () => void) => void;
+  Bold: (chunk: string) => JSX.Element;
+  Br: () => JSX.Element;
 };
 
 const ToastManagerContext = createContext<ToastManagerContextType | undefined>(undefined);
 
 interface ToastManagerProviderProps {
-  handleClose?: () => void
   children: React.ReactNode | React.ReactNode[];
 }
 
-export const ToastManagerProvider = ({ handleClose, children }: ToastManagerProviderProps) => {
-  const [toastMessage, setToastMessage] = useState<string | null>(null);
+export const ToastManagerProvider = ({ children }: ToastManagerProviderProps) => {
+  const intl = useIntl();
+  const [toasts, setToasts] = useState<(AppToast & { visible: boolean })[]>([]);
 
-  const handleShowToast = (message: string) => {
-    setToastMessage(message);
+  const showToast = (toast: Omit<AppToast, 'id'>) => {
+    const id = `toast-notification-${Date.now()}`;
+    const newToast = { ...toast, id, visible: true };
+    setToasts(prev => [...prev, newToast]);
   };
 
-  const handleDiscardToast = () => {
-    setToastMessage(null);
+  const discardToast = (id: string) => {
+    setToasts(prev => prev.map(t => (t.id === id ? { ...t, visible: false } : t)));
+
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, 5000);
   };
 
-  const value = useMemo((): ToastManagerContextType => ({
-    handleShowToast,
-    handleDiscardToast,
-  }), []);
+  const value = useMemo<ToastManagerContextType>(() => {
+    const showErrorToast = (error, retryFn?: () => void) => {
+      logError(error);
+      const errorStatus = error?.customAttributes?.httpErrorStatus;
+      const toastConfig = ERROR_TOAST_MAP[errorStatus] || ERROR_TOAST_MAP.DEFAULT;
+      const message = intl.formatMessage(messages[toastConfig.messageId], { Bold, Br });
+
+      showToast({
+        message,
+        type: toastConfig.type,
+        onRetry: toastConfig.type === 'error-retry' && retryFn ? retryFn : undefined,
+      });
+    };
+
+    return ({
+      showToast,
+      showErrorToast,
+      Bold,
+      Br,
+    });
+  }, [intl]);
 
   return (
     <ToastManagerContext.Provider value={value}>
       {children}
 
-      <Toast
-        onClose={() => {
-          if (handleClose) { handleClose(); }
-          setToastMessage(null);
-        }}
-        show={!!toastMessage}
-      >
-        {toastMessage ?? ''}
-      </Toast>
+      <div className="toast-container">
+        {toasts.map(toast => (
+          <Toast
+            key={toast.id}
+            show={toast.visible}
+            onClose={() => discardToast(toast.id)}
+            action={toast.onRetry ? {
+              onClick: () => {
+                discardToast(toast.id);
+                toast.onRetry?.();
+              },
+              label: intl.formatMessage(messages['library.authz.team.toast.retry.label']),
+            } : undefined}
+          >
+            {toast.message}
+          </Toast>
+        ))}
+      </div>
     </ToastManagerContext.Provider>
   );
 };
 
 export const useToastManager = (): ToastManagerContextType => {
   const context = useContext(ToastManagerContext);
-  if (context === undefined) {
-    throw new Error('useToastManager must be used within an ToastManagerProvider');
+  if (!context) {
+    throw new Error('useToastManager must be used within a ToastManagerProvider');
   }
   return context;
 };