Improve UI for masking of variables in CI settings
Problem to Solve
Expanding on and inspired by #13784 (closed), 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 |  |