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

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':

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();

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) {

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') {

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 : "";

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;
+  }
+}

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 {

app/controllers/projects/boards_controller.rb

 class Projects::BoardsController < Projects::ApplicationController
+  include IssuableCollections
+  
   respond_to :html
 
   before_action :authorize_read_board!, only: [:show]

app/helpers/dropdowns_helper.rb

@@ -40,8 +40,9 @@ module DropdownsHelper
   end
 
   def dropdown_toggle(toggle_text, data_attr, options = {})
+    default_label = data_attr[:default_label]
     content_tag(:button, class: "dropdown-menu-toggle #{options[:toggle_class] if options.has_key?(:toggle_class)}", id: (options[:id] if options.has_key?(:id)), type: "button", data: data_attr) do
-      output = content_tag(:span, toggle_text, class: "dropdown-toggle-text")
+      output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
       output << icon('chevron-down')
       output.html_safe
     end

app/helpers/issuables_helper.rb

@@ -8,18 +8,12 @@ module IssuablesHelper
   end
 
   def multi_label_name(current_labels, default_label)
-    # current_labels may be a string from before
-    if current_labels.is_a?(Array)
-      if current_labels.count > 1
-        "#{current_labels[0]} +#{current_labels.count - 1} more"
+    if current_labels && current_labels.any?
+      title = current_labels.first.try(:title)
+      if current_labels.size > 1
+        "#{title} +#{current_labels.size - 1} more"
       else
-        current_labels[0]
-      end
-    elsif current_labels.is_a?(String)
-      if current_labels.nil? || current_labels.empty?
-        default_label
-      else
-        current_labels
+        title
       end
     else
       default_label

app/helpers/labels_helper.rb

@@ -115,8 +115,9 @@ module LabelsHelper
   end
 
   def labels_filter_path
-    if @project
-      namespace_project_labels_path(@project.namespace, @project, :json)
+    project = @target_project || @project
+    if project
+      namespace_project_labels_path(project.namespace, project, :json)
     else
       dashboard_labels_path(:json)
     end

app/helpers/milestones_helper.rb

@@ -71,8 +71,9 @@ module MilestonesHelper
   end
 
   def milestones_filter_dropdown_path
-    if @project
-      namespace_project_milestones_path(@project.namespace, @project, :json)
+    project = @target_project || @project
+    if project
+      namespace_project_milestones_path(project.namespace, project, :json)
     else
       dashboard_milestones_path(:json)
     end

app/views/shared/issuable/_filter.html.haml

+- finder = controller.controller_name == 'issues' || controller.controller_name == 'boards' ? issues_finder : merge_requests_finder
 - boards_page = controller.controller_name == 'boards'
 
 .issues-filters
@@ -14,19 +15,19 @@
           - 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, 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" } })
+            placeholder: "Search authors", data: { any_user: "Any Author", first_user: current_user.try(:username), current_user: true, project_id: @project.try(:id), selected: params[:author_id], field_name: "author_id", default_label: "Author" } })
 
         .filter-item.inline
           - if params[:assignee_id].present?
             = hidden_field_tag(:assignee_id, params[:assignee_id])
           = dropdown_tag(user_dropdown_label(params[:assignee_id], "Assignee"), options: { toggle_class: "js-user-search js-filter-submit js-assignee-search", title: "Filter by assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
-            placeholder: "Search assignee", data: { any_user: "Any Assignee", first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: (@project.id if @project), selected: params[:assignee_id], field_name: "assignee_id", default_label: "Assignee" } })
+            placeholder: "Search assignee", data: { any_user: "Any Assignee", first_user: current_user.try(:username), null_user: true, current_user: true, project_id: @project.try(:id), selected: params[:assignee_id], field_name: "assignee_id", default_label: "Assignee" } })
 
         .filter-item.inline.milestone-filter
-          = render "shared/issuable/milestone_dropdown"
+          = render "shared/issuable/milestone_dropdown", selected: finder.milestones.try(:first), name: :milestone_title, show_any: true, show_upcoming: true
 
         .filter-item.inline.labels-filter
