feat(perf): Strip away aggregate filters in span details search (#33154)

* feat(perf): Remove aggregate filters from the span event view

Remove aggregate filters from the span event view calculation. Aggregate filters in the search bar are intended to operate on transactions. With aggregate conditions present in the search bar, users might get unexpected results when navigating to the span details view which is why they are removed.

* add more tests

static/app/views/performance/transactionSummary/transactionSpans/utils.tsx

@@ -145,6 +145,12 @@ export function generateSpansEventView({
   conditions.setFilterValues('event.type', ['transaction']);
   conditions.setFilterValues('transaction', [transactionName]);
 
+  Object.keys(conditions.filters).forEach(field => {
+    if (isAggregateField(field)) {
+      conditions.removeFilter(field);
+    }
+  });
+
   const eventView = EventView.fromNewQueryWithLocation(
     {
       id: undefined,

tests/js/spec/views/performance/transactionSpans/spanDetails.spec.tsx

@@ -4,7 +4,7 @@ import {
   generateSuspectSpansResponse,
   initializeData as _initializeData,
 } from 'sentry-test/performance/initializePerformanceData';
-import {act, render, screen, within} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import SpanDetails from 'sentry/views/performance/transactionSummary/transactionSpans/spanDetails';
@@ -300,21 +300,6 @@ describe('Performance > Transaction Spans > Span Summary', function () {
       ).toBeInTheDocument();
     });
 
-    it("doesn't render a search bar", function () {
-      const data = initializeData({
-        features: ['performance-view', 'performance-suspect-spans-view'],
-        query: {project: '1', transaction: 'transaction'},
-      });
-
-      render(<SpanDetails params={{spanSlug: 'op:aaaaaaaa'}} {...data} />, {
-        context: data.routerContext,
-        organization: data.organization,
-      });
-
-      const searchBarNode = screen.queryByPlaceholderText('Filter Transactions');
-      expect(searchBarNode).not.toBeInTheDocument();
-    });
-
     it('renders timeseries chart', async function () {
       const data = initializeData({
         features: ['performance-view', 'performance-suspect-spans-view'],
@@ -354,6 +339,14 @@ describe('Performance > Transaction Spans > Span Summary', function () {
         'performance-span-histogram-view',
       ];
 
+      beforeEach(function () {
+        MockApiClient.addMockResponse({
+          url: '/organizations/org-slug/recent-searches/',
+          method: 'GET',
+          body: [],
+        });
+      });
+
       it('renders a search bar', async function () {
         const data = initializeData({
           features: FEATURES,
@@ -369,6 +362,23 @@ describe('Performance > Transaction Spans > Span Summary', function () {
         expect(searchBarNode).toBeInTheDocument();
       });
 
+      it('does not add aggregate filters to the query', async function () {
+        const data = initializeData({
+          features: FEATURES,
+          query: {project: '1', transaction: 'transaction'},
+        });
+
+        render(<SpanDetails params={{spanSlug: 'op:aaaaaaaa'}} {...data} />, {
+          context: data.routerContext,
+          organization: data.organization,
+        });
+
+        const searchBarNode = await screen.findByPlaceholderText('Filter Transactions');
+        userEvent.type(searchBarNode, 'count():>3');
+        expect(searchBarNode).toHaveTextContent('count():>3');
+        expect(browserHistory.push).not.toHaveBeenCalled();
+      });
+
       it('renders a display toggle that changes a chart view between timeseries and histogram by pushing it to the browser history', async function () {
         MockApiClient.addMockResponse({
           url: '/organizations/org-slug/events-spans-histogram/',