@plone/volto 17.0.0-alpha.0 → 17.0.0-alpha.10

package/src/components/manage/History/History.jsx

@@ -116,22 +116,37 @@ class History extends Component {
     this.props.revertHistory(getBaseUrl(this.props.pathname), value);
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
+  processHistoryEntries = () => {
+    // Getting the history entries from the props
+    // No clue why the reverse(concat()) is necessary
     const entries = reverse(concat(this.props.entries));
     let title = entries.length > 0 ? entries[0].state_title : '';
     for (let x = 1; x < entries.length; x += 1) {
       entries[x].prev_state_title = title;
       title = entries[x].state_title || title;
     }
+    // We reverse them again
     reverse(entries);
+
+    // We identify the latest 'versioning' entry and mark it
+    const current_version = find(entries, (item) => item.type === 'versioning');
+    if (current_version) {
+      current_version.is_current = true;
+    }
+    return entries;
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
     const historyAction = find(this.props.objectActions, {
       id: 'history',
     });
+    const entries = this.processHistoryEntries();
+
     return !historyAction ? (
       <>
         {this.props.token ? (
@@ -266,18 +281,20 @@ class History extends Component {
                               />
                             </Link>
                           )}
-                          {'version' in entry && (
-                            <Dropdown.Item
-                              value={entry.version}
-                              onClick={this.onRevert}
-                            >
-                              <Icon name="undo" />{' '}
-                              <FormattedMessage
-                                id="Revert to this revision"
-                                defaultMessage="Revert to this revision"
-                              />
-                            </Dropdown.Item>
-                          )}
+                          {'version' in entry &&
+                            entry.may_revert &&
+                            !entry.is_current && (
+                              <Dropdown.Item
+                                value={entry.version}
+                                onClick={this.onRevert}
+                              >
+                                <Icon name="undo" />{' '}
+                                <FormattedMessage
+                                  id="Revert to this revision"
+                                  defaultMessage="Revert to this revision"
+                                />
+                              </Dropdown.Item>
+                            )}
                         </Dropdown.Menu>
                       </Dropdown>
                     )}

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

@@ -6,7 +6,7 @@ import {
   getTranslationLocator,
   getContent,
 } from '@plone/volto/actions';
-import { flattenToAppURL, normalizeLanguageName } from '@plone/volto/helpers';
+import { flattenToAppURL, toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const CreateTranslation = (props) => {
@@ -33,7 +33,7 @@ const CreateTranslation = (props) => {
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
-        const langFileName = normalizeLanguageName(language);
+        const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));
         });

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

@@ -15,7 +15,8 @@ import {
   Api,
   flattenToAppURL,
   langmap,
-  normalizeLanguageName,
+  toGettextLang,
+  toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
 const messages = defineMessages({
@@ -55,9 +56,9 @@ const TranslationObject = ({
       setLoadingLocale(true);
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
-      const langFileName = normalizeLanguageName(lang);
+      const langFileName = toGettextLang(lang);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
-        setLocales({ ...locales, [lang]: locale.default });
+        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
     }

package/src/components/manage/Preferences/ChangePassword.jsx

@@ -43,8 +43,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   newPasswordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   newPasswordRepeatTitle: {
     id: 'Confirm password',

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -15,7 +15,7 @@ import { toast } from 'react-toastify';
 import { Form, Toast } from '@plone/volto/components';
 import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -86,7 +86,7 @@ class PersonalPreferences extends Component {
   onSubmit(data) {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
-      const langFileName = normalizeLanguageName(language);
+      const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });

package/src/components/manage/Toast/Toast.jsx

@@ -15,7 +15,7 @@ const Toast = (props) => {
       return successSVG;
     } else if (props.error) {
       return errorSVG;
-    } else if (props.error) {
+    } else if (props.warning) {
       return warningSVG;
     } else {
       return successSVG;

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

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { filter, find, isEmpty, map } from 'lodash';
 import { FormattedMessage } from 'react-intl';
-import { flattenToAppURL, langmap } from '@plone/volto/helpers';
+import { flattenToAppURL, langmap, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const Types = ({ types, pathname, content, currentLanguage }) => {
@@ -59,7 +59,7 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                   find(content['@components'].translations.items, {
                     language: lang,
                   }),
-              ) && currentLanguage !== lang,
+              ) && toBackendLang(currentLanguage) !== lang,
           );
 
           return (

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

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
-import { parseDateTime } from '@plone/volto/helpers';
+import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import leftKey from '@plone/volto/icons/left-key.svg';
@@ -101,7 +101,7 @@ export class DatetimeWidgetComponent extends Component {
       // if passed value matches the construction time, we guess it's a default
       isDefault:
         parseDateTime(
-          this.props.lang,
+          toBackendLang(this.props.lang),
           this.props.value,
           undefined,
           this.moment,
@@ -111,7 +111,7 @@ export class DatetimeWidgetComponent extends Component {
 
   getInternalValue() {
     return parseDateTime(
-      this.props.lang,
+      toBackendLang(this.props.lang),
       this.props.value,
       undefined,
       this.moment,
@@ -211,7 +211,9 @@ export class DatetimeWidgetComponent extends Component {
               {...(noPastDates ? {} : { isOutsideRange: () => false })}
               onFocusChange={this.onFocusChange}
               noBorder
-              displayFormat={moment.localeData(lang).longDateFormat('L')}
+              displayFormat={moment
+                .localeData(toBackendLang(lang))
+                .longDateFormat('L')}
               navPrev={<PrevIcon />}
               navNext={<NextIcon />}
               id={`${id}-date`}
@@ -233,7 +235,9 @@ export class DatetimeWidgetComponent extends Component {
                 showSecond={false}
                 use12Hours={lang === 'en'}
                 id={`${id}-time`}
-                format={moment.localeData(lang).longDateFormat('LT')}
+                format={moment
+                  .localeData(toBackendLang(lang))
+                  .longDateFormat('LT')}
                 placeholder={intl.formatMessage(messages.time)}
                 focusOnOpen
                 placement="bottomRight"

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
 import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
-import { applySchemaDefaults } from '@plone/volto/helpers';
+import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
@@ -164,13 +164,8 @@ const ObjectListWidget = (props) => {
           if (!destination) {
             return;
           }
-
-          const first = value[source.index];
-          const second = value[destination.index];
-          value[destination.index] = first;
-          value[source.index] = second;
-
-          onChange(id, value);
+          const newValue = reorderArray(value, source.index, destination.index);
+          onChange(id, newValue);
           return true;
         }}
       >

package/src/components/manage/Widgets/RecurrenceWidget/ByDayField.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
 import { Days } from './Utils';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -18,7 +19,7 @@ import { useSelector } from 'react-redux';
 const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const toggleWeekDay = (dayName) => {
     var day = Days[dayName];

package/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -25,7 +26,7 @@ const MonthOfTheYearField = ({
 }) => {
   const moment = momentlib.default;
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   const monthList = [
     ...map(moment.months(), (m, i) => ({
       value: i + 1,

package/src/components/manage/Widgets/RecurrenceWidget/Occurences.jsx

@@ -11,6 +11,7 @@ import { List, Button, Header, Label } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { useSelector } from 'react-redux';
@@ -68,7 +69,7 @@ const Occurences_ = ({
 }) => {
   const moment = momentlib.default;
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   let all = [];
   const isExcluded = (date) => {
     var dateISO = toISOString(date);

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

@@ -23,6 +23,7 @@ import {
 } from 'semantic-ui-react';
 
 import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -183,7 +184,7 @@ class RecurrenceWidget extends Component {
     const { RRuleSet, rrulestr } = props.rrule;
 
     this.moment = this.props.moment.default;
-    this.moment.locale(this.props.lang);
+    this.moment.locale(toBackendLang(this.props.lang));
 
     let rruleSet = this.props.value
       ? rrulestr(props.value, {
@@ -201,7 +202,11 @@ class RecurrenceWidget extends Component {
       open: false,
       rruleSet: rruleSet,
       formValues: this.getFormValues(rruleSet),
-      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment, this.props.lang),
+      RRULE_LANGUAGE: rrulei18n(
+        this.props.intl,
+        this.moment,
+        toBackendLang(this.props.lang),
+      ),
     };
   }
 

package/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx

@@ -8,6 +8,7 @@ import { map } from 'lodash';
 import { Days } from './Utils';
 import SelectInput from './SelectInput';
 import { Form } from 'semantic-ui-react';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -22,7 +23,7 @@ const WeekdayOfTheMonthField = (props) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const weekdayOfTheMonthList = [
     ...map(Object.keys(Days), (d) => ({

package/src/components/manage/Widgets/SelectUtils.js

@@ -54,7 +54,7 @@ export function normalizeSingleSelectOption(value, intl) {
     throw new Error(`Unknown value type of select widget: ${value}`);
   }
 
-  const token = value.token ?? value.value ?? 'no-value';
+  const token = value.token ?? value.value ?? value.UID ?? 'no-value';
   const label =
     (value.title && value.title !== 'None' ? value.title : undefined) ??
     value.label ??

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

@@ -202,7 +202,7 @@ class SelectWidget extends Component {
 
     const isMulti = this.props.isMulti
       ? this.props.isMulti
-      : id === 'roles' || id === 'groups';
+      : id === 'roles' || id === 'groups' || this.props.type === 'array';
 
     return (
       <FormFieldWrapper {...this.props}>

package/src/components/theme/Footer/Footer.jsx

@@ -9,7 +9,6 @@ import { map } from 'lodash';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { useSelector, shallowEqual } from 'react-redux';
 import { UniversalLink } from '@plone/volto/components';
-import config from '@plone/volto/registry';
 import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
 
 const messages = defineMessages({
@@ -26,10 +25,8 @@ const messages = defineMessages({
  * @returns {string} Markup of the component
  */
 const Footer = ({ intl }) => {
-  const { settings } = config;
-  const { lang, siteActions = [] } = useSelector(
+  const { siteActions = [] } = useSelector(
     (state) => ({
-      lang: state.intl.locale,
       siteActions: state.actions?.actions?.site_actions,
     }),
     shallowEqual,
@@ -97,15 +94,7 @@ const Footer = ({ intl }) => {
                   <UniversalLink
                     className="item"
                     href={
-                      settings.isMultilingual
-                        ? `/${lang}/${
-                            item.url
-                              ? flattenToAppURL(item.url)
-                              : addAppURL(item.id)
-                          }`
-                        : item.url
-                        ? flattenToAppURL(item.url)
-                        : addAppURL(item.id)
+                      item.url ? flattenToAppURL(item.url) : addAppURL(item.id)
                     }
                   >
                     {item?.title}

package/src/components/theme/Header/Header.jsx

@@ -1,12 +1,6 @@
-/**
- * Header component.
- * @module components/theme/Header/Header
- */
-
-import React, { Component } from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useToken } from '@plone/volto/hooks/userSession/useToken';
 
 import {
   Anontools,
@@ -16,65 +10,45 @@ import {
   SearchWidget,
 } from '@plone/volto/components';
 
-/**
- * Header component class.
- * @class Header
- * @extends Component
- */
-class Header extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-  };
+const Header = ({ pathname }) => {
+  const token = useToken();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment basic className="header-wrapper" role="banner">
-        <Container>
-          <div className="header">
-            <div className="logo-nav-wrapper">
-              <div className="logo">
-                <Logo />
-              </div>
-              <Navigation pathname={this.props.pathname} />
+  return (
+    <Segment basic className="header-wrapper" role="banner">
+      <Container>
+        <div className="header">
+          <div className="logo-nav-wrapper">
+            <div className="logo">
+              <Logo />
             </div>
-            <div className="tools-search-wrapper">
-              <LanguageSelector />
-              {!this.props.token && (
-                <div className="tools">
-                  <Anontools />
-                </div>
-              )}
-              <div className="search">
-                <SearchWidget />
+            <Navigation pathname={pathname} />
+          </div>
+          <div className="tools-search-wrapper">
+            <LanguageSelector />
+            {!token && (
+              <div className="tools">
+                <Anontools />
               </div>
+            )}
+            <div className="search">
+              <SearchWidget />
             </div>
           </div>
-        </Container>
-      </Segment>
-    );
-  }
-}
+        </div>
+      </Container>
+    </Segment>
+  );
+};
+
+export default Header;
+
+Header.propTypes = {
+  token: PropTypes.string,
+  pathname: PropTypes.string.isRequired,
+  content: PropTypes.objectOf(PropTypes.any),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-}))(Header);
+Header.defaultProps = {
+  token: null,
+  content: null,
+};

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

@@ -39,4 +39,22 @@ describe('Header', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a header component - auth', () => {
+    const store = mockStore({
+      userSession: { token: '1234567890' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <Header pathname="/blog" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/theme/Icon/Icon.jsx

@@ -44,8 +44,8 @@ const Icon = ({
   ariaHidden,
 }) => (
   <svg
-    xmlns={name.attributes && name.attributes.xmlns}
-    viewBox={name.attributes && name.attributes.viewBox}
+    xmlns={name?.attributes?.xmlns}
+    viewBox={name?.attributes?.viewBox}
     style={{
       height: size,
       width: 'auto',

package/src/components/theme/LanguageSelector/LanguageSelector.js

@@ -11,7 +11,12 @@ import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import { find, map } from 'lodash';
 
-import { Helmet, langmap, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  Helmet,
+  langmap,
+  flattenToAppURL,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
@@ -42,7 +47,7 @@ const LanguageSelector = (props) => {
             aria-label={`${intl.formatMessage(
               messages.switchLanguageTo,
             )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: lang === currentLang })}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
             title={langmap[lang].nativeName}
             onClick={() => {
@@ -57,7 +62,7 @@ const LanguageSelector = (props) => {
     </div>
   ) : (
     <Helmet>
-      <html lang={settings.defaultLanguage} />
+      <html lang={toReactIntlLang(settings.defaultLanguage)} />
     </Helmet>
   );
 };

package/src/components/theme/Login/Login.jsx

@@ -239,6 +239,7 @@ class Login extends Component {
                         <Input
                           type="password"
                           id="password"
+                          autocomplete="current-password"
                           name="password"
                           placeholder={this.props.intl.formatMessage(
                             messages.password,

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

@@ -8,6 +8,7 @@ import { Image } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 
 const messages = defineMessages({
@@ -34,7 +35,7 @@ const Logo = () => {
 
   return (
     <UniversalLink
-      href={settings.isMultilingual ? `/${lang}` : '/'}
+      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
       title={intl.formatMessage(messages.site)}
     >
       <Image

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

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
@@ -23,7 +23,7 @@ const MultilingualRedirector = (props) => {
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
-      const langFileName = normalizeLanguageName(redirectToLanguage);
+      const langFileName = toGettextLang(redirectToLanguage);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         if (mounted) {
           dispatch(changeLanguage(redirectToLanguage, locale.default));

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const NavItem = ({ item, lang }) => {
@@ -15,7 +15,9 @@ const NavItem = ({ item, lang }) => {
         className="item"
         activeClassName="active"
         exact={
-          settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
+          settings.isMultilingual
+            ? item.url === `/${toBackendLang(lang)}`
+            : item.url === ''
         }
       >
         {item.title}