@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

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

@@ -1,14 +1,11 @@
-/**
- * PersonalTools container.
- * @module components/manage/Toolbar/PersonalTools
- */
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
 import jwtDecode from 'jwt-decode';
 import cx from 'classnames';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
+
 import { Icon } from '@plone/volto/components';
 import { getUser } from '@plone/volto/actions';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
@@ -17,12 +14,8 @@ import {
   getBaseUrl,
   userHasRoles,
 } from '@plone/volto/helpers';
-import { withRouter } from 'react-router-dom';
-import { compose } from 'redux';
-
 import logoutSVG from '@plone/volto/icons/log-out.svg';
 import rightArrowSVG from '@plone/volto/icons/right-key.svg';
-
 import backSVG from '@plone/volto/icons/back.svg';
 import cameraSVG from '@plone/volto/icons/camera.svg';
 
@@ -49,158 +42,107 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Toolbar container class.
- * @class PersonalTools
- * @extends Component
- */
-class PersonalTools extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    user: PropTypes.shape({
-      fullname: PropTypes.string,
-      email: PropTypes.string,
-      home_page: PropTypes.string,
-      location: PropTypes.string,
-    }).isRequired,
-    userId: PropTypes.string.isRequired,
-    getUser: PropTypes.func.isRequired,
-    loadComponent: PropTypes.func.isRequired,
-  };
+const PersonalTools = (props) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const { pathname } = useLocation();
+  const [, setPushed] = useState(false);
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const user = useSelector((state) => state.users.user);
+  const userId = token ? jwtDecode(token).sub : '';
 
-  componentDidMount() {
-    this.props.getUser(this.props.userId);
-  }
+  useEffect(() => {
+    dispatch(getUser(userId));
+  }, [dispatch, userId]);
 
