feat(suspect-spans): Show span op being filtered (#30019)

This shows the span op being filtered on in the filter button.

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

@@ -10,7 +10,7 @@ import LoadingIndicator from 'app/components/loadingIndicator';
 import {pickBarColor} from 'app/components/performance/waterfall/utils';
 import Radio from 'app/components/radio';
 import {IconFilter, IconWarning} from 'app/icons';
-import {t} from 'app/locale';
+import {t, tct} from 'app/locale';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
@@ -55,7 +55,9 @@ export default function OpsFilter(props: Props) {
         >
           <Fragment>
             <IconFilter size="xs" />
-            <FilterLabel>{t('Filter')}</FilterLabel>
+            <FilterLabel>
+              {defined(currentOp) ? tct('Filter - [op]', {op: currentOp}) : t('Filter')}
+            </FilterLabel>
           </Fragment>
         </DropdownButton>
       )}
@@ -122,6 +124,7 @@ export default function OpsFilter(props: Props) {
 
 const FilterLabel = styled('span')`
   margin-left: ${space(1)};
+  white-space: nowrap;
 `;
 
 const List = styled('ul')`

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

@@ -99,4 +99,29 @@ describe('Performance > Transaction Spans', function () {
     expect(handleOpChange).toHaveBeenCalledTimes(1);
     expect(handleOpChange).toHaveBeenCalledWith('op1');
   });
+
+  it('shows op being filtered on', async function () {
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/events-span-ops/',
+      body: [{op: 'op1'}, {op: 'op2'}],
+    });
+
+    const initialData = initializeData({query: {spanOp: 'op1'}});
+
+    const handleOpChange = jest.fn();
+
+    mountWithTheme(
+      <OpsFilter
+        location={initialData.router.location}
+        eventView={createEventView(initialData.router.location)}
+        organization={initialData.organization}
+        handleOpChange={handleOpChange}
+        transactionName="Test Transaction"
+      />,
+      {context: initialData.routerContext}
+    );
+
+    const filter = (await screen.findByText('Filter -')).parentElement;
+    expect(filter).toHaveTextContent('Filter - op1');
+  });
 });