Azure / Azure/aks-desktop

Pipeline wizard UX: consolidate review steps into single tab

Open
#408 1 comment 0 reactions 1 assignee Claimed by @gambtho View on GitHub
triage
Dominant language
TypeScript
Stars
102
Forks
25
Avg merge
1d 4h
Merged PRs (30d)
22

Description

## 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

Image
Image
Image
![Image](https://github.com/user-attachments/assets/e5006490-f2bc-4b53-a00c-4b67b8d05137)
Image

## 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 #5)

## Implementation

- #406 — Headlamp: pass `setSelectedTab` to project header action components
- #407 — Plugin: consolidate pipeline wizard review steps

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.