feat(metrics): Remove feature flag from combo box (#69646)

Remove feature flag check.
Tweak menu width and max label chars.

static/app/views/metrics/queryBuilder.tsx

@@ -20,11 +20,9 @@ import {
   isTransactionDuration,
   isTransactionMeasurement,
 } from 'sentry/utils/metrics';
-import {hasMetricsExperimentalFeature} from 'sentry/utils/metrics/features';
 import {getReadableMetricType} from 'sentry/utils/metrics/formatters';
 import {formatMRI, parseMRI} from 'sentry/utils/metrics/mri';
 import type {MetricsQuery} from 'sentry/utils/metrics/types';
-import {useBreakpoints} from 'sentry/utils/metrics/useBreakpoints';
 import {useIncrementQueryMetric} from 'sentry/utils/metrics/useIncrementQueryMetric';
 import {useMetricsMeta} from 'sentry/utils/metrics/useMetricsMeta';
 import {useMetricsTags} from 'sentry/utils/metrics/useMetricsTags';
@@ -78,7 +76,6 @@ export const QueryBuilder = memo(function QueryBuilder({
 }: QueryBuilderProps) {
   const organization = useOrganization();
   const pageFilters = usePageFilters();
-  const breakpoints = useBreakpoints();
   const {projects} = useProjects();
 
   const {
@@ -89,8 +86,6 @@ export const QueryBuilder = memo(function QueryBuilder({
   } = useMetricsMeta(pageFilters.selection);
   const mriMode = useMriMode();
 
-  const shouldUseComboBox = hasMetricsExperimentalFeature(organization);
-
   const {data: tagsData = [], isLoading: tagsIsLoading} = useMetricsTags(
     metricsQuery.mri,
     {
@@ -127,7 +122,7 @@ export const QueryBuilder = memo(function QueryBuilder({
       .sort(metric => (isSelected(metric) ? -1 : 1));
 
     // Add the selected metric to the top of the list if it's not already there
-    if (shouldUseComboBox && result[0]?.mri !== metricsQuery.mri) {
+    if (result[0]?.mri !== metricsQuery.mri) {
       const parsedMri = parseMRI(metricsQuery.mri)!;
       return [
         {
@@ -143,7 +138,7 @@ export const QueryBuilder = memo(function QueryBuilder({
     }
 
     return result;
-  }, [meta, metricsQuery.mri, shouldUseComboBox]);
+  }, [meta, metricsQuery.mri]);
 
   const selectedMeta = useMemo(() => {
     return meta.find(metric => metric.mri === metricsQuery.mri);
@@ -225,7 +220,7 @@ export const QueryBuilder = memo(function QueryBuilder({
       displayedMetrics.map<ComboBoxOption<MRI>>(metric => ({
         label: mriMode
           ? metric.mri
-          : middleEllipsis(formatMRI(metric.mri) ?? '', 55, /\.|-|_/),
+          : middleEllipsis(formatMRI(metric.mri) ?? '', 46, /\.|-|_/),
         // enable search by mri, name, unit (millisecond), type (c:), and readable type (counter)
         textValue: `${metric.mri}${getReadableMetricType(metric.type)}`,
         value: metric.mri,
@@ -253,37 +248,21 @@ export const QueryBuilder = memo(function QueryBuilder({
   return (
     <QueryBuilderWrapper>
       <FlexBlock>
-        {shouldUseComboBox ? (
-          <MetricComboBox
-            aria-label={t('Metric')}
-            placeholder={t('Select a metric')}
-            loadingMessage={t('Loading metrics...')}
-            sizeLimit={100}
-            size="md"
-            menuSize="sm"
-            isLoading={isMetaLoading}
-            onOpenChange={handleOpenMetricsMenu}
-            options={mriOptions}
-            value={metricsQuery.mri}
-            onChange={handleMRIChange}
-            growingInput
-            menuWidth="400px"
-          />
-        ) : (
-          <MetricSelect
-            searchable
-            sizeLimit={100}
-            size="md"
-            triggerLabel={middleEllipsis(
-              formatMRI(metricsQuery.mri) ?? '',
-              breakpoints.large ? (breakpoints.xlarge ? 70 : 45) : 30,
-              /\.|-|_/
-            )}
-            options={mriOptions}
-            value={metricsQuery.mri}
-            onChange={handleMRIChange}
-          />
-        )}
+        <MetricComboBox
+          aria-label={t('Metric')}
+          placeholder={t('Select a metric')}
+          loadingMessage={t('Loading metrics...')}
+          sizeLimit={100}
+          size="md"
+          menuSize="sm"
+          isLoading={isMetaLoading}
+          onOpenChange={handleOpenMetricsMenu}
+          options={mriOptions}
+          value={metricsQuery.mri}
+          onChange={handleMRIChange}
+          growingInput
+          menuWidth="450px"
+        />
         <FlexBlock>
           <OpSelect
             size="md"
@@ -370,12 +349,6 @@ const MetricComboBox = styled(ComboBox)`
   min-width: 200px;
   max-width: min(500px, 100%);
 `;
-const MetricSelect = styled(CompactSelect)`
-  min-width: 200px;
-  & > button {
-    width: 100%;
-  }
-`;
 
 const OpSelect = styled(CompactSelect)`
   /* makes selects from different have the same width which is enough to fit all agg options except "count_unique" */