@plone/volto 19.0.0-alpha.26 → 19.0.0-alpha.28

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.values(blocksConfig)
+    .map((blockConfig) => ({
+      ...blockConfig,
+      title: blockConfig.title
+        ? intl.formatMessage({
+            id: blockConfig.title,
+            defaultMessage: blockConfig.title,
+          })
+        : blockConfig.id,
+    }))
+    .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/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

@@ -22,6 +22,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 +52,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',

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/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/Users/UsersControlpanel.jsx

@@ -25,6 +25,7 @@ import { Link } from 'react-router-dom';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import { isManager, canAssignGroup } from '@plone/volto/helpers/User/User';
+import { getErrorMessage } from '@plone/volto/helpers/Utils/Utils';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import addUserSvg from '@plone/volto/icons/add-user.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -351,9 +352,7 @@ const UsersControlpanel = () => {
           })
           .catch((error) => {
             // Handle error
-            setAddUserError(
-              error.response?.body?.error?.message || 'Error creating user',
-            );
+            setAddUserError(getErrorMessage(error));
           });
       }
     },
@@ -417,11 +416,11 @@ const UsersControlpanel = () => {
   /**
    * Handle Errors after createUser()
    *
-   * @param {object} error object. Requires the property .message
+   * @param {object} error object
    * @returns {undefined}
    */
   const onAddUserError = useCallback((error) => {
-    setAddUserError(error.response.body.error.message);
+    setAddUserError(getErrorMessage(error));
   }, []);
 
   /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, act } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -39,17 +39,63 @@ describe('UsersControlpanel', () => {
         messages: {},
       },
     });
-    const { container } = await act(async () => {
-      return render(
-        <Provider store={store}>
-          <MemoryRouter initialEntries={['/controlpanel/users']}>
-            <UsersControlpanel />
-            <div id="toolbar"></div>
-          </MemoryRouter>
-        </Provider>,
-      );
-    });
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/controlpanel/users']}>
+          <UsersControlpanel />
+          <div id="toolbar"></div>
+        </MemoryRouter>
+      </Provider>,
+    );
+    await waitFor(() => {});
 
     expect(container).toMatchSnapshot();
   });
+
+  it('handles createRequest error when response body has only message', async () => {
+    const store = mockStore({
+      userSession: {
+        token: jwt.sign({ sub: 'john' }, 'secret'),
+      },
+      roles: { roles: [] },
+      users: {
+        users: [],
+        create: {
+          loading: false,
+          error: {
+            response: { body: { message: 'SMTP relay access denied' } },
+          },
+        },
+        user: {
+          roles: ['Manager'],
+          '@id': 'admin',
+        },
+      },
+      groups: {
+        groups: [],
+        create: { loading: false },
+      },
+      authRole: {
+        authenticatedRole: [],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/controlpanel/users']}>
+          <UsersControlpanel />
+          <div id="toolbar"></div>
+        </MemoryRouter>
+      </Provider>,
+    );
+    await waitFor(() => {});
+
+    // If the component attempted to read a missing property it would throw.
+    // Reaching this line means the error shape was handled without exceptions.
+    expect(true).toBe(true);
+  });
 });