Set selected Assignee in filter from params31843-selecting-unassigned-selects-any-assignee-on-the-ui

6 files changed, 101 insertions, 9 deletions

diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 9bcea302da2..7b123128cd2 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -34,11 +34,12 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     showSidebar () {
       return Object.keys(this.issue).length;
     },
-    assigneeId() {
-      return this.issue.assignee ? this.issue.assignee.id : 0;
-    },
     milestoneTitle() {
       return this.issue.milestone ? this.issue.milestone.title : 'No Milestone';
+    },
+    assigneeIds() {
+      return this.issue.assignees && this.issue.assignees.length > 0 ?
+        this.issue.assignees.map(a => a.id) : [0];
     }
   },
   watch: {
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 8119a8cd000..3f0e34da091 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -50,7 +50,8 @@ function UsersSelect(currentUser, els) {
       $collapsedSidebar = $block.find('.sidebar-collapsed-user');
       $loading = $block.find('.block-loading').fadeOut();
       selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
-      selectedId = $dropdown.data('selected') || selectedIdDefault;
+      selectedId = parseInt($dropdown[0].dataset.selected, 10);
+      selectedId = isNaN(selectedId) ? selectedIdDefault : selectedId;
 
       const assignYourself = function () {
         const unassignedSelected = $dropdown.closest('.selectbox')
@@ -424,7 +425,8 @@ function UsersSelect(currentUser, els) {
         opened: function(e) {
           const $el = $(e.currentTarget);
           if ($dropdown.hasClass('js-issue-board-sidebar')) {
-            selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
+            selectedId = parseInt($dropdown[0].dataset.selected, 10);
+            selectedId = isNaN(selectedId) ? selectedIdDefault : selectedId;
           }
           $el.find('.is-active').removeClass('is-active');
 
@@ -444,7 +446,7 @@ function UsersSelect(currentUser, els) {
           username = user.username ? "@" + user.username : "";
           avatar = user.avatar_url ? user.avatar_url : false;
 
-          let selected = user.id === parseInt(selectedId, 10);
+          let selected = false;
 
           if (this.multiSelect) {
             const fieldName = this.fieldName;
@@ -453,6 +455,8 @@ function UsersSelect(currentUser, els) {
             if (field.length) {
               selected = true;
             }
+          } else {
+            selected = (user.id === selectedId) || (user.id === parseInt(selectedId, 10));
           }
 
           img = "";
diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml
index 642da679f97..3db7bbbbe10 100644
--- a/app/views/projects/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml
@@ -16,9 +16,9 @@
         "v-if" => "issue.assignees",
         "v-for" => "assignee in issue.assignees" }
       .dropdown
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: "button", ref: "assigneeDropdown", data: { toggle: "dropdown", field_name: "issue[assignee_ids][]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true", multi_select: "true", 'max-select' => 1, dropdown: { header: 'Assignee' } },
+        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: "button", ref: "assigneeDropdown", data: { toggle: "dropdown", field_name: "issue[assignee_ids][]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true", null_user_default: "true", multi_select: "true", 'max-select' => 1, dropdown: { header: 'Assignee' } },
           ":data-issuable-id" => "issue.id",
-          ":data-selected" => "assigneeId",
+          ":data-selected" => "assigneeIds",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           Select assignee
           = icon("chevron-down")
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 6cd03f028a9..5155ce25f68 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -48,7 +48,7 @@
                   %a{ href: "#", data: {id: "close" } } Closed
           .filter-item.inline
             = dropdown_tag("Assignee", options: { toggle_class: "issue-bulk-update-dropdown-toggle js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
-              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]", default_label: "Assignee" } })
+              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]", default_label: "Assignee", selected: params[:assignee_id] } })
           .filter-item.inline
             = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'issue-bulk-update-dropdown-toggle js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", default_label: "Milestone", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
           .filter-item.inline.labels-filter
diff --git a/changelogs/unreleased/31843-selecting-unassigned-selects-any-assignee-on-the-ui.yml b/changelogs/unreleased/31843-selecting-unassigned-selects-any-assignee-on-the-ui.yml
new file mode 100644
index 00000000000..e504003c330
--- /dev/null
+++ b/changelogs/unreleased/31843-selecting-unassigned-selects-any-assignee-on-the-ui.yml
@@ -0,0 +1,4 @@
+---
+title: Fix ability to select Unassigned on the Assignee filter dropdown
+merge_request: 11147
+author:
diff --git a/spec/features/dashboard/user_filters_issues_spec.rb b/spec/features/dashboard/user_filters_issues_spec.rb
new file mode 100644
index 00000000000..aaf52af48f7
--- /dev/null
+++ b/spec/features/dashboard/user_filters_issues_spec.rb
@@ -0,0 +1,83 @@
+require 'spec_helper'
+
+describe 'Dashboard > user filter', feature: true, js: true do
+  let(:user) { create(:user) }
+  let(:user2) { create(:user) }
+  let(:project) { create(:project, name: 'Victorialand', namespace: user.namespace) }
+
+  let!(:authored_issue) { create :issue, author: user, assignees: [], project: project }
+  let!(:assigned_issue) { create :issue, author: user2, assignees: [user], project: project }
+
+  before do
+    project.team << [user, :master]
+
+    login_as(user)
+  end
+
+  it 'should select Any Assignee by default' do
+    visit issues_dashboard_path
+
+    find('.js-assignee-search').click
+
+    expect(find('[data-user-id="null"]')).to have_selector('.is-active')
+  end
+
+  context 'filtering by author' do
+    it 'shows issues authored by user' do
+      visit issues_dashboard_path(author_id: user.id)
+
+      expect(find('.js-author-search')).to have_content(user.name)
+      expect(find('.issue-info')).to have_content(user.name)
+
+      find('.js-author-search').click
+
+      expect(find("[data-user-id=\"#{user.id}\"]")).to have_selector('.is-active')
+    end
+  end
+
+  context 'filtering by assignee' do
+    it 'shows Unassigned issues' do
+      visit issues_dashboard_path(assignee_id: 0)
+
+      expect(find('.issue .controls')).not_to have_selector('.author_link')
+    end
+
+    it 'shows issues assigned to user' do
+      visit issues_dashboard_path(assignee_id: user.id)
+
+      expect(find('.issue .controls')).to have_selector('.author_link')
+
+      find('.js-assignee-search').click
+
+      expect(find("[data-user-id=\"#{user.id}\"]")).to have_selector('.is-active')
+    end
+
+    it 'does not change active item until new item is selected' do
+      visit issues_dashboard_path(assignee_id: 0)
+      active = '.is-active'
+      assignee_search = find('.js-assignee-search')
+      assignee_search.click
+
+      any_assignee = find('[data-user-id="null"]')
+      unassigned = find('[data-user-id="0"]')
+
+      expect(unassigned).to have_selector(active)
+      expect(any_assignee).not_to have_selector(active)
+
+      # close then open dropdown
+      assignee_search.click
+      assignee_search.click
+
+      # active should be the same
+      expect(unassigned).to have_selector(active)
+
+      # should change active when selecting new item
+      any_assignee.click
+
+      assignee_search.click
+
+      expect(any_assignee).to have_selector(active)
+      expect(unassigned).not_to have_selector(active)
+    end
+  end
+end