Add interactivity to lesson steps #7538

renatho · 2024-03-13T18:02:11Z

Resolves #7478
Based off of #7535

Proposed Changes

Add interactivity to lesson tour.
It also adds a new feature to the code, allowing to add a beforeEach to run before each action.

Testing Instructions

Make sure your local env is set to development (to enable the feature flag)
Create a new lesson or open an existing one in the editor (You'll need a new user in case you've closed the tour before, or you can remove the value of the usermeta sensei_tours)
Now go through each of the tour steps
Go both forward and backwards in the tour
Make sure the interactivity works as expected
Check that Add interactivity to course steps #7535 continues working properly

Video

Screen.Recording.2024-03-14.at.15.41.55-2.mov

Pre-Merge Checklist

github-actions · 2024-03-13T18:06:11Z

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit da17671 and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Total Size	Size Diff
`blocks/quiz/index.js`		31.2 kB	+6 B ( +0.02% 🔼 )
`admin/tour/course-tour/index.js`	`wp-block-editor`, `wp-editor`	36.3 kB	+285 B ( +0.8% 🔼 )
`admin/tour/lesson-tour/index.js`	`wp-block-editor`, `wp-edit-post`, `wp-editor`	36.5 kB	+2.3 kB ( +6.73% 🔼 )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

codecov · 2024-03-13T18:12:24Z

Codecov Report

Attention: Patch coverage is 38.15789% with 94 lines in your changes are missing coverage. Please review.

Project coverage is 51.78%. Comparing base (05d19fa) to head (da17671).
Report is 52 commits behind head on trunk.

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk    #7538      +/-   ##
============================================
- Coverage     51.92%   51.78%   -0.15%     
- Complexity    11265    11307      +42     
============================================
  Files           630      640      +10     
  Lines         47683    48115     +432     
  Branches        421      467      +46     
============================================
+ Hits          24759    24914     +155     
- Misses        22587    22822     +235     
- Partials        337      379      +42

Files	Coverage Δ
assets/admin/tour/lesson-tour/index.js	`54.54% <ø> (ø)`
assets/blocks/quiz/quiz-block/quiz-settings.js	`68.42% <0.00%> (ø)`
assets/admin/tour/course-tour/steps.js	`1.85% <25.00%> (-98.15%)`	⬇️
assets/admin/tour/helper.js	`80.00% <83.33%> (ø)`
...ets/admin/tour/components/sensei-tour-kit/index.js	`60.71% <50.00%> (-12.62%)`	⬇️
assets/admin/tour/lesson-tour/steps.js	`32.23% <31.66%> (-67.77%)`	⬇️

... and 15 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d10be87...da17671. Read the comment docs.

…matically

renatho · 2024-03-13T20:17:39Z

