Frontend - Display badges on Dependency Lists

TL;DR

Show a "Malware" badge on dependencies flagged as malware packages.

Acceptance Criteria

  • Badge with text "Malware" displayed for malware dependencies
  • Badge appears in the Risk/Vulnerabilities column alongside vulnerability count
  • Badge has tooltip: "This package has been identified as malware"
  • Works on project-level Dependency List (/project/-/dependencies)
  • Works on group-level Dependency List (/group/-/dependencies)
  • Behind feature flag malicious_package_badges
  • When flag disabled, no badge shown (existing behavior)

Implementation Details

GraphQL Field Availability

The malware field may not be available on all GitLab instances immediately. Use the @gl_introduced directive for graceful degradation:

malware @gl_introduced

Notes:

  • Executable directives don't support arguments
  • For fragments, use the directive in the fragment nodes

See GraphQL style guide - Mitigation.

Files to Modify

  • ee/app/assets/javascripts/dependencies/components/ - Add badge rendering to dependency list item and vulnerabilities components
  • ee/app/assets/javascripts/dependencies/graphql/dependencies.query.graphql - Add malware field to query
  • ee/app/assets/javascripts/dependencies/constants.js - Add i18n strings for badge text and tooltip

Implementation Approach

  1. Update GraphQL query to request the malware field from the dependencies query
  2. Add badge component using GlBadge with variant="danger" and size="sm"
  3. Conditional rendering based on dependency.malware AND feature flag glFeatures.maliciousPackageBadges
  4. Add tooltip using v-gl-tooltip directive with appropriate message
  5. Add i18n strings for "Malware" badge text and tooltip message

Testing Approach

  • Component tests: badge renders when malware: true
  • Component tests: badge hidden when malware: false
  • Component tests: badge hidden when feature flag disabled
  • Add malicious dependency to mock data

Estimate

/estimate 24h

Dependencies

Edited by David Pisek