### 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 :gem: [Specs](https://gitlab-org.gitlab.io/gitlab-design/hosted/dimitrie/masking-variables-ce%2313784-spec-previews/) | What | Mockup | |------|--------| | Project variable settings |  | | Variable creation modal |  | | Variable creation modal error |  |