feat(tracemetrics): Update nav event (#103244)

Updates with better fields.

Author: k-fish

static/app/utils/analytics/metricsAnalyticsEvent.tsx

@@ -38,9 +38,11 @@ export type MetricsAnalyticsEventParameters = {
     organization: Organization;
   };
   'metrics.nav.rendered': {
+    has_feature_flag: boolean;
+    has_metrics_supported_platform: boolean;
+    metrics_supported_platform_name: string | undefined;
     metrics_tab_visible: boolean;
     organization: Organization;
-    platforms: Array<PlatformKey | 'unknown'>;
   };
   'metrics.onboarding': {
     organization: Organization;

static/app/views/nav/secondary/sections/explore/exploreSecondaryNav.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useMemo} from 'react';
+import {Fragment, useEffect, useMemo, useRef} from 'react';
 
 import Feature from 'sentry/components/acl/feature';
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
@@ -10,6 +10,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {useGetSavedQueries} from 'sentry/views/explore/hooks/useGetSavedQueries';
+import {canUseMetricsUI} from 'sentry/views/explore/metrics/metricsFlags';
 import {PRIMARY_NAV_GROUP_CONFIG} from 'sentry/views/nav/primary/config';
 import {SecondaryNav} from 'sentry/views/nav/secondary/secondary';
 import {ExploreSavedQueryNavItems} from 'sentry/views/nav/secondary/sections/explore/exploreSavedQueryNavItems';
@@ -38,23 +39,32 @@ export function ExploreSecondaryNav() {
     [projects]
   );
 
-  const hasMetricsSupportedPlatform = projects.some(project => {
-    const platform = project.platform || 'unknown';
-    return Array.from(limitedMetricsSupportPrefixes).some(prefix =>
-      platform.startsWith(prefix)
-    );
-  });
+  const metricsSupportedPlatformNameRef = useRef<string | undefined>(undefined);
+
+  if (!metricsSupportedPlatformNameRef.current) {
+    const metricsSupportedPlatform = projects.find(project => {
+      const platform = project.platform || 'unknown';
+      return Array.from(limitedMetricsSupportPrefixes).find(prefix =>
+        platform.startsWith(prefix)
+      );
+    });
+    metricsSupportedPlatformNameRef.current = metricsSupportedPlatform?.slug;
+  }
+
+  const hasMetricsSupportedPlatform = !!metricsSupportedPlatformNameRef.current;
 
   useEffect(() => {
     if (userPlatforms.length === 0) {
       return;
     }
     trackAnalytics('metrics.nav.rendered', {
       organization,
-      metrics_tab_visible: hasMetricsSupportedPlatform,
-      platforms: userPlatforms,
+      has_feature_flag: canUseMetricsUI(organization),
+      has_metrics_supported_platform: hasMetricsSupportedPlatform,
+      metrics_supported_platform_name: metricsSupportedPlatformNameRef.current,
+      metrics_tab_visible: hasMetricsSupportedPlatform && canUseMetricsUI(organization),
     });
-  }, [organization, hasMetricsSupportedPlatform, userPlatforms]);
+  }, [organization, hasMetricsSupportedPlatform, userPlatforms.length]);
 
   return (
     <Fragment>