ref(performance): Remove unsupported transaction summary features (#67731)

As we move to a spans-only architecture, a lot of these features will no
longer be supported. For now, we're hiding them behind a feature flag as
we transition away from them.

For users that have this flag enabled, the following will be hidden:

- Spans tab
- Suspect spans table
- Get samples button

---------

Co-authored-by: Nar Saynorath <nar.saynorath@sentry.io>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/components/discover/transactionsList.tsx

@@ -287,6 +287,11 @@ class _TransactionsList extends Component<Props> {
     const cursorOffset = parseCursor(cursor)?.offset ?? 0;
     numSamples = numSamples ?? null;
     const totalNumSamples = numSamples === null ? null : numSamples + cursorOffset;
+
+    const hasTransactionSummaryCleanupFlag = organization.features.includes(
+      'performance-transaction-summary-cleanup'
+    );
+
     return (
       <Fragment>
         <div>
@@ -297,7 +302,7 @@ class _TransactionsList extends Component<Props> {
             onChange={opt => handleDropdownChange(opt.value)}
           />
         </div>
-        {supportsInvestigationRule && (
+        {supportsInvestigationRule && !hasTransactionSummaryCleanupFlag && (
           <InvestigationRuleWrapper>
             <InvestigationRuleCreation
               buttonProps={{size: 'xs'}}

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

@@ -113,6 +113,10 @@ function TransactionHeader({
   const {getReplayCountForTransaction} = useReplayCountForTransactions();
   const replaysCount = getReplayCountForTransaction(transactionName);
 
+  const hasTransactionSummaryCleanupFlag = organization.features.includes(
+    'performance-transaction-summary-cleanup'
+  );
+
   return (
     <Layout.Header>
       <Layout.HeaderContent>
@@ -195,7 +199,10 @@ function TransactionHeader({
               <TabList.Item key={Tab.TRANSACTION_SUMMARY}>{t('Overview')}</TabList.Item>
               <TabList.Item key={Tab.EVENTS}>{t('Sampled Events')}</TabList.Item>
               <TabList.Item key={Tab.TAGS}>{t('Tags')}</TabList.Item>
-              <TabList.Item key={Tab.SPANS}>{t('Spans')}</TabList.Item>
+              <TabList.Item key={Tab.SPANS} hidden={hasTransactionSummaryCleanupFlag}>
+                {t('Spans')}
+              </TabList.Item>
+
               <TabList.Item
                 key={Tab.ANOMALIES}
                 textValue={t('Anomalies')}

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

@@ -332,15 +332,24 @@ function SummaryContent({
     handleOpenAllEventsClick: handleAllEventsViewClick,
   };
 
+  const hasTransactionSummaryCleanupFlag = organization.features.includes(
+    'performance-transaction-summary-cleanup'
+  );
+
   return (
     <Fragment>
       <Layout.Main>
-        <FilterActions>
-          <Filter
-            organization={organization}
-            currentFilter={spanOperationBreakdownFilter}
-            onChangeFilter={onChangeFilter}
-          />
+        <FilterActions
+          hasTransactionSummaryCleanupFlag={hasTransactionSummaryCleanupFlag}
+        >
+          {!hasTransactionSummaryCleanupFlag && (
+            <Filter
+              organization={organization}
+              currentFilter={spanOperationBreakdownFilter}
+              onChangeFilter={onChangeFilter}
+            />
+          )}
+
           <PageFilterBar condensed>
             <EnvironmentPageFilter />
             <DatePageFilter />
@@ -401,18 +410,21 @@ function SummaryContent({
           />
         </PerformanceAtScaleContextProvider>
 
-        <SuspectSpans
-          location={location}
-          organization={organization}
-          eventView={eventView}
-          totals={
-            defined(totalValues?.['count()'])
-              ? {'count()': totalValues!['count()']}
-              : null
-          }
-          projectId={projectId}
-          transactionName={transactionName}
-        />
+        {!hasTransactionSummaryCleanupFlag && (
+          <SuspectSpans
+            location={location}
+            organization={organization}
+            eventView={eventView}
+            totals={
+              defined(totalValues?.['count()'])
+                ? {'count()': totalValues!['count()']}
+                : null
+            }
+            projectId={projectId}
+            transactionName={transactionName}
+          />
+        )}
+
         <TagExplorer
           eventView={eventView}
           organization={organization}
@@ -556,7 +568,7 @@ function getTransactionsListSort(
   return {selected: selectedSort, options: sortOptions};
 }
 
-const FilterActions = styled('div')`
+const FilterActions = styled('div')<{hasTransactionSummaryCleanupFlag: boolean}>`
   display: grid;
   gap: ${space(2)};
   margin-bottom: ${space(2)};
@@ -566,7 +578,10 @@ const FilterActions = styled('div')`
   }
 
   @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
-    grid-template-columns: auto auto 1fr;
+    ${p =>
+      p.hasTransactionSummaryCleanupFlag
+        ? `grid-template-columns: auto 1fr;`
+        : `grid-template-columns: auto auto 1fr;`}
   }
 `;