sentry/static/app/views/performance/breadcrumb.tsx

import type {Location, LocationDescriptor} from 'history';

import type {Crumb} from 'sentry/components/breadcrumbs';
import Breadcrumbs from 'sentry/components/breadcrumbs';
import {t} from 'sentry/locale';
import type {Organization} from 'sentry/types/organization';
import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
import {decodeScalar} from 'sentry/utils/queryString';
import type {DomainView} from 'sentry/views/insights/pages/useFilters';

import Tab from './transactionSummary/tabs';
import {eventsRouteWithQuery} from './transactionSummary/transactionEvents/utils';
import {spansRouteWithQuery} from './transactionSummary/transactionSpans/utils';
import {tagsRouteWithQuery} from './transactionSummary/transactionTags/utils';
import {vitalsRouteWithQuery} from './transactionSummary/transactionVitals/utils';
import {transactionSummaryRouteWithQuery} from './transactionSummary/utils';
import {vitalDetailRouteWithQuery} from './vitalDetail/utils';
import {getPerformanceLandingUrl} from './utils';

type Props = {
  location: Location;
  organization: Organization;
  eventSlug?: string;
  spanSlug?: SpanSlug;
  tab?: Tab;
  traceSlug?: string;
  transaction?: {
    name: string;
    project: string;
  };
  vitalName?: string;
};

function Breadcrumb(props: Props) {
  function getCrumbs() {
    const crumbs: Crumb[] = [];
    const {
      organization,
      location,
      transaction,
      vitalName,
      spanSlug,
      eventSlug,
      traceSlug,
      tab,
    } = props;

    const performanceTarget: LocationDescriptor = {
      pathname: getPerformanceLandingUrl(organization),
      query: {
        ...location.query,
        // clear out the transaction name
        transaction: undefined,
      },
    };

    crumbs.push({
      to: performanceTarget,
      label: t('Performance'),
      preservePageFilters: true,
    });

    crumbs.push(
      ...getTabCrumbs({
        location,
        organization,
        transaction,
        vitalName,
        spanSlug,
        eventSlug,
        traceSlug,
        tab,
      })
    );

    return crumbs;
  }

  return <Breadcrumbs crumbs={getCrumbs()} />;
}

export const getTabCrumbs = ({
  location,
  organization,
  transaction,
  vitalName,
  spanSlug,
  eventSlug,
  traceSlug,
  tab,
  view,
}: {
  location: Location;
  organization: Organization;
  eventSlug?: string;
  spanSlug?: SpanSlug;
  tab?: Tab;
  traceSlug?: string;
  transaction?: {
    name: string;
    project: string;
  };
  view?: DomainView;
  vitalName?: string;
}) => {
  const crumbs: Crumb[] = [];
  if (vitalName) {
    const webVitalsTarget = vitalDetailRouteWithQuery({
      orgSlug: organization.slug,
      vitalName: 'fcp',
      projectID: decodeScalar(location.query.project),
      query: location.query,
    });
    crumbs.push({
      to: webVitalsTarget,
      label: t('Vital Detail'),
      preservePageFilters: true,
    });
  } else if (transaction) {
    const routeQuery = {
      orgSlug: organization.slug,
      transaction: transaction.name,
      projectID: transaction.project,
      query: location.query,
      view,
    };

    switch (tab) {
      case Tab.TAGS: {
        const tagsTarget = tagsRouteWithQuery(routeQuery);
        crumbs.push({
          to: tagsTarget,
          label: t('Tags'),
          preservePageFilters: true,
        });
        break;
      }
      case Tab.EVENTS: {
        const eventsTarget = eventsRouteWithQuery(routeQuery);
        crumbs.push({
          to: eventsTarget,
          label: t('All Events'),
          preservePageFilters: true,
        });
        break;
      }
      case Tab.WEB_VITALS: {
        const webVitalsTarget = vitalsRouteWithQuery(routeQuery);
        crumbs.push({
          to: webVitalsTarget,
          label: t('Web Vitals'),
          preservePageFilters: true,
        });
        break;
      }
      case Tab.SPANS: {
        const spansTarget = spansRouteWithQuery(routeQuery);
        crumbs.push({
          to: spansTarget,
          label: t('Spans'),
          preservePageFilters: true,
        });
        break;
      }
      case Tab.REPLAYS: {
        crumbs.push({
          label: t('Replays'),
        });
        break;
      }
      case Tab.PROFILING: {
        crumbs.push({
          label: t('Profiles'),
        });
        break;
      }
      case Tab.AGGREGATE_WATERFALL: {
        crumbs.push({
          label: t('Aggregate Spans'),
        });
        break;
      }
      case Tab.TRANSACTION_SUMMARY:
      default: {
        const summaryTarget = transactionSummaryRouteWithQuery(routeQuery);
        crumbs.push({
          to: summaryTarget,
          label: t('Transaction Summary'),
          preservePageFilters: true,
        });
      }
    }
  }

  if (transaction && spanSlug) {
    crumbs.push({
      to: '',
      label: t('Span Summary'),
    });
  } else if (transaction && eventSlug) {
    crumbs.push({
      to: '',
      label: t('Event Details'),
    });
  } else if (traceSlug) {
    crumbs.push({
      to: '',
      label: t('Trace Details'),
    });
  }

  return crumbs;
};

export default Breadcrumb;