wip

static/app/views/performance/breadcrumb.tsx

@@ -6,7 +6,7 @@ import {Organization} from 'sentry/types';
 import {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
 import {decodeScalar} from 'sentry/utils/queryString';
 
-import Tab from './transactionSummary/tabs';
+import Tab from './transactionSummary/pageLayout/tabs';
 import {eventsRouteWithQuery} from './transactionSummary/transactionEvents/utils';
 import {spansRouteWithQuery} from './transactionSummary/transactionSpans/utils';
 import {tagsRouteWithQuery} from './transactionSummary/transactionTags/utils';

static/app/views/performance/transactionSummary/header.spec.tsx

@@ -3,7 +3,7 @@ import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import EventView from 'sentry/utils/discover/eventView';
 import TransactionHeader from 'sentry/views/performance/transactionSummary/header';
-import Tab from 'sentry/views/performance/transactionSummary/tabs';
+import Tab from 'sentry/views/performance/transactionSummary/pageLayout/tabs';
 
 type InitialOpts = {
   features?: string[];

static/app/views/performance/transactionSummary/header.tsx

@@ -5,13 +5,9 @@ import Feature from 'sentry/components/acl/feature';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import ButtonBar from 'sentry/components/buttonBar';
 import {CreateAlertFromViewButton} from 'sentry/components/createAlertButton';
-import FeatureBadge from 'sentry/components/featureBadge';
 import IdBadge from 'sentry/components/idBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
-import ReplayCountBadge from 'sentry/components/replays/replayCountBadge';
-import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
 import useReplaysCount from 'sentry/components/replays/useReplaysCount';
-import {TabList} from 'sentry/components/tabs';
 import {t} from 'sentry/locale';
 import {Organization, Project} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
@@ -24,7 +20,8 @@ import Breadcrumb from 'sentry/views/performance/breadcrumb';
 
 import {getCurrentLandingDisplay, LandingDisplayField} from '../landing/utils';
 
-import Tab from './tabs';
+import Tab from './pageLayout/tabs';
+import TransactionSummaryTabs from './pageLayout/transactionSummaryTabs';
 import TeamKeyTransactionButton from './teamKeyTransactionButton';
 import TransactionThresholdButton from './transactionThresholdButton';
 import {TransactionThresholdMetric} from './transactionThresholdModal';
@@ -185,51 +182,14 @@ function TransactionHeader({
       >
         {({hasMeasurements}) => {
           const renderWebVitals = getWebVitals(!!hasMeasurements);
-
           return (
-            <TabList
-              hideBorder
-              outerWrapStyles={{
-                gridColumn: '1 / -1',
-              }}
-            >
-              <TabList.Item key={Tab.TransactionSummary}>{t('Overview')}</TabList.Item>
-              <TabList.Item key={Tab.Events}>{t('All Events')}</TabList.Item>
-              <TabList.Item key={Tab.Tags}>{t('Tags')}</TabList.Item>
-              <TabList.Item key={Tab.Spans}>{t('Spans')}</TabList.Item>
-              <TabList.Item
-                key={Tab.Anomalies}
-                textValue={t('Anomalies')}
-                hidden={!hasAnomalyDetection}
-              >
-                {t('Anomalies')}
-                <FeatureBadge type="alpha" noTooltip />
-              </TabList.Item>
-              <TabList.Item
-                key={Tab.WebVitals}
-                textValue={t('Web Vitals')}
-                hidden={!renderWebVitals}
-              >
-                {t('Web Vitals')}
-              </TabList.Item>
-              <TabList.Item
-                key={Tab.Replays}
-                textValue={t('Replays')}
-                hidden={!hasSessionReplay}
-              >
-                {t('Replays')}
-                <ReplayCountBadge count={replaysCount} />
-                <ReplaysFeatureBadge noTooltip />
-              </TabList.Item>
-              <TabList.Item
-                key={Tab.Profiling}
-                textValue={t('Profiling')}
-                hidden={!hasProfiling}
-              >
-                {t('Profiling')}
-                <FeatureBadge type="beta" noTooltip />
-              </TabList.Item>
-            </TabList>
+            <TransactionSummaryTabs
+              hasAnomalyDetection={hasAnomalyDetection}
+              hasProfiling={!!hasProfiling}
+              hasSessionReplay={!!hasSessionReplay}
+              renderWebVitals={renderWebVitals}
+              replaysCount={replaysCount}
+            />
           );
         }}
       </HasMeasurementsQuery>

static/app/views/performance/transactionSummary/pageLayout.tsx

@@ -20,10 +20,11 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 import {getTransactionName} from '../utils';
 
+import PageLayout from './pageLayout/pageLayout';
+import Tab from './pageLayout/tabs';
+import usePageTabs from './pageLayout/usePageTabs';
 import TransactionHeader from './header';
-import Tab from './tabs';
 import {TransactionThresholdMetric} from './transactionThresholdModal';
-import usePageTabs from './usePageTabs';
 
 export type ChildProps = {
   eventView: EventView;
@@ -53,7 +54,7 @@ type Props = {
   features?: string[];
 };
 
-function PageLayout(props: Props) {
+function Page(props: Props) {
   const {
     location,
     organization,
@@ -92,74 +93,94 @@ function PageLayout(props: Props) {
   const eventView = generateEventView({location, transactionName, organization});
 
   return (
-    <SentryDocumentTitle
+    <PageLayout
       title={getDocumentTitle(transactionName)}
-      orgSlug={organization.slug}
-      projectSlug={project?.slug}
+      organization={organization}
+      tab={tab}
+      project={project}
     >
-      <Feature
-        features={['performance-view', ...features]}
+      <ChildComponent
+        location={location}
         organization={organization}
-        renderDisabled={NoAccess}
-      >
-        <PerformanceEventViewProvider value={{eventView}}>
-          <PageFiltersContainer
-            shouldForceProject={defined(project)}
-            forceProject={project}
-            specificProjectSlugs={defined(project) ? [project.slug] : []}
-          >
-            <Tabs value={tab} onChange={onTabChange}>
-              <Layout.Page>
-                <TransactionHeader
-                  eventView={eventView}
-                  location={location}
-                  organization={organization}
-                  projects={projects}
-                  projectId={projectId}
-                  transactionName={transactionName}
-                  currentTab={tab}
-                  hasWebVitals={tab === Tab.WebVitals ? 'yes' : 'maybe'}
-                  onChangeThreshold={(threshold, metric) => {
-                    setTransactionThreshold(threshold);
-                    setTransactionThresholdMetric(metric);
-                  }}
-                  metricsCardinality={metricsCardinality}
-                />
-                <Layout.Body>
-                  {defined(error) && (
-                    <StyledAlert type="error" showIcon>
-                      {error}
-                    </StyledAlert>
-                  )}
-                  <ChildComponent
-                    location={location}
-                    organization={organization}
-                    projects={projects}
-                    eventView={eventView}
-                    projectId={projectId}
-                    transactionName={transactionName}
-                    setError={setError}
-                    transactionThreshold={transactionThreshold}
-                    transactionThresholdMetric={transactionThresholdMetric}
-                  />
-                </Layout.Body>
-              </Layout.Page>
-            </Tabs>
-          </PageFiltersContainer>
-        </PerformanceEventViewProvider>
-      </Feature>
-    </SentryDocumentTitle>
+        projects={projects}
+        eventView={eventView}
+        projectId={projectId}
+        transactionName={transactionName}
+        setError={setError}
+        transactionThreshold={transactionThreshold}
+        transactionThresholdMetric={transactionThresholdMetric}
+      />
+    </PageLayout>
   );
+  // return (
+  //   <SentryDocumentTitle
+  //     title={getDocumentTitle(transactionName)}
+  //     orgSlug={organization.slug}
+  //     projectSlug={project?.slug}
+  //   >
+  //     <Feature
+  //       features={['performance-view', ...features]}
+  //       organization={organization}
+  //       renderDisabled={NoAccess}
+  //     >
+  //       <PerformanceEventViewProvider value={{eventView}}>
+  //         <PageFiltersContainer
+  //           shouldForceProject={defined(project)}
+  //           forceProject={project}
+  //           specificProjectSlugs={defined(project) ? [project.slug] : []}
+  //         >
+  //           <Tabs value={tab} onChange={onTabChange}>
+  //             <Layout.Page>
+  //               <TransactionHeader
+  //                 eventView={eventView}
+  //                 location={location}
+  //                 organization={organization}
+  //                 projects={projects}
+  //                 projectId={projectId}
+  //                 transactionName={transactionName}
+  //                 currentTab={tab}
+  //                 hasWebVitals={tab === Tab.WebVitals ? 'yes' : 'maybe'}
+  //                 onChangeThreshold={(threshold, metric) => {
+  //                   setTransactionThreshold(threshold);
+  //                   setTransactionThresholdMetric(metric);
+  //                 }}
+  //                 metricsCardinality={metricsCardinality}
+  //               />
+  //               <Layout.Body>
+  //                 {defined(error) && (
+  //                   <StyledAlert type="error" showIcon>
+  //                     {error}
+  //                   </StyledAlert>
+  //                 )}
+  //                 <ChildComponent
+  //                   location={location}
+  //                   organization={organization}
+  //                   projects={projects}
+  //                   eventView={eventView}
+  //                   projectId={projectId}
+  //                   transactionName={transactionName}
+  //                   setError={setError}
+  //                   transactionThreshold={transactionThreshold}
+  //                   transactionThresholdMetric={transactionThresholdMetric}
+  //                 />
+  //               </Layout.Body>
+  //             </Layout.Page>
+  //           </Tabs>
+  //         </PageFiltersContainer>
+  //       </PerformanceEventViewProvider>
+  //     </Feature>
+  //   </SentryDocumentTitle>
+  // );
 }
 
 export function NoAccess() {
   return <Alert type="warning">{t("You don't have access to this feature")}</Alert>;
 }
 
-const StyledAlert = styled(Alert)`
-  grid-column: 1/3;
-  margin: 0;
-`;
+// const StyledAlert = styled(Alert)`
+//   grid-column: 1/3;
+//   margin: 0;
+// `;
 
 export function redirectToPerformanceHomepage(
   organization: Organization,
@@ -176,4 +197,4 @@ export function redirectToPerformanceHomepage(
   );
 }
 
-export default PageLayout;
+export default Page;

static/app/views/performance/transactionSummary/pageLayout/pageLayout.tsx

@@ -0,0 +1,97 @@
+import {useState} from 'react';
+import {browserHistory} from 'react-router';
+import styled from '@emotion/styled';
+import {Location} from 'history';
+
+import Feature from 'sentry/components/acl/feature';
+import {Alert} from 'sentry/components/alert';
+import * as Layout from 'sentry/components/layouts/thirds';
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import {Tabs} from 'sentry/components/tabs';
+import {t} from 'sentry/locale';
+import {Organization, Project} from 'sentry/types';
+import {defined} from 'sentry/utils';
+import EventView from 'sentry/utils/discover/eventView';
+import {useMetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
+import {PerformanceEventViewProvider} from 'sentry/utils/performance/contexts/performanceEventViewContext';
+import {decodeScalar} from 'sentry/utils/queryString';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
+
+import {getTransactionName} from '../../utils';
+import TransactionHeader from '../header';
+import usePageTabs from '../pageLayout/usePageTabs';
+import {TransactionThresholdMetric} from '../transactionThresholdModal';
+
+import Tab from './tabs';
+
+type Props = {
+  children: React.ReactNode;
+  organization: Organization;
+  project: undefined | Project;
+  tab: Tab;
+  title: string;
+};
+
+function PageLayout({children, tab, title, organization, project}: Props) {
+  return (
+    <SentryDocumentTitle
+      title={title}
+      orgSlug={organization.slug}
+      projectSlug={project?.slug}
+    >
+      <Feature
+        features={['performance-view', ...features]}
+        organization={organization}
+        renderDisabled={NoAccess}
+      >
+        <PerformanceEventViewProvider value={{eventView}}>
+          <PageFiltersContainer
+            shouldForceProject={defined(project)}
+            forceProject={project}
+            specificProjectSlugs={defined(project) ? [project.slug] : []}
+          >
+            <Tabs value={tab} onChange={onTabChange}>
+              <Layout.Page>
+                <TransactionHeader
+                  eventView={eventView}
+                  location={location}
+                  organization={organization}
+                  projects={projects}
+                  projectId={projectId}
+                  transactionName={transactionName}
+                  currentTab={tab}
+                  hasWebVitals={tab === Tab.WebVitals ? 'yes' : 'maybe'}
+                  onChangeThreshold={(threshold, metric) => {
+                    setTransactionThreshold(threshold);
+                    setTransactionThresholdMetric(metric);
+                  }}
+                  metricsCardinality={metricsCardinality}
+                />
+                <Layout.Body>
+                  {defined(error) && (
+                    <StyledAlert type="error" showIcon>
+                      {error}
+                    </StyledAlert>
+                  )}
+                  {children}
+                </Layout.Body>
+              </Layout.Page>
+            </Tabs>
+          </PageFiltersContainer>
+        </PerformanceEventViewProvider>
+      </Feature>
+    </SentryDocumentTitle>
+  );
+}
+
+function NoAccess() {
+  return <Alert type="warning">{t("You don't have access to this feature")}</Alert>;
+}
+
+const StyledAlert = styled(Alert)`
+  grid-column: 1/3;
+  margin: 0;
+`;
+
+export default PageLayout;

static/app/views/performance/transactionSummary/pageLayout/transactionSummaryTabs.tsx

@@ -0,0 +1,55 @@
+import FeatureBadge from 'sentry/components/featureBadge';
+import ReplayCountBadge from 'sentry/components/replays/replayCountBadge';
+import ReplaysFeatureBadge from 'sentry/components/replays/replaysFeatureBadge';
+import {TabList} from 'sentry/components/tabs';
+import {t} from 'sentry/locale';
+
+import Tab from './tabs';
+
+type Props = {
+  hasAnomalyDetection: boolean;
+  hasProfiling: boolean;
+  hasSessionReplay: boolean;
+  renderWebVitals: boolean;
+  replaysCount: undefined | number;
+};
+
+function TransactionSummaryTabs({
+  hasAnomalyDetection,
+  hasProfiling,
+  hasSessionReplay,
+  renderWebVitals,
+  replaysCount,
+}: Props) {
+  return (
+    <TabList
+      hideBorder
+      outerWrapStyles={{
+        gridColumn: '1 / -1',
+      }}
+    >
+      <TabList.Item key={Tab.TransactionSummary}>{t('Overview')}</TabList.Item>
+      <TabList.Item key={Tab.Events}>{t('All Events')}</TabList.Item>
+      <TabList.Item key={Tab.Tags}>{t('Tags')}</TabList.Item>
+      <TabList.Item key={Tab.Spans}>{t('Spans')}</TabList.Item>
+      <TabList.Item key={Tab.Anomalies} hidden={!hasAnomalyDetection}>
+        {t('Anomalies')}
+        <FeatureBadge type="alpha" noTooltip />
+      </TabList.Item>
+      <TabList.Item key={Tab.WebVitals} hidden={!renderWebVitals}>
+        {t('Web Vitals')}
+      </TabList.Item>
+      <TabList.Item key={Tab.Replays} hidden={!hasSessionReplay}>
+        {t('Replays')}
+        <ReplayCountBadge count={replaysCount} />
+        <ReplaysFeatureBadge noTooltip />
+      </TabList.Item>
+      <TabList.Item key={Tab.Profiling} hidden={!hasProfiling}>
+        {t('Profiling')}
+        <FeatureBadge type="beta" noTooltip />
+      </TabList.Item>
+    </TabList>
+  );
+}
+
+export default TransactionSummaryTabs;

static/app/views/performance/transactionSummary/usePageTabs.tsx → static/app/views/performance/transactionSummary/pageLayout/usePageTabs.tsx

@@ -7,17 +7,17 @@ import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAna
 import {decodeScalar} from 'sentry/utils/queryString';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
-import {getSelectedProjectPlatforms} from '../utils';
+import {getSelectedProjectPlatforms} from '../../utils';
+import {anomaliesRouteWithQuery} from '../transactionAnomalies/utils';
+import {eventsRouteWithQuery} from '../transactionEvents/utils';
+import {profilesRouteWithQuery} from '../transactionProfiles/utils';
+import {replaysRouteWithQuery} from '../transactionReplays/utils';
+import {spansRouteWithQuery} from '../transactionSpans/utils';
+import {tagsRouteWithQuery} from '../transactionTags/utils';
+import {vitalsRouteWithQuery} from '../transactionVitals/utils';
+import {transactionSummaryRouteWithQuery} from '../utils';
 
-import {anomaliesRouteWithQuery} from './transactionAnomalies/utils';
-import {eventsRouteWithQuery} from './transactionEvents/utils';
-import {profilesRouteWithQuery} from './transactionProfiles/utils';
-import {replaysRouteWithQuery} from './transactionReplays/utils';
-import {spansRouteWithQuery} from './transactionSpans/utils';
-import {tagsRouteWithQuery} from './transactionTags/utils';
-import {vitalsRouteWithQuery} from './transactionVitals/utils';
 import Tab from './tabs';
-import {transactionSummaryRouteWithQuery} from './utils';
 
 type TabEvents =
   | 'performance_views.vitals.vitals_tab_clicked'

static/app/views/performance/transactionSummary/transactionAnomalies/index.tsx

@@ -7,7 +7,7 @@ import withOrganization from 'sentry/utils/withOrganization';
 import withProjects from 'sentry/utils/withProjects';
 
 import PageLayout from '../pageLayout';
-import Tab from '../tabs';
+import Tab from '../pageLayout/tabs';
 
 import AnomaliesContent from './content';
 import {generateAnomaliesEventView} from './utils';

static/app/views/performance/transactionSummary/transactionEvents/index.tsx

@@ -26,7 +26,7 @@ import {
   SpanOperationBreakdownFilter,
 } from '../filter';
 import PageLayout, {ChildProps} from '../pageLayout';
-import Tab from '../tabs';
+import Tab from '../pageLayout/tabs';
 import {ZOOM_END, ZOOM_START} from '../transactionOverview/latencyChart/utils';
 
 import EventsContent from './content';