feat(onboarding): Pre-populate repo selector with full repo list

Load the complete list of accessible repositories on mount so users
can browse and select without typing first. Search still narrows
results server-side when the user types.

Previously the dropdown was empty until a search query was entered,
requiring users to know what to search for.

Refs VDY-46

Author: jaydgoss

static/app/views/onboarding/components/scmRepoSelector.tsx

@@ -9,6 +9,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 import {ScmSearchControl} from './scmSearchControl';
+import {ScmVirtualizedMenuList} from './scmVirtualizedMenuList';
 import {useScmRepoSearch} from './useScmRepoSearch';
 import {useScmRepoSelection} from './useScmRepoSelection';
 
@@ -20,14 +21,10 @@ export function ScmRepoSelector({integration}: ScmRepoSelectorProps) {
   const organization = useOrganization();
   const {selectedRepository, setSelectedRepository, clearDerivedState} =
     useOnboardingContext();
-  const {
-    reposByIdentifier,
-    dropdownItems,
-    isFetching,
-    isError,
-    debouncedSearch,
-    setSearch,
-  } = useScmRepoSearch(integration.id, selectedRepository);
+  const {reposByIdentifier, dropdownItems, isFetching, isError} = useScmRepoSearch(
+    integration.id,
+    selectedRepository
+  );
 
   const {busy, handleSelect, handleRemove} = useScmRepoSelection({
     integration,
@@ -58,7 +55,6 @@ export function ScmRepoSelector({integration}: ScmRepoSelectorProps) {
     clearDerivedState();
 
     if (option === null) {
-      setSearch('');
       handleRemove();
     } else {
       const repo = reposByIdentifier.get(option.value);
@@ -75,14 +71,11 @@ export function ScmRepoSelector({integration}: ScmRepoSelectorProps) {
 
   function noOptionsMessage() {
     if (isError) {
-      return t('Failed to search repositories. Please try again.');
-    }
-    if (debouncedSearch) {
-      return t(
-        'No repositories found. Check your installation permissions to ensure your integration has access.'
-      );
+      return t('Failed to load repositories. Please try again.');
     }
-    return t('Type to search repositories');
+    return t(
+      'No repositories found. Check your installation permissions to ensure your integration has access.'
+    );
   }
 
   return (
@@ -91,19 +84,12 @@ export function ScmRepoSelector({integration}: ScmRepoSelectorProps) {
       options={options}
       value={selectedRepository?.externalSlug ?? null}
       onChange={handleChange}
-      onInputChange={(value, actionMeta) => {
-        if (actionMeta.action === 'input-change') {
-          setSearch(value);
-        }
-      }}
-      // Disable client-side filtering; search is handled server-side.
-      filterOption={() => true}
       noOptionsMessage={noOptionsMessage}
       isLoading={isFetching}
       isDisabled={busy}
       clearable
       searchable
-      components={{Control: ScmSearchControl}}
+      components={{Control: ScmSearchControl, MenuList: ScmVirtualizedMenuList}}
     />
   );
 }

static/app/views/onboarding/components/useScmRepoSearch.ts

@@ -1,9 +1,8 @@
-import {useMemo, useState} from 'react';
+import {useMemo} from 'react';
 
 import type {IntegrationRepository, Repository} from 'sentry/types/integrations';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
 import {fetchDataQuery, useQuery} from 'sentry/utils/queryClient';
-import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 interface ScmRepoSearchResult {
@@ -12,10 +11,8 @@ interface ScmRepoSearchResult {
 
 export function useScmRepoSearch(integrationId: string, selectedRepo?: Repository) {
   const organization = useOrganization();
-  const [search, setSearch] = useState('');
-  const debouncedSearch = useDebouncedValue(search, 200);
 
-  const searchQuery = useQuery({
+  const reposQuery = useQuery({
     queryKey: [
       getApiUrl(
         '/organizations/$organizationIdOrSlug/integrations/$integrationId/repos/',
@@ -26,22 +23,20 @@ export function useScmRepoSearch(integrationId: string, selectedRepo?: Repositor
           },
         }
       ),
-      {method: 'GET', query: {search: debouncedSearch, accessibleOnly: true}},
+      {method: 'GET', query: {accessibleOnly: true}},
     ] as const,
     queryFn: async context => {
       return fetchDataQuery<ScmRepoSearchResult>(context);
     },
     retry: 0,
     staleTime: 20_000,
-    placeholderData: previousData => (debouncedSearch ? previousData : undefined),
-    enabled: !!debouncedSearch,
   });
 
   const selectedRepoSlug = selectedRepo?.externalSlug;
 
   const {reposByIdentifier, dropdownItems} = useMemo(
     () =>
-      (searchQuery.data?.[0]?.repos ?? []).reduce<{
+      (reposQuery.data?.[0]?.repos ?? []).reduce<{
         dropdownItems: Array<{
           disabled: boolean;
           label: string;
@@ -63,15 +58,13 @@ export function useScmRepoSearch(integrationId: string, selectedRepo?: Repositor
           dropdownItems: [],
         }
       ),
-    [searchQuery.data, selectedRepoSlug]
+    [reposQuery.data, selectedRepoSlug]
   );
 
   return {
     reposByIdentifier,
     dropdownItems,
-    isFetching: searchQuery.isFetching,
-    isError: searchQuery.isError,
-    debouncedSearch,
-    setSearch,
+    isFetching: reposQuery.isFetching,
+    isError: reposQuery.isError,
   };
 }