Merge branch 'members-ui' into 'master'

Project members UI

## What does this MR do?

New UI for project members that includes groups.

## Screenshots (if relevant)


### Project members

![Screen_Shot_2016-09-02_at_15.13.27](/uploads/b9d4a634d44b7b7bbb6eddb10aee86bd/Screen_Shot_2016-09-02_at_15.13.27.png)

### Group members

![Screen_Shot_2016-09-02_at_15.13.36](/uploads/c15c173e68b2c0b49bcd06ca560269d3/Screen_Shot_2016-09-02_at_15.13.36.png)

## What are the relevant issue numbers?

Part of #19868 

Closes #21320 

See merge request !6148

3 files changed, 35 insertions, 44 deletions

diff --git a/app/views/groups/group_members/_new_group_member.html.haml b/app/views/groups/group_members/_new_group_member.html.haml
index 2fb3190ab11..b185b81db7f 100644
--- a/app/views/groups/group_members/_new_group_member.html.haml
+++ b/app/views/groups/group_members/_new_group_member.html.haml
@@ -1,27 +1,22 @@
-= form_for @group_member, url: group_group_members_path(@group), html: { class: 'form-horizontal users-group-form' } do |f|
-  .form-group
-    = f.label :user_ids, "People", class: 'control-label'
-    .col-sm-10
-      = users_select_tag(:user_ids, multiple: true, class: 'input-large', scope: :all, email_user: true)
-      .help-block
+= form_for @group_member, url: group_group_members_path(@group), html: { class: 'users-project-form users-group-form' } do |f|
+  .row
+    .col-md-4.col-lg-6
+      = users_select_tag(:user_ids, multiple: true, class: 'input-clamp', scope: :all, email_user: true)
+      .help-block.append-bottom-10
         Search for users by name, username, or email, or invite new ones using their email address.
 
-  .form-group
-    = f.label :access_level, "Group Access", class: 'control-label'
-    .col-sm-10
-      = select_tag :access_level, options_for_select(GroupMember.access_level_roles, @group_member.access_level), class: "project-access-select select2"
-      .help-block
-        Read more about role permissions
-        %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
+    .col-md-3.col-lg-2
+      = select_tag :access_level, options_for_select(GroupMember.access_level_roles, @group_member.access_level), class: "form-control project-access-select"
+      .help-block.append-bottom-10
+        = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
+        about role permissions
 
-  .form-group
-    = f.label :expires_at, 'Access expiration date', class: 'control-label'
-    .col-sm-10
+    .col-md-3.col-lg-2
       .clearable-input
-        = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date'
+        = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
         %i.clear-icon.js-clear-input
-      .help-block
+      .help-block.append-bottom-10
         On this date, the user(s) will automatically lose access to this group and all of its projects.
 
-  .form-actions
-    = f.submit 'Add users to group', class: "btn btn-create"
+    .col-md-2
+      = f.submit 'Add to group', class: "btn btn-create btn-block"
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index f789796e942..ebf9aca7700 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -1,35 +1,31 @@
 - page_title "Members"
 
-.group-members-page.prepend-top-default
+.project-members-page.prepend-top-default
+  %h4
+    Members
+  %hr
   - if can?(current_user, :admin_group_member, @group)
-    .panel.panel-default
-      .panel-heading
-        Add new user to group
-      .panel-body
-        %p.light
-          Members of group have access to all group projects.
-        .new-group-member-holder
-          = render "new_group_member"
+    .project-members-new.append-bottom-default
+      %p.clearfix
+        Add new user to
+        %strong= @group.name
+      = render "new_group_member"
 
     = render 'shared/members/requests', membership_source: @group, requesters: @requesters
 
+  .append-bottom-default.clearfix
+    %h5.member.existing-title
+      Existing users
+    = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form'  do
+      .form-group
+        = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
+        %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
+          = icon("search")
   .panel.panel-default
     .panel-heading
+      Users with access to
       %strong #{@group.name}
-      group members
       %span.badge= @members.total_count
-      .controls
-        = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form'  do
-          .form-group
-            = search_field_tag :search, params[:search], { placeholder: 'Find existing member by name', class: 'form-control', spellcheck: false }
-          = button_tag class: 'btn', title: 'Search' do
-            = icon("search")
     %ul.content-list
       = render partial: 'shared/members/member', collection: @members, as: :member
     = paginate @members, theme: 'gitlab'
-
-:javascript
-  $('form.member-search-form').on('submit', function(event) {
-    event.preventDefault();
-    Turbolinks.visit(this.action + '?' + $(this).serialize());
-  });
diff --git a/app/views/groups/group_members/update.js.haml b/app/views/groups/group_members/update.js.haml
index 3be7ed8432c..de8f53b6b52 100644
--- a/app/views/groups/group_members/update.js.haml
+++ b/app/views/groups/group_members/update.js.haml
@@ -1,3 +1,3 @@
 :plain
-  $("##{dom_id(@group_member)}").replaceWith('#{escape_javascript(render('shared/members/member', member: @group_member))}');
-  new gl.MemberExpirationDate();
+  var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}');
+  $("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));