ref(insights): Wrap mobile insights module in ModulePageProviders (#…

…70771) Preparation for URL and breadcrumb changes. The Mobile modules don't wrap pages in `ModulePageProviders`. I need the wrapper so that I can wholesale change the base URL for all modules at once without doing awkward search-and-replace. Best enjoyed with whitespace off. ## Changes - Fix typing in `ModulePageProviders` Delegate to `Feature` for anything passed through. - Wrap mobile modules in `ModulePageProviders` `ModulePageProviders` includes `Feature`, `SentryDocumentTitle`, and `PageFiltersContainer`, so it's not necessary to wrap in those components manually. --------- Co-authored-by: Nar Saynorath <nar.saynorath@sentry.io>
getsentry · May 14, 2024 · 91899cc · 91899cc
1 parent 3a04d92
commit 91899cc
Show file tree

Hide file tree

Showing 9 changed files with 494 additions and 451 deletions.
diff --git a/static/app/views/performance/mobile/appStarts/index.tsx b/static/app/views/performance/mobile/appStarts/index.tsx
@@ -1,20 +1,29 @@
-import Feature from 'sentry/components/acl/feature';
-import useOrganization from 'sentry/utils/useOrganization';
 import AppStartup from 'sentry/views/performance/mobile/appStarts/screens';
 import {StartTypeSelector} from 'sentry/views/performance/mobile/appStarts/screenSummary/startTypeSelector';
 import ScreensTemplate from 'sentry/views/performance/mobile/components/screensTemplate';
