Pipeline wizard UX: consolidate review steps into single tab

[gambtho]

Overview

UX team feedback on the configure pipeline wizard — consolidate the three review steps (Setup PR, Copilot Agent, and Deployment PR) into a single "Review & Merge" tab to reduce perceived complexity and make pipeline configuration feel more lightweight.

UX Feedback

Regarding the reviewing screens, I was thinking it might be useful to combine the three steps (Setup PR, Copilot agent, and deployment PR) into a single tab since they all serve the same purpose — review, merge, or fix. Adding extra tabs can make the process feel longer. The idea is to give the impression that configuring pipelines requires minimal effort. We could include an "up next" section to show the remaining steps.

I think we can also add a collapse icon on the right which helps the user come back to the saved progress. And cancel as a tertiary CTA on footer if the user wants to stop the pipeline creation.

And after the pipeline is configured, I see that the next step is deploying it. In that case, we should have a CTA on the configuration confirmation screen that takes the user to the deploy tab directly, instead of them having to navigate manually to it. That makes the flow more guided.

UX Mockups


Changes Required

1. Consolidate wizard steps: 5 steps → 3 steps (Connect Source > Set up Copilot Agent > Review & Merge)
2. Vertical timeline in Review & Merge: Show all three sub-phases (Setup PR, Copilot Agent, Deployment PR) with completed/active/upcoming states
3. Collapse icon: Replace close (X) with collapse (>>) to encourage preserving progress
4. Cancel CTA: Replace "Start over" with "Cancel" as tertiary button in footer
5. "View deployment" CTA: Add button on completion screen that navigates directly to the Deploy tab
6. Headlamp change: Pass setSelectedTab prop to header action components (needed for [Bug] "No available ports in range 4466-4565" error even when all ports in the range are completely free #5)

Implementation

• aksd: pass setSelectedTab to project header action components #406 — Headlamp: pass setSelectedTab to project header action components
• GithubPipeline: ConfigurePipeline: Consolidate pipeline wizard review steps #407 — Plugin: consolidate pipeline wizard review steps