@plone/volto 19.0.0-alpha.8 → 19.0.0

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

@@ -1,21 +1,15 @@
-/**
- * Controlpanel component.
- * @module components/manage/Controlpanels/Controlpanel
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { useClient } from '@plone/volto/hooks/client/useClient';
 import {
   tryParseJSON,
   extractInvariantErrors,
 } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { createPortal } from 'react-dom';
 import { Button, Container } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -26,6 +20,7 @@ import {
   updateControlpanel,
   getControlpanel,
 } from '@plone/volto/actions/controlpanels/controlpanels';
+import { getSite } from '@plone/volto/actions/site/site';
 
 import config from '@plone/volto/registry';
 
@@ -59,217 +54,126 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Controlpanel class.
- * @class Controlpanel
- * @extends Component
- */
-class Controlpanel extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateControlpanel: PropTypes.func.isRequired,
-    getControlpanel: PropTypes.func.isRequired,
-    id: PropTypes.string.isRequired,
-    updateRequest: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    controlpanel: PropTypes.shape({
-      '@id': PropTypes.string,
-      data: PropTypes.object,
-      schema: PropTypes.object,
-      title: PropTypes.string,
-    }),
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    controlpanel: null,
+const Controlpanel = () => {
+  const { filterControlPanelsSchema } = config.settings;
+  const intl = useIntl();
+  const id = useParams().id;
+  const pathname = useLocation().pathname;
+  const history = useHistory();
+  const isClient = useClient();
+
+  const dispatch = useDispatch();
+  const controlpanel = useSelector((state) => state.controlpanels.controlpanel);
+  const updateRequest = useSelector((state) => state.controlpanels.update);
+  const [error, setError] = useState(null);
+
+  const formRef = useRef();
+  const onCancel = () => {
+    history.goBack();
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Controlpanel
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false, error: null };
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getControlpanel(this.props.id);
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @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(
+  const onSubmit = (data) => {
+    dispatch(updateControlpanel(controlpanel['@id'], data))
+      .then(() => {
+        dispatch(getSite());
+        toast.info(
           <Toast
-            error
-            title={this.props.intl.formatMessage(messages.error)}
-            content={invariantErrors.join(' - ')}
+            info
+            title={intl.formatMessage(messages.info)}
+            content={intl.formatMessage(messages.changesSaved)}
           />,
         );
-      }
-    }
-
-    if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
-      toast.info(
-        <Toast
-          info
-          title={this.props.intl.formatMessage(messages.info)}
-          content={this.props.intl.formatMessage(messages.changesSaved)}
-        />,
-      );
-    }
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.updateControlpanel(this.props.controlpanel['@id'], data);
-  }
-
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
-  form = React.createRef();
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { filterControlPanelsSchema } = config.settings;
+      })
+      .catch((err) => {
+        const message =
+          err?.response?.body?.error?.message ||
+          err?.response?.body?.message ||
+          err?.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);
+        }
+        setError(error);
+        if (invariantErrors.length > 0) {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.error)}
+              content={invariantErrors.join(' - ')}
+            />,
+          );
+        }
+      });
+  };
 
