Enable configuration of intro flows per level by molly-moen · Pull Request #71424 · code-dot-org/code-dot-org

molly-moen · 2026-03-17T20:02:23Z

This allows levelbuilders to set which intro flows are available on a given level. Each lab has a set of intro flows that it can show. Some intro flows will not be available for levelbuilders to trigger, because they will be shown the first time a user encounters them (for example, Sketch Lab onboarding). When an intro flow is available on a level, we will only show it to the user if all other requirements to show it are met; all intro flows will only be shown once per user, per browser, and some flows have additional requirements (such as validation requiring that validation exists on the level).

This PR includes:

New level editing setup. As of now only python lab and web lab 2 have intro flow configuration enabled, as those were the only labs using the resource panel onboarding and validation flows.
Consolidated configuration of intro flows (productToursPerLab.ts). Additional lab2 intro flows should have a configuration added to this file.
Consolidated logic for showing flows. Previously the logic for showing onboarding and validation was spread among multiple files, now it's entirely in useResourcePanelShepherdTours.
Unit tests for useResourcePanelShepherdTours and productToursPerLab

Per request from product/curriculum, it is by design that now the onboarding and validation flows will not show up by default. They will need to be turned on by curriculum after this PR goes in.

Note: a lot of lines of this PR are tests!

Editing screenshots

Python Lab

Web Lab 2

Links

Jira: AFL-518

Testing story

Tested locally and with unit tests.

Copilot

Pull request overview

This PR adds per-level configuration for Lab2 “intro flows” (product tours) by introducing a product_tours level property, wiring it into the level editor UI, and updating client-side tour gating logic to respect the per-level setting.

Changes:

Add a level editor section (“Product Tour Settings”) that saves selected tours into level[product_tours].
Add shared product-tour configuration/gating (ToursPerLab, isTourEnabledOnLevel) and update Resource Panel + Sketchlab tours to use it.
Add unit tests for the new gating logic and Resource Panel tour behavior.

Reviewed changes

Copilot reviewed 19 out of 21 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
dashboard/app/views/levels/editors/fields/_product_tour_settings.html.haml	New level editor UI section that mounts React editor and passes initial settings/app name via script data.
dashboard/app/views/levels/editors/_weblab2.html.haml	Adds the new Product Tour Settings editor section to Web Lab 2 levels.
dashboard/app/views/levels/editors/_pythonlab.html.haml	Adds the new Product Tour Settings editor section to Python Lab levels.
dashboard/app/models/levels/level.rb	Adds `product_tours` to serialized properties so it’s permitted and persisted.
dashboard/app/controllers/levels_controller.rb	Parses `product_tours` JSON param into a first-order properties member on save.
apps/webpackEntryPoints.js	Registers the new level editor webpack entrypoint.
apps/src/sites/studio/pages/levels/editors/fields/_product_tour_settings.js	Mounts the React-based Product Tour Settings editor in levelbuilder.
apps/src/lab2/productTours/productToursPerLab.ts	Defines tour IDs/config per lab + the core `isTourEnabledOnLevel` gating helper.
apps/src/lab2/productTours/useResourcePanelShepherdTours.ts	Updates Resource Panel tour gating to depend on per-level `productTours`.
apps/src/lab2/productTours/onboardingTourShepherdSteps.ts	Adds Shepherd steps for the Resource Panel onboarding tour.
apps/src/lab2/productTours/validationTourShepherdSteps.ts	Adds Shepherd steps for the Resource Panel validation tour.
apps/src/lab2/views/components/Instructions/ResourcePanel/index.tsx	Removes boolean tour props and sources tour eligibility from level properties.
apps/src/lab2/types.ts	Adds `productTours?: string[]` to `LevelProperties`.
apps/src/sketchlab/useSketchlabShepherdTour.ts	Gates Sketchlab tour availability via `isTourEnabledOnLevel`.
apps/src/sketchlab/SketchlabView.tsx	Passes `levelProperties.productTours` into the Sketchlab tour hook.
apps/src/codebridge/InfoPanel/InfoPanel.tsx	Removes now-deleted ResourcePanel tour flag props.
apps/test/unit/lab2/productTours/productToursPerLabTest.ts	Unit tests for `isTourEnabledOnLevel`.
apps/test/unit/lab2/productTours/useResourcePanelShepherdToursTest.ts	Unit tests covering Resource Panel tour availability + analytics callbacks.
apps/src/lab2/levelEditors/productTourSettings/EditProductTourSettings.tsx	React editor UI for selecting level-triggered tours and writing hidden field payload.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

fisher-alice

Nice! Just left a few minor comments.

