Skip to content

Add tooltip to project variables in CI/CD settings

Frédéric Caplette requested to merge 344212-project-variables-fields-desperately-need-to-be-wider-for-a-good-ux-experience into master

What does this MR do and why?

Given a user might have a very long secret key in their CI/CD configuration, we are adding a tooltip so that at the very least if the secret is very long, hovering it on it will reveal the full name.

While I was at it, I also adjusted the spacing of the empty variables message, as there was a margin bottom that made the spacing under the text bigger than above, which was driving me nut 😅 I also refactored some code to use gitlab utilities for CSS, removed unused CSS and used better test selectors.

Screenshots or screen recordings

Before After
Screen_Shot_2022-02-02_at_3.42.28_PM Screen_Shot_2022-02-02_at_3.06.15_PM
Screen_Shot_2022-02-02_at_2.50.00_PM Screen_Shot_2022-02-02_at_2.56.42_PM

How to set up and validate locally

  1. Go to Settings => CI/CD
  2. Find the variables section
  3. Notice that when empty, the space between the text is equal above and below
  4. Insert a variable with a short name
  5. Hover on it
  6. Notice that the tooltip appears
  7. Insert a variable with a long name that will get cut out
  8. Hover on it
  9. Notice that the tooltip appears and shows the full name

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #344212 (closed)

Edited by Frédéric Caplette

Merge request reports