@plone/volto 18.34.0 → 18.35.1

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.34.0",
+  "version": "18.35.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -142,8 +142,8 @@
     "@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",
@@ -151,10 +151,9 @@
     "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",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
@@ -166,14 +165,14 @@
     "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",
     "prepend-http": "2",
     "pretty-bytes": "5.3.0",
     "prettier": "3.2.5",
-    "prismjs": "1.27.0",
+    "prismjs": "1.30.0",
     "process": "^0.11.10",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
@@ -207,7 +206,6 @@
     "react-side-effect": "2.1.2",
     "react-simple-code-editor": "0.7.1",
     "react-sortable-hoc": "2.0.0",
-    "react-test-renderer": "18.2.0",
     "react-toastify": "5.5.0",
     "react-transition-group": "4.4.5",
     "react-virtualized": "9.22.3",
@@ -215,7 +213,6 @@
     "redux-actions": "3.0.0",
     "redux-connect": "10.0.0",
     "redux-localstorage-simple": "2.5.1",
-    "redux-mock-store": "1.5.4",
     "redux-thunk": "2.4.2",
     "rrule": "2.7.1",
     "semantic-ui-less": "2.4.1",
@@ -231,10 +228,10 @@
     "universal-cookie-express": "4.0.3",
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
-    "uuid": "^8.3.2",
-    "@plone/registry": "2.7.2",
-    "@plone/scripts": "3.10.5",
-    "@plone/volto-slate": "18.9.2"
+    "uuid": "^14.0.0",
+    "@plone/registry": "2.7.3",
+    "@plone/volto-slate": "18.10.1",
+    "@plone/scripts": "3.10.7"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -249,7 +246,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",
@@ -263,12 +260,12 @@
     "@storybook/test": "^8.0.4",
     "@storybook/theming": "^8.0.4",
     "@testing-library/cypress": "10.1.0",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.3.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@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",
@@ -277,11 +274,10 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.7",
     "@types/redux-mock-store": "^1.5.0",
-    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/ui": "^2.1.8",
+    "@vitest/ui": "^3.2.4",
     "autoprefixer": "10.4.8",
     "axe-core": "4.4.2",
     "babel-loader": "9.1.0",
@@ -308,7 +304,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,22 +315,22 @@
     "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": "^8.5.15",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-less": "6.0.0",
-    "postcss-load-config": "3.1.4",
-    "postcss-loader": "7.0.2",
-    "postcss-overrides": "3.1.4",
-    "postcss-scss": "4.0.6",
+    "postcss-load-config": "^6.0.1",
+    "postcss-loader": "^8.2.1",
+    "postcss-scss": "4.0.9",
     "razzle": "4.2.18",
     "razzle-dev-utils": "4.2.18",
     "razzle-plugin-scss": "4.2.18",
-    "react-docgen-typescript-plugin": "^1.0.5",
     "react-error-overlay": "6.0.9",
     "react-is": "^18.2.0",
-    "release-it": "^19.0.5",
+    "react-test-renderer": "18.2.0",
+    "redux-mock-store": "1.5.4",
+    "release-it": "^20.0.1",
     "semver": "^7.5.4",
     "start-server-and-test": "2.1.5",
     "storybook": "^8.6.15",
@@ -345,7 +341,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 +353,7 @@
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
     "why": "0.6.2",
