@plone/volto 16.26.1 → 16.28.0

package/src/components/manage/Contents/Contents.jsx

@@ -34,7 +34,7 @@ import {
 } from 'lodash';
 import move from 'lodash-move';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { asyncConnect } from '@plone/volto/helpers';
+import { asyncConnect, flattenToAppURL } from '@plone/volto/helpers';
 
 import {
   searchContent,
@@ -118,9 +118,13 @@ const messages = defineMessages({
     id: 'Delete',
     defaultMessage: 'Delete',
   },
-  deleteConfirm: {
-    id: 'Do you really want to delete the following items?',
-    defaultMessage: 'Do you really want to delete the following items?',
+  deleteConfirmSingleItem: {
+    id: 'Delete this item?',
+    defaultMessage: 'Delete this item?',
+  },
+  deleteConfirmMultipleItems: {
+    id: 'Delete selected items?',
+    defaultMessage: 'Delete selected items?',
   },
   deleteError: {
     id: 'The item could not be deleted.',
@@ -270,35 +274,6 @@ const messages = defineMessages({
     id: 'All',
     defaultMessage: 'All',
   },
-  linkIntegrityMessageHeader: {
-    id: 'Potential link breakage',
-    defaultMessage: 'Potential link breakage',
-  },
-  linkIntegrityMessageBody: {
-    id:
-      'By deleting this item, you will break ' +
-      'links that exist in the items listed below. ' +
-      'If this is indeed what you want to do, ' +
-      'we recommend that remove these references first.',
-    defaultMessage:
-      'By deleting this item, ' +
-      'you will break links that exist in the items ' +
-      'listed below. If this is indeed what you ' +
-      'want to do, we recommend that remove ' +
-      'these references first.',
-  },
-  linkIntegrityMessageExtra: {
-    id: 'This Page is referenced by the following items:',
-    defaultMessage: 'This Page is referenced by the following items:',
-  },
-  deleteItemCountMessage: {
-    id: 'Total items to be deleted:',
-    defaultMessage: 'Total items to be deleted:',
-  },
-  deleteItemMessage: {
-    id: 'Items to be deleted:',
-    defaultMessage: 'Items to be deleted:',
-  },
 });
 
 /**
@@ -434,6 +409,9 @@ class Contents extends Component {
       showProperties: false,
       showWorkflow: false,
       itemsToDelete: [],
+      containedItemsToDelete: [],
+      brokenReferences: 0,
+      breaches: [],
       showAllItemsToDelete: true,
       items: this.props.items,
       filter: '',
@@ -469,12 +447,40 @@ class Contents extends Component {
       this.state.itemsToDelete !== prevState.itemsToDelete &&
       this.state.itemsToDelete.length > 0
     ) {
+      const linkintegrityInfo = await this.props.linkIntegrityCheck(
+        map(this.state.itemsToDelete, (item) => this.getFieldById(item, 'UID')),
+      );
+      const containedItems = linkintegrityInfo
+        .map((result) => result.items_total ?? 0)
+        .reduce((acc, value) => acc + value, 0);
+      const breaches = linkintegrityInfo.flatMap((result) =>
+        result.breaches.map((source) => ({
+          source: source,
+          target: result,
+        })),
+      );
+      const source_by_uid = breaches.reduce(
+        (acc, value) => acc.set(value.source.uid, value.source),
+        new Map(),
+      );
+      const by_source = breaches.reduce((acc, value) => {
+        if (acc.get(value.source.uid) === undefined) {
+          acc.set(value.source.uid, new Set());
+        }
+        acc.get(value.source.uid).add(value.target);
+        return acc;
+      }, new Map());
+
       this.setState({
-        linkIntegrityBreakages: await this.props.linkIntegrityCheck(
-          map(this.state.itemsToDelete, (item) =>
-            this.getFieldById(item, 'UID'),
-          ),
-        ),
+        containedItemsToDelete: containedItems,
+        brokenReferences: by_source.size,
+        linksAndReferencesViewLink: linkintegrityInfo.length
+          ? linkintegrityInfo[0]['@id'] + '/links-to-item'
+          : null,
+        breaches: Array.from(by_source, (entry) => ({
+          source: source_by_uid.get(entry[0]),
+          targets: Array.from(entry[1]),
+        })),
         showAllItemsToDelete:
           this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
       });
@@ -1199,85 +1205,289 @@ class Contents extends Component {
                 <article id="content">
                   <Confirm
                     open={this.state.showDelete}
-                    confirmButton="Delete"
-                    header={this.props.intl.formatMessage(
-                      messages.deleteConfirm,
-                    )}
+                    confirmButton={
+                      this.state.brokenReferences === 0
+                        ? 'Delete'
+                        : 'Delete item and break links'
+                    }
+                    header={
+                      this.state.itemsToDelete.length === 1
+                        ? this.props.intl.formatMessage(
+                            messages.deleteConfirmSingleItem,
+                          )
+                        : this.props.intl.formatMessage(
+                            messages.deleteConfirmMultipleItems,
+                          )
+                    }
                     content={
                       <div className="content">
-                        <h3>
-                          {this.props.intl.formatMessage(
-                            messages.deleteItemCountMessage,
-                          ) + ` ${this.state.itemsToDelete.length}`}
-                        </h3>
-                        <ul className="content">
-                          {map(
-                            this.state.showAllItemsToDelete
-                              ? this.state.itemsToDelete
-                              : this.state.itemsToDelete.slice(
-                                  0,
-                                  this.deleteItemsToShowThreshold,
-                                ),
-                            (item) => (
-                              <li key={item}>
-                                {this.getFieldById(item, 'title')}
-                              </li>
-                            ),
-                          )}
-                        </ul>
-                        {!this.state.showAllItemsToDelete && (
-                          <Button
-                            onClick={() =>
-                              this.setState({
-                                showAllItemsToDelete: true,
-                              })
-                            }
-                          >
-                            Show all items
-                          </Button>
-                        )}
-                        {this.state.linkIntegrityBreakages.reduce(
-                          (a, b) => a + b.breaches.length,
-                          0,
-                        ) ? (
-                          <div>
-                            <h3>
-                              {this.props.intl.formatMessage(
-                                messages.linkIntegrityMessageHeader,
+                        {this.state.itemsToDelete.length > 1 ? (
+                          this.state.containedItemsToDelete > 0 ? (
+                            <>
+                              <FormattedMessage
+                                id="Some items are also a folder. By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+                                defaultMessage="Some items are also a folder. By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+                                values={{
+                                  containedItemsToDelete: (
+                                    <span>
+                                      {this.state.containedItemsToDelete}
+                                    </span>
+                                  ),
+                                  variation: (
+                                    <span>
+                                      {this.state.containedItemsToDelete ===
+                                      1 ? (
+                                        <FormattedMessage
+                                          id="item"
+                                          defaultMessage="item"
+                                        />
+                                      ) : (
+                                        <FormattedMessage
+                                          id="items"
+                                          defaultMessage="items"
+                                        />
+                                      )}
+                                    </span>
+                                  ),
+                                }}
+                              />
+                              {this.state.brokenReferences > 0 && (
+                                <>
+                                  <br />
+                                  <FormattedMessage
+                                    id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    values={{
+                                      brokenReferences: (
+                                        <span>
+                                          {this.state.brokenReferences}
+                                        </span>
+                                      ),
+                                      variation: (
+                                        <span>
+                                          {this.state.brokenReferences === 1 ? (
+                                            <FormattedMessage
+                                              id="reference"
+                                              defaultMessage="reference"
+                                            />
+                                          ) : (
+                                            <FormattedMessage
+                                              id="references"
+                                              defaultMessage="references"
+                                            />
+                                          )}
+                                        </span>
+                                      ),
+                                    }}
+                                  />
+                                </>
                               )}
-                            </h3>
-                            <p>
-                              {this.props.intl.formatMessage(
-                                messages.linkIntegrityMessageBody,
+                            </>
+                          ) : (
+                            <>
+                              {this.state.brokenReferences > 0 && (
+                                <>
+                                  <FormattedMessage
+                                    id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    values={{
+                                      brokenReferences: (
+                                        <span>
+                                          {this.state.brokenReferences}
+                                        </span>
+                                      ),
+                                      variation: (
+                                        <span>
+                                          {this.state.brokenReferences === 1 ? (
+                                            <FormattedMessage
+                                              id="reference"
+                                              defaultMessage="reference"
+                                            />
+                                          ) : (
+                                            <FormattedMessage
+                                              id="references"
+                                              defaultMessage="references"
+                                            />
+                                          )}
+                                        </span>
+                                      ),
+                                    }}
+                                  />
+                                </>
                               )}
-                            </p>
-                            <ul className="content">
-                              {map(this.state.linkIntegrityBreakages, (item) =>
-                                item.breaches.length ? (
-                                  <li key={item['@id']}>
-                                    <a href={item['@id']}>{item.title}</a>
-                                    <p>
-                                      {this.props.intl.formatMessage(
-                                        messages.linkIntegrityMessageExtra,
+                            </>
+                          )
+                        ) : this.state.containedItemsToDelete > 0 ? (
+                          <>
+                            <FormattedMessage
+                              id="This item is also a folder. By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                              defaultMessage="This item is also a folder. By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                              values={{
+                                containedItemsToDelete: (
+                                  <span>
+                                    {this.state.containedItemsToDelete}
+                                  </span>
+                                ),
+                                variation: (
+                                  <span>
+                                    {this.state.containedItemsToDelete === 1 ? (
+                                      <FormattedMessage
+                                        id="item"
+                                        defaultMessage="item"
+                                      />
+                                    ) : (
+                                      <FormattedMessage
+                                        id="items"
+                                        defaultMessage="items"
+                                      />
+                                    )}
+                                  </span>
+                                ),
+                              }}
+                            />
+                            {this.state.brokenReferences > 0 && (
+                              <>
+                                <br />
+                                <FormattedMessage
+                                  id="Deleting this item breaks {brokenReferences} {variation}."
+                                  defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
+                                  values={{
+                                    brokenReferences: (
+                                      <span>{this.state.brokenReferences}</span>
+                                    ),
+                                    variation: (
+                                      <span>
+                                        {this.state.brokenReferences === 1 ? (
+                                          <FormattedMessage
+                                            id="reference"
+                                            defaultMessage="reference"
+                                          />
+                                        ) : (
+                                          <FormattedMessage
+                                            id="references"
+                                            defaultMessage="references"
+                                          />
+                                        )}
+                                      </span>
+                                    ),
+                                  }}
+                                />
+                                <div className="broken-links-list">
+                                  <FormattedMessage id="These items will have broken links" />
+                                  <ul>
+                                    {this.state.breaches.map((breach) => (
+                                      <li key={breach.source['@id']}>
+                                        <Link
+                                          to={flattenToAppURL(
+                                            breach.source['@id'],
+                                          )}
+                                          title="Navigate to this item"
+                                        >
+                                          {breach.source.title}
+                                        </Link>{' '}
+                                        refers to{' '}
+                                        {breach.targets
+                                          .map((target) => (
+                                            <Link
+                                              to={flattenToAppURL(
+                                                target['@id'],
+                                              )}
+                                              title="Navigate to this item"
+                                            >
+                                              {target.title}
+                                            </Link>
+                                          ))
+                                          .reduce((result, item) => (
+                                            <>
+                                              {result}, {item}
+                                            </>
+                                          ))}
+                                      </li>
+                                    ))}
+                                  </ul>
+                                  {this.state.linksAndReferencesViewLink && (
+                                    <Link
+                                      to={flattenToAppURL(
+                                        this.state.linksAndReferencesViewLink,
                                       )}
-                                    </p>
-                                    <ul className="content">
-                                      {map(item.breaches, (breach) => (
-                                        <li key={breach['@id']}>
-                                          <a href={breach['@id']}>
-                                            {breach.title}
-                                          </a>
-                                        </li>
+                                    >
+                                      <FormattedMessage
+                                        id="View links and references to this item"
+                                        defaultMessage="View links and references to this item"
+                                      />
+                                    </Link>
+                                  )}
+                                </div>
+                              </>
+                            )}
+                          </>
+                        ) : this.state.brokenReferences > 0 ? (
+                          <>
+                            <FormattedMessage
+                              id="Deleting this item breaks {brokenReferences} {variation}."
+                              defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
+                              values={{
+                                brokenReferences: (
+                                  <span>{this.state.brokenReferences}</span>
+                                ),
+                                variation: (
+                                  <span>
+                                    {this.state.brokenReferences === 1 ? (
+                                      <FormattedMessage
+                                        id="reference"
+                                        defaultMessage="reference"
+                                      />
+                                    ) : (
+                                      <FormattedMessage id="references" />
+                                    )}
+                                  </span>
+                                ),
+                              }}
+                            />
+                            <div className="broken-links-list">
+                              <FormattedMessage id="These items will have broken links" />
+                              <ul>
+                                {this.state.breaches.map((breach) => (
+                                  <li key={breach.source['@id']}>
+                                    <Link
+                                      to={flattenToAppURL(breach.source['@id'])}
+                                      title="Navigate to this item"
+                                    >
+                                      {breach.source.title}
+                                    </Link>{' '}
+                                    refers to{' '}
+                                    {breach.targets
+                                      .map((target) => (
+                                        <Link
+                                          to={flattenToAppURL(target['@id'])}
+                                          title="Navigate to this item"
+                                        >
+                                          {target.title}
+                                        </Link>
+                                      ))
+                                      .reduce((result, item) => (
+                                        <>
+                                          {result}, {item}
+                                        </>
                                       ))}
-                                    </ul>
                                   </li>
-                                ) : null,
+                                ))}
+                              </ul>
+                              {this.state.linksAndReferencesViewLink && (
+                                <Link
+                                  to={flattenToAppURL(
+                                    this.state.linksAndReferencesViewLink,
+                                  )}
+                                >
+                                  <FormattedMessage
+                                    id="View links and references to this item"
+                                    defaultMessage="View links and references to this item"
+                                  />
+                                </Link>
                               )}
-                            </ul>
-                          </div>
-                        ) : (
-                          <div></div>
-                        )}
+                            </div>
+                          </>
+                        ) : null}
                       </div>
                     }
                     onCancel={this.onDeleteCancel}
@@ -2079,7 +2289,7 @@ export default compose(
   asyncConnect([
     {
       key: 'actions',
-      // Dispatch async/await to make the operation syncronous, otherwise it returns
+      // Dispatch async/await to make the operation synchronous, otherwise it returns
       // before the promise is resolved
       promise: async ({ location, store: { dispatch } }) =>
         await dispatch(listActions(getBaseUrl(location.pathname))),

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

@@ -0,0 +1,185 @@
+/**
+ * LinksToItem component
+ * @module components/manage/LinksToItem/LinksToItem
+ */
+import { useEffect } from 'react';
+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';
+
+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,
+  );
+
+  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>
+              </>
+            }
+          />
+        </Portal>
+      )}
+    </Container>
+  );
+};
+
+export default LinksToItem;