feat(apollo-vertex): onboarding tour — provider and welcome modal by petervachon · Pull Request #953 · UiPath/apollo-ui

petervachon · 2026-07-22T18:54:03Z

What this does

Adds the runtime layer of the Joyride onboarding tour component: the context provider that sequences tour steps, and the welcome modal that greets users at the start of a tour.

Builds on the popover card and type definitions that landed in #674.

What's included

OnboardingTourProvider — wraps your app (or a section of it) and exposes startTour() and setCondition() via context. Handles step sequencing, back/next navigation, conditional step gating via waitFor, and marks tours as completed in localStorage so they don't repeat.
useOnboardingTour() — hook for triggering a tour from any button or lifecycle event.
OnboardingTourJoyrideWelcomeModal — a centered modal (Radix Dialog) that renders as the first step of a tour. Supports a hero image, title, body, and a CTA button. Also exported as a standalone OnboardingTourJoyrideWelcomeModalCard for static previews.
Dark mode support — the Joyride spotlight overlay tracks the active theme via a MutationObserver.

What comes next

PR #676 adds the docs page with a live interactive demo and installation guide.

Changes from original PR

Rebased onto current main (97 upstream commits absorbed)
Replaced hardcoded rgba gradient glow in the popover card with <AiGlow /> so it uses the --ai-glow-start / --ai-glow-end design tokens
Fixed stale theme.generated.css — regenerated to include the missing --ai-glow-start and --ai-glow-end token definitions

Test plan

pnpm --filter apollo-vertex build passes
pnpm --filter apollo-vertex lint passes
Start tour demo on the docs page — welcome modal appears on first click, does not reappear after completion
Reset tour state and step through all 5 steps — back/next navigation works, spotlight tracks elements
Toggle dark mode mid-tour — overlay color updates

🤖 Generated with Claude Code

…me modal Adds the behavioral layer: OnboardingTourProvider orchestrates tour state, step sequencing, conditional gating via waitFor, and Joyride lifecycle events. OnboardingTourJoyrideWelcomeModal handles modal-type steps, rendered outside Joyride while the library is paused. Dark mode overlay color is reactive — a MutationObserver on the document root class updates the overlay immediately when the theme changes, including mid-tour. Co-Authored-By: Colin Reilly <colin.reilly@gmail.com>

github-actions · 2026-07-22T18:54:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 22, 2026, 11:59:58 AM
apollo-docs	🟢 Ready	Preview, Logs	Jul 22, 2026, 11:59:58 AM
apollo-landing	🟢 Ready	Preview, Logs	Jul 22, 2026, 11:59:58 AM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 22, 2026, 11:59:58 AM

github-actions · 2026-07-22T18:54:58Z

Dependency License Review

✅ 1950 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1720
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

Copilot

Pull request overview

Adds the runtime orchestration layer for the onboarding-tour-joyride registry feature in Apollo Vertex, introducing the provider that sequences Joyride steps (including conditional gating) and a dedicated welcome modal for modal-type steps.

Changes:

Introduces OnboardingTourProvider and useOnboardingTour() to start tours, sequence steps, and handle waitFor-gated advancement with persistence.
Adds OnboardingTourJoyrideWelcomeModal plus a standalone ...WelcomeModalCard for static previews.
Replaces the popover’s hardcoded gradient glow with the shared AiGlow primitive, and exports/registry-wires the new modules.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
apps/apollo-vertex/registry/onboarding-tour-joyride/onboarding-tour-joyride-welcome-modal.tsx	Adds the welcome modal (Radix Dialog) and a standalone card variant.
apps/apollo-vertex/registry/onboarding-tour-joyride/onboarding-tour-joyride-provider.tsx	Adds the tour context/provider, Joyride integration, step sequencing, gating, and theme-aware overlay.
apps/apollo-vertex/registry/onboarding-tour-joyride/onboarding-tour-joyride-popover.tsx	Switches the popover glow to the shared `AiGlow` token-based primitive.
apps/apollo-vertex/registry/onboarding-tour-joyride/index.ts	Exports the provider/hook and welcome modal APIs from the registry entrypoint.
apps/apollo-vertex/registry.json	Registers the new provider and welcome modal files for the registry distribution targets.

+  function goBack() {
+    setStepIndex((prev) => Math.max(0, prev - 1));
+  }


+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}


+      {/* Close button */}
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onClose}
+        className="absolute top-4 right-4 z-10"
+        aria-label="Close"
+      >
+        <X />
+      </Button>


+        <Button onClick={onNext} size="lg" className="w-full" autoFocus>
+          {nextLabel}
+        </Button>


+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute top-4 right-4 z-10"
+                aria-label="Close"
+              >
+                <X />
+              </Button>


+              <Button onClick={onNext} size="lg" className="w-full" autoFocus>
+                {nextLabel}
+              </Button>


github-actions · 2026-07-22T18:59:30Z

📊 Coverage + size by package

Per-package bundle size on this PR (no JS/TS source changes detected under packages/* or web-packages/*).

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
`@uipath/apollo-core`	9.0%	—	43.84 MB	57.45 MB	±0
`@uipath/apollo-react`	37.3%	—	7.40 MB	28.28 MB	±0
`@uipath/apollo-wind`	41.0%	—	397.6 KB	2.58 MB	+6 B
`@uipath/ap-chat`	85.8%	—	43.43 MB	55.92 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

0xr3ngar

why do we opt to create our own onboarding tour provider and implementation when we can use an existing lib for this like - https://onboardjs.com/ 🤔

this onboardjs allows us to provide our own UI/styles while solves the underlying functionality of this joyride experience??

I don't see the point in building/maintaining this when libs for this exist - @ruudandriessen maybe you have more context than me, can you chip in?

petervachon requested a review from a team as a code owner July 22, 2026 18:54

petervachon requested review from 0xr3ngar, Copilot and ruudandriessen July 22, 2026 18:54

github-actions Bot added the app:apollo-vertex label Jul 22, 2026

petervachon mentioned this pull request Jul 22, 2026

docs(apollo-vertex): onboarding tour — docs page and live demo #954

Open

7 tasks

github-actions Bot added the size:XL 500-999 changed lines. label Jul 22, 2026

Copilot started reviewing on behalf of petervachon July 22, 2026 18:54 View session

Copilot AI reviewed Jul 22, 2026

View reviewed changes

ruudandriessen approved these changes Jul 23, 2026

View reviewed changes

0xr3ngar requested changes Jul 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(apollo-vertex): onboarding tour — provider and welcome modal#953

feat(apollo-vertex): onboarding tour — provider and welcome modal#953
petervachon wants to merge 1 commit into
mainfrom
feat/vertex-onboarding-tour-joyride-provider

petervachon commented Jul 22, 2026

Uh oh!

github-actions Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Jul 22, 2026

Uh oh!

0xr3ngar left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

petervachon commented Jul 22, 2026

What this does

What's included

What comes next

Changes from original PR

Test plan

Uh oh!

github-actions Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 22, 2026

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

github-actions Bot commented Jul 22, 2026

📊 Coverage + size by package

Uh oh!

0xr3ngar left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented Jul 22, 2026 •

edited

Loading