[Serverless Sidenav] Order active paths by tree depth (elastic#174184)

pheyos · Jan 5, 2024 · 42272f9 · 42272f9
1 parent 702b207
commit 42272f9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.test.ts b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.test.ts
@@ -133,33 +133,36 @@ describe('findActiveNodes', () => {
         title: 'Root',
         path: 'root',
       },
+      // Group 1
       '[0][0]': {
         id: 'group1',
         title: 'Group 1',
-        deepLink: getDeepLink('group1', 'group1'),
         path: 'root.group1',
       },
       '[0][0][0]': {
-        id: 'group1A',
-        title: 'Group 1A',
-        path: 'root.group1.group1A',
-      },
-      '[0][0][0][0]': {
         id: 'item1',
         title: 'Item 1',
-        deepLink: getDeepLink('item1', 'item1'),
-        path: 'root.group1.group1A.item1',
+        deepLink: getDeepLink('item1', 'item1'), // First match
+        path: 'root.group1.item1',
       },
+      // Group 2
       '[0][1]': {
         id: 'group2',
         title: 'Group 2',
+        deepLink: getDeepLink('group2', 'group2'),
         path: 'root.group2',
       },
       '[0][1][0]': {
+        id: 'group2A',
+        title: 'Group 2A',
+        path: 'root.group2.group2A',
+      },
+      '[0][1][0][0]': {
         id: 'item2',
         title: 'Item 2',
-        deepLink: getDeepLink('item1', 'item1'), // Same link as above, should match both
-        path: 'root.group2.item2',
+        // Second match --> should come first as it is the longest match of the 2
+        deepLink: getDeepLink('item1', 'item1'),
+        path: 'root.group2.group2A.item2',
       },
     };
 
@@ -172,21 +175,21 @@ describe('findActiveNodes', () => {
           path: 'root',
         },
         {
-          id: 'group1',
-          title: 'Group 1',
-          deepLink: getDeepLink('group1', 'group1'),
-          path: 'root.group1',
+          id: 'group2',
+          title: 'Group 2',
+          deepLink: getDeepLink('group2', 'group2'),
+          path: 'root.group2',
         },
         {
-          id: 'group1A',
-          title: 'Group 1A',
-          path: 'root.group1.group1A',
+          id: 'group2A',
+          title: 'Group 2A',
+          path: 'root.group2.group2A',
         },
         {
-          id: 'item1',
-          title: 'Item 1',
+          id: 'item2',
+          title: 'Item 2',
           deepLink: getDeepLink('item1', 'item1'),
-          path: 'root.group1.group1A.item1',
+          path: 'root.group2.group2A.item2',
         },
       ],
       [
@@ -196,15 +199,15 @@ describe('findActiveNodes', () => {
           path: 'root',
         },
         {
-          id: 'group2',
-          title: 'Group 2',
-          path: 'root.group2',
+          id: 'group1',
+          title: 'Group 1',
+          path: 'root.group1',
         },
         {
-          id: 'item2',
-          title: 'Item 2',
+          id: 'item1',
+          title: 'Item 1',
           deepLink: getDeepLink('item1', 'item1'),
-          path: 'root.group2.item2',
+          path: 'root.group1.item1',
         },
       ],
     ]);

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.ts b/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/utils.ts
@@ -137,6 +137,9 @@ export const findActiveNodes = (
           matches[length] = [];
         }
         matches[length].push(key);
+        // If there are multiple node matches of the same URL path length, we want to order them by
+        // tree depth, so that the longest match (deepest node) comes first.
+        matches[length].sort((a, b) => b.length - a.length);
       }
     }
   });

diff --git a/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx b/x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx
@@ -33,8 +33,6 @@ const navigationTree: NavigationTreeDefinition = {
             defaultMessage: 'Discover',
           }),
           link: 'observability-log-explorer',
-          // prevent this entry from ever becoming active, effectively falling through to the obs-log-explorer child
-          getIsActive: () => false,
           // avoid duplicate "Discover" breadcrumbs
           breadcrumbStatus: 'hidden',
           renderAs: 'item',