mirror of
https://github.com/grafana/grafana.git
synced 2024-11-28 19:54:10 -06:00
ShareDrawer: Add menu item click tracking (#89860)
This commit is contained in:
parent
852d032e1a
commit
751e6739f3
@ -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>
|
||||
|
@ -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 });
|
||||
};
|
||||
}
|
||||
|
@ -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>) => {
|
||||
|
@ -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),
|
||||
});
|
||||
|
@ -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,
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user