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, }, ];