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

7 files changed, 154 insertions, 61 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());
-  });
diff --git a/features/dashboard/todos.feature b/features/dashboard/todos.feature
index 42f5d6d2af7..0b23bbb7951 100644
--- a/features/dashboard/todos.feature
+++ b/features/dashboard/todos.feature
@@ -23,26 +23,6 @@ Feature: Dashboard Todos
     Then I should see all todos marked as done
 
   @javascript
-    Scenario: I filter by project
-      Given I filter by "Enterprise"
-      Then I should not see todos
-
-  @javascript
-    Scenario: I filter by author
-      Given I filter by "John Doe"
-      Then I should not see todos related to "Mary Jane" in the list
-
-  @javascript
-    Scenario: I filter by type
-      Given I filter by "Issue"
-      Then I should not see todos related to "Merge Requests" in the list
-
-  @javascript
-    Scenario: I filter by action
-      Given I filter by "Mentioned"
-      Then I should not see todos related to "Assignments" in the list
-
-  @javascript
     Scenario: I click on a todo row
       Given I click on the todo
       Then I should be directed to the corresponding page
diff --git a/features/steps/dashboard/todos.rb b/features/steps/dashboard/todos.rb
index 0607086c166..344b6fda9a6 100644
--- a/features/steps/dashboard/todos.rb
+++ b/features/steps/dashboard/todos.rb
@@ -3,7 +3,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
   include SharedPaths
   include SharedProject
   include SharedUser
-  include Select2Helper
 
   step '"John Doe" is a developer of project "Shop"' do
     project.team << [john_doe, :developer]
@@ -55,7 +54,7 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
     expect(page).to have_content 'To do 0'
     expect(page).to have_content 'Done 4'
     expect(page).to have_content "You're all done!"
-    expect(page).not_to have_link project.name_with_namespace
+    expect('.prepend-top-default').not_to have_link project.name_with_namespace
     should_not_see_todo "John Doe assigned you merge request #{merge_request.to_reference}"
     should_not_see_todo "John Doe mentioned you on issue #{issue.to_reference}"
     should_not_see_todo "John Doe assigned you issue #{issue.to_reference}"
@@ -80,19 +79,31 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
   end
 
   step 'I filter by "Enterprise"' do
-    select2(enterprise.id, from: "#project_id")
+    click_button 'Project'
+    page.within '.dropdown-menu-project' do
+      click_link enterprise.name_with_namespace
+    end
   end
 
   step 'I filter by "John Doe"' do
-    select2(john_doe.id, from: "#author_id")
+    click_button 'Author'
+    page.within '.dropdown-menu-author' do
+      click_link john_doe.username
+    end
   end
 
   step 'I filter by "Issue"' do
-    select2('Issue', from: "#type")
+    click_button 'Type'
+    page.within '.dropdown-menu-type' do
+      click_link 'Issue'
+    end
   end
 
   step 'I filter by "Mentioned"' do
-    select2("#{Todo::MENTIONED}", from: '#action_id')
+    click_button 'Action'
+    page.within '.dropdown-menu-action' do
+      click_link 'Mentioned'
+    end
   end
 
   step 'I should not see todos' do
diff --git a/spec/features/todos/todos_filtering_spec.rb b/spec/features/todos/todos_filtering_spec.rb
new file mode 100644
index 00000000000..83cf306437d
--- /dev/null
+++ b/spec/features/todos/todos_filtering_spec.rb
@@ -0,0 +1,63 @@
+require 'spec_helper'
+
+describe 'Dashboard > User filters todos', feature: true, js: true do
+  include WaitForAjax
+
+  let(:user_1)    { create(:user, username: 'user_1', name: 'user_1') }
+  let(:user_2)    { create(:user, username: 'user_2', name: 'user_2') }
+
+  let(:project_1) { create(:empty_project, name: 'project_1') }
+  let(:project_2) { create(:empty_project, name: 'project_2') }
+
+  let(:issue) { create(:issue, title: 'issue', project: project_1) }
+
+  let!(:merge_request) { create(:merge_request, source_project: project_2, title: 'merge_request') }
+
+  before do
+    create(:todo, user: user_1, author: user_2, project: project_1, target: issue, action: 1)
+    create(:todo, user: user_1, author: user_1, project: project_2, target: merge_request, action: 2)
+
+    project_1.team << [user_1, :developer]
+    project_2.team << [user_1, :developer]
+    login_as(user_1)
+    visit dashboard_todos_path
+  end
+
+  it 'filters by project' do
+    click_button 'Project'
+    within '.dropdown-menu-project' do
+      fill_in 'Search projects', with: project_1.name_with_namespace
+      click_link project_1.name_with_namespace
+    end
+    wait_for_ajax
+    expect('.prepend-top-default').not_to have_content project_2.name_with_namespace
+  end
+
+  it 'filters by author' do
+    click_button 'Author'
+    within '.dropdown-menu-author' do
+      fill_in 'Search authors', with: user_1.name
+      click_link user_1.name
+    end
+    wait_for_ajax
+    expect('.prepend-top-default').not_to have_content user_2.name
+  end
+
+  it 'filters by type' do
+    click_button 'Type'
+    within '.dropdown-menu-type' do
+      click_link 'Issue'
+    end
+    wait_for_ajax
+    expect('.prepend-top-default').not_to have_content ' merge request !'
+  end
+
+  it 'filters by action' do
+    click_button 'Action'
+    within '.dropdown-menu-action' do
+      click_link 'Assigned'
+    end
+    wait_for_ajax
+    expect('.prepend-top-default').not_to have_content ' mentioned '
+  end
+end