feat(onboarding): dependency-free first-run product tour (UX-7)#502
Merged
Conversation
Walk new users through the core surfaces (pipelines, the demo-pipeline
action, the agent fleet, alerts) with a minimal self-contained coachmark
built from existing primitives — no tour library added.
- ProductTour: a focusable role="dialog" card anchored beside real
elements via getBoundingClientRect, with Next/Back/Skip, a progress
dot row, an SR step counter, and Esc-to-dismiss. Missing targets
anchor safely (no crash); auto-start is suppressed when none exist.
- Persist completion/skip in localStorage ("vf:tour-dismissed", matching
the onboarding-checklist convention) so it shows once per browser.
- startProductTour() (re)starts it; wired to a "Take a tour" action in
the onboarding checklist. Mounted once in the (dashboard) layout.
- jsdom test covers step rendering, Next/Back, Skip/Finish/Esc
persistence + unmount, restart, and missing-target safety.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
UX-7 — guided first-run tour
Adds a lightweight, dependency-free guided tour that introduces a new user to VectorFlow's core surfaces. Builds on the already-shipped demo-pipeline + empty-state work; no tour library was added — the coachmark is assembled from existing primitives (
Button,cn, Tailwind tokens) +getBoundingClientRect.What's here
src/components/onboarding/product-tour.tsx—ProductTour, a self-contained coachmark:{ title, body, targetSelector }anchored to real elements: Pipelines nav, the "Create a demo pipeline" action, Fleet nav, Alerts nav.role="dialog"card positioned beside the target viagetBoundingClientRect(flips/clamps to the viewport), plus a highlight ring around the target.sr-only"Step X of Y" counter.aria-labelledby/aria-describedby, Esc to dismiss,motion-reduceaware.localStorageundervf:tour-dismissed(matching the existingonboarding-checklistvf:-prefixed convention), so the tour shows once per browser.startProductTour()clears the flag and reopens; wired to a new "Take a tour" action inOnboardingChecklist.(dashboard)layout (alongside the command palette / shortcuts modal); the demo button carries adata-touranchor.Tests
src/components/onboarding/__tests__/product-tour.test.tsx(jsdom): step-1 render, Next advances / Back returns, Skip + Finish + Esc each persist the flag and unmount, dismissed → no auto-start butstartProductTour()reopens, a missing target renders safely, and no-op when zero targets exist.localStorageis exercised via jsdom.Verification
pnpm exec vitest run src/components/onboarding/__tests__/product-tour.test.tsx→ 8 passing.onboarding-checklist.test.tsx→ 5 passing (header change is compatible).pnpm exec tsc --noEmitclean for all changed files (only the pre-existing@clickhouse/clienterror remains).