UIBULKED-497: "Are you sure" preview displays outdated values after User changed selection on bulk edit form and clicked "Confirm changes"

CHANGELOG.md

@@ -65,6 +65,7 @@
 * [UIBULKED-559](https://folio-org.atlassian.net/browse/UIBULKED-559) Update subfield validation in MARC form.
 * [UIBULKED-558](https://folio-org.atlassian.net/browse/UIBULKED-558) Add translation for new "Member" column.
 * [UIBULKED-556](https://folio-org.atlassian.net/browse/UIBULKED-556) ECS - remove link to affected record in Optimistic error for holdings and items.
+* [UIBULKED-497](https://folio-org.atlassian.net/browse/UIBULKED-497) "Are you sure" preview displays outdated values after User changed selection on bulk edit form and clicked "Confirm changes".
 
 ## [4.1.4](https://github.com/folio-org/ui-bulk-edit/tree/v4.1.4) (2024-05-29)
 

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditInAppPreviewModal.css

@@ -2,6 +2,12 @@
     max-width: 1024px;
 }
 
+.previewLoading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .previewModalFooter {
     width: 100%;
     display: flex;

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js

@@ -10,6 +10,7 @@ import {
   APPROACHES,
   EDITING_STEPS,
   FILE_KEYS,
+  JOB_STATUSES,
 } from '../../../../constants';
 import {
   useBulkOperationStart,
@@ -74,8 +75,8 @@ export const BulkEditPreviewModal = ({
         <BulkEditPreviewModalFooter
           downloadLabel={downloadLabel}
           bulkOperationId={bulkDetails?.id}
-          isCommitBtnDisabled={!hasLinkForDownload || isPreviewLoading}
-          isDownloadBtnDisabled={!hasLinkForDownload || isPreviewLoading}
+          isCommitBtnDisabled={!hasLinkForDownload || isPreviewLoading || bulkDetails?.status === JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS}
+          isDownloadBtnDisabled={!hasLinkForDownload || isPreviewLoading || bulkDetails?.status === JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS}
           onSave={handleBulkOperationStart}
           onDownload={onDownload}
           onKeepEditing={onKeepEditing}

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js

@@ -6,6 +6,7 @@ import {
 } from 'react-intl';
 
 import {
+  Loading,
   MessageBanner,
   MultiColumnList
 } from '@folio/stripes/components';
@@ -21,6 +22,7 @@ import { usePagination } from '../../../../hooks/usePagination';
 import {
   CAPABILITIES,
   EDITING_STEPS,
+  JOB_STATUSES,
   PAGINATION_CONFIG
 } from '../../../../constants';
 import {
@@ -58,7 +60,7 @@ export const BulkEditPreviewModalList = ({
     step: EDITING_STEPS.EDIT,
     capabilities: currentRecordType,
     queryOptions: {
-      enabled: isPreviewEnabled,
+      enabled: isPreviewEnabled && bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS,
       onError: () => {
         callout({
           type: 'error',
@@ -89,31 +91,41 @@ export const BulkEditPreviewModalList = ({
   };
 
   return (
-    <>
-      {renderMessageBanner()}
+    bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS ?
+      (
+        <>
+          {renderMessageBanner()}
 
-      <strong className={css.previewModalSubtitle}><FormattedMessage id="ui-bulk-edit.previewModal.previewToBeChanged" /></strong>
+          <strong className={css.previewModalSubtitle}><FormattedMessage
+            id="ui-bulk-edit.previewModal.previewToBeChanged"
+          />
+          </strong>
 
-      <MultiColumnList
-        striped
-        contentData={contentData}
-        columnMapping={columnMapping}
-        visibleColumns={visibleColumnKeys}
-        maxHeight={300}
-        columnIdPrefix="in-app"
-        columnWidths={PREVIEW_COLUMN_WIDTHS}
-        loading={isFetching}
-      />
+          <MultiColumnList
+            striped
+            contentData={contentData}
+            columnMapping={columnMapping}
+            visibleColumns={visibleColumnKeys}
+            maxHeight={300}
+            columnIdPrefix="in-app"
+            columnWidths={PREVIEW_COLUMN_WIDTHS}
+            loading={isFetching}
+          />
 
-      {contentData.length > 0 && (
-        <PrevNextPagination
-          {...pagination}
-          totalCount={bulkDetails?.processedNumOfRecords}
-          disabled={false}
-          onChange={changePage}
-        />
-      )}
-    </>
+          {contentData.length > 0 && (
+          <PrevNextPagination
+            {...pagination}
+            totalCount={bulkDetails?.processedNumOfRecords}
+            disabled={false}
+            onChange={changePage}
+          />
+          )}
+        </>
+      )
+      :
+        <div className={css.previewLoading}>
+          <Loading size="large" />
+        </div>
   );
 };
 

src/constants/core.js

@@ -57,6 +57,7 @@ export const JOB_STATUSES = {
   CANCELLED: 'CANCELLED',
   SCHEDULED: 'SCHEDULED',
   FAILED: 'FAILED',
+  DATA_MODIFICATION_IN_PROGRESS: 'DATA_MODIFICATION_IN_PROGRESS',
 };
 
 export const EDITING_STEPS = {

src/hooks/useConfirmChanges.js

@@ -33,7 +33,7 @@ export const useConfirmChanges = ({
   const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
 
-  const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId });
+  const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId, interval: 1000 * 3 });
   const { bulkOperationStart } = useBulkOperationStart();
 
   const totalRecords = bulkDetails?.totalNumOfRecords;