Use same layout and interactivity for project members as group members.

app/assets/javascripts/dispatcher.js.coffee

@@ -76,6 +76,9 @@ class Dispatcher
       when 'groups:group_members:index'
         new GroupMembers()
         new UsersSelect()
+      when 'projects:project_members:index'
+        new ProjectMembers()
+        new UsersSelect()
       when 'groups:new', 'groups:edit', 'admin:groups:edit'
         new GroupAvatar()
       when 'projects:tree:show'
@@ -129,7 +132,6 @@ class Dispatcher
             shortcut_handler = new ShortcutsNavigation()
           when 'project_members', 'deploy_keys', 'hooks', 'services', 'protected_branches'
             shortcut_handler = new ShortcutsNavigation()
-            new UsersSelect()
 
 
     # If we haven't installed a custom shortcut handler, install the default one

app/assets/javascripts/project_members.js.coffee

+class @ProjectMembers
+  constructor: ->
+    $('li.project_member').bind 'ajax:success', ->
+      $(this).fadeOut()

app/views/projects/_dropdown.html.haml

@@ -17,7 +17,7 @@
             New snippet
       - if can?(current_user, :admin_project_member, @project)
         %li
-          = link_to new_namespace_project_team_member_path(@project.namespace, @project), title: "New project member" do
+          = link_to namespace_project_project_members_path(@project.namespace, @project), title: "New project member" do
             New project member
       - if can? current_user, :push_code, @project
         %li.divider

app/views/projects/team_members/_group_members.html.haml → app/views/projects/project_members/_group_members.html.haml

-- group_users_count = @group.group_members.count
 .panel.panel-default
   .panel-heading
     %strong #{@group.name}
