@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

package/src/components/theme/Avatar/Avatar.jsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getInitials } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const defaultSize = 30;
 const defaultColor = 'Teal';
@@ -15,7 +16,7 @@ const Avatar = ({ src, title, text, size, color, className }) => {
   return (
     <div className={className} title={title}>
       {src ? (
-        <img src={src} alt={title}></img>
+        <Image src={src} alt={title} />
       ) : (
         <svg width={size} height={size}>
           <circle cx={radius} cy={radius} r={radius} fill={color} />

package/src/components/theme/Comments/CommentEditModal.test.jsx

@@ -7,11 +7,7 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {

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

@@ -19,17 +19,8 @@ vi.mock('moment', () => ({
   })),
 }));
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -9,11 +9,7 @@ vi.mock('../../manage/Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 describe('Contact form', () => {

package/src/components/theme/FormattedDate/FormattedDate.stories.jsx

@@ -82,9 +82,27 @@ export default {
   ],
   argTypes: {
     locale: {
+      options: [
+        'ca',
+        'de',
+        'en',
+        'es',
+        'eu',
+        'fi',
+        'fr',
+        'hi',
+        'it',
+        'ja',
+        'nl',
+        'pt',
+        'pt-BR',
+        'ro',
+        'ru',
+        'sv',
+        'zh-CN',
+      ],
       control: {
-        type: 'select',
-        options: ['en', 'de', 'us'],
+        type: 'radio',
       },
     },
   },

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

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL, flattenScales } from '@plone/volto/helpers/Url/Url';
+import {
+  flattenToAppURL,
+  flattenScales,
+  addSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 /**
  * Image component
@@ -30,7 +34,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,9 +50,11 @@ 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;
 
@@ -67,10 +73,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/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.test.jsx → LanguageSelector.test.tsx}

@@ -3,15 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import LanguageSelector from './LanguageSelector';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 const mockStore = configureStore();
 
 describe('LanguageSelector', () => {
@@ -30,6 +24,12 @@ describe('LanguageSelector', () => {
           },
         },
       },
+      site: {
+        data: {
+          features: { multilingual: true },
+          'plone.available_languages': ['es'],
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

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.toLowerCase()}`}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
+            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
+            title={langmap[langKey].nativeName}
+            onClick={() => {
+              onClickAction();
+            }}
+            key={`language-selector-${lang}`}
+          >
+            {langmap[langKey].nativeName}
+          </Link>
+        );
+      })}
+    </div>
+  ) : (
+    <Helmet>
+      <html lang={toReactIntlLang(currentLang)} />
+    </Helmet>
+  );
+};
+
+export default LanguageSelector;

package/src/components/theme/Logo/Logo.Multilingual.test.jsx

@@ -3,14 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import Logo from './Logo';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('Multilingual Logo', () => {

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

@@ -1,28 +1,24 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
-import config from '@plone/volto/registry';
 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 { settings } = config;
   const { pathname, children } = props;
   const [cookies] = useCookies();
-  const currentLanguage = cookies['I18N_LANGUAGE'] || settings.defaultLanguage;
-  const redirectToLanguage = settings.supportedLanguages.includes(
-    currentLanguage,
-  )
-    ? currentLanguage
-    : settings.defaultLanguage;
+  const site = useSelector((state) => state.site.data);
+  const isMultilingual = site.features?.multilingual;
+  const redirectToLanguage =
+    cookies['I18N_LANGUAGE'] || site['plone.default_language'];
   const dispatch = useDispatch();
 
   React.useEffect(() => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
-    if (settings.isMultilingual && pathname === '/') {
+    if (isMultilingual && pathname === '/') {
       const langFileName = toGettextLang(redirectToLanguage);
       import(
         /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
@@ -35,10 +31,10 @@ const MultilingualRedirector = (props) => {
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
+  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
 
-  return pathname === '/' && settings.isMultilingual ? (
-    <Redirect to={`/${redirectToLanguage}`} />
+  return pathname === '/' && isMultilingual ? (
+    <Redirect to={`/${toBackendLang(redirectToLanguage)}`} />
   ) : (
     <>{children}</>
   );

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

@@ -3,19 +3,17 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import MultilingualRedirector from './MultilingualRedirector';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('MultilingualRedirector', () => {
   it('renders a MultilingualRedirector component', () => {
     const store = mockStore({
+      site: {
+        data: {},
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/Navigation/NavItem.jsx

@@ -15,11 +15,7 @@ const NavItem = ({ item, lang }) => {
         key={item.url}
         className="item"
         activeClassName="active"
-        exact={
-          settings.isMultilingual
-            ? item.url === `/${toBackendLang(lang)}`
-            : item.url === ''
-        }
+        exact={item.url === '' || item.url === `/${toBackendLang(lang)}`}
       >
         {item.title}
       </NavLink>

package/src/components/theme/Navigation/Navigation.Multilingual.test.jsx

@@ -3,14 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import Navigation from './Navigation';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('Navigation Multilingual', () => {

package/src/components/theme/NotFound/NotFound.jsx

@@ -19,15 +19,18 @@ import config from '@plone/volto/registry';
 const NotFound = () => {
   const dispatch = useDispatch();
   const lang = useSelector((state) => state.intl.locale);
+  const isMultilingual = useSelector(
+    (state) => state.site.data.features?.multilingual,
+  );
 
   useEffect(() => {
     dispatch(
       getNavigation(
-        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        isMultilingual ? `/${toBackendLang(lang)}` : '/',
         config.settings.navDepth,
       ),
     );
-  }, [dispatch, lang]);
+  }, [dispatch, lang, isMultilingual]);
 
   return (
     <Container className="view-wrapper">

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

@@ -13,6 +13,9 @@ const mockStore = configureStore();
 describe('NotFound', () => {
   it('renders a not found component', () => {
     const store = mockStore({
+      site: {
+        data: {},
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx

@@ -6,11 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -25,7 +25,7 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
     return image;
   } else {
     return (
-      <img
+      <Image
         src={
           config.getComponent({
             name: 'DefaultImage',

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

@@ -6,11 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

package/src/components/theme/RequestTimeout/RequestTimeout.jsx

@@ -29,7 +29,7 @@ const RequestTimeout = () => (
         <h1 style={{ textAlign: 'center', lineHeight: '40px' }}>
           <FormattedMessage
             id="No connection to the server"
-            defaultMessage="There is no connection to the server, due to a timeout o no network connection."
+            defaultMessage="There is no connection to the server, due to a timeout or no network connection."
           />
           <br />
           <a href={config.settings.apiPath}>{config.settings.apiPath}</a>

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -36,14 +36,14 @@ function Sitemap(props) {
     location: { pathname },
     lang,
     getNavigation,
+    isMultilingual,
   } = props;
 
   useEffect(() => {
-    const { settings } = config;
-    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
+    const language = isMultilingual ? `${toBackendLang(lang)}` : null;
     const path = getSitemapPath(pathname, language);
     getNavigation(path, 4);
-  }, [pathname, lang, getNavigation]);
+  }, [pathname, lang, getNavigation, isMultilingual]);
 
   const renderItems = (items) => {
     return (
@@ -100,6 +100,7 @@ export default compose(
     (state) => ({
       items: state.navigation.items,
       lang: state.intl.locale,
+      isMultilingual: state.site.data.features?.multilingual,
     }),
     { getNavigation },
   ),
@@ -108,10 +109,10 @@ export default compose(
       key: 'navigation',
       promise: ({ location, store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const { settings } = config;
+        const state = getState();
         const path = getSitemapPath(
           location.pathname,
-          settings.isMultilingual
+          state.site.data.features?.multilingual
             ? toBackendLang(getState().intl.locale)
             : null,
         );

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

@@ -58,7 +58,6 @@ describe('Sitemap', () => {
 
 describe('Sitemap in a multilingual site', () => {
   beforeEach(() => {
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es'];
   });
   it('renders a sitemap component', () => {

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
   const error_message = useSelector((state) => state.apierror?.message);
@@ -12,6 +13,7 @@ const Unauthorized = () => {
 
   return (
     <Container className="view-wrapper">
+      <BodyClass className="view-unauthorized" />
       <h1>
         <FormattedMessage id="Unauthorized" defaultMessage="Unauthorized" />
       </h1>
@@ -62,5 +64,6 @@ const Unauthorized = () => {
     </Container>
   );
 };
-
-export default withServerErrorCode(401)(Unauthorized);
+const UnauthorizedWithCode = withServerErrorCode(401)(Unauthorized);
+UnauthorizedWithCode.displayName = 'unauthorized';
+export default UnauthorizedWithCode;

package/src/components/theme/View/EventDatesInfo.test.jsx

@@ -5,12 +5,7 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/EventView.test.jsx

@@ -14,12 +14,7 @@ const store = mockStore({
   },
 });
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/FileView.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
 /**
@@ -30,7 +31,14 @@ const FileView = ({ content }) => {
       )}
       {content.file?.download && (
         <a href={flattenToAppURL(content.file.download)}>
-          {content.file.filename}
+          {content.file.filename ? (
+            content.file.filename
+          ) : (
+            <FormattedMessage
+              id="Download file"
+              defaultMessage="Download file"
+            />
+          )}
         </a>
       )}
     </Container>

package/src/components/theme/View/View.jsx

@@ -222,6 +222,13 @@ class View extends Component {
       }
       return (
         <div id="view">
+          <BodyClass
+            className={
+              FoundView.displayName
+                ? `view-${this.cleanViewName(FoundView.displayName)}`
+                : null
+            }
+          />
           <FoundView {...this.props} />
         </div>
       );
@@ -246,7 +253,7 @@ class View extends Component {
         />
         <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
-          key={this.props.content['@id']}
+          key={flattenToAppURL(this.props.content['@id'])}
           content={this.props.content}
           location={this.props.location}
           token={this.props.token}

package/src/components/theme/Widgets/ImageWidget.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const niceBytes = (bytes) => {
   bytes = Number(bytes);
@@ -18,7 +19,7 @@ const niceBytes = (bytes) => {
 const ImageWidget = ({ value, className }) =>
   value ? (
     <span className={cx(className, 'image', 'widget')}>
-      <img
+      <Image
         src={
           value.data
             ? `data:${value['content-type']};base64,${value.data}`

package/src/config/ControlPanels.js

@@ -77,6 +77,7 @@ export const unwantedControlPanelsFields = {
     'exposeDCMetaTags',
     'enable_sitemap',
     'webstats_js',
+    'webstats_head_js',
   ],
   editing: ['available_editors', 'default_editor', 'ext_editor'],
   imaging: [