kawa
7548c7b07b
- SUMMARY.md created for plan 07-02 - STATE.md updated with decisions and session info - ROADMAP.md updated with phase 7 plan progress
115 lines
5.4 KiB
Markdown
115 lines
5.4 KiB
Markdown
---
|
|
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*
|