docs(07-02): complete UX-01 tooltip plan — awaiting human verify checkpoint

- SUMMARY.md created for plan 07-02 - STATE.md updated with decisions and session info - ROADMAP.md updated with phase 7 plan progress
2026-03-31 13:35:24 +02:00
parent 7c10600d02
commit 7548c7b07b
3 changed files with 126 additions and 8 deletions
@@ -0,0 +1,114 @@
+---
+phase: 07-validation-ux-polish
+plan: "02"
+subsystem: ui
+tags: [react, typescript, vitest, tooltips, ux, rclone, wizard]
+
+# Dependency graph
+requires:
+  - phase: 07-01
+    provides: tooltipText field on FieldDef interface + VALID-01 regex validation in buildZodSchema
+
+provides:
+  - tooltipText populated for azureblob.sas_url, azureblob.key, onedrive.token in BACKEND_REGISTRY
+  - ⓘ toggle button + inline tooltip panel in FieldRenderer (text/select branches)
+  - ⓘ toggle button + inline tooltip panel in PasswordField (tooltipText prop)
+  - AzureAuthToggle reads tooltipText from BACKEND_REGISTRY and passes to PasswordField
+  - SftpAuthToggle showAuthTip state with ⓘ button above segmented auth-method control
+
+affects: [future wizard UI phases, any phase using PasswordField or FieldRenderer]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "tooltipText sourced from BACKEND_REGISTRY, passed as prop to PasswordField — single source of truth"
+    - "showTooltip useState per FieldRenderer/PasswordField instance — no global tooltip state"
+    - "showAuthTip useState in SftpAuthToggle for section-level tooltip above segmented control"
+    - "ⓘ button outside label element (sibling in flex container) to avoid label text contamination"
+
+key-files:
+  created: []
+  modified:
+    - src/schemas/registry.ts
+    - src/components/ui/FieldRenderer.tsx
+    - src/components/ui/PasswordField.tsx
+    - src/components/wizard/AzureAuthToggle.tsx
+    - src/components/wizard/SftpAuthToggle.tsx
+
+key-decisions:
+  - "ⓘ button placed as sibling (outside) label element in a flex container — prevents aria-label text from contaminating label, keeps accessible aria-label on button"
+  - "AzureAuthToggle reads tooltipText from BACKEND_REGISTRY at runtime (not hardcoded) — ensures tooltip stays in sync with registry"
+  - "SFTP auth-method tooltip is section-level (above segmented control), not field-level — represents explanation of the whole auth strategy choice"
+
+patterns-established:
+  - "Per-field tooltip: tooltipText on FieldDef → FieldRenderer passes to PasswordField or renders inline for text/select"
+  - "Section-level tooltip: showAuthTip state in SftpAuthToggle above segmented control"
+
+requirements-completed: [UX-01]
+
+# Metrics
+duration: 2min
+completed: 2026-03-31
+---
+
+# Phase 7 Plan 02: UX Tooltips Summary
+
+**Contextual ⓘ tooltips wired to BACKEND_REGISTRY for SAS URL, access key, SFTP auth method, and OneDrive OAuth token fields**
+
+## Performance
+
+- **Duration:** 2 min
+- **Started:** 2026-03-31T11:32:35Z
+- **Completed:** 2026-03-31T11:33:46Z
+- **Tasks:** 2 (Task 3 is checkpoint — awaiting human verify)
+- **Files modified:** 5
+
+## Accomplishments
+- BACKEND_REGISTRY populated with tooltipText for azureblob.sas_url, azureblob.key, and onedrive.token
+- PasswordField and FieldRenderer render ⓘ buttons with toggle panels when tooltipText is present
+- AzureAuthToggle reads tooltipText from BACKEND_REGISTRY and passes to PasswordField calls
+- SftpAuthToggle adds showAuthTip state with ⓘ button above the Password/Private Key segmented control
+- All 159 tests pass (33 in RemoteConfigStep including all UX-01 tooltip toggle tests)
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Populate tooltipText in registry + add ⓘ to FieldRenderer and PasswordField** - `9aae9e3` (feat)
+2. **Task 2: Wire AzureAuthToggle + add SFTP auth-method tooltip** - `7c10600` (feat)
+
+_Note: Task 1 was pre-implemented from Plan 07-01 preparation and committed as part of that work session. Task 2 (SftpAuthToggle showAuthTip state) was the remaining piece implemented in this plan._
+
+## Files Created/Modified
+- `src/schemas/registry.ts` - tooltipText populated for azureblob.sas_url, azureblob.key, onedrive.token
+- `src/components/ui/FieldRenderer.tsx` - ⓘ button + conditional tooltip panel for text/select; passes tooltipText to PasswordField
+- `src/components/ui/PasswordField.tsx` - tooltipText prop + showTooltip state + ⓘ button + tooltip panel
+- `src/components/wizard/AzureAuthToggle.tsx` - reads sasUrlTooltip/keyTooltip from BACKEND_REGISTRY, passes to PasswordField
+- `src/components/wizard/SftpAuthToggle.tsx` - showAuthTip state + ⓘ button + explanation panel above segmented control
+
+## Decisions Made
+- ⓘ button placed as sibling to label (not inside) in a flex container — prevents label text contamination; aria-label on the button itself
+- AzureAuthToggle reads tooltipText from BACKEND_REGISTRY at runtime instead of hardcoding — keeps tooltip content in sync with registry as single source of truth
+- SFTP auth-method tooltip is section-level (one ⓘ above the whole segmented control), not field-level — correctly scoped to the auth method choice, not a specific credential field
+
+## Deviations from Plan
+
+None - plan executed exactly as written. Task 1 (registry + FieldRenderer + PasswordField) was already complete from Plan 07-01 work. Task 2 (AzureAuthToggle was done; SftpAuthToggle showAuthTip implemented cleanly).
+
+## Issues Encountered
+
+None.
+
+## User Setup Required
+
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Phase 7 automated tasks complete (VALID-01 + UX-01 implemented and tested)
+- Task 3 (human verify checkpoint) awaits: dev server verification of tooltip toggle and inline validation in browser
+- After human approval, Phase 7 is complete and UX-01 requirement satisfied
+
+---
+*Phase: 07-validation-ux-polish*
+*Completed: 2026-03-31*