feat: Guided Tours Framework (Secrets)#2405
Draft
camielvs wants to merge 2 commits into
Draft
Conversation
🎩 PreviewA preview build has been created at: |
This was referenced Jun 10, 2026
Collaborator
Author
This was referenced Jun 10, 2026
camielvs
force-pushed
the
06-10-feat_guided_tours_framework_secrets_
branch
2 times, most recently
from
62653bf to
d7a841f
Compare
camielvs
force-pushed
the
06-03-feat_guided_tour_-_subgraphs
branch
from
f541439 to
4b15ecd
Compare
camielvs
force-pushed
the
06-10-feat_guided_tours_framework_secrets_
branch
from
d7a841f to
c7356f5
Compare
This was referenced Jun 12, 2026
When a tour opts in (TourDefinition.mockBackend) and runs without a real backend, mock the secrets backend in-memory so its secret steps stay hands-on (open the picker, add/pick/assign a secret) against an ephemeral store cleared when the tour ends. Steps gate normally; the submit dialog opens to demonstrate assigning a secret to a run input, but real run submission stays gated on availability. - tourMockBackend: module store + useTourMockBackend hook + in-memory secrets - secretsStorage routes to the mock when active - TourMockBackendController activates it (tour.mockBackend && !available) - secrets list/picker + run-with-arguments button accept the mock; submit confirm stays disabled in mock mode - Replaces the earlier read-only degrade (drops requiresBackend gating relaxation, fallbackContent/BackendAwareStepContent); keeps the SecretsBackendUnavailable empty state for non-tour Settings -> Secrets Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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, an in-memory mock backend so the secret steps stay hands-on without a real backend, 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.interactionvalues, plus atourPanelfield, plus a tour-levelmockBackendflag (see below):assign-secret-argument— a task argument's value becomes a secret (MobXactiveSpecreaction viaisSecretArgument; optionally gated to atargetArgumentName)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 reactionopen-secret-dialog/open-settings-panel/open-submit-dialog— the respective dialog appears in the DOMtourPanel: "secrets-manager"— marks the steps during which the in-editor Settings stand-in should be openBridge 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 areMutationObserverDOM-presence checks;assign-secret-argumentis a spec reaction;assign-secret-submitwatches 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/secretsroute 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 realSecretsListView, keeping add/replace in-dialog rather than using the Settings router links. It opens when the active step is markedtourPanel: "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 callsopenTourSettings()instead of routing away (keeps itsdata-tracking-idso the tour can anchor to it).EditorV2.tsx— mounts<TourSecretsDialog />alongside the existing tour dialogs.No-backend mock backend (
tourMockBackend.tsnew,secretsStorage.ts,Tour.tsx, secret/submit gates)Secrets live on the backend, so without one the secret steps would otherwise trap the user on a step they can't complete. When a tour opts in (
TourDefinition.mockBackend) and there's no real backend, the secrets backend is mocked in-memory so the steps stay fully hands-on — the user really opens the picker, adds a secret, picks it, and assigns it, against an ephemeral store that is cleared when the tour ends. Nothing is persisted or sent anywhere; with a real backend this is inert.tourMockBackend.ts(new) — a provider-free module store:setTourMockActive/isTourMockActive, auseTourMockBackend()hook, and an in-memorySecretmap (mockListSecrets/mockAddSecret/mockUpdateSecret/mockRemoveSecret).secretsStorage.ts—fetchSecretsList/addSecret/updateSecret/removeSecretroute to the in-memory store when the mock is active (the existingSecretsQueryKeys.All()invalidations keep the list fresh).Tour.tsx— aTourMockBackendControlleractivates the mock whiletour.mockBackend && !availableand clears it (and the store) on tour exit.SelectSecretDialog/SecretsListrender the real picker (available || mock); the run-with-arguments (split-arrows) button enables so the submit dialog can open. The primary Submit button and the submit-args confirm stay gated on real availability — the secret-to-input assignment is demonstrated, but launching a real run isn't wired in mock mode.Friendly no-backend empty state (
SecretsBackendUnavailable.tsx, new)SelectSecretDialog/SecretsListshow a "Backend not connected" state (Lock/DB icon + copy) instead of the generic error-boundary icon when there's genuinely no backend and the mock isn't active — which also improves the real Settings → Secrets page for backend-less setups.Reusable secrets components (
SecretsList.tsx,SecretsListView.tsx)Optional
onAddSecret/onEditSecretcallbacks. 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—computeDefaultPopoverPositiongains 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— rendersmodal={!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
Checklist
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:
/api/secretscalls fire. Settings → Secrets with no backend shows the "Backend not connected" state.pnpm typecheck,pnpm lint, and thetourActionLabels/tourMockBackendunit tests pass.