Skip to content

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