@plone/volto 18.0.0-alpha.8 → 18.0.0

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

@@ -8,13 +8,18 @@ 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 { Portal } from 'react-portal';
+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';
 import { toast } from 'react-toastify';
 
-import { Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updateControlpanel, getControlpanel } from '@plone/volto/actions';
 
 import config from '@plone/volto/registry';
@@ -43,6 +48,10 @@ const messages = defineMessages({
     id: 'Info',
     defaultMessage: 'Info',
   },
+  error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
 });
 
 /**
@@ -92,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 };
   }
 
   /**
@@ -112,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
@@ -161,14 +200,15 @@ 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
               loading={this.props.updateRequest.loading}
             />
           </Container>
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -205,9 +245,9 @@ class Controlpanel extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
         </div>
       );
     }

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
+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,42 +7,73 @@ import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="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 component = renderer.create(
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
+          <Route path={'/controlpanel/:id'} component={Controlpanel} />
+          <div id="toolbar"></div>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    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>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await waitFor(() => screen.findByText(/Twitter/i));
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -3,18 +3,15 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { Helmet } from '@plone/volto/helpers';
 import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
-import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { Portal } from 'react-portal';
-import { connect } from 'react-redux';
+import { createPortal } from 'react-dom';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
-import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
 
 import config from '@plone/volto/registry';
@@ -99,15 +96,19 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({
-  controlpanels,
-  controlpanelsRequest,
-  systemInformation,
-  pathname,
-}) {
+export default function Controlpanels({ location }) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
 
+  const { pathname } = location;
+  const controlpanels = useSelector(
+    (state) => state.controlpanels.controlpanels,
+  );
+  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
+  const systemInformation = useSelector(
+    (state) => state.controlpanels.systeminformation,
+  );
+
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -260,8 +261,8 @@ function Controlpanels({
           </Segment>
         </Segment.Group>
       </Container>
-      {isClient && (
-        <Portal node={document.getElementById('toolbar')}>
+      {isClient &&
+        createPortal(
           <Toolbar
             pathname={pathname}
             hideDefaultViewButtons
@@ -275,47 +276,9 @@ function Controlpanels({
                 />
               </Link>
             }
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById('toolbar'),
+        )}
     </div>
   );
 }
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Controlpanels.propTypes = {
-  controlpanels: PropTypes.arrayOf(
-    PropTypes.shape({
-      '@id': PropTypes.string,
-      group: PropTypes.string,
-      title: PropTypes.string,
-    }),
-  ).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,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
 import config from '@plone/volto/registry';
@@ -9,39 +9,39 @@ import Controlpanels from './Controlpanels';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
-jest.mock('./VersionOverview', () =>
-  jest.fn(() => <div className="VersionOverview" />),
-);
+jest.mock('@plone/volto/components/manage/Controlpanels', () => ({
+  VersionOverview: jest.fn(() => <div className="VersionOverview" />),
+}));
 
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
     const store = mockStore({
-      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',
-        },
-      ],
+      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: [
@@ -73,26 +73,29 @@ describe('Controlpanels', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Controlpanels location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an additional control panel', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      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: [
@@ -127,14 +130,15 @@ describe('Controlpanels', () => {
         component: FooComponent,
       },
     ];
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Controlpanels location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });