feat(page-filters): Use fzf for project search in ProjectPageFilter (#108725)

Use fzf for project search in ProjectPageFilter

The project dropdown previously used a simple case-insensitive substring
match
on the project slug. This replaces it with the fzf v1 algorithm (already
present
in the codebase at `sentry/utils/profiling/fzf/fzf`) via the
`searchMatcher` prop
introduced in the base branch.

With fzf, users can find projects using fuzzy/subsequence queries — e.g.
typing
`frd` will match `frontend` — and results are ranked by match quality so
the most
relevant projects float to the top.

The matcher is defined as a module-level function (no `useCallback`
needed) since
it has no dependency on component state or props.

Stacked on top of:
master...jb/compactselect/search-result

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: 2 people

static/app/components/core/compactSelect/compactSelect.spec.tsx

@@ -749,6 +749,48 @@ describe('CompactSelect', () => {
       expect(screen.getAllByRole('option')).toHaveLength(1);
     });
 
+    it('uses custom searchMatcher with sections', async () => {
+      render(
+        <CompactSelect
+          value={undefined}
+          onChange={jest.fn()}
+          searchable
+          searchPlaceholder="Search here…"
+          searchMatcher={(option, search) => ({
+            score: String(option.value).endsWith(search) ? 1 : 0,
+          })}
+          options={[
+            {
+              key: 'section-1',
+              label: 'Section 1',
+              options: [
+                {value: 'opt_one', label: 'Option One'},
+                {value: 'opt_two', label: 'Option Two'},
+              ],
+            },
+            {
+              key: 'section-2',
+              label: 'Section 2',
+              options: [
+                {value: 'opt_three', label: 'Option Three'},
+                {value: 'opt_four', label: 'Option Four'},
+              ],
+            },
+          ]}
+        />
+      );
+
+      await userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByPlaceholderText('Search here…'));
+
+      // 'e' matches opt_one (section 1) and opt_three (section 2) by value suffix
+      await userEvent.keyboard('e');
+      expect(screen.getByRole('option', {name: 'Option One'})).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Option Two'})).not.toBeInTheDocument();
+      expect(screen.getByRole('option', {name: 'Option Three'})).toBeInTheDocument();
+      expect(screen.queryByRole('option', {name: 'Option Four'})).not.toBeInTheDocument();
+    });
+
     it('can limit the number of options', async () => {
       render(
         <CompactSelect

static/app/components/pageFilters/project/projectPageFilter.tsx

@@ -7,7 +7,12 @@ import sortBy from 'lodash/sortBy';
 
 import {Alert} from '@sentry/scraps/alert';
 import {LinkButton} from '@sentry/scraps/button';
-import type {SelectOption, SelectOptionOrSection} from '@sentry/scraps/compactSelect';
+import type {
+  SelectKey,
+  SelectOption,
+  SelectOptionOrSection,
+  SelectOptionWithKey,
+} from '@sentry/scraps/compactSelect';
 import {InfoTip} from '@sentry/scraps/info';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
@@ -32,6 +37,7 @@ import {t, tct} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
+import {fzf} from 'sentry/utils/profiling/fzf/fzf';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
@@ -76,6 +82,19 @@ export interface ProjectPageFilterProps extends Partial<
   storageNamespace?: string;
 }
 
+/**
+ * fzf-based search matcher for the project dropdown. Runs the fzf v1 algorithm
+ * against the option's textValue (project slug) so that fuzzy/subsequence matches
+ * are ranked by score rather than relying on plain substring inclusion.
+ */
+function projectSearchMatcher(option: SelectOptionWithKey<SelectKey>, search: string) {
+  const text = option.textValue ?? (typeof option.label === 'string' ? option.label : '');
+  if (!text) {
+    return {score: 0};
+  }
+  return fzf(text, search.toLowerCase(), false);
+}
+
 /**
  * Maximum number of projects that can be selected at a time (due to server limits). This
  * does not apply to special values like "My Projects" and "All Projects".
@@ -431,6 +450,7 @@ export function ProjectPageFilter({
   return (
     <HybridFilter
       ref={hybridFilterRef}
+      searchMatcher={projectSearchMatcher}
       {...selectProps}
       stagedSelect={stagedSelect}
       searchable