Add tooltip support to search suggestion

What does this MR do and why?

Add tooltip support to search suggestion. This is needed for the upcoming validity check filter (design: #479341[Validity_check_filter.png])

Example V1 Example V2
image image

Issue: #557869 (closed)

EE: true Changelog: added

References

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. Clone this project: https://gitlab.com/gitlab-examples/security/security-reports
  2. Run a successful pipeline
  3. Apply this patch to see the sample of the tooltip
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/reachability_token.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/reachability_token.vue
index a7092491e6a924..e45a759ff04664 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/reachability_token.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/reachability_token.vue
@@ -77,6 +77,7 @@ export default {
     {
       value: 'IN_USE',
       text: s__('SecurityReports|Yes'),
+      tooltipText: 'HELP',
     },
     {
       value: 'NOT_FOUND',
@@ -116,6 +117,7 @@ export default {
           :text="item.text"
           :selected="item.value === selectedReachability"
           :data-testid="`suggestion-${item.value}`"
+          :tooltip-text="item.tooltipText"
         />
       </template>
     </gl-filtered-search-token>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search_v2/tokens/reachability_token.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search_v2/tokens/reachability_token.vue
index a70796ee192807..09f91e5307b6be 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search_v2/tokens/reachability_token.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search_v2/tokens/reachability_token.vue
@@ -72,6 +72,7 @@ export default {
     {
       value: 'NOT_FOUND',
       text: s__('SecurityReports|Not found'),
+      tooltipText: 'HELP'
     },
     {
       value: 'UNKNOWN',
@@ -100,6 +101,7 @@ export default {
         :text="item.text"
         :selected="item.value === selectedReachability"
         :data-testid="`suggestion-${item.value}`"
+        :tooltip-text="item.tooltipText"
       />
     </template>
   </gl-filtered-search-token>

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #557869 (closed)

Edited by Samantha Ming

Merge request reports

Loading