UIQM-790 Allow to initialize quickMARC with pre-edited values. (#824)

* UIQM-790 Allow to initialize quickMARC with pre-edited values.

* UIQM-790 tests for initializing with pre-edited values

* UIQM-790 changes after review

* UIQM-790 fix eslint

Author: BogdanDenis

CHANGELOG.md

@@ -11,6 +11,7 @@
 * [UIQM-783](https://issues.folio.org/browse/UIQM-783) Update label for 38 position of MARC authority "008" field to "Mod Rec".
 * [UIQM-788](https://issues.folio.org/browse/UIQM-788) Add new props to quickMARC to make it usable without having to define routes.
 * [UIQM-789](https://issues.folio.org/browse/UIQM-789) Add new `initialValues` prop to quickMARC to initialize it with some pre-existing values.
+* [UIQM-790](https://issues.folio.org/browse/UIQM-790) Allow to initialize quickMARC with pre-edited values.
 
 ## [10.0.4](https://github.com/folio-org/ui-quick-marc/tree/v10.0.4) (2025-07-14)
 

README.md

@@ -33,6 +33,8 @@ of the Module Developer's Guide.
 | `onCreateAndKeepEditing` | function | Called after creating/deriving a record via "Save and keep editing" button. Called with `externalId` when `marcType` is "bibliographic" or "authority". For `marcType` "holdings" it's called with `instanceId/externalId` | Yes for route-less, No for pre-defined routes |
 | `useRoutes` | bool | When `true` - quickMARC will define it's own routes that the consuming application will have to redirect to. When `false` - quickMARC will act like a regular plug-in and simply render a view, and the consuming application will have to define it's own routes and provide some props to quickMARC. | No |
 | `initialValues` | object | Values to initialize quickMARC with. Shape should match the response from `records-editor/records` endpoint. Will only be applied when `useRoutes` is `false`. | No |
+| `isPreEdited` | bool | Tells quickMARC that `initialValues` is a pre-edited MARC record. In this case quickMARC will fetch a MARC record from BE and first initialize with it, and then replace fields with fields from `initialValues`. This prop will only be applied when `useRoutes` is `false`. | No |
+
 
 
 This is a [Stripes](https://github.com/folio-org/stripes-core/) UI module to edit MARC records.

src/QuickMarc.js

@@ -31,6 +31,7 @@ const QuickMarc = ({
   initialValues,
   onCreateAndKeepEditing = noop,
   useRoutes = true,
+  isPreEdited = false,
 }) => {
   const location = useLocation();
 
@@ -132,6 +133,7 @@ const QuickMarc = ({
               externalId={externalId}
               instanceId={instanceId}
               initialValues={initialValues}
+              isPreEdited={isPreEdited}
             />
           </QuickMarcProvider>
         )}
@@ -173,6 +175,7 @@ QuickMarc.propTypes = {
       }).isRequired,
     }).isRequired,
   }),
+  isPreEdited: PropTypes.bool,
 };
 
 export default QuickMarc;

src/QuickMarcEditor/AutoLinkingButton/AutoLinkingButton.js

@@ -43,7 +43,7 @@ const AutoLinkingButton = ({
     autoLinkAuthority,
   } = useAuthorityLinking({ marcType, action });
 
-  const hasAutoLinkableRecord = formValues.records.some(field => isRecordForAutoLinking(field, autoLinkableBibFields));
+  const hasAutoLinkableRecord = formValues.records?.some(field => isRecordForAutoLinking(field, autoLinkableBibFields));
 
   const getAutoLinkingToasts = (fields) => {
     const toasts = [];

src/QuickMarcEditor/QuickMarcEditor.js

@@ -8,7 +8,10 @@ import React, {
 } from 'react';
 import { FormSpy } from 'react-final-form';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
 import find from 'lodash/find';
 import noop from 'lodash/noop';
 import isEmpty from 'lodash/isEmpty';
@@ -130,6 +133,7 @@ const QuickMarcEditor = ({
     continueAfterSave,
     validationErrorsRef,
     isShared,
+    preEditedValues,
   } = useContext(QuickMarcContext);
   const { hasErrorIssues, isBackEndValidationMarcType } = useValidation();
 
@@ -145,6 +149,15 @@ const QuickMarcEditor = ({
 
   const { unlinkAuthority } = useAuthorityLinking({ marcType, action });
 
+  useEffect(() => {
+    // final-form doesn't allow us to initialize a form with some values and make it not pristine
+    // so this is a work-around for that: initialize the form with data from BE
+    // and then replace fields in the form with fields from `initialValues` prop
+    if (preEditedValues) {
+      mutators.initializeWithPreEditedValues(preEditedValues.records);
+    }
+  }, [preEditedValues, mutators]);
+
   useEffect(() => {
     setIsValidatedCurrentValues(false);
   }, [formValues, setIsValidatedCurrentValues]);
@@ -725,6 +738,9 @@ QuickMarcEditor.propTypes = {
 export default stripesFinalForm({
   navigationCheck: true,
   mutators: {
+    initializeWithPreEditedValues: ([records], state, tools) => {
+      tools.changeValue(state, 'records', () => records);
+    },
     addRecord: ([{ index }], state, tools) => {
       const records = addNewRecord(index, state);
 

src/QuickMarcEditor/QuickMarcEditor.test.js

@@ -85,6 +85,7 @@ const onCloseMock = jest.fn();
 const onSubmitMock = jest.fn(() => Promise.resolve({ version: 1 }));
 const mockShowCallout = jest.fn();
 const mockValidate = jest.fn().mockReturnValue({});
+const mockInitializeWithPreEditedValues = jest.fn();
 
 useShowCallout.mockClear().mockReturnValue(mockShowCallout);
 
@@ -157,6 +158,7 @@ const renderQuickMarcEditor = (props = {}, { quickMarcContext } = {}) => (render
         addRecord: jest.fn(),
         deleteRecord: jest.fn(),
         moveRecord: jest.fn(),
+        initializeWithPreEditedValues: mockInitializeWithPreEditedValues,
       }}
       initialValues={initialValues}
       marcType={MARC_TYPES.BIB}
@@ -683,7 +685,7 @@ describe('Given QuickMarcEditor', () => {
 
         expect(screen.getByText('ui-quick-marc.validation.modal.heading')).toBeInTheDocument();
 
-        jest.clearAllTimers();
+        jest.useRealTimers();
       });
     });
 
@@ -702,6 +704,8 @@ describe('Given QuickMarcEditor', () => {
         await act(async () => jest.advanceTimersByTime(2100));
 
         expect(screen.queryByText('ui-quick-marc.validation.modal.heading')).not.toBeInTheDocument();
+
+        jest.useRealTimers();
       });
     });
 
@@ -722,6 +726,8 @@ describe('Given QuickMarcEditor', () => {
 
         expect(screen.queryByText('ui-quick-marc.validation.modal.heading')).not.toBeInTheDocument();
         expect(onSubmitMock).not.toHaveBeenCalled();
+
+        jest.useRealTimers();
       });
     });
   });
@@ -1627,4 +1633,30 @@ describe('Given QuickMarcEditor', () => {
       expect(queryByText('Confirmation modal')).toBeNull();
     });
   });
