@plone/volto 17.0.0-alpha.8 → 17.0.0

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

@@ -12,7 +12,7 @@ import { Link } from 'react-router-dom';
 import {
   Button,
   Confirm,
-  Container,
+  Container as SemanticContainer,
   Divider,
   Dropdown,
   Menu,
@@ -35,6 +35,7 @@ import {
 import move from 'lodash-move';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { asyncConnect } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 import {
   searchContent,
@@ -70,6 +71,7 @@ import {
 
 import { Helmet, getBaseUrl } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
 import cutSVG from '@plone/volto/icons/cut.svg';
@@ -117,9 +119,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.',
@@ -269,35 +275,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:',
-  },
 });
 
 /**
@@ -433,6 +410,8 @@ class Contents extends Component {
       showProperties: false,
       showWorkflow: false,
       itemsToDelete: [],
+      containedItemsToDelete: [],
+      brokenReferences: [],
       showAllItemsToDelete: true,
       items: this.props.items,
       filter: '',
@@ -449,7 +428,7 @@ class Contents extends Component {
       sort_on: this.props.sort?.on || 'getObjPositionInParent',
       sort_order: this.props.sort?.order || 'ascending',
       isClient: false,
-      linkIntegrityBreakages: '',
+      linkIntegrityBreakages: [],
     };
     this.filterTimeout = null;
   }
@@ -468,12 +447,23 @@ 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')),
+      );
+      let containedItems = 0;
+      let brokenReferencesCount = 0;
+
+      linkintegrityInfo.forEach((item) => {
+        containedItems += item.items_total ?? 0;
+        brokenReferencesCount += item.breaches.length;
+      });
       this.setState({
-        linkIntegrityBreakages: await this.props.linkIntegrityCheck(
-          map(this.state.itemsToDelete, (item) =>
-            this.getFieldById(item, 'UID'),
-          ),
-        ),
+        containedItemsToDelete: containedItems,
+        brokenReferences: brokenReferencesCount,
+        brokenLinksList:
+          linkintegrityInfo.length === 1
+            ? linkintegrityInfo[0]['@id'] + '/links-to-item'
+            : null,
         showAllItemsToDelete:
           this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
       });
@@ -1177,6 +1167,9 @@ class Contents extends Component {
       (this.props.orderRequest?.loading && !this.props.orderRequest?.error) ||
       (this.props.searchRequest?.loading && !this.props.searchRequest?.error);
 
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return this.props.token && this.props.objectActions?.length > 0 ? (
       <>
         {folderContentsAction ? (
@@ -1196,82 +1189,234 @@ class Contents extends Component {
                   <Confirm
                     open={this.state.showDelete}
                     confirmButton="Delete"
-                    header={this.props.intl.formatMessage(
-                      messages.deleteConfirm,
-                    )}
+                    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.length > 0 ? (
-                          <div>
-                            <h3>
-                              {this.props.intl.formatMessage(
-                                messages.linkIntegrityMessageHeader,
-                              )}
-                            </h3>
-                            <p>
-                              {this.props.intl.formatMessage(
-                                messages.linkIntegrityMessageBody,
-                              )}
-                            </p>
-                            <ul className="content">
-                              {map(
-                                this.state.linkIntegrityBreakages,
-                                (item) => (
-                                  <li key={item['@id']}>
-                                    <a href={item['@id']}>{item.title}</a>
-                                    <p>
-                                      {this.props.intl.formatMessage(
-                                        messages.linkIntegrityMessageExtra,
+                        <p>
+                          {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>
+                                        ),
+                                      }}
+                                    />
+                                  </>
+                                )}
+                              </>
+                            ) : (
+                              <>
+                                {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>
+                                        ),
+                                      }}
+                                    />
+                                  </>
+                                )}
+                              </>
+                            )
+                          ) : 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"
+                                        />
                                       )}
-                                    </p>
-                                    <ul className="content">
-                                      {map(item.breaches, (breach) => (
-                                        <li key={breach['@id']}>
-                                          <a href={breach['@id']}>
-                                            {breach.title}
-                                          </a>
-                                        </li>
-                                      ))}
-                                    </ul>
-                                  </li>
-                                ),
+                                    </span>
+                                  ),
+                                }}
+                              />
+                              {this.state.brokenReferences > 0 && (
+                                <>
+                                  <br />
+                                  <FormattedMessage
+                                    id="This item is referenced by other items. By deleting it {brokenReferences} {variation} will be broken."
+                                    defaultMessage="This item is referenced by other items. By deleting it {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>
+                                      ),
+                                    }}
+                                  />
+                                  <div className="broken-links-list-link-wrapper">
+                                    <Link
+                                      to={flattenToAppURL(
+                                        this.state.brokenLinksList,
+                                      )}
+                                    >
+                                      <FormattedMessage
+                                        id="View broken links list"
+                                        defaultMessage="View broken links list"
+                                      />
+                                    </Link>
+                                  </div>
+                                </>
                               )}
-                            </ul>
-                          </div>
-                        ) : (
-                          <div></div>
-                        )}
+                            </>
+                          ) : this.state.brokenReferences > 0 ? (
+                            <>
+                              <FormattedMessage
+                                id="This item is referenced by other items. By deleting it {brokenReferences} {variation} will be broken."
+                                defaultMessage="This item is referenced by other items. By deleting it {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>
+                                  ),
+                                }}
+                              />
+                              <div className="broken-links-list-link-wrapper">
+                                <Link
+                                  to={flattenToAppURL(
+                                    this.state.brokenLinksList,
+                                  )}
+                                >
+                                  <FormattedMessage
+                                    id="View broken links list"
+                                    defaultMessage="View broken links list"
+                                  />
+                                </Link>
+                              </div>
+                            </>
+                          ) : null}
+                        </p>
                       </div>
                     }
                     onCancel={this.onDeleteCancel}
@@ -1328,6 +1473,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.upload}
                                 className="upload"
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.upload,
+                                )}
                               >
                                 <Icon
                                   name={uploadSVG}
@@ -1352,6 +1500,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.rename}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.rename,
+                                )}
                               >
                                 <Icon
                                   name={renameSVG}
@@ -1374,6 +1525,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.workflow}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.state,
+                                )}
                               >
                                 <Icon
                                   name={semaphoreSVG}
@@ -1396,6 +1550,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.tags}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.tags,
+                                )}
                               >
                                 <Icon
                                   name={tagSVG}
@@ -1419,6 +1576,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.properties}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.properties,
+                                )}
                               >
                                 <Icon
                                   name={propertiesSVG}
@@ -1443,6 +1603,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.cut}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.cut,
+                                )}
                               >
                                 <Icon
                                   name={cutSVG}
@@ -1465,6 +1628,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.copy}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.copy,
+                                )}
                               >
                                 <Icon
                                   name={copySVG}
@@ -1488,6 +1654,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.paste}
                                 disabled={!this.props.action}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.paste,
+                                )}
                               >
                                 <Icon
                                   name={pasteSVG}
@@ -1511,6 +1680,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.delete}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.delete,
+                                )}
                               >
                                 <Icon
                                   name={deleteSVG}
@@ -1623,9 +1795,8 @@ class Contents extends Component {
                                       {this.props.intl.formatMessage({
                                         id: this.state.index.values[index]
                                           .label,
-                                        defaultMessage: this.state.index.values[
-                                          index
-                                        ].label,
+                                        defaultMessage:
+                                          this.state.index.values[index].label,
                                       })}
                                     </span>
                                   </Dropdown.Item>