Skip to content

feat: Guided Tour - Navigating the Editor#2306

Draft
camielvs wants to merge 1 commit into
05-20-feat_learning_hub_tour_framework_and_first_tourfrom
05-22-feat_guided_tour_-_navigating_the_editor
Draft

feat: Guided Tour - Navigating the Editor#2306
camielvs wants to merge 1 commit into
05-20-feat_learning_hub_tour_framework_and_first_tourfrom
05-22-feat_guided_tour_-_navigating_the_editor

Conversation

@camielvs
Copy link
Copy Markdown
Collaborator

@camielvs camielvs commented May 22, 2026 •
edited
Loading

Description

Adds Navigating the Editor as the first registered tour against the framework in #2299.

What's in the tour

An 11-step walkthrough of the v2 editor, with markdown-formatted copy and stable data-* selectors:

  1. Welcome (centered popover, no spotlight)
  2. Top bar — pipeline name + editor menus (File, View, Runs, Components, Windows; mentions Node menu appears when a task is selected)
  3. Top bar — quick actions (submit, autosave status, Settings, docs)
  4. Canvas — workspace plus the useful controls along the bottom (minimap, viewport controls, undo/redo)
  5. Left sidebar — Components, Runs & submission, and Recent runs (all three docked windows highlighted together)
  6. Right sidebar — Pipeline Details
  7. Interactive — click the Greet task (select-task)
  8. Task Properties panel
  9. Interactive — drag Task Properties out of the dock (undock-window)
  10. Interactive — re-dock Task Properties (redock-window)
  11. Windows menu

Interactive steps fall back to non-interactive copy when the prompted state is already met (e.g. window already floating). The tour boots into a fresh temporary pipeline seeded from example-pipelines/Intro-Hello World.pipeline.component.yaml.

Stable selectors

All step selectors target data-* attributes — no .react-flow__* library classes — so the tour doesn't break if the underlying library renames CSS classes.

DOM anchors added in this PR:

  • data-tour="editor-top-bar", editor-top-bar-left, editor-menu-items, editor-top-bar-actions on EditorMenuBar
  • data-tour="editor-canvas" on the canvas wrapper in EditorV2
  • data-tour="canvas-undo-redo" on the undo/redo cluster
  • data-tour="windows-menu-content" / windows-menu-submenu-content on the Windows dropdown content
  • data-window-id / data-dock-window-content on docked and floating windows
  • data-task-name on task / IO nodes plus data-tour-node="task" on task nodes only (so step 7 can scope to tasks and not IO ports, which share data-task-name)
  • New domAttributes arg on createEntityNode is how the node manifests inject these onto the xyflow DOM nodes

One behavior change

