ref(breadcrumbs): Rename breadcrumbs types (#28853)

static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/index.tsx

@@ -1,5 +1,5 @@
 import {Organization} from 'app/types';
-import {Breadcrumb, BreadcrumbType} from 'app/types/breadcrumbs';
+import {BreadcrumbType, RawCrumb} from 'app/types/breadcrumbs';
 import {Event} from 'app/types/event';
 
 import Default from './default';
@@ -8,7 +8,7 @@ import Http from './http';
 
 type Props = {
   searchTerm: string;
-  breadcrumb: Breadcrumb;
+  breadcrumb: RawCrumb;
   event: Event;
   orgSlug: Organization['slug'];
 };

static/app/components/events/interfaces/breadcrumbs/breadcrumb/index.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
-import {BreadcrumbsWithDetails, BreadcrumbType} from 'app/types/breadcrumbs';
+import {BreadcrumbType, Crumb} from 'app/types/breadcrumbs';
 import {Event} from 'app/types/event';
 
 import Category from './category';
@@ -14,7 +14,7 @@ import Time from './time';
 import Type from './type';
 
 type Props = {
-  breadcrumb: BreadcrumbsWithDetails[0];
+  breadcrumb: Crumb;
   event: Event;
   orgSlug: Organization['slug'];
   searchTerm: string;

static/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx

@@ -13,7 +13,7 @@ import Tooltip from 'app/components/tooltip';
 import {IconSwitch} from 'app/icons';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
-import {BreadcrumbsWithDetails} from 'app/types/breadcrumbs';
+import {Crumb} from 'app/types/breadcrumbs';
 
 import Breadcrumb from './breadcrumb';
 
@@ -28,7 +28,7 @@ type Props = Pick<
   React.ComponentProps<typeof Breadcrumb>,
   'event' | 'orgSlug' | 'searchTerm' | 'relativeTime' | 'displayRelativeTime'
 > & {
-  breadcrumbs: BreadcrumbsWithDetails;
+  breadcrumbs: Crumb[];
   onSwitchTimeFormat: () => void;
   emptyMessage: Pick<
     React.ComponentProps<typeof PanelTable>,

static/app/components/events/interfaces/breadcrumbs/index.tsx

@@ -11,10 +11,10 @@ import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import {
-  Breadcrumb,
   BreadcrumbLevelType,
-  BreadcrumbsWithDetails,
   BreadcrumbType,
+  Crumb,
+  RawCrumb,
 } from 'app/types/breadcrumbs';
 import {EntryType, Event} from 'app/types/event';
 import {defined} from 'app/utils';
@@ -42,15 +42,15 @@ type Props = {
   organization: Organization;
   type: string;
   data: {
-    values: Array<Breadcrumb>;
+    values: Array<RawCrumb>;
   };
 };
 
 type State = {
   searchTerm: string;
-  breadcrumbs: BreadcrumbsWithDetails;
-  filteredByFilter: BreadcrumbsWithDetails;
-  filteredBySearch: BreadcrumbsWithDetails;
+  breadcrumbs: Crumb[];
+  filteredByFilter: Crumb[];
+  filteredBySearch: Crumb[];
   filterOptions: FilterOptions;
   displayRelativeTime: boolean;
   relativeTime?: string;
@@ -170,7 +170,7 @@ function BreadcrumbsContainer({data, event, organization, type: eventType}: Prop
     return filterLevels;
   }
 
-  function filterBySearch(newSearchTerm: string, crumbs: BreadcrumbsWithDetails) {
+  function filterBySearch(newSearchTerm: string, crumbs: Crumb[]) {
     if (!newSearchTerm.trim()) {
       return crumbs;
     }
@@ -248,7 +248,7 @@ function BreadcrumbsContainer({data, event, organization, type: eventType}: Prop
     return match[1];
   }
 
-  function getVirtualCrumb(): Breadcrumb | undefined {
+  function getVirtualCrumb(): RawCrumb | undefined {
     const exception = event.entries.find(entry => entry.type === EntryType.EXCEPTION);
 
     if (!exception && !event.message) {

static/app/components/events/interfaces/breadcrumbs/utils.tsx

@@ -1,13 +1,13 @@
 import {t} from 'app/locale';
 import {
-  Breadcrumb,
   BreadcrumbLevelType,
-  BreadcrumbsWithDetails,
   BreadcrumbType,
+  Crumb,
+  RawCrumb,
 } from 'app/types/breadcrumbs';
 import {defined} from 'app/utils';
 
-function convertCrumbType(breadcrumb: Breadcrumb): Breadcrumb {
+function convertCrumbType(breadcrumb: RawCrumb): RawCrumb {
   if (breadcrumb.type === BreadcrumbType.EXCEPTION) {
     return {
       ...breadcrumb,
@@ -62,7 +62,7 @@ function convertCrumbType(breadcrumb: Breadcrumb): Breadcrumb {
 
 function getCrumbDescriptionAndColor(
   type: BreadcrumbType
-): Pick<BreadcrumbsWithDetails[0], 'color' | 'description'> {
+): Pick<Crumb, 'color' | 'description'> {
   switch (type) {
     case BreadcrumbType.USER:
     case BreadcrumbType.UI:
@@ -134,7 +134,7 @@ function getCrumbDescriptionAndColor(
   }
 }
 
-export function transformCrumbs(breadcrumbs: Array<Breadcrumb>): BreadcrumbsWithDetails {
+export function transformCrumbs(breadcrumbs: Array<RawCrumb>): Crumb[] {
   return breadcrumbs.map((breadcrumb, index) => {
     const convertedCrumbType = convertCrumbType(breadcrumb);
     const {color, description} = getCrumbDescriptionAndColor(convertedCrumbType.type);

static/app/types/breadcrumbs.tsx

@@ -95,11 +95,13 @@ export type BreadcrumbTypeDefault = {
   data?: Record<string, any>;
 } & BreadcrumbTypeBase;
 
-export type Breadcrumb =
+export type RawCrumb =
   | BreadcrumbTypeNavigation
   | BreadcrumbTypeHTTP
   | BreadcrumbTypeDefault;
 
-export type BreadcrumbsWithDetails = Array<
-  Breadcrumb & {description: string; color: Color; id: number}
->;
+export type Crumb = RawCrumb & {
+  description: string;
+  color: Color;
+  id: number;
+};

static/app/types/event.tsx

@@ -1,7 +1,7 @@
 import {DebugImage} from 'app/components/events/interfaces/debugMeta/types';
 import {TraceContextType} from 'app/components/events/interfaces/spans/types';
 
-import {Breadcrumb} from './breadcrumbs';
+import {RawCrumb} from './breadcrumbs';
 import {Thread} from './events';
 import {StacktraceType} from './stacktrace';
 import {
@@ -41,7 +41,7 @@ type EntryDebugMeta = {
 type EntryBreadcrumbs = {
   type: EntryType.BREADCRUMBS;
   data: {
-    values: Array<Breadcrumb>;
+    values: Array<RawCrumb>;
   };
 };