@plone/volto 19.0.0-alpha.5 → 19.0.0-alpha.7

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -29,6 +29,16 @@ const messages = defineMessages({
   },
 });
 
+function getImageField(resp) {
+  if (!resp) return null;
+
+  if (resp.preview_image_link) return 'preview_image_link';
+  if (resp.preview_image) return 'preview_image';
+  if (resp.image) return 'image';
+
+  return null;
+}
+
 const TeaserData = (props) => {
   const {
     block,
@@ -58,16 +68,20 @@ const TeaserData = (props) => {
       '@type': resp?.['@type'],
       Description: resp?.description,
       Title: resp.title,
-      hasPreviewImage: resp?.preview_image ? true : false,
+      hasPreviewImage: getImageField(resp) ? true : false,
       head_title: resp.head_title ?? null,
-      image_field: resp?.preview_image
-        ? 'preview_image'
-        : resp?.image
-          ? 'image'
-          : null,
+      image_field: getImageField(resp),
       image_scales: {
         preview_image: [resp?.preview_image],
         image: [resp?.image],
+        preview_image_link: resp?.preview_image_link
+          ? [
+              {
+                ...resp?.preview_image_link?.['image_scales']?.image?.[0],
+                base_path: resp?.preview_image_link?.['@id'],
+              },
+            ]
+          : [],
       },
       title: resp.title,
     };

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -33,7 +33,7 @@ const TeaserDefaultTemplate = (props) => {
         {!href && isEditMode && (
           <Message>
             <div className="teaser-item placeholder">
-              <img src={imageBlockSVG} alt="" />
+              <Image src={imageBlockSVG} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>
           </Message>

package/src/components/manage/Blocks/Video/Edit.jsx

@@ -12,6 +12,7 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -82,7 +83,7 @@ const Edit = (props) => {
       ) : (
         <Message>
           <center>
-            <img src={videoBlockSVG} alt="" />
+            <Image src={videoBlockSVG} alt="" />
             <div className="toolbar-inner">
               <Input
                 onKeyDown={onKeyDownVariantMenuForm}

package/src/components/manage/Contents/Contents.jsx

@@ -264,6 +264,10 @@ const messages = defineMessages({
     id: 'All',
     defaultMessage: 'All',
   },
+  resultCount: {
+    id: 'resultCount',
+    defaultMessage: 'Result count',
+  },
 });
 
 /**
@@ -1218,8 +1222,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.upload}
                                 className="upload"
+                                aria-controls="contents-table-wrapper"
                                 aria-label={this.props.intl.formatMessage(
-                                  messages.upload,
+                                  messages.filter,
                                 )}
                               >
                                 <Icon
@@ -1551,7 +1556,20 @@ class Contents extends Component {
                           </Dropdown.Menu>
                         </Dropdown>
                       </Segment>
-                      <div className="contents-table-wrapper">
+                      <div
+                        id="contents-table-wrapper"
+                        className="contents-table-wrapper"
+                        role="region"
+                      >
+                        <span
+                          aria-live="polite"
+                          className="search-feedback"
+                          role="status"
+                        >
+                          {`${this.props.intl.formatMessage(
+                            messages.resultCount,
+                          )}: ${this.props.total || 0}`}
+                        </span>
                         <Table selectable compact singleLine attached>
                           <Table.Header>
                             <Table.Row>

package/src/components/manage/Controlpanels/ContentType.jsx

@@ -182,7 +182,7 @@ class ContentType extends Component {
       return <Error error={this.state.error} />;
     }
 
-    if (this.props.controlpanel) {
+    if (this.props.controlpanel?.data) {
       let controlpanel = this.props.controlpanel;
       if (controlpanel?.data?.filter_content_types === false) {
         controlpanel.data.filter_content_types = { title: 'all', token: 'all' };

package/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx

@@ -494,8 +494,9 @@ class GroupsControlpanel extends Component {
                       messages.addGroupsFormGroupNameTitle,
                     ),
                     type: 'string',
-                    description:
-                      'A unique identifier for the group. Can not be changed after creation.',
+                    description: this.props.intl.formatMessage(
+                      messages.addGroupsFormGroupNameDescription,
+                    ),
                   },
                   email: {
                     title: this.props.intl.formatMessage(

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

@@ -1,10 +1,11 @@
 /**
- * Users controlpanel user.
- * @module components/manage/Controlpanels/UsersControlpanelUser
+ * RenderUsers component.
+ * @module components/manage/Controlpanels/Users/RenderUsers
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import editSVG from '@plone/volto/icons/editing.svg';
@@ -13,199 +14,179 @@ import Toast from '@plone/volto/components/manage/Toast/Toast';
 import { ModalForm } from '@plone/volto/components/manage/Form';
 import { updateUser } from '@plone/volto/actions/users/users';
 import ploneSVG from '@plone/volto/icons/plone.svg';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
 import { canAssignRole } from '@plone/volto/helpers/User/User';
 import { toast } from 'react-toastify';
 
 /**
- * UsersControlpanelUser class.
- * @class UsersControlpanelUser
- * @extends Component
+ * RenderUsers functional component.
+ * @function RenderUsers
  */
-class RenderUsers extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    user: PropTypes.shape({
-      username: PropTypes.string,
-      fullname: PropTypes.string,
-      roles: PropTypes.arrayOf(PropTypes.string),
-    }).isRequired,
-    roles: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string,
-      }),
-    ).isRequired,
-    onDelete: PropTypes.func.isRequired,
-    isUserManager: PropTypes.bool.isRequired,
-  };
+const RenderUsers = (props) => {
+  const [user, setUser] = useState({});
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Sharing
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      user: {},
-    };
-    this.onChange = this.onChange.bind(this);
-    this.onEditUserError = this.onEditUserError.bind(this);
-    this.onEditUserSubmit = this.onEditUserSubmit.bind(this);
-  }
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const updateRequest = useSelector((state) => state.users?.update);
+
+  const {
+    user: propsUser,
+    listUsers,
+    updateUser: updateUserRole,
+    isUserManager,
+    roles,
+    inheritedRole,
+    userschema,
+    onDelete,
+  } = props;
+
+  // Use dispatch to call updateUser action
+  const updateUserData = (userId, userData) => {
+    dispatch(updateUser(userId, userData))
+      .then(() => {
+        // Handle success
+        setUser({});
+        if (listUsers) {
+          listUsers();
+        }
+        toast.success(
+          <Toast
+            success
+            title={intl.formatMessage(messages.success)}
+            content={intl.formatMessage(messages.updateUserSuccess)}
+          />,
+        );
+      })
+      .catch(() => {
+        // Handle error
+        toast.error(
+          <Toast
+            error
+            title={intl.formatMessage(messages.error)}
+            content={intl.formatMessage(messages.thereWereSomeErrors)}
+          />,
+        );
+      });
+  };
 
   /**
    * @param {*} event
    * @param {*} { value }
-   * @memberof UsersControlpanelUser
    */
