Merge branch '19814-regression-snippet-pagination-on-user-page-leads-to-raw-json-instead-of-normal-webpage' into 'master' 12508-gitlab-ui-enhancement-proposals

Fix pagination on user snippets page

## What does this MR do?

Copy the pagination code from projects -> snippets on a user's profile page.

## Are there points in the code the reviewer needs to double check?

Don't think so.

## Why was this MR needed?

It was a bug!

## Screenshots (if relevant)

(I set the pagination to two per page for this, because I'm lazy.)

![Snippets](/uploads/986abd8608cda1cd76416e55b2c3a3ba/Snippets.gif)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #19814.

See merge request !6179

4 files changed, 51 insertions, 6 deletions

diff --git a/CHANGELOG b/CHANGELOG
index d06b782f850..07b6e1298e4 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -9,6 +9,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)
diff --git a/app/assets/javascripts/snippets_list.js.es6 b/app/assets/javascripts/snippets_list.js.es6
new file mode 100644
index 00000000000..6f0996c0d2a
--- /dev/null
+++ b/app/assets/javascripts/snippets_list.js.es6
@@ -0,0 +1,11 @@
+(global => {
+  global.gl = global.gl || {};
+
+  gl.SnippetsList = function() {
+    var $holder = $('.snippets-list-holder');
+
+    $holder.find('.pagination').on('ajax:success', (e, data) => {
+      $holder.replaceWith(data.html);
+    });
+  }
+})(window);
diff --git a/app/views/snippets/_snippets.html.haml b/app/views/snippets/_snippets.html.haml
index 80a3e731e1d..7be4a471579 100644
--- a/app/views/snippets/_snippets.html.haml
+++ b/app/views/snippets/_snippets.html.haml
@@ -1,7 +1,11 @@
-%ul.content-list
-  = render partial: 'shared/snippets/snippet', collection: @snippets
-  - if @snippets.empty?
-    %li
-      .nothing-here-block Nothing here.
+.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();
diff --git a/spec/features/users/snippets_spec.rb b/spec/features/users/snippets_spec.rb
new file mode 100644
index 00000000000..356a8d668b0
--- /dev/null
+++ b/spec/features/users/snippets_spec.rb
@@ -0,0 +1,29 @@
+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