From 5bb320c416c529c354b57a1c10c2cba6ba6527c0 Mon Sep 17 00:00:00 2001
From: Malachi Willey <malwilley@gmail.com>
Date: Tue, 23 Jul 2024 11:38:35 -0700
Subject: [PATCH] feat(query-builder): Add disallowUnsupportedFilters config
 option

---
 .../searchQueryBuilder/index.spec.tsx         | 23 +++++++++++++++++++
 .../searchQueryBuilder/index.stories.tsx      |  9 ++++++--
 .../components/searchQueryBuilder/index.tsx   |  7 ++++++
 .../components/searchQueryBuilder/utils.tsx   |  3 +++
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/static/app/components/searchQueryBuilder/index.spec.tsx b/static/app/components/searchQueryBuilder/index.spec.tsx
index af1e1828ae3723..795b4b670cef39 100644
--- a/static/app/components/searchQueryBuilder/index.spec.tsx
+++ b/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();
+    });
+  });
 });
diff --git a/static/app/components/searchQueryBuilder/index.stories.tsx b/static/app/components/searchQueryBuilder/index.stories.tsx
index 6b5ce33602da5c..f96f564a154d30 100644
--- a/static/app/components/searchQueryBuilder/index.stories.tsx
+++ b/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}
diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx
index bb90a53fe38575..d45597dd586c6e 100644
--- a/static/app/components/searchQueryBuilder/index.tsx
+++ b/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,
     ]
   );
diff --git a/static/app/components/searchQueryBuilder/utils.tsx b/static/app/components/searchQueryBuilder/utils.tsx
index 22d4028165618c..6506d5dd1d18f8 100644
--- a/static/app/components/searchQueryBuilder/utils.tsx
+++ b/static/app/components/searchQueryBuilder/utils.tsx
@@ -67,6 +67,7 @@ export function parseQueryBuilderValue(
     filterKeys: TagCollection;
     disallowFreeText?: boolean;
     disallowLogicalOperators?: boolean;
+    disallowUnsupportedFilters?: boolean;
     disallowWildcard?: boolean;
   }
 ): ParseResult | null {
@@ -74,12 +75,14 @@ export function parseQueryBuilderValue(
     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,
     })
   );
 }