feat(performance): Replace GSH with page filters (#33715)

* add page filters to performance

* add navigation exception

static/app/components/organizations/pageFilters/utils.tsx

@@ -88,6 +88,7 @@ export function doesPathHaveNewFilters(pathname: string, organization: Organizat
           'dashboard',
           'releases',
           'discover',
+          'performance',
         ]
       : ['user-feedback', 'alerts', 'monitors', 'projects', 'dashboards', 'releases']
   ).map(route => `/organizations/${organization.slug}/${route}/`);

static/app/views/performance/content.tsx

@@ -130,6 +130,7 @@ function PerformanceContent({selection, location, demoMode}: Props) {
                 period: DEFAULT_STATS_PERIOD,
               },
             }}
+            hideGlobalHeader={organization.features.includes('selection-filters-v2')}
           >
             <PerformanceLanding
               eventView={eventView}

static/app/views/performance/landing/index.tsx

@@ -7,12 +7,16 @@ import {openModal} from 'sentry/actionCreators/modal';
 import Feature from 'sentry/components/acl/feature';
 import Button from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
+import DatePageFilter from 'sentry/components/datePageFilter';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import SearchBar from 'sentry/components/events/searchBar';
 import {GlobalSdkUpdateAlert} from 'sentry/components/globalSdkUpdateAlert';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageHeading from 'sentry/components/pageHeading';
 import * as TeamKeyTransactionManager from 'sentry/components/performance/teamKeyTransactionsManager';
+import ProjectPageFilter from 'sentry/components/projectPageFilter';
 import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {IconSettings} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -195,6 +199,13 @@ export function PerformanceLanding(props: Props) {
               />
             ) : (
               <Fragment>
+                {organization.features.includes('selection-filters-v2') && (
+                  <StyledPageFilterBar condensed>
+                    <ProjectPageFilter />
+                    <EnvironmentPageFilter />
+                    <DatePageFilter alignDropdown="left" />
+                  </StyledPageFilterBar>
+                )}
                 <SearchContainerWithFilter>
                   <SearchBar
                     searchSource="performance_landing"
@@ -251,3 +262,7 @@ const SearchContainerWithFilter = styled('div')`
     grid-template-columns: 1fr min-content;
   }
 `;
+
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(1)};
+`;

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

@@ -111,6 +111,7 @@ function PageLayout(props: Props) {
             showProjectSettingsLink
             relativeDateOptions={relativeDateOptions}
             maxPickableDays={maxPickableDays}
+            hideGlobalHeader={organization.features.includes('selection-filters-v2')}
           >
             <StyledPageContent>
               <NoProjectMessage organization={organization}>

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

@@ -7,8 +7,11 @@ import omit from 'lodash/omit';
 import MarkArea from 'sentry/components/charts/components/markArea';
 import MarkLine from 'sentry/components/charts/components/markLine';
 import {LineChartSeries} from 'sentry/components/charts/lineChart';
+import DatePageFilter from 'sentry/components/datePageFilter';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import SearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -272,6 +275,12 @@ function AnomaliesContent(props: Props) {
   }
   return (
     <Layout.Main fullWidth>
+      {organization.features.includes('selection-filters-v2') && (
+        <StyledPageFilterBar condensed>
+          <EnvironmentPageFilter />
+          <DatePageFilter alignDropdown="left" />
+        </StyledPageFilterBar>
+      )}
       <SearchBar
         organization={organization}
         projectIds={eventView.project}
@@ -307,4 +316,8 @@ const Container = styled('div')`
   margin-top: ${space(2)};
 `;
 
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(1)};
+`;
+
 export default AnomaliesContent;

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

@@ -4,9 +4,12 @@ import {Location} from 'history';
 import omit from 'lodash/omit';
 
 import Button from 'sentry/components/button';
