Dismissal Types(FE): show dismissal reason description tooltip on hover
Why are we doing this work
There are a couple of dismissal reasons. They each have an extended description which explains more clearly what their purpose is. To guide the user in making the right choice we should show this description in a popover with a help icon. It help icon should only appear on hovering on the reason, to avoid clutter.
Relevant links
- Parent Epic: &4942 (closed)
- Desired end state: #196976[c4_details-dismissal-reason-selection-flow.png]
Implementation plan
-
vue provide & inject dismissal descriptions coming from backend into vulnerability_state_dropdown.vue
-
show help-popover '\~/vue_shared/components/help_popover.vue'
on hover on any reason invulnerability_state_dropdown.vue
Testing
-
Since vulnerability_state_dropdown.vue
uses data-qa-selectors, please runpackage-and-test
job in the MR pipeline manually and check thatgovern
specs are green.
Verification steps
- Go to this vulnerability (feature flag has been enabled in this project)
- Open vulnerability status dropdown by clicking on it
- Move mouse to dismiss status
- Move mouse over each dismissal reason in the nested dropdown and verify that on hover, a help icon appears
- Verify that hovering over the help icon shows a popover with the dismissal reason as title and the extended description as content.
Edited by Lorenz van Herwaarden