Merge branch '22221-tags-are-not-available-from-repository-compare-view' into 'master'

Changed compare dropdowns to dropdowns with search input

## What does this MR do?

This changes the compare dropdowns from text inputs, that when clicked, open a dropdown of branches/tags to dropdowns that have a dropdown toggle and an isolated search input.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?

This was needed to fix the poor UX highlighted in #22221, where opening the dropdown showed an initially filtered set of results because the dropdown toggle was the dropdown filter itself. The compare page is always loaded with `master` as each branch/tag selection, so when opening the dropdown, it would only show results matching `master`.

## Screenshots (if relevant)

![2016-09-27_18.28.10](/uploads/0ea1d91cb592c6e140ed62c336e77227/2016-09-27_18.28.10.gif)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #22221

See merge request !6550

5 files changed, 89 insertions, 18 deletions

diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
index 4e3a28cd163..294d2c9052c 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -23,8 +23,9 @@
           selectable: true,
           filterable: true,
           filterByText: true,
-          fieldName: $dropdown.attr('name'),
-          filterInput: 'input[type="text"]',
+          toggleLabel: true,
+          fieldName: $dropdown.data('field-name'),
+          filterInput: 'input[type="search"]',
           renderRow: function(ref) {
             var link;
             if (ref.header != null) {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 8c8c403244e..78bc4b79e86 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -743,6 +743,62 @@ pre.light-well {
   .dropdown-menu {
     width: 300px;
   }
+
+  &.from .compare-dropdown-toggle {
+    width: 237px;
+  }
+
+  &.to .compare-dropdown-toggle {
+    width: 254px;
+  }
+
+  .dropdown-toggle-text {
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+}
+
+.compare-ellipsis {
+  display: inline;
+}
+
+@media (max-width: $screen-xs-max) {
+  .compare-form-group {
+    .input-group {
+      width: 100%;
+
+      & > .compare-dropdown-toggle {
+        width: 100%;
+      }
+    }
+
+    .dropdown-menu {
+      width: 100%;
+    }
+  }
+
+  .compare-switch-container {
+    text-align: center;
+    padding: 0 0 $gl-padding;
+
+    .commits-compare-switch {
+      float: none;
+    }
+  }
+
+  .compare-ellipsis {
+    display: block;
+    text-align: center;
+    padding: 0 0 $gl-padding;
+  }
+
+  .commits-compare-btn {
+    width: 100%;
+  }
 }
 
 .clearable-input {
@@ -779,4 +835,4 @@ pre.light-well {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index d79336f5a60..76b68c544aa 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -1,17 +1,22 @@
 = form_tag namespace_project_compare_index_path(@project.namespace, @project), method: :post, class: 'form-inline js-requires-input' do
   .clearfix
     - if params[:to] && params[:from]
-      = link_to icon('exchange'), {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip', title: 'Switch base of comparison'}
-    .form-group.dropdown.compare-form-group.js-compare-from-dropdown
+      .compare-switch-container
+        = link_to icon('exchange'), {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip', title: 'Switch base of comparison'}
+    .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
       .input-group.inline-input-group
         %span.input-group-addon from
-        = text_field_tag :from, params[:from], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from].presence }
+        = hidden_field_tag :from, params[:from]
+        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+          .dropdown-toggle-text= params[:from] || 'Select branch/tag'
       = render "ref_dropdown"
-    = "..."
-    .form-group.dropdown.compare-form-group.js-compare-to-dropdown
+    .compare-ellipsis ...
+    .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
-        = text_field_tag :to, params[:to], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to].presence }
+        = hidden_field_tag :to, params[:to]
+        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+          .dropdown-toggle-text= params[:to] || 'Select branch/tag'
       = render "ref_dropdown"
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/projects/compare/_ref_dropdown.html.haml
index c604c6d0135..27d928c87a0 100644
--- a/app/views/projects/compare/_ref_dropdown.html.haml
+++ b/app/views/projects/compare/_ref_dropdown.html.haml
@@ -1,4 +1,5 @@
 .dropdown-menu.dropdown-menu-selectable
   = dropdown_title "Select branch/tag"
+  = dropdown_filter "Filter by branch/tag"
   = dropdown_content
   = dropdown_loading
diff --git a/spec/features/compare_spec.rb b/spec/features/compare_spec.rb
index ca7f73e24cc..33dfd0d5b62 100644
--- a/spec/features/compare_spec.rb
+++ b/spec/features/compare_spec.rb
@@ -12,15 +12,16 @@ describe "Compare", js: true do
 
   describe "branches" do
     it "pre-populates fields" do
-      expect(page.find_field("from").value).to eq("master")
+      expect(find(".js-compare-from-dropdown .dropdown-toggle-text")).to have_content("master")
+      expect(find(".js-compare-to-dropdown .dropdown-toggle-text")).to have_content("master")
     end
 
     it "compares branches" do
-      fill_in "from", with: "fea"
-      find("#from").click
+      select_using_dropdown "from", "feature"
+      expect(find(".js-compare-from-dropdown .dropdown-toggle-text")).to have_content("feature")
 
-      click_link "feature"
-      expect(page.find_field("from").value).to eq("feature")
+      select_using_dropdown "to", "binary-encoding"
+      expect(find(".js-compare-to-dropdown .dropdown-toggle-text")).to have_content("binary-encoding")
 
       click_button "Compare"
       expect(page).to have_content "Commits"
@@ -29,14 +30,21 @@ describe "Compare", js: true do
 
   describe "tags" do
     it "compares tags" do
-      fill_in "from", with: "v1.0"
-      find("#from").click
+      select_using_dropdown "from", "v1.0.0"
+      expect(find(".js-compare-from-dropdown .dropdown-toggle-text")).to have_content("v1.0.0")
 
-      click_link "v1.0.0"
-      expect(page.find_field("from").value).to eq("v1.0.0")
+      select_using_dropdown "to", "v1.1.0"
+      expect(find(".js-compare-to-dropdown .dropdown-toggle-text")).to have_content("v1.1.0")
 
       click_button "Compare"
       expect(page).to have_content "Commits"
     end
   end
+
+  def select_using_dropdown(dropdown_type, selection)
+    dropdown = find(".js-compare-#{dropdown_type}-dropdown")
+    dropdown.find(".compare-dropdown-toggle").click
+    dropdown.fill_in("Filter by branch/tag", with: selection)
+    click_link selection
+  end
 end