@plone/volto 18.0.0-alpha.9 → 18.0.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Container, Segment, Table } from 'semantic-ui-react';
 import { Helmet } from '@plone/volto/helpers';
 import { flattenToAppURL, getBaseUrl, langmap } from '@plone/volto/helpers';
@@ -15,7 +15,7 @@ import {
 } from '@plone/volto/actions';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { toast } from 'react-toastify';
 
 import addSVG from '@plone/volto/icons/add.svg';
@@ -64,6 +64,12 @@ const ManageTranslations = (props) => {
   const content = useSelector((state) => state.content.data);
   const dispatch = useDispatch();
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const { isObjectBrowserOpen, openObjectBrowser } = props;
 
   const currentSelectedItem = React.useRef(null);
@@ -269,8 +275,8 @@ const ManageTranslations = (props) => {
             </Table.Body>
           </Table>
         )}
-        {__CLIENT__ && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
@@ -284,9 +290,9 @@ const ManageTranslations = (props) => {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Segment.Group>
     </Container>
   );

package/src/components/manage/Multilingual/ManageTranslations.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';
@@ -12,9 +12,7 @@ beforeAll(() => {
   config.settings.supportedLanguages = ['de', 'es'];
 });
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 const mockStore = configureStore();
 
@@ -36,7 +34,7 @@ describe('ManageTranslations', () => {
         },
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ManageTranslations
@@ -48,10 +46,11 @@ describe('ManageTranslations', () => {
               },
             }}
           />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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',
@@ -47,7 +48,9 @@ const TranslationObject = ({
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
       const langFileName = toGettextLang(lang);
-      import('@root/../locales/' + langFileName + '.json').then((locale) => {
+      import(
+        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+      ).then((locale) => {
         setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
@@ -124,7 +127,6 @@ const TranslationObject = ({
                     {map(item.fields, (field, index) => (
                       <Field
                         {...schema.properties[field]}
-                        isDisabled={true}
                         id={field}
                         formData={translationObject}
                         focus={false}

package/src/components/manage/Pluggable/Pluggable.test.js

@@ -31,7 +31,7 @@ describe('<Pluggable />', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('Works with an empy Plug', () => {
+  it('Works with an empty Plug', () => {
     const { container } = render(
       <PluggablesProvider>
         <Pluggable name="test" />
@@ -57,8 +57,8 @@ describe('<Pluggable />', () => {
                     </header>
                     <div className="pastanaga-menu-list">
                       <ul>
-                        {pluggables.map((p) => (
-                          <>{p()}</>
+                        {pluggables.map((p, index) => (
+                          <React.Fragment key={index}>{p()}</React.Fragment>
                         ))}
                       </ul>
                     </div>
@@ -92,7 +92,7 @@ describe('<Pluggable />', () => {
                     <div className="pastanaga-menu-list">
                       <ul>
                         {pluggables.map((p) => (
-                          <>{p()}</>
+                          <React.Fragment key={p}>{p()}</React.Fragment>
                         ))}
                       </ul>
                     </div>

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

@@ -1,24 +1,16 @@
-/**
- * Change password component.
- * @module components/manage/Preferences/ChangePassword
- */
-
-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 { Link, withRouter } from 'react-router-dom';
-import { Portal } from 'react-portal';
-import { defineMessages, injectIntl } from 'react-intl';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { createPortal } from 'react-dom';
 import { Container } from 'semantic-ui-react';
 import jwtDecode from 'jwt-decode';
 import { toast } from 'react-toastify';
 
+import { Helmet } from '@plone/volto/helpers';
+import { useClient } from '@plone/volto/hooks';
 import { Form, Icon, Toast, Toolbar } from '@plone/volto/components';
 import { updatePassword } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
-
 import backSVG from '@plone/volto/icons/back.svg';
 
 const messages = defineMessages({
@@ -69,169 +61,100 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ChangePassword class.
- * @class ChangePassword
- * @extends Component
- */
-class ChangePassword extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    loading: PropTypes.bool.isRequired,
-    updatePassword: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ChangePassword
-   */
-  constructor(props) {
-    super(props);
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = { isClient: false };
-  }
+const ChangePassword = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isClient = useClient();
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.setState({ isClient: true });
-  }
+  const userId = useSelector(
+    (state) =>
+      state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+    shallowEqual,
+  );
+  const loading = useSelector((state) => state.users.update_password.loading);
+  const { pathname } = useLocation();
+  const history = useHistory();
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
+  const onSubmit = (data) => {
     if (data.newPassword === data.newPasswordRepeat) {
-      this.props.updatePassword(
-        this.props.userId,
-        data.oldPassword,
-        data.newPassword,
-      );
-      toast.success(
-        <Toast
-          success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.saved)}
-        />,
+      dispatch(updatePassword(userId, data.oldPassword, data.newPassword)).then(
+        () => {
+          toast.success(
+            <Toast
+              success
+              title={intl.formatMessage(messages.success)}
+              content={intl.formatMessage(messages.saved)}
+            />,
+          );
+        },
       );
     }
-  }
+  };
 
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.goBack();
-  }
+  const onCancel = () => {
+    history.goBack();
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Container id="page-change-password">
-        <Helmet
-          title={this.props.intl.formatMessage(messages.changePassword)}
-        />
-        <Form
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
-              },
-            ],
-            properties: {
-              oldPassword: {
-                description: this.props.intl.formatMessage(
-                  messages.oldPasswordDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.oldPasswordTitle),
-                type: 'string',
-                widget: 'password',
-              },
-              newPassword: {
-                description: this.props.intl.formatMessage(
-                  messages.newPasswordDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.newPasswordTitle),
-                type: 'string',
-                widget: 'password',
-              },
-              newPasswordRepeat: {
-                description: this.props.intl.formatMessage(
-                  messages.newPasswordRepeatDescription,
-                ),
-                title: this.props.intl.formatMessage(
-                  messages.newPasswordRepeatTitle,
-                ),
-                type: 'string',
-                widget: 'password',
-              },
+  return (
+    <Container id="page-change-password">
+      <Helmet title={intl.formatMessage(messages.changePassword)} />
+      <Form
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
+            },
+          ],
+          properties: {
+            oldPassword: {
+              description: intl.formatMessage(messages.oldPasswordDescription),
+              title: intl.formatMessage(messages.oldPasswordTitle),
+              type: 'string',
+              widget: 'password',
+            },
+            newPassword: {
+              description: intl.formatMessage(messages.newPasswordDescription),
+              title: intl.formatMessage(messages.newPasswordTitle),
+              type: 'string',
+              widget: 'password',
+            },
+            newPasswordRepeat: {
+              description: intl.formatMessage(
+                messages.newPasswordRepeatDescription,
+              ),
+              title: intl.formatMessage(messages.newPasswordRepeatTitle),
+              type: 'string',
+              widget: 'password',
             },
-            required: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
-          }}
-          onSubmit={this.onSubmit}
-          onCancel={this.onCancel}
-          loading={this.props.loading}
-        />
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link
-                  to={`${getBaseUrl(this.props.pathname)}`}
-                  className="item"
-                >
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
-                  />
-                </Link>
-              }
-            />
-          </Portal>
+          },
+          required: ['oldPassword', 'newPassword', 'newPasswordRepeat'],
+        }}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        loading={loading}
+      />
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link to={`${getBaseUrl(pathname)}`} className="item">
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar'),
         )}
-      </Container>
-    );
-  }
-}
+    </Container>
+  );
+};
 
-export default compose(
-  withRouter,
-  injectIntl,
-  connect(
-    (state, props) => ({
-      userId: state.userSession.token
-        ? jwtDecode(state.userSession.token).sub
-        : '',
-      loading: state.users.update_password.loading,
-      pathname: props.location.pathname,
-    }),
-    { updatePassword },
-  ),
-)(ChangePassword);
+export default ChangePassword;

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

@@ -0,0 +1,41 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ChangePasswordComponent from './ChangePassword';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+const IntlChangePasswordComponent = injectIntl(ChangePasswordComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+        users: {
+          update_password: {
+            loading: false,
+          },
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlChangePasswordComponent {...args} location={{ pathname: '/blog' }} />
+    </Wrapper>
+  );
+}
+
+export const ChangePassword = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/ChangePassword',
+  component: ChangePassword,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import jwt from 'jsonwebtoken';
@@ -9,9 +9,8 @@ import ChangePassword from './ChangePassword';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('@plone/volto/components/manage/Form');
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('ChangePassword', () => {
   it('renders a change password component', () => {
@@ -28,15 +27,23 @@ describe('ChangePassword', () => {
           loading: false,
         },
       },
+      content: {
+        data: {},
+        create: {
+          loading: false,
+          loaded: true,
+        },
+      },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <ChangePassword location={{ pathname: '/blog' }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });