Wizard component 🧙

[peterholmberg]

Wizard 🧙

This is not a proposal for a new component per se, but to start a discussion of moving an already existing component (that now exists in two different repos) to the design system. Reporting is using a wizard for creating reports and we have a plugin that is using the same type of wizard (copied and slightly modified version).

Why is this a good idea?

There are some other teams interested in a wizard to help guide their users through a create flow (alerting is one). It provides smaller bites of a ui instead of a full page with all the fields and knobs, this should make it easier for users to understand what they are expected to do. We also give users the ability to freely move between steps, even if they have not entered valid information for a given step.

The last page of the wizard can be a summary of the information that the user has entered, as well as provide feedback on if that information is valid for saving the entity.

Steps

We'd need to do some investigation to figure out how "smart" this component should be. The above mentioned plugin and Reporting are for example using different approaches to form components and validation, so I don't think we're in a position to dictate how this should work in a first iteration (or ever).

The first iteration could consist of;

1. The stepper, which is the component to the left (could also be a horizontal above the content)
2. The "step", ie the area where we want to render the components for a given step
3. Buttons for navigation to the previous or next step

We could use this first iteration to dog food it back to reporting and the plugin to see how well it works.

[staton-hyse11]

Recently, there have been discussions about improving the wizard pattern(s) within Grafana. @vesnadean has been leading the redesign of wizards and @torkelo has had some thoughts about improvements too. We should try to capture them all here

[lukasztyrala]

@peterholmberg fyi, we are working on the exact project/component with @vesnadean, @nadinevehling and Deyan. We will write a proposal in the next 2 weeks. We'd be super happy to share it with you. :-)

[peterholmberg]

Thanks @lukasztyrala, I'm aware that you have been working on this in the ux team. Just wanted to kick off the discussion here ✌️

[gelicia]

Hello, as you may have heard, we are transitioning away from using discussions to discuss feature requests. We are migrating this discussion to an issue and closing the discussion. The issue is #82571. Feel free to continue the discussion around this there. Thank you!