-    if (this.props.controlpanel) {
-      return (
-        <div id="page-controlpanel">
-          <Helmet title={this.props.controlpanel.title} />
-          <Container>
-            <Form
-              ref={this.form}
-              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 &&
-            createPortal(
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={
-                  <>
-                    <Button
-                      id="toolbar-save"
-                      className="save"
-                      aria-label={this.props.intl.formatMessage(messages.save)}
-                      onClick={() => this.form.current.onSubmit()}
-                      disabled={this.props.updateRequest.loading}
-                      loading={this.props.updateRequest.loading}
-                    >
-                      <Icon
-                        name={saveSVG}
-                        className="circled"
-                        size="30px"
-                        title={this.props.intl.formatMessage(messages.save)}
-                      />
-                    </Button>
-                    <Button
-                      className="cancel"
-                      aria-label={this.props.intl.formatMessage(
-                        messages.cancel,
-                      )}
-                      onClick={() => this.onCancel()}
-                    >
-                      <Icon
-                        name={clearSVG}
-                        className="circled"
-                        size="30px"
-                        title={this.props.intl.formatMessage(messages.cancel)}
-                      />
-                    </Button>
-                  </>
-                }
-              />,
-              document.getElementById('toolbar'),
-            )}
-        </div>
-      );
-    }
-    return <div />;
+  useEffect(() => {
+    dispatch(getControlpanel(id)).catch((error) => setError(error));
+  }, [dispatch, id]);
+
+  if (controlpanel) {
+    return (
+      <div id="page-controlpanel">
+        <Helmet title={controlpanel.title} />
+        <Container>
+          <Form
+            ref={formRef}
+            title={controlpanel.title}
+            schema={filterControlPanelsSchema(controlpanel)}
+            formData={controlpanel.data}
+            requestError={error}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+            hideActions
+            loading={updateRequest.loading}
+          />
+        </Container>
+        {isClient &&
+          createPortal(
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Button
+                    id="toolbar-save"
+                    className="save"
+                    aria-label={intl.formatMessage(messages.save)}
+                    onClick={() => formRef.current.onSubmit()}
+                    disabled={updateRequest.loading}
+                    loading={updateRequest.loading}
+                  >
+                    <Icon
+                      name={saveSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.save)}
+                    />
+                  </Button>
+                  <Button
+                    className="cancel"
+                    aria-label={intl.formatMessage(messages.cancel)}
+                    onClick={onCancel}
+                  >
+                    <Icon
+                      name={clearSVG}
+                      className="circled"
+                      size="30px"
+                      title={intl.formatMessage(messages.cancel)}
+                    />
+                  </Button>
+                </>
+              }
+            />,
+            document.getElementById('toolbar'),
+          )}
+      </div>
+    );
   }
-}
+  return <div />;
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      controlpanel: state.controlpanels.controlpanel,
-      updateRequest: state.controlpanels.update,
-      id: props.match.params.id,
-      pathname: props.location.pathname,
-    }),
-    { updateControlpanel, getControlpanel },
-  ),
-  withRouter,
-)(Controlpanel);
+export default Controlpanel;

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

