Frontend - Add filter support to Dependency Lists

TL;DR

Add a "Malware" filter token to the Dependency List filter bar, allowing users to filter by malware package status.

Acceptance Criteria

  • Filter token "Malware" available in the filtered search bar
  • Token options: "Yes" (only malware), "No" (exclude malware)
  • Selecting "Yes" shows only malware dependencies
  • Selecting "No" shows only non-malware dependencies
  • Clearing filter shows all dependencies
  • Filter syncs to URL: ?malware=true or ?malware=false
  • Works on project Dependency List
  • Works on group Dependency List
  • Behind feature flag malicious_package_filters

Implementation Details

Backend Deployment Requirement

The malware filter argument must be deployed to production at least one milestone before this frontend work can be released without a feature flag. Unlike GraphQL fields, filter arguments cannot use the @gl_introduced directive for graceful degradation.

See Multi-version compatibility - When modifying JavaScript/Vue.

Files to Modify

  • ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/ - Create new malware token component
  • ee/app/assets/javascripts/dependencies/components/filtered_search/constants.js - Add token definition
  • ee/app/assets/javascripts/dependencies/graphql/dependencies.query.graphql - Add malware variable
  • ee/app/assets/javascripts/dependencies/utils/url_sync.js - Map to URL param

Implementation Approach

  1. Create token component extending GlFilteredSearchToken with "Yes"/"No" suggestions
  2. Define token configuration with type, icon, title, and operators
  3. Add to filter tokens array conditionally based on feature flag
  4. Update GraphQL variable mapping to transform filter value to malware boolean
  5. Ensure URL sync follows existing patterns for filter persistence

Testing Approach

  • Component tests: token renders in filter bar
  • Component tests: selecting "Yes" emits correct filter value
  • Component tests: selecting "No" emits correct filter value
  • Integration tests: URL updates with filter
  • Integration tests: page load with URL param applies filter
  • Feature flag tests: token hidden when flag disabled

Estimate

/estimate 5d

Dependencies

Edited by David Pisek