@plone/volto 18.0.0-alpha.9 → 18.0.0

package/src/components/theme/Navigation/Navigation.jsx

@@ -49,7 +49,7 @@ const Navigation = (props) => {
     setisMobileMenuOpen(false);
   };
   return (
-    <nav className="navigation" id="navigation" aria-label="Site">
+    <nav className="navigation" id="navigation" aria-label="Site" tabIndex="-1">
       {items?.length ? (
         <div className="hamburger-wrapper mobile tablet only">
           <button

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -12,7 +12,7 @@ import { Helmet } from '@plone/volto/helpers';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { setInitialPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 

package/src/components/theme/PasswordReset/PasswordReset.test.jsx

@@ -22,6 +22,13 @@ describe('PasswordReset', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/PasswordReset/RequestPasswordReset.jsx

@@ -5,7 +5,7 @@ import { Container } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Helmet, usePrevious } from '@plone/volto/helpers';
-import { Form } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { resetPassword } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 

package/src/components/theme/PasswordReset/RequestPasswordReset.test.jsx

@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import RequestPasswordReset from './RequestPasswordReset';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 describe('RequestPasswordReset', () => {
@@ -22,6 +24,13 @@ describe('RequestPasswordReset', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Register/Register.jsx

@@ -1,18 +1,12 @@
-/**
- * Register container.
- * @module components/theme/Register/Register
- */
-
-import React, { Component } from 'react';
-import { Helmet } from '@plone/volto/helpers';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { Form, Toast } from '@plone/volto/components';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
+import { Toast } from '@plone/volto/components';
+import { Form } from '@plone/volto/components/manage/Form';
 import { createUser } from '@plone/volto/actions';
 
 const messages = defineMessages({
@@ -55,146 +49,81 @@ const messages = defineMessages({
     defaultMessage: 'Register',
   },
 });
+const useUsers = () => {
+  const error = useSelector((state) => state.users.create.error);
+  const loading = useSelector((state) => state.users.create.loading);
+  const loaded = useSelector((state) => state.users.create.loaded);
 
-/**
- * Register class.
- * @class Register
- * @extends Component
- */
-class Register extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    createUser: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    error: PropTypes.shape({
-      message: PropTypes.string,
-    }),
-  };
+  return { error, loaded, loading };
+};
+const Register = () => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const history = useHistory();
+  const [errors, setError] = useState(null);
+  const { loaded, loading, error } = useUsers();
 
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    error: null,
-  };
+  const prevloading = usePrevious(loading);
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      error: null,
-    };
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.loading && nextProps.loaded) {
+  useEffect(() => {
+    if (prevloading && loaded) {
       toast.success(
         <Toast
           success
-          title={this.props.intl.formatMessage(
-            messages.successRegisterCompletedTitle,
-          )}
-          content={this.props.intl.formatMessage(
-            messages.successRegisterCompletedBody,
-          )}
+          title={intl.formatMessage(messages.successRegisterCompletedTitle)}
+          content={intl.formatMessage(messages.successRegisterCompletedBody)}
         />,
       );
-      this.props.history.push('/login');
+      history.push('/login');
     }
-  }
+  }, [intl, history, loaded, prevloading]);
 
-  /**
-   * On submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    this.props.createUser({
-      fullname: data.fullname,
-      email: data.email,
-      password: data.password,
-    });
-    this.setState({
-      error: null,
-    });
-  }
+  const onSubmit = (data) => {
+    const { fullname, email } = data;
+    dispatch(
+      createUser({
+        fullname: fullname,
+        email: email,
+        sendPasswordReset: true,
+      }),
+    );
+    setError(null);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div id="page-register">
-        <Helmet title={this.props.intl.formatMessage(messages.register)} />
-        <Form
-          onSubmit={this.onSubmit}
-          title={this.props.intl.formatMessage(messages.title)}
-          error={this.state.error || this.props.error}
-          loading={this.props.loading}
-          submitLabel={this.props.intl.formatMessage(messages.register)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['fullname', 'email'],
-              },
-            ],
-            properties: {
-              fullname: {
-                type: 'string',
-                title: this.props.intl.formatMessage(messages.fullnameTitle),
-                description: this.props.intl.formatMessage(
-                  messages.fullnameDescription,
-                ),
-              },
-              email: {
-                type: 'string',
-                title: this.props.intl.formatMessage(messages.emailTitle),
-                description: this.props.intl.formatMessage(
-                  messages.emailDescription,
-                ),
-              },
+  return (
+    <div id="page-register">
+      <Helmet title={intl.formatMessage(messages.register)} />
+      <Form
+        onSubmit={onSubmit}
+        title={intl.formatMessage(messages.title)}
+        error={errors || error}
+        loading={loading}
+        submitLabel={intl.formatMessage(messages.register)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['fullname', 'email'],
             },
-            required: ['fullname', 'email'],
-          }}
-        />
-      </div>
-    );
-  }
-}
+          ],
+          properties: {
+            fullname: {
+              type: 'string',
+              title: intl.formatMessage(messages.fullnameTitle),
+              description: intl.formatMessage(messages.fullnameDescription),
+            },
+            email: {
+              type: 'string',
+              title: intl.formatMessage(messages.emailTitle),
+              description: intl.formatMessage(messages.emailDescription),
+            },
+          },
+          required: ['fullname', 'email'],
+        }}
+      />
+    </div>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state) => ({
-      loading: state.users.create.loading,
-      loaded: state.users.create.loaded,
-      error: state.users.create.error,
-    }),
-    { createUser },
-  ),
-)(Register);
+export default Register;

package/src/components/theme/Register/Register.stories.jsx

@@ -0,0 +1,49 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import RegisterComponent from './Register';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlRegister = injectIntl(RegisterComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        users: {
+          create: {
+            loading: false,
+            loaded: true,
+            ...args,
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlRegister />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  error: false,
+};
+
+export default {
+  title: 'Public components/Register',
+  component: RegisterComponent,
+
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+
+  argTypes: {},
+};

package/src/components/theme/Register/Register.test.jsx

@@ -6,6 +6,8 @@ import { MemoryRouter } from 'react-router-dom';
 
 import Register from './Register';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 describe('Register', () => {
@@ -22,6 +24,13 @@ describe('Register', () => {
         locale: 'en',
         messages: {},
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/RouteAnnouncer/RouteAnnouncer.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+
+function RouteAnnouncer() {
+  const [pageTitle, setPageTitle] = useState('');
+
+  useEffect(() => {
+    function updatePage(title) {
+      setPageTitle(title);
+      document.activeElement.blur();
+    }
+    function handlePop(event) {
+      const pageTitle = event.target.document.title;
+      updatePage(pageTitle);
+    }
+
+    const observer = new MutationObserver((mutationList) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          for (const node of mutation.addedNodes) {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+              updatePage(node.textContent);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.querySelector('title'), {
+      characterData: true,
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    window.addEventListener('popstate', handlePop);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('popstate', handlePop);
+    };
+  }, []);
+
+  return (
+    <p
+      id="route-announcer"
+      role="alert"
+      // Off-screen element with 'best' browser support
+      style={{
+        border: 0,
+        clip: 'rect(1px 1px 1px 1px)', // IE-style CSS for compatibility
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        width: '1px',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal',
+      }}
+    >
+      {pageTitle}
+    </p>
+  );
+}
+
+export default RouteAnnouncer;

package/src/components/theme/Search/Search.jsx

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { UniversalLink } from '@plone/volto/components';
 import { asyncConnect } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Container, Pagination, Button, Header } from 'semantic-ui-react';
 import qs from 'query-string';
 import classNames from 'classnames';
@@ -71,6 +71,7 @@ class Search extends Component {
 
   constructor(props) {
     super(props);
+    this.defaultPageSize = config.settings.defaultPageSize;
     this.state = { currentPage: 1, isClient: false, active: 'relevance' };
   }
 
@@ -109,19 +110,24 @@ class Search extends Component {
     const options = qs.parse(this.props.history.location.search);
     this.setState({ currentPage: 1 });
     options['use_site_search_settings'] = 1;
-    this.props.searchContent('', options);
+    this.props.searchContent('', {
+      b_size: this.defaultPageSize,
+      ...options,
+    });
   };
 
   handleQueryPaginationChange = (e, { activePage }) => {
-    const { settings } = config;
     window.scrollTo(0, 0);
     let options = qs.parse(this.props.history.location.search);
     options['use_site_search_settings'] = 1;
 
     this.setState({ currentPage: activePage }, () => {
       this.props.searchContent('', {
+        b_size: this.defaultPageSize,
         ...options,
-        b_start: (this.state.currentPage - 1) * settings.defaultPageSize,
+        b_start:
+          (this.state.currentPage - 1) *
+          (options.b_size || this.defaultPageSize),
       });
     });
   };
@@ -149,7 +155,8 @@ class Search extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { settings } = config;
+    const options = qs.parse(this.props.history.location.search);
+
     return (
       <Container id="page-search">
         <Helmet title={this.props.intl.formatMessage(messages.Search)} />
@@ -282,7 +289,8 @@ class Search extends Component {
                   <Pagination
                     activePage={this.state.currentPage}
                     totalPages={Math.ceil(
-                      this.props.search.items_total / settings.defaultPageSize,
+                      this.props.search.items_total /
+                        (options.b_size || this.defaultPageSize),
                     )}
                     onPageChange={this.handleQueryPaginationChange}
                     firstItem={null}
@@ -309,15 +317,15 @@ class Search extends Component {
             </section>
           </article>
         </div>
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
               inner={<span />}
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

package/src/components/theme/Search/Search.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -8,9 +8,10 @@ import { __test__ as Search } from './Search';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
+);
+
 jest.mock('./SearchTags', () => jest.fn(() => <div id="search-tags" />));
 
 describe('Search', () => {
@@ -27,15 +28,16 @@ describe('Search', () => {
     const history = {
       location: { pathname: '/blog', search: '?SearchableText=blog' },
     };
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Search history={history} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a search component', () => {
@@ -59,14 +61,15 @@ describe('Search', () => {
     const history = {
       location: { pathname: '/blog', search: '?SearchableText=blog' },
     };
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Search history={history} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/theme/SlotRenderer/SlotRenderer.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import SlotRenderer from './SlotRenderer';
+import config from '@plone/volto/registry';
+
+describe('SlotRenderer Component', () => {
+  const RouteConditionTrue = () => () => true;
+  const RouteConditionFalse = () => () => false;
+  const ContentTypeConditionTrue = () => () => true;
+  const ContentTypeConditionFalse = () => () => false;
+
+  test('renders a SlotRenderer component for the aboveContentTitle with two slots in the root', () => {
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-true" />,
+      predicates: [RouteConditionTrue()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'save',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse(), ContentTypeConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => <div className="slot-component-false" />,
+      predicates: [RouteConditionFalse()],
+    });
+
+    config.registerSlotComponent({
+      slot: 'toolbar',
+      name: 'edit',
+      component: (props) => (
+        <aside className="slot-component-true-predicates" />
+      ),
+      predicates: [RouteConditionTrue(), ContentTypeConditionTrue()],
+    });
+
+    const { container } = render(
+      <MemoryRouter initialEntries={[{ pathname: '/' }]}>
+        <SlotRenderer name="toolbar" content={{}} />
+      </MemoryRouter>,
+    );
+
+    const divSlot = container.querySelector('div');
+    expect(divSlot).toHaveClass('slot-component-true');
+    const asideSlot = container.querySelector('aside');
+    expect(asideSlot).toHaveClass('slot-component-true-predicates');
+  });
+});