From 3a5d0d921322045a5135c78aff550495c3dfc83d Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Mon, 28 Oct 2019 08:04:46 +0100
Subject: [PATCH 01/18] First working version of lazy loading components

---
 babel.js                                      |  1 +
 package.json                                  |  7 +-
 razzle.config.js                              | 20 ++++
 src/components/index.js                       | 50 +++++-----
 src/components/manage/Actions/Actions.jsx     |  8 +-
 .../manage/Actions/Actions.test.jsx           | 12 ++-
 .../__snapshots__/Actions.test.jsx.snap       | 46 ++++------
 src/components/manage/Add/Add.jsx             |  5 +-
 src/components/manage/Contents/Contents.jsx   |  8 +-
 .../Contents/ContentsPropertiesModal.jsx      |  5 +-
 .../Contents/ContentsPropertiesModal.test.jsx | 13 ++-
 .../manage/Contents/ContentsRenameModal.jsx   |  5 +-
 .../Contents/ContentsRenameModal.test.jsx     | 13 ++-
 .../manage/Contents/ContentsTagsModal.jsx     |  5 +-
 .../Contents/ContentsTagsModal.test.jsx       | 13 ++-
 .../manage/Contents/ContentsWorkflowModal.jsx |  5 +-
 .../manage/Controlpanels/Controlpanel.jsx     |  6 +-
 .../manage/Controlpanels/Controlpanels.jsx    |  5 +-
 .../manage/Controlpanels/ModerateComments.jsx |  5 +-
 .../Controlpanels/UsersControlpanel.jsx       | 11 ++-
 src/components/manage/Delete/Delete.jsx       |  5 +-
 src/components/manage/Diff/Diff.jsx           |  5 +-
 src/components/manage/Edit/Edit.jsx           |  5 +-
 src/components/manage/History/History.jsx     |  5 +-
 .../manage/Preferences/ChangePassword.jsx     |  6 +-
 .../Preferences/PersonalInformation.jsx       |  5 +-
 .../Preferences/PersonalPreferences.jsx       |  5 +-
 src/components/manage/Sharing/Sharing.jsx     |  5 +-
 .../manage/Widgets/SchemaWidget.jsx           |  8 +-
 src/components/manage/Workflow/Workflow.jsx   |  6 +-
 .../theme/Comments/CommentEditModal.jsx       |  5 +-
 .../theme/Comments/CommentEditModal.test.jsx  | 13 ++-
 .../theme/ContactForm/ContactForm.jsx         |  6 +-
 src/components/theme/Login/Login.jsx          |  5 +-
 src/components/theme/Logout/Logout.jsx        |  2 +-
 src/components/theme/Register/Register.jsx    |  5 +-
 src/components/theme/Search/Search.jsx        |  5 +-
 src/components/theme/View/View.jsx            |  5 +-
 src/config/Views.jsx                          | 14 ++-
 src/helpers/Html/Html.jsx                     | 27 +++---
 src/helpers/Html/Html.test.jsx                | 13 ++-
 .../Html/__snapshots__/Html.test.jsx.snap     | 10 +-
 src/routes.js                                 | 91 ++++++++++++++-----
 src/server.jsx                                | 21 +++--
 src/start-client.jsx                          | 23 +++--
 yarn.lock                                     | 29 ++++++
 46 files changed, 394 insertions(+), 178 deletions(-)

diff --git a/babel.js b/babel.js
index e524303611..c74f316940 100644
--- a/babel.js
+++ b/babel.js
@@ -33,6 +33,7 @@ module.exports = function(api) {
         messagesDir: './build/messages/',
       },
     ],
+    '@loadable/babel-plugin',
   ];
 
   return {
diff --git a/package.json b/package.json
index 9672311fef..8dac110fc9 100644
--- a/package.json
+++ b/package.json
@@ -168,6 +168,10 @@
     "@babel/plugin-proposal-throw-expressions": "7.2.0",
     "@babel/plugin-syntax-import-meta": "7.2.0",
     "@babel/preset-stage-0": "7.0.0",
+    "@loadable/babel-plugin": "5.10.3",
+    "@loadable/component": "5.10.3",
+    "@loadable/server": "5.10.3",
+    "@loadable/webpack-plugin": "5.7.1",
     "@testing-library/cypress": "5.0.2",
     "@testing-library/jest-dom": "4.2.0",
     "@testing-library/react": "9.3.0",
@@ -285,6 +289,5 @@
     "svgo-loader": "2.1.0",
     "tlds": "1.203.1",
     "xmlrpc": "1.3.2"
-  },
-  "devDependencies": {}
+  }
 }
diff --git a/razzle.config.js b/razzle.config.js
index 8c16b41141..d3822b0871 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -9,6 +9,7 @@ const autoprefixer = require('autoprefixer');
 const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
 const nodeExternals = require('webpack-node-externals');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const LoadablePlugin = require('@loadable/webpack-plugin');
 const fs = require('fs');
 const { map } = require('lodash');
 const glob = require('glob').sync;
@@ -125,6 +126,25 @@ module.exports = {
           __SERVER__: false,
         }),
       );
