From b75e118ff97e5375d232cdad3e00702dda034a52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Fern=C3=A1ndez=20de=20Alba?=
 <sneridagh@gmail.com>
Date: Thu, 17 Nov 2022 09:40:13 +0100
Subject: [PATCH] Improvement of the `ContentsBreadcrumbs` component (#3903)

* Improvement of the `ContentsBreadcrumbs` component

* Update src/components/manage/Contents/ContentsBreadcrumbs.jsx

Co-authored-by: David Glick <david@glicksoftware.com>

* Fix typo

* locales

Co-authored-by: David Glick <david@glicksoftware.com>
---
 CHANGELOG.md                                     |  4 ++++
 locales/ca/LC_MESSAGES/volto.po                  |  2 ++
 locales/de/LC_MESSAGES/volto.po                  |  2 ++
 locales/en/LC_MESSAGES/volto.po                  |  2 ++
 locales/es/LC_MESSAGES/volto.po                  |  2 ++
 locales/eu/LC_MESSAGES/volto.po                  |  2 ++
 locales/fr/LC_MESSAGES/volto.po                  |  2 ++
 locales/it/LC_MESSAGES/volto.po                  |  2 ++
 locales/ja/LC_MESSAGES/volto.po                  |  2 ++
 locales/nl/LC_MESSAGES/volto.po                  |  2 ++
 locales/pt/LC_MESSAGES/volto.po                  |  2 ++
 locales/pt_BR/LC_MESSAGES/volto.po               |  2 ++
 locales/ro/LC_MESSAGES/volto.po                  |  2 ++
 locales/volto.pot                                |  4 +++-
 .../manage/Contents/ContentsBreadcrumbs.jsx      | 10 +++++++---
 .../Contents/ContentsBreadcrumbsHomeItem.jsx     | 16 ++++++++++++++++
 .../Contents/ContentsBreadcrumbsRootItem.jsx     | 16 ++++++++++++++++
 ...ontentsBreadcrumbs.Multilingual.test.jsx.snap |  4 ++--
 18 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 src/components/manage/Contents/ContentsBreadcrumbsHomeItem.jsx
 create mode 100644 src/components/manage/Contents/ContentsBreadcrumbsRootItem.jsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c75319c4a9..b0580d64d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,12 @@
 
 ### Breaking
 
+- The `ContentsBreadcrumbs` component now renders the whole language name of the language root folder (if any) instead of just the `id` (before: `de`, now: `Deutsch`) @sneridagh
+
 ### Feature
 
+- Improvement of the `ContentsBreadcrumbs` component, add child `ContentsBreadcrumbsRootItem` and `ContentsBreadcrumbsHomeItem` for easy customization of these single elements in projects @sneridagh
+
 ### Bugfix
 
 ### Internal
diff --git a/locales/ca/LC_MESSAGES/volto.po b/locales/ca/LC_MESSAGES/volto.po
index dd25cc2e1f..d0f46eb8df 100644
--- a/locales/ca/LC_MESSAGES/volto.po
+++ b/locales/ca/LC_MESSAGES/volto.po
@@ -1578,6 +1578,7 @@ msgstr "Historial de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2707,6 +2708,7 @@ msgid "Roles"
 msgstr "Funcions"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Arrel"
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
index f404a5acc2..63e8a9ec1d 100644
--- a/locales/de/LC_MESSAGES/volto.po
+++ b/locales/de/LC_MESSAGES/volto.po
@@ -1575,6 +1575,7 @@ msgstr "Historie von {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2704,6 +2705,7 @@ msgid "Roles"
 msgstr "Rollen"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Wurzel"
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
index 55e509c283..a2e3a07ed0 100644
--- a/locales/en/LC_MESSAGES/volto.po
+++ b/locales/en/LC_MESSAGES/volto.po
@@ -1569,6 +1569,7 @@ msgstr ""
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2698,6 +2699,7 @@ msgid "Roles"
 msgstr ""
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""
diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
index ad97545ef3..741be6533a 100644
--- a/locales/es/LC_MESSAGES/volto.po
+++ b/locales/es/LC_MESSAGES/volto.po
@@ -1580,6 +1580,7 @@ msgstr "Historial de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2709,6 +2710,7 @@ msgid "Roles"
 msgstr "Roles"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Raíz"
diff --git a/locales/eu/LC_MESSAGES/volto.po b/locales/eu/LC_MESSAGES/volto.po
index c9b160bcb2..4a831b505a 100644
--- a/locales/eu/LC_MESSAGES/volto.po
+++ b/locales/eu/LC_MESSAGES/volto.po
@@ -1576,6 +1576,7 @@ msgstr "{title} elementuaren historia"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2705,6 +2706,7 @@ msgid "Roles"
 msgstr "Rolak"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Erroa"
diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
index a16ebbb724..496bab24cc 100644
--- a/locales/fr/LC_MESSAGES/volto.po
+++ b/locales/fr/LC_MESSAGES/volto.po
@@ -1586,6 +1586,7 @@ msgstr "Historique de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2715,6 +2716,7 @@ msgid "Roles"
 msgstr "Rôles"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""
diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
index 91577d0383..1c85837d03 100644
--- a/locales/it/LC_MESSAGES/volto.po
+++ b/locales/it/LC_MESSAGES/volto.po
@@ -1569,6 +1569,7 @@ msgstr "Cronologia di {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2698,6 +2699,7 @@ msgid "Roles"
 msgstr "Ruoli"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Radice"
diff --git a/locales/ja/LC_MESSAGES/volto.po b/locales/ja/LC_MESSAGES/volto.po
index c378f1e989..d4c8a92a32 100644
--- a/locales/ja/LC_MESSAGES/volto.po
+++ b/locales/ja/LC_MESSAGES/volto.po
@@ -1577,6 +1577,7 @@ msgstr "{title} の履歴"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2706,6 +2707,7 @@ msgid "Roles"
 msgstr "ロール"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Root"
diff --git a/locales/nl/LC_MESSAGES/volto.po b/locales/nl/LC_MESSAGES/volto.po
index 2acaa44643..37b8c877ee 100644
--- a/locales/nl/LC_MESSAGES/volto.po
+++ b/locales/nl/LC_MESSAGES/volto.po
@@ -1576,6 +1576,7 @@ msgstr "Geschiedenis van {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2705,6 +2706,7 @@ msgid "Roles"
 msgstr "Rollen"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Root"
diff --git a/locales/pt/LC_MESSAGES/volto.po b/locales/pt/LC_MESSAGES/volto.po
index a23fc0d80c..d7c83d2f82 100644
--- a/locales/pt/LC_MESSAGES/volto.po
+++ b/locales/pt/LC_MESSAGES/volto.po
@@ -1577,6 +1577,7 @@ msgstr "Histórico de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2706,6 +2707,7 @@ msgid "Roles"
 msgstr "Papéis"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""
diff --git a/locales/pt_BR/LC_MESSAGES/volto.po b/locales/pt_BR/LC_MESSAGES/volto.po
index 30a03d5bb7..185ec0c24a 100644
--- a/locales/pt_BR/LC_MESSAGES/volto.po
+++ b/locales/pt_BR/LC_MESSAGES/volto.po
@@ -1579,6 +1579,7 @@ msgstr "Histórico de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2708,6 +2709,7 @@ msgid "Roles"
 msgstr "Papéis"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Raiz"
diff --git a/locales/ro/LC_MESSAGES/volto.po b/locales/ro/LC_MESSAGES/volto.po
index b38bf92850..f4280d7b4f 100644
--- a/locales/ro/LC_MESSAGES/volto.po
+++ b/locales/ro/LC_MESSAGES/volto.po
@@ -1569,6 +1569,7 @@ msgstr "Istoricul {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2698,6 +2699,7 @@ msgid "Roles"
 msgstr "Roluri"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Root"
diff --git a/locales/volto.pot b/locales/volto.pot
index cf2612dadf..c510dbd659 100644
--- a/locales/volto.pot
+++ b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2022-11-09T21:02:11.332Z\n"
+"POT-Creation-Date: 2022-11-16T16:07:48.403Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -1571,6 +1571,7 @@ msgstr ""
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2700,6 +2701,7 @@ msgid "Roles"
 msgstr ""
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""
diff --git a/src/components/manage/Contents/ContentsBreadcrumbs.jsx b/src/components/manage/Contents/ContentsBreadcrumbs.jsx
index 0f386ec0c8..417d8338d7 100644
--- a/src/components/manage/Contents/ContentsBreadcrumbs.jsx
+++ b/src/components/manage/Contents/ContentsBreadcrumbs.jsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
 import { Link, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
+import { langmap } from '@plone/volto/helpers';
+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({
@@ -31,7 +35,7 @@ const ContentsBreadcrumbs = (props) => {
             className="section"
             title={intl.formatMessage(messages.root)}
           >
-            {intl.formatMessage(messages.root)}
+            <ContentsBreadcrumbsRootItem />
           </Link>
           <Breadcrumb.Divider />
         </>
@@ -42,7 +46,7 @@ const ContentsBreadcrumbs = (props) => {
           className="section"
           title={intl.formatMessage(messages.home)}
         >
-          {lang}
+          {langmap?.[lang]?.nativeName ?? lang}
         </Link>
       )}
       {!settings.isMultilingual && (
@@ -51,7 +55,7 @@ const ContentsBreadcrumbs = (props) => {
           className="section"
           title={intl.formatMessage(messages.home)}
         >
-          {intl.formatMessage(messages.home)}
+          <ContentsBreadcrumbsHomeItem />
         </Link>
       )}
       {items.map((breadcrumb, index, breadcrumbs) => [
diff --git a/src/components/manage/Contents/ContentsBreadcrumbsHomeItem.jsx b/src/components/manage/Contents/ContentsBreadcrumbsHomeItem.jsx
new file mode 100644
index 0000000000..f8b97546c0
--- /dev/null
+++ b/src/components/manage/Contents/ContentsBreadcrumbsHomeItem.jsx
@@ -0,0 +1,16 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
+});
+
+const ContentsBreadcrumbsHomeItem = () => {
+  const intl = useIntl();
+
+  return <>{intl.formatMessage(messages.home)}</>;
+};
+
+export default ContentsBreadcrumbsHomeItem;
diff --git a/src/components/manage/Contents/ContentsBreadcrumbsRootItem.jsx b/src/components/manage/Contents/ContentsBreadcrumbsRootItem.jsx
new file mode 100644
index 0000000000..ce88f4f063
--- /dev/null
+++ b/src/components/manage/Contents/ContentsBreadcrumbsRootItem.jsx
@@ -0,0 +1,16 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  root: {
+    id: 'Root',
+    defaultMessage: 'Root',
+  },
+});
+
+const ContentsBreadcrumbsRootItem = () => {
+  const intl = useIntl();
+
+  return <>{intl.formatMessage(messages.root)}</>;
+};
+
+export default ContentsBreadcrumbsRootItem;
diff --git a/src/components/manage/Contents/__snapshots__/ContentsBreadcrumbs.Multilingual.test.jsx.snap b/src/components/manage/Contents/__snapshots__/ContentsBreadcrumbs.Multilingual.test.jsx.snap
index d681639910..2ec2f635c8 100644
--- a/src/components/manage/Contents/__snapshots__/ContentsBreadcrumbs.Multilingual.test.jsx.snap
+++ b/src/components/manage/Contents/__snapshots__/ContentsBreadcrumbs.Multilingual.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`ContentsBreadcrumbs Multilingual renders a ContentsBreadcrumbs componen
     onClick={[Function]}
     title="Home"
   >
-    en
+    English
   </a>
   <div
     className="divider"
@@ -74,7 +74,7 @@ exports[`ContentsBreadcrumbs Multilingual renders a breadcrumbs component contai
     onClick={[Function]}
     title="Home"
   >
-    en
+    English
   </a>
   <div
     className="divider"