Merge branch '23573-sort-functionality-for-project-member' into 'master'

Add sorting functionality for group/project members

## What does this MR do?

This MR adds sort functionality to group/project members list.

## Are there points in the code the reviewer needs to double check?

No.

## Why was this MR needed?

This MR helps the user to manage and find users of a group/project fast. It also improves UX.

## Screenshots (if relevant)

**Before**
![before-pr-member](/uploads/412bfdfddc63e48a62e2095d664660b5/before-pr-member.png)

**After**
![pr-after](/uploads/ae23a5c7689b46d26a948f22a0ac2360/pr-after.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG.md) entry added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #21622 


Closes #23573

See merge request !7032

app/assets/stylesheets/pages/members.scss

@@ -78,6 +78,21 @@
     float: right;
   }
 
+  .dropdown {
+    width: 100%;
+    margin-top: 5px;
+
+    .dropdown-menu-toggle {
+      vertical-align: middle;
+      width: 100%;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: 155px;
+    }
+  }
+
   .form-control {
     width: 100%;
     padding-right: 35px;
@@ -85,12 +100,22 @@
     @media (min-width: $screen-sm-min) {
       width: 350px;
     }
+
+    &.input-short {
+      @media (min-width: $screen-md-min) {
+        width: 170px;
+      }
+
+      @media (min-width: $screen-lg-min) {
+        width: 210px;
+      }
+    }
   }
 }
 
 .member-search-btn {
   position: absolute;
-  right: 0;
+  right: 4px;
   top: 0;
   height: 35px;
   padding-left: 10px;
@@ -99,4 +124,8 @@
   background: transparent;
   border: 0;
   outline: 0;
+
+  @media (min-width: $screen-sm-min) {
+    right: 160px;
+  }
 }

app/controllers/groups/group_members_controller.rb

 class Groups::GroupMembersController < Groups::ApplicationController
   include MembershipActions
+  include SortingHelper
 
   # Authorize
   before_action :authorize_admin_group_member!, except: [:index, :leave, :request_access]
 
   def index
+    @sort = params[:sort].presence || sort_value_name
     @project = @group.projects.find(params[:project_id]) if params[:project_id]
+
     @members = @group.group_members
     @members = @members.non_invite unless can?(current_user, :admin_group, @group)
+    @members = @members.search(params[:search]) if params[:search].present?
+    @members = @members.sort(@sort)
+    @members = @members.page(params[:page]).per(50)
 
-    if params[:search].present?
-      users = @group.users.search(params[:search]).to_a
-      @members = @members.where(user_id: users)
-    end
-
-    @members = @members.order('access_level DESC').page(params[:page]).per(50)
     @requesters = AccessRequestsFinder.new(@group).execute(current_user)
 
     @group_member = @group.group_members.new

app/controllers/projects/project_members_controller.rb

 class Projects::ProjectMembersController < Projects::ApplicationController
   include MembershipActions
+  include SortingHelper
 
   # Authorize
   before_action :authorize_admin_project_member!, except: [:index, :leave, :request_access]
 
   def index
+    @sort = params[:sort].presence || sort_value_name
     @group_links = @project.project_group_links
 
     @project_members = @project.project_members
@@ -35,12 +37,13 @@ class Projects::ProjectMembersController < Projects::ApplicationController
       @group_links = @project.project_group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
     end
 
-    wheres = ["id IN (#{@project_members.select(:id).to_sql})"]
-    wheres << "id IN (#{group_members.select(:id).to_sql})" if group_members
+    wheres = ["members.id IN (#{@project_members.select(:id).to_sql})"]
+    wheres << "members.id IN (#{group_members.select(:id).to_sql})" if group_members
 
     @project_members = Member.
       where(wheres.join(' OR ')).
-      order(access_level: :desc).page(params[:page])
+      sort(@sort).
+      page(params[:page])
 
     @requesters = AccessRequestsFinder.new(@project).execute(current_user)
 

app/helpers/members_helper.rb

@@ -36,4 +36,12 @@ module MembersHelper
     "Are you sure you want to leave the " \
     "\"#{member_source.human_name}\" #{member_source.class.to_s.humanize(capitalize: false)}?"
   end
+
+  def filter_group_project_member_path(options = {})
+    options = params.slice(:search, :sort).merge(options)
+
+    path = request.path
+    path << "?#{options.to_param}"
+    path
+  end
 end

app/helpers/sorting_helper.rb

@@ -25,7 +25,7 @@ module SortingHelper
       sort_value_recently_updated => sort_title_recently_updated,
       sort_value_oldest_updated => sort_title_oldest_updated,
       sort_value_recently_created => sort_title_recently_created,
-      sort_value_oldest_created => sort_title_oldest_created,
+      sort_value_oldest_created => sort_title_oldest_created
     }
 
     if current_controller?('admin/projects')
@@ -35,6 +35,19 @@ module SortingHelper
     options
   end
 
