@plone/volto 19.0.0-alpha.26 → 19.0.0-alpha.28

package/src/components/manage/Toolbar/Types.crash.test.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import thunk from 'redux-thunk';
+
+import Types from './Types';
+
+const mockStore = configureStore([thunk]);
+
+describe('Types Defensive', () => {
+  it('does not crash when a language is missing from langmap', () => {
+    const store = mockStore({
+      site: {
+        data: {
+          'plone.available_languages': ['en', 'fr_HT'], // fr_HT is missing from langmap
+        },
+      },
+      types: { types: [{ title: 'Document' }] },
+      content: {
+        data: {
+          '@id': '/test',
+          '@type': 'Document',
+          language: { token: 'en' },
+          '@components': {
+            translations: { items: [] },
+          },
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {
+        token: 'thetoken',
+      },
+    });
+
+    // This should not throw TypeError: Cannot read properties of undefined (reading 'nativeName')
+    const component = renderer.create(
+      <Provider store={store}>
+        <Types pathname="/test" active />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toBeDefined();
+  });
+});

package/src/components/manage/Widgets/FileWidget.jsx

@@ -59,6 +59,10 @@ const messages = defineMessages({
     id: 'File is not of the accepted type {accept}',
     defaultMessage: 'File is not of the accepted type {accept}',
   },
+  dragAndDropActionA11y: {
+    id: 'Press Enter to browse files from your computer.',
+    defaultMessage: 'Press Enter to browse files from your computer.',
+  },
 });
 
 /**
@@ -205,6 +209,9 @@ const FileWidget = (props) => {
               {value
                 ? intl.formatMessage(messages.replaceFile)
                 : intl.formatMessage(messages.addNewFile)}
+              <span className="visually-hidden">
+                {intl.formatMessage(messages.dragAndDropActionA11y)}
+              </span>
             </label>
             <input
               {...getInputProps({

package/src/components/manage/Widgets/RegistryImageWidget.jsx

@@ -99,7 +99,7 @@ const RegistryImageWidget = (props) => {
 
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);
+      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}`);
     });
 
     let reader = new FileReader();

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/config/ControlPanels.js

@@ -19,6 +19,7 @@ import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import relationsSVG from '@plone/volto/icons/ahead.svg';
+import contentListingSVG from '@plone/volto/icons/content-listing.svg';
 import config from '@plone/volto/registry';
 
 export const controlPanelsIcons = {
@@ -43,6 +44,7 @@ export const controlPanelsIcons = {
   undo: undoControlPanelSVG,
   aliases: linkSVG,
   relations: relationsSVG,
+  'block-types': contentListingSVG,
 };
 
 export const filterControlPanels = (controlpanels = []) => {

package/src/config/index.js

@@ -121,7 +121,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,

package/src/config/validation.ts

@@ -16,6 +16,7 @@ import {
   endEventDateRangeValidator,
   patternValidator,
   defaultLanguageControlPanelValidator,
+  sizeValidator,
 } from '@plone/volto/helpers/FormValidation/validators';
 
 const registerValidators = (config: ConfigType) => {
@@ -33,6 +34,13 @@ const registerValidators = (config: ConfigType) => {
     method: maxLengthValidator,
   });
 
+  config.registerUtility({
+    name: 'size',
+    type: 'validator',
+    dependencies: { fieldType: 'object' },
+    method: sizeValidator,
+  });
+
   config.registerUtility({
     name: 'pattern',
     type: 'validator',

package/src/constants/ActionTypes.js

@@ -148,3 +148,4 @@ export const GET_NAVROOT = 'GET_NAVROOT';
 export const SET_FORM_DATA = 'SET_FORM_DATA';
 export const SET_UI_STATE = 'SET_UI_STATE';
 export const UPDATE_UPLOADED_FILES = 'UPDATE_UPLOADED_FILES';
+export const GET_BLOCKTYPES_INDEX = 'GET_BLOCKTYPES_INDEX';

package/src/express-middleware/devproxy.js

@@ -88,11 +88,13 @@ export default function devProxyMiddleware() {
             .map((part) => '/_vh_' + part)
             .join('')
         : '';
+      const port =
+        apiPathURL.port || (apiPathURL.protocol === 'https:' ? 443 : 80);
       const target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
+        }:${port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
 
       return `${target}${path.replace(`${config.settings.subpathPrefix}/++api++`, '')}`;
     },

package/src/helpers/Blocks/Blocks.js

@@ -151,12 +151,28 @@ export function deleteBlock(formData, blockId, intl) {
 
   let newFormData = {
     ...formData,
-    [blocksLayoutFieldname]: {
-      items: without(formData[blocksLayoutFieldname].items, blockId),
-    },
-    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
   };
 
+  let container = findParent(newFormData, {
+    blockId,
+  });
+
+  if (container) {
+    container[blocksLayoutFieldname].items = without(
+      container[blocksLayoutFieldname].items,
+      blockId,
+    );
+    container[blocksFieldname] = omit(container[blocksFieldname], [blockId]);
+  } else {
+    newFormData[blocksLayoutFieldname].items = without(
+      newFormData[blocksLayoutFieldname].items,
+      blockId,
+    );
+    newFormData[blocksFieldname] = omit(newFormData[blocksFieldname], [
+      blockId,
+    ]);
+  }
+
   if (newFormData[blocksLayoutFieldname].items.length === 0) {
     newFormData = addBlock(
       newFormData,
@@ -839,7 +855,9 @@ export const getBlocksHierarchy = (properties) => {
     title: properties?.[blocksFieldName]?.[n]?.['@type'],
     data: properties?.[blocksFieldName]?.[n],
     children: isBlockContainer(properties?.[blocksFieldName]?.[n])
-      ? getBlocksHierarchy(properties?.[blocksFieldName]?.[n])
+      ? properties?.[blocksFieldName]?.[n]?.data
+        ? getBlocksHierarchy(properties?.[blocksFieldName]?.[n]?.data)
+        : getBlocksHierarchy(properties?.[blocksFieldName]?.[n])
       : [],
   }));
 };
@@ -933,8 +951,13 @@ export function moveBlockEnhanced(formData, { source, destination }) {
       const destinationContainer = findContainer(clonedFormData, {
         containerId: destination.parent,
       });
+      const sourceContainer = findContainer(clonedFormData, {
+        containerId: source.parent,
+      });
+
       destinationContainer[blocksFieldName][source.id] =
-        formData[blocksFieldName][source.parent][blocksFieldName][source.id];
+        sourceContainer[blocksFieldName]?.[source.id] ||
+        sourceContainer.data?.[blocksFieldName][source.id];
 
       destinationContainer[blocksLayoutFieldname].items = insertInArray(
         destinationContainer[blocksLayoutFieldname].items,
@@ -943,9 +966,6 @@ export function moveBlockEnhanced(formData, { source, destination }) {
       );
 
       // Remove the source block from the source parent
-      const sourceContainer = findContainer(clonedFormData, {
-        containerId: source.parent,
-      });
       delete sourceContainer[blocksFieldName][source.id];
       sourceContainer[blocksLayoutFieldname].items = removeFromArray(
         sourceContainer[blocksLayoutFieldname].items,
@@ -979,23 +999,25 @@ export function moveBlockEnhanced(formData, { source, destination }) {
  * @returns {object|undefined} - The container object if found, otherwise undefined.
  */
 export const findContainer = (formData, { containerId }) => {
+  const block =
+    formData.blocks[containerId]?.data || formData.blocks[containerId];
   if (
-    formData.blocks[containerId] &&
-    Object.keys(formData.blocks[containerId]).includes('blocks') &&
-    Object.keys(formData.blocks[containerId]).includes('blocks_layout')
+    block &&
+    Object.keys(block).includes('blocks') &&
+    Object.keys(block).includes('blocks_layout')
   ) {
-    return formData.blocks[containerId];
+    return block;
   }
 
   let container;
   Object.keys(formData.blocks).every((blockId) => {
-    const block = formData.blocks[blockId];
+    const subBlock = formData.blocks[blockId].data || formData.blocks[blockId];
     if (
-      formData.blocks[blockId] &&
-      Object.keys(formData.blocks[blockId]).includes('blocks') &&
-      Object.keys(formData.blocks[blockId]).includes('blocks_layout')
+      subBlock &&
+      Object.keys(subBlock).includes('blocks') &&
+      Object.keys(subBlock).includes('blocks_layout')
     ) {
-      container = findContainer(block, { containerId });
+      container = findContainer(subBlock, { containerId });
     }
     if (container) {
       return false;
@@ -1007,6 +1029,47 @@ export const findContainer = (formData, { containerId }) => {
   return container;
 };
 
+/**
+ * Finds parent container of the specified blockId in the given formData.
+ *
+ * @param {object} formData - The form data object.
+ * @param {object} options - The options object.
+ * @param {string} options.blockId - The ID of the block to find.
+ * @returns {object|undefined} - The container object if found, otherwise undefined.
+ */
+export const findParent = (formData, { blockId }) => {
+  const block = formData.data || formData;
+
+  if (block && block.blocks && Object.keys(block.blocks).includes(blockId)) {
+    return block;
+  }
+
+  let found = false;
+
+  if (block && block.blocks) {
+    Object.keys(block.blocks).every((subBlockId) => {
+      const subBlock =
+        block.blocks[subBlockId].data || block.blocks[subBlockId];
+      if (subBlock && subBlock.blocks) {
+        if (Object.keys(subBlock.blocks).includes(blockId)) {
+          found = subBlock;
+        }
+        const parent = findParent(subBlock, { blockId });
+        if (parent) {
+          found = parent;
+        }
+      }
+      if (found) {
+        return false;
+      } else {
+        return true;
+      }
+    });
+  }
+
+  return found;
+};
+
 const _dummyIntl = {
   formatMessage() {},
 };