@plone/volto 19.0.0-alpha.9 → 19.1.0

package/src/components/manage/Controlpanels/BlockTypes.tsx

@@ -0,0 +1,145 @@
+import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { getParentUrl } from '@plone/volto/helpers/Url/Url';
+import { useClient } from '@plone/volto/hooks';
+import config from '@plone/volto/registry';
+import { createPortal } from 'react-dom';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { useEffect } from 'react';
+import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
+import { useDispatch, useSelector } from 'react-redux';
+import Error from '@plone/volto/components/theme/Error/Error';
+import { Spinner, Table } from '@plone/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import backSVG from '@plone/volto/icons/back.svg';
+import type { Location } from 'history';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  loading: {
+    id: 'loading',
+    defaultMessage: 'Loading',
+  },
+  blockType: {
+    id: 'Block Type',
+    defaultMessage: 'Block Type',
+  },
+  occurrences: {
+    id: 'Occurrences',
+    defaultMessage: 'Occurrences',
+  },
+});
+
+type RouteProps = {
+  history: History;
+  location: Location;
+};
+
+type BlockTypesState = {
+  error: {
+    status?: number;
+  } | null;
+  items: Record<string, number> | unknown[];
+  loaded: boolean;
+  loading: boolean;
+};
+
+type SelectorState = {
+  blockTypes: BlockTypesState;
+};
+
+const BlockTypesControlpanel = (props: RouteProps) => {
+  const { location } = props;
+  const intl = useIntl();
+  const blockTypes = useSelector((state: SelectorState) => state.blockTypes);
+  const blocksConfig = config.blocks.blocksConfig;
+  const dispatch = useDispatch();
+  const pathname = location.pathname;
+  const isClient = useClient();
+
+  const blocks = Object.entries(blocksConfig)
+    .map(([key, blockConfig]) => ({
+      ...blockConfig,
+      title: blockConfig.title
+        ? intl.formatMessage({
+            id: blockConfig.title,
+            defaultMessage: blockConfig.title,
+          })
+        : blockConfig.id ?? key,
+    }))
+    .sort((a, b) => (a.title === b.title ? 0 : a.title > b.title ? 1 : -1));
+
+  useEffect(() => {
+    dispatch(getBlockTypes());
+  }, [dispatch]);
+
+  if (blockTypes.loading) {
+    return <Spinner label={intl.formatMessage(messages.loading)} />;
+  }
+
+  if (blockTypes?.error?.status) {
+    return <Error error={blockTypes.error} />;
+  }
+
+  return (
+    blockTypes.loaded && (
+      <div
+        id="page-block_types"
+        className="ui container controlpanel-block-types"
+      >
+        <h1>
+          <FormattedMessage id="Block Types" defaultMessage="Block Types" />
+        </h1>
+        <Table
+          className="react-aria-Table cmsui-table"
+          columns={[
+            {
+              id: 'blockType',
+              name: intl.formatMessage(messages.blockType),
+              isRowHeader: true,
+            },
+            {
+              id: 'occurrences',
+              name: intl.formatMessage(messages.occurrences),
+            },
+          ]}
+          rows={blocks.map((block) => ({
+            id: block.id,
+            textValue: block.title,
+            blockType: (
+              <UniversalLink href={`${pathname}/${block.id}`}>
+                {block.title}
+              </UniversalLink>
+            ),
+            occurrences: blockTypes.items?.[block.id] || 0,
+          }))}
+        />
+        {isClient &&
+          createPortal(
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <Link to={getParentUrl(pathname)} className="item">
+                  <Icon
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+              }
+            />,
+            document.getElementById('toolbar') as HTMLElement,
+          )}
+      </div>
+    )
+  );
+};
+
+export default BlockTypesControlpanel;

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

