feat: implement ToastManager for user role removal notifications

Author: bra-i-am

src/authz-module/index.scss

@@ -36,11 +36,10 @@
   }
 }
 
-
 .toast-container {
   // Ensure toast appears above modal
   z-index: 1000;
   // Move toast to the right 
   left: auto;
   right: var(--pgn-spacing-toast-container-gutter-lg);
-}
+}

src/authz-module/index.tsx

@@ -2,21 +2,24 @@ import { Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { ErrorBoundary } from '@edx/frontend-platform/react';
 import LoadingPage from '@src/components/LoadingPage';
+import { ToastManagerProvider } from './libraries-manager/ToastManagerContext';
 import { LibrariesTeamManager, LibrariesUserManager, LibrariesLayout } from './libraries-manager';
 import { ROUTES } from './constants';
 
 import './index.scss';
 
 const AuthZModule = () => (
   <ErrorBoundary>
-    <Suspense fallback={<LoadingPage />}>
-      <Routes>
-        <Route element={<LibrariesLayout />}>
-          <Route path={ROUTES.LIBRARIES_TEAM_PATH} element={<LibrariesTeamManager />} />
-          <Route path={ROUTES.LIBRARIES_USER_PATH} element={<LibrariesUserManager />} />
-        </Route>
-      </Routes>
-    </Suspense>
+    <ToastManagerProvider>
+      <Suspense fallback={<LoadingPage />}>
+        <Routes>
+          <Route element={<LibrariesLayout />}>
+            <Route path={ROUTES.LIBRARIES_TEAM_PATH} element={<LibrariesTeamManager />} />
+            <Route path={ROUTES.LIBRARIES_USER_PATH} element={<LibrariesUserManager />} />
+          </Route>
+        </Routes>
+      </Suspense>
+    </ToastManagerProvider>
   </ErrorBoundary>
 );
 

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

@@ -4,6 +4,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Container } from '@openedx/paragon';
 import { ROUTES } from '@src/authz-module/constants';
 import { Role } from 'types';
+import { useToastManager } from 'authz-module/libraries-manager/ToastManagerContext';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibraryAuthZ } from './context';
 import RoleCard from '../components/RoleCard';
@@ -29,6 +30,7 @@ const LibrariesUserManager = () => {
 
   const [roleToDelete, setRoleToDelete] = useState('');
   const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
+  const { handleShowToast, handleDiscardToast } = useToastManager();
 
   const { data: teamMembers, isLoading: isLoadingTeamMembers } = useTeamMembers(libraryId);
   const user = teamMembers?.find(member => member.username === username);
@@ -44,11 +46,12 @@ const LibrariesUserManager = () => {
   }, [roles, user?.roles, permissions, resources, intl]);
 
   const handleCloseConfirmDeletionModal = () => {
-    setShowConfirmDeletionModal(false);
     setRoleToDelete('');
+    setShowConfirmDeletionModal(false);
   };
 
   const handleShowConfirmDeletionModal = (role: Pick<Role, 'name' | 'role'>) => {
+    handleDiscardToast();
     setRoleToDelete(role.name);
     setShowConfirmDeletionModal(true);
   };
@@ -63,6 +66,10 @@ const LibrariesUserManager = () => {
 
       revokeUserRoles({ data }, {
         onSuccess: () => {
+          handleShowToast(intl.formatMessage(messages['library.authz.team.remove.user.toast.success.description'], {
+            role,
+            rolesCount: userRoles.length - 1,
+          }));
           handleCloseConfirmDeletionModal();
         },
       });

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

@@ -0,0 +1,59 @@
+import {
+  createContext, useContext, useMemo, useState,
+} from 'react';
+import { Toast } from '@openedx/paragon';
+
+type ToastManagerContextType = {
+  handleShowToast: (message: string) => void;
+  handleDiscardToast: () => void;
+};
+
+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);
+
+  const handleShowToast = (message: string) => {
+    setToastMessage(message);
+  };
+
+  const handleDiscardToast = () => {
+    setToastMessage(null);
+  };
+
+  const value = useMemo((): ToastManagerContextType => ({
+    handleShowToast,
+    handleDiscardToast,
+  }), []);
+
+  return (
+    <ToastManagerContext.Provider value={value}>
+      {children}
+
+      {toastMessage && (
+        <Toast
+          onClose={() => {
+            if (handleClose) { handleClose(); }
+            setToastMessage(null);
+          }}
+          show={!!toastMessage}
+        >
+          {toastMessage}
+        </Toast>
+      )}
+    </ToastManagerContext.Provider>
+  );
+};
+
+export const useToastManager = (): ToastManagerContextType => {
+  const context = useContext(ToastManagerContext);
+  if (context === undefined) {
+    throw new Error('useToastManager must be used within an ToastManagerProvider');
+  }
+  return context;
+};

src/authz-module/libraries-manager/messages.ts

@@ -26,6 +26,11 @@ const messages = defineMessages({
     defaultMessage: 'Permissions',
     description: 'Libreries AuthZ title for the permissions tab',
   },
+  'library.authz.team.remove.user.toast.success.description': {
+    id: 'library.authz.team.remove.user.toast.success.description',
+    defaultMessage: 'The {role} role has been successfully removed.{rolesCount, plural, =0 { The user no longer has access to this library and has been removed from the member list.} other {}}',
+    description: 'Libraries team management remove user toast success',
+  },
 });
 
 export default messages;