Adopt Group#members page for large groups (> 100 users)

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/application.scss

@@ -65,6 +65,7 @@
 @import "sections/wall.scss";
 @import "sections/dashboard.scss";
 @import "sections/stat_graph.scss";
+@import "sections/groups.scss";
 
 /**
  * Code ighlight

app/assets/stylesheets/sections/groups.scss

@@ -0,0 +1,9 @@
+.new-group-member-holder {
+  margin-top: 50px;
+  background: #f9f9f9;
+  padding-top: 20px;
+}
+
+.member-search-form {
+  float: left;
+}

app/controllers/groups_controller.rb

@@ -63,7 +63,14 @@ class GroupsController < ApplicationController
 
   def members
     @project = group.projects.find(params[:project_id]) if params[:project_id]
-    @members = group.users_groups.order('group_access DESC')
+    @members = group.users_groups
+
+    if params[:search].present?
+      users = group.users.search(params[:search])
+      @members = @members.where(user_id: users)
+    end
+
+    @members = @members.order('group_access DESC').page(params[:page]).per(50)
     @users_group = UsersGroup.new
   end
 

app/views/groups/_new_group_member.html.haml

@@ -1,15 +1,8 @@
 = form_for @users_group, url: group_users_groups_path(@group), html: { class: 'form-horizontal users-group-form' } do |f|
-  %h4.append-bottom-20
-    New member(s) for
-    %strong #{@group.name}
-    group
-
-  %p 1. Choose users you want in the group
   .form-group
     = f.label :user_ids, "People", class: 'control-label'
     .col-sm-10= users_select_tag(:user_ids, multiple: true, class: 'input-large')
 
-  %p 2. Set access level for them
   .form-group
     = f.label :group_access, "Group Access", class: 'control-label'
     .col-sm-10= select_tag :group_access, options_for_select(UsersGroup.group_access_roles, @users_group.group_access), class: "project-access-select select2"

app/views/groups/members.html.haml

@@ -6,14 +6,34 @@
   %strong= link_to "here", help_permissions_path, class: "vlink"
 
 %hr
-.ui-box
+
+.clearfix
+  = form_tag members_group_path(@group), method: :get, class: 'form-inline member-search-form'  do
+    .form-group
+      = search_field_tag :search, params[:search], { placeholder: 'Find member by name', class: 'form-control search-text-input input-mn-300' }
+    = submit_tag 'Search', class: 'btn'
+
+  - if current_user.can? :manage_group, @group
+    .pull-right
+      = link_to '#', class: 'btn btn-new js-toggle-visibility-link' do
+        Add members
+        %i.icon-chevron-down
+
+    .js-toggle-visibility-container.hide.new-group-member-holder
+      = render "new_group_member"
+
+.ui-box.prepend-top-20
   .title
     %strong #{@group.name}
     group members
     %small
-      (#{@members.count})
+      (#{@members.total_count})
   %ul.well-list
     - @members.each do |member|
       = render 'users_groups/users_group', member: member, show_controls: true
-- if current_user.can? :manage_group, @group
-  = render "new_group_member"
+= paginate @members, theme: 'gitlab'
+
+:coffeescript
+  $('form.member-search-form').on 'submit', (event) ->
+    event.preventDefault()
+    Turbolinks.visit @.action + '?' + $(@).serialize()