feat: Guided Tour - Navigating the Editor

[camielvs]

Description

The first registered guided tour against the framework stack (#2348 / #2299 / #2340) — Navigating the Editor.

An 11-step walkthrough of the v2 editor with markdown-formatted copy, stable data-* selectors, and three interactive moments. Boots into a temporary tour pipeline seeded from example-pipelines/Intro-Hello World.pipeline.component.yaml.

What's in the tour

1. Welcome (centered popover, no spotlight)
2. Top bar — pipeline name + editor menus (File, View, Runs, Components, Windows)
3. Top bar — quick actions (submit, autosave status, Settings, docs)
4. Canvas — workspace plus the 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, targetWindowName: "Task Properties")
10. Interactive — re-dock Task Properties (redock-window)
11. Windows menu

Interactive steps show a checklist of the required action alongside a gated "Next"; completing the action ticks the checklist and the tour auto-advances after a short beat (framework behavior from #2299 / #2340). If the prompted state is already satisfied when the step lands (e.g. the window is already floating), the step opens pre-completed.

Stable selectors

Every step selector targets a data-* attribute — no .react-flow__* library classes — so the tour doesn't break when the underlying library renames CSS.

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 scopes to tasks and not IO ports, which share data-task-name)
• A new domAttributes arg on createEntityNode injects these onto the xyflow DOM nodes

One behavior change

WindowsMenu now 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 otherwise 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

Screenshots

Checklist

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

Test Instructions

Dashboard → Learning Hub → Featured Tours → "Find your way around the editor". Walk through all 11 steps end-to-end.

The tour cannot be paused or dismissed mid-run — ESC, clicks on the mask, and the (hidden) close button are all no-ops; the only mid-tour exit is the Exit Tour button.

• Interactive steps show a checklist row; completing the action ticks it and the tour auto-advances after a short beat (or click "Next").
• Step 7 (select-task) — clicking the Greet task advances; clicking an IO port on the same task does not.
• Steps 9–10 (undock/redock) — the checklist reads "Drag the Task Properties panel…"; dragging the panel out / back completes the step. If it's already floating/docked on arrival, the step opens pre-completed.
• URL deep-link — refresh mid-tour resumes on the same step (/tour/navigating-the-editor?step=N).
• Browser back/forward — navigates between steps.
• Entry loading — menu bar appears immediately; body shows a small "Loading pipeline…" skeleton, no full-screen flash.
• Step 11 (Windows menu) — opening the dropdown highlights the menu content correctly (the resize dispatch).
• Done — returns to /learn/tours; the tour pipeline does not appear in the regular pipelines list.
• Save this pipeline (from feat: Guided Tours End Screen #2339) — promotes the temp pipeline to a regular one and opens /editor/<name>.

[github-actions]

🎩 Preview

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

[camielvs]

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

• feat: Guided Tour - Navigating the Editor #2306 : 2 dependent PRs (#2307 , #2347 ) 👈 (View in Graphite)
• feat: Guided Tours Framework (Navigating the Editor) #2299
• feat: Guided Tours End Screen #2339
• feat: Guided Tours Ephemeral Pipelines #2334
• feat: Guided Tours Custom Navigation #2340
• feat: Guided Tours Foundation #2348
• feat: Learning Hub Guided Tours #2297
• feat: Learning Hub - Milestone 1 #2341
• feat: Learning Hub Tip of the Day #2292
• feat: Learning Hub Tip Browser #2291
• feat: Learning Hub Example Pipelines #2283
• feat: Learning Hub Documentation & FAQ #2282
• feat: Learning Hub Dashboard #2281
• master

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

[maxy-shpfy]

🤖 This is an AI-generated code review comment.

This PR adds targetTaskName to the tour data, but TourStep in src/components/Learn/tours/registry.ts only declares interaction, targetWindowId, targetWindowName, and fallbackContent. Because the JSON import is asserted as TourDefinition, this new contract is not type-checked at the source and consumers need separate ad-hoc shapes to access the field.

Suggestion: Add targetTaskName?: string to the shared TourStep type alongside the other tour metadata fields so the tour JSON contract and consumers stay typed from the source.

Rule: .cursorrules TypeScript: use strict TypeScript with proper typing; tangle-ui-review TypeScript typings: prefer proper typing from the source over casts/ad-hoc shapes.