Skip to content

Add validate tab popover and `NEW` badge

Mireya Andres requested to merge validate-tab-ui into master

What does this MR do and why?

For #337282 (closed)

This adds two UI behavior to the pipeline editor's Validate tab:

  • A popover appears when hovering over the help icon. This popover links to the help docs and a feedback issue.
  • If this is the user's first time seeing the Validate tab, the tab will have a NEW badge appear in the title. The badge will disappear once the user leaves the tab. We set a key in local storage to flag the dismissal.

No changelog trailers added since this is under a dev feature flag (simulate_pipeline).

Feature Breakdown

UX review was done in !88630 (closed) and we've got approval, but because the MR ended up being quite big I am breaking the it down further into two parts so it's easier to give it a frontend review. This is part 2 of the aforementioned MR.

frontend MR
Introduce feature flag to replace Lint tab with Validate tab in the pipeline editor !89497 (merged)
Add popover and NEW badge to the Validate tab 👈 you are here
Add simulation functionality to the Validate tab TODO
Roll out feature flag #364257 (closed)

Screenshots or screen recordings

Screen_Recording_2022-06-16_at_13.30.02

How to set up and validate locally

  1. Enable the simulate_pipeline feature flag (rails c > Feature.enable(:simulate_pipeline))
  2. Go to the pipeline editor (CI/CD > Editor)
  3. Click on the Validate tab.
    • A popover should appear when hovering over the help icon.
    • The NEW badge should disappear when exiting from the Validate tab.
    • If you refresh the page after dismissing the NEW badge, the badge should not appear again.

MR acceptance checklist

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

Edited by Mireya Andres

Merge request reports