Navigation: Report megamenu state when clicking a navigation item (#77705)

report megamenu state when clicking a navigation item

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -11,13 +11,15 @@ import { KioskMode } from 'app/types';
 
 import { RouteDescriptor } from '../../navigation/types';
 
+export type MegaMenuState = 'open' | 'closed' | 'docked';
+
 export interface AppChromeState {
   chromeless?: boolean;
   sectionNav: NavModel;
   pageNav?: NavModelItem;
   actions?: React.ReactNode;
   searchBarHidden?: boolean;
-  megaMenu: 'open' | 'closed' | 'docked';
+  megaMenu: MegaMenuState;
   kioskMode: KioskMode | null;
   layout: PageLayoutType;
 }

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx

@@ -30,7 +30,7 @@ export const MegaMenu = React.memo(
     // Remove profile + help from tree
     const navItems = navTree
       .filter((item) => item.id !== 'profile' && item.id !== 'help')
-      .map((item) => enrichWithInteractionTracking(item, true));
+      .map((item) => enrichWithInteractionTracking(item, state.megaMenu));
 
     const activeItem = getActiveItem(navItems, location.pathname);
 

public/app/core/components/AppChrome/DockedMegaMenu/utils.ts

@@ -6,6 +6,7 @@ import { ShowModalReactEvent } from '../../../../types/events';
 import appEvents from '../../../app_events';
 import { getFooterLinks } from '../../Footer/Footer';
 import { HelpModal } from '../../help/HelpModal';
+import { MegaMenuState } from '../AppChromeService';
 
 export const enrichHelpItem = (helpItem: NavModelItem) => {
   let menuItems = helpItem.children || [];
@@ -29,19 +30,19 @@ export const enrichHelpItem = (helpItem: NavModelItem) => {
   return helpItem;
 };
 
-export const enrichWithInteractionTracking = (item: NavModelItem, expandedState: boolean) => {
+export const enrichWithInteractionTracking = (item: NavModelItem, megaMenuState: MegaMenuState) => {
   // creating a new object here to not mutate the original item object
   const newItem = { ...item };
   const onClick = newItem.onClick;
   newItem.onClick = () => {
     reportInteraction('grafana_navigation_item_clicked', {
       path: newItem.url ?? newItem.id,
-      state: expandedState ? 'expanded' : 'collapsed',
+      state: megaMenuState,
     });
     onClick?.();
   };
   if (newItem.children) {
-    newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, expandedState));
+    newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, megaMenuState));
   }
   return newItem;
 };