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 |
|---|---|
![]() |
![]() |
Issue: #557869 (closed)
EE: true Changelog: added
References
Screenshots or screen recordings
| Before | After |
|---|---|
How to set up and validate locally
- Clone this project: https://gitlab.com/gitlab-examples/security/security-reports
- Run a successful pipeline
- 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

