Merge pull request #463 from opf/75258-hide-pagination-buttons-when-they-are-disabled

[75258] Hide pagination buttons when they are disabled

Author: bsatarnejad

.changeset/hot-taxis-hunt.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+[75258] Hide unavailable pagination navigation and omit single-page pagination

app/components/primer/open_project/pagination.rb

@@ -57,6 +57,10 @@ def pages
         end
       end
 
+      def render?
+        page_count > 1
+      end
+
       private
 
       def cast_integer!(value, name)
@@ -81,36 +85,45 @@ def default_href_builder(page_num)
       end
 
       def build_pagination_model
-        prev_page = previous_page_item
-        next_page = next_page_item
-
-        return [prev_page, next_page] unless show_pages || page_count <= 0
+        pages = []
 
-        pages = if all_pages_fit?
-                  full_pagination_without_breaks
-                else
-                  paginated_number_items
-                end
+        pages << previous_page_item unless first_page?
+        pages.concat(number_page_items) if show_pages
+        pages << next_page_item unless last_page?
 
-        [prev_page, *pages, next_page]
+        pages
       end
 
       def previous_page_item
         {
           type: PAGE_TYPE__PREV,
-          num: current_page - 1,
-          disabled: current_page == 1
+          num: current_page - 1
         }
       end
 
       def next_page_item
         {
           type: PAGE_TYPE__NEXT,
-          num: current_page + 1,
-          disabled: current_page == page_count
+          num: current_page + 1
         }
       end
 
+      def first_page?
+        current_page == 1
+      end
+
+      def last_page?
+        current_page == page_count
+      end
+
+      def number_page_items
+        if all_pages_fit?
+          full_pagination_without_breaks
+        else
+          paginated_number_items
+        end
+      end
+
       def full_pagination_without_breaks
         pages = []
         add_pages(pages, 1, page_count)
@@ -233,20 +246,12 @@ def build_component_data(page)
           key_string = key.to_s
           content = I18n.t("pagination.#{key_string}")
 
-          if page[:disabled]
-            props.merge!(
-              rel: key_string,
-              "aria-hidden": "true",
-              "aria-disabled": "true"
-            )
-          else
-            props.merge!(
-              rel: key_string,
-              href: href_builder.call(page[:num]),
-              "aria-label": I18n.t("pagination.#{key_string}_page"),
-              **@link_arguments
-            )
-          end
+          props.merge!(
+            rel: key_string,
+            href: href_builder.call(page[:num]),
+            "aria-label": I18n.t("pagination.#{key_string}_page"),
+            **@link_arguments
+          )
 
         when PAGE_TYPE__NUM
           key = :"page-#{page[:num]}"

previews/primer/open_project/pagination_preview.rb

@@ -23,6 +23,10 @@ def playground(
         margin_page_count = (margin_page_count.presence || 1).to_i
         surrounding_page_count = (surrounding_page_count.presence || 2).to_i
 
+        # Ensure current_page doesn't exceed page_count
+        current_page = [current_page, page_count].min
+        current_page = [current_page, 1].max # Ensure at least 1
+
         render(
           Primer::OpenProject::Pagination.new(
             current_page: current_page,
@@ -46,6 +50,7 @@ def default
           )
         )
       end
+
       #
       # @!endgroup
     end

test/components/primer/open_project/pagination_test.rb

@@ -28,16 +28,18 @@ def test_marks_current_page
     assert_selector("[aria-current='page']", text: "3")
   end
 
-  def test_disables_previous_on_first_page
+  def test_hides_previous_on_first_page
     render_inline(Primer::OpenProject::Pagination.new(page_count: 5, current_page: 1))
 
-    assert_selector("[rel='prev'][aria-disabled='true']")
+    refute_selector("[rel='prev']")
+    assert_selector("[rel='next']")
   end
 
-  def test_disables_next_on_last_page
+  def test_hides_next_on_last_page
     render_inline(Primer::OpenProject::Pagination.new(page_count: 5, current_page: 5))
 
-    assert_selector("[rel='next'][aria-disabled='true']")
+    assert_selector("[rel='prev']")
+    refute_selector("[rel='next']")
   end
 
   def test_renders_ellipsis_for_many_pages
@@ -300,4 +302,16 @@ def test_link_arguments_are_not_applied_to_break_elements
     refute_selector("span[role='presentation'][data-turbo='false']")
   end
 
+  def test_single_page_does_not_render_pagination
+    render_inline(
+      Primer::OpenProject::Pagination.new(
+        page_count: 1,
+        current_page: 1
+      )
+    )
+
+    refute_selector("nav[aria-label='Pagination']")
+    refute_selector(".PaginationContainer")
+  end
+
 end