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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
@@ -10,9 +10,8 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('@plone/volto/components/manage/Widgets');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Aliases', () => {
   it('renders an aliases control component', () => {
@@ -59,14 +58,15 @@ describe('Aliases', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Aliases location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/ContentType.jsx

@@ -8,12 +8,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { getParentUrl } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Header } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import { last, nth, join } from 'lodash';
-import { Error, Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getControlpanel, updateControlpanel } from '@plone/volto/actions';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -210,8 +211,8 @@ class ContentType extends Component {
             hideActions
             loading={this.props.cpanelRequest.update.loading}
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -248,9 +249,9 @@ class ContentType extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
         </div>
       );
     }

package/src/components/manage/Controlpanels/ContentType.test.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { render } from '@testing-library/react';
 
 import ContentType from './ContentType';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('ContentType', () => {
   it('renders dexterity content-type component', () => {
@@ -35,7 +33,8 @@ describe('ContentType', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter
           initialEntries={['/controlpanel/dexterity-types/Document']}
@@ -44,10 +43,11 @@ describe('ContentType', () => {
             path={'/controlpanel/dexterity-types/:id'}
             component={ContentType}
           />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/ContentTypeLayout.jsx

@@ -14,19 +14,13 @@ import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Segment } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { nth, join } from 'lodash';
-import {
-  Error,
-  Form,
-  Icon,
-  Toolbar,
-  Sidebar,
-  Toast,
-} from '@plone/volto/components';
+import { Error, Icon, Toolbar, Sidebar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   getSchema,
   updateSchema,
@@ -343,26 +337,30 @@ class ContentTypeLayout extends Component {
               content={this.props.intl.formatMessage(messages.enable)}
             />
           </Segment>
-          <Portal
-            node={this.state.isClient && document.getElementById('toolbar')}
-          >
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Link className="item" to="#" onClick={() => this.onCancel()}>
-                    <Icon
-                      name={backSVG}
-                      size="30px"
-                      className="contents circled"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                </>
-              }
-            />
-          </Portal>
+          {this.state.isClient &&
+            createPortal(
+              <Toolbar
+                pathname={this.props.pathname}
+                hideDefaultViewButtons
+                inner={
+                  <>
+                    <Link
+                      className="item"
+                      to="#"
+                      onClick={() => this.onCancel()}
+                    >
+                      <Icon
+                        name={backSVG}
+                        size="30px"
+                        className="contents circled"
+                        title={this.props.intl.formatMessage(messages.back)}
+                      />
+                    </Link>
+                  </>
+                }
+              />,
+              document.getElementById('toolbar'),
+            )}
         </>
       );
     }
@@ -392,26 +390,30 @@ class ContentTypeLayout extends Component {
               content={this.props.intl.formatMessage(messages.enable)}
             />
           </Segment>
-          <Portal
-            node={this.state.isClient && document.getElementById('toolbar')}
-          >
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Link className="item" to="#" onClick={() => this.onCancel()}>
-                    <Icon
-                      name={backSVG}
-                      size="30px"
-                      className="contents circled"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                </>
-              }
-            />
-          </Portal>
+          {this.state.isClient &&
+            createPortal(
+              <Toolbar
+                pathname={this.props.pathname}
+                hideDefaultViewButtons
+                inner={
+                  <>
+                    <Link
+                      className="item"
+                      to="#"
+                      onClick={() => this.onCancel()}
+                    >
+                      <Icon
+                        name={backSVG}
+                        size="30px"
+                        className="contents circled"
+                        title={this.props.intl.formatMessage(messages.back)}
+                      />
+                    </Link>
+                  </>
+                }
+              />,
+              document.getElementById('toolbar'),
+            )}
         </>
       );
     }
@@ -449,50 +451,50 @@ class ContentTypeLayout extends Component {
           visual={this.state.visual}
           hideActions
         />
-        <Portal
-          node={this.state.isClient && document.getElementById('sidebar')}
-        >
-          <Sidebar settingsTab={true} documentTab={false} />
-        </Portal>
-        <Portal
-          node={this.state.isClient && document.getElementById('toolbar')}
-        >
-          <Toolbar
-            pathname={this.props.pathname}
-            hideDefaultViewButtons
-            inner={
-              <>
-                <Button
-                  id="toolbar-save"
-                  className="save"
-                  aria-label={this.props.intl.formatMessage(messages.save)}
-                  onClick={() => this.form.current.onSubmit()}
-                  disabled={this.props.schemaRequest.update.loading}
-                  loading={this.props.schemaRequest.update.loading}
-                >
-                  <Icon
-                    name={saveSVG}
-                    className="circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.save)}
-                  />
-                </Button>
-                <Button
-                  className="cancel"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  onClick={() => this.onCancel()}
-                >
-                  <Icon
-                    name={clearSVG}
-                    className="circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.cancel)}
-                  />
-                </Button>
-              </>
-            }
-          />
-        </Portal>
+        {this.state.isClient &&
+          createPortal(
+            <Sidebar settingsTab={true} documentTab={false} />,
+            document.getElementById('sidebar'),
+          )}
+        {this.state.isClient &&
+          createPortal(
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Button
+                    id="toolbar-save"
+                    className="save"
+                    aria-label={this.props.intl.formatMessage(messages.save)}
+                    onClick={() => this.form.current.onSubmit()}
+                    disabled={this.props.schemaRequest.update.loading}
+                    loading={this.props.schemaRequest.update.loading}
+                  >
+                    <Icon
+                      name={saveSVG}
+                      className="circled"
+                      size="30px"
+                      title={this.props.intl.formatMessage(messages.save)}
+                    />
+                  </Button>
+                  <Button
+                    className="cancel"
+                    aria-label={this.props.intl.formatMessage(messages.cancel)}
+                    onClick={() => this.onCancel()}
+                  >
+                    <Icon
+                      name={clearSVG}
+                      className="circled"
+                      size="30px"
+                      title={this.props.intl.formatMessage(messages.cancel)}
+                    />
+                  </Button>
+                </>
+              }
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Controlpanels/ContentTypeLayout.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, Route } from 'react-router-dom';
@@ -8,9 +8,8 @@ import ContentTypeLayout from './ContentTypeLayout';
 
 const mockStore = configureStore();
 
-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 id="form" />));
 
 describe('ContentTypeLayout', () => {
@@ -38,7 +37,7 @@ describe('ContentTypeLayout', () => {
         schema: null,
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter
           initialEntries={['/controlpanel/dexterity-types/Document/layout']}
@@ -47,10 +46,11 @@ describe('ContentTypeLayout', () => {
             path={'/controlpanel/dexterity-types/:id/layout'}
             component={ContentTypeLayout}
           />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/ContentTypeSchema.jsx

@@ -6,13 +6,14 @@
 import { getSchema, putSchema } from '@plone/volto/actions';
 import { getParentUrl } from '@plone/volto/helpers';
 import { nth } from 'lodash';
-import { Error, Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Error, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 import { compose } from 'redux';
@@ -283,8 +284,8 @@ class ContentTypeSchema extends Component {
             onCancel={this.onCancel}
             hideActions
           />
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -321,9 +322,9 @@ class ContentTypeSchema extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
         </div>
       );
     }

package/src/components/manage/Controlpanels/ContentTypes.jsx

@@ -9,19 +9,13 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { getParentUrl } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { last } from 'lodash';
 import { Confirm, Container, Table, Button, Header } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import {
-  Error,
-  Icon,
-  ModalForm,
-  Toolbar,
-  Toast,
-  ContentTypesActions,
-} from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import ContentTypesActions from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
 import {
   getControlpanel,
   postControlpanel,
@@ -31,6 +25,7 @@ import { getId } from '@plone/volto/helpers';
 
 import addSVG from '@plone/volto/icons/add-document.svg';
 import backSVG from '@plone/volto/icons/back.svg';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   add: {
@@ -457,8 +452,8 @@ class ContentTypes extends Component {
             </section>
           </article>
         </Container>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -490,9 +485,9 @@ class ContentTypes extends Component {
                   </Button>
                 </>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/manage/Controlpanels/ContentTypes.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, Route } from 'react-router-dom';
@@ -8,9 +8,8 @@ import ContentTypes from './ContentTypes';
 
 const mockStore = configureStore();
 
-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 id="form" />));
 
 describe('ContentTypes', () => {
@@ -60,14 +59,15 @@ describe('ContentTypes', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter initialEntries={['/controlpanel/dexterity-types']}>
           <Route path={'/controlpanel/:id'} component={ContentTypes} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/manage/Controlpanels/Controlpanel.jsx

@@ -9,12 +9,13 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import { Helmet } from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Container } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import { Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updateControlpanel, getControlpanel } from '@plone/volto/actions';
 
 import config from '@plone/volto/registry';
@@ -167,8 +168,8 @@ class Controlpanel extends Component {
               loading={this.props.updateRequest.loading}
             />
           </Container>
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
+          {this.state.isClient &&
+            createPortal(
               <Toolbar
                 pathname={this.props.pathname}
                 hideDefaultViewButtons
@@ -205,9 +206,9 @@ class Controlpanel extends Component {
                     </Button>
                   </>
                 }
-              />
-            </Portal>
-          )}
+              />,
+              document.getElementById('toolbar'),
+            )}
         </div>
       );
     }

package/src/components/manage/Controlpanels/Controlpanel.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, Route } from 'react-router-dom';
@@ -8,10 +8,8 @@ import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
+jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Controlpanel', () => {
   it('renders a controlpanel component', () => {
@@ -36,14 +34,15 @@ describe('Controlpanel', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
           <Route path={'/controlpanel/:id'} component={Controlpanel} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });