@plone/volto 18.0.0-alpha.9 → 18.0.0

package/src/components/manage/Display/Display.jsx

@@ -1,13 +1,14 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { compose } from 'redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { getSchema, updateContent, getContent } from '@plone/volto/actions';
 import { getLayoutFieldname } from '@plone/volto/helpers';
+import { usePrevious } from '@plone/volto/helpers';
 import { FormFieldWrapper, Icon } from '@plone/volto/components';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -95,8 +96,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },
@@ -109,152 +110,96 @@ const customSelectStyles = {
   }),
 };
 
-/**
- * Display container class.
- * @class Display
- * @extends Component
- */
-class DisplaySelect extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getSchema: PropTypes.func.isRequired,
-    updateContent: PropTypes.func.isRequired,
-    getContent: PropTypes.func.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    pathname: PropTypes.string.isRequired,
-    layouts: PropTypes.arrayOf(PropTypes.string),
-    layout: PropTypes.string,
-    type: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    layouts: [],
-    layout: '',
-  };
-
-  state = {
-    selectedOption: {
-      value: this.props.layout,
-      label:
-        this.props.intl.formatMessage({
-          id: config.views.layoutViewsNamesMapping?.[this.props.layout],
-          defaultMessage:
-            config.views.layoutViewsNamesMapping?.[this.props.layout],
-        }) || this.props.layout,
-    },
-  };
-
-  componentDidMount() {
-    this.props.getSchema(this.props.type);
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      this.props.getSchema(nextProps.type);
+const DisplaySelect = (props) => {
+  const { pathname } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const loaded = useSelector((state) => state.content.update.loaded);
+  const layouts = useSelector((state) =>
+    state.schema.schema ? state.schema.schema.layouts : [],
+  );
+  const layout = useSelector((state) =>
+    state.content.data
+      ? state.content.data[getLayoutFieldname(state.content.data)]
+      : '',
+  );
+  const [selectedOption, setselectedOption] = useState({
+    value: layout,
+    label:
+      intl.formatMessage({
+        id: config.views.layoutViewsNamesMapping?.[layout],
+        defaultMessage: config.views.layoutViewsNamesMapping?.[layout],
+      }) || layout,
+  });
+
+  const type = useSelector((state) =>
+    state.content.data ? state.content.data['@type'] : '',
+  );
+  const prevloaded = usePrevious(loaded);
+  const prevpathname = usePrevious(pathname);
+
+  useEffect(() => {
+    dispatch(getSchema(type));
+  }, [dispatch, type]);
+  useEffect(() => {
+    if (pathname !== prevpathname) {
+      dispatch(getSchema(type));
     }
-    if (!this.props.loaded && nextProps.loaded) {
-      this.props.getContent(nextProps.pathname);
+    if (!prevloaded && loaded) {
+      dispatch(getContent(pathname));
     }
-  }
-
-  /**
-   * On set layout handler
-   * @method setLayout
-   * @param {Object} event Event object
-   * @returns {undefined}
-   */
-  setLayout = (selectedOption) => {
-    this.props.updateContent(this.props.pathname, {
-      layout: selectedOption.value,
-    });
-    this.setState({ selectedOption });
+  }, [dispatch, type, pathname, prevpathname, prevloaded, loaded]);
+
+  const setLayout = (selectedOption) => {
+    dispatch(
+      updateContent(pathname, {
+        layout: selectedOption.value,
+      }),
+    );
+    setselectedOption(selectedOption);
   };
 
-  selectValue = (option) => (
-    <Fragment>
-      <span className="Select-value-label">{option.label}</span>
-    </Fragment>
-  );
-
-  optionRenderer = (option) => (
-    <Fragment>
-      <span style={{ marginRight: 'auto' }}>{option.label}</span>
-      <Icon name={checkSVG} size="24px" />
-    </Fragment>
-  );
-
-  render() {
-    const { selectedOption } = this.state;
-    const Select = this.props.reactSelect.default;
-    const layoutsNames = config.views.layoutViewsNamesMapping;
-    const layoutOptions = this.props.layouts
-      .filter(
-        (layout) =>
-          Object.keys(config.views.contentTypesViews).includes(layout) ||
-          Object.keys(config.views.layoutViews).includes(layout),
-      )
-      .map((item) => ({
-        value: item,
-        label:
-          this.props.intl.formatMessage({
-            id: layoutsNames[item],
-            defaultMessage: layoutsNames[item],
-          }) || item,
-      }));
+  const Select = props.reactSelect.default;
+  const layoutsNames = config.views.layoutViewsNamesMapping;
+  const layoutOptions = layouts
+    .filter(
+      (layout) =>
+        Object.keys(config.views.contentTypesViews).includes(layout) ||
+        Object.keys(config.views.layoutViews).includes(layout),
+    )
+    .map((item) => ({
+      value: item,
+      label:
+        intl.formatMessage({
+          id: layoutsNames[item],
+          defaultMessage: layoutsNames[item],
+        }) || item,
+    }));
+
+  return layoutOptions?.length > 1 ? (
+    <FormFieldWrapper
+      id="display-select"
+      title={intl.formatMessage(messages.Viewmode)}
+      {...props}
+    >
+      <Select
+        name="display-select"
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={layoutOptions}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        onChange={setLayout}
+        defaultValue={selectedOption}
+        isSearchable={false}
+      />
+    </FormFieldWrapper>
+  ) : null;
+};
 
-    return layoutOptions?.length > 1 ? (
-      <FormFieldWrapper
-        id="display-select"
-        title={this.props.intl.formatMessage(messages.Viewmode)}
-        {...this.props}
-      >
-        <Select
-          name="display-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          options={layoutOptions}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          onChange={this.setLayout}
-          defaultValue={selectedOption}
-          isSearchable={false}
-        />
-      </FormFieldWrapper>
-    ) : null;
-  }
-}
+DisplaySelect.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  injectLazyLibs('reactSelect'),
-  connect(
-    (state) => ({
-      loaded: state.content.update.loaded,
-      layouts: state.schema.schema ? state.schema.schema.layouts : [],
-      layout: state.content.data
-        ? state.content.data[getLayoutFieldname(state.content.data)]
-        : '',
-      layout_fieldname: state.content.data
-        ? getLayoutFieldname(state.content.data)
-        : '',
-      type: state.content.data ? state.content.data['@type'] : '',
-    }),
-    { getSchema, updateContent, getContent },
-  ),
-)(DisplaySelect);
+export default compose(injectLazyLibs('reactSelect'))(DisplaySelect);

