feat(query-builder): Hide section headers when searching (#73517)

Section headers should be shown when not filtering by anything, but once you start searching we should only show the results
getsentry · Jul 1, 2024 · 5400d4c · 5400d4c
1 parent fe8da9b
commit 5400d4c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/static/app/components/compactSelect/listBox/index.tsx b/static/app/components/compactSelect/listBox/index.tsx
@@ -69,6 +69,10 @@ interface ListBoxProps
    * Used to determine whether to render the list box items or not
    */
   overlayIsOpen?: boolean;
+  /**
+   * When false, hides section headers in the list box.
+   */
+  showSectionHeaders?: boolean;
   /**
    * Size of the list box and its items.
    */
@@ -104,6 +108,7 @@ const ListBox = forwardRef<HTMLUListElement, ListBoxProps>(function ListBox(
     hiddenOptions = EMPTY_SET,
     hasSearch,
     overlayIsOpen,
+    showSectionHeaders = true,
     ...props
   }: ListBoxProps,
   forwarderdRef
@@ -164,6 +169,7 @@ const ListBox = forwardRef<HTMLUListElement, ListBoxProps>(function ListBox(
                   hiddenOptions={hiddenOptions}
                   onToggle={onSectionToggle}
                   size={size}
+                  showSectionHeaders={showSectionHeaders}
                 />
               );
             }

diff --git a/static/app/components/compactSelect/listBox/section.tsx b/static/app/components/compactSelect/listBox/section.tsx
@@ -23,6 +23,7 @@ interface ListBoxSectionProps extends AriaListBoxSectionProps {
   hiddenOptions: Set<SelectKey>;
   item: Node<any>;
   listState: ListState<any>;
+  showSectionHeaders: boolean;
   size: FormSize;
   onToggle?: (section: SelectSection<SelectKey>, type: 'select' | 'unselect') => void;
 }
@@ -37,6 +38,7 @@ export function ListBoxSection({
   onToggle,
   size,
   hiddenOptions,
+  showSectionHeaders,
 }: ListBoxSectionProps) {
   const {itemProps, headingProps, groupProps} = useListBoxSection({
     heading: item.rendered,
@@ -56,9 +58,9 @@ export function ListBoxSection({
 
   return (
     <Fragment>
-      <SectionSeparator {...separatorProps} />
+      {showSectionHeaders && <SectionSeparator {...separatorProps} />}
       <SectionWrap {...itemProps}>
-        {(item.rendered || showToggleAllButton) && (
+        {(item.rendered || showToggleAllButton) && showSectionHeaders && (
           <SectionHeader>
             {item.rendered && (
               <SectionTitle {...headingProps}>{item.rendered}</SectionTitle>

diff --git a/static/app/components/searchQueryBuilder/combobox.tsx b/static/app/components/searchQueryBuilder/combobox.tsx
@@ -326,6 +326,7 @@ function SectionedListBox<T extends SelectOptionOrSectionWithKey<string>>({
               hiddenOptions={hiddenOptions}
               keyDownHandler={() => true}
               overlayIsOpen={isOpen}
+              showSectionHeaders={!selectedSection}
               size="sm"
             />
           </SectionedListBoxPane>
@@ -398,6 +399,7 @@ function OverlayContent({
           hiddenOptions={hiddenOptions}
           keyDownHandler={() => true}
           overlayIsOpen={isOpen}
+          showSectionHeaders={!filterValue}
           size="sm"
         />
       )}