settings: add instrumentation

Author: JonasBa

static/app/utils/analytics/breadcrumbsAnalyticsEvents.tsx

@@ -1,12 +1,12 @@
 export type BreadcrumbsAnalyticsEventParameters = {
   'breadcrumbs.link.clicked': {organization: null};
-  'breadcrumbs.menu.clicked': {organization: null};
+  'breadcrumbs.menu.opened': {organization: null};
 };
 
 export const breadcrumbsAnalyticsEventMap: Record<
   keyof BreadcrumbsAnalyticsEventParameters,
   string | null
 > = {
   'breadcrumbs.link.clicked': 'Breadcrumbs: Link Clicked',
-  'breadcrumbs.menu.clicked': 'Breadcrumbs: Menu Clicked',
+  'breadcrumbs.menu.opened': 'Breadcrumbs: Menu Opened',
 };

static/app/views/settings/components/settingsBreadcrumb/index.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import recreateRoute from 'sentry/utils/recreateRoute';
 
@@ -31,6 +32,10 @@ function SettingsBreadcrumb({className, routes, params}: Props) {
 
   const lastRouteIndex = routes.map(r => !!r.name).lastIndexOf(true);
 
+  function onSettingsBreadcrumbLinkClick() {
+    trackAnalytics('breadcrumbs.link.clicked', {organization: null});
+  }
+
   return (
     <Breadcrumbs aria-label={t('Settings Breadcrumbs')} className={className}>
       {routes.map((route, i) => {
@@ -54,7 +59,10 @@ function SettingsBreadcrumb({className, routes, params}: Props) {
         }
         return (
           <Crumb key={`${route.name}:${route.path}`}>
-            <CrumbLink to={recreateRoute(route, {routes, params})}>
+            <CrumbLink
+              to={recreateRoute(route, {routes, params})}
+              onClick={onSettingsBreadcrumbLinkClick}
+            >
               {pathTitle || route.name}
             </CrumbLink>
             {isLast ? null : <Divider />}

static/app/views/settings/components/settingsBreadcrumb/organizationCrumb.tsx

@@ -6,6 +6,7 @@ import IdBadge from 'sentry/components/idBadge';
 import {t} from 'sentry/locale';
 import OrganizationsStore from 'sentry/stores/organizationsStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import recreateRoute from 'sentry/utils/recreateRoute';
 import {resolveRoute} from 'sentry/utils/resolveRoute';
 import {testableWindowLocation} from 'sentry/utils/testableWindowLocation';
@@ -76,6 +77,11 @@ function OrganizationCrumb({routes, route, ...props}: SettingsBreadcrumbProps) {
         </CrumbLink>
       }
       onCrumbSelect={handleSelect}
+      onOpenChange={open => {
+        if (open) {
+          trackAnalytics('breadcrumbs.menu.opened', {organization: null});
+        }
+      }}
       hasMenu={hasMenu}
       route={route}
       value={organization.slug}

static/app/views/settings/components/settingsBreadcrumb/projectCrumb.tsx

@@ -4,6 +4,7 @@ import {ProjectAvatar} from 'sentry/components/core/avatar/projectAvatar';
 import IdBadge from 'sentry/components/idBadge';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import recreateRoute from 'sentry/utils/recreateRoute';
 import replaceRouterParams from 'sentry/utils/replaceRouterParams';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -65,6 +66,11 @@ function ProjectCrumb({routes, route, ...props}: SettingsBreadcrumbProps) {
       }
       value={activeProject?.slug ?? ''}
       onCrumbSelect={handleSelect}
+      onOpenChange={open => {
+        if (open) {
+          trackAnalytics('breadcrumbs.menu.opened', {organization: null});
+        }
+      }}
       onSearch={onSearch}
       options={projects.map(project => ({
         value: project.slug,

static/app/views/settings/components/settingsBreadcrumb/teamCrumb.tsx

@@ -1,6 +1,7 @@
 import {TeamAvatar} from 'sentry/components/core/avatar/teamAvatar';
 import IdBadge from 'sentry/components/idBadge';
 import {t} from 'sentry/locale';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import recreateRoute from 'sentry/utils/recreateRoute';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useParams} from 'sentry/utils/useParams';
@@ -38,6 +39,11 @@ function TeamCrumb({routes, route, ...props}: SettingsBreadcrumbProps) {
           })
         );
       }}
+      onOpenChange={open => {
+        if (open) {
+          trackAnalytics('breadcrumbs.menu.opened', {organization: null});
+        }
+      }}
       hasMenu={hasMenu}
       route={route}
       value={team.slug}