Skip to content

feat: Guided Tours Ephemeral Pipelines#2334

Draft
camielvs wants to merge 1 commit into
05-29-feat_guided_tours_navigation_dots_track_progressfrom
05-27-fix_guided_tours_ephemeral_state
Draft

feat: Guided Tours Ephemeral Pipelines#2334
camielvs wants to merge 1 commit into
05-29-feat_guided_tours_navigation_dots_track_progressfrom
05-27-fix_guided_tours_ephemeral_state

Conversation

@camielvs
Copy link
Copy Markdown
Collaborator

@camielvs camielvs commented May 28, 2026

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.tsPipelineStorageService 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
Copy link
Copy Markdown

github-actions Bot commented May 28, 2026

🎩 Preview

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

Copy link
Copy Markdown
Collaborator Author

camielvs commented May 28, 2026

@camielvs camielvs added the #gsd:50583 Learning Hub label May 28, 2026 — with Graphite App
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from ab7dd0b to 8eb1ea3 Compare May 28, 2026 17:39
@camielvs camielvs force-pushed the 05-26-feat_guided_tour_-_first_pipeline branch from fb58c22 to a71461e Compare May 28, 2026 18:05
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch 5 times, most recently from 151abae to 3b86f76 Compare May 28, 2026 20:54
@camielvs camielvs force-pushed the 05-26-feat_guided_tour_-_first_pipeline branch 2 times, most recently from 774e9d6 to f3ba10d Compare May 28, 2026 20:58
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch 2 times, most recently from 802ddf3 to fed719d Compare May 28, 2026 21:07
@camielvs camielvs force-pushed the 05-26-feat_guided_tour_-_first_pipeline branch from f3ba10d to 6f56eba Compare May 28, 2026 21:07
@camielvs camielvs changed the base branch from 05-26-feat_guided_tour_-_first_pipeline to graphite-base/2334 May 28, 2026 21:16
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from fed719d to 288fe40 Compare May 28, 2026 21:16
@camielvs camielvs force-pushed the graphite-base/2334 branch from 6f56eba to 07be379 Compare May 28, 2026 21:16
@camielvs camielvs changed the base branch from graphite-base/2334 to 05-20-feat_learning_hub_tour_framework_and_first_tour May 28, 2026 21:16
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from e5bfdba to a0f3b3d Compare May 29, 2026 01:10
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from 444aa16 to 38b4021 Compare May 29, 2026 01:10
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from a0f3b3d to fc8f64e Compare May 29, 2026 01:21
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from 38b4021 to b2e2959 Compare May 29, 2026 01:21
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from fc8f64e to f42f1c1 Compare May 29, 2026 01:26
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch 2 times, most recently from 63df8cc to e33f721 Compare May 29, 2026 01:28
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch 2 times, most recently from e1c6d57 to fc98693 Compare May 29, 2026 01:28
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from e33f721 to b4e258c Compare May 29, 2026 01:28
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from fc98693 to f661d5c Compare May 29, 2026 01:31
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch 2 times, most recently from 9978c0a to 5d19fd6 Compare May 29, 2026 01:35
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch 2 times, most recently from 3d52a59 to bd097db Compare May 29, 2026 01:37
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from 5d19fd6 to 297bd4c Compare May 29, 2026 01:37
@camielvs camielvs changed the title feat: Guided Tours Ephemeral State feat: Guided Tours Ephemeral Pipelines May 29, 2026
@camielvs camielvs force-pushed the 05-20-feat_learning_hub_tour_framework_and_first_tour branch from bd097db to 84f39e0 Compare May 29, 2026 18:33
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from 297bd4c to 24ee700 Compare May 29, 2026 18:33
@camielvs camielvs changed the base branch from 05-20-feat_learning_hub_tour_framework_and_first_tour to graphite-base/2334 May 29, 2026 19:00
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from 24ee700 to 4c3e3c5 Compare May 29, 2026 19:00
@camielvs camielvs changed the base branch from graphite-base/2334 to 05-29-feat_guided_tours_navigation_dots_track_progress May 29, 2026 19:00
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from 4c3e3c5 to cc24888 Compare May 29, 2026 19:03
@camielvs camielvs force-pushed the 05-29-feat_guided_tours_navigation_dots_track_progress branch from 24ed2d3 to 7f83eb8 Compare May 29, 2026 19:03
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from cc24888 to db99147 Compare May 29, 2026 19:18
@camielvs camielvs force-pushed the 05-29-feat_guided_tours_navigation_dots_track_progress branch from 7f83eb8 to 9899ee2 Compare May 29, 2026 19:18
@camielvs camielvs force-pushed the 05-29-feat_guided_tours_navigation_dots_track_progress branch from 9899ee2 to a773cce Compare May 29, 2026 19:24
@camielvs camielvs force-pushed the 05-27-fix_guided_tours_ephemeral_state branch from db99147 to aa179eb Compare May 29, 2026 19:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

#gsd:50583 Learning Hub

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant