feat(integrations): GA Slack, Github, Gitlab, and Bitbucket API Pipelines

Author: evanpurkhiser

static/app/utils/integrations/useAddIntegration.spec.tsx

@@ -12,6 +12,10 @@ import {useAddIntegration} from 'sentry/utils/integrations/useAddIntegration';
 
 describe('useAddIntegration', () => {
   const provider = GitHubIntegrationProviderFixture();
+  const legacyProvider = GitHubIntegrationProviderFixture({
+    key: 'custom_legacy',
+    slug: 'custom_legacy',
+  });
   const integration = GitHubIntegrationFixture();
   let configState: Config;
 
@@ -58,7 +62,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
@@ -76,7 +80,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
           account: 'my-account',
@@ -96,7 +100,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
           urlParams: {custom_param: 'value'},
@@ -114,7 +118,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall,
         })
@@ -142,7 +146,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
@@ -159,7 +163,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
@@ -176,7 +180,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
@@ -195,7 +199,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall,
         })
@@ -212,6 +216,7 @@ describe('useAddIntegration', () => {
       await act(async () => {
         await new Promise(resolve => setTimeout(resolve, 50));
       });
+
       expect(onInstall).not.toHaveBeenCalled();
     });
 
@@ -222,7 +227,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall,
         })
@@ -241,7 +246,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization: OrganizationFixture(),
           onInstall: jest.fn(),
         })
