@plone/volto 18.0.0-alpha.9 → 18.0.0

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

@@ -0,0 +1,138 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ActionsComponent from './Actions';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlActionsComponent = injectIntl(ActionsComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        actions: {
+          actions: {
+            document_actions: [],
+            object: [
+              {
+                icon: '',
+                id: 'view',
+                title: 'View',
+              },
+              {
+                icon: '',
+                id: 'edit',
+                title: 'Edit',
+              },
+              {
+                icon: '',
+                id: 'folderContents',
+                title: 'Contents',
+              },
+              {
+                icon: '',
+                id: 'history',
+                title: 'History',
+              },
+              {
+                icon: '',
+                id: 'local_roles',
+                title: 'Sharing',
+              },
+            ],
+            object_buttons: [
+              {
+                icon: '',
+                id: 'cut',
+                title: 'Cut',
+              },
+              {
+                icon: '',
+                id: 'copy',
+                title: 'Copy',
+              },
+              {
+                icon: '',
+                id: 'delete',
+                title: 'Delete',
+              },
+              {
+                icon: '',
+                id: 'rename',
+                title: 'Rename',
+              },
+              {
+                icon: '',
+                id: 'ical_import_enable',
+                title: 'Enable icalendar import',
+              },
+            ],
+            portal_tabs: [],
+            site_actions: [
+              {
+                icon: '',
+                id: 'sitemap',
+                title: 'Site Map',
+              },
+              {
+                icon: '',
+                id: 'accessibility',
+                title: 'Accessibility',
+              },
+              {
+                icon: '',
+                id: 'contact',
+                title: 'Contact',
+              },
+            ],
+            user: [
+              {
+                icon: '',
+                id: 'preferences',
+                title: 'Preferences',
+              },
+              {
+                icon: '',
+                id: 'dashboard',
+                title: 'Dashboard',
+              },
+              {
+                icon: '',
+                id: 'plone_setup',
+                title: 'Site Setup',
+              },
+              {
+                icon: '',
+                id: 'logout',
+                title: 'Log out',
+              },
+            ],
+          },
+        },
+        clipboard: {},
+        content: { data: { id: 'blog', title: 'Blog' } },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlActionsComponent {...args} pathname="/test" />
+    </Wrapper>
+  );
+}
+
+export const Actions = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/Actions',
+  component: Actions,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -8,9 +8,7 @@ import Actions from './Actions';
 
 const mockStore = configureStore();
 
