@plone/volto 18.0.0-alpha.13 → 18.0.0-alpha.15

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';
 
@@ -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/Edit/Edit.jsx

@@ -11,7 +11,7 @@ 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';
@@ -375,11 +375,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 && (
@@ -397,8 +396,8 @@ class Edit extends Component {
             )}
           </>
         )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -446,9 +445,9 @@ class Edit extends Component {
                   )}
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

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,9 +8,9 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
+jest.mock('../Sidebar/Sidebar', () => jest.fn(() => <div id="Sidebar" />));
+
 jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
 
 describe('Edit', () => {
@@ -50,13 +50,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 +99,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.test.jsx

@@ -1,7 +1,6 @@
 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';

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

@@ -31,7 +31,7 @@ import isBoolean from 'lodash/isBoolean';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { connect } from 'react-redux';
 import {
   Accordion,
@@ -53,6 +53,7 @@ import {
 } from '@plone/volto/actions';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
+import SlotRenderer from '../../theme/SlotRenderer/SlotRenderer';
 
 /**
  * Form container class.
@@ -237,6 +238,7 @@ class Form extends Component {
       isClient: false,
       // Ensure focus remain in field after change
       inFocus: {},
+      sidebarMetadataIsAvailable: false,
     };
     this.onChangeField = this.onChangeField.bind(this);
     this.onSelectBlock = this.onSelectBlock.bind(this);
@@ -312,6 +314,13 @@ class Form extends Component {
       // Reset focus field
       this.props.resetMetadataFocus();
     }
+
+    if (
+      !this.state.sidebarMetadataIsAvailable &&
+      document.getElementById('sidebar-metadata')
+    ) {
+      this.setState(() => ({ sidebarMetadataIsAvailable: true }));
+    }
   }
 
   /**
@@ -641,131 +650,147 @@ class Form extends Component {
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
       this.state.isClient && (
-        <Container>
-          <BlocksToolbar
-            formData={formData}
-            selectedBlock={this.state.selected}
-            selectedBlocks={this.state.multiSelected}
-            onChangeBlocks={(newBlockData) => {
-              const newFormData = {
-                ...formData,
-                ...newBlockData,
-              };
-              this.setState({
-                formData: newFormData,
-              });
-              if (this.props.global) {
-                this.props.setFormData(newFormData);
-              }
-            }}
-            onSetSelectedBlocks={(blockIds) =>
-              this.setState({ multiSelected: blockIds })
-            }
-            onSelectBlock={this.onSelectBlock}
-          />
-          <UndoToolbar
-            state={{
-              formData,
-              selected: this.state.selected,
-              multiSelected: this.state.multiSelected,
-            }}
-            enableHotKeys
-            onUndoRedo={({ state }) => {
-              if (this.props.global) {
-                this.props.setFormData(state.formData);
-              }
-              return this.setState(state);
-            }}
-          />
-          <BlocksForm
-            onChangeFormData={(newData) => {
-              const newFormData = {
-                ...formData,
-                ...newData,
-              };
-              this.setState({
-                formData: newFormData,
-              });
-              if (this.props.global) {
-                this.props.setFormData(newFormData);
-              }
-            }}
-            onChangeField={this.onChangeField}
-            onSelectBlock={this.onSelectBlock}
-            properties={formData}
+        <>
+          <SlotRenderer
+            name="aboveContent"
+            content={this.props.content}
             navRoot={navRoot}
-            type={type}
-            pathname={this.props.pathname}
-            selectedBlock={this.state.selected}
-            multiSelected={this.state.multiSelected}
-            manage={this.props.isAdminForm}
-            allowedBlocks={this.props.allowedBlocks}
-            showRestricted={this.props.showRestricted}
-            editable={this.props.editable}
-            isMainForm={this.props.editable}
           />
-          {this.state.isClient && this.props.editable && (
-            <Portal
-              node={__CLIENT__ && document.getElementById('sidebar-metadata')}
-            >
-              <UiForm
-                method="post"
-                onSubmit={this.onSubmit}
-                error={keys(this.state.errors).length > 0}
-              >
-                {schema &&
-                  map(schema.fieldsets, (fieldset) => (
-                    <Accordion
-                      fluid
-                      styled
-                      className="form"
-                      key={fieldset.title}
-                    >
-                      <div
-                        key={fieldset.id}
-                        id={`metadataform-fieldset-${fieldset.id}`}
+
+          <Container>
+            <BlocksToolbar
+              formData={formData}
+              selectedBlock={this.state.selected}
+              selectedBlocks={this.state.multiSelected}
+              onChangeBlocks={(newBlockData) => {
+                const newFormData = {
+                  ...formData,
+                  ...newBlockData,
+                };
+                this.setState({
+                  formData: newFormData,
+                });
+                if (this.props.global) {
+                  this.props.setFormData(newFormData);
+                }
+              }}
+              onSetSelectedBlocks={(blockIds) =>
+                this.setState({ multiSelected: blockIds })
+              }
+              onSelectBlock={this.onSelectBlock}
+            />
+            <UndoToolbar
+              state={{
+                formData,
+                selected: this.state.selected,
+                multiSelected: this.state.multiSelected,
+              }}
+              enableHotKeys
+              onUndoRedo={({ state }) => {
+                if (this.props.global) {
+                  this.props.setFormData(state.formData);
+                }
+                return this.setState(state);
+              }}
+            />
+            <BlocksForm
+              onChangeFormData={(newData) => {
+                const newFormData = {
+                  ...formData,
+                  ...newData,
+                };
+                this.setState({
+                  formData: newFormData,
+                });
+                if (this.props.global) {
+                  this.props.setFormData(newFormData);
+                }
+              }}
+              onChangeField={this.onChangeField}
+              onSelectBlock={this.onSelectBlock}
+              properties={formData}
+              navRoot={navRoot}
+              type={type}
+              pathname={this.props.pathname}
+              selectedBlock={this.state.selected}
+              multiSelected={this.state.multiSelected}
+              manage={this.props.isAdminForm}
+              allowedBlocks={this.props.allowedBlocks}
+              showRestricted={this.props.showRestricted}
+              editable={this.props.editable}
+              isMainForm={this.props.editable}
+            />
+            {this.state.isClient &&
+              this.state.sidebarMetadataIsAvailable &&
+              this.props.editable &&
+              createPortal(
+                <UiForm
+                  method="post"
+                  onSubmit={this.onSubmit}
+                  error={keys(this.state.errors).length > 0}
+                >
+                  {schema &&
+                    map(schema.fieldsets, (fieldset) => (
+                      <Accordion
+                        fluid
+                        styled
+                        className="form"
+                        key={fieldset.title}
                       >
-                        <Accordion.Title
-                          active={metadataFieldsets.includes(fieldset.id)}
-                          index={fieldset.id}
-                          onClick={this.onToggleMetadataFieldset}
-                        >
-                          {fieldset.title}
-                          {metadataFieldsets.includes(fieldset.id) ? (
-                            <Icon name={upSVG} size="20px" />
-                          ) : (
-                            <Icon name={downSVG} size="20px" />
-                          )}
-                        </Accordion.Title>
-                        <Accordion.Content
-                          active={metadataFieldsets.includes(fieldset.id)}
+                        <div
+                          key={fieldset.id}
+                          id={`metadataform-fieldset-${fieldset.id}`}
                         >
-                          <Segment className="attached">
-                            {map(fieldset.fields, (field, index) => (
-                              <Field
-                                {...schema.properties[field]}
-                                id={field}
-                                fieldSet={fieldset.title.toLowerCase()}
-                                formData={formData}
-                                focus={this.state.inFocus[field]}
-                                value={formData?.[field]}
-                                required={schema.required.indexOf(field) !== -1}
-                                onChange={this.onChangeField}
-                                onBlur={this.onBlurField}
-                                onClick={this.onClickInput}
-                                key={field}
-                                error={this.state.errors[field]}
-                              />
-                            ))}
-                          </Segment>
-                        </Accordion.Content>
-                      </div>
-                    </Accordion>
-                  ))}
-              </UiForm>
-            </Portal>
-          )}
-        </Container>
+                          <Accordion.Title
+                            active={metadataFieldsets.includes(fieldset.id)}
+                            index={fieldset.id}
+                            onClick={this.onToggleMetadataFieldset}
+                          >
+                            {fieldset.title}
+                            {metadataFieldsets.includes(fieldset.id) ? (
+                              <Icon name={upSVG} size="20px" />
+                            ) : (
+                              <Icon name={downSVG} size="20px" />
+                            )}
+                          </Accordion.Title>
+                          <Accordion.Content
+                            active={metadataFieldsets.includes(fieldset.id)}
+                          >
+                            <Segment className="attached">
+                              {map(fieldset.fields, (field, index) => (
+                                <Field
+                                  {...schema.properties[field]}
+                                  id={field}
+                                  fieldSet={fieldset.title.toLowerCase()}
+                                  formData={formData}
+                                  focus={this.state.inFocus[field]}
+                                  value={formData?.[field]}
+                                  required={
+                                    schema.required.indexOf(field) !== -1
+                                  }
+                                  onChange={this.onChangeField}
+                                  onBlur={this.onBlurField}
+                                  onClick={this.onClickInput}
+                                  key={field}
+                                  error={this.state.errors[field]}
+                                />
+                              ))}
+                            </Segment>
+                          </Accordion.Content>
+                        </div>
+                      </Accordion>
+                    ))}
+                </UiForm>,
+                document.getElementById('sidebar-metadata'),
+              )}
+
+            <SlotRenderer
+              name="belowContent"
+              content={this.props.content}
+              navRoot={navRoot}
+            />
+          </Container>
+        </>
       )
     ) : (
       <Container>
@@ -931,6 +956,7 @@ const FormIntl = injectIntl(Form, { forwardRef: true });
 export default compose(
   connect(
     (state, props) => ({
+      content: state.content.data,
       globalData: state.form?.global,
       metadataFieldsets: state.sidebar?.metadataFieldsets,
       metadataFieldFocus: state.sidebar?.metadataFieldFocus,

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

@@ -18,6 +18,13 @@ describe('Form', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

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

@@ -3,7 +3,6 @@ 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';
 

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>
     );
   }