@plone/volto 17.0.0-alpha.5 → 17.0.0-alpha.7

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';
@@ -94,185 +94,126 @@ const messages = defineMessages({
 
 /**
  * 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': '/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 +227,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: {},

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

@@ -4,13 +4,21 @@ import { Accordion, Segment, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import AnimateHeight from 'react-animate-height';
 import { keys, map, isEqual } from 'lodash';
-
+import { useAtom } from 'jotai';
+import { inlineFormFieldsetsState } from './InlineFormState';
+import {
+  insertInArray,
+  removeFromArray,
+  arrayRange,
+} from '@plone/volto/helpers/Utils/Utils';
 import { Field, Icon } from '@plone/volto/components';
 import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   editValues: {
     id: 'Edit values',
@@ -70,12 +78,34 @@ const InlineForm = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [currentActiveFieldset, setCurrentActiveFieldset] = React.useState(0);
+  const [currentActiveFieldset, setCurrentActiveFieldset] = useAtom(
+    inlineFormFieldsetsState({
+      name: block,
+      fielsetList: other,
+      initialState: config.settings.blockSettingsTabFieldsetsInitialStateOpen
+        ? arrayRange(0, other.length - 1, 1)
+        : [],
+    }),
+  );
+
   function handleCurrentActiveFieldset(e, blockProps) {
     const { index } = blockProps;
-    const newIndex = currentActiveFieldset === index ? -1 : index;
-
-    setCurrentActiveFieldset(newIndex);
+    if (currentActiveFieldset.includes(index)) {
+      setCurrentActiveFieldset(
+        removeFromArray(
+          currentActiveFieldset,
+          currentActiveFieldset.indexOf(index),
+        ),
+      );
+    } else {
+      setCurrentActiveFieldset(
+        insertInArray(
+          currentActiveFieldset,
+          index,
+          currentActiveFieldset.length + 1,
+        ),
+      );
+    }
   }
 
   return (
@@ -136,22 +166,22 @@ const InlineForm = (props) => {
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
             <Accordion.Title
-              active={currentActiveFieldset === index}
+              active={currentActiveFieldset.includes(index)}
               index={index}
               onClick={handleCurrentActiveFieldset}
             >
               {fieldset.title && <>{fieldset.title}</>}
-              {currentActiveFieldset === index ? (
+              {currentActiveFieldset.includes(index) ? (
                 <Icon name={upSVG} size="20px" />
               ) : (
                 <Icon name={downSVG} size="20px" />
               )}
             </Accordion.Title>
-            <Accordion.Content active={currentActiveFieldset === index}>
+            <Accordion.Content active={currentActiveFieldset.includes(index)}>
               <AnimateHeight
                 animateOpacity
                 duration={500}
-                height={currentActiveFieldset === index ? 'auto' : 0}
+                height={currentActiveFieldset.includes(index) ? 'auto' : 0}
               >
                 <Segment className="attached">
                   {map(fieldset.fields, (field) => (

package/src/components/manage/Form/InlineFormState.js

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { isEqual } from 'lodash';
+
+export const inlineFormFieldsetsState = atomFamily(
+  ({ name, initialState }) => atom(initialState),
+  (a, b) => a.name === b.name && isEqual(a.fielsetList, b.fielsetList),
+);

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -6,7 +6,7 @@ import {
   getTranslationLocator,
   getContent,
 } from '@plone/volto/actions';
-import { flattenToAppURL, normalizeLanguageName } from '@plone/volto/helpers';
+import { flattenToAppURL, toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const CreateTranslation = (props) => {
@@ -33,7 +33,7 @@ const CreateTranslation = (props) => {
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
-        const langFileName = normalizeLanguageName(language);
+        const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));
         });