feat(vsts): Add API pipeline frontend flow

static/app/components/pipeline/pipelineIntegrationVsts.spec.tsx

@@ -0,0 +1,131 @@
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {vstsIntegrationPipeline} from './pipelineIntegrationVsts';
+import type {PipelineStepProps} from './types';
+
+const VstsOAuthLoginStep = vstsIntegrationPipeline.steps[0].component;
+const VstsAccountSelectionStep = vstsIntegrationPipeline.steps[1].component;
+
+function makeStepProps<D, A>(
+  overrides: Partial<PipelineStepProps<D, A>> & {stepData: D}
+): PipelineStepProps<D, A> {
+  return {
+    advance: jest.fn(),
+    advanceError: null,
+    isAdvancing: false,
+    stepIndex: 0,
+    totalSteps: 2,
+    ...overrides,
+  };
+}
+
+let mockPopup: Window;
+
+function dispatchPipelineMessage({
+  data,
+  origin = document.location.origin,
+  source = mockPopup,
+}: {
+  data: Record<string, string>;
+  origin?: string;
+  source?: Window | MessageEventSource | null;
+}) {
+  act(() => {
+    const event = new MessageEvent('message', {data, origin});
+    Object.defineProperty(event, 'source', {value: source});
+    window.dispatchEvent(event);
+  });
+}
+
+beforeEach(() => {
+  mockPopup = {
+    closed: false,
+    close: jest.fn(),
+    focus: jest.fn(),
+  } as unknown as Window;
+  jest.spyOn(window, 'open').mockReturnValue(mockPopup);
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('VstsOAuthLoginStep', () => {
+  it('renders the OAuth login step for Azure DevOps', () => {
+    render(
+      <VstsOAuthLoginStep
+        {...makeStepProps({
+          stepData: {
+            oauthUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
+          },
+        })}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'Authorize Azure DevOps'})
+    ).toBeInTheDocument();
+  });
+
+  it('calls advance with code and state on OAuth callback', async () => {
+    const advance = jest.fn();
+    render(
+      <VstsOAuthLoginStep
+        {...makeStepProps({
+          stepData: {
+            oauthUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
+          },
+          advance,
+        })}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Authorize Azure DevOps'}));
+
+    dispatchPipelineMessage({
+      data: {
+        _pipeline_source: 'sentry-pipeline',
+        code: 'auth-code-123',
+        state: 'state-xyz',
+      },
+    });
+
+    expect(advance).toHaveBeenCalledWith({
+      code: 'auth-code-123',
+      state: 'state-xyz',
+    });
+  });
+});
+
+describe('VstsAccountSelectionStep', () => {
+  it('shows a no accounts message when no Azure DevOps organizations are available', () => {
+    render(<VstsAccountSelectionStep {...makeStepProps({stepData: {accounts: []}})} />);
+
+    expect(
+      screen.getByText(
+        'No Azure DevOps organizations were found for this account. Make sure you are an owner or admin on the Azure DevOps organization you want to connect.'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('calls advance when selecting an Azure DevOps organization', async () => {
+    const advance = jest.fn();
+    render(
+      <VstsAccountSelectionStep
+        {...makeStepProps({
+          stepData: {
+            accounts: [{accountId: 'acct-1', accountName: 'MyVSTSAccount'}],
+          },
+          advance,
+        })}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Select Azure DevOps organization'})
+    );
+    await userEvent.click(await screen.findByText('MyVSTSAccount'));
+
+    expect(advance).toHaveBeenCalledWith({account: 'acct-1'});
+  });
+});

static/app/components/pipeline/pipelineIntegrationVsts.tsx

@@ -0,0 +1,106 @@
+import {useCallback} from 'react';
+
+import {Alert} from '@sentry/scraps/alert';
+import {Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {t} from 'sentry/locale';
+import type {IntegrationWithConfig} from 'sentry/types/integrations';
+
+import type {OAuthCallbackData} from './shared/oauthLoginStep';
+import {OAuthLoginStep} from './shared/oauthLoginStep';
+import type {PipelineDefinition, PipelineStepProps} from './types';
+import {pipelineComplete} from './types';
+
+interface VstsAccount {
+  accountId: string;
+  accountName: string;
+}
+
+interface VstsAccountSelectionStepData {
+  accounts?: VstsAccount[];
+}
+
+interface VstsAccountSelectionAdvanceData {
+  account: string;
+}
+
+function VstsOAuthLoginStep({
+  stepData,
+  advance,
+  isAdvancing,
+}: PipelineStepProps<{oauthUrl?: string}, {code: string; state: string}>) {
+  const handleOAuthCallback = useCallback(
+    (data: OAuthCallbackData) => {
+      advance({code: data.code, state: data.state});
+    },
+    [advance]
+  );
+
+  return (
+    <OAuthLoginStep
+      oauthUrl={stepData.oauthUrl}
+      isLoading={isAdvancing}
+      serviceName="Azure DevOps"
+      onOAuthCallback={handleOAuthCallback}
+    />
+  );
+}
+
+function VstsAccountSelectionStep({
+  stepData,
+  advance,
+  isAdvancing,
+}: PipelineStepProps<VstsAccountSelectionStepData, VstsAccountSelectionAdvanceData>) {
+  const accounts = stepData.accounts ?? [];
+
+  if (accounts.length === 0) {
+    return (
+      <Alert variant="info">
+        {t(
+          'No Azure DevOps organizations were found for this account. Make sure you are an owner or admin on the Azure DevOps organization you want to connect.'
+        )}
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack gap="lg" align="start">
+      <Text>
+        {t('Select the Azure DevOps organization you want to connect to Sentry.')}
+      </Text>
+      <DropdownMenu
+        triggerLabel={t('Select Azure DevOps organization')}
+        items={accounts.map(account => ({
+          key: account.accountId,
+          label: account.accountName,
+        }))}
+        isDisabled={isAdvancing}
+        onAction={key => {
+          advance({account: key as string});
+        }}
+      />
+    </Stack>
+  );
+}
+
+export const vstsIntegrationPipeline = {
+  type: 'integration',
+  provider: 'vsts',
+  actionTitle: t('Installing Azure DevOps Integration'),
+  getCompletionData: pipelineComplete<IntegrationWithConfig>,
+  completionView: null,
+  steps: [
+    {
+      stepId: 'oauth_login',
+      shortDescription: t('Authorizing via Azure DevOps OAuth'),
+      component: VstsOAuthLoginStep,
+    },
+    {
+      stepId: 'account_selection',
+      shortDescription: t('Selecting Azure DevOps organization'),
+      component: VstsAccountSelectionStep,
+    },
+  ],
+} as const satisfies PipelineDefinition;

static/app/components/pipeline/registry.tsx

@@ -4,6 +4,7 @@ import {bitbucketIntegrationPipeline} from './pipelineIntegrationBitbucket';
 import {githubIntegrationPipeline} from './pipelineIntegrationGitHub';
 import {gitlabIntegrationPipeline} from './pipelineIntegrationGitLab';
 import {slackIntegrationPipeline} from './pipelineIntegrationSlack';
+import {vstsIntegrationPipeline} from './pipelineIntegrationVsts';
 
 /**
  * All registered pipeline definitions.
@@ -15,6 +16,7 @@ export const PIPELINE_REGISTRY = [
   githubIntegrationPipeline,
   gitlabIntegrationPipeline,
   slackIntegrationPipeline,
+  vstsIntegrationPipeline,
 ] as const;
 
 type AllPipelines = (typeof PIPELINE_REGISTRY)[number];