feat(onboarding): Implement SCM_CONNECT step with provider connection and repo selection by jaydgoss · Pull Request #110883 · getsentry/sentry

jaydgoss · 2026-03-17T17:57:39Z

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

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

Refs VDY-19

linear-code · 2026-03-17T17:57:43Z

VDY-19 Implement SCM_CONNECT step with working provider connection and repo selection

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

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

static/app/views/onboarding/scmConnect.tsx

static/app/views/onboarding/useScmProviders.ts

Refs VDY-19

Disable CompactSelect while existing repos are loading to prevent selecting installed repos before their Sentry IDs are available. Destructure context setters in ScmConnect to stabilize handleInstall deps. Add error state for failed provider/integration queries. Expand OnboardingContextProvider value prop to accept full session state so tests can use the real provider instead of spying on useOnboardingContext. Refs VDY-19

Use || instead of ?? for domainName fallback so empty strings fall through to provider.name. Initialize search state as empty string instead of undefined for explicitness. Extract boolean from selectedIntegration for useEffect dep to avoid re-running when the object reference changes but truthiness does not.

…ions

…pills The org creator always has org:integrations, so the Access check is unreachable in the onboarding flow. Remove the wrapper and hardcode userHasAccess. If this component is reused in project creation (where non-owners can land), the access check should be revisited.

…alValue

The error UI retry button only called refetchIntegrations, so if the providers query failed the UI stayed stuck. Add a refetch function that retries both queries and wire the retry button to use it.

setSelectedPlatform(undefined) was calling removeOnboarding() which wiped the entire session including selectedIntegration and selectedRepository. Only do a full reset when no other state remains; otherwise clear just the platform field.

…tform" This reverts commit 76be625.

Move the ref null-out to after the await so that if hideRepository fails, the ref retains the ID and the user can retry removal.

Rename adding to busy and set it during both add and remove operations. Previously handleRemove didn't disable the UI, so a user could select a new repo while hideRepository was in flight.

The addRepository and hideRepository action creators show global toast messages (Loading, Success, Error) designed for the settings page. Replace with direct API calls to avoid confusing toasts during onboarding.

…cleanup

Check selectedRepository.id instead of just truthiness so the button stays disabled during the optimistic add (id is empty string until the POST resolves).

…eanup

If a repo is marked as installed but the active-repos lookup fails (e.g., repo was previously hidden), fall through to the POST path to re-add it instead of leaving the user stuck with an empty ID.

Use all server-provided fields (name, url, etc.) instead of only cherry-picking id from the POST response.

Per review feedback — "Connected" terminology isn't used elsewhere in the codebase.

Replace inline provider and integration objects with GitHubIntegrationProviderFixture and OrganizationIntegrationsFixture.

Replace inline provider and integration objects with GitHubIntegrationProviderFixture, OpsgenieIntegrationProviderFixture, and OrganizationIntegrationsFixture.

No need for a separate component -- the connected view markup is small and only used in one place.

… repos The already-installed path only took the id from the existing Sentry repo, leaving optimistic placeholders for url, dateCreated, and name. Spread the full existing object to match the POST path behavior.

- Replace inline mockIntegration with OrganizationIntegrationsFixture - Narrow useScmRepoSearch useMemo dep from full selectedRepo object to selectedRepo.externalSlug since only the slug drives the disabled flag

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 17, 2026

vercel bot deployed to Preview March 17, 2026 17:59 View deployment

vercel bot deployed to Preview March 17, 2026 18:10 View deployment