+
+      config.plugins.push(
+        new LoadablePlugin({
+          outputAsset: false,
+          writeToDisk: { filename: path.resolve(__dirname, 'build') },
+        }),
+      );
+
+      config.output.filename = dev
+        ? 'static/js/[name].js'
+        : 'static/js/[name].[chunkhash:8].js';
+
+      config.optimization = Object.assign({}, config.optimization, {
+        runtimeChunk: true,
+        splitChunks: {
+          chunks: 'all',
+          name: dev,
+        },
+      });
     }
 
     if (target === 'node') {
diff --git a/src/components/index.js b/src/components/index.js
index f11b41fb51..235f353a72 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,7 +5,7 @@
  */
 export Anontools from '@plone/volto/components/theme/Anontools/Anontools';
 export Breadcrumbs from '@plone/volto/components/theme/Breadcrumbs/Breadcrumbs';
-export ContactForm from '@plone/volto/components/theme/ContactForm/ContactForm';
+// export ContactForm from '@plone/volto/components/theme/ContactForm/ContactForm';
 export Footer from '@plone/volto/components/theme/Footer/Footer';
 export Header from '@plone/volto/components/theme/Header/Header';
 export Icon from '@plone/volto/components/theme/Icon/Icon';
@@ -13,32 +13,32 @@ export Logo from '@plone/volto/components/theme/Logo/Logo';
 export Navigation from '@plone/volto/components/theme/Navigation/Navigation';
 export SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
 export Title from '@plone/volto/components/theme/Title/Title';
-export App from '@plone/volto/components/theme/App/App';
+// export App from '@plone/volto/components/theme/App/App';
 export DefaultView from '@plone/volto/components/theme/View/DefaultView';
 export FileView from '@plone/volto/components/theme/View/FileView';
 export ImageView from '@plone/volto/components/theme/View/ImageView';
 export NewsItemView from '@plone/volto/components/theme/View/NewsItemView';
 export ListingView from '@plone/volto/components/theme/View/ListingView';
-export Login from '@plone/volto/components/theme/Login/Login';
-export Logout from '@plone/volto/components/theme/Logout/Logout';
-export NotFound from '@plone/volto/components/theme/NotFound/NotFound';
+// export Login from '@plone/volto/components/theme/Login/Login';
+// export Logout from '@plone/volto/components/theme/Logout/Logout';
+// export NotFound from '@plone/volto/components/theme/NotFound/NotFound';
 export Pagination from '@plone/volto/components/theme/Pagination/Pagination';
 export SummaryView from '@plone/volto/components/theme/View/SummaryView';
-export Search from '@plone/volto/components/theme/Search/Search';
+// export Search from '@plone/volto/components/theme/Search/Search';
 export SearchTags from '@plone/volto/components/theme/Search/SearchTags';
 export TabularView from '@plone/volto/components/theme/View/TabularView';
-export View from '@plone/volto/components/theme/View/View';
+// export View from '@plone/volto/components/theme/View/View';
 export Comments from '@plone/volto/components/theme/Comments/Comments';
 export CommentEditModal from '@plone/volto/components/theme/Comments/CommentEditModal';
 export SocialSharing from '@plone/volto/components/theme/SocialSharing/SocialSharing';
 export Tags from '@plone/volto/components/theme/Tags/Tags';
-export Register from '@plone/volto/components/theme/Register/Register';
-export PasswordReset from '@plone/volto/components/theme/PasswordReset/PasswordReset';
-export RequestPasswordReset from '@plone/volto/components/theme/PasswordReset/RequestPasswordReset';
+// export Register from '@plone/volto/components/theme/Register/Register';
+// export PasswordReset from '@plone/volto/components/theme/PasswordReset/PasswordReset';
+// export RequestPasswordReset from '@plone/volto/components/theme/PasswordReset/RequestPasswordReset';
 
 export Actions from '@plone/volto/components/manage/Actions/Actions';
-export Add from '@plone/volto/components/manage/Add/Add';
-export Contents from '@plone/volto/components/manage/Contents/Contents';
+// export Add from '@plone/volto/components/manage/Add/Add';
+// export Contents from '@plone/volto/components/manage/Contents/Contents';
 export ContentsIndexHeader from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
 export ContentsItem from '@plone/volto/components/manage/Contents/ContentsItem';
 export ContentsUploadModal from '@plone/volto/components/manage/Contents/ContentsUploadModal';
@@ -46,24 +46,24 @@ export ContentsPropertiesModal from '@plone/volto/components/manage/Contents/Con
 export ContentsRenameModal from '@plone/volto/components/manage/Contents/ContentsRenameModal';
 export ContentsWorkflowModal from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
 export ContentsTagsModal from '@plone/volto/components/manage/Contents/ContentsTagsModal';
-export Controlpanel from '@plone/volto/components/manage/Controlpanels/Controlpanel';
-export Controlpanels from '@plone/volto/components/manage/Controlpanels/Controlpanels';
-export ModerateComments from '@plone/volto/components/manage/Controlpanels/ModerateComments';
-export UsersControlpanel from '@plone/volto/components/manage/Controlpanels/UsersControlpanel';
+// export Controlpanel from '@plone/volto/components/manage/Controlpanels/Controlpanel';
+// export Controlpanels from '@plone/volto/components/manage/Controlpanels/Controlpanels';
+// export ModerateComments from '@plone/volto/components/manage/Controlpanels/ModerateComments';
+// export UsersControlpanel from '@plone/volto/components/manage/Controlpanels/UsersControlpanel';
 export UsersControlpanelGroups from '@plone/volto/components/manage/Controlpanels/UsersControlpanelGroups';
 export VersionOverview from '@plone/volto/components/manage/Controlpanels/VersionOverview';
-export Delete from '@plone/volto/components/manage/Delete/Delete';
+// export Delete from '@plone/volto/components/manage/Delete/Delete';
 export UsersControlpanelUser from '@plone/volto/components/manage/Controlpanels/UsersControlpanelUser';
-export Diff from '@plone/volto/components/manage/Diff/Diff';
+// export Diff from '@plone/volto/components/manage/Diff/Diff';
 export DiffField from '@plone/volto/components/manage/Diff/DiffField';
 export Display from '@plone/volto/components/manage/Display/Display';
-export Edit from '@plone/volto/components/manage/Edit/Edit';
+// export Edit from '@plone/volto/components/manage/Edit/Edit';
 export Form from '@plone/volto/components/manage/Form/Form';
 export Field from '@plone/volto/components/manage/Form/Field';
-export ModalForm from '@plone/volto/components/manage/Form/ModalForm';
-export History from '@plone/volto/components/manage/History/History';
+// export ModalForm from '@plone/volto/components/manage/Form/ModalForm';
+// export History from '@plone/volto/components/manage/History/History';
 export Messages from '@plone/volto/components/manage/Messages/Messages';
-export ChangePassword from '@plone/volto/components/manage/Preferences/ChangePassword';
+// export ChangePassword from '@plone/volto/components/manage/Preferences/ChangePassword';
 export PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
 export PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
 export ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
@@ -78,10 +78,10 @@ export SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 export SidebarTextWidget from '@plone/volto/components/manage/Widgets/SidebarTextWidget';
 export Sidebar from '@plone/volto/components/manage/Sidebar/Sidebar';
 export SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
-export Sharing from '@plone/volto/components/manage/Sharing/Sharing';
+// export Sharing from '@plone/volto/components/manage/Sharing/Sharing';
 export TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
 export TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
-export Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
+// export Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 export WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
 export Workflow from '@plone/volto/components/manage/Workflow/Workflow';
 
@@ -111,4 +111,4 @@ export ImageSidebar from '@plone/volto/components/manage/Sidebar/ImageSidebar';
 export PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
 export More from '@plone/volto/components/manage/Toolbar/More';
 export Types from '@plone/volto/components/manage/Toolbar/Types';
-export Toast from '@plone/volto/components/manage/Toast/Toast';
+// export Toast from '@plone/volto/components/manage/Toast/Toast';
diff --git a/src/components/manage/Actions/Actions.jsx b/src/components/manage/Actions/Actions.jsx
index 81b17f2073..868fd53b71 100644
--- a/src/components/manage/Actions/Actions.jsx
+++ b/src/components/manage/Actions/Actions.jsx
@@ -11,10 +11,16 @@ import { Link } from 'react-router-dom';
 import { Dropdown, Icon } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { cut, copy, copyContent, moveContent } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
-import { ContentsRenameModal, Toast } from '../../../components';
+// import { ContentsRenameModal, Toast } from '../../../components';
+
+const ContentsRenameModal = loadable(() =>
+  import('../Contents/ContentsRenameModal'),
+);
+const Toast = loadable(() => import('../Toast/Toast'));
 
 const messages = defineMessages({
   cut: {
diff --git a/src/components/manage/Actions/Actions.test.jsx b/src/components/manage/Actions/Actions.test.jsx
index ba2032f6a1..73934675f2 100644
--- a/src/components/manage/Actions/Actions.test.jsx
+++ b/src/components/manage/Actions/Actions.test.jsx
@@ -1,8 +1,9 @@
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { render, wait } from '@testing-library/react';
 
 import Actions from './Actions';
 
@@ -13,7 +14,7 @@ jest.mock('../Contents/ContentsRenameModal', () =>
 );
 
 describe('Actions', () => {
-  it('renders an actions component', () => {
+  it('renders an actions component', async () => {
     const store = mockStore({
       actions: {
         actions: {
@@ -121,14 +122,15 @@ describe('Actions', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Actions pathname="/test" />
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap b/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap
index 3b86004e99..af0da70919 100644
--- a/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap
+++ b/src/components/manage/Actions/__snapshots__/Actions.test.jsx.snap
@@ -2,91 +2,81 @@
 
 exports[`Actions renders an actions component 1`] = `
 <div
-  aria-expanded={false}
-  className="ui item dropdown"
+  aria-expanded="false"
+  class="ui item dropdown"
   id="toolbar-actions"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onMouseDown={[Function]}
   role="listbox"
-  tabIndex={0}
+  tabindex="0"
 >
   <span>
     <i
       aria-hidden="true"
-      className="lightning big icon"
+      class="lightning big icon"
     />
      
     Actions
   </span>
   <i
     aria-hidden="true"
-    className="dropdown icon"
-    onClick={[Function]}
+    class="dropdown icon"
   />
   <div
-    className="menu transition"
+    class="menu transition"
   >
     <div
-      className="item"
-      onClick={[Function]}
+      class="item"
       role="option"
     >
       <i
         aria-hidden="true"
-        className="cut icon"
+        class="cut icon"
       />
       <span
-        className="text"
+        class="text"
       >
         Cut
       </span>
     </div>
     <div
-      className="item"
-      onClick={[Function]}
+      class="item"
       role="option"
     >
       <i
         aria-hidden="true"
-        className="copy icon"
+        class="copy icon"
       />
       <span
-        className="text"
+        class="text"
       >
         Copy
       </span>
     </div>
     <a
-      className="item"
+      class="item"
       href="/test/delete"
-      onClick={[Function]}
     >
       <i
         aria-hidden="true"
-        className="trash icon"
+        class="trash icon"
       />
       Delete
     </a>
     <div
-      className="item"
-      onClick={[Function]}
+      class="item"
       role="option"
     >
       <i
         aria-hidden="true"
-        className="text cursor icon"
+        class="text cursor icon"
       />
       <span
-        className="text"
+        class="text"
       >
         Rename
       </span>
     </div>
     <div
-      className="RenameModal"
+      class="RenameModal"
     />
   </div>
 </div>
diff --git a/src/components/manage/Add/Add.jsx b/src/components/manage/Add/Add.jsx
index fc1bdde6fc..0552328194 100644
--- a/src/components/manage/Add/Add.jsx
+++ b/src/components/manage/Add/Add.jsx
@@ -14,10 +14,11 @@ import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 import { settings } from '~/config';
 
 import { createContent, getSchema } from '../../../actions';
-import { Form, Icon, Toolbar, Sidebar } from '../../../components';
+import { Form, Icon /*, Toolbar */, Sidebar } from '../../../components';
 import {
   getBaseUrl,
   hasTilesData,
@@ -28,6 +29,8 @@ import {
 import saveSVG from '../../../icons/save.svg';
 import clearSVG from '../../../icons/clear.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   add: {
     id: 'Add {type}',
diff --git a/src/components/manage/Contents/Contents.jsx b/src/components/manage/Contents/Contents.jsx
index 899d0619ed..02bc83269a 100644
--- a/src/components/manage/Contents/Contents.jsx
+++ b/src/components/manage/Contents/Contents.jsx
@@ -57,14 +57,18 @@ import {
   ContentsTagsModal,
   ContentsPropertiesModal,
   Pagination,
-  Toolbar,
-  Toast,
+  // Toolbar,
+  // Toast,
   Icon as IconNext,
 } from '../../../components';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toast = loadable(() => import('../Toast/Toast'));
+const Toolbar = loadable(() => import('../Toolbar/Toolbar'));
+
 const defaultIndexes = ['ModificationDate', 'EffectiveDate', 'review_state'];
 const messages = defineMessages({
   back: {
diff --git a/src/components/manage/Contents/ContentsPropertiesModal.jsx b/src/components/manage/Contents/ContentsPropertiesModal.jsx
index 2190127ea4..528b84061c 100644
--- a/src/components/manage/Contents/ContentsPropertiesModal.jsx
+++ b/src/components/manage/Contents/ContentsPropertiesModal.jsx
@@ -9,9 +9,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { isEmpty, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { updateContent } from '../../../actions';
-import { ModalForm } from '../../../components';
+// import { ModalForm } from '../../../components';
+
+const ModalForm = loadable(() => import('../Form/ModalForm'));
 
 const messages = defineMessages({
   properties: {
diff --git a/src/components/manage/Contents/ContentsPropertiesModal.test.jsx b/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
index dd4a2b65bf..060ff31276 100644
--- a/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
+++ b/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
@@ -1,7 +1,8 @@
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { render, wait } from '@testing-library/react';
 
 import ContentsPropertiesModal from './ContentsPropertiesModal';
 
@@ -10,7 +11,7 @@ const mockStore = configureStore();
 jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
 
 describe('ContentsPropertiesModal', () => {
-  it('renders a contents properties modal component', () => {
+  it('renders a contents properties modal component', async () => {
     const store = mockStore({
       content: {
         update: {
@@ -23,7 +24,7 @@ describe('ContentsPropertiesModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <ContentsPropertiesModal
           open
@@ -33,7 +34,9 @@ describe('ContentsPropertiesModal', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toBeEmpty();
+    await wait(() => {
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/manage/Contents/ContentsRenameModal.jsx b/src/components/manage/Contents/ContentsRenameModal.jsx
index 7ce6fdcaed..e0091ba363 100644
--- a/src/components/manage/Contents/ContentsRenameModal.jsx
+++ b/src/components/manage/Contents/ContentsRenameModal.jsx
@@ -9,9 +9,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { concat, merge, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { updateContent } from '../../../actions';
-import { ModalForm } from '../../../components';
+// import { ModalForm } from '../../../components';
+
+const ModalForm = loadable(() => import('../Form/ModalForm'));
 
 const messages = defineMessages({
   renameItems: {
diff --git a/src/components/manage/Contents/ContentsRenameModal.test.jsx b/src/components/manage/Contents/ContentsRenameModal.test.jsx
index c93de8f872..3adb6af784 100644
--- a/src/components/manage/Contents/ContentsRenameModal.test.jsx
+++ b/src/components/manage/Contents/ContentsRenameModal.test.jsx
@@ -1,7 +1,8 @@
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { render, wait } from '@testing-library/react';
 
 import ContentsRenameModal from './ContentsRenameModal';
 
@@ -10,7 +11,7 @@ const mockStore = configureStore();
 jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
 
 describe('ContentsRenameModal', () => {
-  it('renders a contents rename modal component', () => {
+  it('renders a contents rename modal component', async () => {
     const store = mockStore({
       content: {
         update: {
@@ -23,7 +24,7 @@ describe('ContentsRenameModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <ContentsRenameModal
           open
@@ -39,7 +40,9 @@ describe('ContentsRenameModal', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toBeEmpty();
+    await wait(() => {
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/manage/Contents/ContentsTagsModal.jsx b/src/components/manage/Contents/ContentsTagsModal.jsx
index 23abad89e8..aee6aa4c21 100644
--- a/src/components/manage/Contents/ContentsTagsModal.jsx
+++ b/src/components/manage/Contents/ContentsTagsModal.jsx
@@ -9,9 +9,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { without, union, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { updateContent } from '../../../actions';
-import { ModalForm } from '../../../components';
+// import { ModalForm } from '../../../components';
+
+const ModalForm = loadable(() => import('../Form/ModalForm'));
 
 const messages = defineMessages({
   default: {
diff --git a/src/components/manage/Contents/ContentsTagsModal.test.jsx b/src/components/manage/Contents/ContentsTagsModal.test.jsx
index 9d368a3160..af7628854c 100644
--- a/src/components/manage/Contents/ContentsTagsModal.test.jsx
+++ b/src/components/manage/Contents/ContentsTagsModal.test.jsx
@@ -1,7 +1,8 @@
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { render, wait } from '@testing-library/react';
 
 import ContentsTagsModal from './ContentsTagsModal';
 
@@ -10,7 +11,7 @@ const mockStore = configureStore();
 jest.mock('../Form/ModalForm', () => jest.fn(() => <div id="modalform" />));
 
 describe('ContentsTagsModal', () => {
-  it('renders a contents tags modal component', () => {
+  it('renders a contents tags modal component', async () => {
     const store = mockStore({
       content: {
         update: {
@@ -23,7 +24,7 @@ describe('ContentsTagsModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <ContentsTagsModal
           open
@@ -38,7 +39,9 @@ describe('ContentsTagsModal', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toBeEmpty();
+    await wait(() => {
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/manage/Contents/ContentsWorkflowModal.jsx b/src/components/manage/Contents/ContentsWorkflowModal.jsx
index 362e786f1c..c013a8084e 100644
--- a/src/components/manage/Contents/ContentsWorkflowModal.jsx
+++ b/src/components/manage/Contents/ContentsWorkflowModal.jsx
@@ -9,9 +9,12 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { concat, filter, last, map, uniqBy } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { getWorkflow, transitionWorkflow } from '../../../actions';
-import { ModalForm } from '../../../components';
+// import { ModalForm } from '../../../components';
+
+const ModalForm = loadable(() => import('../Form/ModalForm'));
 
 const messages = defineMessages({
   default: {
diff --git a/src/components/manage/Controlpanels/Controlpanel.jsx b/src/components/manage/Controlpanels/Controlpanel.jsx
index 3f6056211c..323c6d5c1e 100644
--- a/src/components/manage/Controlpanels/Controlpanel.jsx
+++ b/src/components/manage/Controlpanels/Controlpanel.jsx
@@ -13,12 +13,16 @@ import { Portal } from 'react-portal';
 import { Container } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
-import { Form, Icon, Toolbar, Toast } from '../../../components';
+import { Form, Icon /*, Toolbar, Toast */ } from '../../../components';
 import { updateControlpanel, getControlpanel } from '../../../actions';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   changesSaved: {
     id: 'Changes saved.',
diff --git a/src/components/manage/Controlpanels/Controlpanels.jsx b/src/components/manage/Controlpanels/Controlpanels.jsx
index 3ae8daa101..ce492f8986 100644
--- a/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -13,17 +13,20 @@ import { Portal } from 'react-portal';
 import Helmet from 'react-helmet';
 import { Container, Grid, Header, Icon, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import Icons from '../../../constants/ControlpanelIcons';
 import { listControlpanels } from '../../../actions';
 import {
   Icon as IconNext,
-  Toolbar,
+  // Toolbar,
   VersionOverview,
 } from '../../../components';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toolbar = loadable(() => import('../Toolbar/Toolbar'));
+
 const messages = defineMessages({
   sitesetup: {
     id: 'Site Setup',
diff --git a/src/components/manage/Controlpanels/ModerateComments.jsx b/src/components/manage/Controlpanels/ModerateComments.jsx
index 89483ca08b..7f7515abc7 100644
--- a/src/components/manage/Controlpanels/ModerateComments.jsx
+++ b/src/components/manage/Controlpanels/ModerateComments.jsx
@@ -13,13 +13,16 @@ import { Portal } from 'react-portal';
 import { Container, Button, Table } from 'semantic-ui-react';
 import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { deleteComment, searchContent } from '../../../actions';
-import { CommentEditModal, Icon, Toolbar } from '../../../components';
+import { CommentEditModal, Icon /*, Toolbar */ } from '../../../components';
 import { getBaseUrl } from '../../../helpers';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   back: {
     id: 'Back',
diff --git a/src/components/manage/Controlpanels/UsersControlpanel.jsx b/src/components/manage/Controlpanels/UsersControlpanel.jsx
index f218583879..3d18b06a9d 100644
--- a/src/components/manage/Controlpanels/UsersControlpanel.jsx
+++ b/src/components/manage/Controlpanels/UsersControlpanel.jsx
@@ -22,6 +22,7 @@ import {
 import { find, map, isEqual } from 'lodash';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import {
   createUser,
@@ -36,18 +37,22 @@ import {
 } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
 import {
-  ModalForm,
-  Toolbar,
+  // ModalForm,
+  // Toolbar,
   UsersControlpanelUser,
   Icon,
   UsersControlpanelGroups,
-  Toast,
+  // Toast,
 } from '../../../components';
 import addSvg from '../../../icons/circle-plus.svg';
 import backSVG from '../../../icons/back.svg';
 import saveSVG from '../../../icons/save.svg';
 import clearSVG from '../../../icons/clear.svg';
 
+const ModalForm = loadable(() => import('../Form/ModalForm'));
+const Toast = loadable(() => import('../Toast/Toast'));
+const Toolbar = loadable(() => import('../Toolbar/Toolbar'));
+
 const messages = defineMessages({
   searchUsers: {
     id: 'Search users...',
diff --git a/src/components/manage/Delete/Delete.jsx b/src/components/manage/Delete/Delete.jsx
index 7c0f979a6e..33b88a4209 100644
--- a/src/components/manage/Delete/Delete.jsx
+++ b/src/components/manage/Delete/Delete.jsx
@@ -13,9 +13,12 @@ import { Portal } from 'react-portal';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 
 import { deleteContent, getContent } from '../../../actions';
-import { Toolbar } from '../../../components';
+// import { Toolbar } from '../../../components';
+
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
 
 const messages = defineMessages({
   delete: {
diff --git a/src/components/manage/Diff/Diff.jsx b/src/components/manage/Diff/Diff.jsx
index ab552a8dba..74d9dc5b4a 100644
--- a/src/components/manage/Diff/Diff.jsx
+++ b/src/components/manage/Diff/Diff.jsx
@@ -15,13 +15,16 @@ import { Portal } from 'react-portal';
 import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 
 import { getDiff, getSchema, getHistory } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
-import { DiffField, Icon, Toolbar } from '../../../components';
+import { DiffField, Icon /*, Toolbar */ } from '../../../components';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   diff: {
     id: 'Diff',
diff --git a/src/components/manage/Edit/Edit.jsx b/src/components/manage/Edit/Edit.jsx
index b9a6744579..d9b6962ce3 100644
--- a/src/components/manage/Edit/Edit.jsx
+++ b/src/components/manage/Edit/Edit.jsx
@@ -13,14 +13,17 @@ import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 
-import { Form, Icon, Toolbar, Sidebar } from '../../../components';
+import { Form, Icon, /* Toolbar, */ Sidebar } from '../../../components';
 import { updateContent, getContent, getSchema } from '../../../actions';
 import { getBaseUrl, hasTilesData } from '../../../helpers';
 
 import saveSVG from '../../../icons/save.svg';
 import clearSVG from '../../../icons/clear.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   edit: {
     id: 'Edit {title}',
diff --git a/src/components/manage/History/History.jsx b/src/components/manage/History/History.jsx
index a655906b63..02aa56a9d3 100644
--- a/src/components/manage/History/History.jsx
+++ b/src/components/manage/History/History.jsx
@@ -14,13 +14,16 @@ import { concat, map, reverse } from 'lodash';
 import { Portal } from 'react-portal';
 import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
-import { Icon as IconNext, Toolbar } from '../../../components';
+import { Icon as IconNext /*, Toolbar */ } from '../../../components';
 import { getHistory, revertHistory } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   back: {
     id: 'Back',
diff --git a/src/components/manage/Preferences/ChangePassword.jsx b/src/components/manage/Preferences/ChangePassword.jsx
index 24ea214760..af93c15f71 100644
--- a/src/components/manage/Preferences/ChangePassword.jsx
+++ b/src/components/manage/Preferences/ChangePassword.jsx
@@ -14,13 +14,17 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
-import { Form, Icon, Toast, Toolbar } from '../../../components';
+import { Form, Icon /*, Toast, Toolbar */ } from '../../../components';
 import { updatePassword } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   changePassword: {
     id: 'Change Password',
diff --git a/src/components/manage/Preferences/PersonalInformation.jsx b/src/components/manage/Preferences/PersonalInformation.jsx
index 45fb895665..243f56ede9 100644
--- a/src/components/manage/Preferences/PersonalInformation.jsx
+++ b/src/components/manage/Preferences/PersonalInformation.jsx
@@ -10,10 +10,13 @@ import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
-import { Form, Toast } from '../../../components';
+import { Form /*, Toast */ } from '../../../components';
 import { getUser, updateUser } from '../../../actions';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+
 const messages = defineMessages({
   personalInformation: {
     id: 'Personal Information',
diff --git a/src/components/manage/Preferences/PersonalPreferences.jsx b/src/components/manage/Preferences/PersonalPreferences.jsx
index bf81a8cc88..9cfd993160 100644
--- a/src/components/manage/Preferences/PersonalPreferences.jsx
+++ b/src/components/manage/Preferences/PersonalPreferences.jsx
@@ -13,10 +13,13 @@ import cookie from 'react-cookie';
 import request from 'superagent';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
-import { Form, Toast } from '../../../components';
+import { Form /*, Toast */ } from '../../../components';
 import languages from '../../../constants/Languages';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+
 const messages = defineMessages({
   personalPreferences: {
     id: 'Personal Preferences',
diff --git a/src/components/manage/Sharing/Sharing.jsx b/src/components/manage/Sharing/Sharing.jsx
index 18d1be2838..2d632fb53d 100644
--- a/src/components/manage/Sharing/Sharing.jsx
+++ b/src/components/manage/Sharing/Sharing.jsx
@@ -22,13 +22,16 @@ import {
 } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { updateSharing, getSharing } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
-import { Icon as IconNext, Toolbar } from '../../../components';
+import { Icon as IconNext /*, Toolbar */ } from '../../../components';
 
 import backSVG from '../../../icons/back.svg';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   searchForUserOrGroup: {
     id: 'Search for user or group',
diff --git a/src/components/manage/Widgets/SchemaWidget.jsx b/src/components/manage/Widgets/SchemaWidget.jsx
index fdfe818586..0d21b7fb85 100644
--- a/src/components/manage/Widgets/SchemaWidget.jsx
+++ b/src/components/manage/Widgets/SchemaWidget.jsx
@@ -13,8 +13,14 @@ import { Confirm, Form, Grid, Icon, Message, Segment } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
+import loadable from '@loadable/component';
 
-import { Field, ModalForm, SchemaWidgetFieldset } from '../../../components';
+import {
+  Field /*, ModalForm */,
+  SchemaWidgetFieldset,
+} from '../../../components';
+
+const ModalForm = loadable(() => import('../Form/ModalForm'));
 
 const messages = defineMessages({
   addField: {
diff --git a/src/components/manage/Workflow/Workflow.jsx b/src/components/manage/Workflow/Workflow.jsx
index 95201d1d32..7caef1006e 100644
--- a/src/components/manage/Workflow/Workflow.jsx
+++ b/src/components/manage/Workflow/Workflow.jsx
@@ -11,6 +11,8 @@ import { uniqBy } from 'lodash';
 import Select, { components } from 'react-select';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
+
 import getWorkflowMapping from '../../../constants/Workflows';
 import { Icon } from '../../../components';
 import downSVG from '../../../icons/down-key.svg';
@@ -19,7 +21,9 @@ import checkSVG from '../../../icons/check.svg';
 
 import { getContent, getWorkflow, transitionWorkflow } from '../../../actions';
 import { settings } from '~/config';
-import { Toast } from '../../../components';
+// import { Toast } from '../../../components';
+
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
 
 const messages = defineMessages({
   messageUpdated: {
diff --git a/src/components/theme/Comments/CommentEditModal.jsx b/src/components/theme/Comments/CommentEditModal.jsx
index 8a1b2b23e4..ad63758501 100644
--- a/src/components/theme/Comments/CommentEditModal.jsx
+++ b/src/components/theme/Comments/CommentEditModal.jsx
@@ -8,9 +8,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
+import loadable from '@loadable/component';
 
 import { updateComment } from '../../../actions';
-import { ModalForm } from '../../../components';
+// import { ModalForm } from '../../../components';
+
+const ModalForm = loadable(() => import('../../manage/Form/ModalForm'));
 
 const messages = defineMessages({
   editComment: {
diff --git a/src/components/theme/Comments/CommentEditModal.test.jsx b/src/components/theme/Comments/CommentEditModal.test.jsx
index 3dd3b12538..711bd563f2 100644
--- a/src/components/theme/Comments/CommentEditModal.test.jsx
+++ b/src/components/theme/Comments/CommentEditModal.test.jsx
@@ -1,7 +1,8 @@
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { render, wait } from '@testing-library/react';
 
 import CommentEditModal from './CommentEditModal';
 
@@ -12,7 +13,7 @@ jest.mock('../../manage/Form/ModalForm', () =>
 );
 
 describe('CommentEditModal', () => {
-  it('renders a comment edit modal component', () => {
+  it('renders a comment edit modal component', async () => {
     const store = mockStore({
       comments: {
         update: {
@@ -25,7 +26,7 @@ describe('CommentEditModal', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <CommentEditModal
           open
@@ -36,7 +37,9 @@ describe('CommentEditModal', () => {
         />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container).toBeEmpty();
+    await wait(() => {
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/theme/ContactForm/ContactForm.jsx b/src/components/theme/ContactForm/ContactForm.jsx
index fc906d469a..c12498f3e8 100644
--- a/src/components/theme/ContactForm/ContactForm.jsx
+++ b/src/components/theme/ContactForm/ContactForm.jsx
@@ -13,11 +13,15 @@ import { Container, Message, Icon } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link, withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
-import { Form, Toolbar, Toast } from '../../';
+import { Form /*, Toolbar, Toast */ } from '../../';
 import { emailNotification } from '../../../actions';
 import { getBaseUrl } from '../../../helpers';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 const messages = defineMessages({
   send: {
     id: 'Send',
diff --git a/src/components/theme/Login/Login.jsx b/src/components/theme/Login/Login.jsx
index 1942ddc775..157f4614b2 100644
--- a/src/components/theme/Login/Login.jsx
+++ b/src/components/theme/Login/Login.jsx
@@ -24,11 +24,14 @@ import { withRouter } from 'react-router-dom';
 import { Icon } from '../../../components';
 import { login } from '../../../actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
+// import { Toast } from '@plone/volto/components';
+import loadable from '@loadable/component';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+
 const messages = defineMessages({
   login: {
     id: 'Log in',
diff --git a/src/components/theme/Logout/Logout.jsx b/src/components/theme/Logout/Logout.jsx
index 251dccaeab..d703b8d2e3 100644
--- a/src/components/theme/Logout/Logout.jsx
+++ b/src/components/theme/Logout/Logout.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import qs from 'query-string';
 
-import { Login } from '../../../components';
+import Login from '../Login/Login';
 import { logout, purgeMessages } from '../../../actions';
 
 /**
diff --git a/src/components/theme/Register/Register.jsx b/src/components/theme/Register/Register.jsx
index 86601a4f6b..5620e85e4f 100644
--- a/src/components/theme/Register/Register.jsx
+++ b/src/components/theme/Register/Register.jsx
@@ -11,10 +11,13 @@ import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
+import loadable from '@loadable/component';
 
-import { Form, Toast } from '../../../components';
+import { Form /*, Toast */ } from '../../../components';
 import { createUser } from '../../../actions';
 
+const Toast = loadable(() => import('../../manage/Toast/Toast'));
+
 const messages = defineMessages({
   title: {
     id: 'Registration form',
diff --git a/src/components/theme/Search/Search.jsx b/src/components/theme/Search/Search.jsx
index c2481a7d96..5008347ac8 100644
--- a/src/components/theme/Search/Search.jsx
+++ b/src/components/theme/Search/Search.jsx
@@ -14,10 +14,13 @@ import { FormattedMessage } from 'react-intl';
 import { Portal } from 'react-portal';
 import { Container } from 'semantic-ui-react';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 
 import { searchContent } from '../../../actions';
 
-import { SearchTags, Toolbar } from '../../../components';
+import { SearchTags /*, Toolbar */ } from '../../../components';
+
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
 
 const toSearchOptions = (searchableText, subject, path) => {
   return {
diff --git a/src/components/theme/View/View.jsx b/src/components/theme/View/View.jsx
index 6b8c555cdd..678a11b88e 100644
--- a/src/components/theme/View/View.jsx
+++ b/src/components/theme/View/View.jsx
@@ -10,12 +10,15 @@ import { compose } from 'redux';
 import { Portal } from 'react-portal';
 import { injectIntl } from 'react-intl';
 import qs from 'query-string';
+import loadable from '@loadable/component';
 import { views } from '~/config';
 
-import { Comments, Tags, Toolbar } from '../../../components';
+import { Comments, Tags /*, Toolbar */ } from '../../../components';
 import { listActions, getContent } from '../../../actions';
 import { BodyClass, getBaseUrl, getLayoutFieldname } from '../../../helpers';
 
+const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+
 /**
  * View container class.
  * @class View
diff --git a/src/config/Views.jsx b/src/config/Views.jsx
index c7e72eeafe..bf3dbafbcb 100644
--- a/src/config/Views.jsx
+++ b/src/config/Views.jsx
@@ -1,13 +1,21 @@
+import loadable from '@loadable/component';
 import DefaultView from '@plone/volto/components/theme/View/DefaultView';
-import FileView from '@plone/volto/components/theme/View/FileView';
-import ImageView from '@plone/volto/components/theme/View/ImageView';
 import ListingView from '@plone/volto/components/theme/View/ListingView';
-import NewsItemView from '@plone/volto/components/theme/View/NewsItemView';
 import SummaryView from '@plone/volto/components/theme/View/SummaryView';
 import TabularView from '@plone/volto/components/theme/View/TabularView';
 import LinkView from '@plone/volto/components/theme/View/LinkView';
 import NotFoundView from '@plone/volto/components/theme/NotFound/NotFound';
 
+const FileView = loadable(() =>
+  import('@plone/volto/components/theme/View/FileView'),
+);
+const ImageView = loadable(() =>
+  import('@plone/volto/components/theme/View/ImageView'),
+);
+const NewsItemView = loadable(() =>
+  import('@plone/volto/components/theme/View/NewsItemView'),
+);
+
 // Layout View Registry
 export const layoutViews = {
   summary_view: SummaryView,
diff --git a/src/helpers/Html/Html.jsx b/src/helpers/Html/Html.jsx
index 1e0abbabb4..a5a04d242e 100644
--- a/src/helpers/Html/Html.jsx
+++ b/src/helpers/Html/Html.jsx
@@ -39,11 +39,10 @@ class Html extends Component {
    * @static
    */
   static propTypes = {
-    assets: PropTypes.shape({
-      styles: PropTypes.object,
-      javascript: PropTypes.shape({
-        main: PropTypes.string,
-      }),
+    extractor: PropTypes.shape({
+      getLinkElements: PropTypes.func.isRequired,
+      getScriptElements: PropTypes.func.isRequired,
+      getStyleElements: PropTypes.func.isRequired,
     }).isRequired,
     markup: PropTypes.string.isRequired,
     store: PropTypes.shape({
@@ -57,7 +56,7 @@ class Html extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { assets, markup, store } = this.props;
+    const { extractor, markup, store } = this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
 
@@ -74,19 +73,19 @@ class Html extends Component {
           <link rel="shortcut icon" href="/favicon.ico" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
-          {assets.client.css ? (
-            <link rel="stylesheet" href={assets.client.css} />
-          ) : null}
-          {process.env.NODE_ENV === 'production' ? (
-            <script src={assets.client.js} defer />
-          ) : (
-            <script src={assets.client.js} defer crossOrigin="true" />
-          )}
+          {extractor.getLinkElements()}
+          {extractor.getStyleElements()}
         </head>
         <body className={bodyClass}>
           <div role="navigation" aria-label="Toolbar" id="toolbar" />
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
           <div id="sidebar" />
+          {extractor.getScriptElements().map(elem =>
+            React.cloneElement(elem, {
+              crossOrigin:
+                process.env.NODE_ENV === 'production' ? undefined : 'true',
+            }),
+          )}
           <script
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(store.getState())};`,
diff --git a/src/helpers/Html/Html.test.jsx b/src/helpers/Html/Html.test.jsx
index 19c3835185..23254fac13 100644
--- a/src/helpers/Html/Html.test.jsx
+++ b/src/helpers/Html/Html.test.jsx
@@ -30,11 +30,14 @@ describe('Html', () => {
   it('renders a html component', () => {
     const component = renderer.create(
       <Html
-        assets={{
-          client: {
-            css: 'style.css',
-            js: 'bundle.js',
-          },
+        extractor={{
+          getLinkElements: () => [
+            <link href="style.css" rel="stylesheet" key="style" />,
+          ],
+          getStyleElements: () => [],
+          getScriptElements: () => [
+            <script async src="bundle.js" key="bundle" />,
+          ],
         }}
         markup="<div />"
         store={{
diff --git a/src/helpers/Html/__snapshots__/Html.test.jsx.snap b/src/helpers/Html/__snapshots__/Html.test.jsx.snap
index e0bc9568fd..11aeceaf20 100644
--- a/src/helpers/Html/__snapshots__/Html.test.jsx.snap
+++ b/src/helpers/Html/__snapshots__/Html.test.jsx.snap
@@ -29,11 +29,6 @@ exports[`Html renders a html component 1`] = `
       href="style.css"
       rel="stylesheet"
     />
-    <script
-      crossOrigin="true"
-      defer={true}
-      src="bundle.js"
-    />
   </head>
   <body
     className="class1 class2"
@@ -54,6 +49,11 @@ exports[`Html renders a html component 1`] = `
     <div
       id="sidebar"
     />
+    <script
+      async={true}
+      crossOrigin="true"
+      src="bundle.js"
+    />
     <script
       charSet="UTF-8"
       dangerouslySetInnerHTML={
diff --git a/src/routes.js b/src/routes.js
index 07cff536ba..3f4603c02b 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,30 +2,73 @@
  * Routes.
  * @module routes
  */
-import {
-  Add,
-  App,
-  ChangePassword,
-  ContactForm,
-  Contents,
-  Controlpanel,
-  Controlpanels,
-  Edit,
-  Diff,
-  Delete,
-  History,
-  View,
-  NotFound,
-  Login,
-  Logout,
-  ModerateComments,
-  PasswordReset,
-  Register,
-  RequestPasswordReset,
-  Search,
-  Sharing,
-  UsersControlpanel,
-} from './components';
+import loadable from '@loadable/component';
+
+// import {
+// Add,
+// App,
+// ChangePassword,
+// ContactForm,
+// Contents,
+// Controlpanel,
+// Controlpanels,
+// Edit,
+// Diff,
+// Delete,
+// History,
+// View,
+// NotFound,
+// Login,
+// Logout,
+// ModerateComments,
+// PasswordReset,
+// Register,
+// RequestPasswordReset,
+// Search,
+// Sharing,
+// UsersControlpanel,
+// } from './components';
+
+const Add = loadable(() => import('./components/manage/Add/Add'));
+const App = loadable(() => import('./components/theme/App/App'));
+const ChangePassword = loadable(() =>
+  import('./components/manage/Preferences/ChangePassword'),
+);
+const ContactForm = loadable(() =>
+  import('./components/theme/ContactForm/ContactForm'),
+);
+const Contents = loadable(() =>
+  import('./components/manage/Contents/Contents'),
+);
+const Controlpanel = loadable(() =>
+  import('./components/manage/Controlpanels/Controlpanel'),
+);
+const Controlpanels = loadable(() =>
+  import('./components/manage/Controlpanels/Controlpanels'),
+);
+const Edit = loadable(() => import('./components/manage/Edit/Edit'));
+const Diff = loadable(() => import('./components/manage/Diff/Diff'));
+const Delete = loadable(() => import('./components/manage/Delete/Delete'));
+const History = loadable(() => import('./components/manage/History/History'));
+const View = loadable(() => import('./components/theme/View/View'));
+const NotFound = loadable(() => import('./components/theme/NotFound/NotFound'));
+const Login = loadable(() => import('./components/theme/Login/Login'));
+const Logout = loadable(() => import('./components/theme/Logout/Logout'));
+const ModerateComments = loadable(() =>
+  import('./components/manage/Controlpanels/ModerateComments'),
+);
+const PasswordReset = loadable(() =>
+  import('./components/theme/PasswordReset/PasswordReset'),
+);
+const Register = loadable(() => import('./components/theme/Register/Register'));
+const RequestPasswordReset = loadable(() =>
+  import('./components/theme/PasswordReset/RequestPasswordReset'),
+);
+const Search = loadable(() => import('./components/theme/Search/Search'));
+const Sharing = loadable(() => import('./components/manage/Sharing/Sharing'));
+const UsersControlpanel = loadable(() =>
+  import('./components/manage/Controlpanels/UsersControlpanel'),
+);
 
 /**
  * Default routes array.
diff --git a/src/server.jsx b/src/server.jsx
index 45e2068a94..6c7d61fd6e 100644
--- a/src/server.jsx
+++ b/src/server.jsx
@@ -10,6 +10,8 @@ import { keys } from 'lodash';
 import Raven from 'raven';
 import cookie, { plugToRequest } from 'react-cookie';
 import locale from 'locale';
+import path from 'path';
+import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
 
 import routes from '~/routes';
 import nlLocale from '~/../locales/nl.json';
@@ -73,6 +75,11 @@ server
       initialEntries: [req.url],
     });
 
+    const extractor = new ChunkExtractor({
+      statsFile: path.resolve('build/loadable-stats.json'),
+      entrypoints: ['client'],
+    });
+
     // Create a new Redux store instance
     const store = configureStore(initialState, history, api);
 
@@ -104,11 +111,13 @@ server
         .then(() => {
           const context = {};
           const markup = renderToString(
-            <Provider store={store}>
-              <StaticRouter context={context} location={req.url}>
-                <ReduxAsyncConnect routes={routes} helpers={api} />
-              </StaticRouter>
-            </Provider>,
+            <ChunkExtractorManager extractor={extractor}>
+              <Provider store={store}>
+                <StaticRouter context={context} location={req.url}>
+                  <ReduxAsyncConnect routes={routes} helpers={api} />
+                </StaticRouter>
+              </Provider>
+            </ChunkExtractorManager>,
           );
 
           if (context.url) {
@@ -117,7 +126,7 @@ server
             res.status(200).send(
               `<!doctype html>
                 ${renderToString(
-                  <Html assets={assets} markup={markup} store={store} />,
+                  <Html extractor={extractor} markup={markup} store={store} />,
                 )}
               `,
             );
diff --git a/src/start-client.jsx b/src/start-client.jsx
index 19331034d8..d58c8da94b 100644
--- a/src/start-client.jsx
+++ b/src/start-client.jsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-intl-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 import { ReduxAsyncConnect } from 'redux-connect';
+import { loadableReady } from '@loadable/component';
 import routes from '~/routes';
 import '~/theme';
 
@@ -18,14 +19,16 @@ export default () => {
   const store = configureStore(window.__data, history, api);
   persistAuthToken(store);
 
-  hydrate(
-    <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <ScrollToTop>
-          <ReduxAsyncConnect routes={routes} helpers={api} />
-        </ScrollToTop>
-      </ConnectedRouter>
-    </Provider>,
-    document.getElementById('main'),
-  );
+  loadableReady(() => {
+    hydrate(
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <ScrollToTop>
+            <ReduxAsyncConnect routes={routes} helpers={api} />
+          </ScrollToTop>
+        </ConnectedRouter>
+      </Provider>,
+      document.getElementById('main'),
+    );
+  });
 };
diff --git a/yarn.lock b/yarn.lock
index bfb187d007..90198509be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1051,6 +1051,35 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@loadable/babel-plugin@5.10.3":
+  version "5.10.3"
+  resolved "https://registry.yarnpkg.com/@loadable/babel-plugin/-/babel-plugin-5.10.3.tgz#faadbe38036b29e449640c3974acececbaeb5739"
+  integrity sha512-Izo4QX526f/Czvdot1izg0DtA5DfJEW5RUN28/9wt+62It4xKhVv9l0NNcTEL39xJXj7lsE4k5Z6eCBSETpHmw==
+  dependencies:
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
+"@loadable/component@5.10.3":
+  version "5.10.3"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.3.tgz#e1ad811ac4834a6ed187605d8464351d0c52896f"
+  integrity sha512-/aSO+tXw4vFMwZ6fgLaNQgLuEa7bgTpoBE4PxNzf08/ewAjymrCS3J7v3SbGE7IjGmmKL6vVwkpb7S3cYrk+ag==
+  dependencies:
+    "@babel/runtime" "^7.6.0"
+    hoist-non-react-statics "^3.3.0"
+
+"@loadable/server@5.10.3":
+  version "5.10.3"
+  resolved "https://registry.yarnpkg.com/@loadable/server/-/server-5.10.3.tgz#421e1af549d58d67a0a459cd4f2ae7bf20ab4bc6"
+  integrity sha512-rVwJdGhvzEPZSbMbU65C4TFao/CyF5wS4JeHd4dACjZKEQxlUD3m1IarwUKpdDdrum11J3Ug3PUJMFSlJ6pMSA==
+  dependencies:
+    lodash "^4.17.15"
+
+"@loadable/webpack-plugin@5.7.1":
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/@loadable/webpack-plugin/-/webpack-plugin-5.7.1.tgz#9fe4b19c347eaa72f8ff366ae9a9d2b724f86124"
+  integrity sha512-tURNYwPUahbM4Miz/mwMD+PZGnMpknRukwt4RViVX6tYOt06a5U92xJTv7t54C4tHdtCIEOmDrqCo97sfIu4mg==
+  dependencies:
+    mkdirp "^0.5.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"

From 6662b2a3f4d2c3983b208edae5ff74d74df3463f Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 29 Oct 2019 09:31:06 +0100
Subject: [PATCH 02/18] Changelog and cleanup

---
 CHANGELOG.md   | 1 +
 src/server.jsx | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f69eb1cf47..749147727c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
 - Remove Docker build from tests @sneridagh
 - Removed Enzyme @pnicolli
 - Added testing-library (react and cypress) @pnicolli
+- Added lazy loading for routes, toolbar and other components @pnicolli
 
 ## 4.0.0-alpha.9 (2019-10-09)
 
diff --git a/src/server.jsx b/src/server.jsx
index 6c7d61fd6e..2f5f927e87 100644
--- a/src/server.jsx
+++ b/src/server.jsx
@@ -34,8 +34,6 @@ import languages from './constants/Languages';
 
 import configureStore from './store';
 
-const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
-
 const supported = new locale.Locales(keys(languages), 'en');
 const locales = {
   en: enLocale,

From b9b0f344688ab081b53184cf5ad531d6aaf623f2 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Wed, 13 Nov 2019 21:25:48 +0100
Subject: [PATCH 03/18] Fixes path to loadable-stats.json in a Volto project

---
 razzle.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/razzle.config.js b/razzle.config.js
index e4c551b93b..12acd97b9e 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -130,7 +130,7 @@ module.exports = {
       config.plugins.push(
         new LoadablePlugin({
           outputAsset: false,
-          writeToDisk: { filename: path.resolve(__dirname, 'build') },
+          writeToDisk: { filename: path.resolve(`${projectRootPath}/build`) },
         }),
       );
 

From 24a6aa8b5ec0ee3c87af0e9387710b8946735d5c Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Wed, 13 Nov 2019 21:26:20 +0100
Subject: [PATCH 04/18] Fix duplicated js on Header and Body in dev

---
 src/helpers/Html/Html.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/helpers/Html/Html.jsx b/src/helpers/Html/Html.jsx
index a5a04d242e..c8d9531b76 100644
--- a/src/helpers/Html/Html.jsx
+++ b/src/helpers/Html/Html.jsx
@@ -73,8 +73,9 @@ class Html extends Component {
           <link rel="shortcut icon" href="/favicon.ico" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
-          {extractor.getLinkElements()}
-          {extractor.getStyleElements()}
+          {process.env.NODE_ENV === 'production' && (
+            <>{extractor.getStyleElements()}</>
+          )}
         </head>
         <body className={bodyClass}>
           <div role="navigation" aria-label="Toolbar" id="toolbar" />

From 70303fa7cb73db972b8d560dcb974a8c35002e35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Fern=C3=A1ndez=20de=20Alba?=
 <sneridagh@gmail.com>
Date: Wed, 13 Nov 2019 22:46:45 +0100
Subject: [PATCH 05/18] Upgrade autoprefixer, remove deprecated browsers
 option, move to browserlist in package.json (#1007)

---
 CHANGELOG.md     |  4 ++++
 package.json     |  8 ++++++-
 razzle.config.js |  6 ------
 yarn.lock        | 56 +++++++++++++++++++++++++++++++++++++++---------
 4 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b58db392ae..1867f3ad38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 ### Changes
 
+### Internal
+
+- Upgrade autoprefixer, remove deprecated `browsers` option, move to `browserlist` in `package.json` @sneridagh
+
 ## 4.0.0-alpha.12 (2019-11-13)
 
 ### Changes
diff --git a/package.json b/package.json
index d404cc73b0..1ccede05c3 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,12 @@
       "./node_modules/prettier-stylelint/config.js"
     ]
   },
+  "browserslist": [
+    ">1%",
+    "last 4 versions",
+    "Firefox ESR",
+    "not ie < 9"
+  ],
   "release-it": {
     "hooks": {
       "after:bump": "node changelogupdater.js bump ${version}",
@@ -175,7 +181,7 @@
     "@testing-library/cypress": "5.0.2",
     "@testing-library/jest-dom": "4.2.0",
     "@testing-library/react": "9.3.0",
-    "autoprefixer": "9.1.5",
+    "autoprefixer": "9.7.1",
     "axe-core": "3.2.2",
     "babel-7-plugin-root-import": "5.4.0",
     "babel-eslint": "10.0.1",
diff --git a/razzle.config.js b/razzle.config.js
index 12acd97b9e..796890f7ac 100644
--- a/razzle.config.js
+++ b/razzle.config.js
@@ -42,12 +42,6 @@ module.exports = {
         plugins: () => [
           require('postcss-flexbugs-fixes'),
           autoprefixer({
-            browsers: [
-              '>1%',
-              'last 4 versions',
-              'Firefox ESR',
-              'not ie < 9', // React doesn't support IE8 anyway
-            ],
             flexbox: 'no-2009',
           }),
         ],
diff --git a/yarn.lock b/yarn.lock
index 90198509be..1bf61b9f37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1972,17 +1972,18 @@ autobind-decorator@^2.1.0:
   resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-2.4.0.tgz#ea9e1c98708cf3b5b356f7cf9f10f265ff18239c"
   integrity sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==
 
-autoprefixer@9.1.5:
-  version "9.1.5"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.1.5.tgz#8675fd8d1c0d43069f3b19a2c316f3524e4f6671"
-  integrity sha512-kk4Zb6RUc58ld7gdosERHMF3DzIYJc2fp5sX46qEsGXQQy5bXsu8qyLjoxuY1NuQ/cJuCYnx99BfjwnRggrYIw==
+autoprefixer@9.7.1:
+  version "9.7.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.1.tgz#9ffc44c55f5ca89253d9bb7186cefb01ef57747f"
+  integrity sha512-w3b5y1PXWlhYulevrTJ0lizkQ5CyqfeU6BIRDbuhsMupstHQOeb1Ur80tcB1zxSu7AwyY/qCQ7Vvqklh31ZBFw==
   dependencies:
-    browserslist "^4.1.0"
-    caniuse-lite "^1.0.30000884"
+    browserslist "^4.7.2"
+    caniuse-lite "^1.0.30001006"
+    chalk "^2.4.2"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.2"
-    postcss-value-parser "^3.2.3"
+    postcss "^7.0.21"
+    postcss-value-parser "^4.0.2"
 
 autoprefixer@^7.1.2:
   version "7.2.6"
@@ -2690,7 +2691,7 @@ browserslist@^3.2.8:
     caniuse-lite "^1.0.30000844"
     electron-to-chromium "^1.3.47"
 
-browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.4, browserslist@^4.6.6:
+browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.4, browserslist@^4.6.6:
   version "4.6.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.6.tgz#6e4bf467cde520bc9dbdf3747dafa03531cec453"
   integrity sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==
@@ -2699,6 +2700,15 @@ browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.6.0, browserslist@^4.6
     electron-to-chromium "^1.3.191"
     node-releases "^1.1.25"
 
+browserslist@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.2.tgz#1bb984531a476b5d389cedecb195b2cd69fb1348"
+  integrity sha512-uZavT/gZXJd2UTi9Ov7/Z340WOSQ3+m1iBVRUknf+okKxonL9P83S3ctiBDtuRmRu8PiCHjqyueqQ9HYlJhxiw==
+  dependencies:
+    caniuse-lite "^1.0.30001004"
+    electron-to-chromium "^1.3.295"
+    node-releases "^1.1.38"
+
 bser@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.0.tgz#65fc784bf7f87c009b973c12db6546902fa9c7b5"
@@ -2960,6 +2970,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9"
   integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==
 
+caniuse-lite@^1.0.30001004, caniuse-lite@^1.0.30001006:
+  version "1.0.30001009"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001009.tgz#69b77997b882a7aee6af24c8d7d2fa27ee41f348"
+  integrity sha512-M3rEqHN6SaVjgo4bIik7HsGcWXsi+lI9WA0p51RPMFx5gXfduyOXWJrc0R4xBkSK1pgNf4CNgy5M+6H+WiEP8g==
+
 capture-exit@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -4637,6 +4652,11 @@ electron-to-chromium@^1.3.191, electron-to-chromium@^1.3.30, electron-to-chromiu
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.222.tgz#2a0e38903b2254d798dd8837507b5bc42c7e3934"
   integrity sha512-Kv3rvtJELafNfgVBVNaDIdV0aWV7O1RlYqqAhg+s+OwpiXFYPsIvONYgAopmR/gpyxSYbHi0EKJmPOvaL7UzMg==
 
+electron-to-chromium@^1.3.295:
+  version "1.3.306"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.306.tgz#e8265301d053d5f74e36cb876486830261fbe946"
+  integrity sha512-frDqXvrIROoYvikSKTIKbHbzO6M3/qC6kCIt/1FOa9kALe++c4VAJnwjSFvf1tYLEUsP2n9XZ4XSCyqc3l7A/A==
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -9423,6 +9443,13 @@ node-releases@^1.0.0-alpha.11, node-releases@^1.1.25:
   dependencies:
     semver "^5.3.0"
 
+node-releases@^1.1.38:
+  version "1.1.40"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.40.tgz#a94facfa8e2d612302601ca1361741d529c4515a"
+  integrity sha512-r4LPcC5b/bS8BdtWH1fbeK88ib/wg9aqmg6/s3ngNLn2Ewkn/8J6Iw3P9RTlfIAdSdvYvQl2thCY5Y+qTAQ2iQ==
+  dependencies:
+    semver "^6.3.0"
+
 noop-logger@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
@@ -11052,7 +11079,7 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
   integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
@@ -11094,6 +11121,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.1
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^7.0.21:
+  version "7.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
+  integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prebuild-install@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.0.tgz#58b4d8344e03590990931ee088dd5401b03004c8"

From 8baf4a18a16cfddbbfdbdd6c4bc77a7f4eceb026 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Thu, 14 Nov 2019 10:48:54 +0100
Subject: [PATCH 06/18] Fix test

---
 src/helpers/Html/__snapshots__/Html.test.jsx.snap | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/helpers/Html/__snapshots__/Html.test.jsx.snap b/src/helpers/Html/__snapshots__/Html.test.jsx.snap
index 11aeceaf20..ae6d92a235 100644
--- a/src/helpers/Html/__snapshots__/Html.test.jsx.snap
+++ b/src/helpers/Html/__snapshots__/Html.test.jsx.snap
@@ -25,10 +25,6 @@ exports[`Html renders a html component 1`] = `
       content="yes"
       name="apple-mobile-web-app-capable"
     />
-    <link
-      href="style.css"
-      rel="stylesheet"
-    />
   </head>
   <body
     className="class1 class2"

From de9029ce551c8483177921962ae8bd58497f0b70 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Thu, 14 Nov 2019 19:55:50 +0100
Subject: [PATCH 07/18] [WIP] Using loadable for components, still using
 index.js as centralized entry points

---
 src/components/index.js                       | 417 +++++++++++++-----
 src/components/manage/Actions/Actions.jsx     |   6 +-
 src/components/manage/Add/Add.jsx             |  13 +-
 .../components/LinkButton/AddLinkForm.jsx     |   2 +-
 .../components/LinkButton/index.jsx           |   6 +-
 src/components/manage/Blocks/Block/Edit.jsx   |   8 +-
 src/components/manage/Blocks/HTML/Edit.jsx    |  12 +-
 src/components/manage/Blocks/Image/Edit.jsx   |   2 +-
 src/components/manage/Blocks/Maps/Edit.jsx    |  14 +-
 src/components/manage/Blocks/Table/Edit.jsx   |   8 +-
 src/components/manage/Blocks/Text/Edit.jsx    |   4 +-
 src/components/manage/Blocks/Video/Edit.jsx   |  12 +-
 src/components/manage/Contents/Contents.jsx   |  18 +-
 .../manage/Contents/ContentsItem.jsx          |   2 +-
 .../Contents/ContentsPropertiesModal.jsx      |   4 +-
 .../manage/Contents/ContentsRenameModal.jsx   |   4 +-
 .../manage/Contents/ContentsTagsModal.jsx     |   4 +-
 .../manage/Contents/ContentsToolbar.jsx       |   2 +-
 .../manage/Contents/ContentsUploadModal.jsx   |   2 +-
 .../manage/Contents/ContentsWorkflowModal.jsx |   4 +-
 .../manage/Controlpanels/Controlpanel.jsx     |  10 +-
 .../manage/Controlpanels/Controlpanels.jsx    |   6 +-
 .../manage/Controlpanels/ModerateComments.jsx |  11 +-
 .../Controlpanels/UsersControlpanel.jsx       |  14 +-
 .../Controlpanels/UsersControlpanelGroups.jsx |   4 +-
 .../Controlpanels/UsersControlpanelUser.jsx   |   4 +-
 src/components/manage/Delete/Delete.jsx       |   7 +-
 src/components/manage/Diff/Diff.jsx           |  11 +-
 src/components/manage/Display/Display.jsx     |  19 +-
 src/components/manage/Edit/Edit.jsx           |  13 +-
 src/components/manage/Form/Form.jsx           |   7 +-
 src/components/manage/Form/ModalForm.jsx      |   2 +-
 src/components/manage/History/History.jsx     |  11 +-
 src/components/manage/Messages/Messages.jsx   |   2 +-
 .../manage/Preferences/ChangePassword.jsx     |  12 +-
 .../Preferences/PersonalInformation.jsx       |   7 +-
 .../Preferences/PersonalPreferences.jsx       |   7 +-
 src/components/manage/Sharing/Sharing.jsx     |  11 +-
 src/components/manage/Sidebar/Sidebar.jsx     |   6 +-
 src/components/manage/Toolbar/More.jsx        |   8 +-
 .../manage/Toolbar/PersonalTools.jsx          |  12 +-
 .../manage/Toolbar/StandardWrapper.jsx        |   4 +-
 src/components/manage/Toolbar/Toolbar.jsx     |  18 +-
 src/components/manage/Widgets/ArrayWidget.jsx |  14 +-
 src/components/manage/Widgets/FileWidget.jsx  |   4 +-
 .../manage/Widgets/QuerystringWidget.jsx      |   9 +-
 .../manage/Widgets/ReferenceWidget.jsx        |   2 +-
 .../manage/Widgets/SchemaWidget.jsx           |   2 +-
 .../manage/Widgets/SelectWidget.jsx           |  10 +-
 src/components/manage/Widgets/TokenWidget.jsx |  19 +-
 src/components/manage/Workflow/Workflow.jsx   |  21 +-
 src/components/theme/App/App.jsx              |  10 +-
 .../theme/Breadcrumbs/Breadcrumbs.jsx         |   4 +-
 .../theme/Comments/CommentEditModal.jsx       |   4 +-
 src/components/theme/Comments/Comments.jsx    |   6 +-
 .../theme/ContactForm/ContactForm.jsx         |  10 +-
 src/components/theme/Header/Header.jsx        |   7 +-
 src/components/theme/Login/Login.jsx          |   8 +-
 src/components/theme/Logout/Logout.jsx        |   2 +-
 .../theme/Navigation/Navigation.jsx           |   4 +-
 .../theme/PasswordReset/PasswordReset.jsx     |   4 +-
 .../PasswordReset/RequestPasswordReset.jsx    |   4 +-
 src/components/theme/Register/Register.jsx    |   7 +-
 src/components/theme/Search/Search.jsx        |   7 +-
 src/components/theme/Search/SearchTags.jsx    |   2 +-
 src/components/theme/View/DefaultView.jsx     |   2 +-
 src/components/theme/View/FileView.jsx        |   2 +-
 src/components/theme/View/ImageView.jsx       |   2 +-
 src/components/theme/View/NewsItemView.jsx    |   2 +-
 src/components/theme/View/View.jsx            |  13 +-
 src/routes.js                                 |  90 +---
 71 files changed, 589 insertions(+), 432 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index 5705488569..d465ed99b1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,111 +3,324 @@
  * @module components
  * @example import { Field } from 'components';
  */
-export Anontools from '@plone/volto/components/theme/Anontools/Anontools';
-export Breadcrumbs from '@plone/volto/components/theme/Breadcrumbs/Breadcrumbs';
-// export ContactForm from '@plone/volto/components/theme/ContactForm/ContactForm';
-export Footer from '@plone/volto/components/theme/Footer/Footer';
-export Header from '@plone/volto/components/theme/Header/Header';
-export Icon from '@plone/volto/components/theme/Icon/Icon';
-export Logo from '@plone/volto/components/theme/Logo/Logo';
-export Navigation from '@plone/volto/components/theme/Navigation/Navigation';
-export SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
-export Title from '@plone/volto/components/theme/Title/Title';
-// export App from '@plone/volto/components/theme/App/App';
-export DefaultView from '@plone/volto/components/theme/View/DefaultView';
-export FileView from '@plone/volto/components/theme/View/FileView';
-export ImageView from '@plone/volto/components/theme/View/ImageView';
-export NewsItemView from '@plone/volto/components/theme/View/NewsItemView';
-export ListingView from '@plone/volto/components/theme/View/ListingView';
-// export Login from '@plone/volto/components/theme/Login/Login';
-// export Logout from '@plone/volto/components/theme/Logout/Logout';
-// export NotFound from '@plone/volto/components/theme/NotFound/NotFound';
-export Pagination from '@plone/volto/components/theme/Pagination/Pagination';
-export SummaryView from '@plone/volto/components/theme/View/SummaryView';
-// export Search from '@plone/volto/components/theme/Search/Search';
-export SearchTags from '@plone/volto/components/theme/Search/SearchTags';
-export TabularView from '@plone/volto/components/theme/View/TabularView';
-// export View from '@plone/volto/components/theme/View/View';
-export Comments from '@plone/volto/components/theme/Comments/Comments';
-export CommentEditModal from '@plone/volto/components/theme/Comments/CommentEditModal';
-export SocialSharing from '@plone/volto/components/theme/SocialSharing/SocialSharing';
-export Tags from '@plone/volto/components/theme/Tags/Tags';
-// export Register from '@plone/volto/components/theme/Register/Register';
-// export PasswordReset from '@plone/volto/components/theme/PasswordReset/PasswordReset';
-// export RequestPasswordReset from '@plone/volto/components/theme/PasswordReset/RequestPasswordReset';
+import loadable from '@loadable/component';
 
-export Actions from '@plone/volto/components/manage/Actions/Actions';
-// export Add from '@plone/volto/components/manage/Add/Add';
-// export Contents from '@plone/volto/components/manage/Contents/Contents';
-export ContentsIndexHeader from '@plone/volto/components/manage/Contents/ContentsIndexHeader';
-export ContentsItem from '@plone/volto/components/manage/Contents/ContentsItem';
-export ContentsUploadModal from '@plone/volto/components/manage/Contents/ContentsUploadModal';
-export ContentsPropertiesModal from '@plone/volto/components/manage/Contents/ContentsPropertiesModal';
-export ContentsRenameModal from '@plone/volto/components/manage/Contents/ContentsRenameModal';
-export ContentsWorkflowModal from '@plone/volto/components/manage/Contents/ContentsWorkflowModal';
-export ContentsTagsModal from '@plone/volto/components/manage/Contents/ContentsTagsModal';
-// export Controlpanel from '@plone/volto/components/manage/Controlpanels/Controlpanel';
-// export Controlpanels from '@plone/volto/components/manage/Controlpanels/Controlpanels';
-// export ModerateComments from '@plone/volto/components/manage/Controlpanels/ModerateComments';
-// export UsersControlpanel from '@plone/volto/components/manage/Controlpanels/UsersControlpanel';
-export UsersControlpanelGroups from '@plone/volto/components/manage/Controlpanels/UsersControlpanelGroups';
-export VersionOverview from '@plone/volto/components/manage/Controlpanels/VersionOverview';
-// export Delete from '@plone/volto/components/manage/Delete/Delete';
-export UsersControlpanelUser from '@plone/volto/components/manage/Controlpanels/UsersControlpanelUser';
-// export Diff from '@plone/volto/components/manage/Diff/Diff';
-export DiffField from '@plone/volto/components/manage/Diff/DiffField';
-export Display from '@plone/volto/components/manage/Display/Display';
-// export Edit from '@plone/volto/components/manage/Edit/Edit';
-export Form from '@plone/volto/components/manage/Form/Form';
-export Field from '@plone/volto/components/manage/Form/Field';
-// export ModalForm from '@plone/volto/components/manage/Form/ModalForm';
-// export History from '@plone/volto/components/manage/History/History';
-export Messages from '@plone/volto/components/manage/Messages/Messages';
-// export ChangePassword from '@plone/volto/components/manage/Preferences/ChangePassword';
-export PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
-export PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
-export ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
-export CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
-export DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
-export FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
-export PasswordWidget from '@plone/volto/components/manage/Widgets/PasswordWidget';
-export ReferenceWidget from '@plone/volto/components/manage/Widgets/ReferenceWidget';
-export SchemaWidget from '@plone/volto/components/manage/Widgets/SchemaWidget';
-export SchemaWidgetFieldset from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
-export SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
-export Sidebar from '@plone/volto/components/manage/Sidebar/Sidebar';
-export SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
-// export Sharing from '@plone/volto/components/manage/Sharing/Sharing';
-export TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
-export TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
-// export Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
-export WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
-export Workflow from '@plone/volto/components/manage/Workflow/Workflow';
+export const App = loadable(() =>
+  import('@plone/volto/components/theme/App/App'),
+);
+export const ContactForm = loadable(() =>
+  import('@plone/volto/components/theme/ContactForm/ContactForm'),
+);
+export const Login = loadable(() =>
+  import('@plone/volto/components/theme/Login/Login'),
+);
+export const Logout = loadable(() =>
+  import('@plone/volto/components/theme/Logout/Logout'),
+);
+export const NotFound = loadable(() =>
+  import('@plone/volto/components/theme/NotFound/NotFound'),
+);
+export const Search = loadable(() =>
+  import('@plone/volto/components/theme/Search/Search'),
+);
+export const View = loadable(() =>
+  import('@plone/volto/components/theme/View/View'),
+);
+export const Register = loadable(() =>
+  import('@plone/volto/components/theme/Register/Register'),
+);
+export const PasswordReset = loadable(() =>
+  import('@plone/volto/components/theme/PasswordReset/PasswordReset'),
+);
+export const RequestPasswordReset = loadable(() =>
+  import('@plone/volto/components/theme/PasswordReset/RequestPasswordReset'),
+);
+export const ChangePassword = loadable(() =>
+  import('@plone/volto/components/manage/Preferences/ChangePassword'),
+);
+export const DefaultView = loadable(() =>
+  import('@plone/volto/components/theme/View/DefaultView'),
+);
+export const FileView = loadable(() =>
+  import('@plone/volto/components/theme/View/FileView'),
+);
+export const ImageView = loadable(() =>
+  import('@plone/volto/components/theme/View/ImageView'),
+);
+export const NewsItemView = loadable(() =>
+  import('@plone/volto/components/theme/View/NewsItemView'),
+);
+export const ListingView = loadable(() =>
+  import('@plone/volto/components/theme/View/ListingView'),
+);
+export const SummaryView = loadable(() =>
+  import('@plone/volto/components/theme/View/SummaryView'),
+);
+export const TabularView = loadable(() =>
+  import('@plone/volto/components/theme/View/TabularView'),
+);
+export const Comments = loadable(() =>
+  import('@plone/volto/components/theme/Comments/Comments'),
+);
+export const Tags = loadable(() =>
+  import('@plone/volto/components/theme/Tags/Tags'),
+);
+export const SocialSharing = loadable(() =>
+  import('@plone/volto/components/theme/SocialSharing/SocialSharing'),
+);
+export const Pagination = loadable(() =>
+  import('@plone/volto/components/theme/Pagination/Pagination'),
+);
+export const SearchTags = loadable(() =>
+  import('@plone/volto/components/theme/Search/SearchTags'),
+);
+export const CommentEditModal = loadable(() =>
+  import('@plone/volto/components/theme/Comments/CommentEditModal'),
+);
 
-export BlockChooser from '@plone/volto/components/manage/BlockChooser/BlockChooser';
+// CMSUI
+export const Toolbar = loadable(() =>
+  import('@plone/volto/components/manage/Toolbar/Toolbar'),
+);
+export const Add = loadable(() =>
+  import('@plone/volto/components/manage/Add/Add'),
+);
+export const Edit = loadable(() =>
+  import('@plone/volto/components/manage/Edit/Edit'),
+);
+export const Contents = loadable(() =>
+  import('@plone/volto/components/manage/Contents/Contents'),
+);
+export const Sharing = loadable(() =>
+  import('@plone/volto/components/manage/Sharing/Sharing'),
+);
+export const Toast = loadable(() =>
+  import('@plone/volto/components/manage/Toast/Toast'),
+);
+export const Controlpanel = loadable(() =>
+  import('@plone/volto/components/manage/Controlpanels/Controlpanel'),
+);
+export const Controlpanels = loadable(() =>
+  import('@plone/volto/components/manage/Controlpanels/Controlpanels'),
+);
+export const ModerateComments = loadable(() =>
+  import('@plone/volto/components/manage/Controlpanels/ModerateComments'),
+);
+export const UsersControlpanel = loadable(() =>
+  import('@plone/volto/components/manage/Controlpanels/UsersControlpanel'),
+);
+export const Delete = loadable(() =>
+  import('@plone/volto/components/manage/Delete/Delete'),
+);
+export const Diff = loadable(() =>
+  import('@plone/volto/components/manage/Diff/Diff'),
+);
+export const ModalForm = loadable(() =>
+  import('@plone/volto/components/manage/Form/ModalForm'),
+);
+export const History = loadable(() =>
+  import('@plone/volto/components/manage/History/History'),
+);
 
-export EditDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/Edit';
-export EditTitleBlock from '@plone/volto/components/manage/Blocks/Title/Edit';
-export EditTextBlock from '@plone/volto/components/manage/Blocks/Text/Edit';
-export EditImageBlock from '@plone/volto/components/manage/Blocks/Image/Edit';
-export EditVideoBlock from '@plone/volto/components/manage/Blocks/Video/Edit';
-export EditBlock from '@plone/volto/components/manage/Blocks/Block/Edit';
-export EditHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/Edit';
-export ViewHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/View';
-export EditMapBlock from '@plone/volto/components/manage/Blocks/Maps/Edit';
-export EditHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/Edit';
+export const Anontools = loadable(() =>
+  import('@plone/volto/components/theme/Anontools/Anontools'),
+);
+export const Breadcrumbs = loadable(() =>
+  import('@plone/volto/components/theme/Breadcrumbs/Breadcrumbs'),
+);
+export const Footer = loadable(() =>
+  import('@plone/volto/components/theme/Footer/Footer'),
+);
+export const Header = loadable(() =>
+  import('@plone/volto/components/theme/Header/Header'),
+);
+export const Icon = loadable(() =>
+  import('@plone/volto/components/theme/Icon/Icon'),
+);
+export const Logo = loadable(() =>
+  import('@plone/volto/components/theme/Logo/Logo'),
+);
+export const Navigation = loadable(() =>
+  import('@plone/volto/components/theme/Navigation/Navigation'),
+);
+export const SearchWidget = loadable(() =>
+  import('@plone/volto/components/theme/SearchWidget/SearchWidget'),
+);
+export const Title = loadable(() =>
+  import('@plone/volto/components/theme/Title/Title'),
+);
 
-export ViewDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/View';
-export ViewTitleBlock from '@plone/volto/components/manage/Blocks/Title/View';
-export ViewTextBlock from '@plone/volto/components/manage/Blocks/Text/View';
-export ViewImageBlock from '@plone/volto/components/manage/Blocks/Image/View';
-export ViewVideoBlock from '@plone/volto/components/manage/Blocks/Video/View';
-export ViewMapBlock from '@plone/volto/components/manage/Blocks/Maps/View';
-export ViewHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/View';
+export const Actions = loadable(() =>
+  import('@plone/volto/components/manage/Actions/Actions'),
+);
+export const ContentsIndexHeader = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsIndexHeader'),
+);
+export const ContentsItem = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsItem'),
+);
+export const ContentsUploadModal = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsUploadModal'),
+);
+export const ContentsPropertiesModal = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsPropertiesModal'),
+);
+export const ContentsRenameModal = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsRenameModal'),
+);
+export const ContentsWorkflowModal = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsWorkflowModal'),
+);
+export const ContentsTagsModal = loadable(() =>
+  import('@plone/volto/components/manage/Contents/ContentsTagsModal'),
+);
 
-export ImageSidebar from '@plone/volto/components/manage/Sidebar/ImageSidebar';
+export const UsersControlpanelGroups = loadable(() =>
+  import(
+    '@plone/volto/components/manage/Controlpanels/UsersControlpanelGroups'
+  ),
+);
+export const VersionOverview = loadable(() =>
+  import('@plone/volto/components/manage/Controlpanels/VersionOverview'),
+);
+export const UsersControlpanelUser = loadable(() =>
+  import('@plone/volto/components/manage/Controlpanels/UsersControlpanelUser'),
+);
+export const DiffField = loadable(() =>
+  import('@plone/volto/components/manage/Diff/DiffField'),
+);
+export const Display = loadable(() =>
+  import('@plone/volto/components/manage/Display/Display'),
+);
+export const Form = loadable(() =>
+  import('@plone/volto/components/manage/Form/Form'),
+);
+export const Field = loadable(() =>
+  import('@plone/volto/components/manage/Form/Field'),
+);
 
-export PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
-export More from '@plone/volto/components/manage/Toolbar/More';
-export Types from '@plone/volto/components/manage/Toolbar/Types';
-// export Toast from '@plone/volto/components/manage/Toast/Toast';
+export const Messages = loadable(() =>
+  import('@plone/volto/components/manage/Messages/Messages'),
+);
+export const PersonalPreferences = loadable(() =>
+  import('@plone/volto/components/manage/Preferences/PersonalPreferences'),
+);
+export const PersonalInformation = loadable(() =>
+  import('@plone/volto/components/manage/Preferences/PersonalInformation'),
+);
+export const ArrayWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/ArrayWidget'),
+);
+export const CheckboxWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/CheckboxWidget'),
+);
+export const DatetimeWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
+);
+export const FileWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/FileWidget'),
+);
+export const PasswordWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/PasswordWidget'),
+);
+export const ReferenceWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/ReferenceWidget'),
+);
+export const SchemaWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/SchemaWidget'),
+);
+export const SchemaWidgetFieldset = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/SchemaWidgetFieldset'),
+);
+export const SelectWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/SelectWidget'),
+);
+export const Sidebar = loadable(() =>
+  import('@plone/volto/components/manage/Sidebar/Sidebar'),
+);
+export const SidebarPortal = loadable(() =>
+  import('@plone/volto/components/manage/Sidebar/SidebarPortal'),
+);
+export const TextareaWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/TextareaWidget'),
+);
+export const TextWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/TextWidget'),
+);
+export const WysiwygWidget = loadable(() =>
+  import('@plone/volto/components/manage/Widgets/WysiwygWidget'),
+);
+export const Workflow = loadable(() =>
+  import('@plone/volto/components/manage/Workflow/Workflow'),
+);
+
+export const BlockChooser = loadable(() =>
+  import('@plone/volto/components/manage/BlockChooser/BlockChooser'),
+);
+
+export const EditDescriptionBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Description/Edit'),
+);
+export const EditTitleBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Title/Edit'),
+);
+export const EditTextBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Text/Edit'),
+);
+export const EditImageBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Image/Edit'),
+);
+export const EditVideoBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Video/Edit'),
+);
+export const EditBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Block/Edit'),
+);
+export const EditHeroImageLeftBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/HeroImageLeft/Edit'),
+);
+export const ViewHeroImageLeftBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/HeroImageLeft/View'),
+);
+export const EditMapBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Maps/Edit'),
+);
+export const EditHTMLBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/HTML/Edit'),
+);
+
+export const ViewDescriptionBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Description/View'),
+);
+export const ViewTitleBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Title/View'),
+);
+export const ViewTextBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Text/View'),
+);
+export const ViewImageBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Image/View'),
+);
+export const ViewVideoBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Video/View'),
+);
+export const ViewMapBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Maps/View'),
+);
+export const ViewHTMLBlock = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/HTML/View'),
+);
+
+export const ImageSidebar = loadable(() =>
+  import('@plone/volto/components/manage/Sidebar/ImageSidebar'),
+);
+
+export const PersonalTools = loadable(() =>
+  import('@plone/volto/components/manage/Toolbar/PersonalTools'),
+);
+export const More = loadable(() =>
+  import('@plone/volto/components/manage/Toolbar/More'),
+);
+export const Types = loadable(() =>
+  import('@plone/volto/components/manage/Toolbar/Types'),
+);
diff --git a/src/components/manage/Actions/Actions.jsx b/src/components/manage/Actions/Actions.jsx
index 868fd53b71..bf28e119e0 100644
--- a/src/components/manage/Actions/Actions.jsx
+++ b/src/components/manage/Actions/Actions.jsx
@@ -13,9 +13,9 @@ import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import { cut, copy, copyContent, moveContent } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
-// import { ContentsRenameModal, Toast } from '../../../components';
+import { cut, copy, copyContent, moveContent } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
+// import { ContentsRenameModal, Toast } from '@plone/volto/components';
 
 const ContentsRenameModal = loadable(() =>
   import('../Contents/ContentsRenameModal'),
diff --git a/src/components/manage/Add/Add.jsx b/src/components/manage/Add/Add.jsx
index 456c02c00d..f55b889ebe 100644
--- a/src/components/manage/Add/Add.jsx
+++ b/src/components/manage/Add/Add.jsx
@@ -15,22 +15,19 @@ import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import qs from 'query-string';
-import loadable from '@loadable/component';
 import { settings } from '~/config';
 
-import { createContent, getSchema } from '../../../actions';
-import { Form, Icon /*, Toolbar */, Sidebar } from '../../../components';
+import { createContent, getSchema } from '@plone/volto/actions';
+import { Form, Icon, Toolbar, Sidebar } from '@plone/volto/components';
 import {
   getBaseUrl,
   hasBlocksData,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
-} from '../../../helpers';
+} from '@plone/volto/helpers';
 
