Use SearchSuggestion component for vulnerability report filters
Summary
The following bit is reused across different components:
<gl-filtered-search-suggestion
v-for="project in projects"
:key="project.id"
:value="project"
>
<div class="gl-flex gl-items-center">
<gl-icon
v-if="config.multiSelect"
name="check"
class="gl-mr-3 gl-shrink-0 gl-text-gray-700"
:class="{ 'gl-invisible': !isProjectSelected(project) }"
/>
{{ project.name }}
</div>
</gl-filtered-search-suggestion>
This is used in the following components:
-
ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/project_token.vue
-
ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/activity_token.vue
-
ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/cluster_token.vue
-
ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/image_token.vue
-
ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/status_token.vue
-
ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/severity_token.vue
The search_suggestion.vue
component can be used to abstract this logic.
Edited by Savas Vedova