UIBULKED-553 Show error callouts only when job FAILED

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',
 }));

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 });
     }
   };
 

src/components/shared/ProgressBar/ProgressBar.js

@@ -34,21 +34,21 @@ 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', '');
     }
   }, [
     status,
     bulkDetails,
     id,
     clearIntervalAndRedirect,
+    showErrorMessage,
   ]);
 
   return (

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);
       }

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',
+    });
+  });
 });