feat: Guided Tours Ephemeral Pipelines

[camielvs]

Description

Moves tour pipelines out of the durable IndexedDB store and into session storage, so they are truly ephemeral. Before this change, a tour-pipeline lived alongside the user's real pipelines: it showed up in the pipelines list, contended for unique names, and survived browser refresh — none of which is what we want from a guided demo.

The fix is a scoped storage override that only applies while the user is on /tour/$tourId. Inside the tour route, usePipelineStorage() returns a TourPipelineStorageService backed by sessionStorage; everywhere else, it still returns the durable IndexedDB service. The autosave path, the spec loader, and the editor's storage consumers don't need to know which one they're talking to.

What changed

New scoped storage layer (src/providers/TourProvider/tourPipelineStorage/)

• SessionStoragePipelineDriver.ts — driver that reads/writes pipeline YAML against sessionStorage keys, matching the shape the existing PipelineStorageService expects from a driver.
• TourPipelineFolder.ts — single root folder that holds the tour pipeline, with canMoveFilesOut: false etc. so the rest of the app can't accidentally relocate it.
• TourPipelineStorageService.ts — PipelineStorageService subclass whose rootFolder, resolvePipelineByName, etc. all go through the session-storage driver.
• TourPipelineStorageProvider.tsx — context override that the tour route wraps its body in. Inside, usePipelineStorage() resolves to the tour service.
• resetAllTourPipelineState.ts — clears every __tour__* key from session storage and evicts matching entries from the react-query spec cache. Called when starting any tour so each run begins clean.

Tour route plumbing (src/routes/Dashboard/Learn/Tour.tsx)

• TourPage is split into TourPage (resolves the tour, guards on !tour) and TourPageBody (does the pipeline resolution and rendering). The split exists so TourPipelineStorageProvider can wrap the body — usePipelineStorage() inside TourPageBody then resolves to the tour storage.
• createTourPipeline is renamed findOrCreateTourPipeline to reflect that browser refresh mid-tour reuses the existing session-storage file (so the tour resumes on the same step with edits intact). Re-entering the tour from the Learn page still starts fresh — FeaturedTours / ToursLibrary call resetAllTourPipelineState before navigating, which wipes session storage and the react-query spec cache.

Pipeline registry orphan fix (src/services/pipelineService.ts)

• Fixes a pre-existing bug surfaced by the storage change: deletePipeline removed the file from its folder driver but didn't delete the corresponding entry from the pipeline registry. The orphaned registry entry caused later "name already exists" errors for tour pipelines whose files had been cleared but whose registry rows lived on. Now both are deleted.

Name-dialog race fix (src/components/shared/Dialogs/PipelineNameDialog.tsx)

• The dialog's error state was computed via a separate setError effect that didn't always settle before the user clicked Submit, occasionally letting through a name that should have been rejected. Rewrote it as a useMemo so the error is always in sync with the current input. Also added excludeNames so a rename-to-self in the regular editor doesn't flag itself as a collision.

Why scoped override rather than a flag

Threading a isTour: true flag through every storage call would have leaked tour-awareness into a layer that doesn't need it. The provider override is opaque to consumers — same usePipelineStorage(), same PipelineFile shape, different backing store.

Related Issue and Pull requests

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

Type of Change

• Improvement
• Bug fix

Checklist

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

Test Instructions

Pre-req: at least one registered tour exists (so use this branch with #2306 / #2312 on top, or open a Storybook-style local entry).

Ephemerality

• Start a tour. Open DevTools → Application → Local Storage / IndexedDB. The tour pipeline should be in Session Storage, not IndexedDB. The pipelines list on the dashboard should not show it.
• Make an edit to the tour pipeline (e.g. drag a node).
• Refresh the browser tab. The tour resumes on the same step (URL ?step=N) and the edit you made is still there (session storage survives same-tab refresh, as intended).
• Close the tab, open a new one, return to the tour. The tour pipeline is gone — start fresh.

Name-collision regression

• In the regular editor, rename a pipeline to its current name (no change). The dialog should not flag it as "Name already exists" (this used to fail).
• Start a tour, then start the same tour again from /learn/tours. No "Name already exists" error — resetAllTourPipelineState clears the prior run.

Registry orphan regression

• Create a regular pipeline, delete it, then create a new pipeline with the same name. Should succeed (previously, the stale registry row blocked re-use of the name).

Regression

• Normal pipeline create / edit / autosave / delete still work end-to-end (no tour involved).

[github-actions]

🎩 Preview

A preview build has been created at: 05-27-fix_guided_tours_ephemeral_state/ec95c81

[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
• feat: Guided Tours Ephemeral Pipelines #2334 👈 (View in Graphite)
• 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]

NIT (Follow up) here and everywhere - better to rely on React Compiler and avoid useMemo/useCallback if possible

[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 does not enable src/providers/TourProvider/tourPipelineStorage or this file specifically. The project standard requires new components/hooks to be covered by React Compiler unless they live under an already-enabled directory; src/providers is still commented out in the config.

Suggestion: Add src/providers/TourProvider/tourPipelineStorage/TourPipelineStorageProvider.tsx to REACT_COMPILER_ENABLED_DIRS, or enable the containing directory if all files there are compiler-compatible.

Rule: .claude/skills/react-patterns/SKILL.md — React Compiler: new files/components must be added to react-compiler.config.js; tangle-ui-review checklist §1