@eeacms/volto-clms-theme 1.1.44 → 1.1.46

package/CHANGELOG.md

@@ -4,11 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.1.44](https://github.com/eea/volto-clms-theme/compare/1.1.43...1.1.44) - 19 September 2023
+### [1.1.46](https://github.com/eea/volto-clms-theme/compare/1.1.45...1.1.46) - 20 September 2023
+
+#### :bug: Bug Fixes
+
+- fix: search block facets [Ion Lizarazu - [`61f8a64`](https://github.com/eea/volto-clms-theme/commit/61f8a640c4fcec06a08245e5ed74caa8b2011922)]
+
+### [1.1.45](https://github.com/eea/volto-clms-theme/compare/1.1.44...1.1.45) - 20 September 2023
 
 #### :bug: Bug Fixes
 
-- fix: useCase card image label z-index [Ion Lizarazu - [`6e78c6d`](https://github.com/eea/volto-clms-theme/commit/6e78c6d1d7559c9e21dd64e97727512c67f3c334)]
+- fix: RelatedNews test params [Ion Lizarazu - [`2980a78`](https://github.com/eea/volto-clms-theme/commit/2980a78eb94c3295bbf38f40e27bff4188c6cac2)]
+- fix: sonarqube [Ion Lizarazu - [`9e84298`](https://github.com/eea/volto-clms-theme/commit/9e84298ca5128e33c8d54adab719965a49515042)]
+
+#### :hammer_and_wrench: Others
+
+- remove console statement [Ion Lizarazu - [`4e67ca2`](https://github.com/eea/volto-clms-theme/commit/4e67ca27a605c944c37674d30d1fb3adc73cb3df)]
+- jest tests [Ion Lizarazu - [`29f9d35`](https://github.com/eea/volto-clms-theme/commit/29f9d351e6b9ebdcb4d81a2d654a0782cd8af855)]
+- unused code removed and add tests [Ion Lizarazu - [`51f6856`](https://github.com/eea/volto-clms-theme/commit/51f685623c2148138ee3780e07b369a9a8b2c09a)]
+- add jest test [Ion Lizarazu - [`159792c`](https://github.com/eea/volto-clms-theme/commit/159792c28b3d8bc903111708b1664704ec0fed5e)]
+### [1.1.44](https://github.com/eea/volto-clms-theme/compare/1.1.43...1.1.44) - 19 September 2023
 
 ### [1.1.43](https://github.com/eea/volto-clms-theme/compare/1.1.42...1.1.43) - 19 September 2023
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.44",
+  "version": "1.1.46",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -141,7 +141,7 @@ const DataSetInfoContent = (props) => {
                 <Accordion.Title
                   as={'h2'}
                   onClick={() => handleClick({ index: 99 })}
-                  active={activeIndex === 99}
+                  active={activeIndex.includes(99)}
                   index={99}
                   className={'accordion-title align-arrow-right'}
                 >

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.test.jsx

@@ -19,41 +19,31 @@ describe('DataSetInfoContent', () => {
         messages: {},
       },
       search: {
-        subrequest: {
-          '123': { items: [] },
+        subrequests: {
+          datasetinfocontentid: { items: [] },
         },
       },
     });
 
-    const data = {
-      dataResourceAbstract: {
-        title: 'example title',
-        description: 'example description',
-        tooltip: 'example tooltip',
-        data: 'Resource Abstract example',
-      },
-      dataSources: {
-        title: 'example title',
-        description: 'example description',
-        tooltip: 'example tooltip',
-        data: 'Source data',
-      },
-      dataResourceLocator: 'Resource locator',
-      dataResourceTitle: 'example dataResourceTitle',
+    const props = {
+      UID: 'gfdjgf8edgtrh789',
+      id: 'datasetinfocontentid',
       validation: {
         title: 'example title',
         description: 'example description',
         tooltip: 'example tooltip',
         data: 'Validation',
       },
+      geonetwork_identifiers: {
+        items: [],
+      },
+      data: { right_arrows: true },
     };
     const datasetInfo = renderer
       .create(
         <Provider store={store}>
           <MemoryRouter>
-            <DataSetInfoContent props={data}>
-              <p>Dataset info view test</p>
-            </DataSetInfoContent>
+            <DataSetInfoContent {...props} />
           </MemoryRouter>
         </Provider>,
       )

package/src/components/CLMSDatasetDetailView/MetadataPaginatedListing.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { MetadataPaginatedListing } from './MetadataPaginatedListing';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+describe('MetadataPaginatedListing', () => {
+  it('Check MetadataPaginatedListing view', () => {
+    const mockStore = configureStore();
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequests: {
+          datasetinfocontentid: { items: [] },
+        },
+      },
+    });
+
+    const props = {
+      id: 'metadata-paginated-listing',
+      geonetwork_identifiers_items: [
+        { id: 'geo-eea-id', title: 'Geo title', type: 'EEA' },
+        { id: 'geo-vito-id', title: 'Geo title 2', type: 'VITO' },
+      ],
+    };
+    const datasetInfo = renderer
+      .create(
+        <Provider store={store}>
+          <MemoryRouter>
+            <MetadataPaginatedListing {...props} />
+          </MemoryRouter>
+        </Provider>,
+      )
+      .toJSON();
+    expect(datasetInfo).toBeDefined();
+  });
+});

package/src/components/CLMSDatasetDetailView/{RelatedNews.jsx → RelatedItems.jsx}

@@ -6,21 +6,27 @@ import React from 'react';
 import { searchContent } from '@plone/volto/actions';
 import { useLocation } from 'react-router-dom';
 
-const RelatedNews = (props) => {
+const RelatedItems = (props) => {
   const dispatch = useDispatch();
-  const { UID, id } = props;
+  const { UID, id, type } = props;
+  let hash = '';
+  if (type === 'News Item') {
+    hash = '#News';
+  } else if (type === 'UseCase') {
+    hash = '#Use-cases';
+  }
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   let libraries = searchSubrequests?.[id]?.items || [];
   let librariesPending = searchSubrequests?.[id]?.loading;
   const location = useLocation();
   React.useEffect(() => {
-    if (location.hash === '#News' && UID) {
+    if (location.hash === hash && UID && hash) {
       dispatch(
         searchContent(
           '',
           {
             fullobjects: 1,
-            portal_type: 'News Item',
+            portal_type: type,
             path: '/',
             associated_datasets: UID,
           },
@@ -28,6 +34,7 @@ const RelatedNews = (props) => {
         ),
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, UID, dispatch, location]);
 
   return (
@@ -48,4 +55,4 @@ const RelatedNews = (props) => {
   );
 };
 
-export default RelatedNews;
+export default RelatedItems;

package/src/components/CLMSDatasetDetailView/RelatedItems.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import RelatedItems from './RelatedItems';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import { card } from '../CclCard/CclCard.test';
+describe('RelatedItems', () => {
+  it('Check RelatedItems News view', () => {
+    const mockStore = configureStore();
+
+    const store = mockStore({
+      userSession: {
+        token:
+          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequests: {
+          'related-news': { items: [card] },
+        },
+      },
+    });
+
+    const props = {
+      id: 'related-news',
+      UID: 'uid3894032nhhlgtrjekl',
+      type: 'News Item',
+    };
+
+    const datasetInfo = renderer
+      .create(
+        <Provider store={store}>
+          <MemoryRouter>
+            <RelatedItems {...props} />
+          </MemoryRouter>
+        </Provider>,
+      )
+      .toJSON();
+    expect(datasetInfo).toBeDefined();
+  });
+
+  it('Check RelatedItems UseCase view', () => {
+    const mockStore = configureStore();
+
+    const store = mockStore({
+      userSession: {
+        token:
+          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      search: {
+        subrequests: {
+          'related-news': { items: [card] },
+        },
+      },
+    });
+
+    const props = {
+      id: 'related-news',
+      UID: 'uid3894032nhhlgtrjekl',
+      type: 'UseCase',
+    };
+
+    const datasetInfo = renderer
+      .create(
+        <Provider store={store}>
+          <MemoryRouter>
+            <RelatedItems {...props} />
+          </MemoryRouter>
+        </Provider>,
+      )
+      .toJSON();
+    expect(datasetInfo).toBeDefined();
+  });
+});

package/src/components/CLMSDatasetDetailView/index.js

@@ -1,4 +1,3 @@
 export DataSetInfoContent from './DataSetInfoContent';
 export DownloadDataSetContent from './DownloadDataSetContent';
-export RelatedNews from './RelatedNews';
-export RelatedUseCases from './RelatedUseCases';
+export RelatedItems from './RelatedItems';

package/src/components/CclCard/CclCard.test.jsx

@@ -6,6 +6,39 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
+export const card = {
+  title: 'title example',
+  description: 'description example',
+  '@type': 'News Item',
+  start: 'Wed May 19 2021 12:49:04 GMT+0200 (hora de verano de Europa central)',
+  end: 'Wed May 26 2024 12:49:04 GMT+0200 (hora de verano de Europa central)',
+  whole_day: false,
+  image: {
+    src:
+      'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
+    scales: {
+      mini: {
+        download:
+          'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
+      },
+      preview: {
+        download:
+          'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
+      },
+    },
+    download: 'false',
+    alt: 'Placeholder',
+  },
+  taxonomy_technical_library_categorization: ['1', '2', '3'],
+  file: {
+    'content-type': 'text/html',
+    src:
+      'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
+    download: 'true',
+  },
+  effective:
+    'Wed May 19 2021 12:49:04 GMT+0200 (hora de verano de Europa central)',
+};
 
 describe('CclCard', () => {
   const store = mockStore({
@@ -31,40 +64,7 @@ describe('CclCard', () => {
     },
     taxonomy_technical_library_categorization: ['1', '2', '3'],
   });
-  const card = {
-    title: 'title example',
-    description: 'description example',
-    '@type': 'News Item',
-    start:
-      'Wed May 19 2021 12:49:04 GMT+0200 (hora de verano de Europa central)',
-    end: 'Wed May 26 2024 12:49:04 GMT+0200 (hora de verano de Europa central)',
-    whole_day: false,
-    image: {
-      src:
-        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-      scales: {
-        mini: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-        preview: {
-          download:
-            'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-        },
-      },
-      download: 'false',
-      alt: 'Placeholder',
-    },
-    taxonomy_technical_library_categorization: ['1', '2', '3'],
-    file: {
-      'content-type': 'text/html',
-      src:
-        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg',
-      download: 'true',
-    },
-    effective:
-      'Wed May 19 2021 12:49:04 GMT+0200 (hora de verano de Europa central)',
-  };
+
   it('Check doc card', () => {
     const cardtest = renderer
       .create(

package/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -0,0 +1,414 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'query-string';
+import { useLocation, useHistory } from 'react-router-dom';
+
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
+import { usePrevious } from '@plone/volto/helpers';
+import { isEqual } from 'lodash';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const SEARCH_ENDPOINT_FIELDS = [
+  'SearchableText',
+  'b_size',
+  'limit',
+  'sort_on',
+  'sort_order',
+];
+
+const PAQO = 'plone.app.querystring.operation';
+
+/**
+ * Based on URL state, gets an initial internal state for the search
+ *
+ * @function getInitialState
+ *
+ */
+function getInitialState(data, facets, urlSearchText, id) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const facetSettings = data?.facets || [];
+
+  return {
+    query: [
+      ...(data.query?.query || []),
+      ...(facetSettings || [])
+        .map((facet) => {
+          if (!facet?.field) return null;
+
+          const { valueToQuery } = resolveExtension(
+            'type',
+            facetWidgetTypes,
+            facet,
+          );
+
+          const name = facet.field.value;
+          const value = facets[name];
+
+          return valueToQuery({ value, facet });
+        })
+        .filter((f) => !!f),
+      ...(urlSearchText
+        ? [
+            {
+              i: 'SearchableText',
+              o: 'plone.app.querystring.operation.string.contains',
+              v: urlSearchText,
+            },
+          ]
+        : []),
+    ],
+    sort_on: data.query?.sort_on,
+    sort_order: data.query?.sort_order,
+    b_size: data.query?.b_size,
+    limit: data.query?.limit,
+    block: id,
+  };
+}
+
+/**
+ * "Normalizes" the search state to something that's serializable
+ * (for querying) and used to compute data for the ListingBody
+ *
+ * @function normalizeState
+ *
+ */
+function normalizeState({
+  query, // base query
+  facets, // facet values
+  id, // block id
+  searchText, // SearchableText
+  sortOn,
+  sortOrder,
+  facetSettings, // data.facets extracted from block data
+}) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+
+  const params = {
+    query: [
+      ...(query.query || []),
+      ...(facetSettings || []).map((facet) => {
+        if (!facet?.field) return null;
+
+        const { valueToQuery } = resolveExtension(
+          'type',
+          facetWidgetTypes,
+          facet,
+        );
+
+        const name = facet.field.value;
+        const value = facets[name];
+
+        return valueToQuery({ value, facet });
+      }),
+    ].filter((o) => !!o),
+    sort_on: sortOn || query.sort_on,
+    sort_order: sortOrder || query.sort_order,
+    b_size: query.b_size,
+    limit: query.limit,
+    block: id,
+  };
+
+  // Note Ideally the searchtext functionality should be restructured as being just
+  // another facet. But right now it's the same. This means that if a searchText
+  // is provided, it will override the SearchableText facet.
+  // If there is no searchText, the SearchableText in the query remains in effect.
+  // TODO eventually the searchText should be a distinct facet from SearchableText, and
+  // the two conditions could be combined, in comparison to the current state, when
+  // one overrides the other.
+  if (searchText) {
+    params.query = params.query.reduce(
+      // Remove SearchableText from query
+      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+      [],
+    );
+    params.query.push({
+      i: 'SearchableText',
+      o: 'plone.app.querystring.operation.string.contains',
+      v: searchText,
+    });
+  }
+
+  return params;
+}
+
+const getSearchFields = (searchData) => {
+  return Object.assign(
+    {},
+    ...SEARCH_ENDPOINT_FIELDS.map((k) => {
+      return searchData[k] ? { [k]: searchData[k] } : {};
+    }),
+    searchData.query ? { query: serializeQuery(searchData['query']) } : {},
+  );
+};
+
+/**
+ * A hook that will mirror the search block state to a hash location
+ */
+const useHashState = () => {
+  const location = useLocation();
+  const history = useHistory();
+
+  /**
+   * Required to maintain parameter compatibility.
+    With this we will maintain support for receiving hash (#) and search (?) type parameters.
+  */
+  const oldState = React.useMemo(() => {
+    return {
+      ...qs.parse(location.search),
+      ...qs.parse(location.hash),
+    };
+  }, [location.hash, location.search]);
+
+  // This creates a shallow copy. Why is this needed?
+  const current = Object.assign(
+    {},
+    ...Array.from(Object.keys(oldState)).map((k) => ({ [k]: oldState[k] })),
+  );
+
+  const setSearchData = React.useCallback(
+    (searchData) => {
+      const newParams = qs.parse(location.search);
+
+      let changed = false;
+
+      Object.keys(searchData)
+        .sort()
+        .forEach((k) => {
+          if (searchData[k]) {
+            newParams[k] = searchData[k];
+            if (oldState[k] !== searchData[k]) {
+              changed = true;
+            }
+          }
+        });
+
+      if (changed) {
+        history.push({
+          search: qs.stringify(newParams),
+        });
+      }
+    },
+    [history, oldState, location.search],
+  );
+
+  return [current, setSearchData];
+};
+
+/**
+ * A hook to make it possible to switch disable mirroring the search block
+ * state to the window location. When using the internal state we "start from
+ * scratch", as it's intended to be used in the edit page.
+ */
+const useSearchBlockState = (uniqueId, isEditMode) => {
+  const [hashState, setHashState] = useHashState();
+  const [internalState, setInternalState] = React.useState({});
+
+  return isEditMode
+    ? [internalState, setInternalState]
+    : [hashState, setHashState];
+};
+
+// Simple compress/decompress the state in URL by replacing the lengthy string
+const deserializeQuery = (q) => {
+  return JSON.parse(q)?.map((kvp) => ({
+    ...kvp,
+    o: kvp.o.replace(/^paqo/, PAQO),
+  }));
+};
+const serializeQuery = (q) => {
+  return JSON.stringify(
+    q?.map((kvp) => ({ ...kvp, o: kvp.o.replace(PAQO, 'paqo') })),
+  );
+};
+
+const withSearch = (options) => (WrappedComponent) => {
+  const { inputDelay = 1000 } = options || {};
+
+  function WithSearch(props) {
+    const { data, id, editable = false } = props;
+
+    const [locationSearchData, setLocationSearchData] = useSearchBlockState(
+      id,
+      editable,
+    );
+
+    const urlQuery = locationSearchData.query
+      ? deserializeQuery(locationSearchData.query)
+      : [];
+    const urlSearchText =
+      locationSearchData.SearchableText ||
+      urlQuery.find(({ i }) => i === 'SearchableText')?.v ||
+      '';
+
+    // TODO: refactor, should use only useLocationStateManager()!!!
+    const [searchText, setSearchText] = React.useState(urlSearchText);
+    const configuredFacets =
+      data.facets?.map((facet) => facet?.field?.value) || [];
+    const multiFacets = data.facets
+      ?.filter((facet) => facet?.multiple)
+      .map((facet) => facet?.field?.value);
+    const [facets, setFacets] = React.useState(
+      Object.assign(
+        {},
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+        // support for simple filters like ?Subject=something
+        // TODO: since the move to hash params this is no longer working.
+        // We'd have to treat the location.search and manage it just like the
+        // hash, to support it. We can read it, but we'd have to reset it as
+        // well, so at that point what's the difference to the hash?
+        ...configuredFacets.map((f) =>
+          locationSearchData[f]
+            ? {
+                [f]:
+                  multiFacets.indexOf(f) > -1
+                    ? [locationSearchData[f]]
+                    : locationSearchData[f],
+              }
+            : {},
+        ),
+      ),
+    );
+    const previousUrlQuery = usePrevious(urlQuery);
+
+    React.useEffect(() => {
+      if (!isEqual(urlQuery, previousUrlQuery)) {
+        setFacets(
+          Object.assign(
+            {},
+            ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+            // support for simple filters like ?Subject=something
+            // TODO: since the move to hash params this is no longer working.
+            // We'd have to treat the location.search and manage it just like the
+            // hash, to support it. We can read it, but we'd have to reset it as
+            // well, so at that point what's the difference to the hash?
+            ...configuredFacets.map((f) =>
+              locationSearchData[f]
+                ? {
+                    [f]:
+                      multiFacets.indexOf(f) > -1
+                        ? [locationSearchData[f]]
+                        : locationSearchData[f],
+                  }
+                : {},
+            ),
+          ),
+        );
+      }
+    }, [
+      urlQuery,
+      configuredFacets,
+      locationSearchData,
+      multiFacets,
+      previousUrlQuery,
+    ]);
+
+    const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
+    const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
+
+    const [searchData, setSearchData] = React.useState(
+      getInitialState(data, facets, urlSearchText, id),
+    );
+
+    const deepFacets = JSON.stringify(facets);
+    React.useEffect(() => {
+      setSearchData(getInitialState(data, facets, urlSearchText, id));
+    }, [deepFacets, facets, data, urlSearchText, id]);
+
+    const timeoutRef = React.useRef();
+    const facetSettings = data?.facets;
+
+    const deepQuery = JSON.stringify(data.query);
+    const onTriggerSearch = React.useCallback(
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(
+          () => {
+            const newSearchData = normalizeState({
+              id,
+              query: data.query || {},
+              facets: toSearchFacets || facets,
+              searchText: toSearchText ? toSearchText.trim() : '',
+              sortOn: toSortOn || sortOn,
+              sortOrder: toSortOrder || sortOrder,
+              facetSettings,
+            });
+            if (toSearchFacets) setFacets(toSearchFacets);
+            if (toSortOn) setSortOn(toSortOn);
+            if (toSortOrder) setSortOrder(toSortOrder);
+            setSearchData(newSearchData);
+            setLocationSearchData(getSearchFields(newSearchData));
+          },
+          toSearchFacets ? inputDelay / 3 : inputDelay,
+        );
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [
+        // Use deep comparison of data.query
+        deepQuery,
+        facets,
+        id,
+        setLocationSearchData,
+        searchText,
+        sortOn,
+        sortOrder,
+        facetSettings,
+      ],
+    );
+
+    const removeSearchQuery = () => {
+      let newSearchData = { ...searchData };
+      newSearchData.query = searchData.query.reduce(
+        // Remove SearchableText from query
+        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+        [],
+      );
+      setSearchData(newSearchData);
+      setLocationSearchData(getSearchFields(newSearchData));
+    };
+
+    const querystringResults = useSelector(
+      (state) => state.querystringsearch.subrequests,
+    );
+    const totalItems =
+      querystringResults[id]?.total || querystringResults[id]?.items?.length;
+
+    return (
+      <WrappedComponent
+        {...props}
+        searchData={searchData}
+        facets={facets}
+        setFacets={setFacets}
+        setSortOn={setSortOn}
+        setSortOrder={setSortOrder}
+        sortOn={sortOn}
+        sortOrder={sortOrder}
+        searchedText={urlSearchText}
+        searchText={searchText}
+        removeSearchQuery={removeSearchQuery}
+        setSearchText={setSearchText}
+        onTriggerSearch={onTriggerSearch}
+        totalItems={totalItems}
+      />
+    );
+  }
+  WithSearch.displayName = `WithSearch(${getDisplayName(WrappedComponent)})`;
+
+  return WithSearch;
+};
+
+export default withSearch;

package/src/components/CLMSDatasetDetailView/RelatedUseCases.jsx

@@ -1,51 +0,0 @@
-import { Loader } from 'semantic-ui-react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
-import React from 'react';
-import { searchContent } from '@plone/volto/actions';
-import { useLocation } from 'react-router-dom';
-
-const RelatedUseCases = (props) => {
-  const dispatch = useDispatch();
-  const { UID, id } = props;
-  const searchSubrequests = useSelector((state) => state.search.subrequests);
-  let libraries = searchSubrequests?.[id]?.items || [];
-  let librariesPending = searchSubrequests?.[id]?.loading;
-  const location = useLocation();
-  React.useEffect(() => {
-    if (location.hash === '#Use-cases' && UID) {
-      dispatch(
-        searchContent(
-          '',
-          {
-            fullobjects: 1,
-            portal_type: 'UseCase',
-            path: '/',
-            associated_datasets: UID,
-          },
-          id,
-        ),
-      );
-    }
-  }, [id, UID, dispatch, location]);
-
-  return (
-    <div>
-      {librariesPending && <Loader active inline="centered" />}
-      {libraries.length > 0 ? (
-        libraries.map((item, index) => (
-          <CclCard
-            key={index}
-            type={null}
-            card={{ Type: item['@type'], ...item }}
-          />
-        ))
-      ) : (
-        <p>There are no related items.</p>
-      )}
-    </div>
-  );
-};
-
-export default RelatedUseCases;