Merge branch 'issues-filters' into 'master'

Big refactoring of issues filters

* No magic numbers for issues filtering
* Squash project users selectbox and users selectbox into one class
* Move from API autocomplete to GitLab internal one
* Smarter filter for project/group/all issues
* Use selectbox with searchbox for assignee/author/milestone/label
* Switch to ajax filter for issue author/assignee

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/1035

See merge request !466

CHANGELOG

@@ -43,6 +43,9 @@ v 7.10.0 (unreleased)
   - Link note avatar to user.
   - Make Git-over-SSH errors more descriptive.
   - Fix EmailsOnPush.
+  - Refactor issue filtering
+  - AJAX selectbox for issue assignee and author filters
+  - Fix issue with missing options in issue filtering dropdown if selected one
 v 7.9.0
   - Send EmailsOnPush email when branch or tag is created or deleted.

app/assets/javascripts/api.js.coffee

 @Api =
   groups_path: "/api/:version/groups.json"
   group_path: "/api/:version/groups/:id.json"
-  users_path: "/api/:version/users.json"
-  user_path: "/api/:version/users/:id.json"
-  notes_path: "/api/:version/projects/:id/notes.json"
   namespaces_path: "/api/:version/namespaces.json"
-  project_users_path: "/api/:version/projects/:id/users.json"
-
-  # Get 20 (depends on api) recent notes
-  # and sort the ascending from oldest to newest
-  notes: (project_id, callback) ->
-    url = Api.buildUrl(Api.notes_path)
-    url = url.replace(':id', project_id)
-
-    $.ajax(
-      url: url,
-      data:
-        private_token: gon.api_token
-        gfm: true
-        recent: true
-      dataType: "json"
-    ).done (notes) ->
-      notes.sort (a, b) ->
-        return a.id - b.id
-      callback(notes)
-
-  user: (user_id, callback) ->
-    url = Api.buildUrl(Api.user_path)
-    url = url.replace(':id', user_id)
-
-    $.ajax(
-      url: url
-      data:
-        private_token: gon.api_token
-      dataType: "json"
-    ).done (user) ->
-      callback(user)
-
-  # Return users list. Filtered by query
-  # Only active users retrieved
-  users: (query, callback) ->
-    url = Api.buildUrl(Api.users_path)
-
-    $.ajax(
-      url: url
-      data:
-        private_token: gon.api_token
-        search: query
-        per_page: 20
-        active: true
-      dataType: "json"
-    ).done (users) ->
-      callback(users)
   group: (group_id, callback) ->
     url = Api.buildUrl(Api.group_path)
@@ -80,23 +30,6 @@
     ).done (groups) ->
       callback(groups)
-  # Return project users list. Filtered by query
-  # Only active users retrieved
-  projectUsers: (project_id, query, callback) ->
-    url = Api.buildUrl(Api.project_users_path)
-    url = url.replace(':id', project_id)
-
-    $.ajax(
-      url: url
-      data:
-        private_token: gon.api_token
-        search: query
-        per_page: 20
-        active: true
-      dataType: "json"
-    ).done (users) ->
-      callback(users)
-
   # Return namespaces list. Filtered by query
   namespaces: (query, callback) ->
     url = Api.buildUrl(Api.namespaces_path)

app/assets/javascripts/dispatcher.js.coffee

@@ -127,7 +127,7 @@ class Dispatcher
           when 'show'
             new ProjectShow()
           when 'issues', 'merge_requests'
-            new ProjectUsersSelect()
+            new UsersSelect()
           when 'wikis'
             new Wikis()
             shortcut_handler = new ShortcutsNavigation()

app/assets/javascripts/project_users_select.js.coffee

