From 995e2715adb352f72a14b76dd6903adf63ca96f4 Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Thu, 26 Jan 2023 15:10:09 +0100
Subject: [PATCH] Navigation: Fix finding the active nav item for plugins
 (#62123)

fix: look for the active page under children first
---
 public/app/features/plugins/utils.test.ts | 7 +++++++
 public/app/features/plugins/utils.ts      | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/public/app/features/plugins/utils.test.ts b/public/app/features/plugins/utils.test.ts
index bca1665ffb6..b79a5840279 100644
--- a/public/app/features/plugins/utils.test.ts
+++ b/public/app/features/plugins/utils.test.ts
@@ -69,6 +69,13 @@ describe('buildPluginSectionNav', () => {
     expect(result?.node.text).toBe('page2');
   });
 
+  it('Should only set the most specific match as active (not the parents)', () => {
+    config.featureToggles.topnav = true;
+    const result = buildPluginSectionNav(appsSection, null, '/a/plugin1/page2');
+    expect(result?.main.children![0].children![1].active).toBe(true);
+    expect(result?.main.children![0].active).not.toBe(true); // Parent should not be active
+  });
+
   it('Should set app section to active', () => {
     config.featureToggles.topnav = true;
     const result = buildPluginSectionNav(appsSection, null, '/a/plugin1');
diff --git a/public/app/features/plugins/utils.ts b/public/app/features/plugins/utils.ts
index c28a58e70df..145431cc039 100644
--- a/public/app/features/plugins/utils.ts
+++ b/public/app/features/plugins/utils.ts
@@ -49,6 +49,8 @@ export function buildPluginSectionNav(
       return page;
     }
 
+    // Check if there is already an active page found with with a more specific url (possibly a child of the current page)
+    // (In this case we bail out early and don't mark the parent as active)
     if (activePage && (activePage.url?.length ?? 0) > (page.url?.length ?? 0)) {
       return page;
     }
@@ -58,15 +60,20 @@ export function buildPluginSectionNav(
     }
 
     activePage = { ...page, active: true };
+
     return activePage;
   }
 
   // Find and set active page
   copiedPluginNavSection.children = (copiedPluginNavSection?.children ?? []).map((child) => {
     if (child.children) {
+      // Doing this here to make sure that first we check if any of the children is active
+      // (In case yes, then the check for the parent will not mark it as active)
+      const children = child.children.map((pluginPage) => setPageToActive(pluginPage, currentUrl));
+
       return {
         ...setPageToActive(child, currentUrl),
-        children: child.children.map((pluginPage) => setPageToActive(pluginPage, currentUrl)),
+        children,
       };
     }