Dismissal Types(FE): Implement the new design to allow specifying a reason while dismissing vulnerability

Why are we doing this work

Today we don't consistently give users a quick way to add a reason for dismissing a vulnerability; there are quick responses from the main Security Dashboard screens but not other places. This makes the act of writing a comment for every vulnerability that needs to be dismissed a labor-intensive task.

By introducing this change, we're targeting to provide users a way to quickly select a predefined reason for dismissing a vulnerability.

Relevant links

• Parent Epic: &4942 (closed)
• Desired end state: #196976[c2-Vuln-status-flyout_status-change-init.png]

Implementation plan

• frontend From the initial investigation, it seems like our GlDropdown is not able to render nested items. We probably need to extend the current behaviour of the dropdown in https://gitlab.com/gitlab-org/gitlab-ui or add a custom implementation in ee/app/assets/javascripts/vulnerabilities/components/vulnerability_state_dropdown.vue. A possible option could be using the Popper to position the nested list.
• frontend ee/app/assets/javascripts/vulnerabilities/components/vulnerability_state_dropdown.vue needs to store the dismissal reason and emit it in the saveState method. Then the parent component (ee/app/assets/javascripts/vulnerabilities/components/header.vue) will receive the dismissal reason and call Api.changeVulnerabilityState with the reason. The backend needs to update their API to receive the dismissal reason first though. The mutation expects the reasons to be uppercase.
• Update documentation

Note Since the dismissal reasons dropdown is going to be used in multiple places (vulnerability details page, pipeline vulnerability modal, vulnerability report), we may want to create this as a standalone component and roll this out behind a feature flag so that changes are available to all these places simultaneously.

EDIT After internal discussions (shown below), since this is not a widely-consumed use case it's better that we add a custom implementation in ee/app/assets/javascripts/vulnerabilities/components/vulnerability_state_dropdown.vue.

Context

The backend already exposes the dismissal_reasons. This can be used to visualize the info icons popovers #393043 (closed).

Verification steps

1. Go to this vulnerability in vulnerabilities-verification project (feature flag dismissal_reason is enabled in that project)
2. Click status dropdown
3. Verify that the subtext for dismiss action shows "Select a reason"
4. Verify that clicking the dismiss action does not select it
5. Nested dropdown:
   1. Move you mouse over the dismiss action
   2. Verify that a nested dropdown appears with the dismissal reasons
   3. Verify that if your browser is narrow it appears to the left of the standard dropdown
   4. Verify that if your browser is wide it appears to the right of the standard dropdown
   5. Verify that if you move your mouse to the nested dropdown it stays visible
   6. Verify that if you move your move to another status action the nested dropdown disappears
6. Changing state and selection:
   1. Select a dismissal reason
   2. Verify that the dismissal reason and the dismiss action become selected
   3. Verify that the subtext of Dismiss state now mentions the chosen dismissal reason
   4. Verify that the Change status button becomes enabled
   5. Select the needs triage status and verify that the Change status button is disabled again
   6. Select a dismissal reason again and click the Cancel button
   7. Click on the status dropdown again
   8. Verify that the Needs triage status is selected again
7. Select dismissal reason:
   1. Select any dismissal reason
   2. Click the Change status button
   3. Verify that dropdown closes and loading icon is shown
   4. Verify the status description in header is updated to reflect dismissed status and the chosen dismissal reason
   5. Verify that an entry in the discussions at the bottom is added
8. Change dismissal reason:
   1. Click on the status dropdown
   2. Select another dismissal reason
   3. Click the Change status button
   4. Verify that status description in header shows dismissed status with the newly chosen dismissal reason
   5. Note: bug in backend does not add another entry in the discussions with the updated dismissal reason.