feat: add tost for error feedback

Author: dcoa

src/authz-module/components/RoleCard/index.test.tsx

@@ -20,7 +20,7 @@ describe('RoleCard', () => {
     title: 'Admin',
     objectName: 'Test Library',
     description: 'Can manage everything',
-    showDelete: true,
+    handleDelete: jest.fn(),
     userCounter: 2,
     permissions: [
       {
@@ -71,8 +71,8 @@ describe('RoleCard', () => {
     expect(screen.getByTestId('manage-icon')).toBeInTheDocument();
   });
 
-  it('does not show delete button when showDelete is false', () => {
-    renderWrapper(<RoleCard {...defaultProps} showDelete={false} />);
+  it('does not show delete button when handleDelete is not passed', () => {
+    renderWrapper(<RoleCard {...defaultProps} handleDelete={undefined} />);
     expect(screen.queryByRole('button', { name: /delete role action/i })).not.toBeInTheDocument();
   });
 

src/authz-module/data/hooks.ts

@@ -87,7 +87,6 @@ export const useAssignTeamMembersRole = () => {
   });
 };
 
-
 /**
  * React Query hook to remove roles for a specific team member within a scope.
  *

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

@@ -4,6 +4,7 @@ import { renderWrapper } from '@src/setupTest';
 import LibrariesUserManager from './LibrariesUserManager';
 import { useLibraryAuthZ } from './context';
 import { useLibrary, useTeamMembers } from '../data/hooks';
+import { ToastManagerProvider } from './ToastManagerContext';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -17,6 +18,11 @@ jest.mock('./context', () => ({
 jest.mock('../data/hooks', () => ({
   useLibrary: jest.fn(),
   useTeamMembers: jest.fn(),
+  useRevokeUserRoles: jest.fn(() => ({
+    isPending: false,
+    mutation: jest.fn(),
+
+  })),
 }));
 jest.mock('../components/RoleCard', () => ({
   __esModule: true,
@@ -73,7 +79,7 @@ describe('LibrariesUserManager', () => {
   });
 
   it('renders the user roles correctly', () => {
-    renderWrapper(<LibrariesUserManager />);
+    renderWrapper(<ToastManagerProvider><LibrariesUserManager /></ToastManagerProvider>);
 
     // Breadcrumb check
     expect(screen.getByText('Manage Access')).toBeInTheDocument();

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

@@ -1,19 +1,20 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
 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 { useToastManager } from '@src/authz-module/libraries-manager/ToastManagerContext';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibraryAuthZ } from './context';
 import RoleCard from '../components/RoleCard';
 import { AssignNewRoleTrigger } from './components/AssignNewRoleModal';
+import ConfirmDeletionModal from './components/ConfirmDeletionModal';
 import { useLibrary, useRevokeUserRoles, useTeamMembers } from '../data/hooks';
 import { buildPermissionsByRoleMatrix } from './utils';
 
 import messages from './messages';
-import ConfirmDeletionModal from './components/ConfirmDeletionModal';
 
 const LibrariesUserManager = () => {
   const intl = useIntl();
@@ -22,18 +23,26 @@ const LibrariesUserManager = () => {
   const {
     libraryId, permissions, roles, resources, canManageTeam,
   } = useLibraryAuthZ();
+  const teamMembersPath = `/authz/${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
+
+  useEffect(() => {
+    if (!canManageTeam) {
+      navigate(teamMembersPath);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canManageTeam]);
+
   const { data: library } = useLibrary(libraryId);
   const { mutate: revokeUserRoles, isPending: isRevokingUserRole } = useRevokeUserRoles();
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageManageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
-  const teamMembersPath = `/authz/${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', libraryId)}`;
 
   const [roleToDelete, setRoleToDelete] = useState<Role | null>(null);
   const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
   const { handleShowToast, handleDiscardToast } = useToastManager();
 
-  const { data: teamMembers, isLoading: isLoadingTeamMembers } = useTeamMembers(libraryId);
-  const user = teamMembers?.find(member => member.username === username);
+  const { data: teamMember, isLoading: isLoadingTeamMember, isFetching: isFetchingMember } = useTeamMembers(libraryId);
+  const user = teamMember?.find(member => member.username === username);
   const userRoles = useMemo(() => {
     const assignedRoles = roles.filter(role => user?.roles.includes(role.role))
       .map(role => ({
@@ -45,6 +54,15 @@ const LibrariesUserManager = () => {
     return assignedRoles;
   }, [roles, user?.roles, permissions, resources, intl]);
 
+  useEffect(() => {
+    if (!isFetchingMember) {
+      if (!isLoadingTeamMember && !user?.username) {
+        navigate(teamMembersPath);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetchingMember, isLoadingTeamMember, user?.username]);
+
   const handleCloseConfirmDeletionModal = () => {
     setRoleToDelete(null);
     setShowConfirmDeletionModal(false);
@@ -80,21 +98,14 @@ const LibrariesUserManager = () => {
         handleCloseConfirmDeletionModal();
       },
       onError: (error) => {
-        // eslint-disable-next-line no-console
-        console.error('Failed to revoke user role:', 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 /> }));
         handleCloseConfirmDeletionModal();
-        // Could add error toast here if needed
       },
     });
   };
 
-  useEffect(() => {
-    if (!isLoadingTeamMembers && !userRoles.length) {
-      navigate(teamMembersPath);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userRoles.length]);
-
   return (
     <div className="authz-libraries">
       <ConfirmDeletionModal
@@ -127,7 +138,7 @@ const LibrariesUserManager = () => {
         <Container className="bg-light-200 p-5">
           {userRoles && userRoles.map(role => (
             <RoleCard
-              key={`${role}-${username}`}
+              key={`${role.role}-${username}`}
               title={role.name}
               objectName={library.title}
               description={role.description}

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

@@ -36,6 +36,26 @@ const messages = defineMessages({
     defaultMessage: 'Add New Role',
     description: 'Libraries AuthZ assign a new role to a user button title',
   },
+  'libraries.authz.manage.cancel.button': {
+    id: 'libraries.authz.manage.cancel.button',
+    defaultMessage: 'Cancel',
+    description: 'Libraries AuthZ cancel button title',
+  },
+  'libraries.authz.manage.saving.button': {
+    id: 'libraries.authz.manage.saving.button',
+    defaultMessage: 'Saving...',
+    description: 'Libraries AuthZ saving button title',
+  },
+  'libraries.authz.manage.save.button': {
+    id: 'libraries.authz.manage.save.button',
+    defaultMessage: 'Save',
+    description: 'Libraries AuthZ save button title',
+  },
+  'libraries.authz.manage.assign.role.success': {
+    id: 'libraries.authz.manage.assign.role.success',
+    defaultMessage: 'Role added successfully.',
+    description: 'Libraries AuthZ assign role success message',
+  },
   'library.authz.team.remove.user.modal.title': {
     id: 'library.authz.team.remove.user.modal.title',
     defaultMessage: 'Remove role?',
@@ -56,11 +76,6 @@ const messages = defineMessages({
     defaultMessage: 'Are you sure you want to proceed?',
     description: 'Libraries team management remove user modal body',
   },
-  'libraries.authz.manage.cancel.button': {
-    id: 'libraries.authz.manage.cancel.button',
-    defaultMessage: 'Cancel',
-    description: 'Libraries AuthZ cancel button title',
-  },
   'libraries.authz.manage.removing.button': {
     id: 'libraries.authz.manage.removing.button',
     defaultMessage: 'Removing...',
@@ -71,11 +86,6 @@ const messages = defineMessages({
     defaultMessage: 'Remove',
     description: 'Libraries AuthZ remove button title',
   },
-  'libraries.authz.manage.assign.role.success': {
-    id: 'libraries.authz.manage.assign.role.success',
-    defaultMessage: 'Role added successfully.',
-    description: 'Libraries AuthZ assign role success message',
-  },
 });
 
 export default messages;

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

@@ -31,6 +31,11 @@ const messages = defineMessages({
     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',
   },
+  'library.authz.team.default.error.toast.message': {
+    id: 'library.authz.team.default.error.toast.message',
+    defaultMessage: '<b>Something went wrong on our end</b> <br></br> Please try again later.',
+    description: 'Libraries team management remove user toast success',
+  },
 });
 
 export default messages;