PluginPages: Support plugin pages that don't belong to a section (#55904)

* Fixing pages that don't exist in navtree

* Fix test

* fix lint warning

* Fixes

public/app/features/plugins/utils.ts

@@ -37,44 +37,51 @@ export function buildPluginSectionNav(
   pluginNav: NavModel | null,
   navIndex: NavIndex,
   pluginId: string
-) {
+): NavModel | undefined {
   // When topnav is disabled we only just show pluginNav like before
   if (!config.featureToggles.topnav) {
-    return pluginNav;
+    return pluginNav ?? undefined;
   }
 
-  const section = { ...getPluginSection(location, navIndex, pluginId) };
+  let section = getPluginSection(location, navIndex, pluginId);
+  if (!section) {
+    return undefined;
+  }
+
+  // shallow clone as we set active flag
+  section = { ...section };
 
   // If we have plugin nav don't set active page in section as it will cause double breadcrumbs
   const currentUrl = config.appSubUrl + location.pathname + location.search;
   let activePage: NavModelItem | undefined;
 
+  function setPageToActive(page: NavModelItem, currentUrl: string): NavModelItem {
+    if (!currentUrl.startsWith(page.url ?? '')) {
+      return page;
+    }
+
+    if (activePage && (activePage.url?.length ?? 0) > (page.url?.length ?? 0)) {
+      return page;
+    }
+
+    if (activePage) {
+      activePage.active = false;
+    }
+
+    activePage = { ...page, active: true };
+    return activePage;
+  }
+
   // Find and set active page
   section.children = (section?.children ?? []).map((child) => {
     if (child.children) {
       return {
         ...child,
-        children: child.children.map((pluginPage) => {
-          if (currentUrl.startsWith(pluginPage.url ?? '')) {
-            activePage = {
-              ...pluginPage,
-              active: true,
-            };
-            return activePage;
-          }
-          return pluginPage;
-        }),
+        children: child.children.map((pluginPage) => setPageToActive(pluginPage, currentUrl)),
       };
-    } else {
-      if (currentUrl.startsWith(child.url ?? '')) {
-        activePage = {
-          ...child,
-          active: true,
-        };
-        return activePage;
-      }
     }
-    return child;
+
+    return setPageToActive(child, currentUrl);
   });
 
   return { main: section, node: activePage ?? section };
@@ -90,9 +97,10 @@ export function getPluginSection(location: HistoryLocation, navIndex: NavIndex,
     return parent.parentItem ?? parent;
   }
 
+  // Some plugins like cloud home don't have any precense in the navtree so we need to allow those
   const navTreeNodeForPlugin = navIndex[`plugin-page-${pluginId}`];
   if (!navTreeNodeForPlugin) {
-    throw new Error('Plugin not found in navigation tree');
+    return { id: 'root-plugin-page', text: 'Root plugin page', hideFromBreadcrumbs: true };
   }
 
   if (!navTreeNodeForPlugin.parentItem) {