Commit a20779b6 authored by Fatih Acet's avatar Fatih Acet Committed by Rémy Coutable

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
Signed-off-by: default avatarRémy Coutable <remy@rymai.me>
parent 325741bb
...@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date. ...@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date.
v 8.12.4 (unreleased) v 8.12.4 (unreleased)
- Fix "Copy to clipboard" tooltip to say "Copied!" when clipboard button is clicked. !6294 (lukehowell) - Fix "Copy to clipboard" tooltip to say "Copied!" when clipboard button is clicked. !6294 (lukehowell)
- Fix padding in build sidebar. !6506 - Fix padding in build sidebar. !6506
- Changed compare dropdowns to dropdowns with isolated search input. !6550
v 8.12.3 v 8.12.3
- Update Gitlab Shell to support low IO priority for storage moves - Update Gitlab Shell to support low IO priority for storage moves
......
...@@ -23,8 +23,9 @@ ...@@ -23,8 +23,9 @@
selectable: true, selectable: true,
filterable: true, filterable: true,
filterByText: true, filterByText: true,
fieldName: $dropdown.attr('name'), toggleLabel: true,
filterInput: 'input[type="text"]', fieldName: $dropdown.data('field-name'),
filterInput: 'input[type="search"]',
renderRow: function(ref) { renderRow: function(ref) {
var link; var link;
if (ref.header != null) { if (ref.header != null) {
......
...@@ -743,6 +743,62 @@ pre.light-well { ...@@ -743,6 +743,62 @@ pre.light-well {
.dropdown-menu { .dropdown-menu {
width: 300px; 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 { .clearable-input {
...@@ -779,4 +835,4 @@ pre.light-well { ...@@ -779,4 +835,4 @@ pre.light-well {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
\ No newline at end of file
= form_tag namespace_project_compare_index_path(@project.namespace, @project), method: :post, class: 'form-inline js-requires-input' do = form_tag namespace_project_compare_index_path(@project.namespace, @project), method: :post, class: 'form-inline js-requires-input' do
.clearfix .clearfix
- if params[:to] && params[:from] - 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'} .compare-switch-container
.form-group.dropdown.compare-form-group.js-compare-from-dropdown = 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 .input-group.inline-input-group
%span.input-group-addon from %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" = render "ref_dropdown"
= "..." .compare-ellipsis ...
.form-group.dropdown.compare-form-group.js-compare-to-dropdown .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
.input-group.inline-input-group .input-group.inline-input-group
%span.input-group-addon to %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" = render "ref_dropdown"
&nbsp; &nbsp;
= button_tag "Compare", class: "btn btn-create commits-compare-btn" = button_tag "Compare", class: "btn btn-create commits-compare-btn"
......
.dropdown-menu.dropdown-menu-selectable .dropdown-menu.dropdown-menu-selectable
= dropdown_title "Select branch/tag" = dropdown_title "Select branch/tag"
= dropdown_filter "Filter by branch/tag"
= dropdown_content = dropdown_content
= dropdown_loading = dropdown_loading
...@@ -12,15 +12,16 @@ describe "Compare", js: true do ...@@ -12,15 +12,16 @@ describe "Compare", js: true do
describe "branches" do describe "branches" do
it "pre-populates fields" 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 end
it "compares branches" do it "compares branches" do
fill_in "from", with: "fea" select_using_dropdown "from", "feature"
find("#from").click expect(find(".js-compare-from-dropdown .dropdown-toggle-text")).to have_content("feature")
click_link "feature" select_using_dropdown "to", "binary-encoding"
expect(page.find_field("from").value).to eq("feature") expect(find(".js-compare-to-dropdown .dropdown-toggle-text")).to have_content("binary-encoding")
click_button "Compare" click_button "Compare"
expect(page).to have_content "Commits" expect(page).to have_content "Commits"
...@@ -29,14 +30,21 @@ describe "Compare", js: true do ...@@ -29,14 +30,21 @@ describe "Compare", js: true do
describe "tags" do describe "tags" do
it "compares tags" do it "compares tags" do
fill_in "from", with: "v1.0" select_using_dropdown "from", "v1.0.0"
find("#from").click expect(find(".js-compare-from-dropdown .dropdown-toggle-text")).to have_content("v1.0.0")
click_link "v1.0.0" select_using_dropdown "to", "v1.1.0"
expect(page.find_field("from").value).to eq("v1.0.0") expect(find(".js-compare-to-dropdown .dropdown-toggle-text")).to have_content("v1.1.0")
click_button "Compare" click_button "Compare"
expect(page).to have_content "Commits" expect(page).to have_content "Commits"
end end
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 end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment