feat: Guided Tours Framework (First Pipeline)

[camielvs]

Description

The interaction primitives, popover positioning, and CSS utilities needed to power the second guided tour (#2312 — Build Your First Pipeline). No visible behavior on its own; all testing happens in #2312.

Builds directly on #2299 (which added the first three interactions). This PR introduces the remaining interactions a build-from-scratch tour needs, plus a handful of cross-cutting tour-step features.

What's new

New interaction types (EditorTourBridge.tsx)

Each is declared on a tour step via interaction: "<name>" and auto-advances when its prompted action completes.

• expand-folder — advances when the named folder in the component library is expanded (matches [data-folder-name=...] [aria-expanded="true"]).
• library-search — advances when the search box value contains a target substring; debounced so the user finishes typing before the step moves on.
• add-task — advances when a task whose name matches a target substring is added to the canvas. Baseline counted at step start so pre-existing tasks don't false-trigger.
• add-input / add-output — generic count-based: advances when spec.inputs.length / spec.outputs.length increases.
• connect-edge — advances when a specific edge is drawn, matched by (sourceTaskName, sourcePortName, targetTaskName, targetPortName). The target task/port pair is optional — a step that wants any edge from a source port (e.g. dragging out a preview node) can omit them.
• set-argument — advances when a specific argument on any task has its value set to a non-empty string.

Existing select-task (from #2299) gets a targetTaskName narrowing — only the named task counts, not any task.

Cross-cutting step features

• ringSelectors — paint per-element rings via the new .tour-ring CSS class. Needed because reactour merges highlightedSelectors into one bounding-box highlight; per-handle rings (e.g. "highlight this specific output port and that specific input port") need a separate mechanism.
• requiresTaskSelected — auto-rewind to a previous select-task step if the required task is no longer selected. Lets a downstream step depend on "Train XGBoost is still selected" without crashing if the user deselects.
• ensureWindowRestored — auto-restore a minimized/hidden dock window at step start, so the panel the step targets is actually visible.
• resetLibrarySearch — clear the component-library search box before the step's selector is queried (so the step doesn't open with stale filter state from an earlier step).
• libraryDragAllow — block drags of library items that don't match the step's target, so the user can't drag the wrong component when a step is asking for a specific one.

Popover positioning

• computeDefaultPopoverPosition gets a symmetric left-anchored tall-strip branch. The existing branch (added in feat: Guided Tours Foundation #2348) handled right-anchored panels for [data-dock-area="right"] in feat: Guided Tour - Navigating the Editor #2306; the new branch handles left docks for first-pipeline steps that highlight the component library.
• POPOVER_STYLES.clickArea set to pointer-events: none so reactour's spotlight click-area doesn't intercept clicks on the interactive elements behind it (the user needs to actually drag library items to the canvas).

Misc

• TourStep registry types extended with the new interaction fields (targetFolderName, targetSearchTerm, targetTaskName, targetComponentName, targetEdge, targetArgumentName, plus the cross-cutting flags above).
• .tour-ring CSS utility in editor.css, with a React Flow handle override (position: absolute) so the class doesn't break handle layout when applied to ports.
• defaultPipelineYamlWithName now JSON.stringifys the name. Unrelated to tours, but pipelines named with YAML-special characters (colons, hashes) were breaking the YAML — first surfaced when a tour pipeline name contained a colon.

Related Issue and Pull requests

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

Builds on #2299. Consumed by #2312 (First Pipeline tour content).

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 — every new utility is unused until #2312 lands. Test in context with #2312 on top. Regression-only checks for this PR in isolation:

• Navigating the Editor tour (feat: Guided Tour - Navigating the Editor #2306) still works end-to-end. None of the new interactions or cross-cutting features should affect tours that don't use them.
• select-task without targetTaskName still advances on click of any task (the narrowing is opt-in).
• Editor opens normally, no console errors from the new CSS utility or popover-style additions.

Additional Comments

Originally bundled into #2312 alongside the tour content; split out so reviewers can read the mechanics and the tour JSON separately.

[github-actions]

🎩 Preview

A preview build has been created at: 06-02-feat_guided_tours_framework_2/ef2132f

[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 - Subgraphs #2366
• feat: Guided Tours Framework (Subgraphs) #2365
• feat: Guided Tour - First Pipeline #2312
• feat: Guided Tours Framework (First Pipeline) #2347 👈 (View in Graphite)
• feat: Guided Tour - Navigating the Editor #2306 : 1 other dependent PR (#2307 )
• 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.