Merge branch '9-2-stable-fix-conflicts-for-mr-11391' into '9-2-stable'

app/assets/javascripts/boards/components/board_sidebar.js

@@ -42,6 +42,12 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     detail: {
       handler () {
         if (this.issue.id !== this.detail.issue.id) {
+          $('.block.assignee')
+            .find('input:not(.js-vue)[name="issue[assignee_ids][]"]')
+            .each((i, el) => {
+              $(el).remove();
+            });
+
           $('.js-issue-board-sidebar', this.$el).each((i, el) => {
             $(el).data('glDropdown').clearMenu();
           });

app/assets/javascripts/users_select.js

@@ -55,7 +55,11 @@ window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
           $collapsedSidebar = $block.find('.sidebar-collapsed-user');
           $loading = $block.find('.block-loading').fadeOut();
           selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
-          selectedId = $dropdown.data('selected') || selectedIdDefault;
+          selectedId = $dropdown.data('selected');
+
+          if (selectedId === undefined) {
+            selectedId = selectedIdDefault;
+          }
 
           const assignYourself = function () {
             const unassignedSelected = $dropdown.closest('.selectbox')
@@ -428,8 +432,9 @@ window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
             },
             opened: function(e) {
               const $el = $(e.currentTarget);
-              if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
+              const selected = getSelected();
+              if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
+                this.addInput($dropdown.data('field-name'), 0, {});
               }
               $el.find('.is-active').removeClass('is-active');
 
@@ -437,8 +442,10 @@ window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
                 $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
               }
 
-              if ($selectbox[0]) {
+              if (selected.length > 0) {
                 getSelected().forEach(selectedId => highlightSelected(selectedId));
+              } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
+                highlightSelected(0);
               } else {
                 highlightSelected(selectedId);
               }
@@ -449,15 +456,19 @@ window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
               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) {
+                selected = getSelected().find(u => user.id === u);
+
                 const fieldName = this.fieldName;
                 const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
 
                 if (field.length) {
                   selected = true;
                 }
+              } else {
+                selected = user.id === selectedId;
               }
 
               img = "";

app/views/projects/boards/components/sidebar/_assignee.html.haml

@@ -10,7 +10,7 @@
 
   - if can?(current_user, :admin_issue, @project)
     .selectbox.hide-collapsed
-      %input{ type: "hidden",
+      %input.js-vue{ type: "hidden",
         name: "issue[assignee_ids][]",
         ":value" => "assignee.id",
         "v-if" => "issue.assignees",
@@ -18,7 +18,6 @@
       .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' } },
           ":data-issuable-id" => "issue.id",
-          ":data-selected" => "assigneeId",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           Select assignee
           = icon("chevron-down")

spec/features/dashboard/issues_spec.rb

@@ -26,9 +26,20 @@ RSpec.describe 'Dashboard Issues', feature: true do
     expect(page).not_to have_content(other_issue.title)
   end
 
+  it 'shows checkmark when unassigned is selected for assignee', js: true do
+    find('.js-assignee-search').click
+    find('li', text: 'Unassigned').click
+    find('.js-assignee-search').click
+
+    expect(find('li[data-user-id="0"] a.is-active')).to be_visible
+  end
+
   it 'shows issues when current user is author', js: true do
     find('#assignee_id', visible: false).set('')
     find('.js-author-search', match: :first).click
+
+    expect(find('li[data-user-id="null"] a.is-active')).to be_visible
+
     find('.dropdown-menu-author li a', match: :first, text: current_user.to_reference).click
     find('.js-author-search', match: :first).click