UIBULKED-246 Displaying and paginating through retrieved records

CHANGELOG.md

@@ -39,6 +39,7 @@
 * [UIBULKED-399](https://issues.folio.org/browse/UIBULKED-399) Update label verbiage on the Identifier tab.
 * [UIBULKED-407](https://issues.folio.org/browse/UIBULKED-407) When selecting action "Find" in Bulk Edit, the last dropdown on the row moves to the right.
 * [UIBULKED-403](https://issues.folio.org/browse/UIBULKED-403) Integrate query-plugin with bulk-edit API.
+* [UIBULKED-246](https://issues.folio.org/browse/UIBULKED-246) Enabling Build query button on Query tab.
 
 ## [4.0.0](https://github.com/folio-org/ui-bulk-edit/tree/v4.0.0) (2023-10-12)
 

src/components/BulkEditList/BulkEditList.js

@@ -63,7 +63,7 @@
         logsTab: logsFilters,
       }));
     }
   }, [history.location]);
 
   const initialFiltersState = {
     criteria: CRITERIA.IDENTIFIER,
@@ -143,7 +143,7 @@
         />
       );
     } else return <FormattedMessage id="ui-bulk-edit.meta.title" />;
   }, [confirmedFileName, history.location.search]);
 
   const changedPaneSubTitle = useMemo(() => (
     step === EDITING_STEPS.UPLOAD ?
@@ -222,13 +222,15 @@
           />
         </BulkEditInAppLayer>
 
-        <BulkEditInAppPreviewModal
-          bulkOperationId={bulkOperationId}
-          open={isPreviewModalOpened}
-          contentUpdates={contentUpdates}
-          onKeepEditing={handlePreviewModalClose}
-          onChangesCommited={handleChangesCommited}
-        />
+        {isPreviewModalOpened && (
+          <BulkEditInAppPreviewModal
+            bulkOperationId={bulkOperationId}
+            open={isPreviewModalOpened}
+            contentUpdates={contentUpdates}
+            onKeepEditing={handlePreviewModalClose}
+            onChangesCommited={handleChangesCommited}
+          />
+        )}
       </Paneset>
 
       <BulkEditManualUploadModal

src/components/BulkEditList/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditInAppPreviewModal.js

@@ -7,14 +7,15 @@
 
 import { MessageBanner, Modal, MultiColumnList } from '@folio/stripes/components';
 import { Preloader } from '@folio/stripes-data-transfer-components';
-import { useShowCallout } from '@folio/stripes-acq-components';
+import { PrevNextPagination, useShowCallout } from '@folio/stripes-acq-components';
 
 import { RootContext } from '../../../../context/RootContext';
 import {
   APPROACHES,
   EDITING_STEPS,
   FILE_KEYS,
   FILE_SEARCH_PARAMS,
+  PAGINATION_CONFIG,
   getFormattedFilePrefixDate,
 } from '../../../../constants';
 import {
@@ -25,6 +26,7 @@
   useFileDownload,
   QUERY_KEY_DOWNLOAD_IN_APP,
   IN_APP_PREVIEW_KEY,
+  BULK_OPERATION_DETAILS_KEY,
 } from '../../../../hooks/api';
 
 import { getContentUpdatesBody } from '../BulkEditInApp/ContentUpdatesForm/helpers';
@@ -33,6 +35,7 @@
 import css from './BulkEditInAppPreviewModal.css';
 import { getVisibleColumnsKeys } from '../../../../utils/helpers';
 import { PREVIEW_COLUMN_WIDTHS } from '../../../PermissionsModal/constants/lists';
+import { usePagination } from '../../../../hooks/usePagination';
 
 const BulkEditInAppPreviewModal = ({
   open,
@@ -58,25 +61,34 @@
 
   const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId });
   const { contentUpdate } = useContentUpdate({ id: bulkOperationId });
-  const { bulkOperationStart } = useBulkOperationStart();
+  const { bulkOperationStart, startData } = useBulkOperationStart();
+
+  const totalRecords = bulkDetails?.totalNumOfRecords;
+
+  const {
+    pagination,
+    changePage,
+  } = usePagination(PAGINATION_CONFIG);
 
   const [isPreviewLoading, setIsLoadingPreview] = useState(false);
+
   const {
     contentData,
     columnMapping,
-    refetch: fetchPreview,
+    isFetching
   } = useRecordsPreview({
     key: IN_APP_PREVIEW_KEY,
     id: bulkOperationId,
     step: EDITING_STEPS.EDIT,
     capabilities,
     queryOptions: {
-      enabled: false,
+      enabled: !!startData,
       onError: () => {
         swwCallout();
         onKeepEditing();
       },
     },
+    ...pagination,
   });
 
   const { refetch } = useFileDownload({
@@ -86,15 +98,15 @@
     fileInfo: {
       fileContentType: FILE_SEARCH_PARAMS.PROPOSED_CHANGES_FILE,
     },
-    onSuccess: data => {
+    onSuccess: fileData => {
       const searchParams = new URLSearchParams(history.location.search);
       let fileName = searchParams.get('fileName');
 
       if (!fileName) {
         fileName = `${capabilities}-${searchParams.get('criteria')}.csv`;
       }
 
-      saveAs(new Blob([data]), `${getFormattedFilePrefixDate()}-Updates-Preview-${fileName}`);
+      saveAs(new Blob([fileData]), `${getFormattedFilePrefixDate()}-Updates-Preview-${fileName}`);
     },
   });
 
@@ -122,11 +134,11 @@
   };
 
   useEffect(() => {
-    if (contentUpdates && open) {
+    if (contentUpdates && open && totalRecords) {
       const contentUpdatesBody = getContentUpdatesBody({
         bulkOperationId,
         contentUpdates,
-        totalRecords: bulkDetails.totalNumOfRecords,
+        totalRecords,
       });
 
       setIsLoadingPreview(true);
@@ -137,8 +149,10 @@
           approach: APPROACHES.IN_APP,
           step: EDITING_STEPS.EDIT,
         }))
-        .then(() => fetchPreview())
-        .then(() => queryClient.invalidateQueries('bulkOperationDetails'))
+        .then(() => {
+          queryClient.invalidateQueries(BULK_OPERATION_DETAILS_KEY);
+          queryClient.invalidateQueries(IN_APP_PREVIEW_KEY);
+        })
         .catch(() => {
           swwCallout();
           onKeepEditing();
@@ -147,7 +161,7 @@
           setIsLoadingPreview(false);
         });
     }
-  }, [contentUpdates, open]);
+  }, [contentUpdates, open, totalRecords]);
 
   return (
     <Modal
@@ -182,7 +196,17 @@
             maxHeight={300}
             columnIdPrefix="in-app"
             columnWidths={PREVIEW_COLUMN_WIDTHS}
+            loading={isFetching}
           />
+
+          {contentData.length > 0 && (
+            <PrevNextPagination
+              {...pagination}
+              totalCount={bulkDetails?.matchedNumOfRecords}
+              disabled={false}
+              onChange={changePage}
+            />
+          )}
         </>
       ) : <Preloader />}
     </Modal>

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

