Allow single quickFilters without requiring the "all filters" button

Author: HDinger

.changeset/loose-dragons-drop.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Allow single quickFilters without additional "all filters" button

app/components/primer/open_project/sub_header.rb

@@ -177,9 +177,8 @@ class SubHeader < Primer::Component
         deny_tag_argument(**kwargs)
         kwargs[:tag] = :div
         kwargs[:mr] ||= 2
-        kwargs[:display] = DESKTOP_ACTIONS_DISPLAY
 
-        Primer::BaseComponent.new(**kwargs)
+        QuickFilter.new(**kwargs)
       }
 
       renders_one :segmented_control, lambda { |**system_arguments, &block|
@@ -235,14 +234,20 @@ def initialize(collapsed_search: false, **system_arguments)
       end
 
       def before_render
-        if quick_filters.any? && filter_button.nil?
+        if quick_filters.size > 1 && filter_button.nil?
           raise ArgumentError, "You must provide a filter_button when using quick_filters."
         end
 
         if quick_filters.size > 5
           raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
         end
 
+        if quick_filters.size > 1
+          quick_filters.each do |qf|
+            qf.merge_system_arguments!(display: DESKTOP_ACTIONS_DISPLAY)
+          end
+        end
+
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?

app/components/primer/open_project/sub_header/quick_filter.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Thin wrapper for quick filter slots that defers BaseComponent construction to render time,
+    # allowing system arguments (e.g. display) to be mutated in before_render.
+    # Do not use standalone
+    class SubHeader::QuickFilter < Primer::Component
+      status :open_project
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+      end
+
+      def merge_system_arguments!(**other_arguments)
+        @system_arguments[:aria] = merge_aria(@system_arguments, other_arguments)
+        @system_arguments[:data] = merge_data(@system_arguments, other_arguments)
+        @system_arguments.merge!(**other_arguments)
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

test/components/component_test.rb

@@ -252,6 +252,7 @@ def test_registered_components
       "Primer::OpenProject::SubHeader::Button",
       "Primer::OpenProject::SubHeader::ButtonGroup",
       "Primer::OpenProject::SubHeader::Menu",
+      "Primer::OpenProject::SubHeader::QuickFilter",
       "Primer::OpenProject::SubHeader::SegmentedControl",
       "Primer::OpenProject::SidePanel::Section",
       "Primer::OpenProject::DangerDialog::FormWrapper",

test/components/primer/open_project/sub_header_test.rb

@@ -272,27 +272,47 @@ def test_renders_quick_filters
     assert_selector(".SubHeader-leftPane .MyQuickFilter", count: 2)
   end
 
-  def test_quick_filters_are_hidden_on_mobile
+  def test_quick_filters_are_hidden_on_mobile_when_multiple
     render_inline(Primer::OpenProject::SubHeader.new) do |component|
       component.with_filter_button { "Filter" }
       component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
+      component.with_quick_filter { "<span class='MyQuickFilter'>Assignee</span>".html_safe }
     end
 
     # Each quick_filter wrapper has d-none d-md-flex (hidden on mobile, visible on desktop)
-    assert_selector(".d-none.d-md-flex .MyQuickFilter")
+    assert_selector(".d-none.d-md-flex .MyQuickFilter", count: 2)
+  end
+
+  def test_single_quick_filter_is_visible_on_all_screen_sizes
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
+    end
+
+    assert_selector(".MyQuickFilter")
+    assert_no_selector(".d-none .MyQuickFilter")
   end
 
-  def test_quick_filters_require_filter_button
+  def test_quick_filters_require_filter_button_when_multiple_quick_filters
     err = assert_raises ArgumentError do
       render_inline(Primer::OpenProject::SubHeader.new) do |component|
         component.with_filter_input(name: "filter", label: "Filter")
         component.with_quick_filter { "Status" }
+        component.with_quick_filter { "Status" }
       end
     end
 
     assert_equal "You must provide a filter_button when using quick_filters.", err.message
   end
 
+
+  def test_quick_filters_require_no_filter_button_for_single_quick_filter
+    render_inline(Primer::OpenProject::SubHeader.new) do |component|
+      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
+    end
+
+    assert_selector(".MyQuickFilter")
+  end
+
   def test_quick_filters_maximum_is_five
     err = assert_raises ArgumentError do
       render_inline(Primer::OpenProject::SubHeader.new) do |component|