-  push = (selector) => {
-    this.setState(() => ({
-      pushed: true,
-    }));
-    this.props.loadComponent(selector);
+  const push = (selector) => {
+    setPushed(true);
+    props.loadComponent(selector);
   };
 
-  pull = () => {
-    this.props.unloadComponent();
+  const pull = () => {
+    props.unloadComponent();
   };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div
-        className={cx('personal-tools pastanaga-menu', {
-          'has-inner-actions': this.props.hasActions,
-        })}
-        style={{
-          flex: this.props.theToolbar.current
-            ? `0 0 ${
-                this.props.theToolbar.current.getBoundingClientRect().width
-              }px`
-            : null,
-        }}
-      >
-        <header className="header">
-          <button className="back" onClick={this.pull}>
-            <Icon
-              name={backSVG}
-              size="30px"
-              title={this.props.intl.formatMessage(messages.back)}
-            />
-          </button>
-          <div className="vertical divider" />
-          <h2>
-            {this.props.user.fullname
-              ? this.props.user.fullname
-              : this.props.user.username}
-          </h2>
-          <Link
-            id="toolbar-logout"
-            to={`${getBaseUrl(this.props.pathname)}/logout`}
-          >
-            <Icon
-              className="logout"
-              name={logoutSVG}
-              size="30px"
-              title={this.props.intl.formatMessage(messages.logout)}
-            />
-          </Link>
-        </header>
-        <div className={cx('avatar', { default: !this.props.user.portrait })}>
-          {this.props.user.portrait ? (
-            <img
-              src={flattenToAppURL(this.props.user.portrait)}
-              alt={this.props.intl.formatMessage(messages.userAvatar)}
-            />
-          ) : (
-            <Icon name={cameraSVG} size="96px" />
-          )}
-        </div>
-        {/* <Stats /> Maybe we can find a good fit in the future for this visual element */}
-        <div className="pastanaga-menu-list">
-          {/* This (probably also) should be a Component by itself*/}
-          <ul>
+  return (
+    <div
+      className={cx('personal-tools pastanaga-menu', {
+        'has-inner-actions': props.hasActions,
+      })}
+      style={{
+        flex: props.theToolbar.current
+          ? `0 0 ${props.theToolbar.current.getBoundingClientRect().width}px`
+          : null,
+      }}
+    >
+      <header className="header">
+        <button className="back" onClick={pull}>
+          <Icon
+            name={backSVG}
+            size="30px"
+            title={intl.formatMessage(messages.back)}
+          />
+        </button>
+        <div className="vertical divider" />
+        <h2>{user.fullname ? user.fullname : user.username}</h2>
+        <Link id="toolbar-logout" to={`${getBaseUrl(pathname)}/logout`}>
+          <Icon
+            className="logout"
+            name={logoutSVG}
+            size="30px"
+            title={intl.formatMessage(messages.logout)}
+          />
+        </Link>
+      </header>
+      <div className={cx('avatar', { default: !user.portrait })}>
+        {user.portrait ? (
+          <img
+            src={flattenToAppURL(user.portrait)}
+            alt={intl.formatMessage(messages.userAvatar)}
+          />
+        ) : (
+          <Icon name={cameraSVG} size="96px" />
+        )}
+      </div>
+      {/* <Stats /> Maybe we can find a good fit in the future for this visual element */}
+      <div className="pastanaga-menu-list">
+        {/* This (probably also) should be a Component by itself*/}
+        <ul>
+          <li>
+            <Link
+              id={intl.formatMessage(messages.profile)}
+              to="/personal-information"
+            >
+              <FormattedMessage id="Profile" defaultMessage="Profile" />
+              <Icon name={rightArrowSVG} size="24px" />
+            </Link>
+          </li>
+          <li>
+            <button
+              aria-label={intl.formatMessage(messages.preferences)}
+              onClick={() => push('preferences')}
+            >
+              <FormattedMessage id="Preferences" defaultMessage="Preferences" />
+              <Icon name={rightArrowSVG} size="24px" />
+            </button>
+          </li>
+
+          {userHasRoles(user, ['Site Administrator', 'Manager']) && (
             <li>
-              <Link
-                id={this.props.intl.formatMessage(messages.profile)}
-                to="/personal-information"
-              >
-                <FormattedMessage id="Profile" defaultMessage="Profile" />
+              <Link to="/controlpanel">
+                <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />
                 <Icon name={rightArrowSVG} size="24px" />
               </Link>
             </li>
-            <li>
-              <button
-                aria-label={this.props.intl.formatMessage(messages.preferences)}
-                onClick={() => this.push('preferences')}
-              >
-                <FormattedMessage
-                  id="Preferences"
-                  defaultMessage="Preferences"
-                />
-                <Icon name={rightArrowSVG} size="24px" />
-              </button>
-            </li>
-
-            {userHasRoles(this.props.user, [
-              'Site Administrator',
-              'Manager',
-            ]) && (
-              <li>
-                <Link to="/controlpanel">
-                  <FormattedMessage
-                    id="Site Setup"
-                    defaultMessage="Site Setup"
-                  />
-                  <Icon name={rightArrowSVG} size="24px" />
-                </Link>
-              </li>
-            )}
-            <Pluggable name="toolbar-user-menu" />
-          </ul>
-        </div>
+          )}
+          <Pluggable name="toolbar-user-menu" />
+        </ul>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-export default compose(
-  injectIntl,
-  withRouter,
-  connect(
-    (state, props) => ({
-      pathname: props.location.pathname,
-      user: state.users.user,
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-    }),
-    { getUser },
-  ),
-)(PersonalTools);
+PersonalTools.propTypes = {
+  loadComponent: PropTypes.func.isRequired,
+};
+export default PersonalTools;

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

@@ -591,8 +591,8 @@ class Toolbar extends Component {
                   messages.shrinkToolbar,
                 )}
                 className={cx({
-                  [this.props.content?.review_state]: this.props.content
-                    ?.review_state,
+                  [this.props.content?.review_state]:
+                    this.props.content?.review_state,
                 })}
                 onClick={this.handleShrink}
               />

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

@@ -12,9 +12,9 @@ import {
   isInternalURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
-import { matchPath } from 'react-router';
 
 import config from '@plone/volto/registry';
+import cx from 'classnames';
 
 const UniversalLink = ({
   href,
@@ -66,11 +66,8 @@ const UniversalLink = ({
     }
   }
 
-  const isBlacklisted =
-    (config.settings.externalRoutes ?? []).find((route) =>
-      matchPath(flattenToAppURL(url), route.match),
-    )?.length > 0;
-  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isExternal = !isInternalURL(url);
+
   const isDownload = (!isExternal && url.includes('@@download')) || download;
   const isDisplayFile =
     (!isExternal && url.includes('@@display-file')) || false;
@@ -92,19 +89,16 @@ const UniversalLink = ({
   );
 
   if (isExternal) {
+    const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
     tag = (
       <a
         href={url}
         title={title}
         target={
-          !checkedURL.isMail &&
-          !checkedURL.isTelephone &&
-          !(openLinkInNewTab === false)
-            ? '_blank'
-            : null
+          !isTelephoneOrMail && !(openLinkInNewTab === false) ? '_blank' : null
         }
         rel="noopener noreferrer"
-        className={className}
+        className={cx({ external: !isTelephoneOrMail }, className)}
         {...props}
       >
         {children}

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

@@ -157,6 +157,43 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('UniversalLink renders external link where link is blacklisted', () => {
+    const notInEN =
+      /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: notInEN,
+          exact: false,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/blacklisted-app"
+            title="External blacklisted app"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('External blacklisted app').getAttribute('target')).toBe(
+      '_blank',
+    );
+    expect(getByTitle('External blacklisted app').getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+  });
+
   it('check UniversalLink does not break with error in item', () => {
     const component = renderer.create(
       <Provider store={store}>

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

@@ -47,10 +47,8 @@ export const defaultActionsInfo = ({ intl }) => ({
 const AlignWidget = (props) => {
   const intl = useIntl();
 
-  const {
-    actions = ['left', 'right', 'center', 'full'],
-    actionsInfoMap,
-  } = props;
+  const { actions = ['left', 'right', 'center', 'full'], actionsInfoMap } =
+    props;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),

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

@@ -325,7 +325,9 @@ class ArrayWidget extends Component {
               : this.props.choices
               ? [
                   ...choices,
-                  ...(this.props.noValueOption && !this.props.default
+                  ...(this.props.noValueOption &&
+                  (this.props.default === undefined ||
+                    this.props.default === null)
                     ? [
                         {
                           label: this.props.intl.formatMessage(

package/src/components/manage/Widgets/ArrayWidget.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 { waitFor } from '@testing-library/react';
+import { waitFor, render, fireEvent } from '@testing-library/react';
 
 import ArrayWidget from './ArrayWidget';
 
@@ -41,3 +41,47 @@ test('renders an array widget component', async () => {
   await waitFor(() => {});
   expect(component.toJSON()).toMatchSnapshot();
 });
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <ArrayWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        noValueOption={true}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toMatchSnapshot();
+});

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

@@ -51,7 +51,12 @@ const ColorPickerWidget = (props) => {
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        onChange(id, color.name);
+                        onChange(
+                          id,
+                          value === color.name
+                            ? props.missing_value
+                            : color.name,
+                        );
                       }}
                       active={value === color.name}
                       circular

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

@@ -7,14 +7,16 @@ import ColorPickerWidget from './ColorPickerWidget';
 
 const mockStore = configureStore();
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [value, setValue] = React.useState(props.value || null);
-  const onChange = (id, value) => {
-    setValue(value);
-  };
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [value, setValue] = React.useState(props.value || null);
+    const onChange = (id, value) => {
+      setValue(value);
+    };
 
-  return <Component {...props} onChange={onChange} value={value} />;
-};
+    return <Component {...props} onChange={onChange} value={value} />;
+  };
 
 describe('ColorPickerWidget', () => {
   const COLORS = [

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,
@@ -179,14 +179,8 @@ export class DatetimeWidgetComponent extends Component {
   onFocusChange = ({ focused }) => this.setState({ focused });
 
   render() {
-    const {
-      id,
-      resettable,
-      intl,
-      reactDates,
-      widgetOptions,
-      lang,
-    } = this.props;
+    const { id, resettable, intl, reactDates, widgetOptions, lang } =
+      this.props;
     const noPastDates =
       this.props.noPastDates || widgetOptions?.pattern_options?.noPastDates;
     const moment = this.props.moment.default;
@@ -211,7 +205,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 +229,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/FileWidget.jsx

@@ -11,7 +11,7 @@ import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
 import loadable from '@loadable/component';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
 
 const imageMimetypes = [
@@ -95,6 +95,7 @@ const FileWidget = (props) => {
    */
   const onDrop = (files) => {
     const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
       onChange(id, {

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

@@ -96,7 +96,7 @@ class FormFieldWrapper extends Component {
         {this.props.children}
 
         {map(error, (message) => (
-          <Label key={message} basic color="red" pointing>
+          <Label key={message} basic color="red" className="form-error-label">
             {message}
           </Label>
         ))}

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

@@ -21,8 +21,7 @@ const messages = defineMessages({
     defaultMessage: "This is a reserved name and can't be used",
   },
   invalidCharacters: {
-    id:
-      'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+    id: 'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
     defaultMessage:
       'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
   },

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

@@ -312,15 +312,8 @@ export class ObjectBrowserWidgetComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const {
-      id,
-      description,
-      fieldSet,
-      value,
-      mode,
-      onChange,
-      isDisabled,
-    } = this.props;
+    const { id, description, fieldSet, value, mode, onChange, isDisabled } =
+      this.props;
 
     let items = compact(!isArray(value) && value ? [value] : value || []);