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

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

@@ -0,0 +1,74 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import AliasesComponent from './Aliases';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlAliasesComponent = injectIntl(AliasesComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        aliases: {
+          add: {
+            loaded: false,
+            loading: false,
+            error: null,
+          },
+          remove: {
+            loaded: false,
+            loading: false,
+            error: null,
+          },
+          get: {
+            loading: false,
+            loaded: true,
+            error: null,
+          },
+          items: [
+            {
+              datetime: '2022-05-16T11:52:35+00:00',
+              manual: true,
+              path: '/eventsalias',
+              'redirect-to': '/events',
+            },
+            {
+              datetime: '2022-05-17T09:38:19+00:00',
+              manual: true,
+              path: '/eventsgreatalias',
+              'redirect-to': '/events',
+            },
+            {
+              datetime: '2022-05-17T09:38:35+00:00',
+              manual: true,
+              path: '/eventsincredible',
+              'redirect-to': '/events',
+            },
+          ],
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlAliasesComponent {...args} location={{ pathname: '/blog' }} />
+    </Wrapper>
+  );
+}
+
+export const Aliases = StoryComponent.bind({});
+
+export default {
+  title: 'Internal Components/ControlPanels/Aliases',
+  component: Aliases,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -8,7 +8,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { Helmet } from '@plone/volto/helpers';
+import {
+  Helmet,
+  tryParseJSON,
+  extractInvariantErrors,
+} from '@plone/volto/helpers';
 import { createPortal } from 'react-dom';
 import { Button, Container } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -44,6 +48,10 @@ const messages = defineMessages({
     id: 'Info',
     defaultMessage: 'Info',
   },
+  error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
 });
 
 /**
@@ -93,7 +101,7 @@ class Controlpanel extends Component {
     super(props);
     this.onCancel = this.onCancel.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
+    this.state = { isClient: false, error: null };
   }
 
   /**
@@ -113,6 +121,36 @@ class Controlpanel extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.updateRequest.loading && nextProps.updateRequest.error) {
+      const message =
+        nextProps.updateRequest.error?.response?.body?.error?.message ||
+        nextProps.updateRequest.error?.response?.body?.message ||
+        nextProps.updateRequest.error?.response?.text ||
+        '';
+
+      const error =
+        new DOMParser().parseFromString(message, 'text/html')?.all?.[0]
+          ?.textContent || message;
+
+      const errorsList = tryParseJSON(error);
+      let invariantErrors = [];
+      if (Array.isArray(errorsList)) {
+        invariantErrors = extractInvariantErrors(errorsList);
+      }
+
+      this.setState({ error: error });
+
+      if (invariantErrors.length > 0) {
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(messages.error)}
+            content={invariantErrors.join(' - ')}
+          />,
+        );
+      }
+    }
+
     if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
       toast.info(
         <Toast
@@ -162,6 +200,7 @@ class Controlpanel extends Component {
               title={this.props.controlpanel.title}
               schema={filterControlPanelsSchema(this.props.controlpanel)}
               formData={this.props.controlpanel.data}
+              requestError={this.state.error}
               onSubmit={this.onSubmit}
               onCancel={this.onCancel}
               hideActions

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor, screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
@@ -8,32 +7,40 @@ import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../Form/Form', () =>
+  jest.fn(({ requestError }) => (
+    <div id="form">
+      {requestError ? `requestError : ${requestError}` : null}
+    </div>
+  )),
+);
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
+const store = mockStore({
+  controlpanels: {
+    controlpanel: {
+      '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
+      title: 'Date and Time',
+      schema: {
+        fieldsets: [],
+        properties: [],
+      },
+      data: {},
+    },
+    update: {
+      loading: false,
+      loaded: true,
+      error: { response: { body: { message: null } } },
+    },
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
 describe('Controlpanel', () => {
   it('renders a controlpanel component', () => {
-    const store = mockStore({
-      controlpanels: {
-        controlpanel: {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
-          title: 'Date and Time',
-          schema: {
-            fieldsets: [],
-            properties: [],
-          },
-          data: {},
-        },
-        update: {
-          loading: false,
-          loaded: true,
-        },
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
@@ -45,4 +52,28 @@ describe('Controlpanel', () => {
 
     expect(container).toMatchSnapshot();
   });
+  it('renders a controlpanel component with error', async () => {
+    const { container, rerender } = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
+          <Route path={'/controlpanel/:id'} component={Controlpanel} />
+          <div id="toolbar"></div>
+        </MemoryRouter>
+      </Provider>,
+    );
+    store.getState().controlpanels.update.loading = true;
+    store.getState().controlpanels.update.error.response.body.message =
+      "[{'message': 'Twitter username should not include the \"@\" prefix character.', 'field': 'twitter_username', 'error': 'ValidationError'}]";
+
+    rerender(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
+          <Route path={'/controlpanel/:id'} component={Controlpanel} />
+          <div id="toolbar"></div>
+        </MemoryRouter>
+      </Provider>,
+    );
+    await waitFor(() => screen.findByText(/Twitter/i));
+    expect(container).toMatchSnapshot();
+  });
 });

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

@@ -1,18 +1,13 @@
-/**
- * Users controlpanel container.
- * @module components/manage/Controlpanels/DatabaseInformation
- */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 import { Container, Divider, Message, Segment, Table } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { getDatabaseInformation } from '@plone/volto/actions';
 import { Helmet } from '@plone/volto/helpers';
