@plone/volto 18.33.1 → 18.35.0

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.33.1",
+  "version": "18.35.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -142,17 +142,17 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.2",
-    "@loadable/component": "5.14.1",
-    "@loadable/server": "5.14.0",
+    "@loadable/component": "5.16.7",
+    "@loadable/server": "5.16.7",
     "@redux-devtools/extension": "^3.3.0",
     "classnames": "2.5.1",
     "connected-react-router": "6.8.0",
-    "debug": "4.3.2",
+    "debug": "4.3.4",
     "decorate-component-with-props": "1.2.1",
     "dependency-graph": "0.10.0",
     "detect-browser": "5.1.0",
-    "diff": "3.5.0",
-    "express": "4.19.2",
+    "diff": "3.5.1",
+    "express": "4.22.1",
     "filesize": "6",
     "full-icu": "1.4.0",
     "github-slugger": "1.4.0",
@@ -166,7 +166,7 @@
     "jwt-decode": "2.2.0",
     "linkify-it": "3.0.2",
     "locale": "0.1.0",
-    "lodash": "4.17.23",
+    "lodash": "4.18.1",
     "lodash-move": "1.1.1",
     "moment": "2.29.4",
     "object-assign": "4.1.1",
@@ -177,7 +177,7 @@
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
-    "query-string": "7.1.0",
+    "query-string": "7.1.3",
     "rc-time-picker": "3.7.3",
     "react": "18.2.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
@@ -220,7 +220,7 @@
     "rrule": "2.7.1",
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.1.5",
-    "serialize-javascript": "7.0.4",
+    "serialize-javascript": "7.0.5",
     "slate": "0.100.0",
     "slate-hyperscript": "0.100.0",
     "slate-react": "0.98.4",
@@ -232,9 +232,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/registry": "2.7.1",
-    "@plone/scripts": "3.10.5",
-    "@plone/volto-slate": "18.9.1"
+    "@plone/scripts": "3.10.6",
+    "@plone/registry": "2.7.2",
+    "@plone/volto-slate": "18.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -249,7 +249,7 @@
     "@babel/types": "7.20.5",
     "@fiverr/afterbuild-webpack-plugin": "^1.0.0",
     "@jest/globals": "^29.7.0",
-    "@loadable/babel-plugin": "5.13.2",
+    "@loadable/babel-plugin": "5.16.1",
     "@loadable/webpack-plugin": "5.15.2",
     "@sinonjs/fake-timers": "^6.0.1",
     "@storybook/addon-actions": "^8.0.4",
@@ -268,7 +268,7 @@
     "@testing-library/react-hooks": "8.0.1",
     "@types/history": "^4.7.11",
     "@types/jest": "^29.5.8",
-    "@types/loadable__component": "^5.13.9",
+    "@types/loadable__component": "^5.13.10",
     "@types/lodash": "^4.14.201",
     "@types/node": "^22",
     "@types/react": "^18",
@@ -308,7 +308,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-webpack-plugin": "5.5.0",
+    "html-webpack-plugin": "5.6.7",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
     "jest-environment-jsdom": "^26",
@@ -319,7 +319,7 @@
     "less": "3.13.1",
     "less-loader": "11.1.0",
     "lodash-webpack-plugin": "0.11.6",
-    "mini-css-extract-plugin": "2.7.2",
+    "mini-css-extract-plugin": "2.10.2",
     "moment-locales-webpack-plugin": "1.2.0",
     "postcss": "8.4.31",
     "postcss-flexbugs-fixes": "5.0.2",
@@ -331,7 +331,7 @@
     "razzle": "4.2.18",
     "razzle-dev-utils": "4.2.18",
     "razzle-plugin-scss": "4.2.18",
-    "react-docgen-typescript-plugin": "^1.0.5",
+    "react-docgen-typescript-plugin": "^1.0.8",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
     "release-it": "^19.0.5",
@@ -345,7 +345,7 @@
     "svg-loader": "0.0.2",
     "svgo": "^3.0.0",
     "svgo-loader": "3.0.3",
-    "terser-webpack-plugin": "5.3.6",
+    "terser-webpack-plugin": "5.4.0",
     "ts-jest": "^26.4.2",
     "ts-loader": "9.4.4",
     "typescript": "^5.7.3",
