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

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

@@ -3,16 +3,16 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { concat, filter, last, map, uniqBy } from 'lodash';
 import { Portal } from 'react-portal';
-import { Helmet } from '@plone/volto/helpers';
+import { asyncConnect, Helmet } from '@plone/volto/helpers';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { listControlpanels, getSystemInformation } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
@@ -90,189 +90,139 @@ const messages = defineMessages({
     id: 'Content Rules',
     defaultMessage: 'Content Rules',
   },
+  relations: {
+    id: 'Relations',
+    defaultMessage: 'Relations',
+  },
 });
 
 /**
  * Controlpanels container class.
- * @class Controlpanels
- * @extends Component
  */
-class Controlpanels extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    listControlpanels: PropTypes.func.isRequired,
-    controlpanels: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        group: PropTypes.string,
-        title: PropTypes.string,
-      }),
-    ).isRequired,
-    pathname: PropTypes.string.isRequired,
-  };
+function Controlpanels({
+  controlpanels,
+  controlpanelsRequest,
+  systemInformation,
+  pathname,
+}) {
+  const intl = useIntl();
+  const [isClient, setIsClient] = useState(false);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs EditComponent
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null,
-      isClient: false,
-    };
-  }
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.listControlpanels();
-    this.props.getSystemInformation();
-    this.setState({ isClient: true });
-  }
+  const error = controlpanelsRequest?.error;
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Error
-    if (
-      this.props.controlpanelsRequest.loading &&
-      nextProps.controlpanelsRequest.error
-    ) {
-      this.setState({
-        error: nextProps.controlpanelsRequest.error,
-      });
-    }
+  if (error) {
+    return <Error error={error} />;
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    // Error
-    if (this.state.error) {
-      return <Error error={this.state.error} />;
-    }
+  let customcontrolpanels = config.settings.controlpanels
+    ? config.settings.controlpanels.map((el) => {
+        el.group =
+          intl.formatMessage({
+            id: el.group,
+            defaultMessage: el.group,
+          }) || el.group;
+        return el;
+      })
+    : [];
+  const { filterControlPanels } = config.settings;
 
-    let customcontrolpanels = config.settings.controlpanels
-      ? config.settings.controlpanels.map((el) => {
-          el.group =
-            this.props.intl.formatMessage({
-              id: el.group,
-              defaultMessage: el.group,
-            }) || el.group;
-          return el;
-        })
-      : [];
-    const { filterControlPanels } = config.settings;
-    const controlpanels = map(
-      concat(
-        filterControlPanels(this.props.controlpanels),
-        customcontrolpanels,
-        [
-          {
-            '@id': '/addons',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.addons),
-          },
-          {
-            '@id': '/database',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.database),
-          },
-          {
-            '@id': '/rules',
-            group: this.props.intl.formatMessage(messages.content),
-            title: this.props.intl.formatMessage(messages.contentRules),
-          },
-          {
-            '@id': '/undo',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.undo),
-          },
-          {
-            '@id': '/aliases',
-            group: this.props.intl.formatMessage(messages.general),
-            title: this.props.intl.formatMessage(messages.urlmanagement),
-          },
-          {
-            '@id': '/moderate-comments',
-            group: this.props.intl.formatMessage(messages.content),
-            title: this.props.intl.formatMessage(messages.moderatecomments),
-          },
-          {
-            '@id': '/users',
-            group: this.props.intl.formatMessage(
-              messages.usersControlPanelCategory,
-            ),
-            title: this.props.intl.formatMessage(messages.users),
-          },
-          {
-            '@id': '/usergroupmembership',
-            group: this.props.intl.formatMessage(
-              messages.usersControlPanelCategory,
-            ),
-            title: this.props.intl.formatMessage(
-              messages.usergroupmemberbership,
-            ),
-          },
-          {
-            '@id': '/groups',
-            group: this.props.intl.formatMessage(
-              messages.usersControlPanelCategory,
-            ),
-            title: this.props.intl.formatMessage(messages.groups),
-          },
-        ],
-      ),
-      (controlpanel) => ({
-        ...controlpanel,
-        id: last(controlpanel['@id'].split('/')),
-      }),
-    );
-    const groups = map(uniqBy(controlpanels, 'group'), 'group');
-    const { controlPanelsIcons: icons } = config.settings;
+  const filteredControlPanels = map(
+    concat(filterControlPanels(controlpanels), customcontrolpanels, [
+      {
+        '@id': '/addons',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.addons),
+      },
+      {
+        '@id': '/database',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.database),
+      },
+      {
+        '@id': '/rules',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.contentRules),
+      },
+      {
+        '@id': '/undo',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.undo),
+      },
+      {
+        '@id': '/aliases',
+        group: intl.formatMessage(messages.general),
+        title: intl.formatMessage(messages.urlmanagement),
+      },
+      {
+        '@id': '/relations',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.relations),
+      },
+      {
+        '@id': '/moderate-comments',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.moderatecomments),
+      },
+      {
+        '@id': '/users',
+        group: intl.formatMessage(messages.usersControlPanelCategory),
+        title: intl.formatMessage(messages.users),
+      },
+      {
+        '@id': '/usergroupmembership',
+        group: intl.formatMessage(messages.usersControlPanelCategory),
+        title: intl.formatMessage(messages.usergroupmemberbership),
+      },
+      {
+        '@id': '/groups',
+        group: intl.formatMessage(messages.usersControlPanelCategory),
+        title: intl.formatMessage(messages.groups),
+      },
+    ]),
+    (controlpanel) => ({
+      ...controlpanel,
+      id: last(controlpanel['@id'].split('/')),
+    }),
+  );
+  const groups = map(uniqBy(filteredControlPanels, 'group'), 'group');
+  const { controlPanelsIcons: icons } = config.settings;
 