-    "@plone/types": "1.6.2",
+    "@plone/types": "1.6.3",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "scripts": {
@@ -369,7 +365,7 @@
     "vitest": "vitest",
     "coverage": "vitest run --coverage",
     "test": "razzle test --maxWorkers=${MAX_WORKERS:-50%}",
-    "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test",
+    "test:ci": "CI=true razzle test",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "start:prod": "NODE_ENV=production node build/server.js",
     "prettier": "prettier --single-quote --check '{src,cypress}/**/*.{js,jsx,ts,tsx}' --check '*.js'",

package/src/actions/querystringsearch/querystringsearch.js

@@ -17,7 +17,10 @@ export function getQueryStringResults(path, data, subrequest, page) {
     delete requestData.depth;
     requestData.query.forEach((q) => {
       if (q.i === 'path') {
-        q.v += '::' + data.depth;
+        // fixes https://github.com/plone/volto/issues/8349
+        // Skip if depth is already embedded in the path value (e.g. set via object browser)
+        const hasEmbeddedDepth = /::\d+$/.test(q.v);
+        if (!hasEmbeddedDepth) q.v += '::' + data.depth;
       }
     });
   }

package/src/actions/querystringsearch/querystringsearch.test.js

@@ -73,4 +73,81 @@ describe('querystringsearch action', () => {
     expect(action.request.path).toEqual('/@querystring-search');
     expect(action.request.data.sort_order).toEqual('descending');
   });
+
+  describe('depth handling', () => {
+    it('appends depth to path value when depth is set and path has no embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      const pathQuery = action.request.data.query.find((q) => q.i === 'path');
+      expect(pathQuery.v).toEqual('/folder::2');
+    });
+
+    it('does not double-append depth when path value already contains an embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder::1',
+          },
+        ],
+        depth: 3,
+      };
+      const action = getQueryStringResults('', data);
+
+      const pathQuery = action.request.data.query.find((q) => q.i === 'path');
+      expect(pathQuery.v).toEqual('/folder::1');
+    });
+
+    it('removes depth from the top-level request data', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      expect(action.request.data.depth).toBeUndefined();
+    });
+
+    it('handles mixed path entries: appends depth only to those without embedded depth', () => {
+      const data = {
+        query: [
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder-a',
+          },
+          {
+            i: 'path',
+            o: 'plone.app.querystring.operation.string.path',
+            v: '/folder-b::5',
+          },
+        ],
+        depth: 2,
+      };
+      const action = getQueryStringResults('', data);
+
+      const [pathA, pathB] = action.request.data.query.filter(
+        (q) => q.i === 'path',
+      );
+      expect(pathA.v).toEqual('/folder-a::2');
+      expect(pathB.v).toEqual('/folder-b::5');
+    });
+  });
 });

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -10,6 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import BlockChooserSearch from './BlockChooserSearch';
@@ -98,16 +99,10 @@ const BlockChooser = ({
   }
   const [filterValue, setFilterValue] = React.useState('');
 
-  const getFormatMessage = (message) =>
-    intl.formatMessage({
-      id: message,
-      defaultMessage: message,
-    });
-
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title)
+        formatMessageWithFallback(intl, block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
         block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
@@ -117,7 +112,7 @@ const BlockChooser = ({
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title)
+        formatMessageWithFallback(intl, variation.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
@@ -145,9 +140,11 @@ const BlockChooser = ({
           }}
         >
           <Icon name={block.icon} size="36px" />
-          {getFormatMessage(block.title)}
+          {formatMessageWithFallback(intl, block.title)}
           {filterValue && variations?.[0]?.title && (
-            <small>{getFormatMessage(variations[0].title)}</small>
+            <small>
+              {formatMessageWithFallback(intl, variations[0].title)}
+            </small>
           )}
         </Button>
       </Button.Group>

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -149,15 +149,6 @@ export class Edit extends Component {
                 this.props.setUIState({ hovered: this.props.id });
               }
             }}
-            onFocus={(e) => {
-              // TODO: This `onFocus` steals somehow the focus from the slate block
-              // we have to investigate why this is happening
-              // Apparently, I can't see any difference in the behavior
-              // If any, we can fix it in successive iterations
-              // if (this.props.hovered !== this.props.id) {
-              //   this.props.setUIState({ hovered: this.props.id });
-              // }
-            }}
             onMouseLeave={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -172,6 +163,15 @@ export class Edit extends Component {
                   e,
                 );
             }}
