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

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

@@ -452,68 +452,62 @@ const RelationsMatrix = (props) => {
       menuItem: intl.formatMessage(messages.fixRelations),
       pane: (
         <Tab.Pane attached={true} key="rebuild">
-          {brokenRelations && Object.keys(brokenRelations).length > 0 ? (
-            <div>
-              {can_fix_relations ? (
-                <React.Fragment>
-                  <Divider hidden />
-                  <h2>
-                    {capitalize(intl.formatMessage(messages.rebuildRelations))}
-                  </h2>
+          <div>
+            {!(brokenRelations && Object.keys(brokenRelations).length > 0) && (
+              <div>
+                <FormattedMessage
+                  id="No broken relations found."
+                  defaultMessage="No broken relations found."
+                />
+              </div>
+            )}
+            {can_fix_relations ? (
+              <React.Fragment>
+                <Divider hidden />
+                <h2>
+                  {capitalize(intl.formatMessage(messages.rebuildRelations))}
+                </h2>
 
-                  <Button.Group>
-                    <Button
-                      primary
-                      onClick={() => rebuildRelationsHandler(false)}
-                      content={intl.formatMessage(messages.rebuildRelations)}
-                      aria-label={intl.formatMessage(messages.rebuildRelations)}
-                    />
-                  </Button.Group>
+                <Button.Group>
+                  <Button
+                    primary
+                    onClick={() => rebuildRelationsHandler(false)}
+                    content={intl.formatMessage(messages.rebuildRelations)}
+                    aria-label={intl.formatMessage(messages.rebuildRelations)}
+                  />
+                </Button.Group>
 
-                  <Divider hidden />
-                  <h2>
-                    {capitalize(
-                      intl.formatMessage(messages.flushAndRebuildRelations),
+                <Divider hidden />
+                <h2>
+                  {capitalize(
+                    intl.formatMessage(messages.flushAndRebuildRelations),
+                  )}
+                </h2>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: intl.formatMessage(
+                      messages.flushAndRebuildRelationsHints,
+                    ),
+                  }}
+                />
+                <Divider hidden />
+                <Button.Group>
+                  <Button
+                    secondary
+                    color="red"
+                    onClick={() => rebuildRelationsHandler(true)}
+                    content={intl.formatMessage(
+                      messages.flushAndRebuildRelations,
                     )}
-                  </h2>
-                  <ul>
-                    <li>
-                      Regenerate intIds (tokens of relations in relation
-                      catalog)
-                    </li>
-                    <li>Rebuild relations</li>
-                  </ul>
-                  <p>Check the log for details!</p>
-                  <p>
-                    <b>Warning</b>: If you have add-ons relying on intIds, you
-                    should not flush them.
-                  </p>
-                  <Divider hidden />
-                  <Button.Group>
-                    <Button
-                      secondary
-                      color="red"
-                      onClick={() => rebuildRelationsHandler(true)}
-                      content={intl.formatMessage(
-                        messages.flushAndRebuildRelations,
-                      )}
-                      aria-label={intl.formatMessage(
-                        messages.flushAndRebuildRelations,
-                      )}
-                    />
-                  </Button.Group>
-                </React.Fragment>
-              ) : null}
-              <BrokenRelations />
-            </div>
-          ) : (
-            <div>
-              <FormattedMessage
-                id="No broken relations found."
-                defaultMessage="No broken relations found."
-              />
-            </div>
-          )}
+                    aria-label={intl.formatMessage(
+                      messages.flushAndRebuildRelations,
+                    )}
+                  />
+                </Button.Group>
+              </React.Fragment>
+            ) : null}
+            <BrokenRelations />
+          </div>
         </Tab.Pane>
       ),
     },

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

