ref(insights): Use consistent ModulePageProviders wrapping (#70782)

- always lift `ModulePageProviders` out of the component - always call it `PageWithProviders`
getsentry · May 14, 2024 · 85ededb · 85ededb
1 parent 9ae4b44
commit 85ededb
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 43 deletions.
diff --git a/static/app/views/performance/browser/resources/index.tsx b/static/app/views/performance/browser/resources/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
@@ -35,11 +36,7 @@ function ResourcesLandingPage() {
   const filters = useResourceModuleFilters();
 
   return (
-    <ModulePageProviders
-      title={[t('Performance'), t('Resources')].join(' — ')}
-      baseURL="/performance/browser/resources"
-      features="spans-first-ui"
-    >
+    <React.Fragment>
       <PageAlertProvider>
         <Layout.Header>
           <Layout.HeaderContent>
@@ -86,12 +83,24 @@ function ResourcesLandingPage() {
           </Layout.Main>
         </Layout.Body>
       </PageAlertProvider>
+    </React.Fragment>
+  );
+}
+
+function PageWithProviders() {
+  return (
+    <ModulePageProviders
+      title={[t('Performance'), t('Resources')].join(' — ')}
+      baseURL="/performance/browser/resources"
+      features="spans-first-ui"
+    >
+      <ResourcesLandingPage />
     </ModulePageProviders>
   );
 }
 
+export default PageWithProviders;
+
 export const PaddedContainer = styled('div')`
   margin-bottom: ${space(2)};
 `;
-
-export default ResourcesLandingPage;
diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
@@ -80,11 +81,7 @@ function ResourceSummary() {
     ) ||
     (uniqueSpanOps.size === 1 && spanMetrics[SPAN_OP] === ResourceSpanOps.IMAGE);
   return (
-    <ModulePageProviders
-      title={[t('Performance'), t('Resources'), t('Resource Summary')].join(' — ')}
-      baseURL="/performance/browser/resources"
-      features="spans-first-ui"
-    >
+    <React.Fragment>
       <Layout.Header>
         <Layout.HeaderContent>
           <Breadcrumbs
@@ -155,14 +152,26 @@ function ResourceSummary() {
           />
         </Layout.Main>
       </Layout.Body>
+    </React.Fragment>
+  );
+}
+
+function PageWithProviders() {
+  return (
+    <ModulePageProviders
+      title={[t('Performance'), t('Resources'), t('Resource Summary')].join(' — ')}
+      baseURL="/performance/browser/resources"
+      features="spans-first-ui"
+    >
+      <ResourceSummary />
     </ModulePageProviders>
   );
 }
 
+export default PageWithProviders;
+
 const HeaderContainer = styled('div')`
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 `;
-
-export default ResourceSummary;
diff --git a/static/app/views/performance/browser/webVitals/pageOverview.tsx b/static/app/views/performance/browser/webVitals/pageOverview.tsx
@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 import moment from 'moment';
@@ -74,7 +74,7 @@ function getCurrentTabSelection(selectedTab) {
   return LandingDisplayField.OVERVIEW;
 }
 
-export default function PageOverview() {
+export function PageOverview() {
   const organization = useOrganization();
   const location = useLocation();
   const {projects} = useProjects();
@@ -138,11 +138,7 @@ export default function PageOverview() {
     moment(FID_DEPRECATION_DATE).format('DD MMMM YYYY');
 
   return (
-    <ModulePageProviders
-      title={[t('Performance'), t('Web Vitals')].join(' — ')}
-      baseURL="/performance/browser/pageloads"
-      features="spans-first-ui"
-    >
+    <React.Fragment>
       <Tabs
         value={tab}
         onChange={value => {
@@ -303,10 +299,24 @@ export default function PageOverview() {
           }}
         />
       </Tabs>
+    </React.Fragment>
+  );
+}
+
+function PageWithProviders() {
+  return (
+    <ModulePageProviders
+      title={[t('Performance'), t('Web Vitals')].join(' — ')}
+      baseURL="/performance/browser/pageloads"
+      features="spans-first-ui"
+    >
+      <PageOverview />
     </ModulePageProviders>
   );
 }
 
+export default PageWithProviders;
+
 const ViewAllPagesButton = styled(LinkButton)`
   margin-right: ${space(1)};
 `;

diff --git a/static/app/views/performance/browser/webVitals/webVitalsLandingPage.tsx b/static/app/views/performance/browser/webVitals/webVitalsLandingPage.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useState} from 'react';
+import React, {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 import moment from 'moment';
@@ -36,7 +36,7 @@ import {WebVitalsDetailPanel} from 'sentry/views/performance/browser/webVitals/w
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import Onboarding from 'sentry/views/performance/onboarding';
 
-export default function WebVitalsLandingPage() {
+export function WebVitalsLandingPage() {
   const organization = useOrganization();
   const location = useLocation();
   const onboardingProject = useOnboardingProject();
@@ -68,11 +68,7 @@ export default function WebVitalsLandingPage() {
     moment(FID_DEPRECATION_DATE).format('DD MMMM YYYY');
 
   return (
-    <ModulePageProviders
-      title={[t('Performance'), t('Web Vitals')].join(' — ')}
-      baseURL="/performance/browser/pageloads"
-      features="spans-first-ui"
-    >
+    <React.Fragment>
       <Layout.Header>
         <Layout.HeaderContent>
           <Breadcrumbs
@@ -178,10 +174,24 @@ export default function WebVitalsLandingPage() {
           setState({...state, webVital: null});
         }}
       />
+    </React.Fragment>
+  );
+}
+
+function PageWithProviders() {
+  return (
+    <ModulePageProviders
+      title={[t('Performance'), t('Web Vitals')].join(' — ')}
+      baseURL="/performance/browser/pageloads"
+      features="spans-first-ui"
+    >
+      <WebVitalsLandingPage />
     </ModulePageProviders>
   );
 }
 
+export default PageWithProviders;
+
 const TopMenuContainer = styled('div')`
   display: flex;
 `;

diff --git a/static/app/views/performance/cache/cacheLandingPage.tsx b/static/app/views/performance/cache/cacheLandingPage.tsx
@@ -202,7 +202,7 @@ export function CacheLandingPage() {
   );
 }
 
-export function LandingPageWithProviders() {
+function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), MODULE_TITLE].join(' — ')}
@@ -214,6 +214,8 @@ export function LandingPageWithProviders() {
   );
 }
 
+export default PageWithProviders;
+
 const combineMeta = (
   meta1?: EventsMetaType,
   meta2?: EventsMetaType
@@ -247,5 +249,3 @@ const DEFAULT_SORT = {
 };
 
 const TRANSACTIONS_TABLE_ROW_COUNT = 20;
-
-export default LandingPageWithProviders;
diff --git a/static/app/views/performance/database/databaseLandingPage.tsx b/static/app/views/performance/database/databaseLandingPage.tsx
@@ -265,7 +265,7 @@ const SelectorContainer = styled('div')`
 
 const LIMIT: number = 25;
 
-function LandingPageWithProviders() {
+function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), t('Database')].join(' — ')}
@@ -277,4 +277,4 @@ function LandingPageWithProviders() {
   );
 }
 
-export default LandingPageWithProviders;
+export default PageWithProviders;
diff --git a/static/app/views/performance/http/httpDomainSummaryPage.tsx b/static/app/views/performance/http/httpDomainSummaryPage.tsx
@@ -354,7 +354,7 @@ const MetricsRibbon = styled('div')`
   gap: ${space(4)};
 `;
 
-function LandingPageWithProviders() {
+function PageWithProviders() {
   return (
     <ModulePageProviders
       baseURL="/performance/http"
@@ -366,4 +366,4 @@ function LandingPageWithProviders() {
   );
 }
 
-export default LandingPageWithProviders;
+export default PageWithProviders;
diff --git a/static/app/views/performance/http/httpLandingPage.tsx b/static/app/views/performance/http/httpLandingPage.tsx
@@ -247,7 +247,7 @@ const DEFAULT_SORT = {
 
 const DOMAIN_TABLE_ROW_COUNT = 10;
 
-function LandingPageWithProviders() {
+function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), MODULE_TITLE].join(' — ')}
@@ -259,4 +259,4 @@ function LandingPageWithProviders() {
   );
 }
 
-export default LandingPageWithProviders;
+export default PageWithProviders;
diff --git a/static/app/views/performance/queues/destinationSummary/destinationSummaryPage.spec.tsx b/static/app/views/performance/queues/destinationSummary/destinationSummaryPage.spec.tsx
@@ -6,7 +6,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
-import DestinationSummaryPageWithProviders from 'sentry/views/performance/queues/destinationSummary/destinationSummaryPage';
+import PageWithProviders from 'sentry/views/performance/queues/destinationSummary/destinationSummaryPage';
 
 jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
@@ -72,7 +72,7 @@ describe('destinationSummaryPage', () => {
   });
 
   it('renders', async () => {
-    render(<DestinationSummaryPageWithProviders />);
+    render(<PageWithProviders />);
     await screen.findByRole('table', {name: 'Transactions'});
     await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator'));
     screen.getByText('Avg Latency');

diff --git a/static/app/views/performance/queues/destinationSummary/destinationSummaryPage.tsx b/static/app/views/performance/queues/destinationSummary/destinationSummaryPage.tsx
@@ -160,7 +160,7 @@ function DestinationSummaryPage() {
   );
 }
 
-function DestinationSummaryPageWithProviders() {
+function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), MODULE_TITLE].join(' — ')}
@@ -171,7 +171,7 @@ function DestinationSummaryPageWithProviders() {
     </ModulePageProviders>
   );
 }
-export default DestinationSummaryPageWithProviders;
+export default PageWithProviders;
 
 const Flex = styled('div')`
   display: flex;

diff --git a/static/app/views/performance/queues/queuesLandingPage.tsx b/static/app/views/performance/queues/queuesLandingPage.tsx
@@ -100,7 +100,7 @@ function QueuesLandingPage() {
   );
 }
 
-function LandingPageWithProviders() {
+function PageWithProviders() {
   return (
     <ModulePageProviders
       title={[t('Performance'), MODULE_TITLE].join(' — ')}
@@ -111,7 +111,8 @@ function LandingPageWithProviders() {
     </ModulePageProviders>
   );
 }
-export default LandingPageWithProviders;
+
+export default PageWithProviders;
 
 const Flex = styled('div')`
   display: flex;