-class @ProjectUsersSelect
-  constructor: ->
-    $('.ajax-project-users-select').each (i, select) =>
-      project_id = $(select).data('project-id') || $('body').data('project-id')
-
-      $(select).select2
-        placeholder: $(select).data('placeholder') || "Search for a user"
-        multiple: $(select).hasClass('multiselect')
-        minimumInputLength: 0
-        query: (query) ->
-          Api.projectUsers project_id, query.term, (users) ->
-            data = { results: users }
-
-            if query.term.length == 0
-              nullUser = {
-                name: 'Unassigned',
-                avatar: null,
-                username: 'none',
-                id: -1
-              }
-
-              data.results.unshift(nullUser)
-
-            query.callback(data)
-
-        initSelection: (element, callback) ->
-          id = $(element).val()
-          if id != "" && id != "-1"
-            Api.user(id, callback)
-
-
-        formatResult: (args...) =>
-          @formatResult(args...)
-        formatSelection: (args...) =>
-          @formatSelection(args...)
-        dropdownCssClass: "ajax-project-users-dropdown"
-        dropdownAutoWidth: true
-        escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
-          m
-
-  formatResult: (user) ->
-    if user.avatar_url
-      avatar = user.avatar_url
-    else
-      avatar = gon.default_avatar_url
-
-    avatarMarkup = "<div class='user-image'><img class='avatar s24' src='#{avatar}'></div>"
-
-    "<div class='user-result'>
-       #{avatarMarkup}
-       <div class='user-name'>#{user.name}</div>
-       <div class='user-username'>#{user.username}</div>
-     </div>"
-
-  formatSelection: (user) ->
-    user.name

app/assets/javascripts/users_select.js.coffee

 class @UsersSelect
   constructor: ->
+    @usersPath = "/autocomplete/users.json"
+    @userPath = "/autocomplete/users/:id.json"
+
     $('.ajax-users-select').each (i, select) =>
+      @projectId = $(select).data('project-id')
+      @groupId = $(select).data('group-id')
+      showNullUser = $(select).data('null-user')
+      showAnyUser = $(select).data('any-user')
+
       $(select).select2
         placeholder: "Search for a user"
         multiple: $(select).hasClass('multiselect')
         minimumInputLength: 0
-        query: (query) ->
-          Api.users query.term, (users) ->
+        query: (query) =>
+          @users query.term, (users) =>
             data = { results: users }
+
+            if query.term.length == 0
+              anyUser = {
+                name: 'Any',
+                avatar: null,
+                username: 'none',
+                id: null
+              }
+
+              nullUser = {
+                name: 'Unassigned',
+                avatar: null,
+                username: 'none',
+                id: 0
+              }
+
+              if showNullUser
+                data.results.unshift(nullUser)
+              if showAnyUser
+                data.results.unshift(anyUser)
+
             query.callback(data)
-        initSelection: (element, callback) ->
+        initSelection: (element, callback) =>
           id = $(element).val()
-          if id isnt ""
-            Api.user(id, callback)
-
+          if id != "" && id != "0"
+            @user(id, callback)
         formatResult: (args...) =>
           @formatResult(args...)
@@ -38,3 +66,34 @@ class @UsersSelect
   formatSelection: (user) ->
     user.name
+
+  user: (user_id, callback) =>
+    url = @buildUrl(@userPath)
+    url = url.replace(':id', user_id)
+
+    $.ajax(
+      url: url
+      dataType: "json"
+    ).done (user) ->
+      callback(user)
+
+  # Return users list. Filtered by query
+  # Only active users retrieved
+  users: (query, callback) =>
+    url = @buildUrl(@usersPath)
+
+    $.ajax(
+      url: url
+      data:
+        search: query
+        per_page: 20
+        active: true
+        project_id: @projectId
+        group_id: @groupId
+      dataType: "json"
+    ).done (users) ->
+      callback(users)
+
+  buildUrl: (url) ->
+    url = gon.relative_url_root + url if gon.relative_url_root?
+    return url

app/assets/stylesheets/generic/selects.scss

@@ -28,6 +28,7 @@
 .select2-drop-active {
   border: 1px solid #BBB !important;
   margin-top: 4px;
+  font-size: 13px;
   &.select2-drop-above {
     margin-bottom: 8px;
@@ -106,3 +107,7 @@
     font-weight: bolder;
   }
 }
+
+.ajax-users-dropdown {
+  min-width: 225px !important;
+}

app/assets/stylesheets/pages/issuable.scss

@@ -45,3 +45,11 @@
   .btn { font-size: 13px; }
 }
+
+.filter-item {
+  margin-right: 15px;
+
+  > span {
+    margin-right: 4px;
+  }
+}

app/assets/stylesheets/pages/issues.scss

