diff --git a/packages/grafana-data/src/types/navModel.ts b/packages/grafana-data/src/types/navModel.ts index d4c885f11a5..781a6610270 100644 --- a/packages/grafana-data/src/types/navModel.ts +++ b/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 }>; } diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index 5afb1e62064..64e2d5b531f 100644 --- a/pkg/api/dtos/index.go +++ b/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 diff --git a/public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx b/public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx index 7d85be8a65b..90df0a07fb1 100644 --- a/public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx +++ b/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(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) {