Use new dropdowns for MR compare

4 files changed, 80 insertions, 30 deletions

diff --git a/app/assets/javascripts/compare.js.coffee b/app/assets/javascripts/compare.js.coffee
index c13744ebc62..e5819fa91c3 100644
--- a/app/assets/javascripts/compare.js.coffee
+++ b/app/assets/javascripts/compare.js.coffee
@@ -2,26 +2,27 @@ class @Compare
   constructor: (@opts) ->
     @source_loading = $ ".js-source-loading"
     @target_loading = $ ".js-target-loading"
-    @source_branch = $ "#merge_request_source_branch"
-    @target_branch = $ "#merge_request_target_branch"
-    @target_project = $ "#merge_request_target_project_id"
 
-    @initialState()
-    @cleanBinding()
-    @addBinding()
+    $('.js-compare-dropdown').each (i, dropdown) =>
+      $dropdown = $(dropdown)
 
-  cleanBinding: ->
-    @source_branch.off "change"
-    @target_branch.off "change"
-    @target_project.off "change"
+      $dropdown.glDropdown(
+        selectable: true
+        fieldName: $dropdown.data 'field-name'
+        id: (obj, $el) ->
+          $el.data 'id'
+        toggleLabel: (obj, $el) ->
+          $el.text().trim()
+        clicked: (e, el) =>
+          if $dropdown.is '.js-target-branch'
+            @getTargetHtml()
+          else if $dropdown.is '.js-source-branch'
+            @getSourceHtml()
+          else if $dropdown.is '.js-target-project'
+            @getTargetProject()
+      )
 
-  addBinding: ->
-    @source_branch.on "change", =>
-      @getSourceHtml()
-    @target_branch.on "change", =>
-      @getTargetHtml()
-    @target_project.on "change", =>
-      @getTargetProject()
+    @initialState()
 
   initialState: ->
     @getSourceHtml()
@@ -29,13 +30,13 @@ class @Compare
 
   getTargetProject: ->
     $.get @opts.targetProjectUrl,
-      target_project_id:  @target_project.val()
+      target_project_id:  $("input[name='merge_request[source_project]']").val()
 
   getSourceHtml: ->
     $.ajax(
       url: @opts.sourceBranchUrl
       data:
-        ref: @source_branch.val()
+        ref: $("input[name='merge_request[source_branch]']").val()
       beforeSend: =>
         @source_loading.show()
         $(".mr_source_commit").html ""
@@ -49,8 +50,8 @@ class @Compare
     $.ajax(
       url: @opts.targetBranchUrl
       data:
-        target_project_id: @target_project.val()
-        ref: @target_branch.val()
+        target_project_id: $("input[name='merge_request[target_project_id]']").val()
+        ref: $("input[name='merge_request[target_branch]']").val()
       beforeSend: =>
         @target_loading.show()
         $(".mr_target_commit").html ""
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 2a4811b8763..38b38fc8426 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -373,7 +373,7 @@ class GitLabDropdown
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
+        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject, el)
       if value?
         if !field.length
           # Create hidden input for form
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7bc1f58471f..5929f607fc7 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -242,4 +242,14 @@
   width: 50%;
   padding-left: 5px;
   padding-right: 5px;
+
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    left: 5px;
+    right: 5px;
+    width: auto;
+  }
 }
diff --git a/app/views/projects/merge_requests/_new_compare.html.haml b/app/views/projects/merge_requests/_new_compare.html.haml
index 4fc74dfcf45..f110c5f42c8 100644
--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/_new_compare.html.haml
@@ -9,10 +9,29 @@
         .panel-heading
           Source branch
         .panel-body.clearfix
-          .merge-request-select
-            = f.select(:source_project_id, [[@merge_request.source_project_path,@merge_request.source_project.id]] , {}, { class: 'source_project select2', disabled: @merge_request.persisted?, required: true })
-          .merge-request-select
-            = f.select(:source_branch, @merge_request.source_branches, { include_blank: true }, { class: 'source_branch select2', required: true, data: { placeholder: "Select source branch" } })
+          .merge-request-select.dropdown
+            = f.hidden_field :source_project_id
+            = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", field_name: "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-source-project" }
+            .dropdown-menu
+              = dropdown_title("Select source project")
+              = dropdown_filter("Search projects")
+              = dropdown_content do
+                %ul
+                  %li
+                    %a{ href: "#", data: { id: @merge_request.source_project.id } }
+                      = @merge_request.source_project_path
+          .merge-request-select.dropdown
+            = f.hidden_field :source_branch
+            = dropdown_toggle "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
+            .dropdown-menu
+              = dropdown_title("Select source branch")
+              = dropdown_filter("Search branches")
+              = dropdown_content do
+                %ul
+                  - @merge_request.source_branches.each do |branch|
+                    %li
+                      %a{ href: "#", data: { id: branch } }
+                        = branch
         .panel-footer
           = icon('spinner spin', class: "js-source-loading")
           %ul.list-unstyled.mr_source_commit
@@ -23,10 +42,30 @@
           Target branch
         .panel-body.clearfix
           - projects =  @project.forked_from_project.nil? ? [@project] : [@project, @project.forked_from_project]
-          .merge-request-select
-            = f.select(:target_project_id, options_from_collection_for_select(projects, 'id', 'path_with_namespace', f.object.target_project_id), {}, { class: 'target_project select2', disabled: @merge_request.persisted?, required: true })
-          .merge-request-select
-            = f.select(:target_branch, @merge_request.target_branches, { include_blank: true }, { class: 'target_branch select2', required: true, data: { placeholder: "Select target branch" } })
+          .merge-request-select.dropdown
+            = f.hidden_field :target_project_id
+            = dropdown_toggle projects.first.path_with_namespace, { toggle: "dropdown", field_name: "#{f.object_name}[target_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-target-project" }
+            .dropdown-menu
+              = dropdown_title("Select target project")
+              = dropdown_filter("Search projects")
+              = dropdown_content do
+                %ul
+                  - projects.each do |project|
+                    %li
+                      %a{ href: "#" }
+                        = project.path_with_namespace
+          .merge-request-select.dropdown
+            = f.hidden_field :target_branch
+            = dropdown_toggle "Select target branch", { toggle: "dropdown", field_name: "#{f.object_name}[target_branch]" }, { toggle_class: "js-compare-dropdown js-target-branch" }
+            .dropdown-menu.dropdown-menu-selectable
+              = dropdown_title("Select target branch")
+              = dropdown_filter("Search branches")
+              = dropdown_content do
+                %ul
+                  - @merge_request.target_branches.each do |branch|
+                    %li
+                      %a{ href: "#", class: "#{("is-active" if :target_branch == branch)}", data: { id: branch } }
+                        = branch
         .panel-footer
           = icon('spinner spin', class: "js-target-loading")
           %ul.list-unstyled.mr_target_commit