From 79a3b2d4927e195c9f6e55a5ea08527623d32268 Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Thu, 7 Nov 2024 15:22:34 -0800
Subject: [PATCH] feat(issues): Combine performance issue details layouts

Combines the two performance issue layouts into the main layout. Our goal is to have fewer layouts specific to issue types and turn on and off components based on the issue's properties.

config changes:
- rename "tags" to "tagsTab"
- new "tags" that disables highlights and tags
- add spanEvidence option that can be disabled for these
- add performanceDurationRegression and profilingDurationRegression which are kinda gross but right now they seem very specific together
---
 static/app/utils/issueTypeConfig/index.tsx    |   7 +-
 .../issueTypeConfig/performanceConfig.tsx     |  18 ++
 .../utils/issueTypeConfig/replayConfig.tsx    |   2 +-
 static/app/utils/issueTypeConfig/types.tsx    |  19 +-
 .../utils/issueTypeConfig/uptimeConfig.tsx    |   2 +-
 .../groupEventDetailsContent.tsx              | 230 +++++++-----------
 .../app/views/issueDetails/groupSidebar.tsx   |   2 +-
 static/app/views/issueDetails/header.tsx      |   2 +-
 8 files changed, 136 insertions(+), 146 deletions(-)

diff --git a/static/app/utils/issueTypeConfig/index.tsx b/static/app/utils/issueTypeConfig/index.tsx
index e3af71d7a5eb6b..69c69aaf791be9 100644
--- a/static/app/utils/issueTypeConfig/index.tsx
+++ b/static/app/utils/issueTypeConfig/index.tsx
@@ -39,12 +39,17 @@ const BASE_CONFIG: IssueTypeConfig = {
   aiSuggestedSolution: false,
   events: {enabled: true},
   mergedIssues: {enabled: false},
+  performanceDurationRegression: {enabled: false},
+  profilingDurationRegression: {enabled: false},
   regression: {enabled: false},
   replays: {enabled: false},
   showFeedbackWidget: false,
-  stats: {enabled: true},
   similarIssues: {enabled: false},
+  spanEvidence: {enabled: false},
+  stacktrace: {enabled: true},
+  stats: {enabled: true},
   tags: {enabled: true},
+  tagsTab: {enabled: true},
   userFeedback: {enabled: false},
   discover: {enabled: true},
   evidence: {title: t('Evidence')},
diff --git a/static/app/utils/issueTypeConfig/performanceConfig.tsx b/static/app/utils/issueTypeConfig/performanceConfig.tsx
index feb95183e0c47a..7060e1a897eb09 100644
--- a/static/app/utils/issueTypeConfig/performanceConfig.tsx
+++ b/static/app/utils/issueTypeConfig/performanceConfig.tsx
@@ -27,6 +27,8 @@ const performanceConfig: IssueCategoryConfigMapping = {
     mergedIssues: {enabled: false},
     replays: {enabled: true},
     similarIssues: {enabled: false},
+    stacktrace: {enabled: false},
+    spanEvidence: {enabled: true},
     userFeedback: {enabled: false},
     // Performance issues render a custom SpanEvidence component
     evidence: null,
@@ -195,8 +197,12 @@ const performanceConfig: IssueCategoryConfigMapping = {
     discover: {enabled: false},
     regression: {enabled: true},
     replays: {enabled: false},
+    performanceDurationRegression: {enabled: true},
     stats: {enabled: false},
     tags: {enabled: false},
+    tagsTab: {enabled: false},
+    // We show the regression summary instead
+    spanEvidence: {enabled: false},
   },
   [IssueType.PERFORMANCE_ENDPOINT_REGRESSION]: {
     actions: {
@@ -225,9 +231,13 @@ const performanceConfig: IssueCategoryConfigMapping = {
     },
     discover: {enabled: false},
     regression: {enabled: true},
+    performanceDurationRegression: {enabled: true},
     replays: {enabled: false},
     stats: {enabled: false},
     tags: {enabled: false},
+    tagsTab: {enabled: false},
+    // We show the regression summary instead
+    spanEvidence: {enabled: false},
   },
   [IssueType.PROFILE_FILE_IO_MAIN_THREAD]: {
     resources: {
@@ -317,9 +327,13 @@ const performanceConfig: IssueCategoryConfigMapping = {
     discover: {enabled: false},
     events: {enabled: false},
     regression: {enabled: true},
+    profilingDurationRegression: {enabled: true},
     replays: {enabled: false},
+    // We show the regression summary instead
+    spanEvidence: {enabled: false},
     stats: {enabled: false},
     tags: {enabled: false},
+    tagsTab: {enabled: false},
   },
   [IssueType.PROFILE_FUNCTION_REGRESSION]: {
     actions: {
@@ -349,9 +363,13 @@ const performanceConfig: IssueCategoryConfigMapping = {
     discover: {enabled: false},
     events: {enabled: false},
     regression: {enabled: true},
+    profilingDurationRegression: {enabled: true},
     replays: {enabled: false},
     stats: {enabled: false},
+    // We show the regression summary instead
+    spanEvidence: {enabled: false},
     tags: {enabled: false},
+    tagsTab: {enabled: false},
   },
 };
 
diff --git a/static/app/utils/issueTypeConfig/replayConfig.tsx b/static/app/utils/issueTypeConfig/replayConfig.tsx
index 097515eb04154a..9a082fcf3bfdef 100644
--- a/static/app/utils/issueTypeConfig/replayConfig.tsx
+++ b/static/app/utils/issueTypeConfig/replayConfig.tsx
@@ -22,7 +22,7 @@ const replayConfig: IssueCategoryConfigMapping = {
     stats: {enabled: true},
     similarIssues: {enabled: false},
     showFeedbackWidget: true,
-    tags: {enabled: true},
+    tagsTab: {enabled: true},
     userFeedback: {enabled: true},
     discover: {enabled: true},
     evidence: {title: t('Evidence')},
diff --git a/static/app/utils/issueTypeConfig/types.tsx b/static/app/utils/issueTypeConfig/types.tsx
index 2736ae54153f0c..8aebd5921b8bee 100644
--- a/static/app/utils/issueTypeConfig/types.tsx
+++ b/static/app/utils/issueTypeConfig/types.tsx
@@ -59,6 +59,14 @@ export type IssueTypeConfig = {
    * Is the Merged Issues tab shown for this issue
    */
   mergedIssues: DisabledWithReasonConfig;
+  /**
+   * Shows performance duration regression components
+   */
+  performanceDurationRegression: DisabledWithReasonConfig;
+  /**
+   * Shows profiling duration regression components
+   */
+  profilingDurationRegression: DisabledWithReasonConfig;
   /**
    * Enables various regression related supporting data for an issue type.
    */
@@ -90,14 +98,23 @@ export type IssueTypeConfig = {
    * Is the Similar Issues tab shown for this issue
    */
   similarIssues: DisabledWithReasonConfig;
+  spanEvidence: DisabledWithReasonConfig;
+  /**
+   * Is the Stacktrace shown for this issue
+   */
+  stacktrace: DisabledWithReasonConfig;
   /**
    * Are group stats (counts/time series) shown for this issue.
    */
   stats: DisabledWithReasonConfig;
   /**
-   * Is the Tags tab show for this issue
+   * Are event tags or highlights shown for this issue
    */
   tags: DisabledWithReasonConfig;
+  /**
+   * Is the Tags tab show for this issue
+   */
+  tagsTab: DisabledWithReasonConfig;
   /**
    * Is the User Feedback tab shown for this issue
    */
diff --git a/static/app/utils/issueTypeConfig/uptimeConfig.tsx b/static/app/utils/issueTypeConfig/uptimeConfig.tsx
index d1970a3e53e84a..69fbffe26bc193 100644
--- a/static/app/utils/issueTypeConfig/uptimeConfig.tsx
+++ b/static/app/utils/issueTypeConfig/uptimeConfig.tsx
@@ -21,7 +21,7 @@ const uptimeConfig: IssueCategoryConfigMapping = {
     userFeedback: {enabled: false},
     usesIssuePlatform: true,
     stats: {enabled: false},
-    tags: {enabled: false},
+    tagsTab: {enabled: false},
     issueSummary: {enabled: false},
   },
 };
diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
index 455f6015459047..af65e6a48c239a 100644
--- a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
+++ b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -64,7 +64,7 @@ import {space} from 'sentry/styles/space';
 import type {Entry, EntryException, Event, EventTransaction} from 'sentry/types/event';
 import {EntryType, EventOrGroupType} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
-import {IssueCategory, IssueType} from 'sentry/types/group';
+import {IssueCategory} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {
@@ -232,7 +232,7 @@ export function EventDetailsContent({
           project={project}
         />
       )}
-      {!hasStreamlinedUI && (
+      {!hasStreamlinedUI && issueTypeConfig.tags.enabled && (
         <HighlightsDataSection event={event} project={project} viewAllRef={tagsRef} />
       )}
       {showPossibleSolutionsHigher && (
@@ -259,16 +259,17 @@ export function EventDetailsContent({
           />
         </EntryErrorBoundary>
       )}
-      {defined(eventEntries[EntryType.STACKTRACE]) && (
-        <EntryErrorBoundary type={EntryType.STACKTRACE}>
-          <StackTrace
-            event={event}
-            data={eventEntries[EntryType.STACKTRACE].data}
-            projectSlug={projectSlug}
-            groupingCurrentLevel={groupingCurrentLevel}
-          />
-        </EntryErrorBoundary>
-      )}
+      {issueTypeConfig.stacktrace.enabled &&
+        defined(eventEntries[EntryType.STACKTRACE]) && (
+          <EntryErrorBoundary type={EntryType.STACKTRACE}>
+            <StackTrace
+              event={event}
+              data={eventEntries[EntryType.STACKTRACE].data}
+              projectSlug={projectSlug}
+              groupingCurrentLevel={groupingCurrentLevel}
+            />
+          </EntryErrorBoundary>
+        )}
       {defined(eventEntries[EntryType.THREADS]) && (
         <EntryErrorBoundary type={EntryType.THREADS}>
           <Threads
@@ -300,13 +301,64 @@ export function EventDetailsContent({
           }}
         </QuickTraceQuery>
       )}
-      {group.issueCategory === IssueCategory.PERFORMANCE && (
+      {issueTypeConfig.spanEvidence.enabled && (
         <SpanEvidenceSection
           event={event as EventTransaction}
           organization={organization}
           projectSlug={project.slug}
         />
       )}
+      {issueTypeConfig.regression.enabled && (
+        <ErrorBoundary mini>
+          <EventRegressionSummary event={event} group={group} />
+        </ErrorBoundary>
+      )}
+      {issueTypeConfig.performanceDurationRegression.enabled && (
+        <Fragment>
+          <ErrorBoundary mini>
+            <EventBreakpointChart event={event} />
+          </ErrorBoundary>
+          <ErrorBoundary mini>
+            <AggregateSpanDiff event={event} project={project} />
+          </ErrorBoundary>
+          <ErrorBoundary mini>
+            <EventComparison event={event} project={project} />
+          </ErrorBoundary>
+        </Fragment>
+      )}
+      {issueTypeConfig.profilingDurationRegression.enabled && (
+        <Fragment>
+          <TransactionsDeltaProvider event={event} project={project}>
+            <ErrorBoundary mini>
+              <EventFunctionBreakpointChart event={event} />
+            </ErrorBoundary>
+            <ErrorBoundary mini>
+              <EventAffectedTransactions event={event} group={group} project={project} />
+            </ErrorBoundary>
+            <ErrorBoundary mini>
+              <InterimSection
+                type={SectionKey.REGRESSION_FLAMEGRAPH}
+                title={t('Regression Flamegraph')}
+              >
+                <b>{t('Largest Changes in Call Stack Frequency')}</b>
+                <p>
+                  {t(`See which functions changed the most before and after the regression. The
+              frame with the largest increase in call stack population likely
+              contributed to the cause for the duration regression.`)}
+                </p>
+                <EventDifferentialFlamegraph event={event} />
+              </InterimSection>
+            </ErrorBoundary>
+            <ErrorBoundary mini>
+              <EventFunctionComparisonList
+                event={event}
+                group={group}
+                project={project}
+              />
+            </ErrorBoundary>
+          </TransactionsDeltaProvider>
+        </Fragment>
+      )}
       <EventHydrationDiff event={event} group={group} />
       {issueTypeConfig.replays.enabled && (
         <EventReplay event={event} group={group} projectSlug={project.slug} />
@@ -372,16 +424,28 @@ export function EventDetailsContent({
           <Request event={event} data={eventEntries[EntryType.REQUEST].data} />
         </EntryErrorBoundary>
       )}
-      {hasStreamlinedUI ? (
+      {issueTypeConfig.tags.enabled ? (
         <Fragment>
-          <HighlightsDataSection event={event} project={project} viewAllRef={tagsRef} />
-          <EventTagsDataSection event={event} projectSlug={project.slug} ref={tagsRef} />
+          {hasStreamlinedUI ? (
+            <Fragment>
+              <HighlightsDataSection
+                event={event}
+                project={project}
+                viewAllRef={tagsRef}
+              />
+              <EventTagsDataSection
+                event={event}
+                projectSlug={project.slug}
+                ref={tagsRef}
+              />
+            </Fragment>
+          ) : (
+            <div ref={tagsRef}>
+              <EventTagsAndScreenshot event={event} projectSlug={project.slug} />
+            </div>
+          )}
         </Fragment>
-      ) : (
-        <div ref={tagsRef}>
-          <EventTagsAndScreenshot event={event} projectSlug={project.slug} />
-        </div>
-      )}
+      ) : null}
       <EventContexts group={group} event={event} />
       {hasFeatureFlagSection && (
         <EventFeatureFlagList group={group} project={project} event={event} />
@@ -429,96 +493,6 @@ function ResourcesAndPossibleSolutionsIssueDetailsContent({
   );
 }
 
-const GroupContent = styled('div')`
-  border: 1px solid ${p => p.theme.translucentBorder};
-  background: ${p => p.theme.background};
-  border-radius: ${p => p.theme.borderRadius};
-  position: relative;
-`;
-
-const GroupContentPadding = styled('div')`
-  padding: ${space(1)} ${space(1.5)};
-`;
-
-// TODO: Merge regression issues with the other event details
-function RegressionEventContainer({children}: {children: React.ReactNode}) {
-  const hasStreamlinedUI = useHasStreamlinedUI();
-
-  if (!hasStreamlinedUI) {
-    return children;
-  }
-
-  return (
-    <GroupContent>
-      <GroupContentPadding>{children}</GroupContentPadding>
-    </GroupContent>
-  );
-}
-
-function PerformanceDurationRegressionIssueDetailsContent({
-  group,
-  event,
-  project,
-}: Required<EventDetailsContentProps>) {
-  return (
-    <RegressionEventContainer>
-      <ErrorBoundary mini>
-        <EventRegressionSummary event={event} group={group} />
-      </ErrorBoundary>
-      <ErrorBoundary mini>
-        <EventBreakpointChart event={event} />
-      </ErrorBoundary>
-      <ErrorBoundary mini>
-        <AggregateSpanDiff event={event} project={project} />
-      </ErrorBoundary>
-      <ErrorBoundary mini>
-        <EventComparison event={event} project={project} />
-      </ErrorBoundary>
-    </RegressionEventContainer>
-  );
-}
-
-function ProfilingDurationRegressionIssueDetailsContent({
-  group,
-  event,
-  project,
-}: Required<EventDetailsContentProps>) {
-  return (
-    <RegressionEventContainer>
-      <TransactionsDeltaProvider event={event} project={project}>
-        <Fragment>
-          <ErrorBoundary mini>
-            <EventRegressionSummary event={event} group={group} />
-          </ErrorBoundary>
-          <ErrorBoundary mini>
-            <EventFunctionBreakpointChart event={event} />
-          </ErrorBoundary>
-          <ErrorBoundary mini>
-            <EventAffectedTransactions event={event} group={group} project={project} />
-          </ErrorBoundary>
-          <ErrorBoundary mini>
-            <InterimSection
-              type={SectionKey.REGRESSION_FLAMEGRAPH}
-              title={t('Regression Flamegraph')}
-            >
-              <b>{t('Largest Changes in Call Stack Frequency')}</b>
-              <p>
-                {t(`See which functions changed the most before and after the regression. The
-              frame with the largest increase in call stack population likely
-              contributed to the cause for the duration regression.`)}
-              </p>
-              <EventDifferentialFlamegraph event={event} />
-            </InterimSection>
-          </ErrorBoundary>
-          <ErrorBoundary mini>
-            <EventFunctionComparisonList event={event} group={group} project={project} />
-          </ErrorBoundary>
-        </Fragment>
-      </TransactionsDeltaProvider>
-    </RegressionEventContainer>
-  );
-}
-
 export default function GroupEventDetailsContent({
   group,
   event,
@@ -534,35 +508,11 @@ export default function GroupEventDetailsContent({
     );
   }
 
-  switch (group.issueType) {
-    case IssueType.PERFORMANCE_DURATION_REGRESSION:
-    case IssueType.PERFORMANCE_ENDPOINT_REGRESSION: {
-      return (
-        <PerformanceDurationRegressionIssueDetailsContent
-          group={group}
-          event={event}
-          project={project}
-        />
-      );
-    }
-    case IssueType.PROFILE_FUNCTION_REGRESSION_EXPERIMENTAL:
-    case IssueType.PROFILE_FUNCTION_REGRESSION: {
-      return (
-        <ProfilingDurationRegressionIssueDetailsContent
-          group={group}
-          event={event}
-          project={project}
-        />
-      );
-    }
-    default: {
-      return hasStreamlinedUI ? (
-        <EventDetails event={event} group={group} project={project} />
-      ) : (
-        <EventDetailsContent group={group} event={event} project={project} />
-      );
-    }
-  }
+  return hasStreamlinedUI ? (
+    <EventDetails event={event} group={group} project={project} />
+  ) : (
+    <EventDetailsContent group={group} event={event} project={project} />
+  );
 }
 
 /**
diff --git a/static/app/views/issueDetails/groupSidebar.tsx b/static/app/views/issueDetails/groupSidebar.tsx
index 7551f9560fcb9c..2a9b9e0e9fba63 100644
--- a/static/app/views/issueDetails/groupSidebar.tsx
+++ b/static/app/views/issueDetails/groupSidebar.tsx
@@ -282,7 +282,7 @@ export default function GroupSidebar({
         </ErrorBoundary>
       )}
       {!hasStreamlinedUI && renderPluginIssue()}
-      {issueTypeConfig.tags.enabled && (
+      {issueTypeConfig.tagsTab.enabled && (
         <TagFacets
           environments={environments}
           groupId={group.id}
diff --git a/static/app/views/issueDetails/header.tsx b/static/app/views/issueDetails/header.tsx
index 6b6dc8bbfa5986..8c7667605f02f0 100644
--- a/static/app/views/issueDetails/header.tsx
+++ b/static/app/views/issueDetails/header.tsx
@@ -132,7 +132,7 @@ export function GroupHeaderTabs({
       </TabList.Item>
       <TabList.Item
         key={Tab.TAGS}
-        hidden={!issueTypeConfig.tags.enabled}
+        hidden={!issueTypeConfig.tagsTab.enabled}
         disabled={disabledTabs.includes(Tab.TAGS)}
         to={{pathname: `${baseUrl}tags/`, query: queryParams}}
       >