@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.31

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

@@ -18,7 +18,8 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { FormValidation } from '@plone/volto/helpers';
-import { Field, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 

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

@@ -3,13 +3,12 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 
 import ModalForm from './ModalForm';
 
 const mockStore = configureStore();
 
-jest.mock('./Field', () => jest.fn(() => <div className="Field" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ModalForm', () => {
   it('renders a modal form component', () => {

package/src/components/manage/Form/__mocks__/index.tsx

@@ -0,0 +1,74 @@
+import type { JSONSchema } from '@plone/types';
+import type { Ref } from 'react';
+const { forwardRef } = jest.requireActual('react');
+
+// Field descriptions can contain react elements and those are not JSON stringifiable
+const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
+  if (!schema || !schema.properties) return schema;
+  return {
+    ...schema,
+    properties: Object.entries(schema.properties).reduce<Record<string, any>>(
+      (acc, [key, value]) => {
+        acc[key] = {
+          ...value,
+          description:
+            typeof value.description === 'string'
+              ? value.description
+              : undefined,
+        };
+        return acc;
+      },
+      {},
+    ),
+  };
+};
+
+export const Field = jest.fn((props) => (
+  <div className="Field" id={props.id}>
+    {props.title}
+  </div>
+));
+
+export const InlineForm = jest.fn((props) => (
+  <div
+    id="InlineForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const ModalForm = jest.fn((props) => (
+  <div
+    id="ModalForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const UndoToolbar = jest.fn(() => <div id="UndoToolbar" />);
+
+export const BlocksToolbar = jest.fn(() => <div id="BlocksToolbar" />);
+
+export const BlockDataForm = jest.fn((props) => (
+  <div
+    id="BlockDataForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+export const BlocksForm = jest.fn((props) => (
+  <div
+    id="BlocksForm"
+    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+  />
+));
+
+const MockForm = forwardRef(
+  (props: { schema: JSONSchema | null }, ref: Ref<any>) => (
+    <div
+      id="Form"
+      data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
+      ref={ref}
+    />
+  ),
+);
+
+export const Form = jest.fn((props) => <MockForm {...props} />);

package/src/components/manage/Form/index.tsx

@@ -0,0 +1,50 @@
+import loadable from '@loadable/component';
+
+export const Field = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/Field'
+    ),
+);
+export const InlineForm = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/InlineForm'
+    ),
+);
+export const ModalForm = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/ModalForm'
+    ),
+);
+export const UndoToolbar = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/UndoToolbar'
+    ),
+);
+export const BlocksToolbar = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/BlocksToolbar'
+    ),
+);
+export const BlockDataForm = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/BlockDataForm'
+    ),
+);
+export const BlocksForm = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Blocks/Block/BlocksForm'
+    ),
+);
+export const Form = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/Form'
+    ),
+);

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

@@ -17,7 +17,7 @@ import {
   Table,
 } from 'semantic-ui-react';
 import { concat, map, reverse, find } from 'lodash';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { asyncConnect } from '@plone/volto/helpers';
 
