1 files changed, 68 insertions, 124 deletions
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index a1527a74898..ab3998be009 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -3,136 +3,80 @@
 - show_invited_members = can_manage_members && @invited_members.exists?
 - show_access_requests = can_manage_members && @requesters.exists?
 - invited_active = params[:search_invited].present? || params[:invited_members_page].present?
-- vue_members_list_enabled = Feature.enabled?(:vue_group_members_list, @group, default_enabled: true)
-- filtered_search_enabled = Feature.enabled?(:group_members_filtered_search, @group, default_enabled: true)
-- current_user_is_group_owner = @group && @group.has_owner?(current_user)
-
-- form_item_label_css_class = 'label-bold gl-mr-2 gl-mb-0 gl-py-2 align-self-md-center'
 
 .js-remove-member-modal
-.project-members-page.gl-mt-3
-  %h4
-    = _('Group members')
-  %hr
-  - if can_manage_members
-    %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
-      %li.nav-tab{ role: 'presentation' }
-        %a.nav-link.active{ href: '#invite-member-pane', id: 'invite-member-tab', data: { toggle: 'tab' }, role: 'tab' }= _('Invite member')
-        %li.nav-tab{ role: 'presentation' }
-          %a.nav-link{ href: '#invite-group-pane', id: 'invite-group-tab', data: { toggle: 'tab', qa_selector: 'invite_group_tab' }, role: 'tab' }= _('Invite group')
-    .tab-content.gitlab-tab-content
-      .tab-pane.active{ id: 'invite-member-pane', role: 'tabpanel' }
-        = render_invite_member_for_group(@group, @group_member.access_level)
-      .tab-pane{ id: 'invite-group-pane', role: 'tabpanel' }
-        = render 'shared/members/invite_group', submit_url: group_group_links_path(@group), access_levels: GroupMember.access_level_roles, default_access_level: @group_member.access_level, group_link_field: 'shared_with_group_id', group_access_field: 'shared_group_access'
+.row.gl-mt-3
+  .col-lg-12
+    .gl-display-flex.gl-flex-wrap
+      - if can_manage_members
+        .gl-w-half.gl-xs-w-full
+          %h4
+            = _('Group members')
+          %p
+            = html_escape(_('You can invite a new member to %{strong_start}%{group_name}%{strong_end}.')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
+        - if invite_members_allowed?(@group)
+          .gl-w-half.gl-xs-w-full
+            .gl-display-flex.gl-flex-wrap.gl-lg-justify-content-end.gl-mx-n2.gl-mb-3
+              .js-invite-members-trigger.gl-px-2.gl-sm-w-auto.gl-w-full.gl-mb-4{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite members') } }
+          = render_if_exists 'groups/invite_members_modal', group: @group
+    - if can_manage_members && !invite_members_allowed?(@group)
+      %hr.gl-mt-4
+        %ul.nav-links.nav.nav-tabs.gitlab-tabs{ role: 'tablist' }
+          %li.nav-tab{ role: 'presentation' }
+            %a.nav-link.active{ href: '#invite-member-pane', id: 'invite-member-tab', data: { toggle: 'tab' }, role: 'tab' }= _('Invite member')
+            %li.nav-tab{ role: 'presentation' }
+              %a.nav-link{ href: '#invite-group-pane', id: 'invite-group-tab', data: { toggle: 'tab', qa_selector: 'invite_group_tab' }, role: 'tab' }= _('Invite group')
+        .tab-content.gitlab-tab-content
+          .tab-pane.active{ id: 'invite-member-pane', role: 'tabpanel' }
+            = render_invite_member_for_group(@group, @group_member.access_level)
+          .tab-pane{ id: 'invite-group-pane', role: 'tabpanel' }
+            = render 'shared/members/invite_group', submit_url: group_group_links_path(@group), access_levels: GroupMember.access_level_roles, default_access_level: @group_member.access_level, group_link_field: 'shared_with_group_id', group_access_field: 'shared_group_access'
 
-  = render_if_exists 'groups/group_members/ldap_sync'
+    = render_if_exists 'groups/group_members/ldap_sync'
 
-  %ul.nav-links.mobile-separator.nav.nav-tabs
-    %li.nav-item
-      = link_to '#tab-members', class: ['nav-link', ('active' unless invited_active)], data: { toggle: 'tab' } do
-        %span
-          = _('Members')
-        %span.badge.badge-pill= @members.total_count
-    - if @group.shared_with_group_links.any?
-      %li.nav-item
-        = link_to '#tab-groups', class: ['nav-link'] , data: { toggle: 'tab', qa_selector: 'groups_list_tab' } do
-          %span
-            = _('Groups')
-          %span.badge.badge-pill= @group.shared_with_group_links.count
-    - if show_invited_members
+    %ul.nav-links.mobile-separator.nav.nav-tabs
       %li.nav-item
-        = link_to '#tab-invited-members', class: ['nav-link', ('active' if invited_active)], data: { toggle: 'tab' } do
+        = link_to '#tab-members', class: ['nav-link', ('active' unless invited_active)], data: { toggle: 'tab' } do
           %span
-            = _('Invited')
-          %span.badge.badge-pill= @invited_members.total_count
-    - if show_access_requests
-      %li.nav-item
-        = link_to '#tab-access-requests', class: 'nav-link', data: { toggle: 'tab' } do
-          %span
-            = _('Access requests')
-          %span.badge.badge-pill= @requesters.count
-  .tab-content
-    #tab-members.tab-pane{ class: ('active' unless invited_active) }
-      .card.card-without-border
-        - unless filtered_search_enabled
-          = render 'groups/group_members/tab_pane/header' do
-            = render 'groups/group_members/tab_pane/title' do
-              = html_escape(_('Members with access to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-            = form_tag group_group_members_path(@group), method: :get, class: 'user-search-form gl-display-flex gl-md-align-items-center gl-flex-wrap gl-flex-direction-column gl-md-flex-direction-row gl-mx-n3 gl-my-n3', data: { testid: 'user-search-form' } do
-              .gl-px-3.gl-py-2
-                .search-control-wrap.gl-relative
-                  = render 'shared/members/search_field'
-              - if can_manage_members
-                = render 'groups/group_members/tab_pane/form_item' do
-                  = label_tag '2fa', _('2FA'), class: form_item_label_css_class
-                  = render 'shared/members/filter_2fa_dropdown'
-              = render 'groups/group_members/tab_pane/form_item' do
-                = label_tag :sort_by, _('Sort by'), class: form_item_label_css_class
-                = render 'shared/members/sort_dropdown'
-        - if vue_members_list_enabled
-          .js-group-members-list{ data: group_members_list_data_attributes(@group, @members) }
+            = _('Members')
+          %span.badge.badge-pill= @members.total_count
+      - if @group.shared_with_group_links.any?
+        %li.nav-item
+          = link_to '#tab-groups', class: ['nav-link'] , data: { toggle: 'tab', qa_selector: 'groups_list_tab' } do
+            %span
+              = _('Groups')
+            %span.badge.badge-pill= @group.shared_with_group_links.count
+      - if show_invited_members
+        %li.nav-item
+          = link_to '#tab-invited-members', class: ['nav-link', ('active' if invited_active)], data: { toggle: 'tab' } do
+            %span
+              = _('Invited')
+            %span.badge.badge-pill= @invited_members.total_count
+      - if show_access_requests
+        %li.nav-item
+          = link_to '#tab-access-requests', class: 'nav-link', data: { toggle: 'tab' } do
+            %span
+              = _('Access requests')
+            %span.badge.badge-pill= @requesters.count
+    .tab-content
+      #tab-members.tab-pane{ class: ('active' unless invited_active) }
+        .js-group-members-list{ data: group_members_list_data_attributes(@group, @members) }
+          .loading
+            .spinner.spinner-md
+        = paginate @members, theme: 'gitlab', params: { invited_members_page: nil, search_invited: nil }
+      - if @group.shared_with_group_links.any?
+        #tab-groups.tab-pane
+          .js-group-linked-list{ data: linked_groups_list_data_attributes(@group) }
+            .loading
+              .spinner.spinner-md
+      - if show_invited_members
+        #tab-invited-members.tab-pane{ class: ('active' if invited_active) }
+          .js-group-invited-members-list{ data: group_members_list_data_attributes(@group, @invited_members) }
             .loading
               .spinner.spinner-md
-        - else
-          %ul.content-list.members-list{ data: { qa_selector: 'members_list' } }
-            = render partial: 'shared/members/member',
-                     collection: @members, as: :member,
-                     locals: { membership_source: @group,
-                               group: @group,
-                               current_user_is_group_owner: current_user_is_group_owner }
-        = paginate @members, theme: 'gitlab', params: { invited_members_page: nil, search_invited: nil }
-    - if @group.shared_with_group_links.any?
-      #tab-groups.tab-pane
-        .card.card-without-border
-          - unless filtered_search_enabled
-            = render 'groups/group_members/tab_pane/header' do
-              = render 'groups/group_members/tab_pane/title' do
-                = html_escape(_('Groups with access to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-          - if vue_members_list_enabled
-            .js-group-linked-list{ data: linked_groups_list_data_attributes(@group) }
-              .loading
-                .spinner.spinner-md
-          - else
-            %ul.content-list.members-list{ data: { qa_selector: 'groups_list' } }
-              - @group.shared_with_group_links.each do |group_link|
-                = render 'shared/members/group', group_link: group_link, can_admin_member: can_manage_members, group_link_path: group_group_link_path(@group, group_link)
-    - if show_invited_members
-      #tab-invited-members.tab-pane{ class: ('active' if invited_active) }
-        .card.card-without-border
-          - unless filtered_search_enabled
-            = render 'groups/group_members/tab_pane/header' do
-              = render 'groups/group_members/tab_pane/title' do
-                = html_escape(_('Members invited to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-              = form_tag group_group_members_path(@group), method: :get, class: 'user-search-form', data: { testid: 'user-search-form' } do
-                = render 'shared/members/search_field', name: 'search_invited'
-          - if vue_members_list_enabled
-            .js-group-invited-members-list{ data: group_members_list_data_attributes(@group, @invited_members) }
-              .loading
-                .spinner.spinner-md
-          - else
-            %ul.content-list.members-list
-              = render partial: 'shared/members/member',
-                       collection: @invited_members, as: :member,
-                       locals: { membership_source: @group,
-                                 group: @group,
-                                 current_user_is_group_owner: current_user_is_group_owner }
           = paginate @invited_members, param_name: 'invited_members_page', theme: 'gitlab', params: { page: nil }
-    - if show_access_requests
-      #tab-access-requests.tab-pane
-        .card.card-without-border
-          - unless filtered_search_enabled
-            = render 'groups/group_members/tab_pane/header' do
-              = render 'groups/group_members/tab_pane/title' do
-                = html_escape(_('Users requesting access to %{strong_start}%{group_name}%{strong_end}')) % { group_name: @group.name, strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-          - if vue_members_list_enabled
-            .js-group-access-requests-list{ data: group_members_list_data_attributes(@group, @requesters) }
-              .loading
-                .spinner.spinner-md
-          - else
-            %ul.content-list.members-list
-              = render partial: 'shared/members/member',
-                       collection: @requesters, as: :member,
-                       locals: { membership_source: @group,
-                                 group: @group,
-                                 current_user_is_group_owner: current_user_is_group_owner }
+      - if show_access_requests
+        #tab-access-requests.tab-pane
+          .js-group-access-requests-list{ data: group_members_list_data_attributes(@group, @requesters) }
+            .loading
+              .spinner.spinner-md