ref(ui): Renamed breadcrumbs files (#19013)

src/sentry/static/sentry/app/components/events/eventEntriesBreadcrumbs.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import Feature from 'app/components/acl/feature';
 import BreadcrumbsInterface from 'app/components/events/interfaces/breadcrumbs/breadcrumbs';
-import BreadcrumbsInterfaceV2 from 'app/components/events/interfaces/breadcrumbsV2/breadcrumbs';
+import {Breadcrumbs} from 'app/components/events/interfaces/breadcrumbsV2/breadcrumbs';
 
-type Props = React.ComponentProps<typeof BreadcrumbsInterfaceV2>;
+type Props = React.ComponentProps<typeof Breadcrumbs>;
 type BreadcrumbsInterfaceProps = React.ComponentProps<typeof BreadcrumbsInterface>;
 
 const EventEntriesBreadcrumbs = (props: Props) => (
   <Feature features={['breadcrumbs-v2']}>
     {({hasFeature}) =>
       hasFeature ? (
-        <BreadcrumbsInterfaceV2 {...props} />
+        <Breadcrumbs {...props} />
       ) : (
         <BreadcrumbsInterface {...(props as BreadcrumbsInterfaceProps)} />
       )

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbData/breadcrumbData.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import {Event} from 'app/types';
-
-import BreadcrumbDataDefault from './breadcrumbDataDefault';
-import BreadcrumbDataException from './breadcrumbDataException';
-import BreadcrumbDataHttp from './breadcrumbDataHttp';
-import {Breadcrumb, BreadcrumbType} from '../types';
-
-type Props = {
-  breadcrumb: Breadcrumb;
-  event: Event;
-  orgId: string | null;
-};
-
-const BreadcrumbData = ({breadcrumb, event, orgId}: Props) => {
-  if (breadcrumb.type === BreadcrumbType.HTTP) {
-    return <BreadcrumbDataHttp breadcrumb={breadcrumb} />;
-  }
-
-  if (
-    breadcrumb.type === BreadcrumbType.WARNING ||
-    breadcrumb.type === BreadcrumbType.ERROR
-  ) {
-    return (
-      <BreadcrumbDataException event={event} orgId={orgId} breadcrumb={breadcrumb} />
-    );
-  }
-
-  return <BreadcrumbDataDefault breadcrumb={breadcrumb} />;
-};
-
-export default BreadcrumbData;

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbFilter/breadcrumbFilterGroupIcon.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {IconWrapper} from '../styles';
-import {IconProps} from '../types';
-import {BreadcrumbDetails} from './types';
-
-type Props = Omit<BreadcrumbDetails, 'description'>;
-
-const BreadcrumbFilterGroupIcon = ({icon, color}: Props) => {
-  if (!icon) return null;
-
-  const Icon = icon as React.ComponentType<IconProps>;
-
-  return (
-    <IconWrapper color={color} size={20}>
-      <Icon size="xs" />
-    </IconWrapper>
-  );
-};
-
-export default BreadcrumbFilterGroupIcon;

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbs.tsx

@@ -20,21 +20,19 @@ import {
   BreadcrumbType,
   BreadcrumbLevelType,
 } from './types';
-import BreadcrumbFilter from './breadcrumbFilter/breadcrumbFilter';
-import convertBreadcrumbType from './convertBreadcrumbType';
-import getBreadcrumbTypeDetails from './getBreadcrumbTypeDetails';
-import {FilterGroupType} from './breadcrumbFilter/types';
-import BreadcrumbsListHeader from './breadcrumbsListHeader';
-import BreadcrumbsListBody from './breadcrumbsListBody';
-import BreadcrumbLevel from './breadcrumbLevel';
-import BreadcrumbIcon from './breadcrumbIcon';
+import {getTypeDetails} from './getTypeDetails';
+import {Filter} from './filter/filter';
+import {converType} from './convertType';
+import {FilterGroupType} from './filter/types';
+import {ListHeader} from './listHeader';
+import {ListBody} from './listBody';
+import {Level} from './level';
+import {Icon} from './icon';
 
 const MAX_CRUMBS_WHEN_COLLAPSED = 10;
 
 type BreadcrumbWithDetails = Breadcrumb & BreadcrumbDetails & {id: number};
-type BreadcrumbFilterGroups = React.ComponentProps<
-  typeof BreadcrumbFilter
->['filterGroups'];
+type FilterGroups = React.ComponentProps<typeof Filter>['filterGroups'];
 
 type State = {
   isCollapsed: boolean;
@@ -43,7 +41,7 @@ type State = {
   filteredByFilter: Array<BreadcrumbWithDetails>;
   filteredByCustomSearch: Array<BreadcrumbWithDetails>;
   filteredBreadcrumbs: Array<BreadcrumbWithDetails>;
-  filterGroups: BreadcrumbFilterGroups;
+  filterGroups: FilterGroups;
 };
 
 type Props = {
@@ -55,7 +53,7 @@ type Props = {
   };
 };
 
-class BreadcrumbsContainer extends React.Component<Props, State> {
+class Breadcrumbs extends React.Component<Props, State> {
   state: State = {
     isCollapsed: true,
     searchTerm: '',
@@ -80,21 +78,19 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
       breadcrumbs = [...breadcrumbs, virtualCrumb];
     }
 
-    const breadcrumbTypes: BreadcrumbFilterGroups = [];
-    const breadcrumbLevels: BreadcrumbFilterGroups = [];
+    const breadcrumbTypes: FilterGroups = [];
+    const breadcrumbLevels: FilterGroups = [];
 
     const convertedBreadcrumbs = breadcrumbs.map((breadcrumb, index) => {
-      const convertedBreadcrumb = convertBreadcrumbType(breadcrumb);
-      const breadcrumbTypeDetails = getBreadcrumbTypeDetails(convertedBreadcrumb.type);
+      const convertedBreadcrumb = converType(breadcrumb);
+      const breadcrumbTypeDetails = getTypeDetails(convertedBreadcrumb.type);
 
       if (!breadcrumbTypes.find(b => b.type === convertedBreadcrumb.type)) {
         breadcrumbTypes.push({
           groupType: FilterGroupType.TYPE,
           type: convertedBreadcrumb.type,
           description: breadcrumbTypeDetails.description,
-          symbol: (
-            <BreadcrumbIcon {...omit(breadcrumbTypeDetails, 'description')} size="xs" />
-          ),
+          symbol: <Icon {...omit(breadcrumbTypeDetails, 'description')} size="xs" />,
           isChecked: true,
         });
       }
@@ -103,7 +99,7 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
         breadcrumbLevels.push({
           groupType: FilterGroupType.LEVEL,
           type: String(convertedBreadcrumb?.level) as BreadcrumbLevelType,
-          symbol: <BreadcrumbLevel level={convertedBreadcrumb.level} />,
+          symbol: <Level level={convertedBreadcrumb.level} />,
           isChecked: true,
         });
       }
@@ -199,7 +195,7 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
     };
   };
 
-  handleFilter = (filterGroups: BreadcrumbFilterGroups) => () => {
+  handleFilter = (filterGroups: FilterGroups) => () => {
     //types
     const breadcrumbFilterGroupTypes = filterGroups
       .filter(
@@ -310,15 +306,13 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
       <EventDataSection
         type={type}
         title={
-          <h3>
-            <GuideAnchor target="breadcrumbs" position="bottom">
-              {t('Breadcrumbs')}
-            </GuideAnchor>
-          </h3>
+          <GuideAnchor target="breadcrumbs" position="bottom">
+            <h3>{t('Breadcrumbs')} </h3>
+          </GuideAnchor>
         }
         actions={
           <Search>
-            <BreadcrumbFilter onFilter={this.handleFilter} filterGroups={filterGroups} />
+            <Filter onFilter={this.handleFilter} filterGroups={filterGroups} />
             <StyledSearchBar
               placeholder={t('Search breadcrumbs\u2026')}
               onChange={this.handleFilterBySearchTerm}
@@ -332,8 +326,8 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
         <Content>
           {filteredCollapsedBreadcrumbs.length > 0 ? (
             <React.Fragment>
-              <BreadcrumbsListHeader />
-              <BreadcrumbsListBody
+              <ListHeader />
+              <ListBody
                 event={event}
                 orgId={orgId}
                 onToggleCollapse={this.handleToggleCollapse}
@@ -359,7 +353,7 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
   }
 }
 
-export default BreadcrumbsContainer;
+export {Breadcrumbs};
 
 const Content = styled('div')`
   border: 1px solid ${p => p.theme.borderDark};

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbCategory.tsx → src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/category.tsx

@@ -10,18 +10,18 @@ type Props = {
   category?: string | null;
 };
 
-const BreadcrumbCategory = ({category}: Props) => {
+const Category = ({category}: Props) => {
   const title = !defined(category) ? t('generic') : category;
   return (
     <Tooltip title={title}>
-      <Category title={title}>{title}</Category>
+      <Wrapper title={title}>{title}</Wrapper>
     </Tooltip>
   );
 };
 
-export default BreadcrumbCategory;
+export {Category};
 
-const Category = styled('div')`
+const Wrapper = styled('div')`
   color: ${p => p.theme.gray5};
   font-size: ${p => p.theme.fontSizeSmall};
   font-weight: 700;

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbCollapsed.tsx → src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/collapsed.tsx

@@ -12,7 +12,7 @@ type Props = {
   quantity: number;
 };
 
-const BreadcrumbCollapsed = ({quantity, onClick}: Props) => (
+const Collapsed = ({quantity, onClick}: Props) => (
   <Wrapper data-test-id="breadcrumb-collapsed" onClick={onClick}>
     <IconWrapper>
       <IconEllipsis />
@@ -21,7 +21,7 @@ const BreadcrumbCollapsed = ({quantity, onClick}: Props) => (
   </Wrapper>
 );
 
-export default BreadcrumbCollapsed;
+export {Collapsed};
 
 const Wrapper = styled(GridCellLeft)`
   cursor: pointer;

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/convertBreadcrumbType.tsx → src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/convertType.tsx

@@ -2,7 +2,7 @@ import {defined} from 'app/utils';
 
 import {Breadcrumb, BreadcrumbType} from './types';
 
-function convertBreadcrumbType(breadcrumb: Breadcrumb): Breadcrumb {
+function converType(breadcrumb: Breadcrumb): Breadcrumb {
   if (breadcrumb.type === BreadcrumbType.EXCEPTION) {
     return {
       ...breadcrumb,
@@ -48,4 +48,4 @@ function convertBreadcrumbType(breadcrumb: Breadcrumb): Breadcrumb {
   return breadcrumb;
 }
 
-export default convertBreadcrumbType;
+export {converType};

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/data/data.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {Event} from 'app/types';
+
+import {Default} from './default';
+import {Exception} from './exception';
+import {Http} from './http';
+import {Breadcrumb, BreadcrumbType} from '../types';
+
+type Props = {
+  breadcrumb: Breadcrumb;
+  event: Event;
+  orgId: string | null;
+};
+
+const Data = ({breadcrumb, event, orgId}: Props) => {
+  if (breadcrumb.type === BreadcrumbType.HTTP) {
+    return <Http breadcrumb={breadcrumb} />;
+  }
+
+  if (
+    breadcrumb.type === BreadcrumbType.WARNING ||
+    breadcrumb.type === BreadcrumbType.ERROR
+  ) {
+    return <Exception event={event} orgId={orgId} breadcrumb={breadcrumb} />;
+  }
+
+  return <Default breadcrumb={breadcrumb} />;
+};
+
+export {Data};

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbData/breadcrumbDataDefault.tsx → src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/data/default.tsx

@@ -4,20 +4,20 @@ import {getMeta} from 'app/components/events/meta/metaProxy';
 
 import getBreadcrumbCustomRendererValue from '../../breadcrumbs/getBreadcrumbCustomRendererValue';
 import {BreadcrumbTypeDefault, BreadcrumbTypeNavigation} from '../types';
-import BreadcrumbDataSummary from './breadcrumbDataSummary';
+import {Summary} from './summary';
 
 type Props = {
   breadcrumb: BreadcrumbTypeDefault | BreadcrumbTypeNavigation;
 };
 
-const BreadcrumbDataDefault = ({breadcrumb}: Props) => (
-  <BreadcrumbDataSummary kvData={breadcrumb.data}>
+const Default = ({breadcrumb}: Props) => (
+  <Summary kvData={breadcrumb.data}>
     {breadcrumb?.message &&
       getBreadcrumbCustomRendererValue({
         value: breadcrumb.message,
         meta: getMeta(breadcrumb, 'message'),
       })}
-  </BreadcrumbDataSummary>
+  </Summary>
 );
 
-export default BreadcrumbDataDefault;
+export {Default};

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/breadcrumbData/breadcrumbDataException.tsx → src/sentry/static/sentry/app/components/events/interfaces/breadcrumbsV2/data/exception.tsx

@@ -10,7 +10,7 @@ import Link from 'app/components/links/link';
 
 import getBreadcrumbCustomRendererValue from '../../breadcrumbs/getBreadcrumbCustomRendererValue';
 import {BreadcrumbTypeDefault} from '../types';
-import BreadcrumbDataSummary from './breadcrumbDataSummary';
+import {Summary} from './summary';
 
 type Props = {
   breadcrumb: BreadcrumbTypeDefault;
@@ -18,12 +18,12 @@ type Props = {
   orgId: string | null;
 };
 
-const BreadcrumbDataException = ({breadcrumb, event, orgId}: Props) => {
+const Exception = ({breadcrumb, event, orgId}: Props) => {
   const {data} = breadcrumb;
   const dataValue = data?.value;
 
   return (
-    <BreadcrumbDataSummary kvData={omit(data, ['type', 'value'])}>
+    <Summary kvData={omit(data, ['type', 'value'])}>
       {data?.type &&
         getBreadcrumbCustomRendererValue({
           value: <strong>{`${data.type}: `}</strong>,
@@ -46,7 +46,7 @@ const BreadcrumbDataException = ({breadcrumb, event, orgId}: Props) => {
           ),
           meta: getMeta(breadcrumb, 'message'),
         })}
-    </BreadcrumbDataSummary>
+    </Summary>
   );
 };
 
@@ -93,4 +93,4 @@ const FormatMessage = withProjects(function FormatMessageInner({
   return <React.Fragment>{message}</React.Fragment>;
 });
 
-export default BreadcrumbDataException;
+export {Exception};