Consider assigned perspective when merging navigation dropdowns. (#21295

)

graylog2-web-interface/src/components/navigation/MainNavbar.test.tsx

@@ -20,13 +20,15 @@ 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';
 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 });
     });
   });
 });

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) => {