@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { MemoryRouter } from 'react-router-dom';
+
+import LinksToItem from './LinksToItem';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+jest.mock('react-portal', () => ({
+  Portal: jest.fn(() => <div id="Portal" />),
+}));
+jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+
+describe('LinksToItem', () => {
+  it('renders "links and references" view', () => {
+    const store = mockStore({
+      relations: {
+        subrequests: {
+          '/page-1': {
+            data: {
+              isReferencing: {
+                items: [
+                  {
+                    source: {
+                      '@id': 'http://localhost:3000/page-basil',
+                      '@type': 'Document',
+                      UID: 'SOMEUID008',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Basil',
+                      type_title: 'Document',
+                    },
+                    target: {
+                      '@id': 'http://localhost:3000/page-tomato',
+                      '@type': 'Document',
+                      UID: 'SOMEUID007',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Tomato',
+                      type_title: 'Document',
+                    },
+                  },
+                ],
+                items_total: 1,
+              },
+              relatedItems: {
+                items: [
+                  {
+                    source: {
+                      '@id': 'http://localhost:3000/page-cucumber',
+                      '@type': 'Document',
+                      UID: 'SOMEUID008',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Cucumber',
+                      type_title: 'Document',
+                    },
+                    target: {
+                      '@id': 'http://localhost:3000/page-tomato',
+                      '@type': 'Document',
+                      UID: 'SOMEUID007',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Tomato',
+                      type_title: 'Document',
+                    },
+                  },
+                ],
+                items_total: 1,
+              },
+            },
+          },
+        },
+      },
+      content: {
+        data: {
+          UID: 'SOMEUID007',
+          title: 'page #1',
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/manage/LockingToastsFactory/LockingToastsFactory.jsx

@@ -12,8 +12,7 @@ const messages = defineMessages({
     defaultMessage: 'This item was locked by {creator} on {date}',
   },
   unlockItem: {
-    id:
-      'If you are certain this user has abandoned the object, you may unlock the object. You will then be able to edit it.',
+    id: 'If you are certain this user has abandoned the object, you may unlock the object. You will then be able to edit it.',
     defaultMessage:
       'If you are certain this user has abandoned the object, you may unlock the object. You will then be able to edit it.',
   },

package/src/components/manage/Messages/Messages.jsx

@@ -1,107 +1,40 @@
-/**
- * Messages component.
- * @module components/manage/Messages/Messages
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Message, Container } from 'semantic-ui-react';
 import { map } from 'lodash';
 
 import { removeMessage } from '@plone/volto/actions';
 
-/**
- * Messages container class.
- * @class Messages
- * @extends Component
- */
-class Messages extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    removeMessage: PropTypes.func.isRequired,
-    messages: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        body: PropTypes.string,
-        level: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Messages
-   */
-  constructor(props) {
-    super(props);
-    this.onDismiss = this.onDismiss.bind(this);
-  }
+const Messages = () => {
+  const dispatch = useDispatch();
 
-  // /**
-  //  * Component will receive props
-  //  * @method componentWillReceiveProps
-  //  * @param {Object} nextProps Next properties
-  //  * @returns {undefined}
-  //  */
-  // componentWillReceiveProps(nextProps) {
-  //   if (nextProps.messages.length > this.props.messages.length) {
-  //     window.setTimeout(() => {
-  //       if (this.props.messages.length > 0) {
-  //         this.props.removeMessage(-1);
-  //       }
-  //     }, 6000);
-  //   }
-  // }
+  const messages = useSelector(
+    (state) => state.messages.messages,
+    shallowEqual,
+  );
 
-  /**
-   * On dismiss
-   * @method onDismiss
-   * @param {Object} event Event object
-   * @param {number} value Index of message
-   * @returns {undefined}
-   */
-  onDismiss(event, { value }) {
-    this.props.removeMessage(value);
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props.messages && (
-        <Container className="messages">
-          {map(this.props.messages, (message, index) => (
-            <Message
-              key={message.id}
-              value={index}
-              onDismiss={this.onDismiss}
-              error={message.level === 'error'}
-              success={message.level === 'success'}
-              warning={message.level === 'warning'}
-              info={message.level === 'info'}
-              header={message.title}
-              content={message.body}
-            />
-          ))}
-        </Container>
-      )
-    );
-  }
-}
+  const onDismiss = (event, { value }) => {
+    dispatch(removeMessage(value));
+  };
 
-export default connect(
-  (state) => ({
-    messages: state.messages.messages,
-  }),
-  { removeMessage },
-)(Messages);
+  return (
+    messages && (
+      <Container className="messages">
+        {map(messages, (message, index) => (
+          <Message
+            key={message.id}
+            value={index}
+            onDismiss={onDismiss}
+            error={message.level === 'error'}
+            success={message.level === 'success'}
+            warning={message.level === 'warning'}
+            info={message.level === 'info'}
+            header={message.title}
+            content={message.body}
+          />
+        ))}
+      </Container>
+    )
+  );
+};
+
+export default Messages;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';

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

@@ -6,7 +6,7 @@ import {
   getTranslationLocator,
   getContent,
 } from '@plone/volto/actions';
-import { flattenToAppURL, normalizeLanguageName } from '@plone/volto/helpers';
+import { flattenToAppURL, toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const CreateTranslation = (props) => {
@@ -33,7 +33,7 @@ const CreateTranslation = (props) => {
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
-        const langFileName = normalizeLanguageName(language);
+        const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));
         });

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

@@ -15,7 +15,8 @@ import {
   Api,
   flattenToAppURL,
   langmap,
-  normalizeLanguageName,
+  toGettextLang,
+  toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
 const messages = defineMessages({
@@ -55,9 +56,9 @@ const TranslationObject = ({
       setLoadingLocale(true);
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
-      const langFileName = normalizeLanguageName(lang);
+      const langFileName = toGettextLang(lang);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
-        setLocales({ ...locales, [lang]: locale.default });
+        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
     }

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

@@ -43,8 +43,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   newPasswordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   newPasswordRepeatTitle: {
     id: 'Confirm password',

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

@@ -15,7 +15,7 @@ import { toast } from 'react-toastify';
 import { Form, Toast } from '@plone/volto/components';
 import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -86,7 +86,7 @@ class PersonalPreferences extends Component {
   onSubmit(data) {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
-      const langFileName = normalizeLanguageName(language);
+      const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });

package/src/components/manage/Sharing/Sharing.jsx

@@ -14,7 +14,7 @@ import { Portal } from 'react-portal';
 import {
   Button,
   Checkbox,
-  Container,
+  Container as SemanticContainer,
   Form,
   Icon as IconOld,
   Input,
@@ -28,6 +28,7 @@ import { updateSharing, getSharing } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Icon, Toolbar, Toast } from '@plone/volto/components';
 import { toast } from 'react-toastify';
+import config from '@plone/volto/registry';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -38,6 +39,10 @@ const messages = defineMessages({
     id: 'Search for user or group',
     defaultMessage: 'Search for user or group',
   },
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
   inherit: {
     id: 'Inherit permissions from higher levels',
     defaultMessage: 'Inherit permissions from higher levels',
@@ -144,6 +149,7 @@ class SharingComponent extends Component {
     this.onToggleInherit = this.onToggleInherit.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       inherit: props.inherit,
       entries: props.entries,
       isClient: false,
@@ -224,7 +230,17 @@ class SharingComponent extends Component {
    */
   onSearch(event) {
     event.preventDefault();
-    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+    this.setState({ isLoading: true });
+    this.props
+      .getSharing(getBaseUrl(this.props.pathname), this.state.search)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users or groups', error);
+      });
   }
 
   /**
@@ -245,9 +261,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -288,11 +304,17 @@ class SharingComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Pluggable name="sharing-component" />
+          <Pluggable
+            name="sharing-component"
+            params={{ isLoading: this.state.isLoading }}
+          />
           <Plug pluggable="sharing-component" id="sharing-component-title">
             <Segment className="primary">
               <FormattedMessage
@@ -314,20 +336,32 @@ class SharingComponent extends Component {
             </Segment>
           </Plug>
           <Plug pluggable="sharing-component" id="sharing-component-search">
-            <Segment>
-              <Form onSubmit={this.onSearch}>
-                <Form.Field>
-                  <Input
-                    name="SearchableText"
-                    action={{ icon: 'search' }}
-                    placeholder={this.props.intl.formatMessage(
-                      messages.searchForUserOrGroup,
-                    )}
-                    onChange={this.onChangeSearch}
-                  />
-                </Form.Field>
-              </Form>
-            </Segment>
+            {({ isLoading }) => {
+              return (
+                <Segment>
+                  <Form onSubmit={this.onSearch}>
+                    <Form.Field>
+                      <Input
+                        name="SearchableText"
+                        action={{
+                          icon: 'search',
+                          loading: isLoading,
+                          disabled: isLoading,
+                          'aria-label': this.props.intl.formatMessage(
+                            messages.search,
+                          ),
+                        }}
+                        placeholder={this.props.intl.formatMessage(
+                          messages.searchForUserOrGroup,
+                        )}
+                        onChange={this.onChangeSearch}
+                        id="sharing-component-search"
+                      />
+                    </Form.Field>
+                  </Form>
+                </Segment>
+              );
+            }}
           </Plug>
           <Plug
             pluggable="sharing-component"
@@ -400,9 +434,15 @@ class SharingComponent extends Component {
               <Segment attached>
                 <Form.Field>
                   <Checkbox
-                    checked={this.state.inherit}
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
                     onChange={this.onToggleInherit}
-                    label={this.props.intl.formatMessage(messages.inherit)}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
                   />
                 </Form.Field>
                 <p className="help">

package/src/components/manage/Sidebar/AlignBlock.jsx

@@ -57,7 +57,7 @@ const AlignBlock = ({
   return (
     <div className="align-buttons">
       {actions.map((action) => (
-        <Button.Group>
+        <Button.Group key={action}>
           <Button
             icon
             basic