Merge branch 'revert-c676283b' into 'master'

Updated issuable form with GL dropdowns

## What does this MR do?

This adds back in the GL dropdowns into the issuable form but fixes a lot of usability issues & bugs.

## What are the relevant issue numbers?

Closes #19879, #19882, #19881, #19883, #19880 

## Screenshots (if relevant)

![Screen_Shot_2016-08-30_at_12.13.09](/uploads/f1df758b3fb59958b4e6b62960b81bfb/Screen_Shot_2016-08-30_at_12.13.09.png)

![Screen_Shot_2016-08-30_at_12.13.13](/uploads/6e4fd8f4d874b14eaab6b10752a19df4/Screen_Shot_2016-08-30_at_12.13.13.png)


See merge request !5293

8 files changed, 150 insertions, 53 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index ae910dbdcf0..8d99b12102d 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -59,6 +59,8 @@
           shortcut_handler = new ShortcutsNavigation();
           new GLForm($('.issue-form'));
           new IssuableForm($('.issue-form'));
+          new LabelsSelect();
+          new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
           break;
         case 'projects:merge_requests:new':
@@ -67,6 +69,8 @@
           shortcut_handler = new ShortcutsNavigation();
           new GLForm($('.merge-request-form'));
           new IssuableForm($('.merge-request-form'));
+          new LabelsSelect();
+          new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
           break;
         case 'projects:tags:new':
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 1b6db641200..d4403375643 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -443,6 +443,7 @@
       var contentHtml;
       this.resetRows();
       this.addArrowKeyEvent();
+
       if (this.options.setIndeterminateIds) {
         this.options.setIndeterminateIds.call(this);
       }
@@ -460,9 +461,21 @@
       if (this.options.filterable) {
         this.filterInput.focus();
       }
+
+      if (this.options.showMenuAbove) {
+        this.positionMenuAbove();
+      }
+
       return this.dropdown.trigger('shown.gl.dropdown');
     };
 
+    GitLabDropdown.prototype.positionMenuAbove = function() {
+      var $button = $(this.el);
+      var $menu = this.dropdown.find('.dropdown-menu');
+
+      $menu.css('top', ($button.height() + $menu.height()) * -1);
+    };
+
     GitLabDropdown.prototype.hidden = function(e) {
       var $input;
       this.resetRows();
diff --git a/app/assets/javascripts/issuable.js.es6 b/app/assets/javascripts/issuable.js.es6
index 73e2664e9c0..57f7e4ef230 100644
--- a/app/assets/javascripts/issuable.js.es6
+++ b/app/assets/javascripts/issuable.js.es6
@@ -51,7 +51,6 @@
         }).remove();
         // Submit the form to get new data
         Issuable.filterResults($('.filter-form'));
-        return $('.js-label-select').trigger('update.label');
       });
     },
     filterResults: (function(_this) {
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index ce79e2e348a..69d9e0a4d79 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -4,8 +4,9 @@
       var _this;
       _this = this;
       $('.js-label-select').each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected;
+        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove;
         $dropdown = $(dropdown);
+        $toggleText = $dropdown.find('.dropdown-toggle-text');
         projectId = $dropdown.data('project-id');
         labelUrl = $dropdown.data('labels');
         issueUpdateURL = $dropdown.data('issueUpdate');
@@ -15,6 +16,7 @@
         }
         showNo = $dropdown.data('show-no');
         showAny = $dropdown.data('show-any');
+        showMenuAbove = $dropdown.data('showMenuAbove');
         defaultLabel = $dropdown.data('default-label');
         abilityName = $dropdown.data('ability-name');
         $selectbox = $dropdown.closest('.selectbox');
@@ -24,6 +26,9 @@
         $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
         $value = $block.find('.value');
         $loading = $block.find('.block-loading').fadeOut();
+        fieldName = $dropdown.data('field-name');
+        useId = $dropdown.is('.js-issuable-form-dropdown, .js-filter-bulk-update, .js-label-sidebar-dropdown');
+        propertyName = useId ? 'id' : 'title';
         initialSelected = $selectbox
           .find('input[name="' + $dropdown.data('field-name') + '"]')
           .map(function () {
@@ -45,7 +50,7 @@
 
         saveLabelData = function() {
           var data, selected;
-          selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").map(function() {
+          selected = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "']").map(function() {
             return this.value;
           }).get();
 
@@ -75,7 +80,8 @@
             if (data.labels.length) {
               template = labelHTMLTemplate(data);
               labelCount = data.labels.length;
-            } else {
+            }
+            else {
               template = labelNoneHTMLTemplate;
             }
             $value.removeAttr('style').html(template);
@@ -92,7 +98,8 @@
               }
 
               labelTooltipTitle = labelTitles.join(', ');
-            } else {
+            }
+            else {
               labelTooltipTitle = '';
               $sidebarLabelTooltip.tooltip('destroy');
             }
@@ -114,6 +121,7 @@
           });
         };
         return $dropdown.glDropdown({
+          showMenuAbove: showMenuAbove,
           data: function(term, callback) {
             return $.ajax({
               url: labelUrl
@@ -133,23 +141,29 @@
                 };
               }).value();
               if ($dropdown.hasClass('js-extra-options')) {
+                var extraData = [];
                 if (showNo) {
-                  data.unshift({
+                  extraData.unshift({
                     id: 0,
                     title: 'No Label'
                   });
                 }
                 if (showAny) {
-                  data.unshift({
+                  extraData.unshift({
                     isAny: true,
                     title: 'Any Label'
                   });
                 }
-                if (data.length > 2) {
-                  data.splice(2, 0, 'divider');
+                if (extraData.length) {
+                  extraData.push('divider');
+                  data = extraData.concat(data);
                 }
               }
-              return callback(data);
+
+              callback(data);
+              if (showMenuAbove) {
+                $dropdown.data('glDropdown').positionMenuAbove();
+              }
             });
           },
           renderRow: function(label, instance) {
@@ -157,7 +171,7 @@
             $li = $('<li>');
             $a = $('<a href="#">');
             selectedClass = [];
-            removesAll = label.id === 0 || (label.id == null);
+            removesAll = label.id <= 0 || (label.id == null);
             if ($dropdown.hasClass('js-filter-bulk-update')) {
               indeterminate = instance.indeterminateIds;
               active = instance.activeIds;
@@ -194,14 +208,16 @@
                 return color + " " + percentFirst + "%," + color + " " + percentSecond + "% ";
               }).join(',');
               color = "linear-gradient(" + color + ")";
-            } else {
+            }
+            else {
               if (label.color != null) {
                 color = label.color[0];
               }
             }
             if (color) {
               colorEl = "<span class='dropdown-label-box' style='background: " + color + "'></span>";
-            } else {
+            }
+            else {
               colorEl = '';
             }
             // We need to identify which items are actually labels
@@ -219,30 +235,46 @@
           },
           selectable: true,
           filterable: true,
+          selected: $dropdown.data('selected') || [],
           toggleLabel: function(selected, el) {
-            var selected_labels;
-            selected_labels = $('.js-label-select').siblings('.dropdown-menu-labels').find('.is-active');
-            if (selected && (selected.title != null)) {
-              if (selected_labels.length > 1) {
-                return selected.title + " +" + (selected_labels.length - 1) + " more";
-              } else {
-                return selected.title;
-              }
-            } else if (!selected && selected_labels.length !== 0) {
-              if (selected_labels.length > 1) {
-                return ($(selected_labels[0]).text()) + " +" + (selected_labels.length - 1) + " more";
-              } else if (selected_labels.length === 1) {
-                return $(selected_labels).text();
-              }
-            } else {
+            var isSelected = el !== null ? el.hasClass('is-active') : false;
+            var title = selected.title;
+            var selectedLabels = this.selected;
+
+            if (selected.id === 0) {
+              this.selected = [];
+              return 'No Label';
+            }
+            else if (isSelected) {
+              this.selected.push(title);
+            }
+            else {
+              var index = this.selected.indexOf(title);
+              this.selected.splice(index, 1);
+            }
+
+            if (selectedLabels.length === 1) {
+              return selectedLabels;
+            }
+            else if (selectedLabels.length) {
+              return selectedLabels[0] + " +" + (selectedLabels.length - 1) + " more";
+            }
+            else {
               return defaultLabel;
             }
           },
           fieldName: $dropdown.data('field-name'),
           id: function(label) {
+            if (label.id <= 0) return;
+
+            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
+              return label.id;
+            }
+
             if ($dropdown.hasClass("js-filter-submit") && (label.isAny == null)) {
               return label.title;
-            } else {
+            }
+            else {
               return label.id;
             }
           },
@@ -254,6 +286,11 @@
             $selectbox.hide();
             // display:block overrides the hide-collapse rule
             $value.removeAttr('style');
+
+            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
+              return;
+            }
+
             if (page === 'projects:boards:show') {
               return;
             }
@@ -261,9 +298,11 @@
               if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
                 selectedLabels = $dropdown.closest('form').find("input:hidden[name='" + ($dropdown.data('fieldName')) + "']");
                 Issuable.filterResults($dropdown.closest('form'));
-              } else if ($dropdown.hasClass('js-filter-submit')) {
+              }
+              else if ($dropdown.hasClass('js-filter-submit')) {
                 $dropdown.closest('form').submit();
-              } else {
+              }
+              else {
                 if (!$dropdown.hasClass('js-filter-bulk-update')) {
                   saveLabelData();
                 }
@@ -280,18 +319,28 @@
           clicked: function(label, $el, e) {
             var isIssueIndex, isMRIndex, page;
             _this.enableBulkLabelDropdown();
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
+
+            if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
+              $dropdown.parent()
+                .find('.dropdown-clear-active')
+                .removeClass('is-active')
+            }
+
+            if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
               return;
             }
