Implement the ability to add Merge Request approvals

Description

As part of the MVC for organizing rules based on branches, we need to implement the ability to add MR approvals.

Scope

The scope of this issue includes:

  • Render Approval rules component
  • Query approval settings by Branch
  • Ensure target branch is used instead of making branch selectable via dropdown (hide target branch dropdown)
  • Hide approval rules for non-premium users and when MR feature is disabled

Implementation plan

issue note
Branch rules MVC: Implement frontend skeleton (#362205 - closed)
Implement the ability to add branch Protections (#362212 - closed)
Implement the ability to add Merge Request appr... (#362214 - closed) 👈 this issue
Branch rules MVC: Add GraphQL endpoint to delet... (#362219 - closed)
Branch rules MVC: List branch rules under Repos... (#362217 - closed) ⚠ blocked by #362219 (closed)
Implement the ability to Delete a Branch rule (#362218 - closed) ⚠ blocked by #362219 (closed)
  • Create createApprovalProjectRule mutation
  • Create editApprovalProjectRule mutation
  • Create deleteApprovalProjectRule mutation

Mockups

Figma

  • Minimum required approval
    • Same as "All eligible users" in current merge request approval but now there is a name for the rule
    • Default is 0.
  • When there are no merge request approvals setup, display "Merge request approvals - Default"
  • Add approval rule dropdown button with two options
    • "Add approval rule"
    • "Add coverage check"
  • Editing done in drawer
  • Upon update of approval rule, display toast "Approval rule updated"
  • Upon removal of approval rule, display toast "Approval rule removed"
  • Same confirmation modal as current production should be displayed when click "Delete" from list view
Description Mockup
Merge request approvals - Default image
Edit approval rule - empty image
Edit approval rule - Filled image
Coverage check image
Approval rule updated image

Listing all approvers

Figma

Currently in GitLab we display a resolved list of approvers whether they were added by a group or individually. As a repository manager, this step of resolving automatically in the settings view does not reflect the action I intended of setting a group because I would need to second guess whether I added a group correctly or not by reopening the edit modal.

With this opportunity to revisit the setting of merge request approvers, we will display the groups and users. Sometimes this list can equate to hundreds of users and it is useful to check to see all users when you want to ensure certain people are in there. To do that we will display all of the resolved users in a modal sorted by name alphabetically. This might work well as a drawer as well (happy to revisit this during implementation).

List of approvers more than 10 Modal displaying all of the approvers
image image

Testing

New E2E test for Merge Request approvals on branch level is required - created https://gitlab.com/gitlab-org/quality/team-tasks/-/issues/1379

Edited by Joe Woodward