+import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 
-export default function InitializationModule() {
-  const organization = useOrganization();
+export function InitializationModule() {
+  return (
+    <ScreensTemplate
+      additionalSelectors={<StartTypeSelector />}
+      content={<AppStartup chartHeight={200} />}
+      title={ROUTE_NAMES['app-startup']}
+    />
+  );
+}
 
+function PageWithProviders() {
   return (
-    <Feature features="spans-first-ui" organization={organization}>
-      <ScreensTemplate
-        additionalSelectors={<StartTypeSelector />}
-        content={<AppStartup chartHeight={200} />}
-        title={ROUTE_NAMES['app-startup']}
-      />
-    </Feature>
+    <ModulePageProviders
+      title={ROUTE_NAMES['app-startup']}
+      baseURL="/performance/mobile/app-startup"
+      features="spans-first-ui"
+    >
+      <InitializationModule />
+    </ModulePageProviders>
   );
 }
+
+export default PageWithProviders;
diff --git a/static/app/views/performance/mobile/appStarts/screenSummary/index.spec.tsx b/static/app/views/performance/mobile/appStarts/screenSummary/index.spec.tsx
@@ -6,7 +6,7 @@ import {render, screen, waitFor, within} from 'sentry-test/reactTestingLibrary';
 
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import ScreenSummary from 'sentry/views/performance/mobile/appStarts/screenSummary';
+import {ScreenSummary} from 'sentry/views/performance/mobile/appStarts/screenSummary';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
 
 jest.mock('sentry/utils/usePageFilters');

diff --git a/static/app/views/performance/mobile/appStarts/screenSummary/index.tsx b/static/app/views/performance/mobile/appStarts/screenSummary/index.tsx
@@ -9,8 +9,6 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
-import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {browserHistory} from 'sentry/utils/browserHistory';
@@ -28,12 +26,14 @@ import {
 } from 'sentry/views/performance/mobile/appStarts/screenSummary/startTypeSelector';
 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 {ROUTE_NAMES} from 'sentry/views/starfish/utils/routeNames';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 import AppStartWidgets from './widgets';
@@ -50,7 +50,7 @@ type Query = {
   transaction: string;
 };
 
-function ScreenSummary() {
+export function ScreenSummary() {
   const organization = useOrganization();
   const location = useLocation<Query>();
   const router = useRouter();
@@ -109,120 +109,130 @@ function ScreenSummary() {
   ];
 
   return (
-    <SentryDocumentTitle title={transactionName} orgSlug={organization.slug}>
-      <Layout.Page>
-        <PageAlertProvider>
-          <Layout.Header>
-            <Layout.HeaderContent>
-              <Breadcrumbs crumbs={crumbs} />
-              <Layout.Title>{transactionName}</Layout.Title>
-            </Layout.HeaderContent>
-          </Layout.Header>
-
-          <Layout.Body>
-            <Layout.Main fullWidth>
-              <PageAlert />
-              <HeaderContainer>
-                <ControlsContainer>
-                  <PageFiltersContainer>
-                    <PageFilterBar condensed>
-                      <DatePageFilter />
-                    </PageFilterBar>
-                  </PageFiltersContainer>
-                  <ReleaseComparisonSelector />
-                  <StartTypeSelector />
-                </ControlsContainer>
-                <MetricsRibbon
-                  dataset={DiscoverDatasets.SPANS_METRICS}
-                  filters={[
-                    `transaction:${transactionName}`,
-                    `span.op:app.start.${appStartType}`,
-                    '(',
-                    'span.description:"Cold Start"',
-                    'OR',
-                    'span.description:"Warm Start"',
-                    ')',
-                  ]}
-                  fields={[
-                    `avg_if(span.duration,release,${primaryRelease})`,
-                    `avg_if(span.duration,release,${secondaryRelease})`,
-                    `avg_compare(span.duration,release,${primaryRelease},${secondaryRelease})`,
-                    'count()',
-                  ]}
-                  blocks={[
-                    {
-                      unit: DurationUnit.MILLISECOND,
-                      allowZero: false,
-                      title:
-                        appStartType === COLD_START_TYPE
-                          ? t('Cold Start (%s)', PRIMARY_RELEASE_ALIAS)
-                          : t('Warm Start (%s)', PRIMARY_RELEASE_ALIAS),
-                      dataKey: `avg_if(span.duration,release,${primaryRelease})`,
-                    },
-                    {
-                      unit: DurationUnit.MILLISECOND,
-                      allowZero: false,
-                      title:
-                        appStartType === COLD_START_TYPE
-                          ? t('Cold Start (%s)', SECONDARY_RELEASE_ALIAS)
-                          : t('Warm Start (%s)', SECONDARY_RELEASE_ALIAS),
-                      dataKey: `avg_if(span.duration,release,${secondaryRelease})`,
-                    },
-                    {
-                      unit: 'percent_change',
-                      title: t('Change'),
-                      dataKey: `avg_compare(span.duration,release,${primaryRelease},${secondaryRelease})`,
-                    },
-                    {
-                      unit: 'count',
-                      title: t('Count'),
-                      dataKey: 'count()',
-                    },
-                  ]}
-                  referrer="api.starfish.mobile-startup-totals"
-                />
-              </HeaderContainer>
-              <ErrorBoundary mini>
-                <AppStartWidgets additionalFilters={[`transaction:${transactionName}`]} />
-              </ErrorBoundary>
-              <SamplesContainer>
-                <SamplesTables transactionName={transactionName} />
-              </SamplesContainer>
-              {spanGroup && spanOp && appStartType && (
-                <ScreenLoadSpanSamples
-                  additionalFilters={{
-                    [SpanMetricsField.APP_START_TYPE]: appStartType,
-                    ...(deviceClass
-                      ? {[SpanMetricsField.DEVICE_CLASS]: deviceClass}
-                      : {}),
-                  }}
-                  groupId={spanGroup}
-                  transactionName={transactionName}
-                  spanDescription={spanDescription}
-                  spanOp={spanOp}
-                  onClose={() => {
-                    router.replace({
-                      pathname: router.location.pathname,
-                      query: omit(
-                        router.location.query,
-                        'spanGroup',
-                        'transactionMethod',
-                        'spanDescription',
-                        'spanOp'
-                      ),
-                    });
-                  }}
-                />
-              )}
-            </Layout.Main>
-          </Layout.Body>
-        </PageAlertProvider>
-      </Layout.Page>
-    </SentryDocumentTitle>
+    <Layout.Page>
+      <PageAlertProvider>
+        <Layout.Header>
+          <Layout.HeaderContent>
+            <Breadcrumbs crumbs={crumbs} />
+            <Layout.Title>{transactionName}</Layout.Title>
+          </Layout.HeaderContent>
+        </Layout.Header>
+
+        <Layout.Body>
+          <Layout.Main fullWidth>
+            <PageAlert />
+            <HeaderContainer>
+              <ControlsContainer>
+                <PageFilterBar condensed>
+                  <DatePageFilter />
+                </PageFilterBar>
+                <ReleaseComparisonSelector />
+                <StartTypeSelector />
+              </ControlsContainer>
+              <MetricsRibbon
+                dataset={DiscoverDatasets.SPANS_METRICS}
+                filters={[
+                  `transaction:${transactionName}`,
+                  `span.op:app.start.${appStartType}`,
+                  '(',
+                  'span.description:"Cold Start"',
+                  'OR',
+                  'span.description:"Warm Start"',
+                  ')',
+                ]}
+                fields={[
+                  `avg_if(span.duration,release,${primaryRelease})`,
+                  `avg_if(span.duration,release,${secondaryRelease})`,
+                  `avg_compare(span.duration,release,${primaryRelease},${secondaryRelease})`,
+                  'count()',
+                ]}
+                blocks={[
+                  {
+                    unit: DurationUnit.MILLISECOND,
+                    allowZero: false,
+                    title:
+                      appStartType === COLD_START_TYPE
+                        ? t('Cold Start (%s)', PRIMARY_RELEASE_ALIAS)
+                        : t('Warm Start (%s)', PRIMARY_RELEASE_ALIAS),
+                    dataKey: `avg_if(span.duration,release,${primaryRelease})`,
+                  },
+                  {
+                    unit: DurationUnit.MILLISECOND,
+                    allowZero: false,
+                    title:
+                      appStartType === COLD_START_TYPE
+                        ? t('Cold Start (%s)', SECONDARY_RELEASE_ALIAS)
+                        : t('Warm Start (%s)', SECONDARY_RELEASE_ALIAS),
+                    dataKey: `avg_if(span.duration,release,${secondaryRelease})`,
+                  },
+                  {
+                    unit: 'percent_change',
+                    title: t('Change'),
+                    dataKey: `avg_compare(span.duration,release,${primaryRelease},${secondaryRelease})`,
+                  },
+                  {
+                    unit: 'count',
+                    title: t('Count'),
+                    dataKey: 'count()',
+                  },
+                ]}
+                referrer="api.starfish.mobile-startup-totals"
+              />
+            </HeaderContainer>
+            <ErrorBoundary mini>
+              <AppStartWidgets additionalFilters={[`transaction:${transactionName}`]} />
+            </ErrorBoundary>
+            <SamplesContainer>
+              <SamplesTables transactionName={transactionName} />
+            </SamplesContainer>
+            {spanGroup && spanOp && appStartType && (
+              <ScreenLoadSpanSamples
+                additionalFilters={{
+                  [SpanMetricsField.APP_START_TYPE]: appStartType,
+                  ...(deviceClass ? {[SpanMetricsField.DEVICE_CLASS]: deviceClass} : {}),
+                }}
+                groupId={spanGroup}
+                transactionName={transactionName}
+                spanDescription={spanDescription}
+                spanOp={spanOp}
+                onClose={() => {
+                  router.replace({
+                    pathname: router.location.pathname,
+                    query: omit(
+                      router.location.query,
+                      'spanGroup',
+                      'transactionMethod',
+                      'spanDescription',
+                      'spanOp'
+                    ),
+                  });
+                }}
+              />
+            )}
+          </Layout.Main>
+        </Layout.Body>
+      </PageAlertProvider>
+    </Layout.Page>
+  );
+}
+
+function PageWithProviders() {
+  const location = useLocation<Query>();
+
+  const {transaction} = location.query;
+
+  return (
+    <ModulePageProviders
+      title={[transaction, ROUTE_NAMES['app-startup']].join(' — ')}
+      baseURL="/performance/mobile/app-startup/spans"
+      features="spans-first-ui"
+    >
+      <ScreenSummary />
+    </ModulePageProviders>
   );
 }
 
-export default ScreenSummary;
+export default PageWithProviders;
 
 const ControlsContainer = styled('div')`
   display: flex;