@plone/volto 18.32.0 → 18.32.2

package/src/components/manage/Blocks/Block/Order/utilities.js

@@ -34,27 +34,44 @@ export function getProjection(
     depth = minDepth;
   }
 
-  return { depth, maxDepth, minDepth, parentId: getParentId() };
+  return { depth, maxDepth, minDepth, ...getParent() };
 
-  function getParentId() {
+  function getParent() {
     if (depth === 0 || !previousItem) {
-      return null;
+      return {
+        parentId: null,
+        parentType: null,
+      };
     }
 
     if (depth <= previousItem.depth) {
-      return previousItem.parentId;
+      return {
+        parentId: previousItem.parentId,
+        parentType: previousItem.parentType,
+      };
     }
 
     if (depth > previousItem.depth) {
-      return previousItem.id;
+      return {
+        parentId: previousItem.id,
+        parentType: previousItem.data?.['@type'] || null,
+      };
     }
 
     const newParent = newItems
       .slice(0, overItemIndex)
       .reverse()
-      .find((item) => item.depth === depth)?.parentId;
-
-    return newParent ?? null;
+      .find((item) => item.depth === depth);
+
+    return newParent
+      ? {
+          parentId: newParent.parentId,
+          parentType: newParent.parentType,
+        }
+      : {
+          parentId: null,
+          parentType: null,
+        };
   }
 }
 
@@ -79,12 +96,12 @@ function getMinDepth({ nextItem }) {
   return 0;
 }
 