-    group members (#{group_users_count})
+    group members
+    %small
+      (#{members.count})
     .pull-right
-      = link_to members_group_path(@group), class: 'btn btn-sm' do
+      = link_to group_group_members_path(@group), class: 'btn btn-sm' do
         %i.fa.fa-pencil-square-o
   %ul.well-list
-    - @group.group_members.order('access_level DESC').limit(20).each do |member|
+    - members.each do |member|
       = render 'groups/group_members/group_member', member: member, show_controls: false
-    - if group_users_count > 20
+    - if members.count > 20
       %li
-        and #{group_users_count - 20} more. For full list visit #{link_to 'group members page', members_group_path(@group)}
+        and #{members.count - 20} more. For full list visit #{link_to 'group members page', group_group_members_path(@group)}

app/views/projects/project_members/_new_project_member.html.haml

+= form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project), html: { class: 'form-horizontal users-project-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')
+
+  .form-group
+    = f.label :access_level, "Project Access", class: 'control-label'
+    .col-sm-10
+      = select_tag :access_level, options_for_select(ProjectMember.access_roles, @project_member.access_level), class: "project-access-select select2"
+      .help-block
+        Read more about role permissions
+        %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
+
+  .form-actions
+    = f.submit 'Add users to project', class: "btn btn-create"

app/views/projects/project_members/_project_member.html.haml

+- user = member.user
+- return unless user
+
+%li{class: "#{dom_class(member)} js-toggle-container project_member_row access-#{member.human_access.downcase}", id: dom_id(member)}
+  %span.list-item-name
+    = image_tag avatar_icon(user.email, 16), class: "avatar s16"
+    %strong= user.name
+    %span.cgray= user.username
+    - if user == current_user
+      %span.label.label-success It's you
+    - if user.blocked?
+      %label.label.label-danger
+        %strong Blocked
+
+  - if current_user_can_admin_project
+    - unless @project.personal? && user == current_user
+      .pull-right
+        %strong= member.human_access
+        = button_tag class: "btn-xs btn js-toggle-button",
+                     title: 'Edit access level', type: 'button' do
+          %i.fa.fa-pencil-square-o
+
+        - if current_user == user
+          = link_to leave_namespace_project_project_members_path(@project.namespace, @project), data: { confirm: "Leave project?"}, method: :delete, class: "btn-xs btn btn-remove", title: 'Leave project' do
+            %i.fa.fa-minus.fa-inverse
+        - else
+          = link_to namespace_project_project_member_path(@project.namespace, @project, user), data: { confirm: remove_from_project_team_message(@project, user) }, method: :delete, remote: true, class: "btn-xs btn btn-remove", title: 'Remove user from team' do
+            %i.fa.fa-minus.fa-inverse
+            
+    .edit-member.hide.js-toggle-content
+      = form_for member, as: :project_member, url: namespace_project_project_member_path(@project.namespace, @project, member.user), remote: true do |f|
+        .alert.prepend-top-20
+          = f.select :access_level, options_for_select(ProjectMember.access_roles, member.access_level)
+          = f.submit 'Save', class: 'btn btn-save btn-small'

app/views/projects/project_members/_team.html.haml

+- can_admin_project = can?(current_user, :admin_project, @project)
+
+.panel.panel-default.prepend-top-20
+  .panel-heading
+    %strong #{@project.name}
+    project members
+    %small
+      (#{members.count})
+  %ul.well-list
+    - members.each do |project_member|
+      = render 'project_member', member: project_member, current_user_can_admin_project: can_admin_project

app/views/projects/team_members/import.html.haml → app/views/projects/project_members/import.html.haml

@@ -3,12 +3,12 @@
 %p.light
   Only project members will be imported. Group members will be skipped.
 %hr
-= form_tag apply_import_namespace_project_team_members_path(@project.namespace, @project), method: 'post', class: 'form-horizontal' do
+= form_tag apply_import_namespace_project_project_members_path(@project.namespace, @project), method: 'post', class: 'form-horizontal' do
   .form-group
     = label_tag :source_project_id, "Project", class: 'control-label'
     .col-sm-10= select_tag(:source_project_id, options_from_collection_for_select(current_user.authorized_projects, :id, :name_with_namespace), prompt: "Select project", class: "select2 lg", required: true)
 
   .form-actions
     = button_tag 'Import project members', class: "btn btn-create"
-    = link_to "Cancel", namespace_project_team_index_path(@project.namespace, @project), class: "btn btn-cancel"
+    = link_to "Cancel", namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-cancel"
 

app/views/projects/project_members/index.html.haml

+%h3.page-title
+  Users with access to this project
+
+%p.light
+  Read more about project permissions
+  %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
+
+%hr
+
+.clearfix.js-toggle-container
+  = form_tag namespace_project_project_members_path(@project.namespace, @project), 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 search-text-input input-mn-300' }
+    = button_tag 'Search', class: 'btn'
+
+  - if can?(current_user, :admin_project_member, @project)
+    %span.pull-right
+      = button_tag class: 'btn btn-new btn-grouped js-toggle-button', type: 'button' do
+        Add members
+        %i.fa.fa-chevron-down
+      = link_to import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-grouped", title: "Import members from another project" do
+        Import members
+
+    .js-toggle-content.hide.new-group-member-holder
+      = render "new_project_member"
+
+= render "team", members: @project_members
+
+- if @group
+  = render "group_members", members: @group_members
+
+:coffeescript
+  $('form.member-search-form').on 'submit', (event) ->
+    event.preventDefault()
+    Turbolinks.visit @.action + '?' + $(@).serialize()

app/views/projects/project_members/update.js.haml

+- can_admin_project = can?(current_user, :admin_project, @project)
+:plain
+  $("##{dom_id(@project_member)}").replaceWith('#{escape_javascript(render("project_member", member: @project_member, current_user_can_admin_project: can_admin_project))}');

app/views/projects/team_members/_form.html.haml

-%h3.page-title
-  New project member(s)
-
-= form_for @user_project_relation, as: :project_member, url: namespace_project_team_members_path(@project.namespace, @project), html: { class: "form-horizontal users-project-form" } do |f|
-  -if @user_project_relation.errors.any?
-    .alert.alert-danger
-      %ul
-        - @user_project_relation.errors.full_messages.each do |msg|
-          %li= msg
-
-  %p 1. Choose people you want in the project
-  .form-group
-    = f.label :user_ids, "People", class: 'control-label'
-    .col-sm-10
-      = users_select_tag(:user_ids, multiple: true)
-
-  %p 2. Set access level for them
-  .form-group
-    = f.label :access_level, "Project Access", class: 'control-label'
-    .col-sm-10
-      = select_tag :access_level, options_for_select(Gitlab::Access.options, @user_project_relation.access_level), class: "project-access-select select2"
-      .help-block
-        Read more about role permissions
-        %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
-
-
-  .form-actions
-    = f.submit 'Add users', class: "btn btn-create"
-    = link_to "Cancel", namespace_project_team_index_path(@project.namespace, @project), class: "btn btn-cancel"

app/views/projects/team_members/_team.html.haml

-.team-table
-  - can_admin_project = (can? current_user, :admin_project, @project)
-  .panel.panel-default
-    .panel-heading
-      %strong #{@project.name}
-      project members (#{members.count})
-    %ul.well-list
-      - members.each do |team_member|
-        = render 'team_member', member: team_member, current_user_can_admin_project: can_admin_project

app/views/projects/team_members/_team_member.html.haml

-- user = member.user
-%li{id: dom_id(user), class: "team_member_row access-#{member.human_access.downcase}"}
-  .pull-right
-    - if current_user_can_admin_project
-      - unless @project.personal? && user == current_user
-        .pull-left
-          = form_for(member, as: :project_member, url: namespace_project_team_member_path(@project.namespace, @project, member.user)) do |f|
-            = f.select :access_level, options_for_select(ProjectMember.access_roles, member.access_level), {}, class: "trigger-submit"
-           
-        = link_to namespace_project_team_member_path(@project.namespace, @project, user), data: { confirm: remove_from_project_team_message(@project, user)}, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove user from team' do
-          %i.fa.fa-minus.fa-inverse
-  = image_tag avatar_icon(user.email, 32), class: "avatar s32"
-  %p
-    %strong= user.name
-    - if user.blocked?
-      %label.label.label-danger
-        %strong Blocked
-  %span.cgray= user.username

app/views/projects/team_members/index.html.haml

-%h3.page-title
-  Users with access to this project
-
-  - if can? current_user, :admin_team_member, @project
-    %span.pull-right
-      = link_to new_namespace_project_team_member_path(@project.namespace, @project), class: "btn btn-new btn-grouped", title: "New project member" do
-        New project member
-      = link_to import_namespace_project_team_members_path(@project.namespace, @project), class: "btn btn-grouped", title: "Import members from another project" do
-        Import members
-
-%p.light
-  Read more about project permissions
-  %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
-= render "team", members: @project_members
-- if @group
-  = render "group_members"

app/views/projects/team_members/new.html.haml

-= render "form"

app/views/projects/team_members/update.js.haml

-- if @user_project_relation.valid?
-  :plain
-    $("##{dom_id(@user_project_relation)}").effect("highlight", {color: "#529214"}, 1000);;
-- else
-  :plain
-    $("##{dom_id(@user_project_relation)}").effect("highlight", {color: "#D12F19"}, 1000);;

features/project/team_management.feature

@@ -13,7 +13,7 @@ Feature: Project Team Management
 
   @javascript
   Scenario: Add user to project
-    Given I click link "New Team Member"
+    Given I click link "Add members"
     And I select "Mike" as "Reporter"
     Then I should see "Mike" in team list as "Reporter"
 

features/steps/project/team_management.rb

@@ -15,18 +15,18 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps
     page.should have_content(user.username)
   end
 
-  step 'I click link "New Team Member"' do
-    click_link "New project member"
+  step 'I click link "Add members"' do
+    find(:css, 'a.btn-add').click
   end
 
   step 'I select "Mike" as "Reporter"' do
     user = User.find_by(name: "Mike")
 
-    select2(user.id, from: "#user_ids", multiple: true)
-    within "#new_project_member" do
+    within ".users-project-form" do
+      select2(user.id, from: "#user_ids", multiple: true)
       select "Reporter", from: "access_level"
     end
-    click_button "Add users"
+    click_button "Add users to project"
   end
 
   step 'I should see "Mike" in team list as "Reporter"' do
@@ -42,8 +42,10 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps
   end
 
   step 'I change "Sam" role to "Reporter"' do
-    user = User.find_by(name: "Sam")
-    within "#user_#{user.id}" do
+    project = Project.find_by(name: "Shop")
+    user = User.find_by(name: 'Sam')
+    project_member = project.project_members.find_by(user_id: user.id)
+    within "#project_member_#{project_member.id}" do
       select "Reporter", from: "project_member_access_level"
     end
   end
@@ -100,7 +102,10 @@ class Spinach::Features::ProjectTeamManagement < Spinach::FeatureSteps
   end
 
   step 'I click cancel link for "Sam"' do
-    within "#user_#{User.find_by(name: 'Sam').id}" do
+    project = Project.find_by(name: "Shop")
+    user = User.find_by(name: 'Sam')
+    project_member = project.project_members.find_by(user_id: user.id)
+    within "#project_member_#{project_member.id}" do
       click_link('Remove user from team')
     end
   end