Fixed pagination in projects & snippets on user page

Changed it from being json links to normal links & then doing a AJAX request to get the content.

Closes #29624

3 files changed, 51 insertions, 5 deletions

diff --git a/app/assets/javascripts/user_tabs.js b/app/assets/javascripts/user_tabs.js
index 465618e3d53..5db0d936ad8 100644
--- a/app/assets/javascripts/user_tabs.js
+++ b/app/assets/javascripts/user_tabs.js
@@ -1,4 +1,4 @@
-/* eslint-disable max-len, space-before-function-paren, no-underscore-dangle, consistent-return, comma-dangle, no-unused-vars, dot-notation, no-new, no-return-assign, camelcase, no-param-reassign */
+/* eslint-disable max-len, space-before-function-paren, no-underscore-dangle, consistent-return, comma-dangle, no-unused-vars, dot-notation, no-new, no-return-assign, camelcase, no-param-reassign, class-methods-use-this */
 
 /*
 UserTabs
@@ -82,8 +82,19 @@ content on the Users#show page.
     }
 
     bindEvents() {
-      return this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
+      this.changeProjectsPageWrapper = this.changeProjectsPage.bind(this);
+
+      this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
         .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
+
+      this.$parentEl.on('click', '.gl-pagination a', this.changeProjectsPageWrapper);
+    }
+
+    changeProjectsPage(e) {
+      e.preventDefault();
+
+      $('.tab-pane.active').empty();
+      this.loadTab($(e.target).attr('href'), this.getCurrentAction());
     }
 
     tabShown(event) {
@@ -119,7 +130,7 @@ content on the Users#show page.
         complete: () => this.toggleLoading(false),
         dataType: 'json',
         type: 'GET',
-        url: `${source}.json`,
+        url: source,
         success: (data) => {
           const tabSelector = `div#${action}`;
           this.$parentEl.find(tabSelector).html(data.html);
@@ -153,6 +164,10 @@ content on the Users#show page.
       }, document.title, new_state);
       return new_state;
     }
+
+    getCurrentAction() {
+      return this.$parentEl.find('.nav-links .active a').data('action');
+    }
   }
   global.UserTabs = UserTabs;
 })(window.gl || (window.gl = {}));
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 6e29f1e8a65..2683614d2e8 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -39,7 +39,7 @@ class UsersController < ApplicationController
       format.html { render 'show' }
       format.json do
         render json: {
-          html: view_to_html_string("shared/projects/_list", projects: @projects, remote: true)
+          html: view_to_html_string("shared/projects/_list", projects: @projects)
         }
       end
     end
@@ -65,7 +65,7 @@ class UsersController < ApplicationController
       format.html { render 'show' }
       format.json do
         render json: {
-          html: view_to_html_string("snippets/_snippets", collection: @snippets, remote: true)
+          html: view_to_html_string("snippets/_snippets", collection: @snippets)
         }
       end
     end
diff --git a/spec/features/users/projects_spec.rb b/spec/features/users/projects_spec.rb
new file mode 100644
index 00000000000..1d75fe434b0
--- /dev/null
+++ b/spec/features/users/projects_spec.rb
@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+describe 'Projects tab on a user profile', :feature, :js do
+  include WaitForAjax
+
+  let(:user) { create(:user) }
+  let!(:project) { create(:empty_project, namespace: user.namespace) }
+  let!(:project2) { create(:empty_project, namespace: user.namespace) }
+
+  before do
+    allow(Project).to receive(:default_per_page).and_return(1)
+
+    login_as(user)
+
+    visit user_path(user)
+
+    page.within('.user-profile-nav') do
+      click_link('Personal projects')
+    end
+
+    wait_for_ajax
+  end
+
+  it 'paginates results' do
+    expect(page).to have_content(project2.name)
+
+    click_link('Next')
+
+    expect(page).to have_content(project.name)
+  end
+end