UIBULKED-404: Render preview after query executed

CHANGELOG.md

@@ -92,6 +92,7 @@
 * [UIBULKED-351](https://issues.folio.org/browse/UIBULKED-351) Hide Query tab
 * [UIBULKED-276](https://issues.folio.org/browse/UIBULKED-276) Rename "Instance" column for holdings records preview
 * [UIBULKED-352](https://issues.folio.org/browse/UIBULKED-352) Localize numbers displayed in bulk edit
+* [UIBULKED-404](https://issues.folio.org/browse/UIBULKED-404)Render preview after query executed.
 
 
 ## [3.0.5](https://github.com/folio-org/ui-bulk-edit/tree/v3.0.5) (2023-03-22)

src/components/BulkEditList/BulkEditListFilters/BulkEditListFilters.js

@@ -95,7 +95,7 @@
 
   const applyFiltersAdapter = (callBack) => ({ name, values }) => callBack(name, values);
 
   const adaptedApplyFilters = useCallback(
     applyFiltersAdapter(applyFilters),
     [applyFilters],
   );
@@ -117,6 +117,7 @@
     testQueryDataSource,
     getParamsSource,
     cancelQueryDataSource,
+    runQueryDataSource
   } = useQueryPlugin(recordTypeId);
 
   const handleChange = (value, field) => setFilters(prev => ({
@@ -185,7 +186,7 @@
     setVisibleColumns(null);
     setIsFileUploaded(false);
     setInAppCommitted(false);
   }, [location.search]);
 
   const uploadFileFlow = async (fileToUpload) => {
     try {
@@ -228,7 +229,7 @@
     const messagePrefix = recordIdentifier ? `.${recordIdentifier}` : '';
 
     return <FormattedMessage id={`ui-bulk-edit.uploaderSubTitle${TRANSLATION_SUFFIX[capabilities]}${messagePrefix}`} />;
   }, [recordIdentifier]);
 
   useEffect(() => {
     if (isFileUploaded || !recordIdentifier || initialFileName) {
@@ -236,7 +237,7 @@
     } else {
       setIsDropZoneDisabled(false);
     }
   }, [isFileUploaded, recordIdentifier]);
 
   useEffect(() => {
     const identifier = search.get('identifier');
@@ -248,8 +249,15 @@
     if (initialCapabilities) {
       handleChange(initialCapabilities, 'capabilities');
     }
   }, [location.search]);
 
+  const onQueryRunSuccess = ({ id }) => {
+    history.replace({
+      pathname: `/bulk-edit/${id}/progress`,
+      search: buildSearch({}, location.search),
+    });
+  };
+
   const renderCapabilities = () => (
     <Capabilities
       capabilities={capabilities}
@@ -333,6 +341,8 @@
             getParamsSource={getParamsSource}
             queryDetailsDataSource={queryDetailsDataSource}
             onQueryRunFail={() => {}}
+            onQueryRunSuccess={onQueryRunSuccess}
+            runQueryDataSource={runQueryDataSource}
             cancelQueryDataSource={cancelQueryDataSource}
           />
         </>

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

@@ -6,6 +6,7 @@ import {
 } from '@folio/stripes/components';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
+import React from 'react';
 import css from './Preview.css';
 import { PreviewAccordion } from './PreviewAccordion';
 import { ErrorsAccordion } from './ErrorsAccordion';
@@ -15,15 +16,21 @@ import {
   useRecordsPreview
 } from '../../../../hooks/api';
 
-import { EDITING_STEPS, PAGINATION_CONFIG } from '../../../../constants';
+import {
+  CRITERIA,
+  EDITING_STEPS,
+  PAGINATION_CONFIG
+} from '../../../../constants';
 import { usePagination } from '../../../../hooks/usePagination';
 import { useBulkOperationStats } from '../../../../hooks/useBulkOperationStats';
+import { NoResultsMessage } from '../NoResultsMessage/NoResultsMessage';
 
 export const Preview = ({ id, title, isInitial, bulkDetails }) => {
   const location = useLocation();
   const search = new URLSearchParams(location.search);
   const step = search.get('step');
   const capabilities = search.get('capabilities');
+  const criteria = search.get('criteria');
 
   const totalRecords = step === EDITING_STEPS.COMMIT ? bulkDetails?.processedNumOfRecords : bulkDetails?.matchedNumOfRecords;
 
@@ -51,6 +58,9 @@ export const Preview = ({ id, title, isInitial, bulkDetails }) => {
 
   const errors = data?.errors || [];
 
+  if (!((bulkDetails.fqlQuery && criteria === CRITERIA.QUERY) || (criteria !== CRITERIA.QUERY && !bulkDetails.fqlQuery))) {
+    return <NoResultsMessage />;
+  }
   return (
     <AccordionStatus>
       <div className={css.previewContainer}>
@@ -95,7 +105,6 @@ export const Preview = ({ id, title, isInitial, bulkDetails }) => {
             />
           )}
         </div>
-
       </div>
     </AccordionStatus>
   );
@@ -112,5 +121,6 @@ Preview.propTypes = {
     processedNumOfRecords: PropTypes.number,
     matchedNumOfErrors: PropTypes.number,
     committedNumOfErrors: PropTypes.number,
+    fqlQuery: PropTypes.string
   }),
 };

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

@@ -1,7 +1,7 @@
 import { MemoryRouter } from 'react-router';
 import { QueryClientProvider } from 'react-query';
 
-import { render, screen } from '@testing-library/react';
+import { logDOM, render, screen } from '@testing-library/react';
 
 import { useOkapiKy } from '@folio/stripes/core';
 import { runAxeTest } from '@folio/stripes-testing';
@@ -12,6 +12,7 @@ import { queryClient } from '../../../../../test/jest/utils/queryClient';
 
 import { RootContext } from '../../../../context/RootContext';
 import { Preview } from './Preview';
+import { CRITERIA } from '../../../../constants';
 
 jest.mock('./PreviewAccordion', () => ({
   PreviewAccordion: () => 'PreviewAccordion',
@@ -27,9 +28,9 @@ const defaultProps = {
   id: bulkOperation.id,
 };
 
-const renderPreview = (props = defaultProps) => {
+const renderPreview = (props = defaultProps, criteria = 'query') => {
   render(
-    <MemoryRouter initialEntries={['/bulk-edit/1?queryText=patronGroup%3D%3D"1"']}>
+    <MemoryRouter initialEntries={[`/bulk-edit/1?queryText=patronGroup%3D%3D"1"&criteria=${criteria}`]}>
       <QueryClientProvider client={queryClient}>
         <RootContext.Provider value={{ setCountOfRecords: setCountOfRecordsMock }}>
           <Preview {...props} />
@@ -87,4 +88,17 @@ describe('Preview Query', () => {
       rootNode: document.body,
     });
   });
+  it('should render with no axe errors', async () => {
+    renderPreview();
+
+    await runAxeTest({
+      rootNode: document.body,
+    });
+  });
+
+  it('should render no message', async () => {
+    renderPreview(defaultProps, CRITERIA.IDENTIFIER);
+
+    logDOM();
+  });
 });

src/components/BulkEditList/BulkEditListResult/PreviewContainer/PreviewContainer.js

@@ -1,11 +1,20 @@
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { useLocation, useParams } from 'react-router';
+import {
+  useLocation,
+  useParams
+} from 'react-router';
 
-import { Layout, Loading } from '@folio/stripes/components';
+import {
+  Layout,
+  Loading
+} from '@folio/stripes/components';
 
 import { useBulkOperationDetails } from '../../../../hooks/api';
-import { CRITERIA, EDITING_STEPS } from '../../../../constants';
+import {
+  CRITERIA,
+  EDITING_STEPS
+} from '../../../../constants';
 import { Preview } from '../Preview/Preview';
 
 import { NoResultsMessage } from '../NoResultsMessage/NoResultsMessage';
@@ -18,21 +27,20 @@ const PreviewContainer = () => {
   const step = search.get('step');
   const fileUploadedName = search.get('fileName');
   const capabilities = search.get('capabilities')?.toLocaleLowerCase();
-  const queryText = search.get('queryText');
   const criteria = search.get('criteria');
 
   const { id } = useParams();
   const { bulkDetails, isLoading } = useBulkOperationDetails({ id, additionalQueryKeys: [step] });
 
   const title = useMemo(() => {
-    if (queryText) return intl.formatMessage({ id: 'ui-bulk-edit.preview.query.title' }, { queryText });
+    if (bulkDetails?.fqlQuery) return intl.formatMessage({ id: 'ui-bulk-edit.preview.query.title' }, { queryText: bulkDetails.fqlQuery });
 
     return intl.formatMessage({ id: 'ui-bulk-edit.preview.file.title' }, { fileUploadedName });
-  }, [queryText, fileUploadedName]);
+  }, [bulkDetails?.fqlQuery, fileUploadedName]);
 
   const isInitial = step === EDITING_STEPS.UPLOAD;
 
-  if (criteria !== CRITERIA.IDENTIFIER) {
+  if (criteria === CRITERIA.LOGS) {
     return <NoResultsMessage />;
   } else if (isLoading) {
     return (

src/hooks/api/useQueryPlugin.js

@@ -38,11 +38,20 @@ export const useQueryPlugin = (recordType) => {
     return ky.delete(`query/${queryId}`);
   };
 
+  const runQueryDataSource = async ({ fqlQuery }) => {
+    const response = ky.post('bulk-operations/query', { json: {
+      entityTypeId:recordType,
+      fqlQuery: JSON.stringify(fqlQuery)
+    } });
+    return response.json();
+  };
+
   return {
     entityTypeDataSource,
     queryDetailsDataSource,
     testQueryDataSource,
     getParamsSource,
     cancelQueryDataSource,
+    runQueryDataSource,
   };
 };

test/jest/__mock__/fakeData.js

@@ -11,6 +11,7 @@ export const bulkEditLogsData = Array(50).fill(null).map((_, index) => [
     processedNumOfRecords: 55,
     committedNumOfRecords: 20,
     editing: 'In app',
+    fqlQuery: 'test'
   },
   {
     id: (index + 1).toString(),