feat(suspect-spans): Add empty spans tab (#28315)

This adds a new empty tab for the suspect spans feature behind the
`performance-suspect-spans-view` flag.

static/app/routes.tsx

@@ -1405,6 +1405,13 @@ function routes() {
               }
               component={SafeLazyLoad}
             />
+            <Route
+              path="/organizations/:orgId/performance/summary/spans/"
+              componentPromise={() =>
+                import('app/views/performance/transactionSummary/transactionSpans')
+              }
+              component={SafeLazyLoad}
+            />
           </Route>
           <Route
             path="/organizations/:orgId/performance/vitaldetail/"

static/app/views/performance/transactionSummary/header.tsx

@@ -21,6 +21,7 @@ import Breadcrumb from 'app/views/performance/breadcrumb';
 import {getCurrentLandingDisplay, LandingDisplayField} from '../landing/utils';
 
 import {eventsRouteWithQuery} from './transactionEvents/utils';
+import {spansRouteWithQuery} from './transactionSpans/utils';
 import {tagsRouteWithQuery} from './transactionTags/utils';
 import {vitalsRouteWithQuery} from './transactionVitals/utils';
 import Tab from './tabs';
@@ -47,6 +48,10 @@ const TAB_ANALYTICS: Partial<Record<Tab, AnalyticInfo>> = {
     eventKey: 'performance_views.events.events_tab_clicked',
     eventName: 'Performance Views: Events tab clicked',
   },
+  [Tab.Spans]: {
+    eventKey: 'performance_views.spans.spans_tab_clicked',
+    eventName: 'Performance Views: Spans tab clicked',
+  },
 };
 
 type Props = {
@@ -219,6 +224,7 @@ class TransactionHeader extends React.Component<Props> {
     const summaryTarget = transactionSummaryRouteWithQuery(routeQuery);
     const tagsTarget = tagsRouteWithQuery(routeQuery);
     const eventsTarget = eventsRouteWithQuery(routeQuery);
+    const spansTarget = spansRouteWithQuery(routeQuery);
 
     return (
       <Layout.Header>
@@ -271,6 +277,19 @@ class TransactionHeader extends React.Component<Props> {
                 {t('All Events')}
               </ListLink>
             </Feature>
+            <Feature
+              organization={organization}
+              features={['organizations:performance-suspect-spans-view']}
+            >
+              <ListLink
+                data-test-id="spans-tab"
+                to={spansTarget}
+                isActive={() => currentTab === Tab.Spans}
+                onClick={this.trackTabClick(Tab.Spans)}
+              >
+                {t('Spans')}
+              </ListLink>
+            </Feature>
           </StyledNavTabs>
         </React.Fragment>
       </Layout.Header>

static/app/views/performance/transactionSummary/tabs.tsx

@@ -3,6 +3,7 @@ enum Tab {
   WebVitals,
   Tags,
   Events,
+  Spans,
 }
 
 export default Tab;

static/app/views/performance/transactionSummary/transactionSpans/content.tsx

@@ -0,0 +1,16 @@
+import {Location} from 'history';
+
+import {Organization} from 'app/types';
+import EventView from 'app/utils/discover/eventView';
+
+type Props = {
+  location: Location;
+  organization: Organization;
+  eventView: EventView;
+};
+
+function SpansContent(_props: Props) {
+  return <p>spans</p>;
+}
+
+export default SpansContent;

static/app/views/performance/transactionSummary/transactionSpans/index.tsx

@@ -0,0 +1,70 @@
+import {Location} from 'history';
+
+import {t} from 'app/locale';
+import {Organization, Project} from 'app/types';
+import EventView from 'app/utils/discover/eventView';
+import {decodeScalar} from 'app/utils/queryString';
+import {MutableSearch} from 'app/utils/tokenizeSearch';
+import withOrganization from 'app/utils/withOrganization';
+import withProjects from 'app/utils/withProjects';
+
+import PageLayout from '../pageLayout';
+import Tab from '../tabs';
+
+import SpansContent from './content';
+
+type Props = {
+  location: Location;
+  organization: Organization;
+  projects: Project[];
+};
+
+function TransactionSpans(props: Props) {
+  const {location, organization, projects} = props;
+
+  return (
+    <PageLayout
+      location={location}
+      organization={organization}
+      projects={projects}
+      tab={Tab.Spans}
+      getDocumentTitle={getDocumentTitle}
+      generateEventView={generateEventView}
+      childComponent={SpansContent}
+    />
+  );
+}
+
+function generateEventView(location: Location, transactionName: string): EventView {
+  const query = decodeScalar(location.query.query, '');
+  const conditions = new MutableSearch(query);
+  // TODO: what should this event type be?
+  conditions
+    .setFilterValues('event.type', ['transaction'])
+    .setFilterValues('transaction', [transactionName]);
+
+  return EventView.fromNewQueryWithLocation(
+    {
+      id: undefined,
+      version: 2,
+      name: transactionName,
+      fields: ['count()'],
+      query: conditions.formatString(),
+      projects: [],
+    },
+    location
+  );
+}
+
+function getDocumentTitle(transactionName: string): string {
+  const hasTransactionName =
+    typeof transactionName === 'string' && String(transactionName).trim().length > 0;
+
+  if (hasTransactionName) {
+    return [String(transactionName).trim(), t('Performance')].join(' - ');
+  }
+
+  return [t('Summary'), t('Performance')].join(' - ');
+}
+
+export default withProjects(withOrganization(TransactionSpans));

static/app/views/performance/transactionSummary/transactionSpans/utils.tsx

@@ -0,0 +1,34 @@
+import {Query} from 'history';
+
+export function generateSpansRoute({orgSlug}: {orgSlug: String}): string {
+  return `/organizations/${orgSlug}/performance/summary/spans/`;
+}
+
+export function spansRouteWithQuery({
+  orgSlug,
+  transaction,
+  projectID,
+  query,
+}: {
+  orgSlug: string;
+  transaction: string;
+  query: Query;
+  projectID?: string | string[];
+}) {
+  const pathname = generateSpansRoute({
+    orgSlug,
+  });
+
+  return {
+    pathname,
+    query: {
+      transaction,
+      project: projectID,
+      environment: query.environment,
+      statsPeriod: query.statsPeriod,
+      start: query.start,
+      end: query.end,
+      query: query.query,
+    },
+  };
+}

static/app/views/performance/transactionSummary/transactionVitals/index.tsx

@@ -38,7 +38,7 @@ function TransactionVitals(props: Props) {
   );
 }
 
-function getDocumentTitle(transactionName): string {
+function getDocumentTitle(transactionName: string): string {
   const hasTransactionName =
     typeof transactionName === 'string' && String(transactionName).trim().length > 0;
 

tests/js/spec/views/performance/transactionSummary/header.spec.tsx

@@ -5,13 +5,21 @@ import EventView from 'app/utils/discover/eventView';
 import TransactionHeader from 'app/views/performance/transactionSummary/header';
 import Tab from 'app/views/performance/transactionSummary/tabs';
 
-function initializeData(opts?: {platform?: string}) {
+type InitialOpts = {
+  features?: string[];
+  platform?: string;
+};
+
+function initializeData(opts?: InitialOpts) {
+  const {features, platform} = opts ?? {};
   // @ts-expect-error
-  const project = TestStubs.Project({platform: opts?.platform});
+  const project = TestStubs.Project({platform});
   // @ts-expect-error
   const organization = TestStubs.Organization({
     projects: [project],
+    features,
   });
+
   const initialData = initializeOrg({
     organization,
     router: {
@@ -182,4 +190,30 @@ describe('Performance > Transaction Summary Header', function () {
 
     expect(wrapper.find('ListLink[data-test-id="web-vitals-tab"]').exists()).toBeFalsy();
   });
+
+  it('should render spans tab with feature', async function () {
+    const {project, organization, router, eventView} = initializeData({
+      features: ['performance-suspect-spans-view'],
+    });
+
+    wrapper = mountWithTheme(
+      <TransactionHeader
+        eventView={eventView}
+        location={router.location}
+        organization={organization}
+        projects={[project]}
+        projectId={project.id}
+        transactionName="transaction_name"
+        currentTab={Tab.TransactionSummary}
+        hasWebVitals="yes"
+        handleIncompatibleQuery={() => {}}
+      />
+    );
+
+    // @ts-expect-error
+    await tick();
+    wrapper.update();
+
+    expect(wrapper.find('ListLink[data-test-id="spans-tab"]').exists()).toBeTruthy();
+  });
 });