Skip to content

feat: Guided Tours Foundation#2348

Open
camielvs wants to merge 2 commits into
05-20-feat_learning_hub_guided_toursfrom
06-02-feat_guided_tours_foundation
Open

feat: Guided Tours Foundation#2348
camielvs wants to merge 2 commits into
05-20-feat_learning_hub_guided_toursfrom
06-02-feat_guided_tours_foundation

Conversation

@camielvs

@camielvs camielvs commented Jun 2, 2026

Copy link
Copy Markdown
Collaborator

Description

The reactour-based guided tour engine, wired into the dashboard's /learn/tours hub and the v2 editor. Foundation only — the tour registry ships empty, so no tour can run yet. Subsequent PRs in the stack add interaction primitives (#2299), a custom navigation UI (#2340), ephemeral pipelines (#2334), an end-screen (#2339), and the first two registered tours (#2306, #2312).

While the registry is empty, every tour card on the Learning Hub says "Coming soon" and the framework merge is invisible to users.

Architecture

Route (src/routes/Dashboard/Learn/Tour.tsx)

  • /tour/$tourId — refreshable, shareable, owns its own lifecycle.
  • Resolves the tourId against the registry; redirects to /learn/tours if unknown.
  • Renders <TourModeProvider> + <EditorV2> from the first frame; the editor body shows a skeleton while the tour pipeline resolves, so the menu bar stays mounted (no flicker on entry).
  • Snapshots the editor's window layout on entry, restores it on exit so the user's saved arrangement isn't disturbed.
  • Bridges ?step=N ↔ reactour's currentStep so browser back/forward navigates steps.

Reactour wrapper (src/providers/TourProvider/TourProvider.tsx)

  • Tours are modal: showCloseButton={false}, onClickMask={() => undefined}, disableKeyboardNavigation={["esc"]}. The only exits are the explicit Exit Tour button or the Done button on the final step.
  • Custom prev/next rendering via renderNextButton; popover viewport clamping via PopoverClampBridge keeps the step-number badge from being clipped near screen edges.

Tour-mode context (src/providers/TourProvider/TourModeContext.tsx)

  • useTourMode() exposes { tour, tempPipelineName } to editor components.
  • EditorMenuBar reads this to render a Tour badge next to the pipeline name and the central Exit Tour button; destructive file-menu actions (rename / delete) are hidden in tour mode.
  • EditorV2Content reads it too: when pipelineRef is null and we're in tour mode, it shows PipelineEditorSkeleton instead of EmptyEditorState.

Editor bridge stub (src/routes/v2/pages/Editor/components/EditorTourBridge.tsx)

Layout snapshot (src/routes/v2/shared/windows/windowPersistence.ts)

  • snapshotLayout / restoreLayout stash the editor's persisted window arrangement so a tour can mutate it freely and roll back on exit.

Registry types (src/components/Learn/tours/registry.ts)

  • TourDefinition + TourStep (extends reactour's StepType). Empty tours: TourDefinition[] = [] array — tours register themselves in their own PRs.

How tours get added

  1. Author src/components/Learn/tours/<yourTour>.tour.json matching TourDefinition.
  2. Import + push into the tours array in registry.ts.
  3. Use stable data-* anchors on the UI elements your steps target. Already available:
    • data-tour="..." — panels and bars
    • data-dock-area, data-dock-window, data-dock-window-content, data-window-id — dock/window system
    • data-tour-anchor="no-spotlight" — center a popover with no highlight

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/583

Type of Change

  • New feature

Checklist

  • I have tested this does not break current pipelines / runs functionality
  • I have tested the changes on staging

Test Instructions

The framework is invisible to users until a tour registers, so the only thing to verify is no-regression:

  • /learn/tours and the dashboard Featured Tours tile render every tour card as "Coming soon".
  • Direct navigation to /tour/anything redirects to /learn/tours.
  • Pipelines list, editor menu bar, dockable / floating windows, and task nodes behave identically to master.
  • The Window Layout snapshot/restore round-trips cleanly: pre-tour arrangement persists across an entry/exit cycle.

Additional Comments

The remainder of the stack lands the interaction primitives and the first two tours. Once #2306 and #2312 are merged, the Learning Hub has actual tours to walk through.

@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown

🎩 Preview

A preview build has been created at: 06-02-feat_guided_tours_foundation/694e182

camielvs commented Jun 2, 2026

Copy link
Copy Markdown
Collaborator Author

@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch 2 times, most recently from 5699235 to 607e516 Compare June 3, 2026 00:16
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch 2 times, most recently from 9db5395 to 07b002a Compare June 3, 2026 19:30
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch 2 times, most recently from 2f49ef0 to 451d5ed Compare June 3, 2026 19:35
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch from 07b002a to 2262436 Compare June 3, 2026 19:35
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from 451d5ed to b1c08c3 Compare June 3, 2026 19:42
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch from 2262436 to d83a715 Compare June 3, 2026 19:43
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from b1c08c3 to a5670ee Compare June 3, 2026 19:49
Comment thread src/lib/dispatchResizeOnToggle.ts
Comment thread src/routes/Dashboard/Learn/Tour.tsx Outdated
Comment thread src/providers/TourProvider/tourPipelineLifecycle.ts Outdated
Comment thread src/providers/TourProvider/TourContent.tsx
@camielvs camielvs mentioned this pull request Jun 15, 2026
8 tasks
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from 7b99db9 to bd51e2c Compare June 15, 2026 18:47
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch 5 times, most recently from 9b97386 to 6cdcf6e Compare June 15, 2026 19:49
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from bd51e2c to 7d2f093 Compare June 15, 2026 20:13
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch from 6cdcf6e to 3d83781 Compare June 15, 2026 20:13
@camielvs camielvs marked this pull request as ready for review June 16, 2026 19:33
@camielvs camielvs requested a review from a team as a code owner June 16, 2026 19:33
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from 7d2f093 to c4c21d3 Compare June 17, 2026 17:24
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch from 3d83781 to 5c54087 Compare June 17, 2026 17:24
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from c4c21d3 to cf2775d Compare June 19, 2026 02:25
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch from 5c54087 to 892fe6e Compare June 19, 2026 02:25
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_guided_tours branch from cf2775d to 7dfd27b Compare June 19, 2026 18:49
@camielvs camielvs force-pushed the 06-02-feat_guided_tours_foundation branch from 892fe6e to 694e182 Compare June 19, 2026 18:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

#gsd:50583 Learning Hub

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant