@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.30

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

@@ -9,7 +9,7 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-export const View = ({ className, data, detached, properties }) => {
+export const View = ({ className, data, detached, properties, style }) => {
   const href = data?.href?.[0]?.['@id'] || '';
 
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -25,6 +25,7 @@ export const View = ({ className, data, detached, properties }) => {
         data.align,
         className,
       )}
+      style={style}
     >
       {data.url && (
         <>
@@ -50,21 +51,21 @@ export const View = ({ className, data, detached, properties }) => {
                   data.image_scales
                     ? undefined
                     : isInternalURL(data.url)
-                    ? // Backwards compat in the case that the block is storing the full server URL
-                      (() => {
-                        if (data.size === 'l')
+                      ? // Backwards compat in the case that the block is storing the full server URL
+                        (() => {
+                          if (data.size === 'l')
+                            return `${flattenToAppURL(data.url)}/@@images/image`;
+                          if (data.size === 'm')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/preview`;
+                          if (data.size === 's')
+                            return `${flattenToAppURL(
+                              data.url,
+                            )}/@@images/image/mini`;
                           return `${flattenToAppURL(data.url)}/@@images/image`;
-                        if (data.size === 'm')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/preview`;
-                        if (data.size === 's')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/mini`;
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
-                      })()
-                    : data.url
+                        })()
+                      : data.url
                 }
                 sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
 import { Accordion, Grid, Segment } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { Icon, Image } from '@plone/volto/components';
 import {
   CheckboxWidget,
-  Icon,
-  Image,
   TextWidget,
-} from '@plone/volto/components';
+} from '@plone/volto/components/manage/Widgets';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
 

package/src/components/manage/Blocks/LeadImage/LeadImageSidebar.test.jsx

@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import LeadImageSidebar from './LeadImageSidebar';
 
+jest.mock('@plone/volto/components/manage/Widgets');
+
 const mockStore = configureStore();
 
 test('renders a Lead Image block Sidebar component', () => {

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { BlockDataForm } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 const ListingData = (props) => {
-  const { data, block, blocksConfig, onChangeBlock } = props;
+  const { data, block, blocksConfig, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -25,6 +26,8 @@ const ListingData = (props) => {
       formData={data}
       blocksConfig={blocksConfig}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

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

@@ -6,11 +6,12 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import { ListingBlockBody as ListingBody } from '@plone/volto/components';
 
 const View = (props) => {
-  const { data, path, pathname, className } = props;
+  const { data, path, pathname, className, style } = props;
 
   return (
     <div
       className={cx('block listing', data.variation || 'default', className)}
+      style={style}
     >
       <ListingBody {...props} path={path ?? pathname} />
     </div>

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,15 +1,29 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
+import qs from 'query-string';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const getCurrentPage = (location, id) => {
+  const pageQueryParam = qs.parse(location.search);
+  switch (Object.keys(pageQueryParam).length) {
+    case 0:
+      return 1;
+    case 1:
+      // when there is only one query param, it could be the simple page number or the sluggified block id
+      return pageQueryParam['page'] || pageQueryParam[slugify(`page-${id}`)];
+    default:
+      return pageQueryParam[slugify(`page-${id}`)];
+  }
+};
+
+export default function getListingBlockAsyncData(props) {
+  const { data, path, location, id, dispatch, blocksConfig, content } = props;
 
-export default function getListingBlockAsyncData({
-  dispatch,
-  id,
-  data,
-  path,
-  blocksConfig,
-}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
+  const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
+  const currentPage = getCurrentPage(location, id);
+
   return [
     dispatch(
       getQueryStringResults(
@@ -20,7 +34,8 @@ export default function getListingBlockAsyncData({
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        id,
+        subrequestID,
+        currentPage,
       ),
     ),
   ];

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

@@ -67,19 +67,19 @@ export default function withQuerystringResults(WrappedComponent) {
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[subrequestID].total / b_size)
-      : 0;
+        ? Math.ceil(querystringResults[subrequestID].total / b_size)
+        : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.prev
-      : null;
+        ? querystringResults[subrequestID].batching?.prev
+        : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.next
-      : null;
+        ? querystringResults[subrequestID].batching?.next
+        : null;
 
     const isImageGallery =
       (!data.variation && data.template === 'imageGallery') ||

package/src/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { MapsSchema } from './schema';
-import { BlockDataForm } from '@plone/volto/components';
 import { useIntl, defineMessages } from 'react-intl';
 import globeSVG from '@plone/volto/icons/globe.svg';
 import { Icon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { Segment } from 'semantic-ui-react';
 
 const messages = defineMessages({
@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const MapsSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = MapsSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const MapsSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

package/src/components/manage/Blocks/Maps/MapsSidebar.test.jsx

@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import MapsSidebar from './MapsSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {

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

@@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
-import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
@@ -26,6 +27,8 @@ const SearchBlockEdit = (props) => {
     data,
     selected,
     intl,
+    navRoot,
+    contentType,
     onTriggerSearch,
     querystring = {},
   } = props;
@@ -61,9 +64,15 @@ const SearchBlockEdit = (props) => {
   const { query = {} } = data || {};
   // We don't need deep compare here, as this is just json serializable data.
   const deepQuery = JSON.stringify(query);
+
   useEffect(() => {
-    onTriggerSearch();
-  }, [deepQuery, onTriggerSearch]);
+    onTriggerSearch(
+      '',
+      data?.facets,
+      data?.query?.sort_on,
+      data?.query?.sort_order,
+    );
+  }, [deepQuery, onTriggerSearch, data]);
 
   return (
     <>
@@ -83,6 +92,8 @@ const SearchBlockEdit = (props) => {
           }}
           onChangeBlock={onChangeBlock}
           formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       </SidebarPortal>
     </>

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

@@ -48,8 +48,8 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

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

@@ -40,8 +40,8 @@ const CheckboxFacet = (props) => {
                         ...(checked ? [value] : []),
                       ]
                     : checked
-                    ? value
-                    : null,
+                      ? value
+                      : null,
                 )
               }
             />

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

@@ -22,6 +22,18 @@ const defaultShowFacet = (index) => {
     : values && Object.keys(values).length > 0;
 };
 
+export const sortFacetChoices = (choices) => {
+  const sorted_choices = choices.sort((a, b) =>
+    typeof a.label === 'string' && typeof b.label === 'string'
+      ? a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })
+      : typeof a.label === 'number' && typeof b.label == 'number'
+        ? a.label - b.label
+        : 0,
+  );
+
+  return sorted_choices;
+};
+
 const Facets = (props) => {
   const [hidden, setHidden] = useState(true);
   const {
@@ -81,9 +93,7 @@ const Facets = (props) => {
                 : true,
             );
 
-          choices = choices.sort((a, b) =>
-            a.label.localeCompare(b.label, 'en', { sensitivity: 'base' }),
-          );
+          choices = sortFacetChoices(choices);
 
           const isMulti = facetSettings.multiple;
           const selectedValue = facets[facetSettings?.field?.value];
@@ -144,8 +154,8 @@ const Facets = (props) => {
                 ? intl.formatMessage(messages.showFilters)
                 : intl.formatMessage(messages.moreFilters)
               : advancedFilters === 2
-              ? intl.formatMessage(messages.hideFilters)
-              : intl.formatMessage(messages.lessFilters)}
+                ? intl.formatMessage(messages.hideFilters)
+                : intl.formatMessage(messages.lessFilters)}
           </Button>
         </Grid.Column>
       )}

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

@@ -0,0 +1,76 @@
+import { sortFacetChoices } from './Facets';
+
+describe('sortFacetChoices', () => {
+  it('sort choices with string labels', () => {
+    const choices = [
+      { label: 'b' },
+      { label: 'd' },
+      { label: 'a' },
+      { label: 'c' },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 'a' },
+      { label: 'b' },
+      { label: 'c' },
+      { label: 'd' },
+    ]);
+  });
+  it('sort choices with string labels with accents (1)', () => {
+    const choices = [
+      { label: 'éventa' },
+      { label: 'portal' },
+      { label: 'newsitem' },
+      { label: 'eventb' },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 'éventa' },
+      { label: 'eventb' },
+      { label: 'newsitem' },
+      { label: 'portal' },
+    ]);
+  });
+
+  it('sort choices with string labels with accents (2)', () => {
+    const choices = [
+      { label: 'eventa' },
+      { label: 'portal' },
+      { label: 'newsitem' },
+      { label: 'éventb' },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 'eventa' },
+      { label: 'éventb' },
+      { label: 'newsitem' },
+      { label: 'portal' },
+    ]);
+  });
+
+  it('sort choices with int labels', () => {
+    const choices = [{ label: 7 }, { label: 3 }, { label: 1 }, { label: 4 }];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 1 },
+      { label: 3 },
+      { label: 4 },
+      { label: 7 },
+    ]);
+  });
+  it('sort choices with labels of any kind', () => {
+    const choices = [
+      { label: 7 },
+      { label: '1' },
+      { label: 'b' },
+      { label: 5 },
+    ];
+    const sortedChoices = sortFacetChoices(choices);
+    expect(sortedChoices).toStrictEqual([
+      { label: 7 },
+      { label: '1' },
+      { label: 'b' },
+      { label: 5 },
+    ]);
+  });
+});

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

@@ -48,8 +48,8 @@ export const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },
@@ -98,8 +98,8 @@ export const sortOnSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

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

@@ -96,9 +96,21 @@ function normalizeState({
   const { types: facetWidgetTypes } =
     config.blocks.blocksConfig.search.extensions.facetWidgets;
 
+  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
+  // because we already initialize the facet with those values.
+  const configuredFacets = facetSettings
+    ? facetSettings.map((facet) => facet?.field?.value)
+    : [];
+
+  let copyOfQuery = query.query ? [...query.query] : [];
+
+  const queryWithoutFacet = copyOfQuery.filter((query) => {
+    return !configuredFacets.includes(query.i);
+  });
+
   const params = {
     query: [
-      ...(query.query || []),
+      ...(queryWithoutFacet || []),
       ...(facetSettings || []).map((facet) => {
         if (!facet?.field) return null;
 
@@ -261,14 +273,34 @@ const withSearch = (options) => (WrappedComponent) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const configuredFacets =
       data.facets?.map((facet) => facet?.field?.value) || [];
+
+    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
+    // facet.
+    const queryData = data?.query?.query
+      ? deserializeQuery(JSON.stringify(data?.query?.query))
+      : [];
+
+    let intializeFacetWithQueryValue = [];
+
+    for (let value of configuredFacets) {
+      const queryString = queryData.find((item) => item.i === value);
+      if (queryString) {
+        intializeFacetWithQueryValue = [
+          ...intializeFacetWithQueryValue,
+          { [queryString.i]: queryString.v },
+        ];
+      }
+    }
+
     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
-
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+        ...intializeFacetWithQueryValue,
         // 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
@@ -288,8 +320,17 @@ const withSearch = (options) => (WrappedComponent) => {
     );
     const previousUrlQuery = usePrevious(urlQuery);
 
+    // During first render the previousUrlQuery is undefined and urlQuery
+    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // to set the facet at first render.
+    const preventOverrideOfFacetState =
+      previousUrlQuery === undefined && urlQuery.length === 0;
+
     React.useEffect(() => {
-      if (!isEqual(urlQuery, previousUrlQuery)) {
+      if (
+        !isEqual(urlQuery, previousUrlQuery) &&
+        !preventOverrideOfFacetState
+      ) {
         setFacets(
           Object.assign(
             {},
@@ -319,6 +360,7 @@ const withSearch = (options) => (WrappedComponent) => {
       locationSearchData,
       multiFacets,
       previousUrlQuery,
+      preventOverrideOfFacetState,
     ]);
 
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
@@ -362,12 +404,12 @@ const withSearch = (options) => (WrappedComponent) => {
               query: data.query || {},
               facets: toSearchFacets || facets,
               searchText: toSearchText ? toSearchText.trim() : '',
-              sortOn: toSortOn || sortOn,
+              sortOn: toSortOn || undefined,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
             });
             if (toSearchFacets) setFacets(toSearchFacets);
-            if (toSortOn) setSortOn(toSortOn);
+            if (toSortOn) setSortOn(toSortOn || undefined);
             if (toSortOrder) setSortOrder(toSortOrder);
             setSearchData(newSearchData);
             setLocationSearchData(getSearchFields(newSearchData));

package/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { compose } from 'redux';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import withQueryString from './../hocs/withQueryString';
 import { defineMessages } from 'react-intl';
 

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button } from 'semantic-ui-react';
-import { BlockDataForm, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { isEmpty } from 'lodash';
 
 import trashSVG from '@plone/volto/icons/delete.svg';
@@ -14,7 +15,8 @@ const messages = defineMessages({
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
 
   const reset = () => {
@@ -64,6 +66,8 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

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

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode } = props;
+  const { className, data, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -27,7 +27,7 @@ const TeaserDefaultTemplate = (props) => {
   const { openExternalLinkInNewTab } = config.settings;
 
   return (
-    <div className={cx('block teaser', className)}>
+    <div className={cx('block teaser', className)} style={style}>
       <>
         {!href && isEditMode && (
           <Message>

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import { SidebarPortal } from '@plone/volto/components';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import TableOfContentsSchema from './Schema';
 import View from './View';
@@ -27,6 +27,8 @@ class Edit extends Component {
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
             block={this.props.block}
+            navRoot={this.props.navRoot}
+            contentType={this.props.contentType}
           />
         </SidebarPortal>
       </>

package/src/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { VideoBlockSchema } from './schema';
-import { BlockDataForm } from '@plone/volto/components';
 import { Segment } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
 
 const messages = defineMessages({
@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const VideoSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

package/src/components/manage/Blocks/Video/VideoSidebar.test.jsx

@@ -5,6 +5,8 @@ import { Provider } from 'react-intl-redux';
 
 import VideoSidebar from './VideoSidebar';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 test('renders an Image Block Sidebar component', () => {