Frontend: Change the pattern and sequence of sub-tasks for adding and editing a variable
Feedback issue: #428807 (closed)
Release notes
Problem to solve
The modal for adding a new variable does not have a logical task-flow associated with it. The fields are placed at the top so users fill them out first, then comes the security settings like protected, masked, etc.. After selecting those, new validation kicks in for the key and value fields. So what was valid before, is invalid now!
To make it task-flow more intuitive, the order of elements and actions need to be completely changed.
Supporting insight
Developer would like an easier way to add multiple variables
Intended users
Anyone with a maintainer permission to be able to add a variable.
User experience goal
The taskflow shouldn't make users revisit the tasks they've already accomplished and keep going back and forth.
Proposal
- Instead of a modal, use a drawer. Its a better choice as it allows users to simultaneously see the variables being added to the list. Even while editing, the feedback is real time.
- Bring the type, environment and security options to the top. Remove sub-header
flags. - Change the variant of
Add variablebutton to default so we don't have 2 primary buttons visible on the screen.
Implementation Plan
This issue will focus on setting up the feature flag and main drawer component with the fields (no validation/form submission yet). The drawer should be able to open/close as expected when the FF is enabled and the user tries to edit or create a CI variable.
In follow-up MRs, we can work on validating the fields and making sure events are emitted correctly.
We can iterate over this issue like so:
| Iteration | MR |
|---|---|
| Setup drawer with feature flag |
|
| Add form validations | #421262 (closed) |
| Implement actions | #421263 (closed) |
| Feature flag rollout | #418005 (closed) |
Further details
Permissions and Security
Documentation
Availability & Testing
Available Tier
Feature Usage Metrics
What does success look like, and how can we measure that?
What is the type of buyer?
Is this a cross-stage feature?
What is the competitive advantage or differentiation for this feature?
Links / references
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.