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

@@ -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');

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