UIBULKED-568 Populating Are you sure? form

CHANGELOG.md

@@ -9,6 +9,7 @@
 * [UIBULKED-585](https://folio-org.atlassian.net/browse/UUIBULKED-585) Adding missing translation and filters.
 * [UIBULKED-561](https://folio-org.atlassian.net/browse/UUIBULKED-561) Add administrative data accordion to MARC bulk edit form.
 * [UIBULKED-562](https://folio-org.atlassian.net/browse/UIBULKED-562) Include statistical code option on Instances bulk edit forms.
+* [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/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,
 };

src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js

@@ -1,23 +1,26 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import { useIntl } from 'react-intl';
 import uniqueId from 'lodash/uniqueId';
+
 import { BulkEditLayer } from '../BulkEditListResult/BulkEditInAppLayer/BulkEditLayer';
 import { BulkEditMarc } from '../BulkEditListResult/BulkEditMarc/BulkEditMarc';
 import { BulkEditPreviewModal } from '../BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal';
 import { getMarcFieldTemplate, getTransformedField } from '../BulkEditListResult/BulkEditMarc/helpers';
 import { useMarcContentUpdate } from '../../../hooks/api/useMarcContentUpdate';
 import { useConfirmChanges } from '../../../hooks/useConfirmChanges';
-import { QUERY_KEY_DOWNLOAD_MARC_PREVIEW_MODAL, useContentUpdate } from '../../../hooks/api';
-import { savePreviewFile } from '../../../utils/files';
+import { useContentUpdate } from '../../../hooks/api';
 import {
-  getContentUpdatesBody, getMappedContentUpdates,
+  getContentUpdatesBody,
+  getMappedContentUpdates,
   isContentUpdatesFormValid
 } 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';
+
 
 export const BulkEditMarcLayer = ({
   bulkOperationId,
@@ -48,28 +51,20 @@ export const BulkEditMarcLayer = ({
     isPreviewLoading,
     bulkDetails,
     totalRecords,
-    downloadFile,
     confirmChanges,
     closePreviewModal,
-  } = useConfirmChanges({
-    queryDownloadKey: QUERY_KEY_DOWNLOAD_MARC_PREVIEW_MODAL,
-    bulkOperationId,
-    onDownloadSuccess: (fileData, searchParams) => {
-      const { approach, initialFileName } = searchParams;
+  } = useConfirmChanges({ bulkOperationId });
 
-      savePreviewFile({
-        bulkOperationId,
-        fileData,
-        approach,
-        initialFileName,
-      });
-    },
+  const { commitChanges } = useCommitChanges({
+    bulkOperationId,
+    onChangesCommited: () => {
+      closePreviewModal();
+      onMarcLayerClose();
+    }
   });
 
-  const handleChangesCommited = () => {
-    closePreviewModal();
-    onMarcLayerClose();
-  };
+  const hasBothFiles = bulkDetails?.linkToModifiedRecordsCsvFile && bulkDetails?.linkToModifiedRecordsMarcFile;
+  const areMarcAndCsvReady = hasBothFiles || !isPreviewLoading;
 
   const handleConfirm = () => {
     const bulkOperationMarcRules = marcFields
@@ -116,11 +111,16 @@ export const BulkEditMarcLayer = ({
 
       <BulkEditPreviewModal
         isPreviewLoading={isPreviewLoading}
-        bulkDetails={bulkDetails}
         open={isPreviewModalOpened}
-        onDownload={downloadFile}
         onKeepEditing={closePreviewModal}
-        onChangesCommited={handleChangesCommited}
+        modalFooter={
+          <BulkEditPreviewModalFooter
+            bulkOperationId={bulkOperationId}
+            buttonsDisabled={!areMarcAndCsvReady}
+            onCommitChanges={commitChanges}
+            onKeepEditing={closePreviewModal}
+          />
+        }
       />
     </>
   );

src/components/BulkEditPane/BulkEditPane.js

@@ -103,9 +103,7 @@ export const BulkEditPane = () => {
     queryKey: QUERY_KEY_DOWNLOAD_ACTION_MENU,
     enabled: !!fileInfo,
     id: bulkOperationId,
-    fileInfo: {
-      fileContentType: FILE_SEARCH_PARAMS[fileInfo?.param]?.replace('_MARC', ''),
-    },
+    fileContentType: FILE_SEARCH_PARAMS[fileInfo?.param]?.replace('_MARC', ''),
     onSuccess: data => {
       /* istanbul ignore next */
       saveAs(new Blob([data]), fileInfo?.bulkDetails[FILE_TO_LINK[fileInfo?.param]].split('/')[1]);