@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

package/src/components/manage/Form/Form.jsx

@@ -12,6 +12,7 @@ import {
   FormValidation,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
+  hasBlocksData,
   messages,
 } from '@plone/volto/helpers';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -349,7 +350,7 @@ class Form extends Component {
 
   /**
    * If user clicks on input, the form will be not considered pristine
-   * this will avoid onBlur effects without interraction with the form
+   * this will avoid onBlur effects without interaction with the form
    * @param {Object} e event
    */
   onClickInput(e) {
@@ -527,30 +528,92 @@ class Form extends Component {
         })
       : {};
 
-    if (keys(errors).length > 0) {
+    let blocksErrors = {};
+
+    if (hasBlocksData(formData)) {
+      // Validate blocks
+      const blocks = this.state.formData[getBlocksFieldname(formData)];
+      const blocksLayout =
+        this.state.formData[getBlocksLayoutFieldname(formData)];
+      const defaultSchema = {
+        properties: {},
+        fieldsets: [],
+        required: [],
+      };
+      blocksLayout.items.forEach((block) => {
+        let blockSchema =
+          config.blocks.blocksConfig[blocks[block]['@type']].blockSchema ||
+          defaultSchema;
+        if (typeof blockSchema === 'function') {
+          blockSchema = blockSchema({
+            intl: this.props.intl,
+            formData: blocks[block],
+          });
+        }
+        const blockErrors = FormValidation.validateFieldsPerFieldset({
+          schema: blockSchema,
+          formData: blocks[block],
+          formatMessage: this.props.intl.formatMessage,
+        });
+        if (keys(blockErrors).length > 0) {
+          blocksErrors = {
+            ...blocksErrors,
+            [block]: { ...blockErrors },
+          };
+        }
+      });
+    }
+
+    if (keys(errors).length > 0 || keys(blocksErrors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,
       });
-      this.setState(
-        {
-          errors,
-          activeIndex,
-        },
-        () => {
-          Object.keys(errors).forEach((err) =>
-            toast.error(
-              <Toast
-                error
-                title={this.props.schema.properties[err].title || err}
-                content={errors[err].join(', ')}
-              />,
-            ),
-          );
+
+      this.setState({
+        errors: {
+          ...errors,
+          ...(!isEmpty(blocksErrors) && { blocks: blocksErrors }),
         },
-      );
-      // Changes the focus to the metadata tab in the sidebar if error
-      this.props.setSidebarTab(0);
+        activeIndex,
+      });
+
+      if (keys(errors).length > 0) {
+        // Changes the focus to the metadata tab in the sidebar if error
+        Object.keys(errors).forEach((err) =>
+          toast.error(
+            <Toast
+              error
+              title={this.props.schema.properties[err].title || err}
+              content={errors[err].join(', ')}
+            />,
+          ),
+        );
+        this.props.setSidebarTab(0);
+      } else if (keys(blocksErrors).length > 0) {
+        const errorField = Object.entries(
+          Object.entries(blocksErrors)[0][1],
+        )[0][0];
+        const errorMessage = Object.entries(
+          Object.entries(blocksErrors)[0][1],
+        )[0][1];
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(
+              messages.blocksFieldsErrorTitle,
+              { errorField },
+            )}
+            content={errorMessage}
+          />,
+        );
+        this.props.setSidebarTab(1);
+        this.props.setUIState({
+          selected: Object.keys(blocksErrors)[0],
+          multiSelected: [],
+          hovered: null,
+        });
+      }
     } else {
       // Get only the values that have been modified (Edit forms), send all in case that
       // it's an add form
@@ -730,6 +793,8 @@ class Form extends Component {
                 history={this.props.history}
                 location={this.props.location}
                 token={this.props.token}
+                errors={this.state.errors}
+                blocksErrors={this.state.errors.blocks}
               />
               {this.state.isClient &&
                 this.state.sidebarMetadataIsAvailable &&

package/src/components/manage/Form/InlineForm.jsx

@@ -142,7 +142,6 @@ const InlineForm = (props) => {
           content={error.message}
         />
       )}
-
       <div id={`blockform-fieldset-${defaultFieldset.id}`}>
         <Segment className="form attached">
           {map(defaultFieldset.fields, (field, index) => (
@@ -157,7 +156,7 @@ const InlineForm = (props) => {
                 onChangeField(id, value, itemInfo);
               }}
               key={field}
-              error={errors[field]}
+              error={errors?.[block]?.[field] || {}}
               block={block}
             />
           ))}
@@ -166,7 +165,6 @@ const InlineForm = (props) => {
           )}
         </Segment>
       </div>
-
       {other.map((fieldset, index) => (
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
@@ -199,7 +197,7 @@ const InlineForm = (props) => {
                         onChangeField(id, value);
                       }}
                       key={field}
-                      error={errors[field]}
+                      error={errors?.[block]?.[field] || {}}
                       block={block}
                     />
                   ))}

package/src/components/manage/Form/ModalForm.jsx

