Replace vulnerability file content with data flow
What does this MR do and why?
Before this MR, the code flow of a SAST finding lived in its own Data flow tab and took an extra click to see. Issue #628223 calls it the most important information, and product and design want it visible right away.
This MR removes the tab bar. The Data flow widget gets its own panel below Risk and above Details, with Remediation between them when the finding has a solution. File contents leaves the Details panel for findings with code flow data and stays as the fallback for the others.
The panel grows with its content to at most 70 percent of the window height, and longer flows scroll inside it. Clicking a step centers the highlighted line in the code column. Scrolling the page itself to keep that line in view is left to a follow-up. It also updates two documentation pages and their screenshot.
Notes for reviewers:
- Only the vulnerability details page uses the widget's new card mode. The pipeline finding modal and the merge request findings drawer are unchanged on purpose.
References
- Related to #628223
Screenshots or screen recordings
| State | Before | After |
|---|---|---|
| Vulnerability with code flow | ![]() |
![]() |
| Vulnerability without code flow | ![]() |
![]() |
How to set up and validate locally
- Check out the branch and open a vulnerability from a GitLab Advanced SAST scan that has code flow data.
- There is no Details or Data flow tab bar. A Data flow panel sits directly below the Risk panel and above the Details panel, with the step list on the left and the code on the right. The Details panel has no File contents section.
- Click another step. The code column scrolls so the highlighted line is centered. For a longer flow, the panel stops at about 70 percent of the window height and scrolls inside.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.



