fix(query-builder): Switch to another section when the selected one no longer exists (#82385)

If you rerender the same search bar with different sections, it will
keep the old section selected even if it doesn't exist. This fixes that.

Author: malwilley

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -520,6 +520,35 @@ describe('SearchQueryBuilder', function () {
         ).toBeInTheDocument();
       });
 
+      it('switches to keys menu when recent searches no longer exist', async function () {
+        const {rerender} = render(
+          <SearchQueryBuilder
+            {...defaultProps}
+            recentSearches={SavedSearchType.ISSUE}
+            initialQuery=""
+          />
+        );
+
+        await userEvent.click(getLastInput());
+
+        // Recent should be selected
+        expect(screen.getByRole('button', {name: 'Recent'})).toHaveAttribute(
+          'aria-selected',
+          'true'
+        );
+
+        // Rerender without recent searches
+        rerender(<SearchQueryBuilder {...defaultProps} />);
+
+        // Recent should not exist anymore
+        expect(screen.queryByRole('button', {name: 'Recent'})).not.toBeInTheDocument();
+        // All should be selected
+        expect(screen.getByRole('button', {name: 'All'})).toHaveAttribute(
+          'aria-selected',
+          'true'
+        );
+      });
+
       it('when selecting a recent search, should reset query and call onSearch', async function () {
         const mockOnSearch = jest.fn();
         const mockCreateRecentSearch = MockApiClient.addMockResponse({

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

@@ -178,6 +178,28 @@ function useHighlightFirstOptionOnSectionChange({
   ]);
 }
 
+// If the selected section no longer exists, switch to the first valid section
+function useSwitchToValidSection({
+  sections,
+  selectedSection,
+  setSelectedSection,
+}: {
+  sections: Section[];
+  selectedSection: Key | null;
+  setSelectedSection: (section: string) => void;
+}) {
+  useEffect(() => {
+    if (!selectedSection || !sections.length) {
+      return;
+    }
+
+    const section = sections.find(s => s.value === selectedSection);
+    if (!section) {
+      setSelectedSection(sections[0].value);
+    }
+  }, [sections, selectedSection, setSelectedSection]);
+}
+
 function FilterKeyMenuContent<T extends SelectOptionOrSectionWithKey<string>>({
   recentFilters,
   selectedSection,
@@ -287,6 +309,8 @@ export function FilterKeyListBox<T extends SelectOptionOrSectionWithKey<string>>
     isOpen,
   });
 
+  useSwitchToValidSection({sections, selectedSection, setSelectedSection});
+
   const fullWidth = !query;
   const showDetailsPane = fullWidth && selectedSection !== RECENT_SEARCH_CATEGORY_VALUE;