@plone/volto 19.0.0-alpha.5 → 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/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">

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/theme/Avatar/Avatar.jsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getInitials } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const defaultSize = 30;
 const defaultColor = 'Teal';
@@ -15,7 +16,7 @@ const Avatar = ({ src, title, text, size, color, className }) => {
   return (
     <div className={className} title={title}>
       {src ? (
-        <img src={src} alt={title}></img>
+        <Image src={src} alt={title} />
       ) : (
         <svg width={size} height={size}>
           <circle cx={radius} cy={radius} r={radius} fill={color} />

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

@@ -25,7 +25,7 @@ function PreviewImage({ item, alt, image_field, showDefault = true, ...rest }) {
     return image;
   } else {
     return (
-      <img
+      <Image
         src={
           config.getComponent({
             name: 'DefaultImage',

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const niceBytes = (bytes) => {
   bytes = Number(bytes);
@@ -18,7 +19,7 @@ const niceBytes = (bytes) => {
 const ImageWidget = ({ value, className }) =>
   value ? (
     <span className={cx(className, 'image', 'widget')}>
-      <img
+      <Image
         src={
           value.data
             ? `data:${value['content-type']};base64,${value.data}`

package/src/middleware/api.js

@@ -410,7 +410,7 @@ const apiMiddlewareFactory =
                 ...rest,
                 error,
                 statusCode: error.response,
-                message: error.response.body.message,
+                message: error.response?.body?.message,
                 connectionRefused: false,
                 type: SET_APIERROR,
               });

package/theme/themes/pastanaga/extras/contents.less

@@ -107,6 +107,18 @@
       top: auto;
       bottom: 100%;
     }
+
+    .search-feedback {
+      position: absolute;
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      border: 0;
+      margin: -1px;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+    }
   }
 
   .ui.table .icon-align,

package/types/components/manage/Controlpanels/Users/RenderUsers.d.ts

@@ -1,2 +1,18 @@
-declare const _default: any;
-export default _default;
+export default RenderUsers;
+/**
+ * RenderUsers functional component.
+ * @function RenderUsers
+ */
+declare function RenderUsers(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RenderUsers {
+    namespace propTypes {
+        let user: any;
+        let roles: any;
+        let onDelete: any;
+        let isUserManager: any;
+        let listUsers: any;
+        let updateUser: any;
+        let inheritedRole: any;
+        let userschema: any;
+    }
+}

package/types/components/manage/Controlpanels/index.d.ts

@@ -5,7 +5,7 @@ export declare const AddRuleControlpanel: import("@loadable/component").Loadable
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ConfigureRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const UsersControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const RenderUsers: import("@loadable/component").LoadableClassComponent<any>;
+export declare const RenderUsers: import("@loadable/component").LoadableComponent<any>;
 export declare const UserGroupMembershipControlPanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const GroupsControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RenderGroups: import("@loadable/component").LoadableComponent<any>;