+  def member_sort_options_hash
+    {
+      sort_value_access_level_asc => sort_title_access_level_asc,
+      sort_value_access_level_desc => sort_title_access_level_desc,
+      sort_value_last_joined => sort_title_last_joined,
+      sort_value_oldest_joined => sort_title_oldest_joined,
+      sort_value_name => sort_title_name_asc,
+      sort_value_name_desc => sort_title_name_desc,
+      sort_value_recently_signin => sort_title_recently_signin,
+      sort_value_oldest_signin => sort_title_oldest_signin
+    }
+  end
+
   def sort_title_priority
     'Priority'
   end
@@ -95,6 +108,50 @@ module SortingHelper
     'Most popular'
   end
 
+  def sort_title_last_joined
+    'Last joined'
+  end
+
+  def sort_title_oldest_joined
+    'Oldest joined'
+  end
+
+  def sort_title_access_level_asc
+    'Access level, ascending'
+  end
+
+  def sort_title_access_level_desc
+    'Access level, descending'
+  end
+
+  def sort_title_name_asc
+    'Name, ascending'
+  end
+
+  def sort_title_name_desc
+    'Name, descending'
+  end
+
+  def sort_value_last_joined
+    'last_joined'
+  end
+
+  def sort_value_oldest_joined
+    'oldest_joined'
+  end
+
+  def sort_value_access_level_asc
+    'access_level_asc'
+  end
+
+  def sort_value_access_level_desc
+    'access_level_desc'
+  end
+
+  def sort_value_name_desc
+    'name_desc'
+  end
+
   def sort_value_priority
     'priority'
   end

app/models/member.rb

@@ -57,6 +57,11 @@ class Member < ActiveRecord::Base
   scope :owners,  -> { active.where(access_level: OWNER) }
   scope :owners_and_masters,  -> { active.where(access_level: [OWNER, MASTER]) }
 
+  scope :order_name_asc, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.name', 'ASC')) }
+  scope :order_name_desc, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.name', 'DESC')) }
+  scope :order_recent_sign_in, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.last_sign_in_at', 'DESC')) }
+  scope :order_oldest_sign_in, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.last_sign_in_at', 'ASC')) }
+
   before_validation :generate_invite_token, on: :create, if: -> (member) { member.invite_email.present? }
 
   after_create :send_invite, if: :invite?, unless: :importing?
@@ -72,6 +77,34 @@ class Member < ActiveRecord::Base
   default_value_for :notification_level, NotificationSetting.levels[:global]
 
   class << self
+    def search(query)
+      joins(:user).merge(User.search(query))
+    end
+
+    def sort(method)
+      case method.to_s
+      when 'access_level_asc' then reorder(access_level: :asc)
+      when 'access_level_desc' then reorder(access_level: :desc)
+      when 'recent_sign_in' then order_recent_sign_in
+      when 'oldest_sign_in' then order_oldest_sign_in
+      when 'last_joined' then order_created_desc
+      when 'oldest_joined' then order_created_asc
+      else
+        order_by(method)
+      end
+    end
+
+    def left_join_users
+      users = User.arel_table
+      members = Member.arel_table
+
+      member_users = members.join(users, Arel::Nodes::OuterJoin).
+                             on(members[:user_id].eq(users[:id])).
+                             join_sources
+
+      joins(member_users)
+    end
+
     def access_for_user_ids(user_ids)
       where(user_id: user_ids).has_access.pluck(:user_id, :access_level).to_h
     end

app/models/user.rb

@@ -178,6 +178,8 @@ class User < ActiveRecord::Base
   scope :not_in_project, ->(project) { project.users.present? ? where("id not in (:ids)", ids: project.users.map(&:id) ) : all }
   scope :without_projects, -> { where('id NOT IN (SELECT DISTINCT(user_id) FROM members WHERE user_id IS NOT NULL AND requested_at IS NULL)') }
   scope :todo_authors, ->(user_id, state) { where(id: Todo.where(user_id: user_id, state: state).select(:author_id)) }
+  scope :order_recent_sign_in, -> { reorder(last_sign_in_at: :desc) }
+  scope :order_oldest_sign_in, -> { reorder(last_sign_in_at: :asc) }
 
   def self.with_two_factor
     joins("LEFT OUTER JOIN u2f_registrations AS u2f ON u2f.user_id = users.id").
@@ -205,8 +207,8 @@ class User < ActiveRecord::Base
 
     def sort(method)
       case method.to_s
-      when 'recent_sign_in' then reorder(last_sign_in_at: :desc)
-      when 'oldest_sign_in' then reorder(last_sign_in_at: :asc)
+      when 'recent_sign_in' then order_recent_sign_in
+      when 'oldest_sign_in' then order_oldest_sign_in
       else
         order_by(method)
       end

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

@@ -21,6 +21,7 @@
         = 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")
+        = render 'shared/members/sort_dropdown'
   .panel.panel-default
     .panel-heading
       Users with access to

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

@@ -21,6 +21,7 @@
         = 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")
+        = render 'shared/members/sort_dropdown'
   - if @group_links.any?
     = render 'groups', group_links: @group_links
 

app/views/shared/members/_sort_dropdown.html.haml

+.dropdown.inline.member-sort-dropdown
+  = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+    %li.dropdown-header
+      Sort by
+    - member_sort_options_hash.each do |value, title|
+      %li
+        = link_to filter_group_project_member_path(sort: value), class: ("is-active" if @sort == value) do
+          = title

