Loading
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
- Semantic Icons as Visual Anchors: Added semantic icons before each "last updated" label:
- Security reports last updated:
pipelineicon (<gl-icon name="pipeline" class="gl-mr-2" />) - SBOMs last updated:
packageicon (<gl-icon name="package" class="gl-mr-2" />) - Vulnerability Context Flow last updated:
tanuki-aiicon (rendered inside the component)
- Security reports last updated:
- Removed Dot Dividers & Unused Slot: Dropped all
•dot dividers and removed the unused#prependslot fromee/app/assets/javascripts/vulnerabilities/components/vulnerability_context_flow_last_run.vue. - Consistent Spacing & Alignment:
- Added
gl-gap-x-6to 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-2andgl-flex gl-items-center gl-whitespace-nowrap, ensuring vertical alignment between the label and timestamp. - Removed redundant
gl-mr-3on the SBOM parsing status notice to maintain uniform 24px spacing before subsequent items at@lg/panel.
- Added
- Design Token Modernization: Replaced deprecated
gl-text-orange-400with semanticgl-text-warningacross all pipeline parsing status notices.
References
- Closes #638833
- Follow-up from !267885 (merged)
How to set up and validate locally
- Navigate to any project's Vulnerability Report: Secure > Vulnerability report (
/:namespace/:project/-/security/vulnerability_report). - 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
pipelineicon and timestamp. - SBOMs last updated: Visible when the project has an SBOM ingestion pipeline (
sbom_pipeline_idpresent). Verifies thepackageicon, 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-aiicon.
- Security reports last updated: Visible when the project has run a security scanning pipeline (e.g., SAST/DAST). Verifies the
- Test responsive layout behavior:
- Wide viewports (
@lg/panel, >= 1200px): All three items display inline in a single horizontal row separated bygl-gap-x-6without dot dividers. - Medium / Narrow viewports (
@md/paneland below): Items wrap cleanly to subsequent lines withgl-gap-y-4. Each line begins with its respective icon as a natural visual delimiter, eliminating orphan dot dividers.
- Wide viewports (
Screenshots or screen recordings
Wide layout (@lg/panel)
| Before | After |
|---|---|
![]() |
![]() |
Narrow / Wrapping layout (@md/panel and below)
| Before (Cluttered dot dividers on line wrap) | After (Clean icon-led rows, no stray dots) |
|---|---|
![]() |
![]() |
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
- I have evaluated the MR acceptance checklist for this MR.
Edited by Manish Kumar



