Making it easier to configure approvals in project settings

Resources

PM @victorwu | UX @hazelyang | FE @annabeldunstone

Problem

• Right now, you can configure approvals in the project settings, and override them per merge request. The process and UI is confusing and can be improved. Let's focus on just improving the project settings.
• Currently, the UI flow leads you to specify a required number of approvers first. And then afterward, specify individuals and groups who would qualify to meet that number.
• This may be a natural flow for only some scenarios where you care about the number, more so than the individuals. For example, if for a particular project, you always want two specific lead developers to approve all merge requests, a more natural flow is just to allow you to specify those two lead devs.
• Furthermore, allowing a user to specify a number first, means that the user has to keep track if the number of people selected so far is enough to meet the required number. It adds cognitive load.

Design and scope

• Improve the UI to be more intuitive.
• New design per the mockups.
• New collapsed design as per https://gitlab.com/gitlab-org/gitlab-ce/issues/28451. Moved to https://gitlab.com/gitlab-org/gitlab-ce/issues/30378
• When you click the Add button after selecting approver(s), it should:
  • automatically add them to the approvers table below
  • save to the database automatically without refreshing the page
• When you click the Remove (red/trash icon), it should:
  • remove the approver from the approvers list
  • save to the database automatically without refreshing the page
• When you update the Approvals required, that does not update the system immediately. You have to hit Save changes first.
• When you select Activate merge request approvals, the entire section section is shown. When you deselect it, the entire section is hidden.
• Selecting / de-selecting Activate merge request approvals does not change remove any settings previously made. It just essentially turns off / on the feature. (<-- Stretch goal. If this isn't possible. Then it is not required for this iteration.)
• Approvals required should be >= 1 always. (If the Activate merge request approvals is unchecked, then it should essentially be "0" in the background so that the feature is off. But whenever the user views it, it should be >= 1.)
• Selecting / deselecting is persisted when you hit Save changes.
• The mockup below is for EE. CE will also have this section, but will only display options that are available within CE. This issue should ensure that both CE and EE are updated to reflect the new UI.

Out of scope

This issue is just for the per project settings. The settings per merge request will be in a separate issue.

Mockups