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

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

@@ -0,0 +1,181 @@
+import loadable from '@loadable/component';
+import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
+import { asyncConnect } from '@plone/volto/helpers';
+
+// CONTROLPANELS
+
+const LoadableControlpanels = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanels'
+    ),
+);
+
+export const Controlpanels = asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(listControlpanels()),
+  },
+  {
+    key: 'systemInformation',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(getSystemInformation()),
+  },
+])(LoadableControlpanels);
+
+export const Controlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanel'
+    ),
+);
+
+// RULES CONTROLPANELS
+
+export const RulesControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/Rules'
+    ),
+);
+
+export const AddRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/AddRule'
+    ),
+);
+
+export const EditRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/EditRule'
+    ),
+);
+
+export const ConfigureRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule'
+    ),
+);
+
+// USERS CONTROLPANELS
+
+export const UsersControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel'
+    ),
+);
+
+export const RenderUsers = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/RenderUsers'
+    ),
+);
+
+export const UserGroupMembershipControlPanel = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel'
+    ),
+);
+
+export const GroupsControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel'
+    ),
+);
+
+export const RenderGroups = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups'
+    ),
+);
+
+// RELATIONS CONTROLPANEL
+
+export const RelationsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/Relations/Relations'),
+);
+
+// ALIASES CONTROLPANEL
+
+export const AliasesControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/Aliases'),
+);
+
+// UNDO CONTROLPANEL
+
+export const UndoControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/UndoControlpanel'),
+);
+
+// ADDONS CONTROLPANEL
+
+export const AddonsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/AddonsControlpanel'),
+);
+
+// CONTENT TYPES CONTROLPANEL
+
+export const ContentType = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentType'
+    ),
+);
+
+export const ContentTypeLayout = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeLayout'
+    ),
+);
+
+export const ContentTypeSchema = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeSchema'
+    ),
+);
+
+export const ContentTypes = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypes'
+    ),
+);
+
+// VERSION OVERVIEW
+
+export const VersionOverview = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/VersionOverview'),
+);
+
+// PLONE UPGRADES CONTROLPANELS
+
+export const UpgradeControlPanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/UpgradeControlPanel'),
+);
+
+// MODERATE COMMENTS CONTROLPANEL
+
+export const ModerateComments = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/ModerateComments'),
+);
+
+// DATABASE INFORMATION CONTROLPANELS
+
+export const DatabaseInformation = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/DatabaseInformation'),
+);

package/src/components/manage/Diff/Diff.jsx

@@ -23,12 +23,12 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import {
-  DiffField,
   FormattedDate,
   Icon,
   Toolbar,
   Unauthorized,
 } from '@plone/volto/components';
+import DiffField from '@plone/volto/components/manage/Diff/DiffField';
 
 import backSVG from '@plone/volto/icons/back.svg';
 

package/src/components/manage/Display/Display.jsx

