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

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

@@ -1,7 +1,7 @@
 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 { createPortal } from 'react-dom';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
@@ -110,15 +110,15 @@ const Delete = () => {
             </Segment>
           </Segment.Group>
         </Container>
-        {isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
               inner={<span />}
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Delete/Delete.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 { MemoryRouter } from 'react-router-dom';
@@ -8,9 +8,7 @@ import Delete from './Delete';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Delete', () => {
   it('renders an empty delete component', () => {
@@ -27,15 +25,16 @@ describe('Delete', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Delete location={{ pathname: '/blog', search: {} }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a delete component', () => {
@@ -54,14 +53,15 @@ describe('Delete', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Delete location={{ pathname: '/blog', search: {} }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Diff/Diff.jsx

@@ -11,7 +11,7 @@ import { compose } from 'redux';
 import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -23,12 +23,12 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import {
-  DiffField,
   FormattedDate,
   Icon,
   Toolbar,
   Unauthorized,
 } from '@plone/volto/components';
+import DiffField from '@plone/volto/components/manage/Diff/DiffField';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -333,8 +333,8 @@ class Diff extends Component {
               view={this.props.view}
             />
           )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -351,9 +351,9 @@ class Diff extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -8,9 +8,7 @@ import Diff from './Diff';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
@@ -75,6 +73,7 @@ describe('Diff', () => {
       <Provider store={store}>
         <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
           <Diff />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );

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

@@ -6,7 +6,8 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { getSchema, updateContent, getContent } from '@plone/volto/actions';
 import { getLayoutFieldname } from '@plone/volto/helpers';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import { defineMessages, injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
@@ -95,8 +96,8 @@ const customSelectStyles = {
     color: state.isSelected
       ? '#007bc1'
       : state.isFocused
-      ? '#4a4a4a'
-      : 'inherit',
+        ? '#4a4a4a'
+        : 'inherit',
     ':active': {
       backgroundColor: null,
     },

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

@@ -11,14 +11,13 @@ 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,30 @@ 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 = errorsList
+          .filter((errorItem) => !('field' in errorItem))
+          .map((errorItem) => errorItem['message']);
+        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 +281,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   onCancel() {
+    this.props.setFormData({});
     this.props.history.push(
       this.props.returnUrl || getBaseUrl(this.props.pathname),
     );
@@ -286,6 +311,7 @@ class Edit extends Component {
       <Form
         isEditForm
         ref={this.form}
+        navRoot={this.props.content?.['@components']?.navroot?.navroot || {}}
         schema={this.props.schema}
         type={this.props.content?.['@type']}
         formData={this.props.content}
@@ -306,6 +332,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}
       />
     );
 
@@ -373,11 +404,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 && (
@@ -395,8 +425,8 @@ class Edit extends Component {
             )}
           </>
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -444,9 +474,9 @@ class Edit extends Component {
                   )}
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }
@@ -522,6 +552,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);