Improve UI for masking of variables in CI settings
Problem to Solve
Expanding on and inspired by gitlab-ce#13784, improve the user interface for creating and editing variables in CI settings by displaying the variables in a read-only table and moving editing actions into a modal.
Design solution
- Restructure UI section with a dedicated table (similar to new approvals UI)
- Adding variables will be done through a dedicated modal exposing the configurable options that way
- Validation can be done on submit (doesn't require to be done in real time, though nice if possible)
- Masked variables are not accepted unless they fulfill regexp requirements
- Masking variable flag will be enabled by default
- Copy changes
What | Mockup |
---|---|
Project variable settings | |
Variable creation modal | |
Variable creation modal error |