feat(query-builder): Add ability to edit filter operators (#69329)

Closes #69262

Adds a dropdown to the filter that, when clicked, can edit the operator.

To modify the query, we modify the token object with the new operator
value and use a new `stringifyToken()` function to create the new filter
text. We then replace the old token text with the new.

Author: malwilley

static/app/components/searchQueryBuilder/filter.tsx

@@ -1,8 +1,10 @@
-import {useRef} from 'react';
+import {useMemo, useRef} from 'react';
 import styled from '@emotion/styled';
 
+import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
+import {getValidOpsForFilter} from 'sentry/components/searchQueryBuilder/utils';
 import {
   TermOperator,
   type Token,
@@ -35,13 +37,37 @@ const getOpLabel = (token: TokenResult<Token.FILTER>) => {
 };
 
 function FilterOperator({token}: SearchQueryTokenProps) {
-  // TODO(malwilley): Add edit functionality
+  const {dispatch} = useSearchQueryBuilder();
+
+  const items: MenuItemProps[] = useMemo(() => {
+    return getValidOpsForFilter(token).map(op => ({
+      key: op,
+      label: OP_LABELS[op] ?? op,
+      onAction: val => {
+        dispatch({
+          type: 'UPDATE_FILTER_OP',
+          token,
+          op: val as TermOperator,
+        });
+      },
+    }));
+  }, [dispatch, token]);
 
   return (
-    <OpDiv tabIndex={-1} role="gridcell" aria-label={t('Edit token operator')}>
-      <InteractionStateLayer />
-      {getOpLabel(token)}
-    </OpDiv>
+    <DropdownMenu
+      trigger={triggerProps => (
+        <OpDiv
+          tabIndex={-1}
+          role="gridcell"
+          aria-label={t('Edit token operator')}
+          {...triggerProps}
+        >
+          <InteractionStateLayer />
+          {getOpLabel(token)}
+        </OpDiv>
+      )}
+      items={items}
+    />
   );
 }
 

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -33,30 +33,60 @@ describe('SearchQueryBuilder', function () {
     label: 'Query Builder',
   };
 
-  it('can remove a token by clicking the delete button', async function () {
-    render(
-      <SearchQueryBuilder
-        {...defaultProps}
-        initialQuery="browser.name:firefox custom_tag_name:123"
-      />
-    );
-
-    expect(screen.getByRole('row', {name: 'browser.name:firefox'})).toBeInTheDocument();
-    expect(screen.getByRole('row', {name: 'custom_tag_name:123'})).toBeInTheDocument();
-
-    await userEvent.click(
-      within(screen.getByRole('row', {name: 'browser.name:firefox'})).getByRole(
-        'gridcell',
-        {name: 'Remove token'}
-      )
-    );
-
-    // Browser name token should be removed
-    expect(
-      screen.queryByRole('row', {name: 'browser.name:firefox'})
-    ).not.toBeInTheDocument();
-
-    // Custom tag token should still be present
-    expect(screen.getByRole('row', {name: 'custom_tag_name:123'})).toBeInTheDocument();
+  describe('mouse interactions', function () {
+    it('can remove a token by clicking the delete button', async function () {
+      render(
+        <SearchQueryBuilder
+          {...defaultProps}
+          initialQuery="browser.name:firefox custom_tag_name:123"
+        />
+      );
+
+      expect(screen.getByRole('row', {name: 'browser.name:firefox'})).toBeInTheDocument();
+      expect(screen.getByRole('row', {name: 'custom_tag_name:123'})).toBeInTheDocument();
+
+      await userEvent.click(
+        within(screen.getByRole('row', {name: 'browser.name:firefox'})).getByRole(
+          'gridcell',
+          {name: 'Remove token'}
+        )
+      );
+
+      // Browser name token should be removed
+      expect(
+        screen.queryByRole('row', {name: 'browser.name:firefox'})
+      ).not.toBeInTheDocument();
+
+      // Custom tag token should still be present
+      expect(screen.getByRole('row', {name: 'custom_tag_name:123'})).toBeInTheDocument();
+    });
+
+    it('can modify the operator by clicking into it', async function () {
+      render(
+        <SearchQueryBuilder {...defaultProps} initialQuery="browser.name:firefox" />
+      );
+
+      // Should display as "is" to start
+      expect(
+        within(screen.getByRole('gridcell', {name: 'Edit token operator'})).getByText(
+          'is'
+        )
+      ).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('gridcell', {name: 'Edit token operator'}));
+      await userEvent.click(screen.getByRole('menuitemradio', {name: 'is not'}));
+
+      // Token should be modified to be negated
+      expect(
+        screen.getByRole('row', {name: '!browser.name:firefox'})
+      ).toBeInTheDocument();
+
+      // Should now have "is not" label
+      expect(
+        within(screen.getByRole('gridcell', {name: 'Edit token operator'})).getByText(
+          'is not'
+        )
+      ).toBeInTheDocument();
+    });
   });
 });

static/app/components/searchQueryBuilder/useQueryBuilderState.tsx

@@ -1,10 +1,12 @@
 import {type Reducer, useCallback, useReducer} from 'react';
 
-import type {
-  ParseResultToken,
-  Token,
-  TokenResult,
+import {
+  type ParseResultToken,
+  TermOperator,
+  type Token,
+  type TokenResult,
 } from 'sentry/components/searchSyntax/parser';
+import {stringifyToken} from 'sentry/components/searchSyntax/utils';
 
 type QueryBuilderState = {
   focus: null; // TODO(malwilley): Implement focus state
@@ -16,7 +18,13 @@ type DeleteTokenAction = {
   type: 'DELETE_TOKEN';
 };
 
-export type QueryBuilderActions = DeleteTokenAction;
+type UpdateFilterOpAction = {
+  op: TermOperator;
+  token: TokenResult<Token.FILTER>;
+  type: 'UPDATE_FILTER_OP';
+};
+
+export type QueryBuilderActions = DeleteTokenAction | UpdateFilterOpAction;
 
 function removeQueryToken(query: string, token: TokenResult<Token>): string {
   return (
@@ -25,6 +33,23 @@ function removeQueryToken(query: string, token: TokenResult<Token>): string {
   );
 }
 
+function modifyFilterOperator(
+  query: string,
+  token: TokenResult<Token.FILTER>,
+  newOperator: TermOperator
+): string {
+  const isNotEqual = newOperator === TermOperator.NOT_EQUAL;
+
+  token.operator = isNotEqual ? TermOperator.DEFAULT : newOperator;
+  token.negated = isNotEqual;
+
+  return (
+    query.substring(0, token.location.start.offset) +
+    stringifyToken(token) +
+    query.substring(token.location.end.offset)
+  );
+}
+
 export function useQueryBuilderState({initialQuery}: {initialQuery: string}) {
   const initialState: QueryBuilderState = {query: initialQuery, focus: null};
 
@@ -37,6 +62,11 @@ export function useQueryBuilderState({initialQuery}: {initialQuery: string}) {
             query: removeQueryToken(state.query, action.token),
             focus: null,
           };
+        case 'UPDATE_FILTER_OP':
+          return {
+            ...state,
+            query: modifyFilterOperator(state.query, action.token, action.op),
+          };
         default:
           return state;
       }

static/app/components/searchQueryBuilder/utils.tsx

@@ -0,0 +1,29 @@
+import {
+  filterTypeConfig,
+  interchangeableFilterOperators,
+  type TermOperator,
+  type Token,
+  type TokenResult,
+} from 'sentry/components/searchSyntax/parser';
+
+export function getValidOpsForFilter(
+  filterToken: TokenResult<Token.FILTER>
+): readonly TermOperator[] {
+  // If the token is invalid we want to use the possible expected types as our filter type
+  const validTypes = filterToken.invalid?.expectedType ?? [filterToken.filter];
+
+  // Determine any interchangeable filter types for our valid types
+  const interchangeableTypes = validTypes.map(
+    type => interchangeableFilterOperators[type] ?? []
+  );
+
+  // Combine all types
+  const allValidTypes = [...new Set([...validTypes, ...interchangeableTypes.flat()])];
+
+  // Find all valid operations
+  const validOps = new Set<TermOperator>(
+    allValidTypes.flatMap(type => filterTypeConfig[type].validOps)
+  );
+
+  return [...validOps];
+}

static/app/components/searchSyntax/utils.tsx

@@ -241,3 +241,60 @@ export function isWithinToken(
 export function isOperator(value: string) {
   return allOperators.some(op => op === value);
 }
+
+function stringifyTokenFilter(token: TokenResult<Token.FILTER>) {
+  let stringifiedToken = '';
+
+  if (token.negated) {
+    stringifiedToken += '!';
+  }
+
+  stringifiedToken += stringifyToken(token.key);
+  stringifiedToken += ':';
+  stringifiedToken += token.operator;
+  stringifiedToken += stringifyToken(token.value);
+
+  return stringifiedToken;
+}
+
+export function stringifyToken(token: TokenResult<Token>) {
+  switch (token.type) {
+    case Token.FREE_TEXT:
+    case Token.SPACES:
+      return token.value;
+    case Token.FILTER:
+      return stringifyTokenFilter(token);
+    case Token.LOGIC_GROUP:
+      return `(${token.inner.map(innerToken => stringifyToken(innerToken)).join(' ')})`;
+    case Token.LOGIC_BOOLEAN:
+      return token.value;
+    case Token.VALUE_TEXT_LIST:
+      return token.items.map(v => v.value).join(',');
+    case Token.VALUE_NUMBER_LIST:
+      return token.items
+        .map(item => (item.value ? item.value.value + item.value.unit : ''))
+        .filter(str => str.length > 0)
+        .join(', ');
+    case Token.KEY_SIMPLE:
+      return token.value;
+    case Token.KEY_AGGREGATE:
+      return token.text;
+    case Token.KEY_AGGREGATE_ARGS:
+      return token.text;
+    case Token.KEY_AGGREGATE_PARAMS:
+      return token.text;
+    case Token.KEY_EXPLICIT_TAG:
+      return `${token.prefix}[${token.key.value}]`;
+    case Token.VALUE_BOOLEAN:
+    case Token.VALUE_DURATION:
+    case Token.VALUE_ISO_8601_DATE:
+    case Token.VALUE_PERCENTAGE:
+    case Token.VALUE_RELATIVE_DATE:
+    case Token.VALUE_SIZE:
+    case Token.VALUE_TEXT:
+    case Token.VALUE_NUMBER:
+      return token.value;
+    default:
+      return '';
+  }
+}