get multilingual settings from backend

packages/volto/src/actions/content/content.js

@@ -150,7 +150,6 @@ export function getContent(
           b_size: settings.defaultPageSize,
         }
       : {},
-    settings.isMultilingual ? { expand: 'translations' } : {},
   );
 
   let qs = Object.keys(query)

packages/volto/src/components/manage/Add/Add.jsx

@@ -203,7 +203,7 @@ class Add extends Component {
         ? keys(this.props.schema.definitions)
         : null,
       '@type': this.props.type,
-      ...(config.settings.isMultilingual &&
+      ...(this.props.isMultilingual &&
         this.props.location?.state?.translationOf && {
           translation_of: this.props.location.state.translationOf,
           language: this.props.location.state.language,
@@ -459,6 +459,7 @@ export default compose(
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
       type: qs.parse(props.location.search).type,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { createContent, getSchema, changeLanguage },
   ),

packages/volto/src/components/manage/Add/Add.test.jsx

@@ -9,7 +9,6 @@ import Add from './Add';
 const mockStore = configureStore();
 
 beforeAll(() => {
-  config.settings.supportedLanguages = ['de'];
   config.settings.lazyBundles = {
     cms: [],
   };
@@ -38,6 +37,8 @@ describe('Add', () => {
         locale: 'en',
         messages: {},
       },
+      site: {
+        "plone.available_languages":  ['de']
     });
     const component = renderer.create(
       <Provider store={store}>

packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx

@@ -7,10 +7,6 @@ import config from '@plone/volto/registry';
 
 import ContentsBreadcrumbs from './ContentsBreadcrumbs';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('ContentsBreadcrumbs Multilingual', () => {
@@ -24,6 +20,9 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -49,6 +48,9 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
 import { Link, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { langmap } from '@plone/volto/helpers';
 import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem';
 import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem';
@@ -20,15 +21,15 @@ const messages = defineMessages({
 });
 
 const ContentsBreadcrumbs = (props) => {
-  const { settings } = config;
   const { items } = props;
   const intl = useIntl();
   const pathname = useLocation().pathname;
-  const lang = pathname.split('/')[1];
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
+  const navroot = useSelector((state) => state.navroot.data.navroot);
 
   return (
     <Breadcrumb>
-      {settings.isMultilingual && (
+      {isMultilingual && (
         <>
           <Link
             to="/contents"
@@ -40,16 +41,16 @@ const ContentsBreadcrumbs = (props) => {
           <Breadcrumb.Divider />
         </>
       )}
-      {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
+      {isMultilingual && pathname?.split('/')?.length > 2 && (
         <Link
-          to={`/${lang}/contents`}
+          href={`/${navroot['@id']}/contents`}
           className="section"
           title={intl.formatMessage(messages.home)}
         >
-          {langmap?.[lang]?.nativeName ?? lang}
+          {navroot['title']}
         </Link>
       )}
-      {!settings.isMultilingual && (
+      {!isMultilingual && (
         <Link
           to="/contents"
           className="section"

packages/volto/src/components/manage/Edit/Edit.jsx

@@ -431,7 +431,7 @@ class Edit extends Component {
                     />
                   </Button>
 
-                  {config.settings.isMultilingual && (
+                  {this.props.isMultilingual && (
                     <CompareLanguages
                       content={this.props.content}
                       visual={this.state.visual}
@@ -468,6 +468,7 @@ export const __test__ = compose(
       createRequest: state.content.create,
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
+      isMultilingual: state.addons.isMultilingual,
     }),
     {
       updateContent,

packages/volto/src/components/manage/Multilingual/CompareLanguages.jsx

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

packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -15,6 +15,9 @@ const CreateTranslation = (props) => {
   const [translationLocation, setTranslationLocation] = React.useState(null);
   const [translationObject, setTranslationObject] = React.useState(null);
   const languageFrom = useSelector((state) => state.intl.locale);
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
 
   React.useEffect(() => {
     // Only on mount, we dispatch the locator query
@@ -32,7 +35,7 @@ const CreateTranslation = (props) => {
     // On unmount we dispatch the language change
     return () => {
       // We change the interface language
-      if (config.settings.supportedLanguages.includes(language)) {
+      if (availableLanguages.includes(language)) {
         const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));

packages/volto/src/components/manage/Multilingual/CreateTranslation.test.jsx

@@ -7,11 +7,6 @@ import config from '@plone/volto/registry';
 
 import CreateTranslation from './CreateTranslation';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 const mockStore = configureStore();
 
 describe('CreateTranslation', () => {
@@ -24,6 +19,12 @@ describe('CreateTranslation', () => {
       translations: {
         translationLocation: '/es',
       },
+      site: {
+        'plone.availableLanguages': ['de', 'es'],
+      },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx

@@ -67,6 +67,9 @@ const ManageTranslations = (props) => {
   const { isObjectBrowserOpen, openObjectBrowser } = props;
 
   const currentSelectedItem = React.useRef(null);
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
 
   React.useEffect(() => {
     if (!content) {
@@ -180,7 +183,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 ? (

packages/volto/src/components/manage/Multilingual/ManageTranslations.test.jsx

@@ -7,11 +7,6 @@ import config from '@plone/volto/registry';
 
 import ManageTranslations from './ManageTranslations';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
@@ -35,6 +30,12 @@ describe('ManageTranslations', () => {
           language: 'en',
         },
       },
+      site: {
+        'plone.available_languages': ['de', 'es'],
+      },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

packages/volto/src/components/manage/Multilingual/TranslationObject.jsx

@@ -6,6 +6,7 @@ import { Provider } from 'react-intl-redux';
 import { Form, Field } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
+import { useSelector } from 'react-redux';
 import {
   Api,
   flattenToAppURL,
@@ -38,21 +39,24 @@ const TranslationObject = ({
     setActiveMenu(name);
   };
 
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
+
   useEffect(() => {
     if (
       !loadingLocale &&
       Object.keys(locales).length < config.settings.supportedLanguages.length
     ) {
       setLoadingLocale(true);
-      let lang =
-        config.settings.supportedLanguages[Object.keys(locales).length];
+      let lang = availableLanguages[Object.keys(locales).length];
       const langFileName = toGettextLang(lang);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
     }
-  }, [loadingLocale, locales]);
+  }, [loadingLocale, locales, availableLanguages]);
 
   const api = new Api();
   const history = createBrowserHistory();

packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -85,7 +85,7 @@ class PersonalPreferences extends Component {
    */
   onSubmit(data) {
     let language = data.language || 'en';
-    if (config.settings.supportedLanguages.includes(language)) {
+    if (availableLanguages.includes(language)) {
       const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);

packages/volto/src/components/manage/Toolbar/More.jsx

@@ -522,7 +522,7 @@ class More extends Component {
                 )}
             </>
           )}
-        {editAction && config.settings.isMultilingual && (
+        {editAction && this.props.isMultilingual && (
           <Plug pluggable="toolbar-more-manage-content" id="multilingual">
             <li>
               <Link to={`${path}/manage-translations`}>
@@ -548,6 +548,7 @@ export default compose(
       content: state.content.data,
       lang: state.intl.locale,
       workingCopy: state.workingCopy,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { applyWorkingCopy, createWorkingCopy, removeWorkingCopy },
   ),

packages/volto/src/components/manage/Toolbar/Toolbar.jsx

@@ -509,7 +509,7 @@ class Toolbar extends Component {
                     {this.props.content &&
                       ((this.props.content.is_folderish &&
                         this.props.types.length > 0) ||
-                        (config.settings.isMultilingual &&
+                        (this.props.isMultilingual &&
                           this.props.content['@components']?.translations)) && (
                         <button
                           className="add"
@@ -619,6 +619,7 @@ export default compose(
       pathname: props.pathname,
       types: filter(state.types.types, 'addable'),
       unlockRequest: state.content.unlock,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { getTypes, listActions, setExpandedToolbar, unlockContent },
   ),

packages/volto/src/components/manage/Toolbar/Types.jsx

@@ -7,10 +7,17 @@ import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL, langmap, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-const Types = ({ types, pathname, content, currentLanguage }) => {
+const Types = ({
+  types,
+  pathname,
+  content,
+  currentLanguage,
+  availableLanguages,
+  isMultilingual,
+}) => {
   const { settings } = config;
   return types.length > 0 ||
-    (settings.isMultilingual && content['@components'].translations) ? (
+    (isMultilingual && content['@components'].translations) ? (
     <div className="menu-more pastanaga-menu">
       {types.length > 0 && (
         <>
@@ -48,11 +55,11 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           </div>
         </>
       )}
-      {settings.isMultilingual &&
+      {isMultilingual &&
         content['@components'].translations &&
         (() => {
           const translationsLeft = filter(
-            settings.supportedLanguages,
+            availableLanguages,
             (lang) =>
               !Boolean(
                 content['@components'].translations &&
@@ -123,6 +130,8 @@ export default connect(
   (state) => ({
     types: filter(state.types.types, 'addable'),
     currentLanguage: state.intl.locale,
+    availableLanguages: state.site.data['plone.available_languages'],
+    isMultilingual: state.addons.isMultilingual,
   }),
   {},
 )(Types);

packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js

@@ -35,12 +35,16 @@ const LanguageSelector = (props) => {
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
 
   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