feat(perf): Add MEP param to other landing requests (#32575)

k-fish · web-flow · commit 7ae9b36b26f4 · 2022-03-15T16:21:45.000Z
* feat(perf): Add MEP param to other landing requests

This will add the metricsEnhanced param to the other widget and table requests, since it should be safe to add even if it's not consumed.
diff --git a/static/app/utils/discover/genericDiscoverQuery.tsx b/static/app/utils/discover/genericDiscoverQuery.tsx
@@ -44,6 +44,10 @@ type BaseDiscoverQueryProps = {
    * passed, but cursor will be ignored.
    */
   noPagination?: boolean;
+  /**
+   * Extra query parameters to be added.
+   */
+  queryExtras?: Record<string, string>;
   /**
    * Sets referrer parameter in the API Payload. Set of allowed referrers are defined
    * on the OrganizationEventsV2Endpoint view.
@@ -155,6 +159,8 @@ class _GenericDiscoverQuery<T, P> extends React.Component<Props<T, P>, State<T>>
       payload.referrer = referrer;
     }
 
+    Object.assign(payload, props.queryExtras ?? {});
+
     return payload;
   }
 
diff --git a/static/app/utils/performance/contexts/metricsEnhancedSetting.tsx b/static/app/utils/performance/contexts/metricsEnhancedSetting.tsx
@@ -11,11 +11,13 @@ interface MetricsEnhancedSettingContext {
   setMEPEnabled: (value: boolean) => void;
 }
 
-const [_MEPSettingProvider, _useMEPSettingContext] =
+const [_MEPSettingProvider, _useMEPSettingContext, MEPSettingContext] =
   createDefinedContext<MetricsEnhancedSettingContext>({
     name: 'MetricsEnhancedSettingContext',
   });
 
+export const MEPConsumer = MEPSettingContext.Consumer;
+
 export const MEPSettingProvider = ({
   children,
   _isMEPEnabled,
diff --git a/static/app/views/performance/landing/widgets/utils.tsx b/static/app/views/performance/landing/widgets/utils.tsx
@@ -18,6 +18,14 @@ function setWidgetStorageObject(localObject: Record<string, string>) {
   localStorage.setItem(getContainerLocalStorageObjectKey, JSON.stringify(localObject));
 }
 
+export function getMEPQueryParams(isMEPEnabled: boolean) {
+  return isMEPEnabled
+    ? {
+        metricsEnhanced: '1',
+      }
+    : undefined;
+}
+
 const getContainerLocalStorageObjectKey = 'landing-chart-container';
 const getContainerKey = (
   index: number,
diff --git a/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx b/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx
@@ -2,18 +2,21 @@ import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {t} from 'sentry/locale';
+import {useMEPSettingContext} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import HistogramQuery from 'sentry/utils/performance/histogram/histogramQuery';
 import {Chart as HistogramChart} from 'sentry/views/performance/landing/chart/histogramChart';
 
 import {GenericPerformanceWidget} from '../components/performanceWidget';
 import {transformHistogramQuery} from '../transforms/transformHistogramQuery';
 import {PerformanceWidgetProps, WidgetDataResult} from '../types';
+import {getMEPQueryParams} from '../utils';
 
 type AreaDataType = {
   chart: WidgetDataResult & ReturnType<typeof transformHistogramQuery>;
 };
 
 export function HistogramWidget(props: PerformanceWidgetProps) {
+  const {isMEPEnabled} = useMEPSettingContext();
   const {ContainerActions, location} = props;
   const globalSelection = props.eventView.getPageFilters();
 
@@ -28,6 +31,7 @@ export function HistogramWidget(props: PerformanceWidgetProps) {
             location={props.location}
             numBuckets={20}
             dataFilter="exclude_outliers"
+            queryExtras={getMEPQueryParams(isMEPEnabled)}
           />
         ),
         transform: transformHistogramQuery,
diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
@@ -11,6 +11,7 @@ import Truncate from 'sentry/components/truncate';
 import {t, tct} from 'sentry/locale';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import {getAggregateAlias} from 'sentry/utils/discover/fields';
+import {useMEPSettingContext} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {usePageError} from 'sentry/utils/performance/contexts/pageError';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import withApi from 'sentry/utils/withApi';
@@ -30,7 +31,7 @@ import SelectableList, {
 import {transformDiscoverToList} from '../transforms/transformDiscoverToList';
 import {transformEventsRequestToArea} from '../transforms/transformEventsToArea';
 import {PerformanceWidgetProps, QueryDefinition, WidgetDataResult} from '../types';
-import {eventsRequestQueryProps} from '../utils';
+import {eventsRequestQueryProps, getMEPQueryParams} from '../utils';
 import {PerformanceWidgetSetting} from '../widgetDefinitions';
 
 type DataType = {
@@ -52,6 +53,7 @@ const framesList = [
 ];
 
 export function LineChartListWidget(props: PerformanceWidgetProps) {
+  const {isMEPEnabled} = useMEPSettingContext();
   const [selectedListIndex, setSelectListIndex] = useState<number>(0);
   const {ContainerActions} = props;
   const pageError = usePageError();
@@ -111,6 +113,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
             limit={3}
             cursor="0:0:1"
             noPagination
+            queryExtras={getMEPQueryParams(isMEPEnabled)}
           />
         );
       },
@@ -175,6 +178,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
             )}
             hideError
             onError={pageError.setPageError}
+            queryExtras={getMEPQueryParams(isMEPEnabled)}
           />
         );
       },
diff --git a/static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx b/static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx
@@ -15,7 +15,7 @@ import _DurationChart from 'sentry/views/performance/charts/chart';
 import {GenericPerformanceWidget} from '../components/performanceWidget';
 import {transformEventsRequestToArea} from '../transforms/transformEventsToArea';
 import {PerformanceWidgetProps, QueryDefinition, WidgetDataResult} from '../types';
-import {eventsRequestQueryProps} from '../utils';
+import {eventsRequestQueryProps, getMEPQueryParams} from '../utils';
 
 type DataType = {
   chart: WidgetDataResult & ReturnType<typeof transformEventsRequestToArea>;
@@ -58,13 +58,7 @@ export function SingleFieldAreaWidget(props: PerformanceWidgetProps) {
               )}
               hideError
               onError={pageError.setPageError}
-              queryExtras={
-                isMEPEnabled
-                  ? {
-                      metricsEnhanced: '1',
-                    }
-                  : undefined
-              }
+              queryExtras={getMEPQueryParams(isMEPEnabled)}
             />
           )}
         </QueryBatchNode>
diff --git a/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx b/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
@@ -11,6 +11,7 @@ import space from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import DiscoverQuery, {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {getAggregateAlias, WebVital} from 'sentry/utils/discover/fields';
+import {useMEPSettingContext} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {usePageError} from 'sentry/utils/performance/contexts/pageError';
 import {VitalData} from 'sentry/utils/performance/vitals/vitalsCardsDiscoverQuery';
 import {decodeList} from 'sentry/utils/queryString';
@@ -32,7 +33,7 @@ import SelectableList, {
 import {transformDiscoverToList} from '../transforms/transformDiscoverToList';
 import {transformEventsRequestToVitals} from '../transforms/transformEventsToVitals';
 import {PerformanceWidgetProps, QueryDefinition, WidgetDataResult} from '../types';
-import {eventsRequestQueryProps} from '../utils';
+import {eventsRequestQueryProps, getMEPQueryParams} from '../utils';
 import {ChartDefinition, PerformanceWidgetSetting} from '../widgetDefinitions';
 
 type DataType = {
@@ -85,6 +86,7 @@ export function transformFieldsWithStops(props: {
 }
 
 export function VitalWidget(props: PerformanceWidgetProps) {
+  const {isMEPEnabled} = useMEPSettingContext();
   const {ContainerActions, eventView, organization, location} = props;
   const [selectedListIndex, setSelectListIndex] = useState<number>(0);
   const field = props.fields[0];
@@ -125,6 +127,7 @@ export function VitalWidget(props: PerformanceWidgetProps) {
               limit={3}
               cursor="0:0:1"
               noPagination
+              queryExtras={getMEPQueryParams(isMEPEnabled)}
             />
           );
         },
@@ -164,6 +167,7 @@ export function VitalWidget(props: PerformanceWidgetProps) {
               )}
               hideError
               onError={pageError.setPageError}
+              queryExtras={getMEPQueryParams(isMEPEnabled)}
             />
           );
         },
diff --git a/static/app/views/performance/table.tsx b/static/app/views/performance/table.tsx
@@ -25,9 +25,11 @@ import DiscoverQuery, {
 import EventView, {EventData, isFieldSortable} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {fieldAlignment, getAggregateAlias} from 'sentry/utils/discover/fields';
+import {MEPConsumer} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import CellAction, {Actions, updateQuery} from 'sentry/views/eventsV2/table/cellAction';
 import {TableColumn} from 'sentry/views/eventsV2/table/types';
 
+import {getMEPQueryParams} from './landing/widgets/utils';
 import TransactionThresholdModal, {
   modalCss,
   TransactionThresholdMetric,
@@ -395,35 +397,42 @@ class _Table extends React.Component<Props, State> {
 
     return (
       <div>
-        <DiscoverQuery
-          eventView={sortedEventView}
-          orgSlug={organization.slug}
-          location={location}
-          setError={setError}
-          referrer="api.performance.landing-table"
-          transactionName={transaction}
-          transactionThreshold={transactionThreshold}
-        >
-          {({pageLinks, isLoading, tableData}) => (
-            <React.Fragment>
-              <GridEditable
-                isLoading={isLoading}
-                data={tableData ? tableData.data : []}
-                columnOrder={columnOrder}
-                columnSortBy={columnSortBy}
-                grid={{
-                  onResizeColumn: this.handleResizeColumn,
-                  renderHeadCell: this.renderHeadCellWithMeta(tableData?.meta) as any,
-                  renderBodyCell: this.renderBodyCellWithData(tableData) as any,
-                  renderPrependColumns: this.renderPrependCellWithData(tableData) as any,
-                  prependColumnWidths,
-                }}
-                location={location}
-              />
-              <Pagination pageLinks={pageLinks} />
-            </React.Fragment>
+        <MEPConsumer>
+          {value => (
+            <DiscoverQuery
+              eventView={sortedEventView}
+              orgSlug={organization.slug}
+              location={location}
+              setError={setError}
+              referrer="api.performance.landing-table"
+              transactionName={transaction}
+              transactionThreshold={transactionThreshold}
+              queryExtras={getMEPQueryParams(value.isMEPEnabled)}
+            >
+              {({pageLinks, isLoading, tableData}) => (
+                <React.Fragment>
+                  <GridEditable
+                    isLoading={isLoading}
+                    data={tableData ? tableData.data : []}
+                    columnOrder={columnOrder}
+                    columnSortBy={columnSortBy}
+                    grid={{
+                      onResizeColumn: this.handleResizeColumn,
+                      renderHeadCell: this.renderHeadCellWithMeta(tableData?.meta) as any,
+                      renderBodyCell: this.renderBodyCellWithData(tableData) as any,
+                      renderPrependColumns: this.renderPrependCellWithData(
+                        tableData
+                      ) as any,
+                      prependColumnWidths,
+                    }}
+                    location={location}
+                  />
+                  <Pagination pageLinks={pageLinks} />
+                </React.Fragment>
+              )}
+            </DiscoverQuery>
           )}
-        </DiscoverQuery>
+        </MEPConsumer>
       </div>
     );
   }
diff --git a/tests/js/spec/views/performance/landing/utils.spec.tsx b/tests/js/spec/views/performance/landing/utils.spec.tsx
@@ -4,7 +4,7 @@ import ProjectsStore from 'sentry/stores/projectsStore';
 import EventView from 'sentry/utils/discover/eventView';
 import {getCurrentLandingDisplay} from 'sentry/views/performance/landing/utils';
 
-function initializeData(projects, query) {
+function initializeData(projects, query = {}) {
   const organization = TestStubs.Organization({
     features: [],
     projects,
@@ -16,6 +16,8 @@ function initializeData(projects, query) {
         query: query || {},
       },
     },
+    projects,
+    project: projects[0],
   });
   const eventView = EventView.fromLocation(initialData.router.location);
   ProjectsStore.loadInitialData(initialData.organization.projects);
diff --git a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.tsx b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.tsx
diff --git a/tests/js/spec/views/performance/table.spec.tsx b/tests/js/spec/views/performance/table.spec.tsx
