chore(dashboard): Log events for download as image (#22793)

superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx

@@ -68,6 +68,7 @@ const createProps = () => ({
   lastModifiedTime: 0,
   isDropdownVisible: true,
   dataMask: {},
+  logEvent: jest.fn(),
 });
 const editModeOnProps = {
   ...createProps(),

superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx

@@ -36,6 +36,7 @@ import getDashboardUrl from 'src/dashboard/util/getDashboardUrl';
 import { getActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { FILTER_BOX_MIGRATION_STATES } from 'src/explore/constants';
+import { LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
 
 const propTypes = {
   addSuccessToast: PropTypes.func.isRequired,
@@ -65,6 +66,7 @@ const propTypes = {
   onSave: PropTypes.func.isRequired,
   showPropertiesModal: PropTypes.func.isRequired,
   manageEmbedded: PropTypes.func.isRequired,
+  logEvent: PropTypes.func,
   refreshLimit: PropTypes.number,
   refreshWarning: PropTypes.string,
   lastModifiedTime: PropTypes.number.isRequired,
@@ -182,6 +184,7 @@ class HeaderActionsDropdown extends React.PureComponent {
         )(domEvent).then(() => {
           menu.style.visibility = 'visible';
         });
+        this.props.logEvent?.(LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE);
         break;
       }
       case MENU_KEYS.TOGGLE_FULLSCREEN: {

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -464,6 +464,7 @@ class Header extends React.PureComponent {
       setRefreshFrequency,
       lastModifiedTime,
       filterboxMigrationState,
+      logEvent,
     } = this.props;
 
     const userCanEdit =
@@ -679,6 +680,7 @@ class Header extends React.PureComponent {
               filterboxMigrationState={filterboxMigrationState}
               isDropdownVisible={this.state.isDropdownVisible}
               setIsDropdownVisible={this.setIsDropdownVisible}
+              logEvent={logEvent}
             />
           }
           showFaveStar={user?.userId && dashboardInfo?.id}

superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx

@@ -156,6 +156,7 @@ const createProps = (overrides: any = {}) => ({
   toggleExpandSlice: jest.fn(),
   forceRefresh: jest.fn(),
   logExploreChart: jest.fn(),
+  logEvent: jest.fn(),
   exportCSV: jest.fn(),
   formData: { slice_id: 1, datasource: '58__table' },
   width: 100,

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -133,6 +133,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
   updateSliceName = () => ({}),
   toggleExpandSlice = () => ({}),
   logExploreChart = () => ({}),
+  logEvent,
   exportCSV = () => ({}),
   editMode = false,
   annotationQuery = {},
@@ -271,6 +272,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
                 toggleExpandSlice={toggleExpandSlice}
                 forceRefresh={forceRefresh}
                 logExploreChart={logExploreChart}
+                logEvent={logEvent}
                 exportCSV={exportCSV}
                 exportFullCSV={exportFullCSV}
                 supersetCanExplore={supersetCanExplore}

superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx

@@ -47,6 +47,7 @@ const createProps = (viz_type = 'sunburst') =>
     forceRefresh: jest.fn(),
     handleToggleFullSize: jest.fn(),
     toggleExpandSlice: jest.fn(),
+    logEvent: jest.fn(),
     slice: {
       slice_id: 371,
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20371%7D',

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -54,6 +54,7 @@ import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
 import { ResultsPaneOnDashboard } from 'src/explore/components/DataTablesPane';
 import Modal from 'src/components/Modal';
 import { DrillDetailMenuItems } from 'src/components/Chart/DrillDetail';
+import { LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
 
 const MENU_KEYS = {
   CROSS_FILTER_SCOPING: 'cross_filter_scoping',
@@ -137,6 +138,7 @@ export interface SliceHeaderControlsProps {
 
   forceRefresh: (sliceId: number, dashboardId: number) => void;
   logExploreChart?: (sliceId: number) => void;
+  logEvent?: (eventName: string, eventData?: object) => void;
   toggleExpandSlice?: (sliceId: number) => void;
   exportCSV?: (sliceId: number) => void;
   exportFullCSV?: (sliceId: number) => void;
@@ -321,6 +323,9 @@ class SliceHeaderControls extends React.PureComponent<
         )(domEvent).then(() => {
           menu.style.visibility = 'visible';
         });
+        this.props.logEvent?.(LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE, {
+          chartId: this.props.slice.slice_id,
+        });
         break;
       }
       default:

superset-frontend/src/dashboard/components/gridComponents/Chart.jsx

@@ -408,6 +408,7 @@ class Chart extends React.Component {
       postTransformProps,
       datasetsStatus,
       isInView,
+      logEvent,
     } = this.props;
 
     const { width } = this.state;
@@ -457,6 +458,7 @@ class Chart extends React.Component {
           editMode={editMode}
           annotationQuery={chart.annotationQuery}
           logExploreChart={this.logExploreChart}
+          logEvent={logEvent}
           onExploreChart={this.onExploreChart}
           exportCSV={this.exportCSV}
           exportFullCSV={this.exportFullCSV}

superset-frontend/src/logger/LogUtils.ts

@@ -47,6 +47,9 @@ export const LOG_ACTIONS_DATASET_CREATION_SUCCESS = 'dataset_creation_success';
 export const LOG_ACTIONS_SPA_NAVIGATION = 'spa_navigation';
 export const LOG_ACTIONS_CONFIRM_OVERWRITE_DASHBOARD_METADATA =
   'confirm_overwrite_dashboard_metadata';
+export const LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE =
+  'dashboard_download_as_image';
+export const LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE = 'chart_download_as_image';
 
 // Log event types --------------------------------------------------------------
 export const LOG_EVENT_TYPE_TIMING = new Set([
@@ -67,6 +70,8 @@ export const LOG_EVENT_TYPE_USER = new Set([
   LOG_ACTIONS_PERIODIC_RENDER_DASHBOARD,
   LOG_ACTIONS_MOUNT_EXPLORER,
   LOG_ACTIONS_CONFIRM_OVERWRITE_DASHBOARD_METADATA,
+  LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE,
+  LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE,
 ]);
 
 export const LOG_EVENT_DATASET_TYPE_DATASET_CREATION = [