package/src/components/manage/Display/Display.stories.jsx

@@ -0,0 +1,46 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import DisplayComponent from './Display';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlDisplayComponent = injectIntl(DisplayComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        content: {
+          update: { loaded: true },
+          data: { layout: 'summary_view', '@type': 'Folder' },
+        },
+        schema: {
+          schema: {
+            layouts: ['summary_view', 'listing_view'],
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlDisplayComponent {...args} pathname="/test" />
+    </Wrapper>
+  );
+}
+
+export const Display = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/Display',
+  component: Display,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -8,6 +8,7 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

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

@@ -5,20 +5,19 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, extractInvariantErrors } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { asyncConnect, hasApiExpander } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Grid, Menu } from 'semantic-ui-react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import qs from 'query-string';
 import { find } from 'lodash';
 import { toast } from 'react-toastify';
 
 import {
   Forbidden,
-  Form,
   Icon,
   Sidebar,
   Toast,
@@ -27,6 +26,7 @@ import {
   CompareLanguages,
   TranslationObject,
 } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   updateContent,
   getContent,
@@ -34,6 +34,7 @@ import {
   unlockContent,
   getSchema,
   listActions,
+  setFormData,
 } from '@plone/volto/actions';
 import {
   flattenToAppURL,
@@ -41,6 +42,7 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
+import { tryParseJSON } from '@plone/volto/helpers';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -64,6 +66,10 @@ const messages = defineMessages({
     id: 'Error',
     defaultMessage: 'Error',
   },
+  someErrors: {
+    id: 'There are some errors.',
+    defaultMessage: 'There are some errors.',
+  },
 });
 
 /**
@@ -182,6 +188,7 @@ class Edit extends Component {
       });
     }
     if (this.props.updateRequest.loading && nextProps.updateRequest.loaded) {
+      this.props.setFormData({});
       this.props.history.push(
         this.props.returnUrl || getBaseUrl(this.props.pathname),
       );
@@ -198,13 +205,28 @@ class Edit extends Component {
         new DOMParser().parseFromString(message, 'text/html')?.all[0]
           ?.textContent || message;
 
+      const errorsList = tryParseJSON(error);
+      let erroMessage;
+      if (Array.isArray(errorsList)) {
+        const invariantErrors = extractInvariantErrors(errorsList);
+        if (invariantErrors.length > 0) {
+          // Plone invariant validation message.
+          erroMessage = invariantErrors.join(' - ');
+        } else {
+          // Error in specific field.
+          erroMessage = this.props.intl.formatMessage(messages.someErrors);
+        }
+      } else {
+        erroMessage = error;
+      }
+
       this.setState({ error: error });
 
       toast.error(
         <Toast
           error
           title={this.props.intl.formatMessage(messages.error)}
-          content={`${nextProps.updateRequest.error.status} ${error}`}
+          content={erroMessage}
         />,
       );
     }
@@ -257,6 +279,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   onCancel() {
+    this.props.setFormData({});
     this.props.history.push(
       this.props.returnUrl || getBaseUrl(this.props.pathname),
     );
@@ -307,6 +330,11 @@ class Edit extends Component {
         onSelectForm={() => {
           this.setState({ formSelected: 'editForm' });
         }}
+        global
+        // Properties to pass to the BlocksForm to match the View ones
+        history={this.props.history}
+        location={this.props.location}
+        token={this.props.token}
       />
     );
 
@@ -318,11 +346,15 @@ class Edit extends Component {
               <>
                 <Helmet
                   title={
-                    this.props?.schema?.title
+                    this.props?.content?.title
                       ? this.props.intl.formatMessage(messages.edit, {
-                          title: this.props.schema.title,
+                          title: this.props?.content?.title,
                         })
-                      : null
+                      : this.props?.schema?.title
+                        ? this.props.intl.formatMessage(messages.edit, {
+                            title: this.props.schema.title,
+                          })
+                        : null
                   }
                 >
                   {this.props.content?.language && (
@@ -374,11 +406,10 @@ class Edit extends Component {
               </>
             )}
 
-            {editPermission && this.state.visual && this.state.isClient && (
-              <Portal node={document.getElementById('sidebar')}>
-                <Sidebar />
-              </Portal>
-            )}
+            {editPermission &&
+              this.state.visual &&
+              this.state.isClient &&
+              createPortal(<Sidebar />, document.getElementById('sidebar'))}
           </>
         )}
         {!editPermission && (
@@ -396,8 +427,8 @@ class Edit extends Component {
             )}
           </>
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -445,9 +476,9 @@ class Edit extends Component {
                   )}
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }
@@ -523,6 +554,7 @@ export default compose(
       getSchema,
       lockContent,
       unlockContent,
+      setFormData,
     },
   ),
   preloadLazyLibs('cms'),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import jwt from 'jsonwebtoken';
@@ -8,10 +8,9 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
+jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+jest.mock('../Sidebar/Sidebar', () => jest.fn(() => <div id="Sidebar" />));
 
 describe('Edit', () => {
   it('renders an empty edit component', () => {
@@ -50,13 +49,15 @@ describe('Edit', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
+        <div id="toolbar"></div>
         <Edit location={{ pathname: '/blog', search: {} }} />
+        <div id="sidebar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an edit component', () => {
@@ -97,12 +98,14 @@ describe('Edit', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
+        <div id="toolbar"></div>
         <Edit location={{ pathname: '/blog', search: {} }} />
+        <div id="sidebar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineForm } from '@plone/volto/components';
+import { InlineForm } from '@plone/volto/components/manage/Form';
 import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import BlockDataForm from './BlockDataForm';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const withStateManagement =

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

@@ -20,6 +20,7 @@ import copySVG from '@plone/volto/icons/copy.svg';
 import cutSVG from '@plone/volto/icons/cut.svg';
 import pasteSVG from '@plone/volto/icons/paste.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks';
 
 export class BlocksToolbarComponent extends React.Component {
   constructor(props) {
@@ -79,9 +80,9 @@ export class BlocksToolbarComponent extends React.Component {
     const { formData } = this.props;
     const blocksFieldname = getBlocksFieldname(formData);
     const blocks = formData[blocksFieldname];
-    const blocksData = this.props.selectedBlocks.map(
-      (blockId) => blocks[blockId],
-    );
+    const blocksData = this.props.selectedBlocks
+      .map((blockId) => [blockId, blocks[blockId]])
+      .filter(([blockId]) => !!blockId); // Removes null blocks
     this.props.setBlocksClipboard({ [actionType]: blocksData });
     this.props.onSetSelectedBlocks([]);
   }
@@ -91,14 +92,14 @@ export class BlocksToolbarComponent extends React.Component {
     const mode = Object.keys(blocksClipboard).includes('cut') ? 'cut' : 'copy';
     const blocksData = blocksClipboard[mode] || [];
     const cloneWithIds = blocksData
-      .filter((blockData) => !!blockData['@type'])
-      .map((blockData) => {
+      .filter(([blockId, blockData]) => blockId && !!blockData['@type']) // Removes null blocks
+      .map(([blockId, blockData]) => {
         const blockConfig = config.blocks.blocksConfig[blockData['@type']];
         return mode === 'copy'
           ? blockConfig.cloneData
             ? blockConfig.cloneData(blockData)
-            : [uuid(), blockData]
-          : [uuid(), blockData]; // if cut/pasting blocks, we don't clone
+            : [uuid(), cloneBlocks(blockData)]
+          : [blockId, blockData]; // if cut/pasting blocks, we don't clone
       })
       .filter((info) => !!info); // some blocks may refuse to be copied
     const blocksFieldname = getBlocksFieldname(formData);