@@ -17,12 +17,14 @@ import {
 } from '../../../../constants';
 import {
   useBulkOperationDetails,
+  useRecordsPreview,
 } from '../../../../hooks/api';
 import BulkEditInAppPreviewModal from './BulkEditInAppPreviewModal';
 
 jest.mock('../../../../hooks/api', () => ({
   ...jest.requireActual('../../../../hooks/api'),
   useBulkOperationDetails: jest.fn(),
+  useRecordsPreview: jest.fn(),
 }));
 
 const bulkOperation = bulkEditLogsData[0];
@@ -63,6 +65,15 @@ describe('BulkEditInAppPreviewModal', () => {
       bulkDetails: bulkOperation,
     });
 
+    useRecordsPreview.mockClear().mockReturnValue({
+      isLoading: false,
+      refetch: jest.fn(),
+      isFetching: false,
+      contentData: [],
+      columnMapping: {},
+      columns: [],
+    });
+
     useOkapiKy
       .mockClear()
       .mockReturnValue({

src/components/BulkEditList/BulkEditListResult/Preview/ErrorsAccordion/ErrorsAccordion.js

@@ -57,7 +57,7 @@ const ErrorsAccordion = ({
         }}
         label={<FormattedMessage id="ui-bulk-edit.list.errors.title" />}
       >
-        <div className={css.errorAccordionInner}>
+        <div className={css.errorAccordionOuter}>
           <Headline size="medium" margin="small">
             {headLine}
           </Headline>

src/components/BulkEditList/BulkEditListResult/Preview/Preview.css

@@ -5,25 +5,32 @@
 }
 
 .previewAccordion,
+.previewAccordionList,
 .errorAccordionList {
     flex-grow: 1;
 }
 
-.previewAccordion:first-child:has([aria-expanded="false"]) {
+.previewAccordion:has([aria-expanded="false"]) {
     flex-grow: 0;
 }
 
 .previewAccordion > * {
     height: 100%;
 }
 
-.previewAccordionInner,
-.errorAccordionInner {
+.previewAccordionInner {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.previewAccordionOuter,
+.errorAccordionOuter {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }
 
-.errorAccordionInner {
+.errorAccordionOuter {
     height: 100%;
 }

src/components/BulkEditList/BulkEditListResult/Preview/Preview.js

@@ -5,7 +5,6 @@ import {
   MessageBanner,
 } from '@folio/stripes/components';
 import PropTypes from 'prop-types';
-import { useContext, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import css from './Preview.css';
 import { PreviewAccordion } from './PreviewAccordion';
@@ -15,45 +14,40 @@ import {
   useErrorsPreview,
   useRecordsPreview
 } from '../../../../hooks/api';
-import { RootContext } from '../../../../context/RootContext';
 
-import { EDITING_STEPS } from '../../../../constants';
+import { PAGINATION_CONFIG } from '../../../../constants';
+import { usePagination } from '../../../../hooks/usePagination';
+import { useBulkOperationStats } from '../../../../hooks/useBulkOperationStats';
 
 export const Preview = ({ id, title, isInitial, bulkDetails }) => {
   const location = useLocation();
-  const { countOfRecords, setCountOfRecords, visibleColumns } = useContext(RootContext);
-  const [countOfErrors, setCountOfErrors] = useState(0);
-  const [totalCount, setTotalCount] = useState(0);
-
   const search = new URLSearchParams(location.search);
   const step = search.get('step');
   const capabilities = search.get('capabilities');
 
-  const { contentData, columns, columnMapping } = useRecordsPreview({
+  const {
+    countOfRecords,
+    countOfErrors,
+    totalCount,
+    visibleColumns,
+  } = useBulkOperationStats({ bulkDetails, step });
+
+  const {
+    pagination,
+    changePage,
+  } = usePagination(PAGINATION_CONFIG);
+
+  const { contentData, columns, columnMapping, isFetching } = useRecordsPreview({
     key: RECORDS_PREVIEW_KEY,
     id,
     step,
-    capabilities
+    capabilities,
+    ...pagination,
   });
-  const { data } = useErrorsPreview({ id });
-  const errors = data?.errors || [];
 
-  useEffect(() => {
-    const isInitialPreview = step === EDITING_STEPS.UPLOAD;
-
-    const countRecords = isInitialPreview
-      ? bulkDetails.matchedNumOfRecords
-      : bulkDetails.committedNumOfRecords;
-
-    const countErrors = isInitialPreview
-      ? bulkDetails.matchedNumOfErrors
-      : bulkDetails.committedNumOfErrors;
-
-    setCountOfErrors(countErrors);
-    setCountOfRecords(countRecords);
-    setTotalCount(isInitialPreview ? bulkDetails.totalNumOfRecords : bulkDetails.matchedNumOfRecords);
-  }, [bulkDetails, step]);
+  const { data } = useErrorsPreview({ id });
 
+  const errors = data?.errors || [];
 
   return (
     <AccordionStatus>
@@ -73,15 +67,19 @@ export const Preview = ({ id, title, isInitial, bulkDetails }) => {
           {title}
         </Headline>
         )}
-        <div className={css.previewAccordionInner}>
+        <div className={css.previewAccordionOuter}>
           {Boolean(contentData?.length) && (
             <PreviewAccordion
+              totalRecords={bulkDetails?.matchedNumOfRecords}
               isInitial={isInitial}
               columns={columns}
               contentData={contentData}
               columnMapping={columnMapping}
               visibleColumns={visibleColumns}
               step={step}
+              onChangePage={changePage}
+              pagination={pagination}
+              isFetching={isFetching}
             />
           )}