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(
+
+ );
+
+ 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([...configs]);
const queryBuilderOptions = enabledConfigs.reduce((acc, config) => {
@@ -141,7 +146,7 @@ export default storyBook(SearchQueryBuilder, story => {
))}