feat(pagerduty): Add API-driven pipeline backend for PagerDuty integration setup

Implement get_pipeline_api_steps() on PagerDutyIntegrationProvider with
a single installation redirect step. The step returns the PagerDuty app
install URL and accepts the JSON config param from the callback. Adds
JSON validation on the serializer to catch malformed config before it
reaches build_integration().

Refs [VDY-84](https://linear.app/getsentry/issue/VDY-84/pagerduty-api-driven-integration-setup)

Author: evanpurkhiser

src/sentry/integrations/pagerduty/integration.py

@@ -10,8 +10,11 @@
 from django.http.request import HttpRequest
 from django.http.response import HttpResponseBase
 from django.utils.translation import gettext_lazy as _
+from rest_framework import serializers
+from rest_framework.fields import CharField
 
 from sentry import options
+from sentry.api.serializers.rest_framework.base import CamelSnakeSerializer
 from sentry.integrations.base import (
     FeatureDescription,
     IntegrationData,
@@ -27,7 +30,8 @@
 from sentry.integrations.pipeline import IntegrationPipeline
 from sentry.integrations.types import IntegrationProviderSlug
 from sentry.organizations.services.organization.model import RpcOrganization
-from sentry.pipeline.views.base import PipelineView
+from sentry.pipeline.types import PipelineStepResult
+from sentry.pipeline.views.base import ApiPipelineSteps, PipelineView
 from sentry.shared_integrations.exceptions import IntegrationError
 from sentry.utils.http import absolute_uri
 
@@ -186,6 +190,52 @@ def services(self) -> list[PagerDutyServiceDict]:
         return []
 
 
+class PagerDutyInstallationData(TypedDict):
+    config: str
+
+
+class PagerDutyInstallationApiSerializer(CamelSnakeSerializer[PagerDutyInstallationData]):
+    config = CharField(required=True)
+
+    def validate_config(self, value: str) -> str:
+        try:
+            orjson.loads(value)
+        except orjson.JSONDecodeError:
+            raise serializers.ValidationError("Invalid JSON configuration data.")
+        return value
+
+
+class PagerDutyInstallationApiStep:
+    """API-mode step for PagerDuty integration setup.
+
+    PagerDuty uses an app install redirect flow: the user is sent to PagerDuty's
+    install page, and the callback returns a JSON config param containing account
+    info and integration keys.
+    """
+
+    step_name = "installation_redirect"
+
+    def _get_app_url(self) -> str:
+        app_id = options.get("pagerduty.app-id")
+        setup_url = absolute_uri("/extensions/pagerduty/setup/")
+        return f"https://app.pagerduty.com/install/integration?app_id={app_id}&redirect_url={setup_url}&version=2"
+
+    def get_step_data(self, pipeline: IntegrationPipeline, request: HttpRequest) -> dict[str, str]:
+        return {"installUrl": self._get_app_url()}
+
+    def get_serializer_cls(self) -> type:
+        return PagerDutyInstallationApiSerializer
+
+    def handle_post(
+        self,
+        validated_data: dict[str, str],
+        pipeline: IntegrationPipeline,
+        request: HttpRequest,
+    ) -> PipelineStepResult:
+        pipeline.bind_state("config", validated_data["config"])
+        return PipelineStepResult.advance()
+
+
 class PagerDutyIntegrationProvider(IntegrationProvider):
     key = IntegrationProviderSlug.PAGERDUTY.value
     name = "PagerDuty"
@@ -198,6 +248,9 @@ class PagerDutyIntegrationProvider(IntegrationProvider):
     def get_pipeline_views(self) -> Sequence[PipelineView[IntegrationPipeline]]:
         return [PagerDutyInstallationRedirect()]
 
+    def get_pipeline_api_steps(self) -> ApiPipelineSteps[IntegrationPipeline]:
+        return [PagerDutyInstallationApiStep()]
+
     def post_install(
         self,
         integration: Integration,

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

@@ -0,0 +1,110 @@
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {pagerDutyIntegrationPipeline} from './pipelineIntegrationPagerDuty';
+import type {PipelineStepProps} from './types';
+
+const PagerDutyInstallStep = pagerDutyIntegrationPipeline.steps[0].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: 1,
+    ...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('PagerDutyInstallStep', () => {
+  it('renders the install step for PagerDuty', () => {
+    render(
+      <PagerDutyInstallStep
+        {...makeStepProps({
+          stepData: {installUrl: 'https://app.pagerduty.com/install/integration'},
+        })}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'Install PagerDuty App'})
+    ).toBeInTheDocument();
+  });
+
+  it('calls advance with config on callback', async () => {
+    const advance = jest.fn();
+    render(
+      <PagerDutyInstallStep
+        {...makeStepProps({
+          stepData: {installUrl: 'https://app.pagerduty.com/install/integration'},
+          advance,
+        })}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Install PagerDuty App'}));
+
+    dispatchPipelineMessage({
+      data: {
+        _pipeline_source: 'sentry-pipeline',
+        config: '{"account":{"name":"Test","subdomain":"test"}}',
+      },
+    });
+
+    expect(advance).toHaveBeenCalledWith({
+      config: '{"account":{"name":"Test","subdomain":"test"}}',
+    });
+  });
+
+  it('shows loading state when isAdvancing is true', () => {
+    render(
+      <PagerDutyInstallStep
+        {...makeStepProps({
+          stepData: {installUrl: 'https://app.pagerduty.com/install/integration'},
+          isAdvancing: true,
+        })}
+      />
+    );
+
+    expect(screen.getByRole('button', {name: 'Installing...'})).toBeDisabled();
+  });
+
+  it('disables install button when installUrl is not provided', () => {
+    render(<PagerDutyInstallStep {...makeStepProps({stepData: {}})} />);
+
+    expect(screen.getByRole('button', {name: 'Install PagerDuty App'})).toBeDisabled();
+  });
+});

static/app/components/pipeline/pipelineIntegrationPagerDuty.tsx

@@ -0,0 +1,88 @@
+import {useCallback} from 'react';
+
+import {Button} from '@sentry/scraps/button';
+import {Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {t} from 'sentry/locale';
+import type {IntegrationWithConfig} from 'sentry/types/integrations';
+
+import {useRedirectPopupStep} from './shared/useRedirectPopupStep';
+import type {PipelineDefinition, PipelineStepProps} from './types';
+import {pipelineComplete} from './types';
+
+function PagerDutyInstallStep({
+  stepData,
+  advance,
+  isAdvancing,
+}: PipelineStepProps<{installUrl?: string}, {config: string}>) {
+  const handleCallback = useCallback(
+    (data: Record<string, string>) => {
+      advance({config: data.config ?? ''});
+    },
+    [advance]
+  );
+
+  const {openPopup, popupStatus} = useRedirectPopupStep({
+    redirectUrl: stepData.installUrl,
+    onCallback: handleCallback,
+    popup: {height: 900},
+  });
+
+  return (
+    <Stack gap="lg" align="start">
+      <Stack gap="sm">
+        <Text>
+          {t(
+            'Install the Sentry app on your PagerDuty account to complete the integration setup.'
+          )}
+        </Text>
+        {popupStatus === 'popup-open' && (
+          <Text variant="muted" size="sm">
+            {t('A popup should have opened to install the PagerDuty app.')}
+          </Text>
+        )}
+        {popupStatus === 'failed-to-open' && (
+          <Text variant="danger" size="sm">
+            {t(
+              'The installation popup was blocked by your browser. Please ensure popups are allowed and try again.'
+            )}
+          </Text>
+        )}
+      </Stack>
+      {isAdvancing ? (
+        <Button size="sm" disabled>
+          {t('Installing...')}
+        </Button>
+      ) : popupStatus === 'popup-open' ? (
+        <Button size="sm" onClick={openPopup}>
+          {t('Reopen installation window')}
+        </Button>
+      ) : (
+        <Button
+          size="sm"
+          priority="primary"
+          onClick={openPopup}
+          disabled={!stepData.installUrl}
+        >
+          {t('Install PagerDuty App')}
+        </Button>
+      )}
+    </Stack>
+  );
+}
+
+export const pagerDutyIntegrationPipeline = {
+  type: 'integration',
+  provider: 'pagerduty',
+  actionTitle: t('Installing PagerDuty Integration'),
+  getCompletionData: pipelineComplete<IntegrationWithConfig>,
+  completionView: null,
+  steps: [
+    {
+      stepId: 'installation_redirect',
+      shortDescription: t('Installing PagerDuty app'),
+      component: PagerDutyInstallStep,
+    },
+  ],
+} as const satisfies PipelineDefinition;