+
+  describe('when QuickMarcContext has preEditedValues', () => {
+    it('should call initializeWithPreEditedValues', async () => {
+      renderQuickMarcEditor({
+        quickMarcContext: {
+          preEditedValues: {
+            records: [{ tag: '245' }],
+          },
+        },
+      });
+
+      waitFor(() => expect(mockInitializeWithPreEditedValues).toHaveBeenCalledWith([{ tag: '245' }]));
+    });
+  });
+
+  describe('when QuickMarcContext does not have preEditedValues', () => {
+    it('should not call initializeWithPreEditedValues', async () => {
+      renderQuickMarcEditor({
+        quickMarcContext: {
+          preEditedValues: null,
+        },
+      });
+
+      waitFor(() => expect(mockInitializeWithPreEditedValues).not.toHaveBeenCalled());
+    });
+  });
 });

src/QuickMarcEditor/QuickMarcEditorContainer.js

@@ -65,6 +65,7 @@ const propTypes = {
     externalId: PropTypes.string.isRequired,
     updateInfo: PropTypes.object.isRequired,
   }),
+  isPreEdited: PropTypes.bool.isRequired,
 };
 
 const createRecordDefaults = {
@@ -86,6 +87,7 @@ const QuickMarcEditorContainer = ({
   onCheckCentralTenantPerm = noop,
   match,
   initialValues: initialValuesProp,
+  isPreEdited,
 }) => {
   const {
     action,
@@ -94,6 +96,7 @@ const QuickMarcEditorContainer = ({
     instance,
     setInstance,
     setMarcRecord,
+    setPreEditedValues,
     setRelatedRecordVersion,
     getIsShared,
     isUsingRouter,
@@ -217,7 +220,8 @@ const QuickMarcEditorContainer = ({
       ]) => {
         let dehydratedMarcRecord;
 
-        const isShouldUseInitialValuesProp = initialValuesProp && !isUsingRouter;
+        const isShouldUseInitialValuesProp = initialValuesProp && !isUsingRouter && !isPreEdited;
+        const isLoadingDataAfterKeepEditing = Boolean(fieldIds);
 
         if (_action === QUICK_MARC_ACTIONS.CREATE) {
           if (isShouldUseInitialValuesProp) {
@@ -230,9 +234,7 @@ const QuickMarcEditorContainer = ({
             dehydratedMarcRecord = createRecordDefaults[marcType](instanceResponse, fixedFieldSpecResponse);
           }
         } else {
-          const isLoadingDataAfterKeepEditing = Boolean(fieldIds);
-
-          // if we just saved a record - then we need to ignore `initialValuesProp` to not initialize with old data
+          // if we're initializing after Save&keep editing - then we need to ignore `initialValuesProp` to not initialize with old data
           // otherwise if we're just entering Edit mode - initialize with initial values or values from response
           let dataToInitializeWith = null;
 
@@ -253,6 +255,20 @@ const QuickMarcEditorContainer = ({
         setRelatedRecordVersion(instanceResponse?._version);
         setInstance(instanceResponse);
         setMarcRecord(formatInitialValues(dehydratedMarcRecord, _action, linkingRulesResponse));
+
+        // if using pre-edited initial values - then format them the same way and save in quickMARC context
+        // so we can then update form values with them
+        if (!isLoadingDataAfterKeepEditing && isPreEdited) {
+          const dehydratedPreEditedMarcRecord = dehydrateMarcRecordResponse(
+            initialValuesProp,
+            marcType,
+            fixedFieldSpecResponse,
+            [],
+          );
+
+          setPreEditedValues(formatInitialValues(dehydratedPreEditedMarcRecord, _action, linkingRulesResponse));
+        }
+
         setLocations(locationsResponse);
         setFixedFieldSpec(fixedFieldSpecResponse);
         setIsLoading(false);

src/QuickMarcEditor/QuickMarcEditorContainer.test.js

@@ -91,12 +91,14 @@ const renderQuickMarcEditorContainer = ({
   action = QUICK_MARC_ACTIONS.EDIT,
   marcType = MARC_TYPES.BIB,
   isUsingRouter,
+  quickMarcContext,
   ...props
 } = {}) => (render(
   <Harness
     action={action}
     marcType={marcType}
     isUsingRouter={isUsingRouter}
+    quickMarcContext={quickMarcContext}
   >
     <QuickMarcEditorContainer
       externalRecordPath={externalRecordPath}
@@ -651,4 +653,36 @@ describe('Given Quick Marc Editor Container', () => {
       });
     });
   });
+
+  describe('when using isPreEdited prop', () => {
+    const mockSetPreEditedValues = jest.fn();
+
+    beforeEach(() => {
+      mockSetPreEditedValues.mockClear();
+
+      renderQuickMarcEditorContainer({
+        mutator,
+        quickMarcContext: {
+          instance,
+          action: QUICK_MARC_ACTIONS.EDIT,
+          marcType: MARC_TYPES.BIB,
+          isUsingRouter: false,
+          setPreEditedValues: mockSetPreEditedValues,
+        },
+        initialValues: {
+          marcFormat: 'BIBLIOGRAPHIC',
+          leader: '03109cas\\a2200841\\a\\4500',
+          fields: [{
+            tag: '245',
+            content: '$a value from initial values',
+          }],
+        },
+        isPreEdited: true,
+      });
+    });
+
+    it('should set preEditedValues in QuickMarcContext', async () => {
+      await waitFor(() => expect(mockSetPreEditedValues).toHaveBeenCalled());
+    });
+  });
 });

src/QuickMarcEditor/QuickMarcEditorRows/QuickMarcEditorRows.js

@@ -117,12 +117,12 @@ const QuickMarcEditorRows = ({
     && action === QUICK_MARC_ACTIONS.EDIT;
 
   const fixedFieldInitialValues = () => {
-    return initialValues.records.find(record => record.tag === FIXED_FIELD_TAG)?.content || {};
+    return initialValues?.records.find(record => record.tag === FIXED_FIELD_TAG)?.content || {};
   };
 
   const isNewRow = useCallback((row) => {
-    return !initialValues.records.find(record => record.id === row.id);
-  }, [initialValues.records]);
+    return !initialValues?.records.find(record => record.id === row.id);
+  }, [initialValues?.records]);
 
   const addNewRow = useCallback(({ target }) => {
     const index = parseInt(target.dataset.index, 10);

src/contexts/QuickMarcContext/QuickMarcContext.js

@@ -37,6 +37,7 @@ const QuickMarcProvider = ({
   const location = useLocation();
   const [instance, setInstance] = useState(null);
   const [marcRecord, setMarcRecord] = useState(null);
+  const [preEditedValues, setPreEditedValues] = useState(null);
   const [selectedSourceFile, setSelectedSourceFile] = useState(null);
   const [_relatedRecordVersion, setRelatedRecordVersion] = useState();
   const validationErrors = useRef({});
@@ -90,6 +91,8 @@ const QuickMarcProvider = ({
     isShared: isSharedRef.current,
     setIsShared,
     getIsShared,
+    preEditedValues,
+    setPreEditedValues,
   }), [
     selectedSourceFile,
     setSelectedSourceFile,
@@ -108,6 +111,8 @@ const QuickMarcProvider = ({
     isUsingRouter,
     setIsShared,
     getIsShared,
+    preEditedValues,
+    setPreEditedValues,
   ]);
 
   return (