Fix pagination on user snippets page

CHANGELOG

@@ -8,6 +8,7 @@ v 8.12.0 (unreleased)
   - Add font color contrast to external label in admin area (ClemMakesApps)
   - Change logo animation to CSS (ClemMakesApps)
   - Instructions for enabling Git packfile bitmaps !6104
+  - Fix pagination on user snippets page
   - Change merge_error column from string to text type
   - Reduce contributions calendar data payload (ClemMakesApps)
   - Add `web_url` field to issue, merge request, and snippet API objects (Ben Boeckel)

app/assets/javascripts/snippets_list.js

+(function() {
+  this.gl.SnippetsList = function() {
+    $('.snippets-list-holder .pagination').on('ajax:success', function(e, data) {
+      $('.snippets-list-holder').replaceWith(data.html);
+    });
+  };
+}).call(this);

app/views/snippets/_snippets.html.haml

-%ul.content-list
+.snippets-list-holder
+  %ul.content-list
     = render partial: 'shared/snippets/snippet', collection: @snippets
     - if @snippets.empty?
       %li
         .nothing-here-block Nothing here.
 
-= paginate @snippets, theme: 'gitlab'
+  = paginate @snippets, theme: 'gitlab', remote: true
+
+:javascript
+  gl.SnippetsList();

spec/features/users/snippets_spec.rb

+require 'spec_helper'
+
+describe 'Snippets tab on a user profile', feature: true, js: true do
+  include WaitForAjax
+
+  let(:user) { create(:user) }
+
+  context 'when the user has snippets' do
+    before do
+      create_list(:snippet, 25, :public, author: user)
+
+      visit user_path(user)
+      page.within('.user-profile-nav') { click_link 'Snippets' }
+      wait_for_ajax
+    end
+
+    it 'is limited to 20 items per page' do
+      expect(page.all('.snippets-list-holder .snippet-row').count).to eq(20)
+    end
+
+    context 'clicking on the link to the second page' do
+      before { click_link('2') }
+
+      it 'shows the remaining snippets' do
+        expect(page.all('.snippets-list-holder .snippet-row').count).to eq(5)
+      end
+    end
+  end
+end