-jest.mock('../Contents/ContentsRenameModal', () =>
-  jest.fn(() => <div className="RenameModal" />),
-);
+jest.mock('@plone/volto/components/manage/Contents');
 
 describe('Actions', () => {
   it('renders an actions component', () => {

package/src/components/manage/Add/Add.jsx

@@ -5,26 +5,35 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { BodyClass, Helmet } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  Helmet,
+  extractInvariantErrors,
+} from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { keys, isEmpty } from 'lodash';
 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 { v4 as uuid } from 'uuid';
 import qs from 'query-string';
 import { toast } from 'react-toastify';
 
-import { createContent, getSchema, changeLanguage } from '@plone/volto/actions';
 import {
-  Form,
+  createContent,
+  getSchema,
+  changeLanguage,
+  setFormData,
+} from '@plone/volto/actions';
+import {
   Icon,
   Toolbar,
   Sidebar,
   Toast,
   TranslationObject,
 } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   getBaseUrl,
   hasBlocksData,
@@ -34,9 +43,12 @@ import {
   getLanguageIndependentFields,
   langmap,
   toGettextLang,
+  getSimpleDefaultBlocks,
+  getDefaultBlocks,
 } from '@plone/volto/helpers';
 
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
+import { tryParseJSON } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
@@ -64,6 +76,10 @@ const messages = defineMessages({
     id: 'Translate to {lang}',
     defaultMessage: 'Translate to {lang}',
   },
+  someErrors: {
+    id: 'There are some errors.',
+    defaultMessage: 'There are some errors.',
+  },
 });
 
 /**
@@ -123,18 +139,6 @@ class Add extends Component {
     this.onCancel = this.onCancel.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
 
-    if (config.blocks?.initialBlocks[props.type]) {
-      this.initialBlocksLayout = config.blocks.initialBlocks[props.type].map(
-        (item) => uuid(),
-      );
-      this.initialBlocks = this.initialBlocksLayout.reduce(
-        (acc, value, index) => ({
-          ...acc,
-          [value]: { '@type': config.blocks.initialBlocks[props.type][index] },
-        }),
-        {},
-      );
-    }
     this.state = {
       isClient: false,
       error: null,
@@ -164,6 +168,7 @@ class Add extends Component {
       nextProps.createRequest.loaded &&
       nextProps.content['@type'] === this.props.type
     ) {
+      this.props.setFormData({});
       this.props.history.push(
         this.props.returnUrl || flattenToAppURL(nextProps.content['@id']),
       );
@@ -178,13 +183,28 @@ class Add 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 = errorsList.error?.message || error;
+      }
+
       this.setState({ error: error });
 
       toast.error(
         <Toast
           error
           title={this.props.intl.formatMessage(messages.error)}
-          content={`${nextProps.createRequest.error.status}:  ${error}`}
+          content={erroMessage}
         />,
       );
     }
@@ -217,10 +237,13 @@ class Add extends Component {
    * @returns {undefined}
    */
   onCancel() {
+    this.props.setFormData({});
     if (this.props.location?.state?.translationOf) {
       const language = this.props.location.state.languageFrom;
       const langFileName = toGettextLang(language);
-      import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      import(
+        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+      ).then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });
       this.props.history.push(this.props.location?.state?.translationOf);
@@ -249,13 +272,28 @@ class Add extends Component {
         ? langmap?.[this.props.location?.state?.language]?.nativeName
         : null;
 
-      // Lookup initialBlocks and initialBlocksLayout within schema
+      // Get initial blocks from local config, if any
+      let initialBlocks, initialBlocksLayout;
+      const initialContentTypeBlocks =
+        config.blocks?.initialBlocks[this.props.type];
+      if (initialContentTypeBlocks) {
+        if (typeof initialContentTypeBlocks?.[0] === 'string') {
+          // Simple (legacy) default blocks definition
+          [initialBlocks, initialBlocksLayout] = getSimpleDefaultBlocks(
+            initialContentTypeBlocks,
+          );
+        } else {
+          [initialBlocks, initialBlocksLayout] = getDefaultBlocks(
+            initialContentTypeBlocks,
+          );
+        }
+      }
+
+      // Lookup initialBlocks and initialBlocksLayout within schema, if any
       const schemaBlocks =
         this.props.schema.properties[blocksFieldname]?.default;
       const schemaBlocksLayout =
         this.props.schema.properties[blocksLayoutFieldname]?.default?.items;
-      let initialBlocks = this.initialBlocks;
-      let initialBlocksLayout = this.initialBlocksLayout;
 
       if (!isEmpty(schemaBlocksLayout) && !isEmpty(schemaBlocks)) {
         initialBlocks = {};
@@ -272,6 +310,7 @@ class Add extends Component {
           }
         });
       }
+
       //copy blocks from translationObject
       if (translationObject && blocksFieldname && blocksLayoutFieldname) {
         initialBlocks = {};
@@ -358,9 +397,14 @@ class Add extends Component {
             onSelectForm={() => {
               this.setState({ formSelected: 'addForm' });
             }}
+            global
+            // Properties to pass to the BlocksForm to match the View ones
+            history={this.props.history}
+            location={this.props.location}
+            token={this.props.token}
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -372,6 +416,7 @@ class Add extends Component {
                       aria-label={this.props.intl.formatMessage(messages.save)}
                       onClick={() => this.form.current.onSubmit()}
                       loading={this.props.createRequest.loading}
+                      disabled={this.props.createRequest.loading}
                     >
                       <Icon
                         name={saveSVG}
@@ -393,14 +438,12 @@ class Add extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
-          {visual && this.state.isClient && (
-            <Portal node={document.getElementById('sidebar')}>
-              <Sidebar />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
+          {visual &&
+            this.state.isClient &&
+            createPortal(<Sidebar />, document.getElementById('sidebar'))}
         </div>
       );
 
@@ -463,7 +506,7 @@ export default compose(
       returnUrl: qs.parse(props.location.search).return_url,
       type: qs.parse(props.location.search).type,
     }),
-    { createContent, getSchema, changeLanguage },
+    { createContent, getSchema, changeLanguage, setFormData },
   ),
   preloadLazyLibs('cms'),
 )(Add);

package/src/components/manage/Add/Add.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 config from '@plone/volto/registry';
@@ -16,9 +16,8 @@ beforeAll(() => {
   config.settings.loadables = {};
 });
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
 
 describe('Add', () => {
@@ -39,13 +38,12 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an add component', () => {
@@ -67,13 +65,13 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders an add component with schema', () => {
@@ -106,12 +104,12 @@ describe('Add', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Aliases/Aliases.jsx

@@ -8,7 +8,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import {
   Button,
   Checkbox,
@@ -20,7 +20,12 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { removeAliases, addAliases, getAliases } from '@plone/volto/actions';
+import {
+  removeAliases,
+  addAliases,
+  getAliases,
+  getContent,
+} from '@plone/volto/actions';
 
 import { Icon, Toolbar } from '@plone/volto/components';
 
@@ -96,6 +101,7 @@ class Aliases extends Component {
       datetime: '',
       batchSize: '',
     });
+    this.props.getContent(getBaseUrl(this.props.pathname));
     this.setState({ isClient: true });
   }
 
@@ -317,8 +323,8 @@ class Aliases extends Component {
             </Segment>
           </Form>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -335,9 +341,9 @@ class Aliases extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }
@@ -351,6 +357,6 @@ export default compose(
       pathname: props.location.pathname,
       title: state.content.data?.title || '',
     }),
-    { addAliases, getAliases, removeAliases },
+    { addAliases, getAliases, removeAliases, getContent },
   ),
 )(Aliases);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -9,9 +9,8 @@ import Aliases from './Aliases';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+
 jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
 
 describe('Aliases', () => {
@@ -45,12 +44,13 @@ describe('Aliases', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Aliases location={{ pathname: '/blog/aliases' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });