feat(dashboards): Replace dashboard-custom-measurement-widgets feature flag in frontend (#37198)

Replaces the dashboard-custom-measurement-widgets feature flag with dashboards-mep || mep-rollout-flag feature flags

static/app/utils/customMeasurements/customMeasurementsProvider.tsx

@@ -57,7 +57,10 @@ export function CustomMeasurementsProvider({
   useEffect(() => {
     let shouldCancelRequest = false;
 
-    if (organization.features.includes('dashboard-custom-measurement-widgets')) {
+    if (
+      organization.features.includes('dashboards-mep') ||
+      organization.features.includes('mep-rollout-flag')
+    ) {
       fetchCustomMeasurements(api, organization, selection)
         .then(response => {
           if (shouldCancelRequest) {

static/app/views/dashboardsV2/datasetConfig/errorsAndTransactions.tsx

@@ -246,14 +246,14 @@ function getEventsTableFieldOptions(
     tagKeys: Object.values(tags ?? {}).map(({key}) => key),
     measurementKeys: Object.values(measurements).map(({key}) => key),
     spanOperationBreakdownKeys: SPAN_OP_BREAKDOWN_FIELDS,
-    customMeasurements: organization.features.includes(
-      'dashboard-custom-measurement-widgets'
-    )
-      ? Object.values(customMeasurements ?? {}).map(({key, functions}) => ({
-          key,
-          functions,
-        }))
-      : undefined,
+    customMeasurements:
+      organization.features.includes('dashboards-mep') ||
+      organization.features.includes('mep-rollout-flag')
+        ? Object.values(customMeasurements ?? {}).map(({key, functions}) => ({
+            key,
+            functions,
+          }))
+        : undefined,
   });
 }
 

static/app/views/eventsV2/eventDetails/content.tsx

@@ -254,17 +254,14 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
           {isSidebarVisible && (
             <Layout.Side>
               <EventVitals event={event} />
-
-              <Feature
-                organization={organization}
-                features={['organizations:dashboard-custom-measurement-widgets']}
-              >
+              {(organization.features.includes('dashboards-mep') ||
+                organization.features.includes('mep-rollout-flag')) && (
                 <EventCustomPerformanceMetrics
                   event={event}
                   location={location}
                   organization={organization}
                 />
-              </Feature>
+              )}
               {event.groupID && (
                 <LinkedIssue groupId={event.groupID} eventId={event.eventID} />
               )}

static/app/views/performance/transactionDetails/content.tsx

@@ -1,7 +1,6 @@
 import {Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
 
-import Feature from 'sentry/components/acl/feature';
 import AsyncComponent from 'sentry/components/asyncComponent';
 import Button from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
@@ -251,16 +250,14 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
                         </Fragment>
                       )}
                       <EventVitals event={event} />
-                      <Feature
-                        organization={organization}
-                        features={['organizations:dashboard-custom-measurement-widgets']}
-                      >
+                      {(organization.features.includes('dashboards-mep') ||
+                        organization.features.includes('mep-rollout-flag')) && (
                         <EventCustomPerformanceMetrics
                           event={event}
                           location={location}
                           organization={organization}
                         />
-                      </Feature>
+                      )}
                       <TagsTable
                         event={event}
                         query={query}

tests/js/spec/utils/useCustomMeasurements.spec.tsx

@@ -34,7 +34,7 @@ function mockMeasurementsMeta() {
 describe('useCustomMeasurements', function () {
   it('provides customMeasurements from the custom measurements context', async function () {
     const {organization} = initializeOrg({
-      organization: {features: ['dashboard-custom-measurement-widgets']},
+      organization: {features: ['dashboards-mep']},
       project: undefined,
       projects: [],
       router: {},

tests/js/spec/views/dashboardsV2/widgetBuilder/widgetBuilder.spec.tsx

@@ -23,7 +23,7 @@ const defaultOrgFeatures = [
   'new-widget-builder-experience-design',
   'dashboards-edit',
   'global-views',
-  'dashboard-custom-measurement-widgets',
+  'dashboards-mep',
 ];
 
 // Mocking worldMapChart to avoid act warnings