ref(onboarding): Move less common SCM providers into a More dropdown (#112730)

## Summary
- Split the SCM provider selector into primary pills (GitHub, GitLab,
Bitbucket) and a "More" dropdown for less common providers (Bitbucket
Server, GitHub Enterprise, Azure DevOps)
- Reduces visual noise on the connect step

Stacks on #112696.

Refs VDY-69

## Test plan
- [ ] Verify primary providers render as top-level pill buttons
- [ ] Verify secondary providers appear in the "More" dropdown
- [ ] Verify clicking a dropdown item triggers the OAuth install flow
- [ ] Verify "More" dropdown does not appear when only primary providers
exist

Author: jaydgoss

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

@@ -0,0 +1,103 @@
+import {GitHubIntegrationProviderFixture} from 'sentry-fixture/githubIntegrationProvider';
+import {GitLabIntegrationProviderFixture} from 'sentry-fixture/gitlabIntegrationProvider';
+
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {ScmProviderPills} from './scmProviderPills';
+
+const bitbucketProvider = GitHubIntegrationProviderFixture({
+  key: 'bitbucket',
+  slug: 'bitbucket',
+  name: 'Bitbucket',
+});
+
+const bitbucketServerProvider = GitHubIntegrationProviderFixture({
+  key: 'bitbucket_server',
+  slug: 'bitbucket_server',
+  name: 'Bitbucket Server',
+});
+
+const gitHubEnterpriseProvider = GitHubIntegrationProviderFixture({
+  key: 'github_enterprise',
+  slug: 'github_enterprise',
+  name: 'GitHub Enterprise',
+});
+
+const azureDevOpsProvider = GitHubIntegrationProviderFixture({
+  key: 'vsts',
+  slug: 'vsts',
+  name: 'Azure DevOps',
+});
+
+describe('ScmProviderPills', () => {
+  it('renders primary providers as top-level buttons', () => {
+    const providers = [
+      GitHubIntegrationProviderFixture(),
+      GitLabIntegrationProviderFixture(),
+      bitbucketProvider,
+    ];
+
+    render(<ScmProviderPills providers={providers} onInstall={jest.fn()} />);
+
+    expect(screen.getByText('GitHub')).toBeInTheDocument();
+    expect(screen.getByText('GitLab')).toBeInTheDocument();
+    expect(screen.getByText('Bitbucket')).toBeInTheDocument();
+    expect(screen.queryByText('More')).not.toBeInTheDocument();
+  });
+
+  it('shows secondary providers in a "More" dropdown', async () => {
+    const providers = [
+      GitHubIntegrationProviderFixture(),
+      GitLabIntegrationProviderFixture(),
+      bitbucketProvider,
+      bitbucketServerProvider,
+      gitHubEnterpriseProvider,
+      azureDevOpsProvider,
+    ];
+
+    render(<ScmProviderPills providers={providers} onInstall={jest.fn()} />);
+
+    // Primary providers are visible as buttons
+    expect(screen.getByText('GitHub')).toBeInTheDocument();
+    expect(screen.getByText('GitLab')).toBeInTheDocument();
+    expect(screen.getByText('Bitbucket')).toBeInTheDocument();
+
+    // Secondary providers are hidden behind the "More" dropdown
+    expect(screen.queryByText('Bitbucket Server')).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', {name: 'More'}));
+
+    expect(
+      screen.getByRole('menuitemradio', {name: 'Bitbucket Server'})
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('menuitemradio', {name: 'GitHub Enterprise'})
+    ).toBeInTheDocument();
+    expect(screen.getByRole('menuitemradio', {name: 'Azure DevOps'})).toBeInTheDocument();
+  });
+
+  it('triggers install flow when clicking a dropdown item', async () => {
+    const open = jest.spyOn(window, 'open').mockReturnValue({
+      focus: jest.fn(),
+      close: jest.fn(),
+    } as any);
+
+    const providers = [GitHubIntegrationProviderFixture(), gitHubEnterpriseProvider];
+
+    render(<ScmProviderPills providers={providers} onInstall={jest.fn()} />);
+
+    await userEvent.click(screen.getByRole('button', {name: 'More'}));
+    await userEvent.click(screen.getByRole('menuitemradio', {name: 'GitHub Enterprise'}));
+
+    expect(open).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render "More" dropdown when all providers are primary', () => {
+    const providers = [GitHubIntegrationProviderFixture()];
+
+    render(<ScmProviderPills providers={providers} onInstall={jest.fn()} />);
+
+    expect(screen.getByText('GitHub')).toBeInTheDocument();
+    expect(screen.queryByText('More')).not.toBeInTheDocument();
+  });
+});

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

@@ -1,42 +1,96 @@
-import {Flex} from '@sentry/scraps/layout';
+import {Flex, Grid} from '@sentry/scraps/layout';
 
+import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {t} from 'sentry/locale';
 import type {Integration, IntegrationProvider} from 'sentry/types/integrations';
+import {useAddIntegration} from 'sentry/utils/integrations/useAddIntegration';
 import {getIntegrationIcon} from 'sentry/utils/integrationUtil';
+import {useOrganization} from 'sentry/utils/useOrganization';
 import {IntegrationButton} from 'sentry/views/settings/organizationIntegrations/integrationButton';
 import {IntegrationContext} from 'sentry/views/settings/organizationIntegrations/integrationContext';
 
+/**
+ * Provider keys shown as top-level pill buttons. Everything else is grouped
+ * into the "More" dropdown to reduce visual clutter.
+ */
+const PRIMARY_PROVIDER_KEYS = new Set(['github', 'gitlab', 'bitbucket']);
+
 interface ScmProviderPillsProps {
   onInstall: (data: Integration) => void;
   providers: IntegrationProvider[];
 }
 
 export function ScmProviderPills({providers, onInstall}: ScmProviderPillsProps) {
+  const organization = useOrganization();
+  const {startFlow} = useAddIntegration();
+  const primaryProviders = providers.filter(p => PRIMARY_PROVIDER_KEYS.has(p.key));
+  const moreProviders = providers.filter(p => !PRIMARY_PROVIDER_KEYS.has(p.key));
+  const gridItemCount = primaryProviders.length + (moreProviders.length > 0 ? 1 : 0);
+
+  const columnsXs = `repeat(${Math.min(gridItemCount, 2)}, 1fr)`;
+  const columnsMd = [
+    primaryProviders.length && `repeat(${primaryProviders.length}, 1fr)`,
+    moreProviders.length && 'min-content',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return (
-    <Flex gap="lg" wrap="wrap" justify="center">
-      {providers.map(provider => (
-        <IntegrationContext
-          key={provider.key}
-          value={{
-            provider,
-            type: 'first_party',
-            installStatus: 'Not Installed',
-            analyticsParams: {
-              view: 'onboarding_scm',
-              already_installed: false,
-            },
-          }}
-        >
-          <IntegrationButton
-            userHasAccess
-            onAddIntegration={onInstall}
-            onExternalClick={() => {}}
-            buttonProps={{
-              icon: getIntegrationIcon(provider.key, 'sm'),
-              buttonText: provider.name,
+    <Flex justify="center">
+      <Grid
+        columns={{
+          xs: columnsXs,
+          md: columnsMd,
+        }}
+        justify="center"
+        gap="lg"
+      >
+        {primaryProviders.map(provider => (
+          <IntegrationContext
+            key={provider.key}
+            value={{
+              provider,
+              type: 'first_party',
+              installStatus: 'Not Installed',
+              analyticsParams: {
+                view: 'onboarding_scm',
+                already_installed: false,
+              },
             }}
+          >
+            <IntegrationButton
+              userHasAccess
+              onAddIntegration={onInstall}
+              onExternalClick={() => {}}
+              buttonProps={{
+                icon: getIntegrationIcon(provider.key, 'sm'),
+                buttonText: provider.name,
+              }}
+            />
+          </IntegrationContext>
+        ))}
+        {moreProviders.length > 0 && (
+          <DropdownMenu
+            triggerLabel={t('More')}
+            position="bottom-end"
+            items={moreProviders.map(provider => ({
+              key: provider.key,
+              label: provider.name,
+              leadingItems: getIntegrationIcon(provider.key, 'sm'),
+              onAction: () =>
+                startFlow({
+                  provider,
+                  organization,
+                  onInstall,
+                  analyticsParams: {
+                    view: 'onboarding_scm',
+                    already_installed: false,
+                  },
+                }),
+            }))}
           />
-        </IntegrationContext>
-      ))}
+        )}
+      </Grid>
     </Flex>
   );
 }