refactor: manage retry in fail server error

Author: dcoa

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

@@ -241,7 +241,7 @@ describe('LibrariesUserManager', () => {
       await user.click(removeButton);
 
       const onSuccessCallback = mockMutate.mock.calls[0][1].onSuccess;
-      onSuccessCallback();
+      onSuccessCallback({ errors: [] });
 
       await waitFor(() => {
         expect(screen.getByText(/The Admin role has been successfully removed/)).toBeInTheDocument();
@@ -278,7 +278,7 @@ describe('LibrariesUserManager', () => {
       await user.click(removeButton);
 
       const onSuccessCallback = mockMutate.mock.calls[0][1].onSuccess;
-      onSuccessCallback();
+      onSuccessCallback({ errors: [] });
 
       await waitFor(() => {
         expect(screen.getByText(/The user no longer has access to this library/)).toBeInTheDocument();
@@ -322,7 +322,7 @@ describe('LibrariesUserManager', () => {
       await user.click(removeButton);
 
       const onSuccessCallback = mockMutate.mock.calls[0][1].onSuccess;
-      onSuccessCallback();
+      onSuccessCallback({ errors: [] });
 
       await waitFor(() => {
         expect(screen.queryByText('Remove role?')).not.toBeInTheDocument();

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

@@ -1,7 +1,6 @@
 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, Skeleton } from '@openedx/paragon';
 import { ROUTES } from '@src/authz-module/constants';
 import { Role } from 'types';
@@ -47,7 +46,9 @@ const LibrariesUserManager = () => {
 
   const [roleToDelete, setRoleToDelete] = useState<Role | null>(null);
   const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
-  const { showToast, Bold, Br } = useToastManager();
+  const {
+    showToast, showErrorToast, Bold, Br,
+  } = useToastManager();
 
   const {
     data: teamMember, isLoading: isLoadingTeamMember, isFetching: isFetchingMember,
@@ -91,32 +92,42 @@ const LibrariesUserManager = () => {
       scope: libraryId,
     };
 
-    revokeUserRoles({ data }, {
-      onSuccess: () => {
-        const remainingRolesCount = userRoles.length - 1;
-        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);
-
-        showToast({
-          type: 'error',
-          message: intl.formatMessage(messages['library.authz.team.toast.default.error.message'], { Bold, Br }),
-        });
-        handleCloseConfirmDeletionModal();
-      },
-    });
+    const runRevokeRole = (variables = { data }) => {
+      revokeUserRoles(variables, {
+        onSuccess: (response) => {
+          const { errors } = response;
+
+          if (errors.length) {
+            showToast({
+              type: 'error',
+              message: intl.formatMessage(
+                messages['library.authz.team.toast.default.error.message'],
+                { Bold, Br },
+              ),
+            });
+            return;
+          }
+
+          const remainingRolesCount = userRoles.length - 1;
+          showToast({
+            message: intl.formatMessage(
+              messages['library.authz.team.remove.user.toast.success.description'],
+              {
+                role: roleToDelete.name,
+                rolesCount: remainingRolesCount,
+              },
+            ),
+            type: 'success',
+          });
+        },
+        onError: (error, retryVariables) => {
+          showErrorToast(error, () => runRevokeRole(retryVariables));
+        },
+      });
+    };
+
+    handleCloseConfirmDeletionModal();
+    runRevokeRole();
   };
 
   return (

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.test.tsx

@@ -6,6 +6,8 @@ import { useAssignTeamMembersRole } from '@src/authz-module/data/hooks';
 import { ToastManagerProvider } from '@src/authz-module/libraries-manager/ToastManagerContext';
 import AddNewTeamMemberTrigger from './AddNewTeamMemberTrigger';
 
+jest.mock('@edx/frontend-platform/logging');
+
 const mockMutate = jest.fn();
 
 // Mock the hooks module
@@ -269,6 +271,47 @@ describe('AddNewTeamMemberTrigger', () => {
     });
   });
 
+  it('shows retry toast on API failure and displays another toast when retry fails again', async () => {
+    const user = userEvent.setup();
+
+    const mockError = new Error('Network error');
+
+    mockMutate.mockImplementationOnce((_vars, { onError }) => {
+      onError(mockError, _vars);
+    });
+
+    renderWrapper(
+      <ToastManagerProvider>
+        <AddNewTeamMemberTrigger libraryId={mockLibraryId} />
+      </ToastManagerProvider>,
+    );
+
+    const triggerButton = screen.getByRole('button', { name: /add new team member/i });
+    await user.click(triggerButton);
+
+    const saveButton = screen.getByTestId('save-modal');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument();
+    });
+
+    mockMutate.mockImplementationOnce((_vars, { onError }) => {
+      onError(new Error('Network error'), _vars);
+    });
+
+    const retryButton = screen.getByRole('button', { name: /retry/i });
+    await user.click(retryButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Something went wrong/)).toBeInTheDocument();
+    });
+
+    // Ensure mutate was called twice (original + retry)
+    expect(mockMutate).toHaveBeenCalledTimes(2);
+  });
+
   it('displays loading state when adding team member', async () => {
     const user = userEvent.setup();
 

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx

@@ -121,9 +121,8 @@ const AddNewTeamMemberTrigger: FC<AddNewTeamMemberTriggerProps> = ({ libraryId }
       scope: libraryId,
     };
 
-    assignTeamMembersRole(
-      { data: payload },
-      {
+    const runAssignMembers = (variables = { data: payload }) => {
+      assignTeamMembersRole(variables, {
         onSuccess: (response) => {
           const { completed, errors } = response;
 
@@ -142,11 +141,12 @@ const AddNewTeamMemberTrigger: FC<AddNewTeamMemberTriggerProps> = ({ libraryId }
             handleErrors(errors, completed.length);
           }
         },
-        onError: (error, variables) => {
-          showErrorToast(error, () => assignTeamMembersRole(variables));
+        onError: (error, retryVariables) => {
+          showErrorToast(error, () => runAssignMembers(retryVariables));
         },
-      },
-    );
+      });
+    };
+    runAssignMembers();
   };
 
   return (

src/authz-module/libraries-manager/components/AssignNewRoleModal/AssignNewRoleTrigger.tsx

@@ -24,7 +24,7 @@ const AssignNewRoleTrigger: FC<AssignNewRoleTriggerProps> = ({
   const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
   const { roles } = useLibraryAuthZ();
-  const { showToast } = useToastManager();
+  const { showToast, showErrorToast } = useToastManager();
   const [newRole, setNewRole] = useState<string>('');
 
   const { mutate: assignTeamMembersRole, isPending: isAssignTeamMembersRolePending } = useAssignTeamMembersRole();
@@ -46,16 +46,23 @@ const AssignNewRoleTrigger: FC<AssignNewRoleTriggerProps> = ({
       return;
     }
 
-    assignTeamMembersRole({ data }, {
-      onSuccess: () => {
-        showToast({
-          message: intl.formatMessage(messages['libraries.authz.manage.assign.role.success']),
-          type: 'success',
-        });
-        close();
-        setNewRole('');
-      },
-    });
+    const runAssignRole = (variables = { data }) => {
+      assignTeamMembersRole(variables, {
+        onSuccess: () => {
+          showToast({
+            message: intl.formatMessage(messages['libraries.authz.manage.assign.role.success']),
+            type: 'success',
+          });
+          close();
+          setNewRole('');
+        },
+        onError: (error, retryVariables) => {
+          showErrorToast(error, () => runAssignRole(retryVariables));
+        },
+      });
+    };
+
+    runAssignRole();
   };
 
   return (

src/authz-module/libraries-manager/components/PublicReadToggle.tsx

@@ -10,25 +10,37 @@ type PublicReadToggleProps = {
   canEditToggle: boolean;
 };
 
+type UpdateLibraryPublicRead = {
+  libraryId: string;
+  updatedData: { allowPublicRead: boolean };
+};
+
 const PublicReadToggle = ({ libraryId, canEditToggle }: PublicReadToggleProps) => {
   const intl = useIntl();
   const { data: library } = useLibrary(libraryId);
   const { mutate: updateLibrary, isPending } = useUpdateLibrary();
   const { showToast, showErrorToast } = useToastManager();
-  const onChangeToggle = () => updateLibrary({
-    libraryId,
-    updatedData: { allowPublicRead: !library.allowPublicRead },
-  }, {
-    onSuccess: () => {
-      showToast({
-        message: intl.formatMessage(messages['libraries.authz.public.read.toggle.success']),
-        type: 'success',
+
+  const onChangeToggle = () => {
+    const runUpdate = (variables: UpdateLibraryPublicRead = {
+      libraryId,
+      updatedData: { allowPublicRead: !library.allowPublicRead },
+    }) => {
+      updateLibrary(variables, {
+        onSuccess: () => {
+          showToast({
+            message: intl.formatMessage(messages['libraries.authz.public.read.toggle.success']),
+            type: 'success',
+          });
+        },
+        onError: (error, retryVariables) => {
+          showErrorToast(error, () => runUpdate(retryVariables as UpdateLibraryPublicRead));
+        },
       });
-    },
-    onError: (error, variables) => {
-      showErrorToast(error, () => updateLibrary(variables));
-    },
-  });
+    };
+
+    runUpdate();
+  };
 
   if (!library.allowPublicRead && !canEditToggle) {
     return null;