@@ -137,7 +137,7 @@ class ModalForm extends Component {
 
   /**
    * If user clicks on input, the form will be not considered pristine
-   * this will avoid onBlur effects without interraction with the form
+   * this will avoid onBlur effects without interaction with the form
    * @param {Object} e event
    */
   onClickInput(e) {

package/src/components/manage/History/History.jsx

@@ -345,7 +345,7 @@ export default compose(
   asyncConnect([
     {
       key: 'actions',
-      // Dispatch async/await to make the operation syncronous, otherwise it returns
+      // Dispatch async/await to make the operation synchronous, otherwise it returns
       // before the promise is resolved
       promise: async ({ location, store: { dispatch } }) =>
         await dispatch(listActions(getBaseUrl(location.pathname))),

package/src/components/manage/Pluggable/Pluggable.test.js

@@ -31,7 +31,7 @@ describe('<Pluggable />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('Works with an empy Plug', () => {
+  it('Works with an empty Plug', () => {
     const { container } = render(
       <PluggablesProvider>
         <Pluggable name="test" />

package/src/components/manage/Preferences/ChangePassword.jsx

@@ -1,25 +1,16 @@
-/**
- * Change password component.
- * @module components/manage/Preferences/ChangePassword
- */
-
-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 { Link, withRouter } from 'react-router-dom';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 
-import { Icon, Toast, Toolbar } from '@plone/volto/components';
-import { Form } from '@plone/volto/components/manage/Form';
+import { Helmet } from '@plone/volto/helpers';
+import { useClient } from '@plone/volto/hooks';
+import { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
 import { updatePassword } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
-
 import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
@@ -70,169 +61,100 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ChangePassword class.
- * @class ChangePassword
- * @extends Component
- */
-class ChangePassword extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    loading: PropTypes.bool.isRequired,
-    updatePassword: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ChangePassword
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
-  }
+const ChangePassword = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isClient = useClient();
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.setState({ isClient: true });
-  }
+  const userId = useSelector(
+    (state) =>
+      state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+    shallowEqual,
+  );
+  const loading = useSelector((state) => state.users.update_password.loading);
+  const { pathname } = useLocation();
+  const history = useHistory();
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
+  const onSubmit = (data) => {
     if (data.newPassword === data.newPasswordRepeat) {
-      this.props.updatePassword(
-        this.props.userId,
-        data.oldPassword,
-        data.newPassword,
-      );
-      toast.success(
-        <Toast
-          success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.saved)}
-        />,
+      dispatch(updatePassword(userId, data.oldPassword, data.newPassword)).then(
+        () => {
+          toast.success(
+            <Toast
+              success
+              title={intl.formatMessage(messages.success)}
+              content={intl.formatMessage(messages.saved)}
+            />,
+          );
+        },
       );
     }
-  }
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
+  const onCancel = () => {
+    history.goBack();
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Container id="page-change-password">
-        <Helmet
-          title={this.props.intl.formatMessage(messages.changePassword)}
-        />
-        <Form
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
-              },
-            ],
-            properties: {
-              oldPassword: {
-                description: this.props.intl.formatMessage(
-                  messages.oldPasswordDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.oldPasswordTitle),
-                type: 'string',
-                widget: 'password',
-              },
-              newPassword: {
-                description: this.props.intl.formatMessage(
-                  messages.newPasswordDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.newPasswordTitle),
-                type: 'string',
-                widget: 'password',
-              },
-              newPasswordRepeat: {
-                description: this.props.intl.formatMessage(
-                  messages.newPasswordRepeatDescription,
-                ),
-                title: this.props.intl.formatMessage(
-                  messages.newPasswordRepeatTitle,
-                ),
-                type: 'string',
-                widget: 'password',
-              },
+  return (
+    <Container id="page-change-password">
+      <Helmet title={intl.formatMessage(messages.changePassword)} />
+      <Form
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
             },
-            required: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
-          }}
-          onSubmit={this.onSubmit}
-          onCancel={this.onCancel}
-          loading={this.props.loading}
-        />
-        {this.state.isClient &&
-          createPortal(
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link
-                  to={`${getBaseUrl(this.props.pathname)}`}
-                  className="item"
-                >
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
-                  />
-                </Link>
-              }
-            />,
-            document.getElementById('toolbar'),
-          )}
-      </Container>
-    );
-  }
-}
+          ],
+          properties: {
+            oldPassword: {
+              description: intl.formatMessage(messages.oldPasswordDescription),
+              title: intl.formatMessage(messages.oldPasswordTitle),
+              type: 'string',
+              widget: 'password',
+            },
+            newPassword: {
+              description: intl.formatMessage(messages.newPasswordDescription),
+              title: intl.formatMessage(messages.newPasswordTitle),
+              type: 'string',
+              widget: 'password',
+            },
+            newPasswordRepeat: {
+              description: intl.formatMessage(
+                messages.newPasswordRepeatDescription,
+              ),
+              title: intl.formatMessage(messages.newPasswordRepeatTitle),
+              type: 'string',
+              widget: 'password',
+            },
+          },
+          required: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
+        }}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        loading={loading}
+      />
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={`${getBaseUrl(pathname)}`} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar'),
+        )}
+    </Container>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-      loading: state.users.update_password.loading,
-      pathname: props.location.pathname,
-    }),
-    { updatePassword },
-  ),
-)(ChangePassword);
+export default ChangePassword;

package/src/components/manage/Preferences/ChangePassword.stories.jsx

@@ -0,0 +1,41 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ChangePasswordComponent from './ChangePassword';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+const IntlChangePasswordComponent = injectIntl(ChangePasswordComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+        users: {
+          update_password: {
+            loading: false,
+          },
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlChangePasswordComponent {...args} location={{ pathname: '/blog' }} />
+    </Wrapper>
+  );
+}
+
+export const ChangePassword = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/ChangePassword',
+  component: ChangePassword,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};