Default to null user when asignee is unselected31057-unnecessary-padding-along-left-side-of-assignees-dropdown

Also implemented same behavior on the Issue Boards assignee block.
Fixed the default state for search/filter dropdown for issuables.

2 files changed, 15 insertions, 6 deletions

diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 004bac09f59..f0066d4ec5d 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -27,6 +27,9 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   computed: {
     showSidebar () {
       return Object.keys(this.issue).length;
+    },
+    assigneeId() {
+      return this.issue.assignee ? this.issue.assignee.id : 0;
     }
   },
   watch: {
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 0756def68af..68cf9ced3ef 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -30,7 +30,7 @@
       $els.each((function(_this) {
         return function(i, dropdown) {
           var options = {};
-          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove;
+          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
           $dropdown = $(dropdown);
           options.projectId = $dropdown.data('project-id');
           options.groupId = $dropdown.data('group-id');
@@ -51,8 +51,8 @@
           $value = $block.find('.value');
           $collapsedSidebar = $block.find('.sidebar-collapsed-user');
           $loading = $block.find('.block-loading').fadeOut();
-          selectedId = $dropdown.data('selected');
-          if (!selectedId) selectedId = (defaultNullUser && showNullUser) ? 0 : null;
+          selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
+          selectedId = $dropdown.data('selected') || selectedIdDefault;
 
           var updateIssueBoardsIssue = function () {
             $loading.removeClass('hidden').fadeIn();
@@ -188,12 +188,14 @@
             fieldName: $dropdown.data('field-name'),
             toggleLabel: function(selected, el) {
               if (selected && 'id' in selected && $(el).hasClass('is-active')) {
+                $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
                 if (selected.text) {
                   return selected.text;
                 } else {
                   return selected.name;
                 }
               } else {
+                $dropdown.find('.dropdown-toggle-text').addClass('is-default');
                 return defaultLabel;
               }
             },
@@ -206,11 +208,12 @@
             },
             vue: $dropdown.hasClass('js-issue-board-sidebar'),
             clicked: function(user, $el, e) {
-              var isIssueIndex, isMRIndex, page, selected;
+              var isIssueIndex, isMRIndex, page, selected, isSelecting;
               page = $('body').data('page');
               isIssueIndex = page === 'projects:issues:index';
               isMRIndex = (page === page && page === 'projects:merge_requests:index');
-              selectedId = user.id;
+              isSelecting = (user.id !== selectedId);
+              selectedId = isSelecting ? user.id : selectedIdDefault;
               if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
                 e.preventDefault();
                 if (selectedId === gon.current_user_id) {
@@ -227,7 +230,7 @@
               } else if ($dropdown.hasClass('js-filter-submit')) {
                 return $dropdown.closest('form').submit();
               } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-                if (user.id) {
+                if (user.id && isSelecting) {
                   gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
                     id: user.id,
                     username: user.username,
@@ -249,6 +252,9 @@
             },
             opened: function(e) {
               const $el = $(e.currentTarget);
+              if ($dropdown.hasClass('js-issue-board-sidebar')) {
+                selectedId = parseInt($dropdown[0].dataset.selected, 10) || selectedIdDefault;
+              }
               $el.find('.is-active').removeClass('is-active');
               $el.find(`li[data-user-id="${selectedId}"] .dropdown-menu-user-link`).addClass('is-active');
             },