+  const onChange = (_event, { value }) => {
+    const [userId, role] = value.split('&role=');
+    updateUserRole(userId, role);
+  };
 
-  onChange(event, { value }) {
-    const [user, role] = value.split('&role=');
-    this.props.updateUser(user, role);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (
-      prevProps.updateRequest.loading &&
-      this.props.updateRequest.loaded &&
-      this.state?.user?.id === this.props?.user?.id
-    ) {
-      this.setState({ user: {} });
-      this.props.listUsers();
-      return toast.success(
-        <Toast
-          success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.updateUserSuccess)}
-        />,
-      );
-    }
-  }
-
-  onEditUserSubmit(data, callback) {
+  const onEditUserSubmit = (data) => {
     // Do not handle groups and roles in this form
     delete data.groups;
     delete data.roles;
-    this.props.updateUserData(data.id, data);
-  }
-
-  onEditUserError() {
-    return toast.error(
-      <Toast
-        error
-        title={this.props.intl.formatMessage(messages.error)}
-        content={this.props.intl.formatMessage(
-          messages.addUserFormPasswordAndSendPasswordTogetherNotAllowed,
-        )}
-      />,
-    );
-  }
+    updateUserData(data.id, data);
+  };
 
-  onClickEdit(props) {
-    const { formData } = props;
-    this.setState({ user: { ...formData } });
-  }
+  const onClickEdit = (formProps) => {
+    const { formData } = formProps;
+    setUser({ ...formData });
+  };
 
-  canDeleteUser() {
-    if (this.props.isUserManager) return true;
-    return !this.props.user.roles.includes('Manager');
-  }
+  const canDeleteUser = () => {
+    if (isUserManager) return true;
+    return !propsUser.roles.includes('Manager');
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Table.Row key={this.props.user.username}>
-        <Table.Cell className="fullname">
-          {this.props.user.fullname
-            ? this.props.user.fullname
-            : this.props.user.username}{' '}
-          ({this.props.user.username})
+  return (
+    <Table.Row key={propsUser.username}>
+      <Table.Cell className="fullname">
+        {propsUser.fullname ? propsUser.fullname : propsUser.username} (
+        {propsUser.username})
+      </Table.Cell>
+      {roles.map((role) => (
+        <Table.Cell key={role.id}>
+          {inheritedRole && inheritedRole.includes(role.id) ? (
+            <Icon
+              name={ploneSVG}
+              size="20px"
+              color="#007EB1"
+              title={'plone-svg'}
+            />
+          ) : (
+            <Checkbox
+              checked={propsUser.roles.includes(role.id)}
+              onChange={onChange}
+              value={`${propsUser.id}&role=${role.id}`}
+              disabled={!canAssignRole(isUserManager, role)}
+            />
+          )}
         </Table.Cell>
-        {this.props.roles.map((role) => (
-          <Table.Cell key={role.id}>
-            {this.props.inheritedRole &&
-            this.props.inheritedRole.includes(role.id) ? (
-              <Icon
-                name={ploneSVG}
-                size="20px"
-                color="#007EB1"
-                title={'plone-svg'}
-              />
-            ) : (
-              <Checkbox
-                checked={this.props.user.roles.includes(role.id)}
-                onChange={this.onChange}
-                value={`${this.props.user.id}&role=${role.id}`}
-                disabled={!canAssignRole(this.props.isUserManager, role)}
-              />
-            )}
-          </Table.Cell>
-        ))}
-        <Table.Cell textAlign="right">
-          {this.canDeleteUser() && (
-            <Dropdown icon="ellipsis horizontal">
-              <Dropdown.Menu className="left">
-                {this.props.userschema && (
-                  <Dropdown.Item
-                    id="edit-user-button"
-                    onClick={() => {
-                      this.onClickEdit({ formData: this.props.user });
-                    }}
-                    value={this.props.user['@id']}
-                  >
-                    <Icon name={editSVG} size="15px" />
-                    <FormattedMessage id="Edit" defaultMessage="Edit" />
-                  </Dropdown.Item>
-                )}
+      ))}
+      <Table.Cell textAlign="right">
+        {canDeleteUser() && (
+          <Dropdown icon="ellipsis horizontal">
+            <Dropdown.Menu className="left">
+              {userschema && (
                 <Dropdown.Item
-                  id="delete-user-button"
-                  onClick={this.props.onDelete}
-                  value={this.props.user['@id']}
+                  id="edit-user-button"
+                  onClick={() => {
+                    onClickEdit({ formData: propsUser });
+                  }}
+                  value={propsUser['@id']}
                 >
-                  <Icon name={trashSVG} size="15px" />
-                  <FormattedMessage id="Delete" defaultMessage="Delete" />
+                  <Icon name={editSVG} size="15px" />
+                  <FormattedMessage id="Edit" defaultMessage="Edit" />
                 </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-          )}
-        </Table.Cell>
-        {Object.keys(this.state.user).length > 0 &&
-          this.props.userschema.loaded && (
-            <ModalForm
-              className="modal"
-              onSubmit={this.onEditUserSubmit}
-              submitError={this.state.editUserError}
-              formData={this.state.user}
-              onCancel={() => this.setState({ user: {} })}
-              title={this.props.intl.formatMessage(
-                messages.updateUserFormTitle,
               )}
-              loading={this.props.updateRequest.loading}
-              schema={this.props.userschema.userschema}
-            />
-          )}
-      </Table.Row>
-    );
-  }
-}
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      updateRequest: state.users?.update,
+              <Dropdown.Item
+                id="delete-user-button"
+                onClick={onDelete}
+                value={propsUser['@id']}
+              >
+                <Icon name={trashSVG} size="15px" />
+                <FormattedMessage id="Delete" defaultMessage="Delete" />
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </Table.Cell>
+      {Object.keys(user).length > 0 && userschema.loaded && (
+        <ModalForm
+          className="modal"
+          onSubmit={onEditUserSubmit}
+          submitError={user.editUserError}
+          formData={user}
+          onCancel={() => setUser({})}
+          title={intl.formatMessage(messages.updateUserFormTitle)}
+          loading={updateRequest.loading}
+          schema={userschema.userschema}
+        />
+      )}
+    </Table.Row>
+  );
+};
+
+// PropTypes to the component
+RenderUsers.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.string,
+    username: PropTypes.string,
+    fullname: PropTypes.string,
+    roles: PropTypes.arrayOf(PropTypes.string),
+    '@id': PropTypes.string,
+  }).isRequired,
+  roles: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
     }),
-    { updateUserData: updateUser },
-  ),
-)(RenderUsers);
+  ).isRequired,
+  onDelete: PropTypes.func.isRequired,
+  isUserManager: PropTypes.bool.isRequired,
+  listUsers: PropTypes.func,
+  updateUser: PropTypes.func.isRequired,
+  inheritedRole: PropTypes.arrayOf(PropTypes.string),
+  userschema: PropTypes.shape({
+    loaded: PropTypes.bool,
+    userschema: PropTypes.object,
+  }),
+};
+
+export default RenderUsers;

