@plone/volto 18.0.0-alpha.35 → 18.0.0-alpha.37

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

@@ -3,256 +3,57 @@
  * @module components/manage/Blocks/Image/Edit
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { readAsDataURL } from 'promise-file-reader';
-import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
-import cx from 'classnames';
-import { isEqual } from 'lodash';
 
-import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
+import { injectIntl } from 'react-intl';
+import cx from 'classnames';
+import { ImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
+
 import {
   flattenToAppURL,
-  getBaseUrl,
   isInternalURL,
   withBlockExtensions,
-  validateFileUploadSize,
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-import uploadSVG from '@plone/volto/icons/upload.svg';
-
-const Dropzone = loadable(() => import('react-dropzone'));
-
-const messages = defineMessages({
-  ImageBlockInputPlaceholder: {
-    id: 'Browse the site, drop an image, or type an URL',
-    defaultMessage: 'Browse the site, drop an image, or type an URL',
-  },
-  uploadingImage: {
-    id: 'Uploading image',
-    defaultMessage: 'Uploading image',
-  },
-});
+import { ImageInput } from '@plone/volto/components/manage/Widgets/ImageWidget';
 
 /**
- * Edit image block class.
- * @class Edit
- * @extends Component
+ * Edit image block function.
+ * @function Edit
  */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any),
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-    createContent: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
 
-  state = {
-    uploading: false,
-    url: '',
-    dragging: false,
-  };
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Update block data after upload finished
-    if (
-      this.props.request.loading &&
-      nextProps.request.loaded &&
-      this.state.uploading
-    ) {
-      this.setState({
-        uploading: false,
-      });
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        url: nextProps.content['@id'],
-        image_field: 'image',
-        image_scales: { image: [nextProps.content.image] },
-        alt: '',
+// const messages = defineMessages({
+//   notImage: {
+//     id: 'The provided link does not lead to an image.',
+//     defaultMessage: 'The provided link does not lead to an image.',
+//   },
+// });
+
+function Edit(props) {
+  const { data } = props;
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  const handleChange = React.useCallback(
+    async (id, image, { title, image_field, image_scales } = {}) => {
+      const url = image ? image['@id'] || image : '';
+
+      props.onChangeBlock(props.block, {
+        ...props.data,
+        url: flattenToAppURL(url),
+        image_field,
+        image_scales,
+        alt: props.data.alt || title || '',
       });
-    }
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  /**
-   * Upload image handler (not used), but useful in case that we want a button
-   * not powered by react-dropzone
-   * @method onUploadImage
-   * @returns {undefined}
-   */
-  onUploadImage = (e) => {
-    e.stopPropagation();
-    const file = e.target.files[0];
-    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
-    this.setState({
-      uploading: true,
-    });
-    readAsDataURL(file).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: file.name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: file.name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
+    },
+    [props],
+  );
 
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl = ({ target }) => {
-    this.setState({
-      url: target.value,
-    });
-  };
-
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @param {object} e Event
-   * @returns {undefined}
-   */
-  onSubmitUrl = () => {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: flattenToAppURL(this.state.url),
-      image_field: undefined,
-      image_scales: undefined,
-    });
-  };
-
-  /**
-   * Drop handler
-   * @method onDrop
-   * @param {array} files File objects
-   * @returns {undefined}
-   */
-  onDrop = (files) => {
-    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
-      this.setState({ dragging: false });
-      return;
-    }
-    this.setState({ uploading: true });
-
-    readAsDataURL(files[0]).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: files[0].name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: files[0].name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
-
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
-   * @method onKeyDownVariantMenuForm
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDownVariantMenuForm = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmitUrl();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      // TODO: Do something on ESC key
-    }
-  };
-  onDragEnter = () => {
-    this.setState({ dragging: true });
-  };
-  onDragLeave = () => {
-    this.setState({ dragging: false });
-  };
-
-  node = React.createRef();
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const Image = config.getComponent({ name: 'Image' }).component;
-    const { data } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
-
-    return (
+  return (
+    <>
       <div
         className={cx(
           'block image align',
@@ -303,123 +104,20 @@ class Edit extends Component {
             responsive={true}
           />
         ) : (
-          <div>
-            {this.props.editable && (
-              <Dropzone
-                noClick
-                onDrop={this.onDrop}
-                onDragEnter={this.onDragEnter}
-                onDragLeave={this.onDragLeave}
-                className="dropzone"
-              >
-                {({ getRootProps, getInputProps }) => (
-                  <div {...getRootProps()}>
-                    <Message>
-                      {this.state.dragging && <Dimmer active></Dimmer>}
-                      {this.state.uploading && (
-                        <Dimmer active>
-                          <Loader indeterminate>
-                            {this.props.intl.formatMessage(
-                              messages.uploadingImage,
-                            )}
-                          </Loader>
-                        </Dimmer>
-                      )}
-                      <div className="no-image-wrapper">
-                        <img src={imageBlockSVG} alt="" />
-                        <div className="toolbar-inner">
-                          <Button.Group>
-                            <Button
-                              basic
-                              icon
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                this.props.openObjectBrowser({
-                                  onSelectItem: (
-                                    url,
-                                    { title, image_field, image_scales },
-                                  ) => {
-                                    this.props.onChangeBlock(this.props.block, {
-                                      ...this.props.data,
-                                      url,
-                                      image_field,
-                                      image_scales,
-                                      alt: this.props.data.alt || title || '',
-                                    });
-                                  },
-                                });
-                              }}
-                            >
-                              <Icon name={navTreeSVG} size="24px" />
-                            </Button>
-                          </Button.Group>
-                          <Button.Group>
-                            <label className="ui button basic icon">
-                              <Icon name={uploadSVG} size="24px" />
-                              <input
-                                {...getInputProps({
-                                  type: 'file',
-                                  onChange: this.onUploadImage,
-                                  style: { display: 'none' },
-                                })}
-                              />
-                            </label>
-                          </Button.Group>
-                          <Input
-                            onKeyDown={this.onKeyDownVariantMenuForm}
-                            onChange={this.onChangeUrl}
-                            placeholder={placeholder}
-                            value={this.state.url}
-                            onClick={(e) => {
-                              e.target.focus();
-                            }}
-                            onFocus={(e) => {
-                              this.props.onSelectBlock(this.props.id);
-                            }}
-                          />
-                          {this.state.url && (
-                            <Button.Group>
-                              <Button
-                                basic
-                                className="cancel"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  this.setState({ url: '' });
-                                }}
-                              >
-                                <Icon name={clearSVG} size="30px" />
-                              </Button>
-                            </Button.Group>
-                          )}
-                          <Button.Group>
-                            <Button
-                              basic
-                              primary
-                              disabled={!this.state.url}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                this.onSubmitUrl();
-                              }}
-                            >
-                              <Icon name={aheadSVG} size="30px" />
-                            </Button>
-                          </Button.Group>
-                        </div>
-                      </div>
-                    </Message>
-                  </div>
-                )}
-              </Dropzone>
-            )}
-          </div>
+          <ImageInput
+            onChange={handleChange}
+            placeholderLinkInput={data.placeholder}
+            block={props.block}
+            id={props.block}
+            objectBrowserPickerType={'image'}
+          />
         )}
-        <SidebarPortal selected={this.props.selected}>
-          <ImageSidebar {...this.props} />
+        <SidebarPortal selected={props.selected}>
+          <ImageSidebar {...props} />
         </SidebarPortal>
       </div>
-    );
-  }
+    </>
+  );
 }
 
 export default compose(

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

@@ -1,10 +1,18 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
+import { toast } from 'react-toastify';
+import { Icon, Toast } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import {
+  flattenToAppURL,
+  messages as defaultMessages,
+} from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
 import { isEmpty } from 'lodash';
 
+import reloadSVG from '@plone/volto/icons/reload.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
@@ -12,11 +20,20 @@ const messages = defineMessages({
     id: 'Reset the block',
     defaultMessage: 'Reset the block',
   },
+  refreshTeaser: {
+    id: 'Refresh source content',
+    defaultMessage: 'Refresh source content',
+  },
+  invalidTeaser: {
+    id: 'Invalid teaser source',
+    defaultMessage: 'Invalid teaser source',
+  },
 });
 
 const TeaserData = (props) => {
   const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
     props;
+  const dispatch = useDispatch();
   const intl = useIntl();
 
   const reset = () => {
@@ -29,6 +46,64 @@ const TeaserData = (props) => {
     });
   };
 
+  const dataTransformer = (resp, data) => {
+    let hrefData = {
+      '@id': flattenToAppURL(resp['@id']),
+      '@type': resp?.['@type'],
+      Description: resp?.description,
+      Title: resp.title,
+      hasPreviewImage: resp?.preview_image ? true : false,
+      head_title: resp.head_title ?? null,
+      image_field: resp?.preview_image
+        ? 'preview_image'
+        : resp?.image
+          ? 'image'
+          : null,
+      image_scales: {
+        preview_image: [resp?.preview_image],
+        image: [resp?.image],
+      },
+      title: resp.title,
+    };
+    let blockData = {
+      '@type': data['@type'],
+      description: resp?.description,
+      head_title: resp?.head_title,
+      overwrite: data.overwrite,
+      href: [hrefData],
+      styles: data.styles,
+      title: resp.title,
+    };
+    return blockData;
+  };
+
+  const refresh = () => {
+    if (data.href?.[0]?.['@id']) {
+      dispatch(
+        getContent(
+          flattenToAppURL(data.href[0]['@id']),
+          null,
+          `${block}-teaser`,
+        ),
+      )
+        .then((resp) => {
+          if (resp) {
+            let blockData = dataTransformer(resp, data);
+            onChangeBlock(block, blockData);
+          }
+        })
+        .catch((e) => {
+          toast.error(
+            <Toast
+              error
+              title={props.intl.formatMessage(defaultMessages.error)}
+              content={props.intl.formatMessage(messages.invalidTeaser)}
+            />,
+          );
+        });
+    }
+  };
+
   const isReseteable =
     isEmpty(data.href) && !data.title && !data.description && !data.head_title;
 
