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

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor } from '@testing-library/react';
 import ContentsUploadModal from './ContentsUploadModal';
 
 const mockStore = configureStore();
@@ -21,19 +20,17 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('renders a contents upload modal component that only allows images', async () => {
@@ -49,20 +46,18 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           accept={['image/*']}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
   it('renders a contents upload modal component that only allows 10MB files', async () => {
     const store = mockStore({
@@ -77,20 +72,18 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           maxSize={1000000}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
   it('renders a contents upload modal component that only allows 1 file', async () => {
     const store = mockStore({
@@ -105,19 +98,17 @@ describe('ContentsUploadModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { baseElement } = render(
       <Provider store={store}>
         <ContentsUploadModal
           pathname="/blog"
-          open={false}
+          open={true}
           onOk={() => {}}
           onCancel={() => {}}
           multiple={false}
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    await waitFor(() => {});
-    expect(json).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 });

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

@@ -44,8 +44,6 @@ import { tryParseJSON } from '@plone/volto/helpers/FormValidation/FormValidation
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
-import config from '@plone/volto/registry';
-
 const messages = defineMessages({
   edit: {
     id: 'Edit {title}',
@@ -460,7 +458,7 @@ class Edit extends Component {
                     />
                   </Button>
 
-                  {config.settings.isMultilingual && (
+                  {this.props.isMultilingual && (
                     <CompareLanguages
                       content={this.props.content}
                       visual={this.state.visual}
@@ -545,6 +543,7 @@ export default compose(
       updateRequest: state.content.update,
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
+      isMultilingual: state.site.data.features?.multilingual,
     }),
     {
       updateContent,

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import config from '@plone/volto/registry';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
 import { useDetectClickOutside } from '@plone/volto/helpers/Utils/useDetectClickOutside';
 
@@ -106,16 +105,14 @@ const CompareLanguages = React.forwardRef((props, ref) => {
 
   const intl = useIntl();
   const [viewMenu, setViewMenu] = useState(false);
-  const translations = config.settings.isMultilingual
-    ? content?.['@components']?.translations?.items || []
-    : [];
+  const translations = content?.['@components']?.translations?.items || [];
 
   const translationsObject = {};
   translations.forEach((t) => {
     translationsObject[t.language] = t['@id'];
   });
 
-  if (config.settings.isMultilingual && translations.length > 0) {
+  if (translations.length > 0) {
     return (
       <div className="toolbar-compare-translations-wrapper">
         <div className="toolbar-button-spacer" />

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

@@ -8,7 +8,6 @@ import { Link, useLocation } from 'react-router-dom';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
-import config from '@plone/volto/registry';
 
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import {
@@ -66,6 +65,9 @@ const ManageTranslations = (props) => {
   const pathname = useLocation().pathname;
   const content = useSelector((state) => state.content.data);
   const dispatch = useDispatch();
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
 
   const [isClient, setIsClient] = useState(false);
 
@@ -189,7 +191,7 @@ const ManageTranslations = (props) => {
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {config.settings.supportedLanguages.map((lang) => (
+              {availableLanguages.map((lang) => (
                 <Table.Row key={lang}>
                   <Table.Cell collapsing>
                     {lang === content.language.token ? (

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

@@ -8,7 +8,6 @@ import config from '@plone/volto/registry';
 import ManageTranslations from './ManageTranslations';
 
 beforeAll(() => {
-  config.settings.isMultilingual = true;
   config.settings.supportedLanguages = ['de', 'es'];
 });
 vi.mock('../Toolbar/Toolbar', () => ({
@@ -34,6 +33,11 @@ describe('ManageTranslations', () => {
           language: 'en',
         },
       },
+      site: {
+        data: {
+          'plone.available_languages': ['de', 'es'],
+        },
+      },
     });
     const { container } = render(
       <Provider store={store}>

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

@@ -63,7 +63,7 @@ const TranslationObject = ({
     {
       ...window.__data,
       intl: {
-        defaultLocale: config.settings.defaultLanguage,
+        defaultLocale: translationObject.language.token,
         locale: translationObject.language.token,
         messages: locales[translationObject.language.token],
       },

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

@@ -114,6 +114,9 @@ const More = (props) => {
 
   const content = useSelector((state) => state.content?.data, shallowEqual);
   const workingCopy = useSelector((state) => state.workingCopy, shallowEqual);
+  const isMultilingual = useSelector(
+    (state) => state.site.data.features?.multilingual,
+  );
 
   const actions = useSelector((state) => state.actions.actions, shallowEqual);
 
@@ -435,7 +438,7 @@ const More = (props) => {
           </li>
         </Plug>
       )}
-      {editAction && config.settings.isMultilingual && (
+      {editAction && isMultilingual && (
         <Plug pluggable="toolbar-more-manage-content" id="multilingual">
           <li>
             <Link to={`${path}/manage-translations`}>

package/src/components/manage/Toolbar/More.test.jsx

@@ -135,6 +135,9 @@ const store = mockStore({
       is_folderish: true,
     },
   },
+  site: {
+    data: {},
+  },
   workflow: { history: [], transition: { loaded: true } },
 });
 

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

@@ -537,10 +537,9 @@ class Toolbar extends Component {
                         </Link>
                       )}
                     {this.props.content &&
-                      ((this.props.content.is_folderish &&
-                        this.props.types.length > 0) ||
-                        (config.settings.isMultilingual &&
-                          this.props.content['@components']?.translations)) && (
+                      this.props.content.is_folderish &&
+                      (this.props.types.length > 0 ||
+                        this.props.content['@components']?.translations) && (
                         <button
                           className="add"
                           aria-label={this.props.intl.formatMessage(

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
@@ -10,12 +11,12 @@ import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
-import config from '@plone/volto/registry';
 
 const Types = ({ types, pathname, content, currentLanguage }) => {
-  const { settings } = config;
-  return types.length > 0 ||
-    (settings.isMultilingual && content['@components'].translations) ? (
+  const availableLanguages = useSelector(
+    (state) => state.site?.data?.['plone.available_languages'] || [],
+  );
+  return types.length > 0 || content?.['@components']?.translations ? (
     <div className="menu-more pastanaga-menu">
       {types.length > 0 && (
         <>
@@ -53,11 +54,10 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           </div>
         </>
       )}
-      {settings.isMultilingual &&
-        content['@components'].translations &&
+      {content['@components'].translations &&
         (() => {
           const translationsLeft = filter(
-            settings.supportedLanguages,
+            availableLanguages,
             (lang) =>
               !Boolean(
                 content['@components'].translations &&

package/src/components/manage/UniversalLink/UniversalLink.tsx

@@ -148,6 +148,7 @@ const UniversalLink = React.memo(
           target={openLinkInNewTab ?? false ? '_blank' : undefined}
           title={title}
           className={className}
+          onClick={onClick}
           smooth={smooth ?? config.settings.hashLinkSmoothScroll}
           // @ts-ignore
           ref={ref}

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

@@ -85,7 +85,7 @@ describe('RegistryImageWidget', () => {
 
         return dropzone && preview && filename;
       },
-      { timeout: 1000 },
+      { timeout: 2000 },
     );
 
     expect(container).toMatchSnapshot();

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

@@ -105,6 +105,7 @@ class SelectAutoComplete extends Component {
     error: [],
     choices: [],
     value: null,
+    isMulti: true,
   };
 
   /**
@@ -127,10 +128,16 @@ class SelectAutoComplete extends Component {
   componentDidMount() {
     const { id, lang, value, choices } = this.props;
     if (value && value?.length > 0) {
-      const tokensQuery = convertValueToVocabQuery(
-        normalizeValue(choices, value, this.props.intl),
-      );
-
+      let tokensQuery;
+      if (typeof value === 'string') {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, [value], this.props.intl),
+        );
+      } else {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, value, this.props.intl),
+        );
+      }
       this.props.getVocabularyTokenTitle({
         vocabNameOrURL: this.props.vocabBaseUrl,
         subrequest: `widget-${id}-${lang}`,
@@ -160,13 +167,22 @@ class SelectAutoComplete extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
-      selectedOption ? selectedOption.map((item) => item.value) : null,
-    );
-    this.setState((state) => ({
-      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
-    }));
+    if (!Array.isArray(selectedOption)) {
+      this.props.onChange(this.props.id, selectedOption?.value || null);
+      if (selectedOption) {
+        this.setState((state) => ({
+          termsPairsCache: [...state.termsPairsCache, selectedOption],
+        }));
+      }
+    } else {
+      this.props.onChange(
+        this.props.id,
+        selectedOption ? selectedOption.map((item) => item.value) : null,
+      );
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+      }));
+    }
   }
 
   timeoutRef = React.createRef();
@@ -251,7 +267,8 @@ class SelectAutoComplete extends Component {
             this.props.intl.formatMessage(messages.select)
           }
           onChange={this.handleChange}
-          isMulti
+          isMulti={this.props.isMulti}
+          isClearable={!this.props.isMulti}
         />
       </FormFieldWrapper>
     );

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

@@ -1,4 +1,3 @@
-import config from '@plone/volto/registry';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { flattenToAppURL, toPublicURL } from '@plone/volto/helpers/Url/Url';
 
@@ -6,8 +5,7 @@ const AlternateHrefLangs = (props) => {
   const { content } = props;
   return (
     <Helmet>
-      {config.settings.isMultilingual &&
-        content['@components']?.translations?.items &&
+      {content['@components']?.translations?.items &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

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

@@ -13,7 +13,6 @@ const mockStore = configureStore();
 describe('AlternateHrefLangs', () => {
   beforeEach(() => {});
   it('non multilingual site, renders nothing', () => {
-    config.settings.isMultilingual = false;
     const content = {
       '@id': '/',
       '@components': {},
@@ -38,7 +37,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
 
     const content = {
@@ -85,7 +83,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with all available translations', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
       intl: {
@@ -139,7 +136,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with all available translations - with server URL', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
       intl: {

package/src/components/theme/App/App.jsx

@@ -235,7 +235,9 @@ export const fetchContent = async ({ store, location }) => {
 
   const visitor = ([id, data]) => {
     const blockType = data['@type'];
-    const { getAsyncData } = blocksConfig[blockType];
+    const block = blocksConfig[blockType];
+    if (!block) return;
+    const { getAsyncData } = block;
     if (getAsyncData) {
       const p = getAsyncData({
         store,

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

@@ -51,6 +51,7 @@ describe('App', () => {
         locale: 'en',
         messages: {},
       },
+      site: { data: {} },
     });
     const component = renderer.create(
       <Provider store={store}>

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

@@ -17,8 +17,6 @@ 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 config from '@plone/volto/registry';
-
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -34,12 +32,16 @@ const LanguageSelector = (props) => {
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
+  const isMultilingual = useSelector(
+    (state) => state.site.data.features?.multilingual,
+  );
+  const availableLanguages = useSelector(
+    (state) => state.site.data?.['plone.available_languages'],
+  );
 
-  const { settings } = config;
-
-  return settings.isMultilingual ? (
+  return isMultilingual ? (
     <div className="language-selector">
-      {map(settings.supportedLanguages, (lang) => {
+      {map(availableLanguages, (lang) => {
         const translation = find(translations, { language: lang });
         return (
           <Link
@@ -61,7 +63,7 @@ const LanguageSelector = (props) => {
     </div>
   ) : (
     <Helmet>
-      <html lang={toReactIntlLang(settings.defaultLanguage)} />
+      <html lang={toReactIntlLang(currentLang)} />
     </Helmet>
   );
 };

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

@@ -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/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';
 
 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,9 +31,9 @@ const MultilingualRedirector = (props) => {
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
+  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
 
-  return pathname === '/' && settings.isMultilingual ? (
+  return pathname === '/' && isMultilingual ? (
     <Redirect to={`/${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>