Merge branch...

Merge branch '281820-convert-project-members-list-view-from-haml-to-vue-update-feature-specs-and-qa-e2e-specs' into 'master'

Update feature specs to reflect new project members view

See merge request gitlab-org/gitlab!52549

ee/spec/features/projects/audit_events_spec.rb

@@ -3,13 +3,13 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Audit Events', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:user) { create(:user) }
   let(:pete) { create(:user, name: 'Pete') }
   let(:project) { create(:project, :repository, namespace: user.namespace) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     project.add_maintainer(user)
     sign_in(user)
   end
@@ -109,25 +109,53 @@ RSpec.describe 'Projects > Audit Events', :js do
       project.add_developer(pete)
     end
 
-    it "appears in the project's audit events" do
-      visit project_project_members_path(project)
-
-      project_member = project.project_member(pete)
-
-      page.within "#project_member_#{project_member.id}" do
-        click_button 'Developer'
-        click_link 'Maintainer'
+    context 'when `vue_project_members_list` feature flag is enabled' do
+      it "appears in the project's audit events" do
+        visit project_project_members_path(project)
+
+        page.within find_member_row(pete) do
+          click_button 'Developer'
+          click_button 'Maintainer'
+        end
+
+        page.within('.qa-project-sidebar') do
+          find(:link, text: 'Security & Compliance').click
+          click_link 'Audit Events'
+        end
+
+        page.within('.audit-log-table') do
+          expect(page).to have_content 'Changed access level from Developer to Maintainer'
+          expect(page).to have_content(project.owner.name)
+          expect(page).to have_content('Pete')
+        end
       end
+    end
 
-      page.within('.qa-project-sidebar') do
-        find(:link, text: 'Security & Compliance').click
-        click_link 'Audit Events'
+    context 'when `vue_project_members_list` feature flag is disabled' do
+      before do
+        stub_feature_flags(vue_project_members_list: false)
       end
 
-      page.within('.audit-log-table') do
-        expect(page).to have_content 'Changed access level from Developer to Maintainer'
-        expect(page).to have_content(project.owner.name)
-        expect(page).to have_content('Pete')
+      it "appears in the project's audit events" do
+        visit project_project_members_path(project)
+
+        project_member = project.project_member(pete)
+
+        page.within "#project_member_#{project_member.id}" do
+          click_button 'Developer'
+          click_link 'Maintainer'
+        end
+
+        page.within('.qa-project-sidebar') do
+          find(:link, text: 'Security & Compliance').click
+          click_link 'Audit Events'
+        end
+
+        page.within('.audit-log-table') do
+          expect(page).to have_content 'Changed access level from Developer to Maintainer'
+          expect(page).to have_content(project.owner.name)
+          expect(page).to have_content('Pete')
+        end
       end
     end
   end

ee/spec/features/projects/members/invite_group_and_members_spec.rb

@@ -5,12 +5,12 @@ require 'spec_helper'
 RSpec.describe 'Project > Members > Invite group and members', :js do
   include Select2Helper
   include ActionView::Helpers::DateHelper
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let(:maintainer) { create(:user) }
 
   before do
     stub_feature_flags(invite_members_group_modal: false)
-    stub_feature_flags(vue_project_members_list: false)
   end
 
   describe 'Share group lock' do
@@ -71,19 +71,43 @@ RSpec.describe 'Project > Members > Invite group and members', :js do
       context 'when the group has "Share with group lock" and "Member lock" disabled' do
         it_behaves_like 'the project can be shared with groups and members'
 
-        it 'the project can be shared with another group' do
-          visit project_project_members_path(project)
+        context 'when `vue_project_members_list` feature flag is enabled' do
+          it 'allows the project to be shared with another group' do
+            visit project_project_members_path(project)
 
-          click_on 'invite-group-tab'
+            click_on 'invite-group-tab'
 
-          select2 group_to_share_with.id, from: '#link_group_id'
-          page.find('body').click
-          find('.btn-success').click
+            select2 group_to_share_with.id, from: '#link_group_id'
+            page.find('body').click
+            find('.btn-success').click
 
-          click_link 'Groups'
+            click_link 'Groups'
 
-          page.within('[data-testid="project-member-groups"]') do
-            expect(page).to have_content(group_to_share_with.name)
+            page.within(members_table) do
+              expect(page).to have_content(group_to_share_with.name)
+            end
+          end
+        end
+
+        context 'when `vue_project_members_list` feature flag is disabled' do
+          before do
+            stub_feature_flags(vue_project_members_list: false)
+          end
+
+          it 'allows the project to be shared with another group' do
+            visit project_project_members_path(project)
+
+            click_on 'invite-group-tab'
+
+            select2 group_to_share_with.id, from: '#link_group_id'
+            page.find('body').click
+            find('.btn-success').click
+
+            click_link 'Groups'
+
+            page.within('[data-testid="project-member-groups"]') do
+              expect(page).to have_content(group_to_share_with.name)
+            end
           end
         end
       end

ee/spec/features/projects/members/member_is_removed_from_project_spec.rb

@@ -8,32 +8,73 @@ RSpec.describe 'Projects > Members > Member is removed from project' do
   let(:other_user) { create(:user) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     project.add_maintainer(user)
     project.add_maintainer(other_user)
-    sign_in(user)
-    visit project_project_members_path(project)
   end
 
-  it 'user is removed from project' do
-    click_link 'Leave'
+  context 'when `vue_project_members_list` feature flag is enabled', :js do
+    before do
+      sign_in(user)
+      visit project_project_members_path(project)
+    end
+
+    it 'user is removed from project' do
+      click_button 'Leave'
+
+      page.within('[role="dialog"]') do
+        click_button('Leave')
+      end
+
+      expect(project.users.exists?(user.id)).to be_falsey
+    end
+
+    context 'when the user has been specifically allowed to access a protected branch' do
+      let!(:matching_protected_branch) { create(:protected_branch, authorize_user_to_push: user, authorize_user_to_merge: user, project: project) }
+      let!(:non_matching_protected_branch) { create(:protected_branch, authorize_user_to_push: other_user, authorize_user_to_merge: other_user, project: project) }
+
+      it 'user leaves project' do
+        click_button 'Leave'
 
-    expect(project.users.exists?(user.id)).to be_falsey
+        page.within('[role="dialog"]') do
+          click_button('Leave')
+        end
+
+        expect(project.users.exists?(user.id)).to be_falsey
+        expect(matching_protected_branch.push_access_levels.where(user: user)).not_to exist
+        expect(matching_protected_branch.merge_access_levels.where(user: user)).not_to exist
+        expect(non_matching_protected_branch.push_access_levels.where(user: other_user)).to exist
+        expect(non_matching_protected_branch.merge_access_levels.where(user: other_user)).to exist
+      end
+    end
   end
 
-  context 'when the user has been specifically allowed to access a protected branch' do
-    let!(:matching_protected_branch) { create(:protected_branch, authorize_user_to_push: user, authorize_user_to_merge: user, project: project) }
-    let!(:non_matching_protected_branch) { create(:protected_branch, authorize_user_to_push: other_user, authorize_user_to_merge: other_user, project: project) }
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
+
+      sign_in(user)
+      visit project_project_members_path(project)
+    end
 
-    it 'user leaves project' do
+    it 'user is removed from project' do
       click_link 'Leave'
 
       expect(project.users.exists?(user.id)).to be_falsey
-      expect(matching_protected_branch.push_access_levels.where(user: user)).not_to exist
-      expect(matching_protected_branch.merge_access_levels.where(user: user)).not_to exist
-      expect(non_matching_protected_branch.push_access_levels.where(user: other_user)).to exist
-      expect(non_matching_protected_branch.merge_access_levels.where(user: other_user)).to exist
+    end
+
+    context 'when the user has been specifically allowed to access a protected branch' do
+      let!(:matching_protected_branch) { create(:protected_branch, authorize_user_to_push: user, authorize_user_to_merge: user, project: project) }
+      let!(:non_matching_protected_branch) { create(:protected_branch, authorize_user_to_push: other_user, authorize_user_to_merge: other_user, project: project) }
+
+      it 'user leaves project' do
+        click_link 'Leave'
+
+        expect(project.users.exists?(user.id)).to be_falsey
+        expect(matching_protected_branch.push_access_levels.where(user: user)).not_to exist
+        expect(matching_protected_branch.merge_access_levels.where(user: user)).not_to exist
+        expect(non_matching_protected_branch.push_access_levels.where(user: other_user)).to exist
+        expect(non_matching_protected_branch.merge_access_levels.where(user: other_user)).to exist
+      end
     end
   end
 end

spec/features/admin/admin_projects_spec.rb

@@ -3,6 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe "Admin::Projects" do
+  include Spec::Support::Helpers::Features::MembersHelpers
   include Select2Helper
 
   let(:user) { create :user }
@@ -10,8 +11,6 @@ RSpec.describe "Admin::Projects" do
   let(:current_user) { create(:admin) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     sign_in(current_user)
     gitlab_enable_admin_mode_sign_in(current_user)
   end
@@ -93,46 +92,97 @@ RSpec.describe "Admin::Projects" do
     end
   end
 
-  describe 'add admin himself to a project' do
-    before do
-      project.add_maintainer(user)
-      stub_feature_flags(invite_members_group_modal: false)
-    end
+  context 'when `vue_project_members_list` feature flag is enabled', :js do
+    describe 'admin adds themselves to the project' do
+      before do
+        project.add_maintainer(user)
+        stub_feature_flags(invite_members_group_modal: false)
+      end
+
+      it 'adds admin to the project as developer', :js do
+        visit project_project_members_path(project)
+
+        page.within '.invite-users-form' do
+          select2(current_user.id, from: '#user_ids', multiple: true)
+          select 'Developer', from: 'access_level'
+        end
 
-    it 'adds admin a to a project as developer', :js do
-      visit project_project_members_path(project)
+        click_button 'Invite'
 
-      page.within '.invite-users-form' do
-        select2(current_user.id, from: '#user_ids', multiple: true)
-        select 'Developer', from: 'access_level'
+        expect(find_member_row(current_user)).to have_content('Developer')
       end
+    end
+
+    describe 'admin removes themselves from the project' do
+      before do
+        project.add_maintainer(user)
+        project.add_developer(current_user)
+      end
+
+      it 'removes admin from the project' do
+        visit project_project_members_path(project)
+
+        expect(find_member_row(current_user)).to have_content('Developer')
 
-      click_button 'Invite'
+        page.within find_member_row(current_user) do
+          click_button 'Leave'
+        end
 
-      page.within '.content-list' do
-        expect(page).to have_content(current_user.name)
-        expect(page).to have_content('Developer')
+        page.within('[role="dialog"]') do
+          click_button('Leave')
+        end
+
+        expect(current_path).to match dashboard_projects_path
       end
     end
   end
 
-  describe 'admin remove himself from a project' do
+  context 'when `vue_project_members_list` feature flag is disabled' do
     before do
-      project.add_maintainer(user)
-      project.add_developer(current_user)
+      stub_feature_flags(vue_project_members_list: false)
     end
 
-    it 'removes admin from the project' do
-      visit project_project_members_path(project)
+    describe 'admin adds themselves to the project' do
+      before do
+        project.add_maintainer(user)
+        stub_feature_flags(invite_members_group_modal: false)
+      end
+
+      it 'adds admin to the project as developer', :js do
+        visit project_project_members_path(project)
 
-      page.within '.content-list' do
-        expect(page).to have_content(current_user.name)
-        expect(page).to have_content('Developer')
+        page.within '.invite-users-form' do
+          select2(current_user.id, from: '#user_ids', multiple: true)
+          select 'Developer', from: 'access_level'
+        end
+
+        click_button 'Invite'
+
+        page.within '.content-list' do
+          expect(page).to have_content(current_user.name)
+          expect(page).to have_content('Developer')
+        end
       end
+    end
 
-      find(:css, '.content-list li', text: current_user.name).find(:css, 'a.btn-danger').click
+    describe 'admin removes themselves from the project' do
+      before do
+        project.add_maintainer(user)
+        project.add_developer(current_user)
+      end
+
+      it 'removes admin from the project' do
+        visit project_project_members_path(project)
+
+        page.within '.content-list' do
+          expect(page).to have_content(current_user.name)
+          expect(page).to have_content('Developer')
+        end
 
-      expect(page).not_to have_selector(:css, '.content-list')
+        find(:css, '.content-list li', text: current_user.name).find(:css, 'a.btn-danger').click
+
+        expect(page).not_to have_selector(:css, '.content-list')
+      end
     end
   end
 end

spec/features/projects/members/anonymous_user_sees_members_spec.rb

@@ -3,22 +3,36 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Members > Anonymous user sees members' do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:user) { create(:user) }
   let(:group) { create(:group, :public) }
   let(:project) { create(:project, :public) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     project.add_maintainer(user)
     create(:project_group_link, project: project, group: group)
   end
 
-  it "anonymous user visits the project's members page and sees the list of members" do
-    visit project_project_members_path(project)
+  context 'when `vue_project_members_list` feature flag is enabled', :js do
+    it "anonymous user visits the project's members page and sees the list of members" do
+      visit project_project_members_path(project)
+
+      expect(find_member_row(user)).to have_content(user.name)
+    end
+  end
+
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
+    end
+
+    it "anonymous user visits the project's members page and sees the list of members" do
+      visit project_project_members_path(project)
 
-    expect(current_path).to eq(
-      project_project_members_path(project))
-    expect(page).to have_content(user.name)
+      expect(current_path).to eq(
+        project_project_members_path(project))
+      expect(page).to have_content(user.name)
+    end
   end
 end

spec/features/projects/members/groups_with_access_list_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Members > Groups with access list', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let_it_be(:user) { create(:user) }
   let_it_be(:group) { create(:group, :public) }
   let_it_be(:project) { create(:project, :public) }
@@ -11,92 +13,176 @@ RSpec.describe 'Projects > Members > Groups with access list', :js do
   let!(:group_link) { create(:project_group_link, project: project, group: group, **additional_link_attrs) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     travel_to Time.now.utc.beginning_of_day
 
     project.add_maintainer(user)
     sign_in(user)
-    visit project_project_members_path(project)
-    click_groups_tab
   end
 
-  it 'updates group access level' do
-    click_button group_link.human_access
-
-    page.within '.dropdown-menu' do
-      click_link 'Guest'
+  context 'when `vue_project_members_list` feature flag is enabled' do
+    before do
+      visit project_project_members_path(project)
+      click_groups_tab
     end
 
-    wait_for_requests
+    it 'updates group access level' do
+      click_button group_link.human_access
+      click_button 'Guest'
 
-    visit project_project_members_path(project)
+      wait_for_requests
 
-    click_groups_tab
+      visit project_project_members_path(project)
 
-    expect(first('.group_member')).to have_content('Guest')
-  end
+      click_groups_tab
+
+      expect(find_group_row(group)).to have_content('Guest')
+    end
 
-  it 'updates expiry date' do
-    expires_at_field = "member_expires_at_#{group.id}"
-    fill_in expires_at_field, with: 3.days.from_now.to_date
+    it 'updates expiry date' do
+      page.within find_group_row(group) do
+        fill_in 'Expiration date', with: 5.days.from_now.to_date
+        find_field('Expiration date').native.send_keys :enter
 
-    find_field(expires_at_field).native.send_keys :enter
-    wait_for_requests
+        wait_for_requests
 
-    page.within(find('li.group_member')) do
-      expect(page).to have_content('Expires in 3 days')
+        expect(page).to have_content(/in \d days/)
+      end
     end
-  end
 
-  context 'when link has expiry date set' do
-    let(:additional_link_attrs) { { expires_at: 3.days.from_now.to_date } }
+    context 'when link has expiry date set' do
+      let(:additional_link_attrs) { { expires_at: 5.days.from_now.to_date } }
 
-    it 'clears expiry date' do
-      page.within(find('li.group_member')) do
-        expect(page).to have_content('Expires in 3 days')
+      it 'clears expiry date' do
+        page.within find_group_row(group) do
+          expect(page).to have_content(/in \d days/)
+
+          find('[data-testid="clear-button"]').click
 
-        page.within(find('.js-edit-member-form')) do
-          find('.js-clear-input').click
+          wait_for_requests
+
+          expect(page).to have_content('No expiration set')
         end
+      end
+    end
 
-        wait_for_requests
+    it 'deletes group link' do
+      expect(page).to have_content(group.full_name)
+
+      page.within find_group_row(group) do
+        click_button 'Remove group'
+      end
 
-        expect(page).not_to have_content('Expires in')
+      page.within('[role="dialog"]') do
+        click_button('Remove group')
+      end
+
+      expect(page).not_to have_content(group.full_name)
+    end
+
+    context 'search in existing members' do
+      it 'finds no results' do
+        fill_in_filtered_search 'Search groups', with: 'testing 123'
+
+        click_groups_tab
+
+        expect(page).not_to have_content(group.full_name)
+      end
+
+      it 'finds results' do
+        fill_in_filtered_search 'Search groups', with: group.full_name
+
+        click_groups_tab
+
+        expect(members_table).to have_content(group.full_name)
       end
     end
   end
 
-  it 'deletes group link' do
-    page.within(first('.group_member')) do
-      accept_confirm { find('.btn-danger').click }
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
+
+      visit project_project_members_path(project)
+      click_groups_tab
     end
-    wait_for_requests
 
-    expect(page).not_to have_selector('.group_member')
-  end
+    it 'updates group access level' do
+      click_button group_link.human_access
 
-  context 'search in existing members' do
-    it 'finds no results' do
-      page.within '.user-search-form' do
-        fill_in 'search_groups', with: 'testing 123'
-        find('.user-search-btn').click
+      page.within '.dropdown-menu' do
+        click_link 'Guest'
       end
 
+      wait_for_requests
+
+      visit project_project_members_path(project)
+
       click_groups_tab
 
+      expect(first('.group_member')).to have_content('Guest')
+    end
+
+    it 'updates expiry date' do
+      expires_at_field = "member_expires_at_#{group.id}"
+      fill_in expires_at_field, with: 3.days.from_now.to_date
+
+      find_field(expires_at_field).native.send_keys :enter
+      wait_for_requests
+
+      page.within(find('li.group_member')) do
+        expect(page).to have_content('Expires in 3 days')
+      end
+    end
+
+    context 'when link has expiry date set' do
+      let(:additional_link_attrs) { { expires_at: 3.days.from_now.to_date } }
+
+      it 'clears expiry date' do
+        page.within(find('li.group_member')) do
+          expect(page).to have_content('Expires in 3 days')
+
+          page.within(find('.js-edit-member-form')) do
+            find('.js-clear-input').click
+          end
+
+          wait_for_requests
+
+          expect(page).not_to have_content('Expires in')
+        end
+      end
+    end
+
+    it 'deletes group link' do
+      page.within(first('.group_member')) do
+        accept_confirm { find('.btn-danger').click }
+      end
+      wait_for_requests
+
       expect(page).not_to have_selector('.group_member')
     end
 
-    it 'finds results' do
-      page.within '.user-search-form' do
-        fill_in 'search_groups', with: group.name
-        find('.user-search-btn').click
+    context 'search in existing members' do
+      it 'finds no results' do
+        page.within '.user-search-form' do
+          fill_in 'search_groups', with: 'testing 123'
+          find('.user-search-btn').click
+        end
+
+        click_groups_tab
+
+        expect(page).not_to have_selector('.group_member')
       end
 
-      click_groups_tab
+      it 'finds results' do
+        page.within '.user-search-form' do
+          fill_in 'search_groups', with: group.name
+          find('.user-search-btn').click
+        end
+
+        click_groups_tab
 
-      expect(page).to have_selector('.group_member', count: 1)
+        expect(page).to have_selector('.group_member', count: 1)
+      end
     end
   end
 

spec/features/projects/members/invite_group_spec.rb

@@ -5,12 +5,12 @@ require 'spec_helper'
 RSpec.describe 'Project > Members > Invite group', :js do
   include Select2Helper
   include ActionView::Helpers::DateHelper
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let(:maintainer) { create(:user) }
 
   before do
     stub_feature_flags(invite_members_group_modal: false)
-    stub_feature_flags(vue_project_members_list: false)
   end
 
   describe 'Share with group lock' do
@@ -41,21 +41,45 @@ RSpec.describe 'Project > Members > Invite group', :js do
       context 'when the group has "Share with group lock" disabled' do
         it_behaves_like 'the project can be shared with groups'
 
-        it 'the project can be shared with another group' do
-          visit project_project_members_path(project)
+        context 'when `vue_project_members_list` feature flag is enabled' do
+          it 'the project can be shared with another group' do
+            visit project_project_members_path(project)
 
-          expect(page).not_to have_link 'Groups'
+            expect(page).not_to have_link 'Groups'
 
-          click_on 'invite-group-tab'
+            click_on 'invite-group-tab'
 
-          select2 group_to_share_with.id, from: '#link_group_id'
-          page.find('body').click
-          find('.btn-success').click
+            select2 group_to_share_with.id, from: '#link_group_id'
+            page.find('body').click
+            find('.btn-success').click
 
-          click_link 'Groups'
+            click_link 'Groups'
 
-          page.within('[data-testid="project-member-groups"]') do
-            expect(page).to have_content(group_to_share_with.name)
+            expect(members_table).to have_content(group_to_share_with.name)
+          end
+        end
+
+        context 'when `vue_project_members_list` feature flag is disabled' do
+          before do
+            stub_feature_flags(vue_project_members_list: false)
+          end
+
+          it 'the project can be shared with another group' do
+            visit project_project_members_path(project)
+
+            expect(page).not_to have_link 'Groups'
+
+            click_on 'invite-group-tab'
+
+            select2 group_to_share_with.id, from: '#link_group_id'
+            page.find('body').click
+            find('.btn-success').click
+
+            click_link 'Groups'
+
+            page.within('[data-testid="project-member-groups"]') do
+              expect(page).to have_content(group_to_share_with.name)
+            end
           end
         end
       end
@@ -122,7 +146,7 @@ RSpec.describe 'Project > Members > Invite group', :js do
       freeze_time { example.run }
     end
 
-    before do
+    def setup
       project.add_maintainer(maintainer)
       group.add_guest(maintainer)
       sign_in(maintainer)
@@ -133,20 +157,37 @@ RSpec.describe 'Project > Members > Invite group', :js do
 
       select2 group.id, from: '#link_group_id'
 
-      fill_in 'expires_at_groups', with: (Time.now + 4.5.days).strftime('%Y-%m-%d')
+      fill_in 'expires_at_groups', with: 5.days.from_now.strftime('%Y-%m-%d')
       click_on 'invite-group-tab'
       find('.btn-success').click
     end
 
-    it 'the group link shows the expiration time with a warning class' do
-      click_link 'Groups'
+    context 'when `vue_project_members_list` feature flag is enabled' do
+      it 'the group link shows the expiration time with a warning class' do
+        setup
+        click_link 'Groups'
 
-      page.within('[data-testid="project-member-groups"]') do
-        # Using distance_of_time_in_words_to_now because it is not the same as
-        # subtraction, and this way avoids time zone issues as well
-        expires_in_text = distance_of_time_in_words_to_now(project.project_group_links.first.expires_at)
-        expect(page).to have_content(expires_in_text)
-        expect(page).to have_selector('.text-warning')
+        expect(find_group_row(group)).to have_content(/in \d days/)
+        expect(find_group_row(group)).to have_selector('.gl-text-orange-500')
+      end
+    end
+
+    context 'when `vue_project_members_list` feature flag is disabled' do
+      before do
+        stub_feature_flags(vue_project_members_list: false)
+      end
+
+      it 'the group link shows the expiration time with a warning class' do
+        setup
+        click_link 'Groups'
+
+        page.within('[data-testid="project-member-groups"]') do
+          # Using distance_of_time_in_words_to_now because it is not the same as
+          # subtraction, and this way avoids time zone issues as well
+          expires_in_text = distance_of_time_in_words_to_now(project.project_group_links.first.expires_at)
+          expect(page).to have_content(expires_in_text)
+          expect(page).to have_selector('.text-warning')
+        end
       end
     end
   end

spec/features/projects/members/list_spec.rb

@@ -4,7 +4,6 @@ require 'spec_helper'
 
 RSpec.describe 'Project members list' do
   include Select2Helper
-  include Spec::Support::Helpers::Features::ListRowsHelpers
 
   let(:user1) { create(:user, name: 'John Doe') }
   let(:user2) { create(:user, name: 'Mary Jane') }
@@ -13,110 +12,215 @@ RSpec.describe 'Project members list' do
 
   before do
     stub_feature_flags(invite_members_group_modal: false)
-    stub_feature_flags(vue_project_members_list: false)
 
     sign_in(user1)
     group.add_owner(user1)
   end
 
-  it 'pushes `vue_project_members_list` feature flag to the frontend' do
-    visit_members_page
+  context 'when `vue_project_members_list` feature flag is enabled', :js do
+    include Spec::Support::Helpers::Features::MembersHelpers
 
-    expect(page).to have_pushed_frontend_feature_flags(vueProjectMembersList: false)
-  end
+    it 'pushes `vue_project_members_list` feature flag to the frontend' do
+      visit_members_page
 
-  it 'show members from project and group' do
-    project.add_developer(user2)
+      expect(page).to have_pushed_frontend_feature_flags(vueProjectMembersList: true)
+    end
 
-    visit_members_page
+    it 'show members from project and group' do
+      project.add_developer(user2)
 
-    expect(first_row.text).to include(user1.name)
-    expect(second_row.text).to include(user2.name)
-  end
+      visit_members_page
 
-  it 'show user once if member of both group and project' do
-    project.add_developer(user1)
+      expect(first_row).to have_content(user1.name)
+      expect(second_row).to have_content(user2.name)
+    end
 
-    visit_members_page
+    it 'show user once if member of both group and project' do
+      project.add_developer(user1)
 
-    expect(first_row.text).to include(user1.name)
-    expect(second_row).to be_blank
-  end
+      visit_members_page
 
-  it 'update user access level', :js do
-    project.add_developer(user2)
+      expect(first_row).to have_content(user1.name)
+      expect(second_row).to be_blank
+    end
+
+    it 'update user access level', :js do
+      project.add_developer(user2)
 
-    visit_members_page
+      visit_members_page
 
-    page.within(second_row) do
-      click_button('Developer')
-      click_link('Reporter')
+      page.within find_member_row(user2) do
+        click_button('Developer')
+        click_button('Reporter')
 
-      expect(page).to have_button('Reporter')
+        expect(page).to have_button('Reporter')
+      end
     end
-  end
 
-  it 'add user to project', :js do
-    visit_members_page
+    it 'add user to project', :js do
+      visit_members_page
 
-    add_user(user2.id, 'Reporter')
+      add_user(user2.id, 'Reporter')
 
-    page.within(second_row) do
-      expect(page).to have_content(user2.name)
-      expect(page).to have_button('Reporter')
+      page.within find_member_row(user2) do
+        expect(page).to have_button('Reporter')
+      end
     end
-  end
 
-  it 'remove user from project', :js do
-    other_user = create(:user)
-    project.add_developer(other_user)
+    it 'remove user from project', :js do
+      other_user = create(:user)
+      project.add_developer(other_user)
+
+      visit_members_page
 
-    visit_members_page
+      # Open modal
+      page.within find_member_row(other_user) do
+        click_button 'Remove member'
+      end
 
-    # Open modal
-    find(:css, 'li.project_member', text: other_user.name).find(:css, 'button.btn-danger').click
+      page.within('[role="dialog"]') do
+        expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+        click_button('Remove member')
+      end
 
-    expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+      wait_for_requests
 
-    click_on('Remove member')
+      expect(members_table).not_to have_content(other_user.name)
+    end
 
-    wait_for_requests
+    it 'invite user to project', :js do
+      visit_members_page
 
-    expect(page).not_to have_content(other_user.name)
-    expect(project.users).not_to include(other_user)
-  end
+      add_user('test@example.com', 'Reporter')
 
-  it 'invite user to project', :js do
-    visit_members_page
+      click_link 'Invited'
 
-    add_user('test@example.com', 'Reporter')
+      page.within find_invited_member_row('test@example.com') do
+        expect(page).to have_button('Reporter')
+      end
+    end
+
+    context 'project bots' do
+      let(:project_bot) { create(:user, :project_bot, name: 'project_bot') }
 
-    click_link 'Invited'
+      before do
+        project.add_maintainer(project_bot)
+      end
 
-    page.within(first_row) do
-      expect(page).to have_content('test@example.com')
-      expect(page).to have_content('Invited')
-      expect(page).to have_button('Reporter')
+      it 'does not show form used to change roles and "Expiration date" or the remove user button' do
+        visit_members_page
+
+        page.within find_member_row(project_bot) do
+          expect(page).not_to have_button('Maintainer')
+          expect(page).to have_field('Expiration date', disabled: true)
+          expect(page).not_to have_button('Remove member')
+        end
+      end
     end
   end
 
-  context 'project bots' do
-    let(:project_bot) { create(:user, :project_bot, name: 'project_bot') }
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    include Spec::Support::Helpers::Features::ListRowsHelpers
 
     before do
-      project.add_maintainer(project_bot)
+      stub_feature_flags(vue_project_members_list: false)
+    end
+
+    it 'show members from project and group' do
+      project.add_developer(user2)
+
+      visit_members_page
+
+      expect(first_row.text).to include(user1.name)
+      expect(second_row.text).to include(user2.name)
+    end
+
+    it 'show user once if member of both group and project' do
+      project.add_developer(user1)
+
+      visit_members_page
+
+      expect(first_row.text).to include(user1.name)
+      expect(second_row).to be_blank
+    end
+
+    it 'update user access level', :js do
+      project.add_developer(user2)
+
+      visit_members_page
+
+      page.within(second_row) do
+        click_button('Developer')
+        click_link('Reporter')
+
+        expect(page).to have_button('Reporter')
+      end
     end
 
-    it 'does not show form used to change roles and "Expiration date" or the remove user button' do
-      project_member = project.project_members.find_by(user_id: project_bot.id)
+    it 'add user to project', :js do
+      visit_members_page
+
+      add_user(user2.id, 'Reporter')
+
+      page.within(second_row) do
+        expect(page).to have_content(user2.name)
+        expect(page).to have_button('Reporter')
+      end
+    end
+
+    it 'remove user from project', :js do
+      other_user = create(:user)
+      project.add_developer(other_user)
+
+      visit_members_page
+
+      # Open modal
+      find(:css, 'li.project_member', text: other_user.name).find(:css, 'button.btn-danger').click
+
+      expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+
+      click_on('Remove member')
+
+      wait_for_requests
 
+      expect(page).not_to have_content(other_user.name)
+      expect(project.users).not_to include(other_user)
+    end
+
+    it 'invite user to project', :js do
       visit_members_page
 
-      expect(page).not_to have_selector("#edit_project_member_#{project_member.id}")
-      expect(page).to have_no_selector("#project_member_#{project_member.id} .btn-danger")
+      add_user('test@example.com', 'Reporter')
+
+      click_link 'Invited'
+
+      page.within(first_row) do
+        expect(page).to have_content('test@example.com')
+        expect(page).to have_content('Invited')
+        expect(page).to have_button('Reporter')
+      end
+    end
+
+    context 'project bots' do
+      let(:project_bot) { create(:user, :project_bot, name: 'project_bot') }
+
+      before do
+        project.add_maintainer(project_bot)
+      end
+
+      it 'does not show form used to change roles and "Expiration date" or the remove user button' do
+        project_member = project.project_members.find_by(user_id: project_bot.id)
+
+        visit_members_page
+
+        expect(page).not_to have_selector("#edit_project_member_#{project_member.id}")
+        expect(page).to have_no_selector("#project_member_#{project_member.id} .btn-danger")
+      end
     end
   end
 
+  private
+
   def add_user(id, role)
     page.within ".invite-users-form" do
       select2(id, from: "#user_ids", multiple: true)

spec/features/projects/members/master_adds_member_with_expiration_date_spec.rb

@@ -5,65 +5,120 @@ require 'spec_helper'
 RSpec.describe 'Projects > Members > Maintainer adds member with expiration date', :js do
   include Select2Helper
   include ActiveSupport::Testing::TimeHelpers
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let_it_be(:maintainer) { create(:user) }
   let_it_be(:project) { create(:project) }
   let(:new_member) { create(:user) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     travel_to Time.now.utc.beginning_of_day
 
     project.add_maintainer(maintainer)
     sign_in(maintainer)
   end
 
-  it 'expiration date is displayed in the members list' do
-    stub_feature_flags(invite_members_group_modal: false)
+  context 'when `vue_project_members_list` feature flag is enabled' do
+    it 'expiration date is displayed in the members list' do
+      stub_feature_flags(invite_members_group_modal: false)
+
+      visit project_project_members_path(project)
 
-    visit project_project_members_path(project)
+      page.within '.invite-users-form' do
+        select2(new_member.id, from: '#user_ids', multiple: true)
 
-    page.within '.invite-users-form' do
-      select2(new_member.id, from: '#user_ids', multiple: true)
+        fill_in 'expires_at', with: 5.days.from_now.to_date
+        find_field('expires_at').native.send_keys :enter
 
-      fill_in 'expires_at', with: 3.days.from_now.to_date
-      find_field('expires_at').native.send_keys :enter
+        click_on 'Invite'
+      end
 
-      click_on 'Invite'
+      page.within find_member_row(new_member) do
+        expect(page).to have_content(/in \d days/)
+      end
     end
 
-    page.within "#project_member_#{project_member_id}" do
-      expect(page).to have_content('Expires in 3 days')
+    it 'changes expiration date' do
+      project.team.add_users([new_member.id], :developer, expires_at: 3.days.from_now.to_date)
+      visit project_project_members_path(project)
+
+      page.within find_member_row(new_member) do
+        fill_in 'Expiration date', with: 5.days.from_now.to_date
+        find_field('Expiration date').native.send_keys :enter
+
+        wait_for_requests
+
+        expect(page).to have_content(/in \d days/)
+      end
     end
-  end
 
-  it 'changes expiration date' do
-    project.team.add_users([new_member.id], :developer, expires_at: Date.today.to_date)
-    visit project_project_members_path(project)
+    it 'clears expiration date' do
+      project.team.add_users([new_member.id], :developer, expires_at: 5.days.from_now.to_date)
+      visit project_project_members_path(project)
 
-    page.within "#project_member_#{project_member_id}" do
-      fill_in 'Expiration date', with: 3.days.from_now.to_date
-      find_field('Expiration date').native.send_keys :enter
+      page.within find_member_row(new_member) do
+        expect(page).to have_content(/in \d days/)
 
-      wait_for_requests
+        find('[data-testid="clear-button"]').click
 
-      expect(page).to have_content('Expires in 3 days')
+        wait_for_requests
+
+        expect(page).to have_content('No expiration set')
+      end
     end
   end
 
-  it 'clears expiration date' do
-    project.team.add_users([new_member.id], :developer, expires_at: 3.days.from_now.to_date)
-    visit project_project_members_path(project)
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
+    end
+
+    it 'expiration date is displayed in the members list' do
+      stub_feature_flags(invite_members_group_modal: false)
+
+      visit project_project_members_path(project)
+
+      page.within '.invite-users-form' do
+        select2(new_member.id, from: '#user_ids', multiple: true)
+
+        fill_in 'expires_at', with: 3.days.from_now.to_date
+        find_field('expires_at').native.send_keys :enter
+
+        click_on 'Invite'
+      end
+
+      page.within "#project_member_#{project_member_id}" do
+        expect(page).to have_content('Expires in 3 days')
+      end
+    end
+
+    it 'changes expiration date' do
+      project.team.add_users([new_member.id], :developer, expires_at: 1.day.from_now.to_date)
+      visit project_project_members_path(project)
+
+      page.within "#project_member_#{project_member_id}" do
+        fill_in 'Expiration date', with: 3.days.from_now.to_date
+        find_field('Expiration date').native.send_keys :enter
+
+        wait_for_requests
+
+        expect(page).to have_content('Expires in 3 days')
+      end
+    end
+
+    it 'clears expiration date' do
+      project.team.add_users([new_member.id], :developer, expires_at: 3.days.from_now.to_date)
+      visit project_project_members_path(project)
 
-    page.within "#project_member_#{project_member_id}" do
-      expect(page).to have_content('Expires in 3 days')
+      page.within "#project_member_#{project_member_id}" do
+        expect(page).to have_content('Expires in 3 days')
 
-      find('.js-clear-input').click
+        find('.js-clear-input').click
 
-      wait_for_requests
+        wait_for_requests
 
-      expect(page).not_to have_content('Expires in')
+        expect(page).not_to have_content('Expires in')
+      end
     end
   end
 

spec/features/projects/members/sorting_spec.rb

@@ -3,90 +3,181 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Members > Sorting' do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:maintainer) { create(:user, name: 'John Doe') }
   let(:developer) { create(:user, name: 'Mary Jane', last_sign_in_at: 5.days.ago) }
   let(:project) { create(:project, namespace: maintainer.namespace, creator: maintainer) }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     create(:project_member, :developer, user: developer, project: project, created_at: 3.days.ago)
 
     sign_in(maintainer)
   end
 
-  it 'sorts alphabetically by default' do
-    visit_members_list(sort: nil)
+  context 'when `vue_project_members_list` feature flag is enabled', :js do
+    it 'sorts by account by default' do
+      visit_members_list(sort: nil)
 
-    expect(first_member).to include(maintainer.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
-  end
+      expect(first_row).to have_content(maintainer.name)
+      expect(second_row).to have_content(developer.name)
 
-  it 'sorts by access level ascending' do
-    visit_members_list(sort: :access_level_asc)
+      expect_sort_by('Account', :asc)
+    end
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(maintainer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, ascending')
-  end
+    it 'sorts by max role ascending' do
+      visit_members_list(sort: :access_level_asc)
 
-  it 'sorts by access level descending' do
-    visit_members_list(sort: :access_level_desc)
+      expect(first_row).to have_content(developer.name)
+      expect(second_row).to have_content(maintainer.name)
 
-    expect(first_member).to include(maintainer.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, descending')
-  end
+      expect_sort_by('Max role', :asc)
+    end
 
-  it 'sorts by last joined' do
-    visit_members_list(sort: :last_joined)
+    it 'sorts by max role descending' do
+      visit_members_list(sort: :access_level_desc)
 
-    expect(first_member).to include(maintainer.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Last joined')
-  end
+      expect(first_row).to have_content(maintainer.name)
+      expect(second_row).to have_content(developer.name)
 
-  it 'sorts by oldest joined' do
-    visit_members_list(sort: :oldest_joined)
+      expect_sort_by('Max role', :desc)
+    end
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(maintainer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest joined')
-  end
+    it 'sorts by access granted ascending' do
+      visit_members_list(sort: :last_joined)
 
-  it 'sorts by name ascending' do
-    visit_members_list(sort: :name_asc)
+      expect(first_row).to have_content(maintainer.name)
+      expect(second_row).to have_content(developer.name)
 
-    expect(first_member).to include(maintainer.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
-  end
+      expect_sort_by('Access granted', :asc)
+    end
 
-  it 'sorts by name descending' do
-    visit_members_list(sort: :name_desc)
+    it 'sorts by access granted descending' do
+      visit_members_list(sort: :oldest_joined)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(maintainer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, descending')
-  end
+      expect(first_row).to have_content(developer.name)
+      expect(second_row).to have_content(maintainer.name)
+
+      expect_sort_by('Access granted', :desc)
+    end
+
+    it 'sorts by account ascending' do
+      visit_members_list(sort: :name_asc)
+
+      expect(first_row).to have_content(maintainer.name)
+      expect(second_row).to have_content(developer.name)
+
+      expect_sort_by('Account', :asc)
+    end
+
+    it 'sorts by account descending' do
+      visit_members_list(sort: :name_desc)
+
+      expect(first_row).to have_content(developer.name)
+      expect(second_row).to have_content(maintainer.name)
+
+      expect_sort_by('Account', :desc)
+    end
+
+    it 'sorts by last sign-in ascending', :clean_gitlab_redis_shared_state do
+      visit_members_list(sort: :recent_sign_in)
+
+      expect(first_row).to have_content(maintainer.name)
+      expect(second_row).to have_content(developer.name)
+
+      expect_sort_by('Last sign-in', :asc)
+    end
+
+    it 'sorts by last sign-in descending', :clean_gitlab_redis_shared_state do
+      visit_members_list(sort: :oldest_sign_in)
 
-  it 'sorts by recent sign in', :clean_gitlab_redis_shared_state do
-    visit_members_list(sort: :recent_sign_in)
+      expect(first_row).to have_content(developer.name)
+      expect(second_row).to have_content(maintainer.name)
 
-    expect(first_member).to include(maintainer.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Recent sign in')
+      expect_sort_by('Last sign-in', :desc)
+    end
   end
 
-  it 'sorts by oldest sign in', :clean_gitlab_redis_shared_state do
-    visit_members_list(sort: :oldest_sign_in)
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
+    end
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(maintainer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest sign in')
+    it 'sorts alphabetically by default' do
+      visit_members_list(sort: nil)
+
+      expect(first_member).to include(maintainer.name)
+      expect(second_member).to include(developer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+    end
+
+    it 'sorts by access level ascending' do
+      visit_members_list(sort: :access_level_asc)
+
+      expect(first_member).to include(developer.name)
+      expect(second_member).to include(maintainer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, ascending')
+    end
+
+    it 'sorts by access level descending' do
+      visit_members_list(sort: :access_level_desc)
+
+      expect(first_member).to include(maintainer.name)
+      expect(second_member).to include(developer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, descending')
+    end
+
+    it 'sorts by last joined' do
+      visit_members_list(sort: :last_joined)
+
+      expect(first_member).to include(maintainer.name)
+      expect(second_member).to include(developer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Last joined')
+    end
+
+    it 'sorts by oldest joined' do
+      visit_members_list(sort: :oldest_joined)
+
+      expect(first_member).to include(developer.name)
+      expect(second_member).to include(maintainer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest joined')
+    end
+
+    it 'sorts by name ascending' do
+      visit_members_list(sort: :name_asc)
+
+      expect(first_member).to include(maintainer.name)
+      expect(second_member).to include(developer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+    end
+
+    it 'sorts by name descending' do
+      visit_members_list(sort: :name_desc)
+
+      expect(first_member).to include(developer.name)
+      expect(second_member).to include(maintainer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, descending')
+    end
+
+    it 'sorts by recent sign in', :clean_gitlab_redis_shared_state do
+      visit_members_list(sort: :recent_sign_in)
+
+      expect(first_member).to include(maintainer.name)
+      expect(second_member).to include(developer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Recent sign in')
+    end
+
+    it 'sorts by oldest sign in', :clean_gitlab_redis_shared_state do
+      visit_members_list(sort: :oldest_sign_in)
+
+      expect(first_member).to include(developer.name)
+      expect(second_member).to include(maintainer.name)
+      expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest sign in')
+    end
   end
 
+  private
+
   def visit_members_list(sort:)
     visit project_project_members_path(project, sort: sort)
   end
@@ -98,4 +189,11 @@ RSpec.describe 'Projects > Members > Sorting' do
   def second_member
     page.all('ul.content-list > li').last.text
   end
+
+  def expect_sort_by(text, sort_direction)
+    within('[data-testid="members-sort-dropdown"]') do
+      expect(page).to have_css('button[aria-haspopup="true"]', text: text)
+      expect(page).to have_button("Sorting Direction: #{sort_direction == :asc ? 'Ascending' : 'Descending'}")
+    end
+  end
 end

spec/features/projects/members/tabs_spec.rb

@@ -3,6 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Members > Tabs' do
+  include Spec::Support::Helpers::Features::MembersHelpers
   using RSpec::Parameterized::TableSyntax
 
   let_it_be(:user) { create(:user) }
@@ -19,56 +20,93 @@ RSpec.describe 'Projects > Members > Tabs' do
     end
   end
 
-  before do
-    stub_feature_flags(vue_project_members_list: false)
-    allow(Kaminari.config).to receive(:default_per_page).and_return(1)
-
-    sign_in(user)
-    visit project_project_members_path(project)
-  end
+  context 'tabs' do
+    before do
+      sign_in(user)
+      visit project_project_members_path(project)
+    end
 
-  where(:tab, :count) do
-    'Members'         | 3
-    'Invited'         | 2
-    'Groups'          | 2
-    'Access requests' | 2
-  end
+    where(:tab, :count) do
+      'Members'         | 3
+      'Invited'         | 2
+      'Groups'          | 2
+      'Access requests' | 2
+    end
 
-  with_them do
-    it "renders #{params[:tab]} tab" do
-      expect(page).to have_selector('.nav-link', text: "#{tab} #{count}")
+    with_them do
+      it "renders #{params[:tab]} tab" do
+        expect(page).to have_selector('.nav-link', text: "#{tab} #{count}")
+      end
     end
-  end
 
-  context 'displays "Members" tab by default' do
-    it_behaves_like 'active "Members" tab'
+    context 'displays "Members" tab by default' do
+      it_behaves_like 'active "Members" tab'
+    end
   end
 
-  context 'when searching "Groups"', :js do
+  context 'when `vue_project_members_list` feature flag is enabled' do
     before do
-      click_link 'Groups'
+      sign_in(user)
+      visit project_project_members_path(project)
+    end
+
+    context 'when searching "Groups"', :js do
+      before do
+        click_link 'Groups'
+
+        fill_in_filtered_search 'Search groups', with: 'group'
+      end
 
-      page.within '[data-testid="group-link-search-form"]' do
-        fill_in 'search_groups', with: 'group'
-        find('button[type="submit"]').click
+      it 'displays "Groups" tab' do
+        expect(page).to have_selector('.nav-link.active', text: 'Groups')
+      end
+
+      context 'and then searching "Members"' do
+        before do
+          click_link 'Members 3'
+
+          fill_in_filtered_search 'Filter members', with: 'user'
+        end
+
+        it_behaves_like 'active "Members" tab'
       end
     end
+  end
+
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
 
-    it 'displays "Groups" tab' do
-      expect(page).to have_selector('.nav-link.active', text: 'Groups')
+      sign_in(user)
+      visit project_project_members_path(project)
     end
 
-    context 'and then searching "Members"' do
+    context 'when searching "Groups"', :js do
       before do
-        click_link 'Members 3'
+        click_link 'Groups'
 
-        page.within '[data-testid="user-search-form"]' do
-          fill_in 'search', with: 'user'
+        page.within '[data-testid="group-link-search-form"]' do
+          fill_in 'search_groups', with: 'group'
           find('button[type="submit"]').click
         end
       end
 
-      it_behaves_like 'active "Members" tab'
+      it 'displays "Groups" tab' do
+        expect(page).to have_selector('.nav-link.active', text: 'Groups')
+      end
+
+      context 'and then searching "Members"' do
+        before do
+          click_link 'Members 3'
+
+          page.within '[data-testid="user-search-form"]' do
+            fill_in 'search', with: 'user'
+            find('button[type="submit"]').click
+          end
+        end
+
+        it_behaves_like 'active "Members" tab'
+      end
     end
   end
 end

spec/features/projects/settings/user_manages_project_members_spec.rb

@@ -3,6 +3,9 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Settings > User manages project members' do
+  include Spec::Support::Helpers::Features::MembersHelpers
+  include Select2Helper
+
   let(:group) { create(:group, name: 'OpenSource') }
   let(:project) { create(:project) }
   let(:project2) { create(:project) }
@@ -11,71 +14,128 @@ RSpec.describe 'Projects > Settings > User manages project members' do
   let(:user_mike) { create(:user, name: 'Mike') }
 
   before do
-    stub_feature_flags(vue_project_members_list: false)
-
     project.add_maintainer(user)
     project.add_developer(user_dmitriy)
     sign_in(user)
   end
 
-  it 'cancels a team member', :js do
-    visit(project_project_members_path(project))
+  context 'when `vue_project_members_list` feature flag is enabled' do
+    it 'cancels a team member', :js do
+      visit(project_project_members_path(project))
+
+      page.within find_member_row(user_dmitriy) do
+        click_button 'Remove member'
+      end
+
+      page.within('[role="dialog"]') do
+        expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+        click_button('Remove member')
+      end
+
+      visit(project_project_members_path(project))
+
+      expect(members_table).not_to have_content(user_dmitriy.name)
+      expect(members_table).not_to have_content(user_dmitriy.username)
+    end
+
+    it 'imports a team from another project', :js do
+      stub_feature_flags(invite_members_group_modal: false)
+
+      project2.add_maintainer(user)
+      project2.add_reporter(user_mike)
 
-    project_member = project.project_members.find_by(user_id: user_dmitriy.id)
+      visit(project_project_members_path(project))
 
-    page.within("#project_member_#{project_member.id}") do
-      # Open modal
-      click_on('Remove user from project')
+      page.within('.invite-users-form') do
+        click_link('Import')
+      end
+
+      select2(project2.id, from: '#source_project_id')
+      click_button('Import project members')
+
+      expect(find_member_row(user_mike)).to have_content('Reporter')
     end
 
-    expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+    it 'shows all members of project shared group', :js do
+      group.add_owner(user)
+      group.add_developer(user_dmitriy)
+
+      share_link = project.project_group_links.new(group_access: Gitlab::Access::MAINTAINER)
+      share_link.group_id = group.id
+      share_link.save!
 
-    click_on('Remove member')
+      visit(project_project_members_path(project))
 
-    visit(project_project_members_path(project))
+      click_link 'Groups'
 
-    expect(page).not_to have_content(user_dmitriy.name)
-    expect(page).not_to have_content(user_dmitriy.username)
+      expect(find_group_row(group)).to have_content('Maintainer')
+    end
   end
 
-  it 'imports a team from another project' do
-    stub_feature_flags(invite_members_group_modal: false)
+  context 'when `vue_project_members_list` feature flag is disabled' do
+    before do
+      stub_feature_flags(vue_project_members_list: false)
+    end
+
+    it 'cancels a team member', :js do
+      visit(project_project_members_path(project))
+
+      project_member = project.project_members.find_by(user_id: user_dmitriy.id)
+
+      page.within("#project_member_#{project_member.id}") do
+        # Open modal
+        click_on('Remove user from project')
+      end
+
+      expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
 
-    project2.add_maintainer(user)
-    project2.add_reporter(user_mike)
+      click_on('Remove member')
 
-    visit(project_project_members_path(project))
+      visit(project_project_members_path(project))
 
-    page.within('.invite-users-form') do
-      click_link('Import')
+      expect(page).not_to have_content(user_dmitriy.name)
+      expect(page).not_to have_content(user_dmitriy.username)
     end
 
-    select(project2.full_name, from: 'source_project_id')
-    click_button('Import')
+    it 'imports a team from another project' do
+      stub_feature_flags(invite_members_group_modal: false)
 
-    project_member = project.project_members.find_by(user_id: user_mike.id)
+      project2.add_maintainer(user)
+      project2.add_reporter(user_mike)
 
-    page.within("#project_member_#{project_member.id}") do
-      expect(page).to have_content('Mike')
-      expect(page).to have_content('Reporter')
+      visit(project_project_members_path(project))
+
+      page.within('.invite-users-form') do
+        click_link('Import')
+      end
+
+      select(project2.full_name, from: 'source_project_id')
+      click_button('Import')
+
+      project_member = project.project_members.find_by(user_id: user_mike.id)
+
+      page.within("#project_member_#{project_member.id}") do
+        expect(page).to have_content('Mike')
+        expect(page).to have_content('Reporter')
+      end
     end
-  end
 
-  it 'shows all members of project shared group', :js do
-    group.add_owner(user)
-    group.add_developer(user_dmitriy)
+    it 'shows all members of project shared group', :js do
+      group.add_owner(user)
+      group.add_developer(user_dmitriy)
 
-    share_link = project.project_group_links.new(group_access: Gitlab::Access::MAINTAINER)
-    share_link.group_id = group.id
-    share_link.save!
+      share_link = project.project_group_links.new(group_access: Gitlab::Access::MAINTAINER)
+      share_link.group_id = group.id
+      share_link.save!
 
-    visit(project_project_members_path(project))
+      visit(project_project_members_path(project))
 
-    click_link 'Groups'
+      click_link 'Groups'
 
-    page.within('[data-testid="project-member-groups"]') do
-      expect(page).to have_content('OpenSource')
-      expect(first('.group_member')).to have_content('Maintainer')
+      page.within('[data-testid="project-member-groups"]') do
+        expect(page).to have_content('OpenSource')
+        expect(first('.group_member')).to have_content('Maintainer')
+      end
     end
   end
 end

spec/support/helpers/features/members_table_helpers.rb

@@ -30,6 +30,32 @@ module Spec
           def invite_users_form
             page.find('[data-testid="invite-users-form"]')
           end
+
+          def find_row(name)
+            page.within(members_table) do
+              page.find('tbody > tr', text: name)
+            end
+          end
+
+          def find_member_row(user)
+            find_row(user.name)
+          end
+
+          def find_invited_member_row(email)
+            find_row(email)
+          end
+
+          def find_group_row(group)
+            find_row(group.full_name)
+          end
+
+          def fill_in_filtered_search(label, with:)
+            page.within '[data-testid="members-filtered-search-bar"]' do
+              find_field(label).click
+              find('input').native.send_keys(with)
+              click_button 'Search'
+            end
+          end
         end
       end
     end