Skip to content

feat: Onboarding Checklist#2421

Open
camielvs wants to merge 2 commits into
06-12-feat_learning_hub_-_milestone_2from
06-17-feat_onboarding_checklist
Open

feat: Onboarding Checklist#2421
camielvs wants to merge 2 commits into
06-12-feat_learning_hub_-_milestone_2from
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
Open
Open
Open
Open
Open
Open
Open
Open
Open
@camielvs Graphite App

camielvs commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

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

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

@camielvs camielvs mentioned this pull request Jun 17, 2026
Open
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/07759d0

@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
Open
Open
@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-17-feat_onboarding_checklist branch from 12d1304 to db9a9fd Compare June 26, 2026 17:20
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 0667d58 to b5fde41 Compare June 26, 2026 17:22
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch 2 times, most recently from a9f00df to fd579d3 Compare June 26, 2026 19:28
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch 2 times, most recently from ee773f8 to dbaaa16 Compare June 26, 2026 19:49
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch from fd579d3 to 2fa0470 Compare June 26, 2026 19:49
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from dbaaa16 to a474725 Compare June 26, 2026 20:52
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch 2 times, most recently from 5d91933 to d867d0f Compare June 26, 2026 21:10
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from a474725 to 69bfd71 Compare June 26, 2026 21:10
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch 2 times, most recently from fc7588d to 3561cca Compare June 26, 2026 21:28
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 3bccd6b to 23cc7a1 Compare June 26, 2026 21:28
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 3561cca to 561b25b Compare June 26, 2026 21:29
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch from 23cc7a1 to 36f3b32 Compare June 26, 2026 21:29
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch from 561b25b to 835828f Compare June 26, 2026 21:30
@camielvs camielvs force-pushed the 06-12-feat_learning_hub_-_milestone_2 branch 2 times, most recently 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 from 477bb93 to cd2d469 Compare June 26, 2026 23:25
@camielvs @claude
address pr feedback
07759d0 
- 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>
@camielvs camielvs force-pushed the 06-17-feat_onboarding_checklist branch 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
"src/components/Home",
"src/components/Editor",
"src/components/Learn",
"src/components/Onboarding",

@maxy-shpfy maxy-shpfy Jun 28, 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.

This PR adds the hook src/hooks/useDocsVisitTracking.ts, but react-compiler.config.js only enables a hand-picked subset of src/hooks and does not include the new hook. The review checklist treats missing React Compiler coverage for new hooks/components as a High issue, because compiler safety checks and optimization will not run for this hook.

Suggestion: Add "src/hooks/useDocsVisitTracking.ts" to REACT_COMPILER_ENABLED_DIRS, or enable an appropriate hooks directory once it is compiler-clean.

Rule: tangle-ui-review: React Compiler adoption; CLAUDE.md: React Compiler coverage for new hooks/components

maxy-shpfy
maxy-shpfy reviewed Jun 28, 2026
View reviewed changes
Comment thread src/providers/OnboardingProvider/steps.ts
const byId = new Map<OnboardingStepId, OnboardingStepMeta>();
for (const step of raw) {
if (!isStepId(step.id)) {
throw new Error(

@maxy-shpfy maxy-shpfy Jun 28, 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.

parseSteps validates the step id, but the icon field from onboardingSteps.json is accepted with step.icon as IconName. The TypeScript review standard flags as Type casts because they can hide invalid data; a typo in the JSON icon name would still compile and only fail at runtime/render time.

Suggestion: Prefer defining the step metadata in TypeScript with satisfies readonly OnboardingStepMeta[], or add an explicit isIconName guard before storing the icon.

Rule: tangle-ui-review: TypeScript typings — as Type casts are Medium; prefer type guards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maxy-shpfy maxy-shpfy maxy-shpfy left review comments

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.

2 participants

@camielvs @maxy-shpfy