-          = render "shared/issuable/label_dropdown"
+          = render "shared/issuable/label_dropdown", selected: finder.labels.select(:title).uniq, use_id: false, selected_toggle: params[:label_name], data_options: { field_name: "label_name[]" }
 
         .filter-item.inline.reset-filters
           %a{href: page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :search])} Reset filters

app/views/shared/issuable/_form.html.haml

+- project = @target_project || @project
 = form_errors(issuable)
 
 - if @conflict
@@ -82,38 +83,22 @@
         = f.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
         .col-sm-10{ class: ("col-lg-8" if has_due_date) }
           .issuable-form-select-holder
-            = users_select_tag("#{issuable.class.model_name.param_key}[assignee_id]",
-                placeholder: 'Select assignee', class: 'custom-form-control', null_user: true,
-                selected: issuable.assignee_id, project: @target_project || @project,
-                first_user: true, current_user: true, include_blank: true)
-          %div
-            = link_to 'Assign to me', '#', class: 'assign-to-me-link prepend-top-5 inline'
+            - if issuable.assignee_id
+              = f.hidden_field :assignee_id
+            = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Filter by assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
+              placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee", show_menu_above: true } })
       .form-group.issue-milestone
         = f.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
         .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-          - if milestone_options(issuable).present?
-            .issuable-form-select-holder
-              = f.select(:milestone_id, milestone_options(issuable),
-                { include_blank: true }, { class: 'select2', data: { placeholder: 'Select milestone' } })
-          - else
-            .prepend-top-10
-            %span.light No open milestones available.
-          - if can? current_user, :admin_milestone, issuable.project
-            %div
-              = link_to 'Create new milestone', new_namespace_project_milestone_path(issuable.project.namespace, issuable.project), target: :blank, class: "prepend-top-5 inline"
+          .issuable-form-select-holder
+            = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_menu_above: true, show_upcoming: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input"
       .form-group
         - has_labels = issuable.project.labels.any?
         = f.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
+        = f.hidden_field :label_ids, multiple: true, value: ''
         .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
-          - if has_labels
-            .issuable-form-select-holder
-              = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
-                { selected: issuable.label_ids }, multiple: true, class: 'select2', data: { placeholder: "Select labels" }
-          - else
-            %span.light No labels yet.
-          - if can? current_user, :admin_label, issuable.project
-            %div
-              = link_to 'Create new label', new_namespace_project_label_path(issuable.project.namespace, issuable.project), target: :blank, class: "prepend-top-5 inline"
+          .issuable-form-select-holder
+            = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false, show_menu_above: 'true' }
     - if has_due_date
       .col-lg-6
         .form-group

app/views/shared/issuable/_label_dropdown.html.haml

+- project = @target_project || @project
 - show_create = local_assigns.fetch(:show_create, true)
 - extra_options = local_assigns.fetch(:extra_options, true)
 - filter_submit = local_assigns.fetch(:filter_submit, true)
 - show_footer = local_assigns.fetch(:show_footer, true)
+- use_id = local_assigns.fetch(:use_id, true)
 - data_options = local_assigns.fetch(:data_options, {})
 - classes = local_assigns.fetch(:classes, [])
-- dropdown_data = {toggle: 'dropdown', field_name: 'label_name[]', show_no: "true", show_any: "true", selected: params[:label_name], project_id: @project.try(:id), labels: labels_filter_path, default_label: "Label"}
+- selected = local_assigns.fetch(:selected, nil)
+- selected_toggle = local_assigns.fetch(:selected_toggle, nil)
+- dropdown_data = {toggle: 'dropdown', field_name: "label_name[]", show_no: "true", show_any: "true", project_id: project.try(:id), labels: labels_filter_path, default_label: "Labels"}
 - dropdown_data.merge!(data_options)
 - classes << 'js-extra-options' if extra_options
 - classes << 'js-filter-submit' if filter_submit
 
-- if params[:label_name].present?
-  - if params[:label_name].respond_to?('any?')
-    - params[:label_name].each do |label|
-      = hidden_field_tag "label_name[]", label, id: nil
+- if selected
+  - selected.each do |label|
+    = hidden_field_tag data_options[:field_name], use_id ? label.try(:id) : label.try(:title), id: nil
+
 .dropdown
   %button.dropdown-menu-toggle.js-label-select.js-multiselect{class: classes.join(' '), type: "button", data: dropdown_data}