@@ -314,8 +314,8 @@ class History extends Component {
             </Table.Body>
           </Table>
         </Segment.Group>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -332,9 +332,9 @@ class History extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/manage/History/History.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 { StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-intl-redux';
@@ -9,9 +9,7 @@ import FakeTimers from '@sinonjs/fake-timers';
 import History from './History';
 
 const mockStore = configureStore();
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 const FIXED_SYSTEM_TIME = '2017-04-23T15:38:00.000Z';
 
@@ -87,13 +85,14 @@ describe('History', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <History location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('redirects if unassigned', () => {
@@ -153,13 +152,14 @@ describe('History', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <History location={{ pathname: '/blog' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('redirects if unassigned, no token gives unauthorized', () => {
@@ -217,14 +217,15 @@ describe('History', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <StaticRouter context={{}} location={'/blog'}>
           <History location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </StaticRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/LinksToItem/LinksToItem.jsx

@@ -2,19 +2,22 @@
  * LinksToItem component
  * @module components/manage/LinksToItem/LinksToItem
  */
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { find } from 'lodash';
 import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Segment, Table } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { getContent, queryRelations } from '@plone/volto/actions';
+import { getContent, queryRelations, listActions } from '@plone/volto/actions';
+import { asyncConnect } from '@plone/volto/helpers';
+
 import {
   Icon as IconNext,
   Toolbar,
   UniversalLink,
+  Unauthorized,
 } from '@plone/volto/components';
 
 import { getBaseUrl } from '@plone/volto/helpers';
@@ -41,6 +44,8 @@ const LinksToItem = (props) => {
   const dispatch = useDispatch();
   const pathname = props.location.pathname;
   const itempath = getBaseUrl(pathname);
+  const objectActions = useSelector((state) => state.actions.actions.object);
+  const editPermission = find(objectActions, { id: 'edit' });
 
   const title = useSelector((state) => state.content.data?.title || '');
   const myrelations = useSelector(
@@ -51,13 +56,19 @@ const LinksToItem = (props) => {
     id: 'plone_setup',
   });
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   useEffect(() => {
     dispatch(queryRelations(null, false, itempath, null, [itempath]));
   }, [dispatch, itempath]);
 
   useEffect(() => {
-    if (!title) dispatch(getContent(itempath));
-  }, [dispatch, itempath, title]);
+    dispatch(getContent(itempath));
+  }, [dispatch, itempath]);
 
   let links = {};
   if (myrelations) {
@@ -77,6 +88,9 @@ const LinksToItem = (props) => {
   });
 
   const relations_found = Object.keys(links_ordered).length > 0;
+  if (!editPermission) {
+    return <Unauthorized />;
+  }
   return (
     <Container id="linkstoitem">
       <Helmet title={intl.formatMessage(messages.linkstoitem)} />
@@ -92,41 +106,46 @@ const LinksToItem = (props) => {
           <Table selectable compact singleLine attached>
             {
               <Table.Body>
-                {Object.keys(links_ordered).map((relationtype) => {
+                {Object.keys(links_ordered).map((relationtype, index) => {
+                  // TODO: keys driven by links_ordered[relationtype][index]['@id'])
                   return [].concat(
                     [
-                      <Table.Row>
-                        <Table.HeaderCell>
-                          {relationtype === 'isReferencing' ? (
-                            <FormattedMessage
-                              id="Linking this item with hyperlink in text"
-                              defaultMessage="Linking this item with hyperlink in text"
-                            />
-                          ) : relationtype === 'relatedItems' ? (
-                            <FormattedMessage
-                              id="Referencing this item as related item"
-                              defaultMessage="Referencing this item as related item"
-                            />
-                          ) : (
-                            <>
+                      <React.Fragment key={index}>
+                        <Table.Row>
+                          <Table.HeaderCell>
+                            {relationtype === 'isReferencing' ? (
                               <FormattedMessage
-                                id="Referencing this item with {relationship}"
-                                defaultMessage="Referencing this item with {relationship}"
-                                values={{ relationship: <q>{relationtype}</q> }}
+                                id="Linking this item with hyperlink in text"
+                                defaultMessage="Linking this item with hyperlink in text"
                               />
-                            </>
-                          )}
-                        </Table.HeaderCell>
-                        <Table.HeaderCell>
-                          <FormattedMessage
-                            id="Review state"
-                            defaultMessage="Review state"
-                          />
-                        </Table.HeaderCell>
-                        <Table.HeaderCell>
-                          <FormattedMessage id="Type" defaultMessage="Type" />
-                        </Table.HeaderCell>
-                      </Table.Row>,
+                            ) : relationtype === 'relatedItems' ? (
+                              <FormattedMessage
+                                id="Referencing this item as related item"
+                                defaultMessage="Referencing this item as related item"
+                              />
+                            ) : (
+                              <>
+                                <FormattedMessage
+                                  id="Referencing this item with {relationship}"
+                                  defaultMessage="Referencing this item with {relationship}"
+                                  values={{
+                                    relationship: <q>{relationtype}</q>,
+                                  }}
+                                />
+                              </>
+                            )}
+                          </Table.HeaderCell>
+                          <Table.HeaderCell>
+                            <FormattedMessage
+                              id="Review state"
+                              defaultMessage="Review state"
+                            />
+                          </Table.HeaderCell>
+                          <Table.HeaderCell>
+                            <FormattedMessage id="Type" defaultMessage="Type" />
+                          </Table.HeaderCell>
+                        </Table.Row>
+                      </React.Fragment>,
                     ],
                     links_ordered[relationtype].map((link) => {
                       return (
@@ -164,8 +183,8 @@ const LinksToItem = (props) => {
           </Segment>
         )}
       </Segment.Group>
-      {__CLIENT__ && (
-        <Portal node={document.getElementById('toolbar')}>
+      {isClient &&
+        createPortal(
           <Toolbar
             pathname={pathname}
             hideDefaultViewButtons
@@ -199,11 +218,41 @@ const LinksToItem = (props) => {
                 </>
               </>
             }
-          />
-        </Portal>
-      )}
+          />,
+          document.getElementById('toolbar'),
+        )}
     </Container>
   );
 };
 
-export default LinksToItem;
+export const __test__ = LinksToItem;
+
+export default asyncConnect([
+  {
+    key: 'content',
+    // Dispatch async/await to make the operation synchronous, otherwise it returns
+    // before the promise is resolved
+    promise: async ({ location, store: { dispatch } }) => {
+      const pathname = getBaseUrl(location.pathname);
+      return await dispatch(getContent(pathname));
+    },
+  },
+  {
+    key: 'actions',
+    // 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))),
+  },
+  {
+    key: 'relations',
+    // Dispatch async/await to make the operation synchronous, otherwise it returns
+    // before the promise is resolved
+    promise: async ({ location, store: { dispatch } }) => {
+      const pathname = getBaseUrl(location.pathname);
+      return await dispatch(
+        queryRelations(null, false, pathname, null, [pathname]),
+      );
+    },
+  },
+])(LinksToItem);

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

@@ -1,23 +1,34 @@
 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';
 import { MemoryRouter } from 'react-router-dom';
 
-import LinksToItem from './LinksToItem';
+import { __test__ as LinksToItem } from './LinksToItem';
 
 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('LinksToItem', () => {
   it('renders "links and references" view', () => {
     const store = mockStore({
+      actions: {
+        actions: {
+          document_actions: [],
+          object: [
+            {
+              icon: '',
+              id: 'edit',
+              title: 'Edit',
+            },
+          ],
+        },
+      },
       relations: {
         subrequests: {
           '/page-1': {
@@ -87,14 +98,15 @@ describe('LinksToItem', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Multilingual/ManageTranslations.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Container, Segment, Table } from 'semantic-ui-react';
 import { Helmet } from '@plone/volto/helpers';
 import { flattenToAppURL, getBaseUrl, langmap } from '@plone/volto/helpers';
@@ -15,7 +15,7 @@ import {
 } from '@plone/volto/actions';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { toast } from 'react-toastify';
 
 import addSVG from '@plone/volto/icons/add.svg';
@@ -64,6 +64,12 @@ const ManageTranslations = (props) => {
   const content = useSelector((state) => state.content.data);
   const dispatch = useDispatch();
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const { isObjectBrowserOpen, openObjectBrowser } = props;
 
   const currentSelectedItem = React.useRef(null);
@@ -269,8 +275,8 @@ const ManageTranslations = (props) => {
             </Table.Body>
           </Table>
         )}
-        {__CLIENT__ && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
@@ -284,9 +290,9 @@ const ManageTranslations = (props) => {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Segment.Group>
     </Container>
   );

package/src/components/manage/Multilingual/ManageTranslations.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';
@@ -12,9 +12,7 @@ beforeAll(() => {
   config.settings.supportedLanguages = ['de', 'es'];
 });
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 const mockStore = configureStore();
 
@@ -36,7 +34,7 @@ describe('ManageTranslations', () => {
         },
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ManageTranslations
@@ -48,10 +46,11 @@ describe('ManageTranslations', () => {
               },
             }}
           />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -3,7 +3,7 @@ import { map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { Form as UiForm, Menu, Segment } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
-import { Form, Field } from '@plone/volto/components';
+import { Form, Field } from '@plone/volto/components/manage/Form';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
 import {
@@ -14,6 +14,7 @@ import {
   toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
+
 const messages = defineMessages({
   document: {
     id: 'Document',
@@ -124,7 +125,6 @@ const TranslationObject = ({
                     {map(item.fields, (field, index) => (
                       <Field
                         {...schema.properties[field]}
-                        isDisabled={true}
                         id={field}
                         formData={translationObject}
                         focus={false}

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

@@ -9,13 +9,14 @@ import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link, withRouter } from 'react-router-dom';
-import { Portal } from 'react-portal';
+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 { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updatePassword } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 
@@ -195,8 +196,8 @@ class ChangePassword extends Component {
           onCancel={this.onCancel}
           loading={this.props.loading}
         />
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -213,9 +214,9 @@ class ChangePassword extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }