@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.22

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

@@ -1,14 +1,8 @@
-/**
- * Edit map block.
- * @module components/manage/Blocks/Maps/Edit
- */
-
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Input, Message } from 'semantic-ui-react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
 import { withBlockExtensions } from '@plone/volto/helpers';
 import { compose } from 'redux';
 import { Icon, SidebarPortal, MapsSidebar } from '@plone/volto/components';
@@ -43,230 +37,162 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit image block class.
- * @class Edit
- * @extends Component
- */
-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,
-    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,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.getSrc = this.getSrc.bind(this);
-    this.state = {
-      url: '',
-      error: null,
-    };
-    this.onSubmitUrl = this.onSubmitUrl.bind(this);
-    this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
+const Edit = React.memo((props) => {
+  const intl = useIntl();
+  const [url, setUrl] = useState('');
+  const [error, setError] = useState(null);
 
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl = ({ target }) => {
-    this.setState({
-      url: target.value,
-    });
+  const { onChangeBlock, data, block, selected } = props;
+  const onChangeUrl = ({ target }) => {
+    setUrl(target.value);
   };
 
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @param {string} e event
-   * @returns {undefined}
-   */
-  onSubmitUrl() {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: this.getSrc(this.state.url),
+  const onSubmitUrl = useCallback(() => {
+    onChangeBlock(block, {
+      ...data,
+      url: getSrc(url),
     });
-  }
+  }, [onChangeBlock, block, data, url]);
 
-  /**
-   * 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
-    }
-  }
+  const onKeyDownVariantMenuForm = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmitUrl();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // TODO: Do something on ESC key
+      }
+    },
+    [onSubmitUrl],
+  );
 
-  /**
-   * get getSrc handler
-   * @method getSrc
-   * @param {string} embed Embed HTML code from Google Maps share option
-   * @returns {string} Source URL
-   */
-  getSrc(embed) {
+  const getSrc = (embed) => {
     const parser = new DOMParser();
     const doc = parser.parseFromString(embed, 'text/html');
     const iframe = doc.getElementsByTagName('iframe');
     if (iframe.length === 0) {
-      this.setState({ error: true });
+      setError(true);
       return '';
     }
-    this.setState({ error: false });
+    setError(false);
     return iframe[0].src;
-  }
+  };
 
-  resetSubmitUrl = () => {
-    this.setState({
-      url: '',
-    });
+  const resetSubmitUrl = () => {
+    setUrl('');
   };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.MapsBlockInputPlaceholder);
-    return (
-      <div
-        className={cx(
-          'block maps align',
-          {
-            center: !Boolean(this.props.data.align),
-          },
-          this.props.data.align,
-        )}
-      >
-        {this.props.data.url ? (
-          <div
-            className={cx('maps-inner', {
-              'full-width': this.props.data.align === 'full',
-            })}
-          >
-            <iframe
-              title={this.props.intl.formatMessage(
-                messages.GoogleMapsEmbeddedBlock,
-              )}
-              src={this.props.data.url}
-              className="google-map"
-              frameBorder="0"
-              allowFullScreen
-            />
-          </div>
-        ) : (
-          <Message>
-            <center>
-              <img src={mapsBlockSVG} alt="" />
-              <div className="toolbar-inner">
-                <Input
-                  onKeyDown={this.onKeyDownVariantMenuForm}
-                  onChange={this.onChangeUrl}
-                  placeholder={placeholder}
-                  value={this.state.url}
-                  // Prevents propagation to the Dropzone and the opening
-                  // of the upload browser dialog
-                  onClick={(e) => e.stopPropagation()}
-                />
-                {this.state.url && (
-                  <Button.Group>
-                    <Button
-                      basic
-                      className="cancel"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        this.setState({ url: '' });
-                      }}
-                    >
-                      <Icon name={clearSVG} size="30px" />
-                    </Button>
-                  </Button.Group>
-                )}
+  const placeholder = useMemo(
+    () =>
+      data.placeholder ||
+      intl.formatMessage(messages.MapsBlockInputPlaceholder),
+    [data, intl],
+  );
+
+  return (
+    <div
+      className={cx(
+        'block maps align',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {data.url ? (
+        <div
+          className={cx('maps-inner', {
+            'full-width': data.align === 'full',
+          })}
+        >
+          <iframe
+            title={intl.formatMessage(messages.GoogleMapsEmbeddedBlock)}
+            src={data.url}
+            className="google-map"
+            frameBorder="0"
+            allowFullScreen
+          />
+        </div>
+      ) : (
+        <Message>
+          <center>
+            <img src={mapsBlockSVG} alt="" />
+            <div className="toolbar-inner">
+              <Input
+                onKeyDown={onKeyDownVariantMenuForm}
+                onChange={onChangeUrl}
+                placeholder={placeholder}
+                value={url}
+                // Prevents propagation to the Dropzone and the opening
+                // of the upload browser dialog
+                onClick={(e) => e.stopPropagation()}
+              />
+              {url && (
                 <Button.Group>
                   <Button
                     basic
-                    primary
+                    className="cancel"
                     onClick={(e) => {
                       e.stopPropagation();
-                      this.onSubmitUrl();
+                      setUrl('');
                     }}
                   >
-                    <Icon name={aheadSVG} size="30px" />
+                    <Icon name={clearSVG} size="30px" />
                   </Button>
                 </Button.Group>
-              </div>
-              <div className="message-text">
-                <FormattedMessage
-                  id="Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
-                  defaultMessage="Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
-                />
-                {this.state.error && (
-                  <div style={{ color: 'red' }}>
-                    <FormattedMessage
-                      id="Embed code error, please follow the instructions and try again."
-                      defaultMessage="Embed code error, please follow the instructions and try again."
-                    />
-                  </div>
-                )}
-              </div>
-            </center>
-          </Message>
-        )}
-        {!this.props.selected && <div className="map-overlay" />}
-        <SidebarPortal selected={this.props.selected}>
-          <MapsSidebar {...this.props} resetSubmitUrl={this.resetSubmitUrl} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+              )}
+              <Button.Group>
+                <Button
+                  basic
+                  primary
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSubmitUrl();
+                  }}
+                >
+                  <Icon name={aheadSVG} size="30px" />
+                </Button>
+              </Button.Group>
+            </div>
+            <div className="message-text">
+              <FormattedMessage
+                id="Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
+                defaultMessage="Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
+              />
+              {error && (
+                <div style={{ color: 'red' }}>
+                  <FormattedMessage
+                    id="Embed code error, please follow the instructions and try again."
+                    defaultMessage="Embed code error, please follow the instructions and try again."
+                  />
+                </div>
+              )}
+            </div>
+          </center>
+        </Message>
+      )}
+      {!selected && <div className="map-overlay" />}
+      <SidebarPortal selected={selected}>
+        <MapsSidebar {...props} resetSubmitUrl={resetSubmitUrl} />
+      </SidebarPortal>
+    </div>
+  );
+});
 
