👔 Add ask-seer-consent items to lists

Author: nsdeschenes

static/app/components/searchQueryBuilder/tokens/combobox.tsx

@@ -29,7 +29,11 @@ import {
 import {Input} from 'sentry/components/core/input';
 import {useAutosizeInput} from 'sentry/components/core/input/useAutosizeInput';
 import {Overlay} from 'sentry/components/overlay';
-import {ASK_SEER_ITEM_KEY, AskSeer} from 'sentry/components/searchQueryBuilder/askSeer';
+import {
+  ASK_SEER_CONSENT_ITEM_KEY,
+  ASK_SEER_ITEM_KEY,
+  AskSeer,
+} from 'sentry/components/searchQueryBuilder/askSeer';
 import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
 import {useSearchTokenCombobox} from 'sentry/components/searchQueryBuilder/tokens/useSearchTokenCombobox';
 import {
@@ -163,7 +167,7 @@ function menuIsOpen({
 
   // When a custom menu is not being displayed and we aren't loading anything,
   // only show when there is something to select from.
-  return openState && totalOptions > hiddenOptions.size;
+  return openState && totalOptions >= hiddenOptions.size;
 }
 
 function useHiddenItems<T extends SelectOptionOrSectionWithKey<string>>({
@@ -185,13 +189,21 @@ function useHiddenItems<T extends SelectOptionOrSectionWithKey<string>>({
       shouldFilterResults ? filterValue : '',
       maxOptions
     );
-    return showAskSeerOption ? options.add(ASK_SEER_ITEM_KEY) : options;
+
+    if (showAskSeerOption) {
+      options.add(ASK_SEER_ITEM_KEY);
+      options.add(ASK_SEER_CONSENT_ITEM_KEY);
+    }
+
+    return options;
   }, [items, shouldFilterResults, filterValue, maxOptions, showAskSeerOption]);
 
   const disabledKeys = useMemo(() => {
     const baseDisabledKeys = [...getDisabledOptions(items), ...hiddenOptions];
     return showAskSeerOption
-      ? baseDisabledKeys.filter(key => key !== ASK_SEER_ITEM_KEY)
+      ? baseDisabledKeys.filter(
+          key => key !== ASK_SEER_ITEM_KEY && key !== ASK_SEER_CONSENT_ITEM_KEY
+        )
       : baseDisabledKeys;
   }, [hiddenOptions, items, showAskSeerOption]);
 
@@ -621,7 +633,7 @@ const ListBoxOverlay = styled(Overlay)`
   max-height: 400px;
   min-width: 200px;
   width: 600px;
-  max-width: min-content;
+  max-width: fit-content;
   overflow-y: auto;
 `;
 

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx

@@ -15,7 +15,11 @@ import type {
 } from 'sentry/components/core/compactSelect/types';
 import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {Overlay} from 'sentry/components/overlay';
-import {ASK_SEER_ITEM_KEY, AskSeer} from 'sentry/components/searchQueryBuilder/askSeer';
+import {
+  ASK_SEER_CONSENT_ITEM_KEY,
+  ASK_SEER_ITEM_KEY,
+  AskSeer,
+} from 'sentry/components/searchQueryBuilder/askSeer';
 import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
 import type {CustomComboboxMenuProps} from 'sentry/components/searchQueryBuilder/tokens/combobox';
 import {KeyDescription} from 'sentry/components/searchQueryBuilder/tokens/filterKeyListBox/keyDescription';
@@ -315,6 +319,7 @@ export function FilterKeyListBox<T extends SelectOptionOrSectionWithKey<string>>
 
     if (enableAISearch) {
       baseHidden.push(ASK_SEER_ITEM_KEY);
+      baseHidden.push(ASK_SEER_CONSENT_ITEM_KEY);
     }
 
     return new Set(baseHidden);

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/useFilterKeyListBox.tsx

@@ -16,6 +16,7 @@ import {useRecentSearchFilters} from 'sentry/components/searchQueryBuilder/token
 import {
   ALL_CATEGORY,
   ALL_CATEGORY_VALUE,
+  createAskSeerConsentItem,
   createAskSeerItem,
   createRecentFilterItem,
   createRecentFilterOptionKey,
@@ -162,8 +163,13 @@ function useFilterKeySections({
   return {sections, selectedSection, setSelectedSection};
 }
 export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
-  const {filterKeys, getFieldDefinition, setDisplaySeerResults, enableAISearch} =
-    useSearchQueryBuilder();
+  const {
+    filterKeys,
+    getFieldDefinition,
+    setDisplaySeerResults,
+    enableAISearch,
+    gaveSeerConsentRef,
+  } = useSearchQueryBuilder();
   const {sectionedItems} = useFilterKeyItems();
   const recentFilters = useRecentSearchFilters();
   const {data: recentSearches} = useRecentSearches();
@@ -176,7 +182,12 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
   const filterKeyMenuItems = useMemo(() => {
     const recentFilterItems = makeRecentFilterItems({recentFilters});
 
-    const askSeerItem = enableAISearch ? [createAskSeerItem()] : [];
+    const askSeerItem = [];
+    if (enableAISearch) {
+      askSeerItem.push(
+        gaveSeerConsentRef.current ? createAskSeerItem() : createAskSeerConsentItem()
+      );
+    }
 
     if (selectedSection === RECENT_SEARCH_CATEGORY_VALUE) {
       return [
@@ -206,6 +217,7 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
     enableAISearch,
     filterKeys,
     getFieldDefinition,
+    gaveSeerConsentRef,
     recentFilters,
     recentSearches,
     sectionedItems,
@@ -378,6 +390,15 @@ export function useFilterKeyListBox({filterValue}: {filterValue: string}) {
         setDisplaySeerResults(true);
         return;
       }
+
+      if (option.type === 'ask-seer-consent') {
+        // TODO: Implement logic to handle consent
+        trackAnalytics('trace.explorer.ai_query_interface', {
+          organization,
+          action: 'consent_accepted',
+        });
+        return;
+      }
     },
     [organization, setDisplaySeerResults]
   );

static/app/components/searchQueryBuilder/tokens/useSortedFilterKeyItems.tsx

@@ -7,6 +7,7 @@ import type {
   SearchKeyItem,
 } from 'sentry/components/searchQueryBuilder/tokens/filterKeyListBox/types';
 import {
+  createAskSeerConsentItem,
   createAskSeerItem,
   createFilterValueItem,
   createItem,
@@ -137,6 +138,7 @@ export function useSortedFilterKeyItems({
     disallowFreeText,
     replaceRawSearchKeys,
     enableAISearch,
+    gaveSeerConsentRef,
   } = useSearchQueryBuilder();
   const organization = useOrganization();
 
@@ -245,6 +247,13 @@ export function useSortedFilterKeyItems({
         type: 'section',
       };
 
+      const askSeerItem = [];
+      if (enableAISearch) {
+        askSeerItem.push(
+          gaveSeerConsentRef.current ? createAskSeerItem() : createAskSeerConsentItem()
+        );
+      }
+
       const {shouldShowAtTop, suggestedFiltersSection} =
         getValueSuggestionsFromSearchResult(searched);
 
@@ -254,7 +263,7 @@ export function useSortedFilterKeyItems({
         ...(shouldIncludeRawSearch ? [rawSearchSection] : []),
         keyItemsSection,
         ...(!shouldShowAtTop && suggestedFiltersSection ? [suggestedFiltersSection] : []),
-        ...(enableAISearch ? [createAskSeerItem()] : []),
+        ...askSeerItem,
       ];
     }
 
@@ -267,6 +276,7 @@ export function useSortedFilterKeyItems({
     filterValue,
     flatKeys,
     getFieldDefinition,
+    gaveSeerConsentRef,
     hasRawSearchReplacement,
     includeSuggestions,
     inputValue,