+import { useClient } from '@plone/volto/hooks';
 import { Icon, Toolbar } from '@plone/volto/components';
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -27,228 +22,166 @@ const messages = defineMessages({
   },
 });
 
-/**
- * DatabaseInformation class.
- * @class DatabaseInformation
- * @extends Component
- */
-class DatabaseInformation extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getDatabaseInformation: PropTypes.func.isRequired,
-  };
+const DatabaseInformation = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+  const isClient = useClient();
+  const databaseInformation = useSelector(
+    (state) => state.controlpanels.databaseinformation,
+  );
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs DiffComponent
-   */
-  constructor(props) {
-    super(props);
-    this.state = { isClient: false };
-  }
+  useEffect(() => {
+    dispatch(getDatabaseInformation());
+  }, [dispatch]);
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getDatabaseInformation();
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return this.props.databaseInformation ? (
-      <Container id="database-page" className="controlpanel-database">
-        <Helmet
-          title={this.props.intl.formatMessage(messages.databaseInformation)}
-        />
-        <Segment.Group raised>
-          <Segment className="primary">
-            <FormattedMessage
-              id="Database Information"
-              defaultMessage="Database Information"
-            />
-          </Segment>
-          <Segment>
-            <Message>
+  return databaseInformation ? (
+    <Container id="database-page" className="controlpanel-database">
+      <Helmet title={intl.formatMessage(messages.databaseInformation)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          <FormattedMessage
+            id="Database Information"
+            defaultMessage="Database Information"
+          />
+        </Segment>
+        <Segment>
+          <Message>
+            <Message.Header>
               <FormattedMessage
-                id="The Database Manager allow you to view database status information"
-                defaultMessage="The Database Manager allow you to view database status information"
+                id="Database main"
+                defaultMessage="Database main"
               />
-            </Message>
-          </Segment>
-          <Segment>
-            <Message>
-              <Message.Header>
-                <FormattedMessage
-                  id="Database main"
-                  defaultMessage="Database main"
-                />
-              </Message.Header>
-            </Message>
-            <Table celled padded columns="2">
-              <Table.Body>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Database Location"
-                      defaultMessage="Database Location"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.db_name}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Database Size"
-                      defaultMessage="Database Size"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.database_size}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Total number of objects in the database"
-                      defaultMessage="Total number of objects in the database"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.db_size}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Total number of objects in memory from all caches"
-                      defaultMessage="Total number of objects in memory from all caches"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.cache_size}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Target number of objects in memory per cache"
-                      defaultMessage="Target number of objects in memory per cache"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.cache_length}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <FormattedMessage
-                      id="Target memory size per cache in bytes"
-                      defaultMessage="Target memory size per cache in bytes"
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {this.props.databaseInformation.cache_length_bytes}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Segment>
-          <Segment>
-            <Divider />
-
-            <Message>
-              <Message.Header>
-                <FormattedMessage
-                  id="Total number of objects in each cache"
-                  defaultMessage="Total number of objects in each cache"
-                />
-              </Message.Header>
-            </Message>
-            <Table celled padded>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell>
-                    <FormattedMessage
-                      id="Cache Name"
-                      defaultMessage="Cache Name"
-                    />
-                  </Table.HeaderCell>
-                  <Table.HeaderCell>
-                    <FormattedMessage
-                      id="Number of active objects"
-                      defaultMessage="Number of active objects"
-                    />
-                  </Table.HeaderCell>
-                  <Table.HeaderCell>
-                    <FormattedMessage
-                      id="Total active and non-active objects"
-                      defaultMessage="Total active and non-active objects"
-                    />
-                  </Table.HeaderCell>
-                </Table.Row>
-              </Table.Header>
-              {this.props.databaseInformation.cache_detail_length.map(
-                (item) => (
-                  <Table.Row>
-                    <Table.Cell>{item.connection}</Table.Cell>
-                    <Table.Cell>{item.ngsize}</Table.Cell>
-                    <Table.Cell>{item.size}</Table.Cell>
-                  </Table.Row>
-                ),
-              )}
-            </Table>
-          </Segment>
-        </Segment.Group>
+            </Message.Header>
+          </Message>
+          <Table celled padded columns="2">
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Database Location"
+                    defaultMessage="Database Location"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.db_name}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Database Size"
+                    defaultMessage="Database Size"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.database_size}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Total number of objects in the database"
+                    defaultMessage="Total number of objects in the database"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.db_size}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Total number of objects in memory from all caches"
+                    defaultMessage="Total number of objects in memory from all caches"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.cache_size}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Target number of objects in memory per cache"
+                    defaultMessage="Target number of objects in memory per cache"
+                  />
+                </Table.Cell>
+                <Table.Cell>{databaseInformation.cache_length}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <FormattedMessage
+                    id="Target memory size per cache in bytes"
+                    defaultMessage="Target memory size per cache in bytes"
+                  />
+                </Table.Cell>
+                <Table.Cell>
+                  {databaseInformation.cache_length_bytes}
+                </Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Segment>
+        <Segment>
+          <Divider />
 