-export default compose(injectIntl, withBlockExtensions)(Edit);
+Edit.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).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,
+};
+export default compose(withBlockExtensions)(Edit);

package/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -9,6 +9,7 @@ import { withSearch, withQueryString } from './hocs';
 import { compose } from 'redux';
 import { useSelector } from 'react-redux';
 import { isEqual, isFunction } from 'lodash';
+import cx from 'classnames';
 
 const getListingBodyVariation = (data) => {
   const { variations } = config.blocks.blocksConfig.listing;
@@ -57,7 +58,7 @@ const applyDefaults = (data, root) => {
 };
 
 const SearchBlockView = (props) => {
-  const { id, data, searchData, mode = 'view', variation } = props;
+  const { id, data, searchData, mode = 'view', variation, className } = props;
 
   const Layout = variation.view;
 
@@ -81,7 +82,7 @@ const SearchBlockView = (props) => {
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);
 
   return (
-    <div className="block search">
+    <div className={cx('block search', selectedView, className)}>
       <Layout
         {...props}
         isEditMode={mode === 'edit'}

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

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { getTeaserImageURL } from './utils';
+import { isInternalURL } from '@plone/volto/helpers';
 import { MaybeWrap } from '@plone/volto/components';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
@@ -22,28 +21,11 @@ const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode } = props;
   const intl = useIntl();
   const href = data.href?.[0];
-  const imageOverride = data.preview_image?.[0];
-  const align = data?.styles?.align;
+  const image = data.preview_image?.[0];
 
+  const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
 
-  let renderedImage = null;
-  if (href && (imageOverride || href.hasPreviewImage || href.image_field)) {
-    let Image = config.getComponent('Image').component;
-    if (Image) {
-      // custom image component expects item summary as src
-      renderedImage = (
-        <Image src={imageOverride || href} alt="" loading="lazy" />
-      );
-    } else {
-      // default img expects string src
-      const src = flattenToAppURL(
-        getTeaserImageURL({ href, imageOverride, align }),
-      );
-      renderedImage = <img src={src} alt="" loading="lazy" />;
-    }
-  }
-
   return (
     <div className={cx('block teaser', className)}>
       <>
@@ -68,8 +50,16 @@ const TeaserDefaultTemplate = (props) => {
             }
           >
             <div className="teaser-item default">
-              {renderedImage && (
-                <div className="image-wrapper">{renderedImage}</div>
+              {(href.hasPreviewImage || href.image_field || image) && (
+                <div className="image-wrapper">
+                  <Image
+                    item={image || href}
+                    imageField={image ? image.image_field : href.image_field}
+                    alt=""
+                    loading="lazy"
+                    responsive={true}
+                  />
+                </div>
               )}
               <div className="content">
                 {data?.head_title && (

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

@@ -450,7 +450,7 @@ class Contents extends Component {
       sort_on: this.props.sort?.on || 'getObjPositionInParent',
       sort_order: this.props.sort?.order || 'ascending',
       isClient: false,
-      linkIntegrityBreakages: '',
+      linkIntegrityBreakages: [],
     };
     this.filterTimeout = null;
   }
@@ -1236,7 +1236,10 @@ class Contents extends Component {
                             Show all items
                           </Button>
                         )}
-                        {this.state.linkIntegrityBreakages.length > 0 ? (
+                        {this.state.linkIntegrityBreakages.reduce(
+                          (a, b) => a + b.breaches.length,
+                          0,
+                        ) ? (
                           <div>
                             <h3>
                               {this.props.intl.formatMessage(
@@ -1249,9 +1252,8 @@ class Contents extends Component {
                               )}
                             </p>
                             <ul className="content">
-                              {map(
-                                this.state.linkIntegrityBreakages,
-                                (item) => (
+                              {map(this.state.linkIntegrityBreakages, (item) =>
+                                item.breaches.length ? (
                                   <li key={item['@id']}>
                                     <a href={item['@id']}>{item.title}</a>
                                     <p>
@@ -1269,7 +1271,7 @@ class Contents extends Component {
                                       ))}
                                     </ul>
                                   </li>
-                                ),
+                                ) : null,
                               )}
                             </ul>
                           </div>

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

@@ -70,14 +70,6 @@ const messages = defineMessages({
     defaultMessage:
       'If selected, this item will not appear in the navigation tree',
   },
-  yes: {
-    id: 'Yes',
-    defaultMessage: 'Yes',
-  },
-  no: {
-    id: 'No',
-    defaultMessage: 'No',
-  },
 });
 
 /**
@@ -209,11 +201,7 @@ class ContentsPropertiesModal extends Component {
                 title: this.props.intl.formatMessage(
                   messages.excludeFromNavTitle,
                 ),
-                type: 'array',
-                choices: [
-                  [true, this.props.intl.formatMessage(messages.yes)],
-                  [false, this.props.intl.formatMessage(messages.no)],
-                ],
+                type: 'boolean',
               },
             },
             required: [],

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

@@ -57,7 +57,7 @@ class RenderGroups extends Component {
    * @memberof UsersControlpanelUser
    */
   onChange(event, { value }) {
-    const [group, role] = value.split('.');
+    const [group, role] = value.split('&role=');
     this.props.updateGroups(group, role);
   }
 
@@ -97,7 +97,7 @@ class RenderGroups extends Component {
                     : this.props.group.roles.includes(role.id)
                 }
                 onChange={this.onChange}
-                value={`${this.props.group.id}.${role.id}`}
+                value={`${this.props.group.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

package/src/components/manage/Controlpanels/Relations/BrokenRelations.jsx

@@ -34,15 +34,31 @@ const BrokenRelations = () => {
           <div key={relationname}>
             <Divider section hidden />
             <h4>
-              {brokenRelationStats[relationname]} broken <i>{relationname}</i>{' '}
-              relations
+              <FormattedMessage
+                id="countBrokenRelations"
+                defaultMessage="{countofrelation} broken {countofrelation, plural, one {relation} other {relations}} of type {typeofrelation}"
+                values={{
+                  countofrelation: brokenRelationStats[relationname],
+                  typeofrelation: relationname,
+                }}
+              />
             </h4>
-            <Table>
+            <Table compact="very">
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell width={6}>
+                    <FormattedMessage id="Source" defaultMessage="Source" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell>
+                    <FormattedMessage id="Target" defaultMessage="Target" />
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
               <Table.Body>
                 {uniqBy(brokenRelations[relationname].items, function (el) {
-                  return el[0];
-                }).map((el) => (
-                  <Table.Row key={el[0]}>
+                  return el.toString();
+                }).map((el, index) => (
+                  <Table.Row key={index}>
                     <Table.Cell>
                       <UniversalLink
                         href={`${flattenToAppURL(el[0])}/edit`}
@@ -51,7 +67,14 @@ const BrokenRelations = () => {
                         {flattenToAppURL(el[0])}
                       </UniversalLink>
                     </Table.Cell>
-                    <Table.Cell>{el[1]}</Table.Cell>
+                    <Table.Cell>
+                      <UniversalLink
+                        href={`${flattenToAppURL(el[1])}/edit`}
+                        openLinkInNewTab={true}
+                      >
+                        {flattenToAppURL(el[1])}
+                      </UniversalLink>
+                    </Table.Cell>
                   </Table.Row>
                 ))}
               </Table.Body>

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

@@ -63,8 +63,8 @@ const RelationsControlPanel = () => {
                   <Divider hidden />
                   <Message warning>
                     <FormattedMessage
-                      id="Please upgrade to plone.restapi >= 8.35.3."
-                      defaultMessage="Please upgrade to plone.restapi >= 8.35.3."
+                      id="Please upgrade to plone.restapi >= 8.39.0."
+                      defaultMessage="Please upgrade to plone.restapi >= 8.39.0."
                     />
                   </Message>
                 </React.Fragment>