@@ -1,7 +1,8 @@
-import { render, waitFor, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
@@ -70,41 +71,15 @@ describe('Controlpanel', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
-          <Route path={'/controlpanel/:id'} component={Controlpanel} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
+            <Route path={'/controlpanel/:id'} component={Controlpanel} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </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'}]";
-    store.dispatch = vi.fn(() => Promise.resolve());
-
-    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/Controlpanels.jsx

@@ -75,6 +75,10 @@ const messages = defineMessages({
     id: 'Add-Ons',
     defaultMessage: 'Add-Ons',
   },
+  blockTypes: {
+    id: 'Block Types',
+    defaultMessage: 'Block Types',
+  },
   database: {
     id: 'Database',
     defaultMessage: 'Database',
@@ -127,6 +131,15 @@ export default function Controlpanels({ location }) {
     return <Error error={error} />;
   }
 
+  /**
+   * Determine whether the backend exposes the Discussion control panel.
+   * The Moderate Comments view should only be shown if the Discussion
+   * control panel is available to the current user.
+   */
+  const hasDiscussionControlPanel = controlpanels?.some((panel) =>
+    panel['@id']?.endsWith('/discussion'),
+  );
+
   let customcontrolpanels = config.settings.controlpanels
     ? config.settings.controlpanels.map((el) => {
         el.group =
@@ -146,6 +159,11 @@ export default function Controlpanels({ location }) {
         group: intl.formatMessage(messages.general),
         title: intl.formatMessage(messages.addons),
       },
+      {
+        '@id': '/block-types',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.blockTypes),
+      },
       {
         '@id': '/database',
         group: intl.formatMessage(messages.general),
@@ -171,11 +189,16 @@ export default function Controlpanels({ location }) {
         group: intl.formatMessage(messages.content),
         title: intl.formatMessage(messages.relations),
       },
-      {
-        '@id': '/moderate-comments',
-        group: intl.formatMessage(messages.content),
-        title: intl.formatMessage(messages.moderatecomments),
-      },
+      // only shown if Discussion support addon is available from the backend.
+      ...(hasDiscussionControlPanel
+        ? [
+            {
+              '@id': '/moderate-comments',
+              group: intl.formatMessage(messages.content),
+              title: intl.formatMessage(messages.moderatecomments),
+            },
+          ]
+        : []),
       {
         '@id': '/users',
         group: intl.formatMessage(messages.usersControlPanelCategory),

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
@@ -22,6 +23,11 @@ describe('Controlpanels', () => {
     const store = mockStore({
       controlpanels: {
         controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/discussion',
+            group: 'Content',
+            title: 'Discussion',
+          },
           {
             '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
             group: 'General',
@@ -47,6 +53,11 @@ describe('Controlpanels', () => {
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/discussion',
+            group: 'Content',
+            title: 'Discussion',
+          },
           {
             '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
             group: 'General',
@@ -98,10 +109,12 @@ describe('Controlpanels', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Controlpanels location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Controlpanels location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -176,10 +189,12 @@ describe('Controlpanels', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Controlpanels location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Controlpanels location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -10,6 +10,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { useClient } from '@plone/volto/hooks/client/useClient';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Error from '@plone/volto/components/theme/Error/Error';
 import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
@@ -31,11 +32,19 @@ const DatabaseInformation = () => {
   const databaseInformation = useSelector(
     (state) => state.controlpanels.databaseinformation,
   );
+  const databaseError = useSelector(
+    (state) => state.controlpanels.database?.error,
+  );
 
   useEffect(() => {
     dispatch(getDatabaseInformation());
   }, [dispatch]);
 
+  // Error handling for unauthorized access
+  if (databaseError) {
+    return <Error error={databaseError} />;
+  }
+
   return databaseInformation ? (
     <Container id="database-page" className="controlpanel-database">
       <Helmet title={intl.formatMessage(messages.databaseInformation)} />

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import jwt from 'jsonwebtoken';
 
 import GroupsControlpanel from './GroupsControlpanel';
@@ -41,10 +42,12 @@ describe('UsersControlpanel', () => {
     const { container } = await act(async () => {
       return render(
         <Provider store={store}>
-          <>
-            <GroupsControlpanel location={{ pathname: '/blog' }} />
-            <div id="toolbar"></div>
-          </>
+          <CookiesProvider>
+            <>
+              <GroupsControlpanel location={{ pathname: '/blog' }} />
+              <div id="toolbar"></div>
+            </>
+          </CookiesProvider>
         </Provider>,
       );
     });

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

@@ -19,6 +19,7 @@ import { searchContent } from '@plone/volto/actions/search/search';
 import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Error from '@plone/volto/components/theme/Error/Error';
 import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 
 import backSVG from '@plone/volto/icons/back.svg';
@@ -65,6 +66,7 @@ class ModerateComments extends Component {
       loaded: PropTypes.bool,
     }).isRequired,
     pathname: PropTypes.string.isRequired,
+    searchError: PropTypes.object,
   };
 
   /**
@@ -186,6 +188,11 @@ class ModerateComments extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    // Error handling for unauthorized access
+    if (this.props.searchError) {
+      return <Error error={this.props.searchError} />;
+    }
+
     return (
       <div id="page-moderate-comments">
         <CommentEditModal
@@ -297,6 +304,7 @@ export default compose(
       items: state.search.items,
       deleteRequest: state.comments.delete,
       pathname: props.location.pathname,
+      searchError: state.search.error,
     }),
     { deleteComment, searchContent },
   ),

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import ModerateComments from './ModerateComments';
 
 const mockStore = configureStore();
@@ -53,10 +54,12 @@ describe('ModerateComments', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <div>
-          <ModerateComments location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </div>
+        <CookiesProvider>
+          <div>
+            <ModerateComments location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </div>
+        </CookiesProvider>
       </Provider>,
     );