UIBULKED-568 Populating Are you sure? form (#666)

CHANGELOG.md

@@ -11,6 +11,7 @@
 * [UIBULKED-562](https://folio-org.atlassian.net/browse/UIBULKED-562) Include statistical code option on Instances bulk edit forms.
 * [UIBULKED-574](https://folio-org.atlassian.net/browse/UIBULKED-574) Updates to Errors component.
 * [UIBULKED-571](https://folio-org.atlassian.net/browse/UIBULKED-571) Errors in response to UI calls.
+* [UIBULKED-568](https://folio-org.atlassian.net/browse/UIBULKED-568) Populating Are you sure? form
 
 ## [4.2.2](https://github.com/folio-org/ui-bulk-edit/tree/v4.2.2) (2024-11-15)
 

src/components/BulkEditLogs/BulkEditLogsActions/BulkEditLogsActions.js

@@ -33,9 +33,7 @@ const BulkEditLogsActions = ({ item }) => {
     queryKey: QUERY_KEY_DOWNLOAD_LOGS,
     enabled: false,
     id: item.id,
-    fileInfo: {
-      fileContentType: linkNamesMap[triggeredFile],
-    },
+    fileContentType: linkNamesMap[triggeredFile],
     onSuccess: data => {
       saveAs(new Blob([data]), getFileName(item, triggeredFile));
       setTriggeredFile(null);

src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js

@@ -9,13 +9,11 @@ import {
   getMappedContentUpdates,
   isContentUpdatesFormValid
 } from '../BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers';
-import {
-  QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
-  useContentUpdate,
-} from '../../../hooks/api';
+import { useContentUpdate } from '../../../hooks/api';
 import { useConfirmChanges } from '../../../hooks/useConfirmChanges';
-import { savePreviewFile } from '../../../utils/files';
 import { useOptionsWithTenants } from '../../../hooks/useOptionsWithTenants';
+import { BulkEditPreviewModalFooter } from '../BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalFooter';
+import { useCommitChanges } from '../../../hooks/useCommitChanges';
 
 
 export const BulkEditInAppLayer = ({
@@ -37,28 +35,20 @@ export const BulkEditInAppLayer = ({
     isPreviewLoading,
     bulkDetails,
     totalRecords,
-    downloadFile,
     confirmChanges,
     closePreviewModal,
-  } = useConfirmChanges({
-    queryDownloadKey: QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
-    bulkOperationId,
-    onDownloadSuccess: (fileData, searchParams) => {
-      const { approach, initialFileName } = searchParams;
+  } = useConfirmChanges({ bulkOperationId });
 
-      savePreviewFile({
-        bulkOperationId,
-        fileData,
-        approach,
-        initialFileName,
-      });
-    },
+  const { commitChanges } = useCommitChanges({
+    bulkOperationId,
+    onChangesCommited: () => {
+      closePreviewModal();
+      onInAppLayerClose();
+    }
   });
 
-  const handleChangesCommited = () => {
-    closePreviewModal();
-    onInAppLayerClose();
-  };
+  const isCsvFileReady = bulkDetails?.linkToModifiedRecordsCsvFile
+    || !isPreviewLoading;
 
   const handleConfirm = () => {
     const contentUpdateBody = getContentUpdatesBody({
@@ -93,9 +83,14 @@ export const BulkEditInAppLayer = ({
         isPreviewLoading={isPreviewLoading}
         bulkDetails={bulkDetails}
         open={isPreviewModalOpened}
-        onDownload={downloadFile}
-        onKeepEditing={closePreviewModal}
-        onChangesCommited={handleChangesCommited}
+        modalFooter={
+          <BulkEditPreviewModalFooter
+            bulkOperationId={bulkOperationId}
+            buttonsDisabled={!isCsvFileReady}
+            onCommitChanges={commitChanges}
+            onKeepEditing={closePreviewModal}
+          />
+        }
       />
     </>
   );

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

@@ -2,10 +2,8 @@ import { QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router';
 
 import {
-  act,
   render,
   screen,
-  fireEvent
 } from '@testing-library/react';
 
 import { useOkapiKy } from '@folio/stripes/core';
@@ -16,11 +14,7 @@ import { bulkEditLogsData } from '../../../../../test/jest/__mock__/fakeData';
 import { queryClient } from '../../../../../test/jest/utils/queryClient';
 import { RootContext } from '../../../../context/RootContext';
 
-import {
-  ACTIONS,
-  OPTIONS,
-  JOB_STATUSES,
-} from '../../../../constants';
+import { JOB_STATUSES } from '../../../../constants';
 import {
   useBulkOperationDetails,
   useRecordsPreview,
@@ -37,14 +31,12 @@ const bulkOperation = bulkEditLogsData[0];
 const visibleColumns = [];
 const setVisibleColumns = jest.fn();
 const onKeepEditing = jest.fn();
-const onChangesCommited = jest.fn();
 
 const defaultProps = {
   open: true,
-  bulkOperationId: bulkOperation.id.toString(),
   onKeepEditing,
-  onChangesCommited,
-  contentUpdates: undefined,
+  isPreviewLoading: false,
+  modalFooter: <div>Footer</div>,
 };
 
 const renderPreviewModal = (props = defaultProps, fileName = 'barcodes.csv') => {
@@ -92,28 +84,7 @@ describe('BulkEditInAppPreviewModal', () => {
       });
   });
 
-  it('should call all footer handlers', () => {
-    renderPreviewModal();
-
-    fireEvent.click(screen.getByText('ui-bulk-edit.previewModal.keepEditing'));
-    expect(onKeepEditing).toHaveBeenCalled();
-  });
-
-  it('should call all footer handlers without fileName', () => {
-    renderPreviewModal(defaultProps, '');
-
-    fireEvent.click(screen.getByText('ui-bulk-edit.previewModal.downloadPreview'));
-  });
-
   it('should display preview records when available', async () => {
-    const contentUpdates = [
-      {
-        option: OPTIONS.STATUS,
-        actions: [{
-          type: ACTIONS.CLEAR_FIELD,
-        }],
-      },
-    ];
     const uuidColumn = {
       value: 'uuid',
       label: 'uuid',
@@ -129,17 +100,18 @@ describe('BulkEditInAppPreviewModal', () => {
       status: JOB_STATUSES.REVIEW_CHANGES,
     });
 
-    await act(async () => {
-      renderPreviewModal({
-        ...defaultProps,
-        contentUpdates,
-      });
-    });
+    await renderPreviewModal();
 
     expect(screen.getByText('ui-bulk-edit.previewModal.previewToBeChanged')).toBeInTheDocument();
 
     await runAxeTest({
       rootNode: document.body,
     });
   });
+
+  it('should display footer if provided', async () => {
+    await renderPreviewModal();
+
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
 });

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

@@ -1,88 +1,26 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { useQueryClient } from 'react-query';
 import PropTypes from 'prop-types';
 
 import { Modal } from '@folio/stripes/components';
-import { buildSearch } from '@folio/stripes-acq-components';
 
 import { Preloader } from '@folio/stripes-data-transfer-components';
-import {
-  APPROACHES,
-  EDITING_STEPS,
-  FILE_KEYS,
-  JOB_STATUSES,
-} from '../../../../constants';
-import { BULK_OPERATION_DETAILS_KEY, useBulkOperationStart } from '../../../../hooks/api';
-import { BulkEditPreviewModalFooter } from './BulkEditPreviewModalFooter';
-import { useSearchParams } from '../../../../hooks';
 import { BulkEditPreviewModalList } from './BulkEditPreviewModalList';
-import { useErrorMessages } from '../../../../hooks/useErrorMessages';
 
 
 export const BulkEditPreviewModal = ({
   open,
-  bulkDetails,
   isPreviewLoading,
+  modalFooter,
   onKeepEditing,
-  onDownload,
-  onChangesCommited,
 }) => {
-  const history = useHistory();
-  const { criteria, approach } = useSearchParams();
-  const { showErrorMessage } = useErrorMessages();
-  const { bulkOperationStart } = useBulkOperationStart();
-  const queryClient = useQueryClient();
-
-  const hasLinkForDownload = bulkDetails?.[FILE_KEYS.PROPOSED_CHANGES_LINK_MARC] || bulkDetails?.[FILE_KEYS.PROPOSED_CHANGES_LINK];
-
-  const downloadLabel = approach === APPROACHES.MARC
-    ? <FormattedMessage id="ui-bulk-edit.previewModal.downloadPreview.marc" />
-    : <FormattedMessage id="ui-bulk-edit.previewModal.downloadPreview" />;
-
-  const handleBulkOperationStart = async () => {
-    try {
-      await bulkOperationStart({
-        id: bulkDetails?.id,
-        approach: APPROACHES.IN_APP,
-        step: EDITING_STEPS.COMMIT,
-      });
-
-      queryClient.resetQueries(BULK_OPERATION_DETAILS_KEY);
-
-      onChangesCommited();
-
-      history.replace({
-        pathname: `/bulk-edit/${bulkDetails?.id}/preview`,
-        search: buildSearch({
-          progress: criteria,
-        }, history.location.search),
-      });
-    } catch (e) {
-      showErrorMessage(e);
-    }
-  };
-
-  const isModalButtonDisabled = !hasLinkForDownload || isPreviewLoading || bulkDetails?.status !== JOB_STATUSES.REVIEW_CHANGES;
-
   return (
     <Modal
       size="large"
       open={open}
       label={<FormattedMessage id="ui-bulk-edit.previewModal.areYouSure" />}
       aria-label="PreviewModal"
-      footer={
-        <BulkEditPreviewModalFooter
-          downloadLabel={downloadLabel}
-          bulkOperationId={bulkDetails?.id}
-          isCommitBtnDisabled={isModalButtonDisabled}
-          isDownloadBtnDisabled={isModalButtonDisabled}
-          onSave={handleBulkOperationStart}
-          onDownload={onDownload}
-          onKeepEditing={onKeepEditing}
-        />
-      }
+      footer={modalFooter}
       dismissible
       onClose={onKeepEditing}
     >
@@ -100,8 +38,6 @@ export const BulkEditPreviewModal = ({
 BulkEditPreviewModal.propTypes = {
   open: PropTypes.bool,
   isPreviewLoading: PropTypes.bool,
-  bulkDetails: PropTypes.object,
+  modalFooter: PropTypes.node,
   onKeepEditing: PropTypes.func,
-  onChangesCommited: PropTypes.func,
-  onDownload: PropTypes.func,
 };

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

@@ -5,36 +5,76 @@ import { FormattedMessage } from 'react-intl';
 import { Button } from '@folio/stripes/components';
 
 import css from './BulkEditInAppPreviewModal.css';
-
+import { useSearchParams } from '../../../../hooks';
+import { APPROACHES, FILE_EXTENSION, FILE_SEARCH_PARAMS } from '../../../../constants';
+import {
+  QUERY_KEY_DOWNLOAD_ADMINISTRATIVE_PREVIEW_MODAL,
+  QUERY_KEY_DOWNLOAD_MARC_PREVIEW_MODAL,
+  useFileDownload
+} from '../../../../hooks/api';
+import { changeExtension, savePreviewFile } from '../../../../utils/files';
 
 export const BulkEditPreviewModalFooter = ({
-  onDownload,
-  downloadLabel,
-  isCommitBtnDisabled,
-  isDownloadBtnDisabled,
+  bulkOperationId,
+  buttonsDisabled,
   onKeepEditing,
-  onSave,
+  onCommitChanges,
 }) => {
+  const { approach, initialFileName } = useSearchParams();
+
+  const { refetch: downloadCsvPreview } = useFileDownload({
+    queryKey: QUERY_KEY_DOWNLOAD_ADMINISTRATIVE_PREVIEW_MODAL,
+    enabled: false,
+    id: bulkOperationId,
+    fileContentType: FILE_SEARCH_PARAMS.PROPOSED_CHANGES_FILE,
+    onSuccess: (fileData) => {
+      savePreviewFile({
+        bulkOperationId,
+        fileData,
+        initialFileName,
+        extension: FILE_EXTENSION.CSV,
+      });
+    },
+  });
+
+  const { refetch: downloadMarcPreview } = useFileDownload({
+    queryKey: QUERY_KEY_DOWNLOAD_MARC_PREVIEW_MODAL,
+    enabled: false,
+    id: bulkOperationId,
+    fileContentType: FILE_SEARCH_PARAMS.PROPOSED_CHANGES_MARC_FILE,
+    onSuccess: (fileData) => {
+      savePreviewFile({
+        bulkOperationId,
+        fileData,
+        initialFileName: changeExtension(initialFileName, FILE_EXTENSION.MRC),
+        extension: FILE_EXTENSION.MRC,
+      });
+    },
+  });
+
   return (
     <div className={css.previewModalFooter}>
       <Button onClick={onKeepEditing}>
         <FormattedMessage id="ui-bulk-edit.previewModal.keepEditing" />
       </Button>
-      <Button onClick={onDownload} disabled={isDownloadBtnDisabled}>
-        {downloadLabel}
+      <Button onClick={downloadCsvPreview} disabled={buttonsDisabled}>
+        <FormattedMessage id="ui-bulk-edit.previewModal.downloadPreview" />
       </Button>
-      <Button onClick={onSave} buttonStyle="primary" disabled={isCommitBtnDisabled}>
+      {approach === APPROACHES.MARC && (
+        <Button onClick={downloadMarcPreview} disabled={buttonsDisabled}>
+          <FormattedMessage id="ui-bulk-edit.previewModal.downloadPreview.marc" />
+        </Button>
+      )}
+      <Button onClick={onCommitChanges} buttonStyle="primary" disabled={buttonsDisabled}>
         <FormattedMessage id="ui-bulk-edit.previewModal.saveAndClose" />
       </Button>
     </div>
   );
 };
 
 BulkEditPreviewModalFooter.propTypes = {
-  isDownloadBtnDisabled: PropTypes.bool,
-  isCommitBtnDisabled: PropTypes.bool,
-  downloadLabel: PropTypes.node,
+  bulkOperationId: PropTypes.string.isRequired,
+  buttonsDisabled: PropTypes.bool,
   onKeepEditing: PropTypes.func,
-  onDownload: PropTypes.func,
-  onSave: PropTypes.func,
+  onCommitChanges: PropTypes.func,
 };