changelogs/unreleased/23573-sort-functionality-for-project-member.yml

+---
+title: Add sorting functionality for group/project members
+merge_request: 7032
+author:

spec/features/groups/members/sorting_spec.rb

+require 'spec_helper'
+
+feature 'Groups > Members > Sorting', feature: true do
+  let(:owner)     { create(:user, name: 'John Doe') }
+  let(:developer) { create(:user, name: 'Mary Jane', last_sign_in_at: 5.days.ago) }
+  let(:group)     { create(:group) }
+
+  background do
+    create(:group_member, :owner, user: owner, group: group, created_at: 5.days.ago)
+    create(:group_member, :developer, user: developer, group: group, created_at: 3.days.ago)
+
+    login_as(owner)
+  end
+
+  scenario 'sorts alphabetically by default' do
+    visit_members_list(sort: nil)
+
+    expect(first_member).to include(owner.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+  end
+
+  scenario 'sorts by access level ascending' do
+    visit_members_list(sort: :access_level_asc)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(owner.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Access level, ascending')
+  end
+
+  scenario 'sorts by access level descending' do
+    visit_members_list(sort: :access_level_desc)
+
+    expect(first_member).to include(owner.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Access level, descending')
+  end
+
+  scenario 'sorts by last joined' do
+    visit_members_list(sort: :last_joined)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(owner.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Last joined')
+  end
+
+  scenario 'sorts by oldest joined' do
+    visit_members_list(sort: :oldest_joined)
+
+    expect(first_member).to include(owner.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Oldest joined')
+  end
+
+  scenario 'sorts by name ascending' do
+    visit_members_list(sort: :name_asc)
+
+    expect(first_member).to include(owner.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+  end
+
+  scenario 'sorts by name descending' do
+    visit_members_list(sort: :name_desc)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(owner.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Name, descending')
+  end
+
+  scenario 'sorts by recent sign in' do
+    visit_members_list(sort: :recent_sign_in)
+
+    expect(first_member).to include(owner.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Recent sign in')
+  end
+
+  scenario 'sorts by oldest sign in' do
+    visit_members_list(sort: :oldest_sign_in)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(owner.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Oldest sign in')
+  end
+
+  def visit_members_list(sort:)
+    visit group_group_members_path(group.to_param, sort: sort)
+  end
+
+  def first_member
+    page.all('ul.content-list > li').first.text
+  end
+
+  def second_member
+    page.all('ul.content-list > li').last.text
+  end
+end

spec/features/projects/members/sorting_spec.rb

+require 'spec_helper'
+
+feature 'Projects > Members > Sorting', feature: true do
+  let(:master)    { create(:user, name: 'John Doe') }
+  let(:developer) { create(:user, name: 'Mary Jane', last_sign_in_at: 5.days.ago) }
+  let(:project)   { create(:empty_project) }
+
+  background do
+    create(:project_member, :master, user: master, project: project, created_at: 5.days.ago)
+    create(:project_member, :developer, user: developer, project: project, created_at: 3.days.ago)
+
+    login_as(master)
+  end
+
+  scenario 'sorts alphabetically by default' do
+    visit_members_list(sort: nil)
+
+    expect(first_member).to include(master.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+  end
+
+  scenario 'sorts by access level ascending' do
+    visit_members_list(sort: :access_level_asc)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(master.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Access level, ascending')
+  end
+
+  scenario 'sorts by access level descending' do
+    visit_members_list(sort: :access_level_desc)
+
+    expect(first_member).to include(master.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Access level, descending')
+  end
+
+  scenario 'sorts by last joined' do
+    visit_members_list(sort: :last_joined)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(master.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Last joined')
+  end
+
+  scenario 'sorts by oldest joined' do
+    visit_members_list(sort: :oldest_joined)
+
+    expect(first_member).to include(master.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Oldest joined')
+  end
+
+  scenario 'sorts by name ascending' do
+    visit_members_list(sort: :name_asc)
+
+    expect(first_member).to include(master.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+  end
+
+  scenario 'sorts by name descending' do
+    visit_members_list(sort: :name_desc)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(master.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Name, descending')
+  end
+
+  scenario 'sorts by recent sign in' do
+    visit_members_list(sort: :recent_sign_in)
+
+    expect(first_member).to include(master.name)
+    expect(second_member).to include(developer.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Recent sign in')
+  end
+
+  scenario 'sorts by oldest sign in' do
+    visit_members_list(sort: :oldest_sign_in)
+
+    expect(first_member).to include(developer.name)
+    expect(second_member).to include(master.name)
+    expect(page).to have_css('.member-sort-dropdown .dropdown-toggle-text', text: 'Oldest sign in')
+  end
+
+  def visit_members_list(sort:)
+    visit namespace_project_project_members_path(project.namespace.to_param, project.to_param, sort: sort)
+  end
+
+  def first_member
+    page.all('ul.content-list > li').first.text
+  end
+
+  def second_member
+    page.all('ul.content-list > li').last.text
+  end
+end