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

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

@@ -9,6 +9,7 @@ import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
 import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
 import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import { difference } from '@plone/volto/helpers/Utils/Utils';
+import withSaveAsDraft from '@plone/volto/helpers/Utils/withSaveAsDraft';
 import FormValidation from '@plone/volto/helpers/FormValidation/FormValidation';
 import {
   getBlocksFieldname,
@@ -265,6 +266,18 @@ class Form extends Component {
     this.onBlurField = this.onBlurField.bind(this);
     this.onClickInput = this.onClickInput.bind(this);
     this.onToggleMetadataFieldset = this.onToggleMetadataFieldset.bind(this);
+    this.updateFormDataWithSaved = this.updateFormDataWithSaved.bind(this);
+  }
+
+  /**
+   * Function sent as callback to saveAsDraft when user
+   * choses to load local data
+   * @param {Object} savedFormData
+   */
+  updateFormDataWithSaved(savedFormData) {
+    if (savedFormData) {
+      this.setState({ formData: savedFormData });
+    }
   }
 
   /**
@@ -278,6 +291,12 @@ class Form extends Component {
     let errors = {};
     let activeIndex = 0;
 
+    if (!prevProps.schema && this.props.schema) {
+      this.props.checkSavedDraft(
+        this.state.formData,
+        this.updateFormDataWithSaved,
+      );
+    }
     if (!this.props.isFormSelected && prevProps.isFormSelected) {
       this.props.setUIState({
         selected: null,
@@ -303,6 +322,10 @@ class Form extends Component {
         this.props.onChangeFormData(this.state.formData);
       }
     }
+    // on each formData update it will save the form to the localStorage
+    if (!isEqual(prevState?.formData, this.state.formData)) {
+      this.props.onSaveDraft(this.state.formData);
+    }
     if (
       this.props.global &&
       !isEqual(this.props.globalData, prevProps.globalData)
@@ -395,6 +418,13 @@ class Form extends Component {
    */
   componentDidMount() {
     this.setState({ isClient: true });
+    if (this.props.schema) {
+      this.props.checkSavedDraft(
+        this.state.formData,
+        this.updateFormDataWithSaved,
+      );
+      return;
+    }
   }
 
   /**
@@ -653,6 +683,7 @@ class Form extends Component {
           this.props.setFormData(this.props.formData);
         }
       }
+      this.props.onCancelDraft();
     }
   }
 
@@ -1136,4 +1167,5 @@ export default compose(
     null,
     { forwardRef: true },
   ),
+  withSaveAsDraft({ forwardRef: true }),
 )(FormIntl);

package/src/components/manage/Form/Form.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 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 Form from './Form';
 
 const mockStore = configureStore();
@@ -30,26 +30,30 @@ describe('Form', () => {
         },
       },
     });
+    const route = '/some-route';
     const component = renderer.create(
       <Provider store={store}>
-        <Form
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: 'Default',
-                fields: ['title'],
+        <MemoryRouter initialEntries={[route]}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
               },
-            ],
-            properties: {
-              title: {},
-            },
-            required: [],
-          }}
-          requestError={errorMessage}
-          onSubmit={() => {}}
-          onCancel={() => {}}
-        />
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+        ,
       </Provider>,
     );
     const json = component.toJSON();

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/Widgets/SelectWidget.jsx

@@ -128,6 +128,7 @@ class SelectWidget extends Component {
     isMulti: PropTypes.bool,
     placeholder: PropTypes.string,
     sort: PropTypes.bool,
+    isClearable: PropTypes.bool,
   };
 
   /**
@@ -156,6 +157,7 @@ class SelectWidget extends Component {
     noValueOption: true,
     customOptionStyling: null,
     sort: false,
+    isClearable: true,
   };
 
   /**
@@ -302,7 +304,7 @@ class SelectWidget extends Component {
                 : undefined,
             );
           }}
-          isClearable
+          isClearable={this.props.isClearable}
         />
       </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', () => {