Add icons to last updated items in vulnerability report header

What does this MR do and why?

Problem

In the project vulnerability report header, multiple "last updated" statuses (Security reports, SBOMs, Vulnerability Context Flow) were previously separated by bullet/dot dividers (•). When these items wrap across multiple lines on medium and narrow viewports, the dot dividers appear inconsistently at the beginning or end of wrapped lines, causing visual clutter (as noted in UX feedback from !267885 (comment 4171535360)).

Approach

  1. Semantic Icons as Visual Anchors: Added semantic icons before each "last updated" label:
    • Security reports last updated: pipeline icon (<gl-icon name="pipeline" class="gl-mr-2" />)
    • SBOMs last updated: package icon (<gl-icon name="package" class="gl-mr-2" />)
    • Vulnerability Context Flow last updated: tanuki-ai icon (rendered inside the component)
  2. Removed Dot Dividers & Unused Slot: Dropped all • dot dividers and removed the unused #prepend slot from ee/app/assets/javascripts/vulnerabilities/components/vulnerability_context_flow_last_run.vue.
  3. Consistent Spacing & Alignment:
    • Added gl-gap-x-6 to the outer container for balanced horizontal separation.
    • Refactored the SBOM status block to use gl-flex gl-flex-wrap gl-items-center gl-gap-y-2 and gl-flex gl-items-center gl-whitespace-nowrap, ensuring vertical alignment between the label and timestamp.
    • Removed redundant gl-mr-3 on the SBOM parsing status notice to maintain uniform 24px spacing before subsequent items at @lg/panel.
  4. Design Token Modernization: Replaced deprecated gl-text-orange-400 with semantic gl-text-warning across all pipeline parsing status notices.

References


How to set up and validate locally

  1. Navigate to any project's Vulnerability Report: Secure > Vulnerability report (/:namespace/:project/-/security/vulnerability_report).
  2. Inspect the project pipeline status banner at the top of the report:
    • Security reports last updated: Visible when the project has run a security scanning pipeline (e.g., SAST/DAST). Verifies the pipeline icon and timestamp.
    • SBOMs last updated: Visible when the project has an SBOM ingestion pipeline (sbom_pipeline_id present). Verifies the package icon, timestamp, and status badge.
    • Vulnerability Context Flow last updated: Visible when GitLab Duo Agent Platform is enabled and context analysis is active for the project. Verifies the tanuki-ai icon.
  3. Test responsive layout behavior:
    • Wide viewports (@lg/panel, >= 1200px): All three items display inline in a single horizontal row separated by gl-gap-x-6 without dot dividers.
    • Medium / Narrow viewports (@md/panel and below): Items wrap cleanly to subsequent lines with gl-gap-y-4. Each line begins with its respective icon as a natural visual delimiter, eliminating orphan dot dividers.

Screenshots or screen recordings

Wide layout (@lg/panel)

Before After
wide_before wide_after

Narrow / Wrapping layout (@md/panel and below)

Before (Cluttered dot dividers on line wrap) After (Clean icon-led rows, no stray dots)
narrow_before narrow_after

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Manish Kumar

Merge request reports

Loading
Loading