@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

package/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -1,134 +1,86 @@
-/**
- * Users controlpanel groups.
- * @module components/manage/Controlpanels/UsersControlpanelGroups
- */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { Icon } from '@plone/volto/components';
 import { canAssignRole } from '@plone/volto/helpers';
 
-/**
- * UsersControlpanelGroups class.
- * @class UsersControlpanelGroups
- * @extends Component
- */
-class RenderGroups extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    //single group
-    group: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      email: PropTypes.string,
-      groupname: PropTypes.string,
-      roles: PropTypes.arrayOf(PropTypes.string),
-    }).isRequired,
-
-    roles: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string,
-      }),
-    ).isRequired,
-    inheritedRole: PropTypes.array,
-    onDelete: PropTypes.func.isRequired,
-    isUserManager: PropTypes.bool.isRequired,
+const RenderGroups = (props) => {
+  const onChange = (event, { value }) => {
+    const [group, role] = value.split('.');
+    props.updateGroups(group, role);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sharing
-   */
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * @param {*} event
-   * @param {*} { value }
-   * @memberof UsersControlpanelUser
-   */
-  onChange(event, { value }) {
-    const [group, role] = value.split('&role=');
-    this.props.updateGroups(group, role);
-  }
-
-  /**
-   *@param {*}
-   *@returns {Boolean}
-   *@memberof RenderGroups
-   */
-  isAuthGroup = (roleId) => {
-    return this.props.inheritedRole.includes(roleId);
+  const isAuthGroup = (roleId) => {
+    return props.inheritedRole.includes(roleId);
   };
-
-  canDeleteGroup() {
-    if (this.props.isUserManager) return true;
-    return !this.props.group.roles.includes('Manager');
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Table.Row key={this.props.group.title}>
-        <Table.Cell>{this.props.group.groupname}</Table.Cell>
-        {this.props.roles.map((role) => (
-          <Table.Cell key={role.id}>
-            {this.props.inheritedRole &&
-            this.props.inheritedRole.includes(role.id) &&
-            this.props.group.roles.includes('Authenticated') ? (
-              <Icon
-                name={ploneSVG}
-                size="20px"
-                color="#007EB1"
-                title={'plone-svg'}
-              />
-            ) : (
-              <Checkbox
-                checked={
-                  this.props.group.id === 'AuthenticatedUsers'
-                    ? this.isAuthGroup(role.id)
-                    : this.props.group.roles.includes(role.id)
-                }
-                onChange={this.onChange}
-                value={`${this.props.group.id}&role=${role.id}`}
-                disabled={!canAssignRole(this.props.isUserManager, role)}
-              />
-            )}
-          </Table.Cell>
-        ))}
-        <Table.Cell textAlign="right">
-          {this.canDeleteGroup() && (
-            <Dropdown icon="ellipsis horizontal">
-              <Dropdown.Menu className="left">
-                <Dropdown.Item
-                  onClick={this.props.onDelete}
-                  value={this.props.group['@id']}
-                >
-                  <Icon name={trashSVG} size="15px" />
-                  <FormattedMessage id="Delete" defaultMessage="Delete" />
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
+  const canDeleteGroup = () => {
+    if (props.isUserManager) return true;
+    return !props.group.roles.includes('Manager');
+  };
+  return (
+    <Table.Row key={props.group.title}>
+      <Table.Cell>{props.group.groupname}</Table.Cell>
+      {props.roles.map((role) => (
+        <Table.Cell key={role.id}>
+          {props.inheritedRole &&
+          props.inheritedRole.includes(role.id) &&
+          props.group.roles.includes('Authenticated') ? (
+            <Icon
+              name={ploneSVG}
+              size="20px"
+              color="#007EB1"
+              title={'plone-svg'}
+            />
+          ) : (
+            <Checkbox
+              checked={
+                props.group.id === 'AuthenticatedUsers'
+                  ? isAuthGroup(role.id)
+                  : props.group.roles.includes(role.id)
+              }
+              onChange={onChange}
+              value={`${props.group.id}.${role.id}`}
+              disabled={!canAssignRole(props.isUserManager, role)}
+            />
           )}
         </Table.Cell>
-      </Table.Row>
-    );
-  }
-}
+      ))}
+      <Table.Cell textAlign="right">
+        {canDeleteGroup() && (
+          <Dropdown icon="ellipsis horizontal">
+            <Dropdown.Menu className="left">
+              <Dropdown.Item
+                onClick={props.onDelete}
+                value={props.group['@id']}
+              >
+                <Icon name={trashSVG} size="15px" />
+                <FormattedMessage id="Delete" defaultMessage="Delete" />
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </Table.Cell>
+    </Table.Row>
+  );
+};
+
+RenderGroups.propTypes = {
+  //single group
+  group: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    email: PropTypes.string,
+    groupname: PropTypes.string,
+    roles: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
 
-export default injectIntl(RenderGroups);
+  roles: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+    }),
+  ).isRequired,
+  inheritedRole: PropTypes.array,
+  onDelete: PropTypes.func.isRequired,
+};
+export default RenderGroups;

package/src/components/manage/Controlpanels/UndoControlpanel.jsx

@@ -389,7 +389,7 @@ class UndoControlpanel extends Component {
   }
 
   /**
-   * Handle next and prev buttons visiblity when transactions are sorted
+   * Handle next and prev buttons visibility when transactions are sorted
    * @method handleSortedNextPrevButtons
    * @returns {undefined}
    */
@@ -412,7 +412,7 @@ class UndoControlpanel extends Component {
   }
 
   /**
-   * Handle next and prev buttons visiblity when transactions are not sorted
+   * Handle next and prev buttons visibility when transactions are not sorted
    * @method handleNotSortedNextPrevButtons
    * @returns {undefined}
    */
@@ -435,7 +435,7 @@ class UndoControlpanel extends Component {
   }
 
   /**
-   * Handle next, prev buttons and table visiblity
+   * Handle next, prev buttons and table visibility
    * @method handleTableVisiblity
    * @returns {undefined}
    */

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { cloneDeep, uniqBy } from 'lodash';
+import React, { useEffect, useState, useMemo } from 'react';
+import { cloneDeep, uniqBy, debounce } from 'lodash';
 import { useIntl } from 'react-intl';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import jwtDecode from 'jwt-decode';
@@ -114,25 +114,41 @@ const ListingTemplate = ({
     matrix_options = [];
   }
 
+  const debouncedListUsers = useMemo(
+    () =>
+      debounce((query_user, groups_filter, userLimit) => {
+        dispatch(
+          listUsers({
+            search: query_user,
+            groups_filter: groups_filter.map((el) => el.value),
+            limit: userLimit,
+          }),
+        );
+      }, 300),
+    [dispatch],
+  );
+
   useEffect(() => {
     // Get users.
     if (show_users) {
-      dispatch(
-        listUsers({
-          search: query_user,
-          groups_filter: groups_filter.map((el) => el.value),
-          limit: userLimit,
-        }),
-      );
+      debouncedListUsers(query_user, groups_filter, userLimit);
     }
-  }, [dispatch, query_user, groups_filter, show_users, userLimit]);
+  }, [debouncedListUsers, query_user, groups_filter, show_users, userLimit]);
+
+  const debouncedListGroups = useMemo(
+    () =>
+      debounce((query_group) => {
+        dispatch(listGroups(query_group));
+      }, 300),
+    [dispatch],
+  );
 
   useEffect(() => {
     // Get matrix groups.
     if (show_matrix_options) {
-      dispatch(listGroups(query_group));
+      debouncedListGroups(query_group);
     }
-  }, [dispatch, query_group, show_matrix_options, groups_filter]);
+  }, [debouncedListGroups, query_group, show_matrix_options]);
 
   const onSelectOptionHandler = (selectedvalue, checked, singleClick) => {
     singleClick = singleClick ?? false;

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { Checkbox, Form, Input } from 'semantic-ui-react';
 
-import { isEqual } from 'lodash';
+import { isEqual, debounce } from 'lodash';
 
 import { messages } from '@plone/volto/helpers';
 import { listGroups } from '@plone/volto/actions'; // getRegistry
@@ -38,12 +38,20 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
     });
   }
 
