feat(query-builder): Add disallowUnsupportedFilters config option

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

@@ -2028,4 +2028,27 @@ describe('SearchQueryBuilder', function () {
       ).toBeInTheDocument();
     });
   });
+
+  describe('highlightUnsupportedFilters', function () {
+    it('should mark unsupported filters as invalid', async function () {
+      render(
+        <SearchQueryBuilder
+          {...defaultProps}
+          disallowUnsupportedFilters
+          initialQuery="foo:bar"
+        />
+      );
+
+      expect(screen.getByRole('row', {name: 'foo:bar'})).toHaveAttribute(
+        'aria-invalid',
+        'true'
+      );
+
+      await userEvent.click(getLastInput());
+      await userEvent.keyboard('{ArrowLeft}');
+      expect(
+        await screen.findByText('Invalid key. "foo" is not a supported search key.')
+      ).toBeInTheDocument();
+    });
+  });
 });

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

@@ -114,7 +114,12 @@ export default storyBook(SearchQueryBuilder, story => {
   });
 
   story('Config Options', () => {
-    const configs = ['disallowFreeText', 'disallowLogicalOperators', 'disallowWildcard'];
+    const configs = [
+      'disallowFreeText',
+      'disallowLogicalOperators',
+      'disallowWildcard',
+      'disallowUnsupportedFilters',
+    ];
 
     const [enabledConfigs, setEnabledConfigs] = useState<string[]>([...configs]);
     const queryBuilderOptions = enabledConfigs.reduce((acc, config) => {
@@ -141,7 +146,7 @@ export default storyBook(SearchQueryBuilder, story => {
           ))}
         </MultipleCheckbox>
         <SearchQueryBuilder
-          initialQuery="(browser.name:Firefox OR browser.name:Internet*) TypeError"
+          initialQuery="(unsupported_key:value OR browser.name:Internet*) TypeError"
           filterKeySections={FITLER_KEY_SECTIONS}
           filterKeys={FILTER_KEYS}
           getTagValues={getTagValues}

static/app/components/searchQueryBuilder/index.tsx

@@ -48,6 +48,10 @@ export interface SearchQueryBuilderProps {
    * When true, parens and logical operators (AND, OR) will be marked as invalid.
    */
   disallowLogicalOperators?: boolean;
+  /**
+   * When true, unsupported filter keys will be highlighted as invalid.
+   */
+  disallowUnsupportedFilters?: boolean;
   /**
    * When true, the wildcard (*) in filter values or free text will be marked as invalid.
    */
@@ -101,6 +105,7 @@ export function SearchQueryBuilder({
   className,
   disallowLogicalOperators,
   disallowFreeText,
+  disallowUnsupportedFilters,
   disallowWildcard,
   label,
   initialQuery,
@@ -124,6 +129,7 @@ export function SearchQueryBuilder({
       parseQueryBuilderValue(state.query, fieldDefinitionGetter, {
         disallowFreeText,
         disallowLogicalOperators,
+        disallowUnsupportedFilters,
         disallowWildcard,
         filterKeys,
       }),
@@ -133,6 +139,7 @@ export function SearchQueryBuilder({
       disallowWildcard,
       fieldDefinitionGetter,
       filterKeys,
+      disallowUnsupportedFilters,
       state.query,
     ]
   );

static/app/components/searchQueryBuilder/utils.tsx

@@ -67,19 +67,22 @@ export function parseQueryBuilderValue(
     filterKeys: TagCollection;
     disallowFreeText?: boolean;
     disallowLogicalOperators?: boolean;
+    disallowUnsupportedFilters?: boolean;
     disallowWildcard?: boolean;
   }
 ): ParseResult | null {
   return collapseTextTokens(
     parseSearch(value || ' ', {
       flattenParenGroups: true,
       disallowFreeText: options?.disallowFreeText,
+      validateKeys: options?.disallowUnsupportedFilters,
       disallowWildcard: options?.disallowWildcard,
       disallowedLogicalOperators: options?.disallowLogicalOperators
         ? new Set([BooleanOperator.AND, BooleanOperator.OR])
         : undefined,
       disallowParens: options?.disallowLogicalOperators,
       ...getSearchConfigFromKeys(options?.filterKeys ?? {}, getFieldDefinition),
+      supportedTags: options?.filterKeys,
     })
   );
 }