@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

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/ContentType.jsx

@@ -182,7 +182,7 @@ class ContentType extends Component {
       return <Error error={this.state.error} />;
     }
 
-    if (this.props.controlpanel) {
+    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' };

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

@@ -8,11 +8,7 @@ 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" />),
 }));

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/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/Groups/GroupsControlpanel.jsx

@@ -494,8 +494,9 @@ class GroupsControlpanel extends Component {
                       messages.addGroupsFormGroupNameTitle,
                     ),
                     type: 'string',
-                    description:
-                      'A unique identifier for the group. Can not be changed after creation.',
+                    description: this.props.intl.formatMessage(
+                      messages.addGroupsFormGroupNameDescription,
+                    ),
                   },
                   email: {
                     title: this.props.intl.formatMessage(

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/Relations/Relations.jsx

@@ -47,7 +47,7 @@ const RelationsControlPanel = () => {
 
   return (
     <>
-      <div className="ui container">
+      <div className="">
         <div className="relations-control-panel">
           <Helmet title={intl.formatMessage(messages.relations)} />
           {can_edit ? (

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

@@ -9,11 +9,7 @@ import AddRule from './AddRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-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="Toolbar" />),

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

@@ -13,11 +13,7 @@ vi.mock('../../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-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');
 
 describe('EditRule', () => {
   it('renders rules edit interface', () => {

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

@@ -7,11 +7,7 @@ import UndoControlpanel from './UndoControlpanel';
 
 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" />),
 }));