@plone/volto 18.0.0-alpha.27 → 18.0.0-alpha.28

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

@@ -0,0 +1,64 @@
+import loadable from '@loadable/component';
+
+export const Contents = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/Contents'
+    ),
+);
+
+export const ContentsRenameModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsRenameModal'
+    ),
+);
+
+export const ContentsBreadcrumbs = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsBreadcrumbs'
+    ),
+);
+
+export const ContentsIndexHeader = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsIndexHeader'
+    ),
+);
+
+export const ContentsItem = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsItem'
+    ),
+);
+
+export const ContentsUploadModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsUploadModal'
+    ),
+);
+
+export const ContentsPropertiesModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsPropertiesModal'
+    ),
+);
+
+export const ContentsWorkflowModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsWorkflowModal'
+    ),
+);
+
+export const ContentsTagsModal = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsTagsModal'
+    ),
+);

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

@@ -26,7 +26,7 @@ import {
   Menu,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import { DatetimeWidget } from '@plone/volto/components/manage/Widgets';
 import { Icon, Toolbar } from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';

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

@@ -10,6 +10,7 @@ import { MemoryRouter } from 'react-router';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Aliases', () => {

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

@@ -13,7 +13,8 @@ import { Button, Header } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import { last, nth, join } from 'lodash';
-import { Error, Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getControlpanel, updateControlpanel } from '@plone/volto/actions';
 
 import saveSVG from '@plone/volto/icons/save.svg';

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

@@ -8,8 +8,8 @@ import ContentType from './ContentType';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
 
 describe('ContentType', () => {
   it('renders dexterity content-type component', () => {

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

@@ -19,14 +19,8 @@ import { Button, Segment } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { nth, join } from 'lodash';
-import {
-  Error,
-  Form,
-  Icon,
-  Toolbar,
-  Sidebar,
-  Toast,
-} from '@plone/volto/components';
+import { Error, Icon, Toolbar, Sidebar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   getSchema,
   updateSchema,

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

@@ -6,7 +6,8 @@
 import { getSchema, putSchema } from '@plone/volto/actions';
 import { getParentUrl } from '@plone/volto/helpers';
 import { nth } from 'lodash';
-import { Error, Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Error, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
 import PropTypes from 'prop-types';

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

@@ -14,14 +14,8 @@ import { last } from 'lodash';
 import { Confirm, Container, Table, Button, Header } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import {
-  Error,
-  Icon,
-  ModalForm,
-  Toolbar,
-  Toast,
-  ContentTypesActions,
-} from '@plone/volto/components';
+import { Error, Icon, Toolbar, Toast } from '@plone/volto/components';
+import ContentTypesActions from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
 import {
   getControlpanel,
   postControlpanel,
@@ -31,6 +25,7 @@ import { getId } from '@plone/volto/helpers';
 
 import addSVG from '@plone/volto/icons/add-document.svg';
 import backSVG from '@plone/volto/icons/back.svg';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   add: {

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

@@ -14,7 +14,8 @@ import { Button, Container } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import { Form, Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updateControlpanel, getControlpanel } from '@plone/volto/actions';
 
 import config from '@plone/volto/registry';

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

@@ -8,10 +8,9 @@ import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
-
 describe('Controlpanel', () => {
   it('renders a controlpanel component', () => {
     const store = mockStore({

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

@@ -3,18 +3,15 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
-import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { Helmet } from '@plone/volto/helpers';
 import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
-import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { createPortal } from 'react-dom';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
 
-import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
 
 import config from '@plone/volto/registry';
@@ -99,15 +96,19 @@ const messages = defineMessages({
 /**
  * Controlpanels container class.
  */
-function Controlpanels({
-  controlpanels,
-  controlpanelsRequest,
-  systemInformation,
-  pathname,
-}) {
+export default function Controlpanels({ location }) {
   const intl = useIntl();
   const [isClient, setIsClient] = useState(false);
 
+  const { pathname } = location;
+  const controlpanels = useSelector(
+    (state) => state.controlpanels.controlpanels,
+  );
+  const controlpanelsRequest = useSelector((state) => state.controlpanels.list);
+  const systemInformation = useSelector(
+    (state) => state.controlpanels.systeminformation,
+  );
+
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -281,41 +282,3 @@ function Controlpanels({
     </div>
   );
 }
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Controlpanels.propTypes = {
-  controlpanels: PropTypes.arrayOf(
-    PropTypes.shape({
-      '@id': PropTypes.string,
-      group: PropTypes.string,
-      title: PropTypes.string,
-    }),
-  ).isRequired,
-  pathname: PropTypes.string.isRequired,
-};
-
-export default compose(
-  connect((state, props) => ({
-    controlpanels: state.controlpanels.controlpanels,
-    controlpanelsRequest: state.controlpanels.list,
-    pathname: props.location.pathname,
-    systemInformation: state.controlpanels.systeminformation,
-  })),
-
-  asyncConnect([
-    {
-      key: 'controlpanels',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(listControlpanels()),
-    },
-    {
-      key: 'systemInformation',
-      promise: async ({ location, store: { dispatch } }) =>
-        await dispatch(getSystemInformation()),
-    },
-  ]),
-)(Controlpanels);

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

@@ -11,35 +11,37 @@ const mockStore = configureStore();
 
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
-jest.mock('./VersionOverview', () =>
-  jest.fn(() => <div className="VersionOverview" />),
-);
+jest.mock('@plone/volto/components/manage/Controlpanels', () => ({
+  VersionOverview: jest.fn(() => <div className="VersionOverview" />),
+}));
 
 describe('Controlpanels', () => {
   it('renders a controlpanels component', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
-          group: 'General',
-          title: 'Date and Time',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
-          group: 'General',
-          title: 'Language',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
-          group: 'Content',
-          title: 'Editing',
-        },
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      controlpanels: {
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/date-and-time',
+            group: 'General',
+            title: 'Date and Time',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/lang',
+            group: 'General',
+            title: 'Language',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/editing',
+            group: 'Content',
+            title: 'Editing',
+          },
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
+      },
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [
@@ -85,13 +87,15 @@ describe('Controlpanels', () => {
 
   it('renders an additional control panel', () => {
     const store = mockStore({
-      controlpanels: [
-        {
-          '@id': 'http://localhost:8080/Plone/@controlpanels/security',
-          group: 'Security',
-          title: 'test',
-        },
-      ],
+      controlpanels: {
+        controlpanels: [
+          {
+            '@id': 'http://localhost:8080/Plone/@controlpanels/security',
+            group: 'Security',
+            title: 'test',
+          },
+        ],
+      },
       reduxAsyncConnect: {
         // Mocked in redux async connect as it isn't fetch client-side.
         controlpanels: [

package/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx

@@ -15,13 +15,13 @@ import {
 import jwtDecode from 'jwt-decode';
 import {
   Icon,
-  ModalForm,
   Toast,
   Toolbar,
-  RenderGroups,
   Pagination,
   Error,
 } from '@plone/volto/components';
+import RenderGroups from '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 import { Link } from 'react-router-dom';
 import {
   Helmet,

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

@@ -14,12 +14,8 @@ import { Container, Button, Table } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import {
-  CommentEditModal,
-  FormattedRelativeDate,
-  Icon,
-  Toolbar,
-} from '@plone/volto/components';
+import { FormattedRelativeDate, Icon, Toolbar } from '@plone/volto/components';
+import { CommentEditModal } from '@plone/volto/components/theme/Comments';
 
 import backSVG from '@plone/volto/icons/back.svg';
 

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

@@ -7,12 +7,9 @@ import ModerateComments from './ModerateComments';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/theme/Comments');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
-jest.mock('../../theme/Comments/CommentEditModal', () =>
-  jest.fn(() => <div id="modal" />),
-);
-
 describe('ModerateComments', () => {
   it('renders a moderate comments component', () => {
     const store = mockStore({

package/src/components/manage/Controlpanels/Relations/RelationsListing.jsx

@@ -15,7 +15,7 @@ import {
   searchContent,
 } from '@plone/volto/actions';
 
-const ListingTemplate = ({
+const RelationsListing = ({
   relationtype,
   query_source,
   query_target,
@@ -477,4 +477,4 @@ const ListingTemplate = ({
     </>
   );
 };
-export default ListingTemplate;
+export default RelationsListing;

package/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx

@@ -22,8 +22,8 @@ import {
   queryRelations,
   rebuildRelations,
 } from '@plone/volto/actions';
-import RelationsListing from './RelationsListing';
-import BrokenRelations from './BrokenRelations';
+import RelationsListing from '@plone/volto/components/manage/Controlpanels/Relations/RelationsListing';
+import BrokenRelations from '@plone/volto/components/manage/Controlpanels/Relations/BrokenRelations';
 import helpSVG from '@plone/volto/icons/help.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';

package/src/components/manage/Controlpanels/Rules/AddRule.jsx

@@ -19,9 +19,9 @@ import {
   Segment,
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Icon, Toolbar, Field } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 import { getContentRulesEvents, addNewRule } from '@plone/volto/actions';
 

package/src/components/manage/Controlpanels/Rules/AddRule.test.jsx

@@ -9,6 +9,7 @@ import AddRule from './AddRule';
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Toolbar" />));
 
 describe('AddRule', () => {

package/src/components/manage/Controlpanels/Rules/EditRule.jsx

@@ -20,14 +20,14 @@ import {
 } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon, Toolbar, Field } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import {
   getControlPanelRule,
   editRule,
   getContentRulesEvents,
 } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 

package/src/components/manage/Controlpanels/Rules/EditRule.test.jsx

@@ -11,6 +11,8 @@ const mockStore = configureMockStore(middlewares);
 
 jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
+jest.mock('@plone/volto/components/manage/Form');
+
 describe('EditRule', () => {
   it('renders rules edit interface', () => {
     const store = mockStore({

package/src/components/manage/Controlpanels/Rules/components/VariableModal.jsx

@@ -6,7 +6,7 @@ import { getVocabulary } from '@plone/volto/actions';
 import { injectIntl } from 'react-intl';
 import { compose } from 'redux';
 
-import { ModalForm } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 
 const setSchema = (name, choices = '') => {
   switch (name) {

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

@@ -10,7 +10,8 @@ import { Link } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 import { Container, Segment, Table, Menu, Input } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Icon, Toolbar, Form, Toast } from '@plone/volto/components';
+import { Icon, Toolbar, Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import backSVG from '@plone/volto/icons/back.svg';
 import { map } from 'lodash';
 import { Helmet } from '@plone/volto/helpers';

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

@@ -7,10 +7,9 @@ import UndoControlpanel from './UndoControlpanel';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div id="form" />));
-
 describe('UndoControlpanel', () => {
   it('renders undo controlpanel component', () => {
     const store = mockStore({

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

@@ -25,7 +25,8 @@ import {
   runUpgrade,
 } from '@plone/volto/actions';
 import { Helmet } from '@plone/volto/helpers';
-import { Icon, Toast, Toolbar, VersionOverview } from '@plone/volto/components';
+import { Icon, Toast, Toolbar } from '@plone/volto/components';
+import { VersionOverview } from '@plone/volto/components/manage/Controlpanels';
 import backSVG from '@plone/volto/icons/back.svg';
 import { toast } from 'react-toastify';
 

package/src/components/manage/Controlpanels/Users/RenderUsers.jsx

@@ -8,7 +8,8 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import editSVG from '@plone/volto/icons/editing.svg';
-import { Icon, ModalForm, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
 import { updateUser } from '@plone/volto/actions';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { compose } from 'redux';

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -7,7 +7,7 @@ import { isEqual } from 'lodash';
 
 import { messages } from '@plone/volto/helpers';
 import { listGroups } from '@plone/volto/actions'; // getRegistry
-import UserGroupMembershipListing from './UserGroupMembershipListing';
+import UserGroupMembershipListing from '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipListing';
 
 const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
   const intl = useIntl();

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -17,13 +17,13 @@ import {
 import jwtDecode from 'jwt-decode';
 import {
   Icon,
-  ModalForm,
   Toast,
   Toolbar,
-  RenderUsers,
   Pagination,
   Error,
 } from '@plone/volto/components';
+import { ModalForm } from '@plone/volto/components/manage/Form';
+import RenderUsers from '@plone/volto/components/manage/Controlpanels/Users/RenderUsers';
 import { Link } from 'react-router-dom';
 import {
   Helmet,