diff --git a/studio/src/components/PageHeader/index.js b/studio/src/components/PageHeader/index.js index f69e32c47..764bd7dca 100644 --- a/studio/src/components/PageHeader/index.js +++ b/studio/src/components/PageHeader/index.js @@ -23,8 +23,8 @@ function Pageheader() { : pathSnippets[0]; const isBreadCrumbsHidden = - (pathSnippets.includes('edit') || pathSnippets.includes('create')) && - (entity === 'posts' || entity === 'pages' || entity === 'fact-checks'); // redundant entity check for fact-checks? + (pathSnippets.includes('edit') || pathSnippets.includes('create')) && + ['posts', 'pages', 'fact-checks'].includes(entity); const breadcrumbItems = useMemo(() => { const urlBreadcrumbItems = pathSnippets.map((empty, index) => { const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; @@ -78,8 +78,8 @@ function Pageheader() { } }); return _.filter(urlBreadcrumbItems); + }, [pathSnippets, location.pathname]); - const handleOnBack = () => { if (isBreadCrumbsHidden) { if ( @@ -106,11 +106,13 @@ function Pageheader() { } }; const itemRender = (route, params, routes, paths) => { + + const breadcrumbItem = breadcrumbItems.find(item => item.path === route.path); const last = routes.indexOf(route) === routes.length - 1; - if (last && routes.length > 1) { + if (last) { return ( !isBreadCrumbsHidden && ( -

{route.breadcrumbName}

+

{breadcrumbItem?.breadcrumbName}

) ); } @@ -118,7 +120,7 @@ function Pageheader() { !isBreadCrumbsHidden && (

- {route.breadcrumbName} + {breadcrumbItem?.breadcrumbName}

) @@ -130,6 +132,7 @@ function Pageheader() { ['members', 'advanced', 'website', 'admin'].includes(entity) || location.pathname.split('/').pop() === 'create' ) + return ( : null}