@@ -357,7 +357,7 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.6.1",
+    "@plone/types": "1.6.2",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "scripts": {

package/razzle.config.js

@@ -310,6 +310,7 @@ const defaultModify = ({
     'load-volto-addons': addonsLoaderPath,
     ...registry.getResolveAliases(),
     '@plone/volto': `${registry.voltoPath}/src`,
+    '@plone/volto-slate': `${registry.voltoPath}/../volto-slate/src`,
     // to be able to reference path uncustomized by webpack
     '@plone/volto-original': `${registry.voltoPath}/src`,
     // be able to reference current package from customized package

package/src/actions/users/users.js

@@ -3,7 +3,7 @@
  * @module actions/users/users
  */
 
-import { stringify } from 'query-string';
+import qs from 'query-string';
 
 import {
   CREATE_USER,
@@ -92,7 +92,7 @@ export function listUsers(options = {}) {
 
   let filterarg =
     groups_filter.length > 0
-      ? stringify(
+      ? qs.stringify(
           { 'groups-filter': groups_filter },
           { arrayFormat: 'colon-list-separator' },
         )

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -44,6 +44,12 @@ export const Item = forwardRef(
       config.blocks.blocksConfig[data?.['@type']]?.icon ||
       config.blocks.blocksConfig.title?.icon;
 
+    const required =
+      typeof data?.required === 'boolean'
+        ? data.required
+        : includes(config.blocks.requiredBlocks, data?.['@type']);
+    const fixed = !!data?.fixed;
+
     return (
       <li
         className={classNames(
@@ -93,15 +99,17 @@ export const Item = forwardRef(
           ref={ref}
           style={style}
         >
-          <button
-            ref={ref}
-            {...handleProps}
-            className={classNames('action', 'drag')}
-            tabIndex={0}
-            data-cypress="draggable-handle"
-          >
-            <Icon name={dragSVG} size="16px" />
-          </button>
+          {!fixed && (
+            <button
+              ref={ref}
+              {...handleProps}
+              className={classNames('action', 'drag')}
+              tabIndex={0}
+              data-cypress="draggable-handle"
+            >
+              <Icon name={dragSVG} size="16px" />
+            </button>
+          )}
           <span
             className={cx('text', {
               errored: errors && Object.keys(errors).length > 0,
@@ -118,7 +126,7 @@ export const Item = forwardRef(
               config.blocks.blocksConfig[data?.['@type']]?.title ||
               data?.title}
           </span>
-          {!clone && onRemove && (
+          {!clone && onRemove && !required && (
             <button
               onClick={onRemove}
               className={classNames('action', 'delete')}

package/src/components/manage/Blocks/Block/Order/Item.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import config from '@plone/volto/registry';
+
+import { Item } from './Item';
+
+const mockStore = configureStore();
+
+const defaultStoreState = {
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  form: {
+    ui: {
+      selected: null,
+      hovered: null,
+      multiSelected: [],
+      gridSelected: null,
+    },
+  },
+};
+
+const renderItem = (data = {}) => {
+  const store = mockStore(defaultStoreState);
+
+  return render(
+    <Provider store={store}>
+      <Item
+        id="title-block-id"
+        data={{ '@type': 'title', ...data }}
+        depth={0}
+        indentationWidth={25}
+        onRemove={() => {}}
+        onSelectBlock={() => {}}
+        handleProps={{}}
+      />
+    </Provider>,
+  );
+};
+
+describe('Order Item', () => {
+  let requiredBlocks;
+
+  beforeEach(() => {
+    requiredBlocks = [...(config.blocks.requiredBlocks || [])];
+    config.blocks.requiredBlocks = [];
+  });
+
+  afterEach(() => {
+    config.blocks.requiredBlocks = requiredBlocks;
+  });
+
+  test('renders drag and delete actions for movable and removable blocks', () => {
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.drag')).not.toBeNull();
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides delete action for required blocks', () => {
+    const { container } = renderItem({ required: true });
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('hides delete action for block types configured as required', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem();
+
+    expect(container.querySelector('.action.delete')).toBeNull();
+  });
+
+  test('allows explicit required=false to override required block types', () => {
+    config.blocks.requiredBlocks = ['title'];
+
+    const { container } = renderItem({ required: false });
+
+    expect(container.querySelector('.action.delete')).not.toBeNull();
+  });
+
+  test('hides drag action for fixed blocks', () => {
+    const { container } = renderItem({ fixed: true });
+
+    expect(container.querySelector('.action.drag')).toBeNull();
+  });
+});

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

@@ -27,6 +27,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
+import Error from '@plone/volto/components/theme/Error/Error';
 import circleBottomSVG from '@plone/volto/icons/circle-bottom.svg';
 import circleTopSVG from '@plone/volto/icons/circle-top.svg';
 import backSVG from '@plone/volto/icons/back.svg';
@@ -148,6 +149,7 @@ const AddonsControlpanel = (props) => {
     shallowEqual,
   );
   const loadingAddons = useSelector((state) => state.addons.loading);
+  const addonsError = useSelector((state) => state.addons.error);
 
   useEffect(() => {
     dispatch(listAddons());
@@ -245,6 +247,11 @@ const AddonsControlpanel = (props) => {
     setactiveIndex(newIndex);
   };
 
+  // Error handling for unauthorized access
+  if (addonsError) {
+    return <Error error={addonsError} />;
+  }
+
   return (
     <Container id="page-addons" className="controlpanel-addons">
       <Helmet title={intl.formatMessage(messages.addOns)} />

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/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/UserGroupMembershipControlPanel.test.jsx

@@ -14,6 +14,9 @@ vi.mock('../../Toolbar/Toolbar', () => ({
 describe('UserGroupMembershipControlPanel', () => {
   it('renders a user group membership control component', () => {
     const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       controlpanels: {
         controlpanel: {
           data: {

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

@@ -13,6 +13,7 @@ import { listRoles } from '@plone/volto/actions/roles/roles';
 import { listGroups, updateGroup } from '@plone/volto/actions/groups/groups';
 import { getControlpanel } from '@plone/volto/actions/controlpanels/controlpanels';
 import { getUserSchema } from '@plone/volto/actions/userschema/userschema';
+import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import jwtDecode from 'jwt-decode';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -57,7 +58,8 @@ import {
  * UsersControlpanel functional component.
  * @function UsersControlpanel
  */
-const UsersControlpanel = () => {
+const UsersControlpanel = (props) => {
+  const { staticContext } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
 
@@ -143,7 +145,10 @@ const UsersControlpanel = () => {
       await listUsersAction();
       setEntries(users);
     }
-    await getUserSchemaAction();
+    // Only fetch user schema if it hasn't been loaded yet (e.g. by asyncConnect SSR)
+    if (!userschema?.loaded) {
+      await getUserSchemaAction();
+    }
     await getUserAction(userId);
   }, [
     getControlpanelAction,
@@ -152,6 +157,7 @@ const UsersControlpanel = () => {
     listGroupsAction,
     listUsersAction,
     users,
+    userschema,
     getUserSchemaAction,
     getUserAction,
     userId,
@@ -451,6 +457,8 @@ const UsersControlpanel = () => {
 
   useEffect(() => {
     setIsClient(true);
+    // Skip fetching if the store already has an error.
+    if (loadRolesRequest?.error) return;
     fetchData();
     checkLoginUsingEmailStatus();
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -471,8 +479,14 @@ const UsersControlpanel = () => {
     }
   }, [loadRolesRequest?.error, loadRolesRequest?.loading]);
 
-  if (error) {
-    return <Error error={error} />;
+  const effectiveError =
+    error ||
+    (loadRolesRequest?.error && !loadRolesRequest?.loading
+      ? loadRolesRequest.error
+      : null);
+
+  if (effectiveError) {
+    return <Error error={effectiveError} staticContext={staticContext} />;
   }
 
   const usernameToDelete = userToDelete ? userToDelete.username : '';
@@ -729,4 +743,43 @@ const UsersControlpanel = () => {
   );
 };
 
-export default UsersControlpanel;
+export default asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: ({ store: { dispatch, getState } }) => {
+      return dispatch(getControlpanel('usergroup')).then(() => {
+        const state = getState();
+        const many_users = state.controlpanels?.controlpanel?.data?.many_users;
+        if (!many_users) {
+          dispatch(listUsers());
+          dispatch(listGroups());
+        }
+      });
+    },
+  },
+  {
+    key: 'roles',
+    promise: ({ store: { dispatch } }) => {
+      return dispatch(listRoles());
+    },
+  },
+  {
+    key: 'userschema',
+    promise: ({ store: { dispatch } }) => {
+      return dispatch(getUserSchema());
+    },
+  },
+  {
+    key: 'user',
+    promise: ({ store: { dispatch, getState } }) => {
+      const state = getState();
+      const token = state.userSession.token;
+      if (token) {
+        const userId = jwtDecode(token).sub;
+        if (userId) {
+          return dispatch(getUser(userId));
+        }
+      }
+    },
+  },
+])(UsersControlpanel);