Fix first and last pagination icon sizes

When using the keyset paginator the first and last buttons have very
small icons that look like super indexes.

Because these icons are `lg` (large version) we make them similar in
size to the prev and next icons by adding a small padding.

Changelog: changed

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

-- previous_path = url_for(page_params.merge(cursor: paginator.cursor_for_previous_page))
-- next_path = url_for(page_params.merge(cursor: paginator.cursor_for_next_page))
+- return unless paginator.has_previous_page? || paginator.has_next_page?
 
 .gl-pagination.gl-mt-3
   %ul.pagination.justify-content-center
+    - unless without_first_and_last_pages
+      %li
+        - first_page = url_for(page_params.merge(cursor: paginator.cursor_for_first_page))
+        = render Pajamas::ButtonComponent.new(category: :tertiary, disabled: !paginator.has_previous_page?, href: first_page, icon: 'chevron-double-lg-left', icon_classes: 'gl-p-1', button_options: { rel: 'first', class: 'gl-pagination-item' } ) do
+          = s_('Pagination|First')
 
-    - if paginator.has_previous_page?
-      - unless without_first_and_last_pages
-        %li
-          - first_page_path = url_for(page_params.merge(cursor: paginator.cursor_for_first_page))
-          = link_to first_page_path, rel: 'first', class: 'gl-pagination-item' do
-            = sprite_icon('chevron-double-lg-left', size: 8)
-            = s_('Pagination|First')
+    %li
+      - previous_page = url_for(page_params.merge(cursor: paginator.cursor_for_previous_page))
+      = render Pajamas::ButtonComponent.new(category: :tertiary, disabled: !paginator.has_previous_page?, href: previous_page, icon: 'chevron-left', button_options: { rel: 'prev', class: 'gl-pagination-item' } ) do
+        = s_('Pagination|Prev')
 
-      %li
-        = link_to previous_path, rel: 'prev', class: 'gl-pagination-item' do
-          = sprite_icon('chevron-left')
-          = s_('Pagination|Prev')
+    %li
+      - next_page = url_for(page_params.merge(cursor: paginator.cursor_for_next_page))
+      = render Pajamas::ButtonComponent.new(category: :tertiary, disabled: !paginator.has_next_page?, href: next_page, button_options: { rel: 'next', class: 'gl-pagination-item' } ) do
+        = s_('Pagination|Next')
+        = sprite_icon('chevron-right')
 
-    - if paginator.has_next_page?
+    - unless without_first_and_last_pages
       %li
-        = link_to next_path, rel: 'next', class: 'gl-pagination-item' do
-          = s_('Pagination|Next')
-          = sprite_icon('chevron-right')
-      - unless without_first_and_last_pages
-        %li
-          - last_page_path = url_for(page_params.merge(cursor: paginator.cursor_for_last_page))
-          = link_to last_page_path, rel: 'last', class: 'gl-pagination-item' do
-            = s_('Pagination|Last')
-            = sprite_icon('chevron-double-lg-right', size: 8)
+        - last_page = url_for(page_params.merge(cursor: paginator.cursor_for_last_page))
+        = render Pajamas::ButtonComponent.new(category: :tertiary, disabled: !paginator.has_next_page?, href: last_page, button_options: { rel: 'last', class: 'gl-pagination-item' } ) do
+          = s_('Pagination|Last')
+          = sprite_icon('chevron-double-lg-right', css_class: 'gl-p-1')

spec/helpers/keyset_helper_spec.rb

@@ -26,10 +26,7 @@ def index
       it 'does not render pagination links' do
         get :index
 
-        expect(response.body).not_to include(s_('Pagination|First'))
-        expect(response.body).not_to include(s_('Pagination|Prev'))
-        expect(response.body).not_to include(s_('Pagination|Next'))
-        expect(response.body).not_to include(s_('Pagination|Last'))
+        expect(response.body).not_to have_css('.gl-pagination')
       end
     end
 
@@ -41,10 +38,7 @@ def index
       it 'does not render pagination links' do
         get :index
 
-        expect(response.body).not_to include(s_('Pagination|First'))
-        expect(response.body).not_to include(s_('Pagination|Prev'))
-        expect(response.body).not_to include(s_('Pagination|Next'))
-        expect(response.body).not_to include(s_('Pagination|Last'))
+        expect(response.body).not_to have_css('.gl-pagination')
       end
     end
 
@@ -54,26 +48,27 @@ def index
       let(:paginator) { User.where(admin: false).order(id: :desc).keyset_paginate(per_page: 2) }
 
       context 'when on the first page' do
-        it 'renders the next and last links' do
+        it 'disables the First and Prev buttons' do
           get :index
 
-          expect(response.body).not_to include(s_('Pagination|First'))
-          expect(response.body).not_to include(s_('Pagination|Prev'))
-          expect(response.body).to include(s_('Pagination|Next'))
-          expect(response.body).to include(s_('Pagination|Last'))
+          expect(response.body).to have_css('.gl-pagination')
+          expect(response.body).to have_css('a.disabled', text: 'First')
+          expect(response.body).to have_css('a.disabled', text: 'Prev')
+          expect(response.body).to have_css('a:not(disabled)', text: 'Next')
+          expect(response.body).to have_css('a:not(disabled)', text: 'Last')
         end
       end
 
       context 'when at the last page' do
-        it 'renders the prev and first links' do
+        it 'disables the Next and Last buttons' do
           cursor = paginator.cursor_for_last_page
 
           get :index, params: { cursor: cursor }
 
-          expect(response.body).to include(s_('Pagination|First'))
-          expect(response.body).to include(s_('Pagination|Prev'))
-          expect(response.body).not_to include(s_('Pagination|Next'))
-          expect(response.body).not_to include(s_('Pagination|Last'))
+          expect(response.body).to have_css('a:not(disabled)', text: 'First')
+          expect(response.body).to have_css('a:not(disabled)', text: 'Prev')
+          expect(response.body).to have_css('a.disabled', text: 'Next')
+          expect(response.body).to have_css('a.disabled', text: 'Last')
         end
       end
 
@@ -83,10 +78,10 @@ def index
 
           get :index, params: { cursor: cursor }
 
-          expect(response.body).to include(s_('Pagination|First'))
-          expect(response.body).to include(s_('Pagination|Prev'))
-          expect(response.body).to include(s_('Pagination|Next'))
-          expect(response.body).to include(s_('Pagination|Last'))
+          expect(response.body).to have_css('a:not(disabled)', text: 'First')
+          expect(response.body).to have_css('a:not(disabled)', text: 'Prev')
+          expect(response.body).to have_css('a:not(disabled)', text: 'Next')
+          expect(response.body).to have_css('a:not(disabled)', text: 'Last')
         end
       end
     end