package/src/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -3,6 +3,7 @@ import { Button, Segment, Popup } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { getContentIcon } from '@plone/volto/helpers/Content/Content';
 import config from '@plone/volto/registry';
@@ -69,7 +70,7 @@ const ObjectBrowserNav = ({
                 }
               >
                 {item['@type'] === 'Image' ? (
-                  <img
+                  <Image
                     src={`${item['@id']}/@@images/image/preview`}
                     alt={item.title}
                     style={{

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Button, Grid, Message } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const TemplateChooser = ({ templates, onSelectTemplate }) => {
   const intl = useIntl();
@@ -15,7 +16,7 @@ const TemplateChooser = ({ templates, onSelectTemplate }) => {
                 className="template-chooser-item"
                 onClick={() => onSelectTemplate(index)}
               >
-                <img src={template.image} alt="" />
+                <Image src={template.image} alt="" />
                 <div className="template-chooser-title">
                   {intl.formatMessage({
                     id: template.id,

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

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { getUser } from '@plone/volto/actions/users/users';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { expandToBackendURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
@@ -96,7 +97,7 @@ const PersonalTools = (props) => {
       </header>
       <div className={cx('avatar', { default: !user.portrait })}>
         {user.portrait ? (
-          <img
+          <Image
             src={expandToBackendURL(user.portrait)}
             alt={intl.formatMessage(messages.userAvatar)}
           />

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

@@ -27,6 +27,10 @@ const messages = defineMessages({
     id: 'Time',
     defaultMessage: 'Time',
   },
+  clearDateTime: {
+    id: 'Clear date/time',
+    defaultMessage: 'Clear date and time',
+  },
 });
 
 const PrevIcon = () => (
@@ -207,6 +211,7 @@ const DatetimeWidgetComponent = (props) => {
             disabled={isDisabled || !datetime}
             onClick={onResetDates}
             className="item ui noborder button"
+            aria-label={intl.formatMessage(messages.clearDateTime)}
           >
             <Icon name={clearSVG} size="24px" className="close" />
           </button>

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

@@ -15,7 +15,6 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import Image from '@plone/volto/components/theme/Image/Image';
 import loadable from '@loadable/component';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
@@ -90,18 +89,25 @@ const FileWidget = (props) => {
   const [fileType, setFileType] = React.useState(false);
   const intl = useIntl();
 
+  const imgAttrs = React.useMemo(() => {
+    const data = {};
+    if (value?.download) {
+      data.item = {
+        '@id': value.download.substring(0, value.download.indexOf('/@@images')),
+        image: value,
+      };
+    } else if (value?.data) {
+      data.src = `data:${value['content-type']};${value.encoding},${value.data}`;
+    }
+    return data;
+  }, [value]);
+
   React.useEffect(() => {
     if (value && imageMimetypes.includes(value['content-type'])) {
       setFileType(true);
     }
   }, [value]);
 
-  const imgsrc = value?.download
-    ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
-    : null || value?.data
-      ? `data:${value['content-type']};${value.encoding},${value.data}`
-      : null;
-
   /**
    * Drop handler
    * @method onDrop
@@ -175,7 +181,7 @@ const FileWidget = (props) => {
               <Image
                 className="image-preview small ui image"
                 id={`field-${id}-image`}
-                src={imgsrc}
+                {...imgAttrs}
               />
             ) : (
               <div className="dropzone-placeholder">

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

@@ -291,7 +291,7 @@ const UnconnectedImageInput = (props) => {
       {isRelationChoice ? (
         <Image item={value} width="fit-content" height="auto" loading="lazy" />
       ) : (
-        <img
+        <Image
           className={props.className}
           src={
             isInternalURL(imageValue)
@@ -341,7 +341,7 @@ const UnconnectedImageInput = (props) => {
                   </Loader>
                 </Dimmer>
               )}
-              <img src={imageBlockSVG} alt="" className="placeholder" />
+              <Image src={imageBlockSVG} alt="" className="placeholder" />
               <p>{description || intl.formatMessage(messages.addImage)}</p>
               <div className="toolbar-wrapper">
                 <div className="toolbar-inner" ref={linkEditor.anchorNode}>

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

@@ -100,6 +100,7 @@ export const InternalUrlWidget = (props) => {
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
               aria-label="clearUrlBrowser"
@@ -115,6 +116,7 @@ export const InternalUrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
               aria-label="openUrlBrowser"