ref(insights): abstract ScreenLoadSpanSamples side panel for mobile modules (#70890)

Currently, the app starts module depends on `ScreenLoadSpanSamples` in
`mobile/screenload` to display the side panel. However, we therefore
cannot identify which module the panel comes from, which we will need
for analytics (e.g. # of times a sample span is clicked per module) -
#70822.

This PR moves the component under `mobile/components` and adds a
moduleName prop to identify the originating module.

Author: KevinL10

Diff for: static/app/views/performance/mobile/appStarts/screenSummary/index.tsx

@@ -25,15 +25,15 @@ import {
   StartTypeSelector,
 } from 'sentry/views/performance/mobile/appStarts/screenSummary/startTypeSelector';
 import {BASE_URL} from 'sentry/views/performance/mobile/appStarts/settings';
+import {SpanSamplesPanel} from 'sentry/views/performance/mobile/components/spanSamplesPanel';
 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 +187,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 for: static/app/views/performance/mobile/screenload/screenLoadSpans/samples/index.tsx renamed to 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 for: static/app/views/performance/mobile/screenload/screenLoadSpans/samples/samplesContainer.tsx renamed to 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 for: 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 for: 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}