Approvals avatars and buttons

Continuation of https://gitlab.com/gitlab-org/gitlab-ee/issues/4134 and https://gitlab.com/gitlab-org/gitlab-ee/issues/2452

Description

To simplify design and implementation, each part of the approvals UI is independently displayed based on the following:

Check mark versus exclamation mark

  • If the merge request has passed approvals (required number of approvals is reached), display a check mark.
  • If the merge request has not passed approvals, display an exclamation mark.

Approve and approve additionally buttons

  • If the user is not eligible to approve, to not show anything here.
  • If the user has already approved the merge request, do not show anything here.
  • If the user has not approved:
    • If the number of approvals is less than the required number, display Approve.
    • If the number of approvals is equal or greater than the required number, display Approve additionally.

Requires x more and Enough approvals, additional from text copy

  • If the merge request requires more approvals to be passed, display Requires x more approvals from, where x is the number of approvals more to pass.
  • If the merge request has already the number of approvals met, display Enough approvals, additional from.

Eligible approvers avatars

  • Display explicit eligible individual approvers who have currently not approved yet.
  • Display explicit eligible group approvers. Always display the explicit group approver avatars, even if every member of the group has already approved. (This is to simplify the logic.)
  • If in the m > n case of #4134 (closed), then display a special avatar that represents project members with developer role or higher. Maybe have a tooltip and/or link to docs. But use an avatar to streamline the design with individuals and groups.

Approved by avatars

  • Display Approved by with the avatars, if at least one individual has approved.
  • Don't display anything if no one has approved.
  • Only display the avatar of any individual who has approved.
  • Don't display any group avatars.
  • Don't display any empty dotted circles.

Remove approval button

  • Display the Remove approval button if you have already approved.
Edited by Victor Wu