Skip to content

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

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 in vulnerability_state_dropdown.vue

Testing

  • Since vulnerability_state_dropdown.vue uses data-qa-selectors, please run package-and-test job in the MR pipeline manually and check that govern specs are green.

Verification steps

  1. Go to this vulnerability (feature flag has been enabled in this project)
  2. Open vulnerability status dropdown by clicking on it
  3. Move mouse to dismiss status
  4. Move mouse over each dismissal reason in the nested dropdown and verify that on hover, a help icon appears
  5. 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