Variables: UI improvements to close competitive gaps
Based on the discussion on the issue https://gitlab.com/gitlab-org/ci-cd/pipeline-security-group/-/issues/126#note_1369439175, this epic's goal is to improve overall usability of using and working with Variables.
| Priority for [KR](https://gitlab.com/gitlab-com/gitlab-OKRs/-/work_items/2622) |💔Problem | ✨Proposal | 📝Issue | Workflow |
|-------|---------|----------|-------|---------|
| | <ul>No indication for group variables if the inherited variables are protected</ul><ul><img src="/uploads/2e3662edd60157439c5e644cf8bd29fc/Screenshot_2023-05-03_at_9.42.11_PM.png"></ul> | | https://gitlab.com/gitlab-org/gitlab/-/issues/222367/ | ~"workflow::complete" |
| ✅ | <ul>Frontend: Improve variables table layout: Changing layout of the table to remove Type and replace Options with Attributes</ul><ul><img src="/uploads/b119994818874281cf700a4f6138005a/Screenshot_2023-05-03_at_9.42.11_PM.png" ></ul> |  | https://gitlab.com/gitlab-org/gitlab/-/issues/410383 |<ul>~"workflow::complete"</ul>|
| | <ul>Tables don't communicate which variables are overriden</ul><ul><img src="/uploads/b119994818874281cf700a4f6138005a/Screenshot_2023-05-03_at_9.42.11_PM.png" ></ul> |  | https://gitlab.com/gitlab-org/gitlab/-/issues/410392 |<ul>~"workflow::planning breakdown"</ul><ul>Max: I don't even know if we have a way to detect this :thinking: Let me bring this out during our `Variables AMA` on Monday. Will keep you posted.</ul>|
| | <ul>No validation message for the Key field while creating a new variable to indicate if the new variable can potentially override a predefined or inherited variable</ul><ul><img src="/uploads/96c4355a47695f3d3228f4929477f169/Screenshot_2023-05-03_at_9.44.26_PM.png"></ul> | | [Issue](https://gitlab.com/gitlab-org/gitlab/-/issues/410220) | ~"workflow::complete" |
| | <ul>No validation message for the value field while creating a variable to suggest the limitation for character limit for masking</ul><ul><img src="/uploads/d51f2431b6eae7ce28c08050f75a2776/Screenshot_2023-05-03_at_9.44.02_PM.png"></ul> | | https://gitlab.com/gitlab-org/gitlab/-/issues/365934 | ~"workflow::complete" |
| | Improve the variables table layout to clearly represent the visual hierarchy | In the issue | https://gitlab.com/gitlab-org/gitlab/-/issues/403176 | ~"workflow::solution validation", moved over to epic https://gitlab.com/groups/gitlab-org/-/epics/12081
| | <ul>The help icons should not lead directly to the docs. We need popovers to help users without leaving the page</ul><ul><img src="/uploads/ae4aba7d168296b289bafe8950c6f0ba/Screenshot_2023-05-03_at_9.52.02_PM.png"></ul> | | https://gitlab.com/gitlab-org/gitlab/-/issues/499541+ |
| ✅ | <ul>Reverse the order of items in `add variable` modal</ul> |  | https://gitlab.com/gitlab-org/gitlab/-/issues/410414/ |
epic