UIQM-789 Add new initialValues prop to quickMARC to initialize it with some pre-existing values. (#822)

* UIQM-789 Add new `initialValues` prop to quickMARC to initialize it with some pre-existing values.

* UIQM-789 update readme, only apply initial values on non-route mode

* UIQM-789 added tests for initialValues

* UIQM-789 fix sonar issue

* UIQM-789 remove comments for already turned off eslint rules

Author: BogdanDenis

CHANGELOG.md

@@ -10,6 +10,7 @@
 * [UIQM-785](https://issues.folio.org/browse/UIQM-785) Default to Name-title browse if the MARC bib field contains a subfield "t".
 * [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.
 
 ## [10.0.4](https://github.com/folio-org/ui-quick-marc/tree/v10.0.4) (2025-07-14)
 

README.md

@@ -32,6 +32,8 @@ of the Module Developer's Guide.
 | `onSave` | function | Called after saving and closing a record. Called with `externalId` when `marcType` is "bibliographic" or "authority". For `marcType` "holdings" it's called with `instanceId/externalId` | Yes |
 | `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 |
+
 
 This is a [Stripes](https://github.com/folio-org/stripes-core/) UI module to edit MARC records.
 

src/QuickMarc.js

@@ -28,6 +28,7 @@ const QuickMarc = ({
   isShared,
   onClose,
   onSave,
+  initialValues,
   onCreateAndKeepEditing = noop,
   useRoutes = true,
 }) => {
@@ -130,6 +131,7 @@ const QuickMarc = ({
               onCheckCentralTenantPerm={checkCentralTenantPermission}
               externalId={externalId}
               instanceId={instanceId}
+              initialValues={initialValues}
             />
           </QuickMarcProvider>
         )}
@@ -149,6 +151,28 @@ QuickMarc.propTypes = {
   externalId: PropTypes.string,
   isShared: PropTypes.bool,
   useRoutes: PropTypes.bool,
+  initialValues: PropTypes.shape({
+    leader: PropTypes.string.isRequired,
+    fields: PropTypes.arrayOf(PropTypes.shape({
+      tag: PropTypes.string.isRequired,
+      indicators: PropTypes.arrayOf(PropTypes.string),
+      content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+      isProtected: PropTypes.bool.isRequired,
+    })).isRequired,
+    marcFormat: PropTypes.string.isRequired,
+    sourceVersion: PropTypes.number.isRequired,
+    externalId: PropTypes.string.isRequired,
+    updateInfo: PropTypes.shape({
+      recordState: PropTypes.string.isRequired,
+      updatedDate: PropTypes.string.isRequired,
+      updatedBy: PropTypes.shape({
+        userId: PropTypes.string.isRequired,
+        username: PropTypes.string,
+        lastName: PropTypes.string,
+        firstName: PropTypes.string,
+      }).isRequired,
+    }).isRequired,
+  }),
 };
 
 export default QuickMarc;

src/QuickMarcEditor/QuickMarcEditorContainer.js

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useContext,
 } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { object } from 'prop-types';
 import { withRouter } from 'react-router';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import noop from 'lodash/noop';
@@ -57,6 +57,14 @@ const propTypes = {
   externalId: PropTypes.string.isRequired,
   instanceId: PropTypes.string.isRequired,
   onCheckCentralTenantPerm: PropTypes.func,
+  initialValues: PropTypes.shape({
+    leader: PropTypes.string.isRequired,
+    fields: PropTypes.arrayOf(object).isRequired,
+    marcFormat: PropTypes.string.isRequired,
+    sourceVersion: PropTypes.number.isRequired,
+    externalId: PropTypes.string.isRequired,
+    updateInfo: PropTypes.object.isRequired,
+  }),
 };
 
 const createRecordDefaults = {
@@ -77,6 +85,7 @@ const QuickMarcEditorContainer = ({
   instanceId: instanceIdProp,
   onCheckCentralTenantPerm = noop,
   match,
+  initialValues: initialValuesProp,
 }) => {
   const {
     action,
@@ -87,6 +96,7 @@ const QuickMarcEditorContainer = ({
     setMarcRecord,
     setRelatedRecordVersion,
     getIsShared,
+    isUsingRouter,
   } = useContext(QuickMarcContext);
   const [locations, setLocations] = useState();
   const [isLoading, setIsLoading] = useState(true);
@@ -207,11 +217,33 @@ const QuickMarcEditorContainer = ({
       ]) => {
         let dehydratedMarcRecord;
 
+        const isShouldUseInitialValuesProp = initialValuesProp && !isUsingRouter;
+
         if (_action === QUICK_MARC_ACTIONS.CREATE) {
-          dehydratedMarcRecord = createRecordDefaults[marcType](instanceResponse, fixedFieldSpecResponse);
+          if (isShouldUseInitialValuesProp) {
+            dehydratedMarcRecord = dehydrateMarcRecordResponse(
+              initialValuesProp,
+              marcType,
+              fixedFieldSpecResponse,
+            );
+          } else {
+            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
+          // otherwise if we're just entering Edit mode - initialize with initial values or values from response
+          let dataToInitializeWith = null;
+
+          if (isLoadingDataAfterKeepEditing || !isShouldUseInitialValuesProp) {
+            dataToInitializeWith = marcRecordResponse;
+          } else {
+            dataToInitializeWith = initialValuesProp;
+          }
+
           dehydratedMarcRecord = dehydrateMarcRecordResponse(
-            marcRecordResponse,
+            dataToInitializeWith,
             marcType,
             fixedFieldSpecResponse,
             fieldIds,

src/QuickMarcEditor/QuickMarcEditorContainer.test.js

@@ -5,6 +5,7 @@ import {
   fireEvent,
   screen,
   within,
+  waitFor,
 } from '@folio/jest-config-stripes/testing-library/react';
 import faker from 'faker';
 
@@ -71,7 +72,10 @@ const record = {
   id: faker.random.uuid(),
   leader: bibLeaderString,
   marcFormat: MARC_TYPES.BIB.toUpperCase(),
-  fields: [],
+  fields: [{
+    tag: '245',
+    content: '$a value from API',
+  }],
 };
 
 const locations = [];
@@ -86,11 +90,13 @@ const mockOnSave = jest.fn();
 const renderQuickMarcEditorContainer = ({
   action = QUICK_MARC_ACTIONS.EDIT,
   marcType = MARC_TYPES.BIB,
+  isUsingRouter,
   ...props
 } = {}) => (render(
   <Harness
     action={action}
     marcType={marcType}
+    isUsingRouter={isUsingRouter}
   >
     <QuickMarcEditorContainer
       externalRecordPath={externalRecordPath}
@@ -597,4 +603,52 @@ describe('Given Quick Marc Editor Container', () => {
       });
     });
   });
+
+  describe('when using initialValues prop', () => {
+    describe('when using routes', () => {
+      beforeEach(() => {
+        renderQuickMarcEditorContainer({
+          mutator,
+          action: QUICK_MARC_ACTIONS.EDIT,
+          marcType: MARC_TYPES.BIB,
+          isUsingRouter: true,
+          initialValues: {
+            marcFormat: 'BIBLIOGRAPHIC',
+            leader: '03109cas\\a2200841\\a\\4500',
+            fields: [{
+              tag: '245',
+              content: '$a value from initial values',
+            }],
+          },
+        });
+      });
+
+      it('should use fetched data to initialize the form', async () => {
+        await waitFor(() => expect(screen.getByRole('textbox', { name: 'ui-quick-marc.record.subfield' })).toHaveValue('$a value from API'));
+      });
+    });
+
+    describe('when action is CREATE', () => {
+      beforeEach(() => {
+        renderQuickMarcEditorContainer({
+          mutator,
+          action: QUICK_MARC_ACTIONS.CREATE,
+          marcType: MARC_TYPES.BIB,
+          isUsingRouter: false,
+          initialValues: {
+            marcFormat: 'BIBLIOGRAPHIC',
+            leader: '03109cas\\a2200841\\a\\4500',
+            fields: [{
+              tag: '245',
+              content: '$a value from initial values',
+            }],
+          },
+        });
+      });
+
+      it('should use initialValues', async () => {
+        await waitFor(() => expect(screen.getByRole('textbox', { name: 'ui-quick-marc.record.subfield' })).toHaveValue('$a value from initial values'));
+      });
+    });
+  });
 });

src/QuickMarcEditor/utils.js

@@ -1179,7 +1179,7 @@ const addLeaderFieldAndIdToRecords = (marcRecordResponse, fieldIds) => {
   };
 };
 
-export const dehydrateMarcRecordResponse = (marcRecordResponse, marcType, fixedFieldSpec, fieldIds) => (
+export const dehydrateMarcRecordResponse = (marcRecordResponse, marcType, fixedFieldSpec, fieldIds = []) => (
   flow(
     marcRecord => addLeaderFieldAndIdToRecords(marcRecord, fieldIds),
     marcRecord => autopopulateFixedField(marcRecord, marcType, fixedFieldSpec),

test/jest/helpers/harness.js

@@ -48,6 +48,7 @@ const Harness = ({
   action,
   marcType,
   basePath,
+  isUsingRouter,
 }) => {
   const QuickMarcProviderComponent = quickMarcContext
     ? QuickMarcProviderMock
@@ -63,6 +64,7 @@ const Harness = ({
               marcType={marcType}
               basePath={basePath}
               ctxValue={quickMarcContext}
+              isUsingRouter={isUsingRouter}
             >
               {children}
             </QuickMarcProviderComponent>