Add validate tab popover and `NEW` badge
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 |
|
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
- Enable the
simulate_pipeline
feature flag (rails c
>Feature.enable(:simulate_pipeline)
) - Go to the pipeline editor (CI/CD > Editor)
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Mireya Andres