Web application demo mode or Introduction mode

Question

I have a web-app with multiple functionalities and each functionality has multiple workflow/process. For example, Workflow A has Steps A => Step F, Workflow B has Steps A1 => Steps G1 and many more workflows. I hope I am able to explain my requirement.

The web-app is written in Angular 6. My task is to create a tutorial mode for all these workflows/processes which provides a guided tour an end-user.

My idea is influenced by introjs library. The web components should show a popup with instructions, a previous button, and a next button. This can be imagined as a finite state machine with only previous and next actions. The previous and next action takes me to a new state.

I have thought about using State Design Pattern, however, since I have multiple workflows with multiple steps, I am assuming that the child state class instances will cause class-explosion for each step.

1. How should I mitigate this issue?
2. Is there any other design pattern that should complement State pattern?
3. or, Is there any other way to tackle this?

I am new to the Design Pattern game and would appreciate your advice.

Answer 1

... however, since I have multiple workflows with multiple steps, I am assuming that the child state class instances will cause class-explosion for each step.

Using the Decorator Pattern to inject the additional popup instruction could help avoiding such class-explosion in implement each and every state separately.

In application demo, or introduction mode you'll add the necessary decorator classes, which manage to show the appropriate popup dialogues befor the user takes the next step to change the state with your regular workflow.

The decorator classes would simply inherit the State classes from the regular workflow, and override the transitional functions to get to the next or previous state.

To setup your application state machine in different modes, you can use any kind of Factory Pattern (like e.g. Abstract Factory or Builder).