-function flatten(items = [], parentId = null, depth = 0) {
+function flatten(items = [], parentId = null, parentType = null, depth = 0) {
   return items.reduce((acc, item, index) => {
     return [
       ...acc,
-      { ...item, parentId, depth, index },
-      ...flatten(item.children, item.id, depth + 1),
+      { ...item, parentId, parentType, depth, index },
+      ...flatten(item.children, item.id, item.data?.['@type'], depth + 1),
     ];
   }, []);
 }

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

@@ -50,6 +50,7 @@ const Edit = React.memo(
   function areEquals(prevProps, nextProps) {
     return !(
       nextProps.selected !== prevProps.selected ||
+      nextProps.index !== prevProps.index ||
       !isEqual(prevProps.data, nextProps.data)
     );
   },

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

@@ -169,7 +169,7 @@ class ContentTypeSchema extends Component {
           error
           title={this.props.intl.formatMessage(messages.error)}
           content={JSON.stringify(
-            nextProps.schemaRequest.put.error.response.body ||
+            nextProps.schemaRequest.put.error.response.body?.message ||
               nextProps.schemaRequest.put.error.response.text,
           )}
         />,

package/src/components/manage/Sharing/Sharing.jsx

@@ -485,11 +485,19 @@ class SharingComponent extends Component {
                   />
                 </p>
               </Segment>
-              <Segment className="actions" attached clearing>
+              <Segment className="right aligned actions" attached clearing>
+                <Button
+                  basic
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
                 <Button
                   basic
                   primary
-                  floated="right"
                   type="submit"
                   aria-label={this.props.intl.formatMessage(messages.save)}
                   title={this.props.intl.formatMessage(messages.save)}
@@ -498,16 +506,6 @@ class SharingComponent extends Component {
                 >
                   <Icon className="circled" name={aheadSVG} size="30px" />
                 </Button>
-                <Button
-                  basic
-                  secondary
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  onClick={this.onCancel}
-                >
-                  <Icon className="circled" name={clearSVG} size="30px" />
-                </Button>
               </Segment>
             </Form>
           </Plug>

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

@@ -144,10 +144,14 @@ class ObjectBrowserBody extends Component {
       showSearchInput: false,
       // In image mode, the searchable types default to the image types which
       // can be overridden with the property if specified.
+      // If selectableTypes are passed, the searchableTypes are the selectableTypes
       searchableTypes:
         this.props.mode === 'image'
           ? this.props.searchableTypes || config.settings.imageObjects
-          : this.props.searchableTypes,
+          : [
+              ...(this.props.searchableTypes ?? []),
+              ...(this.props.selectableTypes ?? []),
+            ],
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -89,6 +89,22 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('check UniversalLink append http when user has not entered the protocol', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href="www.github.com" title="Volto GitHub repository">
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('href')).toBe(
+      'http://www.github.com',
+    );
+  });
+
   it('check UniversalLink set target attribute for ext links', () => {
     const { getByTitle } = render(
       <Provider store={store}>

package/src/components/manage/UniversalLink/UniversalLink.tsx

@@ -122,6 +122,7 @@ const UniversalLink = React.memo(
         onClick,
         onKeyDown,
         item,
+        href,
         ...rest
       } = props;
       __test.renderCounter();

package/src/components/theme/App/App.jsx

@@ -174,7 +174,9 @@ export class App extends Component {
             <main ref={this.mainRef}>
               <OutdatedBrowser />
               {this.props.connectionRefused ? (
-                <ConnectionRefusedView />
+                <ConnectionRefusedView
+                  staticContext={this.props.staticContext}
+                />
               ) : this.state.hasError ? (
                 <Error
                   message={this.state.error.message}

package/src/components/theme/ConnectionRefused/ConnectionRefused.jsx

@@ -1,5 +1,5 @@
 /**
- * Home container.
+ * Connection refused error page.
  * @module components/theme/ConnectionRefused/ConnectionRefused
  */
 
@@ -7,6 +7,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 
 const ConnectionRefused = () => (
   <Container
@@ -71,4 +72,4 @@ const ConnectionRefused = () => (
   </Container>
 );
 
-export default ConnectionRefused;
+export default withServerErrorCode(503)(ConnectionRefused);

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -3,14 +3,12 @@
  * @module components/theme/PasswordReset/PasswordReset
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link, withRouter } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { Container } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Form } from '@plone/volto/components/manage/Form';
 import { setInitialPassword } from '@plone/volto/actions/users/users';
@@ -90,220 +88,139 @@ const messages = defineMessages({
 });
 
 /**
- * PasswordReset class.
- * @class PasswordReset
- * @extends Component
+ * @function PasswordReset
+ * @returns {JSX.Element}
  */
-class PasswordReset extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    loading: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    error: PropTypes.string,
-    token: PropTypes.string.isRequired,
-    setInitialPassword: PropTypes.func.isRequired,
-  };
+function PasswordReset() {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { token } = useParams();
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-  };
+  const loading = useSelector((state) => state.users.initial.loading);
+  const loaded = useSelector((state) => state.users.initial.loaded);
+  const error = useSelector((state) => state.users.initial.error);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Controlpanel
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      error: null,
-      isSuccessful: false,
-    };
+  const [localError, setLocalError] = useState(null);
+  const [isSuccessful, setIsSuccessful] = useState(false);
+  const intl = useIntl();
 
-    this.identifierField = config.settings.useEmailAsLogin
-      ? 'email'
-      : 'username';
+  const identifierField = config.settings.useEmailAsLogin
+    ? 'email'
+    : 'username';
 
-    this.identifierTitle =
-      this.identifierField === 'email'
-        ? this.props.intl.formatMessage(messages.emailTitle)
-        : this.props.intl.formatMessage(messages.usernameTitle);
+  const identifierTitle =
+    identifierField === 'email'
+      ? intl.formatMessage(messages.emailTitle)
+      : intl.formatMessage(messages.usernameTitle);
 
-    this.identifierDescription =
-      this.identifierField === 'email'
-        ? this.props.intl.formatMessage(messages.emailDescription)
-        : this.props.intl.formatMessage(messages.usernameDescription);
-  }
+  const identifierDescription =
+    identifierField === 'email'
+      ? intl.formatMessage(messages.emailDescription)
+      : intl.formatMessage(messages.usernameDescription);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.loading && nextProps.loaded) {
-      this.setState({ isSuccessful: true });
+  useEffect(() => {
+    if (!loading && loaded) {
+      setIsSuccessful(true);
     }
-  }
+  }, [loading, loaded]);
 
   /**
    * Submit handler
    * @method onSubmit
    * @param {object} data Form data.
-   * @param {object} event Form data.
    * @returns {undefined}
    */
-  onSubmit(data) {
+  const onSubmit = (data) => {
     if (data.password === data.passwordRepeat) {
-      this.props.setInitialPassword(
-        data[this.identifierField],
-        this.props.token,
-        data.password,
-      );
-      this.setState({
-        error: null,
-      });
+      dispatch(setInitialPassword(data[identifierField], token, data.password));
+      setLocalError(null);
     } else {
-      this.setState({
-        error: {
-          message: this.props.intl.formatMessage(messages.passwordsDoNotMatch),
-        },
+      setLocalError({
+        message: intl.formatMessage(messages.passwordsDoNotMatch),
       });
     }
-  }
+  };
 
   /**
    * Cancel handler
    * @method onCancel
    * @returns {undefined}
    */
-  onCancel() {
-    this.props.history.goBack();
+  const onCancel = () => {
+    history.goBack();
+  };
+
+  if (isSuccessful) {
+    return (
+      <Container>
+        <h1 className="documentFirstHeading">
+          <FormattedMessage {...messages.successRedirectToLoginTitle} />
+        </h1>
+        <p className="description">
+          <FormattedMessage
+            {...messages.successRedirectToLoginBody}
+            values={{
+              link: (
+                <Link to="/login">{intl.formatMessage({ id: 'Log In' })}</Link>
+              ),
+            }}
+          />
+        </p>
+      </Container>
+    );
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.state.isSuccessful) {
-      return (
+  if (token) {
+    const errmsg = error ? error.response?.body?.error || error : null;
+    return (
+      <div id="page-password-reset">
+        <Helmet title={intl.formatMessage(messages.passwordReset)} />
         <Container>
-          <h1 className="documentFirstHeading">
-            <FormattedMessage
-              id="Account activation completed"
-              defaultMessage="Account activation completed"
-            />
-          </h1>
-          <p className="description">
-            <FormattedMessage
-              id="Your password has been set successfully. You may now {link} with your new password."
-              defaultMessage="Your password has been set successfully. You may now {link} with your new password."
-              values={{
-                link: (
-                  <Link to="/login">
-                    {this.props.intl.formatMessage({ id: 'Log In' })}
-                  </Link>
-                ),
-              }}
-            />
-          </p>
-        </Container>
-      );
-    }
-    if (this.props.token) {
-      const errmsg = this.props.error
-        ? this.props.error.response.body.error
-        : null;
-      return (
-        <div id="page-password-reset">
-          <Helmet
-            title={this.props.intl.formatMessage(messages.passwordReset)}
-          />
-          <Container>
-            <Form
-              title={this.props.intl.formatMessage(messages.title)}
-              description={this.props.intl.formatMessage(messages.description)}
-              onSubmit={this.onSubmit}
-              onCancel={this.onCancel}
-              error={this.state.error || errmsg}
-              schema={{
-                fieldsets: [
-                  {
-                    id: 'default',
-                    title: this.props.intl.formatMessage(messages.default),
-                    fields: [
-                      this.identifierField,
-                      'password',
-                      'passwordRepeat',
-                    ],
-                  },
-                ],
-                properties: {
-                  [this.identifierField]: {
-                    type: 'string',
-                    title: this.identifierTitle,
-                    description: this.identifierDescription,
-                  },
-                  password: {
-                    description: this.props.intl.formatMessage(
-                      messages.passwordDescription,
-                    ),
-                    title: this.props.intl.formatMessage(
-                      messages.passwordTitle,
-                    ),
-                    type: 'string',
-                    widget: 'password',
-                  },
-                  passwordRepeat: {
-                    description: this.props.intl.formatMessage(
-                      messages.passwordRepeatDescription,
-                    ),
-                    title: this.props.intl.formatMessage(
-                      messages.passwordRepeatTitle,
-                    ),
-                    type: 'string',
-                    widget: 'password',
-                  },
+          <Form
+            title={intl.formatMessage(messages.title)}
+            description={intl.formatMessage(messages.description)}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+            error={localError || errmsg}
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: intl.formatMessage(messages.default),
+                  fields: [identifierField, 'password', 'passwordRepeat'],
                 },
-                submitLabel: this.props.intl.formatMessage(
-                  messages.setMyPassword,
-                ),
-                required: [this.identifierField, 'password', 'passwordRepeat'],
-              }}
-            />
-          </Container>
-        </div>
-      );
-    }
-    return <div />;
+              ],
+              properties: {
+                [identifierField]: {
+                  type: 'string',
+                  title: identifierTitle,
+                  description: identifierDescription,
+                },
+                password: {
+                  description: intl.formatMessage(messages.passwordDescription),
+                  title: intl.formatMessage(messages.passwordTitle),
+                  type: 'string',
+                  widget: 'password',
+                },
+                passwordRepeat: {
+                  description: intl.formatMessage(
+                    messages.passwordRepeatDescription,
+                  ),
+                  title: intl.formatMessage(messages.passwordRepeatTitle),
+                  type: 'string',
+                  widget: 'password',
+                },
+              },
+              submitLabel: intl.formatMessage(messages.setMyPassword),
+              required: [identifierField, 'password', 'passwordRepeat'],
+            }}
+          />
+        </Container>
+      </div>
+    );
   }
+
+  return <div />;
 }
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      loading: state.users.initial.loading,
-      loaded: state.users.initial.loaded,
-      error: state.users.initial.error,
-      token: props.match.params.token,
-    }),
-    { setInitialPassword },
-  ),
-)(PasswordReset);
+export default PasswordReset;

