feat(schema-hints): Add analytics for hint clicks and drawer open/close (#87536)

Added analytics to be able to tell which hints have been clicked, where
they have been clicked from, and when a drawer has been open/closed. A
drawer can be seen as open or closed when only
`schema_hints_drawer_open` is defined. Side note: the `onOpen` function
was never actually being called in the `GlobalDrawer` hook so I added
that into the `openDrawer` callback.

Author: nikkikapadia

static/app/components/globalDrawer/index.tsx

@@ -99,10 +99,10 @@ export function GlobalDrawer({children}: any) {
   >();
   // If no config is set, the global drawer is closed.
   const isDrawerOpen = !!currentDrawerConfig;
-  const openDrawer = useCallback<DrawerContextType['openDrawer']>(
-    (renderer, options) => overwriteDrawerConfig({renderer, options}),
-    []
-  );
+  const openDrawer = useCallback<DrawerContextType['openDrawer']>((renderer, options) => {
+    overwriteDrawerConfig({renderer, options});
+    options.onOpen?.();
+  }, []);
   const closeDrawer = useCallback<DrawerContextType['closeDrawer']>(
     () => overwriteDrawerConfig(undefined),
     []

static/app/utils/analytics/tracingEventMap.tsx

@@ -29,6 +29,13 @@ export type TracingEventParameters = {
     visualizes_count: number;
     empty_buckets_percentage?: number[];
   };
+  'trace.explorer.schema_hints_click': {
+    source: 'list' | 'drawer';
+    hint_key?: string;
+  };
+  'trace.explorer.schema_hints_drawer': {
+    drawer_open: boolean;
+  };
   'trace.load.empty_state': {
     source: TraceWaterFallSource;
   };
@@ -163,6 +170,10 @@ export const tracingEventMap: Record<TracingEventKey, string | null> = {
   'trace.load.empty_state': 'Trace Load Empty State',
   'trace.load.error_state': 'Trace Load Error State',
   'trace.explorer.metadata': 'Improved Trace Explorer Pageload Metadata',
+  'trace.explorer.schema_hints_click':
+    'Improved Trace Explorer: Schema Hints Click Events',
+  'trace.explorer.schema_hints_drawer':
+    'Improved Trace Explorer: Schema Hints Drawer Events',
   'trace.trace_layout.change': 'Changed Trace Layout',
   'trace.trace_layout.drawer_minimize': 'Minimized Trace Drawer',
   'trace.trace_drawer_explore_search': 'Searched Trace Explorer',

static/app/views/explore/components/schemaHintsDrawer.tsx

@@ -9,9 +9,11 @@ import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Tag} from 'sentry/types/group';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {prettifyTagKey} from 'sentry/utils/discover/fields';
 import {FieldKind, FieldValueType, getFieldDefinition} from 'sentry/utils/fields';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import useOrganization from 'sentry/utils/useOrganization';
 import {
   useExploreQuery,
   useSetExploreQuery,
@@ -24,7 +26,7 @@ type SchemaHintsDrawerProps = {
 function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
   const exploreQuery = useExploreQuery();
   const setExploreQuery = useSetExploreQuery();
-
+  const organization = useOrganization();
   const [searchQuery, setSearchQuery] = useState('');
 
   const selectedFilterKeys = useMemo(() => {
@@ -84,8 +86,13 @@ function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
         );
       }
       setExploreQuery(filterQuery.formatString());
+      trackAnalytics('trace.explorer.schema_hints_click', {
+        hint_key: hint.key,
+        source: 'drawer',
+        organization,
+      });
     },
-    [exploreQuery, setExploreQuery]
+    [exploreQuery, organization, setExploreQuery]
   );
 
   const noAttributesMessage = (

static/app/views/explore/components/schemaHintsList.tsx

@@ -12,6 +12,7 @@ import {getFunctionTags} from 'sentry/components/performance/spanSearchQueryBuil
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Tag, TagCollection} from 'sentry/types/group';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {prettifyTagKey} from 'sentry/utils/discover/fields';
 import {
   type AggregationKey,
@@ -21,6 +22,7 @@ import {
 } from 'sentry/utils/fields';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import SchemaHintsDrawer from 'sentry/views/explore/components/schemaHintsDrawer';
 import {SCHEMA_HINTS_LIST_ORDER_KEYS} from 'sentry/views/explore/components/schemaHintsUtils/schemaHintsListOrder';
 import {
@@ -65,7 +67,7 @@ function SchemaHintsList({
   const exploreQuery = useExploreQuery();
   const setExploreQuery = useSetExploreQuery();
   const location = useLocation();
-
+  const organization = useOrganization();
   const {openDrawer, isDrawerOpen, closeDrawer} = useDrawer();
 
   const functionTags = useMemo(() => {
@@ -193,6 +195,19 @@ function SchemaHintsList({
                   )
                 );
               },
+              onOpen: () => {
+                trackAnalytics('trace.explorer.schema_hints_drawer', {
+                  drawer_open: true,
+                  organization,
+                });
+              },
+
+              onClose: () => {
+                trackAnalytics('trace.explorer.schema_hints_drawer', {
+                  drawer_open: false,
+                  organization,
+                });
+              },
             }
           );
         }
@@ -215,11 +230,17 @@ function SchemaHintsList({
         isBoolean ? 'True' : hint.kind === FieldKind.MEASUREMENT ? '>0' : ''
       );
       setExploreQuery(newSearchQuery.formatString());
+      trackAnalytics('trace.explorer.schema_hints_click', {
+        hint_key: hint.key,
+        source: 'list',
+        organization,
+      });
     },
     [
       exploreQuery,
       setExploreQuery,
       isDrawerOpen,
+      organization,
       openDrawer,
       filterTagsSorted,
       location.pathname,