Merge branch '21508-inconsistency-personal-dashboard-todos-page-uses-old-interface-wrong-dropdown-filter-buttons' into 'master'

Update todo view filter dropdowns

## What does this MR do?

Swaps out old `select2` dropdowns on todo page with newer dropdowns.

Also removes todo inline JS.

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

## Why was this MR needed?

## Screenshots (if relevant)

### Project

![2016-08-29_14.02.57](/uploads/73d610fd41d202540f3770afa7e5266f/2016-08-29_14.02.57.gif)

### Author

![2016-08-29_14.03.40](/uploads/8ce97b81c91db06111f6a930cd5fb293/2016-08-29_14.03.40.gif)

### Type

![2016-08-29_14.04.32](/uploads/1aa050a7822de1d99ee7fdc3bbc621a3/2016-08-29_14.04.32.gif)

### Action

![2016-08-29_14.05.23](/uploads/680d19c56723a222274c3677f941cfcd/2016-08-29_14.05.23.gif)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - 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 #21508 

Related to #19866

See merge request !6072

4 files changed, 74 insertions, 35 deletions

diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js
index 06605320a35..23eda7d44ca 100644
--- a/app/assets/javascripts/todos.js
+++ b/app/assets/javascripts/todos.js
@@ -13,6 +13,7 @@
       this.perPage = this.el.data('perPage');
       this.clearListeners();
       this.initBtnListeners();
+      this.initFilters();
     }
 
     Todos.prototype.clearListeners = function() {
@@ -27,6 +28,31 @@
       return $('.todo').on('click', this.goToTodoUrl);
     };
 
