feat(pipeline): Add completion view support to pipeline definitions

Add a completionView property to PipelineDefinition that allows
pipelines to render a custom view after completion before firing
onComplete. When set, onComplete is deferred until the component
calls finish(). When null, existing behavior is preserved.

Adds JSDoc comments to PipelineDefinition and PipelineStepDefinition.

Author: evanpurkhiser

static/app/components/pipeline/pipelineDummyProvider.tsx

@@ -68,6 +68,7 @@ export const dummyIntegrationPipeline = {
   provider: 'dummy',
   actionTitle: t('Dummy Integration Pipeline'),
   getCompletionData: pipelineComplete<DummyCompletionData>,
+  completionView: null,
   steps: [
     {
       stepId: 'step_one',

static/app/components/pipeline/pipelineIntegrationBitbucket.tsx

@@ -86,6 +86,7 @@ export const bitbucketIntegrationPipeline = {
   provider: 'bitbucket',
   actionTitle: t('Installing Bitbucket Integration'),
   getCompletionData: pipelineComplete<IntegrationWithConfig>,
+  completionView: null,
   steps: [
     {
       stepId: 'authorize',

static/app/components/pipeline/pipelineIntegrationGitHub.tsx

@@ -261,6 +261,7 @@ export const githubIntegrationPipeline = {
   provider: 'github',
   actionTitle: t('Installing GitHub Integration'),
   getCompletionData: pipelineComplete<IntegrationWithConfig>,
+  completionView: null,
   steps: [
     {
       stepId: 'oauth_login',

static/app/components/pipeline/pipelineIntegrationGitLab.tsx

@@ -279,6 +279,7 @@ export const gitlabIntegrationPipeline = {
   provider: 'gitlab',
   actionTitle: t('Installing GitLab Integration'),
   getCompletionData: pipelineComplete<IntegrationWithConfig>,
+  completionView: null,
   steps: [
     {
       stepId: 'installation_config',

static/app/components/pipeline/pipelineIntegrationSlack.tsx

@@ -36,6 +36,7 @@ export const slackIntegrationPipeline = {
   provider: 'slack',
   actionTitle: t('Installing Slack Integration'),
   getCompletionData: pipelineComplete<IntegrationWithConfig>,
+  completionView: null,
   steps: [
     {
       stepId: 'oauth_login',

static/app/components/pipeline/types.tsx

@@ -28,6 +28,14 @@ export interface PipelineStepDefinition<StepId extends string = string> {
   stepId: StepId;
 }
 
+/**
+ * Props passed to a pipeline's completion view component.
+ */
+export interface PipelineCompletionProps<D = unknown> {
+  data: D;
+  finish: () => void;
+}
+
 /**
  * Defines a complete pipeline with its type, provider, and ordered steps.
  */
@@ -39,6 +47,12 @@ export interface PipelineDefinition<
    * Title displayed in the pipeline modal header.
    */
   actionTitle: string;
+  /**
+   * Component rendered after the pipeline completes. When set, `onComplete`
+   * is deferred until the component calls `finish()`. When null, `onComplete`
+   * fires immediately on completion.
+   */
+  completionView: React.ComponentType<PipelineCompletionProps<any>> | null;
   /**
    * Casts the raw completion response to the typed completion data shape.
    * Use the {@link pipelineComplete} helper for this.

static/app/components/pipeline/usePipeline.tsx

@@ -12,6 +12,7 @@ import type {
 import type {
   ApiPipeline,
   PipelineAdvanceResponse,
+  PipelineCompletionProps,
   PipelineStepProps,
   PipelineStepResponse,
 } from './types';
@@ -189,7 +190,11 @@ export function usePipeline<
           const data = definition.getCompletionData(rawData) as CompletionDataFor<T, P>;
 
           setState({status: 'complete', data});
-          onCompleteRef.current?.(data);
+
+          // If there's no completion view, fire onComplete immediately.
+          if (!definition.completionView) {
+            onCompleteRef.current?.(data);
+          }
           break;
         }
         case 'error':
@@ -237,7 +242,22 @@ export function usePipeline<
     return null;
   }, [state, definition]);
 
+  const finish = useCallback(() => {
+    if (state.status === 'complete') {
+      onCompleteRef.current?.(state.data);
+    }
+  }, [state]);
+
   const view = useMemo(() => {
+    // Render completion view when the pipeline is complete and one is defined
+    if (state.status === 'complete' && definition.completionView) {
+      // Widen from the specific union of component types to the general
+      // CompletionView component type
+      const CompletionView: React.ComponentType<PipelineCompletionProps<any>> =
+        definition.completionView;
+      return <CompletionView data={state.data} finish={finish} />;
+    }
+
     if (!stepDefinition) {
       return null;
     }
@@ -259,7 +279,15 @@ export function usePipeline<
         advanceError={advanceError}
       />
     );
-  }, [state, stepDefinition, definition, advanceMutate, isAdvancePending, advanceError]);
+  }, [
+    state,
+    stepDefinition,
+    definition,
+    advanceMutate,
+    isAdvancePending,
+    advanceError,
+    finish,
+  ]);
 
   const {stepIndex, totalSteps} =
     state.status === 'active'