[go: up one dir, main page]
Skip to content

Design: MR "Reports" tab MVC

Problem to solve

Background & context

Over the past few years, several UX initiatives, including two Key Results (KRs; 1, 2), have been focused on improving the management of security results in the Merge Request (MR). Despite generating valuable ideas for enhancing the code review experience and testing well with users, the proposed solutions from these past initiatives have faced challenges in gaining support from stakeholders due to their perceived complexity of implementation, notable deviation from the existing MR experience, and lack of clear ownership. As a result, the underlying problem persists.

Problem space

The following issues outline some of the primary problems this proposal aims to solve:

Intended Users

  • Engineering teams

Need & Primary JTBD

  • JTBD: When I'm making changes, I want to deliver secure and performant code, so I can ensure the integrity of my organization's software is not compromised.
  • Need: Product is delivered to end-users, Security and Compliance policies are maintained, and the integrity of the Organization's assets are not compromised.

Goal

Users will be able to assess, in detail, what is blocking or negatively impacting a MR, in one location

Proposal

📽️ Video walkthrough

📋 Summary of changes:

Changes to the 'Overview' tab

Introduce New Merge Status Checks

  1. Security Policies Evaluation:
    • Displayed while any security policies are being evaluated in the pipeline.
    • Once all policies are evaluated, this check is no longer a blocker.
  2. Policy Violations Resolution:
    • Displayed when a security policy finds a violation in the code changes.
    • This check is cleared when all policy violations are resolved, either by fixing, dismissing individual violations, or obtaining approval from an eligible reviewer for any policies with violations.

Consolidate the reporting widgets:

  • Consolidate the existing Security, License, and Code Quality widgets into a single Merge Reports widget.
  • The Merge Reports widget will:
    • Provide a high-level summary of each report type.
    • Direct users to the Reports tab for detailed review and action on each report type.
Addition of a 'Reports' tab

Tab details:

  • Layout:
    • Left Column: Navigation between available reports.
    • Right Column: Displays the content of the selected report.
  • Landing Page:
    • Default to the Security Policies report.
    • The selected report should persist if users navigate between tabs in the MR.
  • Tab count badge:
    • For the MVC, this tab should display a count of Policy Violations present in the merge request
    • Post MVC: This count may also include Warnings.

"Security Policies" report details:

  • Display all security policies being evaluated for the merge request.
  • Show evaluation status for each report:
    • In Progress
    • Passed (No violations found)
    • Failed/Blocking (Violations found)
    • Question: Should there be a Not Started/Awaiting Evaluation status?
  • Each policy should have a Details link to view more information about the security policy (opens in a drawer).
  • If a security policy detects violations:
    • List the violations under the respective policy.
    • Allow users to click on a security finding (policy violation) to view details about the finding (opens in a drawer).

"All Reports" section details:

  • Display three possible report types:
    • Security
    • Code Quality
    • Licenses
  • Display a report only if the MR pipeline contains corresponding jobs.
  • Maintain the same content currently displayed on the related MR overview tab widgets.

🎨 Designs resources

Edited by Michael Fangman