feat(suspect-spans): Allow filtering for span group in query params (#30267)

This adds support for `spanGroup` in the url params that can be used to filter
for a specific span group. No UI yet to make use of this.

static/app/utils/performance/suspectSpans/suspectSpansQuery.tsx

@@ -13,6 +13,7 @@ import {SuspectSpans} from './types';
 type SuspectSpansProps = {
   perSuspect?: number;
   spanOps?: string[];
+  spanGroups?: string[];
 };
 
 type RequestProps = DiscoverQueryProps & SuspectSpansProps;
@@ -26,14 +27,17 @@ type Props = RequestProps & {
 };
 
 function getSuspectSpanPayload(props: RequestProps) {
-  const {perSuspect, spanOps} = props;
-  const payload = {perSuspect, spanOp: spanOps};
+  const {perSuspect, spanOps, spanGroups} = props;
+  const payload = {perSuspect, spanOp: spanOps, spanGroup: spanGroups};
   if (!defined(payload.perSuspect)) {
     delete payload.perSuspect;
   }
   if (!defined(payload.spanOp)) {
     delete payload.spanOp;
   }
+  if (!defined(payload.spanGroup)) {
+    delete payload.spanGroup;
+  }
   const additionalPayload = omit(props.eventView.getEventsAPIPayload(props.location), [
     'field',
   ]);

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

@@ -79,6 +79,7 @@ function SpansContent(props: Props) {
   }
 
   const spanOp = decodeScalar(location.query.spanOp);
+  const spanGroup = decodeScalar(location.query.spanGroup);
   const sort = getSuspectSpanSortFromEventView(eventView);
   const totalsView = getTotalsView(eventView);
 
@@ -129,6 +130,7 @@ function SpansContent(props: Props) {
               orgSlug={organization.slug}
               eventView={eventView}
               spanOps={defined(spanOp) ? [spanOp] : []}
+              spanGroups={defined(spanGroup) ? [spanGroup] : []}
             >
               {({suspectSpans, isLoading, error, pageLinks}) => {
                 if (error) {

tests/js/spec/utils/performance/suspectSpans/suspectSpansQuery.spec.tsx

@@ -45,7 +45,7 @@ describe('SuspectSpansQuery', function () {
     expect(getMock).toHaveBeenCalledTimes(1);
   });
 
-  it('fetches data with the right ops filter', async function () {
+  it('fetches data with the right op filter', async function () {
     const getMock = MockApiClient.addMockResponse({
       url: '/organizations/test-org/events-spans-performance/',
       // just asserting that the data is being fetched, no need for actual data here
@@ -67,6 +67,28 @@ describe('SuspectSpansQuery', function () {
     expect(getMock).toHaveBeenCalledTimes(1);
   });
 
+  it('fetches data with the right group filter', async function () {
+    const getMock = MockApiClient.addMockResponse({
+      url: '/organizations/test-org/events-spans-performance/',
+      // just asserting that the data is being fetched, no need for actual data here
+      body: [],
+      match: [MockApiClient.matchQuery({spanGroup: ['aaaaaaaaaaaaaaaa']})],
+    });
+
+    mountWithTheme(
+      <SuspectSpansQuery
+        location={location}
+        orgSlug="test-org"
+        eventView={eventView}
+        spanGroups={['aaaaaaaaaaaaaaaa']}
+      >
+        {() => null}
+      </SuspectSpansQuery>
+    );
+
+    expect(getMock).toHaveBeenCalledTimes(1);
+  });
+
   it('fetches data with the right per suspect param', async function () {
     const getMock = MockApiClient.addMockResponse({
       url: '/organizations/test-org/events-spans-performance/',