From 4155cd8e826183c537b555ab7ca0395c8e8d2b75 Mon Sep 17 00:00:00 2001
From: KevinL10 <kevinsliu0@gmail.com>
Date: Tue, 14 May 2024 17:04:58 -0400
Subject: [PATCH] ref(insights): abstract ScreenLoadSpans side panel for mobile
 modules

---
 .../mobile/appStarts/screenSummary/index.tsx        | 10 +++++++---
 .../index.tsx => components/spanSamplesPanel.tsx}   | 13 +++++++++----
 .../spanSamplesPanelContainer.tsx}                  | 13 +++++++++----
 .../mobile/screenload/screenLoadSpans/index.tsx     |  7 ++++---
 .../performance/mobile/ui/screenSummary/index.tsx   |  7 ++++---
 5 files changed, 33 insertions(+), 17 deletions(-)
 rename static/app/views/performance/mobile/{screenload/screenLoadSpans/samples/index.tsx => components/spanSamplesPanel.tsx} (93%)
 rename static/app/views/performance/mobile/{screenload/screenLoadSpans/samples/samplesContainer.tsx => components/spanSamplesPanelContainer.tsx} (96%)

diff --git a/static/app/views/performance/mobile/appStarts/screenSummary/index.tsx b/static/app/views/performance/mobile/appStarts/screenSummary/index.tsx
index 130386aa43871..c177302b8b7a5 100644
--- a/static/app/views/performance/mobile/appStarts/screenSummary/index.tsx
+++ b/static/app/views/performance/mobile/appStarts/screenSummary/index.tsx
@@ -24,16 +24,19 @@ import {
   COLD_START_TYPE,
   StartTypeSelector,
 } from 'sentry/views/performance/mobile/appStarts/screenSummary/startTypeSelector';
+<<<<<<< HEAD
 import {BASE_URL} from 'sentry/views/performance/mobile/appStarts/settings';
+=======
+import {SpanSamplesPanel} from 'sentry/views/performance/mobile/components/spanSamplesPanel';
+>>>>>>> 16c919f580 (ref(insights): abstract ScreenLoadSpans side panel for mobile modules)
 import {MetricsRibbon} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/metricsRibbon';
