@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -10,6 +10,8 @@ import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 import { Confirm, Dimmer, Loader, Table } from 'semantic-ui-react';
 
+const MAX_LINK_INTEGRITY_BREACHES_TO_SHOW = 5;
+
 const messages = defineMessages({
   deleteConfirmSingleItem: {
     id: 'Delete this item?',
@@ -39,22 +41,168 @@ const messages = defineMessages({
     id: 'Cancel',
     defaultMessage: 'Cancel',
   },
+  item: {
+    id: 'item',
+    defaultMessage: 'item',
+  },
+  items: {
+    id: 'items',
+    defaultMessage: 'items',
+  },
+  reference: {
+    id: 'reference',
+    defaultMessage: 'reference',
+  },
+  references: {
+    id: 'references',
+    defaultMessage: 'references',
+  },
+  folderDeletionSingle: {
+    id: 'This item contains subitems. Deleting it will also delete its {containedItemsToDelete} {variation} inside.',
+    defaultMessage:
+      'This item contains subitems. Deleting it will also delete its {containedItemsToDelete} {variation} inside.',
+  },
+  folderDeletionMultiple: {
+    id: 'Some items contain subitems. Deleting them will also delete their {containedItemsToDelete} {variation} inside.',
+    defaultMessage:
+      'Some items contain subitems. Deleting them will also delete their {containedItemsToDelete} {variation} inside.',
+  },
+  deleteAllItemsPaginated: {
+    id: 'You are about to delete all items in the current pagination of this folder.',
+    defaultMessage:
+      'You are about to delete all items in the current pagination of this folder.',
+  },
+  deleteAllItems: {
+    id: 'You are about to delete all items and all its subitems.',
+    defaultMessage: 'You are about to delete all items and all its subitems.',
+  },
+  brokenReferencesMultiple: {
+    id: 'Some items are referenced by other contents. Deleting them will break {brokenReferences} {variation}.',
+    defaultMessage:
+      'Some items are referenced by other contents. Deleting them will break {brokenReferences} {variation}.',
+  },
+  brokenReferencesSingle: {
+    id: 'Deleting this item will break {brokenReferences} {variation}.',
+    defaultMessage:
+      'Deleting this item will break {brokenReferences} {variation}.',
+  },
 });
 
+const safeUrl = (url) => {
+  if (!url) return '#';
+  return typeof url === 'string' ? flattenToAppURL(url) : '#';
+};
+
+const DeleteItemsList = ({ itemsToDelete, titlesToDelete }) => (
+  <ul>
+    {itemsToDelete.map((id) => (
+      <li key={id}>
+        <Link to={safeUrl(id)} target="_blank">
+          {titlesToDelete[id] || id}
+        </Link>
+      </li>
+    ))}
+  </ul>
+);
+
+const VariationMessage = ({ count, singularId, pluralId }) => (
+  <span>
+    {count === 1 ? (
+      <FormattedMessage {...messages[singularId]} />
+    ) : (
+      <FormattedMessage {...messages[pluralId]} />
+    )}
+  </span>
+);
+
+const DeleteAllMessage = ({ hasMultiplePages }) => (
+  <p>
+    <FormattedMessage
+      {...messages[
+        hasMultiplePages ? 'deleteAllItemsPaginated' : 'deleteAllItems'
+      ]}
+    />
+  </p>
+);
+
+const DeleteMessage = ({
+  isMultiple,
+  containedItemsToDelete,
+  brokenReferences,
+  breaches,
+  itemsToDelete,
+  linksAndReferencesViewLink,
+}) => {
+  const intl = useIntl();
+  const showFolderMessage = containedItemsToDelete > 0;
+  const showBreachesMessage = brokenReferences > 0;
+
+  return (
+    <>
+      {showFolderMessage && (
+        <p>
+          <FormattedMessage
+            {...messages[
+              isMultiple ? 'folderDeletionMultiple' : 'folderDeletionSingle'
+            ]}
+            values={{
+              containedItemsToDelete: <span>{containedItemsToDelete}</span>,
+              variation: (
+                <VariationMessage
+                  count={containedItemsToDelete}
+                  singularId="item"
+                  pluralId="items"
+                />
+              ),
+            }}
+          />
+        </p>
+      )}
+      {showBreachesMessage && (
+        <BrokenLinksList
+          intl={intl}
+          breaches={breaches}
+          brokenReferences={brokenReferences}
+          isMultiple={isMultiple}
+          itemsToDelete={itemsToDelete}
+          linksAndReferencesViewLink={!isMultiple && linksAndReferencesViewLink}
+        />
+      )}
+    </>
+  );
+};
+
 const ContentsDeleteModal = (props) => {
-  const { itemsToDelete = [], open, onCancel, onOk, items } = props;
+  const {
+    itemsToDelete = [],
+    open,
+    onCancel,
+    onOk,
+    items,
+    hasMultiplePages,
+  } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
   const linkintegrityInfo = useSelector((state) => state.linkIntegrity?.result);
   const loading = useSelector((state) => state.linkIntegrity?.loading);
 
   const [brokenReferences, setBrokenReferences] = useState(0);
-  const [containedItemsToDelete, setContainedItemsToDelete] = useState([]);
+  const [containedItemsToDelete, setContainedItemsToDelete] = useState(0);
   const [breaches, setBreaches] = useState([]);
 
   const [linksAndReferencesViewLink, setLinkAndReferencesViewLink] =
     useState(null);
 
+  const titlesToDelete = useMemo(
+    () =>
+      itemsToDelete.reduce((acc, id) => {
+        const item = items.find((item) => item['@id'] === id);
+        acc[id] = item ? item.Title : null;
+        return acc;
+      }, {}),
+    [itemsToDelete, items],
+  );
+
   useEffect(() => {
     const getFieldById = (id, field) => {
       const item = find(items, { '@id': id });
@@ -72,20 +220,34 @@ const ContentsDeleteModal = (props) => {
 
   useEffect(() => {
     if (linkintegrityInfo) {
-      const containedItems = linkintegrityInfo
+      // Always set the total number of contained items, regardless of breaches
+      const totalContainedItems = linkintegrityInfo
         .map((result) => result.items_total ?? 0)
         .reduce((acc, value) => acc + value, 0);
+      setContainedItemsToDelete(totalContainedItems); // <-- always set
       const breaches = linkintegrityInfo.flatMap((result) =>
         result.breaches.map((source) => ({
           source: source,
           target: result,
         })),
       );
-      const source_by_uid = breaches.reduce(
+      // Filter out breaches where breach.source is to be deleted
+      const filteredBreaches = breaches.filter(
+        (breach) =>
+          !itemsToDelete.some((item) => breach.source['@id'].endsWith(item)),
+      );
+      // If no breaches are found, return early
+      if (filteredBreaches.length === 0) {
+        setBrokenReferences(0);
+        setLinkAndReferencesViewLink(null);
+        setBreaches([]);
+        return;
+      }
+      const source_by_uid = filteredBreaches.reduce(
         (acc, value) => acc.set(value.source.uid, value.source),
         new Map(),
       );
-      const by_source = breaches.reduce((acc, value) => {
+      const by_source = filteredBreaches.reduce((acc, value) => {
         if (acc.get(value.source.uid) === undefined) {
           acc.set(value.source.uid, new Set());
         }
@@ -93,7 +255,6 @@ const ContentsDeleteModal = (props) => {
         return acc;
       }, new Map());
 
-      setContainedItemsToDelete(containedItems);
       setBrokenReferences(by_source.size);
       setLinkAndReferencesViewLink(
         linkintegrityInfo.length
@@ -107,12 +268,12 @@ const ContentsDeleteModal = (props) => {
         })),
       );
     } else {
-      setContainedItemsToDelete([]);
+      setContainedItemsToDelete(0);
       setBrokenReferences(0);
       setLinkAndReferencesViewLink(null);
       setBreaches([]);
     }
-  }, [linkintegrityInfo]);
+  }, [itemsToDelete, linkintegrityInfo]);
 
   return (
     open && (
@@ -137,172 +298,24 @@ const ContentsDeleteModal = (props) => {
               </Loader>
             </Dimmer>
 
-            {itemsToDelete.length > 1 ? (
-              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>{containedItemsToDelete}</span>
-                      ),
-                      variation: (
-                        <span>
-                          {containedItemsToDelete === 1 ? (
-                            <FormattedMessage id="item" defaultMessage="item" />
-                          ) : (
-                            <FormattedMessage
-                              id="items"
-                              defaultMessage="items"
-                            />
-                          )}
-                        </span>
-                      ),
-                    }}
-                  />
-                  {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>{brokenReferences}</span>,
-                          variation: (
-                            <span>
-                              {brokenReferences === 1 ? (
-                                <FormattedMessage
-                                  id="reference"
-                                  defaultMessage="reference"
-                                />
-                              ) : (
-                                <FormattedMessage
-                                  id="references"
-                                  defaultMessage="references"
-                                />
-                              )}
-                            </span>
-                          ),
-                        }}
-                      />
-                    </>
-                  )}
-                </>
-              ) : (
-                <>
-                  {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>{brokenReferences}</span>,
-                          variation: (
-                            <span>
-                              {brokenReferences === 1 ? (
-                                <FormattedMessage
-                                  id="reference"
-                                  defaultMessage="reference"
-                                />
-                              ) : (
-                                <FormattedMessage
-                                  id="references"
-                                  defaultMessage="references"
-                                />
-                              )}
-                            </span>
-                          ),
-                        }}
-                      />
-                    </>
-                  )}
-                </>
-              )
-            ) : 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>{containedItemsToDelete}</span>
-                    ),
-                    variation: (
-                      <span>
-                        {containedItemsToDelete === 1 ? (
-                          <FormattedMessage id="item" defaultMessage="item" />
-                        ) : (
-                          <FormattedMessage id="items" defaultMessage="items" />
-                        )}
-                      </span>
-                    ),
-                  }}
-                />
-                {brokenReferences > 0 && (
-                  <>
-                    <br />
-                    <FormattedMessage
-                      id="Deleting this item breaks {brokenReferences} {variation}."
-                      defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
-                      values={{
-                        brokenReferences: <span>{brokenReferences}</span>,
-                        variation: (
-                          <span>
-                            {brokenReferences === 1 ? (
-                              <FormattedMessage
-                                id="reference"
-                                defaultMessage="reference"
-                              />
-                            ) : (
-                              <FormattedMessage
-                                id="references"
-                                defaultMessage="references"
-                              />
-                            )}
-                          </span>
-                        ),
-                      }}
-                    />
-                    <BrokenLinksList
-                      intl={intl}
-                      breaches={breaches}
-                      linksAndReferencesViewLink={linksAndReferencesViewLink}
-                    />
-                  </>
-                )}
-              </>
-            ) : brokenReferences > 0 ? (
-              <>
-                <FormattedMessage
-                  id="Deleting this item breaks {brokenReferences} {variation}."
-                  defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
-                  values={{
-                    brokenReferences: <span>{brokenReferences}</span>,
-                    variation: (
-                      <span>
-                        {brokenReferences === 1 ? (
-                          <FormattedMessage
-                            id="reference"
-                            defaultMessage="reference"
-                          />
-                        ) : (
-                          <FormattedMessage
-                            id="references"
-                            defaultMessage="references"
-                          />
-                        )}
-                      </span>
-                    ),
-                  }}
-                />
-                <BrokenLinksList
-                  intl={intl}
-                  breaches={breaches}
-                  linksAndReferencesViewLink={linksAndReferencesViewLink}
-                />
-              </>
-            ) : null}
+            {itemsToDelete.length > 1 &&
+            items.length === itemsToDelete.length ? (
+              <DeleteAllMessage hasMultiplePages={hasMultiplePages} />
+            ) : (
+              <DeleteItemsList
+                itemsToDelete={itemsToDelete}
+                titlesToDelete={titlesToDelete}
+              />
+            )}
+
+            <DeleteMessage
+              isMultiple={itemsToDelete.length > 1}
+              containedItemsToDelete={containedItemsToDelete}
+              brokenReferences={brokenReferences}
+              breaches={breaches}
+              itemsToDelete={itemsToDelete}
+              linksAndReferencesViewLink={linksAndReferencesViewLink}
+            />
           </div>
         }
         onCancel={onCancel}