@@ -1,16 +1,10 @@
-/**
- * Content Type component.
- * @module components/manage/Controlpanels/ContentType
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useEffect, useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { getParentUrl } from '@plone/volto/helpers/Url/Url';
 import { createPortal } from 'react-dom';
 import { Button, Header } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import last from 'lodash/last';
 import nth from 'lodash/nth';
@@ -24,6 +18,7 @@ import {
   getControlpanel,
   updateControlpanel,
 } from '@plone/volto/actions/controlpanels/controlpanels';
+import { useClient } from '@plone/volto/hooks/client/useClient';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -55,228 +50,142 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ContentType class.
- * @class ContentType
- * @extends Component
- */
-class ContentType extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateControlpanel: PropTypes.func.isRequired,
-    getControlpanel: PropTypes.func.isRequired,
-    id: PropTypes.string.isRequired,
-    parent: PropTypes.string.isRequired,
-    cpanelRequest: PropTypes.objectOf(PropTypes.any).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,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ContentType
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      visual: false,
-      error: null,
-      isClient: false,
-    };
-
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.form = React.createRef();
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getControlpanel(join([this.props.parent, this.props.id], '/'));
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Control Panel GET
-    if (
-      this.props.cpanelRequest.get.loading &&
-      nextProps.cpanelRequest.get.error
-    ) {
-      this.setState({
-        error: nextProps.cpanelRequest.get.error,
+function ContentType() {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const isClient = useClient();
+  const history = useHistory();
+  const pathname = useLocation().pathname;
+
+  const controlpanel = useSelector((state) => state.controlpanels.controlpanel);
+  const cpanelRequest = useSelector((state) => state.controlpanels);
+
+  const id = last(pathname.split('/'));
+  const parent = nth(pathname.split('/'), -2);
+
+  const [visual] = useState(false);
+  const [error, setError] = useState(null);
+
+  const form = useRef(null);
+
+  useEffect(() => {
+    dispatch(getControlpanel(join([parent, id], '/'))).catch((err) => {
+      setError(err);
+    });
+  }, [dispatch, parent, id]);
+
+  const onSubmit = (data) => {
+    if (controlpanel?.['@id']) {
+      dispatch(updateControlpanel(controlpanel['@id'], data)).then(() => {
+        toast.info(
+          <Toast
+            info
+            title={intl.formatMessage(messages.info)}
+            content={intl.formatMessage(messages.changesSaved)}
+          />,
+        );
       });
     }
+  };
 
-    // Control Panel PATCH
-    if (
-      this.props.cpanelRequest.update.loading &&
-      nextProps.cpanelRequest.update.loaded
-    ) {
-      toast.info(
-        <Toast
-          info
-          title={this.props.intl.formatMessage(messages.info)}
-          content={this.props.intl.formatMessage(messages.changesSaved)}
-        />,
-      );
-    }
-  }
+  const onCancel = () => {
+    history.push(getParentUrl(pathname));
+  };
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.updateControlpanel(this.props.controlpanel['@id'], data);
+  if (error) {
+    return <Error error={error} />;
   }
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.push(getParentUrl(this.props.pathname));
-  }
+  if (controlpanel?.data) {
+    const localControlpanel = {
+      ...controlpanel,
+      data: {
+        ...controlpanel.data,
+      },
+    };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    // Error
-    if (this.state.error) {
-      return <Error error={this.state.error} />;
+    if (localControlpanel?.data?.filter_content_types === false) {
+      localControlpanel.data.filter_content_types = {
+        title: 'all',
+        token: 'all',
+      };
     }
-
-    if (this.props.controlpanel?.data) {
-      let controlpanel = this.props.controlpanel;
-      if (controlpanel?.data?.filter_content_types === false) {
-        controlpanel.data.filter_content_types = { title: 'all', token: 'all' };
+    if (localControlpanel?.data?.filter_content_types === true) {
+      if ((localControlpanel?.data?.allowed_content_types || []).length) {
+        localControlpanel.data.filter_content_types = {
+          title: 'some',
+          token: 'some',
+        };
+      } else {
+        localControlpanel.data.filter_content_types = {
+          title: 'none',
+          token: 'none',
+        };
       }
-      if (controlpanel?.data?.filter_content_types === true) {
-        if ((controlpanel?.data?.allowed_content_types || []).length) {
-          controlpanel.data.filter_content_types = {
-            title: 'some',
-            token: 'some',
-          };
-        } else {
-          controlpanel.data.filter_content_types = {
-            title: 'none',
-            token: 'none',
-          };
-        }
-      }
-      return (
-        <div id="page-controlpanel" className="ui container">
-          <Header disabled>
-            {this.props.intl.formatMessage(messages.title, {
-              id: controlpanel.title,
-            })}
-          </Header>
-          <Form
-            isEditForm
-            ref={this.form}
-            schema={controlpanel.schema}
-            formData={controlpanel.data}
-            onSubmit={this.onSubmit}
-            onCancel={this.onCancel}
-            pathname={this.props.pathname}
-            visual={this.state.visual}
-            hideActions
-            loading={this.props.cpanelRequest.update.loading}
-          />
-          {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.cpanelRequest.update.loading}
-                      loading={this.props.cpanelRequest.update.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 />;
+
+    return (
+      <div id="page-controlpanel" className="ui container">
+        <Header disabled>
+          {intl.formatMessage(messages.title, {
+            id: localControlpanel.title,
+          })}
+        </Header>
+        <Form
+          isEditForm
+          ref={form}
+          schema={localControlpanel.schema}
+          formData={localControlpanel.data}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          pathname={pathname}
+          visual={visual}
+          hideActions
+          loading={cpanelRequest.update?.loading}
+        />
+        {isClient &&
+          createPortal(
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Button
+                    id="toolbar-save"
+                    className="save"
+                    aria-label={intl.formatMessage(messages.save)}
+                    onClick={() => form.current.onSubmit()}
+                    disabled={cpanelRequest.update?.loading}
+                    loading={cpanelRequest.update?.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,
-      cpanelRequest: state.controlpanels,
-      pathname: props.location.pathname,
-      id: last(props.location.pathname.split('/')),
-      parent: nth(props.location.pathname.split('/'), -2),
-    }),
-    { getControlpanel, updateControlpanel },
-  ),
-)(ContentType);
+export default ContentType;

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

@@ -2,17 +2,14 @@ import React from '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 { render } from '@testing-library/react';
 
 import ContentType from './ContentType';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
@@ -62,15 +59,17 @@ describe('ContentType', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter
-          initialEntries={['/controlpanel/dexterity-types/Document']}
-        >
-          <Route
-            path={'/controlpanel/dexterity-types/:id'}
-            component={ContentType}
-          />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter
+            initialEntries={['/controlpanel/dexterity-types/Document']}
+          >
+            <Route
+              path={'/controlpanel/dexterity-types/:id'}
+              component={ContentType}
+            />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -3,6 +3,7 @@ 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 ContentTypeLayout from './ContentTypeLayout';
 
@@ -41,15 +42,17 @@ describe('ContentTypeLayout', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter
-          initialEntries={['/controlpanel/dexterity-types/Document/layout']}
-        >
-          <Route
-            path={'/controlpanel/dexterity-types/:id/layout'}
-            component={ContentTypeLayout}
-          />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter
+            initialEntries={['/controlpanel/dexterity-types/Document/layout']}
+          >
+            <Route
+              path={'/controlpanel/dexterity-types/:id/layout'}
+              component={ContentTypeLayout}
+            />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -169,7 +169,7 @@ class ContentTypeSchema extends Component {
           error
           title={this.props.intl.formatMessage(messages.error)}
           content={JSON.stringify(
-            nextProps.schemaRequest.put.error.response.body ||
+            nextProps.schemaRequest.put.error.response.body?.message ||
               nextProps.schemaRequest.put.error.response.text,
           )}
         />,

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

@@ -227,6 +227,7 @@ class ContentTypes extends Component {
       addTypeError: undefined,
       addTypeSetFormDataCallback: undefined,
     });
+    this._addTypeTrigger?.focus();
     toast.success(
       <Toast
         success
@@ -369,10 +370,13 @@ class ContentTypes extends Component {
           />
           <ModalForm
             open={this.state.showAddType}
-            className="modal"
+            className="modal add-content-type"
             onSubmit={this.onAddTypeSubmit}
             submitError={this.state.addTypeError}
-            onCancel={() => this.setState({ showAddType: false })}
+            onCancel={() => {
+              this.setState({ showAddType: false });
+              this._addTypeTrigger?.focus();
+            }}
             title={this.props.intl.formatMessage(messages.addTypeFormTitle)}
             loading={this.props.cpanelRequest.post.loading}
             schema={{
@@ -474,6 +478,9 @@ class ContentTypes extends Component {
                     aria-label={this.props.intl.formatMessage(messages.add)}
                     tabIndex={0}
                     id="toolbar-add"
+                    ref={(el) => {
+                      this._addTypeTrigger = el;
+                    }}
                     onClick={() => {
                       this.setState({ showAddType: true });
                     }}

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

@@ -3,6 +3,7 @@ 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 ContentTypes from './ContentTypes';
 
@@ -84,10 +85,12 @@ describe('ContentTypes', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/controlpanel/dexterity-types']}>
-          <Route path={'/controlpanel/:id'} component={ContentTypes} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/controlpanel/dexterity-types']}>
+            <Route path={'/controlpanel/:id'} component={ContentTypes} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );