Update Kaminari templates to match gl-pagination

The current Kaminari templates are not aligned with our design
system pagination component which is gl-pagination.

app/views/kaminari/gitlab/_first_page.html.haml

--#  Link to the "First" page
--#  available local variables
--#    url:           url to the first page
--#    current_page:  a page object for the currently displayed page
--#    total_pages:   total number of pages
--#    per_page:      number of items to fetch per page
--#    remote:        data-remote
-%li.page-item.js-first-button
-  = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link'

app/views/kaminari/gitlab/_last_page.html.haml

--#  Link to the "Last" page
--#  available local variables
--#    url:           url to the last page
--#    current_page:  a page object for the currently displayed page
--#    total_pages:   total number of pages
--#    per_page:      number of items to fetch per page
--#    remote:        data-remote
-%li.page-item.js-last-button
-  = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote, class: 'page-link'}

app/views/kaminari/gitlab/_next_page.html.haml

@@ -9,4 +9,6 @@
 - page_url = current_page.last? ? '#' : url
 
 %li.page-item.js-next-button{ class: ('disabled' if current_page.last?) }
-  = link_to raw(t 'views.pagination.next'), page_url, rel: 'next', remote: remote, class: 'page-link'
+  = link_to page_url, rel: 'next', remote: remote, class: 'page-link' do
+    = s_('Pagination|Next')
+    = sprite_icon('angle-right', size: 8)

app/views/kaminari/gitlab/_page.html.haml

@@ -6,5 +6,9 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.page-item.js-pagination-page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?), ('d-none d-md-block' if !page.current?) ] }
+%li.page-item.js-pagination-page{ class: [active_when(page.current?),
+  ('sibling' if page.next? || page.prev?),
+  ('js-first-button' if page.first?),
+  ('js-last-button' if page.last?),
+  ('d-none d-md-block' if !page.current?) ] }
   = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, class: 'page-link' }

app/views/kaminari/gitlab/_paginator.html.haml

@@ -8,14 +8,10 @@
 = paginator.render do
   .gl-pagination.prepend-top-default
     %ul.pagination.justify-content-center
-      - unless current_page.first?
-        = first_page_tag unless total_pages < 5 # As kaminari will always show the first 5 pages
       = prev_page_tag
       - each_page do |page|
-        - if page.left_outer? || page.right_outer? || page.inside_window?
+        - if page.left_outer? || page.right_outer? || page.inside_window? || page.first? || page.last?
           = page_tag page
         - elsif !page.was_truncated?
           = gap_tag
       = next_page_tag
-      - unless current_page.last?
-        = last_page_tag unless total_pages < 5

app/views/kaminari/gitlab/_prev_page.html.haml

@@ -9,4 +9,6 @@
 - page_url = current_page.first? ? '#' : url
 
 %li.page-item.js-previous-button{ class: ('disabled' if current_page.first?) }
-  = link_to raw(t 'views.pagination.previous'), page_url, rel: 'prev', remote: remote, class: 'page-link'
+  = link_to page_url, rel: 'prev', remote: remote, class: 'page-link' do
+    = sprite_icon('angle-left', size: 8)
+    = s_('Pagination|Prev')

app/views/kaminari/gitlab/_without_count.html.haml

@@ -2,7 +2,11 @@
   %ul.pagination.justify-content-center
     - if previous_path
       %li.page-item.prev
-        = link_to(t('views.pagination.previous'), previous_path, rel: 'prev', class: 'page-link')
+        = link_to previous_path, rel: 'prev', class: 'page-link' do
+          = sprite_icon('angle-left', size: 8)
+          = s_('Pagination|Prev')
     - if next_path
       %li.page-item.next
-        = link_to(t('views.pagination.next'), next_path, rel: 'next', class: 'page-link')
+        = link_to next_path, rel: 'next', class: 'page-link' do
+          = s_('Pagination|Next')
+          = sprite_icon('angle-right', size: 8)

changelogs/unreleased/33071-update-kaminari-templates.yml

+---
+title: Update Kaminari templates to match gl-pagination's markup
+merge_request: 23582
+author:
+type: other

locale/gitlab.pot

@@ -13188,9 +13188,15 @@ msgstr ""
 msgid "Pagination|Last »"
 msgstr ""
 
+msgid "Pagination|Next"
+msgstr ""
+
 msgid "Pagination|Next ›"
 msgstr ""
 
+msgid "Pagination|Prev"
+msgstr ""
+
 msgid "Pagination|« First"
 msgstr ""