@plone/volto 19.0.0-alpha.9 → 19.0.0

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import Delete from './Delete';
 
 const mockStore = configureStore();
@@ -48,10 +49,12 @@ describe('Delete', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Delete location={{ pathname: '/blog', search: '' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Delete location={{ pathname: '/blog', search: '' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -96,10 +99,12 @@ describe('Delete', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Delete location={{ pathname: '/blog', search: '' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Delete location={{ pathname: '/blog', search: '' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -3,18 +3,16 @@
  * @module components/manage/Diff/Diff
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useMemo } from 'react';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useSelector, useDispatch } from 'react-redux';
 import filter from 'lodash/filter';
 import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, useLocation, useHistory } from 'react-router-dom';
 import { createPortal } from 'react-dom';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
 import { getDiff } from '@plone/volto/actions/diff/diff';
@@ -31,6 +29,7 @@ import Icon from '@plone/volto/components/theme/Icon/Icon';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorized';
 import DiffField from '@plone/volto/components/manage/Diff/DiffField';
+import { useClient } from '@plone/volto/hooks/client/useClient';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -54,100 +53,41 @@ const messages = defineMessages({
 });
 
 /**
- * Diff class.
- * @class Diff
- * @extends Component
+ * Diff component.
+ * @function Diff
+ * @returns {JSX.Element}
  */
-class Diff extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getDiff: PropTypes.func.isRequired,
-    getSchema: PropTypes.func.isRequired,
-    getHistory: PropTypes.func.isRequired,
-    schema: PropTypes.objectOf(PropTypes.any),
-    error: PropTypes.objectOf(PropTypes.any),
-    pathname: PropTypes.string.isRequired,
-    one: PropTypes.string.isRequired,
-    two: PropTypes.string.isRequired,
-    view: PropTypes.string.isRequired,
-    data: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-      }),
-    ).isRequired,
-    historyEntries: PropTypes.arrayOf(
-      PropTypes.shape({
-        version: PropTypes.number,
-        time: PropTypes.string,
-        actor: PropTypes.shape({ fullname: PropTypes.string }),
-      }),
-    ).isRequired,
-    title: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  };
+function Diff() {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const history = useHistory();
+  const isClient = useClient();
+  const intl = useIntl();
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    schema: null,
-  };
+  const data = useSelector((state) => state.diff.data);
+  const historyEntries = useSelector((state) => state.history.entries);
+  const schema = useSelector((state) => state.schema.schema);
+  const error = useSelector((state) => state.diff.error);
+  const title = useSelector((state) => state.content.data?.title);
+  const type = useSelector((state) => state.content.data?.['@type']);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs DiffComponent
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeOne = this.onChangeOne.bind(this);
-    this.onChangeTwo = this.onChangeTwo.bind(this);
-    this.onSelectView = this.onSelectView.bind(this);
-    this.state = { isClient: false };
-  }
+  const pathname = location.pathname;
+  const searchParams = qs.parse(location.search);
+  const one = searchParams.one;
+  const two = searchParams.two;
+  const view = searchParams.view || 'split';
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getSchema(this.props.type);
-    this.props.getHistory(getBaseUrl(this.props.pathname));
-    this.props.getDiff(
-      getBaseUrl(this.props.pathname),
-      this.props.one,
-      this.props.two,
-    );
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (
-      this.props.pathname !== nextProps.pathname ||
-      this.props.one !== nextProps.one ||
-      this.props.two !== nextProps.two
-    ) {
-      this.props.getDiff(
-        getBaseUrl(nextProps.pathname),
-        nextProps.one,
-        nextProps.two,
-      );
+  useEffect(() => {
+    if (type) {
+      dispatch(getSchema(type));
+    }
+    if (pathname) {
+      dispatch(getHistory(getBaseUrl(pathname)));
     }
-  }
+    if (pathname && one && two) {
+      dispatch(getDiff(getBaseUrl(pathname), one, two));
+    }
+  }, [pathname, one, two, type, dispatch]);
 
   /**
    * On select view handler
@@ -156,11 +96,9 @@ class Diff extends Component {
    * @param {string} value Value
    * @returns {undefined}
    */
-  onSelectView(event, { value }) {
-    this.props.history.push(
-      `${this.props.pathname}?one=${this.props.one}&two=${this.props.two}&view=${value}`,
-    );
-  }
+  const onSelectView = (event, { value }) => {
+    history.push(`${pathname}?one=${one}&two=${two}&view=${value}`);
+  };
 
   /**
    * On change one handler
@@ -169,11 +107,9 @@ class Diff extends Component {
    * @param {string} value Value
    * @returns {undefined}
    */
-  onChangeOne(event, { value }) {
-    this.props.history.push(
-      `${this.props.pathname}?one=${value}&two=${this.props.two}&view=${this.props.view}`,
-    );
-  }
+  const onChangeOne = (event, { value }) => {
+    history.push(`${pathname}?one=${value}&two=${two}&view=${view}`);
+  };
 
   /**
    * On change two handler
@@ -182,202 +118,169 @@ class Diff extends Component {
    * @param {string} value Value
    * @returns {undefined}
    */
-  onChangeTwo(event, { value }) {
-    this.props.history.push(
-      `${this.props.pathname}?one=${this.props.one}&two=${value}&view=${this.props.view}`,
-    );
-  }
+  const onChangeTwo = (event, { value }) => {
+    history.push(`${pathname}?one=${one}&two=${value}&view=${view}`);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const versions = map(
-      filter(this.props.historyEntries, (entry) => 'version' in entry),
-      (entry, index) => ({
-        text: (
-          <>
-            {index === 0 ? 'Current' : entry.version}&nbsp;(
-            <FormattedDate date={entry.time} long className="text" />, &nbsp;
-            {entry.actor.fullname})
-          </>
-        ),
-        value: `${entry.version}`,
-        key: `${entry.version}`,
-      }),
-    );
+  const versions = useMemo(
+    () =>
+      map(
+        filter(historyEntries, (entry) => 'version' in entry),
+        (entry, index) => ({
+          text: (
+            <>
+              {index === 0 ? 'Current' : entry.version}&nbsp;(
+              <FormattedDate date={entry.time} long className="text" />, &nbsp;
+              {entry.actor.fullname})
+            </>
+          ),
+          value: `${entry.version}`,
+          key: `${entry.version}`,
+        }),
+      ),
+    [historyEntries],
+  );
 
-    return this.props.error?.status === 401 ? (
-      <Unauthorized />
-    ) : (
-      <Container id="page-diff">
-        <Helmet title={this.props.intl.formatMessage(messages.diff)} />
-        <h1>
-          <FormattedMessage
-            id="Difference between revision {one} and {two} of {title}"
-            defaultMessage="Difference between revision {one} and {two} of {title}"
-            values={{
-              one: this.props.one,
-              two: this.props.two,
-              title: this.props.title,
-            }}
-          />
-        </h1>
-        <Grid>
-          <Grid.Column width={9}>
-            <p className="description">
-              <FormattedMessage
-                id="You can view the difference of the revisions below."
-                defaultMessage="You can view the difference of the revisions below."
-              />
-            </p>
-          </Grid.Column>
-          <Grid.Column width={3} textAlign="right">
-            <Button.Group>
-              {map(
-                [
-                  {
-                    id: 'split',
-                    label: this.props.intl.formatMessage(messages.split),
-                  },
-                  {
-                    id: 'unified',
-                    label: this.props.intl.formatMessage(messages.unified),
-                  },
-                ],
-                (view) => (
-                  <Button
-                    type="button"
-                    key={view.id}
-                    value={view.id}
-                    active={this.props.view === view.id}
-                    onClick={this.onSelectView}
-                  >
-                    {view.label}
-                  </Button>
-                ),
-              )}
-            </Button.Group>
-          </Grid.Column>
-        </Grid>
-        {this.props.historyEntries.length > 0 && (
-          <Table basic="very">
-            <Table.Header>
-              <Table.Row>
-                <Table.HeaderCell width={6}>
-                  <FormattedMessage id="Base" defaultMessage="Base" />
-                  <Dropdown
-                    onChange={this.onChangeOne}
-                    value={this.props.one}
-                    selection
-                    fluid
-                    options={versions}
-                  />
-                </Table.HeaderCell>
-                <Table.HeaderCell width={6}>
-                  <FormattedMessage id="Compare" defaultMessage="Compare" />
-                  <Dropdown
-                    onChange={this.onChangeTwo}
-                    value={this.props.two}
-                    selection
-                    fluid
-                    options={versions}
-                  />
-                </Table.HeaderCell>
-              </Table.Row>
-            </Table.Header>
-          </Table>
-        )}
-        {this.props.schema &&
-          this.props.data.length > 0 &&
-          map(this.props.schema.fieldsets, (fieldset) =>
-            map(
-              fieldset.fields,
-              (field) =>
-                !isEqual(
-                  this.props.data[0][field],
-                  this.props.data[1][field],
-                ) &&
-                field !== getBlocksFieldname(this.props.data[0]) &&
-                field !== getBlocksLayoutFieldname(this.props.data[0]) && (
-                  <DiffField
-                    key={field}
-                    one={this.props.data[0][field]}
-                    two={this.props.data[1][field]}
-                    schema={this.props.schema.properties[field]}
-                    view={this.props.view}
-                  />
-                ),
-            ),
-          )}
-        {this.props.schema &&
-          this.props.data.length > 0 &&
-          hasBlocksData(this.props.data[0]) &&
-          (!isEqual(
-            this.props.data[0][getBlocksFieldname(this.props.data[0])],
-            this.props.data[1][getBlocksFieldname(this.props.data[1])],
-          ) ||
-            !isEqual(
-              this.props.data[0][getBlocksLayoutFieldname(this.props.data[0])],
-              this.props.data[1][getBlocksLayoutFieldname(this.props.data[1])],
-            )) && (
-            <DiffField
-              one={this.props.data[0][getBlocksFieldname(this.props.data[0])]}
-              two={this.props.data[1][getBlocksFieldname(this.props.data[1])]}
-              contentOne={this.props.data[0]}
-              contentTwo={this.props.data[1]}
-              schema={
-                this.props.schema.properties[
-                  getBlocksFieldname(this.props.data[0])
-                ]
-              }
-              view={this.props.view}
+  return error?.status === 401 ? (
+    <Unauthorized />
+  ) : (
+    <Container id="page-diff">
+      <Helmet title={intl.formatMessage(messages.diff)} />
+      <h1>
+        <FormattedMessage
+          id="Difference between revision {one} and {two} of {title}"
+          defaultMessage="Difference between revision {one} and {two} of {title}"
+          values={{
+            one,
+            two,
+            title,
+          }}
+        />
+      </h1>
+      <Grid>
+        <Grid.Column width={9}>
+          <p className="description">
+            <FormattedMessage
+              id="You can view the difference of the revisions below."
+              defaultMessage="You can view the difference of the revisions below."
             />
-          )}
-        {this.state.isClient &&
-          createPortal(
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link
-                  to={`${getBaseUrl(this.props.pathname)}/historyview`}
-                  className="item"
+          </p>
+        </Grid.Column>
+        <Grid.Column width={3} textAlign="right">
+          <Button.Group>
+            {map(
+              [
+                {
+                  id: 'split',
+                  label: intl.formatMessage(messages.split),
+                },
+                {
+                  id: 'unified',
+                  label: intl.formatMessage(messages.unified),
+                },
+              ],
+              (viewOption) => (
+                <Button
+                  type="button"
+                  key={viewOption.id}
+                  value={viewOption.id}
+                  active={view === viewOption.id}
+                  onClick={onSelectView}
                 >
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
-                  />
-                </Link>
-              }
-            />,
-            document.getElementById('toolbar'),
-          )}
-      </Container>
-    );
-  }
+                  {viewOption.label}
+                </Button>
+              ),
+            )}
+          </Button.Group>
+        </Grid.Column>
+      </Grid>
+      {historyEntries.length > 0 && (
+        <Table basic="very">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell width={6}>
+                <FormattedMessage id="Base" defaultMessage="Base" />
+                <Dropdown
+                  onChange={onChangeOne}
+                  value={one}
+                  selection
+                  fluid
+                  options={versions}
+                />
+              </Table.HeaderCell>
+              <Table.HeaderCell width={6}>
+                <FormattedMessage id="Compare" defaultMessage="Compare" />
+                <Dropdown
+                  onChange={onChangeTwo}
+                  value={two}
+                  selection
+                  fluid
+                  options={versions}
+                />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+        </Table>
+      )}
+      {schema &&
+        data.length > 0 &&
+        map(schema.fieldsets, (fieldset) =>
+          map(
+            fieldset.fields,
+            (field) =>
+              !isEqual(data[0][field], data[1][field]) &&
+              field !== getBlocksFieldname(data[0]) &&
+              field !== getBlocksLayoutFieldname(data[0]) && (
+                <DiffField
+                  key={field}
+                  one={data[0][field]}
+                  two={data[1][field]}
+                  schema={schema.properties[field]}
+                  view={view}
+                />
+              ),
+          ),
+        )}
+      {schema &&
+        data.length > 0 &&
+        hasBlocksData(data[0]) &&
+        (!isEqual(
+          data[0][getBlocksFieldname(data[0])],
+          data[1][getBlocksFieldname(data[1])],
+        ) ||
+          !isEqual(
+            data[0][getBlocksLayoutFieldname(data[0])],
+            data[1][getBlocksLayoutFieldname(data[1])],
+          )) && (
+          <DiffField
+            one={data[0][getBlocksFieldname(data[0])]}
+            two={data[1][getBlocksFieldname(data[1])]}
+            contentOne={data[0]}
+            contentTwo={data[1]}
+            schema={schema.properties[getBlocksFieldname(data[0])]}
+            view={view}
+          />
+        )}
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={`${getBaseUrl(pathname)}/historyview`} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar'),
+        )}
+    </Container>
+  );
 }
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      data: state.diff.data,
-      historyEntries: state.history.entries,
-      schema: state.schema.schema,
-      error: state.diff.error,
-      pathname: props.location.pathname,
-      one: qs.parse(props.location.search).one,
-      two: qs.parse(props.location.search).two,
-      view: qs.parse(props.location.search).view || 'split',
-      title: state.content.data?.title,
-      type: state.content.data?.['@type'],
-    }),
-    { getDiff, getSchema, getHistory },
-  ),
-)(Diff);
+export default Diff;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { waitFor, render, screen } from '@testing-library/react';
 
 import Diff from './Diff';
@@ -12,12 +13,7 @@ vi.mock('../Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-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'
@@ -80,10 +76,12 @@ describe('Diff', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
-          <Diff />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
+            <Diff />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
     await waitFor(() => screen.getByTestId('DiffField'));

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'