-    return (
-      <div className="view-wrapper">
-        <Helmet title={this.props.intl.formatMessage(messages.sitesetup)} />
-        <Container className="controlpanel">
-          <Segment.Group raised>
-            <Segment className="primary">
-              <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />
-            </Segment>
-            {this.props.systemInformation &&
-              this.props.systemInformation.upgrade && (
-                <Message attached warning>
-                  <FormattedMessage
-                    id="The site configuration is outdated and needs to be upgraded."
-                    defaultMessage="The site configuration is outdated and needs to be upgraded."
-                  />{' '}
-                  <Link to={`/controlpanel/plone-upgrade`}>
-                    <FormattedMessage
-                      id="Please continue with the upgrade."
-                      defaultMessage="Please continue with the upgrade."
-                    />
-                  </Link>
-                </Message>
-              )}
-            {map(groups, (group) => [
-              <Segment key={`header-${group}`} secondary>
-                {group}
-              </Segment>,
-              <Segment key={`body-${group}`} attached>
-                <Grid doubling columns={6}>
-                  <Grid.Row>
-                    {map(filter(controlpanels, { group }), (controlpanel) => (
+  return (
+    <div className="view-wrapper">
+      <Helmet title={intl.formatMessage(messages.sitesetup)} />
+      <Container className="controlpanel">
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />
+          </Segment>
+          {systemInformation && systemInformation.upgrade && (
+            <Message attached warning>
+              <FormattedMessage
+                id="The site configuration is outdated and needs to be upgraded."
+                defaultMessage="The site configuration is outdated and needs to be upgraded."
+              />{' '}
+              <Link to={`/controlpanel/plone-upgrade`}>
+                <FormattedMessage
+                  id="Please continue with the upgrade."
+                  defaultMessage="Please continue with the upgrade."
+                />
+              </Link>
+            </Message>
+          )}
+          {map(groups, (group) => [
+            <Segment key={`header-${group}`} secondary>
+              {group}
+            </Segment>,
+            <Segment key={`body-${group}`} attached>
+              <Grid doubling columns={6}>
+                <Grid.Row>
+                  {map(
+                    filter(filteredControlPanels, { group }),
+                    (controlpanel) => (
                       <Grid.Column key={controlpanel.id}>
                         <Link to={`/controlpanel/${controlpanel.id}`}>
                           <Header as="h3" icon textAlign="center">
@@ -286,58 +236,83 @@ class Controlpanels extends Component {
                           </Header>
                         </Link>
                       </Grid.Column>
-                    ))}
-                  </Grid.Row>
-                </Grid>
-              </Segment>,
-            ])}
-          </Segment.Group>
-          <Segment.Group raised>
-            <Segment className="primary">
-              <FormattedMessage
-                id="Version Overview"
-                defaultMessage="Version Overview"
-              />
-            </Segment>
-            <Segment attached>
-              {this.props.systemInformation ? (
-                <VersionOverview {...this.props.systemInformation} />
-              ) : null}
-            </Segment>
-          </Segment.Group>
-        </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link to="/" className="item">
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
-                  />
-                </Link>
-              }
+                    ),
+                  )}
+                </Grid.Row>
+              </Grid>
+            </Segment>,
+          ])}
+        </Segment.Group>
+        <Segment.Group raised>
+          <Segment className="primary">
+            <FormattedMessage
+              id="Version Overview"
+              defaultMessage="Version Overview"
             />
-          </Portal>
-        )}
-      </div>
-    );
-  }
+          </Segment>
+          <Segment attached>
+            {systemInformation ? (
+              <VersionOverview {...systemInformation} />
+            ) : null}
+          </Segment>
+        </Segment.Group>
+      </Container>
+      {isClient && (
+        <Portal node={document.getElementById('toolbar')}>
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to="/" className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />
+        </Portal>
+      )}
+    </div>
+  );
 }
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      controlpanels: state.controlpanels.controlpanels,
-      controlpanelsRequest: state.controlpanels.list,
-      pathname: props.location.pathname,
-      systemInformation: state.controlpanels.systeminformation,
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Controlpanels.propTypes = {
+  controlpanels: PropTypes.arrayOf(
+    PropTypes.shape({
+      '@id': PropTypes.string,
+      group: PropTypes.string,
+      title: PropTypes.string,
     }),
-    { listControlpanels, getSystemInformation },
-  ),
+  ).isRequired,
+  pathname: PropTypes.string.isRequired,
+};
+
+export default compose(
+  connect((state, props) => ({
+    controlpanels: state.controlpanels.controlpanels,
+    controlpanelsRequest: state.controlpanels.list,
+    pathname: props.location.pathname,
+    systemInformation: state.controlpanels.systeminformation,
+  })),
+
+  asyncConnect([
+    {
+      key: 'controlpanels',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(listControlpanels()),
+    },
+    {
+      key: 'systemInformation',
+      promise: async ({ location, store: { dispatch } }) =>
+        await dispatch(getSystemInformation()),
+    },
+  ]),
 )(Controlpanels);

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

