UIQM-730 Create/Edit/Derive MARC record - Retain focus when MARC reco…

…rd validation rules error display. Show validation issues toasts.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-quick-marc
 
+## [9.1.0] (IN PROGRESS)
+
+* [UIQM-730](https://issues.folio.org/browse/UIQM-730) Create/Edit/Derive MARC record - Retain focus when MARC record validation rules error display. Show validation issues toasts.
+
 ## [9.0.1] (IN PROGRESS)
 
 * [UIQM-725](https://issues.folio.org/browse/UIQM-725) Fix wrong error message while saving MARC Bib record with invalid LDR position values.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/quick-marc",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Quick MARC editor",
   "main": "index.js",
   "repository": "",

src/QuickMarcEditor/QuickMarcEditor.js

@@ -136,6 +136,14 @@ const QuickMarcEditor = ({
   const searchParameters = new URLSearchParams(location.search);
   const isShared = searchParameters.get('shared') === 'true';
 
+  const saveLastFocusedInput = useCallback((e) => {
+    lastFocusedInput.current = e.target;
+  }, [lastFocusedInput]);
+
+  const focusLastFocusedInput = useCallback(() => {
+    lastFocusedInput.current?.focus();
+  }, [lastFocusedInput]);
+
   const { unlinkAuthority } = useAuthorityLinking({ marcType, action });
 
   useEffect(() => {
@@ -161,13 +169,13 @@ const QuickMarcEditor = ({
 
     if (continueAfterSave.current) {
       setRelatedRecordVersion(updatedRecord.version);
-      lastFocusedInput.current?.focus();
+      focusLastFocusedInput();
 
       return;
     }
 
     onSave();
-  }, [setRelatedRecordVersion, onSave]);
+  }, [setRelatedRecordVersion, onSave, focusLastFocusedInput]);
 
   const closeModals = () => {
     setIsDeleteModalOpened(false);
@@ -217,7 +225,7 @@ const QuickMarcEditor = ({
     };
   }, [setIsValidationModalOpen, isBackEndValidationMarcType, marcType]);
 
-  const showValidationIssuesCallouts = useCallback((issues) => {
+  const showErrorsForMissingFields = useCallback((issues) => {
     issues.forEach((error) => {
       showCallout({
         message: error.message,
@@ -228,6 +236,32 @@ const QuickMarcEditor = ({
     });
   }, [showCallout]);
 
+  const showValidationIssuesToasts = useCallback((validationErrors) => {
+    const allIssuesArray = Object.values(validationErrors).flat();
+    const failCount = allIssuesArray.filter(issue => issue.severity === SEVERITY.ERROR).length;
+    const warnCount = allIssuesArray.length - failCount;
+
+    const values = {
+      warnCount,
+      failCount,
+    };
+    let messageId = null;
+
+    if (failCount && warnCount) {
+      messageId = 'ui-quick-marc.record.save.error.failAndWarn';
+    } else if (failCount) {
+      messageId = 'ui-quick-marc.record.save.error.fail';
+    } else {
+      messageId = 'ui-quick-marc.record.save.error.warn';
+    }
+
+    showCallout({
+      messageId,
+      values,
+      type: failCount ? 'error' : 'warning',
+    });
+  }, [showCallout]);
+
   const confirmSubmit = useCallback(async (e, isKeepEditing = false) => {
     continueAfterSave.current = isKeepEditing;
     let skipValidation = false;
@@ -259,9 +293,12 @@ const QuickMarcEditor = ({
 
         return;
       }
+
       const validationErrorsWithoutFieldId = newValidationErrors[MISSING_FIELD_ID] || [];
 
-      showValidationIssuesCallouts(validationErrorsWithoutFieldId);
+      showErrorsForMissingFields(validationErrorsWithoutFieldId);
+      showValidationIssuesToasts(newValidationErrors);
+      focusLastFocusedInput();
       setIsValidatedCurrentValues(true);
     } else {
       setValidationErrors({});
@@ -283,13 +320,15 @@ const QuickMarcEditor = ({
     getState,
     hasErrorIssues,
     setValidationErrors,
-    showValidationIssuesCallouts,
+    showErrorsForMissingFields,
     showCallout,
     validate,
     runConfirmationChecks,
     isValidatedCurrentValues,
     setIsValidatedCurrentValues,
     manageBackendValidationModal,
+    focusLastFocusedInput,
+    showValidationIssuesToasts,
   ]);
 
   const paneFooter = useMemo(() => {
@@ -450,10 +489,6 @@ const QuickMarcEditor = ({
     }
   }, []);
 
-  const saveLastFocusedInput = useCallback((e) => {
-    lastFocusedInput.current = e.target;
-  }, [lastFocusedInput]);
-
   const shortcuts = useMemo(() => ([{
     name: 'save',
     shortcut: 'mod+s',
@@ -580,7 +615,7 @@ const QuickMarcEditor = ({
       />
       {
         confirmRemoveAuthorityLinking && (
-          <IfPermission perm="ui-quick-marc.quick-marc-authority-records.link-unlink.execute">
+          <IfPermission perm="ui-quick-marc.quick-marc-authority-records.linkUnlink">
             <ConfirmationModal
               id="quick-marc-remove-authority-linking-confirm-modal"
               open={isUnlinkRecordsModalOpen}

src/QuickMarcEditor/QuickMarcEditorRows/QuickMarcEditorRows.js

@@ -59,10 +59,7 @@ import {
   isControlNumberRow,
   isLeaderRow,
 } from '../utils';
-import {
-  useAuthorityLinking,
-  useFocusFirstFieldWithError,
-} from '../../hooks';
+import { useAuthorityLinking } from '../../hooks';
 import { QuickMarcContext } from '../../contexts';
 import {
   QUICK_MARC_ACTIONS,
@@ -109,8 +106,6 @@ const QuickMarcEditorRows = ({
   const childCalloutRef = useRef(null);
   const { validationErrorsRef } = useContext(QuickMarcContext);
 
-  useFocusFirstFieldWithError();
-
   const {
     linkAuthority,
     unlinkAuthority,

src/hooks/index.js

@@ -1,4 +1,3 @@
 export * from './useAuthorityLinking';
 export * from './useSubfieldNavigation';
 export * from './useValidation';
-export * from './useFocusFirstFieldWithError';

translations/ui-quick-marc/en.json

@@ -760,6 +760,9 @@
   "record.save.error.notFound": "This record has been deleted by another user. You can no longer edit this record, hit the cancel button to return to the previous page.",
   "record.save.error.generic": "Record not saved: Communication problem with server. Please try again.",
   "record.save.error.derive": "Instance cannot be updated. Deprecated instance version.",
+  "record.save.error.fail": "{failCount} Fail error(s) was found. You cannot save record with a Fail error. Please resolve error(s) and hit Save to re-validate your record.",
+  "record.save.error.warn": "{warnCount} Warn error(s) was found. Hit Save again to continue to save record with Warn errors. Please resolve error(s) and hit Save to re-validate your record.",
+  "record.save.error.failAndWarn": "{warnCount} Warn error(s) was found. {failCount} Fail error(s) was found. You cannot save record with a Fail error. Please resolve error(s) and hit Save to re-validate your record.",
   "record.save.updatingLinkedBibRecords": "This record has successfully saved and is in process. <b>{count}</b> linked bibliographic record(s) updates have begun.",
   "record.save.continue": "Save & keep editing",