breadcrumbs: add breadcrumb events

Author: JonasBa

static/app/components/breadcrumbs.stories.tsx

@@ -15,7 +15,7 @@ export default Storybook.story('Breadcrumbs', story => {
         <Breadcrumbs
           crumbs={[
             {label: 'Organization', to: '/organizations/sentry/'},
-            {label: 'Projects', to: '/organizations/sentry/projects/'},
+            {label: 'Projects'},
             {
               label: 'Project Settings',
               to: '/settings/projects/javascript/',

static/app/components/breadcrumbs.tsx

@@ -3,22 +3,17 @@ import {Fragment} from 'react';
 import {Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
-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 {IconChevron} from 'sentry/icons';
+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
@@ -45,6 +40,7 @@ export function Breadcrumbs({crumbs, ...props}: BreadcrumbsProps) {
   }
 
   if (crumbs[crumbs.length - 1]?.to) {
+    // We should not be mutating the crumbs
     crumbs[crumbs.length - 1]!.to = null;
   }
 
@@ -53,8 +49,8 @@ export function Breadcrumbs({crumbs, ...props}: BreadcrumbsProps) {
       gap="xs"
       align="center"
       padding="md 0"
-      {...props}
       data-test-id="breadcrumb-list"
+      {...props}
     >
       {crumbs.map((crumb, index) => {
         return (
@@ -63,7 +59,9 @@ export function Breadcrumbs({crumbs, ...props}: BreadcrumbsProps) {
               crumb={crumb}
               variant={index === crumbs.length - 1 ? 'primary' : 'muted'}
             />
-            {index < crumbs.length - 1 ? <BreadcumbChevron /> : null}
+            {index < crumbs.length - 1 ? (
+              <IconChevron size="xs" direction="right" color="subText" />
+            ) : null}
           </Fragment>
         );
       })}
@@ -77,30 +75,29 @@ 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}
-        </Text>
+        <Text variant={props.variant}>{props.crumb.label}</Text>
       </BreadcrumbLink>
     );
   }
-  return (
-    <Flex data-test-id="breadcrumb-item" maxWidth="400px" align="center">
-      <Text as="span" ellipsis variant={props.variant}>
-        {props.crumb.label}
-      </Text>
-    </Flex>
-  );
+
+  return <Text variant={props.variant}>{props.crumb.label}</Text>;
 }
 
-interface BreadcrumbLinkProps {
-  to: LinkProps['to'];
+interface BreadcrumbLinkProps extends LinkProps {
   children?: React.ReactNode;
   preservePageFilters?: boolean;
 }
@@ -109,15 +106,6 @@ function BreadcrumbLink(props: BreadcrumbLinkProps) {
   if (props.preservePageFilters) {
     return <GlobalSelectionLink {...props} />;
   }
-  return <Link {...props} />;
-}
 
-function BreadcumbChevron() {
-  return (
-    <Text variant="muted">
-      <Flex flexShrink={0} align="center">
-        <Chevron direction="right" color="subText" />
-      </Flex>
-    </Text>
-  );
+  return <Link {...props} />;
 }

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'),
                   },
                 ]}

static/app/views/preprod/buildComparison/header/buildCompareHeaderContent.tsx

@@ -37,14 +37,14 @@ export function BuildCompareHeaderContent(props: BuildCompareHeaderContentProps)
   const breadcrumbs: Crumb[] = [
     {
       to: '#',
-      label: 'Releases',
+      label: t('Releases'),
     },
     {
       to: `/organizations/${organization.slug}/preprod/${projectId}/${buildDetails.id}/`,
-      label: buildDetails.app_info.version,
+      label: buildDetails.app_info.version ?? t('Build Version'),
     },
     {
-      label: 'Compare',
+      label: t('Compare'),
     },
   ];
 

static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx

@@ -69,7 +69,9 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
     },
     label: project ? (
       <ProjectBadge disableLink project={project} avatarSize={16} />
-    ) : null,
+    ) : (
+      t('Project')
+    ),
   };
 
   const replayCrumb = {