Code Quality in diff/MR Design
Problem to solve
As a developer I want to see both Test Coverage and Code Quality information in a diff/mr view so that I can look in one place during a code review to see how code quality is impacted by this change.
What is this issue?
Test Visualization is already implemented. This issue is to create design for Code Quality and the case of both features being used.
Design Proposal
When changes to code quality exist, the following acceptance criteria is valid:
- Add an icon indicating code quality severity to the diff area of a merge request.
- Icon size should be
12x12
pixels. - We will display a different icon for each severity level. UI of icons should replicate the ones defined in #199187 (closed)
- Icon size should be
- Only one (1) code quality severity will be display per line.
- When a code quality severity icon is present, the indentation of the lines in the diff after the number of the line needs to be increased by
20px
. The code quality icon is added before the + or - sign in the diff UI. - Hovering the icon should display a tooltip that reads the cause for the severity alert.
- Clicking the icon should trigger a modal. The modal should display:
- Title: Code quality
[degraded/improved]
:[description of the degradation]
- Body: description, file path and line number, severity.
- Footer: close button.
- Title: Code quality
Out of scope
- It happen that multiple code quality changes happen to the same line of code, but this MVC ignores that case for now and just shows the first code quality degradation.
- The severity icon does not support a text label for now. Only a tooltip is displayed on hover.
- Updates to the color or the severity icons are also out of scope, and this MVC should replicate the existing icons/color available in the application.
- No other actions (such a giving the user the ability to fix the vulnerability, or open an issue) will be available in the modal.
Links / References
Edited by Rayana Verissimo