Expressions: Fix duplicate SQL expression tracking events (#114239)

* Expressions: Fix duplicate SQL expression tracking events

* fix(tracking): event firing on type select dropdown

* chore(queries): wrap handler with useCallback

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx

@@ -1,7 +1,9 @@
+import { useCallback } from 'react';
+
 import { CoreApp, DataSourceApi, DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { t, Trans } from '@grafana/i18n';
-import { config, getDataSourceSrv } from '@grafana/runtime';
+import { config, getDataSourceSrv, reportInteraction } from '@grafana/runtime';
 import {
   SceneObjectBase,
   SceneComponentProps,
@@ -337,11 +339,24 @@ export function PanelDataQueriesTabRendered({ model }: SceneComponentProps<Panel
   const { data, queries } = model.queryRunner.useState();
   const { openDrawer: openQueryLibraryDrawer, queryLibraryEnabled } = useQueryLibraryContext();
 
+  const handleAddExpression = useCallback(
+    (type: ExpressionQueryType) => {
+      reportInteraction('dashboards_expression_interaction', {
+        action: 'add_expression',
+        expression_type: type,
+        context: 'panel_query_section',
+      });
+      model.onAddExpressionOfType(type);
+    },
+    [model]
+  );
+
   if (!datasource || !dsSettings || !data) {
     return null;
   }
 
   const showAddButton = !isSharedDashboardQuery(dsSettings.name);
+
   const onSelectQueryFromLibrary = async (query: DataQuery) => {
     // ensure all queries explicitly define a datasource
     const enrichedQueries = queries.map((q) =>
@@ -421,7 +436,7 @@ export function PanelDataQueriesTabRendered({ model }: SceneComponentProps<Panel
           </>
         )}
         {config.expressionsEnabled && model.isExpressionsSupported(dsSettings) && (
-          <ExpressionTypeDropdown handleOnSelect={model.onAddExpressionOfType}>
+          <ExpressionTypeDropdown handleOnSelect={handleAddExpression}>
             <Button icon="plus" variant="secondary" data-testid={selectors.components.QueryTab.addExpression}>
               <Trans i18nKey="dashboard-scene.panel-data-queries-tab-rendered.expression">Expression&nbsp;</Trans>
             </Button>

public/app/features/expressions/ExpressionQueryEditor.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { DataSourceApi, FeatureState, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
-import { reportInteraction } from '@grafana/runtime';
 import { Button, FeatureBadge, IconButton, InlineField, PopoverContent, useStyles2 } from '@grafana/ui';
 
 import { ClassicConditions } from './components/ClassicConditions';
@@ -97,22 +96,6 @@ export function ExpressionQueryEditor(props: ExpressionQueryEditorProps) {
 
   const styles = useStyles2(getStyles);
 
-  const initialExpressionRef = useRef(query.expression);
-  const hasTrackedAddExpression = useRef(false);
-
-  useEffect(() => {
-    // Only track if 1) query has a type, and 2) we haven't tracked yet for this component instance, and
-    // 3) initial expression was empty (indicating a new expression, not editing existing)
-    if (query.type && !hasTrackedAddExpression.current && !initialExpressionRef.current) {
-      reportInteraction('dashboards_expression_interaction', {
-        action: 'add_expression',
-        expression_type: query.type,
-        context: 'panel_query_section',
-      });
-      hasTrackedAddExpression.current = true;
-    }
-  }, [query.type, query.refId]);
-
   useEffect(() => {
     setCachedExpression(query.type, query.expression);
   }, [query.expression, query.type, setCachedExpression]);