@plone/volto 18.32.3 → 18.33.0

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.32.3",
+  "version": "18.33.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -34,14 +34,6 @@
   },
   "main": "src/index.js",
   "types": "types/index.d.ts",
-  "bundlewatch": {
-    "files": [
-      {
-        "path": "build/public/static/js/*.js",
-        "maxSize": "700kB"
-      }
-    ]
-  },
   "jest": {
     "transform": {
       "^.+\\.js(x)?$": "babel-jest",
@@ -166,16 +158,15 @@
     "github-slugger": "1.4.0",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
-    "http-proxy-middleware": "2.0.1",
+    "http-proxy-middleware": "2.0.9",
     "image-extensions": "1.1.0",
-    "immutable": "3",
     "is-hotkey": "0.2.0",
     "is-url": "1.2.4",
     "jotai": "2.11.3",
     "jwt-decode": "2.2.0",
     "linkify-it": "3.0.2",
     "locale": "0.1.0",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "lodash-move": "1.1.1",
     "moment": "2.29.4",
     "object-assign": "4.1.1",
@@ -193,7 +184,7 @@
     "react-animate-height": "2.0.17",
     "react-beautiful-dnd": "13.0.0",
     "react-cookie": "4.1.1",
-    "react-dates": "21.5.1",
+    "react-dates": "21.8.0",
     "react-detect-click-outside": "1.1.1",
     "react-dnd": "5.0.0",
     "react-dnd-html5-backend": "5.0.1",
@@ -229,7 +220,7 @@
     "rrule": "2.7.1",
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.1.5",
-    "serialize-javascript": "3.1.0",
+    "serialize-javascript": "7.0.4",
     "slate": "0.100.0",
     "slate-hyperscript": "0.100.0",
     "slate-react": "0.98.4",
@@ -241,9 +232,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/registry": "2.7.0",
-    "@plone/volto-slate": "18.8.1",
-    "@plone/scripts": "3.10.4"
+    "@plone/volto-slate": "18.9.0",
+    "@plone/registry": "2.7.1",
+    "@plone/scripts": "3.10.5"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -299,7 +290,6 @@
     "babel-plugin-react-intl": "5.1.17",
     "babel-plugin-root-import": "6.1.0",
     "babel-preset-razzle": "4.2.18",
-    "bundlewatch": "0.3.3",
     "circular-dependency-plugin": "5.2.2",
     "css-loader": "5.2.7",
     "cypress": "13.17.0",
@@ -326,7 +316,7 @@
     "jiti": "^2.4.2",
     "jsdom": "^16.7.0",
     "jsonwebtoken": "9.0.0",
-    "less": "3.11.1",
+    "less": "3.13.1",
     "less-loader": "11.1.0",
     "lodash-webpack-plugin": "0.11.6",
     "mini-css-extract-plugin": "2.7.2",
@@ -346,7 +336,7 @@
     "react-is": "^18.2.0",
     "release-it": "^19.0.5",
     "semver": "^7.5.4",
-    "start-server-and-test": "1.14.0",
+    "start-server-and-test": "2.1.5",
     "storybook": "^8.6.15",
     "style-loader": "3.3.1",
     "stylelint": "^16.3.1",
@@ -356,14 +346,13 @@
     "svgo": "^3.0.0",
     "svgo-loader": "3.0.3",
     "terser-webpack-plugin": "5.3.6",
-    "tmp": "0.2.1",
     "ts-jest": "^26.4.2",
     "ts-loader": "9.4.4",
     "typescript": "^5.7.3",
     "use-trace-update": "1.3.2",
-    "vitest": "^3.0.4",
-    "wait-on": "6.0.0",
-    "webpack": "5.90.1",
+    "vitest": "^3.2.4",
+    "wait-on": "^9.0.4",
+    "webpack": "5.105.4",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
@@ -371,9 +360,6 @@
     "@plone/types": "1.6.1",
     "@plone/volto-coresandbox": "1.0.0"
   },
-  "volta": {
-    "node": "20.9.0"
-  },
   "scripts": {
     "analyze": "BUNDLE_ANALYZE=true razzle build",
     "start": "make build-deps && razzle start",

package/razzle.config.js

@@ -420,11 +420,26 @@ const defaultModify = ({
 const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
 
 const defaultPlugins = [
-  { object: require('./webpack-plugins/webpack-less-plugin')({ registry }) },
-  { object: require('./webpack-plugins/webpack-svg-plugin') },
-  { object: require('./webpack-plugins/webpack-bundle-analyze-plugin') },
-  { object: require('./jest-extender-plugin') },
-  'scss',
+  {
+    name: 'less',
+    object: require('./webpack-plugins/webpack-less-plugin')({ registry }),
+  },
+  {
+    name: 'svg',
+    object: require('./webpack-plugins/webpack-svg-plugin'),
+  },
+  {
+    name: 'bundle-analyze',
+    object: require('./webpack-plugins/webpack-bundle-analyze-plugin'),
+  },
+  {
+    name: 'jest-extender',
+    object: require('./jest-extender-plugin'),
+  },
+  {
+    name: 'scss',
+    object: require('razzle-plugin-scss'),
+  },
 ];
 
 const plugins = addonExtenders.reduce(

package/src/components/manage/Add/Add.jsx

@@ -241,11 +241,13 @@ class Add extends Component {
     if (this.props.location?.state?.translationOf) {
       const language = this.props.location.state.languageFrom;
       const langFileName = toGettextLang(language);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        this.props.changeLanguage(language, locale.default);
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          this.props.changeLanguage(language, locale.default);
+        })
+        .catch(() => {
+          this.props.changeLanguage(language, {});
+        });
       this.props.history.push(this.props.location?.state?.translationOf);
     } else {
       this.props.history.push(getBaseUrl(this.props.pathname));
@@ -269,7 +271,8 @@ class Add extends Component {
       const translationObject = this.props.location?.state?.translationObject;
 
       const translateTo = translationObject
-        ? langmap?.[this.props.location?.state?.language]?.nativeName
+        ? langmap?.[this.props.location?.state?.language]?.nativeName ||
+          this.props.location?.state?.language
         : null;
 
       // Get initial blocks from local config, if any

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

@@ -17,6 +17,10 @@ const messages = defineMessages({
     id: 'Type the title…',
     defaultMessage: 'Type the title…',
   },
+  editable_title: {
+    id: 'Content title',
+    defaultMessage: 'Content title',
+  },
 });
 
 function usePrevious(value) {
@@ -159,6 +163,7 @@ export const TitleBlockEdit = (props) => {
         renderElement={renderElement}
         onFocus={handleFocus}
         aria-multiline="false"
+        aria-label={intl.formatMessage(messages.editable_title)}
       ></Editable>
     </Slate>
   );

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

@@ -504,11 +504,17 @@ class Contents extends Component {
     }
 
     if (this.props.deleteRequest.loading && nextProps.deleteRequest.error) {
+      const deleteErrorMessageTitle = this.props.intl.formatMessage(
+        messages.deleteError,
+      );
+      const deleteErrorMessageContent =
+        nextProps.deleteRequest.error?.response?.body?.message ||
+        deleteErrorMessageTitle;
       this.props.toastify.toast.error(
         <Toast
           error
-          title={this.props.intl.formatMessage(messages.deleteError)}
-          content={this.props.intl.formatMessage(messages.deleteError)}
+          title={deleteErrorMessageTitle}
+          content={deleteErrorMessageContent}
         />,
       );
     }

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);
+  });
 });

package/src/components/manage/Multilingual/CompareLanguages.jsx

@@ -57,33 +57,33 @@ const CompareLanguagesMenu = ({
                 {comparingLanguage === t.language ? (
                   <button
                     aria-label={`${intl.formatMessage(messages.stop_compare)} ${
-                      langmap[t.language].nativeName
+                      langmap[t.language]?.nativeName || t.language
                     }`}
                     title={`${intl.formatMessage(messages.stop_compare)} ${
-                      langmap[t.language].nativeName
+                      langmap[t.language]?.nativeName || t.language
                     }`}
                     onClick={() => {
                       setComparingLanguage(null);
                       closeMenu();
                     }}
                   >
-                    {langmap[t.language].nativeName}
+                    {langmap[t.language]?.nativeName || t.language}
                     <Icon name={clearSVG} size="30px" />
                   </button>
                 ) : (
                   <button
-                    aria-label={`${intl.formatMessage(
-                      messages.compare_to,
-                    )} ${langmap[t.language].nativeName.toLowerCase()}`}
-                    title={`${intl.formatMessage(
-                      messages.compare_to,
-                    )} ${langmap[t.language].nativeName.toLowerCase()}`}
+                    aria-label={`${intl.formatMessage(messages.compare_to)} ${(
+                      langmap[t.language]?.nativeName || t.language
+                    ).toLowerCase()}`}
+                    title={`${intl.formatMessage(messages.compare_to)} ${(
+                      langmap[t.language]?.nativeName || t.language
+                    ).toLowerCase()}`}
                     onClick={() => {
                       setComparingLanguage(t.language);
                       closeMenu();
                     }}
                   >
-                    {langmap[t.language].nativeName}
+                    {langmap[t.language]?.nativeName || t.language}
                   </button>
                 )}
               </li>

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -32,11 +32,14 @@ const CreateTranslation = (props) => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
         const langFileName = toGettextLang(language);
-        import(
-          /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-        ).then((locale) => {
-          dispatch(changeLanguage(language, locale.default));
-        });
+        import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+          .then((locale) => {
+            dispatch(changeLanguage(language, locale.default));
+          })
+          .catch(() => {
+            // If locale file doesn't exist, still switch language with empty locale
+            dispatch(changeLanguage(language, {}));
+          });
       }
     };
     // On mount only

package/src/components/manage/Multilingual/ManageTranslations.jsx

@@ -176,7 +176,7 @@ const ManageTranslations = (props) => {
           <FormattedMessage
             id="Manage translations for {title}"
             defaultMessage="Manage translations for {title}"
-            values={{ title: <q>{content.title}</q> }}
+            values={{ title: <q>{content?.title || ''}</q> }}
           />
         </Segment>
         {content && (
@@ -193,9 +193,9 @@ const ManageTranslations = (props) => {
                 <Table.Row key={lang}>
                   <Table.Cell collapsing>
                     {lang === content.language.token ? (
-                      <strong>{langmap[lang].nativeName}</strong>
+                      <strong>{langmap?.[lang]?.nativeName || lang}</strong>
                     ) : (
-                      langmap[lang].nativeName
+                      langmap?.[lang]?.nativeName || lang
                     )}
                   </Table.Cell>
                   <Table.Cell>
@@ -233,7 +233,9 @@ const ManageTranslations = (props) => {
                         <Button
                           aria-label={`${intl.formatMessage(
                             messages.unlink,
-                          )} ${langmap[lang].nativeName.toLowerCase()}`}
+                          )} ${(
+                            langmap?.[lang]?.nativeName || lang
+                          ).toLowerCase()}`}
                           basic
                           icon
                           disabled={lang === content.language.token}
@@ -252,9 +254,9 @@ const ManageTranslations = (props) => {
                     ) : (
                       <Button.Group>
                         <Button
-                          aria-label={`${intl.formatMessage(
-                            messages.link,
-                          )} ${langmap[lang].nativeName.toLowerCase()}`}
+                          aria-label={`${intl.formatMessage(messages.link)} ${(
+                            langmap?.[lang]?.nativeName || lang
+                          ).toLowerCase()}`}
                           basic
                           icon
                           disabled={lang === content.language.token}

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -48,12 +48,15 @@ const TranslationObject = ({
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
       const langFileName = toGettextLang(lang);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
-        setLoadingLocale(false);
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
+          setLoadingLocale(false);
+        })
+        .catch(() => {
+          setLocales({ ...locales, [toReactIntlLang(lang)]: {} });
+          setLoadingLocale(false);
+        });
     }
   }, [loadingLocale, locales]);
 
@@ -83,7 +86,7 @@ const TranslationObject = ({
             active={activeMenu === 'language'}
             onClick={handleMenuClick}
           >
-            {langmap[lang].nativeName}
+            {langmap?.[lang]?.nativeName || lang}
           </Menu.Item>
           {visual && (
             <Menu.Item
@@ -107,7 +110,7 @@ const TranslationObject = ({
             hideActions
             pathname={flattenToAppURL(translationObject['@id'])}
             visual={visual}
-            title={langmap[lang].nativeName}
+            title={langmap?.[lang]?.nativeName || lang}
             loading={false}
             isFormSelected={isFormSelected}
             onSelectForm={onSelectForm}

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -53,11 +53,14 @@ const PersonalPreferences = (props) => {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
       const langFileName = toGettextLang(language);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        dispatch(changeLanguage(language, locale.default));
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          dispatch(changeLanguage(language, locale.default));
+        })
+        .catch(() => {
+          // If locale file doesn't exist, still switch language with empty locale
+          dispatch(changeLanguage(language, {}));
+        });
     }
     toast.success(<Toast success title={intl.formatMessage(messages.saved)} />);
     closeMenu();

package/src/components/manage/Toolbar/Types.crash.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import config from '@plone/volto/registry';
+import Types from './Types';
+
+config.settings.isMultilingual = true;
+config.settings.supportedLanguages = ['en', 'missing-lang'];
+
+const mockStore = configureStore();
+
+describe('Types', () => {
+  it('should not crash if a language is not in langmap', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      types: {
+        types: [],
+      },
+    });
+
+    const content = {
+      '@type': 'Folder',
+      '@id': '/folder',
+      '@components': {
+        translations: {
+          items: [],
+        },
+      },
+    };
+
+    const { getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Types pathname="/folder" types={[]} content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByText('Translate to missing-lang')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Toolbar/Types.jsx

@@ -15,7 +15,7 @@ import config from '@plone/volto/registry';
 const Types = ({ types, pathname, content, currentLanguage }) => {
   const { settings } = config;
   return types.length > 0 ||
-    (settings.isMultilingual && content['@components'].translations) ? (
+    (settings.isMultilingual && content?.['@components']?.translations) ? (
     <div className="menu-more pastanaga-menu">
       {types.length > 0 && (
         <>
@@ -54,14 +54,14 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
         </>
       )}
       {settings.isMultilingual &&
-        content['@components'].translations &&
+        content?.['@components']?.translations &&
         (() => {
           const translationsLeft = filter(
             settings.supportedLanguages,
             (lang) =>
               !Boolean(
-                content['@components'].translations &&
-                  find(content['@components'].translations.items, {
+                content?.['@components']?.translations &&
+                  find(content?.['@components']?.translations?.items, {
                     language: lang,
                   }),
               ) && toBackendLang(currentLanguage) !== lang,
@@ -84,8 +84,8 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                           to={{
                             pathname: `${pathname}/create-translation`,
                             state: {
-                              type: content['@type'],
-                              translationOf: flattenToAppURL(content['@id']),
+                              type: content?.['@type'],
+                              translationOf: flattenToAppURL(content?.['@id']),
                               language: lang,
                             },
                           }}
@@ -95,7 +95,9 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                             id="Translate to {lang}"
                             defaultMessage="Translate to {lang}"
                             values={{
-                              lang: langmap[lang].nativeName.toLowerCase(),
+                              lang: (
+                                langmap?.[lang]?.nativeName || lang
+                              ).toLowerCase(),
                             }}
                           />
                         </Link>

package/src/components/manage/Widgets/FileWidget.jsx

@@ -59,6 +59,10 @@ const messages = defineMessages({
     id: 'File is not of the accepted type {accept}',
     defaultMessage: 'File is not of the accepted type {accept}',
   },
+  dragAndDropActionA11y: {
+    id: 'Press Enter to browse files from your computer.',
+    defaultMessage: 'Press Enter to browse files from your computer.',
+  },
 });
 
 /**
@@ -205,6 +209,9 @@ const FileWidget = (props) => {
               {value
                 ? intl.formatMessage(messages.replaceFile)
                 : intl.formatMessage(messages.addNewFile)}
+              <span className="visually-hidden">
+                {intl.formatMessage(messages.dragAndDropActionA11y)}
+              </span>
             </label>
             <input
               {...getInputProps({