From 673cc140395f5ec39ac1091e684acd20bd58119c Mon Sep 17 00:00:00 2001 From: vashjs Date: Tue, 14 Jan 2025 22:33:06 +0100 Subject: [PATCH] UIBULKED-597 Commit changes button enabled before preview is populated --- CHANGELOG.md | 1 + .../BulkEditInAppLayer/BulkEditInAppLayer.js | 13 ++++++---- .../BulkEditInAppPreviewModal.test.js | 11 +++++++- .../BulkEditPreviewModal.js | 12 ++++++--- .../BulkEditPreviewModalList.js | 14 +++++------ .../BulkEditMarcLayer/BulkEditMarcLayer.js | 12 ++++++--- src/hooks/useConfirmChanges.js | 17 +++++++++---- src/hooks/useConfirmChanges.test.js | 25 +++++++++++++++---- 8 files changed, 75 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f5885f86..5c2e817d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ * [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 +* [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) diff --git a/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js b/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js index 634fae42..108a44bc 100644 --- a/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js +++ b/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 = ({ Footer, }; @@ -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', diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js index cf0f8791..f050b8f6 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js +++ b/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 ( - {isPreviewLoading ? + {isJobPreparing ? : } @@ -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, }; diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js index ebb59768..0d64d1b6 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js +++ b/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, }; diff --git a/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js b/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js index 40c1e570..323fd849 100644 --- a/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js +++ b/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 = ({ { 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,7 +68,7 @@ export const useConfirmChanges = ({ bulkOperationId }) => { closePreviewModal(); }) .finally(() => { - setIsPreviewLoading(false); + setIsJobPreparing(false); }); }; @@ -70,8 +76,9 @@ export const useConfirmChanges = ({ bulkOperationId }) => { totalRecords, bulkDetails, isPreviewModalOpened, - isPreviewLoading, - setIsPreviewLoading, + isJobPreparing, + isPreviewSettled, + changePreviewSettled, openPreviewModal, closePreviewModal, confirmChanges, diff --git a/src/hooks/useConfirmChanges.test.js b/src/hooks/useConfirmChanges.test.js index 0ea09b0d..126578aa 100644 --- a/src/hooks/useConfirmChanges.test.js +++ b/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); + }); });