UIBULKED-497: fix test

src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js

@@ -29,6 +29,7 @@ export const BulkEditInAppLayer = ({
     downloadFile,
     confirmChanges,
     closePreviewModal,
+    setShouldRefetchStatus
   } = useConfirmChanges({
     queryDownloadKey: QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
     updateFn: contentUpdate,
@@ -81,6 +82,7 @@ export const BulkEditInAppLayer = ({
         onDownload={downloadFile}
         onKeepEditing={closePreviewModal}
         onChangesCommited={handleChangesCommited}
+        setShouldRefetchStatus={setShouldRefetchStatus}
       />
     </>
   );

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

@@ -27,6 +27,7 @@ export const BulkEditPreviewModal = ({
   onKeepEditing,
   onDownload,
   onChangesCommited,
+  setShouldRefetchStatus
 }) => {
   const callout = useShowCallout();
   const intl = useIntl();
@@ -91,6 +92,7 @@ export const BulkEditPreviewModal = ({
         bulkDetails={bulkDetails}
         isPreviewEnabled={!isPreviewLoading}
         onPreviewError={onKeepEditing}
+        setShouldRefetchStatus={setShouldRefetchStatus}
       />
     </Modal>
   );
@@ -103,4 +105,5 @@ BulkEditPreviewModal.propTypes = {
   onKeepEditing: PropTypes.func,
   onChangesCommited: PropTypes.func,
   onDownload: PropTypes.func,
+  setShouldRefetchStatus: PropTypes.func
 };

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { memo, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
@@ -39,6 +39,7 @@ export const BulkEditPreviewModalList = ({
   bulkDetails,
   isPreviewEnabled,
   onPreviewError,
+  setShouldRefetchStatus,
 }) => {
   const callout = useShowCallout();
   const intl = useIntl();
@@ -50,6 +51,17 @@ export const BulkEditPreviewModalList = ({
   } = usePagination(PAGINATION_CONFIG);
 
   const visibleColumnKeys = getVisibleColumnsKeys(visibleColumns);
+  console.log('isPreviewEnabled:', isPreviewEnabled);
+  console.log('bulkDetails status:', bulkDetails?.status);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    if (isPreviewEnabled && ![JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS, JOB_STATUSES.DATA_MODIFICATION].includes(bulkDetails?.status)) {
+      setShouldFetch(true);
+    } else {
+      setShouldFetch(false);
+    }
+  }, [bulkDetails?.status, isPreviewEnabled]);
 
   const {
     contentData,
@@ -60,8 +72,9 @@ export const BulkEditPreviewModalList = ({
     id: bulkDetails?.id,
     step: EDITING_STEPS.EDIT,
     capabilities: currentRecordType,
+    onSuccess: () => setShouldRefetchStatus(false),
     queryOptions: {
-      enabled: isPreviewEnabled && bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS,
+      enabled: shouldFetch,
       onError: () => {
         callout({
           type: 'error',

src/components/shared/ProgressBar/ProgressBar.js

@@ -24,6 +24,7 @@ export const ProgressBar = () => {
   const { bulkDetails, clearIntervalAndRedirect } = useBulkOperationDetails({
     id,
     interval: 1000 * 3,
+    shouldRefetch: true,
     additionalQueryKeys: [step],
   });
 

src/hooks/api/useBulkOperationDetails.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 import { useHistory } from 'react-router-dom';
@@ -10,27 +10,34 @@ export const useBulkOperationDetails = ({
   id,
   interval = 0,
   additionalQueryKeys = [],
+  shouldRefetch = false,
   ...options
 }) => {
   const ky = useOkapiKy();
   const [namespaceKey] = useNamespace({ key: BULK_OPERATION_DETAILS_KEY });
   const history = useHistory();
-  const [refetchInterval, setRefetchInterval] = useState(interval);
-
-  const { data, isLoading } = useQuery({
-    queryKey: [BULK_OPERATION_DETAILS_KEY, namespaceKey, id, refetchInterval, ...additionalQueryKeys],
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: [BULK_OPERATION_DETAILS_KEY, namespaceKey, id],
     enabled: !!id,
-    refetchInterval,
     queryFn: () => ky.get(`bulk-operations/${id}`).json(),
     ...options,
   });
 
-  const clearInterval = () => {
-    setRefetchInterval(0);
-  };
-  const clearIntervalAndRedirect = (pathname, searchParams) => {
-    clearInterval();
+  useEffect(() => {
+    let intervalId;
 
+    if (shouldRefetch) {
+      intervalId = setInterval(() => {
+        refetch();
+      }, interval);
+    }
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [shouldRefetch, interval, refetch]);
+
+  const clearIntervalAndRedirect = (pathname, searchParams) => {
     history.replace({
       pathname,
       search: searchParams ? buildSearch(searchParams, history.location.search) : '',
@@ -40,7 +47,7 @@ export const useBulkOperationDetails = ({
   return {
     bulkDetails: data,
     isLoading,
-    clearInterval,
+    refetch,
     clearIntervalAndRedirect,
   };
 };

src/hooks/api/useRecordsPreview.js

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 
 import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 
+import noop from 'lodash/noop';
 import { BULK_VISIBLE_COLUMNS } from '../../constants';
 import { getMappedTableData } from '../../utils/mappers';
 import { RootContext } from '../../context/RootContext';
@@ -21,7 +22,8 @@ export const useRecordsPreview = ({
   limit,
   offset,
   criteria,
-  queryRecordType
+  queryRecordType,
+  onSuccess = noop,
 }) => {
   const intl = useIntl();
   const { setVisibleColumns } = useContext(RootContext);
@@ -83,6 +85,13 @@ export const useRecordsPreview = ({
     capabilities
   ]);
 
+  console.log(contentData);
+  useEffect(() => {
+    if (contentData?.length > 0) {
+      onSuccess();
+    }
+  }, [contentData, onSuccess]);
+
   return {
     isLoading,
     refetch,

src/hooks/useConfirmChanges.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useQueryClient } from 'react-query';
 
@@ -32,8 +32,13 @@ export const useConfirmChanges = ({
 
   const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [shouldRefetchStatus, setShouldRefetchStatus] = useState(false);
 
-  const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId, interval: 1000 * 3 });
+  const { bulkDetails } = useBulkOperationDetails({
+    id: bulkOperationId,
+    interval: 1000 * 3,
+    shouldRefetch: shouldRefetchStatus,
+  });
   const { bulkOperationStart } = useBulkOperationStart();
 
   const totalRecords = bulkDetails?.totalNumOfRecords;
@@ -44,11 +49,13 @@ export const useConfirmChanges = ({
 
   const closePreviewModal = () => {
     setIsPreviewModalOpened(false);
+    setShouldRefetchStatus(false);
   };
 
   const confirmChanges = (payload) => {
     setIsPreviewLoading(true);
     setIsPreviewModalOpened(true);
+    setShouldRefetchStatus(true);
 
     updateFn(payload)
       .then(() => bulkOperationStart({
@@ -58,7 +65,6 @@ export const useConfirmChanges = ({
       }))
       .then(() => {
         queryClient.invalidateQueries(BULK_OPERATION_DETAILS_KEY);
-        queryClient.invalidateQueries(PREVIEW_MODAL_KEY);
       })
       .catch(() => {
         callout({
@@ -94,5 +100,6 @@ export const useConfirmChanges = ({
     openPreviewModal,
     closePreviewModal,
     confirmChanges,
+    setShouldRefetchStatus
   };
 };