@eeacms/volto-clms-theme 1.1.68 → 1.1.70

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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.70](https://github.com/eea/volto-clms-theme/compare/1.1.69...1.1.70) - 26 October 2023
+
+#### :hammer_and_wrench: Others
+
+- Jenkins alert [Ion Lizarazu - [`52b0d70`](https://github.com/eea/volto-clms-theme/commit/52b0d7061c6e33ba15dddc821dd398bb1aea04e0)]
+- deep compare adaptedQuery to avoid multimple querystring-search requests on listing and search blocks [Ion Lizarazu - [`ad10528`](https://github.com/eea/volto-clms-theme/commit/ad10528ef526979fa2f3c9e8377051912e6e5c53)]
+- rename correctly withQuerystringResults.jsx [Ion Lizarazu - [`3c5304a`](https://github.com/eea/volto-clms-theme/commit/3c5304afc48baedee570e48b37e2bc5ad53f2b8e)]
+- add original withQueryStringResults.jsx file to override [Ion Lizarazu - [`dab1086`](https://github.com/eea/volto-clms-theme/commit/dab1086ea5e6f09e82c030a75a4180a8c68dafc0)]
+### [1.1.69](https://github.com/eea/volto-clms-theme/compare/1.1.68...1.1.69) - 25 October 2023
+
+#### :rocket: New Features
+
+- feat: optimization for search block. sort_on and sort_order default values [Ion Lizarazu - [`96d0b66`](https://github.com/eea/volto-clms-theme/commit/96d0b6624238ffc114633f7ae21a25515cba9167)]
+- feat: add titles to be accessible [Mikel Larreategi - [`82e2b97`](https://github.com/eea/volto-clms-theme/commit/82e2b97a0c0655c2322302e6b167f64430dff52c)]
+
+#### :hammer_and_wrench: Others
+
+- add original file to override SearchBlockView.jsx [Ion Lizarazu - [`7334fdc`](https://github.com/eea/volto-clms-theme/commit/7334fdc1c6c9023329490bfc086daf09934bce1b)]
+- do not use duplicate names for tab controlling [Mikel Larreategi - [`ad6a648`](https://github.com/eea/volto-clms-theme/commit/ad6a648c91c5011fce2499b5c1bb72a8aa388d1c)]
 ### [1.1.68](https://github.com/eea/volto-clms-theme/compare/1.1.67...1.1.68) - 24 October 2023
 
 #### :rocket: New Features

package/package.json

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

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx

@@ -9,29 +9,36 @@ import cx from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const CclTabsView = (props) => {
-  const { metadata = {}, tabsList = [], setActiveTab } = props;
+  const {
+    metadata = {},
+    tabsList = [],
+    setActiveTab,
+    activeTab = null,
+    tabs = {},
+  } = props;
 
   const PanelsComponent = () => {
     return (
       <div className="panels">
-        {tabsList.map((tab, index) => {
-          const { activeTab = null, tabs = {} } = props;
-          return (
-            <div
-              key={index}
-              className={cx('panel', tab === activeTab && 'panel-selected')}
-              id="news_panel"
-              role="tabpanel"
-              aria-hidden="false"
-            >
-              <RenderBlocks
-                {...props}
-                metadata={metadata}
-                content={tabs[tab]}
-              />
-            </div>
-          );
-        })}
+        {tabsList
+          .filter((tab) => tab === activeTab)
+          .map((tab, index) => {
+            return (
+              <div
+                key={index}
+                className={cx('panel', tab === activeTab && 'panel-selected')}
+                id={`tab-${index}`}
+                role="tabpanel"
+                aria-hidden="false"
+              >
+                <RenderBlocks
+                  {...props}
+                  metadata={metadata}
+                  content={tabs[tab]}
+                />
+              </div>
+            );
+          })}
       </div>
     );
   };
@@ -56,7 +63,7 @@ const CclTabsView = (props) => {
               key={index}
               id={tabIndex}
               role="tab"
-              aria-controls={title || defaultTitle}
+              aria-controls={`tab-${index}`}
               aria-selected={tab === activeTab}
               active={(tab === activeTab).toString()}
               /* classname hontan estiloa aldatu behar bada "===" "!==" gatik aldatuz nahikoa da */

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -98,25 +98,27 @@ const PanelsComponent = (props) => {
   const { metadata = {}, tabsList = [], activeTab = null, tabs = {} } = props;
   return (
     <div className="right-content cont-w-75">
-      {tabsList.map((tab, index) => {
-        const title = tabs[tab].title;
-        const tabHash = `tab=${slugify(title)}`;
-        return (
-          <Route key={index} to={'#' + tabHash}>
-            <div
-              className={cx('panel', tab === activeTab && 'panel-selected')}
-              role="tabpanel"
-              aria-hidden="false"
-            >
-              <RenderBlocks
-                {...props}
-                metadata={metadata}
-                content={tabs[tab]}
-              />
-            </div>
-          </Route>
-        );
-      })}
+      {tabsList
+        .filter((tab) => tab === activeTab)
+        .map((tab, index) => {
+          const title = tabs[tab].title;
+          const tabHash = `tab=${slugify(title)}`;
+          return (
+            <Route key={index} to={'#' + tabHash}>
+              <div
+                className={cx('panel', tab === activeTab && 'panel-selected')}
+                role="tabpanel"
+                aria-hidden="false"
+              >
+                <RenderBlocks
+                  {...props}
+                  metadata={metadata}
+                  content={tabs[tab]}
+                />
+              </div>
+            </Route>
+          );
+        })}
     </div>
   );
 };

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/RoutingHOC.jsx

@@ -30,9 +30,9 @@ const RoutingHOC = (TabView) =>
         const hashMatch = window.location.search
           .match(/.*([&|?|#]tab=.*)/)[1]
           .replace(/[&|?|#]tab=/, '');
-        const result = tabsDict.filter((t) => slugify(t.title) === hashMatch);
-        if (result.length > 0) {
-          return result[0].id;
+        const tab = tabsDict.find((t) => slugify(t.title) === hashMatch);
+        if (tab) {
+          return tab.id;
         }
       }
       return decideTabSubtab(rTabs, rTabsList[0], rTabsList[1]);
@@ -50,7 +50,6 @@ const RoutingHOC = (TabView) =>
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeTabIndex, location]);
-
     return <TabView {...props} />;
   };
 

package/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -0,0 +1,156 @@
+import React, { useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import { getContent, getQueryStringResults } from '@plone/volto/actions';
+import { usePagination, getBaseUrl } from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+export default function withQuerystringResults(WrappedComponent) {
+  function WithQuerystringResults(props) {
+    const {
+      data = {},
+      id = data.block,
+      properties: content,
+      path,
+      variation,
+    } = props;
+    const { settings } = config;
+    const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
+    const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
+    const { b_size = settings.defaultPageSize } = querystring; // batchsize
+
+    // save the path so it won't trigger dispatch on eager router location change
+    const [initialPath] = React.useState(getBaseUrl(path));
+
+    const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
+    const { currentPage, setCurrentPage } = usePagination(id, 1);
+    const adaptedQuery = Object.assign(
+      variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
+      {
+        b_size: b_size,
+      },
+      ...copyFields.map((name) =>
+        Object.keys(querystring).includes(name)
+          ? { [name]: querystring[name] }
+          : {},
+      ),
+    );
+    const adaptedQueryRef = useRef(adaptedQuery);
+    const currentPageRef = useRef(currentPage);
+
+    const querystringResults = useSelector(
+      (state) => state.querystringsearch.subrequests,
+    );
+    const dispatch = useDispatch();
+
+    const folderItems = content?.is_folderish ? content.items : [];
+    const hasQuery = querystring?.query?.length > 0;
+    const hasLoaded = hasQuery
+      ? querystringResults?.[subrequestID]?.loaded
+      : true;
+
+    const listingItems = hasQuery
+      ? querystringResults?.[subrequestID]?.items || []
+      : folderItems;
+
+    const showAsFolderListing = !hasQuery && content?.items_total > b_size;
+    const showAsQueryListing =
+      hasQuery && querystringResults?.[subrequestID]?.total > b_size;
+
+    const totalPages = showAsFolderListing
+      ? Math.ceil(content.items_total / b_size)
+      : showAsQueryListing
+      ? Math.ceil(querystringResults[subrequestID].total / b_size)
+      : 0;
+
+    const prevBatch = showAsFolderListing
+      ? content.batching?.prev
+      : showAsQueryListing
+      ? querystringResults[subrequestID].batching?.prev
+      : null;
+    const nextBatch = showAsFolderListing
+      ? content.batching?.next
+      : showAsQueryListing
+      ? querystringResults[subrequestID].batching?.next
+      : null;
+
+    const isImageGallery =
+      (!data.variation && data.template === 'imageGallery') ||
+      data.variation === 'imageGallery';
+
+    const deepAdaptedQuery = JSON.stringify(adaptedQuery);
+    useDeepCompareEffect(() => {
+      if (hasQuery) {
+        dispatch(
+          getQueryStringResults(
+            initialPath,
+            adaptedQuery,
+            subrequestID,
+            currentPage,
+          ),
+        );
+      } else if (isImageGallery && !hasQuery) {
+        // when used as image gallery, it doesn't need a query to list children
+        dispatch(
+          getQueryStringResults(
+            initialPath,
+            {
+              ...adaptedQuery,
+              b_size: 10000000000,
+              query: [
+                {
+                  i: 'path',
+                  o: 'plone.app.querystring.operation.string.relativePath',
+                  v: '',
+                },
+              ],
+            },
+            subrequestID,
+          ),
+        );
+      } else {
+        dispatch(getContent(initialPath, null, null, currentPage));
+      }
+      adaptedQueryRef.current = adaptedQuery;
+      currentPageRef.current = currentPage;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      subrequestID,
+      isImageGallery,
+      deepAdaptedQuery,
+      hasQuery,
+      initialPath,
+      dispatch,
+      currentPage,
+    ]);
+
+    return (
+      <WrappedComponent
+        {...props}
+        onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
+        total={querystringResults?.[subrequestID]?.total}
+        batch_size={b_size}
+        currentPage={currentPage}
+        totalPages={totalPages}
+        prevBatch={prevBatch}
+        nextBatch={nextBatch}
+        listingItems={listingItems}
+        hasLoaded={hasLoaded}
+        isFolderContentsListing={showAsFolderListing}
+      />
+    );
+  }
+
+  WithQuerystringResults.displayName = `WithQuerystringResults(${getDisplayName(
+    WrappedComponent,
+  )})`;
+
+  return hoistNonReactStatics(WithQuerystringResults, WrappedComponent);
+}

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+import {
+  withSearch,
+  withQueryString,
+} from '@plone/volto/components/manage/Blocks/Search/hocs';
+import { compose } from 'redux';
+import { useSelector } from 'react-redux';
+import { isEqual, isFunction } from 'lodash';
+
+const getListingBodyVariation = (data) => {
+  const { variations } = config.blocks.blocksConfig.listing;
+
+  let variation = data.listingBodyTemplate
+    ? variations.find(({ id }) => id === data.listingBodyTemplate)
+    : variations.find(({ isDefault }) => isDefault);
+
+  if (!variation) variation = variations[0];
+
+  return variation;
+};
+
+const isfunc = (obj) => isFunction(obj) || typeof obj === 'function';
+
+const _filtered = (obj) =>
+  Object.assign(
+    {},
+    ...Object.keys(obj).map((k) => {
+      const reject = k !== 'properties' && !isfunc(obj[k]);
+      return reject ? { [k]: obj[k] } : {};
+    }),
+  );
+
+const blockPropsAreChanged = (prevProps, nextProps) => {
+  const prev = _filtered(prevProps);
+  const next = _filtered(nextProps);
+
+  return isEqual(prev, next);
+};
+
+const applyDefaults = (data, root) => {
+  const defaultQuery = [
+    {
+      i: 'path',
+      o: 'plone.app.querystring.operation.string.absolutePath',
+      v: root || '/',
+    },
+  ];
+  const sort_on = data?.sort_on ? { sort_on: data?.sort_on } : {};
+  const sort_order = data?.sort_order ? { sort_order: data?.sort_order } : {};
+
+  return {
+    ...data,
+    ...sort_on,
+    ...sort_order,
+    query: data?.query?.length ? data.query : defaultQuery,
+  };
+};
+
+const SearchBlockView = (props) => {
+  const { data, searchData, mode = 'view', variation } = props;
+
+  const Layout = variation.view;
+
+  const dataListingBodyVariation = getListingBodyVariation(data).id;
+  const [selectedView, setSelectedView] = React.useState(
+    dataListingBodyVariation,
+  );
+
+  // in the block edit you can change the used listing block variation,
+  // but it's cached here in the state. So we reset it.
+  React.useEffect(() => {
+    if (mode !== 'view') {
+      setSelectedView(dataListingBodyVariation);
+    }
+  }, [dataListingBodyVariation, mode]);
+
+  const root = useSelector((state) => state.breadcrumbs.root);
+  const listingBodyData = applyDefaults(searchData, root);
+
+  const { variations } = config.blocks.blocksConfig.listing;
+  const listingBodyVariation = variations.find(({ id }) => id === selectedView);
+
+  return (
+    <div className="block search">
+      <Layout
+        {...props}
+        isEditMode={mode === 'edit'}
+        selectedView={selectedView}
+        setSelectedView={setSelectedView}
+      >
+        <ListingBody
+          variation={{ ...data, ...listingBodyVariation }}
+          data={listingBodyData}
+          path={props.path}
+          isEditMode={mode === 'edit'}
+        />
+      </Layout>
+    </div>
+  );
+};
+
+export const SearchBlockViewComponent = compose(
+  withBlockExtensions,
+  (Component) => React.memo(Component, blockPropsAreChanged),
+)(SearchBlockView);
+
+export default compose(withSearch())(
+  compose(withQueryString)(SearchBlockViewComponent),
+);

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -478,6 +478,7 @@ class Footer extends Component {
                   href="https://www.eea.europa.eu/"
                   target="_blank"
                   rel="noreferrer"
+                  title="European Environment Agency"
                 >
                   <ReactSVG
                     src={ECImage}
@@ -495,6 +496,7 @@ class Footer extends Component {
                 <a
                   href="https://joint-research-centre.ec.europa.eu/index_en"
                   target="_blank"
+                  title="Joint Research Centre"
                   rel="noreferrer"
                 >
                   <ReactSVG
@@ -515,10 +517,6 @@ class Footer extends Component {
                   </span>
                 </a>
               </div>
-              {/* <div className="ccl-footer-col-title">
-              {intl.formatMessage(messages.expertSupportProvidedBy)}
-            </div>
-            <p>{intl.formatMessage(messages.EIONETActionGroup)}</p> */}
             </CclFooterColumn>
           </div>
         </div>

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -165,6 +165,7 @@ class Header extends Component {
             <div className="ccl-container">
               <div
                 className="ccl-main-menu-collapse-button"
+                aria-label="Toggle main menu"
                 onClick={() =>
                   this.setState({
                     mobileMenuOpen: !this.state.mobileMenuOpen,
@@ -188,6 +189,7 @@ class Header extends Component {
               </div>
               <div
                 className="ccl-search-collapse-button"
+                aria-label="Toggle search menu"
                 onClick={() =>
                   this.setState({
                     mobileSearchBoxOpen: !this.state.mobileSearchBoxOpen,