+import DatePageFilter from 'sentry/components/datePageFilter';
 import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import SearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -74,6 +77,12 @@ function EventsContent(props: Props) {
 
   return (
     <Layout.Main fullWidth>
+      {organization.features.includes('selection-filters-v2') && (
+        <StyledPageFilterBar condensed>
+          <EnvironmentPageFilter />
+          <DatePageFilter alignDropdown="left" />
+        </StyledPageFilterBar>
+      )}
       <Search {...props} />
       <StyledTable>
         <EventsTable
@@ -89,6 +98,10 @@ function EventsContent(props: Props) {
   );
 }
 
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(1)};
+`;
+
 function Search(props: Props) {
   const {
     eventView,

static/app/views/performance/transactionSummary/transactionOverview/content.tsx

@@ -5,11 +5,14 @@ import {Location} from 'history';
 import omit from 'lodash/omit';
 
 import Feature from 'sentry/components/acl/feature';
+import DatePageFilter from 'sentry/components/datePageFilter';
 import TransactionsList, {
   DropdownOption,
 } from 'sentry/components/discover/transactionsList';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import SearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {t} from 'sentry/locale';
@@ -263,6 +266,12 @@ function SummaryContent({
   return (
     <React.Fragment>
       <Layout.Main>
+        {organization.features.includes('selection-filters-v2') && (
+          <StyledPageFilterBar condensed>
+            <EnvironmentPageFilter />
+            <DatePageFilter alignDropdown="left" />
+          </StyledPageFilterBar>
+        )}
         <Search>
           <Filter
             organization={organization}
@@ -459,6 +468,10 @@ function getTransactionsListSort(
   return {selected: selectedSort, options: sortOptions};
 }
 
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(1)};
+`;
+
 const Search = styled('div')`
   display: flex;
   width: 100%;

static/app/views/performance/transactionSummary/transactionSpans/content.tsx

@@ -1,13 +1,18 @@
 import {Fragment} from 'react';
 import {browserHistory} from 'react-router';
+import styled from '@emotion/styled';
 import {Location} from 'history';
 import omit from 'lodash/omit';
 
+import DatePageFilter from 'sentry/components/datePageFilter';
 import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import SearchBar from 'sentry/components/events/searchBar';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import Pagination from 'sentry/components/pagination';
+import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
@@ -89,6 +94,12 @@ function SpansContent(props: Props) {
 
   return (
     <Layout.Main fullWidth>
+      {organization.features.includes('selection-filters-v2') && (
+        <StyledPageFilterBar condensed>
+          <EnvironmentPageFilter />
+          <DatePageFilter alignDropdown="left" />
+        </StyledPageFilterBar>
+      )}
       <Actions>
         <OpsFilter
           location={location}
@@ -161,6 +172,10 @@ function SpansContent(props: Props) {
   );
 }
 
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(1)};
+`;
+
 function getSpansEventView(eventView: EventView, sort: SpanSort): EventView {
   eventView = eventView.clone();
   const fields = SPAN_SORT_TO_FIELDS[sort];

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/content.tsx

@@ -1,8 +1,13 @@
 import {Fragment} from 'react';
+import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import Feature from 'sentry/components/acl/feature';
+import DatePageFilter from 'sentry/components/datePageFilter';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
+import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
@@ -151,6 +156,10 @@ function SpanDetailsContent(props: ContentProps) {
 
   return (
     <Fragment>
+      <StyledPageFilterBar condensed>
+        <EnvironmentPageFilter />
+        <DatePageFilter />
+      </StyledPageFilterBar>
       <SpanDetailsHeader
         spanSlug={spanSlug}
         totalCount={totalCount}
@@ -183,6 +192,10 @@ function SpanDetailsContent(props: ContentProps) {
   );
 }
 
+const StyledPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(1)};
+`;
+
 function getSpansEventView(eventView: EventView): EventView {
   // TODO: There is a bug where if the sort is not avg occurrence,
   // then the avg occurrence will never be added to the fields

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/index.tsx

@@ -66,6 +66,7 @@ export default function SpanDetails(props: Props) {
           showProjectSettingsLink
           relativeDateOptions={SPAN_RELATIVE_PERIODS}
           maxPickableDays={SPAN_RETENTION_DAYS}
+          hideGlobalHeader={organization.features.includes('selection-filters-v2')}
         >
           <StyledPageContent>
             <NoProjectMessage organization={organization}>