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

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

@@ -8,11 +8,7 @@ import { __test__ as Contents } from './Contents';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 
 beforeAll(async () => {
   const { __setLoadables } = await import(
@@ -105,6 +101,13 @@ describe('Contents', () => {
           Type: 'Type',
         },
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'Plone Site',
+          },
+        },
+      },
     });
     const { container } = render(
       <Provider store={store}>

package/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx

@@ -3,14 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import ContentsBreadcrumbs from './ContentsBreadcrumbs';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('ContentsBreadcrumbs Multilingual', () => {
@@ -24,6 +19,15 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'LRF',
+            '@id': '/en',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -49,6 +53,15 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'LRF',
+            '@id': '/en',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
+import { useSelector } from 'react-redux';
 import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem';
 import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem';
 
-import config from '@plone/volto/registry';
-
 const messages = defineMessages({
   home: {
     id: 'Home',
@@ -20,15 +18,22 @@ const messages = defineMessages({
 });
 
 const ContentsBreadcrumbs = (props) => {
-  const { settings } = config;
   const { items } = props;
   const intl = useIntl();
-  const pathname = useLocation().pathname;
-  const lang = pathname.split('/')[1];
+  const navroot = useSelector((state) => state.navroot.data.navroot);
+  const navrootIsPortal = navroot?.['@type'] === 'Plone Site';
 
   return (
     <Breadcrumb>
-      {settings.isMultilingual && (
+      {navrootIsPortal ? (
+        <Link
+          to="/contents"
+          className="section"
+          title={intl.formatMessage(messages.home)}
+        >
+          <ContentsBreadcrumbsHomeItem />
+        </Link>
+      ) : (
         <>
           <Link
             to="/contents"
@@ -38,26 +43,15 @@ const ContentsBreadcrumbs = (props) => {
             <ContentsBreadcrumbsRootItem />
           </Link>
           <Breadcrumb.Divider />
+          <Link
+            to={`${navroot?.['@id']}/contents`}
+            className="section"
+            title={navroot?.title}
+          >
+            {navroot?.title}
+          </Link>
         </>
       )}
-      {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
-        <Link
-          to={`/${lang}/contents`}
-          className="section"
-          title={intl.formatMessage(messages.home)}
-        >
-          {langmap?.[lang]?.nativeName ?? lang}
-        </Link>
-      )}
-      {!settings.isMultilingual && (
-        <Link
-          to="/contents"
-          className="section"
-          title={intl.formatMessage(messages.home)}
-        >
-          <ContentsBreadcrumbsHomeItem />
-        </Link>
-      )}
       {items.map((breadcrumb, index, breadcrumbs) => [
         <Breadcrumb.Divider key={`divider-${breadcrumb.url}`} />,
         index < breadcrumbs.length - 1 ? (

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

@@ -19,6 +19,13 @@ describe('ContentsBreadcrumbs', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -44,6 +51,13 @@ describe('ContentsBreadcrumbs', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@type': 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>