-        {this.state.isClient &&
-          createPortal(
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Link to="/controlpanel" className="item">
-                    <Icon
-                      name={backSVG}
-                      aria-label={this.props.intl.formatMessage(messages.back)}
-                      className="contents circled"
-                      size="30px"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                </>
-              }
-            />,
-            document.getElementById('toolbar'),
-          )}
-      </Container>
-    ) : null;
-  }
-}
+          <Message>
+            <Message.Header>
+              <FormattedMessage
+                id="Total number of objects in each cache"
+                defaultMessage="Total number of objects in each cache"
+              />
+            </Message.Header>
+          </Message>
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Cache Name"
+                    defaultMessage="Cache Name"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Number of active objects"
+                    defaultMessage="Number of active objects"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Total active and non-active objects"
+                    defaultMessage="Total active and non-active objects"
+                  />
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+            {databaseInformation.cache_detail_length.map((item) => (
+              <Table.Row>
+                <Table.Cell>{item.connection}</Table.Cell>
+                <Table.Cell>{item.ngsize}</Table.Cell>
+                <Table.Cell>{item.size}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table>
+        </Segment>
+      </Segment.Group>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Link to="/controlpanel" className="item">
+                  <Icon
+                    name={backSVG}
+                    aria-label={intl.formatMessage(messages.back)}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              </>
+            }
+          />,
+          document.getElementById('toolbar'),
+        )}
+    </Container>
+  ) : null;
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      databaseInformation: state.controlpanels.databaseinformation,
-      pathname: props.location.pathname,
-    }),
-    { getDatabaseInformation },
-  ),
-)(DatabaseInformation);
+export default DatabaseInformation;