This is the first step, a component that simply parses and renders the given query string. So far, only filter tokens are supported, and there are no interactions besides being able to delete a token.
The general architecture of the component is:
<SearchQueryBuilder />: The top level component which receives an initial query, change handler, tag value fetcher, and the supported keys (usually called tags, but renamed to be more specific since tags are their own thing). This mostly matches the existing SmartSearchBar props, but lacks many of the customizations which can be added later down the road.
useQueryBuilderState.tsx: Contains all the component state in a useReducer. So far this is only the query string, but it will also track focus later on.
<SearchQueryBuilderFilter />: Accepts a parsed filter token and renders it (with the key, op, value, and delete button)
SearchQueryBuilderContext: Provides the component state and props to subcomponents with a useQueryBuilder() hook
The DOM layout uses the grid patten (grid, row, and griditem roles), and later on we will implement all the keyboard interactions detailed in the ARIA guide.
Closes https://github.com/getsentry/sentry/issues/69244
This is the first step, a component that simply parses and renders the given query string. So far, only filter tokens are supported, and there are no interactions besides being able to delete a token.
The general architecture of the component is:
<SearchQueryBuilder />
: The top level component which receives an initial query, change handler, tag value fetcher, and the supported keys (usually called tags, but renamed to be more specific since tags are their own thing). This mostly matches the existing SmartSearchBar props, but lacks many of the customizations which can be added later down the road.useQueryBuilderState.tsx
: Contains all the component state in auseReducer
. So far this is only the query string, but it will also track focus later on.<SearchQueryBuilderFilter />
: Accepts a parsed filter token and renders it (with the key, op, value, and delete button)SearchQueryBuilderContext
: Provides the component state and props to subcomponents with auseQueryBuilder()
hookThe DOM layout uses the grid patten (grid, row, and griditem roles), and later on we will implement all the keyboard interactions detailed in the ARIA guide.