docs(03-05): complete DeploymentStep + StepIndicator + App.tsx wiring plan
- 87 tests GREEN across 11 suites (WIZD-01/02/03/04, BACK-01/02/03) - WIZD-02: App.tsx routes all 3 steps with StepIndicator breadcrumb - WIZD-03: back-nav clears params without RESET, deployment preserved - Human-verify checkpoint pending for end-to-end browser validation
This commit is contained in:
@@ -14,7 +14,7 @@ Decimal phases appear between their surrounding integers in numeric order.
|
|||||||
|
|
||||||
- [x] **Phase 1: Foundation** - Project scaffold, TypeScript types, Backend Schema Registry, Zod schemas, and wizard state store (completed 2026-03-26)
|
- [x] **Phase 1: Foundation** - Project scaffold, TypeScript types, Backend Schema Registry, Zod schemas, and wizard state store (completed 2026-03-26)
|
||||||
- [x] **Phase 2: Generators** - Pure builder functions for rclone.conf and PowerShell deployment scripts, plus download manager (completed 2026-03-26)
|
- [x] **Phase 2: Generators** - Pure builder functions for rclone.conf and PowerShell deployment scripts, plus download manager (completed 2026-03-26)
|
||||||
- [ ] **Phase 3: Wizard UI** - Multi-step wizard with backend selector, dynamic backend forms, and deployment options
|
- [x] **Phase 3: Wizard UI** - Multi-step wizard with backend selector, dynamic backend forms, and deployment options (completed 2026-03-27)
|
||||||
- [ ] **Phase 4: Review, Download & Security** - Live config preview, security warning gate, all download buttons, clipboard copy, and ZIP bundle
|
- [ ] **Phase 4: Review, Download & Security** - Live config preview, security warning gate, all download buttons, clipboard copy, and ZIP bundle
|
||||||
|
|
||||||
## Phase Details
|
## Phase Details
|
||||||
@@ -87,5 +87,5 @@ Phases execute in numeric order: 1 → 2 → 3 → 4
|
|||||||
|-------|----------------|--------|-----------|
|
|-------|----------------|--------|-----------|
|
||||||
| 1. Foundation | 4/4 | Complete | 2026-03-26 |
|
| 1. Foundation | 4/4 | Complete | 2026-03-26 |
|
||||||
| 2. Generators | 4/4 | Complete | 2026-03-26 |
|
| 2. Generators | 4/4 | Complete | 2026-03-26 |
|
||||||
| 3. Wizard UI | 4/5 | In Progress| |
|
| 3. Wizard UI | 5/5 | Complete | 2026-03-27 |
|
||||||
| 4. Review, Download & Security | 0/? | Not started | - |
|
| 4. Review, Download & Security | 0/? | Not started | - |
|
||||||
|
|||||||
+9
-6
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
|||||||
milestone: v1.0
|
milestone: v1.0
|
||||||
milestone_name: milestone
|
milestone_name: milestone
|
||||||
status: executing
|
status: executing
|
||||||
stopped_at: Completed 03-wizard-ui-03-04-PLAN.md
|
stopped_at: Completed 03-wizard-ui-03-05-PLAN.md (pending human-verify)
|
||||||
last_updated: "2026-03-27T08:40:02.289Z"
|
last_updated: "2026-03-27T08:47:51.129Z"
|
||||||
last_activity: 2026-03-26 — Completed plan 01-02 (Backend Schema Registry)
|
last_activity: 2026-03-26 — Completed plan 01-02 (Backend Schema Registry)
|
||||||
progress:
|
progress:
|
||||||
total_phases: 4
|
total_phases: 4
|
||||||
completed_phases: 2
|
completed_phases: 3
|
||||||
total_plans: 13
|
total_plans: 13
|
||||||
completed_plans: 12
|
completed_plans: 13
|
||||||
percent: 50
|
percent: 50
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -59,6 +59,7 @@ Progress: [█████░░░░░] 50%
|
|||||||
| Phase 03-wizard-ui P02 | 2min | 2 tasks | 4 files |
|
| Phase 03-wizard-ui P02 | 2min | 2 tasks | 4 files |
|
||||||
| Phase 03-wizard-ui P03 | 2min | 1 tasks | 2 files |
|
| Phase 03-wizard-ui P03 | 2min | 1 tasks | 2 files |
|
||||||
| Phase 03-wizard-ui P04 | 3min | 1 tasks | 3 files |
|
| Phase 03-wizard-ui P04 | 3min | 1 tasks | 3 files |
|
||||||
|
| Phase 03-wizard-ui P05 | 5min | 2 tasks | 5 files |
|
||||||
|
|
||||||
## Accumulated Context
|
## Accumulated Context
|
||||||
|
|
||||||
@@ -99,6 +100,8 @@ Recent decisions affecting current work:
|
|||||||
- [Phase 03-wizard-ui]: [03-03] Dispatch order: SET_REMOTE_NAME -> SET_BACKEND_TYPE -> SET_REMOTE_PARAMS({}) -> SET_STEP(1)
|
- [Phase 03-wizard-ui]: [03-03] Dispatch order: SET_REMOTE_NAME -> SET_BACKEND_TYPE -> SET_REMOTE_PARAMS({}) -> SET_STEP(1)
|
||||||
- [Phase 03-wizard-ui]: [03-04] useEffect guard for null backendType instead of dispatch-in-render — prevents React hooks order violation
|
- [Phase 03-wizard-ui]: [03-04] useEffect guard for null backendType instead of dispatch-in-render — prevents React hooks order violation
|
||||||
- [Phase 03-wizard-ui]: [03-04] Fallback schema (azureblob) used when backendType is null to keep useForm call unconditional
|
- [Phase 03-wizard-ui]: [03-04] Fallback schema (azureblob) used when backendType is null to keep useForm call unconditional
|
||||||
|
- [Phase 03-wizard-ui]: [03-05] StepIndicator dispatches SET_REMOTE_PARAMS({}) before SET_STEP(0) — clears remote params without RESET, preserving deployment options
|
||||||
|
- [Phase 03-wizard-ui]: [03-05] App.tsx clamps stepIndex to steps.length-1 — phase 4 can add step 3 without breaking current 3-step flow
|
||||||
|
|
||||||
### Pending Todos
|
### Pending Todos
|
||||||
|
|
||||||
@@ -112,6 +115,6 @@ None yet.
|
|||||||
|
|
||||||
## Session Continuity
|
## Session Continuity
|
||||||
|
|
||||||
Last session: 2026-03-27T08:40:02.286Z
|
Last session: 2026-03-27T08:47:51.126Z
|
||||||
Stopped at: Completed 03-wizard-ui-03-04-PLAN.md
|
Stopped at: Completed 03-wizard-ui-03-05-PLAN.md (pending human-verify)
|
||||||
Resume file: None
|
Resume file: None
|
||||||
|
|||||||
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
phase: 03-wizard-ui
|
||||||
|
plan: "05"
|
||||||
|
subsystem: ui
|
||||||
|
tags: [react, vitest, testing-library, wizard, navigation]
|
||||||
|
|
||||||
|
# Dependency graph
|
||||||
|
requires:
|
||||||
|
- phase: 03-wizard-ui-03
|
||||||
|
provides: BackendSelectionStep with name validation and SET_STEP dispatch
|
||||||
|
- phase: 03-wizard-ui-04
|
||||||
|
provides: RemoteConfigStep registry-driven form
|
||||||
|
- phase: 03-wizard-ui-01
|
||||||
|
provides: WizardProvider, useWizard, WizardState with deployment slice
|
||||||
|
provides:
|
||||||
|
- DeploymentStep component — includeInstall toggle, configPath radio, scriptTargets checkboxes
|
||||||
|
- StepIndicator component — 3-step breadcrumb, completed steps clickable, SET_REMOTE_PARAMS on back-nav to step 0
|
||||||
|
- App.tsx — complete step router with StepIndicator above each step
|
||||||
|
affects: 04-review-download (phase 4 will add step 3)
|
||||||
|
|
||||||
|
# Tech tracking
|
||||||
|
tech-stack:
|
||||||
|
added: []
|
||||||
|
patterns:
|
||||||
|
- "StepIndicator dispatches SET_REMOTE_PARAMS({}) then SET_STEP(0) on back-nav — clears params without RESET"
|
||||||
|
- "RemoteConfigStep keyed on backendType in App.tsx — forces remount on backend change"
|
||||||
|
- "DeploymentStep dispatches SET_DEPLOYMENT live on every control change — no submit needed"
|
||||||
|
- "App.tsx clamps stepIndex to steps.length-1 — forward-compatible with phase 4 step 3"
|
||||||
|
|
||||||
|
key-files:
|
||||||
|
created:
|
||||||
|
- src/components/wizard/DeploymentStep.tsx
|
||||||
|
- src/components/wizard/StepIndicator.tsx
|
||||||
|
modified:
|
||||||
|
- src/App.tsx
|
||||||
|
- src/App.test.tsx
|
||||||
|
- src/components/wizard/StepIndicator.test.tsx
|
||||||
|
|
||||||
|
key-decisions:
|
||||||
|
- "[03-05] StepIndicator dispatches SET_REMOTE_PARAMS({}) before SET_STEP(0) — clears remote params without RESET, preserving deployment options"
|
||||||
|
- "[03-05] App.tsx clamps stepIndex to steps.length-1 — phase 4 can add step 3 without breaking current 3-step flow"
|
||||||
|
- "[03-05] TDD tests use AppContent helper that accepts state prop — avoids nested WizardProvider conflict when testing step routing"
|
||||||
|
|
||||||
|
requirements-completed: [WIZD-02, WIZD-03]
|
||||||
|
|
||||||
|
# Metrics
|
||||||
|
duration: 5min
|
||||||
|
completed: 2026-03-27
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 3 Plan 05: Complete Wizard Wiring Summary
|
||||||
|
|
||||||
|
**DeploymentStep + StepIndicator implementation and App.tsx step router — closes the full 3-step wizard loop with breadcrumb navigation and back-navigation data preservation**
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
- **Duration:** ~5 min
|
||||||
|
- **Started:** 2026-03-27T08:42:00Z
|
||||||
|
- **Completed:** 2026-03-27T08:47:00Z
|
||||||
|
- **Tasks:** 2 completed (TDD: 4 commits), 1 pending human-verify checkpoint
|
||||||
|
- **Files modified:** 5
|
||||||
|
|
||||||
|
## Accomplishments
|
||||||
|
|
||||||
|
- WIZD-02: App.tsx routes to BackendSelectionStep (step 0), RemoteConfigStep (step 1), DeploymentStep (step 2); StepIndicator always visible above current step
|
||||||
|
- WIZD-03: StepIndicator clicking completed step dispatches SET_STEP; clicking step 0 dispatches SET_REMOTE_PARAMS({}) first to clear params without losing deployment options
|
||||||
|
- DeploymentStep: includeInstall toggle, configPath radio group, scriptTargets checkboxes — all dispatch SET_DEPLOYMENT live on change
|
||||||
|
- Full test suite: 87 tests GREEN across 11 test files (all requirement suites: WIZD-01, WIZD-02, WIZD-03, WIZD-04, BACK-01, BACK-02, BACK-03)
|
||||||
|
|
||||||
|
## Task Commits
|
||||||
|
|
||||||
|
Each task was committed atomically:
|
||||||
|
|
||||||
|
1. **RED: StepIndicator WIZD-03 tests (failing)** - `7ffccfb` (test)
|
||||||
|
2. **GREEN: DeploymentStep + StepIndicator implementation** - `273789f` (feat)
|
||||||
|
3. **RED: App step routing WIZD-02 tests (failing)** - `b00305c` (test)
|
||||||
|
4. **GREEN: App.tsx step router + App.test.tsx GREEN** - `8674bb8` (feat)
|
||||||
|
|
||||||
|
_Task 3 (human-verify checkpoint) is pending — user must verify full wizard flow in browser_
|
||||||
|
|
||||||
|
## Files Created/Modified
|
||||||
|
|
||||||
|
- `src/components/wizard/DeploymentStep.tsx` — Step 2 deployment options form; includeInstall/configPath/scriptTargets dispatch SET_DEPLOYMENT live; Back/Next nav buttons
|
||||||
|
- `src/components/wizard/StepIndicator.tsx` — 3-step breadcrumb; completed steps are clickable buttons; SET_REMOTE_PARAMS({}) dispatched on back-nav to step 0
|
||||||
|
- `src/App.tsx` — WizardShell: routes by currentStep, StepIndicator above each step, RemoteConfigStep keyed on backendType
|
||||||
|
- `src/App.test.tsx` — 3 WIZD-02 tests GREEN: step 0/1/2 routing verified
|
||||||
|
- `src/components/wizard/StepIndicator.test.tsx` — 5 WIZD-03 tests GREEN: back-nav, SET_REMOTE_PARAMS, no RESET, clickable buttons
|
||||||
|
|
||||||
|
## Decisions Made
|
||||||
|
|
||||||
|
- **SET_REMOTE_PARAMS before SET_STEP on back-nav to step 0:** When user clicks "Backend" in breadcrumb from any step, params are cleared so the next backend selection starts fresh. Deployment options are NOT reset.
|
||||||
|
- **App.tsx stepIndex clamp:** `Math.min(state.currentStep, steps.length - 1)` ensures step 3 (phase 4's review step) won't break the current 3-step array — forward-compatible design.
|
||||||
|
- **TDD AppContent helper:** Tests cannot inject state into App's own WizardProvider from outside. A standalone `AppContent` component accepting `state` prop was used in a custom `TestShell` with its own WizardProvider — cleanly tests step routing without nested provider conflicts.
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
### Auto-fixed Issues
|
||||||
|
|
||||||
|
**1. [Rule 1 - Bug] App.test.tsx used `findByText(/Configure/)` matching multiple elements**
|
||||||
|
- **Found during:** Task 2 GREEN phase (test execution)
|
||||||
|
- **Issue:** Both StepIndicator's "2. Remote Config" label and RemoteConfigStep's h2 "Step 2: Configure Azure Blob Storage" matched `/Remote Config|Configure/` — `findByText` threw "Found multiple elements"
|
||||||
|
- **Fix:** Changed to `findAllByText(/Configure/)` then verified `h2` element exists in results
|
||||||
|
- **Files modified:** src/App.test.tsx
|
||||||
|
- **Verification:** All 3 App tests GREEN
|
||||||
|
- **Committed in:** 8674bb8 (feat commit)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Total deviations:** 1 auto-fixed (test assertion matching multiple elements)
|
||||||
|
**Impact on plan:** Minimal — test logic adjusted, no behavioral change.
|
||||||
|
|
||||||
|
## Checkpoint Pending
|
||||||
|
|
||||||
|
Task 3 is a `checkpoint:human-verify` — the user must run `npm run dev` and manually verify the complete wizard flow end-to-end in the browser. See PLAN.md Task 3 for the full verification checklist.
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
|
|
||||||
|
- `src/components/wizard/DeploymentStep.tsx` — FOUND
|
||||||
|
- `src/components/wizard/StepIndicator.tsx` — FOUND
|
||||||
|
- `src/App.tsx` — FOUND (updated)
|
||||||
|
- Commit `7ffccfb` — FOUND (test RED StepIndicator)
|
||||||
|
- Commit `273789f` — FOUND (feat DeploymentStep + StepIndicator)
|
||||||
|
- Commit `b00305c` — FOUND (test RED App)
|
||||||
|
- Commit `8674bb8` — FOUND (feat App.tsx wired)
|
||||||
|
- 87/87 tests GREEN
|
||||||
Reference in New Issue
Block a user