91 lines
4.3 KiB
Markdown
91 lines
4.3 KiB
Markdown
# Phase 3: Wizard UI - Context
|
||
|
||
**Gathered:** 2026-03-26
|
||
**Status:** Ready for planning
|
||
|
||
<domain>
|
||
## Phase Boundary
|
||
|
||
Multi-step wizard UI from backend selection through deployment options. Delivers the full navigation shell (Backend → Remote Config → Deployment) with all form fields, state wiring to the existing store, and step-to-step navigation. Review/download is Phase 4.
|
||
|
||
</domain>
|
||
|
||
<decisions>
|
||
## Implementation Decisions
|
||
|
||
### Backend Selection Layout
|
||
- Clickable card grid — 3 cards for Azure Blob, Amazon S3, S3-Compatible
|
||
- Clicking a card auto-advances to the config step (no explicit Next button on step 1)
|
||
- Remote name field (WIZD-04) appears at the TOP of step 1, before the backend cards
|
||
- Name field validated: alphanumeric, dashes, underscores only — inline error shown after first Next attempt
|
||
|
||
### Azure Credential Toggle
|
||
- Segmented control / radio toggle to switch between "SAS URL" and "Access Key" auth methods
|
||
- Default auth method: SAS URL (pre-selected on first load)
|
||
- Switching auth method PRESERVES both fields in state (inactive field hidden but value kept) — generator must strip the inactive field at config generation time
|
||
- All password-type fields (access key, SAS URL, S3 secret) have a show/hide eye toggle
|
||
|
||
### Step Progress Indicator
|
||
- Labeled breadcrumb: **1. Backend › 2. Remote Config › 3. Deployment**
|
||
- Completed steps show checkmark + muted text (e.g., "✓ Backend") and are clickable to jump back
|
||
- Current step shown as bold/active
|
||
- Clicking a completed step navigates directly to it (not just Back button)
|
||
|
||
### Forward Navigation Validation
|
||
- Required fields: Next button blocked if required fields are empty/invalid
|
||
- Error display: errors shown ONLY after first Next click, then update live as user fixes them (no errors while initially filling)
|
||
- Inline error messages below each invalid field
|
||
- Backend change (via breadcrumb click-back): clears `remote.params` since fields differ per backend; deployment options preserved
|
||
- Remote name validation shows inline error below the field after first Next attempt
|
||
|
||
### Claude's Discretion
|
||
- Exact Tailwind styling, card visual design, color palette
|
||
- Loading/transition animations between steps
|
||
- S3 and S3-Compatible config form layout (they share most fields)
|
||
- Deployment options step layout (fields are already defined in store: includeInstall, configPath, scriptTargets)
|
||
|
||
</decisions>
|
||
|
||
<code_context>
|
||
## Existing Code Insights
|
||
|
||
### Reusable Assets
|
||
- `useWizard()` hook (src/store/context.tsx): provides `state` and `dispatch` — all wizard components use this
|
||
- `wizardReducer` actions: `SET_STEP`, `SET_BACKEND_TYPE`, `SET_REMOTE_NAME`, `SET_REMOTE_PARAMS`, `SET_DEPLOYMENT`, `RESET` — all needed actions already exist
|
||
- `BACKEND_REGISTRY` (src/schemas/registry.ts): drives config form rendering — field definitions (key, label, inputType, required, options) per backend type
|
||
- `INITIAL_STATE.deployment.scriptTargets` defaults to `['intune', 'rmm']` — users deselect rather than discover
|
||
|
||
### Established Patterns
|
||
- Tailwind v4 via `@tailwindcss/vite` plugin — no config file, utility-first
|
||
- `WizardProvider` wraps `App` — wizard state always available in all components
|
||
- `remote.params: Record<string, string>` — flat key/value map, keys must match rclone config keys from registry
|
||
- Azure has two mutually exclusive auth fields: `key` and `sas_url` — both stored in `remote.params`, only active one used by generator
|
||
|
||
### Integration Points
|
||
- `src/App.tsx`: currently a placeholder shell — wizard step routing goes here
|
||
- `src/store/reducer.ts`: `SET_BACKEND_TYPE` already resets nothing — Phase 3 must handle params reset via `SET_REMOTE_PARAMS` when backend changes
|
||
- `src/schemas/index.ts`: `BACKEND_SCHEMAS` for Zod validation — forms use these schemas for react-hook-form validation
|
||
|
||
</code_context>
|
||
|
||
<specifics>
|
||
## Specific Ideas
|
||
|
||
- Backend cards should follow WIZD-01 ordering: Azure Blob and S3 appear first
|
||
- The toggle between SAS URL and Access Key is a UI-level concern — registry has both fields; generator (Phase 2 complete) already handles which field is present
|
||
- Step 3 (Deployment Options) maps directly to `state.deployment` — `includeInstall` toggle, `configPath` radio, `scriptTargets` checkboxes
|
||
|
||
</specifics>
|
||
|
||
<deferred>
|
||
## Deferred Ideas
|
||
|
||
None — discussion stayed within phase scope.
|
||
|
||
</deferred>
|
||
|
||
---
|
||
|
||
*Phase: 03-wizard-ui*
|
||
*Context gathered: 2026-03-26*
|