diff --git a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx index 3aba09ac311..568ec4af0d8 100644 --- a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx +++ b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx @@ -4,10 +4,18 @@ import React from 'react'; import { Provider } from 'react-redux'; import { NavModelItem, NavSection } from '@grafana/data'; +import { reportInteraction } from '@grafana/runtime'; import { configureStore } from 'app/store/configureStore'; import { QuickAdd } from './QuickAdd'; +jest.mock('@grafana/runtime', () => { + return { + ...jest.requireActual('@grafana/runtime'), + reportInteraction: jest.fn(), + }; +}); + const setup = () => { const navBarTree: NavModelItem[] = [ { @@ -16,7 +24,7 @@ const setup = () => { id: 'section1', url: 'section1', children: [ - { text: 'New child 1', id: 'child1', url: 'section1/child1', isCreateAction: true }, + { text: 'New child 1', id: 'child1', url: '#', isCreateAction: true }, { text: 'Child2', id: 'child2', url: 'section1/child2' }, ], }, @@ -50,4 +58,15 @@ describe('QuickAdd', () => { expect(screen.getByRole('link', { name: 'New child 1' })).toBeInTheDocument(); expect(screen.getByRole('link', { name: 'New child 3' })).toBeInTheDocument(); }); + + it('reports interaction when a menu item is clicked', async () => { + setup(); + await userEvent.click(screen.getByRole('button', { name: 'New' })); + await userEvent.click(screen.getByRole('link', { name: 'New child 1' })); + + expect(reportInteraction).toHaveBeenCalledWith('grafana_menu_item_clicked', { + url: '#', + from: 'quickadd', + }); + }); }); diff --git a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx index 0ed2337c7ff..ac38c048f0b 100644 --- a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx +++ b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx @@ -2,6 +2,7 @@ import { css } from '@emotion/css'; import React, { useMemo, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; +import { reportInteraction } from '@grafana/runtime'; import { Menu, Dropdown, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui'; import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange'; import { useSelector } from 'app/types'; @@ -32,7 +33,12 @@ export const QuickAdd = ({}: Props) => { return ( {createActions.map((createAction, index) => ( - + reportInteraction('grafana_menu_item_clicked', { url: createAction.url, from: 'quickadd' })} + /> ))} ); diff --git a/public/app/features/search/components/DashboardActions.tsx b/public/app/features/search/components/DashboardActions.tsx index 6ba55030d23..1828c2154bf 100644 --- a/public/app/features/search/components/DashboardActions.tsx +++ b/public/app/features/search/components/DashboardActions.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { config } from '@grafana/runtime'; +import { config, reportInteraction } from '@grafana/runtime'; import { Menu, Dropdown, Button, Icon } from '@grafana/ui'; import { t } from 'app/core/internationalization'; @@ -30,13 +30,31 @@ export const DashboardActions: FC = ({ folderUid, canCreateFolders = fals return ( {canCreateDashboards && ( - + + reportInteraction('grafana_menu_item_clicked', { url: actionUrl('new'), from: '/dashboards' }) + } + /> )} {canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && ( - + + reportInteraction('grafana_menu_item_clicked', { url: actionUrl('new_folder'), from: '/dashboards' }) + } + /> )} {canCreateDashboards && ( - + + reportInteraction('grafana_menu_item_clicked', { url: actionUrl('import'), from: '/dashboards' }) + } + /> )} );