Add interactivity in Course tour steps (focus on block/element/options etc, insert block etc)

[Imran92]

Goal

While taking the Course tour, a step may have side effects. For example, when we Go to the Course Outline step, the Course Outline block should get selected and focused on. When we reach the Lesson editing step, the first lesson should get selected.

Also, if the focus element is out of view, it should scroll to bring it inside view.

Full completion depends on https://github.com/Automattic/sensei/issues/7444. To complete this card in parallel to 7444, we can just add two dummy Previous and Next buttons on the screen (maybe in the sidebar) for now and implement this functionality.

Later, under https://github.com/Automattic/sensei/issues/7455 we will remove the dummy button and bind these interactions with the intended buttons.

The structure adopted here should be in sync with https://github.com/Automattic/sensei/issues/7478

Context [Optional]

The target steps are these https://github.com/Automattic/sensei/issues/7445

This is an extra functionality from Sensei that doesn't exist in the GB or Woo product tour. So we have to implement it.

A possible way of doing this can be adding an optional property in each of the tour step the value of which will be a callback function. Lets say, the name of the property is, 'interactivityCallback'. So, when a step is rendered, this property function will be invoked. And this function can have code like the following that'll create the interactivity we want. For example, like the following code for focus -

const tourSteps = [
	{
		stepId: 'course-outline',
		title: 'Some Title',
		description: 'Some description',
		interactivityCallback: () => {
			dispatch( 'core/editor' ).selectBlock( courseOutlineBlock.clientId ); // Focuses on the Course List block.
		},
	},
	......
];

This is just a suggestion to explain the requirement. But we can implement it in any way we see fit.

The following are the steps with their required interactivity -

const tourSteps = [
	{
		title: 'Welcome to the Course Outline block',
		description: 'Take this short tour to learn how to create your course outline right in the editor. Click an option in the block to get started.',
		interactivity: 'Focus on the Course outline block',
	},
	{
		title: 'Renaming an existing lesson',
		description: 'Click on an existing lesson to select it. Then give it a new name.',
		interactivity: 'Focus on the first lesson inside the Course outline block, make the cursor blip',
	},
        {
		title: 'Adding a module',
		description: 'A module is a container for a group of related lessons in a course. Click + to open the inserter. Then click the Module option.',
		interactivity: 'Course outline block’s inserter with focus on Module',
	},
	{
		title: 'Adding a new lesson',
		description: 'Click + to open the inserter. Then click the Lesson option.',
		interactivity: 'Focus on the inserter + button inside the Course outline block, maybe opening the context menu',
	},
	{
		title: 'Deleting a lesson',
		description: 'Use the Options menu in the toolbar to delete a selected lesson.',
		interactivity: 'Focus on the Options menu in the toolbar. If no lesson exists, first insert a new lesson and then open the toolbar',
	},
	{
		title: 'Saving lessons',
		description: 'Click the “Save to edit lesson” option in the toolbar to save all lessons.',
		interactivity: 'Open and focus on the Save to edit lesson button in the toolbar',
	},
	{
		title: 'Editing a lesson',
		description: 'Use the “Edit lesson” option in the toolbar to navigate to the lesson editor and add your content.',
		interactivity: 'Open and focus on the Edit lesson button in the toolbar, if no lesson exists, first insert a new lesson and then open the toolbar',
	},
        {
                title:'Congratulations!',
                description: 'You've mastered the basics. View the [course outline docs](https://senseilms.com/documentation/courses/#course-outline) to learn more. Restart tour'
                interactivity: 'The first URL should take the user to the doc page. Clicking on Restart Tour URL should take the user to the first step'
        },
];

Scope

• Only the happy path. If the user has removed lessons, and the next step requires a lesson to be there, insert a lesson. Assume that the user has already clicked on the AI outline generation or Blank outline option.

Out of Scope

• Conditional interactions
• Showing a spotlight functionality like Woo's product tour

Acceptance Criteria

Scenario: Happy Path Given I have opened a Course When I am taking the Tour and going through the steps Then I can see the interactivity of each steps taking place

Resources

No response