+  const debouncedListGroups = useMemo(
+    () =>
+      debounce((query_group_filter) => {
+        dispatch(listGroups('', query_group_filter));
+      }, 300),
+    [dispatch],
+  );
+
   useEffect(() => {
     // TODO fetch group for at least query_group_filter.length > 1?
     if (!many_groups || (many_groups && query_group_filter.length > 1)) {
-      dispatch(listGroups('', query_group_filter));
+      debouncedListGroups(query_group_filter);
     }
-  }, [dispatch, many_groups, query_group_filter]);
+  }, [debouncedListGroups, many_groups, query_group_filter]);
 
   const onReset = (event) => {
     // event.preventDefault();

package/src/components/manage/Display/Display.jsx

@@ -1,14 +1,14 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { compose } from 'redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { getSchema, updateContent, getContent } from '@plone/volto/actions';
 import { getLayoutFieldname } from '@plone/volto/helpers';
-import { Icon } from '@plone/volto/components';
-import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
-import { defineMessages, injectIntl } from 'react-intl';
+import { usePrevious } from '@plone/volto/helpers';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -110,152 +110,96 @@ const customSelectStyles = {
   }),
 };
 
-/**
- * Display container class.
- * @class Display
- * @extends Component
- */
-class DisplaySelect extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getSchema: PropTypes.func.isRequired,
-    updateContent: PropTypes.func.isRequired,
-    getContent: PropTypes.func.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    pathname: PropTypes.string.isRequired,
-    layouts: PropTypes.arrayOf(PropTypes.string),
-    layout: PropTypes.string,
-    type: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    layouts: [],
-    layout: '',
-  };
-
-  state = {
-    selectedOption: {
-      value: this.props.layout,
-      label:
-        this.props.intl.formatMessage({
-          id: config.views.layoutViewsNamesMapping?.[this.props.layout],
-          defaultMessage:
-            config.views.layoutViewsNamesMapping?.[this.props.layout],
-        }) || this.props.layout,
-    },
-  };
-
-  componentDidMount() {
-    this.props.getSchema(this.props.type);
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      this.props.getSchema(nextProps.type);
+const DisplaySelect = (props) => {
+  const { pathname } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const loaded = useSelector((state) => state.content.update.loaded);
+  const layouts = useSelector((state) =>
+    state.schema.schema ? state.schema.schema.layouts : [],
+  );
+  const layout = useSelector((state) =>
+    state.content.data
+      ? state.content.data[getLayoutFieldname(state.content.data)]
+      : '',
+  );
+  const [selectedOption, setselectedOption] = useState({
+    value: layout,
+    label:
+      intl.formatMessage({
+        id: config.views.layoutViewsNamesMapping?.[layout],
+        defaultMessage: config.views.layoutViewsNamesMapping?.[layout],
+      }) || layout,
+  });
+
+  const type = useSelector((state) =>
+    state.content.data ? state.content.data['@type'] : '',
+  );
+  const prevloaded = usePrevious(loaded);
+  const prevpathname = usePrevious(pathname);
+
+  useEffect(() => {
+    dispatch(getSchema(type));
+  }, [dispatch, type]);
+  useEffect(() => {
+    if (pathname !== prevpathname) {
+      dispatch(getSchema(type));
     }
-    if (!this.props.loaded && nextProps.loaded) {
-      this.props.getContent(nextProps.pathname);
+    if (!prevloaded && loaded) {
+      dispatch(getContent(pathname));
     }
-  }
-
-  /**
-   * On set layout handler
-   * @method setLayout
-   * @param {Object} event Event object
-   * @returns {undefined}
-   */
-  setLayout = (selectedOption) => {
-    this.props.updateContent(this.props.pathname, {
-      layout: selectedOption.value,
-    });
-    this.setState({ selectedOption });
+  }, [dispatch, type, pathname, prevpathname, prevloaded, loaded]);
+
+  const setLayout = (selectedOption) => {
+    dispatch(
+      updateContent(pathname, {
+        layout: selectedOption.value,
+      }),
+    );
+    setselectedOption(selectedOption);
   };
 
-  selectValue = (option) => (
-    <Fragment>
-      <span className="Select-value-label">{option.label}</span>
-    </Fragment>
-  );
-
-  optionRenderer = (option) => (
-    <Fragment>
-      <span style={{ marginRight: 'auto' }}>{option.label}</span>
-      <Icon name={checkSVG} size="24px" />
-    </Fragment>
-  );
-
-  render() {
-    const { selectedOption } = this.state;
-    const Select = this.props.reactSelect.default;
-    const layoutsNames = config.views.layoutViewsNamesMapping;
-    const layoutOptions = this.props.layouts
-      .filter(
-        (layout) =>
-          Object.keys(config.views.contentTypesViews).includes(layout) ||
-          Object.keys(config.views.layoutViews).includes(layout),
-      )
-      .map((item) => ({
-        value: item,
-        label:
-          this.props.intl.formatMessage({
-            id: layoutsNames[item],
-            defaultMessage: layoutsNames[item],
-          }) || item,
-      }));
+  const Select = props.reactSelect.default;
+  const layoutsNames = config.views.layoutViewsNamesMapping;
+  const layoutOptions = layouts
+    .filter(
+      (layout) =>
+        Object.keys(config.views.contentTypesViews).includes(layout) ||
+        Object.keys(config.views.layoutViews).includes(layout),
+    )
+    .map((item) => ({
+      value: item,
+      label:
+        intl.formatMessage({
+          id: layoutsNames[item],
+          defaultMessage: layoutsNames[item],
+        }) || item,
+    }));
+
+  return layoutOptions?.length > 1 ? (
+    <FormFieldWrapper
+      id="display-select"
+      title={intl.formatMessage(messages.Viewmode)}
+      {...props}
+    >
+      <Select
+        name="display-select"
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={layoutOptions}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        onChange={setLayout}
+        defaultValue={selectedOption}
+        isSearchable={false}
+      />
+    </FormFieldWrapper>
+  ) : null;
+};
 
-    return layoutOptions?.length > 1 ? (
-      <FormFieldWrapper
-        id="display-select"
-        title={this.props.intl.formatMessage(messages.Viewmode)}
-        {...this.props}
-      >
-        <Select
-          name="display-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          options={layoutOptions}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          onChange={this.setLayout}
-          defaultValue={selectedOption}
-          isSearchable={false}
-        />
-      </FormFieldWrapper>
-    ) : null;
-  }
-}
+DisplaySelect.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  injectLazyLibs('reactSelect'),
-  connect(
-    (state) => ({
-      loaded: state.content.update.loaded,
-      layouts: state.schema.schema ? state.schema.schema.layouts : [],
-      layout: state.content.data
-        ? state.content.data[getLayoutFieldname(state.content.data)]
-        : '',
-      layout_fieldname: state.content.data
-        ? getLayoutFieldname(state.content.data)
-        : '',
-      type: state.content.data ? state.content.data['@type'] : '',
-    }),
-    { getSchema, updateContent, getContent },
-  ),
-)(DisplaySelect);
+export default compose(injectLazyLibs('reactSelect'))(DisplaySelect);

package/src/components/manage/Display/Display.stories.jsx

@@ -0,0 +1,46 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import DisplayComponent from './Display';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlDisplayComponent = injectIntl(DisplayComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        content: {
+          update: { loaded: true },
+          data: { layout: 'summary_view', '@type': 'Folder' },
+        },
+        schema: {
+          schema: {
+            layouts: ['summary_view', 'listing_view'],
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlDisplayComponent {...args} pathname="/test" />
+    </Wrapper>
+  );
+}
+
+export const Display = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/Display',
+  component: Display,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, extractInvariantErrors } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { asyncConnect, hasApiExpander } from '@plone/volto/helpers';
@@ -208,9 +208,7 @@ class Edit extends Component {
       const errorsList = tryParseJSON(error);
       let erroMessage;
       if (Array.isArray(errorsList)) {
-        const invariantErrors = errorsList
-          .filter((errorItem) => !('field' in errorItem))
-          .map((errorItem) => errorItem['message']);
+        const invariantErrors = extractInvariantErrors(errorsList);
         if (invariantErrors.length > 0) {
           // Plone invariant validation message.
           erroMessage = invariantErrors.join(' - ');