@@ -313,47 +326,86 @@ const ContentsDeleteModal = (props) => {
   );
 };
 
-const BrokenLinksList = ({ intl, breaches, linksAndReferencesViewLink }) => {
+const BrokenLinksList = ({
+  intl,
+  breaches,
+  brokenReferences,
+  isMultiple,
+  itemsToDelete,
+  linksAndReferencesViewLink,
+}) => {
   return (
     <div className="broken-links-list">
+      <FormattedMessage
+        {...messages[
+          isMultiple ? 'brokenReferencesMultiple' : 'brokenReferencesSingle'
+        ]}
+        values={{
+          brokenReferences: <span>{brokenReferences}</span>,
+          variation: (
+            <VariationMessage
+              count={brokenReferences}
+              singularId="reference"
+              pluralId="references"
+            />
+          ),
+        }}
+      />
+      <br />
       <FormattedMessage
         id="These items will have broken links"
         defaultMessage="These items will have broken links"
       />
-      :
       <Table compact>
         <Table.Body>
-          {breaches.map((breach) => (
-            <Table.Row key={breach.source['@id']} verticalAlign="top">
-              <Table.Cell>
-                <Link
-                  to={flattenToAppURL(breach.source['@id'])}
-                  title={intl.formatMessage(messages.navigate_to_this_item)}
-                >
-                  {breach.source.title}
-                </Link>
-              </Table.Cell>
-              <Table.Cell style={{ minWidth: '140px' }}>
-                <FormattedMessage id="refers to" defaultMessage="refers to" />:
-              </Table.Cell>
-              <Table.Cell>
-                <ul style={{ margin: 0 }}>
-                  {breach.targets.map((target) => (
-                    <li key={target['@id']}>
-                      <Link
-                        to={flattenToAppURL(target['@id'])}
-                        title={intl.formatMessage(
-                          messages.navigate_to_this_item,
-                        )}
-                      >
-                        {target.title}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
+          {breaches
+            .slice(0, MAX_LINK_INTEGRITY_BREACHES_TO_SHOW)
+            .map((breach) => (
+              <Table.Row key={breach.source['@id']} verticalAlign="top">
+                <Table.Cell>
+                  <Link
+                    to={flattenToAppURL(breach.source['@id'])}
+                    title={intl.formatMessage(messages.navigate_to_this_item)}
+                  >
+                    {breach.source.title}
+                  </Link>
+                </Table.Cell>
+                <Table.Cell style={{ minWidth: '140px' }}>
+                  <FormattedMessage id="refers to" defaultMessage="refers to" />
+                  :
+                </Table.Cell>
+                <Table.Cell>
+                  <ul style={{ margin: 0 }}>
+                    {breach.targets.map((target) => (
+                      <li key={target['@id']}>
+                        <Link
+                          to={flattenToAppURL(target['@id'])}
+                          title={intl.formatMessage(
+                            messages.navigate_to_this_item,
+                          )}
+                        >
+                          {target.title}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          {breaches.length > MAX_LINK_INTEGRITY_BREACHES_TO_SHOW && (
+            <Table.Row>
+              <Table.Cell colSpan="3">
+                <FormattedMessage
+                  id="and {count} more…"
+                  defaultMessage="and {count} more…"
+                  values={{
+                    count:
+                      breaches.length - MAX_LINK_INTEGRITY_BREACHES_TO_SHOW,
+                  }}
+                />
               </Table.Cell>
             </Table.Row>
-          ))}
+          )}
         </Table.Body>
       </Table>
       {linksAndReferencesViewLink && (

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

@@ -36,11 +36,11 @@ Default.args = {
   locale: 'en',
   open: true,
   items: [
-    { '@id': '/news', UID: '123', title: 'News' },
-    { '@id': '/blog', UID: '456', title: 'Blog' },
-    { '@id': '/extra', UID: '789', title: 'Extra' },
+    { '@id': '/news', UID: '123', Title: 'News' },
+    { '@id': '/blog', UID: '456', Title: 'Blog' },
+    { '@id': '/extra', UID: '789', Title: 'Extra' },
   ],
-  itemsToDelete: [{ UID: '456' }],
+  itemsToDelete: ['/blog'],
   linkIntegrityResult: [
     {
       '@id': '/blog',
@@ -57,7 +57,7 @@ Default.args = {
 export const DeleteMoreThanOne = StoryComponent.bind({});
 DeleteMoreThanOne.args = {
   ...Default.args,
-  itemsToDelete: [{ UID: '456' }, { UID: '789' }],
+  itemsToDelete: ['/blog', '/extra'],
 };
 
 export const NoContainedItems = StoryComponent.bind({});
@@ -76,7 +76,7 @@ NoContainedItems.args = {
 export const MultipleLinkIntegrityResults = StoryComponent.bind({});
 MultipleLinkIntegrityResults.args = {
   ...Default.args,
-  itemsToDelete: [{ UID: '456' }, { UID: '789' }],
+  itemsToDelete: ['/blog', '/extra'],
   linkIntegrityResult: [
     {
       '@id': '/blog',
@@ -96,7 +96,7 @@ MultipleLinkIntegrityResults.args = {
 export const MultipleBreaches = StoryComponent.bind({});
 MultipleBreaches.args = {
   ...Default.args,
-  itemsToDelete: [{ UID: '789' }],
+  itemsToDelete: ['/extra'],
   linkIntegrityResult: [
     {
       '@id': '/extra',
@@ -128,7 +128,25 @@ export default {
   ],
   argTypes: {
     locale: {
-      options: ['en', 'fr', 'de', 'it', 'eu'],
+      options: [
+        'ca',
+        'de',
+        'en',
+        'es',
+        'eu',
+        'fi',
+        'fr',
+        'hi',
+        'it',
+        'ja',
+        'nl',
+        'pt',
+        'pt-BR',
+        'ro',
+        'ru',
+        'sv',
+        'zh-CN',
+      ],
       control: {
         type: 'radio',
       },

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

@@ -55,7 +55,7 @@ const messages = defineMessages({
     defaultMessage: 'No workflow state',
   },
   none: {
-    id: 'None',
+    id: 'Not available',
     defaultMessage: 'None',
   },
 });
@@ -168,7 +168,7 @@ export const ContentsItemComponent = ({
             {item.ExpirationDate !== 'None' &&
               new Date(item.ExpirationDate).getTime() <
                 new Date().getTime() && (
-                <Button className="button-margin" size="mini">
+                <Button className="button-margin expired-past" size="mini">
                   <FormattedMessage id="Expired" defaultMessage="Expired" />
                 </Button>
               )}
@@ -178,6 +178,14 @@ export const ContentsItemComponent = ({
                   <FormattedMessage id="Scheduled" defaultMessage="Scheduled" />
                 </Button>
               )}
+            {item.is_working_copy && (
+              <Button className="button-margin working-copy" size="mini">
+                <FormattedMessage
+                  id="Working copy"
+                  defaultMessage="Working copy"
+                />
+              </Button>
+            )}
           </Link>
         </Table.Cell>
         {map(indexes, (index) => (

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

@@ -7,11 +7,7 @@ import ContentsPropertiesModal from './ContentsPropertiesModal';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsPropertiesModal', () => {
   it('renders a contents properties modal component', () => {

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

@@ -7,11 +7,7 @@ import ContentsRenameModal from './ContentsRenameModal';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('ContentsRenameModal', () => {
   it('renders a contents rename modal component', () => {