feat(onboarding): Implement SCM_CONNECT step with provider connection and repo selection (#110883)

## Summary

Implements the `SCM_CONNECT` onboarding step behind the
`organizations:onboarding-scm` feature flag. Functional-first -- UI
polish is out of scope.

## What it does

**Provider connection**
- Renders OAuth buttons for each SCM provider (GitHub, GitLab,
Bitbucket, Azure DevOps)
- Auto-selects an existing integration on mount so returning users skip
to the connected view
- Stores the `Integration` in `OnboardingContext.selectedIntegration`

**Repository selection**
- Debounced search dropdown querying `GET
/integrations/{id}/repos/?search=`
- Selecting a repo registers it in Sentry via `POST /repos/` (or looks
up the existing Sentry ID if already added)
- Switching repos cleans up the previously added one
- Removing a repo deletes it from Sentry if we added it during this
session
- Stores `Repository` (with real Sentry ID) in
`OnboardingContext.selectedRepository`
- Continue is disabled until a repo is selected

**PRD scenario alignment**
- Scenario A (new org): provider pills with OAuth
- Scenario B (existing SCM): auto-selects, shows connected view with
repo search
- Scenario D/E/F (add new org, switch provider, remove SCM): not
supported in onboarding per PRD, "Manage in Settings" link provided

**Skip and navigation**
- "Skip for now" advances to next step without SCM data
- Selections restore from context when navigating back

## Out of scope
- UI polish, animations, "Why connect" benefits card
- Repo relevance ordering
- Multiple simultaneous integrations
- Explicit error states for popup closed / OAuth failure

## New files
- `useScmProviders.ts` -- data-fetching hook for SCM providers and
active installations
- `components/scmProviderPills.tsx` -- OAuth provider pill buttons
- `components/scmConnectedView.tsx` -- connected status + "Manage in
Settings" link + repo selector
- `components/scmRepoSelector.tsx` -- repo search dropdown UI
- `components/useRepoSearch.ts` -- debounced provider repo search query
- `components/useRepoSelection.ts` -- repo add/remove lifecycle with
optimistic updates

## Test plan
- [x] 22 onboarding tests passing
- [x] Auto-selects existing integration and shows connected view
- [x] "Skip for now" advances to next step
- [x] Manual: OAuth flow connects provider and shows connected view
- [x] Manual: Repo search, selection, and removal work end-to-end
- [x] Manual: Switching repos cleans up the previously added one

Refs VDY-19

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

static/app/components/onboarding/onboardingContext.tsx

@@ -9,18 +9,18 @@ type OnboardingContextProps = {
   setSelectedFeatures: (features?: ProductSolution[]) => void;
   setSelectedIntegration: (integration?: Integration) => void;
   setSelectedPlatform: (selectedSDK?: OnboardingSelectedSDK) => void;
-  setSelectedRepositories: (repos?: Repository[]) => void;
+  setSelectedRepository: (repo?: Repository) => void;
   selectedFeatures?: ProductSolution[];
   selectedIntegration?: Integration;
   selectedPlatform?: OnboardingSelectedSDK;
-  selectedRepositories?: Repository[];
+  selectedRepository?: Repository;
 };
 
-type OnboardingSessionState = {
+export type OnboardingSessionState = {
   selectedFeatures?: ProductSolution[];
   selectedIntegration?: Integration;
   selectedPlatform?: OnboardingSelectedSDK;
-  selectedRepositories?: Repository[];
+  selectedRepository?: Repository;
 };
 
 /**
@@ -31,63 +31,47 @@ const OnboardingContext = createContext<OnboardingContextProps>({
   setSelectedPlatform: () => {},
   selectedIntegration: undefined,
   setSelectedIntegration: () => {},
-  selectedRepositories: undefined,
-  setSelectedRepositories: () => {},
+  selectedRepository: undefined,
+  setSelectedRepository: () => {},
   selectedFeatures: undefined,
   setSelectedFeatures: () => {},
 });
 
 type ProviderProps = {
   children: React.ReactNode;
   /**
-   * This is only used in our frontend tests to set the initial value of the context.
+   * Optional initial session state. Primarily used in tests to seed the context
+   * without touching session storage directly.
    */
-  value?: Pick<OnboardingContextProps, 'selectedPlatform'>;
+  initialValue?: OnboardingSessionState;
 };
 
-export function OnboardingContextProvider({children, value}: ProviderProps) {
+export function OnboardingContextProvider({children, initialValue}: ProviderProps) {
   const [onboarding, setOnboarding, removeOnboarding] = useSessionStorage<
     OnboardingSessionState | undefined
-  >(
-    'onboarding',
-    value?.selectedPlatform ? {selectedPlatform: value.selectedPlatform} : undefined
-  );
+  >('onboarding', initialValue);
 
   const contextValue = useMemo(
     () => ({
       selectedPlatform: onboarding?.selectedPlatform,
       setSelectedPlatform: (selectedPlatform?: OnboardingSelectedSDK) => {
         if (selectedPlatform === undefined) {
-          // Clear platform but preserve other SCM state (integration, repos, features).
-          // Full reset only happens if no other state remains.
-          const nextState = {
-            ...onboarding,
-            selectedPlatform: undefined,
-          };
-          const hasOtherState =
-            nextState.selectedIntegration ||
-            nextState.selectedRepositories ||
-            nextState.selectedFeatures;
-          if (hasOtherState) {
-            setOnboarding(nextState);
-          } else {
-            removeOnboarding();
-          }
+          removeOnboarding();
         } else {
-          setOnboarding({...onboarding, selectedPlatform});
+          setOnboarding(prev => ({...prev, selectedPlatform}));
         }
       },
       selectedIntegration: onboarding?.selectedIntegration,
       setSelectedIntegration: (selectedIntegration?: Integration) => {
-        setOnboarding({...onboarding, selectedIntegration});
+        setOnboarding(prev => ({...prev, selectedIntegration}));
       },
-      selectedRepositories: onboarding?.selectedRepositories,
-      setSelectedRepositories: (selectedRepositories?: Repository[]) => {
-        setOnboarding({...onboarding, selectedRepositories});
+      selectedRepository: onboarding?.selectedRepository,
+      setSelectedRepository: (selectedRepository?: Repository) => {
+        setOnboarding(prev => ({...prev, selectedRepository}));
       },
       selectedFeatures: onboarding?.selectedFeatures,
       setSelectedFeatures: (selectedFeatures?: ProductSolution[]) => {
-        setOnboarding({...onboarding, selectedFeatures});
+        setOnboarding(prev => ({...prev, selectedFeatures}));
       },
     }),
     [onboarding, setOnboarding, removeOnboarding]

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

@@ -0,0 +1,43 @@
+import {Flex} from '@sentry/scraps/layout';
+
+import type {Integration, IntegrationProvider} from 'sentry/types/integrations';
+import {getIntegrationIcon} from 'sentry/utils/integrationUtil';
+import {IntegrationButton} from 'sentry/views/settings/organizationIntegrations/integrationButton';
+import {IntegrationContext} from 'sentry/views/settings/organizationIntegrations/integrationContext';
+
+interface ScmProviderPillsProps {
+  onInstall: (data: Integration) => void;
+  providers: IntegrationProvider[];
+}
+
+export function ScmProviderPills({providers, onInstall}: ScmProviderPillsProps) {
+  return (
+    <Flex gap="md" wrap="wrap" justify="center">
+      {providers.map(provider => (
+        <IntegrationContext
+          key={provider.key}
+          value={{
+            provider,
+            type: 'first_party',
+            installStatus: 'Not Installed',
+            analyticsParams: {
+              view: 'onboarding',
+              already_installed: false,
+            },
+          }}
+        >
+          <IntegrationButton
+            userHasAccess
+            onAddIntegration={onInstall}
+            onExternalClick={() => {}}
+            buttonProps={{
+              size: 'sm',
+              icon: getIntegrationIcon(provider.key, 'sm'),
+              buttonText: provider.name,
+            }}
+          />
+        </IntegrationContext>
+      ))}
+    </Flex>
+  );
+}

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

@@ -0,0 +1,70 @@
+import {Button} from '@sentry/scraps/button';
+import {CompactSelect} from '@sentry/scraps/compactSelect';
+import {Flex, Stack} from '@sentry/scraps/layout';
+import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
+import {Text} from '@sentry/scraps/text';
+
+import {useOnboardingContext} from 'sentry/components/onboarding/onboardingContext';
+import {IconClose} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+import {useScmRepoSearch} from './useScmRepoSearch';
+import {useScmRepoSelection} from './useScmRepoSelection';
+
+export function ScmRepoSelector() {
+  const {selectedIntegration, selectedRepository, setSelectedRepository} =
+    useOnboardingContext();
+  const {reposByIdentifier, dropdownItems, isFetching, debouncedSearch, setSearch} =
+    useScmRepoSearch(selectedIntegration?.id ?? '', selectedRepository);
+
+  const {busy, handleSelect, handleRemove} = useScmRepoSelection({
+    onSelect: setSelectedRepository,
+    reposByIdentifier,
+  });
+
+  return (
+    <Stack gap="md">
+      <CompactSelect
+        menuWidth="100%"
+        disabled={busy}
+        options={dropdownItems}
+        onChange={handleSelect}
+        value={undefined}
+        menuTitle={t('Repositories')}
+        emptyMessage={
+          isFetching
+            ? t('Searching\u2026')
+            : debouncedSearch
+              ? t('No repositories found.')
+              : t('Type to search repositories')
+        }
+        search={{
+          placeholder: t('Search repositories'),
+          filter: false,
+          onChange: setSearch,
+        }}
+        loading={isFetching}
+        trigger={triggerProps => (
+          <OverlayTrigger.Button {...triggerProps} busy={busy}>
+            {selectedRepository ? selectedRepository.name : t('Search repositories')}
+          </OverlayTrigger.Button>
+        )}
+      />
+      {selectedRepository && (
+        <Flex align="center" gap="sm">
+          <Flex flexGrow={1}>
+            <Text size="sm">{selectedRepository.name}</Text>
+          </Flex>
+          <Button
+            size="zero"
+            priority="link"
+            icon={<IconClose size="xs" />}
+            aria-label={t('Remove %s', selectedRepository.name)}
+            onClick={handleRemove}
+            disabled={busy}
+          />
+        </Flex>
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,78 @@
+import {useMemo, useState} 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 {
+  repos: IntegrationRepository[];
+}
+
+export function useScmRepoSearch(integrationId: string, selectedRepo?: Repository) {
+  const organization = useOrganization();
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebouncedValue(search, 200);
+
+  const searchQuery = useQuery({
+    queryKey: [
+      getApiUrl(
+        `/organizations/$organizationIdOrSlug/integrations/$integrationId/repos/`,
+        {
+          path: {
+            organizationIdOrSlug: organization.slug,
+            integrationId,
+          },
+        }
+      ),
+      {method: 'GET', query: {search: debouncedSearch}},
+    ] 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<{
+        dropdownItems: Array<{
+          disabled: boolean;
+          label: string;
+          textValue: string;
+          value: string;
+        }>;
+        reposByIdentifier: Map<string, IntegrationRepository>;
+      }>(
+        (acc, repo) => {
+          acc.reposByIdentifier.set(repo.identifier, repo);
+          acc.dropdownItems.push({
+            value: repo.identifier,
+            label: repo.name,
+            textValue: repo.name,
+            disabled: repo.identifier === selectedRepoSlug,
+          });
+          return acc;
+        },
+        {
+          reposByIdentifier: new Map(),
+          dropdownItems: [],
+        }
+      ),
+    [searchQuery.data, selectedRepoSlug]
+  );
+
+  return {
+    reposByIdentifier,
+    dropdownItems,
+    isFetching: searchQuery.isFetching,
+    debouncedSearch,
+    setSearch,
+  };
+}