ShareDrawer: Add menu item click tracking (#89860)

This commit is contained in:
Juan Cabanas 2024-07-01 09:01:14 -03:00 committed by GitHub
parent 852d032e1a
commit 751e6739f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 24 additions and 9 deletions

View File

@ -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>

View File

@ -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 });
};
}

View File

@ -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>) => {

View File

@ -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),
});

View File

@ -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,
});