+            onFocus={(e) => {
+              const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+              !this.props.selected &&
+                this.props.onSelectBlock(
+                  this.props.id,
+                  this.props.selected ? false : isMultipleSelection,
+                  e,
+                );
+            }}
             onKeyDown={
               !(blockHasOwnFocusManagement || disableNewBlocks)
                 ? (e) =>
@@ -245,7 +245,6 @@ export class Edit extends Component {
             className={cx(`block ${type}`, { selected: this.props.selected })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
-            // The tabIndex is required for the keyboard navigation
             tabIndex={-1}
           >
             {this.props.intl.formatMessage(messages.unknownBlock, {

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

@@ -5,7 +5,9 @@ import includes from 'lodash/includes';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { setUIState } from '@plone/volto/actions/form/form';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import config from '@plone/volto/registry';
+import { useIntl } from 'react-intl';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -34,6 +36,7 @@ export const Item = forwardRef(
     },
     ref,
   ) => {
+    const intl = useIntl();
     const selected = useSelector((state) => state.form.ui.selected);
     const hovered = useSelector((state) => state.form.ui.hovered);
     const multiSelected = useSelector((state) => state.form.ui.multiSelected);
@@ -49,7 +52,11 @@ export const Item = forwardRef(
         ? data.required
         : includes(config.blocks.requiredBlocks, data?.['@type']);
     const fixed = !!data?.fixed;
-
+    const configTitle = config.blocks.blocksConfig[data?.['@type']]?.title;
+    const blockTitle =
+      data?.plaintext ||
+      formatMessageWithFallback(intl, configTitle) ||
+      data?.title;
     return (
       <li
         className={classNames(
@@ -122,9 +129,7 @@ export const Item = forwardRef(
                 style={{ verticalAlign: 'middle' }}
               />
             )}{' '}
-            {data?.plaintext ||
-              config.blocks.blocksConfig[data?.['@type']]?.title ||
-              data?.title}
+            {blockTitle}
           </span>
           {!clone && onRemove && !required && (
             <button

package/src/components/manage/Blocks/Image/View.test.jsx

@@ -36,13 +36,13 @@ config.blocks.blocksConfig = {
 
 describe('Image View Component', () => {
   test('renders a view image component with a local image', () => {
-    const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);
-    const img = getByRole('img');
+    const { container } = render(<View data={{ url: '/image.jpg' }} />);
+    const img = container.querySelector('img');
     expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
     expect(img).toHaveAttribute('loading', 'lazy');
   });
   test('renders a view image component with a local image with a link', () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <View
@@ -51,22 +51,22 @@ describe('Image View Component', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     const a = container.querySelector('a');
     expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
     expect(a).toHaveAttribute('href', '/front-page');
   });
   test('renders a view image component with an external image', () => {
-    const { getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <View data={{ url: 'https://plone.org/logo.jpg' }} />
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     expect(img).toHaveAttribute('src', 'https://plone.org/logo.jpg');
   });
   test('renders a view image component with an external image with a link', () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Provider store={store}>
         <View
           data={{
@@ -76,7 +76,7 @@ describe('Image View Component', () => {
         />
       </Provider>,
     );
-    const img = getByRole('img');
+    const img = container.querySelector('img');
     const a = container.querySelector('a');
     expect(img).toHaveAttribute('src', 'https://plone.org/logo.jpg');
     expect(a).toHaveAttribute('href', 'http://front-page');

package/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Link, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
@@ -41,22 +42,22 @@ const ContentsBreadcrumbs = (props) => {
         </>
       )}
       {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
-        <Link
-          to={`/${lang}/contents`}
+        <UniversalLink
+          href={`/${lang}/contents`}
           className="section"
           title={intl.formatMessage(messages.home)}
         >
           {langmap?.[lang]?.nativeName ?? lang}
-        </Link>
+        </UniversalLink>
       )}
       {!settings.isMultilingual && (
-        <Link
-          to="/contents"
+        <UniversalLink
+          href="/contents"
           className="section"
           title={intl.formatMessage(messages.home)}
         >
           <ContentsBreadcrumbsHomeItem />
-        </Link>
+        </UniversalLink>
       )}
       {items.map((breadcrumb, index, breadcrumbs) => [
         <Breadcrumb.Divider key={`divider-${breadcrumb.url}`} />,

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/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);