From 95589ed091d9e04c61095be93dff838882dd0ded Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 22 Jul 2024 14:27:05 +0100 Subject: [PATCH] Navigation: Add tab title to breadcrumbs (#89102) * show active child in breadcrumb * use activeChild url * only add tab title if not first tab * handle scenes settings breadcrumbs * fix breadcrumbs on starred dashboard settings * display separate crumb --- public/app/core/components/Breadcrumbs/utils.ts | 8 ++++++++ .../dashboard-scene/settings/AnnotationsEditView.tsx | 4 +--- .../dashboard-scene/settings/DashboardLinksEditView.tsx | 5 +---- .../dashboard-scene/settings/VariablesEditView.tsx | 4 +--- .../components/DashboardSettings/AnnotationsSettings.tsx | 5 +---- .../components/DashboardSettings/DashboardSettings.tsx | 2 +- .../components/DashboardSettings/LinksSettings.tsx | 7 +------ .../features/variables/editor/VariableEditorContainer.tsx | 7 +------ 8 files changed, 15 insertions(+), 27 deletions(-) diff --git a/public/app/core/components/Breadcrumbs/utils.ts b/public/app/core/components/Breadcrumbs/utils.ts index c7b094e83ec..2719ec92b48 100644 --- a/public/app/core/components/Breadcrumbs/utils.ts +++ b/public/app/core/components/Breadcrumbs/utils.ts @@ -35,6 +35,14 @@ export function buildBreadcrumbs(sectionNav: NavModelItem, pageNav?: NavModelIte const shouldAddCrumb = !node.hideFromBreadcrumbs && !(shouldDedupe && isSamePathAsLastBreadcrumb); if (shouldAddCrumb) { + const activeChildIndex = node.children?.findIndex((child) => child.active) ?? -1; + // Add tab to breadcrumbs if it's not the first active child + if (activeChildIndex > 0) { + const activeChild = node.children?.[activeChildIndex]; + if (activeChild) { + crumbs.unshift({ text: activeChild.text, href: activeChild.url ?? '' }); + } + } crumbs.unshift({ text: node.text, href: node.url ?? '' }); } diff --git a/public/app/features/dashboard-scene/settings/AnnotationsEditView.tsx b/public/app/features/dashboard-scene/settings/AnnotationsEditView.tsx index 7ae1b3887bc..40d836c7148 100644 --- a/public/app/features/dashboard-scene/settings/AnnotationsEditView.tsx +++ b/public/app/features/dashboard-scene/settings/AnnotationsEditView.tsx @@ -178,13 +178,11 @@ function AnnotationsSettingsEditView({ onBackToList, onDelete, }: AnnotationsSettingsEditViewProps) { - const parentTab = pageNav.children!.find((p) => p.active)!; - parentTab.parentItem = pageNav; const { name, query } = annotationLayer.useState(); const editAnnotationPageNav = { text: name, - parentItem: parentTab, + parentItem: pageNav, }; return ( diff --git a/public/app/features/dashboard-scene/settings/DashboardLinksEditView.tsx b/public/app/features/dashboard-scene/settings/DashboardLinksEditView.tsx index 1d96da8a43e..e0c5da78ef4 100644 --- a/public/app/features/dashboard-scene/settings/DashboardLinksEditView.tsx +++ b/public/app/features/dashboard-scene/settings/DashboardLinksEditView.tsx @@ -119,12 +119,9 @@ interface EditLinkViewProps { } function EditLinkView({ pageNav, link, navModel, dashboard, onChange, onGoBack }: EditLinkViewProps) { - const parentTab = pageNav.children!.find((p) => p.active)!; - parentTab.parentItem = pageNav; - const editLinkPageNav = { text: 'Edit link', - parentItem: parentTab, + parentItem: pageNav, }; return ( diff --git a/public/app/features/dashboard-scene/settings/VariablesEditView.tsx b/public/app/features/dashboard-scene/settings/VariablesEditView.tsx index 23caefd0570..ffdfe4e7856 100644 --- a/public/app/features/dashboard-scene/settings/VariablesEditView.tsx +++ b/public/app/features/dashboard-scene/settings/VariablesEditView.tsx @@ -261,13 +261,11 @@ function VariableEditorSettingsView({ onDelete, onValidateVariableName, }: VariableEditorSettingsEditViewProps) { - const parentTab = pageNav.children!.find((p) => p.active)!; - parentTab.parentItem = pageNav; const { name } = variable.useState(); const editVariablePageNav = { text: name, - parentItem: parentTab, + parentItem: pageNav, }; return ( diff --git a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx index a99e41eb84f..158d80b9dcc 100644 --- a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx @@ -48,10 +48,7 @@ function getSubPageNav( if (editItem) { return { text: editItem.name, - parentItem: parentItem && { - ...parentItem, - url: node.url, - }, + parentItem, }; } diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx index 322552dd9a3..0a302f3048c 100644 --- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx @@ -199,7 +199,7 @@ function getSectionNav( subTitle: page.subTitle, })); - const pageNavWithSectionParent = applySectionAsParent(pageNav, sectionNav.node); + const pageNavWithSectionParent = applySectionAsParent(pageNav, sectionNav.main); main.parentItem = pageNavWithSectionParent; diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx index e4cb8495023..10f07a092d8 100644 --- a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx @@ -39,12 +39,7 @@ export function LinksSettings({ dashboard, sectionNav, editIndex }: SettingsPage pageNav = { text: title, subTitle: description, - }; - - const parentUrl = sectionNav.node.url; - pageNav.parentItem = sectionNav.node.parentItem && { - ...sectionNav.node.parentItem, - url: parentUrl, + parentItem: sectionNav.node.parentItem, }; } diff --git a/public/app/features/variables/editor/VariableEditorContainer.tsx b/public/app/features/variables/editor/VariableEditorContainer.tsx index 213d86f849d..f810d4bfc88 100644 --- a/public/app/features/variables/editor/VariableEditorContainer.tsx +++ b/public/app/features/variables/editor/VariableEditorContainer.tsx @@ -108,12 +108,7 @@ class VariableEditorContainerUnconnected extends PureComponent { const { editIndex, variables, sectionNav } = this.props; const variableToEdit = editIndex != null ? variables[editIndex] : undefined; const node = sectionNav.node; - const parentItem = node.parentItem - ? { - ...node.parentItem, - url: node.url, - } - : undefined; + const parentItem = node.parentItem; const subPageNav = variableToEdit ? { text: variableToEdit.name, parentItem } : parentItem; return (