Create Stepper UI component for integration wizard
Release notes
Problem to solve
There are multiple different types of alerting integrations. Each type of integration requires multiple steps for configuration. Setting up multiple integrations of different types can be time consuming and hard to manage. To ease this pain we will be creating an Integration Wizard.
A wizard is a UI pattern that guides users through a set of pre-defined steps in a particular order. It uses a stepper component to organize the different decisions that a user needs to make. This component also indicates progress to the user as they work through a series of decisions. In summary, the stepper UI component consists of:
- Series of numbered steps that can be customized based on the tasks or decision the user needs to make
- Progress indicator telling the user what step they are on
The stepper component with be generic so that it can be used throughout GitLab in other product areas. Implementation of the integration wizard using the stepper component will be done in #245338 (closed).
Intended users
User experience goal
User is guided through each decision required to set-up different types of integrations. Each decision they need to make is displayed in the order they need to make them.
Proposal
Build a new UI component called a Stepper to be used in the Integration Wizard.
We will be utilizing the design from gitlab-org/gitlab-services/design.gitlab.com#610 for this issue. Specifically, we'll be building out the Horizontal (non-linear) stepper component from this Figma file.
The component itself looks like this:
Note: this issue is for creating the component and adding it to GitLab UI. We will use this component to build out the integration wizard as part of #245338 (closed).
Further details
This work supports the Incident Management direction.
Permissions and Security
Documentation
Documentation required. This is be a new section under the Incident Management main nav item called Integrations.