fisher-alice · 2026-03-19T18:11:31Z

apps/src/lab2/productTours/onboardingTourShepherdSteps.ts

Do we rename files and remove 'Shepherd' since you've removed introJS?

Also, I think we can remove resourcePanelTourHelpers.ts and the corresponding loc strings. (maybe as a follow-up)?

Yeah I will do that cleanup as a follow-up

Sounds good!

fisher-alice · 2026-03-19T18:14:28Z

apps/src/lab2/productTours/productToursPerLab.ts

+  // when the user first reaches a level with the tour enabled. If false, the tour will be triggered the first time
+  // the user reaches a lab that has that tour available.
+  triggeredByLevel: boolean;
+  // Description shown to level editors. Not necesarily if triggeredByLevel is false.


Nit: This comment made me pause.
Maybe 'Description shown to level editors if triggeredByLevel is true.' (based on my understanding)

Oh I have a typo there, it should say "Not necessary if triggeredyByLevel is false". The whole tour isn't seen as an option on the level edit page if triggeredByLevel is false. I'll clarify.

fisher-alice · 2026-03-19T18:42:30Z

apps/src/lab2/views/components/Instructions/ResourcePanel/index.tsx

I think we can remove validationTourHelpers.ts now.

will do as a follow-up

fisher-alice · 2026-03-19T18:47:51Z

apps/src/sketchlab/useSketchlabShepherdTour.ts

-    tourAvailable: isToolbarReady,
+    tourAvailable:
+      isToolbarReady &&
+      isTourEnabledOnLevel(


why do we need isTourEnabledOnLevel here?

The reason I have it here is so the logic for whether a tour is shown or not is entirely based on the object in productToursPerLab. If we changed the object to have sketch lab triggered by level we wouldn't need to update this.

Makes sense. Thanks!

fisher-alice · 2026-03-19T18:48:33Z

apps/src/sketchlab/useSketchlabShepherdTour.ts

Could remove sketchlabTourHelpers.ts.

will do as follow-up

fisher-alice · 2026-03-19T18:50:26Z

apps/src/lab2/productTours/productToursPerLab.ts

+export enum ProductTour {
+  ResourcePanelOnboarding = 'resource_panel_onboarding',
+  ResourcePanelValidation = 'resource_panel_validation',
+  SketchlabIntro = 'sketchlab_intro',


Since productTours directory has this list of all lab2 tours including Sketchlab, would it make sense to move sketchlabShepherdTourSteps to this location?

I considered that, but since it's specific to sketch lab I think it makes sense to keep in the sketch lab folder.

molly-moen added 12 commits March 16, 2026 13:33

move tours up and add field to properties

f300dd1

create enum

8a1d834

add tour constants

5fe4af8

fix merge conflict

d80e1cb

move property to level.rb

79777fe

plumbing for editor

cd97622

logic for editor

9579641

fix for parsing

d1c9e88

use config to show tours

870bd3b

refactoring

72f7644

unify logic

9c5c661

add edit fields to python lab

eb5b78a

molly-moen requested a review from Copilot March 17, 2026 20:02

Copilot started reviewing on behalf of molly-moen March 17, 2026 20:07 View session

This comment was marked as duplicate.

Sign in to view

molly-moen added 3 commits March 17, 2026 14:28

copilot and cleanup

f5ec6a7

refactor no tours message

2836b26

refactor show/hide logic

2aac4ee

molly-moen requested a review from Copilot March 17, 2026 22:24

Copilot started reviewing on behalf of molly-moen March 17, 2026 22:25 View session

This comment was marked as duplicate.

Sign in to view

molly-moen added 4 commits March 17, 2026 16:04

more copilot

8029b65

fix up logic

73f96df

unit test checkpoint

7992dd5

add tests for hook

6129df2

molly-moen requested a review from Copilot March 18, 2026 00:08

Copilot started reviewing on behalf of molly-moen March 18, 2026 00:10 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

add descriptions and better display names

9d5651d

molly-moen marked this pull request as ready for review March 18, 2026 18:06

molly-moen requested review from a team March 18, 2026 18:06

fisher-alice approved these changes Mar 19, 2026

View reviewed changes

clearer comment

6a20ef8

molly-moen merged commit 7e9fb30 into staging Mar 19, 2026
5 checks passed

molly-moen deleted the molly/lb-intro-flows branch March 19, 2026 20:35

Conversation

molly-moen commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Editing screenshots

Python Lab

Web Lab 2

Links

Testing story

Uh oh!

This comment was marked as duplicate.

Uh oh!

This comment was marked as duplicate.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

fisher-alice left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

molly-moen commented Mar 17, 2026 •

edited

Loading