feat: Add guided tours via Reactour and help center page#719
Open
juliankepka wants to merge 7 commits into
Open
feat: Add guided tours via Reactour and help center page#719juliankepka wants to merge 7 commits into
juliankepka wants to merge 7 commits into
Conversation
juliankepka
force-pushed
the
feat/reactour
branch
from
9b216b0 to
423742d
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces guided product tours (Reactour) and a new in-app Help Center entry point, plus “inline docs” drawers that render documentation content inside the app.
Changes:
- Add a
TourContext+ hooks to register/open page-specific tour steps and show a first-time Welcome modal. - Add a Help Center page that links into specific tours and support/documentation resources.
- Replace some external “how it works” links with a documentation drawer that loads and renders remote MDX/markdown.
Reviewed changes
Copilot reviewed 29 out of 30 changed files in this pull request and generated 22 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/useWelcomeTour.ts | Tracks “welcome tour seen” state via localStorage and controls Welcome modal visibility. |
| src/hooks/usePageTour.ts | Hook to register tour steps and expose a start function for pages. |
| src/context/TourContext.tsx | Reactour provider wrapper and context API for steps registration and opening tours. |
| src/components/ui/drawer.tsx | Adds a Vaul-based drawer UI primitive used for inline docs. |
| src/components/Quickfix.tsx | Swaps external link for DocDrawer to show Quick Fix documentation inline. |
| src/components/OrganizationDropDown.tsx | Adds data-tour marker for tour targeting. |
| src/components/DependencyGraph.tsx | Adds onReady callback to allow tours to wait for graph initialization. |
| src/components/common/tours/WelcomeModal.tsx | New welcome modal prompting users to start/skip tours. |
| src/components/common/tours/usePageTour.ts | Adds a second usePageTour implementation (currently inconsistent with context API). |
| src/components/common/tours/TourCard.tsx | Custom Reactour popover UI for tour steps. |
| src/components/common/tours/repo-home-tour.ts | Tour steps for repository home page. |
| src/components/common/tours/org-settings-tour.ts | Tour steps for organization settings page. |
| src/components/common/tours/org-home-tour.ts | Tour steps for organization dashboard page. |
| src/components/common/tours/group-home-tour.ts | Tour steps for group page. |
| src/components/common/tours/dependency-risk-tour.ts | Tour steps for vulnerability management page. |
| src/components/common/OrgHeader.tsx | Enables showing Help Center in header via showHelpCenter. |
| src/components/common/Markdown.tsx | Enhances markdown rendering (GFM/MDX + link rewriting). |
| src/components/common/DynamicHeader.tsx | Adds Help Center link + data-tour markers to header navigation. |
| src/components/common/DocDrawer.tsx | New drawer that fetches & renders remote MDX/markdown docs. |
| src/components/AffectedComponent.tsx | Swaps external link for DocDrawer to show matching docs inline. |
| src/app/layout.tsx | Wraps app in TourContextProvider. |
| src/app/(loading-group)/[organizationSlug]/settings/page.tsx | Adds “Guided Tour” button + data-tour markers. |
| src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx | Adds “Guided Tour” button + data-tour markers + optional query-param auto-start. |
| src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/page.tsx | Adds “Guided Tour” button + data-tour markers + optional query-param auto-start. |
| src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/dependency-risks/[vulnId]/page.tsx | Adds “Guided Tour” button, data-tour markers, and graph-ready integration for tours. |
| src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/page.tsx | Preserves startTour query param across redirect into first ref. |
| src/app/(loading-group)/[organizationSlug]/page.tsx | Adds Welcome modal, guided tour button, and tour markers to org dashboard. |
| src/app/(loading-group)/[organizationSlug]/help-center/page.tsx | New Help Center page with tour entry points + support/documentation links. |
| package.json | Adds Reactour, Vaul, MDX-related packages, and pins some deps. |
| package-lock.json | Locks dependency changes for newly added packages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
This PR introduces guided product tours (Reactour) and a new in-app Help Center entry point, plus “inline docs” drawers that render documentation content inside the app.