diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
index 0301688af3..5530163a19 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
@@ -147,7 +147,10 @@ export const BrowseStep = ({
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
index 868a4dccef..067ea8e67c 100644
--- a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
+import { useIntl } from 'react-intl';
import {
Crumb,
@@ -10,49 +11,53 @@ import {
import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync';
import { BreadcrumbsDefinition } from '../../constants';
-export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => (
-
- {breadcrumbs.map((crumb, index) => {
- if (Array.isArray(crumb)) {
- return (
- parent.id)}
- key={`breadcrumb-${crumb?.id ?? 'menu'}`}
- currentFolderId={currentFolderId}
- onChangeFolder={onChangeFolder}
- />
- );
- }
+export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => {
+ const { formatMessage } = useIntl();
- const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+ return (
+
+ {breadcrumbs.map((crumb, index) => {
+ if (Array.isArray(crumb)) {
+ return (
+ parent.id)}
+ key={`breadcrumb-${crumb?.id ?? 'menu'}`}
+ currentFolderId={currentFolderId}
+ onChangeFolder={onChangeFolder}
+ />
+ );
+ }
+
+ const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+
+ if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
+ return (
+ onChangeFolder(crumb.id))}
+ >
+ {crumb.label?.id ? formatMessage(crumb.label) : crumb.label}
+
+ );
+ }
- if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
return (
- onChangeFolder(crumb.id))}
+ isCurrent={index + 1 === breadcrumbs.length}
>
- {crumb.label}
-
+ {crumb.label?.id ? formatMessage(crumb.label) : crumb.label}
+
);
- }
-
- return (
-
- {crumb.label}
-
- );
- })}
-
-);
+ })}
+
+ );
+};
Breadcrumbs.defaultProps = {
currentFolderId: undefined,
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
index 6ca26c1698..1abfc75d7f 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
@@ -1,8 +1,10 @@
+import getTrad from './getTrad';
+
const getBreadcrumbDataML = folder => {
let data = [
{
id: null,
- label: 'Media Library',
+ label: { id: getTrad('plugin.name'), defaultMessage: 'MediaLibrary' },
},
];
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
index f653145d42..45c114a72e 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
@@ -1,10 +1,11 @@
+import getTrad from './getTrad';
import getFolderURL from './getFolderURL';
const getBreadcrumbDataML = (folder, { pathname, query }) => {
let data = [
{
id: null,
- label: 'Media Library',
+ label: { id: getTrad('plugin.name'), defaultMessage: 'MediaLibrary' },
href: folder ? getFolderURL(pathname, query) : undefined,
},
];