Feature Highlights: add RS event for nav items (#45470)

packages/grafana-data/src/types/navModel.ts

@@ -20,6 +20,7 @@ export interface NavModelItem {
   onClick?: () => void;
   menuItemType?: NavMenuItemType;
   highlightText?: string;
+  highlightId?: string;
   tabSuffix?: ComponentType<{ className?: string }>;
 }
 

pkg/api/dtos/index.go

@@ -71,6 +71,7 @@ type NavLink struct {
 	HideFromTabs  bool       `json:"hideFromTabs,omitempty"`
 	Children      []*NavLink `json:"children,omitempty"`
 	HighlightText string     `json:"highlightText,omitempty"`
+	HighlightID   string     `json:"highlightId,omitempty"`
 }
 
 // NavIDCfg is the id for org configuration navigation node

public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import { css, cx } from '@emotion/css';
 import { Icon, IconName, Link, useTheme2 } from '@grafana/ui';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
@@ -13,6 +13,7 @@ import { FocusScope } from '@react-aria/focus';
 
 import { NavBarItemMenuContext } from './context';
 import { NavFeatureHighlight } from './NavFeatureHighlight';
+import { reportExperimentView } from '@grafana/runtime';
 
 export interface NavBarItemMenuTriggerProps extends MenuTriggerProps {
   children: ReactElement;
@@ -34,6 +35,12 @@ export function NavBarItemMenuTrigger(props: NavBarItemMenuTriggerProps): ReactE
   const ref = React.useRef<HTMLButtonElement>(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, ref);
 
+  useEffect(() => {
+    if (item.highlightId) {
+      reportExperimentView(`feature-highlights-${item.highlightId}-nav`, 'test', '');
+    }
+  }, [item.highlightId]);
+
   const { hoverProps } = useHover({
     onHoverChange: (isHovering) => {
       if (isHovering) {