From 73a5fc96f76c9277eea98508b68ca3ea3a4f7c84 Mon Sep 17 00:00:00 2001
From: Linus Pahl <46300478+linuspahl@users.noreply.github.com>
Date: Thu, 9 Jan 2025 13:56:39 +0100
Subject: [PATCH] Consider assigned perspective when merging navigation
 dropdowns. (#21295)

---
 .../components/navigation/MainNavbar.test.tsx | 45 ++++++++++++++++++-
 .../src/components/navigation/MainNavbar.tsx  |  2 +-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/graylog2-web-interface/src/components/navigation/MainNavbar.test.tsx b/graylog2-web-interface/src/components/navigation/MainNavbar.test.tsx
index 0752b40a2742..6a9376c18302 100644
--- a/graylog2-web-interface/src/components/navigation/MainNavbar.test.tsx
+++ b/graylog2-web-interface/src/components/navigation/MainNavbar.test.tsx
@@ -20,6 +20,7 @@ import * as React from 'react';
 import type { PluginExports } from 'graylog-web-plugin/plugin';
 import { PluginManifest, PluginStore } from 'graylog-web-plugin/plugin';
 import { defaultUser } from 'defaultMockValues';
+import userEvent from '@testing-library/user-event';
 
 import AppConfig from 'util/AppConfig';
 import { asMock } from 'helpers/mocking';
@@ -27,6 +28,7 @@ import useCurrentUser from 'hooks/useCurrentUser';
 import { adminUser } from 'fixtures/users';
 import PerspectivesProvider from 'components/perspectives/contexts/PerspectivesProvider';
 import PerspectivesBindings from 'components/perspectives/bindings';
+import { examplePerspective } from 'fixtures/perspectives';
 
 import MainNavbar from './MainNavbar';
 
@@ -74,6 +76,28 @@ describe('MainNavbar', () => {
               { path: '/newpluginroute', description: 'New dropdown route', requiredFeatureFlag: 'enable_dropdown_nav_item' },
             ],
           },
+          {
+            description: 'Merged dropdown test',
+            path: '/',
+            children: [
+              { path: '/another-route', description: 'Menu item for general perspective' },
+            ],
+          },
+          {
+            description: 'Merged dropdown test',
+            path: '/',
+            children: [
+              { path: '/just-another-route', description: 'Merged item for general perspective' },
+            ],
+          },
+          {
+            description: 'Merged dropdown test',
+            path: '/',
+            perspective: examplePerspective.id,
+            children: [
+              { path: '/another-route', description: 'Menu item for specific perspective' },
+            ],
+          },
         ],
       } as PluginExports,
     };
@@ -176,6 +200,25 @@ describe('MainNavbar', () => {
 
       await screen.findByRole('button', { name: /neat stuff \/ something else/i });
     });
+
+    it('should merge navigation dropdowns when their description is equal', async () => {
+      render(<SUT />);
+
+      userEvent.click(await screen.findByRole('button', { name: /Merged dropdown test/i }));
+
+      await screen.findByRole('menuitem', { name: /Menu item for general perspective/i });
+      await screen.findByRole('menuitem', { name: /Merged item for general perspective/i });
+    });
+
+    it('should not merge navigation dropdowns when their assigned perspective varies', async () => {
+      render(<SUT />);
+
+      userEvent.click(await screen.findByRole('button', { name: /Merged dropdown test/i }));
+
+      await screen.findByRole('menuitem', { name: /Menu item for general perspective/i });
+
+      expect(screen.queryByRole('menuitem', { name: /Menu item for specific perspective/i })).not.toBeInTheDocument();
+    });
   });
 
   describe('uses correct permissions:', () => {
@@ -196,7 +239,7 @@ describe('MainNavbar', () => {
 
       render(<SUT />);
 
-      expect(await screen.findByRole('link', { name: /enterprise/i })).toBeInTheDocument();
+      await screen.findByRole('link', { name: /enterprise/i });
     });
   });
 });
diff --git a/graylog2-web-interface/src/components/navigation/MainNavbar.tsx b/graylog2-web-interface/src/components/navigation/MainNavbar.tsx
index fe222c2915ff..276bda3637c6 100644
--- a/graylog2-web-interface/src/components/navigation/MainNavbar.tsx
+++ b/graylog2-web-interface/src/components/navigation/MainNavbar.tsx
@@ -118,7 +118,7 @@ const _existingDropdownItemIndex = (existingNavigationItems: Array<PluginNavigat
     return -1;
   }
 
-  return existingNavigationItems.findIndex(({ description, children }) => newNavigationItem.description === description && children);
+  return existingNavigationItems.findIndex(({ description, perspective, children }) => newNavigationItem.description === description && newNavigationItem.perspective === perspective && children);
 };
 
 const mergeDuplicateDropdowns = (navigationItems: Array<PluginNavigation>): Array<PluginNavigation> => navigationItems.reduce((result, current) => {