feat(issues): Allow search suggestion to filter when selected (#51564)

Author: scttcper

static/app/components/smartSearchBar/index.spec.jsx

@@ -1084,11 +1084,7 @@ describe('SmartSearchBar', function () {
     });
     it('hides the default group after typing', async function () {
       render(
-        <SmartSearchBar
-          {...defaultProps}
-          defaultSearchGroup={defaultSearchGroup}
-          query=""
-        />
+        <SmartSearchBar {...defaultProps} defaultSearchGroup={defaultSearchGroup} />
       );
 
       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(
+        <SmartSearchBar
+          {...defaultProps}
+          defaultSearchGroup={{
+            ...defaultSearchGroup,
+            children: [
+              {
+                type: ItemType.RECOMMENDED,
+                title: 'Custom Tags',
+                // Filter is applied to all search items when picked
+                applyFilter: item => 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();
+    });
   });
 });

static/app/components/smartSearchBar/index.tsx

@@ -1562,12 +1562,14 @@ class SmartSearchBar extends Component<DefaultProps & Props, State> {
    * @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<DefaultProps & Props, State> {
       maxSearchItems,
       queryCharsLeft,
       true,
-      defaultSearchGroup,
+      skipDefaultGroup ? undefined : defaultSearchGroup,
       fieldDefinitionGetter
     );
 
@@ -1781,6 +1783,18 @@ class SmartSearchBar extends Component<DefaultProps & Props, State> {
       });
     }
 
+    if (item.applyFilter) {
+      const [tagKeys, tagType] = this.getTagKeys('');
+      this.updateAutoCompleteState(
+        tagKeys.filter(item.applyFilter),
+        [],
+        '',
+        tagType,
+        true
+      );
+      return;
+    }
+
     this.onAutoCompleteFromAst(replaceText, item);
   };
 

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
    */

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,
       },
     ],
   };