diff --git a/app/components/op_primer/quick_filter/select_panel_component.html.erb b/app/components/op_primer/quick_filter/select_panel_component.html.erb index 9eb734b7a8c..4404b27bd74 100644 --- a/app/components/op_primer/quick_filter/select_panel_component.html.erb +++ b/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 %> diff --git a/app/components/op_primer/quick_filter/select_panel_component.rb b/app/components/op_primer/quick_filter/select_panel_component.rb index c7b5b9789c5..280817e9739 100644 --- a/app/components/op_primer/quick_filter/select_panel_component.rb +++ b/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 diff --git a/frontend/src/stimulus/controllers/dynamic/quick-filter/select-panel.controller.ts b/frontend/src/stimulus/controllers/dynamic/quick-filter/select-panel.controller.ts index 28ccc6e0ead..c7665dfd3b0 100644 --- a/frontend/src/stimulus/controllers/dynamic/quick-filter/select-panel.controller.ts +++ b/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('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()); } }