assets/admin/tour/helper.js

 /**
 * Performs step actions one after another.
 *
 * @param {Array} stepActions An array of selectors to highlight.
 */
 export async function performStepActionsAsync( stepActions ) {
 	removeHighlightClasses();
+	clearTimeout( stepActionTimeout );


This is to make sure actions won't happen later after moving to different steps because of the setTimeout. Based on the removeHighlightClasses(); call in the previous line, I suppose we can assume that the performStepActionsAsync is a requirement in the actions, right?

Yes I think so in general. Thanks for the improvement! Just added a comment about it here #7538 (comment)

github-actions · 2024-03-13T21:47:55Z

Test the previous changes of this PR with WordPress Playground.

renatho · 2024-03-13T22:30:24Z

assets/admin/tour/components/sensei-tour-kit/index.js

@@ -24,9 +24,16 @@ import { WpcomTourKit } from '@automattic/tour-kit';
 * @param {string}     props.tourName         The unique name of the tour.
 * @param {string}     props.trackId          ID of tracking event (optional). Tracking will be enabled only when provided.
 * @param {TourStep[]} props.steps            An array of steps to include in the tour.
+ * @param {Function}   [props.beforeEach]     A function to run before each step.


It adds a new feature to run something before each step. Similar to what we have in tests to reset or prepare something. In the future, if needed it could have some more events like this.

renatho · 2024-03-13T22:31:27Z

assets/admin/tour/components/sensei-tour-kit/index.test.js

@@ -42,11 +42,17 @@ describe( 'SenseiTourKit', () => {
 						Close
 					</button>
 					<button
-						data-testid="nextButton"
+						data-testid="stepViewOnceButton"


I renamed this one since it's tied to the onStepViewOnce callback, and I added another one tied to the onNextStep callback, so I could use it in the new test.

Makes sense!

github-actions · 2024-03-13T22:32:45Z

Test the previous changes of this PR with WordPress Playground.

github-actions · 2024-03-15T18:09:44Z

Test the previous changes of this PR with WordPress Playground.

github-actions · 2024-03-15T18:45:48Z

Test the previous changes of this PR with WordPress Playground.

github-actions · 2024-03-15T19:13:30Z

Test the previous changes of this PR with WordPress Playground.

renatho · 2024-03-15T19:24:36Z

Thank you for the review, @Imran92! I added a fix for the points 1 and 2: 24de088

About the point 3, I noticed that it only happens if the block is already visible in your viewport but in a bad position (almost out). If it's completely out, Gutenberg will moving it to a good position.

Screen.Recording.2024-03-15.at.16.15.47.mov

As a workaround, I thought of adding a temporary fade in the tour, do the user sees what's behind, but the experience didn't look nice. So I'd consider it as an edge case and just ignore. WDYT? I'm a little afraid to try to manipulate the scroll and be more error-prone in the future (in Gutenberg updates, for example).

Imran92

Thanks for addressing the comments! LGTM!

Just a couple of comments, but I'm approving already.

I've noticed that we are inserting a True/False question still in case the user has a question of that type in the second or later position. Do you think it'll be better we can use the True/False question regardless of the position and insert only as a last resort? I don't have a strong opinion. Current behavior can be okay too.
As we have a number of helper functions on top, do you think we should write some tests for just those functions? Not necessary, but can be good to have.
This one feels a little important to me, because I missed the focus outline multiple times even after knowing it should be there. That is, for Quiz and Question settings, we are highlighting the sidebar. But currently, the outline is only on the left side. So it's not too clear what we are highlighting-

Screen.Recording.2024-03-18.at.4.21.34.PM.mov

Can we somehow focus on the inner section of the side panel?

So we can highlight it with the tour

renatho · 2024-03-18T15:20:02Z

@Imran92! I will still work on the other 2 items, but I already sent a purpose for the last one for you too see what you think.

This one feels a little important to me, because I missed the focus outline multiple times even after knowing it should be there. That is, for Quiz and Question settings, we are highlighting the sidebar. But currently, the outline is only on the left side. So it's not too clear what we are highlighting-

The commits with the changes are:
459a817 62e0b56 5248885

github-actions · 2024-03-18T15:22:47Z

Test the previous changes of this PR with WordPress Playground.

github-actions · 2024-03-18T17:08:17Z

Test the previous changes of this PR with WordPress Playground.

renatho · 2024-03-18T19:49:25Z

@Imran92, for the other 2 items:

I've noticed that we are inserting a True/False question still in case the user has a question of that type in the second or later position. Do you think it'll be better we can use the True/False question regardless of the position and insert only as a last resort? I don't have a strong opinion. Current behavior can be okay too.

Implementation changed in: a125540

As we have a number of helper functions on top, do you think we should write some tests for just those functions? Not necessary, but can be good to have.

I wrote tests to cover the cases there in this commit: 0538655

github-actions · 2024-03-18T19:51:45Z

Test the previous changes of this PR with WordPress Playground.

Imran92

Thanks Renatho! Looks good and works nice!

There's only one small issue I've noticed as a side effect of the last changes. Feel free to work on it separately if you want to. I'm approving already

When we minimize a tour, we remove all the highlighting, just like GB tour's spotlight. I noticed that the suffixed highlights are not getting removed like that-

Screen.Recording.2024-03-19.at.5.55.38.PM.mov

renatho · 2024-03-19T15:13:23Z

Good catch, @Imran92! I didn't realize that.

I fixed it with da17671, and I'm merging this PR. But a post-merge check is welcome, and I could fix anything in another PR if needed.

While working on this, I just realized another bad thing, but I couldn't find any good solution for that. If you don't have any idea too, I think we could live with it. The only thing I could think of is trying to override that hover class to not add the hover style, but it seems very fragile to me, which could cause other issues on Gutenberg updates.

github-actions · 2024-03-19T15:15:45Z

Test the previous changes of this PR with WordPress Playground.

renatho added 2 commits March 13, 2024 15:00

Add quiz block selection when starting the tour

1464a18

Fix JSDoc

e11a515

renatho self-assigned this Mar 13, 2024

renatho changed the base branch from trunk to add/interaction-on-course-step March 13, 2024 18:02

renatho changed the title ~~Add/interaction on lesson step~~ Add interactivity to lesson steps Mar 13, 2024

renatho added 7 commits March 13, 2024 15:29

Open question type selector

fb47be0

Make sure blocks will be selected before proceeding

ba31630

Remove part of the text since we're not selecting the true/false auto…

4fb8925

…matically

Focus on title field

2b8f28c

Focus on description field

c2f2d13

Remove not necessary async

6e7ddf7

Clear previous timers when starting a new one

ad37755

renatho commented Mar 13, 2024

View reviewed changes

Open answer feedback

ba1ad4b

renatho added No Changelog [Project] Onboarding Flow labels Mar 13, 2024

Automattic deleted a comment from github-actions bot Mar 13, 2024

renatho added 2 commits March 13, 2024 19:25

Add beforeEach feature to the SenseiTourKit

ee7c7bb

Make sure answer is closed in all the steps

1d93f36

renatho commented Mar 13, 2024

View reviewed changes

Make sure promise won't get stuck when stopping step

d2a4d4a

renatho added 2 commits March 15, 2024 15:34

Point store references to the store object

4ffac8e

Make sure it will have a boolean question as the first question

24de088

Add focus to the correct field

b2f1415

renatho requested a review from Imran92 March 15, 2024 19:24

renatho mentioned this pull request Mar 15, 2024

Add box-shadow back to the Sensei tour #7543

Merged

15 tasks

Imran92 previously approved these changes Mar 18, 2024

View reviewed changes

renatho added 3 commits March 18, 2024 12:09

Add wrapper to quiz settings

459a817

So we can highlight it with the tour

Add new argument for a modifier to the highlight class

62e0b56

Add a modifier to some tour highlight to be better displayed

5248885

renatho dismissed Imran92’s stale review via 5248885 March 18, 2024 15:16

Use first boolean question of the quiz

a125540

Add tests for the steps helper functions

0538655

renatho requested a review from Imran92 March 18, 2024 19:49

Imran92 previously approved these changes Mar 19, 2024

View reviewed changes

Fix modifier removal

da17671

renatho dismissed Imran92’s stale review via da17671 March 19, 2024 15:10

renatho merged commit 6190ee1 into trunk Mar 19, 2024
23 of 25 checks passed

renatho deleted the add/interaction-on-lesson-step branch March 19, 2024 15:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add interactivity to lesson steps #7538

Add interactivity to lesson steps #7538

renatho commented Mar 13, 2024 •

edited

Loading

github-actions bot commented Mar 13, 2024 •

edited

Loading

codecov bot commented Mar 13, 2024 •

edited

Loading

renatho Mar 13, 2024 •

edited

Loading

Imran92 Mar 15, 2024

github-actions bot commented Mar 13, 2024

renatho Mar 13, 2024

Imran92 Mar 15, 2024

renatho Mar 13, 2024

Imran92 Mar 15, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 15, 2024

renatho commented Mar 15, 2024

Imran92 left a comment

renatho commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

renatho commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

Imran92 left a comment

renatho commented Mar 19, 2024 •

edited

Loading

github-actions bot commented Mar 19, 2024

Add interactivity to lesson steps #7538

Add interactivity to lesson steps #7538

Conversation

renatho commented Mar 13, 2024 • edited Loading

Proposed Changes

Testing Instructions

Video

Pre-Merge Checklist

github-actions bot commented Mar 13, 2024 • edited Loading

WordPress Dependencies Report

codecov bot commented Mar 13, 2024 • edited Loading

Codecov Report

renatho Mar 13, 2024 • edited Loading

Choose a reason for hiding this comment

Imran92 Mar 15, 2024

Choose a reason for hiding this comment

github-actions bot commented Mar 13, 2024

renatho Mar 13, 2024

Choose a reason for hiding this comment

Imran92 Mar 15, 2024

Choose a reason for hiding this comment

renatho Mar 13, 2024

Choose a reason for hiding this comment

Imran92 Mar 15, 2024

Choose a reason for hiding this comment

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 15, 2024

renatho commented Mar 15, 2024

Imran92 left a comment

Choose a reason for hiding this comment

renatho commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

renatho commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

Imran92 left a comment

Choose a reason for hiding this comment

renatho commented Mar 19, 2024 • edited Loading

github-actions bot commented Mar 19, 2024

renatho commented Mar 13, 2024 •

edited

Loading

github-actions bot commented Mar 13, 2024 •

edited

Loading

codecov bot commented Mar 13, 2024 •

edited

Loading

renatho Mar 13, 2024 •

edited

Loading

renatho commented Mar 19, 2024 •

edited

Loading