Used !4970 to swap out issuable dropdowns for newer `dropdown_tag`'s, including updated specs21516-old-interface-style-usage-in-issue-creation-screen

15 files changed, 72 insertions, 67 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index ba64d2bcf0b..247dd4b4b7e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -59,6 +59,8 @@
           new GLForm($('.issue-form'));
           new IssuableForm($('.issue-form'));
           new IssuableTemplateSelectors();
+          new LabelsSelect();
+          new MilestoneSelect();
           break;
         case 'projects:merge_requests:new':
         case 'projects:merge_requests:edit':
@@ -67,6 +69,8 @@
           new GLForm($('.merge-request-form'));
           new IssuableForm($('.merge-request-form'));
           new IssuableTemplateSelectors();
+          new LabelsSelect();
+          new MilestoneSelect();
           break;
         case 'projects:tags:new':
           new ZenMode();
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 565dbeacdb3..e068809d2b9 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -124,20 +124,22 @@
                 };
               }).value();
               if ($dropdown.hasClass('js-extra-options')) {
-                if (showNo) {
-                  data.unshift({
-                    id: 0,
-                    title: 'No Label'
-                  });
-                }
+                var extraData = [];
                 if (showAny) {
-                  data.unshift({
+                  extraData.push({
                     isAny: true,
                     title: 'Any Label'
                   });
                 }
-                if (data.length > 2) {
-                  data.splice(2, 0, 'divider');
+                if (showNo) {
+                 extraData.push({
+                   id: 0,
+                   title: 'No Label'
+                 });
+                }
+                if (extraData.length) {
+                  extraData.push('divider');
+                  data = extraData.concat(data);
                 }
               }
               return callback(data);
@@ -226,6 +228,13 @@
           },
           fieldName: $dropdown.data('field-name'),
           id: function(label) {
+            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
+              if (label.id === 0) {
+                return;
+              } else {
+                return label.id;
+              }
+            }
             if ($dropdown.hasClass("js-filter-submit") && (label.isAny == null)) {
               return label.title;
             } else {
@@ -239,9 +248,7 @@
             isMRIndex = page === 'projects:merge_requests:index';
             $selectbox.hide();
             $value.removeAttr('style');
-            if (page === 'projects:boards:show') {
-              return;
-            }
+            if (page === 'projects:boards:show' || $dropdown.hasClass('js-issuable-form-dropdown')) return;
             if ($dropdown.hasClass('js-multiselect')) {
               if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
                 selectedLabels = $dropdown.closest('form').find("input:hidden[name='" + ($dropdown.data('fieldName')) + "']");
@@ -264,9 +271,7 @@
           clicked: function(label, $el, e) {
             var isIssueIndex, isMRIndex, page;
             _this.enableBulkLabelDropdown();
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
-              return;
-            }
+            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';
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index e897ebdf630..4184acf8b66 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -58,7 +58,7 @@
                   title: 'Upcoming'
                 });
               }
-              if (extraOptions.length > 2) {
+              if (extraOptions.length > 0) {
                 extraOptions.push('divider');
               }
               return callback(extraOptions.concat(data));
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index bad82868ab0..ec15999b98d 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -146,7 +146,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') {
@@ -164,6 +166,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/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7fdd79fa8b9..ecfed2c32f1 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -353,6 +353,10 @@
 .issuable-form-select-holder {
   display: inline-block;
   width: 250px;
+
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
 }
 
 .table-holder {
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index b9baeb1d6c4..1cec9fa8aef 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -9,7 +9,7 @@ module IssuablesHelper
 
   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.is_a?(Array) && current_labels.any?
       if current_labels.count > 1
         "#{current_labels[0]} +#{current_labels.count - 1} more"
       else
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 4f8ea7e7cef..caadeff0579 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -21,10 +21,10 @@
             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" } })
 
         .filter-item.inline.milestone-filter
-          = render "shared/issuable/milestone_dropdown"
+          = render "shared/issuable/milestone_dropdown", selected: params[:milestone_title], 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: params[:label_name], data_options: { field_name: "label_name[]" }
 
         .pull-right
           - if controller.controller_name == 'boards' && can?(current_user, :admin_list, @project)
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 22594b46443..417e2d0ba65 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -82,38 +82,24 @@
         = 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'
+            - project = @target_project || @project
+            - if issuable.assignee_id
+              = hidden_field_tag("#{issuable.class.model_name.param_key}[assignee_id]", issuable.assignee_id)
+            = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "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.username if current_user), null_user: true, current_user: true, project_id: (project.id if project), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee" } })
       .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_id, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false
       .form-group
         - has_labels = issuable.project.labels.any?
+        - selected_labels = issuable.label_ids.any? ? issuable.label_ids : nil
+        - label_dropdown_toggle = issuable.labels.map { |label| label.title }
         = f.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
         .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: selected_labels, selected_toggle: label_dropdown_toggle, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: "false" }
     - if has_due_date
       .col-lg-6
         .form-group
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index d34d28f6736..bcbe133ce62 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -4,19 +4,21 @@
 - show_footer = local_assigns.fetch(:show_footer, 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", selected: selected, project_id: @project.try(:id), labels: labels_filter_path, default_label: "Label"}
 - 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.present?
+  - if selected.respond_to?('any?')
+    - selected.each do |label|
+      = hidden_field_tag data_options[:field_name], label, 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"))
+      = h(multi_label_name(selected_toggle || selected, "Label"))
     = 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 }
diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml
index 2fcf40ece99..9188ef72d52 100644
--- a/app/views/shared/issuable/_milestone_dropdown.html.haml
+++ b/app/views/shared/issuable/_milestone_dropdown.html.haml
@@ -1,7 +1,7 @@
-- 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 selected.present?
+  = hidden_field_tag(name, selected)
+= dropdown_tag(milestone_dropdown_label(selected), 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: show_any, show_upcoming: show_upcoming, field_name: name, selected: selected, 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
diff --git a/features/project/issues/issues.feature b/features/project/issues/issues.feature
index 358e622b736..80670063ea0 100644
--- a/features/project/issues/issues.feature
+++ b/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"
diff --git a/features/steps/project/forked_merge_requests.rb b/features/steps/project/forked_merge_requests.rb
index dacab6c7977..7e270fecb7e 100644
--- a/features/steps/project/forked_merge_requests.rb
+++ b/features/steps/project/forked_merge_requests.rb
@@ -138,19 +138,17 @@ 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
+    expect(page).to have_content 'Unassigned'
+    expect(page).to have_content current_user.name
+    expect(page).to have_content @project.users.first.name
   end
 
   # Verify a link is generated against the correct project
diff --git a/features/steps/project/issues/issues.rb b/features/steps/project/issues/issues.rb
index e21f76d00d9..99bd2ac3bc0 100644
--- a/features/steps/project/issues/issues.rb
+++ b/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
 
diff --git a/spec/features/issues/move_spec.rb b/spec/features/issues/move_spec.rb
index 7773c486b4e..055210399a7 100644
--- a/spec/features/issues/move_spec.rb
+++ b/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)
diff --git a/spec/features/issues_spec.rb b/spec/features/issues_spec.rb
index d744d0eb6af..36ef28ae992 100644
--- a/spec/features/issues_spec.rb
+++ b/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'