feat(explore): Better autocompletion of numeric attributes in has (#92209)

This replaces the user input with the matching numeric attribute in the
value of a has filter.

Author: Zylphrex

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

@@ -3481,8 +3481,7 @@ describe('SearchQueryBuilder', function () {
       );
 
       await userEvent.click(getLastInput());
-      await userEvent.keyboard('foo:');
-      await userEvent.keyboard('{Escape}');
+      await userEvent.keyboard('foo:{Escape}');
 
       expect(
         screen.getByRole('button', {name: 'Edit key for filter: tags[foo,string]'})
@@ -3498,8 +3497,7 @@ describe('SearchQueryBuilder', function () {
       );
 
       await userEvent.click(getLastInput());
-      await userEvent.keyboard('bar:');
-      await userEvent.keyboard('{Escape}');
+      await userEvent.keyboard('bar:{Escape}');
 
       expect(
         screen.getByRole('button', {name: 'Edit key for filter: tags[bar,number]'})
@@ -3543,5 +3541,75 @@ describe('SearchQueryBuilder', function () {
         screen.getByRole('button', {name: 'Edit key for filter: tags[bar,number]'})
       ).toHaveTextContent('bar');
     });
+
+    it('replaces string key in has with suggestion on enter', async function () {
+      render(
+        <SearchQueryBuilder
+          {...defaultProps}
+          getSuggestedFilterKey={getSuggestedFilterKey}
+        />
+      );
+
+      await userEvent.click(getLastInput());
+      await userEvent.keyboard('has:foo{Enter}{Escape}');
+
+      expect(
+        screen.getByRole('button', {name: 'Edit value for filter: has'})
+      ).toHaveTextContent('foo');
+      expect(screen.getByLabelText('has:tags[foo,string]')).toBeInTheDocument();
+    });
+
+    it('replaces number key in has with suggestion on enter', async function () {
+      render(
+        <SearchQueryBuilder
+          {...defaultProps}
+          getSuggestedFilterKey={getSuggestedFilterKey}
+        />
+      );
+
+      await userEvent.click(getLastInput());
+      await userEvent.keyboard('has:bar{Enter}{Escape}');
+
+      expect(
+        screen.getByRole('button', {name: 'Edit value for filter: has'})
+      ).toHaveTextContent('bar');
+      expect(screen.getByLabelText('has:tags[bar,number]')).toBeInTheDocument();
+    });
+
+    it('replaces string key in has with suggestion on blur', async function () {
+      render(
+        <SearchQueryBuilder
+          {...defaultProps}
+          getSuggestedFilterKey={getSuggestedFilterKey}
+        />
+      );
+
+      await userEvent.click(getLastInput());
+      await userEvent.keyboard('has:foo{Enter}');
+      await userEvent.click(document.body);
+
+      expect(
+        screen.getByRole('button', {name: 'Edit value for filter: has'})
+      ).toHaveTextContent('foo');
+      expect(screen.getByLabelText('has:tags[foo,string]')).toBeInTheDocument();
+    });
+
+    it('replaces number key in has with suggestion on blur', async function () {
+      render(
+        <SearchQueryBuilder
+          {...defaultProps}
+          getSuggestedFilterKey={getSuggestedFilterKey}
+        />
+      );
+
+      await userEvent.click(getLastInput());
+      await userEvent.keyboard('has:bar{Enter}');
+      await userEvent.click(document.body);
+
+      expect(
+        screen.getByRole('button', {name: 'Edit value for filter: has'})
+      ).toHaveTextContent('bar');
+      expect(screen.getByLabelText('has:tags[bar,number]')).toBeInTheDocument();
+    });
   });
 });

static/app/components/searchQueryBuilder/tokens/filter/valueCombobox.tsx

@@ -532,6 +532,7 @@ export function SearchQueryBuilderValueCombobox({
   const organization = useOrganization();
   const {
     getFieldDefinition,
+    getSuggestedFilterKey,
     filterKeys,
     dispatch,
     searchSource,
@@ -617,6 +618,19 @@ export function SearchQueryBuilderValueCombobox({
 
   const updateFilterValue = useCallback(
     (value: string) => {
+      if (token.filter === FilterType.HAS) {
+        const suggested = getSuggestedFilterKey(value);
+        if (suggested) {
+          dispatch({
+            type: 'UPDATE_TOKEN_VALUE',
+            token,
+            value: suggested,
+          });
+          onCommit();
+          return true;
+        }
+      }
+
       const cleanedValue = cleanFilterValue({
         valueType: getFilterValueType(token, fieldDefinition),
         value,
@@ -682,6 +696,7 @@ export function SearchQueryBuilderValueCombobox({
     [
       token,
       fieldDefinition,
+      getSuggestedFilterKey,
       canSelectMultipleValues,
       analyticsData,
       selectedValuesUnescaped,