@plone/volto 17.0.0-alpha.1 → 17.0.0-alpha.11

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

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -14,18 +14,23 @@ function getDisplayName(WrappedComponent) {
 
 export default function withQuerystringResults(WrappedComponent) {
   function WithQuerystringResults(props) {
-    const { data = {}, properties: content, path, variation } = 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 { block } = data;
     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' },
       {
@@ -37,7 +42,9 @@ export default function withQuerystringResults(WrappedComponent) {
           : {},
       ),
     );
-    const { currentPage, setCurrentPage } = usePagination(querystring, 1);
+    const adaptedQueryRef = useRef(adaptedQuery);
+    const currentPageRef = useRef(currentPage);
+
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
@@ -45,32 +52,32 @@ export default function withQuerystringResults(WrappedComponent) {
 
     const folderItems = content?.is_folderish ? content.items : [];
     const hasQuery = querystring?.query?.length > 0;
-    const hasLoaded = hasQuery ? !querystringResults?.[block]?.loading : true;
+    const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
 
     const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[block]
-        ? querystringResults?.[block]?.items || []
+      querystring?.query?.length > 0 && querystringResults?.[id]
+        ? querystringResults?.[id]?.items || []
         : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =
-      hasQuery && querystringResults?.[block]?.total > b_size;
+      hasQuery && querystringResults?.[id]?.total > b_size;
 
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[block].total / b_size)
+      ? Math.ceil(querystringResults[id].total / b_size)
       : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[block].batching?.prev
+      ? querystringResults[id].batching?.prev
       : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[block].batching?.next
+      ? querystringResults[id].batching?.next
       : null;
 
     const isImageGallery =
@@ -80,7 +87,7 @@ export default function withQuerystringResults(WrappedComponent) {
     useDeepCompareEffect(() => {
       if (hasQuery) {
         dispatch(
-          getQueryStringResults(initialPath, adaptedQuery, block, currentPage),
+          getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
         );
       } else if (isImageGallery && !hasQuery) {
         // when used as image gallery, it doesn't need a query to list children
@@ -98,14 +105,16 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            block,
+            id,
           ),
         );
       } else {
         dispatch(getContent(initialPath, null, null, currentPage));
       }
+      adaptedQueryRef.current = adaptedQuery;
+      currentPageRef.current = currentPage;
     }, [
-      block,
+      id,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -118,7 +127,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[block]?.total}
+        total={querystringResults?.[id]?.total}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
@@ -60,9 +59,11 @@ const SearchBlockEdit = (props) => {
   };
 
   const { query = {} } = data || {};
-  useDeepCompareEffect(() => {
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
     onTriggerSearch();
-  }, [query, onTriggerSearch]);
+  }, [deepQuery, onTriggerSearch]);
 
   return (
     <>

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

@@ -57,7 +57,7 @@ const applyDefaults = (data, root) => {
 };
 
 const SearchBlockView = (props) => {
-  const { data, searchData, mode = 'view', variation } = props;
+  const { id, data, searchData, mode = 'view', variation } = props;
 
   const Layout = variation.view;
 
@@ -89,6 +89,7 @@ const SearchBlockView = (props) => {
         setSelectedView={setSelectedView}
       >
         <ListingBody
+          id={id}
           variation={{ ...data, ...listingBodyVariation }}
           data={listingBodyData}
           path={props.path}

package/src/components/manage/Blocks/Search/components/DateRangeFacet.jsx

@@ -4,6 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { compose } from 'redux';
 import { Icon } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { connect } from 'react-redux';
 
 import leftKey from '@plone/volto/icons/left-key.svg';
@@ -82,7 +83,9 @@ const DateRangeFacet = (props) => {
             noBorder
             showClearDates
             customCloseIcon={<CloseIcon />}
-            displayFormat={moment.localeData(lang).longDateFormat('L')}
+            displayFormat={moment
+              .localeData(toBackendLang(lang))
+              .longDateFormat('L')}
             focusedInput={focused}
             onFocusChange={(focusedInput) => setFocused(focusedInput)}
             onDatesChange={({ startDate, endDate }) => {

package/src/components/manage/Blocks/Search/components/Facets.jsx

@@ -1,7 +1,16 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
+import { Button, Grid } from 'semantic-ui-react';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
 import { hasNonValueOperation, hasDateOperation } from '../utils';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  moreFilters: { id: 'More filters', defaultMessage: 'More filters' },
+  lessFilters: { id: 'Less filters', defaultMessage: 'Less filters' },
+  showFilters: { id: 'Show filters', defaultMessage: 'Show filters' },
+  hideFilters: { id: 'Hide filters', defaultMessage: 'Hide filters' },
+});
 
 const showFacet = (index) => {
   const { values } = index;
@@ -14,6 +23,7 @@ const showFacet = (index) => {
 };
 
 const Facets = (props) => {
+  const [hidden, setHidden] = useState(true);
   const {
     querystring,
     data = {},
@@ -24,11 +34,29 @@ const Facets = (props) => {
   } = props;
   const { search } = config.blocks.blocksConfig;
 
+  const advancedFilters = useMemo(() => {
+    let count = 0;
+    for (let facetSettings of data.facets || []) {
+      if (facetSettings.advanced) {
+        count++;
+      }
+    }
+
+    if (count === data.facets?.length) {
+      return 2;
+    }
+    if (count) {
+      return 1;
+    }
+    return 0;
+  }, [data.facets]);
+
   const FacetWrapper = facetWrapper;
   const query_to_values = Object.assign(
     {},
     ...(data?.query?.query?.map(({ i, v }) => ({ [i]: v })) || []),
   );
+  const intl = useIntl();
 
   return (
     <>
@@ -36,6 +64,7 @@ const Facets = (props) => {
         ?.filter((facetSettings) => !facetSettings.hidden)
         .map((facetSettings) => {
           const field = facetSettings?.field?.value;
+          const isAdvanced = facetSettings?.advanced;
           const index = querystring.indexes[field] || {};
           const { values = {} } = index;
 
@@ -58,6 +87,7 @@ const Facets = (props) => {
 
           const isMulti = facetSettings.multiple;
           const selectedValue = facets[facetSettings?.field?.value];
+          const visible = (isAdvanced && !hidden) || !isAdvanced;
 
           // TODO :handle changing the type of facet (multi/nonmulti)
 
@@ -74,7 +104,11 @@ const Facets = (props) => {
           } = search.extensions.facetWidgets;
 
           return FacetWrapper && (isEditMode || showFacet(index)) ? (
-            <FacetWrapper key={facetSettings['@id']}>
+            <FacetWrapper
+              key={facetSettings['@id']}
+              facetSettings={facetSettings}
+              visible={visible}
+            >
               <FacetWidget
                 facet={facetSettings}
                 choices={rewriteOptions(facetSettings?.field?.value, choices)}
@@ -90,6 +124,28 @@ const Facets = (props) => {
             ''
           );
         })}
+      {advancedFilters > 0 && (
+        <Grid.Column
+          mobile={12}
+          tablet={12}
+          computer={12}
+          className="toggle-advanced-facets"
+        >
+          <Button
+            onClick={() => {
+              setHidden((prevHidden) => !prevHidden);
+            }}
+          >
+            {hidden
+              ? advancedFilters === 2
+                ? intl.formatMessage(messages.showFilters)
+                : intl.formatMessage(messages.moreFilters)
+              : advancedFilters === 2
+              ? intl.formatMessage(messages.hideFilters)
+              : intl.formatMessage(messages.lessFilters)}
+          </Button>
+        </Grid.Column>
+      )}
     </>
   );
 };

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

@@ -114,15 +114,19 @@ function normalizeState({
     block: id,
   };
 
-  // TODO: need to check if SearchableText facet is not already in the query
-  // Ideally the searchtext functionality should be restructured as being just
-  // another facet
-  params.query = params.query.reduce(
-    // Remove SearchableText from query
-    (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
-    [],
-  );
+  // 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',
@@ -144,12 +148,16 @@ const getSearchFields = (searchData) => {
 };
 
 /**
- * A HOC that will mirror the search block state to a hash location
+ * 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),
@@ -165,7 +173,7 @@ const useHashState = () => {
 
   const setSearchData = React.useCallback(
     (searchData) => {
-      const newParams = qs.parse(location.hash);
+      const newParams = qs.parse(location.search);
 
       let changed = false;
 
@@ -182,11 +190,11 @@ const useHashState = () => {
 
       if (changed) {
         history.push({
-          hash: qs.stringify(newParams),
+          search: qs.stringify(newParams),
         });
       }
     },
-    [history, oldState, location.hash],
+    [history, oldState, location.search],
   );
 
   return [current, setSearchData];
@@ -278,8 +286,14 @@ const withSearch = (options) => (WrappedComponent) => {
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
 
+    const deepQuery = JSON.stringify(data.query);
     const onTriggerSearch = React.useCallback(
-      (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
@@ -287,7 +301,7 @@ const withSearch = (options) => (WrappedComponent) => {
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              searchText: toSearchText,
+              searchText: toSearchText || searchText,
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
@@ -301,11 +315,14 @@ const withSearch = (options) => (WrappedComponent) => {
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [
-        data.query,
+        // Use deep comparison of data.query
+        deepQuery,
         facets,
         id,
         setLocationSearchData,
+        searchText,
         sortOn,
         sortOrder,
         facetSettings,

package/src/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx

@@ -11,6 +11,7 @@ import { Grid, Segment } from 'semantic-ui-react';
 import { Button } from 'semantic-ui-react';
 import { flushSync } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
+import cx from 'classnames';
 
 const messages = defineMessages({
   searchButtonText: {
@@ -19,11 +20,22 @@ const messages = defineMessages({
   },
 });
 
-const FacetWrapper = ({ children }) => (
-  <Segment basic className="facet">
-    {children}
-  </Segment>
-);
+const FacetWrapper = ({ children, facetSettings = {}, visible }) => {
+  const { advanced, field = {} } = facetSettings;
+
+  return (
+    <Segment
+      basic
+      className={cx('facet', {
+        [`facet-index-${field.value}`]: !!field.value,
+        'advanced-facet': advanced,
+        'advanced-facet-hidden': !visible,
+      })}
+    >
+      {children}
+    </Segment>
+  );
+};
 
 const LeftColumnFacets = (props) => {
   const {

package/src/components/manage/Blocks/Search/layout/RightColumnFacets.jsx

@@ -11,6 +11,7 @@ import { Grid, Segment } from 'semantic-ui-react';
 import { Button } from 'semantic-ui-react';
 import { flushSync } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
+import cx from 'classnames';
 
 const messages = defineMessages({
   searchButtonText: {
@@ -19,11 +20,22 @@ const messages = defineMessages({
   },
 });
 
-const FacetWrapper = ({ children }) => (
-  <Segment basic className="facet">
-    {children}
-  </Segment>
-);
+const FacetWrapper = ({ children, facetSettings = {}, visible }) => {
+  const { advanced, field = {} } = facetSettings;
+
+  return (
+    <Segment
+      basic
+      className={cx('facet', {
+        [`facet-index-${field.value}`]: !!field.value,
+        'advanced-facet': advanced,
+        'advanced-facet-hidden': !visible,
+      })}
+    >
+      {children}
+    </Segment>
+  );
+};
 
 const RightColumnFacets = (props) => {
   const {

package/src/components/manage/Blocks/Search/layout/TopSideFacets.jsx

@@ -11,6 +11,7 @@ import {
   SortOn,
   ViewSwitcher,
 } from '../components';
+import cx from 'classnames';
 
 const messages = defineMessages({
   searchButtonText: {
@@ -19,11 +20,24 @@ const messages = defineMessages({
   },
 });
 
-const FacetWrapper = ({ children }) => (
-  <Grid.Column mobile={12} tablet={4} computer={3}>
-    {children}
-  </Grid.Column>
-);
+const FacetWrapper = ({ children, facetSettings = {}, visible }) => {
+  const { advanced, field = {} } = facetSettings;
+
+  return (
+    <Grid.Column
+      mobile={12}
+      tablet={4}
+      computer={3}
+      className={cx('facet', {
+        [`facet-index-${field.value}`]: !!field.value,
+        'advanced-facet': advanced,
+        'advanced-facet-hidden': !visible,
+      })}
+    >
+      {children}
+    </Grid.Column>
+  );
+};
 
 const TopSideFacets = (props) => {
   const {
@@ -117,6 +131,7 @@ const TopSideFacets = (props) => {
               <ViewSwitcher {...props} />
             )}
           </div>
+
           {data.facets?.length > 0 && (
             <div className="facets">
               {data.facetsTitle && <h3>{data.facetsTitle}</h3>}
@@ -136,6 +151,7 @@ const TopSideFacets = (props) => {
               </Grid>
             </div>
           )}
+
           <SearchDetails
             text={searchedText}
             total={totalItems}

package/src/components/manage/Blocks/Search/schema.js

@@ -88,6 +88,15 @@ const messages = defineMessages({
     defaultMessage:
       'Hidden facets will still filter the results if proper parameters are passed in URLs',
   },
+  advancedFacetTitle: {
+    id: 'Advanced facet?',
+    defaultMessage: 'Advanced facet?',
+  },
+  advancedFacetDescription: {
+    id: 'Advanced facets are initially hidden and displayed on demand',
+    defaultMessage:
+      'Advanced facets are initially hidden and displayed on demand',
+  },
   facetWidget: {
     id: 'Facet widget',
     defaultMessage: 'Facet widget',
@@ -131,7 +140,7 @@ const FacetSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'field', 'type', 'hidden'],
+      fields: ['title', 'field', 'type', 'hidden', 'advanced'],
     },
   ],
   properties: {
@@ -170,6 +179,12 @@ const FacetSchema = ({ intl }) => ({
       default: false,
       description: intl.formatMessage(messages.hideFacetDescription),
     },
+    advanced: {
+      type: 'boolean',
+      title: intl.formatMessage(messages.advancedFacetTitle),
+      default: false,
+      description: intl.formatMessage(messages.advancedFacetDescription),
+    },
     type: {
       title: intl.formatMessage(messages.facetWidget),
       choices: config.blocks.blocksConfig.search.extensions.facetWidgets.types.map(

package/src/components/manage/Blocks/ToC/Edit.jsx

@@ -26,6 +26,7 @@ class Edit extends Component {
             }}
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
+            block={this.props.block}
           />
         </SidebarPortal>
       </>