@plone/volto 17.0.0-alpha.26 → 17.0.0-alpha.28

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -8,23 +8,25 @@ import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
-  };
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
 
-  // NOTE: onChangeBlock here is not "really" implemented
+    // NOTE: onChangeBlock here is not "really" implemented
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeBlock={(block, data) => onChangeFormData(data)}
-      formData={formData}
-    />
-  );
-};
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeBlock={(block, data) => onChangeFormData(data)}
+        formData={formData}
+      />
+    );
+  };
 
 beforeAll(() => {
   config.widgets = {

package/src/components/manage/Form/Form.jsx

@@ -229,9 +229,8 @@ class Form extends Component {
     let activeIndex = 0;
 
     if (requestError && prevProps.requestError !== requestError) {
-      errors = FormValidation.giveServerErrorsToCorrespondingFields(
-        requestError,
-      );
+      errors =
+        FormValidation.giveServerErrorsToCorrespondingFields(requestError);
       activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,

package/src/components/manage/Form/InlineForm.test.jsx

@@ -19,22 +19,24 @@ function NewBaseWidget(name) {
   );
 }
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
+
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeFormData={onChangeFormData}
+        formData={formData}
+      />
+    );
   };
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeFormData={onChangeFormData}
-      formData={formData}
-    />
-  );
-};
-
 beforeAll(() => {
   config.widgets.default = NewBaseWidget('default');
   config.widgets.type.boolean = NewBaseWidget('boolean');

package/src/components/manage/LockingToastsFactory/LockingToastsFactory.jsx

@@ -12,8 +12,7 @@ const messages = defineMessages({
     defaultMessage: 'This item was locked by {creator} on {date}',
   },
   unlockItem: {
-    id:
-      'If you are certain this user has abandoned the object, you may unlock the object. You will then be able to edit it.',
+    id: 'If you are certain this user has abandoned the object, you may unlock the object. You will then be able to edit it.',
     defaultMessage:
       'If you are certain this user has abandoned the object, you may unlock the object. You will then be able to edit it.',
   },

package/src/components/manage/Sharing/Sharing.jsx

@@ -39,6 +39,10 @@ const messages = defineMessages({
     id: 'Search for user or group',
     defaultMessage: 'Search for user or group',
   },
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
   inherit: {
     id: 'Inherit permissions from higher levels',
     defaultMessage: 'Inherit permissions from higher levels',
@@ -343,6 +347,9 @@ class SharingComponent extends Component {
                           icon: 'search',
                           loading: isLoading,
                           disabled: isLoading,
+                          'aria-label': this.props.intl.formatMessage(
+                            messages.search,
+                          ),
                         }}
                         placeholder={this.props.intl.formatMessage(
                           messages.searchForUserOrGroup,

package/src/components/manage/Sidebar/Sidebar.jsx

@@ -1,15 +1,10 @@
-/**
- * Sidebar component.
- * @module components/manage/Sidebar/Sidebar
- */
-
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Tab } from 'semantic-ui-react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { compose } from 'redux';
 import { withCookies } from 'react-cookie';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import cx from 'classnames';
 import { BodyClass, getCookieOptions } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
@@ -41,101 +36,45 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Sidebar container class.
- * @class Sidebar
- * @extends Component
- */
-class Sidebar extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    documentTab: PropTypes.bool,
-    blockTab: PropTypes.bool,
-    settingsTab: PropTypes.bool,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    documentTab: true,
-    blockTab: true,
-    settingsTab: false,
-  };
+const Sidebar = (props) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const { cookies, content, documentTab, blockTab, settingsTab } = props;
+  const [expanded, setExpanded] = useState(
+    cookies.get('sidebar_expanded') !== 'false',
+  );
+  const [size] = useState(0);
+  const [showFull, setshowFull] = useState(true);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sidebar
-   */
-  constructor(props) {
-    super(props);
-    const { cookies } = props;
-    this.onToggleExpanded = this.onToggleExpanded.bind(this);
-    this.onToggleFullSize = this.onToggleFullSize.bind(this);
-    this.onTabChange = this.onTabChange.bind(this);
-    this.state = {
-      expanded: cookies.get('sidebar_expanded') !== 'false',
-      size: 0,
-      showFull: true,
-      showFullToolbarExpanded: true,
-    };
-  }
+  const tab = useSelector((state) => state.sidebar.tab);
+  const toolbarExpanded = useSelector((state) => state.toolbar.expanded);
+  const type = useSelector((state) => state.schema?.schema?.title);
 
-  /**
-   * On toggle expanded handler
-   * also reset sidebar since this has mimized it
-   * @method onToggleExpanded
-   * @returns {undefined}
-   */
-  onToggleExpanded() {
-    const { cookies } = this.props;
-    cookies.set('sidebar_expanded', !this.state.expanded, getCookieOptions());
-    this.setState({
-      expanded: !this.state.expanded,
-    });
-    this.resetFullSizeSidebar();
-  }
+  const onToggleExpanded = () => {
+    cookies.set('sidebar_expanded', !expanded, getCookieOptions());
+    setExpanded(!expanded);
+    resetFullSizeSidebar();
+  };
 
-  /**
-   * Remove fullsize classes
-   * Reset state
-   */
-  resetFullSizeSidebar() {
-    if (!this.state.expanded) {
+  const resetFullSizeSidebar = useCallback(() => {
+    if (!expanded) {
       const currentResizer = document.querySelector('#sidebar');
-      const sidebarContainer = currentResizer.getElementsByClassName(
-        'sidebar-container',
-      )[0];
+      const sidebarContainer =
+        currentResizer.getElementsByClassName('sidebar-container')[0];
       sidebarContainer.classList.remove('full-size');
       sidebarContainer.classList.remove('no-toolbar');
-
-      this.setState({
-        showFull: true,
-      });
+      setshowFull(true);
     }
-  }
+  }, [expanded]);
 
-  /**
-   * Set width of sibar to 100% minus the width of the toolbar or reset to
-   * initial size, by adding css classes
-   */
-  onToggleFullSize() {
+  const onToggleFullSize = useCallback(() => {
     const currentResizer = document.querySelector('#sidebar');
-    const sidebarContainer = currentResizer.getElementsByClassName(
-      'sidebar-container',
-    )[0];
+    const sidebarContainer =
+      currentResizer.getElementsByClassName('sidebar-container')[0];
 
-    if (this.state.showFull) {
+    if (showFull) {
       sidebarContainer.classList.add('full-size');
-      if (!this.props.toolbarExpanded) {
+      if (!toolbarExpanded) {
         sidebarContainer.classList.add('no-toolbar');
       } else {
         sidebarContainer.classList.remove('no-toolbar');
@@ -144,139 +83,119 @@ class Sidebar extends Component {
       sidebarContainer.classList.remove('full-size');
       sidebarContainer.classList.remove('no-toolbar');
     }
+    setshowFull(!showFull);
+  }, [showFull, toolbarExpanded]);
 
-    this.setState((prevState) => ({
-      showFull: !prevState.showFull,
-    }));
-  }
-
-  /**
-   * On tab change
-   * @method onTabChange
-   * @param {Object} event Event object
-   * @param {Object} data Data object
-   * @returns {undefined}
-   */
-  onTabChange(event, data) {
+  const onTabChange = (event, data) => {
     event.nativeEvent.stopImmediatePropagation();
-    this.props.setSidebarTab(data.activeIndex);
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { expanded } = this.state;
+    dispatch(setSidebarTab(data.activeIndex));
+  };
 
-    return (
-      <Fragment>
-        <BodyClass
-          className={expanded ? 'has-sidebar' : 'has-sidebar-collapsed'}
+  return (
+    <Fragment>
+      <BodyClass
+        className={expanded ? 'has-sidebar' : 'has-sidebar-collapsed'}
+      />
+      <div
+        className={cx('sidebar-container', { collapsed: !expanded })}
+        style={size > 0 ? { width: size } : null}
+      >
+        <Button
+          aria-label={
+            expanded
+              ? intl.formatMessage(messages.shrinkSidebar)
+              : intl.formatMessage(messages.expandSidebar)
+          }
+          className={
+            content && content.review_state
+              ? `${content.review_state} trigger`
+              : 'trigger'
+          }
+          onClick={onToggleExpanded}
         />
-        <div
-          className={cx('sidebar-container', { collapsed: !expanded })}
-          style={this.state.size > 0 ? { width: this.state.size } : null}
+        <Button
+          className="full-size-sidenav-btn"
+          onClick={onToggleFullSize}
+          aria-label="full-screen-sidenav"
         >
-          <Button
-            aria-label={
-              expanded
-                ? this.props.intl.formatMessage(messages.shrinkSidebar)
-                : this.props.intl.formatMessage(messages.expandSidebar)
-            }
-            className={
-              this.props.content && this.props.content.review_state
-                ? `${this.props.content.review_state} trigger`
-                : 'trigger'
-            }
-            onClick={this.onToggleExpanded}
+          <Icon
+            className="full-size-icon"
+            name={showFull ? expandSVG : collapseSVG}
           />
-          <Button
-            className="full-size-sidenav-btn"
-            onClick={this.onToggleFullSize}
-            aria-label="full-screen-sidenav"
-          >
-            <Icon
-              className="full-size-icon"
-              name={this.state.showFull ? expandSVG : collapseSVG}
-            />
-          </Button>
-          <Tab
-            menu={{
-              secondary: true,
-              pointing: true,
-              attached: true,
-              tabular: true,
-              className: 'formtabs',
-            }}
-            className="tabs-wrapper"
-            renderActiveOnly={false}
-            activeIndex={this.props.tab}
-            onTabChange={this.onTabChange}
-            panes={[
-              !!this.props.documentTab && {
-                menuItem:
-                  this.props.type ||
-                  this.props.intl.formatMessage(messages.document),
-                pane: (
-                  <Tab.Pane
-                    key="metadata"
-                    className="tab-wrapper"
-                    id="sidebar-metadata"
+        </Button>
+        <Tab
+          menu={{
+            secondary: true,
+            pointing: true,
+            attached: true,
+            tabular: true,
+            className: 'formtabs',
+          }}
+          className="tabs-wrapper"
+          renderActiveOnly={false}
+          activeIndex={tab}
+          onTabChange={onTabChange}
+          panes={[
+            !!documentTab && {
+              menuItem: type || intl.formatMessage(messages.document),
+              pane: (
+                <Tab.Pane
+                  key="metadata"
+                  className="tab-wrapper"
+                  id="sidebar-metadata"
+                />
+              ),
+            },
+            !!blockTab && {
+              menuItem: intl.formatMessage(messages.block),
+              pane: (
+                <Tab.Pane
+                  key="properties"
+                  className="tab-wrapper"
+                  id="sidebar-properties"
+                >
+                  <Icon
+                    className="tab-forbidden"
+                    name={forbiddenSVG}
+                    size="48px"
                   />
-                ),
-              },
-              !!this.props.blockTab && {
-                menuItem: this.props.intl.formatMessage(messages.block),
-                pane: (
-                  <Tab.Pane
-                    key="properties"
-                    className="tab-wrapper"
-                    id="sidebar-properties"
-                  >
-                    <Icon
-                      className="tab-forbidden"
-                      name={forbiddenSVG}
-                      size="48px"
-                    />
-                  </Tab.Pane>
-                ),
-              },
-              !!this.props.settingsTab && {
-                menuItem: this.props.intl.formatMessage(messages.settings),
-                pane: (
-                  <Tab.Pane
-                    key="settings"
-                    className="tab-wrapper"
-                    id="sidebar-settings"
-                  >
-                    <Icon
-                      className="tab-forbidden"
-                      name={forbiddenSVG}
-                      size="48px"
-                    />
-                  </Tab.Pane>
-                ),
-              },
-            ].filter((tab) => tab)}
-          />
-        </div>
-        <div className={this.state.expanded ? 'pusher expanded' : 'pusher'} />
-      </Fragment>
-    );
-  }
-}
+                </Tab.Pane>
+              ),
+            },
+            !!settingsTab && {
+              menuItem: intl.formatMessage(messages.settings),
+              pane: (
+                <Tab.Pane
+                  key="settings"
+                  className="tab-wrapper"
+                  id="sidebar-settings"
+                >
+                  <Icon
+                    className="tab-forbidden"
+                    name={forbiddenSVG}
+                    size="48px"
+                  />
+                </Tab.Pane>
+              ),
+            },
+          ].filter((tab) => tab)}
+        />
+      </div>
+      <div className={expanded ? 'pusher expanded' : 'pusher'} />
+    </Fragment>
+  );
+};
+
+Sidebar.propTypes = {
+  documentTab: PropTypes.bool,
+  blockTab: PropTypes.bool,
+  settingsTab: PropTypes.bool,
+};
+
+Sidebar.defaultProps = {
+  documentTab: true,
+  blockTab: true,
+  settingsTab: false,
+};
 
-export default compose(
-  injectIntl,
-  withCookies,
-  connect(
-    (state) => ({
-      tab: state.sidebar.tab,
-      toolbarExpanded: state.toolbar.expanded,
-      type: state.schema?.schema?.title,
-    }),
-    { setSidebarTab },
-  ),
-)(Sidebar);
+export default compose(withCookies)(Sidebar);

package/src/components/manage/Toolbar/More.jsx

@@ -86,8 +86,7 @@ const messages = defineMessages({
     defaultMessage: 'Changes applied',
   },
   workingCopyAppliedBy: {
-    id:
-      'Made by {creator} on {date}. This is not a working copy anymore, but the main content.',
+    id: 'Made by {creator} on {date}. This is not a working copy anymore, but the main content.',
     defaultMessage:
       'Made by {creator} on {date}. This is not a working copy anymore, but the main content.',
   },
@@ -322,16 +321,17 @@ class More extends Component {
                 </li>
               )}
             </Plug>
-            {path !== '' && !config.settings.excludeLinksAndReferencesMenuItem && (
-              <Plug pluggable="toolbar-more-menu-list" id="linkstoitems">
-                <li>
-                  <Link to={`${path}/links-to-item`}>
-                    {this.props.intl.formatMessage(messages.linkstoitem)}
-                    <Icon name={rightArrowSVG} size="24px" />
-                  </Link>
-                </li>
-              </Plug>
-            )}
+            {path !== '' &&
+              !config.settings.excludeLinksAndReferencesMenuItem && (
+                <Plug pluggable="toolbar-more-menu-list" id="linkstoitems">
+                  <li>
+                    <Link to={`${path}/links-to-item`}>
+                      {this.props.intl.formatMessage(messages.linkstoitem)}
+                      <Icon name={rightArrowSVG} size="24px" />
+                    </Link>
+                  </li>
+                </Plug>
+              )}
             <Plug pluggable="toolbar-more-menu-list" id="rules">
               {rulesAction && (
                 <li>