@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

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

@@ -1,9 +1,18 @@
-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 showFacet = (index) => {
+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 defaultShowFacet = (index) => {
   const { values } = index;
   return index
     ? hasNonValueOperation(index.operations || []) ||
@@ -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,10 +87,15 @@ 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)
 
-          const { view: FacetWidget, stateToValue } = resolveExtension(
+          const {
+            view: FacetWidget,
+            stateToValue,
+            showFacet = defaultShowFacet,
+          } = resolveExtension(
             'type',
             search.extensions.facetWidgets.types,
             facetSettings,
@@ -74,7 +108,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 +128,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/components/SearchInput.jsx

@@ -13,7 +13,14 @@ const messages = defineMessages({
 });
 
 const SearchInput = (props) => {
-  const { data, searchText, setSearchText, isLive, onTriggerSearch } = props;
+  const {
+    data,
+    searchText,
+    setSearchText,
+    isLive,
+    onTriggerSearch,
+    removeSearchQuery,
+  } = props;
   const intl = useIntl();
 
   return (
@@ -44,7 +51,7 @@ const SearchInput = (props) => {
             className="search-input-clear-icon-button"
             onClick={() => {
               setSearchText('');
-              onTriggerSearch('');
+              removeSearchQuery();
             }}
           >
             <Icon name={clearSVG} />

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

@@ -1,13 +1,13 @@
-export SearchDetails from './SearchDetails';
-export Facets from './Facets';
-export SelectFacet from './SelectFacet';
-export CheckboxFacet from './CheckboxFacet';
-export DateRangeFacet from './DateRangeFacet';
-export SearchInput from './SearchInput';
-export FilterList from './FilterList';
-export SortOn from './SortOn';
-export ToggleFacet from './ToggleFacet';
-export SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
-export ToggleFacetFilterListEntry from './ToggleFacetFilterListEntry';
-export DateRangeFacetFilterListEntry from './DateRangeFacetFilterListEntry';
-export ViewSwitcher from './ViewSwitcher';
+export { default as SearchDetails } from './SearchDetails';
+export { default as Facets } from './Facets';
+export { default as SelectFacet } from './SelectFacet';
+export { default as CheckboxFacet } from './CheckboxFacet';
+export { default as DateRangeFacet } from './DateRangeFacet';
+export { default as SearchInput } from './SearchInput';
+export { default as FilterList } from './FilterList';
+export { default as SortOn } from './SortOn';
+export { default as ToggleFacet } from './ToggleFacet';
+export { default as SelectFacetFilterListEntry } from './SelectFacetFilterListEntry';
+export { default as ToggleFacetFilterListEntry } from './ToggleFacetFilterListEntry';
+export { default as DateRangeFacetFilterListEntry } from './DateRangeFacetFilterListEntry';
+export { default as ViewSwitcher } from './ViewSwitcher';

package/src/components/manage/Blocks/Search/hocs/index.js

@@ -1,2 +1,2 @@
-export withQueryString from './withQueryString';
-export withSearch from './withSearch';
+export { default as withQueryString } from './withQueryString';
+export { default as withSearch } from './withSearch';

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

@@ -10,7 +10,7 @@ function getDisplayName(WrappedComponent) {
  * A HOC that injects querystring metadata information from the backend.
  *
  */
-export default (WrappedComponent) => {
+export default function withQueryString(WrappedComponent) {
   function WithQueryString(props) {
     const dispatch = useDispatch();
 
@@ -29,4 +29,4 @@ export default (WrappedComponent) => {
     WrappedComponent,
   )})`;
   return WithQueryString;
-};
+}

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 ? toSearchText.trim() : '',
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
@@ -301,17 +315,30 @@ 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,
       ],
     );
 
+    const removeSearchQuery = () => {
+      searchData.query = searchData.query.reduce(
+        // Remove SearchableText from query
+        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+        [],
+      );
+      setSearchData(searchData);
+      setLocationSearchData(getSearchFields(searchData));
+    };
+
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
@@ -330,6 +357,7 @@ const withSearch = (options) => (WrappedComponent) => {
         sortOrder={sortOrder}
         searchedText={urlSearchText}
         searchText={searchText}
+        removeSearchQuery={removeSearchQuery}
         setSearchText={setSearchText}
         onTriggerSearch={onTriggerSearch}
         totalItems={totalItems}

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/Teaser/Body.jsx

@@ -24,7 +24,6 @@ const TeaserBody = (props) => {
 TeaserBody.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
   isEditMode: PropTypes.bool,
-  variation: PropTypes.string,
 };
 
 export default TeaserBody;

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { getTeaserImageURL } from './utils';
+import { isInternalURL } from '@plone/volto/helpers';
 import { MaybeWrap } from '@plone/volto/components';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
@@ -18,20 +17,14 @@ const messages = defineMessages({
   },
 });
 
-const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
-
 const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
-  const align = data?.styles?.align;
 
-  const hasImageComponent = config.getComponent('Image').component;
-  const Image = config.getComponent('Image').component || DefaultImage;
+  const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
-  const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
 
   return (
     <div className={cx('block teaser', className)}>
@@ -60,9 +53,11 @@ const TeaserDefaultTemplate = (props) => {
               {(href.hasPreviewImage || href.image_field || image) && (
                 <div className="image-wrapper">
                   <Image
-                    src={hasImageComponent ? href : defaultImageSrc}
+                    item={image || href}
+                    imageField={image ? image.image_field : href.image_field}
                     alt=""
                     loading="lazy"
+                    responsive={true}
                   />
                 </div>
               )}

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

@@ -101,3 +101,8 @@ export const TeaserSchema = ({ intl }) => {
 
   return schema;
 };
+
+export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

package/src/components/manage/Blocks/Title/View.jsx

@@ -3,19 +3,29 @@
  * @module volto-slate/blocks/Title/TitleBlockView
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import Slugger from 'github-slugger';
+import { renderLinkElement } from '@plone/volto-slate/editor/render';
 
 /**
  * View title block component.
  * @class View
  * @extends Component
  */
-const TitleBlockView = ({ properties, metadata }) => {
+const TitleBlockView = ({ properties, metadata, id, children }) => {
+  let attr = { id };
+  const title = (properties || metadata)['title'];
+  const slug = Slugger.slug(title);
+  attr.id = slug || id;
+  const LinkedTitle = useMemo(() => renderLinkElement('h1'), []);
   return (
-    <h1 className="documentFirstHeading">
-      {(metadata || properties)['title'] || ''}
-    </h1>
+    <LinkedTitle
+      mode="view"
+      children={title ?? children}
+      attributes={attr}
+      className={'documentFirstHeading'}
+    />
   );
 };
 

package/src/components/manage/Blocks/Title/View.test.jsx

@@ -1,10 +1,25 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
 import View from './View';
 
+const mockStore = configureStore();
+
 test('renders a view title component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
   const component = renderer.create(
-    <View properties={{ title: 'My Title' }} />,
+    <Provider store={store}>
+      <MemoryRouter>
+        <View properties={{ title: 'My Title' }} id="a123" />
+      </MemoryRouter>
+    </Provider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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

@@ -10,7 +10,7 @@ const TableOfContentsSchema = ({ data }) => {
         fields: [
           'title',
           'hide_title',
-          ...(variation === 'default' ? ['ordered'] : []),
+          ...(variation === 'default' ? ['ordered'] : ['sticky']),
           'levels',
         ],
       },
@@ -39,6 +39,10 @@ const TableOfContentsSchema = ({ data }) => {
         title: 'Ordered',
         type: 'boolean',
       },
+      sticky: {
+        title: 'Sticky',
+        type: 'boolean',
+      },
     },
     required: [],
   };

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

@@ -56,7 +56,14 @@ const View = (props) => {
         const items = [];
         if (!level || !levels.includes(level)) return;
         tocEntriesLayout.push(id);
-        tocEntries[id] = { level, title: title || block.plaintext, items, id };
+        tocEntries[id] = {
+          level,
+          title: title || block.plaintext,
+          items,
+          id,
+          override_toc: block.override_toc,
+          plaintext: block.plaintext,
+        };
         if (level < rootLevel) {
           rootLevel = level;
         }