@@ -253,13 +258,11 @@ describe('useAddIntegration', () => {
   });
 
   describe('API pipeline flow', () => {
-    it('opens the pipeline modal when feature flag is enabled', () => {
+    it('opens the pipeline modal for unconditionally API-driven providers', () => {
       const openPipelineModalSpy = jest.spyOn(pipelineModal, 'openPipelineModal');
       const onInstall = jest.fn();
 
-      const organization = OrganizationFixture({
-        features: ['integration-api-pipeline-github'],
-      });
+      const organization = OrganizationFixture({features: []});
 
       const {result} = renderHookWithProviders(() => useAddIntegration());
 
@@ -282,9 +285,7 @@ describe('useAddIntegration', () => {
     it('passes urlParams as initialData to the pipeline modal', () => {
       const openPipelineModalSpy = jest.spyOn(pipelineModal, 'openPipelineModal');
 
-      const organization = OrganizationFixture({
-        features: ['integration-api-pipeline-github'],
-      });
+      const organization = OrganizationFixture({features: []});
 
       const {result} = renderHookWithProviders(() => useAddIntegration());
 
@@ -308,9 +309,7 @@ describe('useAddIntegration', () => {
       jest.spyOn(pipelineModal, 'openPipelineModal');
       jest.spyOn(window, 'open');
 
-      const organization = OrganizationFixture({
-        features: ['integration-api-pipeline-github'],
-      });
+      const organization = OrganizationFixture({features: []});
 
       const {result} = renderHookWithProviders(() => useAddIntegration());
 
@@ -325,7 +324,57 @@ describe('useAddIntegration', () => {
       expect(window.open).not.toHaveBeenCalled();
     });
 
-    it('falls back to legacy flow when feature flag is not enabled', () => {
+    it('opens the pipeline modal for other unconditional providers without a flag', () => {
+      const openPipelineModalSpy = jest.spyOn(pipelineModal, 'openPipelineModal');
+      const organization = OrganizationFixture({features: []});
+      const gitlabProvider = GitHubIntegrationProviderFixture({
+        key: 'gitlab',
+        slug: 'gitlab',
+        name: 'GitLab',
+      });
+
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
+          provider: gitlabProvider,
+          organization,
+          onInstall: jest.fn(),
+        })
+      );
+
+      expect(openPipelineModalSpy).toHaveBeenCalledWith(
+        expect.objectContaining({provider: 'gitlab'})
+      );
+    });
+
+    it('opens the pipeline modal for flagged rollout providers when the feature is enabled', () => {
+      const openPipelineModalSpy = jest.spyOn(pipelineModal, 'openPipelineModal');
+      const organization = OrganizationFixture({
+        features: ['integration-api-pipeline-vercel'],
+      });
+      const vercelProvider = GitHubIntegrationProviderFixture({
+        key: 'vercel',
+        slug: 'vercel',
+        name: 'Vercel',
+      });
+
+      const {result} = renderHookWithProviders(() => useAddIntegration());
+
+      act(() =>
+        result.current.startFlow({
+          provider: vercelProvider,
+          organization,
+          onInstall: jest.fn(),
+        })
+      );
+
+      expect(openPipelineModalSpy).toHaveBeenCalledWith(
+        expect.objectContaining({provider: 'vercel'})
+      );
+    });
+
+    it('falls back to legacy flow when the provider is not API driven', () => {
       const openPipelineModalSpy = jest.spyOn(pipelineModal, 'openPipelineModal');
       jest
         .spyOn(window, 'open')
@@ -337,7 +386,7 @@ describe('useAddIntegration', () => {
 
       act(() =>
         result.current.startFlow({
-          provider,
+          provider: legacyProvider,
           organization,
           onInstall: jest.fn(),
         })

static/app/utils/integrations/useAddIntegration.tsx

@@ -34,45 +34,53 @@ export interface AddIntegrationParams {
   urlParams?: Record<string, string>;
 }
 
+type ApiPipelineProvider = ProvidersByType['integration'];
+
+/**
+ * Providers that should always use the API-driven pipeline modal.
+ */
+const UNCONDITIONAL_API_PIPELINE_PROVIDERS = new Set<ApiPipelineProvider>([
+  'aws_lambda',
+  'bitbucket',
+  'github',
+  'gitlab',
+  'slack',
+]);
+
 /**
- * Per-provider feature flags that gate the new API-driven pipeline setup flow.
- * When enabled for a provider, the integration setup uses the React pipeline
- * modal instead of the legacy Django view popup window.
+ * Providers that support the API-driven pipeline modal but still require an
+ * organization feature flag during rollout.
  *
- * Keys are provider identifiers (constrained to registered pipeline providers
- * via `satisfies`), values are feature flag names without the `organizations:`
- * prefix.
+ * Keys are provider identifiers, values are feature flag names without the
+ * `organizations:` prefix.
  */
 const API_PIPELINE_FEATURE_FLAGS = {
-  aws_lambda: 'integration-api-pipeline-aws-lambda',
-  bitbucket: 'integration-api-pipeline-bitbucket',
-  github: 'integration-api-pipeline-github',
-  gitlab: 'integration-api-pipeline-gitlab',
-  slack: 'integration-api-pipeline-slack',
-} as const satisfies Partial<Record<ProvidersByType['integration'], string>>;
-
-type ApiPipelineProvider = keyof typeof API_PIPELINE_FEATURE_FLAGS;
+  vercel: 'integration-api-pipeline-vercel',
+} as const satisfies Partial<Record<ApiPipelineProvider, string>>;
 
 function getApiPipelineProvider(
   organization: Organization,
   providerKey: string
 ): ApiPipelineProvider | null {
-  if (!(providerKey in API_PIPELINE_FEATURE_FLAGS)) {
-    return null;
+  if (UNCONDITIONAL_API_PIPELINE_PROVIDERS.has(providerKey as ApiPipelineProvider)) {
+    return providerKey as ApiPipelineProvider;
   }
-  const key = providerKey as ApiPipelineProvider;
-  const flag = API_PIPELINE_FEATURE_FLAGS[key];
-  if (!organization.features.includes(flag)) {
-    return null;
+
+  if (providerKey in API_PIPELINE_FEATURE_FLAGS) {
+    const key = providerKey as keyof typeof API_PIPELINE_FEATURE_FLAGS;
+    if (organization.features.includes(API_PIPELINE_FEATURE_FLAGS[key])) {
+      return key;
+    }
   }
-  return key;
+
+  return null;
 }
 
 /**
  * Opens the integration setup flow. Accepts all parameters at call time via
  * `startFlow(params)`, so a single hook instance can launch flows for any
  * provider. Automatically selects between the API-driven pipeline modal and
- * the legacy popup-based flow depending on the organization's feature flags.
+ * the legacy popup-based flow based on the provider's rollout state.
  *
  * The hook manages its own `message` event listener for the legacy popup flow.
  * No context provider is needed.