@@ -6,7 +6,8 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { getSchema, updateContent, getContent } from '@plone/volto/actions';
 import { getLayoutFieldname } from '@plone/volto/helpers';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import { defineMessages, injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 

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

@@ -8,6 +8,7 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Widgets');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

package/src/components/manage/Edit/Edit.jsx

@@ -18,7 +18,6 @@ import { toast } from 'react-toastify';
 
 import {
   Forbidden,
-  Form,
   Icon,
   Sidebar,
   Toast,
@@ -27,6 +26,7 @@ import {
   CompareLanguages,
   TranslationObject,
 } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import {
   updateContent,
   getContent,

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

@@ -8,11 +8,10 @@ import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 jest.mock('../Sidebar/Sidebar', () => jest.fn(() => <div id="Sidebar" />));
 
-jest.mock('../Form/Form', () => jest.fn(() => <div className="Form" />));
-
 describe('Edit', () => {
   it('renders an empty edit component', () => {
     const store = mockStore({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineForm } from '@plone/volto/components';
+import { InlineForm } from '@plone/volto/components/manage/Form';
 import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);

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

@@ -5,6 +5,8 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const withStateManagement =

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

@@ -3,7 +3,10 @@
  * @module components/manage/Form/Form
  */
 
-import { BlocksForm, Field, Icon, Toast } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
+import { Field, BlocksForm } from '@plone/volto/components/manage/Form';
+import BlocksToolbar from '@plone/volto/components/manage/Form/BlocksToolbar';
+import UndoToolbar from '@plone/volto/components/manage/Form/UndoToolbar';
 import {
   difference,
   FormValidation,
@@ -44,7 +47,6 @@ import {
 } from 'semantic-ui-react';
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
-import { BlocksToolbar, UndoToolbar } from '@plone/volto/components';
 import {
   setMetadataFieldsets,
   resetMetadataFocus,

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

@@ -9,7 +9,7 @@ const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
-jest.mock('./Field', () => jest.fn(() => <div className="Field" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('Form', () => {
   it('renders a form component', () => {

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

@@ -11,7 +11,8 @@ import {
   removeFromArray,
   arrayRange,
 } from '@plone/volto/helpers/Utils/Utils';
-import { Field, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { Field } from '@plone/volto/components/manage/Form';
 import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';

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

@@ -6,6 +6,8 @@ import config from '@plone/volto/registry';
 
 import InlineForm from './InlineForm';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 function NewBaseWidget(name) {

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

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

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

@@ -8,7 +8,7 @@ import ModalForm from './ModalForm';
 
 const mockStore = configureStore();
 
-jest.mock('./Field', () => jest.fn(() => <div className="Field" />));
+jest.mock('@plone/volto/components/manage/Form');
 
 describe('ModalForm', () => {
   it('renders a modal form component', () => {

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

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

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

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

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

@@ -3,7 +3,7 @@ import { map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { Form as UiForm, Menu, Segment } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
-import { Form, Field } from '@plone/volto/components';
+import { Form, Field } from '@plone/volto/components/manage/Form';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
 import {
@@ -14,6 +14,7 @@ import {
   toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
+
 const messages = defineMessages({
   document: {
     id: 'Document',

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

@@ -15,7 +15,8 @@ import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 
-import { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Icon, Toast, Toolbar } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { updatePassword } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 

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

@@ -9,6 +9,7 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('ChangePassword', () => {

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

@@ -12,7 +12,8 @@ import { withRouter } from 'react-router-dom';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 import { messages } from '@plone/volto/helpers';
-import { Form, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { getUser, updateUser, getUserSchema } from '@plone/volto/actions';
 
 /**

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

@@ -12,7 +12,8 @@ import { withCookies } from 'react-cookie';
 import { defineMessages, injectIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import { Form, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
 import { toGettextLang } from '@plone/volto/helpers';

package/src/components/manage/Preferences/PersonalPreferences.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
-import { waitFor, render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import PersonalPreferences from './PersonalPreferences';
 
@@ -10,6 +10,7 @@ const mockStore = configureStore();
 
 jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
+jest.mock('@plone/volto/components/manage/Form');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>
@@ -17,7 +18,7 @@ beforeAll(
 );
 
 describe('PersonalPreferences', () => {
-  it('renders a personal preferences component', async () => {
+  it('renders a personal preferences component', () => {
     const store = mockStore({
       intl: {
         locale: 'en',
@@ -47,9 +48,6 @@ describe('PersonalPreferences', () => {
         </MemoryRouter>
       </Provider>,
     );
-    await waitFor(() => {
-      screen.getByTitle('Cancel');
-    });
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,5 @@
+import loadable from '@loadable/component';
+
+export const Rules = loadable(
+  () => import('@plone/volto/components/manage/Rules/Rules'),
+);

package/src/components/manage/Toolbar/PersonalTools.jsx

@@ -10,7 +10,7 @@ import { Icon } from '@plone/volto/components';
 import { getUser } from '@plone/volto/actions';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 import {
-  flattenToAppURL,
+  expandToBackendURL,
   getBaseUrl,
   userHasRoles,
 } from '@plone/volto/helpers';
@@ -97,7 +97,7 @@ const PersonalTools = (props) => {
       <div className={cx('avatar', { default: !user.portrait })}>
         {user.portrait ? (
           <img
-            src={flattenToAppURL(user.portrait)}
+            src={expandToBackendURL(user.portrait)}
             alt={intl.formatMessage(messages.userAvatar)}
           />
         ) : (

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -30,7 +30,7 @@ import {
   MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {

package/src/components/manage/Widgets/ButtonsWidget.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { Icon } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 

package/src/components/manage/Widgets/CheckboxWidget.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Checkbox } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * CheckboxWidget component class.

package/src/components/manage/Widgets/ColorPickerWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form } from 'semantic-ui-react';
 import { Grid, Button } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -26,11 +26,11 @@ type Color =
 export type ColorPickerWidgetProps = {
   id: string;
   title: string;
-  value: string;
-  default: string;
-  required: boolean;
-  missing_value: unknown;
-  className: string;
+  value?: string;
+  default?: string | object;
+  required?: boolean;
+  missing_value?: unknown;
+  className?: string;
   onChange: (id: string, value: any) => void;
   colors: Color[];
 };
@@ -41,7 +41,7 @@ const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   const intl = useIntl();
 
   React.useEffect(() => {
-    if (!props.value && props.default) {
+    if (isEmpty(props.value) && props.default) {
       props.onChange(props.id, props.default);
     }
     // Yes, this is correct.

package/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -9,7 +9,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';