feat: Guided Tours Framework (Secrets)

[camielvs]

Description

The secret-specific interaction mechanics for the guided-tour framework, layered on the framework stack (#2348 / #2299 / #2347 / #2340) and the subgraphs mechanics (#2365). Foundation for the Using Secrets tour (#2406) — this PR adds the interaction types and bridge logic that detect them, the in-editor Settings → Secrets stand-in the tour opens, and small reusability/behavior tweaks that let it all run without leaving the tour page. The tour content and DOM anchors land in #2406.

What changed

Interaction vocabulary (src/components/Learn/tours/registry.ts)

Five new TourStep.interaction values, plus a tourPanel field:

• assign-secret-argument — a task argument's value becomes a secret (MobX activeSpec reaction via isSecretArgument; optionally gated to a targetArgumentName)
• assign-secret-submit — a secret gets bound inside the submit dialog. The value lives in the dialog's local React state (not the spec), so this is detected from the DOM rather than a spec reaction
• open-secret-dialog / open-settings-panel / open-submit-dialog — the respective dialog appears in the DOM
• tourPanel: "secrets-manager" — marks the steps during which the in-editor Settings stand-in should be open

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

Each interaction marks the step complete in the shared tour-progress state (following #2299; it doesn't advance the tour itself). The three open-* handlers are MutationObserver DOM-presence checks; assign-secret-argument is a spec reaction; assign-secret-submit watches for the secret display inside the submit dialog. Already-satisfied-on-entry states are marked complete immediately; gated "Next" / auto-advance (#2340) handle progression.

Checklist labels (src/providers/TourProvider/tourActionLabels.ts + test)

Copy for the five interactions, e.g. assign-secret-argument → "Assign a secret to the {targetArgumentName} argument", open-settings-panel → "Open Settings to manage your secrets".

In-editor Settings → Secrets stand-in (TourSecretsDialog.tsx, new)

Navigating to the real /settings/secrets route would unmount the tour page and tear the tour down. Instead, a non-modal dialog mirrors the real settings shell (sidebar with Secrets active, the other tabs disabled) and renders the real SecretsListView, keeping add/replace in-dialog rather than using the Settings router links. It opens when the active step is marked tourPanel: "secrets-manager" and the user clicks the gear (openTourSettings), and closes when the tour leaves those steps.

• AppMenuActions.tsx — in tour mode the Settings gear calls openTourSettings() instead of routing away (keeps its data-tracking-id so the tour can anchor to it).
• EditorV2.tsx — mounts <TourSecretsDialog /> alongside the existing tour dialogs.

Reusable secrets components (SecretsList.tsx, SecretsListView.tsx)

Optional onAddSecret / onEditSecret callbacks. They default to the existing router links (real Settings page is unchanged), but let the stand-in reuse the real list/forms with in-dialog add/replace — so the tour isn't a hand-maintained copy of the secrets UI.

Popover & dialog behavior

• TourPopover.tsx — computeDefaultPopoverPosition gains a branch for a tall, centered modal: anchor the popover to its left, aligned to the dialog's top edge (rather than vertically centered).
• SubmitTaskArgumentsDialog.tsx — renders modal={!tourMode}; non-modal during a tour so the portaled tour popover (Next / Finish Tour) stays clickable while the dialog is open. Behavior outside tours is unchanged.

Related Issue and Pull requests

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

Builds on the framework stack (#2348 / #2299 / #2347 / #2340 / #2365); consumed by the Using Secrets tour in #2406.

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 registry is otherwise inert in this PR — the interactions are exercised end-to-end by the Using Secrets tour in #2406. To verify in isolation:

• No regressions in the existing tours and in the real Settings → Secrets page (add / replace / delete still navigate and work as before).
• Submit dialog outside a tour is still modal (focus trap + scrim) as before.
• pnpm typecheck, pnpm lint, and the tourActionLabels unit tests pass.

[github-actions]

🎩 Preview

A preview build has been created at: 06-10-feat_guided_tours_framework_secrets_/c7356f5

[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 Tours Completion Metrics #2412
• feat: Guided Tour - Secrets #2406
• feat: Guided Tours Framework (Secrets) #2405 👈 (View in Graphite)
• feat: Guided Tour - Subgraphs #2366
• feat: Guided Tours Framework (Subgraphs) #2365
• feat: Guided Tour - First Pipeline #2312
• feat: Guided Tours Framework (First Pipeline) #2347
• 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.