-    %span.dropdown-toggle-text
-      = h(multi_label_name(params[:label_name], "Label"))
+    %span.dropdown-toggle-text{ class: ("is-default" if selected.nil? || selected.empty?) }
+      = multi_label_name(selected, "Labels")
     = icon('chevron-down')
   .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
     = render partial: "shared/issuable/label_page_default", locals: { title: "Filter by label", show_footer: show_footer, show_create: show_create }
-    - if show_create and @project and can?(current_user, :admin_label, @project)
+    - if show_create && project && can?(current_user, :admin_label, project)
       = render partial: "shared/issuable/label_page_create"
     = dropdown_loading

app/views/shared/issuable/_milestone_dropdown.html.haml

-- if params[:milestone_title].present?
-  = hidden_field_tag(:milestone_title, params[:milestone_title])
-= dropdown_tag(milestone_dropdown_label(params[:milestone_title]), options: { title: "Filter by milestone", toggle_class: 'js-milestone-select js-filter-submit', filter: true, dropdown_class: "dropdown-menu-selectable",
-  placeholder: "Search milestones", footer_content: @project.present?, data: { show_no: true, show_any: true, show_upcoming: true, field_name: "milestone_title", selected: params[:milestone_title], project_id: @project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
-  - if @project
+- project = @target_project || @project
+- extra_class = extra_class || ''
+- show_menu_above = show_menu_above || false
+- selected_text = selected.try(:title)
+- if selected.present?
+  = hidden_field_tag(name, name == :milestone_title ? selected.title : selected.id)
+= dropdown_tag(milestone_dropdown_label(selected_text), options: { title: "Filter by milestone", toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone",
+  placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, field_name: name, selected: selected.try(:title), project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
+  - if project
     %ul.dropdown-footer-list
-      - if can? current_user, :admin_milestone, @project
+      - if can? current_user, :admin_milestone, project
         %li
-          = link_to new_namespace_project_milestone_path(@project.namespace, @project), title: "New Milestone" do
+          = link_to new_namespace_project_milestone_path(project.namespace, project), title: "New Milestone" do
             Create new
       %li
-        = link_to namespace_project_milestones_path(@project.namespace, @project) do
-          - if can? current_user, :admin_milestone, @project
+        = link_to namespace_project_milestones_path(project.namespace, project) do
+          - if can? current_user, :admin_milestone, project
             Manage milestones
           - else
             View milestones

app/views/shared/issuable/_sidebar.html.haml

@@ -108,29 +108,30 @@
                     .js-due-date-calendar
 
       - if issuable.project.labels.any?
+        - selected_labels = issuable.labels
         .block.labels
           .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
             = icon('tags')
             %span
-              = issuable.labels_array.size
+              = selected_labels.size
           .title.hide-collapsed
             Labels
             = icon('spinner spin', class: 'block-loading')
             - if can_edit_issuable
               = link_to 'Edit', '#', class: 'edit-link pull-right'
-          .value.issuable-show-labels.hide-collapsed{ class: ("has-labels" if issuable.labels_array.any?) }
-            - if issuable.labels_array.any?
-              - issuable.labels_array.each do |label|
+          .value.issuable-show-labels.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
+            - if selected_labels.any?
+              - selected_labels.each do |label|
                 = link_to_label(label, type: issuable.to_ability_name)
             - else
               %span.no-value None
           .selectbox.hide-collapsed
-            - issuable.labels_array.each do |label|
+            - selected_labels.each do |label|
               = hidden_field_tag "#{issuable.to_ability_name}[label_names][]", label.id, id: nil
             .dropdown
-              %button.dropdown-menu-toggle.js-label-select.js-multiselect{type: "button", data: {toggle: "dropdown", field_name: "#{issuable.to_ability_name}[label_names][]", ability_name: issuable.to_ability_name, show_no: "true", show_any: "true", project_id: (@project.id if @project), issue_update: issuable_json_path(issuable), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project)}}
-                %span.dropdown-toggle-text
-                  Label
+              %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{type: "button", data: {toggle: "dropdown", default_label: "Labels", field_name: "#{issuable.to_ability_name}[label_names][]", ability_name: issuable.to_ability_name, show_no: "true", show_any: "true", project_id: (@project.id if @project), issue_update: issuable_json_path(issuable), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project)}}
+                %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?)}
+                  = multi_label_name(selected_labels, "Labels")
                 = icon('chevron-down')
               .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
                 = render partial: "shared/issuable/label_page_default"

features/project/issues/issues.feature

@@ -37,6 +37,7 @@ Feature: Project Issues
     And I submit new issue "500 error on profile"
     Then I should see issue "500 error on profile"
 
+  @javascript
   Scenario: I submit new unassigned issue with labels
     Given project "Shop" has labels: "bug", "feature", "enhancement"
     And I click link "New Issue"

features/steps/project/forked_merge_requests.rb

@@ -138,19 +138,19 @@ class Spinach::Features::ProjectForkedMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I click "Assign to" dropdown"' do
-    first('.ajax-users-select').click
+    click_button 'Assignee'
   end
 
   step 'I should see the target project ID in the input selector' do
-    expect(page).to have_selector("input[data-project-id=\"#{@project.id}\"]")
+    expect(find('.js-assignee-search')["data-project-id"]).to eq "#{@project.id}"
   end
 
   step 'I should see the users from the target project ID' do
-    expect(page).to have_selector('.user-result', visible: true, count: 3)
-    users = page.all('.user-name')
-    expect(users[0].text).to eq 'Unassigned'
-    expect(users[1].text).to eq current_user.name
-    expect(users[2].text).to eq @project.users.first.name
+    page.within '.dropdown-menu-user' do
+      expect(page).to have_content 'Unassigned'
+      expect(page).to have_content current_user.name
+      expect(page).to have_content @project.users.first.name
+    end
   end
 
   # Verify a link is generated against the correct project

features/steps/project/issues/issues.rb

@@ -84,7 +84,8 @@ class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
 
   step 'I submit new issue "500 error on profile" with label \'bug\'' do
     fill_in "issue_title", with: "500 error on profile"
-    select 'bug', from: "Labels"
+    click_button "Label"
+    click_link "bug"
     click_button "Submit issue"
   end
 

spec/features/issues/filter_issues_spec.rb

@@ -96,9 +96,9 @@ describe 'Filter issues', feature: true do
       wait_for_ajax
 
       page.within '.labels-filter' do
-        expect(page).to have_content 'No Label'
+        expect(page).to have_content 'Labels'
       end
-      expect(find('.js-label-select .dropdown-toggle-text')).to have_content('No Label')
+      expect(find('.js-label-select .dropdown-toggle-text')).to have_content('Labels')
     end
 
     it 'filters by a label' do
@@ -110,30 +110,37 @@ describe 'Filter issues', feature: true do
     end
 
     it "filters by `won't fix` and another label" do
-      find('.dropdown-menu-labels a', text: label.title).click
       page.within '.labels-filter' do
-        expect(page).to have_content wontfix.title
         click_link wontfix.title
+        expect(page).to have_content wontfix.title
+        click_link label.title
       end
 
-      expect(find('.js-label-select .dropdown-toggle-text')).to have_content(wontfix.title)
+      expect(find('.js-label-select .dropdown-toggle-text')).to have_content("#{wontfix.title} +1 more")
     end
 
     it "filters by `won't fix` label followed by another label after page load" do
-      find('.dropdown-menu-labels a', text: wontfix.title).click
-      # Close label dropdown to load
+      page.within '.labels-filter' do
+        click_link wontfix.title
+        expect(page).to have_content wontfix.title
+      end
+
       find('body').click
+
       expect(find('.filtered-labels')).to have_content(wontfix.title)
 
       find('.js-label-select').click
       wait_for_ajax
       find('.dropdown-menu-labels a', text: label.title).click
-      # Close label dropdown to load
+
       find('body').click
+
+      expect(find('.filtered-labels')).to have_content(wontfix.title)
       expect(find('.filtered-labels')).to have_content(label.title)
 
       find('.js-label-select').click
       wait_for_ajax
+
       expect(find('.dropdown-menu-labels li', text: wontfix.title)).to have_css('.is-active')
       expect(find('.dropdown-menu-labels li', text: label.title)).to have_css('.is-active')
     end

spec/features/issues/form_spec.rb

+require 'rails_helper'
+
+describe 'New/edit issue', feature: true, js: true do
+  let!(:project)   { create(:project) }
+  let!(:user)      { create(:user)}
+  let!(:milestone) { create(:milestone, project: project) }
+  let!(:label)     { create(:label, project: project) }
+  let!(:label2)    { create(:label, project: project) }
+  let!(:issue)     { create(:issue, project: project, assignee: user, milestone: milestone) }
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+  end
+
+  context 'new issue' do
+    before do
+      visit new_namespace_project_issue_path(project.namespace, project)
+    end
+
+    it 'allows user to create new issue' do
+      fill_in 'issue_title', with: 'title'
+      fill_in 'issue_description', with: 'title'
+
+      click_button 'Assignee'
+      page.within '.dropdown-menu-user' do
+        click_link user.name
+      end
+      expect(find('input[name="issue[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+      page.within '.js-assignee-search' do
+        expect(page).to have_content user.name
+      end
+
+      click_button 'Milestone'
+      page.within '.issue-milestone' do
+        click_link milestone.title
+      end
+      expect(find('input[name="issue[milestone_id]"]', visible: false).value).to match(milestone.id.to_s)
+      page.within '.js-milestone-select' do
+        expect(page).to have_content milestone.title
+      end
+
+      click_button 'Labels'
+      page.within '.dropdown-menu-labels' do
+        click_link label.title
+        click_link label2.title
+      end
+      page.within '.js-label-select' do
+        expect(page).to have_content label.title
+      end
+      expect(page.all('input[name="issue[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
+      expect(page.all('input[name="issue[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
+
+      click_button 'Submit issue'
+
+      page.within '.issuable-sidebar' do
+        page.within '.assignee' do
+          expect(page).to have_content user.name
+        end
+
+        page.within '.milestone' do
+          expect(page).to have_content milestone.title
+        end
+
+        page.within '.labels' do
+          expect(page).to have_content label.title
+          expect(page).to have_content label2.title
+        end
+      end
+    end
+  end
+
+  context 'edit issue' do
+    before do
+      visit edit_namespace_project_issue_path(project.namespace, project, issue)
+    end
+
+    it 'allows user to update issue' do
+      expect(find('input[name="issue[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+      expect(find('input[name="issue[milestone_id]"]', visible: false).value).to match(milestone.id.to_s)
+
+      page.within '.js-user-search' do
+        expect(page).to have_content user.name
+      end
+
+      page.within '.js-milestone-select' do
+        expect(page).to have_content milestone.title
+      end
+
+      click_button 'Labels'
+      page.within '.dropdown-menu-labels' do
+        click_link label.title
+        click_link label2.title
+      end
+      page.within '.js-label-select' do
+        expect(page).to have_content label.title
+      end
+      expect(page.all('input[name="issue[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
+      expect(page.all('input[name="issue[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
+
+      click_button 'Save changes'
+
+      page.within '.issuable-sidebar' do
+        page.within '.assignee' do
+          expect(page).to have_content user.name
+        end
+
+        page.within '.milestone' do
+          expect(page).to have_content milestone.title
+        end
+
+        page.within '.labels' do
+          expect(page).to have_content label.title
+          expect(page).to have_content label2.title
+        end
+      end
+    end
+  end
+end

spec/features/issues/move_spec.rb

@@ -55,7 +55,7 @@ feature 'issue move to another project' do
         first('.select2-choice').click
       end
 
-      fill_in('s2id_autogen2_search', with: new_project_search.name)
+      fill_in('s2id_autogen1_search', with: new_project_search.name)
 
       page.within '.select2-drop' do
         expect(page).to have_content(new_project_search.name)

spec/features/issues_spec.rb

@@ -51,9 +51,8 @@ describe 'Issues', feature: true do
 
       expect(page).to have_content "Assignee #{@user.name}"
 
-      first('#s2id_issue_assignee_id').click
-      sleep 2 # wait for ajax stuff to complete
-      first('.user-result').click
+      first('.js-user-search').click
+      click_link 'Unassigned'
 
       click_button 'Save changes'
 

spec/features/merge_requests/form_spec.rb

+require 'rails_helper'
+
+describe 'New/edit merge request', feature: true, js: true do
+  let!(:project)   { create(:project, visibility_level: Gitlab::VisibilityLevel::PUBLIC) }
+  let(:fork_project) { create(:project, forked_from_project: project) }
+  let!(:user)      { create(:user)}
+  let!(:milestone) { create(:milestone, project: project) }
+  let!(:label)     { create(:label, project: project) }
+  let!(:label2)    { create(:label, project: project) }
+
+  before do
+    project.team << [user, :master]
+  end
+
+  context 'owned projects' do
+    before do
+      login_as(user)
+    end
+
+    context 'new merge request' do
+      before do
+        visit new_namespace_project_merge_request_path(
+          project.namespace,
+          project,
+          merge_request: {
+            source_project_id: project.id,
+            target_project_id: project.id,
+            source_branch: 'fix',
+            target_branch: 'master'
+          })
+      end
+
+      it 'creates new merge request' do
+        click_button 'Assignee'
+        page.within '.dropdown-menu-user' do
+          click_link user.name
+        end
+        expect(find('input[name="merge_request[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+        page.within '.js-assignee-search' do
+          expect(page).to have_content user.name
+        end
+
+        click_button 'Milestone'
+        page.within '.issue-milestone' do
+          click_link milestone.title
+        end
+        expect(find('input[name="merge_request[milestone_id]"]', visible: false).value).to match(milestone.id.to_s)
+        page.within '.js-milestone-select' do
+          expect(page).to have_content milestone.title
+        end
+
+        click_button 'Labels'
+        page.within '.dropdown-menu-labels' do
+          click_link label.title
+          click_link label2.title
+        end
+        page.within '.js-label-select' do
+          expect(page).to have_content label.title
+        end
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
+
+        click_button 'Submit merge request'
+
+        page.within '.issuable-sidebar' do
+          page.within '.assignee' do
+            expect(page).to have_content user.name
+          end
+
+          page.within '.milestone' do
+            expect(page).to have_content milestone.title
+          end
+
+          page.within '.labels' do
+            expect(page).to have_content label.title
+            expect(page).to have_content label2.title
+          end
+        end
+      end
+    end
+
+    context 'edit merge request' do
+      before do
+        merge_request = create(:merge_request,
+                                 source_project: project,
+                                 target_project: project,
+                                 source_branch: 'fix',
+                                 target_branch: 'master'
+                              )
+
+        visit edit_namespace_project_merge_request_path(project.namespace, project, merge_request)
+      end
+
+      it 'updates merge request' do
+        click_button 'Assignee'
+        page.within '.dropdown-menu-user' do
+          click_link user.name
+        end
+        expect(find('input[name="merge_request[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+        page.within '.js-assignee-search' do
+          expect(page).to have_content user.name
+        end
+
+        click_button 'Milestone'
+        page.within '.issue-milestone' do
+          click_link milestone.title
+        end
+        expect(find('input[name="merge_request[milestone_id]"]', visible: false).value).to match(milestone.id.to_s)
+        page.within '.js-milestone-select' do
+          expect(page).to have_content milestone.title
+        end
+
+        click_button 'Labels'
+        page.within '.dropdown-menu-labels' do
+          click_link label.title
+          click_link label2.title
+        end
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
+        page.within '.js-label-select' do
+          expect(page).to have_content label.title
+        end
+
+        click_button 'Save changes'
+
+        page.within '.issuable-sidebar' do
+          page.within '.assignee' do
+            expect(page).to have_content user.name
+          end
+
+          page.within '.milestone' do
+            expect(page).to have_content milestone.title
+          end
+
+          page.within '.labels' do
+            expect(page).to have_content label.title
+            expect(page).to have_content label2.title
+          end
+        end
+      end
+    end
+  end
+
+  context 'forked project' do
+    before do
+      fork_project.team << [user, :master]
+      login_as(user)
+    end
+
+    context 'new merge request' do
+      before do
+        visit new_namespace_project_merge_request_path(
+          fork_project.namespace,
+          fork_project,
+          merge_request: {
+            source_project_id: fork_project.id,
+            target_project_id: project.id,
+            source_branch: 'fix',
+            target_branch: 'master'
+          })
+      end
+
+      it 'creates new merge request' do
+        click_button 'Assignee'
+        page.within '.dropdown-menu-user' do
+          click_link user.name
+        end
+        expect(find('input[name="merge_request[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+        page.within '.js-assignee-search' do
+          expect(page).to have_content user.name
+        end
+
+        click_button 'Milestone'
+        page.within '.issue-milestone' do
+          click_link milestone.title
+        end
+        expect(find('input[name="merge_request[milestone_id]"]', visible: false).value).to match(milestone.id.to_s)
+        page.within '.js-milestone-select' do
+          expect(page).to have_content milestone.title
+        end
+
+        click_button 'Labels'
+        page.within '.dropdown-menu-labels' do
+          click_link label.title
+          click_link label2.title
+        end
+        page.within '.js-label-select' do
+          expect(page).to have_content label.title
+        end
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
+
+        click_button 'Submit merge request'
+
+        page.within '.issuable-sidebar' do
+          page.within '.assignee' do
+            expect(page).to have_content user.name
+          end
+
+          page.within '.milestone' do
+            expect(page).to have_content milestone.title
+          end
+
+          page.within '.labels' do
+            expect(page).to have_content label.title
+            expect(page).to have_content label2.title
+          end
+        end
+      end
+    end
+
+    context 'edit merge request' do
+      before do
+        merge_request = create(:merge_request,
+                                 source_project: fork_project,
+                                 target_project: project,
+                                 source_branch: 'fix',
+                                 target_branch: 'master'
+                              )
+
+        visit edit_namespace_project_merge_request_path(project.namespace, project, merge_request)
+      end
+
+      it 'should update merge request' do
+        click_button 'Assignee'
+        page.within '.dropdown-menu-user' do
+          click_link user.name
+        end
+        expect(find('input[name="merge_request[assignee_id]"]', visible: false).value).to match(user.id.to_s)
+        page.within '.js-assignee-search' do
+          expect(page).to have_content user.name
+        end
+
+        click_button 'Milestone'
+        page.within '.issue-milestone' do
+          click_link milestone.title
+        end
+        expect(find('input[name="merge_request[milestone_id]"]', visible: false).value).to match(milestone.id.to_s)
+        page.within '.js-milestone-select' do
+          expect(page).to have_content milestone.title
+        end
+
+        click_button 'Labels'
+        page.within '.dropdown-menu-labels' do
+          click_link label.title
+          click_link label2.title
+        end
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[1].value).to match(label.id.to_s)
+        expect(page.all('input[name="merge_request[label_ids][]"]', visible: false)[2].value).to match(label2.id.to_s)
+        page.within '.js-label-select' do
+          expect(page).to have_content label.title
+        end
+
+        click_button 'Save changes'
+
+        page.within '.issuable-sidebar' do
+          page.within '.assignee' do
+            expect(page).to have_content user.name
+          end
+
+          page.within '.milestone' do
+            expect(page).to have_content milestone.title
+          end
+
+          page.within '.labels' do
+            expect(page).to have_content label.title
+            expect(page).to have_content label2.title
+          end
+        end
+      end
+    end
+  end
+end

spec/views/projects/merge_requests/edit.html.haml_spec.rb

@@ -7,12 +7,15 @@ describe 'projects/merge_requests/edit.html.haml' do
   let(:project) { create(:project) }
   let(:fork_project) { create(:project, forked_from_project: project) }
   let(:unlink_project) { Projects::UnlinkForkService.new(fork_project, user) }
+  let(:milestone) { create(:milestone, project: project) }
 
   let(:closed_merge_request) do
     create(:closed_merge_request,
       source_project: fork_project,
       target_project: project,
-      author: user)
+      author: user,
+      assignee: user,
+      milestone: milestone)
   end
 
   before do