Prometheus: Add report interaction for editor modes (#47940) (#48099)

* Prometheus: Add report interaction for editor modes

* Add new query

* Fix test

* Update public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

* Add app to feature tracking

* Update

(cherry picked from commit 28665a869b)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx

@@ -18,6 +18,13 @@ jest.mock('../../components/monaco-query-field/MonacoQueryFieldWrapper', () => {
   };
 });
 
+jest.mock('@grafana/runtime', () => {
+  return {
+    ...jest.requireActual('@grafana/runtime'),
+    reportInteraction: jest.fn(),
+  };
+});
+
 const defaultQuery = {
   refId: 'A',
   expr: 'metric{label1="foo", label2="bar"}',

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

@@ -1,5 +1,6 @@
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 import { LoadingState } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
 import { Button, ConfirmModal } from '@grafana/ui';
 import { PromQueryEditorProps } from '../../components/types';
@@ -17,15 +18,22 @@ import { PromQuery } from '../../types';
 import { FeedbackLink } from '../shared/FeedbackLink';
 
 export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props) => {
-  const { onChange, onRunQuery, data } = props;
+  const { onChange, onRunQuery, data, app } = props;
   const [parseModalOpen, setParseModalOpen] = useState(false);
   const [dataIsStale, setDataIsStale] = useState(false);
 
-  const query = getQueryWithDefaults(props.query, props.app);
+  const query = getQueryWithDefaults(props.query, app);
   const editorMode = query.editorMode!;
 
   const onEditorModeChange = useCallback(
     (newMetricEditorMode: QueryEditorMode) => {
+      reportInteraction('user_grafana_prometheus_editor_mode_clicked', {
+        newEditor: newMetricEditorMode,
+        previousEditor: query.editorMode ?? '',
+        newQuery: !query.expr,
+        app: app ?? '',
+      });
+
       if (newMetricEditorMode === QueryEditorMode.Builder) {
         const result = buildVisualQueryFromString(query.expr || '');
         // If there are errors, give user a chance to decide if they want to go to builder as that can loose some data.
@@ -36,7 +44,7 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
       }
       changeEditorMode(query, newMetricEditorMode, onChange);
     },
-    [onChange, query]
+    [onChange, query, app]
   );
 
   useEffect(() => {