UIQM-715: Reuse existing ids for fields after saving a record to avoid re-rendering and be able to focus on a field by ref.

CHANGELOG.md

@@ -40,6 +40,7 @@
 * [UIQM-701](https://issues.folio.org/browse/UIQM-701) Use new GA workflows.
 * [UIQM-711](https://issues.folio.org/browse/UIQM-711) Update `validateFixedFieldPositions` to display all 008 field errors instead of one in Bibliographic records.
 * [UIQM-712](https://issues.folio.org/browse/UIQM-712) In field 007 for Projected Graphic type: change the `MfS` field type to `Byte` to allow only 1 character to be entered.
+* [UIQM-715](https://issues.folio.org/browse/UIQM-715) Reuse existing ids for fields after saving a record to avoid re-rendering and be able to focus on a field by ref.
 
 ## [8.0.1] (https://github.com/folio-org/ui-quick-marc/tree/v8.0.1) (2024-04-18)
 

src/QuickMarcEditor/QuickMarcEditWrapper.js

@@ -224,7 +224,9 @@ const QuickMarcEditWrapper = ({
           });
         }
 
-        await refreshPageData();
+        const fieldIds = formValuesToHydrate.records.slice(1).map(field => field.id);
+
+        await refreshPageData(fieldIds);
 
         return { version: parseInt(formValuesToSave.relatedRecordVersion, 10) + 1 };
       })

src/QuickMarcEditor/QuickMarcEditWrapper.test.js

@@ -314,6 +314,7 @@ jest.mock('@folio/stripes/final-form', () => () => (Component) => ({
 });
 
 const mockShowCallout = jest.fn();
+const mockRefreshPageData = jest.fn().mockResolvedValue();
 
 jest.mock('@folio/stripes-acq-components', () => ({
   ...jest.requireActual('@folio/stripes-acq-components'),
@@ -384,7 +385,7 @@ const renderQuickMarcEditWrapper = ({
           location={{}}
           locations={locations}
           externalRecordPath="/some-record"
-          refreshPageData={jest.fn().mockResolvedValue()}
+          refreshPageData={mockRefreshPageData}
           fixedFieldSpec={mockSpecs[marcType]}
           onCheckCentralTenantPerm={mockOnCheckCentralTenantPerm}
           {...renderProps}
@@ -474,6 +475,24 @@ describe('Given QuickMarcEditWrapper', () => {
         expect(mockOnClose).not.toHaveBeenCalled();
         expect(mockOnSave).not.toHaveBeenCalled();
       });
+
+      it('pass ids of fields to the refreshPageData', async () => {
+        const mockOnClose = jest.fn();
+        const mockOnSave = jest.fn();
+
+        const { getByText } = renderQuickMarcEditWrapper({
+          instance,
+          mutator,
+          onClose: mockOnClose,
+          onSave: mockOnSave,
+        });
+
+        await act(async () => { fireEvent.click(getByText('ui-quick-marc.record.save.continue')); });
+
+        const fieldIds = mockRecords[MARC_TYPES.BIB].slice(1).map(field => field.id);
+
+        expect(mockRefreshPageData).toHaveBeenCalledWith(fieldIds);
+      });
     });
 
     describe('when click on save button', () => {

src/QuickMarcEditor/QuickMarcEditor.js

@@ -514,7 +514,7 @@ const QuickMarcEditor = ({
         <Paneset>
           <Layer
             isOpen
-            contentLabel="ui-quick-marc.record.quickMarcEditorLabel"
+            contentLabel={intl.formatMessage({ id: 'ui-quick-marc.record.quickMarcEditorLabel' })}
           >
             <Pane
               id="quick-marc-editor-pane"

src/QuickMarcEditor/QuickMarcEditorContainer.js

@@ -118,7 +118,7 @@ const QuickMarcEditorContainer = ({
     return `${externalRecordPath}/${externalId}`;
   }, [externalRecordPath, marcType, externalId, instanceId, action]);
 
-  const loadData = useCallback(async () => {
+  const loadData = useCallback(async (fieldIds) => {
     const path = action === QUICK_MARC_ACTIONS.CREATE && marcType === MARC_TYPES.HOLDINGS
       ? EXTERNAL_INSTANCE_APIS[MARC_TYPES.BIB]
       : EXTERNAL_INSTANCE_APIS[marcType];
@@ -172,7 +172,12 @@ const QuickMarcEditorContainer = ({
         if (action === QUICK_MARC_ACTIONS.CREATE) {
           dehydratedMarcRecord = createRecordDefaults[marcType](instanceResponse, fixedFieldSpecResponse);
         } else {
-          dehydratedMarcRecord = dehydrateMarcRecordResponse(marcRecordResponse, marcType, fixedFieldSpecResponse);
+          dehydratedMarcRecord = dehydrateMarcRecordResponse(
+            marcRecordResponse,
+            marcType,
+            fixedFieldSpecResponse,
+            fieldIds,
+          );
         }
 
         const formattedMarcRecord = formatMarcRecordByQuickMarcAction(dehydratedMarcRecord, action, marcType);

src/QuickMarcEditor/utils.js

@@ -1159,7 +1159,7 @@ export const isReadOnly = (
   return rows.has(recordRow.tag) || isLastRecord(recordRow);
 };
 
-const addLeaderFieldAndIdToRecords = (marcRecordResponse) => {
+const addLeaderFieldAndIdToRecords = (marcRecordResponse, fieldIds) => {
   const marcType = marcRecordResponse.marcFormat.toLowerCase();
   const leader = convertLeaderToObject(marcType, marcRecordResponse.leader);
 
@@ -1173,17 +1173,17 @@ const addLeaderFieldAndIdToRecords = (marcRecordResponse) => {
         content: leader,
         id: LEADER_TAG,
       },
-      ...marcRecordResponse.fields.map(record => ({
+      ...marcRecordResponse.fields.map((record, index) => ({
         ...record,
-        id: uuidv4(),
+        id: fieldIds?.[index] || uuidv4(),
       })),
     ],
   };
 };
 
-export const dehydrateMarcRecordResponse = (marcRecordResponse, marcType, fixedFieldSpec) => (
+export const dehydrateMarcRecordResponse = (marcRecordResponse, marcType, fixedFieldSpec, fieldIds) => (
   flow(
-    addLeaderFieldAndIdToRecords,
+    marcRecord => addLeaderFieldAndIdToRecords(marcRecord, fieldIds),
     marcRecord => autopopulateFixedField(marcRecord, marcType, fixedFieldSpec),
     autopopulatePhysDescriptionField,
     autopopulateMaterialCharsField,

src/QuickMarcEditor/utils.test.js

@@ -120,6 +120,56 @@ describe('QuickMarcEditor utils', () => {
         Date2: '\\\\\\\\',
       });
     });
+
+    it('should reuse existing ids for fields if they are available', () => {
+      const marcRecord = {
+        id: faker.random.uuid(),
+        marcFormat: MARC_TYPES.BIB.toUpperCase(),
+        leader: bibLeaderString,
+        fields: [
+          {
+            id: 'id-1',
+            tag: '001',
+            content: '$a fss $b asd',
+          },
+          {
+            id: 'id-2',
+            tag: '006',
+            content: {
+              Type: 'c',
+            },
+          },
+          {
+            tag: '007',
+            content: {
+              Category: 'c',
+            },
+          },
+          {
+            tag: '008',
+            content: {},
+          },
+        ],
+      };
+
+      const fieldIds = ['id-1', 'id-2'];
+
+      const dehydratedMarcRecord = utils.dehydrateMarcRecordResponse(
+        marcRecord,
+        MARC_TYPES.BIB,
+        fixedFieldSpecBib,
+        fieldIds,
+      );
+      const field001 = dehydratedMarcRecord.records[1];
+      const field006 = dehydratedMarcRecord.records[2];
+      const field007 = dehydratedMarcRecord.records[3];
+      const field008 = dehydratedMarcRecord.records[4];
+
+      expect(field001.id).toBe('id-1');
+      expect(field006.id).toBe('id-2');
+      expect(field007.id).toBe('uuid');
+      expect(field008.id).toBe('uuid');
+    });
   });
 
   describe('hydrateMarcRecord', () => {