ShareDrawer: Add menu item click tracking (#89860)

public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx

@@ -8,7 +8,9 @@ import { contextSrv } from 'app/core/core';
 import { t } from 'app/core/internationalization';
 
 import { isPublicDashboardsEnabled } from '../../../dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';
+import { getTrackingSource, shareDashboardType } from '../../../dashboard/components/ShareModal/utils';
 import { DashboardScene } from '../../scene/DashboardScene';
+import { DashboardInteractions } from '../../utils/interactions';
 import { ShareDrawer } from '../ShareDrawer/ShareDrawer';
 import { SceneShareDrawerState } from '../types';
 
@@ -21,6 +23,7 @@ const newShareButtonSelector = e2eSelectors.pages.Dashboard.DashNav.newShareButt
 type CustomDashboardDrawer = new (...args: SceneShareDrawerState[]) => SceneObject;
 
 export interface ShareDrawerMenuItem {
+  shareId: string;
   testId: string;
   label: string;
   description?: string;
@@ -52,6 +55,7 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
     const menuItems: ShareDrawerMenuItem[] = [];
 
     menuItems.push({
+      shareId: shareDashboardType.link,
       testId: newShareButtonSelector.shareInternally,
       icon: 'building',
       label: t('share-dashboard.menu.share-internally-title', 'Share internally'),
@@ -62,6 +66,7 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
     });
 
     menuItems.push({
+      shareId: shareDashboardType.publicDashboard,
       testId: newShareButtonSelector.shareExternally,
       icon: 'share-alt',
       label: t('share-dashboard.menu.share-externally-title', 'Share externally'),
@@ -74,6 +79,7 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
     customShareDrawerItem.forEach((d) => menuItems.push(d));
 
     menuItems.push({
+      shareId: shareDashboardType.snapshot,
       testId: newShareButtonSelector.shareSnapshot,
       icon: 'camera',
       label: t('share-dashboard.menu.share-snapshot-title', 'Share snapshot'),
@@ -86,6 +92,15 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
     return menuItems.filter((item) => item.renderCondition);
   }, [onMenuItemClick, dashboard, panel]);
 
+  const onClick = (item: ShareDrawerMenuItem) => {
+    DashboardInteractions.sharingCategoryClicked({
+      item: item.shareId,
+      shareResource: getTrackingSource(panel?.getRef()),
+    });
+
+    item.onClick(dashboard);
+  };
+
   return (
     <Menu data-testid={newShareButtonSelector.container}>
       {buildMenuItems().map((item) => (
@@ -95,7 +110,7 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
           label={item.label}
           icon={item.icon}
           description={item.description}
-          onClick={() => item.onClick(dashboard)}
+          onClick={() => onClick(item)}
         />
       ))}
     </Menu>

public/app/features/dashboard-scene/sharing/ShareModal.tsx

@@ -91,7 +91,10 @@ export class ShareModal extends SceneObjectBase<ShareModalState> implements Moda
   };
 
   onChangeTab: ComponentProps<typeof ModalTabsHeader>['onChangeTab'] = (tab) => {
-    DashboardInteractions.sharingTabChanged({ item: tab.value, shareResource: getTrackingSource(this.state.panelRef) });
+    DashboardInteractions.sharingCategoryClicked({
+      item: tab.value,
+      shareResource: getTrackingSource(this.state.panelRef),
+    });
     this.setState({ activeTab: tab.value });
   };
 }

public/app/features/dashboard-scene/utils/interactions.ts

@@ -44,7 +44,7 @@ export const DashboardInteractions = {
   },
 
   // Sharing interactions:
-  sharingTabChanged: (properties?: Record<string, unknown>) => {
+  sharingCategoryClicked: (properties?: Record<string, unknown>) => {
     reportDashboardInteraction('sharing_category_clicked', properties);
   },
   shareLinkCopied: (properties?: Record<string, unknown>) => {

public/app/features/dashboard/components/ShareModal/ShareModal.tsx

@@ -102,7 +102,7 @@ class UnthemedShareModal extends React.Component<Props, State> {
 
   onSelectTab: React.ComponentProps<typeof ModalTabsHeader>['onChangeTab'] = (t) => {
     this.setState((prevState) => ({ ...prevState, activeTab: t.value }));
-    DashboardInteractions.sharingTabChanged({
+    DashboardInteractions.sharingCategoryClicked({
       item: t.value,
       shareResource: getTrackingSource(this.props.panel),
     });

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx

@@ -353,11 +353,11 @@ describe('SharePublic - Report interactions', () => {
   });
 
   it('reports interaction when public dashboard tab is clicked', async () => {
+    jest.spyOn(DashboardInteractions, 'sharingCategoryClicked');
     await renderSharePublicDashboard();
 
     await waitFor(() => {
-      expect(DashboardInteractions.sharingTabChanged).toHaveBeenCalledTimes(1);
+      expect(DashboardInteractions.sharingCategoryClicked).lastCalledWith({
-      expect(DashboardInteractions.sharingTabChanged).lastCalledWith({
         item: shareDashboardType.publicDashboard,
         shareResource: 'dashboard',
       });
@@ -374,7 +374,6 @@ describe('SharePublic - Report interactions', () => {
     await userEvent.click(screen.getByTestId(selectors.EnableTimeRangeSwitch));
 
     await waitFor(() => {
-      expect(reportInteraction).toHaveBeenCalledTimes(1);
       expect(reportInteraction).toHaveBeenLastCalledWith('dashboards_sharing_public_time_picker_clicked', {
         enabled: !pubdashResponse.timeSelectionEnabled,
       });
@@ -391,7 +390,6 @@ describe('SharePublic - Report interactions', () => {
     await userEvent.click(screen.getByTestId(selectors.EnableAnnotationsSwitch));
 
     await waitFor(() => {
-      expect(reportInteraction).toHaveBeenCalledTimes(1);
       expect(reportInteraction).toHaveBeenLastCalledWith('dashboards_sharing_public_annotations_clicked', {
         enabled: !pubdashResponse.annotationsEnabled,
       });
@@ -405,7 +403,6 @@ describe('SharePublic - Report interactions', () => {
     await userEvent.click(screen.getByTestId(selectors.PauseSwitch));
 
     await waitFor(() => {
-      expect(reportInteraction).toHaveBeenCalledTimes(1);
       expect(reportInteraction).toHaveBeenLastCalledWith('dashboards_sharing_public_pause_clicked', {
         paused: pubdashResponse.isEnabled,
       });