From 751e6739f33f85e246416703a6ae268ea009286e Mon Sep 17 00:00:00 2001 From: Juan Cabanas Date: Mon, 1 Jul 2024 09:01:14 -0300 Subject: [PATCH] ShareDrawer: Add menu item click tracking (#89860) --- .../sharing/ShareButton/ShareMenu.tsx | 17 ++++++++++++++++- .../dashboard-scene/sharing/ShareModal.tsx | 5 ++++- .../dashboard-scene/utils/interactions.ts | 2 +- .../components/ShareModal/ShareModal.tsx | 2 +- .../SharePublicDashboard.test.tsx | 7 ++----- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx b/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx index 250f723d41f..c5a88434302 100644 --- a/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx +++ b/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 ( {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)} /> ))} diff --git a/public/app/features/dashboard-scene/sharing/ShareModal.tsx b/public/app/features/dashboard-scene/sharing/ShareModal.tsx index d015501e143..916eddc9dde 100644 --- a/public/app/features/dashboard-scene/sharing/ShareModal.tsx +++ b/public/app/features/dashboard-scene/sharing/ShareModal.tsx @@ -91,7 +91,10 @@ export class ShareModal extends SceneObjectBase implements Moda }; onChangeTab: ComponentProps['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 }); }; } diff --git a/public/app/features/dashboard-scene/utils/interactions.ts b/public/app/features/dashboard-scene/utils/interactions.ts index 85c4b332f82..3086ec1defb 100644 --- a/public/app/features/dashboard-scene/utils/interactions.ts +++ b/public/app/features/dashboard-scene/utils/interactions.ts @@ -44,7 +44,7 @@ export const DashboardInteractions = { }, // Sharing interactions: - sharingTabChanged: (properties?: Record) => { + sharingCategoryClicked: (properties?: Record) => { reportDashboardInteraction('sharing_category_clicked', properties); }, shareLinkCopied: (properties?: Record) => { diff --git a/public/app/features/dashboard/components/ShareModal/ShareModal.tsx b/public/app/features/dashboard/components/ShareModal/ShareModal.tsx index 937ae1af519..9e3bc7117c8 100644 --- a/public/app/features/dashboard/components/ShareModal/ShareModal.tsx +++ b/public/app/features/dashboard/components/ShareModal/ShareModal.tsx @@ -102,7 +102,7 @@ class UnthemedShareModal extends React.Component { onSelectTab: React.ComponentProps['onChangeTab'] = (t) => { this.setState((prevState) => ({ ...prevState, activeTab: t.value })); - DashboardInteractions.sharingTabChanged({ + DashboardInteractions.sharingCategoryClicked({ item: t.value, shareResource: getTrackingSource(this.props.panel), }); diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx index faff169478a..c19af9d767f 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx +++ b/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.sharingTabChanged).lastCalledWith({ + expect(DashboardInteractions.sharingCategoryClicked).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, });