analytics(flags): add initial analytics

static/app/components/events/featureFlags/eventFeatureFlagList.tsx

@@ -21,7 +21,9 @@ import {t} from 'sentry/locale';
 import type {Event, FeatureFlag} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
+import useOrganization from 'sentry/utils/useOrganization';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
 export function EventFeatureFlagList({
@@ -56,6 +58,7 @@ export function EventFeatureFlagList({
   const [sortMethod, setSortMethod] = useState<FlagSort>(FlagSort.EVAL);
   const {closeDrawer, isDrawerOpen, openDrawer} = useDrawer();
   const viewAllButtonRef = useRef<HTMLButtonElement>(null);
+  const organization = useOrganization();
 
   // Transform the flags array into something readable by the key-value component
   const hydrateFlags = (flags: FeatureFlag[] | undefined): KeyValueDataContentProps[] => {
@@ -85,6 +88,9 @@ export function EventFeatureFlagList({
     sortMethod === FlagSort.ALPHA ? handleSortAlphabetical(hydratedFlags) : hydratedFlags;
 
   const onViewAllFlags = useCallback(() => {
+    trackAnalytics('flags.view-all-clicked', {
+      organization,
+    });
     openDrawer(
       () => (
         <FeatureFlagDrawer
@@ -109,7 +115,7 @@ export function EventFeatureFlagList({
         transitionProps: {stiffness: 1000},
       }
     );
-  }, [openDrawer, event, group, project, sortMethod, hydratedFlags]);
+  }, [openDrawer, event, group, project, sortMethod, hydratedFlags, organization]);
 
   if (!hydratedFlags.length) {
     return null;
@@ -136,6 +142,10 @@ export function EventFeatureFlagList({
         }}
         onChange={selection => {
           setSortMethod(selection.value);
+          trackAnalytics('flags.sort-flags', {
+            organization,
+            sortMethod: selection.value,
+          });
         }}
         trigger={triggerProps => (
           <DropdownButton {...triggerProps} size="xs" icon={<IconSort />}>

static/app/components/events/featureFlags/featureFlagDrawer.tsx

@@ -26,7 +26,9 @@ import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {getShortEventId} from 'sentry/utils/events';
+import useOrganization from 'sentry/utils/useOrganization';
 
 export enum FlagSort {
   EVAL = 'eval',
@@ -70,6 +72,7 @@ export function FeatureFlagDrawer({
 }: FlagDrawerProps) {
   const [sortMethod, setSortMethod] = useState<FlagSort>(initialSort);
   const [search, setSearch] = useState('');
+  const organization = useOrganization();
 
   const handleSortAlphabetical = (flags: KeyValueDataContentProps[]) => {
     return [...flags].sort((a, b) => {
@@ -102,6 +105,10 @@ export function FeatureFlagDrawer({
         }}
         onChange={selection => {
           setSortMethod(selection.value);
+          trackAnalytics('flags.sort-flags', {
+            organization,
+            sortMethod: selection.value,
+          });
         }}
         trigger={triggerProps => (
           <DropdownButton {...triggerProps} size="xs" icon={<IconSort />}>

static/app/utils/analytics.tsx

@@ -5,6 +5,10 @@ import HookStore from 'sentry/stores/hookStore';
 import type {Hooks} from 'sentry/types/hooks';
 import type {DDMEventParameters} from 'sentry/utils/analytics/ddmAnalyticsEvents';
 import {ddmEventMap} from 'sentry/utils/analytics/ddmAnalyticsEvents';
+import {
+  featureFlagEventMap,
+  type FeatureFlagEventParameters,
+} from 'sentry/utils/analytics/featureFlagAnalyticsEvents';
 
 import type {AiSuggestedSolutionEventParameters} from './analytics/aiSuggestedSolutionAnalyticsEvents';
 import {aiSuggestedSolutionEventMap} from './analytics/aiSuggestedSolutionAnalyticsEvents';
@@ -62,6 +66,7 @@ interface EventParameters
     DashboardsEventParameters,
     DDMEventParameters,
     DiscoverEventParameters,
+    FeatureFlagEventParameters,
     FeedbackEventParameters,
     InsightEventParameters,
     IssueEventParameters,
@@ -89,6 +94,7 @@ const allEventMap: Record<string, string | null> = {
   ...dashboardsEventMap,
   ...ddmEventMap,
   ...discoverEventMap,
+  ...featureFlagEventMap,
   ...feedbackEventMap,
   ...growthEventMap,
   ...insightEventMap,

static/app/utils/analytics/featureFlagAnalyticsEvents.tsx

@@ -0,0 +1,11 @@
+export type FeatureFlagEventParameters = {
+  'flags.sort-flags': {sortMethod: string};
+  'flags.view-all-clicked': {};
+};
+
+export type FeatureFlagEventKey = keyof FeatureFlagEventParameters;
+
+export const featureFlagEventMap: Record<FeatureFlagEventKey, string | null> = {
+  'flags.view-all-clicked': 'Clicked View All Flags',
+  'flags.sort-flags': 'Sorted Flags',
+};