UIBULKED-597 Commit changes button enabled before preview is populated

CHANGELOG.md

@@ -14,6 +14,7 @@
 * [UIBULKED-568](https://folio-org.atlassian.net/browse/UIBULKED-568) Populating Are you sure? form
 * [UIBULKED-543](https://folio-org.atlassian.net/browse/UIBULKED-543) Rename Find (full field search) to Find.
 * [UIBULKED-599](https://folio-org.atlassian.net/browse/UIBULKED-599) Change Administrative note type is not supported for MARC instances.
+* [UIBULKED-597](https://folio-org.atlassian.net/browse/UIBULKED-597) Commit changes button enabled before preview is populated
 
 ## [4.2.2](https://github.com/folio-org/ui-bulk-edit/tree/v4.2.2) (2024-11-15)
 

src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js

@@ -32,11 +32,13 @@ export const BulkEditInAppLayer = ({
 
   const {
     isPreviewModalOpened,
-    isPreviewLoading,
+    isJobPreparing,
+    isPreviewSettled,
     bulkDetails,
     totalRecords,
     confirmChanges,
     closePreviewModal,
+    changePreviewSettled,
   } = useConfirmChanges({ bulkOperationId });
 
   const { commitChanges } = useCommitChanges({
@@ -47,8 +49,7 @@ export const BulkEditInAppLayer = ({
     }
   });
 
-  const isCsvFileReady = bulkDetails?.linkToModifiedRecordsCsvFile
-    || !isPreviewLoading;
+  const isCsvFileReady = bulkDetails?.linkToModifiedRecordsCsvFile && isPreviewSettled;
 
   const handleConfirm = () => {
     const contentUpdateBody = getContentUpdatesBody({
@@ -80,8 +81,10 @@ export const BulkEditInAppLayer = ({
       </BulkEditLayer>
 
       <BulkEditPreviewModal
-        isPreviewLoading={isPreviewLoading}
-        bulkDetails={bulkDetails}
+        isJobPreparing={isJobPreparing}
+        isPreviewSettled={isPreviewSettled}
+        onPreviewSettled={changePreviewSettled}
+        onKeepEditing={closePreviewModal}
         open={isPreviewModalOpened}
         modalFooter={
           <BulkEditPreviewModalFooter

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

@@ -31,11 +31,14 @@ const bulkOperation = bulkEditLogsData[0];
 const visibleColumns = [];
 const setVisibleColumns = jest.fn();
 const onKeepEditing = jest.fn();
+const onPreviewSettled = jest.fn();
 
 const defaultProps = {
   open: true,
   onKeepEditing,
-  isPreviewLoading: false,
+  onPreviewSettled,
+  isJobPreparing: false,
+  isPreviewSettled: false,
   modalFooter: <div>Footer</div>,
 };
 
@@ -84,6 +87,12 @@ describe('BulkEditInAppPreviewModal', () => {
       });
   });
 
+  it('should render spinner if isJobPreparing set to true', async () => {
+    await renderPreviewModal({ ...defaultProps, isJobPreparing: true });
+
+    expect(screen.getByTestId('preloader')).toBeInTheDocument();
+  });
+
   it('should display preview records when available', async () => {
     const uuidColumn = {
       value: 'uuid',

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

@@ -10,9 +10,11 @@ import { BulkEditPreviewModalList } from './BulkEditPreviewModalList';
 
 export const BulkEditPreviewModal = ({
   open,
-  isPreviewLoading,
+  isJobPreparing,
   modalFooter,
   onKeepEditing,
+  isPreviewSettled,
+  onPreviewSettled,
 }) => {
   return (
     <Modal
@@ -24,11 +26,13 @@ export const BulkEditPreviewModal = ({
       dismissible
       onClose={onKeepEditing}
     >
-      {isPreviewLoading ?
+      {isJobPreparing ?
         <Preloader />
         :
         <BulkEditPreviewModalList
           onPreviewError={onKeepEditing}
+          onPreviewSettled={onPreviewSettled}
+          isPreviewSettled={isPreviewSettled}
         />
       }
     </Modal>
@@ -37,7 +41,9 @@ export const BulkEditPreviewModal = ({
 
 BulkEditPreviewModal.propTypes = {
   open: PropTypes.bool,
-  isPreviewLoading: PropTypes.bool,
+  isJobPreparing: PropTypes.bool,
   modalFooter: PropTypes.node,
+  isPreviewSettled: PropTypes.bool,
   onKeepEditing: PropTypes.func,
+  onPreviewSettled: PropTypes.func,
 };

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
@@ -34,6 +34,8 @@ import { useErrorMessages } from '../../../../hooks/useErrorMessages';
 
 export const BulkEditPreviewModalList = ({
   onPreviewError,
+  onPreviewSettled,
+  isPreviewSettled,
 }) => {
   const { id: bulkOperationId } = usePathParams('/bulk-edit/:id');
   const { visibleColumns } = useContext(RootContext);
@@ -44,8 +46,7 @@ export const BulkEditPreviewModalList = ({
     changePage,
   } = usePagination(PAGINATION_CONFIG);
 
-  const [previewLoaded, setPreviewLoaded] = useState(false);
-  const interval = previewLoaded ? 0 : 1000;
+  const interval = isPreviewSettled ? 0 : 1000;
   const { bulkDetails } = useBulkOperationDetails({
     id: bulkOperationId,
     interval,
@@ -65,14 +66,11 @@ export const BulkEditPreviewModalList = ({
     capabilities: currentRecordType,
     queryOptions: {
       enabled,
-      onSuccess: showErrorMessage,
       onError: (error) => {
         showErrorMessage(error);
         onPreviewError();
       },
-      onSettled: () => {
-        setPreviewLoaded(true);
-      }
+      onSettled: onPreviewSettled,
     },
     ...pagination,
   });
@@ -129,4 +127,6 @@ export const BulkEditPreviewModalList = ({
 
 BulkEditPreviewModalList.propTypes = {
   onPreviewError: PropTypes.func,
+  onPreviewSettled: PropTypes.func,
+  isPreviewSettled: PropTypes.bool,
 };

src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js

@@ -48,11 +48,13 @@ export const BulkEditMarcLayer = ({
 
   const {
     isPreviewModalOpened,
-    isPreviewLoading,
+    isJobPreparing,
+    isPreviewSettled,
     bulkDetails,
     totalRecords,
     confirmChanges,
     closePreviewModal,
+    changePreviewSettled,
   } = useConfirmChanges({ bulkOperationId });
 
   const { commitChanges } = useCommitChanges({
@@ -64,7 +66,7 @@ export const BulkEditMarcLayer = ({
   });
 
   const hasBothFiles = bulkDetails?.linkToModifiedRecordsCsvFile && bulkDetails?.linkToModifiedRecordsMarcFile;
-  const areMarcAndCsvReady = hasBothFiles || !isPreviewLoading;
+  const areMarcAndCsvReady = hasBothFiles && isPreviewSettled;
 
   const handleConfirm = () => {
     const bulkOperationMarcRules = marcFields
@@ -119,9 +121,11 @@ export const BulkEditMarcLayer = ({
       </BulkEditLayer>
 
       <BulkEditPreviewModal
-        isPreviewLoading={isPreviewLoading}
-        open={isPreviewModalOpened}
+        isJobPreparing={isJobPreparing}
+        isPreviewSettled={isPreviewSettled}
         onKeepEditing={closePreviewModal}
+        open={isPreviewModalOpened}
+        onPreviewSettled={changePreviewSettled}
         modalFooter={
           <BulkEditPreviewModalFooter
             bulkDetails={bulkDetails}

src/hooks/useConfirmChanges.js

@@ -23,7 +23,8 @@ export const useConfirmChanges = ({ bulkOperationId }) => {
   const { showErrorMessage } = useErrorMessages();
 
   const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false);
-  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [isJobPreparing, setIsJobPreparing] = useState(false);
+  const [isPreviewSettled, setIsPreviewSettled] = useState(false);
 
   const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId });
   const { bulkOperationStart } = useBulkOperationStart();
@@ -35,11 +36,16 @@ export const useConfirmChanges = ({ bulkOperationId }) => {
   };
 
   const closePreviewModal = () => {
+    setIsPreviewSettled(false);
     setIsPreviewModalOpened(false);
   };
 
+  const changePreviewSettled = () => {
+    setIsPreviewSettled(true);
+  };
+
   const confirmChanges = (updateSequence) => {
-    setIsPreviewLoading(true);
+    setIsJobPreparing(true);
 
     queryClient.removeQueries(PREVIEW_MODAL_KEY);
     queryClient.setQueriesData(
@@ -62,16 +68,17 @@ export const useConfirmChanges = ({ bulkOperationId }) => {
         closePreviewModal();
       })
       .finally(() => {
-        setIsPreviewLoading(false);
+        setIsJobPreparing(false);
       });
   };
 
   return {
     totalRecords,
     bulkDetails,
     isPreviewModalOpened,
-    isPreviewLoading,
-    setIsPreviewLoading,
+    isJobPreparing,
+    isPreviewSettled,
+    changePreviewSettled,
     openPreviewModal,
     closePreviewModal,
     confirmChanges,

src/hooks/useConfirmChanges.test.js

@@ -65,7 +65,7 @@ describe('useConfirmChanges', () => {
 
     expect(result.current.totalRecords).toBe(100);
     expect(result.current.isPreviewModalOpened).toBe(false);
-    expect(result.current.isPreviewLoading).toBe(false);
+    expect(result.current.isJobPreparing).toBe(false);
   });
 
   it('should open and close the preview modal', () => {
@@ -97,13 +97,13 @@ describe('useConfirmChanges', () => {
     });
 
     // Check if loading state is set
-    expect(result.current.isPreviewLoading).toBe(true);
+    expect(result.current.isJobPreparing).toBe(true);
 
     // Wait for the next update after the async calls
     await waitForNextUpdate(); // Wait for the polling to start
 
     // Finally, check if loading state is set back to false
-    expect(result.current.isPreviewLoading).toBe(false);
+    expect(result.current.isJobPreparing).toBe(false);
   });
 
   it('should handle error in confirmChanges function', async () => {
@@ -117,13 +117,28 @@ describe('useConfirmChanges', () => {
     });
 
     // Check if loading state is set
-    expect(result.current.isPreviewLoading).toBe(true);
+    expect(result.current.isJobPreparing).toBe(true);
 
     // Wait for the next update after the async calls
     await waitForNextUpdate();
 
     // Check that loading state is set back to false after handling the error
-    expect(result.current.isPreviewLoading).toBe(false);
+    expect(result.current.isJobPreparing).toBe(false);
     expect(result.current.isPreviewModalOpened).toBe(false); // Modal should close on error
   });
+
+  it('should handle changePreviewSettled function correctly', async () => {
+    const { result } = renderHook(() => useConfirmChanges({
+      queryDownloadKey: 'testKey',
+      bulkOperationId: '123',
+    }));
+
+    expect(result.current.isPreviewSettled).toBe(false);
+
+    act(() => {
+      result.current.changePreviewSettled();
+    });
+
+    expect(result.current.isPreviewSettled).toBe(true);
+  });
 });