@plone/volto 19.0.0-alpha.9 → 19.1.0

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

@@ -4,12 +4,7 @@ import { Provider } from 'react-intl-redux';
 import { waitFor, render, screen } from '@testing-library/react';
 import DiffField from './DiffField';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -8,17 +8,8 @@ import Display from './Display';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -2,17 +2,14 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import jwt from 'jsonwebtoken';
 
 import { __test__ as Edit } from './Edit';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
@@ -59,9 +56,11 @@ describe('Edit', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <div id="toolbar"></div>
-        <Edit location={{ pathname: '/blog', search: {} }} />
-        <div id="sidebar"></div>
+        <CookiesProvider>
+          <div id="toolbar"></div>
+          <Edit location={{ pathname: '/blog', search: {} }} />
+          <div id="sidebar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -108,9 +107,11 @@ describe('Edit', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <div id="toolbar"></div>
-        <Edit location={{ pathname: '/blog', search: {} }} />
-        <div id="sidebar"></div>
+        <CookiesProvider>
+          <div id="toolbar"></div>
+          <Edit location={{ pathname: '/blog', search: {} }} />
+          <div id="sidebar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -5,11 +5,7 @@ import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
 import { Provider } from 'react-intl-redux';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

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

@@ -7,7 +7,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not rendered
 /**
@@ -155,7 +154,7 @@ const getWidgetByType = (widgets, type) => widgets.type[type] || null;
  * @param {Object} props Properties.
  * @returns {string} Markup of the component.
  */
-const UnconnectedField = (props, { intl }) => {
+const Field = (props, { intl }) => {
   const widgets = props.widgets || config.widgets;
   const Widget =
     getWidgetByFieldId(widgets, props.id) ||
@@ -178,74 +177,9 @@ const UnconnectedField = (props, { intl }) => {
     ...getWidgetPropsFromTaggedValues(widgets, props.widgetOptions),
   };
 
-  if (props.onOrder) {
-    const { DropTarget, DragSource } = props.reactDnd;
-    const WrappedWidget = DropTarget(
-      'field',
-      {
-        hover(properties, monitor) {
-          const dragOrder = monitor.getItem().order;
-          const hoverOrder = properties.order;
-
-          if (dragOrder === hoverOrder) {
-            return;
-          }
-          properties.onOrder(dragOrder, hoverOrder - dragOrder);
-
-          monitor.getItem().order = hoverOrder;
-        },
-      },
-      (connect) => ({
-        connectDropTarget: connect.dropTarget(),
-      }),
-    )(
-      DragSource(
-        'field',
-        {
-          beginDrag(properties) {
-            return {
-              id: properties.label,
-              order: properties.order,
-            };
-          },
-        },
-        (connect, monitor) => ({
-          connectDragSource: connect.dragSource(),
-          connectDragPreview: connect.dragPreview(),
-          isDragging: monitor.isDragging(),
-        }),
-      )(
-        ({
-          connectDropTarget,
-          connectDragSource,
-          connectDragPreview,
-          ...rest
-        }) =>
-          connectDropTarget(
-            connectDragSource(
-              connectDragPreview(
-                <div>
-                  <Widget {...rest} />
-                </div>,
-              ),
-            ),
-          ),
-      ),
-    );
-    return <WrappedWidget {...widgetProps} />;
-  }
   return <Widget {...widgetProps} />;
 };
 
-const DndConnectedField = injectLazyLibs(['reactDnd'])(UnconnectedField);
-
-const Field = (props) =>
-  props.onOrder ? (
-    <DndConnectedField {...props} />
-  ) : (
-    <UnconnectedField {...props} />
-  );
-
 /**
  * Property types.
  * @property {Object} propTypes Property types.
@@ -258,7 +192,6 @@ Field.propTypes = {
   type: PropTypes.string,
   id: PropTypes.string.isRequired,
   focus: PropTypes.bool,
-  onOrder: PropTypes.func,
 };
 
 /**
@@ -272,7 +205,6 @@ Field.defaultProps = {
   choices: null,
   type: 'string',
   focus: false,
-  onOrder: null,
 };
 
 export default injectIntl(Field);

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

@@ -59,6 +59,8 @@ import { compose } from 'redux';
 import config from '@plone/volto/registry';
 import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
+const noop = () => {};
+
 /**
  * Form container class.
  * @class Form
@@ -117,6 +119,9 @@ class Form extends Component {
     allowedBlocks: PropTypes.arrayOf(PropTypes.string),
     showRestricted: PropTypes.bool,
     global: PropTypes.bool,
+    checkSavedDraft: PropTypes.func,
+    onSaveDraft: PropTypes.func,
+    onCancelDraft: PropTypes.func,
   };
 
   /**
@@ -153,6 +158,9 @@ class Form extends Component {
     requestError: null,
     allowedBlocks: null,
     global: false,
+    checkSavedDraft: noop,
+    onSaveDraft: noop,
+    onCancelDraft: noop,
   };
 
   /**
@@ -191,8 +199,8 @@ class Form extends Component {
     // Adding fallback in case the fields are empty, so we are sure that the edit form
     // shows at least the default blocks
     if (
-      formData.hasOwnProperty(blocksFieldname) &&
-      formData.hasOwnProperty(blocksLayoutFieldname)
+      formData?.hasOwnProperty(blocksFieldname) &&
+      formData?.hasOwnProperty(blocksLayoutFieldname)
     ) {
       if (
         !formData[blocksLayoutFieldname] ||
@@ -216,7 +224,7 @@ class Form extends Component {
 
     let selectedBlock = null;
     if (
-      formData.hasOwnProperty(blocksLayoutFieldname) &&
+      formData?.hasOwnProperty(blocksLayoutFieldname) &&
       formData[blocksLayoutFieldname].items.length > 0
     ) {
       if (config.blocks?.initialBlocksFocus === null) {
@@ -964,7 +972,12 @@ class Form extends Component {
                     onTabChange={this.onTabChange}
                     activeIndex={this.state.activeIndex}
                     panes={map(schema.fieldsets, (item) => ({
-                      menuItem: item.title,
+                      menuItem: {
+                        key: item.id,
+                        content: item.title,
+                        as: 'button',
+                        type: 'button',
+                      },
                       render: () => [
                         !settings.verticalFormTabs && this.props.title && (
                           <Segment secondary attached key={this.props.title}>

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

@@ -4,18 +4,47 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import Form from './Form';
+import config from '@plone/volto/registry';
 
 const mockStore = configureStore();
 const errorMessage =
   "[{'message': 'The specified email is not valid.', 'field': 'contact_email', 'error': 'ValidationError'}";
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
+vi.mock('@plone/volto/components/manage/Form');
+vi.mock('@plone/volto/helpers/Utils/withSaveAsDraft', async () => {
+  const React = await import('react');
+  const { default: config } = await import('@plone/volto/registry');
+
+  return {
+    default: () => (WrappedComponent) =>
+      React.forwardRef((props, ref) =>
+        config.experimental?.saveAsDraft?.enabled ? (
+          <div data-autosave-wrapper="true">
+            <WrappedComponent
+              {...props}
+              checkSavedDraft={vi.fn()}
+              onSaveDraft={vi.fn()}
+              onCancelDraft={vi.fn()}
+              ref={ref}
+            />
+          </div>
+        ) : (
+          <WrappedComponent {...props} ref={ref} />
+        ),
+      ),
+  };
 });
 
 describe('Form', () => {
+  beforeEach(() => {
+    config.experimental = {
+      ...(config.experimental || {}),
+      saveAsDraft: {
+        enabled: false,
+      },
+    };
+  });
+
   it('renders a form component', () => {
     const store = mockStore({
       intl: {
@@ -53,10 +82,106 @@ describe('Form', () => {
             onCancel={() => {}}
           />
         </MemoryRouter>
-        ,
       </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('does not wrap the form with autosave when the experimental flag is disabled', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/some-route']}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
+              },
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      component.root.findAllByProps({ 'data-autosave-wrapper': 'true' }),
+    ).toHaveLength(0);
+  });
+
+  it('wraps the form with autosave when the experimental flag is enabled', () => {
+    config.experimental = {
+      ...config.experimental,
+      saveAsDraft: {
+        enabled: true,
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={['/some-route']}>
+          <Form
+            schema={{
+              fieldsets: [
+                {
+                  id: 'default',
+                  title: 'Default',
+                  fields: ['title'],
+                },
+              ],
+              properties: {
+                title: {},
+              },
+              required: [],
+            }}
+            requestError={errorMessage}
+            onSubmit={() => {}}
+            onCancel={() => {}}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(
+      component.root.findAllByProps({ 'data-autosave-wrapper': 'true' }),
+    ).toHaveLength(1);
+  });
 });

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

@@ -6,11 +6,7 @@ import config from '@plone/volto/registry';
 
 import InlineForm from './InlineForm';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();