breadcrumbs: remove styled and simplify

Author: JonasBa

static/app/components/breadcrumbs.stories.tsx

@@ -16,33 +16,18 @@ export default Storybook.story('Breadcrumbs', story => {
           crumbs={[
             {label: 'Organization', to: '/organizations/sentry/'},
             {label: 'Projects', to: '/organizations/sentry/projects/'},
-            {label: 'Project Settings', to: '/settings/projects/javascript/'},
+            {
+              label: 'Project Settings',
+              to: '/settings/projects/javascript/',
+              preservePageFilters: true,
+            },
             {label: 'General', to: null},
           ]}
         />
       </Storybook.SizingWindow>
     </Fragment>
   ));
 
-  story('With Last Item Linked', () => (
-    <Fragment>
-      <p>
-        Set <Storybook.JSXProperty name="linkLastItem" value /> to make the last
-        breadcrumb clickable.
-      </p>
-      <Storybook.SizingWindow display="block">
-        <Breadcrumbs
-          linkLastItem
-          crumbs={[
-            {label: 'Organization', to: '/organizations/sentry/'},
-            {label: 'Projects', to: '/organizations/sentry/projects/'},
-            {label: 'All Projects', to: '/organizations/sentry/projects/all/'},
-          ]}
-        />
-      </Storybook.SizingWindow>
-    </Fragment>
-  ));
-
   story('Page Filter Preservation', () => (
     <Fragment>
       <p>

static/app/components/breadcrumbs.tsx

@@ -1,19 +1,12 @@
 import {Fragment} from 'react';
-import type {Theme} from '@emotion/react';
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
+
+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 {space} from 'sentry/styles/space';
-
-const BreadcrumbList = styled('nav')`
-  display: flex;
-  align-items: center;
-  padding: ${space(1)} 0;
-`;
 
 export interface Crumb {
   /**
@@ -39,103 +32,92 @@ export interface Crumb {
   to?: LinkProps['to'] | null;
 }
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Array of crumbs that will be rendered
-   */
+interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
   crumbs: Crumb[];
-
-  /**
-   * As a general rule of thumb we don't want the last item to be link as it most likely
-   * points to the same page we are currently on. This is by default false, so that
-   * people don't have to check if crumb is last in the array and then manually
-   * assign `to: null/undefined` when passing props to this component.
-   */
-  linkLastItem?: boolean;
 }
 
 /**
  * Page breadcrumbs used for navigation, not to be confused with sentry's event breadcrumbs
  */
-export function Breadcrumbs({crumbs, linkLastItem = false, ...props}: Props) {
+export function Breadcrumbs({crumbs, ...props}: BreadcrumbsProps) {
   if (crumbs.length === 0) {
     return null;
   }
 
-  if (!linkLastItem) {
+  if (crumbs[crumbs.length - 1]?.to) {
     crumbs[crumbs.length - 1]!.to = null;
   }
 
   return (
-    <BreadcrumbList {...props} data-test-id="breadcrumb-list">
+    <Flex
+      gap="xs"
+      align="center"
+      padding="md 0"
+      {...props}
+      data-test-id="breadcrumb-list"
+    >
       {crumbs.map((crumb, index) => {
-        const {label, to, preservePageFilters, key} = crumb;
-        const labelKey = typeof label === 'string' ? label : '';
-        const mapKey =
-          key ?? (typeof to === 'string' ? `${labelKey}${to}` : `${labelKey}${index}`);
-
         return (
-          <Fragment key={mapKey}>
-            {to ? (
-              <BreadcrumbLink
-                to={to}
-                preservePageFilters={preservePageFilters}
-                data-test-id="breadcrumb-link"
-              >
-                {label}
-              </BreadcrumbLink>
-            ) : (
-              <BreadcrumbItem data-test-id="breadcrumb-item">{label}</BreadcrumbItem>
-            )}
-
-            {index < crumbs.length - 1 && <BreadcrumbDividerIcon direction="right" />}
+          <Fragment key={index}>
+            <BreadCrumbItem
+              crumb={crumb}
+              variant={index === crumbs.length - 1 ? 'primary' : 'muted'}
+            />
+            {index < crumbs.length - 1 ? <BreadcumbChevron /> : null}
           </Fragment>
         );
       })}
-    </BreadcrumbList>
+    </Flex>
   );
 }
 
-const getBreadcrumbListItemStyles = (p: {theme: Theme}) => css`
-  ${p.theme.overflowEllipsis}
-  color: ${p.theme.subText};
-  width: auto;
+interface BreadCrumbItemProps {
+  crumb: Crumb;
+  variant: 'primary' | 'muted';
+}
 
-  &:last-child {
-    color: ${p.theme.textColor};
+function BreadCrumbItem(props: BreadCrumbItemProps) {
+  if (props.crumb.to) {
+    return (
+      <BreadcrumbLink
+        to={props.crumb.to}
+        preservePageFilters={props.crumb.preservePageFilters}
+        data-test-id="breadcrumb-link"
+      >
+        <Text as="span" variant="muted">
+          {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>
+  );
+}
 
 interface BreadcrumbLinkProps {
   to: LinkProps['to'];
   children?: React.ReactNode;
   preservePageFilters?: boolean;
 }
 
-const BreadcrumbLink = styled(
-  ({preservePageFilters, to, ...props}: BreadcrumbLinkProps) =>
-    preservePageFilters ? (
-      <GlobalSelectionLink to={to} {...props} />
-    ) : (
-      <Link to={to} {...props} />
-    )
-)`
-  ${getBreadcrumbListItemStyles}
-  max-width: 400px;
-
-  &:hover,
-  &:active {
-    color: ${p => p.theme.subText};
+function BreadcrumbLink(props: BreadcrumbLinkProps) {
+  if (props.preservePageFilters) {
+    return <GlobalSelectionLink {...props} />;
   }
-`;
-
-const BreadcrumbItem = styled('span')`
-  ${getBreadcrumbListItemStyles}
-  max-width: 400px;
-`;
+  return <Link {...props} />;
+}
 
-const BreadcrumbDividerIcon = styled(Chevron)`
-  color: ${p => p.theme.subText};
-  margin: 0 ${space(0.5)};
-  flex-shrink: 0;
-`;
+function BreadcumbChevron() {
+  return (
+    <Text variant="muted">
+      <Flex flexShrink={0} align="center">
+        <Chevron direction="right" color="subText" />
+      </Flex>
+    </Text>
+  );
+}