Add clear button and turbo navigate instead of full page reload

app/components/op_primer/quick_filter/select_panel_component.html.erb

@@ -55,10 +55,17 @@ See COPYRIGHT and LICENSE files for more details.
            ) %>
       <% end %>
     <% end %>
-    <% if @select_variant == :multiple %>
+    <% if @select_variant == :multiple || current_values.any? %>
       <% panel.with_footer(show_divider: true) do %>
-        <%= render(Primer::Beta::Button.new(scheme: :primary, data: { action: "click->quick-filter--select-panel#apply" })) do %>
-          <%= t(:button_apply) %>
+        <% if current_values.any? %>
+          <%= render(Primer::Beta::Button.new(scheme: :secondary, data: { action: "click->quick-filter--select-panel#clear" })) do %>
+            <%= t(:button_clear) %>
+          <% end %>
+        <% end %>
+        <% if @select_variant == :multiple %>
+          <%= render(Primer::Beta::Button.new(scheme: :primary, data: { action: "click->quick-filter--select-panel#apply" })) do %>
+            <%= t(:button_apply) %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>

app/components/op_primer/quick_filter/select_panel_component.rb

@@ -105,13 +105,15 @@ module OpPrimer
 
       def panel_src
         return unless async?
-        # Pass currently selected ids so the right items can be marked in the response
-        return @src if current_values.empty?
 
         uri = URI.parse(@src)
-        uri.query = Rack::Utils.parse_nested_query(uri.query.to_s)
-                               .merge("selected" => current_values.join(","))
-                               .to_query
+        params = Rack::Utils.parse_nested_query(uri.query.to_s)
+        # Pass other active filters (e.g. time=past) so the fragment endpoint builds
+        # the same query scope as the current page, not its own default
+        params["filters"] = other_filters.to_json if other_filters.any?
+        # Pass currently selected ids so the right items can be marked in the response
+        params["selected"] = current_values.join(",") if current_values.any?
+        uri.query = params.to_query
         uri.to_s
       end
 

frontend/src/stimulus/controllers/dynamic/quick-filter/select-panel.controller.ts

@@ -29,6 +29,7 @@
  */
 
 import { Controller } from '@hotwired/stimulus';
+import { visit } from '@hotwired/turbo';
 import type { SelectPanelElement } from '@primer/view-components/app/components/primer/alpha/select_panel_element';
 
 export default class SelectPanelQuickFilterController extends Controller {
@@ -42,7 +43,14 @@ export default class SelectPanelQuickFilterController extends Controller {
   declare filterKeyValue:string;
   declare operatorValue:string;
 
-  apply() {
+  clear() {
+    visit(this.baseUrlValue);
+  }
+
+  apply(event:Event) {
+    // Prevent updating dynamic label before the page reloads anyway to stop flickering
+    event.stopPropagation();
+
     const panel = this.element.querySelector<SelectPanelElement>('select-panel');
     if (!panel) return;
 
@@ -58,6 +66,6 @@ export default class SelectPanelQuickFilterController extends Controller {
       url.searchParams.set('filters', JSON.stringify(filters));
     }
 
-    window.location.href = url.toString();
+    visit(url.toString());
   }
 }