-import saveSVG from '../../../icons/save.svg';
-import clearSVG from '../../../icons/clear.svg';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import saveSVG from '@plone/volto/icons/save.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 const messages = defineMessages({
   add: {
diff --git a/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx b/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
index 425fc7eede..1e16c4b72b 100644
--- a/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
+++ b/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
@@ -13,7 +13,7 @@ import { map } from 'lodash';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { resetSearchContent, searchContent } from '../../../../../actions';
+import { resetSearchContent, searchContent } from '@plone/volto/actions';
 import URLUtils from '../../utils/URLUtils';
 
 const messages = defineMessages({
diff --git a/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx b/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx
index 72f95a0584..3dcfc7868e 100644
--- a/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx
+++ b/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import unionClassNames from 'union-class-names';
 import EditorUtils from 'draft-js-plugins-utils';
 import AddLinkForm from './AddLinkForm';
-import Icon from '../../../../../components/theme/Icon/Icon';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
-import linkSVG from '../../../../../icons/link.svg';
-import unlinkSVG from '../../../../../icons/unlink.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import unlinkSVG from '@plone/volto/icons/unlink.svg';
 
 /**
  * Add link form class.
diff --git a/src/components/manage/Blocks/Block/Edit.jsx b/src/components/manage/Blocks/Block/Edit.jsx
index ae6220b419..d098eaac72 100644
--- a/src/components/manage/Blocks/Block/Edit.jsx
+++ b/src/components/manage/Blocks/Block/Edit.jsx
@@ -14,10 +14,10 @@ import { Button } from 'semantic-ui-react';
 import includes from 'lodash/includes';
 import cx from 'classnames';
 
-import withObjectBrowser from '../../Sidebar/ObjectBrowser';
-import Icon from '../../../../components/theme/Icon/Icon';
-import dragSVG from '../../../../icons/drag.svg';
-import trashSVG from '../../../../icons/delete.svg';
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import dragSVG from '@plone/volto/icons/drag.svg';
+import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
   unknownBlock: {
diff --git a/src/components/manage/Blocks/HTML/Edit.jsx b/src/components/manage/Blocks/HTML/Edit.jsx
index 7f9bb80854..7fcd9f3ed1 100644
--- a/src/components/manage/Blocks/HTML/Edit.jsx
+++ b/src/components/manage/Blocks/HTML/Edit.jsx
@@ -9,12 +9,14 @@ import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs/components/prism-core';
 import 'prismjs/components/prism-markup';
 import { Button } from 'semantic-ui-react';
-import pretty from 'pretty';
+import loadable from '@loadable/component';
 
-import { Icon } from '../../../../components';
-import showSVG from '../../../../icons/show.svg';
-import clearSVG from '../../../../icons/clear.svg';
-import codeSVG from '../../../../icons/code.svg';
+import { Icon } from '@plone/volto/components';
+import showSVG from '@plone/volto/icons/show.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import codeSVG from '@plone/volto/icons/code.svg';
+
+const pretty = loadable(() => import('pretty'));
 
 /**
  * Edit html block class.
diff --git a/src/components/manage/Blocks/Image/Edit.jsx b/src/components/manage/Blocks/Image/Edit.jsx
index 9ca2e82717..d608ac85c3 100644
--- a/src/components/manage/Blocks/Image/Edit.jsx
+++ b/src/components/manage/Blocks/Image/Edit.jsx
@@ -19,7 +19,7 @@ import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 
-import imageBlockSVG from './block-image.svg';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
diff --git a/src/components/manage/Blocks/Maps/Edit.jsx b/src/components/manage/Blocks/Maps/Edit.jsx
index faefa568ba..546b5280c0 100644
--- a/src/components/manage/Blocks/Maps/Edit.jsx
+++ b/src/components/manage/Blocks/Maps/Edit.jsx
@@ -9,13 +9,13 @@ import { Button, Input, Message } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import cx from 'classnames';
 
-import { Icon } from '../../../../components';
-import clearSVG from '../../../../icons/clear.svg';
-import imageLeftSVG from '../../../../icons/image-left.svg';
-import imageRightSVG from '../../../../icons/image-right.svg';
-import imageFitSVG from '../../../../icons/image-fit.svg';
-import imageFullSVG from '../../../../icons/image-full.svg';
-import globeSVG from '../../../../icons/globe.svg';
+import { Icon } from '@plone/volto/components';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import globeSVG from '@plone/volto/icons/globe.svg';
 
 const messages = defineMessages({
   ImageBlockInputPlaceholder: {
diff --git a/src/components/manage/Blocks/Table/Edit.jsx b/src/components/manage/Blocks/Table/Edit.jsx
index db2bf536ce..49f3972347 100644
--- a/src/components/manage/Blocks/Table/Edit.jsx
+++ b/src/components/manage/Blocks/Table/Edit.jsx
@@ -13,11 +13,11 @@ import cx from 'classnames';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import Cell from './Cell';
-import { Field, Icon } from '../../../../components';
+import { Field, Icon } from '@plone/volto/components';
 
-import rowSVG from '../../../../icons/row.svg';
-import colSVG from '../../../../icons/column.svg';
-import deleteSVG from '../../../../icons/delete.svg';
+import rowSVG from '@plone/volto/icons/row.svg';
+import colSVG from '@plone/volto/icons/column.svg';
+import deleteSVG from '@plone/volto/icons/delete.svg';
 
 const getId = () => Math.floor(Math.random() * Math.pow(2, 24)).toString(32);
 
diff --git a/src/components/manage/Blocks/Text/Edit.jsx b/src/components/manage/Blocks/Text/Edit.jsx
index d0fb09075a..34f0f27419 100644
--- a/src/components/manage/Blocks/Text/Edit.jsx
+++ b/src/components/manage/Blocks/Text/Edit.jsx
@@ -15,8 +15,8 @@ import { includes, isEqual } from 'lodash';
 
 import { settings } from '~/config';
 
-import { Icon, BlockChooser } from '../../../../components';
-import addSVG from '../../../../icons/circle-plus.svg';
+import { Icon, BlockChooser } from '@plone/volto/components';
+import addSVG from '@plone/volto/icons/circle-plus.svg';
 
 const messages = defineMessages({
   text: {
diff --git a/src/components/manage/Blocks/Video/Edit.jsx b/src/components/manage/Blocks/Video/Edit.jsx
index 670f2991f2..6be6ddbb4f 100644
--- a/src/components/manage/Blocks/Video/Edit.jsx
+++ b/src/components/manage/Blocks/Video/Edit.jsx
@@ -9,12 +9,12 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { Button, Input, Embed, Message } from 'semantic-ui-react';
 import cx from 'classnames';
 
-import { Icon } from '../../../../components';
-import imageLeftSVG from '../../../../icons/image-left.svg';
-import imageRightSVG from '../../../../icons/image-right.svg';
-import imageFitSVG from '../../../../icons/image-fit.svg';
-import imageFullSVG from '../../../../icons/image-full.svg';
-import videoSVG from '../../../../icons/videocamera.svg';
+import { Icon } from '@plone/volto/components';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import videoSVG from '@plone/volto/icons/videocamera.svg';
 
 const messages = defineMessages({
   save: {
diff --git a/src/components/manage/Contents/Contents.jsx b/src/components/manage/Contents/Contents.jsx
index 02bc83269a..1ed4d96a97 100644
--- a/src/components/manage/Contents/Contents.jsx
+++ b/src/components/manage/Contents/Contents.jsx
@@ -45,9 +45,9 @@ import {
   moveContent,
   orderContent,
   sortContent,
-} from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
-import Indexes from '../../../constants/Indexes';
+} from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
+import Indexes from '@plone/volto/constants/Indexes';
 import {
   ContentsIndexHeader,
   ContentsItem,
@@ -57,17 +57,13 @@ import {
   ContentsTagsModal,
   ContentsPropertiesModal,
   Pagination,
-  // Toolbar,
-  // Toast,
+  Toolbar,
+  Toast,
   Icon as IconNext,
-} from '../../../components';
+} from '@plone/volto/components';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toast = loadable(() => import('../Toast/Toast'));
-const Toolbar = loadable(() => import('../Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const defaultIndexes = ['ModificationDate', 'EffectiveDate', 'review_state'];
 const messages = defineMessages({
diff --git a/src/components/manage/Contents/ContentsItem.jsx b/src/components/manage/Contents/ContentsItem.jsx
index 47e2c4f484..82fdb551ce 100644
--- a/src/components/manage/Contents/ContentsItem.jsx
+++ b/src/components/manage/Contents/ContentsItem.jsx
@@ -12,7 +12,7 @@ import moment from 'moment';
 import { DragSource, DropTarget } from 'react-dnd';
 import { FormattedMessage } from 'react-intl';
 
-import { getIcon } from '../../../helpers';
+import { getIcon } from '@plone/volto/helpers';
 
 /**
  * Contents item component class.
diff --git a/src/components/manage/Contents/ContentsPropertiesModal.jsx b/src/components/manage/Contents/ContentsPropertiesModal.jsx
index 528b84061c..5837b5be91 100644
--- a/src/components/manage/Contents/ContentsPropertiesModal.jsx
+++ b/src/components/manage/Contents/ContentsPropertiesModal.jsx
@@ -11,8 +11,8 @@ import { isEmpty, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import { updateContent } from '../../../actions';
-// import { ModalForm } from '../../../components';
+import { updateContent } from '@plone/volto/actions';
+// import { ModalForm } from '@plone/volto/components';
 
 const ModalForm = loadable(() => import('../Form/ModalForm'));
 
diff --git a/src/components/manage/Contents/ContentsRenameModal.jsx b/src/components/manage/Contents/ContentsRenameModal.jsx
index e0091ba363..fc32d85acb 100644
--- a/src/components/manage/Contents/ContentsRenameModal.jsx
+++ b/src/components/manage/Contents/ContentsRenameModal.jsx
@@ -11,8 +11,8 @@ import { concat, merge, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import { updateContent } from '../../../actions';
-// import { ModalForm } from '../../../components';
+import { updateContent } from '@plone/volto/actions';
+// import { ModalForm } from '@plone/volto/components';
 
 const ModalForm = loadable(() => import('../Form/ModalForm'));
 
diff --git a/src/components/manage/Contents/ContentsTagsModal.jsx b/src/components/manage/Contents/ContentsTagsModal.jsx
index aee6aa4c21..f2933b952d 100644
--- a/src/components/manage/Contents/ContentsTagsModal.jsx
+++ b/src/components/manage/Contents/ContentsTagsModal.jsx
@@ -11,8 +11,8 @@ import { without, union, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import { updateContent } from '../../../actions';
-// import { ModalForm } from '../../../components';
+import { updateContent } from '@plone/volto/actions';
+// import { ModalForm } from '@plone/volto/components';
 
 const ModalForm = loadable(() => import('../Form/ModalForm'));
 
diff --git a/src/components/manage/Contents/ContentsToolbar.jsx b/src/components/manage/Contents/ContentsToolbar.jsx
index 9cdae98658..372f674fdc 100644
--- a/src/components/manage/Contents/ContentsToolbar.jsx
+++ b/src/components/manage/Contents/ContentsToolbar.jsx
@@ -11,7 +11,7 @@ import { Link } from 'react-router-dom';
 import { Icon } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { getBaseUrl } from '../../../helpers';
+import { getBaseUrl } from '@plone/volto/helpers';
 
 const messages = defineMessages({
   cancel: {
diff --git a/src/components/manage/Contents/ContentsUploadModal.jsx b/src/components/manage/Contents/ContentsUploadModal.jsx
index ee282c4af1..9f9b6569f2 100644
--- a/src/components/manage/Contents/ContentsUploadModal.jsx
+++ b/src/components/manage/Contents/ContentsUploadModal.jsx
@@ -25,7 +25,7 @@ import filesize from 'filesize';
 import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { createContent } from '../../../actions';
+import { createContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   cancel: {
diff --git a/src/components/manage/Contents/ContentsWorkflowModal.jsx b/src/components/manage/Contents/ContentsWorkflowModal.jsx
index c013a8084e..3c9e427192 100644
--- a/src/components/manage/Contents/ContentsWorkflowModal.jsx
+++ b/src/components/manage/Contents/ContentsWorkflowModal.jsx
@@ -11,8 +11,8 @@ import { concat, filter, last, map, uniqBy } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import { getWorkflow, transitionWorkflow } from '../../../actions';
-// import { ModalForm } from '../../../components';
+import { getWorkflow, transitionWorkflow } from '@plone/volto/actions';
+// import { ModalForm } from '@plone/volto/components';
 
 const ModalForm = loadable(() => import('../Form/ModalForm'));
 
diff --git a/src/components/manage/Controlpanels/Controlpanel.jsx b/src/components/manage/Controlpanels/Controlpanel.jsx
index 323c6d5c1e..41fa67864d 100644
--- a/src/components/manage/Controlpanels/Controlpanel.jsx
+++ b/src/components/manage/Controlpanels/Controlpanel.jsx
@@ -13,15 +13,11 @@ import { Portal } from 'react-portal';
 import { Container } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import { Form, Icon /*, Toolbar, Toast */ } from '../../../components';
-import { updateControlpanel, getControlpanel } from '../../../actions';
+import { Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { updateControlpanel, getControlpanel } from '@plone/volto/actions';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
   changesSaved: {
diff --git a/src/components/manage/Controlpanels/Controlpanels.jsx b/src/components/manage/Controlpanels/Controlpanels.jsx
index ce492f8986..687ef11fe2 100644
--- a/src/components/manage/Controlpanels/Controlpanels.jsx
+++ b/src/components/manage/Controlpanels/Controlpanels.jsx
@@ -16,14 +16,14 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
 import Icons from '../../../constants/ControlpanelIcons';
-import { listControlpanels } from '../../../actions';
+import { listControlpanels } from '@plone/volto/actions';
 import {
   Icon as IconNext,
   // Toolbar,
   VersionOverview,
-} from '../../../components';
+} from '@plone/volto/components';
 
-import backSVG from '../../../icons/back.svg';
+import backSVG from '@plone/volto/icons/back.svg';
 
 const Toolbar = loadable(() => import('../Toolbar/Toolbar'));
 
diff --git a/src/components/manage/Controlpanels/ModerateComments.jsx b/src/components/manage/Controlpanels/ModerateComments.jsx
index 7f7515abc7..97d9bae7a6 100644
--- a/src/components/manage/Controlpanels/ModerateComments.jsx
+++ b/src/components/manage/Controlpanels/ModerateComments.jsx
@@ -13,15 +13,12 @@ import { Portal } from 'react-portal';
 import { Container, Button, Table } from 'semantic-ui-react';
 import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
 
-import { deleteComment, searchContent } from '../../../actions';
-import { CommentEditModal, Icon /*, Toolbar */ } from '../../../components';
-import { getBaseUrl } from '../../../helpers';
+import { deleteComment, searchContent } from '@plone/volto/actions';
+import { CommentEditModal, Icon, Toolbar } from '@plone/volto/components';
+import { getBaseUrl } from '@plone/volto/helpers';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
   back: {
diff --git a/src/components/manage/Controlpanels/UsersControlpanel.jsx b/src/components/manage/Controlpanels/UsersControlpanel.jsx
index 3d18b06a9d..65e391ed39 100644
--- a/src/components/manage/Controlpanels/UsersControlpanel.jsx
+++ b/src/components/manage/Controlpanels/UsersControlpanel.jsx
@@ -34,8 +34,8 @@ import {
   listGroups,
   updateUser,
   updateGroup,
-} from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
+} from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
 import {
   // ModalForm,
   // Toolbar,
@@ -43,11 +43,11 @@ import {
   Icon,
   UsersControlpanelGroups,
   // Toast,
-} from '../../../components';
-import addSvg from '../../../icons/circle-plus.svg';
-import backSVG from '../../../icons/back.svg';
-import saveSVG from '../../../icons/save.svg';
-import clearSVG from '../../../icons/clear.svg';
+} from '@plone/volto/components';
+import addSvg from '@plone/volto/icons/circle-plus.svg';
+import backSVG from '@plone/volto/icons/back.svg';
+import saveSVG from '@plone/volto/icons/save.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 const ModalForm = loadable(() => import('../Form/ModalForm'));
 const Toast = loadable(() => import('../Toast/Toast'));
diff --git a/src/components/manage/Controlpanels/UsersControlpanelGroups.jsx b/src/components/manage/Controlpanels/UsersControlpanelGroups.jsx
index 26fceb3d87..e0c6a579cc 100644
--- a/src/components/manage/Controlpanels/UsersControlpanelGroups.jsx
+++ b/src/components/manage/Controlpanels/UsersControlpanelGroups.jsx
@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
-import trashSVG from '../../../icons/delete.svg';
-import { Icon } from '../../../components';
+import trashSVG from '@plone/volto/icons/delete.svg';
+import { Icon } from '@plone/volto/components';
 
 @injectIntl
 /**
diff --git a/src/components/manage/Controlpanels/UsersControlpanelUser.jsx b/src/components/manage/Controlpanels/UsersControlpanelUser.jsx
index 0d95ee0e4a..7f49ade454 100644
--- a/src/components/manage/Controlpanels/UsersControlpanelUser.jsx
+++ b/src/components/manage/Controlpanels/UsersControlpanelUser.jsx
@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
-import trashSVG from '../../../icons/delete.svg';
-import { Icon } from '../../../components';
+import trashSVG from '@plone/volto/icons/delete.svg';
+import { Icon } from '@plone/volto/components';
 
 @injectIntl
 /**
diff --git a/src/components/manage/Delete/Delete.jsx b/src/components/manage/Delete/Delete.jsx
index 33b88a4209..dc44f2990d 100644
--- a/src/components/manage/Delete/Delete.jsx
+++ b/src/components/manage/Delete/Delete.jsx
@@ -13,12 +13,9 @@ import { Portal } from 'react-portal';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
-import loadable from '@loadable/component';
 
-import { deleteContent, getContent } from '../../../actions';
-// import { Toolbar } from '../../../components';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import { deleteContent, getContent } from '@plone/volto/actions';
+import { Toolbar } from '@plone/volto/components';
 
 const messages = defineMessages({
   delete: {
diff --git a/src/components/manage/Diff/Diff.jsx b/src/components/manage/Diff/Diff.jsx
index 74d9dc5b4a..6ef7e818d7 100644
--- a/src/components/manage/Diff/Diff.jsx
+++ b/src/components/manage/Diff/Diff.jsx
@@ -15,15 +15,12 @@ import { Portal } from 'react-portal';
 import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
-import loadable from '@loadable/component';
 
-import { getDiff, getSchema, getHistory } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
-import { DiffField, Icon /*, Toolbar */ } from '../../../components';
+import { getDiff, getSchema, getHistory } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
+import { DiffField, Icon, Toolbar } from '@plone/volto/components';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
   diff: {
diff --git a/src/components/manage/Display/Display.jsx b/src/components/manage/Display/Display.jsx
index 63a33df075..775bba5ab3 100644
--- a/src/components/manage/Display/Display.jsx
+++ b/src/components/manage/Display/Display.jsx
@@ -1,17 +1,20 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import Select, { components } from 'react-select';
 
-import { getSchema, updateContent, getContent } from '../../../actions';
-import layouts from '../../../constants/Layouts';
-import { getLayoutFieldname } from '../../../helpers';
-import { Icon } from '../../../components';
+import { getSchema, updateContent, getContent } from '@plone/volto/actions';
+import layouts from '@plone/volto/constants/Layouts';
+import { getLayoutFieldname } from '@plone/volto/helpers';
+import { Icon } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
+import loadable from '@loadable/component';
 
-import downSVG from '../../../icons/down-key.svg';
-import upSVG from '../../../icons/up-key.svg';
-import checkSVG from '../../../icons/check.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const Select = loadable(() => import('react-select'));
+const components = loadable(() => import('react-select'), 'components');
 
 const Option = props => {
   return (
diff --git a/src/components/manage/Edit/Edit.jsx b/src/components/manage/Edit/Edit.jsx
index 3e15d239f5..8fbb004410 100644
--- a/src/components/manage/Edit/Edit.jsx
+++ b/src/components/manage/Edit/Edit.jsx
@@ -14,16 +14,13 @@ import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import qs from 'query-string';
-import loadable from '@loadable/component';
 
-import { Form, Icon, /* Toolbar, */ Sidebar } from '../../../components';
-import { updateContent, getContent, getSchema } from '../../../actions';
-import { getBaseUrl, hasBlocksData } from '../../../helpers';
+import { Form, Icon, Toolbar, Sidebar } from '@plone/volto/components';
+import { updateContent, getContent, getSchema } from '@plone/volto/actions';
+import { getBaseUrl, hasBlocksData } from '@plone/volto/helpers';
 
-import saveSVG from '../../../icons/save.svg';
-import clearSVG from '../../../icons/clear.svg';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import saveSVG from '@plone/volto/icons/save.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 const messages = defineMessages({
   edit: {
diff --git a/src/components/manage/Form/Form.jsx b/src/components/manage/Form/Form.jsx
index 1a41d2ca09..642b763c06 100644
--- a/src/components/manage/Form/Form.jsx
+++ b/src/components/manage/Form/Form.jsx
@@ -20,8 +20,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { v4 as uuid } from 'uuid';
 import { Portal } from 'react-portal';
 
-import { EditBlock, Icon, Field } from '../../../components';
-import { getBlocksFieldname, getBlocksLayoutFieldname } from '../../../helpers';
+import { EditBlock, Icon, Field } from '@plone/volto/components';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
diff --git a/src/components/manage/Form/ModalForm.jsx b/src/components/manage/Form/ModalForm.jsx
index 5969a59a8a..df858ca44f 100644
--- a/src/components/manage/Form/ModalForm.jsx
+++ b/src/components/manage/Form/ModalForm.jsx
@@ -16,7 +16,7 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Field } from '../../../components';
+import { Field } from '@plone/volto/components';
 
 const messages = defineMessages({
   required: {
diff --git a/src/components/manage/History/History.jsx b/src/components/manage/History/History.jsx
index 02aa56a9d3..30f5cd9d19 100644
--- a/src/components/manage/History/History.jsx
+++ b/src/components/manage/History/History.jsx
@@ -14,15 +14,12 @@ import { concat, map, reverse } from 'lodash';
 import { Portal } from 'react-portal';
 import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
 
-import { Icon as IconNext /*, Toolbar */ } from '../../../components';
-import { getHistory, revertHistory } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
+import { Icon as IconNext, Toolbar } from '@plone/volto/components';
+import { getHistory, revertHistory } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
   back: {
diff --git a/src/components/manage/Messages/Messages.jsx b/src/components/manage/Messages/Messages.jsx
index c1daf30949..c531c1840b 100644
--- a/src/components/manage/Messages/Messages.jsx
+++ b/src/components/manage/Messages/Messages.jsx
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { Message, Container } from 'semantic-ui-react';
 import { map } from 'lodash';
 
-import { removeMessage } from '../../../actions';
+import { removeMessage } from '@plone/volto/actions';
 
 /**
  * Messages container class.
diff --git a/src/components/manage/Preferences/ChangePassword.jsx b/src/components/manage/Preferences/ChangePassword.jsx
index af93c15f71..8f9bbdf39e 100644
--- a/src/components/manage/Preferences/ChangePassword.jsx
+++ b/src/components/manage/Preferences/ChangePassword.jsx
@@ -14,16 +14,12 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import { Form, Icon /*, Toast, Toolbar */ } from '../../../components';
-import { updatePassword } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
+import { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { updatePassword } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
   changePassword: {
diff --git a/src/components/manage/Preferences/PersonalInformation.jsx b/src/components/manage/Preferences/PersonalInformation.jsx
index 243f56ede9..5304b5d17d 100644
--- a/src/components/manage/Preferences/PersonalInformation.jsx
+++ b/src/components/manage/Preferences/PersonalInformation.jsx
@@ -10,12 +10,9 @@ import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import { Form /*, Toast */ } from '../../../components';
-import { getUser, updateUser } from '../../../actions';
-
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
+import { Form, Toast } from '@plone/volto/components';
+import { getUser, updateUser } from '@plone/volto/actions';
 
 const messages = defineMessages({
   personalInformation: {
diff --git a/src/components/manage/Preferences/PersonalPreferences.jsx b/src/components/manage/Preferences/PersonalPreferences.jsx
index 9cfd993160..6053259e0b 100644
--- a/src/components/manage/Preferences/PersonalPreferences.jsx
+++ b/src/components/manage/Preferences/PersonalPreferences.jsx
@@ -13,12 +13,9 @@ import cookie from 'react-cookie';
 import request from 'superagent';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import { Form /*, Toast */ } from '../../../components';
-import languages from '../../../constants/Languages';
-
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
+import { Form, Toast } from '@plone/volto/components';
+import languages from '@plone/volto/constants/Languages';
 
 const messages = defineMessages({
   personalPreferences: {
diff --git a/src/components/manage/Sharing/Sharing.jsx b/src/components/manage/Sharing/Sharing.jsx
index 2d632fb53d..536e1f30e4 100644
--- a/src/components/manage/Sharing/Sharing.jsx
+++ b/src/components/manage/Sharing/Sharing.jsx
@@ -22,15 +22,12 @@ import {
 } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
 
-import { updateSharing, getSharing } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
-import { Icon as IconNext /*, Toolbar */ } from '../../../components';
+import { updateSharing, getSharing } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
+import { Icon as IconNext, Toolbar } from '@plone/volto/components';
 
-import backSVG from '../../../icons/back.svg';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
   searchForUserOrGroup: {
diff --git a/src/components/manage/Sidebar/Sidebar.jsx b/src/components/manage/Sidebar/Sidebar.jsx
index 96b2d0ec9b..5f2bfe7cff 100644
--- a/src/components/manage/Sidebar/Sidebar.jsx
+++ b/src/components/manage/Sidebar/Sidebar.jsx
@@ -8,9 +8,9 @@ import { Button, Tab } from 'semantic-ui-react';
 import cookie from 'react-cookie';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-import { BodyClass } from '../../../helpers';
-import { Icon } from '../../../components';
-import forbiddenSVG from '../../../icons/forbidden.svg';
+import { BodyClass } from '@plone/volto/helpers';
+import { Icon } from '@plone/volto/components';
+import forbiddenSVG from '@plone/volto/icons/forbidden.svg';
 
 const messages = defineMessages({
   document: {
diff --git a/src/components/manage/Toolbar/More.jsx b/src/components/manage/Toolbar/More.jsx
index a9b4b68909..2f93fd20d2 100644
--- a/src/components/manage/Toolbar/More.jsx
+++ b/src/components/manage/Toolbar/More.jsx
@@ -4,11 +4,11 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { find } from 'lodash';
 
-import { Icon, Display, Workflow } from '../../../components';
-import { getBaseUrl } from '../../../helpers';
+import { Icon, Display, Workflow } from '@plone/volto/components';
+import { getBaseUrl } from '@plone/volto/helpers';
 
-import rightArrowSVG from '../../../icons/right-key.svg';
-import userSVG from '../../../icons/user.svg';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+import userSVG from '@plone/volto/icons/user.svg';
 
 /**
  * More container class.
diff --git a/src/components/manage/Toolbar/PersonalTools.jsx b/src/components/manage/Toolbar/PersonalTools.jsx
index 8dc939e660..c21ae695c8 100644
--- a/src/components/manage/Toolbar/PersonalTools.jsx
+++ b/src/components/manage/Toolbar/PersonalTools.jsx
@@ -5,13 +5,13 @@ import { Link } from 'react-router-dom';
 import jwtDecode from 'jwt-decode';
 import cx from 'classnames';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import { Icon } from '../../../components';
-import { getUser } from '../../../actions';
-import logoutSVG from '../../../icons/log-out.svg';
-import rightArrowSVG from '../../../icons/right-key.svg';
+import { Icon } from '@plone/volto/components';
+import { getUser } from '@plone/volto/actions';
+import logoutSVG from '@plone/volto/icons/log-out.svg';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
 
-import backSVG from '../../../icons/back.svg';
-import cameraSVG from '../../../icons/camera.svg';
+import backSVG from '@plone/volto/icons/back.svg';
+import cameraSVG from '@plone/volto/icons/camera.svg';
 
 const messages = defineMessages({
   preferences: {
diff --git a/src/components/manage/Toolbar/StandardWrapper.jsx b/src/components/manage/Toolbar/StandardWrapper.jsx
index 9ac5a89d25..4105c89aff 100644
--- a/src/components/manage/Toolbar/StandardWrapper.jsx
+++ b/src/components/manage/Toolbar/StandardWrapper.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Icon } from '../../../components';
-import backSVG from '../../../icons/back.svg';
+import { Icon } from '@plone/volto/components';
+import backSVG from '@plone/volto/icons/back.svg';
 
 const StandardWrapper = props => {
   function pull() {
diff --git a/src/components/manage/Toolbar/Toolbar.jsx b/src/components/manage/Toolbar/Toolbar.jsx
index 726eaa8055..098ce6e396 100644
--- a/src/components/manage/Toolbar/Toolbar.jsx
+++ b/src/components/manage/Toolbar/Toolbar.jsx
@@ -18,18 +18,18 @@ import Types from './Types';
 import PersonalInformation from '../Preferences/PersonalInformation';
 import PersonalPreferences from '../Preferences/PersonalPreferences';
 import StandardWrapper from './StandardWrapper';
-import { getTypes, listActions } from '../../../actions';
-import { Icon } from '../../../components';
-import { BodyClass, getBaseUrl } from '../../../helpers';
+import { getTypes, listActions } from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
+import { BodyClass, getBaseUrl } from '@plone/volto/helpers';
 
 import pastanagaSmall from './pastanaga-small.svg';
 import pastanagalogo from './pastanaga.svg';
-import penSVG from '../../../icons/pen.svg';
-import folderSVG from '../../../icons/folder.svg';
-import addSVG from '../../../icons/add-document.svg';
-import moreSVG from '../../../icons/more.svg';
-import userSVG from '../../../icons/user.svg';
-import clearSVG from '../../../icons/clear.svg';
+import penSVG from '@plone/volto/icons/pen.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import addSVG from '@plone/volto/icons/add-document.svg';
+import moreSVG from '@plone/volto/icons/more.svg';
+import userSVG from '@plone/volto/icons/user.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 const toolbarComponents = {
   personalTools: { component: PersonalTools, wrapper: null },
diff --git a/src/components/manage/Widgets/ArrayWidget.jsx b/src/components/manage/Widgets/ArrayWidget.jsx
index 34d1648e97..4a8896a682 100644
--- a/src/components/manage/Widgets/ArrayWidget.jsx
+++ b/src/components/manage/Widgets/ArrayWidget.jsx
@@ -8,9 +8,7 @@ import PropTypes from 'prop-types';
 import { Form, Grid, Label } from 'semantic-ui-react';
 import { isObject, map } from 'lodash';
 import { connect } from 'react-redux';
-import { components } from 'react-select';
-import AsyncPaginate from 'react-select-async-paginate';
-import CreatableSelect from 'react-select/lib/Creatable';
+import loadable from '@loadable/component';
 
 import {
   getVocabFromHint,
@@ -24,6 +22,16 @@ import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
 
+const components = loadable(() => import('react-select'), 'components');
+const AsyncPaginate = loadable(
+  () => import('react-select-async-paginate'),
+  'components',
+);
+const CreatableSelect = loadable(
+  () => import('react-select/lib/Creatable'),
+  'components',
+);
+
 const Option = props => {
   return (
     <components.Option {...props}>
diff --git a/src/components/manage/Widgets/FileWidget.jsx b/src/components/manage/Widgets/FileWidget.jsx
index 28de26534e..b52d8dd329 100644
--- a/src/components/manage/Widgets/FileWidget.jsx
+++ b/src/components/manage/Widgets/FileWidget.jsx
@@ -9,8 +9,8 @@ import { Form, Grid, Input, Label, Button } from 'semantic-ui-react';
 import { map } from 'lodash';
 import { readAsDataURL } from 'promise-file-reader';
 
-import deleteSVG from '../../../icons/delete.svg';
-import { Icon } from '../../../components';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import { Icon } from '@plone/volto/components';
 
 /**
  * FileWidget component class.
diff --git a/src/components/manage/Widgets/QuerystringWidget.jsx b/src/components/manage/Widgets/QuerystringWidget.jsx
index 76e373d39d..33324d9cab 100644
--- a/src/components/manage/Widgets/QuerystringWidget.jsx
+++ b/src/components/manage/Widgets/QuerystringWidget.jsx
@@ -17,14 +17,17 @@ import {
 } from 'semantic-ui-react';
 import { filter, remove, toPairs, groupBy, map } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
-import { getQuerystring } from '../../../actions';
-import Select, { components } from 'react-select';
+import { getQuerystring } from '@plone/volto/actions';
 import { Icon } from '@plone/volto/components';
+import loadable from '@loadable/component';
 
 import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
-import clearSVG from '../../../icons/clear.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const Select = loadable(() => import('react-select'));
+const components = loadable(() => import('react-select'), 'components');
 
 const messages = defineMessages({
   default: {
diff --git a/src/components/manage/Widgets/ReferenceWidget.jsx b/src/components/manage/Widgets/ReferenceWidget.jsx
index 22a973a424..b7815611d9 100644
--- a/src/components/manage/Widgets/ReferenceWidget.jsx
+++ b/src/components/manage/Widgets/ReferenceWidget.jsx
@@ -12,7 +12,7 @@ import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import { settings } from '~/config';
 
-import { resetSearchContent, searchContent } from '../../../actions';
+import { resetSearchContent, searchContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   no_results_found: {
diff --git a/src/components/manage/Widgets/SchemaWidget.jsx b/src/components/manage/Widgets/SchemaWidget.jsx
index 0d21b7fb85..db97a653f9 100644
--- a/src/components/manage/Widgets/SchemaWidget.jsx
+++ b/src/components/manage/Widgets/SchemaWidget.jsx
@@ -18,7 +18,7 @@ import loadable from '@loadable/component';
 import {
   Field /*, ModalForm */,
   SchemaWidgetFieldset,
-} from '../../../components';
+} from '@plone/volto/components';
 
 const ModalForm = loadable(() => import('../Form/ModalForm'));
 
diff --git a/src/components/manage/Widgets/SelectWidget.jsx b/src/components/manage/Widgets/SelectWidget.jsx
index 0f02f382c9..31f8358a1c 100644
--- a/src/components/manage/Widgets/SelectWidget.jsx
+++ b/src/components/manage/Widgets/SelectWidget.jsx
@@ -10,8 +10,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { map, find, isBoolean, isObject } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
-import Select, { components } from 'react-select';
-import AsyncPaginate from 'react-select-async-paginate';
+import loadable from '@loadable/component';
 
 import {
   getBoolean,
@@ -26,6 +25,13 @@ import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
 
+const Select = loadable(() => import('react-select'));
+const components = loadable(() => import('react-select'), 'components');
+const AsyncPaginate = loadable(
+  () => import('react-select-async-paginate'),
+  'components',
+);
+
 const messages = defineMessages({
   default: {
     id: 'Default',
diff --git a/src/components/manage/Widgets/TokenWidget.jsx b/src/components/manage/Widgets/TokenWidget.jsx
index 95144f6bfa..e70ace0585 100644
--- a/src/components/manage/Widgets/TokenWidget.jsx
+++ b/src/components/manage/Widgets/TokenWidget.jsx
@@ -8,20 +8,25 @@ import PropTypes from 'prop-types';
 import { Form, Grid, Label } from 'semantic-ui-react';
 import { map } from 'lodash';
 import { connect } from 'react-redux';
-import { components } from 'react-select';
-import AsyncCreatableSelect from 'react-select/lib/AsyncCreatable';
+import loadable from '@loadable/component';
 
 import {
   getVocabFromHint,
   getVocabFromField,
   getVocabFromItems,
 } from '@plone/volto/helpers';
-import { getVocabulary } from '../../../actions';
-import { Icon } from '../../../components';
+import { getVocabulary } from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
 
-import downSVG from '../../../icons/down-key.svg';
-import upSVG from '../../../icons/up-key.svg';
-import checkSVG from '../../../icons/check.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const components = loadable(() => import('react-select'), 'components');
+const AsyncCreatableSelect = loadable(
+  () => import('react-select/lib/AsyncCreatable'),
+  'components',
+);
 
 const Option = props => {
   return (
diff --git a/src/components/manage/Workflow/Workflow.jsx b/src/components/manage/Workflow/Workflow.jsx
index 7caef1006e..435a3cc56e 100644
--- a/src/components/manage/Workflow/Workflow.jsx
+++ b/src/components/manage/Workflow/Workflow.jsx
@@ -8,22 +8,25 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { uniqBy } from 'lodash';
-import Select, { components } from 'react-select';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import getWorkflowMapping from '../../../constants/Workflows';
-import { Icon } from '../../../components';
-import downSVG from '../../../icons/down-key.svg';
-import upSVG from '../../../icons/up-key.svg';
-import checkSVG from '../../../icons/check.svg';
+import getWorkflowMapping from '@plone/volto/constants/Workflows';
+import { Icon, Toast } from '@plone/volto/components';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
 
-import { getContent, getWorkflow, transitionWorkflow } from '../../../actions';
+import {
+  getContent,
+  getWorkflow,
+  transitionWorkflow,
+} from '@plone/volto/actions';
 import { settings } from '~/config';
-// import { Toast } from '../../../components';
 
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
+const Select = loadable(() => import('react-select'));
+const components = loadable(() => import('react-select'), 'components');
 
 const messages = defineMessages({
   messageUpdated: {
diff --git a/src/components/theme/App/App.jsx b/src/components/theme/App/App.jsx
index ae03f5bb00..9fd7928792 100644
--- a/src/components/theme/App/App.jsx
+++ b/src/components/theme/App/App.jsx
@@ -17,19 +17,19 @@ import join from 'lodash/join';
 import trim from 'lodash/trim';
 import cx from 'classnames';
 
-import Error from '../../../error';
+import Error from '@plone/volto/error';
 
-import { Breadcrumbs, Footer, Header, Icon } from '../../../components';
-import { BodyClass, getBaseUrl, getView } from '../../../helpers';
+import { Breadcrumbs, Footer, Header, Icon } from '@plone/volto/components';
+import { BodyClass, getBaseUrl, getView } from '@plone/volto/helpers';
 import {
   getBreadcrumbs,
   getContent,
   getNavigation,
   getTypes,
   getWorkflow,
-} from '../../../actions';
+} from '@plone/volto/actions';
 
-import clearSVG from '../../../icons/clear.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 /**
  * @export
diff --git a/src/components/theme/Breadcrumbs/Breadcrumbs.jsx b/src/components/theme/Breadcrumbs/Breadcrumbs.jsx
index 32ce2c1475..b9584f6f59 100644
--- a/src/components/theme/Breadcrumbs/Breadcrumbs.jsx
+++ b/src/components/theme/Breadcrumbs/Breadcrumbs.jsx
@@ -12,8 +12,8 @@ import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import { Icon } from '@plone/volto/components';
-import { getBreadcrumbs } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
+import { getBreadcrumbs } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
 
 import homeSVG from '@plone/volto/icons/home.svg';
 
diff --git a/src/components/theme/Comments/CommentEditModal.jsx b/src/components/theme/Comments/CommentEditModal.jsx
index ad63758501..87fcc43222 100644
--- a/src/components/theme/Comments/CommentEditModal.jsx
+++ b/src/components/theme/Comments/CommentEditModal.jsx
@@ -10,8 +10,8 @@ import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
 
-import { updateComment } from '../../../actions';
-// import { ModalForm } from '../../../components';
+import { updateComment } from '@plone/volto/actions';
+// import { ModalForm } from '@plone/volto/components';
 
 const ModalForm = loadable(() => import('../../manage/Form/ModalForm'));
 
diff --git a/src/components/theme/Comments/Comments.jsx b/src/components/theme/Comments/Comments.jsx
index bbba8a710b..dbffdbb57d 100644
--- a/src/components/theme/Comments/Comments.jsx
+++ b/src/components/theme/Comments/Comments.jsx
@@ -12,9 +12,9 @@ import moment from 'moment';
 import { Button, Grid, Segment } from 'semantic-ui-react';
 import { settings } from '~/config';
 
-import { addComment, deleteComment, listComments } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
-import { CommentEditModal, Form } from '../../../components';
+import { addComment, deleteComment, listComments } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
+import { CommentEditModal, Form } from '@plone/volto/components';
 
 const messages = defineMessages({
   comment: {
diff --git a/src/components/theme/ContactForm/ContactForm.jsx b/src/components/theme/ContactForm/ContactForm.jsx
index bc6c1de4eb..12ad775610 100644
--- a/src/components/theme/ContactForm/ContactForm.jsx
+++ b/src/components/theme/ContactForm/ContactForm.jsx
@@ -13,14 +13,10 @@ import { Container, Message, Icon } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link, withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import { Form /*, Toolbar, Toast */ } from '../../';
-import { emailNotification } from '../../../actions';
-import { getBaseUrl } from '../../../helpers';
-
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import { Form, Toolbar, Toast } from '@plone/volto/components';
+import { emailNotification } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers';
 
 const messages = defineMessages({
   send: {
diff --git a/src/components/theme/Header/Header.jsx b/src/components/theme/Header/Header.jsx
index 05f7bc52c3..8b2ff7e73b 100644
--- a/src/components/theme/Header/Header.jsx
+++ b/src/components/theme/Header/Header.jsx
@@ -8,7 +8,12 @@ import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Anontools, Logo, Navigation, SearchWidget } from '../../../components';
+import {
+  Anontools,
+  Logo,
+  Navigation,
+  SearchWidget,
+} from '@plone/volto/components';
 
 /**
  * Header component class.
diff --git a/src/components/theme/Login/Login.jsx b/src/components/theme/Login/Login.jsx
index 157f4614b2..49c9cfa906 100644
--- a/src/components/theme/Login/Login.jsx
+++ b/src/components/theme/Login/Login.jsx
@@ -21,17 +21,13 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 import { withRouter } from 'react-router-dom';
 
-import { Icon } from '../../../components';
-import { login } from '../../../actions';
+import { Icon, Toast } from '@plone/volto/components';
+import { login } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-// import { Toast } from '@plone/volto/components';
-import loadable from '@loadable/component';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
-
 const messages = defineMessages({
   login: {
     id: 'Log in',
diff --git a/src/components/theme/Logout/Logout.jsx b/src/components/theme/Logout/Logout.jsx
index d703b8d2e3..b3e64ef437 100644
--- a/src/components/theme/Logout/Logout.jsx
+++ b/src/components/theme/Logout/Logout.jsx
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import qs from 'query-string';
 
 import Login from '../Login/Login';
-import { logout, purgeMessages } from '../../../actions';
+import { logout, purgeMessages } from '@plone/volto/actions';
 
 /**
  * Logout class.
diff --git a/src/components/theme/Navigation/Navigation.jsx b/src/components/theme/Navigation/Navigation.jsx
index 056537a012..1b09b0d5c6 100644
--- a/src/components/theme/Navigation/Navigation.jsx
+++ b/src/components/theme/Navigation/Navigation.jsx
@@ -12,9 +12,9 @@ import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Menu } from 'semantic-ui-react';
 import cx from 'classnames';
-import { getBaseUrl } from '../../../helpers';
+import { getBaseUrl } from '@plone/volto/helpers';
 
-import { getNavigation } from '../../../actions';
+import { getNavigation } from '@plone/volto/actions';
 
 const messages = defineMessages({
   closeMobileMenu: {
diff --git a/src/components/theme/PasswordReset/PasswordReset.jsx b/src/components/theme/PasswordReset/PasswordReset.jsx
index 1bd009c253..a3b2f254cc 100644
--- a/src/components/theme/PasswordReset/PasswordReset.jsx
+++ b/src/components/theme/PasswordReset/PasswordReset.jsx
@@ -12,8 +12,8 @@ import Helmet from 'react-helmet';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Form } from '../../../components';
-import { setInitialPassword } from '../../../actions';
+import { Form } from '@plone/volto/components';
+import { setInitialPassword } from '@plone/volto/actions';
 
 const messages = defineMessages({
   title: {
diff --git a/src/components/theme/PasswordReset/RequestPasswordReset.jsx b/src/components/theme/PasswordReset/RequestPasswordReset.jsx
index c9f95f5bef..1a3d1bb86b 100644
--- a/src/components/theme/PasswordReset/RequestPasswordReset.jsx
+++ b/src/components/theme/PasswordReset/RequestPasswordReset.jsx
@@ -12,8 +12,8 @@ import Helmet from 'react-helmet';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Form } from '../../../components';
-import { resetPassword } from '../../../actions';
+import { Form } from '@plone/volto/components';
+import { resetPassword } from '@plone/volto/actions';
 
 const messages = defineMessages({
   title: {
diff --git a/src/components/theme/Register/Register.jsx b/src/components/theme/Register/Register.jsx
index 5620e85e4f..6f3e6f314e 100644
--- a/src/components/theme/Register/Register.jsx
+++ b/src/components/theme/Register/Register.jsx
@@ -11,12 +11,9 @@ import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import loadable from '@loadable/component';
 
-import { Form /*, Toast */ } from '../../../components';
-import { createUser } from '../../../actions';
-
-const Toast = loadable(() => import('../../manage/Toast/Toast'));
+import { Form, Toast } from '@plone/volto/components';
+import { createUser } from '@plone/volto/actions';
 
 const messages = defineMessages({
   title: {
diff --git a/src/components/theme/Search/Search.jsx b/src/components/theme/Search/Search.jsx
index 5008347ac8..d2361e2679 100644
--- a/src/components/theme/Search/Search.jsx
+++ b/src/components/theme/Search/Search.jsx
@@ -14,13 +14,10 @@ import { FormattedMessage } from 'react-intl';
 import { Portal } from 'react-portal';
 import { Container } from 'semantic-ui-react';
 import qs from 'query-string';
-import loadable from '@loadable/component';
 
-import { searchContent } from '../../../actions';
+import { searchContent } from '@plone/volto/actions';
 
-import { SearchTags /*, Toolbar */ } from '../../../components';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import { SearchTags, Toolbar } from '@plone/volto/components';
 
 const toSearchOptions = (searchableText, subject, path) => {
   return {
diff --git a/src/components/theme/Search/SearchTags.jsx b/src/components/theme/Search/SearchTags.jsx
index 7a3815d5ba..750c6d7fda 100644
--- a/src/components/theme/Search/SearchTags.jsx
+++ b/src/components/theme/Search/SearchTags.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { getVocabulary } from '../../../actions';
+import { getVocabulary } from '@plone/volto/actions';
 
 const vocabulary = 'plone.app.vocabularies.Keywords';
 
diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
index f759d0b505..7b26f30fd3 100644
--- a/src/components/theme/View/DefaultView.jsx
+++ b/src/components/theme/View/DefaultView.jsx
@@ -17,7 +17,7 @@ import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
   hasBlocksData,
-} from '../../../helpers';
+} from '@plone/volto/helpers';
 
 const messages = defineMessages({
   unknownBlock: {
diff --git a/src/components/theme/View/FileView.jsx b/src/components/theme/View/FileView.jsx
index aef74ed0bc..41341ce6a2 100644
--- a/src/components/theme/View/FileView.jsx
+++ b/src/components/theme/View/FileView.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Container } from 'semantic-ui-react';
 
-import { flattenToAppURL } from '../../../helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
  * File view component class.
diff --git a/src/components/theme/View/ImageView.jsx b/src/components/theme/View/ImageView.jsx
index 1c3379046f..f0f394c2d8 100644
--- a/src/components/theme/View/ImageView.jsx
+++ b/src/components/theme/View/ImageView.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Container } from 'semantic-ui-react';
 
-import { flattenToAppURL } from '../../../helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
  * Image view component class.
diff --git a/src/components/theme/View/NewsItemView.jsx b/src/components/theme/View/NewsItemView.jsx
index daa72e8f63..b9fdd815a4 100644
--- a/src/components/theme/View/NewsItemView.jsx
+++ b/src/components/theme/View/NewsItemView.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Container, Image } from 'semantic-ui-react';
 
-import { flattenToAppURL } from '../../../helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
  * NewsItemView view component class.
diff --git a/src/components/theme/View/View.jsx b/src/components/theme/View/View.jsx
index c323fc895c..5ba3e0dc8a 100644
--- a/src/components/theme/View/View.jsx
+++ b/src/components/theme/View/View.jsx
@@ -10,14 +10,15 @@ import { compose } from 'redux';
 import { Portal } from 'react-portal';
 import { injectIntl } from 'react-intl';
 import qs from 'query-string';
-import loadable from '@loadable/component';
 import { views } from '~/config';
 
-import { Comments, Tags /*, Toolbar */ } from '../../../components';
-import { listActions, getContent } from '../../../actions';
-import { BodyClass, getBaseUrl, getLayoutFieldname } from '../../../helpers';
-
-const Toolbar = loadable(() => import('../../manage/Toolbar/Toolbar'));
+import { Comments, Tags, Toolbar } from '@plone/volto/components';
+import { listActions, getContent } from '@plone/volto/actions';
+import {
+  BodyClass,
+  getBaseUrl,
+  getLayoutFieldname,
+} from '@plone/volto/helpers';
 
 /**
  * View container class.
diff --git a/src/routes.js b/src/routes.js
index 3f4603c02b..b8c32d18e9 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,73 +2,31 @@
  * Routes.
  * @module routes
  */
-import loadable from '@loadable/component';
 
-// import {
-// Add,
-// App,
-// ChangePassword,
-// ContactForm,
-// Contents,
-// Controlpanel,
-// Controlpanels,
-// Edit,
-// Diff,
-// Delete,
-// History,
-// View,
-// NotFound,
-// Login,
-// Logout,
-// ModerateComments,
-// PasswordReset,
-// Register,
-// RequestPasswordReset,
-// Search,
-// Sharing,
-// UsersControlpanel,
-// } from './components';
-
-const Add = loadable(() => import('./components/manage/Add/Add'));
-const App = loadable(() => import('./components/theme/App/App'));
-const ChangePassword = loadable(() =>
-  import('./components/manage/Preferences/ChangePassword'),
-);
-const ContactForm = loadable(() =>
-  import('./components/theme/ContactForm/ContactForm'),
-);
-const Contents = loadable(() =>
-  import('./components/manage/Contents/Contents'),
-);
-const Controlpanel = loadable(() =>
-  import('./components/manage/Controlpanels/Controlpanel'),
-);
-const Controlpanels = loadable(() =>
-  import('./components/manage/Controlpanels/Controlpanels'),
-);
-const Edit = loadable(() => import('./components/manage/Edit/Edit'));
-const Diff = loadable(() => import('./components/manage/Diff/Diff'));
-const Delete = loadable(() => import('./components/manage/Delete/Delete'));
-const History = loadable(() => import('./components/manage/History/History'));
-const View = loadable(() => import('./components/theme/View/View'));
-const NotFound = loadable(() => import('./components/theme/NotFound/NotFound'));
-const Login = loadable(() => import('./components/theme/Login/Login'));
-const Logout = loadable(() => import('./components/theme/Logout/Logout'));
-const ModerateComments = loadable(() =>
-  import('./components/manage/Controlpanels/ModerateComments'),
-);
-const PasswordReset = loadable(() =>
-  import('./components/theme/PasswordReset/PasswordReset'),
-);
-const Register = loadable(() => import('./components/theme/Register/Register'));
-const RequestPasswordReset = loadable(() =>
-  import('./components/theme/PasswordReset/RequestPasswordReset'),
-);
-const Search = loadable(() => import('./components/theme/Search/Search'));
-const Sharing = loadable(() => import('./components/manage/Sharing/Sharing'));
-const UsersControlpanel = loadable(() =>
-  import('./components/manage/Controlpanels/UsersControlpanel'),
-);
+import {
+  Add,
+  App,
+  ChangePassword,
+  ContactForm,
+  Contents,
+  Controlpanel,
+  Controlpanels,
+  Edit,
+  Diff,
+  Delete,
+  History,
+  View,
+  NotFound,
+  Login,
+  Logout,
+  ModerateComments,
+  PasswordReset,
+  Register,
+  RequestPasswordReset,
+  Search,
+  Sharing,
+  UsersControlpanel,
+} from '@plone/volto/components';
 
 /**
  * Default routes array.

From 08ed25891080081dd57b51af243028a9656f8ed8 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Sat, 4 Jan 2020 20:48:51 +0100
Subject: [PATCH 08/18] wip: test fixing

---
 package.json                                  |   1 +
 src/components/test-index.js                  | 120 ++++++++++++++++++
 .../theme/Comments/CommentEditModal.jsx       |   6 +-
 3 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 src/components/test-index.js

diff --git a/package.json b/package.json
index 76a3e27299..bfb68c43b2 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
       "^.+\\.(svg)$": "./jest-svgsystem-transform.js"
     },
     "moduleNameMapper": {
+      "@plone/volto/components$": "<rootDir>/src/components/test-index",
       "@plone/volto/(.*)$": "<rootDir>/src/$1",
       "~/config": "<rootDir>/src/config"
     },
diff --git a/src/components/test-index.js b/src/components/test-index.js
new file mode 100644
index 0000000000..5983456ecb
--- /dev/null
+++ b/src/components/test-index.js
@@ -0,0 +1,120 @@
+/**
+ * Point of contact for component modules.
+ * @module components
+ * @example import { Field } from 'components';
+ */
+// import loadable from '@loadable/component';
+
+export App from './theme/App/App';
+export ContactForm from './theme/ContactForm/ContactForm';
+export Login from './theme/Login/Login';
+export Logout from './theme/Logout/Logout';
+export NotFound from './theme/NotFound/NotFound';
+export Search from './theme/Search/Search';
+export View from './theme/View/View';
+export Register from './theme/Register/Register';
+export PasswordReset from './theme/PasswordReset/PasswordReset';
+export RequestPasswordReset from './theme/PasswordReset/RequestPasswordReset';
+export ChangePassword from './manage/Preferences/ChangePassword';
+export DefaultView from './theme/View/DefaultView';
+export FileView from './theme/View/FileView';
+export ImageView from './theme/View/ImageView';
+export NewsItemView from './theme/View/NewsItemView';
+export ListingView from './theme/View/ListingView';
+export SummaryView from './theme/View/SummaryView';
+export TabularView from './theme/View/TabularView';
+export Comments from './theme/Comments/Comments';
+export Tags from './theme/Tags/Tags';
+export SocialSharing from './theme/SocialSharing/SocialSharing';
+export Pagination from './theme/Pagination/Pagination';
+export SearchTags from './theme/Search/SearchTags';
+export CommentEditModal from './theme/Comments/CommentEditModal';
+
+// CMSUI
+export Toolbar from './manage/Toolbar/Toolbar';
+export Add from './manage/Add/Add';
+export Edit from './manage/Edit/Edit';
+export Contents from './manage/Contents/Contents';
+export Sharing from './manage/Sharing/Sharing';
+export Toast from './manage/Toast/Toast';
+export Controlpanel from './manage/Controlpanels/Controlpanel';
+export Controlpanels from './manage/Controlpanels/Controlpanels';
+export ModerateComments from './manage/Controlpanels/ModerateComments';
+export UsersControlpanel from './manage/Controlpanels/UsersControlpanel';
+export Delete from './manage/Delete/Delete';
+export Diff from './manage/Diff/Diff';
+export ModalForm from './manage/Form/ModalForm';
+export History from './manage/History/History';
+
+export Anontools from './theme/Anontools/Anontools';
+export Breadcrumbs from './theme/Breadcrumbs/Breadcrumbs';
+export Footer from './theme/Footer/Footer';
+export Header from './theme/Header/Header';
+export Icon from './theme/Icon/Icon';
+export Logo from './theme/Logo/Logo';
+export Navigation from './theme/Navigation/Navigation';
+export SearchWidget from './theme/SearchWidget/SearchWidget';
+export Title from './theme/Title/Title';
+
+export Actions from './manage/Actions/Actions';
+export ContentsIndexHeader from './manage/Contents/ContentsIndexHeader';
+export ContentsItem from './manage/Contents/ContentsItem';
+export ContentsUploadModal from './manage/Contents/ContentsUploadModal';
+export ContentsPropertiesModal from './manage/Contents/ContentsPropertiesModal';
+export ContentsRenameModal from './manage/Contents/ContentsRenameModal';
+export ContentsWorkflowModal from './manage/Contents/ContentsWorkflowModal';
+export ContentsTagsModal from './manage/Contents/ContentsTagsModal';
+
+export UsersControlpanelGroups from './manage/Controlpanels/UsersControlpanelGroups';
+export VersionOverview from './manage/Controlpanels/VersionOverview';
+export UsersControlpanelUser from './manage/Controlpanels/UsersControlpanelUser';
+export DiffField from './manage/Diff/DiffField';
+export Display from './manage/Display/Display';
+export Form from './manage/Form/Form';
+export Field from './manage/Form/Field';
+
+export Messages from './manage/Messages/Messages';
+export PersonalPreferences from './manage/Preferences/PersonalPreferences';
+export PersonalInformation from './manage/Preferences/PersonalInformation';
+export ArrayWidget from './manage/Widgets/ArrayWidget';
+export CheckboxWidget from './manage/Widgets/CheckboxWidget';
+export DatetimeWidget from './manage/Widgets/DatetimeWidget';
+export FileWidget from './manage/Widgets/FileWidget';
+export PasswordWidget from './manage/Widgets/PasswordWidget';
+export ReferenceWidget from './manage/Widgets/ReferenceWidget';
+export SchemaWidget from './manage/Widgets/SchemaWidget';
+export SchemaWidgetFieldset from './manage/Widgets/SchemaWidgetFieldset';
+export SelectWidget from './manage/Widgets/SelectWidget';
+export Sidebar from './manage/Sidebar/Sidebar';
+export SidebarPortal from './manage/Sidebar/SidebarPortal';
+export TextareaWidget from './manage/Widgets/TextareaWidget';
+export TextWidget from './manage/Widgets/TextWidget';
+export WysiwygWidget from './manage/Widgets/WysiwygWidget';
+export Workflow from './manage/Workflow/Workflow';
+
+export BlockChooser from './manage/BlockChooser/BlockChooser';
+
+export EditDescriptionBlock from './manage/Blocks/Description/Edit';
+export EditTitleBlock from './manage/Blocks/Title/Edit';
+export EditTextBlock from './manage/Blocks/Text/Edit';
+export EditImageBlock from './manage/Blocks/Image/Edit';
+export EditVideoBlock from './manage/Blocks/Video/Edit';
+export EditBlock from './manage/Blocks/Block/Edit';
+export EditHeroImageLeftBlock from './manage/Blocks/HeroImageLeft/Edit';
+export ViewHeroImageLeftBlock from './manage/Blocks/HeroImageLeft/View';
+export EditMapBlock from './manage/Blocks/Maps/Edit';
+export EditHTMLBlock from './manage/Blocks/HTML/Edit';
+
+export ViewDescriptionBlock from './manage/Blocks/Description/View';
+export ViewTitleBlock from './manage/Blocks/Title/View';
+export ViewTextBlock from './manage/Blocks/Text/View';
+export ViewImageBlock from './manage/Blocks/Image/View';
+export ViewVideoBlock from './manage/Blocks/Video/View';
+export ViewMapBlock from './manage/Blocks/Maps/View';
+export ViewHTMLBlock from './manage/Blocks/HTML/View';
+
+export ImageSidebar from './manage/Sidebar/ImageSidebar';
+
+export PersonalTools from './manage/Toolbar/PersonalTools';
+export More from './manage/Toolbar/More';
+export Types from './manage/Toolbar/Types';
diff --git a/src/components/theme/Comments/CommentEditModal.jsx b/src/components/theme/Comments/CommentEditModal.jsx
index 7977f412fc..f4ff279310 100644
--- a/src/components/theme/Comments/CommentEditModal.jsx
+++ b/src/components/theme/Comments/CommentEditModal.jsx
@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
+// import loadable from '@loadable/component';
 
 import { updateComment } from '@plone/volto/actions';
-// import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components';
 
-const ModalForm = loadable(() => import('../../manage/Form/ModalForm'));
+// const ModalForm = loadable(() => import('../../manage/Form/ModalForm'));
 
 const messages = defineMessages({
   editComment: {

From e44a33364e0b3aad7f11b7ecb066150a5a1674f0 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Wed, 29 Jan 2020 18:47:11 +0100
Subject: [PATCH 09/18] Fix jest tests

---
 src/components/manage/Display/Display.jsx     |  71 ++++++----
 .../manage/Display/Display.test.jsx           |   8 +-
 .../Preferences/PersonalPreferences.jsx       |   5 +-
 .../Preferences/PersonalPreferences.test.jsx  |   8 +-
 src/components/manage/Widgets/ArrayWidget.jsx |   2 +-
 .../manage/Widgets/ArrayWidget.test.jsx       |   8 +-
 .../manage/Widgets/QuerystringWidget.test.jsx |   8 +-
 .../manage/Widgets/SelectStyling.jsx          |  36 +++--
 .../manage/Widgets/SelectWidget.test.jsx      |   8 +-
 src/components/manage/Widgets/TokenWidget.jsx |  33 ++---
 .../manage/Widgets/TokenWidget.test.jsx       |   8 +-
 src/components/manage/Workflow/Workflow.jsx   | 126 +++++++++++-------
 .../manage/Workflow/Workflow.test.jsx         |  15 ++-
 src/components/test-index.js                  |  20 ++-
 .../theme/Comments/CommentEditModal.jsx       |   3 -
 .../theme/Comments/CommentEditModal.test.jsx  |  13 +-
 16 files changed, 221 insertions(+), 151 deletions(-)

diff --git a/src/components/manage/Display/Display.jsx b/src/components/manage/Display/Display.jsx
index 22ea099a41..f4ba34cb93 100644
--- a/src/components/manage/Display/Display.jsx
+++ b/src/components/manage/Display/Display.jsx
@@ -13,30 +13,39 @@ import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
 
-const Select = loadable(() => import('react-select'));
-const components = loadable(() => import('react-select'), 'components');
+const ReactSelect = loadable.lib(() => import('react-select'));
 
 const Option = props => {
   return (
-    <components.Option {...props}>
-      <div>{props.label}</div>
-      {props.isFocused && !props.isSelected && (
-        <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.Option {...props}>
+          <div>{props.label}</div>
+          {props.isFocused && !props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+          )}
+          {props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#007bc1" />
+          )}
+        </components.Option>
       )}
-      {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
-    </components.Option>
+    </ReactSelect>
   );
 };
 
 const DropdownIndicator = props => {
   return (
-    <components.DropdownIndicator {...props}>
-      {props.selectProps.menuIsOpen ? (
-        <Icon name={upSVG} size="24px" color="#007bc1" />
-      ) : (
-        <Icon name={downSVG} size="24px" color="#007bc1" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.DropdownIndicator {...props}>
+          {props.selectProps.menuIsOpen ? (
+            <Icon name={upSVG} size="24px" color="#007bc1" />
+          ) : (
+            <Icon name={downSVG} size="24px" color="#007bc1" />
+          )}
+        </components.DropdownIndicator>
       )}
-    </components.DropdownIndicator>
+    </ReactSelect>
   );
 };
 
@@ -193,21 +202,25 @@ class DisplaySelect extends Component {
         <label htmlFor="display-select">
           <FormattedMessage id="Viewmode" defaultMessage="View" />
         </label>
-        <Select
-          name="display-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          options={this.props.layouts.map(item => ({
-            value: item,
-            label: layouts[item] || item,
-          }))}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          onChange={this.setLayout}
-          defaultValue={selectedOption}
-          isSearchable={false}
-        />
+        <ReactSelect>
+          {({ default: Select }) => (
+            <Select
+              name="display-select"
+              className="react-select-container"
+              classNamePrefix="react-select"
+              options={this.props.layouts.map(item => ({
+                value: item,
+                label: layouts[item] || item,
+              }))}
+              styles={customSelectStyles}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              onChange={this.setLayout}
+              defaultValue={selectedOption}
+              isSearchable={false}
+            />
+          )}
+        </ReactSelect>
       </Fragment>
     );
   }
diff --git a/src/components/manage/Display/Display.test.jsx b/src/components/manage/Display/Display.test.jsx
index cc78ecc19a..ba08afa71b 100644
--- a/src/components/manage/Display/Display.test.jsx
+++ b/src/components/manage/Display/Display.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -8,7 +9,7 @@ import Display from './Display';
 const mockStore = configureStore();
 
 describe('Display', () => {
-  it('renders an actions component', () => {
+  it('renders an actions component', async () => {
     const store = mockStore({
       content: {
         update: { loaded: true },
@@ -29,7 +30,8 @@ describe('Display', () => {
         <Display pathname="/test" />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/manage/Preferences/PersonalPreferences.jsx b/src/components/manage/Preferences/PersonalPreferences.jsx
index 6053259e0b..fdfa60bcfa 100644
--- a/src/components/manage/Preferences/PersonalPreferences.jsx
+++ b/src/components/manage/Preferences/PersonalPreferences.jsx
@@ -155,8 +155,5 @@ class PersonalPreferences extends Component {
 
 export default compose(
   injectIntl,
-  connect(
-    null,
-    { updateIntl },
-  ),
+  connect(null, { updateIntl }),
 )(PersonalPreferences);
diff --git a/src/components/manage/Preferences/PersonalPreferences.test.jsx b/src/components/manage/Preferences/PersonalPreferences.test.jsx
index 20c499a2b1..96098a0fc2 100644
--- a/src/components/manage/Preferences/PersonalPreferences.test.jsx
+++ b/src/components/manage/Preferences/PersonalPreferences.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
@@ -13,7 +14,7 @@ jest.mock('react-portal', () => ({
 }));
 
 describe('PersonalPreferences', () => {
-  it('renders a personal preferences component', () => {
+  it('renders a personal preferences component', async () => {
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -36,7 +37,8 @@ describe('PersonalPreferences', () => {
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/manage/Widgets/ArrayWidget.jsx b/src/components/manage/Widgets/ArrayWidget.jsx
index 9b7916db8c..9c0ab380ca 100644
--- a/src/components/manage/Widgets/ArrayWidget.jsx
+++ b/src/components/manage/Widgets/ArrayWidget.jsx
@@ -31,7 +31,7 @@ const AsyncPaginate = loadable(
   'components',
 );
 const CreatableSelect = loadable(
-  () => import('react-select/lib/Creatable'),
+  () => import('react-select/creatable'),
   'components',
 );
 
diff --git a/src/components/manage/Widgets/ArrayWidget.test.jsx b/src/components/manage/Widgets/ArrayWidget.test.jsx
index d0b10c42f8..5bd604dbee 100644
--- a/src/components/manage/Widgets/ArrayWidget.test.jsx
+++ b/src/components/manage/Widgets/ArrayWidget.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -7,7 +8,7 @@ import ArrayWidget from './ArrayWidget';
 
 const mockStore = configureStore();
 
-test('renders an array widget component', () => {
+test('renders an array widget component', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
@@ -30,6 +31,7 @@ test('renders an array widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+  await wait(() => {
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/manage/Widgets/QuerystringWidget.test.jsx b/src/components/manage/Widgets/QuerystringWidget.test.jsx
index 09abb20b0e..0b15462fc9 100644
--- a/src/components/manage/Widgets/QuerystringWidget.test.jsx
+++ b/src/components/manage/Widgets/QuerystringWidget.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -7,7 +8,7 @@ import QuerystringWidget from './QuerystringWidget';
 
 const mockStore = configureStore();
 
-test('renders an querystring widget component', () => {
+test('renders an querystring widget component', async () => {
   const store = mockStore({
     querystring: { indexes: {} },
     intl: {
@@ -20,6 +21,7 @@ test('renders an querystring widget component', () => {
       <QuerystringWidget id="my-field" title="My field" onChange={() => {}} />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+  await wait(() => {
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/manage/Widgets/SelectStyling.jsx b/src/components/manage/Widgets/SelectStyling.jsx
index 184c54b0f7..e52e46d46e 100644
--- a/src/components/manage/Widgets/SelectStyling.jsx
+++ b/src/components/manage/Widgets/SelectStyling.jsx
@@ -6,29 +6,39 @@ import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
 
-const components = loadable(() => import('react-select'), 'components');
+const ReactSelect = loadable.lib(() => import('react-select'));
 
 export const Option = props => {
   return (
-    <components.Option {...props}>
-      <div>{props.label}</div>
-      {props.isFocused && !props.isSelected && (
-        <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.Option {...props}>
+          <div>{props.label}</div>
+          {props.isFocused && !props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+          )}
+          {props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#007bc1" />
+          )}
+        </components.Option>
       )}
-      {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
-    </components.Option>
+    </ReactSelect>
   );
 };
 
 export const DropdownIndicator = props => {
   return (
-    <components.DropdownIndicator {...props}>
-      {props.selectProps.menuIsOpen ? (
-        <Icon name={upSVG} size="24px" color="#007bc1" />
-      ) : (
-        <Icon name={downSVG} size="24px" color="#007bc1" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.DropdownIndicator {...props}>
+          {props.selectProps.menuIsOpen ? (
+            <Icon name={upSVG} size="24px" color="#007bc1" />
+          ) : (
+            <Icon name={downSVG} size="24px" color="#007bc1" />
+          )}
+        </components.DropdownIndicator>
       )}
-    </components.DropdownIndicator>
+    </ReactSelect>
   );
 };
 
diff --git a/src/components/manage/Widgets/SelectWidget.test.jsx b/src/components/manage/Widgets/SelectWidget.test.jsx
index 5ae578cc30..93d571b6a4 100644
--- a/src/components/manage/Widgets/SelectWidget.test.jsx
+++ b/src/components/manage/Widgets/SelectWidget.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -7,7 +8,7 @@ import SelectWidget from './SelectWidget';
 
 const mockStore = configureStore();
 
-test('renders a select widget component', () => {
+test('renders a select widget component', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
@@ -26,6 +27,7 @@ test('renders a select widget component', () => {
       <SelectWidget id="my-field" title="My field" onChange={() => {}} />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+  await wait(() => {
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/manage/Widgets/TokenWidget.jsx b/src/components/manage/Widgets/TokenWidget.jsx
index bfe53ce7b5..d9d238470f 100644
--- a/src/components/manage/Widgets/TokenWidget.jsx
+++ b/src/components/manage/Widgets/TokenWidget.jsx
@@ -25,9 +25,8 @@ import {
   customSelectStyles,
 } from './SelectStyling';
 
-const AsyncCreatableSelect = loadable(
-  () => import('react-select/lib/AsyncCreatable'),
-  'components',
+const AsyncCreatable = loadable.lib(() =>
+  import('react-select/async-creatable'),
 );
 
 /**
@@ -179,18 +178,22 @@ class TokenWidget extends Component {
               </div>
             </Grid.Column>
             <Grid.Column width="8">
-              <AsyncCreatableSelect
-                className="react-select-container"
-                classNamePrefix="react-select"
-                defaultOptions={this.props.choices || []}
-                styles={customSelectStyles}
-                theme={selectTheme}
-                components={{ DropdownIndicator, Option }}
-                isMulti
-                value={selectedOption || []}
-                loadOptions={this.loadOptions}
-                onChange={this.handleChange}
-              />
+              <AsyncCreatable>
+                {({ default: AsyncCreatableSelect }) => (
+                  <AsyncCreatableSelect
+                    className="react-select-container"
+                    classNamePrefix="react-select"
+                    defaultOptions={this.props.choices || []}
+                    styles={customSelectStyles}
+                    theme={selectTheme}
+                    components={{ DropdownIndicator, Option }}
+                    isMulti
+                    value={selectedOption || []}
+                    loadOptions={this.loadOptions}
+                    onChange={this.handleChange}
+                  />
+                )}
+              </AsyncCreatable>
               {map(error, message => (
                 <Label key={message} basic color="red" pointing>
                   {message}
diff --git a/src/components/manage/Widgets/TokenWidget.test.jsx b/src/components/manage/Widgets/TokenWidget.test.jsx
index 935ae3ca2e..76f42d5965 100644
--- a/src/components/manage/Widgets/TokenWidget.test.jsx
+++ b/src/components/manage/Widgets/TokenWidget.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -7,7 +8,7 @@ import TokenWidget from './TokenWidget';
 
 const mockStore = configureStore();
 
-test('renders a token widget component', () => {
+test('renders a token widget component', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
@@ -30,6 +31,7 @@ test('renders a token widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+  await wait(() => {
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/manage/Workflow/Workflow.jsx b/src/components/manage/Workflow/Workflow.jsx
index e84cf244e6..c616282a22 100644
--- a/src/components/manage/Workflow/Workflow.jsx
+++ b/src/components/manage/Workflow/Workflow.jsx
@@ -25,8 +25,7 @@ import {
 } from '@plone/volto/actions';
 import { settings } from '~/config';
 
-const Select = loadable(() => import('react-select'));
-const components = loadable(() => import('react-select'), 'components');
+const ReactSelect = loadable.lib(() => import('react-select'));
 
 const messages = defineMessages({
   messageUpdated: {
@@ -40,7 +39,11 @@ const messages = defineMessages({
 });
 
 const Placeholder = props => {
-  return <components.Placeholder {...props} />;
+  return (
+    <ReactSelect>
+      {({ components }) => <components.Placeholder {...props} />}
+    </ReactSelect>
+  );
 };
 
 const SingleValue = ({ children, ...props }) => {
@@ -55,10 +58,14 @@ const SingleValue = ({ children, ...props }) => {
     borderRadius: '50%',
   };
   return (
-    <components.SingleValue {...props}>
-      <span style={stateDecorator} />
-      {children}
-    </components.SingleValue>
+    <ReactSelect>
+      {({ components }) => (
+        <components.SingleValue {...props}>
+          <span style={stateDecorator} />
+          {children}
+        </components.SingleValue>
+      )}
+    </ReactSelect>
   );
 };
 
@@ -81,26 +88,36 @@ const Option = props => {
         : null,
   };
   return (
-    <components.Option {...props}>
-      <span style={stateDecorator} />
-      <div style={{ marginRight: 'auto' }}>{props.label}</div>
-      {props.isFocused && !props.isSelected && (
-        <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.Option {...props}>
+          <span style={stateDecorator} />
+          <div style={{ marginRight: 'auto' }}>{props.label}</div>
+          {props.isFocused && !props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+          )}
+          {props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#007bc1" />
+          )}
+        </components.Option>
       )}
-      {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
-    </components.Option>
+    </ReactSelect>
   );
 };
 
 const DropdownIndicator = props => {
   return (
-    <components.DropdownIndicator {...props}>
-      {props.selectProps.menuIsOpen ? (
-        <Icon name={upSVG} size="24px" color="#007bc1" />
-      ) : (
-        <Icon name={downSVG} size="24px" color="#007bc1" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.DropdownIndicator {...props}>
+          {props.selectProps.menuIsOpen ? (
+            <Icon name={upSVG} size="24px" color="#007bc1" />
+          ) : (
+            <Icon name={downSVG} size="24px" color="#007bc1" />
+          )}
+        </components.DropdownIndicator>
       )}
-    </components.DropdownIndicator>
+    </ReactSelect>
   );
 };
 
@@ -298,36 +315,45 @@ class Workflow extends Component {
         <label htmlFor="state-select">
           <FormattedMessage id="State" defaultMessage="State" />
         </label>
-        <Select
-          name="display-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          isDisabled={
-            !this.props.content.review_state ||
-            this.props.transitions.length === 0
-          }
-          options={uniqBy(
-            this.props.transitions.map(transition =>
-              getWorkflowMapping(transition['@id']),
-            ),
-            'label',
-          ).concat(selectedOption)}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Placeholder, Option, SingleValue }}
-          onChange={this.transition}
-          defaultValue={
-            this.props.content.review_state
-              ? selectedOption
-              : {
-                  label: this.props.intl.formatMessage(
-                    messages.messageNoWorkflow,
-                  ),
-                  value: 'noworkflow',
-                }
-          }
-          isSearchable={false}
-        />
+        <ReactSelect>
+          {({ default: Select }) => (
+            <Select
+              name="display-select"
+              className="react-select-container"
+              classNamePrefix="react-select"
+              isDisabled={
+                !this.props.content.review_state ||
+                this.props.transitions.length === 0
+              }
+              options={uniqBy(
+                this.props.transitions.map(transition =>
+                  getWorkflowMapping(transition['@id']),
+                ),
+                'label',
+              ).concat(selectedOption)}
+              styles={customSelectStyles}
+              theme={selectTheme}
+              components={{
+                DropdownIndicator,
+                Placeholder,
+                Option,
+                SingleValue,
+              }}
+              onChange={this.transition}
+              defaultValue={
+                this.props.content.review_state
+                  ? selectedOption
+                  : {
+                      label: this.props.intl.formatMessage(
+                        messages.messageNoWorkflow,
+                      ),
+                      value: 'noworkflow',
+                    }
+              }
+              isSearchable={false}
+            />
+          )}
+        </ReactSelect>
       </Fragment>
     );
   }
diff --git a/src/components/manage/Workflow/Workflow.test.jsx b/src/components/manage/Workflow/Workflow.test.jsx
index 742539b908..2f79238eec 100644
--- a/src/components/manage/Workflow/Workflow.test.jsx
+++ b/src/components/manage/Workflow/Workflow.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { wait } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -8,7 +9,7 @@ import Workflow from './Workflow';
 const mockStore = configureStore();
 
 describe('Workflow', () => {
-  it('renders an empty workflow component', () => {
+  it('renders an empty workflow component', async () => {
     const store = mockStore({
       workflow: { history: [], transition: { loaded: true }, transitions: [] },
       intl: {
@@ -22,11 +23,12 @@ describe('Workflow', () => {
         <Workflow pathname="/test" />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 
-  it('renders a workflow component', () => {
+  it('renders a workflow component', async () => {
     const store = mockStore({
       workflow: {
         history: [{ review_state: 'private' }],
@@ -44,7 +46,8 @@ describe('Workflow', () => {
         <Workflow pathname="/test" />
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    await wait(() => {
+      expect(component.toJSON()).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/test-index.js b/src/components/test-index.js
index 5983456ecb..2a95335c3f 100644
--- a/src/components/test-index.js
+++ b/src/components/test-index.js
@@ -1,9 +1,9 @@
 /**
  * Point of contact for component modules.
+ * This file is used to avoid lazy loading components in tests.
  * @module components
  * @example import { Field } from 'components';
  */
-// import loadable from '@loadable/component';
 
 export App from './theme/App/App';
 export ContactForm from './theme/ContactForm/ContactForm';
@@ -36,7 +36,6 @@ export Add from './manage/Add/Add';
 export Edit from './manage/Edit/Edit';
 export Contents from './manage/Contents/Contents';
 export Sharing from './manage/Sharing/Sharing';
-export Toast from './manage/Toast/Toast';
 export Controlpanel from './manage/Controlpanels/Controlpanel';
 export Controlpanels from './manage/Controlpanels/Controlpanels';
 export ModerateComments from './manage/Controlpanels/ModerateComments';
@@ -96,25 +95,38 @@ export BlockChooser from './manage/BlockChooser/BlockChooser';
 
 export EditDescriptionBlock from './manage/Blocks/Description/Edit';
 export EditTitleBlock from './manage/Blocks/Title/Edit';
+export EditToCBlock from './manage/Blocks/ToC/Edit';
 export EditTextBlock from './manage/Blocks/Text/Edit';
 export EditImageBlock from './manage/Blocks/Image/Edit';
+export EditListingBlock from './manage/Blocks/Listing/Edit';
 export EditVideoBlock from './manage/Blocks/Video/Edit';
 export EditBlock from './manage/Blocks/Block/Edit';
 export EditHeroImageLeftBlock from './manage/Blocks/HeroImageLeft/Edit';
-export ViewHeroImageLeftBlock from './manage/Blocks/HeroImageLeft/View';
 export EditMapBlock from './manage/Blocks/Maps/Edit';
 export EditHTMLBlock from './manage/Blocks/HTML/Edit';
 
 export ViewDescriptionBlock from './manage/Blocks/Description/View';
 export ViewTitleBlock from './manage/Blocks/Title/View';
+export ViewToCBlock from './manage/Blocks/ToC/View';
 export ViewTextBlock from './manage/Blocks/Text/View';
 export ViewImageBlock from './manage/Blocks/Image/View';
+export ViewListingBlock from './manage/Blocks/Listing/View';
 export ViewVideoBlock from './manage/Blocks/Video/View';
+export ViewHeroImageLeftBlock from './manage/Blocks/HeroImageLeft/View';
 export ViewMapBlock from './manage/Blocks/Maps/View';
 export ViewHTMLBlock from './manage/Blocks/HTML/View';
 
-export ImageSidebar from './manage/Sidebar/ImageSidebar';
+export ListingBlockBody from './manage/Blocks/Listing/ListingBody';
+export ListingBlockData from './manage/Blocks/Listing/ListingData';
+export ListingBlockSidebar from './manage/Blocks/Listing/ListingSidebar';
 
+export ImageSidebar from './manage/Blocks/Image/ImageSidebar';
+export MapsSidebar from './manage/Blocks/Maps/MapsSidebar';
+export VideoSidebar from './manage/Blocks/Video/VideoSidebar';
+export LeadImageSidebar from './manage/Blocks/LeadImage/LeadImageSidebar';
+
+export ConditionalLink from './manage/ConditionalLink/ConditionalLink';
 export PersonalTools from './manage/Toolbar/PersonalTools';
 export More from './manage/Toolbar/More';
 export Types from './manage/Toolbar/Types';
+export Toast from './manage/Toast/Toast';
diff --git a/src/components/theme/Comments/CommentEditModal.jsx b/src/components/theme/Comments/CommentEditModal.jsx
index f4ff279310..1a05b95eff 100644
--- a/src/components/theme/Comments/CommentEditModal.jsx
+++ b/src/components/theme/Comments/CommentEditModal.jsx
@@ -8,13 +8,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
-// import loadable from '@loadable/component';
 
 import { updateComment } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
-// const ModalForm = loadable(() => import('../../manage/Form/ModalForm'));
-
 const messages = defineMessages({
   editComment: {
     id: 'Edit comment',
diff --git a/src/components/theme/Comments/CommentEditModal.test.jsx b/src/components/theme/Comments/CommentEditModal.test.jsx
index 711bd563f2..3dd3b12538 100644
--- a/src/components/theme/Comments/CommentEditModal.test.jsx
+++ b/src/components/theme/Comments/CommentEditModal.test.jsx
@@ -1,8 +1,7 @@
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
+import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { render, wait } from '@testing-library/react';
 
 import CommentEditModal from './CommentEditModal';
 
@@ -13,7 +12,7 @@ jest.mock('../../manage/Form/ModalForm', () =>
 );
 
 describe('CommentEditModal', () => {
-  it('renders a comment edit modal component', async () => {
+  it('renders a comment edit modal component', () => {
     const store = mockStore({
       comments: {
         update: {
@@ -26,7 +25,7 @@ describe('CommentEditModal', () => {
         messages: {},
       },
     });
-    const { container } = render(
+    const component = renderer.create(
       <Provider store={store}>
         <CommentEditModal
           open
@@ -37,9 +36,7 @@ describe('CommentEditModal', () => {
         />
       </Provider>,
     );
-    expect(container).toBeEmpty();
-    await wait(() => {
-      expect(container.firstChild).toMatchSnapshot();
-    });
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
   });
 });

From 36b0574d68a2b45c24fe1bfdc3f5113afb1600e6 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 7 Mar 2020 23:10:09 +0100
Subject: [PATCH 10/18] Fix missing merge jest config

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index c2b90c1334..06aa2fc45b 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
       "^.+\\.(svg)$": "./jest-svgsystem-transform.js"
     },
     "moduleNameMapper": {
+      "@plone/volto/components$": "<rootDir>/src/components/test-index",
       "@plone/volto/(.*)$": "<rootDir>/src/$1",
       "~/config": "<rootDir>/src/config"
     },

From 01bb7dd853eaa07f8ddc7353dc1299f81ddf380f Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sun, 8 Mar 2020 11:06:53 +0100
Subject: [PATCH 11/18] WIP

---
 .../Blocks/Listing/ListingSidebar.test.jsx    |  12 +-
 .../ListingSidebar.test.jsx.snap              | 464 ++++++++++++++++++
 .../Contents/ContentsRenameModal.test.jsx     |   2 +-
 src/components/test-index.js                  |   2 +
 4 files changed, 474 insertions(+), 6 deletions(-)

diff --git a/src/components/manage/Blocks/Listing/ListingSidebar.test.jsx b/src/components/manage/Blocks/Listing/ListingSidebar.test.jsx
index 053cd3a2ab..8f249739db 100644
--- a/src/components/manage/Blocks/Listing/ListingSidebar.test.jsx
+++ b/src/components/manage/Blocks/Listing/ListingSidebar.test.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { render, wait } from '@testing-library/react';
 
 import ListingSidebar from './ListingSidebar';
 
 const mockStore = configureStore();
 
-test('renders a Grid Block Sidebar component', () => {
+test('renders a Listing Block Sidebar component', async () => {
   const store = mockStore({
     querystring: { sortable_indexes: {} },
     intl: {
@@ -15,7 +15,7 @@ test('renders a Grid Block Sidebar component', () => {
       messages: {},
     },
   });
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <ListingSidebar
         id="dcdf1f42-645d-48f6-9531-357bdc2e1881"
@@ -35,6 +35,8 @@ test('renders a Grid Block Sidebar component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  await wait(() => {
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap b/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap
index cb831fe7db..b5d1a0dbdc 100644
--- a/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap
+++ b/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap
@@ -627,3 +627,467 @@ exports[`renders a Grid Block Sidebar component 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders a Listing Block Sidebar component 1`] = `
+<div
+  class="ui raised segments"
+>
+  <header
+    class="header pulled"
+  >
+    <h2>
+      Listing
+    </h2>
+  </header>
+  <div
+    class="accordion ui fluid styled form"
+  >
+    <div
+      class="active title"
+    >
+      Content
+      <svg
+        class="icon"
+        style="height: 20px; width: auto; fill: currentColor;"
+        viewBox=""
+        xmlns=""
+      />
+    </div>
+    <div
+      class="content active"
+    >
+      <div
+        class="ui segment form sidebar-listing-data"
+      >
+        <div
+          class="inline field"
+          id="field-source"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="stretched row"
+            >
+              <div
+                class="twelve wide column"
+              >
+                <div
+                  class="simple-field-name"
+                >
+                  Criteria
+                </div>
+              </div>
+            </div>
+            <div
+              class="stretched row"
+            >
+              <div
+                class="twelve wide column"
+              >
+                <div
+                  class="fields"
+                >
+                  <div
+                    class="field"
+                    style="flex: 1 0 auto;"
+                  >
+                    <div
+                      class="react-select-container css-2b097c-container"
+                      id="field-source"
+                    >
+                      <div
+                        class="react-select__control css-1ard45z-control"
+                      >
+                        <div
+                          class="react-select__value-container css-1dvrfad"
+                        >
+                          <div
+                            class="react-select__placeholder css-1wa3eu0-placeholder"
+                          >
+                            Add criteria
+                          </div>
+                          <div
+                            class="css-b8ldur-Input"
+                          >
+                            <div
+                              class="react-select__input"
+                              style="display: inline-block;"
+                            >
+                              <input
+                                aria-autocomplete="list"
+                                autocapitalize="none"
+                                autocomplete="off"
+                                autocorrect="off"
+                                id="react-select-2-input"
+                                spellcheck="false"
+                                style="box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;"
+                                tabindex="0"
+                                type="text"
+                                value=""
+                              />
+                              <div
+                                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
+                        >
+                          <span
+                            class="react-select__indicator-separator css-6fp5c8-indicatorSeparator"
+                          />
+                          <div
+                            aria-hidden="true"
+                            class="react-select__indicator react-select__dropdown-indicator css-7hdh9a-DropdownIndicator"
+                          >
+                            <svg
+                              class="icon"
+                              style="height: 24px; width: auto; fill: #007bc1;"
+                              viewBox=""
+                              xmlns=""
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <input
+                        name="source"
+                        type="hidden"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="inline field"
+          id="field-listingblock-sort-on"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="stretched row"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="wrapper"
+                >
+                  <label
+                    for="select-listingblock-sort-on"
+                  >
+                    Sort on
+                  </label>
+                </div>
+              </div>
+              <div
+                class="eight wide column"
+              >
+                <div
+                  class="react-select-container css-2b097c-container"
+                  id="select-listingblock-sort-on"
+                >
+                  <div
+                    class="react-select__control css-1ard45z-control"
+                  >
+                    <div
+                      class="react-select__value-container react-select__value-container--has-value css-1dvrfad"
+                    >
+                      <div
+                        class="react-select__single-value css-1uccc91-singleValue"
+                      >
+                        No selection
+                      </div>
+                      <div
+                        class="css-b8ldur-Input"
+                      >
+                        <div
+                          class="react-select__input"
+                          style="display: inline-block;"
+                        >
+                          <input
+                            aria-autocomplete="list"
+                            autocapitalize="none"
+                            autocomplete="off"
+                            autocorrect="off"
+                            id="react-select-3-input"
+                            spellcheck="false"
+                            style="box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;"
+                            tabindex="0"
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
+                    >
+                      <span
+                        class="react-select__indicator-separator css-6fp5c8-indicatorSeparator"
+                      />
+                      <div
+                        aria-hidden="true"
+                        class="react-select__indicator react-select__dropdown-indicator css-7hdh9a-DropdownIndicator"
+                      >
+                        <svg
+                          class="icon"
+                          style="height: 24px; width: auto; fill: #007bc1;"
+                          viewBox=""
+                          xmlns=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <input
+                    name="select-listingblock-sort-on"
+                    type="hidden"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="inline field"
+          id="field-listingblock-sort-on-reverse"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="stretched row"
+            >
+              <div
+                class="twelve wide column"
+              >
+                <div
+                  class="wrapper"
+                >
+                  <div
+                    class="ui fitted checkbox"
+                  >
+                    <input
+                      class="hidden"
+                      name="field-listingblock-sort-on-reverse"
+                      readonly=""
+                      tabindex="0"
+                      type="checkbox"
+                      value=""
+                    />
+                    <label />
+                  </div>
+                  <label
+                    class="ui basic horizontal label"
+                    for="field-listingblock-sort-on-reverse"
+                  >
+                    Reversed order
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="inline field text"
+          id="field-limit"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="stretched row"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="wrapper"
+                >
+                  <label
+                    for="field-limit"
+                  >
+                    Results limit
+                  </label>
+                </div>
+              </div>
+              <div
+                class="eight wide column"
+              >
+                <div
+                  class="ui input"
+                >
+                  <input
+                    id="field-limit"
+                    name="limit"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="inline field text"
+          id="field-itembatchsize"
+        >
+          <div
+            class="ui grid"
+          >
+            <div
+              class="stretched row"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="wrapper"
+                >
+                  <label
+                    for="field-itembatchsize"
+                  >
+                    Item batch size
+                  </label>
+                </div>
+              </div>
+              <div
+                class="eight wide column"
+              >
+                <div
+                  class="ui input"
+                >
+                  <input
+                    id="field-itembatchsize"
+                    name="itembatchsize"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="title"
+    >
+      Link more
+      <svg
+        class="icon"
+        style="height: 20px; width: auto; fill: currentColor;"
+        viewBox=""
+        xmlns=""
+      />
+    </div>
+    <div
+      class="content"
+    >
+      <div
+        class="inline field text"
+        id="field-linkTitle"
+      >
+        <div
+          class="ui grid"
+        >
+          <div
+            class="stretched row"
+          >
+            <div
+              class="four wide column"
+            >
+              <div
+                class="wrapper"
+              >
+                <label
+                  for="field-linkTitle"
+                >
+                  Link Title
+                </label>
+              </div>
+            </div>
+            <div
+              class="eight wide column"
+            >
+              <div
+                class="ui input"
+              >
+                <input
+                  id="field-linkTitle"
+                  name="linkTitle"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="inline field text"
+        id="field-linkHref"
+      >
+        <div
+          class="ui grid"
+        >
+          <div
+            class="stretched row"
+          >
+            <div
+              class="four wide column"
+            >
+              <div
+                class="wrapper"
+              >
+                <label
+                  for="field-linkHref"
+                >
+                  Link to
+                </label>
+              </div>
+            </div>
+            <div
+              class="eight wide column"
+            >
+              <div
+                class="ui icon input"
+              >
+                <input
+                  id="field-linkHref"
+                  name="linkHref"
+                  type="text"
+                  value=""
+                />
+                <i
+                  aria-hidden="true"
+                  attributes="[object Object]"
+                  class="icon"
+                />
+              </div>
+              <button>
+                <svg
+                  class="icon"
+                  style="height: 18px; width: auto; fill: currentColor;"
+                  viewBox=""
+                  xmlns=""
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/manage/Contents/ContentsRenameModal.test.jsx b/src/components/manage/Contents/ContentsRenameModal.test.jsx
index 3adb6af784..5da4b9b614 100644
--- a/src/components/manage/Contents/ContentsRenameModal.test.jsx
+++ b/src/components/manage/Contents/ContentsRenameModal.test.jsx
@@ -40,7 +40,7 @@ describe('ContentsRenameModal', () => {
         />
       </Provider>,
     );
-    expect(container).toBeEmpty();
+
     await wait(() => {
       expect(container.firstChild).toMatchSnapshot();
     });
diff --git a/src/components/test-index.js b/src/components/test-index.js
index 2a95335c3f..0e11be790e 100644
--- a/src/components/test-index.js
+++ b/src/components/test-index.js
@@ -119,6 +119,8 @@ export ViewHTMLBlock from './manage/Blocks/HTML/View';
 export ListingBlockBody from './manage/Blocks/Listing/ListingBody';
 export ListingBlockData from './manage/Blocks/Listing/ListingData';
 export ListingBlockSidebar from './manage/Blocks/Listing/ListingSidebar';
+export ListingBlockStyle from '@plone/volto/components/manage/Blocks/Listing/ListingStyle';
+export ListingBlockMore from '@plone/volto/components/manage/Blocks/Listing/ListingMore';
 
 export ImageSidebar from './manage/Blocks/Image/ImageSidebar';
 export MapsSidebar from './manage/Blocks/Maps/MapsSidebar';

From d53d8fad580fa9b41380e03e4d3d9af445122235 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Mar 2020 18:23:58 +0100
Subject: [PATCH 12/18] Finally, green

---
 package.json                                  |   1 +
 src/components/index.js                       |   6 +
 .../ListingSidebar.test.jsx.snap              | 628 ------------------
 .../Contents/ContentsPropertiesModal.test.jsx |   2 +-
 .../Contents/ContentsTagsModal.test.jsx       |   2 +-
 src/components/manage/Display/Display.jsx     |  83 ++-
 src/components/test-index.js                  |   5 +
 src/components/theme/App/App.test.jsx         |   3 +
 8 files changed, 65 insertions(+), 665 deletions(-)

diff --git a/package.json b/package.json
index 06aa2fc45b..9301783076 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "start": "razzle start",
     "build": "razzle build",
     "test": "razzle test --env=jsdom",
+    "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "test:ci": "CI=true razzle test --env=jsdom",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "start:prod": "NODE_ENV=production node build/server.js",
diff --git a/src/components/index.js b/src/components/index.js
index 40cc458469..3cb448ea51 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -354,6 +354,12 @@ export const ListingBlockSidebar = loadable(() =>
 export const ImageSidebar = loadable(() =>
   import('@plone/volto/components/manage/Blocks/Image/ImageSidebar'),
 );
+export const MapsSidebar = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Maps/MapsSidebar'),
+);
+export const VideoSidebar = loadable(() =>
+  import('@plone/volto/components/manage/Blocks/Video/VideoSidebar'),
+);
 export const LeadImageSidebar = loadable(() =>
   import('@plone/volto/components/manage/Blocks/LeadImage/LeadImageSidebar'),
 );
diff --git a/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap b/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap
index b5d1a0dbdc..8a1b250b53 100644
--- a/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap
+++ b/src/components/manage/Blocks/Listing/__snapshots__/ListingSidebar.test.jsx.snap
@@ -1,633 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders a Grid Block Sidebar component 1`] = `
-<div
-  className="ui raised segments"
->
-  <header
-    className="header pulled"
-  >
-    <h2>
-      Listing
-    </h2>
-  </header>
-  <div
-    className="accordion ui fluid styled form"
-  >
-    <div
-      className="active title"
-      onClick={[Function]}
-    >
-      Content
-      <svg
-        className="icon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": undefined,
-          }
-        }
-        onClick={null}
-        style={
-          Object {
-            "fill": "currentColor",
-            "height": "20px",
-            "width": "auto",
-          }
-        }
-        viewBox=""
-        xmlns=""
-      />
-    </div>
-    <div
-      className="content active"
-    >
-      <div
-        className="ui segment form sidebar-listing-data"
-      >
-        <div
-          className="inline field"
-          id="field-source"
-        >
-          <div
-            className="ui grid"
-          >
-            <div
-              className="stretched row"
-            >
-              <div
-                className="twelve wide column"
-              >
-                <div
-                  className="simple-field-name"
-                >
-                  Criteria
-                </div>
-              </div>
-            </div>
-            <div
-              className="stretched row"
-            >
-              <div
-                className="twelve wide column"
-              >
-                <div
-                  className="fields"
-                >
-                  <div
-                    className="field"
-                    style={
-                      Object {
-                        "flex": "1 0 auto",
-                      }
-                    }
-                  >
-                    <div
-                      className="react-select-container css-2b097c-container"
-                      id="field-source"
-                      onKeyDown={[Function]}
-                    >
-                      <div
-                        className="react-select__control css-1ard45z-control"
-                        onMouseDown={[Function]}
-                        onTouchEnd={[Function]}
-                      >
-                        <div
-                          className="react-select__value-container css-1dvrfad"
-                        >
-                          <div
-                            className="react-select__placeholder css-1wa3eu0-placeholder"
-                          >
-                            Add criteria
-                          </div>
-                          <div
-                            className="css-b8ldur-Input"
-                          >
-                            <div
-                              className="react-select__input"
-                              style={
-                                Object {
-                                  "display": "inline-block",
-                                }
-                              }
-                            >
-                              <input
-                                aria-autocomplete="list"
-                                autoCapitalize="none"
-                                autoComplete="off"
-                                autoCorrect="off"
-                                disabled={false}
-                                id="react-select-2-input"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                spellCheck="false"
-                                style={
-                                  Object {
-                                    "background": 0,
-                                    "border": 0,
-                                    "boxSizing": "content-box",
-                                    "color": "inherit",
-                                    "fontSize": "inherit",
-                                    "label": "input",
-                                    "opacity": 1,
-                                    "outline": 0,
-                                    "padding": 0,
-                                    "width": "1px",
-                                  }
-                                }
-                                tabIndex="0"
-                                type="text"
-                                value=""
-                              />
-                              <div
-                                style={
-                                  Object {
-                                    "height": 0,
-                                    "left": 0,
-                                    "overflow": "scroll",
-                                    "position": "absolute",
-                                    "top": 0,
-                                    "visibility": "hidden",
-                                    "whiteSpace": "pre",
-                                  }
-                                }
-                              >
-                                
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          className="react-select__indicators css-1hb7zxy-IndicatorsContainer"
-                        >
-                          <span
-                            className="react-select__indicator-separator css-6fp5c8-indicatorSeparator"
-                          />
-                          <div
-                            aria-hidden="true"
-                            className="react-select__indicator react-select__dropdown-indicator css-7hdh9a-DropdownIndicator"
-                            onMouseDown={[Function]}
-                            onTouchEnd={[Function]}
-                          >
-                            <svg
-                              className="icon"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": undefined,
-                                }
-                              }
-                              onClick={null}
-                              style={
-                                Object {
-                                  "fill": "#007bc1",
-                                  "height": "24px",
-                                  "width": "auto",
-                                }
-                              }
-                              viewBox=""
-                              xmlns=""
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <input
-                        name="source"
-                        type="hidden"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="inline field"
-          id="field-listingblock-sort-on"
-        >
-          <div
-            className="ui grid"
-          >
-            <div
-              className="stretched row"
-            >
-              <div
-                className="four wide column"
-              >
-                <div
-                  className="wrapper"
-                >
-                  <label
-                    htmlFor="select-listingblock-sort-on"
-                  >
-                    Sort on
-                  </label>
-                </div>
-              </div>
-              <div
-                className="eight wide column"
-              >
-                <div
-                  className="react-select-container css-2b097c-container"
-                  id="select-listingblock-sort-on"
-                  onKeyDown={[Function]}
-                >
-                  <div
-                    className="react-select__control css-1ard45z-control"
-                    onMouseDown={[Function]}
-                    onTouchEnd={[Function]}
-                  >
-                    <div
-                      className="react-select__value-container react-select__value-container--has-value css-1dvrfad"
-                    >
-                      <div
-                        className="react-select__single-value css-1uccc91-singleValue"
-                      >
-                        No selection
-                      </div>
-                      <div
-                        className="css-b8ldur-Input"
-                      >
-                        <div
-                          className="react-select__input"
-                          style={
-                            Object {
-                              "display": "inline-block",
-                            }
-                          }
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            autoCapitalize="none"
-                            autoComplete="off"
-                            autoCorrect="off"
-                            disabled={false}
-                            id="react-select-3-input"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            spellCheck="false"
-                            style={
-                              Object {
-                                "background": 0,
-                                "border": 0,
-                                "boxSizing": "content-box",
-                                "color": "inherit",
-                                "fontSize": "inherit",
-                                "label": "input",
-                                "opacity": 1,
-                                "outline": 0,
-                                "padding": 0,
-                                "width": "1px",
-                              }
-                            }
-                            tabIndex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            style={
-                              Object {
-                                "height": 0,
-                                "left": 0,
-                                "overflow": "scroll",
-                                "position": "absolute",
-                                "top": 0,
-                                "visibility": "hidden",
-                                "whiteSpace": "pre",
-                              }
-                            }
-                          >
-                            
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="react-select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        className="react-select__indicator-separator css-6fp5c8-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        className="react-select__indicator react-select__dropdown-indicator css-7hdh9a-DropdownIndicator"
-                        onMouseDown={[Function]}
-                        onTouchEnd={[Function]}
-                      >
-                        <svg
-                          className="icon"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": undefined,
-                            }
-                          }
-                          onClick={null}
-                          style={
-                            Object {
-                              "fill": "#007bc1",
-                              "height": "24px",
-                              "width": "auto",
-                            }
-                          }
-                          viewBox=""
-                          xmlns=""
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <input
-                    name="select-listingblock-sort-on"
-                    type="hidden"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="inline field"
-          id="field-listingblock-sort-on-reverse"
-        >
-          <div
-            className="ui grid"
-          >
-            <div
-              className="stretched row"
-            >
-              <div
-                className="twelve wide column"
-              >
-                <div
-                  className="wrapper"
-                >
-                  <div
-                    className="ui fitted checkbox"
-                    onChange={[Function]}
-                    onClick={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                  >
-                    <input
-                      checked={false}
-                      className="hidden"
-                      disabled={false}
-                      name="field-listingblock-sort-on-reverse"
-                      readOnly={true}
-                      tabIndex={0}
-                      type="checkbox"
-                    />
-                    <label />
-                  </div>
-                  <label
-                    className="ui basic horizontal label"
-                    htmlFor="field-listingblock-sort-on-reverse"
-                    onClick={[Function]}
-                  >
-                    Reversed order
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="inline field text"
-          id="field-limit"
-        >
-          <div
-            className="ui grid"
-          >
-            <div
-              className="stretched row"
-            >
-              <div
-                className="four wide column"
-              >
-                <div
-                  className="wrapper"
-                >
-                  <label
-                    htmlFor="field-limit"
-                  >
-                    Results limit
-                  </label>
-                </div>
-              </div>
-              <div
-                className="eight wide column"
-              >
-                <div
-                  className="ui input"
-                >
-                  <input
-                    disabled={false}
-                    id="field-limit"
-                    name="limit"
-                    onChange={[Function]}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="inline field text"
-          id="field-itembatchsize"
-        >
-          <div
-            className="ui grid"
-          >
-            <div
-              className="stretched row"
-            >
-              <div
-                className="four wide column"
-              >
-                <div
-                  className="wrapper"
-                >
-                  <label
-                    htmlFor="field-itembatchsize"
-                  >
-                    Item batch size
-                  </label>
-                </div>
-              </div>
-              <div
-                className="eight wide column"
-              >
-                <div
-                  className="ui input"
-                >
-                  <input
-                    disabled={false}
-                    id="field-itembatchsize"
-                    name="itembatchsize"
-                    onChange={[Function]}
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="title"
-      onClick={[Function]}
-    >
-      Link more
-      <svg
-        className="icon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": undefined,
-          }
-        }
-        onClick={null}
-        style={
-          Object {
-            "fill": "currentColor",
-            "height": "20px",
-            "width": "auto",
-          }
-        }
-        viewBox=""
-        xmlns=""
-      />
-    </div>
-    <div
-      className="content"
-    >
-      <div
-        className="inline field text"
-        id="field-linkTitle"
-      >
-        <div
-          className="ui grid"
-        >
-          <div
-            className="stretched row"
-          >
-            <div
-              className="four wide column"
-            >
-              <div
-                className="wrapper"
-              >
-                <label
-                  htmlFor="field-linkTitle"
-                >
-                  Link Title
-                </label>
-              </div>
-            </div>
-            <div
-              className="eight wide column"
-            >
-              <div
-                className="ui input"
-              >
-                <input
-                  disabled={false}
-                  id="field-linkTitle"
-                  name="linkTitle"
-                  onChange={[Function]}
-                  type="text"
-                  value=""
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="inline field text"
-        id="field-linkHref"
-      >
-        <div
-          className="ui grid"
-        >
-          <div
-            className="stretched row"
-          >
-            <div
-              className="four wide column"
-            >
-              <div
-                className="wrapper"
-              >
-                <label
-                  htmlFor="field-linkHref"
-                >
-                  Link to
-                </label>
-              </div>
-            </div>
-            <div
-              className="eight wide column"
-            >
-              <div
-                className="ui icon input"
-              >
-                <input
-                  disabled={false}
-                  id="field-linkHref"
-                  name="linkHref"
-                  onChange={[Function]}
-                  type="text"
-                  value=""
-                />
-                <i
-                  aria-hidden="true"
-                  attributes={
-                    Object {
-                      "viewBox": "",
-                      "xmlns": "",
-                    }
-                  }
-                  className="icon"
-                  onClick={[Function]}
-                />
-              </div>
-              <button
-                onClick={[Function]}
-              >
-                <svg
-                  className="icon"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": undefined,
-                    }
-                  }
-                  onClick={null}
-                  style={
-                    Object {
-                      "fill": "currentColor",
-                      "height": "18px",
-                      "width": "auto",
-                    }
-                  }
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders a Listing Block Sidebar component 1`] = `
 <div
   class="ui raised segments"
diff --git a/src/components/manage/Contents/ContentsPropertiesModal.test.jsx b/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
index 060ff31276..1aa15c1a8e 100644
--- a/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
+++ b/src/components/manage/Contents/ContentsPropertiesModal.test.jsx
@@ -34,7 +34,7 @@ describe('ContentsPropertiesModal', () => {
         />
       </Provider>,
     );
-    expect(container).toBeEmpty();
+
     await wait(() => {
       expect(container.firstChild).toMatchSnapshot();
     });
diff --git a/src/components/manage/Contents/ContentsTagsModal.test.jsx b/src/components/manage/Contents/ContentsTagsModal.test.jsx
index af7628854c..5a0fbe7a23 100644
--- a/src/components/manage/Contents/ContentsTagsModal.test.jsx
+++ b/src/components/manage/Contents/ContentsTagsModal.test.jsx
@@ -39,7 +39,7 @@ describe('ContentsTagsModal', () => {
         />
       </Provider>,
     );
-    expect(container).toBeEmpty();
+
     await wait(() => {
       expect(container.firstChild).toMatchSnapshot();
     });
diff --git a/src/components/manage/Display/Display.jsx b/src/components/manage/Display/Display.jsx
index 0d710321d5..d36596745f 100644
--- a/src/components/manage/Display/Display.jsx
+++ b/src/components/manage/Display/Display.jsx
@@ -14,30 +14,39 @@ import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
 
-const Select = loadable(() => import('react-select'));
-const components = loadable(() => import('react-select'), 'components');
+const ReactSelect = loadable.lib(() => import('react-select'));
 
 const Option = props => {
   return (
-    <components.Option {...props}>
-      <div>{props.label}</div>
-      {props.isFocused && !props.isSelected && (
-        <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.Option {...props}>
+          <div>{props.label}</div>
+          {props.isFocused && !props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+          )}
+          {props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#007bc1" />
+          )}
+        </components.Option>
       )}
-      {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
-    </components.Option>
+    </ReactSelect>
   );
 };
 
 const DropdownIndicator = props => {
   return (
-    <components.DropdownIndicator {...props}>
-      {props.selectProps.menuIsOpen ? (
-        <Icon name={upSVG} size="24px" color="#007bc1" />
-      ) : (
-        <Icon name={downSVG} size="24px" color="#007bc1" />
+    <ReactSelect>
+      {({ components }) => (
+        <components.DropdownIndicator {...props}>
+          {props.selectProps.menuIsOpen ? (
+            <Icon name={upSVG} size="24px" color="#007bc1" />
+          ) : (
+            <Icon name={downSVG} size="24px" color="#007bc1" />
+          )}
+        </components.DropdownIndicator>
       )}
-    </components.DropdownIndicator>
+    </ReactSelect>
   );
 };
 
@@ -194,27 +203,31 @@ class DisplaySelect extends Component {
         <label htmlFor="display-select">
           <FormattedMessage id="Viewmode" defaultMessage="View" />
         </label>
-        <Select
-          name="display-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          options={this.props.layouts
-            .filter(
-              layout =>
-                Object.keys(views.contentTypesViews).includes(layout) ||
-                Object.keys(views.layoutViews).includes(layout),
-            )
-            .map(item => ({
-              value: item,
-              label: layouts[item] || item,
-            }))}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option }}
-          onChange={this.setLayout}
-          defaultValue={selectedOption}
-          isSearchable={false}
-        />
+        <ReactSelect>
+          {({ default: Select }) => (
+            <Select
+              name="display-select"
+              className="react-select-container"
+              classNamePrefix="react-select"
+              options={this.props.layouts
+                .filter(
+                  layout =>
+                    Object.keys(views.contentTypesViews).includes(layout) ||
+                    Object.keys(views.layoutViews).includes(layout),
+                )
+                .map(item => ({
+                  value: item,
+                  label: layouts[item] || item,
+                }))}
+              styles={customSelectStyles}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              onChange={this.setLayout}
+              defaultValue={selectedOption}
+              isSearchable={false}
+            />
+          )}
+        </ReactSelect>
       </Fragment>
     );
   }
diff --git a/src/components/test-index.js b/src/components/test-index.js
index 0e11be790e..f952b05953 100644
--- a/src/components/test-index.js
+++ b/src/components/test-index.js
@@ -20,7 +20,9 @@ export DefaultView from './theme/View/DefaultView';
 export FileView from './theme/View/FileView';
 export ImageView from './theme/View/ImageView';
 export NewsItemView from './theme/View/NewsItemView';
+export EventView from './theme/View/EventView';
 export ListingView from './theme/View/ListingView';
+export AlbumView from './theme/View/AlbumView';
 export SummaryView from './theme/View/SummaryView';
 export TabularView from './theme/View/TabularView';
 export Comments from './theme/Comments/Comments';
@@ -29,6 +31,9 @@ export SocialSharing from './theme/SocialSharing/SocialSharing';
 export Pagination from './theme/Pagination/Pagination';
 export SearchTags from './theme/Search/SearchTags';
 export CommentEditModal from './theme/Comments/CommentEditModal';
+export OutdatedBrowser from './theme/OutdatedBrowser/OutdatedBrowser';
+export Forbidden from './theme/Forbidden/Forbidden';
+export Unauthorized from './theme/Unauthorized/Unauthorized';
 
 // CMSUI
 export Toolbar from './manage/Toolbar/Toolbar';
diff --git a/src/components/theme/App/App.test.jsx b/src/components/theme/App/App.test.jsx
index c2d394c25b..a371a6a3cd 100644
--- a/src/components/theme/App/App.test.jsx
+++ b/src/components/theme/App/App.test.jsx
@@ -26,6 +26,9 @@ jest.mock('semantic-ui-react', () => ({
   Container: jest.fn(() => <div id="container" />),
 }));
 jest.mock('../Footer/Footer', () => jest.fn(() => <div id="footer" />));
+jest.mock('../OutdatedBrowser/OutdatedBrowser', () =>
+  jest.fn(() => <div id="outdatedbrowser" />),
+);
 
 describe('App', () => {
   it('renders a app component', () => {

From b5f5af3faee7aad8474036fa6d1d67f7957e1b58 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Mar 2020 18:30:31 +0100
Subject: [PATCH 13/18] Add missing imports

---
 src/components/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/index.js b/src/components/index.js
index 3cb448ea51..d3891ee34c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -56,6 +56,9 @@ export const ImageView = loadable(() =>
 export const NewsItemView = loadable(() =>
   import('@plone/volto/components/theme/View/NewsItemView'),
 );
+export const EventView = loadable(() =>
+  import('@plone/volto/components/theme/View/EventView'),
+);
 export const ListingView = loadable(() =>
   import('@plone/volto/components/theme/View/ListingView'),
 );

From c7c2cacaa3b8027a3ddbb702ff697b4360a420f2 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Mar 2020 18:31:36 +0100
Subject: [PATCH 14/18] Remove bogus 'components'

---
 src/components/manage/Widgets/ArrayWidget.jsx  | 10 ++--------
 src/components/manage/Widgets/SelectWidget.jsx |  5 +----
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/manage/Widgets/ArrayWidget.jsx b/src/components/manage/Widgets/ArrayWidget.jsx
index 4fc1b45a87..7b226c08ed 100644
--- a/src/components/manage/Widgets/ArrayWidget.jsx
+++ b/src/components/manage/Widgets/ArrayWidget.jsx
@@ -26,14 +26,8 @@ import {
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-const AsyncPaginate = loadable(
-  () => import('react-select-async-paginate'),
-  'components',
-);
-const CreatableSelect = loadable(
-  () => import('react-select/creatable'),
-  'components',
-);
+const AsyncPaginate = loadable(() => import('react-select-async-paginate'));
+const CreatableSelect = loadable(() => import('react-select/creatable'));
 
 const messages = defineMessages({
   select: {
diff --git a/src/components/manage/Widgets/SelectWidget.jsx b/src/components/manage/Widgets/SelectWidget.jsx
index 849a60a748..92fa6793a1 100644
--- a/src/components/manage/Widgets/SelectWidget.jsx
+++ b/src/components/manage/Widgets/SelectWidget.jsx
@@ -29,10 +29,7 @@ import {
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
 const Select = loadable(() => import('react-select'));
-const AsyncPaginate = loadable(
-  () => import('react-select-async-paginate'),
-  'components',
-);
+const AsyncPaginate = loadable(() => import('react-select-async-paginate'));
 
 const messages = defineMessages({
   default: {

From f952b57cdf22efe848b447fe9d20e5e3368148c3 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Mar 2020 19:06:18 +0100
Subject: [PATCH 15/18] Fix prettier

---
 src/actions/search/search.js                       |  5 ++++-
 src/components/theme/SearchWidget/SearchWidget.jsx |  5 +----
 src/helpers/BodyClass/BodyClass.jsx                |  7 ++++---
 src/helpers/Helmet/Helmet.js                       | 10 ++--------
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/actions/search/search.js b/src/actions/search/search.js
index 98cf680712..b93ec26136 100644
--- a/src/actions/search/search.js
+++ b/src/actions/search/search.js
@@ -43,7 +43,10 @@ export function searchContent(url, options, subrequest = null) {
     arrayOptions
       ? join(
           map(pickBy(arrayOptions), (item, key) =>
-            join(item.map(value => `${key}:list=${value}`), '&'),
+            join(
+              item.map(value => `${key}:list=${value}`),
+              '&',
+            ),
           ),
           '&',
         )
diff --git a/src/components/theme/SearchWidget/SearchWidget.jsx b/src/components/theme/SearchWidget/SearchWidget.jsx
index 0acd86986d..43fb573adb 100644
--- a/src/components/theme/SearchWidget/SearchWidget.jsx
+++ b/src/components/theme/SearchWidget/SearchWidget.jsx
@@ -123,7 +123,4 @@ class SearchWidget extends Component {
   }
 }
 
-export default compose(
-  withRouter,
-  injectIntl,
-)(SearchWidget);
+export default compose(withRouter, injectIntl)(SearchWidget);
diff --git a/src/helpers/BodyClass/BodyClass.jsx b/src/helpers/BodyClass/BodyClass.jsx
index 273f7c1013..e04c051df2 100644
--- a/src/helpers/BodyClass/BodyClass.jsx
+++ b/src/helpers/BodyClass/BodyClass.jsx
@@ -71,6 +71,7 @@ function handleStateChangeOnClient(classList) {
   });
 }
 
-export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(
-  BodyClass,
-);
+export default withSideEffect(
+  reducePropsToState,
+  handleStateChangeOnClient,
+)(BodyClass);
diff --git a/src/helpers/Helmet/Helmet.js b/src/helpers/Helmet/Helmet.js
index bd1f379ec0..ff06c2f3e5 100644
--- a/src/helpers/Helmet/Helmet.js
+++ b/src/helpers/Helmet/Helmet.js
@@ -113,9 +113,7 @@ const Helmet = Component =>
       }
 
       throw new Error(
-        `<${
-          child.type
-        } /> elements are self-closing and can not contain children. Refer to our API for more information.`,
+        `<${child.type} /> elements are self-closing and can not contain children. Refer to our API for more information.`,
       );
     }
 
@@ -204,11 +202,7 @@ const Helmet = Component =>
             nestedChildren.some(nestedChild => typeof nestedChild !== 'string'))
         ) {
           throw new Error(
-            `Helmet expects a string as a child of <${
-              child.type
-            }>. Did you forget to wrap your children in braces? ( <${
-              child.type
-            }>{\`\`}</${child.type}> ) Refer to our API for more information.`,
+            `Helmet expects a string as a child of <${child.type}>. Did you forget to wrap your children in braces? ( <${child.type}>{\`\`}</${child.type}> ) Refer to our API for more information.`,
           );
         }
       }

From e1de0e724fd249ddced41bc62ee7d866faf0fc55 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Wed, 18 Mar 2020 12:08:32 +0100
Subject: [PATCH 16/18] Fix yarn.lock conflicts

---
 yarn.lock | 220 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 193 insertions(+), 27 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2a1e6dd3ce..10a982b3d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2125,6 +2125,11 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
+ansi-escapes@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+  integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
+
 ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -2425,6 +2430,13 @@ async@0.2.x, async@~0.2.9:
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
   integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
 
+async@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
+  dependencies:
+    lodash "^4.17.10"
+
 async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -2952,6 +2964,11 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
+bluebird@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
+  integrity sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=
+
 bluebird@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
@@ -3330,6 +3347,13 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
+cachedir@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-1.3.0.tgz#5e01928bf2d95b5edd94b0942188246740e0dbc4"
+  integrity sha512-O1ji32oyON9laVPJL1IZ5bmwd2cB46VfpxkDequezH+15FDzzVddEyrGEeX4WusDSqKxdyFdDQDEG1yo1GoWkg==
+  dependencies:
+    os-homedir "^1.0.1"
+
 cachedir@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
@@ -3457,7 +3481,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.0, chalk@^2.4.
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.0.0, chalk@^1.1.3:
+chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -3626,6 +3650,11 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-spinners@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
+  integrity sha1-u3ZNiOGF+54eaiofGXcjGPYF4xw=
+
 cli-spinners@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
@@ -3798,6 +3827,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
+
 commander@4.1.0, commander@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
@@ -4585,6 +4619,13 @@ debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
+debug@3.2.6, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
 debug@4.1.1, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -4599,13 +4640,6 @@ debug@=3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
 decamelize-keys@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -5623,6 +5657,19 @@ exec-sh@^0.2.0:
   dependencies:
     merge "^1.2.0"
 
+execa@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
+  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@1.0.0, execa@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
@@ -6310,6 +6357,15 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-extra@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
+  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.0.tgz#8cc3f47ce07ef7b3593a11b9fb245f7e34c041d6"
@@ -6441,6 +6497,13 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
+getos@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.1.tgz#967a813cceafee0156b0483f7cffa5b3eff029c5"
+  integrity sha512-oUP1rnEhAr97rkitiszGP9EgDVYnmchgFzfqRzSkgtfv7ai6tEi7Ko8GgjNXts7VLWEqrTWyhsOKLe5C5b/Zkg==
+  dependencies:
+    async "2.6.1"
+
 getos@3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
@@ -7315,6 +7378,13 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indent-string@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
+  dependencies:
+    repeating "^2.0.0"
+
 indent-string@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
@@ -7622,6 +7692,13 @@ is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
+is-ci@1.2.1, is-ci@^1.0.10:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
+  dependencies:
+    ci-info "^1.5.0"
+
 is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -7629,13 +7706,6 @@ is-ci@2.0.0, is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-ci@^1.0.10:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
-  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
-  dependencies:
-    ci-info "^1.5.0"
-
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -8928,6 +8998,20 @@ listr-silent-renderer@^1.1.1:
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
   integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
 
+listr-update-renderer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.2.0.tgz#ca80e1779b4e70266807e8eed1ad6abe398550f9"
+  integrity sha1-yoDhd5tOcCZoB+ju0a1qvjmFUPk=
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    strip-ansi "^3.0.1"
+
 listr-update-renderer@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
@@ -8942,6 +9026,16 @@ listr-update-renderer@^0.5.0:
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
+listr-verbose-renderer@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
+  integrity sha1-ggb0z21S3cWCfl/RSYng6WWTOjU=
+  dependencies:
+    chalk "^1.1.3"
+    cli-cursor "^1.0.2"
+    date-fns "^1.27.2"
+    figures "^1.7.0"
+
 listr-verbose-renderer@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
@@ -8952,6 +9046,28 @@ listr-verbose-renderer@^0.5.0:
     date-fns "^1.27.2"
     figures "^2.0.0"
 
+listr@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.12.0.tgz#6bce2c0f5603fa49580ea17cd6a00cc0e5fa451a"
+  integrity sha1-a84sD1YD+klYDqF81qAMwOX6RRo=
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    figures "^1.7.0"
+    indent-string "^2.1.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.1.1"
+    listr-update-renderer "^0.2.0"
+    listr-verbose-renderer "^0.4.0"
+    log-symbols "^1.0.2"
+    log-update "^1.0.2"
+    ora "^0.2.3"
+    p-map "^1.1.1"
+    rxjs "^5.0.0-beta.11"
+    stream-to-observable "^0.1.0"
+    strip-ansi "^3.0.1"
+
 listr@0.14.3, listr@^0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
@@ -9163,6 +9279,13 @@ log-driver@^1.2.7:
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
   integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
 
+log-symbols@2.2.0, log-symbols@^2.0.0, log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+  dependencies:
+    chalk "^2.0.1"
+
 log-symbols@3.0.0, log-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -9177,12 +9300,13 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^2.0.0, log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+log-update@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
+  integrity sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=
   dependencies:
-    chalk "^2.0.1"
+    ansi-escapes "^1.0.0"
+    cli-cursor "^1.0.2"
 
 log-update@^2.3.0:
   version "2.3.0"
@@ -10299,6 +10423,16 @@ ora@4.0.2:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
+ora@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
+  integrity sha1-N1J9Igrc1Tw5tzVx11QVbV22V6Q=
+  dependencies:
+    chalk "^1.1.1"
+    cli-cursor "^1.0.2"
+    cli-spinners "^0.1.2"
+    object-assign "^4.0.1"
+
 original@>=0.0.5, original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -10425,6 +10559,11 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
+
 p-map@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
@@ -11910,6 +12049,11 @@ quick-lru@^1.0.0:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
   integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
+ramda@0.24.1:
+  version "0.24.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
+  integrity sha1-w7d1UZfzW43DUCIoJixMkd22uFc=
+
 ramda@0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -13046,6 +13190,13 @@ rx@^4.1.0:
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
   integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
 
+rxjs@^5.0.0-beta.11:
+  version "5.5.12"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
+  integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
+  dependencies:
+    symbol-observable "1.0.1"
+
 rxjs@^6.1.0, rxjs@^6.3.3, rxjs@^6.4.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
@@ -13761,6 +13912,11 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
+stream-to-observable@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
+  integrity sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -14136,6 +14292,13 @@ superagent@3.8.2:
     qs "^6.5.1"
     readable-stream "^2.0.5"
 
+supports-color@5.5.0, supports-color@^5.3.0, supports-color@^5.4.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@7.1.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -14162,13 +14325,6 @@ supports-color@^4.0.0:
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.3.0, supports-color@^5.4.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
@@ -14267,6 +14423,11 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+  integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
+
 symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -14879,6 +15040,11 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+untildify@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
+  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
+
 untildify@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"

From 2051dc3273e68748e95258dbb74a59a3da758f62 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 21 Mar 2020 16:23:59 +0100
Subject: [PATCH 17/18] Fix tests once loadable component are in place in
 production mode as it kind of loose sync after `cy.request` request on
 Cypress tests

---
 cypress/integration/a11y.js           |   1 +
 cypress/integration/autologin.js      |   3 +-
 cypress/integration/block-indexing.js |   1 +
 cypress/integration/block-text.js     |   1 +
 cypress/integration/blocks-video.js   |  74 +++++
 cypress/integration/blocks.js         |  68 +----
 cypress/integration/content.js        |   1 +
 cypress/integration/createContent.js  |   1 +
 cypress/integration/metadata.js       |  16 +-
 package.json                          |  11 +-
 yarn.lock                             | 402 +++++++-------------------
 11 files changed, 210 insertions(+), 369 deletions(-)
 create mode 100644 cypress/integration/blocks-video.js

diff --git a/cypress/integration/a11y.js b/cypress/integration/a11y.js
index 7281e63853..961e6ce4c8 100644
--- a/cypress/integration/a11y.js
+++ b/cypress/integration/a11y.js
@@ -2,6 +2,7 @@ if (Cypress.env('API') !== 'guillotina') {
   describe('Accessibility Tests', () => {
     beforeEach(() => {
       cy.visit('/');
+      cy.wait(1000);
       cy.injectAxe(); // make sure axe is available on the page
     });
 
diff --git a/cypress/integration/autologin.js b/cypress/integration/autologin.js
index 52f0cd773b..a4e0620c17 100644
--- a/cypress/integration/autologin.js
+++ b/cypress/integration/autologin.js
@@ -1,5 +1,5 @@
 describe('Autologin Tests', () => {
-  it('As a site administrator I can add a page', function() {
+  it('Autologin', function() {
     let api_url, user, password;
     if (Cypress.env('API') === 'guillotina') {
       api_url = 'http://localhost:8081/db/container';
@@ -10,6 +10,7 @@ describe('Autologin Tests', () => {
       user = 'admin';
       password = 'secret';
     }
+    cy.visit('/');
 
     cy.request({
       method: 'POST',
diff --git a/cypress/integration/block-indexing.js b/cypress/integration/block-indexing.js
index 78f0be2e93..8953c438d2 100644
--- a/cypress/integration/block-indexing.js
+++ b/cypress/integration/block-indexing.js
@@ -1,6 +1,7 @@
 if (Cypress.env('API') !== 'guillotina') {
   describe('Block Indexing Tests', () => {
     beforeEach(() => {
+      cy.visit('/');
       cy.autologin();
       cy.createContent('Document', 'my-page', 'My Page');
       cy.visit('/my-page/edit');
diff --git a/cypress/integration/block-text.js b/cypress/integration/block-text.js
index 35ec36397a..98a37f662f 100644
--- a/cypress/integration/block-text.js
+++ b/cypress/integration/block-text.js
@@ -1,6 +1,7 @@
 if (Cypress.env('API') !== 'guillotina') {
   describe('Text Block Tests', () => {
     beforeEach(() => {
+      cy.visit('/');
       cy.autologin();
       cy.createContent('Document', 'my-page', 'My Page');
       cy.visit('/my-page/edit');
diff --git a/cypress/integration/blocks-video.js b/cypress/integration/blocks-video.js
new file mode 100644
index 0000000000..f301021b71
--- /dev/null
+++ b/cypress/integration/blocks-video.js
@@ -0,0 +1,74 @@
+if (Cypress.env('API') !== 'guillotina') {
+  describe('Blocks Tests', () => {
+    beforeEach(() => {
+      // Wait a bit to previous teardown to complete correctly because Heisenbug in this point
+      cy.wait(2000);
+      cy.visit('/');
+      cy.autologin();
+      cy.createContent('Document', 'my-page', 'My Page');
+      cy.visit('/my-page/edit');
+      cy.waitForResourceToLoad('@navigation');
+      cy.waitForResourceToLoad('@breadcrumbs');
+      cy.waitForResourceToLoad('@actions');
+      cy.waitForResourceToLoad('@types');
+      cy.waitForResourceToLoad('?fullobjects');
+    });
+    it('Add Video Block with YouTube Video', () => {
+      cy.get(`.block.title [data-contents]`)
+        .clear()
+        .type('My title');
+      cy.get('.block.inner.text .public-DraftEditor-content').click();
+      cy.get('.ui.basic.icon.button.block-add-button').click();
+      cy.get('.ui.basic.icon.button.video')
+        .contains('Video')
+        .click();
+      cy.get('.toolbar-inner > .ui > input')
+        .click()
+        .type('https://youtu.be/T6J3d35oIAY')
+        .type('{enter}');
+      cy.get('#toolbar-save').click();
+      cy.get('.block.video');
+    });
+
+    it('Add Video Block with Vimeo Video', () => {
+      cy.get(`.block.title [data-contents]`)
+        .clear()
+        .type('My title');
+      cy.get('.block.inner.text .public-DraftEditor-content').click();
+      cy.get('.ui.basic.icon.button.block-add-button').click();
+      cy.get('.ui.basic.icon.button.video')
+        .contains('Video')
+        .click();
+      cy.get('.toolbar-inner > .ui > input')
+        .click()
+        .type('https://vimeo.com/85804536')
+        .type('{enter}');
+      cy.get('#toolbar-save').click();
+      cy.get('.block.video');
+    });
+
+    it('Add Video Block with MP4 Video', () => {
+      cy.get(`.block.title [data-contents]`)
+        .clear()
+        .type('My title');
+      cy.get('.block.inner.text .public-DraftEditor-content').click();
+      cy.get('.ui.basic.icon.button.block-add-button').click();
+      cy.get('.ui.basic.icon.button.video')
+        .contains('Video')
+        .click();
+      cy.get('.toolbar-inner > .ui > input')
+        .click()
+        .type('https://1.videolyser.de/videos/1714848/11745228_hd.mp4')
+        .type('{enter}');
+      cy.get('#toolbar-save').click();
+
+      cy.get('.block.video video').should(
+        'have.attr',
+        'src',
+        'https://1.videolyser.de/videos/1714848/11745228_hd.mp4',
+      );
+
+      cy.visit('/my-page/edit');
+    });
+  });
+}
diff --git a/cypress/integration/blocks.js b/cypress/integration/blocks.js
index 39ae0b90fe..0067be6969 100644
--- a/cypress/integration/blocks.js
+++ b/cypress/integration/blocks.js
@@ -3,6 +3,7 @@ if (Cypress.env('API') !== 'guillotina') {
     beforeEach(() => {
       // Wait a bit to previous teardown to complete correctly because Heisenbug in this point
       cy.wait(2000);
+      cy.visit('/');
       cy.autologin();
       cy.createContent('Document', 'my-page', 'My Page');
       cy.visit('/my-page/edit');
@@ -28,73 +29,6 @@ if (Cypress.env('API') !== 'guillotina') {
       cy.get('#page-document p').contains('My text');
     });
 
-    it('Add Video Block with YouTube Video', () => {
-      cy.get(`.block.title [data-contents]`)
-        .clear()
-        .type('My title');
-      cy.get('.block.inner.text .public-DraftEditor-content').click();
-      cy.get('.ui.basic.icon.button.block-add-button').click();
-      cy.get('.title')
-        .contains('Media')
-        .click();
-      cy.get('.ui.basic.icon.button.video')
-        .contains('Video')
-        .click();
-      cy.get('.toolbar-inner > .ui > input')
-        .click()
-        .type('https://youtu.be/T6J3d35oIAY')
-        .type('{enter}');
-      cy.get('#toolbar-save').click();
-      cy.get('.block.video');
-    });
-
-    it('Add Video Block with Vimeo Video', () => {
-      cy.get(`.block.title [data-contents]`)
-        .clear()
-        .type('My title');
-      cy.get('.block.inner.text .public-DraftEditor-content').click();
-      cy.get('.ui.basic.icon.button.block-add-button').click();
-      cy.get('.title')
-        .contains('Media')
-        .click();
-      cy.get('.ui.basic.icon.button.video')
-        .contains('Video')
-        .click();
-      cy.get('.toolbar-inner > .ui > input')
-        .click()
-        .type('https://vimeo.com/85804536')
-        .type('{enter}');
-      cy.get('#toolbar-save').click();
-      cy.get('.block.video');
-    });
-
-    it('Add Video Block with MP4 Video', () => {
-      cy.get(`.block.title [data-contents]`)
-        .clear()
-        .type('My title');
-      cy.get('.block.inner.text .public-DraftEditor-content').click();
-      cy.get('.ui.basic.icon.button.block-add-button').click();
-      cy.get('.title')
-        .contains('Media')
-        .click();
-      cy.get('.ui.basic.icon.button.video')
-        .contains('Video')
-        .click();
-      cy.get('.toolbar-inner > .ui > input')
-        .click()
-        .type('https://1.videolyser.de/videos/1714848/11745228_hd.mp4')
-        .type('{enter}');
-      cy.get('#toolbar-save').click();
-
-      cy.get('.block.video video').should(
-        'have.attr',
-        'src',
-        'https://1.videolyser.de/videos/1714848/11745228_hd.mp4',
-      );
-
-      cy.visit('/my-page/edit');
-    });
-
     it('Add maps block', () => {
       // Add maps block
       cy.get('.block.text [contenteditable]').click();
diff --git a/cypress/integration/content.js b/cypress/integration/content.js
index 0294fa7c2e..f25f44e0a5 100644
--- a/cypress/integration/content.js
+++ b/cypress/integration/content.js
@@ -1,5 +1,6 @@
 describe('Add Content Tests', () => {
   beforeEach(() => {
+    cy.visit('/');
     cy.autologin();
   });
   it('As a site administrator I can add a page', function() {
diff --git a/cypress/integration/createContent.js b/cypress/integration/createContent.js
index 1e1ce5f443..bf38564bb5 100644
--- a/cypress/integration/createContent.js
+++ b/cypress/integration/createContent.js
@@ -1,6 +1,7 @@
 if (Cypress.env('API') !== 'guillotina') {
   describe('createContent Tests', () => {
     beforeEach(() => {
+      cy.visit('/');
       cy.autologin();
     });
 
diff --git a/cypress/integration/metadata.js b/cypress/integration/metadata.js
index a6d6c8c5c0..80113e2765 100644
--- a/cypress/integration/metadata.js
+++ b/cypress/integration/metadata.js
@@ -1,6 +1,7 @@
 if (Cypress.env('API') === 'plone') {
   describe('Add Content Tests', () => {
     beforeEach(() => {
+      cy.visit('/');
       cy.autologin();
       cy.visit('/');
       cy.waitForResourceToLoad('@navigation');
@@ -16,20 +17,25 @@ if (Cypress.env('API') === 'plone') {
         .type('My Page')
         .get('.documentFirstHeading span[data-text]')
         .contains('My Page');
-      cy.get('input[name="effective"]').type("2050-12-24T12:00");
+      cy.get('input[name="effective"]').type('2050-12-24T12:00');
       cy.get('#toolbar-save').click();
-      cy.get('body.view-viewview #page-document .documentFirstHeading').should('have.text', 'My Page');
+      cy.get('body.view-viewview #page-document .documentFirstHeading').should(
+        'have.text',
+        'My Page',
+      );
       cy.url().should('contain', '/my-page');
 
-      cy.get('.edit').click()
+      cy.get('.edit').click();
       cy.waitForResourceToLoad('@navigation');
       cy.waitForResourceToLoad('@breadcrumbs');
       cy.waitForResourceToLoad('@actions');
       cy.waitForResourceToLoad('@types');
       cy.waitForResourceToLoad('?fullobjects');
 
-      cy.get('input[name="effective"]').should('have.value', "2050-12-24T12:00:00");
+      cy.get('input[name="effective"]').should(
+        'have.value',
+        '2050-12-24T12:00:00',
+      );
     });
   });
 }
-  
\ No newline at end of file
diff --git a/package.json b/package.json
index 1feefcf72e..6ee70813e9 100644
--- a/package.json
+++ b/package.json
@@ -211,11 +211,10 @@
     "@babel/plugin-proposal-throw-expressions": "7.7.4",
     "@babel/plugin-syntax-import-meta": "7.7.4",
     "@babel/preset-stage-0": "7.0.0",
-    "@loadable/babel-plugin": "5.10.3",
-    "@loadable/component": "5.10.3",
-    "@loadable/server": "5.10.3",
-    "@loadable/webpack-plugin": "5.7.1",
-    "@testing-library/cypress": "5.0.2",
+    "@loadable/babel-plugin": "5.12.0",
+    "@loadable/component": "5.12.0",
+    "@loadable/server": "5.12.0",
+    "@loadable/webpack-plugin": "5.12.0",
     "@testing-library/jest-dom": "4.2.4",
     "@testing-library/react": "9.3.2",
     "autoprefixer": "9.7.3",
@@ -232,7 +231,7 @@
     "connected-react-router": "6.6.1",
     "coveralls": "3.0.2",
     "css-loader": "2.1.1",
-    "cypress": "4.1.0",
+    "cypress": "4.2.0",
     "cypress-axe": "0.5.3",
     "cypress-file-upload": "3.5.3",
     "cypress-plugin-retries": "1.5.2",
diff --git a/yarn.lock b/yarn.lock
index 10a982b3d1..f40829f286 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -295,6 +295,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -634,6 +639,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.7.4":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-export-default-from@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.7.4.tgz#897f05808298060b52873fa804ff853540790ea1"
@@ -1148,6 +1160,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.7.7":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.0.tgz#337eda67401f5b066a6f205a3113d4ac18ba495b"
+  integrity sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -1446,32 +1465,32 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@loadable/babel-plugin@5.10.3":
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/@loadable/babel-plugin/-/babel-plugin-5.10.3.tgz#faadbe38036b29e449640c3974acececbaeb5739"
-  integrity sha512-Izo4QX526f/Czvdot1izg0DtA5DfJEW5RUN28/9wt+62It4xKhVv9l0NNcTEL39xJXj7lsE4k5Z6eCBSETpHmw==
+"@loadable/babel-plugin@5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@loadable/babel-plugin/-/babel-plugin-5.12.0.tgz#de18d4637eb8f4bdecd694a6737880b3e2094d4c"
+  integrity sha512-hb4TDUalaGogsCASEi0fD9Jn0Y2nQybupGgJQAxmx2KrLKxRoWfg78bJMabvownonsq3MEWgUWqb0c3m0uX9vQ==
   dependencies:
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.7.4"
 
-"@loadable/component@5.10.3":
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.3.tgz#e1ad811ac4834a6ed187605d8464351d0c52896f"
-  integrity sha512-/aSO+tXw4vFMwZ6fgLaNQgLuEa7bgTpoBE4PxNzf08/ewAjymrCS3J7v3SbGE7IjGmmKL6vVwkpb7S3cYrk+ag==
+"@loadable/component@5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.12.0.tgz#34d056d15f53dc08d04e9203cad6867cf4f7306c"
+  integrity sha512-eDG7FPZ8tCFA/mqu2IrYV6eS+UxGBo21PwtEV9QpkpYrx25xKRXzJUm36yfQPK3o7jXu43xpPkwiU4mLWcjJlw==
   dependencies:
-    "@babel/runtime" "^7.6.0"
-    hoist-non-react-statics "^3.3.0"
+    "@babel/runtime" "^7.7.7"
+    hoist-non-react-statics "^3.3.1"
 
-"@loadable/server@5.10.3":
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/@loadable/server/-/server-5.10.3.tgz#421e1af549d58d67a0a459cd4f2ae7bf20ab4bc6"
-  integrity sha512-rVwJdGhvzEPZSbMbU65C4TFao/CyF5wS4JeHd4dACjZKEQxlUD3m1IarwUKpdDdrum11J3Ug3PUJMFSlJ6pMSA==
+"@loadable/server@5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@loadable/server/-/server-5.12.0.tgz#61069d9cf6151e7d22c25f54264165556a101634"
+  integrity sha512-Sb4hPz3vPf2z8GMPlW2kSiDwy3Lv38LhVFEW/Uy3BJqHxNlollJDD3rXQ6zmCZY5S/x/m1tPox8UyIBhcr8SZg==
   dependencies:
     lodash "^4.17.15"
 
-"@loadable/webpack-plugin@5.7.1":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@loadable/webpack-plugin/-/webpack-plugin-5.7.1.tgz#9fe4b19c347eaa72f8ff366ae9a9d2b724f86124"
-  integrity sha512-tURNYwPUahbM4Miz/mwMD+PZGnMpknRukwt4RViVX6tYOt06a5U92xJTv7t54C4tHdtCIEOmDrqCo97sfIu4mg==
+"@loadable/webpack-plugin@5.12.0":
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/@loadable/webpack-plugin/-/webpack-plugin-5.12.0.tgz#b28c6e7a979e9c2f8d8b743a634de0ede124c76f"
+  integrity sha512-9G/DOSvR0BZHF8DCd7jWTVEjfLnyLKB+S5KhBOSCK8pTMwDcTKeb0oVd4iwPyeAfPAN4ibqN90r9qnSKnJ+WEQ==
   dependencies:
     mkdirp "^0.5.1"
 
@@ -1605,27 +1624,6 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/cypress@5.0.2":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-5.0.2.tgz#68746fc9db11dabcc4bf883e25b64316f637be71"
-  integrity sha512-AmvBLE+isA/vpdBTXpJ5tu+UYMDgqNW015RVa0nBPJHrv5UXNlmDZyu8tpkxGTFhcf+iFSA2pHuK1jUCQ8PnXQ==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@testing-library/dom" "^6.0.0"
-    "@types/testing-library__cypress" "^5.0.0"
-
-"@testing-library/dom@^6.0.0":
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.10.1.tgz#da5bf5065d3f9e484aef4cc495f4e1a5bea6df2e"
-  integrity sha512-5BPKxaO+zSJDUbVZBRNf9KrmDkm/EcjjaHSg3F9+031VZyPACKXlwLBjVzZxheunT9m72DoIq7WvyE457/Xweg==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@sheerun/mutationobserver-shim" "^0.3.2"
-    "@types/testing-library__dom" "^6.0.0"
-    aria-query "3.0.0"
-    pretty-format "^24.9.0"
-    wait-for-expect "^3.0.0"
-
 "@testing-library/dom@^6.3.0":
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.8.1.tgz#47b4e0cc0742302fc9d122ac43010e6fc60bee65"
@@ -1797,14 +1795,6 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
   integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
 
-"@types/testing-library__cypress@^5.0.0":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__cypress/-/testing-library__cypress-5.0.1.tgz#d05a264eb5d5a45659699a4e0309a7cebe57b344"
-  integrity sha512-z2JKxVTh3PDeLbATRofwDUImEwuytsBeu8Si6YLzxwc2HK4xGIDs50HFlwYD9MPlclGDQRm0QL7ynnaIjRtCGg==
-  dependencies:
-    "@types/testing-library__dom" "*"
-    cypress "^3.5.0"
-
 "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.5.3.tgz#4a33e91055994c9f08981253edec44c85f4dd7f0"
@@ -2125,11 +2115,6 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-escapes@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
-  integrity sha1-06ioOzGapneTZisT52HHkRQiMG4=
-
 ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -2430,13 +2415,6 @@ async@0.2.x, async@~0.2.9:
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
   integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
 
-async@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
-  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
-  dependencies:
-    lodash "^4.17.10"
-
 async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -2964,11 +2942,6 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
-  integrity sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=
-
 bluebird@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
@@ -3347,13 +3320,6 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
-cachedir@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-1.3.0.tgz#5e01928bf2d95b5edd94b0942188246740e0dbc4"
-  integrity sha512-O1ji32oyON9laVPJL1IZ5bmwd2cB46VfpxkDequezH+15FDzzVddEyrGEeX4WusDSqKxdyFdDQDEG1yo1GoWkg==
-  dependencies:
-    os-homedir "^1.0.1"
-
 cachedir@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
@@ -3481,7 +3447,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.0, chalk@^2.4.
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.0.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -3650,17 +3616,12 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-spinners@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-0.1.2.tgz#bb764d88e185fb9e1e6a2a1f19772318f605e31c"
-  integrity sha1-u3ZNiOGF+54eaiofGXcjGPYF4xw=
-
 cli-spinners@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
   integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
 
-cli-table3@^0.5.1:
+cli-table3@0.5.1, cli-table3@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
   integrity sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==
@@ -3827,11 +3788,6 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
-
 commander@4.1.0, commander@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
@@ -4502,10 +4458,10 @@ cypress-plugin-retries@1.5.2:
   dependencies:
     chalk "^3.0.0"
 
-cypress@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.1.0.tgz#295f115d2e8a08fff2760ab49d94d876f5877aee"
-  integrity sha512-FFV8pS9iuriSX4M9rna6awJUhiqozZD1D5z5BprCUJoho1ctbcgpkEUIUnqxli2OwjQqVz07egO+iqoGL+tw7g==
+cypress@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.2.0.tgz#45673fb648b1a77b9a78d73e58b89ed05212d243"
+  integrity sha512-8LdreL91S/QiTCLYLNbIjLL8Ht4fJmu/4HGLxUI20Tc7JSfqEfCmXELrRfuPT0kjosJwJJZacdSji9XSRkPKUw==
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
     "@cypress/xvfb" "1.2.4"
@@ -4515,6 +4471,7 @@ cypress@4.1.0:
     cachedir "2.3.0"
     chalk "2.4.2"
     check-more-types "2.24.0"
+    cli-table3 "0.5.1"
     commander "4.1.0"
     common-tags "1.8.0"
     debug "4.1.1"
@@ -4530,12 +4487,12 @@ cypress@4.1.0:
     listr "0.14.3"
     lodash "4.17.15"
     log-symbols "3.0.0"
-    minimist "1.2.0"
+    minimist "1.2.2"
     moment "2.24.0"
     ospath "1.2.2"
     pretty-bytes "5.3.0"
     ramda "0.26.1"
-    request "2.88.0"
+    request cypress-io/request#b5af0d1fa47eec97ba980cde90a13e69a2afcd16
     request-progress "3.0.0"
     supports-color "7.1.0"
     tmp "0.1.0"
@@ -4543,44 +4500,6 @@ cypress@4.1.0:
     url "0.11.0"
     yauzl "2.10.0"
 
-cypress@^3.5.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.7.0.tgz#e2cd71b87b6ce0d4c72c6ea25da1005d75c1f231"
-  integrity sha512-o+vfRxqAba8TduelzfZQ4WHmj2yNEjaoO2EuZ8dZ9pJpuW+WGtBGheKIp6zkoQsp8ZgFe8OoHh1i2mY8BDnMAw==
-  dependencies:
-    "@cypress/listr-verbose-renderer" "0.4.1"
-    "@cypress/xvfb" "1.2.4"
-    "@types/sizzle" "2.3.2"
-    arch "2.1.1"
-    bluebird "3.5.0"
-    cachedir "1.3.0"
-    chalk "2.4.2"
-    check-more-types "2.24.0"
-    commander "2.15.1"
-    common-tags "1.8.0"
-    debug "3.2.6"
-    execa "0.10.0"
-    executable "4.1.1"
-    extract-zip "1.6.7"
-    fs-extra "5.0.0"
-    getos "3.1.1"
-    is-ci "1.2.1"
-    is-installed-globally "0.1.0"
-    lazy-ass "1.6.0"
-    listr "0.12.0"
-    lodash "4.17.15"
-    log-symbols "2.2.0"
-    minimist "1.2.0"
-    moment "2.24.0"
-    ramda "0.24.1"
-    request "2.88.0"
-    request-progress "3.0.0"
-    supports-color "5.5.0"
-    tmp "0.1.0"
-    untildify "3.0.3"
-    url "0.11.0"
-    yauzl "2.10.0"
-
 damerau-levenshtein@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414"
@@ -4619,13 +4538,6 @@ debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
-debug@3.2.6, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
 debug@4.1.1, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -4640,6 +4552,13 @@ debug@=3.1.0:
   dependencies:
     ms "2.0.0"
 
+debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
 decamelize-keys@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -5657,19 +5576,6 @@ exec-sh@^0.2.0:
   dependencies:
     merge "^1.2.0"
 
-execa@0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@1.0.0, execa@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
@@ -6357,15 +6263,6 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-extra@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
-  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.0.tgz#8cc3f47ce07ef7b3593a11b9fb245f7e34c041d6"
@@ -6497,13 +6394,6 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
-getos@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.1.tgz#967a813cceafee0156b0483f7cffa5b3eff029c5"
-  integrity sha512-oUP1rnEhAr97rkitiszGP9EgDVYnmchgFzfqRzSkgtfv7ai6tEi7Ko8GgjNXts7VLWEqrTWyhsOKLe5C5b/Zkg==
-  dependencies:
-    async "2.6.1"
-
 getos@3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
@@ -6838,7 +6728,7 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.1.0:
+har-validator@~5.1.0, har-validator@~5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
   integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
@@ -7378,13 +7268,6 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-indent-string@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
-  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
-  dependencies:
-    repeating "^2.0.0"
-
 indent-string@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
@@ -7692,13 +7575,6 @@ is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-ci@1.2.1, is-ci@^1.0.10:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
-  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
-  dependencies:
-    ci-info "^1.5.0"
-
 is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -7706,6 +7582,13 @@ is-ci@2.0.0, is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-ci@^1.0.10:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
+  dependencies:
+    ci-info "^1.5.0"
+
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -8998,20 +8881,6 @@ listr-silent-renderer@^1.1.1:
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
   integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
 
-listr-update-renderer@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.2.0.tgz#ca80e1779b4e70266807e8eed1ad6abe398550f9"
-  integrity sha1-yoDhd5tOcCZoB+ju0a1qvjmFUPk=
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    elegant-spinner "^1.0.1"
-    figures "^1.7.0"
-    indent-string "^3.0.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    strip-ansi "^3.0.1"
-
 listr-update-renderer@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
@@ -9026,16 +8895,6 @@ listr-update-renderer@^0.5.0:
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
-listr-verbose-renderer@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#8206f4cf6d52ddc5827e5fd14989e0e965933a35"
-  integrity sha1-ggb0z21S3cWCfl/RSYng6WWTOjU=
-  dependencies:
-    chalk "^1.1.3"
-    cli-cursor "^1.0.2"
-    date-fns "^1.27.2"
-    figures "^1.7.0"
-
 listr-verbose-renderer@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
@@ -9046,28 +8905,6 @@ listr-verbose-renderer@^0.5.0:
     date-fns "^1.27.2"
     figures "^2.0.0"
 
-listr@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.12.0.tgz#6bce2c0f5603fa49580ea17cd6a00cc0e5fa451a"
-  integrity sha1-a84sD1YD+klYDqF81qAMwOX6RRo=
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    figures "^1.7.0"
-    indent-string "^2.1.0"
-    is-promise "^2.1.0"
-    is-stream "^1.1.0"
-    listr-silent-renderer "^1.1.1"
-    listr-update-renderer "^0.2.0"
-    listr-verbose-renderer "^0.4.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    ora "^0.2.3"
-    p-map "^1.1.1"
-    rxjs "^5.0.0-beta.11"
-    stream-to-observable "^0.1.0"
-    strip-ansi "^3.0.1"
-
 listr@0.14.3, listr@^0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
@@ -9279,13 +9116,6 @@ log-driver@^1.2.7:
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
   integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
 
-log-symbols@2.2.0, log-symbols@^2.0.0, log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
-  dependencies:
-    chalk "^2.0.1"
-
 log-symbols@3.0.0, log-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -9300,13 +9130,12 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-update@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
-  integrity sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=
+log-symbols@^2.0.0, log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
   dependencies:
-    ansi-escapes "^1.0.0"
-    cli-cursor "^1.0.2"
+    chalk "^2.0.1"
 
 log-update@^2.3.0:
   version "2.3.0"
@@ -9747,7 +9576,12 @@ minimist@1.1.x:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
   integrity sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=
 
-minimist@1.2.0, minimist@^1.1.1, minimist@^1.2.0:
+minimist@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.2.tgz#b00a00230a1108c48c169e69a291aafda3aacd63"
+  integrity sha512-rIqbOrKb8GJmx/5bc2M0QchhUouMXSpd1RTclXsB41JdL+VtnojfaJR+h7F9k18/4kHUsBFgk80Uk+q569vjPA==
+
+minimist@^1.1.1, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
@@ -10423,16 +10257,6 @@ ora@4.0.2:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
-ora@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
-  integrity sha1-N1J9Igrc1Tw5tzVx11QVbV22V6Q=
-  dependencies:
-    chalk "^1.1.1"
-    cli-cursor "^1.0.2"
-    cli-spinners "^0.1.2"
-    object-assign "^4.0.1"
-
 original@>=0.0.5, original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -10559,11 +10383,6 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-map@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
-  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
-
 p-map@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
@@ -12049,11 +11868,6 @@ quick-lru@^1.0.0:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
   integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
-ramda@0.24.1:
-  version "0.24.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
-  integrity sha1-w7d1UZfzW43DUCIoJixMkd22uFc=
-
 ramda@0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -12718,6 +12532,11 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -12952,7 +12771,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@2.88.0, request@^2.83.0, request@^2.85.0, request@^2.87.0, request@^2.88.0:
+request@^2.83.0, request@^2.85.0, request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -12978,6 +12797,31 @@ request@2.88.0, request@^2.83.0, request@^2.85.0, request@^2.87.0, request@^2.88
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
+"request@github:cypress-io/request#b5af0d1fa47eec97ba980cde90a13e69a2afcd16":
+  version "2.88.1"
+  resolved "https://codeload.github.com/cypress-io/request/tar.gz/b5af0d1fa47eec97ba980cde90a13e69a2afcd16"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -13190,13 +13034,6 @@ rx@^4.1.0:
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
   integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
 
-rxjs@^5.0.0-beta.11:
-  version "5.5.12"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
-  integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
-  dependencies:
-    symbol-observable "1.0.1"
-
 rxjs@^6.1.0, rxjs@^6.3.3, rxjs@^6.4.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
@@ -13912,11 +13749,6 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
-stream-to-observable@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
-  integrity sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=
-
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -14292,13 +14124,6 @@ superagent@3.8.2:
     qs "^6.5.1"
     readable-stream "^2.0.5"
 
-supports-color@5.5.0, supports-color@^5.3.0, supports-color@^5.4.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@7.1.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -14325,6 +14150,13 @@ supports-color@^4.0.0:
   dependencies:
     has-flag "^2.0.0"
 
+supports-color@^5.3.0, supports-color@^5.4.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
@@ -14423,11 +14255,6 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
-  integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
-
 symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -14726,7 +14553,7 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-tough-cookie@^2.3.3, tough-cookie@^2.3.4:
+tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
   integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
@@ -15040,11 +14867,6 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-untildify@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
-  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
-
 untildify@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"

From b816989dc958ca1a6e27a7fc34420031398ac3ac Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 21 Mar 2020 17:52:31 +0100
Subject: [PATCH 18/18] Merge error lost correct full path on server.jsx

---
 src/server.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/server.jsx b/src/server.jsx
index d994f67f3d..bb72c9503a 100644
--- a/src/server.jsx
+++ b/src/server.jsx
@@ -28,15 +28,15 @@ import {
   persistAuthToken,
   generateSitemap,
   getAPIResourceWithAuth,
-} from './helpers';
+} from '@plone/volto/helpers';
 
-import userSession from './reducers/userSession/userSession';
+import userSession from '@plone/volto/reducers/userSession/userSession';
 
-import ErrorPage from './error';
+import ErrorPage from '@plone/volto/error';
 
-import languages from './constants/Languages';
+import languages from '@plone/volto/constants/Languages';
 
-import configureStore from './store';
+import configureStore from '@plone/volto/store';
 
 const supported = new locale.Locales(keys(languages), 'en');
 const locales = {