feat: Guided Tours End Screen

[camielvs]

Description

Adds a Save this pipeline affordance at the end of every tour. Curious users who want to keep poking at the pipeline they just walked through (or use it as a starting point) can convert the ephemeral tour pipeline into a real, durable one.

Surfaces only on the last tour step, as a small link-style button below the primary Done action, under a "Continue exploring:" label. Clicking it:

1. Closes the tour popover (so the mask doesn't interfere with the dialog),
2. Opens a name-picker dialog,
3. On submit, serializes the current spec with the new name, writes it to the durable IndexedDB store, and navigates the user into the regular /editor/$name route with the new file open.

If the user just clicks Done, behavior is unchanged: tour ends, temp pipeline stays in session storage until the next tour starts (which resets it).

Architecture

TourCompletionActions extension (src/providers/TourProvider/tourPopover.tsx)

• The existing Done button (from feat: Guided Tours Foundation #2348's TourCompletionActions) is now joined by a conditional "Save this pipeline" button when saveExploreHandler is registered. Both render in the last step's content area.
• A module-level saveExploreHandler slot + registerSaveExploreHandler(cb) API bridges the React tree gap between the reactour popover (rendered above TourModeProvider in the tree, no access to it) and the dialog host (rendered below SharedStoreProvider, has the spec access we need). The popover only knows "is something registered? if so, call it". The dialog host is what registers itself.

TourSaveExploreDialog (src/providers/TourProvider/TourSaveExploreDialog.tsx, mounted inside EditorV2Content)

• Owns the dialog open/close state.
• Registers a setOpen(true) handler with registerSaveExploreHandler on mount when tourMode is active; clears it on unmount.
• On submit: reads the current root spec from useSharedStores().navigation, renames it in-memory via usePipelineActions().renamePipeline, serializes to YAML, and calls tourMode.promoteToPipeline(name, yaml).

promoteToPipeline (src/providers/TourProvider/TourModeContext.tsx + Tour.tsx)

• New field on the TourModeContext value. The implementation lives in TourPage (above the storage override) where usePipelineStorage() resolves to the durable IndexedDB service.
• Creates a new file in the durable store with the provided name and YAML, then navigates to /editor/$name. Errors surface via useToastNotification.

Why the indirection through a module-level handler

The natural place to render the dialog is inside EditorV2, where SharedStoreProvider exposes the live spec. The natural place to render the trigger button is the popover, which reactour mounts above our TourModeProvider. React Context can't bridge that gap (the popover renders outside the provider's subtree). The module-level slot is the smallest possible bridge: one writer, one reader, scoped by lifecycle of the dialog host.

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

Test Instructions

Pre-req: a registered tour (use this branch with #2306 on top).

Happy path

• Start a tour and step through to the final step.
• Confirm the popover footer shows Done (primary) and, below it, Save this pipeline (small link).
• Click Save this pipeline. The popover closes, a name dialog opens.
• Enter a unique name and submit. You should land in /editor/<name> with the pipeline open and editable. The file appears in the regular pipelines list.
• The original tour pipeline (__tour__<slug>) remains in session storage; it'll be reset on the next tour start.

Cancel / dismiss

• Reach the last step again. Click Save this pipeline, then Close the name dialog without submitting.
• You're now in the tour route with no popover. The Exit Tour button in the nav bar still works.

Name collision

• Save the tour pipeline as some name. Reach the last step of any tour again and try to save with the same name. The dialog should flag "Name already exists".

Regression

• Click Done on the last step (don't touch Save). The tour ends, you land on /learn/tours, nothing is added to the pipelines list.
• Tours other than the last step show no Save button. ESC, the mask, and the (hidden) close button still don't dismiss the popover.

Additional Comments

The "Continue exploring:" framing is intentional — users who walk through a guided tour and walk away should not feel obligated to save anything. Save is opt-in for the curious.

[github-actions]

🎩 Preview

A preview build has been created at: 05-28-feat_save_and_resume_paused_tours/5e2d273

[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
• feat: Guided Tours End Screen #2339 👈 (View in Graphite)
• 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 a new React component under src/providers, but react-compiler.config.js only enables src/routes and selected provider subdirectories; src/providers/TourProvider is still outside compiler coverage. The project review standard treats missing React Compiler registration for new components/hooks as a High-severity adoption gap.

Suggestion: Add this file explicitly to REACT_COMPILER_ENABLED_DIRS, or enable the appropriate TourProvider subdirectory after confirming it is compiler-compatible.

Rule: react-patterns / tangle-ui-review — new components and hooks must be covered by react-compiler.config.js; new files under non-enabled directories are not covered automatically.

[maxy-shpfy]

🤖 This is an AI-generated code review comment.

The save/explore action is registered by mutating a module-level variable and then read during TourCompletionActions render. Because registering the handler is not React state or context, changes do not cause a re-render; if the completion actions render before the effect in TourSaveExploreDialog registers, the Save demo pipeline button is omitted until some unrelated render happens. This also makes the feature depend on mount/effect ordering instead of explicit React data flow.

Suggestion: Move the save-dialog opener into React-owned state/context, e.g. include an openSavePipelineDialog callback or capability flag in TourModeValue/TourProvider, and render TourCompletionActions from that context instead of reading a mutable module singleton.

Rule: docs/react-best-practices.md / react-patterns — context/provider values should model shared state explicitly; avoid unstable/non-reactive values that bypass React data flow.