@plone/volto 17.0.0-alpha.8 → 17.0.0

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

@@ -10,11 +10,14 @@ 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();
 
     const qs = useSelector((state) => state.querystring);
+    // This showed up after updating eslint-plugin-react-hooks
+    // TODO: fix it properly
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const indexes = qs?.indexes || {};
 
     React.useEffect(() => {
@@ -29,4 +32,4 @@ export default (WrappedComponent) => {
     WrappedComponent,
   )})`;
   return WithQueryString;
-};
+}

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

@@ -5,6 +5,8 @@ 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';
@@ -27,9 +29,8 @@ const PAQO = 'plone.app.querystring.operation';
  *
  */
 function getInitialState(data, facets, urlSearchText, id) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const { types: facetWidgetTypes } =
+    config.blocks.blocksConfig.search.extensions.facetWidgets;
   const facetSettings = data?.facets || [];
 
   return {
@@ -85,9 +86,8 @@ function normalizeState({
   sortOrder,
   facetSettings, // data.facets extracted from block data
 }) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const { types: facetWidgetTypes } =
+    config.blocks.blocksConfig.search.extensions.facetWidgets;
 
   const params = {
     query: [
@@ -148,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),
@@ -169,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;
 
@@ -186,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];
@@ -234,6 +238,8 @@ const withSearch = (options) => (WrappedComponent) => {
       editable,
     );
 
+    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const urlQuery = locationSearchData.query
       ? deserializeQuery(locationSearchData.query)
       : [];
@@ -244,40 +250,57 @@ const withSearch = (options) => (WrappedComponent) => {
 
     // TODO: refactor, should use only useLocationStateManager()!!!
     const [searchText, setSearchText] = React.useState(urlSearchText);
+    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     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 [facets, setFacets] = React.useState({});
+    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 [searchData, setSearchData] = React.useState({});
+
+    React.useEffect(() => {
+      setSearchData(getInitialState(data, facets, urlSearchText, id));
+    }, [facets, data, urlSearchText, id]);
 
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
@@ -297,7 +320,7 @@ const withSearch = (options) => (WrappedComponent) => {
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              searchText: toSearchText || searchText,
+              searchText: toSearchText ? toSearchText.trim() : '',
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
@@ -325,6 +348,16 @@ const withSearch = (options) => (WrappedComponent) => {
       ],
     );
 
+    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,
     );
@@ -343,6 +376,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

@@ -37,8 +37,7 @@ const messages = defineMessages({
     defaultMessage: 'Show search button?',
   },
   showSearchButtonDescription: {
-    id:
-      'The button presence disables the live search, the query is issued when you press ENTER',
+    id: 'The button presence disables the live search, the query is issued when you press ENTER',
     defaultMessage:
       'The button presence disables the live search, the query is issued when you press ENTER',
   },
@@ -83,11 +82,19 @@ const messages = defineMessages({
     defaultMessage: 'Hide facet?',
   },
   hideFacetDescription: {
-    id:
-      'Hidden facets will still filter the results if proper parameters are passed in URLs',
+    id: 'Hidden facets will still filter the results if proper parameters are passed in URLs',
     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 +138,7 @@ const FacetSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'field', 'type', 'hidden'],
+      fields: ['title', 'field', 'type', 'hidden', 'advanced'],
     },
   ],
   properties: {
@@ -170,17 +177,25 @@ 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(
-        ({ id, title }) => [
-          id,
-          `${intl.formatMessage({ id: id, defaultMessage: title })}`,
-        ],
-      ),
-      defaultValue: config.blocks.blocksConfig.search.extensions.facetWidgets.types.find(
-        ({ isDefault }) => isDefault,
-      ).id,
+      choices:
+        config.blocks.blocksConfig.search.extensions.facetWidgets.types.map(
+          ({ id, title }) => [
+            id,
+            `${intl.formatMessage({ id: id, defaultMessage: title })}`,
+          ],
+        ),
+      defaultValue:
+        config.blocks.blocksConfig.search.extensions.facetWidgets.types.find(
+          ({ isDefault }) => isDefault,
+        ).id,
     },
   },
   required: ['field'],

package/src/components/manage/Blocks/Table/Cell.jsx

@@ -157,9 +157,8 @@ class CellComponent extends Component {
               const selectionState = this.state.editorState.getSelection();
               const anchorKey = selectionState.getAnchorKey();
               const currentContent = this.state.editorState.getCurrentContent();
-              const currentContentBlock = currentContent.getBlockForKey(
-                anchorKey,
-              );
+              const currentContentBlock =
+                currentContent.getBlockForKey(anchorKey);
               const blockType = currentContentBlock.getType();
               if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(

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/Text/Edit.jsx

@@ -275,9 +275,8 @@ export class EditComponent extends Component {
               const selectionState = this.state.editorState.getSelection();
               const anchorKey = selectionState.getAnchorKey();
               const currentContent = this.state.editorState.getCurrentContent();
-              const currentContentBlock = currentContent.getBlockForKey(
-                anchorKey,
-              );
+              const currentContentBlock =
+                currentContent.getBlockForKey(anchorKey);
               const blockType = currentContentBlock.getType();
               if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(

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

@@ -1,16 +1,3 @@
-/**
- * View title/description block.
- * @module volto-slate/blocks/Title/TitleBlockView
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * View title block component.
- * @class View
- * @extends Component
- */
 const TitleBlockView = ({ properties, metadata }) => {
   return (
     <h1 className="documentFirstHeading">
@@ -19,14 +6,4 @@ const TitleBlockView = ({ properties, metadata }) => {
   );
 };
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-TitleBlockView.propTypes = {
-  properties: PropTypes.objectOf(PropTypes.any).isRequired,
-  metadata: PropTypes.objectOf(PropTypes.any),
-};
-
 export default TitleBlockView;

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

@@ -1,8 +1,37 @@
-const TableOfContentsSchema = ({ data }) => {
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  toc: {
+    id: 'toc',
+    defaultMessage: 'Table of Contents',
+  },
+  Title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  HideTitle: {
+    id: 'Hide title',
+    defaultMessage: 'Hide title',
+  },
+  Entries: {
+    id: 'Entries',
+    defaultMessage: 'Entries',
+  },
+  Ordered: {
+    id: 'Ordered',
+    defaultMessage: 'Ordered',
+  },
+  Sticky: {
+    id: 'Sticky',
+    defaultMessage: 'Sticky',
+  },
+});
+
+const TableOfContentsSchema = ({ data, intl }) => {
   const { variation = 'default' } = data;
 
   return {
-    title: 'Table of Contents',
+    title: intl.formatMessage(messages.toc),
     fieldsets: [
       {
         id: 'default',
@@ -10,21 +39,21 @@ const TableOfContentsSchema = ({ data }) => {
         fields: [
           'title',
           'hide_title',
-          ...(variation === 'default' ? ['ordered'] : []),
+          ...(variation === 'default' ? ['ordered'] : ['sticky']),
           'levels',
         ],
       },
     ],
     properties: {
       title: {
-        title: 'Block title',
+        title: intl.formatMessage(messages.Title),
       },
       hide_title: {
-        title: 'Hide title',
+        title: intl.formatMessage(messages.HideTitle),
         type: 'boolean',
       },
       levels: {
-        title: 'Entries',
+        title: intl.formatMessage(messages.Entries),
         isMulti: true,
         choices: [
           ['h1', 'h1'],
@@ -36,7 +65,11 @@ const TableOfContentsSchema = ({ data }) => {
         ],
       },
       ordered: {
-        title: 'Ordered',
+        title: intl.formatMessage(messages.Ordered),
+        type: 'boolean',
+      },
+      sticky: {
+        title: intl.formatMessage(messages.Sticky),
         type: 'boolean',
       },
     },