Improve UX for managing many environment variables

Problem to solve

A customer reported the following:

Are there any improvements planned for the CI/CD environment variables management? It very hard to use (UX wise) but we rely a lot on it so this is currently quite painful for us.

- If there are many environment variables the list gets totally confusing with so many inputs, buttons and options, etc.

- Most of our environment variables have a long name but the input field is too short so that they’re not fully visible. This way you end up always clicking into the input fields and start scrolling around when you're searching for a certain variable

- Also, we store secrets like certificates and similar but therefore the value input field is by far too small. I know it’s resizable in the height but the width is by far too small. If you’ve any typo in your text it’s almost impossible to detect it

- Not sure since when, but when modifying some value and hitting save from time to time it doesn’t save the data. Then you’ve to refresh the browser window again and start over from scratch

- When adding new items but also modify already other existing ones to the same time we often get an error like “duplicated entries”

- The table uses only half of the window space (see red line screenshot), screenshot can be found here https://gitlab.com/gitlab-com/customer-success/sa-service-desk/issues/1143 (internal)

More or less it feels like that the only safe way to modify an environment variable is to open the page, reveal the values, modify a single one, hit save, reload the page and start over again for the next environment variable you want to modify. Hence, any improvements to the UX of editing environment variables would be gladly appreciated. To be honest, using this feature in its current state is just kind of frustrating.

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

Specs

What	Mockup
Project variable settings
Variable creation modal
Variable creation modal error

Workarounds

1. GitLab API to manage variables

• https://docs.gitlab.com/ee/api/project_level_variables.html
• https://docs.gitlab.com/ee/api/group_level_variables.html

2. Change personal settings and choose Fluid for the Layout:

Now the user experience should be better

Links / references

Ultimate customer is affected https://gitlab.my.salesforce.com/0016100000fC0Fj

internal customer issue https://gitlab.com/gitlab-com/customer-success/sa-service-desk/issues/1143 cc @brendan @k33g @dimitrieh @mnichols1 @mvanremmerden

added CI variables UX customer typefeature labels

added to epic &876 (closed)

changed milestone to %Backlog

added devopsverify frontend + 1 deleted label

added [deprecated] Accepting merge requests label

added Category:Continuous Integration label

@brendan @teemo there has been a proposal before to improve this. This has since been scoped off to a new issue https://gitlab.com/gitlab-org/gitlab-ce/issues/59318. I'll comment this at https://gitlab.com/gitlab-org/gitlab-ce/issues/61008 as well.

The design needs slight modifications, but in general should solve the problems listed here.

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

Specs

What	Mockup
Project variable settings
Variable creation modal
Variable creation modal error

@brendan The design will need small modifications to make sure it solves all the problems noted above.

changed the description

added UI polish label

@jlenny see feedback at https://gitlab.slack.com/archives/C03MSG8B7/p1562882302013000 for another push towards prioritizing this issue

2. Not seen here, but when the values are revealed, their input field is slightly taller than the input fields for Key
3. The two things I actually care about, the variable name and the value, are in boxes so small that they almost always get truncated, making it difficult to find what I'm looking for.

cc: @rspeicher

@dimitrieh Thanks for the ping. As an gitlab-ce~9594407, this is also quite painful for us as we rely heavily on CI/CD variables in release-tools, ChatOps, and our deploy tooling.

added internal customer label

added grouppipeline execution label

changed milestone to %Backlog

It looks like those changes will do more harm than good. It will render using the UI to manage variables completely unusable because if you need to add a lot of variables it will be harder to do than it is now.

For myself in the meantime, I've used TamperMonkey to remove the cruft:

Now, clearly this is bad UX because it's unclear what "State" means for the toggle switch, but if you changed that header to Protected?, I think that gets us most of the way there. I forgot about those two fields I deleted.

marked this issue as related to #26463 (closed)

mentioned in issue #26463 (closed)

mentioned in issue #27480 (closed)

marked this issue as a duplicate of #27480 (closed)

closed