From 9a908a6f09aa01aabc0974d663174cdde6c063a9 Mon Sep 17 00:00:00 2001
From: Vadym Shchekotilin <86330150+vashjs@users.noreply.github.com>
Date: Mon, 28 Oct 2024 12:13:14 +0100
Subject: [PATCH] UIBULKED-553 Show error callouts only when job FAILED (#631)

---
 src/components/BulkEdit.test.js                 |  4 ++++
 .../IdentifierTab/IdentifierTab.js              | 16 ++++++----------
 .../shared/ProgressBar/ProgressBar.js           |  6 +++---
 src/hooks/useErrorMessages.js                   |  4 ++--
 src/hooks/useErrorMessages.test.js              | 17 +++++++++++++++++
 5 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/BulkEdit.test.js b/src/components/BulkEdit.test.js
index 56dc1073..f55e800f 100644
--- a/src/components/BulkEdit.test.js
+++ b/src/components/BulkEdit.test.js
@@ -15,6 +15,10 @@ import BulkEdit from './BulkEdit';
 import { mockData, createDtWithFiles, createFile, flushPromises, dispatchEvt } from '../../test/jest/utils/fileUpload';
 import { queryClient } from '../../test/jest/utils/queryClient';
 
+jest.mock('../hooks/useErrorMessages', () => ({
+  useErrorMessages: jest.fn().mockReturnValue({ showErrorMessage: jest.fn() }),
+}));
+
 jest.mock('./BulkEditPane/BulkEditListResult', () => ({
   BulkEditListResult: () => 'BulkEditListResult',
 }));
diff --git a/src/components/BulkEditPane/BulkEditListSidebar/IdentifierTab/IdentifierTab.js b/src/components/BulkEditPane/BulkEditListSidebar/IdentifierTab/IdentifierTab.js
index 52f2f920..d63922fc 100644
--- a/src/components/BulkEditPane/BulkEditListSidebar/IdentifierTab/IdentifierTab.js
+++ b/src/components/BulkEditPane/BulkEditListSidebar/IdentifierTab/IdentifierTab.js
@@ -4,7 +4,7 @@ import React, {
   useMemo,
   useState
 } from 'react';
-import { buildSearch, useShowCallout } from '@folio/stripes-acq-components';
+import { buildSearch } from '@folio/stripes-acq-components';
 import { FormattedMessage } from 'react-intl';
 import { useHistory, useLocation } from 'react-router-dom';
 
@@ -24,12 +24,13 @@ import { useBulkPermissions, useLocationFilters, useSearchParams } from '../../.
 import { useBulkOperationStart, useUpload } from '../../../../hooks/api';
 import { getIsDisabledByPerm } from '../utils/getIsDisabledByPerm';
 import { RootContext } from '../../../../context/RootContext';
+import { useErrorMessages } from '../../../../hooks/useErrorMessages';
 
 export const IdentifierTab = () => {
   const history = useHistory();
   const location = useLocation();
-  const showCallout = useShowCallout();
   const permissions = useBulkPermissions();
+  const { showErrorMessage } = useErrorMessages();
 
   const {
     isFileUploaded,
@@ -146,7 +147,7 @@ export const IdentifierTab = () => {
         });
 
         if (errorMessage?.includes(ERRORS.TOKEN)) throw Error(ERRORS.TOKEN);
-        if (status === JOB_STATUSES.FAILED) throw Error();
+        if (status === JOB_STATUSES.FAILED) throw Error(errorMessage);
 
         history.replace({
           pathname: `/bulk-edit/${id}/preview`,
@@ -155,13 +156,8 @@ export const IdentifierTab = () => {
       }
 
       setIsFileUploaded(true);
-    } catch ({ message }) {
-      if (message === ERRORS.TOKEN) {
-        showCallout({
-          message: <FormattedMessage id="ui-bulk-edit.error.incorrectFormatted" values={{ fileName:fileToUpload.name }} />,
-          type: 'error',
-        });
-      }
+    } catch (error) {
+      showErrorMessage(error, { fileName: fileToUpload.name });
     }
   };
 
diff --git a/src/components/shared/ProgressBar/ProgressBar.js b/src/components/shared/ProgressBar/ProgressBar.js
index f764ff48..958981d3 100644
--- a/src/components/shared/ProgressBar/ProgressBar.js
+++ b/src/components/shared/ProgressBar/ProgressBar.js
@@ -34,14 +34,13 @@ export const ProgressBar = () => {
   useEffect(() => {
     const nextStep = getBulkOperationStep(bulkDetails);
 
-    // Show error message if any
-    showErrorMessage(bulkDetails);
-
     if (nextStep) {
       clearIntervalAndRedirect(`/bulk-edit/${id}/preview`, { step: nextStep, progress: null });
     }
 
     if (status === JOB_STATUSES.FAILED) {
+      showErrorMessage(bulkDetails);
+
       clearIntervalAndRedirect('/bulk-edit', '');
     }
   }, [
@@ -49,6 +48,7 @@ export const ProgressBar = () => {
     bulkDetails,
     id,
     clearIntervalAndRedirect,
+    showErrorMessage,
   ]);
 
   return (
diff --git a/src/hooks/useErrorMessages.js b/src/hooks/useErrorMessages.js
index 9f9af353..c5c216f2 100644
--- a/src/hooks/useErrorMessages.js
+++ b/src/hooks/useErrorMessages.js
@@ -17,7 +17,7 @@ export const useErrorMessages = () => {
     });
   };
 
-  const showErrorMessage = (res) => {
+  const showErrorMessage = (res, meta) => {
     const message = res?.errorMessage;
 
     // check if error message should be translated (if it's exist in translations)
@@ -31,7 +31,7 @@ export const useErrorMessages = () => {
     } else if (message) {
       // if error message contains token error, show a special message
       if (message?.includes(ERRORS.TOKEN)) {
-        showError(intl.formatMessage({ id: 'ui-bulk-edit.error.incorrectFormatted' }, { fileName: initialFileName }));
+        showError(intl.formatMessage({ id: 'ui-bulk-edit.error.incorrectFormatted' }, { fileName: meta?.fileName || initialFileName }));
       } else {
         showError(message);
       }
diff --git a/src/hooks/useErrorMessages.test.js b/src/hooks/useErrorMessages.test.js
index 9cd25ec4..6926c47d 100644
--- a/src/hooks/useErrorMessages.test.js
+++ b/src/hooks/useErrorMessages.test.js
@@ -98,4 +98,21 @@ describe('useErrorMessages', () => {
 
     expect(showCalloutMock).not.toHaveBeenCalled();
   });
+
+  it('should use variables from meta object if provided', () => {
+    const { result } = renderHook(() => useErrorMessages());
+    const { showErrorMessage } = result.current;
+
+    formatMessageMock.mockImplementationOnce(({ id }, { fileName }) => {
+      return `${id}.${fileName}`;
+    });
+
+    showErrorMessage({ errorMessage: ERRORS.TOKEN }, { fileName: 'testFileName' });
+
+    expect(formatMessageMock).toHaveBeenCalledWith({ id: 'ui-bulk-edit.error.incorrectFormatted' }, { fileName: 'testFileName' });
+    expect(showCalloutMock).toHaveBeenCalledWith({
+      type: 'error',
+      message: 'ui-bulk-edit.error.incorrectFormatted.testFileName',
+    });
+  });
 });