Skip to content

feat: Onboarding Checklist - #2421

Merged
camielvs merged 2 commits into
masterfrom
06-17-feat_onboarding_checklist
Jul 7, 2026
Merged

feat: Onboarding Checklist#2421
camielvs merged 2 commits into
masterfrom
06-17-feat_onboarding_checklist

Conversation

@camielvs

@camielvs camielvs commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Description

First PR in a stacked series that builds an onboarding experience for new users (see #622). This one lays the foundation and surfaces the first piece of UI — an onboarding checklist on the Learning Hub.

Foundation (OnboardingProvider)

  • Tracks four steps: read the docs, complete a guided tour, create a pipeline, and execute a run.
  • Steps are detected automatically rather than self-reported:
    • complete a tour — derived from TourProvider completions.
    • execute a run — queried from the backend (runs created by the current user).
    • create a pipeline — driven by a small event bus (userPipelineWriteEvents) emitted from the pipeline-write chokepoints (componentStore and PipelineFile), so v1 edits, v2 edits, imports, and the new-pipeline button all count.
    • read the docs — marked when the user opens the docs link.
  • Progress is persisted to the backend (/api/users/me/settings), not localStorage. Writes use keepalive so a fire-and-forget save survives navigation/reload.
  • Supports dismiss / restore.

UI

  • OnboardingChecklist — a reusable progress + step-list component (extracted up front so the next PR doesn't have to refactor it).
  • OnboardingHero on the Learning Hub renders the checklist with progress, per-step CTAs, and a dismiss control.

Provider and Onboarding components are enabled in the React Compiler.

Stacked PR — base of the series. Followed by the Onboarding Pill (#2440) and the Onboarding Welcome Page (#2435).

Related Issue and Pull requests

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

Stacked: #2440 → #2435

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 (if applicable)

image.png

image.png

Test Instructions

  1. As a fresh user (or after resetting onboarding settings), open the Learning Hub — the checklist should show 0/4 complete.
  2. Complete a guided tour, create a pipeline, and execute a run — each should tick off without a reload (creation is event-driven).
  3. Click the docs CTA — read the docs should tick.
  4. Reload — progress should persist (backed by user settings, not localStorage).
  5. Dismiss the card, reload, and restore it — dismissal state should persist too.

Additional Comments

The provider exposes isReady (queries settled, for routing) vs isResolved (backend resolved + state loaded, for gating visible UI). The downstream pill/welcome PRs rely on this distinction to avoid flicker.

This was referenced Jun 17, 2026
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
@camielvs Graphite App

camielvs commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

@camielvs camielvs mentioned this pull request Jun 17, 2026
Merged
3 tasks
@camielvs camielvs added the #gsd:50583 Learning Hub label Jun 17, 2026 — with Graphite App
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from c455af7 to fddfd22 Compare June 17, 2026 20:56
@github-actions

github-actions Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown

🎩 Preview

A preview build has been created at: 06-17-feat_onboarding_checklist/f19e318

@camielvs camielvs added the #gsd:50583 Learning Hub label Jun 17, 2026
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch 5 times, most recently from 247aa01 to a27cdb0 Compare June 18, 2026 22:35
This was referenced Jun 18, 2026
Merged
Merged
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from a27cdb0 to 72eadf3 Compare June 19, 2026 02:09
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 65047a8 to 1823626 Compare June 19, 2026 02:25
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch 4 times, most recently from ebc0b79 to 3b09b65 Compare June 19, 2026 17:40
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 1823626 to f6fe1e5 Compare June 19, 2026 18:49
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 3b09b65 to 30b5b30 Compare June 19, 2026 18:49
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 2ac75f1 to 92f5898 Compare June 26, 2026 21:50
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch 2 times, most recently from 1c9c02e to dd64845 Compare June 26, 2026 22:00
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 92f5898 to 954c86b Compare June 26, 2026 22:00
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from dd64845 to 477bb93 Compare June 26, 2026 23:01
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 954c86b to afe7751 Compare June 26, 2026 23:01
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch 2 times, most recently from cd2d469 to 07759d0 Compare June 26, 2026 23:42
maxy-shpfy
maxy-shpfy reviewed Jun 28, 2026
View reviewed changes
Comment thread react-compiler.config.js
maxy-shpfy
maxy-shpfy reviewed Jun 28, 2026
View reviewed changes
Comment thread src/providers/OnboardingProvider/steps.ts
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 07759d0 to 216959b Compare July 6, 2026 17:59
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch 2 times, most recently from 39f9cd8 to 32d29d1 Compare July 6, 2026 18:05
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 216959b to 0534c0e Compare July 6, 2026 18:05
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 32d29d1 to 97b3e03 Compare July 6, 2026 18:34
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch 2 times, most recently from 71d527a to 4384397 Compare July 6, 2026 19:14
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 97b3e03 to 9ee3221 Compare July 6, 2026 19:14
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 4384397 to 8d51c69 Compare July 6, 2026 19:26
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 024a52c to 936b794 Compare July 6, 2026 20:01
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 8d51c69 to 0413554 Compare July 6, 2026 20:01
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 936b794 to 695a330 Compare July 6, 2026 20:59
@camielvs
camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 0413554 to 1963c2e Compare July 6, 2026 20:59
@camielvs
camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 695a330 to 12a4a92 Compare July 6, 2026 21:15
@camielvs camielvs mentioned this pull request Jul 7, 2026
Merged
5 tasks
Mbeaulne
Mbeaulne reviewed Jul 7, 2026
View reviewed changes
Comment thread src/providers/OnboardingProvider/onboardingProgress.ts

return (next: OnboardingProgress) => {
if (!hasBackend) return;
queryClient.setQueryData(queryKey(backendUrl), next);

@Mbeaulne Mbeaulne Jul 7, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤖 This is an AI-generated code review comment.

usePersistOnboardingProgress takes a full OnboardingProgress object and writes it directly into the query cache/server. Callers build that object from whatever progress value they currently have, so two onboarding completions close together can race and clobber each other. For example, if markDocsRead and create_pipeline both start from the same cached progress, whichever PATCH/cache write happens last can overwrite the other step back to false.

Suggestion: make the persistence path merge against the latest cached progress before writing, or expose narrower helpers like persistStepCompleted(stepId) / persistDismissed() that read the latest query data and patch only the changed field. That keeps independent onboarding updates from losing each other.

@camielvs Graphite App

camielvs commented Jul 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

Merge activity

  • Jul 7, 5:57 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Jul 7, 7:21 PM UTC: Graphite rebased this pull request as part of a merge.
  • Jul 7, 7:25 PM UTC: @camielvs merged this pull request with Graphite.

camielvs and others added 2 commits July 7, 2026 19:20
@camielvs
feat: Onboarding Checklist
f9775a2
@camielvs @claude
address pr feedback
f19e318 
- Render OnboardingHero once, drive placement via CSS order toggle
- Document why derived onboarding steps don't emit step.completed
- Reconcile onboarding progress cache on PATCH failure via onError

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Mbeaulne Mbeaulne Mbeaulne approved these changes
@maxy-shpfy maxy-shpfy Awaiting requested review from maxy-shpfy

Assignees

No one assigned

Labels

#gsd:50583 Learning Hub

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@camielvs @Mbeaulne @maxy-shpfy