Merge branch 'sh-break-out-invited-group-members' into 'master'

Make it easier to find invited group members

Closes #61948

See merge request gitlab-org/gitlab-ce!28436

6 files changed, 73 insertions, 31 deletions

diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index d54d264bc5d..45408c9ab3c 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -67,7 +67,7 @@
   position: absolute;
   right: 4px;
   top: 0;
-  height: 35px;
+  height: $input-height;
   padding-left: 10px;
   padding-right: 10px;
   color: $gray-darkest;
diff --git a/app/controllers/groups/group_members_controller.rb b/app/controllers/groups/group_members_controller.rb
index f1d6fb00cfc..557888711ec 100644
--- a/app/controllers/groups/group_members_controller.rb
+++ b/app/controllers/groups/group_members_controller.rb
@@ -5,6 +5,8 @@ class Groups::GroupMembersController < Groups::ApplicationController
   include MembersPresentation
   include SortingHelper
 
+  MEMBER_PER_PAGE_LIMIT = 50
+
   def self.admin_not_required_endpoints
     %i[index leave request_access]
   end
@@ -24,7 +26,14 @@ class Groups::GroupMembersController < Groups::ApplicationController
     @project = @group.projects.find(params[:project_id]) if params[:project_id]
 
     @members = GroupMembersFinder.new(@group).execute
-    @members = @members.non_invite unless can_manage_members
+
+    if can_manage_members
+      @invited_members = @members.invite
+      @invited_members = @invited_members.search_invite_email(params[:search_invited]) if params[:search_invited].present?
+      @invited_members = present_members(@invited_members.page(params[:invited_members_page]).per(MEMBER_PER_PAGE_LIMIT))
+    end
+
+    @members = @members.non_invite
     @members = @members.search(params[:search]) if params[:search].present?
     @members = @members.sort_by_attribute(@sort)
 
@@ -32,7 +41,7 @@ class Groups::GroupMembersController < Groups::ApplicationController
       @members = @members.filter_by_2fa(params[:two_factor])
     end
 
