From b3fa2821ccea5eb1fa748364b849601e1f7729fa Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:16:11 +0300
Subject: [PATCH] Pin nav items: Instrument user events (#90212)

* Pin nav items: Instrument user events

* Send item path
---
 .../core/components/AppChrome/MegaMenu/MegaMenu.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
index 3b29a60fc20..6de0eb2d84f 100644
--- a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { config } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { CustomScrollbar, Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { t } from 'app/core/internationalization';
@@ -63,7 +63,13 @@ export const MegaMenu = memo(
 
     const onPinItem = (id?: string) => {
       if (id && config.featureToggles.pinNavItems) {
-        const newItems = isPinned(id) ? pinnedItems.filter((i) => id !== i) : [...pinnedItems, id];
+        const navItem = navTree.find((item) => item.id === id);
+        const isSaved = isPinned(id);
+        const newItems = isSaved ? pinnedItems.filter((i) => id !== i) : [...pinnedItems, id];
+        const interactionName = isSaved ? 'grafana_nav_item_unpinned' : 'grafana_nav_item_pinned';
+        reportInteraction(interactionName, {
+          path: navItem?.url ?? id,
+        });
         patchPreferences({
           patchPrefsCmd: {
             navbar: {