package/src/components/theme/View/RenderBlocks.jsx

@@ -5,8 +5,7 @@ import map from 'lodash/map';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import {
   applyBlockDefaults,
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
+  getBlocks,
   hasBlocksData,
 } from '@plone/volto/helpers/Blocks/Blocks';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
@@ -28,26 +27,25 @@ const messages = defineMessages({
 const RenderBlocks = (props) => {
   const { blockWrapperTag, content, location, isContainer, metadata } = props;
   const intl = useIntl();
-  const blocksFieldname = getBlocksFieldname(content);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
   const CustomTag = props.as || React.Fragment;
 
+  const blockList = getBlocks(content);
+
   return hasBlocksData(content) ? (
     <CustomTag>
-      {map(content[blocksLayoutFieldname].items, (block) => {
+      {map(blockList, ([block, rawBlockData]) => {
         const Block =
-          blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view ||
-          ViewDefaultBlock;
+          blocksConfig[rawBlockData?.['@type']]?.view || ViewDefaultBlock;
 
         const blockData = applyBlockDefaults({
-          data: content[blocksFieldname][block],
+          data: rawBlockData,
           intl,
           metadata,
           properties: content,
         });
 
-        if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+        if (rawBlockData?.['@type'] === 'empty') {
           return (
             <MaybeWrap
               key={block}
@@ -91,7 +89,7 @@ const RenderBlocks = (props) => {
           return (
             <div key={block}>
               {intl.formatMessage(messages.unknownBlock, {
-                block: content[blocksFieldname]?.[block]?.['@type'],
+                block: rawBlockData?.['@type'],
               })}
             </div>
           );

package/src/components/theme/View/RenderBlocks.test.jsx

@@ -90,14 +90,14 @@ test('Provides path to blocks', () => {
   expect(container).toMatchSnapshot();
 });
 
-test('Renders invalid blocks', () => {
+test('Filters out invalid blocks', () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const { queryAllByText } = render(
+  const { queryAllByText, queryByText } = render(
     <Provider store={store}>
       <RenderBlocks
         blocksConfig={{
@@ -113,7 +113,14 @@ test('Renders invalid blocks', () => {
         }}
         content={{
           blocks_layout: {
-            items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+            items: [
+              'MISSING-YOU-1',
+              'a',
+              'MISSING-YOU-2',
+              null,
+              undefined,
+              'undefined',
+            ],
           },
           blocks: {
             a: {
@@ -126,7 +133,10 @@ test('Renders invalid blocks', () => {
       />
     </Provider>,
   );
+  // Invalid blocks (missing from blocks object or invalid IDs) are filtered out and not rendered
   expect(
     queryAllByText('Invalid block - Will be removed on saving'),
-  ).toHaveLength(2);
+  ).toHaveLength(0);
+  // Only valid blocks are rendered
+  expect(queryByText('id: a - text: bar - path: /foo')).not.toBeNull();
 });

package/src/config/index.js

@@ -119,7 +119,7 @@ let config = {
     defaultBlockType: 'slate',
     verticalFormTabs: false,
     useEmailAsLogin: false,
-    persistentReducers: ['blocksClipboard'],
+    persistentReducers: ['blocksClipboard.cut', 'blocksClipboard.copy'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
     asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
     contentIcons: contentIcons,