Add tabs to switch between current/invited members

app/views/groups/group_members/index.html.haml

@@ -1,5 +1,6 @@
 - page_title "Members"
 - can_manage_members = can?(current_user, :admin_group_member, @group)
+- show_invited_members = can_manage_members && @invited_members.exists?
 
 .project-members-page.prepend-top-default
   %h4
@@ -16,9 +17,15 @@
 
   = render_if_exists 'groups/group_members/ldap_sync'
 
-  .clearfix
+  %ul.nav-links.mobile-separator.nav.nav-tabs.clearfix
-    %h5.member.existing-title
+    %li.nav-item
-      Existing members
+      = link_to "Existing members", "#existing_members", class: "nav-link active", 'data-toggle' => 'tab'
+    - if show_invited_members
+      %li.nav-item
+        = link_to "Invited members", "#invited_members", class: "nav-link", 'data-toggle' => 'tab'
+
+  .tab-content
+    #existing_members.tab-pane.active
       .card
         .card-header.flex-project-members-panel
           %span.flex-project-title
@@ -38,10 +45,8 @@
           = render partial: 'shared/members/member', collection: @members, as: :member
       = paginate @members, theme: 'gitlab'
 
-  - if can_manage_members && @invited_members.exists?
+    - if show_invited_members
-    .clearfix
+      #invited_members.tab-pane
-      %h5.member.existing-title
-        Invited members
         .card
           .card-header.flex-project-members-panel
             %span.flex-project-title