@@ -45,7 +120,24 @@ const TeaserData = (props) => {
     </Button.Group>
   );
 
-  const schema = blocksConfig[data['@type']].blockSchema({ intl });
+  const ActionButton = (
+    <Button.Group className="refresh teaser">
+      <Button
+        aria-label={intl.formatMessage(messages.refreshTeaser)}
+        basic
+        onClick={() => refresh()}
+        disabled={isEmpty(data.href)}
+      >
+        {intl.formatMessage(messages.refreshTeaser)}
+        <Icon name={reloadSVG} size="20px" color="#00000099" />
+      </Button>
+    </Button.Group>
+  );
+
+  const schema = blocksConfig[data['@type']].blockSchema({
+    data,
+    intl,
+  });
   const dataAdapter = blocksConfig[data['@type']].dataAdapter;
 
   return (
@@ -66,6 +158,7 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      actionButton={data.overwrite && ActionButton}
       navRoot={navRoot}
       contentType={contentType}
     />

package/src/components/manage/Blocks/Teaser/schema.js

@@ -34,16 +34,31 @@ const messages = defineMessages({
     id: 'Alignment',
     defaultMessage: 'Alignment',
   },
+  overwrite: {
+    id: 'Customize teaser content',
+    defaultMessage: 'Customize teaser content',
+  },
+  overwriteDescription: {
+    id: 'Check this box to customize the title, description, or image of the target content item for this teaser. Leave it unchecked to show updates to the target content item if it is edited later.',
+    defaultMessage:
+      'Check this box to customize the title, description, or image of the target content item for this teaser. Leave it unchecked to show updates to the target content item if it is edited later.',
+  },
 });
 
-export const TeaserSchema = ({ intl }) => {
+export const TeaserSchema = ({ data, intl }) => {
   const schema = {
     title: intl.formatMessage(messages.teaser),
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['href', 'title', 'head_title', 'description', 'preview_image'],
+        fields: [
+          'href',
+          'overwrite',
+          ...(data?.overwrite
+            ? ['title', 'head_title', 'description', 'preview_image']
+            : []),
+        ],
       },
     ],
 
@@ -63,6 +78,12 @@ export const TeaserSchema = ({ intl }) => {
         ],
         allowExternals: true,
       },
+      overwrite: {
+        title: intl.formatMessage(messages.overwrite),
+        description: intl.formatMessage(messages.overwriteDescription),
+        type: 'boolean',
+        default: false,
+      },
       title: {
         title: intl.formatMessage(messages.title),
       },
@@ -85,7 +106,7 @@ export const TeaserSchema = ({ intl }) => {
         type: 'boolean',
       },
     },
-    required: [],
+    required: ['href'],
   };
 
   addStyling({ schema, intl });

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

@@ -48,8 +48,10 @@ import {
   Button,
   Form,
   Input,
+  Loader,
   Segment,
   Table,
+  Dimmer,
 } from 'semantic-ui-react';
 
 /**
@@ -161,6 +163,12 @@ class GroupsControlpanel extends Component {
     ) {
       this.props.listGroups(this.state.search);
     }
+    if (
+      this.props.deleteGroupRequest.loading &&
+      nextProps.deleteGroupRequest.loaded
+    ) {
+      this.onDeleteGroupSuccess();
+    }
     if (
       this.props.createGroupRequest.loading &&
       nextProps.createGroupRequest.loaded
@@ -246,10 +254,6 @@ class GroupsControlpanel extends Component {
   onDeleteOk() {
     if (this.state.groupToDelete) {
       this.props.deleteGroup(this.state.groupToDelete.id);
-      this.setState({
-        showDelete: false,
-        groupToDelete: undefined,
-      });
     }
   }
 
@@ -262,6 +266,7 @@ class GroupsControlpanel extends Component {
     this.setState({
       showDelete: false,
       itemsToDelete: [],
+      groupToDelete: undefined,
     });
   }
 
@@ -367,6 +372,25 @@ class GroupsControlpanel extends Component {
     );
   }
 
+  /**
+   * Handle Success after deleteGroup()
+   *
+   * @returns {undefined}
+   */
+  onDeleteGroupSuccess() {
+    this.setState({
+      groupToDelete: undefined,
+      showDelete: false,
+    });
+    toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.success)}
+        content={this.props.intl.formatMessage(messages.groupDeleted)}
+      />,
+    );
+  }
+
   /**
    * On change page
    * @method onChangePage
@@ -409,6 +433,12 @@ class GroupsControlpanel extends Component {
             )}
             content={
               <div className="content">
+                <Dimmer active={this?.props?.deleteGroupRequest?.loading}>
+                  <Loader>
+                    <FormattedMessage id="Loading" defaultMessage="Loading." />
+                  </Loader>
+                </Dimmer>
+
                 <ul className="content">
                   <FormattedMessage
                     id="Do you really want to delete the group {groupname}?"