@plone/volto 17.0.0-alpha.9 → 17.0.1

package/src/components/manage/Delete/Delete.jsx

@@ -1,21 +1,14 @@
-/**
- * Delete container.
- * @module components/manage/Delete/Delete
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Portal } from 'react-portal';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { deleteContent, getContent } from '@plone/volto/actions';
 import { Toolbar } from '@plone/volto/components';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
+import { deleteContent, getContent } from '@plone/volto/actions';
 
 const messages = defineMessages({
   delete: {
@@ -32,172 +25,104 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Delete container class.
- * @class Delete
- * @extends Component
- */
-class Delete extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    deleteContent: PropTypes.func.isRequired,
-    getContent: PropTypes.func.isRequired,
-    deleteRequest: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    content: PropTypes.shape({
-      title: PropTypes.string,
-    }),
-    returnUrl: PropTypes.string,
-  };
+const Delete = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const [isClient, setisClient] = useState(false);
+  const { pathname, search } = useLocation();
+  const history = useHistory();
+  const deleteRequest = useSelector((state) => state.content?.delete);
+  const content = useSelector((state) => state.content?.data, shallowEqual);
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    returnUrl: null,
-  };
+  const prevdeleteRequestLoading = usePrevious(deleteRequest.loading);
+  const returnUrl = qs.parse(search).return_url;
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
-  }
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  useEffect(() => {
+    dispatch(getContent(pathname.split('/delete')[0]));
+  }, [dispatch, pathname]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) {
-      this.props.history.push(
-        this.props.returnUrl ||
-          this.props.pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
+  useEffect(() => {
+    if (prevdeleteRequestLoading && deleteRequest.loaded) {
+      history.push(
+        returnUrl || pathname.replace('/delete', '').replace(/\/[^/]*$/, ''),
       );
     }
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getContent(this.props.pathname.split('/delete')[0]);
-    this.setState({ isClient: true });
-  }
+  }, [
+    history,
+    pathname,
+    returnUrl,
+    prevdeleteRequestLoading,
+    deleteRequest.loaded,
+  ]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @returns {undefined}
-   */
-  onSubmit() {
-    this.props.deleteContent(this.props.pathname.replace('/delete', ''));
-  }
+  const onSubmit = () => {
+    dispatch(deleteContent(pathname.replace('/delete', '')));
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.push(this.props.pathname.replace('/delete', ''));
-  }
+  const onCancel = () => {
+    history.push(pathname.replace('/delete', ''));
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (this.props.content) {
-      return (
-        <div id="page-delete">
-          <Helmet title={this.props.intl.formatMessage(messages.delete)} />
-          <Container>
-            <Segment.Group raised>
-              <Segment className="primary">
-                <FormattedMessage
-                  id="Do you really want to delete this item?"
-                  defaultMessage="Do you really want to delete this item?"
-                />
-              </Segment>
-              <Segment attached>
-                <List bulleted>
-                  <List.Item>{this.props.content.title}</List.Item>
-                </List>
-              </Segment>
-              <Segment className="actions" clearing>
-                <Button
-                  basic
-                  circular
-                  primary
-                  floated="right"
-                  icon="arrow right"
-                  aria-label={this.props.intl.formatMessage(messages.ok)}
-                  title={this.props.intl.formatMessage(messages.ok)}
-                  size="big"
-                  onClick={this.onSubmit}
-                />
-                <Button
-                  basic
-                  circular
-                  secondary
-                  icon="remove"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  title={this.props.intl.formatMessage(messages.cancel)}
-                  floated="right"
-                  size="big"
-                  onClick={this.onCancel}
-                />
-              </Segment>
-            </Segment.Group>
-          </Container>
-          {this.state.isClient && (
-            <Portal node={document.getElementById('toolbar')}>
-              <Toolbar
-                pathname={this.props.pathname}
-                hideDefaultViewButtons
-                inner={<span />}
+  if (content) {
+    return (
+      <div id="page-delete">
+        <Helmet title={intl.formatMessage(messages.delete)} />
+        <Container>
+          <Segment.Group raised>
+            <Segment className="primary">
+              <FormattedMessage
+                id="Do you really want to delete this item?"
+                defaultMessage="Do you really want to delete this item?"
               />
-            </Portal>
-          )}
-        </div>
-      );
-    }
-    return <div />;
+            </Segment>
+            <Segment attached>
+              <List bulleted>
+                <List.Item>{content.title}</List.Item>
+              </List>
+            </Segment>
+            <Segment className="actions" clearing>
+              <Button
+                basic
+                circular
+                primary
+                floated="right"
+                icon="arrow right"
+                aria-label={intl.formatMessage(messages.ok)}
+                title={intl.formatMessage(messages.ok)}
+                size="big"
+                onClick={onSubmit}
+              />
+              <Button
+                basic
+                circular
+                secondary
+                icon="remove"
+                aria-label={intl.formatMessage(messages.cancel)}
+                title={intl.formatMessage(messages.cancel)}
+                floated="right"
+                size="big"
+                onClick={onCancel}
+              />
+            </Segment>
+          </Segment.Group>
+        </Container>
+        {isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar
+              pathname={pathname}
+              hideDefaultViewButtons
+              inner={<span />}
+            />
+          </Portal>
+        )}
+      </div>
+    );
   }
-}
+  return <div />;
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      content: state.content.data,
-      deleteRequest: state.content.delete,
-      pathname: props.location.pathname,
-      returnUrl: qs.parse(props.location.search).return_url,
-    }),
-    { deleteContent, getContent },
-  ),
-)(Delete);
+export default Delete;

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

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
 import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -69,7 +70,7 @@ const DiffField = ({
             .replace('\u202F', ' '),
         );
         break;
-      case 'json':
+      case 'json': {
         const api = new Api();
         const history = createBrowserHistory();
         const store = configureStore(window.__data, history, api);
@@ -90,6 +91,29 @@ const DiffField = ({
           ),
         );
         break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
       case 'textarea':
       default:
         parts = diffWords(one, two);

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -53,6 +53,7 @@ const DragDropList = (props) => {
   const {
     childList,
     children,
+    direction = 'vertical',
     onMoveItem,
     as = 'div',
     style,
@@ -128,6 +129,7 @@ const DragDropList = (props) => {
     >
       <Droppable
         droppableId={uid}
+        direction={direction}
         renderClone={(provided, snapshot, rubric) => {
           const index = rubric.source.index;
           return children({
@@ -160,19 +162,22 @@ const DragDropList = (props) => {
                 </Draggable>
               ))}
             {provided.placeholder}
-            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: placeholderProps.clientY,
-                  left: placeholderProps.clientX,
-                  height: placeholderProps.clientHeight,
-                  background: '#eee',
-                  width: placeholderProps.clientWidth,
-                  borderRadius: '3px',
-                }}
-              />
-            )}
+            {/* TODO: Fix the ghost problem if horizontal dnd is present */}
+            {direction !== 'horizontal' &&
+              !isEmpty(placeholderProps) &&
+              snapshot.isDraggingOver && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: placeholderProps.clientY,
+                    left: placeholderProps.clientX,
+                    height: placeholderProps.clientHeight,
+                    background: '#eee',
+                    width: placeholderProps.clientWidth,
+                    borderRadius: '3px',
+                  }}
+                />
+              )}
           </AsDomComponent>
         )}
       </Droppable>

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

@@ -5,7 +5,7 @@ import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
 export default function BlockDataForm(props) {
-  const { onChangeBlock, block } = props;
+  const { onChangeBlock, block, applySchemaEnhancers = true } = props;
 
   if (!onChangeBlock) {
     // eslint-disable-next-line no-console
@@ -19,8 +19,9 @@ export default function BlockDataForm(props) {
     [block, onChangeBlock],
   );
 
+  const Form = applySchemaEnhancers ? EnhancedBlockDataForm : InlineForm;
   return (
-    <EnhancedBlockDataForm
+    <Form
       {...props}
       onChangeFormData={onChangeBlock ? onChangeFormData : undefined}
     />

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

@@ -8,23 +8,25 @@ import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
-  };
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
 
-  // NOTE: onChangeBlock here is not "really" implemented
+    // NOTE: onChangeBlock here is not "really" implemented
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeBlock={(block, data) => onChangeFormData(data)}
-      formData={formData}
-    />
-  );
-};
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeBlock={(block, data) => onChangeFormData(data)}
+        formData={formData}
+      />
+    );
+  };
 
 beforeAll(() => {
   config.widgets = {
@@ -72,7 +74,7 @@ beforeAll(() => {
 });
 
 describe('BlockDataForm', () => {
-  it('should does not add variations to schema when unneeded', () => {
+  it('should not add variations to schema when unneeded', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -103,7 +105,7 @@ describe('BlockDataForm', () => {
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
 
-  it('should does not add variations when only one variation', () => {
+  it('should not add variations when only one variation', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -164,4 +166,36 @@ describe('BlockDataForm', () => {
     // schema is cloned, not mutated in place
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
+
+  it('should not add variations to schema when explicitly disabled', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const formData = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <WrappedBlockDataForm
+          formData={formData}
+          schema={testSchema}
+          onChangeField={(id, value) => {}}
+          applySchemaEnhancers={false}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+
+    // schema is cloned, not mutated in place
+    expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
+  });
 });

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

@@ -31,7 +31,7 @@ import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
 import {
   Button,
-  Container,
+  Container as SemanticContainer,
   Form as UiForm,
   Message,
   Segment,
@@ -229,9 +229,8 @@ class Form extends Component {
     let activeIndex = 0;
 
     if (requestError && prevProps.requestError !== requestError) {
-      errors = FormValidation.giveServerErrorsToCorrespondingFields(
-        requestError,
-      );
+      errors =
+        FormValidation.giveServerErrorsToCorrespondingFields(requestError);
       activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,
@@ -545,12 +544,14 @@ class Form extends Component {
     const { schema: originalSchema, onCancel, onSubmit } = this.props;
     const { formData } = this.state;
     const schema = this.removeBlocksLayoutFields(originalSchema);
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
     return this.props.visual ? (
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
       this.state.isClient && (
-        <div className="ui container">
+        <Container>
           <BlocksToolbar
             formData={this.state.formData}
             selectedBlock={this.state.selected}
@@ -639,7 +640,7 @@ class Form extends Component {
               </UiForm>
             </Portal>
           )}
-        </div>
+        </Container>
       )
     ) : (
       <Container>

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

@@ -19,22 +19,24 @@ function NewBaseWidget(name) {
   );
 }
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
+
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeFormData={onChangeFormData}
+        formData={formData}
+      />
+    );
   };
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeFormData={onChangeFormData}
-      formData={formData}
-    />
-  );
-};
-
 beforeAll(() => {
   config.widgets.default = NewBaseWidget('default');
   config.widgets.type.boolean = NewBaseWidget('boolean');

package/src/components/manage/History/History.jsx

@@ -9,7 +9,13 @@ import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Container, Dropdown, Icon, Segment, Table } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  Dropdown,
+  Icon,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
 import { concat, map, reverse, find } from 'lodash';
 import { Portal } from 'react-portal';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
@@ -24,6 +30,7 @@ import {
 } from '@plone/volto/components';
 import { getHistory, revertHistory, listActions } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -147,6 +154,9 @@ class History extends Component {
     });
     const entries = this.processHistoryEntries();
 
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return !historyAction ? (
       <>
         {this.props.token ? (