-    @members = @members.page(params[:page]).per(50)
+    @members = @members.page(params[:page]).per(MEMBER_PER_PAGE_LIMIT)
     @members = present_members(@members)
 
     @requesters = present_members(
diff --git a/app/models/member.rb b/app/models/member.rb
index c7583434148..dbae1076670 100644
--- a/app/models/member.rb
+++ b/app/models/member.rb
@@ -107,6 +107,10 @@ class Member < ApplicationRecord
       joins(:user).merge(User.search(query))
     end
 
+    def search_invite_email(query)
+      invite.where(['invite_email ILIKE ?', "%#{query}%"])
+    end
+
     def filter_by_2fa(value)
       case value
       when 'enabled'
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 2b8c9f65d43..882fcc79421 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -1,39 +1,67 @@
-- page_title "Members"
+- page_title _("Members")
 - can_manage_members = can?(current_user, :admin_group_member, @group)
+- show_invited_members = can_manage_members && @invited_members.exists?
+- pending_active = params[:search_invited].present?
 
 .project-members-page.prepend-top-default
   %h4
-    Members
+    = _("Members")
   %hr
   - if can_manage_members
     .project-members-new.append-bottom-default
       %p.clearfix
-        Add new member to
-        %strong= @group.name
+        = _("Add new member to %{strong_start}%{group_name}%{strong_end}").html_safe % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
       = render "new_group_member"
 
     = render 'shared/members/requests', membership_source: @group, requesters: @requesters
 
   = render_if_exists 'groups/group_members/ldap_sync'
 
-  .clearfix
-    %h5.member.existing-title
-      Existing members
-  .card
-    .card-header.flex-project-members-panel
-      %span.flex-project-title
-        Members with access to
-        %strong= @group.name
-      %span.badge.badge-pill= @members.total_count
-      = form_tag group_group_members_path(@group), method: :get, class: 'form-inline user-search-form flex-users-form' do
-        .form-group
-          .position-relative.append-right-8
-            = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
-            %button.user-search-btn{ type: "submit", "aria-label" => "Submit search" }
-              = icon("search")
-          - if can_manage_members
-            = render 'shared/members/filter_2fa_dropdown'
-          = render 'shared/members/sort_dropdown'
-    %ul.content-list.members-list
-      = render partial: 'shared/members/member', collection: @members, as: :member
-    = paginate @members, theme: 'gitlab'
+  %ul.nav-links.mobile-separator.nav.nav-tabs.clearfix
+    %li.nav-item
+      = link_to "#existing_members", class: ["nav-link", ("active" unless pending_active)] , 'data-toggle' => 'tab' do
+        %span
+          = _("Existing")
+        %span.badge.badge-pill= @members.total_count
+    - if show_invited_members
+      %li.nav-item
+        = link_to "#invited_members", class: ["nav-link", ("active" if pending_active)], 'data-toggle' => 'tab' do
+          %span
+            = _("Pending")
+          %span.badge.badge-pill= @invited_members.total_count
+
+  .tab-content
+    #existing_members.tab-pane{ :class => ("active" unless pending_active) }
+      .card.card-without-border
+        .d-flex.flex-column.flex-md-row.row-content-block.second-block
+          %span.flex-grow-1.align-self-md-center.col-form-label
+            = _("Members with access to %{strong_start}%{group_name}%{strong_end}").html_safe % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+          = form_tag group_group_members_path(@group), method: :get, class: 'form-inline user-search-form' do
+            .form-group.flex-grow
+              .position-relative.mr-md-2
+                = search_field_tag :search, params[:search], { placeholder: _('Search'), class: 'form-control', spellcheck: false }
+                %button.user-search-btn.border-left{ type: "submit", "aria-label" => _("Submit search") }
+                  = icon("search")
+              - if can_manage_members
+                = label_tag '2fa', '2FA', class: 'col-form-label label-bold pr-md-2'
+                = render 'shared/members/filter_2fa_dropdown'
+              = render 'shared/members/sort_dropdown'
+        %ul.content-list.members-list
+          = render partial: 'shared/members/member', collection: @members, as: :member
+      = paginate @members, theme: 'gitlab'
+
+    - if show_invited_members
+      #invited_members.tab-pane{ :class => ("active" if pending_active) }
+        .card.card-without-border
+          .d-flex.flex-column.flex-md-row.row-content-block.second-block
+            %span.flex-grow-1
+              = _("Members with pending access to %{strong_start}%{group_name}%{strong_end}").html_safe % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+            = form_tag group_group_members_path(@group), method: :get, class: 'form-inline user-search-form' do
+              .form-group
+                .position-relative.mr-md-2
+                  = search_field_tag :search_invited, params[:search_invited], { placeholder: _('Search'), class: 'form-control', spellcheck: false }
+                  %button.user-search-btn.border-left{ type: "submit", "aria-label" => _("Submit search") }
+                    = icon("search")
+          %ul.content-list.members-list
+            = render partial: 'shared/members/member', collection: @invited_members, as: :member
+        = paginate @invited_members, param_name: 'invited_members_page', theme: 'gitlab'
diff --git a/app/views/shared/members/_filter_2fa_dropdown.html.haml b/app/views/shared/members/_filter_2fa_dropdown.html.haml
index 3e98587aeaa..44ea844028e 100644
--- a/app/views/shared/members/_filter_2fa_dropdown.html.haml
+++ b/app/views/shared/members/_filter_2fa_dropdown.html.haml
@@ -1,7 +1,7 @@
 - filter = params[:two_factor] || 'everyone'
 - filter_options = { 'everyone' => _('Everyone'), 'enabled' => _('Enabled'), 'disabled' => _('Disabled') }
-.dropdown.inline.member-filter-2fa-dropdown
-  = dropdown_toggle('2FA: ' + filter_options[filter], { toggle: 'dropdown' })
+.dropdown.inline.member-filter-2fa-dropdown.pr-md-2
+  = dropdown_toggle(filter_options[filter], { toggle: 'dropdown' })
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
     %li.dropdown-header
       = _("Filter by two-factor authentication")
diff --git a/app/views/shared/members/_sort_dropdown.html.haml b/app/views/shared/members/_sort_dropdown.html.haml
index f5ebab035db..feca109dade 100644
--- a/app/views/shared/members/_sort_dropdown.html.haml
+++ b/app/views/shared/members/_sort_dropdown.html.haml
@@ -1,4 +1,5 @@
-.dropdown.inline.user-sort-dropdown
+= label_tag :sort_by, 'Sort by', class: 'col-form-label label-bold pr-2'
+.dropdown.inline.qa-user-sort-dropdown
   = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header