feat: Guided Tours Framework (Navigating the Editor)

[camielvs]

Description

The editor-side tour bridge and the interaction vocabulary it implements. A single component detects tour-step interactions in the editor and reports their completion to the shared tour-progress state; step advancement is gated by the custom navigation (gated "Next" / auto-advance live in #2340). Sufficient to power the first tour, Navigating the Editor (#2306).

The framework foundation (route, provider, popover, hub UI) lives in #2348. This PR replaces the empty EditorTourBridge stub with its implementation and moves the interaction vocabulary onto TourStep.

Interaction vocabulary (registry.ts)

TourStep declares the interaction union and its target fields here (moved down from the foundation so the types live alongside the bridge that implements them):

• interaction: "select-task" | "undock-window" | "redock-window"
• targetWindowId — which dock window an undock/redock step targets
• targetWindowName — friendly window name used in the checklist label
• fallbackContent

Architecture

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

Reads the current step from useTour(). When the step declares an interaction, the bridge wires a listener that — instead of advancing the tour itself — marks the step complete in the shared TourProgressContext. The popover's gated "Next" then enables and the framework auto-advances after a short beat (#2340). Three interactions:

• select-task — completes when the user clicks an element under [data-tour-node="task"] (a stable selector, not React Flow's CSS class).
• undock-window — completes when a docked panel matching targetWindowId is dragged out of its dock area.
• redock-window — completes when a floating window matching targetWindowId is dropped back into a dock.

Helpers

• followWindowPosition — keeps the spotlight tracking a floating panel as the user drags it (throttled to one resize-event dispatch per animation frame).
• trackDockStateTransition — baselines window dockState at step start and fires when a baselined window crosses the undock/redock transition.

Already-satisfied on entry

If the prompted state already holds when the step lands (e.g. the target window is already floating), the step is marked complete immediately — its checklist row shows pre-checked and "Next" is enabled — rather than forcing the user to perform an action they've effectively already done.

Checklist labels

Adds the checklist copy for these interactions (the contextual bold-target support comes from #2340):

• select-task → "Select the highlighted task"
• undock-window → "Drag the {targetWindowName} panel out of its dock"
• redock-window → "Dock the {targetWindowName} panel back into place"

Each falls back to a generic phrasing when the target field isn't set.

Related Issue and Pull requests

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

Builds on #2348 (foundation) and #2340 (custom navigation + gating). First consumer is #2306. #2347 adds more interaction types on top.

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

No visible behavior on its own — test with #2306 on top, walking the Navigating the Editor tour:

• Interactive steps show a checklist row + a disabled "Next". Completing the action ticks the row and the tour auto-advances after a short delay (or click "Next" to go immediately).
• select-task (step 7) — clicking the Greet task body completes it; clicking its IO ports does not.
• undock-window / redock-window (steps 9–10) — dragging Task Properties out / back completes the step; the checklist reads "Drag the Task Properties panel out of its dock".
• Already-satisfied — enter the undock step with Task Properties already floating → the step opens pre-completed ("Next" enabled) instead of requiring a drag.
• Walking back via Prev to a completed step leaves it complete (no re-gating).

[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 )
• feat: Guided Tours Framework (Navigating the Editor) #2299 👈 (View in Graphite)
• 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.

[github-actions]

🎩 Preview

A preview build has been created at: 05-20-feat_learning_hub_tour_framework_and_first_tour/0e49b76