WindowsMenu dispatches a resize event on dropdown open/close (with a 250ms follow-up for Radix's exit animation). Without this, reactour can't re-measure the portalled dropdown content during step 11 — the highlight would stay frozen at the trigger's pre-open coordinates.

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

Screenshots

image.png

image.png

image.png

image.png

image.png

Test Instructions

Dashboard → Learning Hub → Featured Tours → "Find your way around the editor".

Edge cases worth poking at:

  • Refresh the browser mid-tour — does it land back on the same step? (URL is /tour/<id>?step=N)
  • Use browser back/forward between steps — do step transitions match?
  • Hit ESC / X on the popover — does the menubar surface Resume / Save as new pipeline / Exit?
  • "Save as new pipeline" — does the temp pipeline get the chosen name and become a regular pipeline?
  • "Exit tour" — does the temp pipeline disappear from the pipelines list?
  • Pre-undock the Task Properties window before reaching step 9 — does the step fall back gracefully?
  • Click off the Greet task during step 7 — does the click still register and advance the tour?
  • Close the tab mid-tour, then return — does the orphan cleanup sweep the leftover __tour__* pipeline?

Additional Comments

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 22, 2026 •
edited
Loading

🎩 Preview

A preview build has been created at: 05-22-feat_guided_tour_-_navigating_the_editor/2926978

This was referenced May 22, 2026
Draft
Draft
Draft
Draft
Draft
Draft
@camielvs Graphite App
Copy link
Copy Markdown
Collaborator Author

camielvs commented May 22, 2026 •
edited
Loading

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

@camielvs camielvs mentioned this pull request May 22, 2026
Draft
3 tasks
@camielvs camielvs added the #gsd:50583 Learning Hub label May 22, 2026 — with Graphite App
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from a98fb46 to 9f459c8 Compare May 22, 2026 19:29
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 45a5a50 to d1d7979 Compare May 22, 2026 19:29
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from 9f459c8 to e7770ca Compare May 22, 2026 21:53
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from d1d7979 to ca4e7d6 Compare May 22, 2026 21:53
@camielvs camielvs mentioned this pull request May 22, 2026
Closed
8 tasks
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from ca4e7d6 to 433204f Compare May 23, 2026 00:09
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch 2 times, most recently from e26abd3 to d95e8da Compare May 23, 2026 00:12
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 433204f to 8b17afb Compare May 23, 2026 00:12
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from d95e8da to 6246686 Compare May 23, 2026 00:21
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 8b17afb to 76cc3a2 Compare May 23, 2026 00:21
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from 6246686 to 3adc6cd Compare May 23, 2026 00:22
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 76cc3a2 to 5f30cb6 Compare May 23, 2026 00:22
@camielvs camielvs mentioned this pull request May 25, 2026
Merged
8 tasks
camielvs added a commit that referenced this pull request May 25, 2026
@camielvs
publicasset helper (#2309)
ab1f0f9 
## Description

This should hopefully fix issues with preview builds in #2306



Adds a `publicAssets` helper than can be users to point public asset urls to the cdn instead of local.

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Bug fix
- [ ] New feature
- [ ] Improvement
- [ ] Cleanup/Refactor
- [ ] Breaking change
- [ ] Documentation update

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

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

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from 3adc6cd to b57b285 Compare May 25, 2026 18:01
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from ade8e35 to a71619d Compare May 25, 2026 18:14
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from b57b285 to cb2d208 Compare May 25, 2026 18:15
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from a71619d to 5939f43 Compare May 25, 2026 18:15
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from ead0ee3 to 08834b4 Compare May 25, 2026 22:09
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from da2dd0d to b617fbe Compare May 25, 2026 22:09
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from 08834b4 to e4ea545 Compare May 25, 2026 22:13
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from 7881350 to e1de1a5 Compare May 25, 2026 22:18
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from e4ea545 to 8bbdc8d Compare May 25, 2026 22:58
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from 783dfec to 6923743 Compare May 25, 2026 22:59
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch 2 times, most recently from cd287f8 to e3116ef Compare May 25, 2026 23:02
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 6923743 to b109119 Compare May 25, 2026 23:02
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from e3116ef to fbae363 Compare May 25, 2026 23:04
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from 4b82464 to 9ce1745 Compare May 25, 2026 23:05
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from fbae363 to 5e902e6 Compare May 25, 2026 23:05
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 9ce1745 to a4b6320 Compare May 25, 2026 23:28
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch 2 times, most recently from 710fedb to 3eff01a Compare May 25, 2026 23:40
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from 2c5ba1f to fd61595 Compare May 25, 2026 23:42
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch 2 times, most recently from c70b03e to d2b5dc5 Compare May 26, 2026 00:02
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from 31a927d to 7b6ba16 Compare May 26, 2026 00:07
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from d2b5dc5 to 067908d Compare May 26, 2026 00:07
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch 2 times, most recently from b29f9a5 to 94fad24 Compare May 26, 2026 00:37
@camielvs
feat: Guided Tour - Navigating the Editor
2926978 
Adds the first guided tour. A 14-step walkthrough of the v2 editor
registered against the framework introduced in the parent PR. The tour
covers menu bar, canvas, dockable panels, task interaction, and the
Windows menu.

Interactive steps exercise the framework's three primitives —
`select-task`, `undock-window`, `redock-window` — each with a
non-interactive fallback for when the prompted state is already met.

The tour boots into a fresh temporary pipeline cloned from
`example-pipelines/Intro-Hello World.pipeline.component.yaml`.

DOM anchors added:
- data-tour="editor-top-bar" / -menu-items / -top-bar-actions on the
  menu bar
- data-tour="canvas-undo-redo" on the undo/redo cluster
- data-tour="windows-menu-content" / -submenu-content on the Windows
  dropdown content
- data-window-id / data-dock-window-content on docked + floating windows
- data-task-name on task / IO nodes (via a new `domAttributes` arg on
  createEntityNode)

WindowsMenu now dispatches a `resize` event on open/close so reactour
re-measures the portalled dropdown content during step 14.
@camielvs camielvs force-pushed the 05-22-feat_guided_tour_-_navigating_the_editor branch from 94fad24 to 2926978 Compare May 26, 2026 01:04
@camielvs camielvs mentioned this pull request May 26, 2026
Draft
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

#gsd:50583 Learning Hub

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@camielvs