Merge branch '229830-move-groups-members-pending-in-to-tabs' into 'master'

Reorganize group member management into tabs

See merge request gitlab-org/gitlab!38344

app/assets/stylesheets/pages/users.scss

@@ -25,8 +25,12 @@
   }
 
   .form-control {
-    width: 100%;
     padding-right: 35px;
+  }
+
+  .search-control-wrap,
+  .form-control {
+    width: 100%;
 
     @include media-breakpoint-up(sm) {
       width: 250px;

app/views/groups/group_members/tab_pane/_form_item.html.haml

+.gl-px-3.gl-py-3.gl-display-flex.gl-flex-direction-column.gl-md-flex-direction-row
+  = yield

app/views/groups/group_members/tab_pane/_header.html.haml

+.gl-display-flex.gl-md-align-items-center.gl-flex-direction-column.gl-md-flex-direction-row.row-content-block.second-block
+  = yield

app/views/groups/group_members/tab_pane/_title.html.haml

+%span.gl-flex-grow-1.gl-py-3.gl-pr-3
+  = yield

app/views/projects/project_members/_team.html.haml

@@ -12,6 +12,7 @@
           = 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")
+        = label_tag :sort_by, _('Sort by'), class: 'col-form-label label-bold px-2'
         = render 'shared/members/sort_dropdown'
   %ul.content-list.members-list{ data: { qa_selector: 'members_list' } }
     = render partial: 'shared/members/member', collection: members, as: :member

app/views/shared/members/_filter_2fa_dropdown.html.haml

 - filter = params[:two_factor] || 'everyone'
 - filter_options = { 'everyone' => _('Everyone'), 'enabled' => _('Enabled'), 'disabled' => _('Disabled') }
-.dropdown.inline.member-filter-2fa-dropdown.pr-md-2
+.dropdown.inline.member-filter-2fa-dropdown
   = dropdown_toggle(filter_options[filter], { toggle: 'dropdown' })
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
     %li.dropdown-header

app/views/shared/members/_search_field.html.haml

+- name = local_assigns.fetch(:name, :search)
+
+.search-control-wrap.gl-relative
+  = search_field_tag name, params[name], { placeholder: _('Search'), class: 'form-control', spellcheck: false }
+  %button.user-search-btn.border-left.gl-display-flex.gl-align-items-center.gl-justify-content-center{ type: 'submit', 'aria': { label: _('Submit search') } }
+    = sprite_icon('search')

app/views/shared/members/_sort_dropdown.html.haml

-= label_tag :sort_by, 'Sort by', class: 'col-form-label label-bold px-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

changelogs/unreleased/229830-move-groups-members-pending-in-to-tabs.yml

+---
+title: Reorganize group member management into tabs
+merge_request: 38344
+author:
+type: changed

locale/gitlab.pot

@@ -1237,6 +1237,9 @@ msgstr ""
 msgid "Access forbidden. Check your access level."
 msgstr ""
 
+msgid "Access requests"
+msgstr ""
+
 msgid "Access to '%{classification_label}' not allowed"
 msgstr ""
 
@@ -9926,9 +9929,6 @@ msgstr ""
 msgid "Existing projects will be able to use expiration policies. Avoid enabling this if an external Container Registry is being used, as there is a performance risk if many images exist on one project."
 msgstr ""
 
-msgid "Existing shares"
-msgstr ""
-
 msgid "Existing sign in methods may be removed"
 msgstr ""
 
@@ -13264,6 +13264,9 @@ msgstr ""
 msgid "Invite teammates (optional)"
 msgstr ""
 
+msgid "Invited"
+msgstr ""
+
 msgid "Invited users will be added with developer level permissions. You can always change this later."
 msgstr ""
 
@@ -14864,6 +14867,9 @@ msgstr ""
 msgid "Members can be added by project %{i_open}Maintainers%{i_close} or %{i_open}Owners%{i_close}"
 msgstr ""
 
+msgid "Members invited to %{strong_start}%{group_name}%{strong_end}"
+msgstr ""
+
 msgid "Members of %{strong_open}%{project_name}%{strong_close}"
 msgstr ""
 
@@ -14873,9 +14879,6 @@ msgstr ""
 msgid "Members with access to %{strong_start}%{group_name}%{strong_end}"
 msgstr ""
 
-msgid "Members with pending access to %{strong_start}%{group_name}%{strong_end}"
-msgstr ""
-
 msgid "Memory Usage"
 msgstr ""
 
@@ -26700,6 +26703,9 @@ msgstr ""
 msgid "Users requesting access to"
 msgstr ""
 
+msgid "Users requesting access to %{strong_start}%{group_name}%{strong_end}"
+msgstr ""
+
 msgid "Users were successfully added."
 msgstr ""
 

qa/qa/page/group/members.rb

@@ -25,6 +25,7 @@ module QA
 
         view 'app/views/groups/group_members/index.html.haml' do
           element :invite_group_tab
+          element :groups_list_tab
           element :groups_list
         end
 
@@ -71,6 +72,8 @@ module QA
         end
 
         def has_existing_group_share?(group_name)
+          click_element :groups_list_tab
+
           within_element(:groups_list) do
             has_element?(:group_row, text: group_name)
           end

spec/features/groups/members/manage_groups_spec.rb

@@ -20,26 +20,28 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
 
     add_group(shared_with_group.id, 'Reporter')
 
+    click_groups_tab
+
     page.within(first_row) do
       expect(page).to have_content(shared_with_group.name)
       expect(page).to have_content('Reporter')
     end
   end
 
-  it 'remove user from group' do
+  it 'remove group from group' do
     create(:group_group_link, shared_group: shared_group,
       shared_with_group: shared_with_group, group_access: ::Gitlab::Access::DEVELOPER)
 
     visit group_group_members_path(shared_group)
 
+    click_groups_tab
+
     expect(page).to have_content(shared_with_group.name)
 
     accept_confirm do
-      find(:css, '#existing_shares li', text: shared_with_group.name).find(:css, 'a.btn-remove').click
+      find(:css, '#tab-groups li', text: shared_with_group.name).find(:css, 'a.btn-remove').click
     end
 
-    wait_for_requests
-
     expect(page).not_to have_content(shared_with_group.name)
   end
 
@@ -49,6 +51,8 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
 
     visit group_group_members_path(shared_group)
 
+    click_groups_tab
+
     page.within(first_row) do
       click_button('Developer')
       click_link('Maintainer')
@@ -67,4 +71,8 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
       click_button "Invite"
     end
   end
+
+  def click_groups_tab
+    click_link "Groups"
+  end
 end

spec/features/groups/members/manage_members_spec.rb

@@ -101,7 +101,7 @@ RSpec.describe 'Groups > Members > Manage members' do
 
     add_user('test@example.com', 'Reporter')
 
-    click_link('Pending')
+    click_link('Invited')
 
     page.within('.content-list.members-list') do
       expect(page).to have_content('test@example.com')

spec/features/groups/members/master_manages_access_requests_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Maintainer manages access requests' do
   it_behaves_like 'Maintainer manages access requests' do
+    let(:has_tabs) { true }
     let(:entity) { create(:group, :public) }
     let(:members_page_path) { group_group_members_path(entity) }
   end

spec/features/groups/members/search_members_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'Search group member' do
   end
 
   it 'renders member users' do
-    page.within '.user-search-form' do
+    page.within '[data-testid="user-search-form"]' do
       fill_in 'search', with: member.name
       find('.user-search-btn').click
     end

spec/features/groups/members/tabs_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Groups > Members > Tabs' do
+  using RSpec::Parameterized::TableSyntax
+
+  shared_examples 'active "Members" tab' do
+    it 'displays "Members" tab' do
+      expect(page).to have_selector('.nav-link.active', text: 'Members')
+    end
+  end
+
+  shared_examples 'active "Invited" tab' do
+    it 'displays "Invited" tab' do
+      expect(page).to have_selector('.nav-link.active', text: 'Invited')
+    end
+  end
+
+  let(:owner) { create(:user) }
+  let(:group) { create(:group) }
+
+  before do
+    stub_const('Groups::GroupMembersController::MEMBER_PER_PAGE_LIMIT', 1)
+    allow_any_instance_of(Member).to receive(:send_request).and_return(true)
+
+    group.add_owner(owner)
+    sign_in(owner)
+
+    create_list(:group_member, 2, group: group)
+    create_list(:group_member, 2, :invited, group: group)
+    create_list(:group_group_link, 2, shared_group: group)
+    create_list(:group_member, 2, :access_request, group: group)
+  end
+
+  where(:tab, :count) do
+    'Members'         | 3
+    'Invited'         | 2
+    'Groups'          | 2
+    'Access requests' | 2
+  end
+
+  with_them do
+    it "renders #{params[:tab]} tab" do
+      visit group_group_members_path(group)
+
+      expect(page).to have_selector('.nav-link', text: "#{tab} #{count}")
+    end
+  end
+
+  context 'displays "Members" tab by default' do
+    before do
+      visit group_group_members_path(group)
+    end
+
+    it_behaves_like 'active "Members" tab'
+  end
+
+  context 'when searching "Invited"', :js do
+    before do
+      visit group_group_members_path(group)
+
+      click_link 'Invited'
+
+      page.within '[data-testid="user-search-form"]' do
+        fill_in 'search_invited', with: 'email'
+        find('button[type="submit"]').click
+      end
+    end
+
+    it_behaves_like 'active "Invited" tab'
+
+    context 'and then searching "Members"' do
+      before do
+        click_link 'Members'
+
+        page.within '[data-testid="user-search-form"]' do
+          fill_in 'search', with: 'test'
+          find('button[type="submit"]').click
+        end
+      end
+
+      it_behaves_like 'active "Members" tab'
+    end
+  end
+
+  context 'when using "Invited" pagination', :js do
+    before do
+      visit group_group_members_path(group)
+
+      click_link 'Invited'
+
+      page.within '.pagination' do
+        click_link '2'
+      end
+    end
+
+    it_behaves_like 'active "Invited" tab'
+
+    context 'and then using "Members" pagination' do
+      before do
+        click_link 'Members'
+
+        page.within '.pagination' do
+          click_link '2'
+        end
+      end
+
+      it_behaves_like 'active "Members" tab'
+    end
+  end
+end

spec/features/projects/members/master_manages_access_requests_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Projects > Members > Maintainer manages access requests' do
   it_behaves_like 'Maintainer manages access requests' do
+    let(:has_tabs) { false }
     let(:entity) { create(:project, :public) }
     let(:members_page_path) { project_project_members_path(entity) }
   end

spec/support/shared_examples/features/master_manages_access_requests_shared_example.rb

@@ -8,17 +8,18 @@ RSpec.shared_examples 'Maintainer manages access requests' do
     entity.request_access(user)
     entity.respond_to?(:add_owner) ? entity.add_owner(maintainer) : entity.add_maintainer(maintainer)
     sign_in(maintainer)
-  end
-
-  it 'maintainer can see access requests' do
     visit members_page_path
 
+    if has_tabs
+      click_on 'Access requests'
+    end
+  end
+
+  it 'maintainer can see access requests', :js do
     expect_visible_access_request(entity, user)
   end
 
   it 'maintainer can grant access', :js do
-    visit members_page_path
-
     expect_visible_access_request(entity, user)
 
     click_on 'Grant access'
@@ -31,8 +32,6 @@ RSpec.shared_examples 'Maintainer manages access requests' do
   end
 
   it 'maintainer can deny access', :js do
-    visit members_page_path
-
     expect_visible_access_request(entity, user)
 
     # Open modal
@@ -47,7 +46,13 @@ RSpec.shared_examples 'Maintainer manages access requests' do
   end
 
   def expect_visible_access_request(entity, user)
-    expect(page).to have_content "Users requesting access to #{entity.name} 1"
+    if has_tabs
+      expect(page).to have_content "Access requests 1"
+      expect(page).to have_content "Users requesting access to #{entity.name}"
+    else
+      expect(page).to have_content "Users requesting access to #{entity.name} 1"
+    end
+
     expect(page).to have_content user.name
   end