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

1 files changed, 23 insertions, 1 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