+    Todos.prototype.initFilters = function() {
+      new UsersSelect();
+      this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
+      this.initFilterDropdown($('.js-type-search'), 'type');
+      this.initFilterDropdown($('.js-action-search'), 'action_id');
+
+      $('form.filter-form').on('submit', function (event) {
+        event.preventDefault();
+        Turbolinks.visit(this.action + '&' + $(this).serialize());
+      });
+    };
+
+    Todos.prototype.initFilterDropdown = function($dropdown, fieldName, searchFields) {
+      $dropdown.glDropdown({
+        selectable: true,
+        filterable: searchFields ? true : false,
+        fieldName: fieldName,
+        search: { fields: searchFields },
+        data: $dropdown.data('data'),
+        clicked: function() {
+          return $dropdown.closest('form.filter-form').submit();
+        }
+      })
+    };
+
     Todos.prototype.doneClicked = function(e) {
       var $this;
       e.preventDefault();
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index b9baeb1d6c4..5c04bba323f 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -49,6 +49,19 @@ module IssuablesHelper
     end
   end
 
+  def project_dropdown_label(project_id, default_label)
+    return default_label if project_id.nil?
+    return "Any project" if project_id == "0"
+
+    project = Project.find_by(id: project_id)
+
+    if project
+      project.name_with_namespace
+    else
+      default_label
+    end
+  end
+
   def milestone_dropdown_label(milestone_title, default_label = "Milestone")
     if milestone_title == Milestone::Upcoming.name
       milestone_title = Milestone::Upcoming.title
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index 0465327060e..1e86f648203 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -78,13 +78,11 @@ module TodosHelper
   end
 
   def todo_actions_options
-    actions = [
-      OpenStruct.new(id: '', title: 'Any Action'),
-      OpenStruct.new(id: Todo::ASSIGNED, title: 'Assigned'),
-      OpenStruct.new(id: Todo::MENTIONED, title: 'Mentioned')
+    [
+      { id: '', text: 'Any Action' },
+      { id: Todo::ASSIGNED, text: 'Assigned' },
+      { id: Todo::MENTIONED, text: 'Mentioned' }
     ]
-
-    options_from_collection_for_select(actions, 'id', 'title', params[:action_id])
   end
 
   def todo_projects_options
@@ -92,22 +90,28 @@ module TodosHelper
     projects = projects.includes(:namespace)
 
     projects = projects.map do |project|
-      OpenStruct.new(id: project.id, title: project.name_with_namespace)
+      { id: project.id, text: project.name_with_namespace }
     end
 
-    projects.unshift(OpenStruct.new(id: '', title: 'Any Project'))
-
-    options_from_collection_for_select(projects, 'id', 'title', params[:project_id])
+    projects.unshift({ id: '', text: 'Any Project' }).to_json
   end
 
   def todo_types_options
-    types = [
-      OpenStruct.new(title: 'Any Type', name: ''),
-      OpenStruct.new(title: 'Issue', name: 'Issue'),
-      OpenStruct.new(title: 'Merge Request', name: 'MergeRequest')
+    [
+      { id: '', text: 'Any Type' },
+      { id: 'Issue', text: 'Issue' },
+      { id: 'MergeRequest', text: 'Merge Request' }
     ]
+  end
+
+  def todo_actions_dropdown_label(selected_action_id, default_action)
+    selected_action = todo_actions_options.find { |action| action[:id] == selected_action_id.to_i}
+    selected_action ? selected_action[:text] : default_action
+  end
 
-    options_from_collection_for_select(types, 'name', 'title', params[:type])
+  def todo_types_dropdown_label(selected_type, default_type)
+    selected_type = todo_types_options.find { |type| type[:id] == selected_type && type[:id] != '' }
+    selected_type ? selected_type[:text] : default_type
   end
 
   private
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 6bcc37042ea..9d31f31c639 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -28,21 +28,25 @@
   .row-content-block.second-block
     = form_tag todos_filter_path(without: [:project_id, :author_id, :type, :action_id]), method: :get, class: 'filter-form' do
       .filter-item.inline
-        = select_tag('project_id', todo_projects_options,
-          class: 'select2 trigger-submit', include_blank: true,
-          data: {placeholder: 'Project'})
+        - if params[:project_id].present?
+          = hidden_field_tag(:project_id, params[:project_id])
+        = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
+          placeholder: 'Search projects', data: { data: todo_projects_options } })
       .filter-item.inline
-        = users_select_tag(:author_id, selected: params[:author_id],
-          placeholder: 'Author', class: 'trigger-submit', any_user: "Any Author", first_user: true, current_user: true)
+        - if params[:author_id].present?
+          = hidden_field_tag(:author_id, params[:author_id])
+        = dropdown_tag(user_dropdown_label(params[:author_id], 'Author'), options: { toggle_class: 'js-user-search js-filter-submit js-author-search', title: 'Filter by author', filter: true, filterInput: 'input#author-search', dropdown_class: 'dropdown-menu-user dropdown-menu-selectable dropdown-menu-author js-filter-submit',
+          placeholder: 'Search authors', data: { any_user: 'Any Author', first_user: (current_user.username if current_user), current_user: true, project_id: (@project.id if @project), selected: params[:author_id], field_name: 'author_id', default_label: 'Author' } })
       .filter-item.inline
-        = select_tag('type', todo_types_options,
-          class: 'select2 trigger-submit', include_blank: true,
-          data: {placeholder: 'Type'})
+        - if params[:type].present?
+          = hidden_field_tag(:type, params[:type])
+        = dropdown_tag(todo_types_dropdown_label(params[:type], 'Type'), options: { toggle_class: 'js-type-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-type js-filter-submit',
+          data: { data: todo_types_options } })
       .filter-item.inline.actions-filter
-        = select_tag('action_id', todo_actions_options,
-          class: 'select2 trigger-submit', include_blank: true,
-          data: {placeholder: 'Action'})
-
+        - if params[:action_id].present?
+          = hidden_field_tag(:action_id, params[:action_id])
+        = dropdown_tag(todo_actions_dropdown_label(params[:action_id], 'Action'), options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit',
+          data: { data: todo_actions_options }})
       .pull-right
         .dropdown.inline.prepend-left-10
           %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
@@ -76,11 +80,3 @@
     = paginate @todos, theme: "gitlab"
   - else
     .nothing-here-block You're all done!
-
-:javascript
-  new UsersSelect();
-
-  $('form.filter-form').on('submit', function (event) {
-    event.preventDefault();
-    Turbolinks.visit(this.action + '&' + $(this).serialize());
-  });