Files
Ready2Blob/.planning/phases/07-validation-ux-polish/07-02-SUMMARY.md
T
kawa 7548c7b07b 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

5.4 KiB

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed
phase plan subsystem tags requires provides affects tech-stack key-files key-decisions patterns-established requirements-completed duration completed
07-validation-ux-polish 02 ui
react
typescript
vitest
tooltips
ux
rclone
wizard
phase provides
07-01 tooltipText field on FieldDef interface + VALID-01 regex validation in buildZodSchema
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
future wizard UI phases
any phase using PasswordField or FieldRenderer
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
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
ⓘ 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
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
UX-01
2min 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