@plone/volto 17.0.0-alpha.6 → 17.0.0-alpha.8

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -9,8 +9,6 @@ import { listGroups } from '@plone/volto/actions';
 import { Icon, Toast } from '@plone/volto/components';
 import { updateGroup, listUsers } from '@plone/volto/actions';
 
-import add from '@plone/volto/icons/add.svg';
-import remove from '@plone/volto/icons/remove.svg';
 import down_key from '@plone/volto/icons/down-key.svg';
 
 const ListingTemplate = ({
@@ -116,7 +114,7 @@ const ListingTemplate = ({
     }
   }, [dispatch, query_group, show_matrix_options, groups_filter]);
 
-  const onSelectOptionHandler = (item, selectedvalue, checked, singleClick) => {
+  const onSelectOptionHandler = (selectedvalue, checked, singleClick) => {
     singleClick = singleClick ?? false;
     let group = selectedvalue.y;
     let username = selectedvalue.x;
@@ -150,17 +148,14 @@ const ListingTemplate = ({
       });
   };
 
-  const onSelectAllHandler = (mtxoption, checked) => {
-    let elements = document.querySelectorAll(`div.checkbox_${mtxoption} input`);
-    let identifier;
+  const onSelectAllHandler = (group, items_ids, checked) => {
     let usersgroupmapping = {};
-    elements.forEach((element) => {
-      identifier = element.name.split('_-_');
-      usersgroupmapping[identifier[1]] = checked ? true : false;
+    items_ids.forEach((el) => {
+      usersgroupmapping[el] = checked ? true : false;
     });
 
     dispatch(
-      updateGroup(identifier[2], {
+      updateGroup(group, {
         users: usersgroupmapping,
       }),
     )
@@ -188,93 +183,68 @@ const ListingTemplate = ({
     <div className="administration_matrix">
       {matrix_options && matrix_options?.length > 0 && (
         <div className="label-options">
-          {matrix_options?.map((matrix_option) => (
-            <div
-              className="label-options-label inclined"
-              key={matrix_option.value}
-            >
-              <div>
-                <span className="label">{matrix_option.label}</span>
+          <div className="target-labels">
+            <div>
+              <h3>{items.length} users</h3>
+            </div>
+            <div>
+              {matrix_options?.map((matrix_option) => (
+                <div
+                  className="label-options-label inclined"
+                  key={matrix_option.value}
+                >
+                  <div>
+                    <span className="label">{matrix_option.label}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="listing-row selectall" key="selectall">
+            <div className="listing-item">
+              <div />
+              <div className="matrix_options">
+                {matrix_options?.map((matrix_option) => (
+                  <div key={matrix_option.value}>
+                    <Checkbox
+                      className="toggle-target"
+                      defaultChecked={false}
+                      onChange={(event, { checked }) =>
+                        onSelectAllHandler(
+                          matrix_option.value,
+                          items.map((el) => el.id),
+                          checked,
+                        )
+                      }
+                    />
+                  </div>
+                ))}
               </div>
             </div>
-          ))}
+          </div>
         </div>
       )}
 
       <div className="items">
         {items.length > 0 ? (
           <>
-            <div className="listing-row selectall" key="selectall">
-              <div className="listing-item">
-                <div />
-                <div className="matrix_options">
-                  {matrix_options?.map((matrix_option) => (
-                    <div key={matrix_option.value}>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, true)
-                        }
-                        className="add-button"
-                        aria-label={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={add}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, false)
-                        }
-                        className="remove-button"
-                        aria-label={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={remove}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <h3>{items.length} users </h3>
             {items.map((item) => (
-              <div className="listing-row" key={item.id}>
+              <div
+                className="listing-row"
+                key={item.id}
+                id={`source-row-${item.id}`}
+              >
                 <div className="listing-item" key={item['@id']}>
                   <div>
-                    <h4>
-                      {item.fullname} ({item.id})
+                    <h4 title={`${item.fullname} ${item.id}`}>
+                      {item.fullname?.length > 25
+                        ? item.fullname.slice(0, 22) + '...'
+                        : item.fullname || item.id}
                     </h4>
                   </div>
                   <div className="matrix_options">
                     {matrix_options?.map((matrix_option) => (
                       <Checkbox
-                        name={`member_-_${item.id}_-_${matrix_option.value}`}
                         className={`checkbox_${matrix_option.value}`}
                         key={matrix_option.value}
                         title={matrix_option.title}
@@ -283,7 +253,6 @@ const ListingTemplate = ({
                           .includes(matrix_option.value)}
                         onChange={(event, { checked }) => {
                           onSelectOptionHandler(
-                            item,
                             { y: matrix_option.value, x: item.id },
                             checked,
                             true,

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -122,83 +122,87 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
 
   return (
     <div className="controlpanel_matrix">
-      <div className="controlpanel_search_y">
-        <Form className="search_users" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchUser"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchUsers)}
-              onChange={onChangeSearchUsers}
-              onKeyDown={onChangeSearchUsers}
-              id="user-search-input"
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_search_wrapper">
+        <div className="controlpanel_search_y">
+          <Form className="search_users" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchUser"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchUsers)}
+                onChange={onChangeSearchUsers}
+                onKeyDown={onChangeSearchUsers}
+                id="user-search-input"
+              />
+            </Form.Field>
+          </Form>
+        </div>
+        <div className="controlpanel_search_x">
+          <Form className="search_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroup"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroups}
+                onKeyDown={onChangeSearchGroups}
+                id="group-search-input"
+              />
+            </Form.Field>
+            <Form.Field>
+              <Checkbox
+                name="addJoinedGroups"
+                label={intl.formatMessage(messages.addJoinedGroups)}
+                title={intl.formatMessage(messages.addJoinedGroups)}
+                defaultChecked={false}
+                onChange={(event, { checked }) => {
+                  onToggleJoinedGroups(checked);
+                }}
+              />
+            </Form.Field>
+          </Form>
+        </div>
       </div>
-      <div className="controlpanel_search_x">
-        <Form className="search_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroup"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroups}
-              onKeyDown={onChangeSearchGroups}
-              id="group-search-input"
-            />
-          </Form.Field>
-          <Form.Field>
-            <Checkbox
-              name="addJoinedGroups"
-              label={intl.formatMessage(messages.addJoinedGroups)}
-              title={intl.formatMessage(messages.addJoinedGroups)}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onToggleJoinedGroups(checked);
-              }}
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_listing_wrapper">
+        <div className="controlpanel_filter">
+          <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
+          <Form className="search_filter_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroupFilter"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroupsFilter}
+                onKeyDown={onChangeSearchGroupsFilter}
+                id="groupfilter-search-input"
+              />
+            </Form.Field>
+          </Form>
+          {(!many_groups || query_group_filter.length > 1) &&
+            filter_options?.map((filter_option) => (
+              <Form.Field>
+                <Checkbox
+                  name={`filter_option_${filter_option.value}`}
+                  key={filter_option.value}
+                  title={filter_option.label}
+                  label={filter_option.label}
+                  defaultChecked={false}
+                  onChange={(event, { checked }) => {
+                    onSelectOptionHandler(filter_option, checked);
+                  }}
+                />
+              </Form.Field>
+            ))}
+        </div>
+        <UserGroupMembershipListing
+          query_user={query_user}
+          query_group={query_group}
+          groups_filter={groups_filter}
+          add_joined_groups={add_joined_groups}
+          many_users={many_users}
+          many_groups={many_groups}
+        />
       </div>
-      <div className="controlpanel_filter">
-        <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
-
-        <Form className="search_filter_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroupFilter"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroupsFilter}
-              onKeyDown={onChangeSearchGroupsFilter}
-              id="groupfilter-search-input"
-            />
-          </Form.Field>
-        </Form>
-
-        {(!many_groups || query_group_filter.length > 1) &&
-          filter_options?.map((filter_option) => (
-            <Checkbox
-              name={`filter_option_${filter_option.value}`}
-              key={filter_option.value}
-              title={filter_option.label}
-              label={filter_option.label}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onSelectOptionHandler(filter_option, checked);
-              }}
-            />
-          ))}
-      </div>
-      <UserGroupMembershipListing
-        query_user={query_user}
-        query_group={query_group}
-        groups_filter={groups_filter}
-        add_joined_groups={add_joined_groups}
-        many_users={many_users}
-        many_groups={many_groups}
-      />
     </div>
   );
 };

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/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/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/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/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>
   );
 };