@@ -53,7 +53,7 @@ class RenderUsers extends Component {
    */
 
   onChange(event, { value }) {
-    const [user, role] = value.split('.');
+    const [user, role] = value.split('&role=');
     this.props.updateUser(user, role);
   }
   /**
@@ -83,7 +83,7 @@ class RenderUsers extends Component {
               <Checkbox
                 checked={this.props.user.roles.includes(role.id)}
                 onChange={this.onChange}
-                value={`${this.props.user.id}.${role.id}`}
+                value={`${this.props.user.id}&role=${role.id}`}
               />
             )}
           </Table.Cell>

package/src/components/manage/Delete/Delete.jsx

@@ -1,21 +1,14 @@
-/**
- * Delete container.
- * @module components/manage/Delete/Delete
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { deleteContent, getContent } from '@plone/volto/actions';
 import { Toolbar } from '@plone/volto/components';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
+import { deleteContent, getContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   delete: {
@@ -32,172 +25,104 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Delete container class.
- * @class Delete
- * @extends Component
- */
-class Delete extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    deleteContent: PropTypes.func.isRequired,
-    getContent: PropTypes.func.isRequired,
-    deleteRequest: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    content: PropTypes.shape({
-      title: PropTypes.string,
-    }),
-    returnUrl: PropTypes.string,
-  };
+const Delete = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const [isClient, setisClient] = useState(false);
+  const { pathname, search } = useLocation();
+  const history = useHistory();
+  const deleteRequest = useSelector((state) => state.content?.delete);
+  const content = useSelector((state) => state.content?.data, shallowEqual);
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    returnUrl: null,
-  };
+  const prevdeleteRequestLoading = usePrevious(deleteRequest.loading);
+  const returnUrl = qs.parse(search).return_url;
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
-  }
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  useEffect(() => {
+    dispatch(getContent(pathname.split('/delete')[0]));
+  }, [dispatch, pathname]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) {
-      this.props.history.push(
-        this.props.returnUrl ||
-          this.props.pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
+  useEffect(() => {
+    if (prevdeleteRequestLoading && deleteRequest.loaded) {
+      history.push(
+        returnUrl || pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
       );
     }
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getContent(this.props.pathname.split('/delete')[0]);
-    this.setState({ isClient: true });
-  }
+  }, [
+    history,
+    pathname,
+    returnUrl,
+    prevdeleteRequestLoading,
+    deleteRequest.loaded,
+  ]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @returns {undefined}
-   */
-  onSubmit() {
-    this.props.deleteContent(this.props.pathname.replace('/delete', ''));
-  }
+  const onSubmit = () => {
+    dispatch(deleteContent(pathname.replace('/delete', '')));
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.push(this.props.pathname.replace('/delete', ''));
-  }
+  const onCancel = () => {
+    history.push(pathname.replace('/delete', ''));
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.props.content) {
-      return (
-        <div id="page-delete">
-          <Helmet title={this.props.intl.formatMessage(messages.delete)} />
-          <Container>
-            <Segment.Group raised>
-              <Segment className="primary">
-                <FormattedMessage
-                  id="Do you really want to delete this item?"
-                  defaultMessage="Do you really want to delete this item?"
-                />
-              </Segment>
-              <Segment attached>
-                <List bulleted>
-                  <List.Item>{this.props.content.title}</List.Item>
-                </List>
-              </Segment>
-              <Segment className="actions" clearing>
-                <Button
-                  basic
-                  circular
-                  primary
-                  floated="right"
-                  icon="arrow right"
-                  aria-label={this.props.intl.formatMessage(messages.ok)}
-                  title={this.props.intl.formatMessage(messages.ok)}
-                  size="big"
-                  onClick={this.onSubmit}
-                />
-                <Button
-                  basic
-                  circular
-                  secondary
-                  icon="remove"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  size="big"
-                  onClick={this.onCancel}
-                />
-              </Segment>
-            </Segment.Group>
-          </Container>
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={<span />}
+  if (content) {
+    return (
+      <div id="page-delete">
+        <Helmet title={intl.formatMessage(messages.delete)} />
+        <Container>
+          <Segment.Group raised>
+            <Segment className="primary">
+              <FormattedMessage
+                id="Do you really want to delete this item?"
+                defaultMessage="Do you really want to delete this item?"
               />
-            </Portal>
-          )}
-        </div>
-      );
-    }
-    return <div />;
+            </Segment>
+            <Segment attached>
+              <List bulleted>
+                <List.Item>{content.title}</List.Item>
+              </List>
+            </Segment>
+            <Segment className="actions" clearing>
+              <Button
+                basic
+                circular
+                primary
+                floated="right"
+                icon="arrow right"
+                aria-label={intl.formatMessage(messages.ok)}
+                title={intl.formatMessage(messages.ok)}
+                size="big"
+                onClick={onSubmit}
+              />
+              <Button
+                basic
+                circular
+                secondary
+                icon="remove"
+                aria-label={intl.formatMessage(messages.cancel)}
+                title={intl.formatMessage(messages.cancel)}
+                floated="right"
+                size="big"
+                onClick={onCancel}
+              />
+            </Segment>
+          </Segment.Group>
+        </Container>
+        {isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={<span />}
+            />
+          </Portal>
+        )}
+      </div>
+    );
   }
-}
+  return <div />;
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      content: state.content.data,
-      deleteRequest: state.content.delete,
-      pathname: props.location.pathname,
-      returnUrl: qs.parse(props.location.search).return_url,
-    }),
-    { deleteContent, getContent },
-  ),
-)(Delete);
+export default Delete;

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

@@ -57,7 +57,7 @@ const AlignBlock = ({
   return (
     <div className="align-buttons">
       {actions.map((action) => (
-        <Button.Group>
+        <Button.Group key={action}>
           <Button
             icon
             basic

package/src/components/manage/Widgets/SelectUtils.js

@@ -111,7 +111,7 @@ export function normalizeValue(choices, value, intl) {
 
   if (Array.isArray(value)) {
     // a list of values, like ['foo', 'bar'];
-    return value.map((v) => normalizeValue(choices, v));
+    return value.map((v) => normalizeValue(choices, v, intl));
   }
 
   if (isObject(value)) {