UIBULKED-605 Enabling Confirm changes button based on forms state (#679)

CHANGELOG.md

@@ -19,6 +19,7 @@
 * [UIBULKED-589](https://folio-org.atlassian.net/browse/UIBULKED-589) Make options in the "Actions" dropdown in "Bulk edits" in alphabetical order.
 * [UIBULKED-588](https://folio-org.atlassian.net/browse/IBULKED-588) Displaying errors and warnings.
 * [UIBULKED-570](https://folio-org.atlassian.net/browse/UIBULKED-570) Downloading files from Logs tab
+* [UIBULKED-605](https://folio-org.atlassian.net/browse/UIBULKED-605) Enabling Confirm changes button based on forms state.
 
 ## [4.2.2](https://github.com/folio-org/ui-bulk-edit/tree/v4.2.2) (2024-11-15)
 

src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers.js

@@ -398,6 +398,10 @@ export const isContentUpdatesFormValid = (contentUpdates) => {
   });
 };
 
+export const isMarcContentUpdatesFormValid = (errors) => {
+  return Object.keys(errors).length === 0;
+};
+
 export const getFilteredFields = (initialFields) => {
   return initialFields.map(f => {
     const uniqOptions = new Set(initialFields.map(i => i.option));

src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
 import uniqueId from 'lodash/uniqueId';
+import { omit, isEqual } from 'lodash';
 
 import { BulkEditLayer } from '../BulkEditListResult/BulkEditInAppLayer/BulkEditLayer';
 import { BulkEditMarc } from '../BulkEditListResult/BulkEditMarc/BulkEditMarc';
@@ -13,14 +14,20 @@ import { useContentUpdate } from '../../../hooks/api';
 import {
   getContentUpdatesBody,
   getMappedContentUpdates,
-  isContentUpdatesFormValid
+  isContentUpdatesFormValid,
+  isMarcContentUpdatesFormValid
 } from '../BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers';
-import { getMarcFormErrors } from '../BulkEditListResult/BulkEditMarc/validation';
-import { getAdministrativeDataOptions } from '../../../constants';
 import { sortAlphabetically } from '../../../utils/sortAlphabetically';
 import { BulkEditPreviewModalFooter } from '../BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalFooter';
 import { useCommitChanges } from '../../../hooks/useCommitChanges';
-
+import { getAdministrativeDataOptions } from '../../../constants';
+import { getMarcFormErrors } from '../BulkEditListResult/BulkEditMarc/validation';
+import {
+  ADMINISTRATIVE_DEFAULT_BODY,
+  ADMINISTRATIVE_FORM_INITIAL_STATE,
+  MARC_DEFAULT_BODY,
+  MARC_FORM_INITIAL_STATE
+} from '../../../constants/forms';
 
 export const BulkEditMarcLayer = ({
   bulkOperationId,
@@ -40,11 +47,24 @@ export const BulkEditMarcLayer = ({
   const sortedOptions = sortAlphabetically(options);
 
   const marcFormErrors = getMarcFormErrors(marcFields);
+  const marcContentUpdates = marcFields.map(getTransformedField);
+  const marcContentUpdatesWithoutId = marcContentUpdates.map(item => omit(item, ['id']));
   const contentUpdates = getMappedContentUpdates(fields, options);
 
-  const isMarcFieldsValid = Object.keys(marcFormErrors).length === 0;
+  const isMarcFormValid = isMarcContentUpdatesFormValid(marcFormErrors);
   const isAdministrativeFormValid = isContentUpdatesFormValid(contentUpdates);
-  const isAnyFormValid = isMarcFieldsValid || isAdministrativeFormValid;
+
+  const isAdministrativeFormPristine = isEqual(ADMINISTRATIVE_FORM_INITIAL_STATE, contentUpdates);
+  const isMarcFormPristine = isEqual(MARC_FORM_INITIAL_STATE, marcContentUpdatesWithoutId);
+
+  const areBothFormsValid = isAdministrativeFormValid && isMarcFormValid;
+  const isOnlyAdministrativeValid = isAdministrativeFormValid && isMarcFormPristine;
+  const isOnlyMarcFormValid = isMarcFormValid && isAdministrativeFormPristine;
+
+  // we can confirm the changes if either:
+  // both forms are changed-and-valid
+  // one is changed-and-valid and the other pristine
+  const areFormsStateValid = isOnlyAdministrativeValid || isOnlyMarcFormValid || areBothFormsValid;
 
   const {
     isPreviewModalOpened,
@@ -69,32 +89,21 @@ export const BulkEditMarcLayer = ({
   const areMarcAndCsvReady = hasBothFiles && isPreviewSettled;
 
   const handleConfirm = () => {
-    const bulkOperationMarcRules = marcFields
-      .map(field => ({
-        bulkOperationId,
-        ...getTransformedField(field),
-      }));
-
-    const marcDefaultBody = {
-      bulkOperationMarcRules: [],
-      totalRecords: 0,
-    };
-
-    const administrativeDefaultBody = {
-      bulkOperationRules: [],
-      totalRecords: 0,
-    };
-
-    const marcUpdateBody = isMarcFieldsValid ? {
+    const bulkOperationMarcRules = marcContentUpdates.map((item) => ({
+      bulkOperationId,
+      ...item
+    }));
+
+    const marcUpdateBody = isMarcFormValid ? {
       bulkOperationMarcRules,
       totalRecords,
-    } : marcDefaultBody;
+    } : MARC_DEFAULT_BODY;
 
     const administrativeBody = isAdministrativeFormValid ? getContentUpdatesBody({
       bulkOperationId,
       contentUpdates,
       totalRecords,
-    }) : administrativeDefaultBody;
+    }) : ADMINISTRATIVE_DEFAULT_BODY;
 
     const updateSequence = () => contentUpdate(administrativeBody)
       .then(() => marcContentUpdate(marcUpdateBody));
@@ -106,7 +115,7 @@ export const BulkEditMarcLayer = ({
     <>
       <BulkEditLayer
         isLayerOpen={isMarcLayerOpen}
-        isConfirmDisabled={!isAnyFormValid}
+        isConfirmDisabled={!areFormsStateValid}
         onLayerClose={onMarcLayerClose}
         onConfirm={handleConfirm}
         {...paneProps}

src/constants/forms.js

@@ -0,0 +1,41 @@
+export const MARC_DEFAULT_BODY = {
+  bulkOperationMarcRules: [],
+  totalRecords: 0,
+};
+
+export const ADMINISTRATIVE_DEFAULT_BODY = {
+  bulkOperationRules: [],
+  totalRecords: 0,
+};
+
+export const MARC_FORM_INITIAL_STATE = [
+  {
+    tag: '',
+    ind1: '\\',
+    ind2: '\\',
+    subfield: '',
+    actions: [{
+      name: '',
+      data: []
+    }],
+    parameters: [],
+    subfields: [],
+  }
+];
+
+export const ADMINISTRATIVE_FORM_INITIAL_STATE = [
+  {
+    option: '',
+    tenants: [],
+    actions: [
+      {
+        initial: undefined,
+        updated: undefined,
+        type: undefined,
+        tenants: [],
+        updated_tenants: [],
+        parameters: []
+      }
+    ]
+  }
+];