@plone/volto 17.0.0-alpha.26 → 17.0.0-alpha.28

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

@@ -158,7 +158,8 @@ describe('UniversalLink', () => {
   });
 
   it('UniversalLink renders external link where link is blacklisted', () => {
-    const notInEN = /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    const notInEN =
+      /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
     config.settings.externalRoutes = [
       {
         match: {

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/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

@@ -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;

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 || []);
 

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

@@ -734,15 +734,8 @@ class RecurrenceWidget extends Component {
   render() {
     const { open, dimmer, rruleSet, formValues, RRULE_LANGUAGE } = this.state;
 
-    const {
-      id,
-      title,
-      required,
-      description,
-      error,
-      fieldSet,
-      intl,
-    } = this.props;
+    const { id, title, required, description, error, fieldSet, intl } =
+      this.props;
 
     return (
       <Form.Field

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

@@ -27,10 +27,10 @@ const messages = defineMessages({
 });
 
 const ORDINAL_NUMBERS = {
-  '1': 'first',
-  '2': 'second',
-  '3': 'third',
-  '4': 'fourth',
+  1: 'first',
+  2: 'second',
+  3: 'third',
+  4: 'fourth',
   '-1': 'last',
 };
 

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

@@ -490,9 +490,8 @@ class SchemaWidget extends Component {
    */
   onAddField(values) {
     const fieldId = slugify(values.title);
-    const currentFieldsetFields = this.props.value.fieldsets[
-      this.state.currentFieldset
-    ].fields;
+    const currentFieldsetFields =
+      this.props.value.fieldsets[this.state.currentFieldset].fields;
     const hasChangeNote = currentFieldsetFields.indexOf('changeNote') > -1;
     const newFieldsetFields = hasChangeNote
       ? [
@@ -698,9 +697,8 @@ class SchemaWidget extends Component {
       const newParentFieldsetIndex = fieldsets.findIndex(
         (field) => field.id === parentFieldSet,
       );
-      const indexOfChangeNote = fieldsets[
-        newParentFieldsetIndex
-      ].fields.indexOf('changeNote');
+      const indexOfChangeNote =
+        fieldsets[newParentFieldsetIndex].fields.indexOf('changeNote');
       // remove from current fieldset
       const fieldsetsWithoutField = [
         ...slice(fieldsets, 0, currentFieldset),
@@ -1363,9 +1361,8 @@ class SchemaWidget extends Component {
               required:
                 this.props.value.required.indexOf(this.state.editField.id) !==
                 -1,
-              parentFieldSet: this.props.value.fieldsets[
-                this.state.currentFieldset
-              ].id,
+              parentFieldSet:
+                this.props.value.fieldsets[this.state.currentFieldset].id,
               values: formatArrayToTextarea(
                 this.props.value.properties[this.state.editField.id],
               ),

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

@@ -261,15 +261,8 @@ class WysiwygWidgetComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const {
-      id,
-      title,
-      description,
-      required,
-      value,
-      error,
-      fieldSet,
-    } = this.props;
+    const { id, title, description, required, value, error, fieldSet } =
+      this.props;
 
     if (__SERVER__) {
       return (

package/src/components/theme/Comments/Comments.jsx

@@ -31,8 +31,7 @@ const messages = defineMessages({
     defaultMessage: 'Comments',
   },
   commentDescription: {
-    id:
-      'You can add a comment by filling out the form below. Plain text formatting.',
+    id: 'You can add a comment by filling out the form below. Plain text formatting.',
     defaultMessage:
       'You can add a comment by filling out the form below. Plain text formatting.',
   },
@@ -113,14 +112,8 @@ const Comments = (props) => {
   const [editText, seteditText] = useState(null);
   const [replyTo, setreplyTo] = useState(null);
   const [collapsedComments, setcollapsedComments] = useState({});
-  const {
-    items,
-    next,
-    items_total,
-    permissions,
-    addRequest,
-    deleteRequest,
-  } = useComments();
+  const { items, next, items_total, permissions, addRequest, deleteRequest } =
+    useComments();
 
   const prevpathname = usePrevious(pathname);
 

package/src/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -83,6 +83,10 @@ const ContentMetadataTags = (props) => {
     <>
       <Helmet>
         <title>{getTitle()?.replace(/\u00AD/g, '')}</title>
+        <link
+          rel="canonical"
+          href={seo_canonical_url || toPublicURL(props.content['@id'])}
+        />
         <meta name="description" content={seo_description || description} />
         <meta
           property="og:title"

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

@@ -51,8 +51,7 @@ const messages = defineMessages({
     defaultMessage: 'Login Failed',
   },
   loginFailedContent: {
-    id:
-      'Both email address and password are case sensitive, check that caps lock is not enabled.',
+    id: 'Both email address and password are case sensitive, check that caps lock is not enabled.',
     defaultMessage:
       'Both email address and password are case sensitive, check that caps lock is not enabled.',
   },

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -79,8 +79,7 @@ const messages = defineMessages({
     defaultMessage: 'Account activation completed',
   },
   successRedirectToLoginBody: {
-    id:
-      'Your password has been set successfully. You may now {link} with your new password.',
+    id: 'Your password has been set successfully. You may now {link} with your new password.',
     defaultMessage:
       'Your password has been set successfully. You may now {link} with your new password.',
   },

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -7,13 +7,17 @@ import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/defau
 /**
  * Renders a preview image for a catalog brain result item.
  */
-function PreviewImage({ item, alt, ...rest }) {
+function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
   const Image = config.getComponent({ name: 'Image' }).component;
 
-  if (item.image_field && item.image_scales?.[item.image_field]?.[0]) {
-    return (
-      <Image item={item} imageField={item.image_field} alt={alt} {...rest} />
-    );
+  const image = (
+    <Image item={item} image_field={image_field} alt={alt} {...rest} />
+  );
+
+  if (!image && !showDefault) return null;
+
+  if (image) {
+    return image;
   } else {
     return (
       <img
@@ -38,6 +42,7 @@ PreviewImage.propTypes = {
     title: PropTypes.string.isRequired,
     image_field: PropTypes.string,
     image_scales: PropTypes.object,
+    showDefault: PropTypes.bool,
   }),
   alt: PropTypes.string.isRequired,
 };

package/src/components/theme/PreviewImage/PreviewImage.test.js

@@ -109,4 +109,21 @@ describe('PreviewImage', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('not renders a fallback image if showDefault prop is false', () => {
+    const item = {
+      title: 'Item title',
+      '@id': 'http://localhost:3000/something',
+    };
+    const component = renderer.create(
+      <PreviewImage
+        item={item}
+        className="extra"
+        showDefault={false}
+        alt={item.title}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/theme/Register/Register.jsx

@@ -37,8 +37,7 @@ const messages = defineMessages({
     defaultMessage: 'E-mail',
   },
   emailDescription: {
-    id:
-      'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
+    id: 'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
     defaultMessage:
       'Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.',
   },
@@ -47,8 +46,7 @@ const messages = defineMessages({
     defaultMessage: 'Account Registration Completed',
   },
   successRegisterCompletedBody: {
-    id:
-      'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
+    id: 'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
     defaultMessage:
       'The registration process has been successful. Please check your e-mail inbox for information on how activate your account.',
   },

package/src/components/theme/TsTest/TsTest.test.tsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+import TsTest from './TsTest';
+
+describe('Ts test component', () => {
+  test('Renders', () => {
+    const component = renderer.create(<TsTest text="Test a TS component" />);
+    const json = component.toJSON();
+
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/theme/TsTest/TsTest.tsx

@@ -0,0 +1,15 @@
+/**
+ * TEST COMPONENT: React TSX component
+ * Ensure successful implementation of TSX and validate the functionality with Jest tests
+ * Dependencies: jest (version 26.6.3), ts-jest (version ^26.4.2)
+ */
+
+type TestProps = {
+  text: string;
+};
+
+const TsTest = ({ text }: TestProps) => {
+  return <div>{text}</div>;
+};
+
+export default TsTest;