@plone/volto 18.32.4 → 18.33.1

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

@@ -473,13 +473,21 @@ class SharingComponent extends Component {
                 <p className="help">
                   <FormattedMessage
                     id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, inherited values are explicitly labeled as 'Inherited value' and receive a green check mark {inherited}. Similarly, roles managed by the site administrator are labeled as 'Global role' and receive a blue check mark {global}."
                     values={{
                       inherited: (
-                        <IconOld name="check circle outline" color="green" />
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="green"
+                        />
                       ),
                       global: (
-                        <IconOld name="check circle outline" color="blue" />
+                        <IconOld
+                          aria-hidden="true"
+                          name="check circle outline"
+                          color="blue"
+                        />
                       ),
                     }}
                   />

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({

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

@@ -99,7 +99,7 @@ const RegistryImageWidget = (props) => {
 
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);
+      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}`);
     });
 
     let reader = new FileReader();

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -8,6 +8,7 @@ const AlternateHrefLangs = (props) => {
     <Helmet>
       {config.settings.isMultilingual &&
         content['@components']?.translations?.items &&
+        content.language?.token &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.jsx

@@ -36,6 +36,36 @@ describe('AlternateHrefLangs', () => {
     expect(helmetLinks.length).toBe(0);
   });
 
+  it('multilingual site, content without language field, renders nothing', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.supportedLanguages = ['en', 'es'];
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en/newsroom/news',
+      '@components': {
+        translations: {
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+    expect(helmetLinks.length).toBe(0);
+  });
+
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
     config.settings.isMultilingual = true;

package/src/components/theme/LanguageSelector/LanguageSelector.tsx

@@ -60,18 +60,20 @@ const LanguageSelector = ({
         );
         return (
           <Link
-            aria-label={`${intl.formatMessage(
-              messages.switchLanguageTo,
-            )} ${langmap[langKey].nativeName.toLowerCase()}`}
+            aria-label={`${intl.formatMessage(messages.switchLanguageTo)} ${(
+              langmap?.[langKey]?.nativeName ||
+              langKey ||
+              ''
+            ).toLowerCase()}`}
             className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[langKey].nativeName}
+            title={langmap?.[langKey]?.nativeName || langKey}
             onClick={() => {
               onClickAction();
             }}
             key={`language-selector-${lang}`}
           >
-            {langmap[langKey].nativeName}
+            {langmap?.[langKey]?.nativeName || langKey}
           </Link>
         );
       })}

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -24,13 +24,18 @@ const MultilingualRedirector = (props) => {
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
       const langFileName = toGettextLang(redirectToLanguage);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        if (mounted) {
-          dispatch(changeLanguage(redirectToLanguage, locale.default));
-        }
-      });
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          if (mounted) {
+            dispatch(changeLanguage(redirectToLanguage, locale.default));
+          }
+        })
+        .catch(() => {
+          // If locale file doesn't exist, still switch language with empty locale
+          if (mounted) {
+            dispatch(changeLanguage(redirectToLanguage, {}));
+          }
+        });
     }
     return () => {
       mounted = false;

package/src/express-middleware/devproxy.js

@@ -78,11 +78,13 @@ export default function devProxyMiddleware() {
     },
     pathRewrite: (path, req) => {
       const { apiPathURL, instancePath } = getEnv();
+      const port =
+        apiPathURL.port || (apiPathURL.protocol === 'https:' ? 443 : 80);
       const target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        }:${port}${instancePath}/++api++/VirtualHostRoot`;
 
       return `${target}${path.replace('/++api++', '')}`;
     },

package/src/express-middleware/files.js

@@ -3,6 +3,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWith
 
 const HEADERS = [
   'accept-ranges',
+  'cache-status',
   'cache-control',
   'content-disposition',
   'content-range',

package/src/express-middleware/files.test.js

@@ -0,0 +1,59 @@
+import filesMiddleware from './files';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
+
+vi.mock('@plone/volto/helpers/Api/APIResourceWithAuth', () => ({
+  getAPIResourceWithAuth: vi.fn(),
+}));
+
+describe('files middleware', () => {
+  it('handles requests containing @@download and forwards headers/body', async () => {
+    getAPIResourceWithAuth.mockResolvedValue({
+      headers: {
+        'content-type': 'text/plain',
+        'cache-status': 'Souin; hit; ttl=664',
+      },
+      body: 'OK',
+      get(name) {
+        return this.headers[name];
+      },
+      statusCode: 200,
+    });
+
+    const mw = filesMiddleware();
+    const layer = mw.stack.find(
+      (l) => l.regexp && l.regexp.source.includes('@@download'),
+    );
+    expect(layer).toBeTruthy();
+
+    const req = {
+      path: '/some/@@download',
+      method: 'GET',
+      app: { locals: {} },
+    };
+    const res = {
+      headers: {},
+      set(name, val) {
+        this.headers[name] = val;
+      },
+      status(code) {
+        this.statusCode = code;
+        return this;
+      },
+      send(body) {
+        this.body = body;
+      },
+    };
+
+    // invoke the middleware handler for that layer
+    layer.handle(req, res, (err) => {
+      if (err) throw err;
+    });
+
+    await new Promise(process.nextTick);
+
+    expect(res.body).toBe('OK');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/plain');
+    expect(res.headers['cache-status']).toBe('Souin; hit; ttl=664');
+  });
+});

package/src/express-middleware/images.js

@@ -4,6 +4,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWith
 const HEADERS = [
   'content-type',
   'content-disposition',
+  'cache-status',
   'cache-control',
   'x-sendfile',
   'x-accel-redirect',

package/src/express-middleware/images.test.js

@@ -0,0 +1,50 @@
+import imagesMiddleware from './images';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
+
+vi.mock('@plone/volto/helpers/Api/APIResourceWithAuth', () => ({
+  getAPIResourceWithAuth: vi.fn(),
+}));
+
+describe('images middleware', () => {
+  it('handles requests containing @@images and forwards headers/body', async () => {
+    getAPIResourceWithAuth.mockResolvedValue({
+      headers: {
+        'content-type': 'image/png',
+        'cache-status': 'Souin; hit; ttl=664',
+      },
+      body: 'OK',
+    });
+
+    const mw = imagesMiddleware();
+    const layer = mw.stack.find(
+      (l) => l.regexp && l.regexp.source.includes('@@images'),
+    );
+    expect(layer).toBeTruthy();
+
+    const req = {
+      path: '/some/@@images/image',
+      method: 'GET',
+      app: { locals: {} },
+    };
+    const res = {
+      headers: {},
+      set(name, val) {
+        this.headers[name] = val;
+      },
+      send(body) {
+        this.body = body;
+      },
+    };
+
+    // invoke the middleware handler for that layer
+    layer.handle(req, res, (err) => {
+      if (err) throw err;
+    });
+
+    await new Promise(process.nextTick);
+
+    expect(res.body).toBe('OK');
+    expect(res.headers['content-type']).toBe('image/png');
+    expect(res.headers['cache-status']).toBe('Souin; hit; ttl=664');
+  });
+});

package/src/helpers/Blocks/Blocks.js

@@ -852,12 +852,12 @@ export const getBlocksHierarchy = (properties) => {
   const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
   return properties[blocksLayoutFieldname]?.items?.map((n) => ({
     id: n,
-    title: properties[blocksFieldName][n]?.['@type'],
-    data: properties[blocksFieldName][n],
-    children: isBlockContainer(properties[blocksFieldName][n])
-      ? properties[blocksFieldName][n].data
-        ? getBlocksHierarchy(properties[blocksFieldName][n].data)
-        : getBlocksHierarchy(properties[blocksFieldName][n])
+    title: properties?.[blocksFieldName]?.[n]?.['@type'],
+    data: properties?.[blocksFieldName]?.[n],
+    children: isBlockContainer(properties?.[blocksFieldName]?.[n])
+      ? properties?.[blocksFieldName]?.[n]?.data
+        ? getBlocksHierarchy(properties?.[blocksFieldName]?.[n]?.data)
+        : getBlocksHierarchy(properties?.[blocksFieldName]?.[n])
       : [],
   }));
 };

package/src/helpers/Utils/Utils.jsx

@@ -37,6 +37,23 @@ export const safeWrapper = (func) => (config) => {
   return res;
 };
 
+/**
+ * Extract a readable error message from several possible error shapes
+ * @param {object} error
+ * @returns {string} message
+ */
+export const getErrorMessage = (error) => {
+  const respBody = error?.response?.body;
+  if (respBody?.error?.message) return respBody.error.message;
+  if (respBody?.message) return respBody.message;
+  if (error?.message) return error.message;
+  try {
+    return JSON.stringify(error);
+  } catch (e) {
+    return String(error);
+  }
+};
+
 /**
  * A helper to pipe a configuration object through configuration loaders
  *