diff --git a/static/app/components/smartSearchBar/index.spec.jsx b/static/app/components/smartSearchBar/index.spec.jsx index 3566fc869e7106..2219623882fdce 100644 --- a/static/app/components/smartSearchBar/index.spec.jsx +++ b/static/app/components/smartSearchBar/index.spec.jsx @@ -1084,11 +1084,7 @@ describe('SmartSearchBar', function () { }); it('hides the default group after typing', async function () { render( - + ); const textbox = screen.getByRole('textbox'); @@ -1102,5 +1098,33 @@ describe('SmartSearchBar', function () { screen.queryByTestId('default-search-group-wrapper') ).not.toBeInTheDocument(); }); + + it('hides the default group after picking item with applyFilter', async function () { + render( + item.title === 'device', + }, + ], + }} + /> + ); + + const textbox = screen.getByRole('textbox'); + await userEvent.click(textbox); + expect(await screen.findByText('User identification value')).toBeInTheDocument(); + await userEvent.click(screen.getByText('Custom Tags')); + + expect(screen.queryByText('Custom Tags')).not.toBeInTheDocument(); + expect(screen.queryByText('User identification value')).not.toBeInTheDocument(); + expect(screen.getByText('device')).toBeInTheDocument(); + }); }); }); diff --git a/static/app/components/smartSearchBar/index.tsx b/static/app/components/smartSearchBar/index.tsx index 6e67ba0fb748fa..8c62aff0d4c39b 100644 --- a/static/app/components/smartSearchBar/index.tsx +++ b/static/app/components/smartSearchBar/index.tsx @@ -1562,12 +1562,14 @@ class SmartSearchBar extends Component { * @param recentSearchItems List of recent search items, same format as searchItem * @param tagName The current tag name in scope * @param type Defines the type/state of the dropdown menu items + * @param skipDefaultGroup Force hide the default group even without a query */ updateAutoCompleteState( searchItems: SearchItem[], recentSearchItems: SearchItem[], tagName: string, - type: ItemType + type: ItemType, + skipDefaultGroup = false ) { const { fieldDefinitionGetter, @@ -1589,7 +1591,7 @@ class SmartSearchBar extends Component { maxSearchItems, queryCharsLeft, true, - defaultSearchGroup, + skipDefaultGroup ? undefined : defaultSearchGroup, fieldDefinitionGetter ); @@ -1781,6 +1783,18 @@ class SmartSearchBar extends Component { }); } + if (item.applyFilter) { + const [tagKeys, tagType] = this.getTagKeys(''); + this.updateAutoCompleteState( + tagKeys.filter(item.applyFilter), + [], + '', + tagType, + true + ); + return; + } + this.onAutoCompleteFromAst(replaceText, item); }; diff --git a/static/app/components/smartSearchBar/types.tsx b/static/app/components/smartSearchBar/types.tsx index 8d135b016e6113..799b89b07e11ae 100644 --- a/static/app/components/smartSearchBar/types.tsx +++ b/static/app/components/smartSearchBar/types.tsx @@ -34,6 +34,10 @@ export type SearchGroup = { export type SearchItem = { active?: boolean; + /** + * When this item is selected, apply a filter to the search query + */ + applyFilter?: (item: SearchItem) => void; /** * Call a callback instead of setting a value in the search query */ diff --git a/static/app/views/issueList/searchBar.tsx b/static/app/views/issueList/searchBar.tsx index 055e31b3e57f62..96ae52fe38db87 100644 --- a/static/app/views/issueList/searchBar.tsx +++ b/static/app/views/issueList/searchBar.tsx @@ -133,8 +133,8 @@ function IssueListSearchBar({organization, tags, ...props}: Props) { type: ItemType.RECOMMENDED, title: t('Custom Tags'), desc: t('Filter events by custom tags.'), - // TODO(scttcper): handle custom tags - value: 'url:', + // Shows only tags when clicked + applyFilter: item => item.kind === FieldKind.TAG, }, ], };