@@ -1,11 +1,11 @@
 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 renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
-import Controlpanels from './Controlpanels';
 import config from '@plone/volto/registry';
+import Controlpanels from './Controlpanels';
 
 const mockStore = configureStore();
 
@@ -20,7 +20,30 @@ jest.mock('./VersionOverview', () =>
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
     const store = mockStore({
-      controlpanels: {
+      controlpanels: [
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
+          group: 'General',
+          title: 'Date and Time',
+        },
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
+          group: 'General',
+          title: 'Language',
+        },
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
+          group: 'Content',
+          title: 'Editing',
+        },
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+          group: 'Security',
+          title: 'test',
+        },
+      ],
+      reduxAsyncConnect: {
+        // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
           {
             '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
@@ -40,10 +63,11 @@ describe('Controlpanels', () => {
           {
             '@id': 'http://localhost:8080/Plone/@controlpanels/security',
             group: 'Security',
-            title: 'Security',
+            title: 'test',
           },
         ],
       },
+      router: { location: '/blog' },
       intl: {
         locale: 'en',
         messages: {},
@@ -62,9 +86,24 @@ describe('Controlpanels', () => {
 
   it('renders an additional control panel', () => {
     const store = mockStore({
-      controlpanels: {
-        controlpanels: [],
+      controlpanels: [
+        {
+          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+          group: 'Security',
+          title: 'test',
+        },
+      ],
+      reduxAsyncConnect: {
+        // Mocked in redux async connect as it isn't fetch client-side.
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
       },
+      router: { location: '/blog' },
       intl: {
         locale: 'en',
         messages: {},