Turn filter chips into links

app/helpers/filters_helper.rb

@@ -1,7 +1,6 @@
 module FiltersHelper
-  def filter_chip_tag(text, name:, value:)
-    tag.button class: "btn txt-small btn--remove", data: { action: "filter-form#removeFilter form#submit", filter_form_target: "chip" } do
-      concat hidden_field_tag(name, value, id: nil)
+  def filter_chip_tag(text, name:, value:, filter:)
+    link_to bubbles_path(**filter.params_without(name, value)), class: "btn txt-small btn--remove" do
       concat tag.span(text)
       concat image_tag("close.svg", aria: { hidden: true }, size: 24)
     end

app/javascript/controllers/filter_form_controller.js

@@ -1,17 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "chip" ]
-
-  connect() {
-    this.chipTargets.forEach(button => this.#showChip(button))
-  }
-
-  removeFilter(event) {
-    event.preventDefault()
-    this.#hideChip(event.target.closest("button"))
-  }
-
   clearCategory({ params: { name } }) {
     name.split(",").forEach(name => {
       this.element.querySelectorAll(`input[name="${name}"]`).forEach(input => {
@@ -19,14 +8,4 @@ export default class extends Controller {
       })
     })
   }
-
-  #showChip(button) {
-    button.querySelector("input").disabled = false
-    button.hidden = false
-  }
-
-  #hideChip(button) {
-    button.querySelector("input").disabled = true
-    button.hidden = true
-  }
 }

app/models/filter/params.rb

@@ -24,4 +24,11 @@ module Filter::Params
       params[:filter_id] = id if persisted?
     end
   end
+
+  def params_without(name, value)
+    to_params.tap do |params|
+      params[name].delete(value) if params[name].is_a?(Array)
+      params.delete(name) if params[name] == value
+    end
+  end
 end

app/views/bubbles/_filters.html.erb

@@ -10,33 +10,33 @@
       <span class="for-screen-reader">Filter</span>
     </button>
 
-    <%= form_with url: bubbles_path, method: :get, class: "flex-inline center align-center gap-half", data: { controller: "form" } do %>
-      <%= filter_chip_tag filter.indexed_by.humanize, name: "indexed_by", value: filter.indexed_by unless filter.default_indexed_by? %>
+    <div class="flex-inline center align-center gap-half">
+      <%= filter_chip_tag filter.indexed_by.humanize, name: :indexed_by, value: filter.indexed_by, filter: filter unless filter.default_indexed_by? %>
 
       <% filter.tags.each do |tag| %>
-        <%= filter_chip_tag tag.hashtag, name: "tag_ids[]", value: tag.id %>
+        <%= filter_chip_tag tag.hashtag, name: :tag_ids, value: tag.id, filter: filter %>
       <% end %>
 
       <% filter.assignees.each do |assignee| %>
-        <%= filter_chip_tag "for #{assignee.name}", name: "assignee_ids[]", value: assignee.id %>
+        <%= filter_chip_tag "for #{assignee.name}", name: :assignee_ids, value: assignee.id, filter: filter %>
       <% end %>
 
       <% if filter.assignments.present? %>
-        <%= filter_chip_tag filter.assignments.humanize, name: "assignments", value: filter.assignments %>
+        <%= filter_chip_tag filter.assignments.humanize, name: :assignments, value: filter.assignments, filter: filter %>
       <% end %>
 
       <% filter.assigners.each do |assigner| %>
-        <%= filter_chip_tag "by #{assigner.name}", name: "assigner_ids[]", value: assigner.id %>
+        <%= filter_chip_tag "by #{assigner.name}", name: :assigner_ids, value: assigner.id, filter: filter %>
       <% end %>
 
       <% filter.buckets.each do |bucket| %>
-        <%= filter_chip_tag "in #{bucket.name}", name: "bucket_ids[]", value: bucket.id %>
+        <%= filter_chip_tag "in #{bucket.name}", name: :bucket_ids, value: bucket.id, filter: filter %>
       <% end %>
 
       <% filter.terms.each do |term| %>
-        <%= filter_chip_tag %Q("#{term}"), name: "terms[]", value: term %>
+        <%= filter_chip_tag %Q("#{term}"), name: :terms, value: term, filter: filter %>
       <% end %>
-    <% end %>
+    </div>
   </div>
 
   <dialog class="filter__popup dialog panel fill-white shadow" data-dialog-target="dialog" data-dialog-modal-value="true">

test/models/filter_test.rb

@@ -99,4 +99,20 @@ class FilterTest < ActiveSupport::TestCase
   test "plain summary" do
     assert_equal "Most discussed, tagged #Mobile, and assigned to JZ in all projects", filters(:jz_assignments).plain_summary
   end
+
+  test "params without a name-value pair" do
+    filter = users(:david).filters.new indexed_by: "most_discussed", assignee_ids: [ users(:jz).id, users(:kevin).id ]
+
+    expected = { indexed_by: "most_discussed", assignee_ids: [ users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:assignee_ids, users(:jz).id).to_h
+
+    expected = { assignee_ids: [ users(:jz).id, users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:indexed_by, "most_discussed").to_h
+
+    expected = { indexed_by: "most_discussed", assignee_ids: [ users(:jz).id, users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:indexed_by, "most_active").to_h
+
+    expected = { indexed_by: "most_discussed", assignee_ids: [ users(:jz).id, users(:kevin).id ] }
+    assert_equal expected.stringify_keys, filter.params_without(:assignee_ids, users(:david).id).to_h
+  end
 end