@plone/volto 19.0.0-alpha.4 → 19.0.0-alpha.6

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/Form/InlineForm.jsx

@@ -158,7 +158,7 @@ const InlineForm = (props) => {
                 onChangeField(id, value, itemInfo);
               }}
               key={field}
-              error={errors?.[block]?.[field] || {}}
+              error={errors?.[block]?.[field] || []}
               block={block}
             />
           ))}
@@ -199,7 +199,7 @@ const InlineForm = (props) => {
                         onChangeField(id, value);
                       }}
                       key={field}
-                      error={errors?.[block]?.[field] || {}}
+                      error={errors?.[block]?.[field] || []}
                       block={block}
                     />
                   ))}

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