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

package/src/components/theme/Image/Image.jsx

@@ -1,6 +1,11 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL, flattenScales } from '@plone/volto/helpers/Url/Url';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  flattenScales,
+  addSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 /**
  * Image component
@@ -22,6 +27,9 @@ export default function Image({
   className = '',
   ...imageProps
 }) {
+  const site = useSelector((state) => state.site?.data);
+  const siteImageScales = site?.['plone.image_scales'] || {};
+
   if (!item && !src) return null;
 
   // TypeScript hints for editor autocomplete :)
@@ -30,7 +38,7 @@ export default function Image({
   attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
-    attrs.src = src;
+    attrs.src = addSubpathPrefix(src);
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -46,20 +54,27 @@ export default function Image({
 
     const isSvg = image['content-type'] === 'image/svg+xml';
     // In case `base_path` is present (`preview_image_link`) use it as base path
-    const basePath = image.base_path || item['@id'];
+    const basePath = addSubpathPrefix(
+      flattenToAppURL(image.base_path || item['@id']),
+    );
+    attrs.src = `${basePath}/${image.download}`;
 
-    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
       const sortedScales = Object.values({
         ...image.scales,
-        original: {
-          download: `${image.download}`,
-          width: image.width,
-          height: image.height,
-        },
+        ...(Object.keys(siteImageScales).length >
+        Object.keys(image.scales).length
+          ? {
+              original: {
+                download: `${image.download}`,
+                width: image.width,
+                height: image.height,
+              },
+            }
+          : {}),
       }).sort((a, b) => {
         if (a.width > b.width) return 1;
         else if (a.width < b.width) return -1;
@@ -67,10 +82,7 @@ export default function Image({
       });
 
       attrs.srcSet = sortedScales
-        .map(
-          (scale) =>
-            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
-        )
+        .map((scale) => `${basePath}/${scale.download} ${scale.width}w`)
         .join(', ');
     }
   }

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

@@ -1,165 +1,266 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render, screen } from '@testing-library/react';
+
 import Image from './Image';
 
-test('renders an image component with fetchpriority high', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
-        image: {
-          download: 'http://localhost:3000/image/@@images/image.png',
-          width: 400,
-          height: 400,
-          scales: {
-            preview: {
-              download: 'http://localhost:3000/image/@@images/image-400.png',
-              width: 400,
-              height: 400,
-            },
+const mockStore = configureStore();
+
+const defaultSiteData = {
+  'plone.image_scales': { preview: {}, listing: {} },
+};
+
+const itemWithImage = {
+  '@id': 'http://localhost:3000/image',
+  image: {
+    download: 'http://localhost:3000/image/@@images/image.png',
+    width: 1080,
+    height: 920,
+    scales: {
+      preview: {
+        download: 'http://localhost:3000/image/@@images/image-400.png',
+        width: 400,
+        height: 400,
+      },
+    },
+  },
+};
+
+const catalogBrain = {
+  '@id': 'http://localhost:3000/image',
+  image_field: 'image',
+  image_scales: {
+    image: [
+      {
+        download: '@@images/image.png',
+        width: 400,
+        height: 400,
+        scales: {
+          preview: {
+            download: '@@images/image-400.png',
+            width: 400,
+            height: 400,
           },
         },
-      }}
-      imageField="image"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+      },
+    ],
+  },
+};
 
-test('renders an image component with lazy loading', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
-        image: {
-          download: 'http://localhost:3000/image/@@images/image.png',
-          width: 400,
-          height: 400,
-          scales: {
-            preview: {
-              download: 'http://localhost:3000/image/@@images/image-400.png',
-              width: 400,
-              height: 400,
-            },
+const previewImageLink = {
+  '@id': 'http://localhost:3000/blog/blog-post',
+  image_field: 'preview_image_link',
+  image_scales: {
+    preview_image_link: [
+      {
+        base_path: '/image.png',
+        download: '@@images/image.png',
+        width: 400,
+        height: 400,
+        scales: {
+          preview: {
+            download: '@@images/image-400.png',
+            width: 400,
+            height: 400,
           },
         },
-      }}
-      imageField="image"
-      alt="alt text"
-      loading="lazy"
-    />,
+      },
+    ],
+  },
+};
+
+const renderImage = (props, { siteData = defaultSiteData } = {}) => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+    site: { data: siteData },
+  });
+
+  return render(
+    <Provider store={store}>
+      <Image {...props} />
+    </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+};
+
+describe('Image', () => {
+  it('renders an image component with fetchpriority high', () => {
+    renderImage({ item: itemWithImage, imageField: 'image', alt: 'alt text' });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('fetchpriority', 'high');
+    expect(img).toHaveAttribute('width', '1080');
+    expect(img).toHaveAttribute('height', '920');
+    expect(img).toHaveAttribute('src', '/image/@@images/image.png');
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image/@@images/image-400.png 400w, /image/@@images/image.png 1080w',
+    );
+  });
 
-test('renders an image component with responsive class', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
+  it('renders an image component with lazy loading', () => {
+    renderImage({
+      item: itemWithImage,
+      imageField: 'image',
+      alt: 'alt text',
+      loading: 'lazy',
+    });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('loading', 'lazy');
+    expect(img).toHaveAttribute('decoding', 'async');
+    expect(img).not.toHaveAttribute('fetchpriority');
+  });
+
+  it('renders an image component with responsive class', () => {
+    renderImage({
+      item: {
+        ...itemWithImage,
         image: {
+          ...itemWithImage.image,
           download: 'http://localhost:3000/image/@@images/image-1200.png',
-          width: 400,
-          height: 400,
-          scales: {
-            preview: {
-              download: 'http://localhost:3000/image/@@images/image-400.png',
-              width: 400,
-              height: 400,
-            },
-          },
         },
-      }}
-      imageField="image"
-      alt="alt text"
-      responsive={true}
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+      },
+      imageField: 'image',
+      alt: 'alt text',
+      responsive: true,
+    });
 
-test('renders an image component from a catalog brain', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/image',
-        image_field: 'image',
-        image_scales: {
-          image: [
-            {
-              download: '@@images/image.png',
-              width: 400,
-              height: 400,
-              scales: {
-                preview: {
-                  download: '@@images/image-400.png',
-                  width: 400,
-                  height: 400,
-                },
-              },
-            },
-          ],
-        },
-      }}
-      imageField="image"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveClass('responsive');
+    expect(img).toHaveAttribute('fetchpriority', 'high');
+  });
+
+  it('renders an image component from a catalog brain', () => {
+    renderImage({ item: catalogBrain, imageField: 'image', alt: 'alt text' });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('src', '/image/@@images/image.png');
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image/@@images/image-400.png 400w, /image/@@images/image.png 400w',
+    );
+  });
 
-test('renders an image component from a catalog brain using `preview_image_link`', () => {
-  const component = renderer.create(
-    <Image
-      item={{
-        '@id': 'http://localhost:3000/blog/blog-post',
-        image_field: 'preview_image_link',
-        image_scales: {
-          preview_image_link: [
-            {
-              base_path: '/image.png',
-              download: '@@images/image.png',
-              width: 400,
-              height: 400,
-              scales: {
-                preview: {
-                  download: '@@images/image-400.png',
-                  width: 400,
-                  height: 400,
-                },
-              },
-            },
-          ],
+  it('renders an image component from a catalog brain using `preview_image_link`', () => {
+    renderImage({
+      item: previewImageLink,
+      imageField: 'preview_image_link',
+      alt: 'alt text',
+    });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute('src', '/image.png/@@images/image.png');
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image.png/@@images/image-400.png 400w, /image.png/@@images/image.png 400w',
+    );
+  });
+
+  it('includes the original scale in srcset when site defines more scales than the image', () => {
+    renderImage(
+      {
+        item: previewImageLink,
+        imageField: 'preview_image_link',
+        alt: 'alt text',
+      },
+      { siteData: { 'plone.image_scales': { preview: {}, listing: {} } } },
+    );
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image.png/@@images/image-400.png 400w, /image.png/@@images/image.png 400w',
+    );
+  });
+
+  it('does not include the original scale when site scales are not greater than the image scales', () => {
+    renderImage(
+      {
+        item: previewImageLink,
+        imageField: 'preview_image_link',
+        alt: 'alt text',
+      },
+      { siteData: { 'plone.image_scales': { preview: {} } } },
+    );
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute(
+      'srcset',
+      '/image.png/@@images/image-400.png 400w',
+    );
+  });
+
+  it('does not render when no item or src is provided', () => {
+    const { container } = renderImage(
+      { alt: 'missing image' },
+      { siteData: {} },
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders an svg image without srcset', () => {
+    renderImage({
+      item: {
+        ...itemWithImage,
+        image: {
+          ...itemWithImage.image,
+          'content-type': 'image/svg+xml',
         },
-      }}
-      imageField="preview_image_link"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+      },
+      imageField: 'image',
+      alt: 'svg image',
+    });
 
-test('renders an image component from a string src', () => {
-  const component = renderer.create(
-    <Image
-      src="http://localhost:3000/image/@@images/image/image.png"
-      alt="alt text"
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});
+    const img = screen.getByAltText('svg image');
 
-test('should not render empty class attribute in img tag', () => {
-  const component = renderer.create(
-    <Image src="/image.png" alt="no class attribute" />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+    expect(img).not.toHaveAttribute('srcset');
+    expect(img).toHaveAttribute('src', '/image/@@images/image.png');
+  });
+
+  it('merges custom className with responsive flag', () => {
+    renderImage({
+      item: itemWithImage,
+      imageField: 'image',
+      alt: 'with class',
+      responsive: true,
+      className: 'custom-class',
+    });
+
+    const img = screen.getByAltText('with class');
+
+    expect(img).toHaveClass('custom-class');
+    expect(img).toHaveClass('responsive');
+  });
+
+  it('renders an image component from a string src', () => {
+    renderImage({
+      src: 'http://localhost:3000/image/@@images/image/image.png',
+      alt: 'alt text',
+    });
+
+    const img = screen.getByAltText('alt text');
+
+    expect(img).toHaveAttribute(
+      'src',
+      'http://localhost:3000/image/@@images/image/image.png',
+    );
+    expect(img).toHaveAttribute('fetchpriority', 'high');
+  });
+
+  it('should not render empty class attribute in img tag', () => {
+    renderImage({ src: '/image.png', alt: 'no class attribute' });
+
+    const img = screen.getByAltText('no class attribute');
+
+    expect(img).not.toHaveAttribute('class');
+  });
 });

package/src/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS.tsx

@@ -0,0 +1,7 @@
+import '@plone/components/dist/basic.css';
+
+const InjectPloneComponentsCSS = () => {
+  return null;
+};
+
+export default InjectPloneComponentsCSS;

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

@@ -0,0 +1,89 @@
+import { Link } from 'react-router-dom';
+
+import { useSelector } from 'react-redux';
+import cx from 'classnames';
+
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
+
+import { defineMessages, useIntl, type IntlShape } from 'react-intl';
+import type {
+  Content,
+  GetSiteResponse,
+  GetTranslationResponse,
+} from '@plone/types';
+
+const messages = defineMessages({
+  switchLanguageTo: {
+    id: 'Switch to',
+    defaultMessage: 'Switch to',
+  },
+});
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  intl: IntlShape;
+  site: {
+    data: GetSiteResponse;
+  };
+};
+
+const LanguageSelector = ({
+  onClickAction = () => {},
+}: {
+  onClickAction?: () => void;
+}) => {
+  const intl = useIntl();
+  const currentLang = useSelector<FormState, IntlShape['locale']>(
+    (state) => state.intl.locale,
+  );
+  const translations = useSelector<
+    FormState,
+    GetTranslationResponse['items'] | undefined
+  >((state) => state.content.data?.['@components']?.translations?.items);
+  const isMultilingual = useSelector<
+    FormState,
+    GetSiteResponse['features']['multilingual']
+  >((state) => state.site.data.features?.multilingual);
+  const availableLanguages = useSelector<
+    FormState,
+    GetSiteResponse['plone.available_languages']
+  >((state) => state.site.data?.['plone.available_languages']);
+
+  return isMultilingual ? (
+    <div className="language-selector">
+      {availableLanguages?.map((lang) => {
+        const langKey = lang as keyof typeof langmap;
+        const translation = translations?.find(
+          (t: { language: string }) => t.language === lang,
+        );
+        return (
+          <Link
+            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 || langKey}
+            onClick={() => {
+              onClickAction();
+            }}
+            key={`language-selector-${lang}`}
+          >
+            {langmap[langKey]?.nativeName || langKey}
+          </Link>
+        );
+      })}
+    </div>
+  ) : (
+    <Helmet>
+      <html lang={toReactIntlLang(currentLang)} />
+    </Helmet>
+  );
+};
+
+export default LanguageSelector;

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

@@ -3,13 +3,17 @@ import { Redirect } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import { changeLanguage } from '@plone/volto/actions/language/language';
-import { toGettextLang } from '@plone/volto/helpers/Utils/Utils';
+import { toGettextLang, toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 
 const MultilingualRedirector = (props) => {
   const { pathname, children } = props;
   const [cookies] = useCookies();
   const site = useSelector((state) => state.site.data);
   const isMultilingual = site.features?.multilingual;
+  const availableLanguages = useSelector(
+    (state) => state.site?.data?.['plone.available_languages'],
+  );
+  const currentLanguage = useSelector((state) => state.intl.locale);
   const redirectToLanguage =
     cookies['I18N_LANGUAGE'] || site['plone.default_language'];
   const dispatch = useDispatch();
@@ -18,23 +22,49 @@ const MultilingualRedirector = (props) => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
-    if (isMultilingual && pathname === '/') {
-      const langFileName = toGettextLang(redirectToLanguage);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        if (mounted) {
-          dispatch(changeLanguage(redirectToLanguage, locale.default));
+
+    const performLanguageSwitch = (targetLang) => {
+      const langFileName = toGettextLang(targetLang);
+      import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+        .then((locale) => {
+          if (mounted) {
+            dispatch(changeLanguage(targetLang, locale.default));
+          }
+        })
+        .catch(() => {
+          // If locale file doesn't exist, still switch language with empty locale
+          if (mounted) {
+            dispatch(changeLanguage(targetLang, {}));
+          }
+        });
+    };
+
+    if (isMultilingual) {
+      if (pathname === '/') {
+        performLanguageSwitch(redirectToLanguage);
+      } else {
+        const lang = pathname.split('/')[1];
+        if (
+          availableLanguages?.includes(lang) &&
+          lang !== toBackendLang(currentLanguage)
+        ) {
+          performLanguageSwitch(lang);
         }
-      });
+      }
     }
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
-
+  }, [
+    pathname,
+    dispatch,
+    redirectToLanguage,
+    isMultilingual,
+    availableLanguages,
+    currentLanguage,
+  ]);
   return pathname === '/' && isMultilingual ? (
-    <Redirect to={`/${redirectToLanguage}`} />
+    <Redirect to={`/${toBackendLang(redirectToLanguage)}`} />
   ) : (
     <>{children}</>
   );