@plone/volto 18.0.0-alpha.0 → 18.0.0-alpha.1

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

@@ -411,7 +411,8 @@ class Contents extends Component {
       showWorkflow: false,
       itemsToDelete: [],
       containedItemsToDelete: [],
-      brokenReferences: [],
+      brokenReferences: 0,
+      breaches: [],
       showAllItemsToDelete: true,
       items: this.props.items,
       filter: '',
@@ -450,20 +451,37 @@ class Contents extends Component {
       const linkintegrityInfo = await this.props.linkIntegrityCheck(
         map(this.state.itemsToDelete, (item) => this.getFieldById(item, 'UID')),
       );
-      let containedItems = 0;
-      let brokenReferencesCount = 0;
+      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());
 
-      linkintegrityInfo.forEach((item) => {
-        containedItems += item.items_total ?? 0;
-        brokenReferencesCount += item.breaches.length;
-      });
       this.setState({
         containedItemsToDelete: containedItems,
-        brokenReferences: brokenReferencesCount,
-        brokenLinksList:
-          linkintegrityInfo.length === 1
-            ? linkintegrityInfo[0]['@id'] + '/links-to-item'
-            : null,
+        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,
       });
@@ -1188,7 +1206,11 @@ class Contents extends Component {
                 <article id="content">
                   <Confirm
                     open={this.state.showDelete}
-                    confirmButton="Delete"
+                    confirmButton={
+                      this.state.brokenReferences === 0
+                        ? 'Delete'
+                        : 'Delete item and break links'
+                    }
                     header={
                       this.state.itemsToDelete.length === 1
                         ? this.props.intl.formatMessage(
@@ -1200,114 +1222,14 @@ class Contents extends Component {
                     }
                     content={
                       <div className="content">
-                        <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 ? (
+                        {this.state.itemsToDelete.length > 1 ? (
+                          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."
+                                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>
@@ -1336,8 +1258,41 @@ class Contents extends Component {
                                 <>
                                   <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."
+                                    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>
@@ -1361,62 +1316,183 @@ class Contents extends Component {
                                       ),
                                     }}
                                   />
-                                  <div className="broken-links-list-link-wrapper">
+                                </>
+                              )}
+                            </>
+                          )
+                        ) : 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.brokenLinksList,
+                                        this.state.linksAndReferencesViewLink,
                                       )}
                                     >
                                       <FormattedMessage
-                                        id="View broken links list"
-                                        defaultMessage="View broken links list"
+                                        id="View links and references to this item"
+                                        defaultMessage="View links and references to this item"
                                       />
                                     </Link>
-                                  </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">
+                                  )}
+                                </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}
+                                        </>
+                                      ))}
+                                  </li>
+                                ))}
+                              </ul>
+                              {this.state.linksAndReferencesViewLink && (
                                 <Link
                                   to={flattenToAppURL(
-                                    this.state.brokenLinksList,
+                                    this.state.linksAndReferencesViewLink,
                                   )}
                                 >
                                   <FormattedMessage
-                                    id="View broken links list"
-                                    defaultMessage="View broken links list"
+                                    id="View links and references to this item"
+                                    defaultMessage="View links and references to this item"
                                   />
                                 </Link>
-                              </div>
-                            </>
-                          ) : null}
-                        </p>
+                              )}
+                            </div>
+                          </>
+                        ) : null}
                       </div>
                     }
                     onCancel={this.onDeleteCancel}
@@ -2219,7 +2295,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/Controlpanels/Controlpanels.jsx

@@ -3,18 +3,18 @@
  * @module components/manage/Controlpanels/Controlpanels
  */
 
+import { Helmet, asyncConnect } from '@plone/volto/helpers';
+import { concat, filter, last, map, sortBy, uniqBy } from 'lodash';
 import PropTypes from 'prop-types';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { concat, filter, last, map, uniqBy } from 'lodash';
-import { Portal } from 'react-portal';
-import { asyncConnect, Helmet } from '@plone/volto/helpers';
+import { compose } from 'redux';
 import { Container, Grid, Header, Message, Segment } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { listControlpanels, getSystemInformation } from '@plone/volto/actions';
+import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
 import { Error, Icon, Toolbar, VersionOverview } from '@plone/volto/components';
 
 import config from '@plone/volto/registry';
@@ -221,7 +221,10 @@ function Controlpanels({
               <Grid doubling columns={6}>
                 <Grid.Row>
                   {map(
-                    filter(filteredControlPanels, { group }),
+                    sortBy(
+                      filter(filteredControlPanels, { group }),
+                      (controlpanel) => controlpanel.title,
+                    ),
                     (controlpanel) => (
                       <Grid.Column key={controlpanel.id}>
                         <Link to={`/controlpanel/${controlpanel.id}`}>

package/src/components/manage/TextLineEdit/TextLineEdit.jsx

@@ -174,7 +174,7 @@ export const TextLineEdit = (props) => {
     return <div />;
   }
   return (
-    <Slate editor={editor} onChange={handleChange} value={initialValue}>
+    <Slate editor={editor} onChange={handleChange} initialValue={initialValue}>
       <Editable
         readOnly={!editable}
         onKeyDown={handleKeyDown}

package/theme/themes/pastanaga/extras/blocks.less

@@ -42,6 +42,15 @@
   border-color: rgba(120, 192, 215, 0.75);
 }
 
+.block-editor-title,
+.block-editor-slate,
+.block-editor-slateTable,
+.slate-editor.selected {
+  :focus-visible {
+    outline: none;
+  }
+}
+
 .block .block:hover::before {
   border-color: rgba(120, 192, 215, 0.375);
 }

package/theme/themes/pastanaga/extras/contents.less

@@ -193,7 +193,7 @@
     word-break: break-all;
   }
 
-  .broken-links-list-link-wrapper {
+  .broken-links-list {
     margin-top: 30px;
   }
 }

package/news/4947.breaking

@@ -1 +0,0 @@
-Experimental feature flag for new add block button enabled by default. @sneridagh

package/news/4949.breaking

@@ -1 +0,0 @@
-Moved add-on registry to its own package. @sneridagh

package/news/5294.breaking

@@ -1 +0,0 @@
-Sidebar formtabs item links are now real buttons with `ui button` class for proper keyboard and screen reader support @ichim-david

package/news/5298 bugfix

@@ -1 +0,0 @@
-fix the search block for search via url - @ionlizarazu

package/news/5363.documentation

@@ -1 +0,0 @@
-Updated branch policy. @sneridagh

package/news/5364.bugfix

@@ -1 +0,0 @@
-Add build process to registry package and fixes @sneridagh

package/news/5367.internal

@@ -1 +0,0 @@
-Unused files in root cleanup @sneridagh

package/news/5368.bugfix

@@ -1 +0,0 @@
-Fixed import in Storybook configuration, related to the recent registry change. @sneridagh

package/news/5370.documentation

@@ -1 +0,0 @@
-Remove "legacy" term, now that we use "no longer supported". @stevepiercy

package/news/5371.documentation

@@ -1 +0,0 @@
-Reduce the severity level of `Microsoft.Contractions` and `Microsoft.Units` from `error` to `suggestion` when running `make docs-vale` in preparation for requiring Vale passing without errors. @stevepiercy

package/news/5372.documentation

@@ -1 +0,0 @@
-Improved wording in branching policy. @sneridagh

package/news/5373.bugfix

@@ -1 +0,0 @@
-Improve importing from the new registry from Volto code itself @sneridagh