@plone/volto 18.0.0-alpha.8 → 18.0.0

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

@@ -1,15 +1,8 @@
-/**
- * Edit image block.
- * @module components/manage/Blocks/Image/Edit
- */
-
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
 
 import { LeadImageSidebar, SidebarPortal } from '@plone/volto/components';
 import config from '@plone/volto/registry';
@@ -23,124 +16,79 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit image block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    properties: PropTypes.objectOf(PropTypes.any).isRequired,
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Align block handler
-   * @method onAlignBlock
-   * @param {string} align Alignment option
-   * @returns {undefined}
-   */
-  onAlignBlock(align) {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      align,
-    });
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  node = React.createRef();
+const Edit = (props) => {
+  const intl = useIntl();
+  const { data, properties, selected } = props;
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const Image = config.getComponent({ name: 'Image' }).component;
-    const { data, properties } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
+  const placeholder = () =>
+    data.placeholder || intl.formatMessage(messages.ImageBlockInputPlaceholder);
 
-    const hasImage = !!properties.image;
-    const hasImageData = hasImage && !!properties.image.data;
-    const className = cx('responsive', { 'full-image': data.align === 'full' });
-    const altText = data.image_caption || properties.image_caption || '';
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const hasImage = !!properties.image;
+  const hasImageData = hasImage && !!properties.image.data;
+  const className = cx('responsive', { 'full-image': data.align === 'full' });
+  const altText = data.image_caption || properties.image_caption || '';
 
-    return (
-      <div
-        className={cx(
-          'block image align',
-          {
-            center: !Boolean(data.align),
-          },
-          data.align,
-        )}
-      >
-        {!hasImage && (
-          <Message>
-            <center>
-              <img src={imageBlockSVG} alt="" />
-              <div className="message-text">{placeholder}</div>
-            </center>
-          </Message>
-        )}
-        {hasImage && hasImageData && (
-          <img
-            className={className}
-            src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
-            width={properties.image.width}
-            height={properties.image.height}
-            alt={altText}
-            style={{
-              aspectRatio: `${properties.image.width}/${properties.image.height}`,
-            }}
-          />
-        )}
-        {hasImage && !hasImageData && (
-          <Image
-            className={className}
-            item={properties}
-            imageField="image"
-            sizes={(() => {
-              if (data.align === 'full' || data.align === 'center')
-                return '100vw';
-              if (data.align === 'left' || data.align === 'right')
-                return '50vw';
-              return undefined;
-            })()}
-            alt={altText}
-          />
-        )}
-        <SidebarPortal selected={this.props.selected}>
-          <LeadImageSidebar {...this.props} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+  return (
+    <div
+      className={cx(
+        'block image align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {!hasImage && (
+        <Message>
+          <center>
+            <img src={imageBlockSVG} alt="" />
+            <div className="message-text">{placeholder}</div>
+          </center>
+        </Message>
+      )}
+      {hasImage && hasImageData && (
+        <img
+          className={className}
+          src={`data:${properties.image['content-type']};base64,${properties.image.data}`}
+          width={properties.image.width}
+          height={properties.image.height}
+          alt={altText}
+          style={{
+            aspectRatio: `${properties.image.width}/${properties.image.height}`,
+          }}
+        />
+      )}
+      {hasImage && !hasImageData && (
+        <Image
+          className={className}
+          item={properties}
+          imageField="image"
+          sizes={(() => {
+            return data.align === 'full' || data.align === 'center'
+              ? '100vw'
+              : data.align === 'left' || data.align === 'right'
+                ? '50vw'
+                : undefined;
+          })()}
+          alt={altText}
+        />
+      )}
+      <SidebarPortal selected={selected}>
+        <LeadImageSidebar {...props} />
+      </SidebarPortal>
+    </div>
+  );
+};
 
-export default compose(injectIntl)(Edit);
+export default Edit;
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  pathname: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  openObjectBrowser: PropTypes.func.isRequired,
+};

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,11 +1,18 @@
 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, navRoot, contentType } =
-    props;
+  const {
+    data,
+    block,
+    blocksConfig,
+    blocksErrors,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -28,6 +35,7 @@ const ListingData = (props) => {
       block={block}
       navRoot={navRoot}
       contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };

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

@@ -1,15 +1,37 @@
 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);
+
+  if (!data.querystring) {
+    return [
+      async () => {
+        return null;
+      },
+    ];
+  }
+
   return [
     dispatch(
       getQueryStringResults(
@@ -20,7 +42,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,8 @@ const messages = defineMessages({
 });
 
 const MapsSidebar = (props) => {
-  const { data, block, onChangeBlock, navRoot, contentType } = props;
+  const { data, block, blocksErrors, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = MapsSchema({ ...props, intl });
 
@@ -44,6 +45,7 @@ const MapsSidebar = (props) => {
           block={block}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       )}
     </>

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';
@@ -22,6 +23,7 @@ const messages = defineMessages({
 const SearchBlockEdit = (props) => {
   const {
     block,
+    blocksErrors,
     onChangeBlock,
     data,
     selected,
@@ -63,9 +65,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 (
     <>
@@ -87,6 +95,7 @@ const SearchBlockEdit = (props) => {
           formData={data}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       </SidebarPortal>
     </>

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

@@ -49,10 +49,26 @@ const applyDefaults = (data, root) => {
       v: root || '/',
     },
   ];
+
+  const searchBySearchableText = data.query.filter(
+    (item) => item['i'] === 'SearchableText',
+  ).length;
+
+  const sort_on = data?.sort_on
+    ? { sort_on: data.sort_on }
+    : searchBySearchableText === 0
+      ? { sort_on: 'effective' }
+      : {};
+  const sort_order = data?.sort_order
+    ? { sort_order: data.sort_order }
+    : searchBySearchableText === 0
+      ? { sort_order: 'descending' }
+      : {};
+
   return {
     ...data,
-    sort_on: data?.sort_on || 'effective',
-    sort_order: data?.sort_order || 'descending',
+    ...sort_on,
+    ...sort_order,
     query: data?.query?.length ? data.query : defaultQuery,
   };
 };

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

@@ -21,6 +21,7 @@ const CheckboxFacet = (props) => {
         {choices.map(({ label, value }, i) => (
           <div className="entry" key={value}>
             <Checkbox
+              id={value}
               disabled={isEditMode}
               label={label}
               radio={!isMulti}
@@ -40,8 +41,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,
     },