@plone/volto 17.0.0-alpha.9 → 17.0.0

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

@@ -0,0 +1,209 @@
+/**
+ * LinksToItem component
+ * @module components/manage/LinksToItem/LinksToItem
+ */
+import { useEffect } from 'react';
+import { find } from 'lodash';
+import { Helmet } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
+import { Portal } from 'react-portal';
+import { Container, Segment, Table } from 'semantic-ui-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { getContent, queryRelations } from '@plone/volto/actions';
+import {
+  Icon as IconNext,
+  Toolbar,
+  UniversalLink,
+} from '@plone/volto/components';
+
+import { getBaseUrl } from '@plone/volto/helpers';
+import backSVG from '@plone/volto/icons/back.svg';
+import settingsSVG from '@plone/volto/icons/settings.svg';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  linkstoitem: {
+    id: 'Links and references',
+    defaultMessage: 'Links and references',
+  },
+  helpLinkRelationsControlPanel: {
+    id: 'Overview of relations of all content items',
+    defaultMessage: 'Overview of relations of all content items',
+  },
+});
+
+const LinksToItem = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const pathname = props.location.pathname;
+  const itempath = getBaseUrl(pathname);
+
+  const title = useSelector((state) => state.content.data?.title || '');
+  const myrelations = useSelector(
+    (state) => state.relations.subrequests[itempath]?.data,
+  );
+  const actions = useSelector((state) => state.actions?.actions ?? {});
+  const ploneSetupAction = find(actions.user, {
+    id: 'plone_setup',
+  });
+
+  useEffect(() => {
+    dispatch(queryRelations(null, false, itempath, null, [itempath]));
+  }, [dispatch, itempath]);
+
+  useEffect(() => {
+    if (!title) dispatch(getContent(itempath));
+  }, [dispatch, itempath, title]);
+
+  let links = {};
+  if (myrelations) {
+    Object.keys(myrelations).forEach((relationtype) => {
+      links[relationtype] = {};
+      myrelations[relationtype].items.forEach((item) => {
+        links[relationtype][item.source.UID] = item.source;
+      });
+    });
+  }
+
+  let links_ordered = {};
+  Object.keys(links).forEach((relationtype) => {
+    links_ordered[relationtype] = Object.values(links[relationtype]).sort(
+      (link) => link['@id'],
+    );
+  });
+
+  const relations_found = Object.keys(links_ordered).length > 0;
+  return (
+    <Container id="linkstoitem">
+      <Helmet title={intl.formatMessage(messages.linkstoitem)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          <FormattedMessage
+            id="Content that links to or references {title}"
+            defaultMessage="Content that links to or references {title}"
+            values={{ title: <q>{title}</q> }}
+          />
+        </Segment>
+        {relations_found ? (
+          <Table selectable compact singleLine attached>
+            {
+              <Table.Body>
+                {Object.keys(links_ordered).map((relationtype) => {
+                  return [].concat(
+                    [
+                      <Table.Row>
+                        <Table.HeaderCell>
+                          {relationtype === 'isReferencing' ? (
+                            <FormattedMessage
+                              id="Linking this item with hyperlink in text"
+                              defaultMessage="Linking this item with hyperlink in text"
+                            />
+                          ) : relationtype === 'relatedItems' ? (
+                            <FormattedMessage
+                              id="Referencing this item as related item"
+                              defaultMessage="Referencing this item as related item"
+                            />
+                          ) : (
+                            <>
+                              <FormattedMessage
+                                id="Referencing this item with {relationship}"
+                                defaultMessage="Referencing this item with {relationship}"
+                                values={{ relationship: <q>{relationtype}</q> }}
+                              />
+                            </>
+                          )}
+                        </Table.HeaderCell>
+                        <Table.HeaderCell>
+                          <FormattedMessage
+                            id="Review state"
+                            defaultMessage="Review state"
+                          />
+                        </Table.HeaderCell>
+                        <Table.HeaderCell>
+                          <FormattedMessage id="Type" defaultMessage="Type" />
+                        </Table.HeaderCell>
+                      </Table.Row>,
+                    ],
+                    links_ordered[relationtype].map((link) => {
+                      return (
+                        <Table.Row key={link['@id']}>
+                          <Table.Cell>
+                            <UniversalLink
+                              href={link['@id']}
+                              className={`source ${link.review_state}`}
+                            >
+                              <span className="label" title={link.type_title}>
+                                {link.title}
+                              </span>
+                            </UniversalLink>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <span>{link.review_state}</span>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <span>{link.type_title || ''}</span>
+                          </Table.Cell>
+                        </Table.Row>
+                      );
+                    }),
+                  );
+                })}
+              </Table.Body>
+            }
+          </Table>
+        ) : (
+          <Segment secondary>
+            <FormattedMessage
+              id="No links to this item found."
+              defaultMessage="No links to this item found."
+            />
+          </Segment>
+        )}
+      </Segment.Group>
+      {__CLIENT__ && (
+        <Portal node={document.getElementById('toolbar')}>
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Link to={itempath} className="item">
+                  <IconNext
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+
+                <>
+                  {ploneSetupAction ? (
+                    <Link to="/controlpanel/relations" className="relations">
+                      <IconNext
+                        name={settingsSVG}
+                        className="circled"
+                        aria-label={intl.formatMessage(
+                          messages.helpLinkRelationsControlPanel,
+                        )}
+                        size="30px"
+                        title={intl.formatMessage(
+                          messages.helpLinkRelationsControlPanel,
+                        )}
+                      />
+                    </Link>
+                  ) : null}
+                </>
+              </>
+            }
+          />
+        </Portal>
+      )}
+    </Container>
+  );
+};
+
+export default LinksToItem;

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/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/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