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

Closes #15474

3 files changed, 36 insertions, 2 deletions

diff --git a/app/assets/javascripts/issuable.js.coffee b/app/assets/javascripts/issuable.js.coffee
index 6504e481102..9801e61dabb 100644
--- a/app/assets/javascripts/issuable.js.coffee
+++ b/app/assets/javascripts/issuable.js.coffee
@@ -6,12 +6,20 @@ 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>
+          <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>
+          <button type="button" class="btn btn-sm btn-transparent append-right-5 js-label-filter-remove" data-label="<%= _.escape(label.title) %>">
+            <i class="fa fa-times"></i>
+          </button>
         </span>
       <% }); %>'
     )
@@ -35,6 +43,20 @@ 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')
+
   toggleLabelFilters: ->
     $filteredLabels = $('.filtered-labels')
     if $filteredLabels.find('.label-row').length > 0
diff --git a/app/views/shared/_labels_row.html.haml b/app/views/shared/_labels_row.html.haml
index dc89e36419c..2bea183334e 100644
--- a/app/views/shared/_labels_row.html.haml
+++ b/app/views/shared/_labels_row.html.haml
@@ -1,3 +1,5 @@
 - labels.each do |label|
   %span.label-row
-    = link_to_label(label, tooltip: false)
+    = link_to_label(label, tooltip: true)
+    %button.btn.btn-sm.btn-transparent.append-right-5.js-label-filter-remove{ type: "button", 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..2015b0434fb 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