Minor UX tweaks based on feedback

Show the pending page if user searches for an invited user.

Remove the sort in the pending page to avoid confusion.

3 files changed, 12 insertions, 12 deletions

diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 74a11bdca41..aee30e04613 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -3,6 +3,7 @@
 - show_invited_members = can_manage_members && @invited_members.exists?
 - total_members = @members.total_count
 - total_members += @invited_members.total_count if show_invited_members
+- pending_active = params[:search_invited].present?
 
 .project-members-page.prepend-top-default
   %h4
@@ -21,32 +22,32 @@
 
   %ul.nav-links.mobile-separator.nav.nav-tabs.clearfix
     %li.nav-item
-      = link_to "#existing_members", class: "nav-link active", 'data-toggle' => 'tab' do
+      = link_to "#existing_members", class: ["nav-link", ("active" unless pending_active)] , 'data-toggle' => 'tab' do
         %span
-          Existing members
+          Existing
         %span.badge.badge-pill= @members.total_count
     - if show_invited_members
       %li.nav-item
-        = link_to "#invited_members", class: "nav-link", 'data-toggle' => 'tab' do
+        = 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.active
+    #existing_members.tab-pane{ :class => ("active" unless pending_active) }
       .card
         .card-header.flex-project-members-panel
           %span.flex-project-title
             Members with access to
             %strong= @group.name
-          %span.badge.badge-pill= total_members
           = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form flex-project-members-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 }
+                = search_field_tag :search, params[:search], { placeholder: 'Search', class: 'form-control', spellcheck: false }
                 %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
                   = icon("search")
               - if can_manage_members
+                = label_tag '2fa', '2FA', class: 'col-form-label label-bold pl-2 pr-2'
                 = render 'shared/members/filter_2fa_dropdown'
               = render 'shared/members/sort_dropdown'
         %ul.content-list.members-list
@@ -54,20 +55,18 @@
       = paginate @members, theme: 'gitlab'
 
     - if show_invited_members
-      #invited_members.tab-pane
+      #invited_members.tab-pane{ :class => ("active" if pending_active) }
         .card
           .card-header.flex-project-members-panel
             %span.flex-project-title
-              Members with access to
+              Members with pending access to
               %strong= @group.name
-            %span.badge.badge-pill= total_members
             = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form flex-project-members-form' do
               .form-group
                 .position-relative.append-right-8
-                  = search_field_tag :search_invited, params[:search_invited], { placeholder: 'Find invited members by e-mail', class: 'form-control', spellcheck: false }
+                  = search_field_tag :search_invited, params[:search_invited], { placeholder: 'Search', class: 'form-control', spellcheck: false }
                   %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
                     = icon("search")
-                = render 'shared/members/sort_dropdown'
           %ul.content-list.invited-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..a2bc5e9ecdf 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_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 59bdfb73e6e..5b792e989f0 100644
--- a/app/views/shared/members/_sort_dropdown.html.haml
+++ b/app/views/shared/members/_sort_dropdown.html.haml
@@ -1,3 +1,4 @@
+= label_tag :sort_by, 'Sort by', class: 'col-form-label label-bold pl-4 pr-2'
 .dropdown.inline.member-sort-dropdown
   = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable