Approvals settings designs

Background

• Approvals are very complex.
• We keep adding more functionality.
• A lot of the difficulty in the UI design is that a lot of the functionality is in the merge request widget, and there is already a lot of complexity there.
• This issue focuses on only approvals settings, and purposely does not change the merge request widget, since there is so much going on there at the moment.

Scope

• Design the approvals settings at the project level (in the project settings).
• Design the approvals settings at the merge request level.
• The designs should capture existing functionality.
• The designs should also capture the functionality in these future issues:
  • https://gitlab.com/gitlab-org/gitlab-ee/issues/2452
  • https://gitlab.com/gitlab-org/gitlab-ee/issues/3349
• The designs should address the usability problem here: https://gitlab.com/gitlab-org/gitlab-ee/issues/5314

Out of scope, but relevant

• The designs don't have to capture the following features, but should be very much aware of these future features with the goal that the design is extensible (as much as possible) to capture these:
• &1 (closed)
• &3 (closed)
• https://gitlab.com/gitlab-org/gitlab-ee/issues/1979

Proposal

• In the project settings, approvals should be pulled into its own collapsible section.
• In the merge request settings, approvals should be a separate web form or a separate modal or a separate dropdown part of the UI. It should be taken out of the edit screen.
• The design should be re-used in both places.

Design

If merge request approval is disabled at project setting level

• The approval section still remains in the MR widget even if approvals feature is disabled.

• It shows No approval required message in the section.
• The icon before the message is a hollow circle.

• There is a "Settings" button in the approval section which allows users to configure the approvals directly.
• When clicking the "Settings" button, the approval settings section is expanded. (Mockup: Expand to set the approvals)

• On the "Expand to set the approvals" screen, if users enables it and save changes, they will see the "01 - Default" screen (in 'Set approvals in merge request widget' section below).

Configure approvals in MR widget	Expand to set the approvals

Approvals in merge request widget

• When doing changes in the approval settings, if users don't click "Save changes", changes will not be saved.
• The user/group labels in approvals field should have the avatars before the names.

01 - Default	02 - Expand to configure	03 - Added approvers	04 - Saved changes

Approvals at project level

• The approvers list and "Add" button are removed in the new design.
• "Approvals settings" is pulled out of "Merge request settings" and it has its own section.
• Added a title "Advanced settings" under "Approvals required" section. The title would work as a visual anchor to help users browse the settings.
• Added Enable self approval of merge requests feature in "Advanced settings" section. It has a question icon after the text to link to the document. So users can get to know this new feature.
• If users don't click "Save changes" button, changes will not be saved.