fix(mep): Remove double providers (#37932)

There were actually two MEP cardinality providers since the other one covers all performance pages via performance/index.

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

@@ -23,7 +23,6 @@ import {Organization, PageFilters, Project} from 'sentry/types';
 import EventView from 'sentry/utils/discover/eventView';
 import {generateAggregateFields} from 'sentry/utils/discover/fields';
 import {GenericQueryBatcher} from 'sentry/utils/performance/contexts/genericQueryBatcher';
-import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {
   canUseMetricsData,
   MEPConsumer,
@@ -193,99 +192,97 @@ export function PerformanceLanding(props: Props) {
         </Layout.Header>
         <Layout.Body data-test-id="performance-landing-body">
           <Layout.Main fullWidth>
-            <MetricsCardinalityProvider organization={organization} location={location}>
-              <MetricsDataSwitcher
-                organization={organization}
-                eventView={eventView}
-                location={location}
-              >
-                {metricsDataSide => (
-                  <MEPSettingProvider
+            <MetricsDataSwitcher
+              organization={organization}
+              eventView={eventView}
+              location={location}
+            >
+              {metricsDataSide => (
+                <MEPSettingProvider
+                  location={location}
+                  forceTransactions={metricsDataSide.forceTransactionsOnly}
+                >
+                  <MetricsDataSwitcherAlert
+                    organization={organization}
+                    eventView={eventView}
+                    projects={projects}
                     location={location}
-                    forceTransactions={metricsDataSide.forceTransactionsOnly}
-                  >
-                    <MetricsDataSwitcherAlert
-                      organization={organization}
-                      eventView={eventView}
-                      projects={projects}
-                      location={location}
-                      router={props.router}
-                      {...metricsDataSide}
-                    />
-                    <PageErrorAlert />
-                    {showOnboarding ? (
-                      <Fragment>
+                    router={props.router}
+                    {...metricsDataSide}
+                  />
+                  <PageErrorAlert />
+                  {showOnboarding ? (
+                    <Fragment>
+                      {pageFilters}
+                      <Onboarding
+                        organization={organization}
+                        project={onboardingProject}
+                      />
+                    </Fragment>
+                  ) : (
+                    <Fragment>
+                      <SearchFilterContainer>
                         {pageFilters}
-                        <Onboarding
-                          organization={organization}
-                          project={onboardingProject}
-                        />
-                      </Fragment>
-                    ) : (
-                      <Fragment>
-                        <SearchFilterContainer>
-                          {pageFilters}
-                          <MEPConsumer>
-                            {({metricSettingState}) => {
-                              const searchQuery =
-                                metricSettingState === MEPState.metricsOnly
-                                  ? getFreeTextFromQuery(derivedQuery)
-                                  : derivedQuery;
+                        <MEPConsumer>
+                          {({metricSettingState}) => {
+                            const searchQuery =
+                              metricSettingState === MEPState.metricsOnly
+                                ? getFreeTextFromQuery(derivedQuery)
+                                : derivedQuery;
 
-                              return metricSettingState === MEPState.metricsOnly &&
-                                shouldShowTransactionNameOnlySearch ? (
-                                // TODO replace `handleSearch prop` with transaction name search once
-                                // transaction name search becomes the default search bar
-                                <TransactionNameSearchBar
-                                  organization={organization}
-                                  location={location}
-                                  eventView={eventView}
-                                  onSearch={(query: string) =>
-                                    handleSearch(query, metricSettingState)
-                                  }
-                                  query={searchQuery}
-                                />
-                              ) : (
-                                <SearchBar
-                                  searchSource="performance_landing"
-                                  organization={organization}
-                                  projectIds={eventView.project}
-                                  query={searchQuery}
-                                  fields={generateAggregateFields(
-                                    organization,
-                                    [...eventView.fields, {field: 'tps()'}],
-                                    ['epm()', 'eps()']
-                                  )}
-                                  onSearch={(query: string) =>
-                                    handleSearch(query, metricSettingState ?? undefined)
-                                  }
-                                  maxQueryLength={MAX_QUERY_LENGTH}
-                                />
-                              );
-                            }}
-                          </MEPConsumer>
-                          <MetricsEventsDropdown />
-                        </SearchFilterContainer>
-                        {initiallyLoaded ? (
-                          <TeamKeyTransactionManager.Provider
-                            organization={organization}
-                            teams={teams}
-                            selectedTeams={['myteams']}
-                            selectedProjects={eventView.project.map(String)}
-                          >
-                            <GenericQueryBatcher>
-                              <ViewComponent {...props} />
-                            </GenericQueryBatcher>
-                          </TeamKeyTransactionManager.Provider>
-                        ) : (
-                          <LoadingIndicator />
-                        )}
-                      </Fragment>
-                    )}
-                  </MEPSettingProvider>
-                )}
-              </MetricsDataSwitcher>
-            </MetricsCardinalityProvider>
+                            return metricSettingState === MEPState.metricsOnly &&
+                              shouldShowTransactionNameOnlySearch ? (
+                              // TODO replace `handleSearch prop` with transaction name search once
+                              // transaction name search becomes the default search bar
+                              <TransactionNameSearchBar
+                                organization={organization}
+                                location={location}
+                                eventView={eventView}
+                                onSearch={(query: string) =>
+                                  handleSearch(query, metricSettingState)
+                                }
+                                query={searchQuery}
+                              />
+                            ) : (
+                              <SearchBar
+                                searchSource="performance_landing"
+                                organization={organization}
+                                projectIds={eventView.project}
+                                query={searchQuery}
+                                fields={generateAggregateFields(
+                                  organization,
+                                  [...eventView.fields, {field: 'tps()'}],
+                                  ['epm()', 'eps()']
+                                )}
+                                onSearch={(query: string) =>
+                                  handleSearch(query, metricSettingState ?? undefined)
+                                }
+                                maxQueryLength={MAX_QUERY_LENGTH}
+                              />
+                            );
+                          }}
+                        </MEPConsumer>
+                        <MetricsEventsDropdown />
+                      </SearchFilterContainer>
+                      {initiallyLoaded ? (
+                        <TeamKeyTransactionManager.Provider
+                          organization={organization}
+                          teams={teams}
+                          selectedTeams={['myteams']}
+                          selectedProjects={eventView.project.map(String)}
+                        >
+                          <GenericQueryBatcher>
+                            <ViewComponent {...props} />
+                          </GenericQueryBatcher>
+                        </TeamKeyTransactionManager.Provider>
+                      ) : (
+                        <LoadingIndicator />
+                      )}
+                    </Fragment>
+                  )}
+                </MEPSettingProvider>
+              )}
+            </MetricsDataSwitcher>
           </Layout.Main>
         </Layout.Body>
       </PageErrorProvider>

tests/js/spec/views/performance/landing/index.spec.tsx

@@ -6,6 +6,7 @@ import {act} from 'sentry-test/reactTestingLibrary';
 
 import TeamStore from 'sentry/stores/teamStore';
 import EventView from 'sentry/utils/discover/eventView';
+import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 import {PerformanceLanding} from 'sentry/views/performance/landing';
 import {REACT_NATIVE_COLUMN_TITLES} from 'sentry/views/performance/landing/data';
@@ -19,19 +20,24 @@ const WrappedComponent = ({data, withStaticFilters = false}) => {
 
   return (
     <OrganizationContext.Provider value={data.organization}>
-      <PerformanceLanding
-        router={data.router}
-        organization={data.organization}
+      <MetricsCardinalityProvider
         location={data.router.location}
-        eventView={eventView}
-        projects={data.projects}
-        selection={eventView.getPageFilters()}
-        onboardingProject={undefined}
-        handleSearch={() => {}}
-        handleTrendsClick={() => {}}
-        setError={() => {}}
-        withStaticFilters={withStaticFilters}
-      />
+        organization={data.organization}
+      >
+        <PerformanceLanding
+          router={data.router}
+          organization={data.organization}
+          location={data.router.location}
+          eventView={eventView}
+          projects={data.projects}
+          selection={eventView.getPageFilters()}
+          onboardingProject={undefined}
+          handleSearch={() => {}}
+          handleTrendsClick={() => {}}
+          setError={() => {}}
+          withStaticFilters={withStaticFilters}
+        />
+      </MetricsCardinalityProvider>
     </OrganizationContext.Provider>
   );
 };

tests/js/spec/views/performance/landing/metricsDataSwitcher.spec.tsx

@@ -2,6 +2,7 @@ import {initializeData} from 'sentry-test/performance/initializePerformanceData'
 import {act, render, screen} from 'sentry-test/reactTestingLibrary';
 
 import TeamStore from 'sentry/stores/teamStore';
+import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 import {generatePerformanceEventView} from 'sentry/views/performance/data';
 import {PerformanceLanding} from 'sentry/views/performance/landing';
@@ -57,19 +58,24 @@ const WrappedComponent = ({data, withStaticFilters = true}) => {
 
   return (
     <OrganizationContext.Provider value={data.organization}>
-      <PerformanceLanding
-        router={data.router}
-        organization={data.organization}
+      <MetricsCardinalityProvider
         location={data.router.location}
-        eventView={eventView}
-        projects={data.projects}
-        selection={eventView.getPageFilters()}
-        onboardingProject={undefined}
-        handleSearch={() => {}}
-        handleTrendsClick={() => {}}
-        setError={() => {}}
-        withStaticFilters={withStaticFilters}
-      />
+        organization={data.organization}
+      >
+        <PerformanceLanding
+          router={data.router}
+          organization={data.organization}
+          location={data.router.location}
+          eventView={eventView}
+          projects={data.projects}
+          selection={eventView.getPageFilters()}
+          onboardingProject={undefined}
+          handleSearch={() => {}}
+          handleTrendsClick={() => {}}
+          setError={() => {}}
+          withStaticFilters={withStaticFilters}
+        />
+      </MetricsCardinalityProvider>
     </OrganizationContext.Provider>
   );
 };