chore(tracemetrics): Cleanup side panel feature flag (#112105)

nsdeschenes · claude · web-flow · commit c5a26ede5842 · 2026-04-09T07:17:28.000-04:00
Now that this flag has been fully rolled out, lets do some tidying up by
removing it, and defaulting to the side panel experience.

Ticket: LOGS-600

---------

Co-authored-by: Claude Sonnet 4 &lt;noreply@anthropic.com&gt;
diff --git a/static/app/views/dashboards/widgetBuilder/components/visualize/traceMetrics/metricSelectRow.spec.tsx b/static/app/views/dashboards/widgetBuilder/components/visualize/traceMetrics/metricSelectRow.spec.tsx
@@ -23,6 +23,12 @@ describe('MetricSelectRow', () => {
     mockNavigate = jest.fn();
     mockedUseNavigate.mockReturnValue(mockNavigate);
 
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/trace-items/attributes/',
+      method: 'GET',
+      body: [],
+    });
+
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/events/',
       body: {
@@ -37,13 +43,29 @@ describe('MetricSelectRow', () => {
             ['metric.type']: 'counter',
             ['count(metric.name)']: 1,
           },
+          {
+            ['metric.name']: 'counter_metric',
+            ['metric.type']: 'counter',
+            ['count(metric.name)']: 1,
+          },
+          {
+            ['metric.name']: 'distribution_metric',
+            ['metric.type']: 'distribution',
+            ['count(metric.name)']: 1,
+          },
+          {
+            ['metric.name']: 'gauge_metric',
+            ['metric.type']: 'gauge',
+            ['count(metric.name)']: 1,
+          },
         ],
       },
     });
   });
 
   afterEach(() => {
     jest.clearAllMocks();
+    MockApiClient.clearMockResponses();
   });
 
   it('renders the same metric for all rows', async () => {
@@ -165,25 +187,6 @@ describe('MetricSelectRow', () => {
   });
 
   it('replaces invalid aggregates when changing to an incompatible metric type', async () => {
-    MockApiClient.clearMockResponses();
-    MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events/',
-      body: {
-        data: [
-          {
-            ['metric.name']: 'distribution_metric',
-            ['metric.type']: 'distribution',
-            ['count(metric.name)']: 1,
-          },
-          {
-            ['metric.name']: 'counter_metric',
-            ['metric.type']: 'counter',
-            ['count(metric.name)']: 1,
-          },
-        ],
-      },
-    });
-
     render(
       <WidgetBuilderProvider>
         <MetricSelectRow
@@ -248,25 +251,6 @@ describe('MetricSelectRow', () => {
   });
 
   it('preserves valid aggregates when changing metric type', async () => {
-    MockApiClient.clearMockResponses();
-    MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events/',
-      body: {
-        data: [
-          {
-            ['metric.name']: 'counter_metric',
-            ['metric.type']: 'counter',
-            ['count(metric.name)']: 1,
-          },
-          {
-            ['metric.name']: 'distribution_metric',
-            ['metric.type']: 'distribution',
-            ['count(metric.name)']: 1,
-          },
-        ],
-      },
-    });
-
     render(
       <WidgetBuilderProvider>
         <MetricSelectRow
@@ -331,25 +315,6 @@ describe('MetricSelectRow', () => {
   });
 
   it('handles mixed valid and invalid aggregates on metric change', async () => {
-    MockApiClient.clearMockResponses();
-    MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events/',
-      body: {
-        data: [
-          {
-            ['metric.name']: 'distribution_metric',
-            ['metric.type']: 'distribution',
-            ['count(metric.name)']: 1,
-          },
-          {
-            ['metric.name']: 'counter_metric',
-            ['metric.type']: 'counter',
-            ['count(metric.name)']: 1,
-          },
-        ],
-      },
-    });
-
     render(
       <WidgetBuilderProvider>
         <MetricSelectRow
@@ -438,25 +403,6 @@ describe('MetricSelectRow', () => {
   });
 
   it('replaces invalid aggregates for big number display', async () => {
-    MockApiClient.clearMockResponses();
-    MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events/',
-      body: {
-        data: [
-          {
-            ['metric.name']: 'gauge_metric',
-            ['metric.type']: 'gauge',
-            ['count(metric.name)']: 1,
-          },
-          {
-            ['metric.name']: 'counter_metric',
-            ['metric.type']: 'counter',
-            ['count(metric.name)']: 1,
-          },
-        ],
-      },
-    });
-
     render(
       <WidgetBuilderProvider>
         <MetricSelectRow
@@ -519,24 +465,6 @@ describe('MetricSelectRow', () => {
   });
 
   it('uses avg for gauge metrics', async () => {
-    MockApiClient.clearMockResponses();
-    MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/events/',
-      body: {
-        data: [
-          {
-            ['metric.name']: 'gauge_metric',
-            ['metric.type']: 'gauge',
-            ['count(metric.name)']: 1,
-          },
-          {
-            ['metric.name']: 'distribution_metric',
-            ['metric.type']: 'distribution',
-            ['count(metric.name)']: 1,
-          },
-        ],
-      },
-    });
     render(
       <WidgetBuilderProvider>
         <MetricSelectRow
diff --git a/static/app/views/explore/metrics/metricToolbar/metricSelector.spec.tsx b/static/app/views/explore/metrics/metricToolbar/metricSelector.spec.tsx
@@ -50,6 +50,15 @@ describe('MetricSelector', () => {
         {key: 'release', type: 'string'},
       ],
     });
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/trace-items/attributes/`,
+      method: 'GET',
+      body: [
+        {key: 'device.name', type: 'string'},
+        {key: 'release', type: 'string'},
+      ],
+    });
   });
 
   afterEach(() => {
@@ -296,6 +305,14 @@ describe('MetricSelector', () => {
 
       // Simulate search that narrows the list by re-mocking with fewer results
       MockApiClient.clearMockResponses();
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/trace-items/attributes/`,
+        method: 'GET',
+        body: [
+          {key: 'device.name', type: 'string'},
+          {key: 'release', type: 'string'},
+        ],
+      });
       setupEventsMock(
         createTraceMetricFixtures(organization, project, new Date()).baseFixtures.slice(
           0,
@@ -441,28 +458,11 @@ describe('MetricSelector', () => {
       expect(within(requestCountOption).queryByText('none')).not.toBeInTheDocument();
     });
 
-    it('does not show side panel without tracemetrics-attributes-dropdown-side-panel feature', async () => {
+    it('renders side panel', async () => {
       render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
         organization,
       });
 
-      await userEvent.click(screen.getByRole('button', {name: 'bar'}));
-      await screen.findByRole('option', {name: 'bar'});
-
-      expect(screen.queryByText('Type')).not.toBeInTheDocument();
-    });
-
-    it('renders side panel with tracemetrics-attributes-dropdown-side-panel feature', async () => {
-      render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
-        organization: {
-          ...organization,
-          features: [
-            ...organization.features,
-            'tracemetrics-attributes-dropdown-side-panel',
-          ],
-        },
-      });
-
       await userEvent.click(screen.getByRole('button', {name: 'bar'}));
       await userEvent.hover(await screen.findByRole('option', {name: 'bar'}));
 
@@ -473,13 +473,7 @@ describe('MetricSelector', () => {
 
     it('side panel defaults to current metric when no option is hovered', async () => {
       render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
-        organization: {
-          ...organization,
-          features: [
-            ...organization.features,
-            'tracemetrics-attributes-dropdown-side-panel',
-          ],
-        },
+        organization,
       });
 
       await userEvent.click(screen.getByRole('button', {name: 'bar'}));
@@ -491,13 +485,7 @@ describe('MetricSelector', () => {
 
     it('shows attributes section in side panel', async () => {
       render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
-        organization: {
-          ...organization,
-          features: [
-            ...organization.features,
-            'tracemetrics-attributes-dropdown-side-panel',
-          ],
-        },
+        organization,
       });
 
       await userEvent.click(screen.getByRole('button', {name: 'bar'}));
@@ -509,13 +497,7 @@ describe('MetricSelector', () => {
 
     it('side panel updates when hovering over a different metric option', async () => {
       render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
-        organization: {
-          ...organization,
-          features: [
-            ...organization.features,
-            'tracemetrics-attributes-dropdown-side-panel',
-          ],
-        },
+        organization,
       });
 
       await userEvent.click(screen.getByRole('button', {name: 'bar'}));
diff --git a/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx b/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx
@@ -32,10 +32,7 @@ import {useMetricOptions} from 'sentry/views/explore/hooks/useMetricOptions';
 import {HiddenTraceMetricGroupByFields} from 'sentry/views/explore/metrics/constants';
 import {useHasMetricUnitsUI} from 'sentry/views/explore/metrics/hooks/useHasMetricUnitsUI';
 import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
-import {
-  canUseMetricsSidePanelUI,
-  canUseMetricsUIRefresh,
-} from 'sentry/views/explore/metrics/metricsFlags';
+import {canUseMetricsUIRefresh} from 'sentry/views/explore/metrics/metricsFlags';
 import {MetricTypeBadge} from 'sentry/views/explore/metrics/metricToolbar/metricOptionLabel';
 import {
   TraceMetricKnownFieldKey,
@@ -557,14 +554,12 @@ export function MetricSelector({
                     )}
                   </Container>
                 </Stack>
-                {canUseMetricsSidePanelUI(organization) ? (
-                  <Container width={{sm: '280px'}} padding="lg" minHeight={{sm: '200px'}}>
-                    <MetricDetailPanel
-                      metric={highlightedOption ?? optionFromTraceMetric}
-                      hasMetricUnitsUI={hasMetricUnitsUI}
-                    />
-                  </Container>
-                ) : null}
+                <Container width={{sm: '280px'}} padding="lg" minHeight={{sm: '200px'}}>
+                  <MetricDetailPanel
+                    metric={highlightedOption ?? optionFromTraceMetric}
+                    hasMetricUnitsUI={hasMetricUnitsUI}
+                  />
+                </Container>
               </Flex>
             </FocusScope>
           </Overlay>
diff --git a/static/app/views/explore/metrics/metricsFlags.tsx b/static/app/views/explore/metrics/metricsFlags.tsx
@@ -21,13 +21,6 @@ export const canUseMetricsAlertsUI = (organization: Organization) => {
   );
 };
 
-export const canUseMetricsSidePanelUI = (organization: Organization) => {
-  return (
-    canUseMetricsUI(organization) &&
-    organization.features.includes('tracemetrics-attributes-dropdown-side-panel')
-  );
-};
-
 export const canUseMetricsUIRefresh = (organization: Organization) => {
   return (
     canUseMetricsUI(organization) &&