@@ -60,6 +60,7 @@
 }
 @media (min-width: 800px)  {
+  .issues-filters,
   .issues_bulk_update {
     select, .select2-container {
       width: 120px !important;
@@ -69,14 +70,16 @@
 }
 @media (min-width: 1200px) {
+  .issues-filters,
   .issues_bulk_update {
     select, .select2-container {
-      width: 160px !important;
+      width: 140px !important;
       display: inline-block;
     }
   }
 }
+.issues-filters,
 .issues_bulk_update {
   .select2-container .select2-choice {
     color: #444 !important;

app/controllers/autocomplete_controller.rb

+class AutocompleteController < ApplicationController
+  def users
+    @users =
+      if params[:project_id].present?
+        project = Project.find(params[:project_id])
+
+        if can?(current_user, :read_project, project)
+          project.team.users
+        end
+      elsif params[:group_id]
+        group = Group.find(params[:group_id])
+
+        if can?(current_user, :read_group, group)
+          group.users
+        end
+      else
+        User.all
+      end
+
+    @users = @users.search(params[:search]) if params[:search].present?
+    @users = @users.active
+    @users = @users.page(params[:page]).per(PER_PAGE)
+    render json: @users, only: [:name, :username, :id], methods: [:avatar_url]
+  end
+
+  def user
+    @user = User.find(params[:id])
+    render json: @user, only: [:name, :username, :id], methods: [:avatar_url]
+  end
+end

app/finders/issuable_finder.rb

@@ -19,6 +19,8 @@
 require_relative 'projects_finder'
 class IssuableFinder
+  NONE = '0'
+
   attr_accessor :current_user, :params
   def execute(current_user, params)
@@ -112,7 +114,7 @@ class IssuableFinder
   def by_milestone(items)
     if params[:milestone_id].present?
-      items = items.where(milestone_id: (params[:milestone_id] == '0' ? nil : params[:milestone_id]))
+      items = items.where(milestone_id: (params[:milestone_id] == NONE ? nil : params[:milestone_id]))
     end
     items
@@ -120,7 +122,7 @@ class IssuableFinder
   def by_assignee(items)
     if params[:assignee_id].present?
-      items = items.where(assignee_id: (params[:assignee_id] == '0' ? nil : params[:assignee_id]))
+      items = items.where(assignee_id: (params[:assignee_id] == NONE ? nil : params[:assignee_id]))
     end
     items
@@ -128,7 +130,7 @@ class IssuableFinder
   def by_author(items)
     if params[:author_id].present?
-      items = items.where(author_id: (params[:author_id] == '0' ? nil : params[:author_id]))
+      items = items.where(author_id: (params[:author_id] == NONE ? nil : params[:author_id]))
     end
     items

app/helpers/application_helper.rb

@@ -275,7 +275,9 @@ module ApplicationHelper
     'https://' + promo_host
   end
-  def page_filter_path(options={})
+  def page_filter_path(options = {})
+    without = options.delete(:without)
+
     exist_opts = {
       state: params[:state],
       scope: params[:scope],
@@ -288,6 +290,12 @@ module ApplicationHelper
     options = exist_opts.merge(options)
+    if without.present?
+      without.each do |key|
+        options.delete(key)
+      end
+    end
+
     path = request.path
     path << "?#{options.to_param}"
     path

app/helpers/labels_helper.rb

@@ -47,4 +47,9 @@ module LabelsHelper
       "#FFF"
     end
   end
+
+  def project_labels_options(project)
+    options_for_select([['Any', nil]]) +
+      options_from_collection_for_select(project.labels, 'name', 'name', params[:label_name])
+  end
 end

app/helpers/milestones_helper.rb

@@ -19,4 +19,16 @@ module MilestonesHelper
       content_tag :div, nil, options
     end
   end
+
+  def projects_milestones_options
+    milestones =
+      if @project
+        @project.milestones
+      else
+        Milestone.where(project_id: @projects)
+      end.active
+
+    options_for_select([['Any', nil]]) +
+      options_from_collection_for_select(milestones, 'id', 'title', params[:milestone_id])
+  end
 end

app/helpers/selects_helper.rb

@@ -4,18 +4,27 @@ module SelectsHelper
     css_class << "multiselect " if opts[:multiple]
     css_class << (opts[:class] || '')
     value = opts[:selected] || ''
-    hidden_field_tag(id, value, class: css_class)
-  end
-  def project_users_select_tag(id, opts = {})
-    css_class = "ajax-project-users-select "
-    css_class << "multiselect " if opts[:multiple]
-    css_class << (opts[:class] || '')
-    value = opts[:selected] || ''
-    placeholder = opts[:placeholder] || 'Select user'
-    project_id = opts[:project_id] || @project.id
-    hidden_field_tag(id, value, class: css_class, 'data-placeholder' => placeholder, 'data-project-id' => project_id)
+    placeholder = opts[:placeholder] || 'Search for a user'
+    null_user = opts[:null_user] || false
+    any_user = opts[:any_user] || false
+    html = {
+      class: css_class,
+      'data-placeholder' => placeholder,
+      'data-null-user' => null_user,
+      'data-any-user' => any_user,
+    }
+
+    unless opts[:scope] == :all
+      if @project
+        html['data-project-id'] = @project.id
+      elsif @group
+        html['data-group-id'] = @group.id
+      end
+    end
+
+    hidden_field_tag(id, value, html)
   end
   def groups_select_tag(id, opts = {})

app/services/issues/update_service.rb

@@ -14,8 +14,8 @@ module Issues
         issue.update_nth_task(params[:task_num].to_i, false)
       end
-      params[:assignee_id]  = "" if params[:assignee_id] == "-1"
-      params[:milestone_id] = "" if params[:milestone_id] == "-1"
+      params[:assignee_id]  = "" if params[:assignee_id] == IssuableFinder::NONE
+      params[:milestone_id] = "" if params[:milestone_id] == IssuableFinder::NONE
       old_labels = issue.labels.to_a

app/services/merge_requests/update_service.rb

@@ -23,8 +23,8 @@ module MergeRequests
         merge_request.update_nth_task(params[:task_num].to_i, false)
       end
-      params[:assignee_id]  = "" if params[:assignee_id] == "-1"
-      params[:milestone_id] = "" if params[:milestone_id] == "-1"
+      params[:assignee_id]  = "" if params[:assignee_id] == IssuableFinder::NONE
+      params[:milestone_id] = "" if params[:milestone_id] == IssuableFinder::NONE
       old_labels = merge_request.labels.to_a

app/views/projects/_issuable_form.html.haml

@@ -35,8 +35,8 @@
       %i.fa.fa-user
       Assign to
     .col-sm-10
-      = project_users_select_tag("#{issuable.class.model_name.param_key}[assignee_id]",
-          placeholder: 'Select a user', class: 'custom-form-control',
+      = users_select_tag("#{issuable.class.model_name.param_key}[assignee_id]",
+          placeholder: 'Select a user', class: 'custom-form-control', null_user: true,
           selected: issuable.assignee_id)
        
       = link_to 'Assign to me', '#', class: 'btn assign-to-me-link'

app/views/projects/issues/_issue_context.html.haml

@@ -8,7 +8,7 @@
       - else
         none
     - if can?(current_user, :modify_issue, @issue)
-      = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: @issue.assignee_id)
+      = users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: @issue.assignee_id, null_user: true)
   %div.prepend-top-20.clearfix
     .issuable-context-title
@@ -44,5 +44,3 @@
 :coffeescript
   new Subscription("#{toggle_subscription_namespace_project_issue_path(@issue.project.namespace, @project, @issue)}")
-
-

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

@@ -19,7 +19,7 @@
     .issues_bulk_update.hide
       = form_tag bulk_update_namespace_project_issues_path(@project.namespace, @project), method: :post  do
         = select_tag('update[state_event]', options_for_select([['Open', 'reopen'], ['Closed', 'close']]), prompt: "Status", class: 'form-control')
-        = project_users_select_tag('update[assignee_id]', placeholder: 'Assignee')
+        = users_select_tag('update[assignee_id]', placeholder: 'Assignee', null_user: true)
         = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
         = hidden_field_tag 'update[issues_ids]', []
         = hidden_field_tag :state_event, params[:state_event]

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

@@ -13,5 +13,5 @@
 $('select.select2').select2({width: 'resolve', dropdownAutoWidth: true})
 $('.edit-issue.inline-update input[type="submit"]').hide();
-new ProjectUsersSelect();
+new UsersSelect()
 new Issue();