Merge branch 'remove-labels-from-filter' into 'master'

Removable labels from filtered issuables label bar

When filtering by labels, a remove button appears next to each label. This then removes that label & refreshes the issuable filter form

![Screen_Shot_2016-05-17_at_12.07.47](/uploads/b21e86247aa1bbfd347bef1eb21f1562/Screen_Shot_2016-05-17_at_12.07.47.png)

Closes #15474

See merge request !4178

5 files changed, 90 insertions, 6 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 7c7334e9e40..b49bd4565a7 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -211,6 +211,7 @@ class GitLabDropdown
 
     @dropdown.on "shown.bs.dropdown", @opened
     @dropdown.on "hidden.bs.dropdown", @hidden
+    $(@el).on "update.label", @updateLabel
     @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
     @dropdown.on 'keyup', (e) =>
       if e.which is 27 # Escape key
@@ -453,7 +454,7 @@ class GitLabDropdown
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel
+        @updateLabel()
       else
         selectedObject
     else if el.hasClass(INDETERMINATE_CLASS)
@@ -480,7 +481,7 @@ class GitLabDropdown
 
       # Toggle the dropdown label
       if @options.toggleLabel
-        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject, el)
+        @updateLabel(selectedObject, el)
       if value?
         if !field.length and fieldName
           @addInput(fieldName, value)
@@ -579,6 +580,9 @@ class GitLabDropdown
       # Scroll the dropdown content up
       $dropdownContent.scrollTop(listItemTop - dropdownContentTop)
 
+  updateLabel: (selected = null, el = null) =>
+    $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el)
+
 $.fn.glDropdown = (opts) ->
   return @.each ->
     if (!$.data @, 'glDropdown')
diff --git a/app/assets/javascripts/issuable.js.coffee b/app/assets/javascripts/issuable.js.coffee
index 6504e481102..c2447120033 100644
--- a/app/assets/javascripts/issuable.js.coffee
+++ b/app/assets/javascripts/issuable.js.coffee
@@ -6,12 +6,18 @@ issuable_created = false
       Issuable.initTemplates()
       Issuable.initSearch()
       Issuable.initChecks()
+      Issuable.initLabelFilterRemove()
 
   initTemplates: ->
     Issuable.labelRow = _.template(
       '<% _.each(labels, function(label){ %>
-        <span class="label-row">
-          <a href="#"><span class="label color-label has-tooltip" style="background-color: <%= label.color %>; color: <%= label.text_color %>" title="<%= _.escape(label.description) %>" data-container="body"><%= _.escape(label.title) %></span></a>
+        <span class="label-row btn-group" role="group" aria-label="<%= _.escape(label.title) %>" style="color: <%= label.text_color %>;">
+          <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%= label.color %>;" title="<%= _.escape(label.description) %>" data-container="body">
+            <%= _.escape(label.title) %>
+          </a>
+          <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%= label.color %>;" data-label="<%= _.escape(label.title) %>">
+            <i class="fa fa-times"></i>
+          </button>
         </span>
       <% }); %>'
     )
@@ -35,6 +41,21 @@ issuable_created = false
           Issuable.filterResults $form
         , 500)
 
+  initLabelFilterRemove: ->
+    $(document)
+      .off 'click', '.js-label-filter-remove'
+      .on 'click', '.js-label-filter-remove', (e) ->
+        $button = $(@)
+
+        # Remove the label input box
+        $('input[name="label_name[]"]')
+          .filter -> @value is $button.data('label')
+          .remove()
+
+        # Submit the form to get new data
+        Issuable.filterResults $('.filter-form')
+        $('.js-label-select').trigger('update.label')
+
   toggleLabelFilters: ->
     $filteredLabels = $('.filtered-labels')
     if $filteredLabels.find('.label-row').length > 0
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 2cd9d74b2de..26128fcea85 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -169,3 +169,20 @@
     }
   }
 }
+
+.filtered-labels {
+  .label-row {
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+
+  .label-remove {
+    border-left: 1px solid rgba(0, 0, 0, .1);
+    z-index: 3;
+  }
+
+  .btn {
+    color: inherit;
+  }
+}
diff --git a/app/views/shared/_labels_row.html.haml b/app/views/shared/_labels_row.html.haml
index dc89e36419c..87028ececd4 100644
--- a/app/views/shared/_labels_row.html.haml
+++ b/app/views/shared/_labels_row.html.haml
@@ -1,3 +1,10 @@
 - labels.each do |label|
-  %span.label-row
-    = link_to_label(label, tooltip: false)
+  %span.label-row.btn-group{ role: "group", aria: { label: escape_once(label.name) }, style: "color: #{text_color_for_bg(label.color)}" }
+    = link_to namespace_project_label_path(@project.namespace, @project, label),
+      class: "btn btn-transparent has-tooltip",
+      style: "background-color: #{label.color};",
+      title: escape_once(label.description),
+      data: { container: "body" } do
+      = escape_once label.name
+    %button.btn.btn-transparent.label-remove.js-label-filter-remove{ type: "button", style: "background-color: #{label.color};", data: { label: label.title } }
+      = icon("times")
diff --git a/spec/features/issues/filter_by_labels_spec.rb b/spec/features/issues/filter_by_labels_spec.rb
index 7f654684143..0ec8b6b180a 100644
--- a/spec/features/issues/filter_by_labels_spec.rb
+++ b/spec/features/issues/filter_by_labels_spec.rb
@@ -54,6 +54,11 @@ feature 'Issue filtering by Labels', feature: true do
       expect(find('.filtered-labels')).not_to have_content "feature"
       expect(find('.filtered-labels')).not_to have_content "enhancement"
     end
+
+    it 'should remove label "bug"' do
+      first('.js-label-filter-remove').click
+      expect(find('.filtered-labels')).to have_no_content "bug"
+    end
   end
 
   context 'filter by label feature', js: true do
@@ -135,6 +140,11 @@ feature 'Issue filtering by Labels', feature: true do
     it 'should not show label "bug" in filtered-labels' do
       expect(find('.filtered-labels')).not_to have_content "bug"
     end
+
+    it 'should remove label "enhancement"' do
+      first('.js-label-filter-remove').click
+      expect(find('.filtered-labels')).to have_no_content "enhancement"
+    end
   end
 
   context 'filter by label enhancement and bug in issues list', js: true do
@@ -164,4 +174,29 @@ feature 'Issue filtering by Labels', feature: true do
       expect(find('.filtered-labels')).not_to have_content "feature"
     end
   end
+
+  context 'remove filtered labels', js: true do
+    before do
+      page.within '.labels-filter' do
+        click_button 'Label'
+        click_link 'bug'
+        find('.dropdown-menu-close').click
+      end
+
+      page.within '.filtered-labels' do
+        expect(page).to have_content 'bug'
+      end
+    end
+
+    it 'should allow user to remove filtered labels' do
+      page.within '.filtered-labels' do
+        first('.js-label-filter-remove').click
+        expect(page).not_to have_content 'bug'
+      end
+
+      page.within '.labels-filter' do
+        expect(page).not_to have_content 'bug'
+      end
+    end
+  end
 end