+
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = page === 'projects:merge_requests:index';
             if (page === 'projects:boards:show') {
               if (label.isAny) {
                 gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
-              } else if ($el.hasClass('is-active')) {
+              }
+              else if ($el.hasClass('is-active')) {
                 gl.issueBoards.BoardsStore.state.filters['label_name'].push(label.title);
-              } else {
+              }
+              else {
                 var filters = gl.issueBoards.BoardsStore.state.filters['label_name'];
                 filters = filters.filter(function (filteredLabel) {
                   return filteredLabel !== label.title;
@@ -302,17 +351,21 @@
               gl.issueBoards.BoardsStore.updateFiltersUrl();
               e.preventDefault();
               return;
-            } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+            }
+            else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
               if (!$dropdown.hasClass('js-multiselect')) {
                 selectedLabel = label.title;
                 return Issuable.filterResults($dropdown.closest('form'));
               }
-            } else if ($dropdown.hasClass('js-filter-submit')) {
+            }
+            else if ($dropdown.hasClass('js-filter-submit')) {
               return $dropdown.closest('form').submit();
-            } else {
+            }
+            else {
               if ($dropdown.hasClass('js-multiselect')) {
 
-              } else {
+              }
+              else {
                 return saveLabelData();
               }
             }
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index c8031174dd2..26cc6eb0e96 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -7,7 +7,7 @@
         this.currentProject = JSON.parse(currentProject);
       }
       $('.js-milestone-select').each(function(i, dropdown) {
-        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, useId;
+        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, useId, showMenuAbove;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         milestonesUrl = $dropdown.data('milestones');
@@ -15,6 +15,7 @@
         selectedMilestone = $dropdown.data('selected');
         showNo = $dropdown.data('show-no');
         showAny = $dropdown.data('show-any');
+        showMenuAbove = $dropdown.data('showMenuAbove');
         showUpcoming = $dropdown.data('show-upcoming');
         useId = $dropdown.data('use-id');
         defaultLabel = $dropdown.data('default-label');
@@ -31,12 +32,12 @@
           collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
         }
         return $dropdown.glDropdown({
+          showMenuAbove: showMenuAbove,
           data: function(term, callback) {
             return $.ajax({
               url: milestonesUrl
             }).done(function(data) {
-              var extraOptions;
-              extraOptions = [];
+              var extraOptions = [];
               if (showAny) {
                 extraOptions.push({
                   id: 0,
@@ -58,10 +59,14 @@
                   title: 'Upcoming'
                 });
               }
-              if (extraOptions.length > 2) {
+              if (extraOptions.length) {
                 extraOptions.push('divider');
               }
-              return callback(extraOptions.concat(data));
+
+              callback(extraOptions.concat(data));
+              if (showMenuAbove) {
+                $dropdown.data('glDropdown').positionMenuAbove();
+              }
             });
           },
           filterable: true,
@@ -69,19 +74,20 @@
             fields: ['title']
           },
           selectable: true,
-          toggleLabel: function(selected) {
-            if (selected && 'id' in selected) {
+          toggleLabel: function(selected, el, e) {
+            if (selected && 'id' in selected && $(el).hasClass('is-active')) {
               return selected.title;
             } else {
               return defaultLabel;
             }
           },
+          defaultLabel: defaultLabel,
           fieldName: $dropdown.data('field-name'),
           text: function(milestone) {
             return _.escape(milestone.title);
           },
           id: function(milestone) {
-            if (!useId) {
+            if (!useId && !$dropdown.is('.js-issuable-form-dropdown')) {
               return milestone.name;
             } else {
               return milestone.id;
@@ -100,7 +106,8 @@
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = (page === page && page === 'projects:merge_requests:index');
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
+            if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+              e.preventDefault();
               return;
             }
             if (page === 'projects:boards:show') {
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 9c277998db4..05056a73aaf 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -14,11 +14,12 @@
       $('.js-user-search').each((function(_this) {
         return function(i, dropdown) {
           var options = {};
-          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser;
+          var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove;
           $dropdown = $(dropdown);
           options.projectId = $dropdown.data('project-id');
           options.showCurrentUser = $dropdown.data('current-user');
           showNullUser = $dropdown.data('null-user');
+          showMenuAbove = $dropdown.data('showMenuAbove');
           showAnyUser = $dropdown.data('any-user');
           firstUser = $dropdown.data('first-user');
           options.authorId = $dropdown.data('author-id');
@@ -73,6 +74,7 @@
           collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/u/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
           assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/u/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
           return $dropdown.glDropdown({
+            showMenuAbove: showMenuAbove,
             data: function(term, callback) {
               var isAuthorFilter;
               isAuthorFilter = $('.js-author-search');
@@ -116,8 +118,11 @@
                 if (showDivider) {
                   users.splice(showDivider, 0, "divider");
                 }
-                // Send the data back
-                return callback(users);
+
+                callback(users);
+                if (showMenuAbove) {
+                  $dropdown.data('glDropdown').positionMenuAbove();
+                }
               });
             },
             filterable: true,
@@ -127,8 +132,8 @@
             },
             selectable: true,
             fieldName: $dropdown.data('field-name'),
-            toggleLabel: function(selected) {
-              if (selected && 'id' in selected) {
+            toggleLabel: function(selected, el) {
+              if (selected && 'id' in selected && $(el).hasClass('is-active')) {
                 if (selected.text) {
                   return selected.text;
                 } else {
@@ -138,6 +143,7 @@
                 return defaultLabel;
               }
             },
+            defaultLabel: defaultLabel,
             inputId: 'issue_assignee_id',
             hidden: function(e) {
               $selectbox.hide();
@@ -149,7 +155,9 @@
               page = $('body').data('page');
               isIssueIndex = page === 'projects:issues:index';
               isMRIndex = (page === page && page === 'projects:merge_requests:index');
-              if ($dropdown.hasClass('js-filter-bulk-update')) {
+              if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+                e.preventDefault();
+                selectedId = user.id;
                 return;
               }
               if (page === 'projects:boards:show') {
@@ -167,6 +175,9 @@
                 return assignTo(selected);
               }
             },
+            id: function (user) {
+              return user.id;
+            },
             renderRow: function(user) {
               var avatar, img, listClosingTags, listWithName, listWithUserName, selected, username;
               username = user.username ? "@" + user.username : "";
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index b0ba112476b..4a87a73a68a 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -604,3 +604,9 @@
   display: block;
   color: $gl-placeholder-color;
 }
+
+.dropdown-toggle-text {
+  &.is-default {
+    color: $gl-placeholder-color;
+  }
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 3514ee2f35e..bc8693ae467 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -350,6 +350,10 @@
 .issuable-form-select-holder {
   display: inline-block;
   width: 250px;
+
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
 }
 
 .table-holder {