@plone/volto 17.0.0-alpha.17 → 17.0.0-alpha.19

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]?.relations,
+  );
+  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,97 @@
+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 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': {
+            relations: {
+              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}>
+        <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/manage/Toolbar/More.jsx

@@ -53,6 +53,10 @@ const messages = defineMessages({
     id: 'URL Management',
     defaultMessage: 'URL Management',
   },
+  linkstoitem: {
+    id: 'Links and references',
+    defaultMessage: 'Links and references',
+  },
   ManageTranslations: {
     id: 'Manage Translations',
     defaultMessage: 'Manage Translations',
@@ -227,6 +231,7 @@ class More extends Component {
     const aliasesAction = find(this.props.actions.object_buttons, {
       id: 'redirection',
     });
+
     const { content, intl } = this.props;
 
     const dateOptions = {
@@ -317,6 +322,16 @@ class More extends Component {
                 </li>
               )}
             </Plug>
+            {path !== '' && !config.settings.excludeLinksAndReferencesMenuItem && (
+              <Plug pluggable="toolbar-more-menu-list" id="linkstoitems">
+                <li>
+                  <Link to={`${path}/links-to-item`}>
+                    {this.props.intl.formatMessage(messages.linkstoitem)}
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              </Plug>
+            )}
             <Plug pluggable="toolbar-more-menu-list" id="rules">
               {rulesAction && (
                 <li>

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -427,7 +427,7 @@ class RecurrenceWidget extends Component {
           break;
       }
 
-      if (value) {
+      if (value === 0 || value) {
         //set value
         values[field] = value;
       } else {

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,20 +1,13 @@
-/**
- * Breadcrumbs components.
- * @module components/theme/Breadcrumbs/Breadcrumbs
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 
-import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-
+import { Icon } from '@plone/volto/components';
 import homeSVG from '@plone/volto/icons/home.svg';
 
 const messages = defineMessages({
@@ -28,96 +21,56 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
+const BreadcrumbsComponent = ({ pathname }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
+  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const root = useSelector((state) => state.breadcrumbs.root);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
+  useEffect(() => {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
-  }
+  }, [dispatch, pathname]);
+
+  return (
+    <Segment
+      role="navigation"
+      aria-label={intl.formatMessage(messages.breadcrumbs)}
+      className="breadcrumbs"
+      secondary
+      vertical
+    >
+      <Container>
+        <Breadcrumb>
+          <Link
+            to={root || '/'}
+            className="section"
+            title={intl.formatMessage(messages.home)}
+          >
+            <Icon name={homeSVG} size="18px" />
+          </Link>
+          {items.map((item, index, items) => [
+            <Breadcrumb.Divider key={`divider-${item.url}`} />,
+            index < items.length - 1 ? (
+              <Link key={item.url} to={item.url} className="section">
+                {item.title}
+              </Link>
+            ) : (
+              <Breadcrumb.Section key={item.url} active>
+                {item.title}
+              </Breadcrumb.Section>
+            ),
+          ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-        secondary
-        vertical
-      >
-        <Container>
-          <Breadcrumb>
-            <Link
-              to={this.props.root || '/'}
-              className="section"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="18px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <Breadcrumb.Section key={item.url} active>
-                  {item.title}
-                </Breadcrumb.Section>
-              ),
-            ])}
-          </Breadcrumb>
-        </Container>
-      </Segment>
-    );
-  }
-}
+BreadcrumbsComponent.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);
+export default BreadcrumbsComponent;

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

@@ -1,23 +1,24 @@
 import { injectIntl } from 'react-intl';
 import React from 'react';
-import { BreadcrumbsComponent } from './Breadcrumbs';
+import BreadcrumbsComponent from './Breadcrumbs';
 import Wrapper from '@plone/volto/storybook';
 
 export const Breadcrumb = injectIntl(({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        breadcrumbs: {
+          items: [
+            { title: 'Blog', url: '/blog' },
+            { title: 'My first blog', url: '/blog/my-first-blog' },
+          ],
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <BreadcrumbsComponent
-          pathname=""
-          items={[
-            {
-              '@id': 'https://volto.kitconcept.com/api/Members',
-              title: 'Users',
-            },
-          ]}
-          getBreadcrumbs={() => {}}
-          {...args}
-        />
+        <BreadcrumbsComponent pathname="" />
       </div>
     </Wrapper>
   );