Merge branch '18871-check-improve-how-we-display-access-requesters-in-admin-area' into 'master'

Display group/project access requesters separately in admin

## What does this MR do?

It displays the access requesters in a separate list in group & project members pages.

It also harmonize the members counter UI to use `%span.badge` everywhere (in the admin & non-admin members views).

## Are there points in the code the reviewer needs to double check?

No.

## Why was this MR needed?

To not confuse access requesters with actual members.

## What are the relevant issue numbers?

Closes #18871.

## Screenshots

### Group members

| Before | After |
| --------- | ---- |
| ![group-members-before](/uploads/2f15137e073fd3a63bc2cb7b2217cb6c/group-members-before.png) | ![group-members-after](/uploads/5b643974505cfa57783fa0320d3bf8b2/group-members-after.png) |

### Project members

| Before | After |
| --------- | ---- |
| ![project-members-before](/uploads/9c48dcd3736e42de84061b1201ee0b06/project-members-before.png) | ![project-members-after](/uploads/8e04c92ef0bba3de7e2405618632b27d/project-members-after.png) |

### Admin group members

| Before | After |
| --------- | ---- |
| ![admin-group-members-before](/uploads/7fda8c2c94b697bea6655ba892ba45e7/admin-group-members-before.png) | ![admin-group-members-after](/uploads/ea25717001794f75939c679b80308c3a/admin-group-members-after.png) |

### Admin project members

| Before | After |
| --------- | ---- |
| ![admin-project-members-before](/uploads/ba9d3ec52adbda6bb3d45ad9ac5243d3/admin-project-members-before.png) | ![admin-project-members-after](/uploads/3b889a029a9756e9ed2781b45c4dd9cb/admin-project-members-after.png) |

## Does this MR meet the acceptance criteria?

- [x] No CHANGELOG since this is related to the original "request access" MR.
- [ ] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !4798

2 files changed, 27 insertions, 55 deletions

diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 5b8a0262ea0..50770465f07 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -88,28 +88,17 @@
               = select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2"
             %hr
             = button_tag 'Add users to group', class: "btn btn-create"
+
+    = render 'shared/members/requests', membership_source: @group, members: @members.request
+
     .panel.panel-default
       .panel-heading
-        %h3.panel-title
-          Members
-          %span.badge
-            #{@group.group_members.count}
-      %ul.well-list.group-users-list
-        - @members.each do |member|
-          - user = member.user
-          %li{class: dom_class(member), id: (dom_id(user) if user)}
-            .list-item-name
-              - if user
-                %strong
-                  = link_to user.name, admin_user_path(user)
-              - else
-                %strong
-                  = member.invite_email
-                (invited)
-            %span.pull-right.light
-              = member.human_access
-              - if can?(current_user, :destroy_group_member, member)
-                = link_to group_group_member_path(@group, member), data: { confirm: remove_member_message(member) }, method: :delete, remote: true, class: "btn-xs btn btn-remove", title: 'Remove user from group' do
-                  %i.fa.fa-minus.fa-inverse
+        %strong= @group.name
+        group members
+        %span.badge= @group.members.non_request.size
+        .pull-right
+          = link_to icon('pencil-square-o', text: 'Manage Access'), polymorphic_url([@group, :members]), class: "btn btn-xs"
+      %ul.well-list.group-users-list.content-list
+        = render partial: 'shared/members/member', collection: @members.non_request, as: :member, locals: { show_controls: false }
       .panel-footer
-        = paginate @members, param_name: 'members_page', theme: 'gitlab'
+        = paginate @members.non_request, param_name: 'members_page', theme: 'gitlab'
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 9e55a562e18..461d588415d 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -135,44 +135,27 @@
     - if @group
       .panel.panel-default
         .panel-heading
-          %strong #{@group.name}
-          group members (#{@group.group_members.count})
+          %strong= @group.name
+          group members
+          %span.badge= @group_members.non_request.size
           .pull-right
             = link_to admin_group_path(@group), class: 'btn btn-xs' do
-              %i.fa.fa-pencil-square-o
-        %ul.well-list
-          - @group_members.each do |member|
-            = render 'shared/members/member', member: member, show_controls: false
+              = icon('pencil-square-o', text: 'Manage Access')
+        %ul.well-list.content-list
+          = render partial: 'shared/members/member', collection: @group_members.non_request, as: :member, locals: { show_controls: false }
         .panel-footer
-          = paginate @group_members, param_name: 'group_members_page', theme: 'gitlab'
+          = paginate @group_members.non_request, param_name: 'group_members_page', theme: 'gitlab'
+
+    = render 'shared/members/requests', membership_source: @project, members: @project_members.request
 
     .panel.panel-default
       .panel-heading
-        Project members
-        %small
-          (#{@project.users.count})
+        %strong= @project.name
+        project members
+        %span.badge= @project.users.size
         .pull-right
-          = link_to namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-xs" do
-            %i.fa.fa-pencil-square-o
-            Manage Access
-      %ul.well-list.project_members
-        - @project_members.each do |project_member|
-          - user = project_member.user
-          %li.project_member
-            .list-item-name
-              - if user
-                %strong
-                  = link_to user.name, admin_user_path(user)
-              - else
-                %strong
-                  = project_member.invite_email
-                (invited)
-            .pull-right
-              - if project_member.owner?
-                %span.light Owner
-              - else
-                %span.light= project_member.human_access
-                = link_to namespace_project_project_member_path(@project.namespace, @project, project_member), data: { confirm: remove_member_message(project_member)}, method: :delete, remote: true, class: "btn btn-sm btn-remove" do
-                  %i.fa.fa-times
+          = link_to icon('pencil-square-o', text: 'Manage Access'), polymorphic_url([@project, :members]), class: "btn btn-xs"
+      %ul.well-list.project_members.content-list
+        = render partial: 'shared/members/member', collection: @project_members.non_request, as: :member, locals: { show_controls: false }
       .panel-footer
-        = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'
+        = paginate @project_members.non_request, param_name: 'project_members_page', theme: 'gitlab'