Create a compliance report cell to show the violation origin of the merge request violation

Problem to solve

We need to display the origin / reason of the merge request violation.

Proposed solution

Create frontend components that can display the violations for:

• Approved by author (with user avatar)
• Approved by committers (with user avatar)
• Less than 2 approvers

Use the defined violation reasons from our backend (source):

enum reason: {
  approved_by_author: 0,
  approved_by_committer: 1,
  approved_by_insufficient_users: 2
}

Design

Implementation

frontend 2️⃣

• Create a new component UserAvatar that can be shared by the drawer and violations
• Create a table cell to display the violations for each reason:
  • When 0, display Approved by author with UserAvatar
  • When 1, display Approved by committer with UserAvatar
  • When 2, display Less than 2 approvers
• Add specs to confirm that violations are displayed correctly