-import {ScreenLoadSpanSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {
   PRIMARY_RELEASE_ALIAS,
   ReleaseComparisonSelector,
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/starfish/components/releaseSelector';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
@@ -187,12 +190,13 @@ export function ScreenSummary() {
               <SamplesTables transactionName={transactionName} />
             </SamplesContainer>
             {spanGroup && spanOp && appStartType && (
-              <ScreenLoadSpanSamples
+              <SpanSamplesPanel
                 additionalFilters={{
                   [SpanMetricsField.APP_START_TYPE]: appStartType,
                   ...(deviceClass ? {[SpanMetricsField.DEVICE_CLASS]: deviceClass} : {}),
                 }}
                 groupId={spanGroup}
+                moduleName={ModuleName.STARTUP}
                 transactionName={transactionName}
                 spanDescription={spanDescription}
                 spanOp={spanOp}
diff --git a/static/app/views/performance/mobile/screenload/screenLoadSpans/samples/index.tsx b/static/app/views/performance/mobile/components/spanSamplesPanel.tsx
similarity index 93%
rename from static/app/views/performance/mobile/screenload/screenLoadSpans/samples/index.tsx
rename to static/app/views/performance/mobile/components/spanSamplesPanel.tsx
index 4138f942a30ef..88baafd1ec53b 100644
--- a/static/app/views/performance/mobile/screenload/screenLoadSpans/samples/index.tsx
+++ b/static/app/views/performance/mobile/components/spanSamplesPanel.tsx
@@ -14,12 +14,14 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import {ScreenLoadSampleContainer} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples/samplesContainer';
+import {SpanSamplesContainer} from 'sentry/views/performance/mobile/components/spanSamplesPanelContainer';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
+import type {ModuleName} from 'sentry/views/starfish/types';
 
 type Props = {
   groupId: string;
+  moduleName: ModuleName;
   transactionName: string;
   additionalFilters?: Record<string, string>;
   onClose?: () => void;
@@ -29,8 +31,9 @@ type Props = {
   transactionRoute?: string;
 };
 
-export function ScreenLoadSpanSamples({
+export function SpanSamplesPanel({
   groupId,
+  moduleName,
   transactionName,
   transactionMethod,
   spanDescription,
@@ -112,8 +115,9 @@ export function ScreenLoadSpanSamples({
         <PageAlert />
         <ChartsContainer>
           <ChartsContainerItem key="release1">
-            <ScreenLoadSampleContainer
+            <SpanSamplesContainer
               groupId={groupId}
+              moduleName={moduleName}
               transactionName={transactionName}
               transactionMethod={transactionMethod}
               release={primaryRelease}
@@ -124,8 +128,9 @@ export function ScreenLoadSpanSamples({
             />
           </ChartsContainerItem>
           <ChartsContainerItem key="release2">
-            <ScreenLoadSampleContainer
+            <SpanSamplesContainer
               groupId={groupId}
+              moduleName={moduleName}
               transactionName={transactionName}
               transactionMethod={transactionMethod}
               release={secondaryRelease}
diff --git a/static/app/views/performance/mobile/screenload/screenLoadSpans/samples/samplesContainer.tsx b/static/app/views/performance/mobile/components/spanSamplesPanelContainer.tsx
similarity index 96%
rename from static/app/views/performance/mobile/screenload/screenLoadSpans/samples/samplesContainer.tsx
rename to static/app/views/performance/mobile/components/spanSamplesPanelContainer.tsx
index 8893bc46fd04e..7b6e71f1b218f 100644
--- a/static/app/views/performance/mobile/screenload/screenLoadSpans/samples/samplesContainer.tsx
+++ b/static/app/views/performance/mobile/components/spanSamplesPanelContainer.tsx
@@ -23,8 +23,11 @@ import {
 } from 'sentry/views/performance/mobile/screenload/screens/platformSelector';
 import {isCrossPlatform} from 'sentry/views/performance/mobile/screenload/screens/utils';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
-import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
-import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
+import {
+  type ModuleName,
+  SpanMetricsField,
+  type SpanMetricsQueryFilters,
+} from 'sentry/views/starfish/types';
 import {formatVersionAndCenterTruncate} from 'sentry/views/starfish/utils/centerTruncate';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import DurationChart from 'sentry/views/starfish/views/spanSummaryPage/sampleList/durationChart';
@@ -34,6 +37,7 @@ const {SPAN_SELF_TIME, SPAN_OP} = SpanMetricsField;
 
 type Props = {
   groupId: string;
+  moduleName: ModuleName;
   transactionName: string;
   additionalFilters?: Record<string, string>;
   project?: Project | null;
@@ -44,8 +48,9 @@ type Props = {
   transactionMethod?: string;
 };
 
-export function ScreenLoadSampleContainer({
+export function SpanSamplesContainer({
   groupId,
+  moduleName,
   transactionName,
   transactionMethod,
   release,
@@ -182,7 +187,7 @@ export function ScreenLoadSampleContainer({
         onMouseOverSample={sample => setHighlightedSpanId(sample.span_id)}
         groupId={groupId}
         transactionName={transactionName}
-        moduleName={ModuleName.SCREEN}
+        moduleName={moduleName}
         release={release}
         columnOrder={[
           {
diff --git a/static/app/views/performance/mobile/screenload/screenLoadSpans/index.tsx b/static/app/views/performance/mobile/screenload/screenLoadSpans/index.tsx
index 80c7f4c0ff1ed..cb18a005fbc26 100644
--- a/static/app/views/performance/mobile/screenload/screenLoadSpans/index.tsx
+++ b/static/app/views/performance/mobile/screenload/screenLoadSpans/index.tsx
@@ -21,13 +21,13 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
+import {SpanSamplesPanel} from 'sentry/views/performance/mobile/components/spanSamplesPanel';
 import {
   ScreenCharts,
   YAxis,
 } from 'sentry/views/performance/mobile/screenload/screenLoadSpans/charts';
 import {ScreenLoadEventSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/eventSamples';
 import {MetricsRibbon} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/metricsRibbon';
-import {ScreenLoadSpanSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples';
 import {ScreenLoadSpansTable} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/table';
 import {
   MobileCursors,
@@ -42,7 +42,7 @@ import {
   ReleaseComparisonSelector,
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/starfish/components/releaseSelector';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Query = {
@@ -209,8 +209,9 @@ function ScreenLoadSpans() {
                 project={project}
               />
               {spanGroup && (
-                <ScreenLoadSpanSamples
+                <SpanSamplesPanel
                   groupId={spanGroup}
+                  moduleName={ModuleName.SCREEN}
                   transactionName={transactionName}
                   spanDescription={spanDescription}
                   onClose={() => {
diff --git a/static/app/views/performance/mobile/ui/screenSummary/index.tsx b/static/app/views/performance/mobile/ui/screenSummary/index.tsx
index 7b3e3cc7246e9..f7c3bb994221f 100644
--- a/static/app/views/performance/mobile/ui/screenSummary/index.tsx
+++ b/static/app/views/performance/mobile/ui/screenSummary/index.tsx
@@ -14,12 +14,12 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {SamplesTables} from 'sentry/views/performance/mobile/components/samplesTables';
-import {ScreenLoadSpanSamples} from 'sentry/views/performance/mobile/screenload/screenLoadSpans/samples';
+import {SpanSamplesPanel} from 'sentry/views/performance/mobile/components/spanSamplesPanel';
 import {SpanOperationTable} from 'sentry/views/performance/mobile/ui/screenSummary/spanOperationTable';
 import {BASE_URL} from 'sentry/views/performance/mobile/ui/settings';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {ReleaseComparisonSelector} from 'sentry/views/starfish/components/releaseSelector';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Query = {
@@ -102,11 +102,12 @@ function ScreenSummary() {
             </SamplesContainer>
 
             {spanGroup && spanOp && (
-              <ScreenLoadSpanSamples
+              <SpanSamplesPanel
                 additionalFilters={{
                   ...(deviceClass ? {[SpanMetricsField.DEVICE_CLASS]: deviceClass} : {}),
                 }}
                 groupId={spanGroup}
+                moduleName={ModuleName.OTHER}
                 transactionName={transactionName}
                 spanDescription={spanDescription}
                 spanOp={spanOp}