Add tracking dashboard toolbar options v2 (#78237)

* Add share, save, add tracking

* change event name

* revert naming

* change naming of action

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -11,12 +11,19 @@ import AddPanelMenu from './AddPanelMenu';
 
 export interface Props {
   dashboard: DashboardModel;
+  onToolbarAddMenuOpen?: () => void;
 }
 
-const AddPanelButton = ({ dashboard }: Props) => {
+const AddPanelButton = ({ dashboard, onToolbarAddMenuOpen }: Props) => {
   const styles = getStyles(useTheme2());
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  useEffect(() => {
+    if (isMenuOpen && onToolbarAddMenuOpen) {
+      onToolbarAddMenuOpen();
+    }
+  }, [isMenuOpen, onToolbarAddMenuOpen]);
+
   return (
     <Dropdown
       overlay={() => <AddPanelMenu dashboard={dashboard} />}

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

@@ -41,6 +41,8 @@ import {
   trackToolbarSettingsClick,
   trackToolbarTimePickerClick,
   trackToolbarZoomClick,
+  trackToolbarSaveClick,
+  trackToolbarAddClick,
 } from './analytics';
 
 const mapDispatchToProps = {
@@ -280,7 +282,9 @@ export const DashNav = React.memo<Props>((props) => {
 
     if (canEdit && !isFullscreen) {
       if (config.featureToggles.emptyDashboardPage) {
-        buttons.push(<AddPanelButton dashboard={dashboard} key="panel-add-dropdown" />);
+        buttons.push(
+          <AddPanelButton dashboard={dashboard} onToolbarAddMenuOpen={trackToolbarAddClick} key="panel-add-dropdown" />
+        );
       } else {
         buttons.push(
           <ToolbarButton
@@ -302,6 +306,7 @@ export const DashNav = React.memo<Props>((props) => {
               tooltip={t('dashboard.toolbar.save', 'Save dashboard')}
               icon="save"
               onClick={() => {
+                trackToolbarSaveClick();
                 showModal(SaveDashboardDrawer, {
                   dashboard,
                   onDismiss: hideModal,

public/app/features/dashboard/components/DashNav/ShareButton.tsx

@@ -8,6 +8,7 @@ import { DashboardModel } from 'app/features/dashboard/state';
 import { ShareModal } from '../ShareModal';
 
 import { DashNavButton } from './DashNavButton';
+import { trackToolbarShareClick } from './analytics';
 
 export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
   const [queryParams] = useQueryParams();
@@ -32,6 +33,7 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
       icon="share-alt"
       iconSize="lg"
       onClick={() => {
+        trackToolbarShareClick();
         showModal(ShareModal, {
           dashboard,
           onDismiss: hideModal,

public/app/features/dashboard/components/DashNav/analytics.ts

@@ -1,27 +1,33 @@
 import { reportInteraction } from '@grafana/runtime';
-
 export const shareAnalyticsEventNames: {
   [key: string]: string;
 } = {
   dashboardsToolbarActionsClicked: 'dashboards_toolbar_actions_clicked',
 };
-
 export function trackToolbarFavoritesClick() {
   reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'favorites' });
 }
-
 export function trackToolbarSettingsClick() {
   reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'settings' });
 }
-
 export function trackToolbarRefreshClick() {
   reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'refresh' });
 }
-
 export function trackToolbarTimePickerClick() {
   reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'time_picker' });
 }
-
 export function trackToolbarZoomClick() {
   reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'zoom_out_time_range' });
 }
+
+export function trackToolbarShareClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'share' });
+}
+
+export function trackToolbarSaveClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'save' });
+}
+
+export function trackToolbarAddClick() {
+  reportInteraction(shareAnalyticsEventNames.dashboardsToolbarActionsClicked, { item: 'add' });
+}