breadcrumbs: add breadcrumb events

Author: JonasBa

static/app/components/breadcrumbs.tsx

@@ -7,18 +7,13 @@ import {Chevron} from 'sentry/components/chevron';
 import type {LinkProps} from 'sentry/components/core/link';
 import {Link} from 'sentry/components/core/link';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
+import {trackAnalytics} from 'sentry/utils/analytics';
 
 export interface Crumb {
   /**
    * Label of the crumb
    */
-  label: React.ReactNode;
-
-  /**
-   * Component will try to come up with unique key, but you can provide your own
-   * (used when mapping over crumbs)
-   */
-  key?: string;
+  label: NonNullable<React.ReactNode>;
 
   /**
    * It will keep the page filter values (projects, environments, time) in the
@@ -77,12 +72,19 @@ interface BreadCrumbItemProps {
 }
 
 function BreadCrumbItem(props: BreadCrumbItemProps) {
+  function onBreadcrumbLinkClick() {
+    if (props.crumb.to) {
+      trackAnalytics('breadcrumbs.link.clicked', {organization: null});
+    }
+  }
+
   if (props.crumb.to) {
     return (
       <BreadcrumbLink
         to={props.crumb.to}
         preservePageFilters={props.crumb.preservePageFilters}
         data-test-id="breadcrumb-link"
+        onClick={onBreadcrumbLinkClick}
       >
         <Text as="span" variant="muted">
           {props.crumb.label}
@@ -91,16 +93,20 @@ function BreadCrumbItem(props: BreadCrumbItemProps) {
     );
   }
   return (
-    <Flex data-test-id="breadcrumb-item" maxWidth="400px" align="center">
+    <Flex
+      data-test-id="breadcrumb-item"
+      maxWidth="400px"
+      align="center"
+      onClick={onBreadcrumbLinkClick}
+    >
       <Text as="span" ellipsis variant={props.variant}>
         {props.crumb.label}
       </Text>
     </Flex>
   );
 }
 
-interface BreadcrumbLinkProps {
-  to: LinkProps['to'];
+interface BreadcrumbLinkProps extends LinkProps {
   children?: React.ReactNode;
   preservePageFilters?: boolean;
 }

static/app/utils/analytics.tsx

@@ -40,6 +40,8 @@ import {
 
 import type {AgentMonitoringEventParameters} from './analytics/agentMonitoringAnalyticsEvents';
 import {agentMonitoringEventMap} from './analytics/agentMonitoringAnalyticsEvents';
+import type {BreadcrumbsAnalyticsEventParameters} from './analytics/breadcrumbsAnalyticsEvents';
+import {breadcrumbsAnalyticsEventMap} from './analytics/breadcrumbsAnalyticsEvents';
 import type {CoreUIEventParameters} from './analytics/coreuiAnalyticsEvents';
 import {coreUIEventMap} from './analytics/coreuiAnalyticsEvents';
 import type {DashboardsEventParameters} from './analytics/dashboardsAnalyticsEvents';
@@ -98,6 +100,7 @@ interface EventParameters
   extends GrowthEventParameters,
     AgentMonitoringEventParameters,
     AlertsEventParameters,
+    BreadcrumbsAnalyticsEventParameters,
     CoreUIEventParameters,
     DashboardsEventParameters,
     DiscoverEventParameters,
@@ -135,6 +138,7 @@ interface EventParameters
 const allEventMap: Record<string, string | null> = {
   ...agentMonitoringEventMap,
   ...alertsEventMap,
+  ...breadcrumbsAnalyticsEventMap,
   ...coreUIEventMap,
   ...dashboardsEventMap,
   ...discoverEventMap,

static/app/utils/analytics/breadcrumbsAnalyticsEvents.tsx

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

static/app/views/discover/landing.tsx

@@ -187,12 +187,10 @@ function DiscoverLanding() {
               <Breadcrumbs
                 crumbs={[
                   {
-                    key: 'discover-homepage',
                     label: t('Discover'),
                     to: getDiscoverLandingUrl(organization),
                   },
                   {
-                    key: 'discover-saved-queries',
                     label: t('Saved Queries'),
                   },
                 ]}