Resolve "Personal projects pagination in Profile Overview tab is broken"

app/assets/javascripts/pages/users/user_overview_block.js

@@ -1,10 +1,15 @@
 import axios from '~/lib/utils/axios_utils';
 
+const DEFAULT_LIMIT = 20;
+
 export default class UserOverviewBlock {
   constructor(options = {}) {
     this.container = options.container;
     this.url = options.url;
-    this.limit = options.limit || 20;
+    this.requestParams = {
+      limit: DEFAULT_LIMIT,
+      ...options.requestParams,
+    };
     this.loadData();
   }
 
@@ -15,9 +20,7 @@ export default class UserOverviewBlock {
 
     axios
       .get(this.url, {
-        params: {
-          limit: this.limit,
-        },
+        params: this.requestParams,
       })
       .then(({ data }) => this.render(data))
       .catch(() => loadingEl.classList.add('hide'));
@@ -34,7 +37,9 @@ export default class UserOverviewBlock {
     if (count && count > 0) {
       document.querySelector(`${this.container} .js-view-all`).classList.remove('hide');
     } else {
-      document.querySelector(`${this.container} .nothing-here-block`).classList.add('text-left', 'p-0');
+      document
+        .querySelector(`${this.container} .nothing-here-block`)
+        .classList.add('text-left', 'p-0');
     }
 
     loadingEl.classList.add('hide');

app/assets/javascripts/pages/users/user_tabs.js

@@ -182,18 +182,22 @@ export default class UserTabs {
 
     this.loadActivityCalendar('overview');
 
-    UserTabs.renderMostRecentBlocks('#js-overview .activities-block', 5);
-    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', 10);
+    UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
+      requestParams: { limit: 5 },
+    });
+    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
+      requestParams: { limit: 10, skip_pagination: true },
+    });
 
     this.loaded.overview = true;
   }
 
-  static renderMostRecentBlocks(container, limit) {
+  static renderMostRecentBlocks(container, options) {
     // eslint-disable-next-line no-new
     new UserOverviewBlock({
       container,
       url: $(`${container} .overview-content-list`).data('href'),
-      limit,
+      ...options,
     });
   }
 
@@ -216,7 +220,12 @@ export default class UserTabs {
         let calendarHint = '';
 
         if (action === 'activity') {
-          calendarHint = sprintf(__('Summary of issues, merge requests, push events, and comments (Timezone: %{utcFormatted})'), { utcFormatted });
+          calendarHint = sprintf(
+            __(
+              'Summary of issues, merge requests, push events, and comments (Timezone: %{utcFormatted})',
+            ),
+            { utcFormatted },
+          );
         } else if (action === 'overview') {
           calendarHint = __('Issues, merge requests, pushes and comments.');
         }
@@ -224,7 +233,15 @@ export default class UserTabs {
         $calendarWrap.find('.calendar-hint').text(calendarHint);
 
         // eslint-disable-next-line no-new
-        new ActivityCalendar('.tab-pane.active .js-contrib-calendar', '.tab-pane.active .user-calendar-activities', data, calendarActivitiesPath, utcOffset, 0, monthsAgo);
+        new ActivityCalendar(
+          '.tab-pane.active .js-contrib-calendar',
+          '.tab-pane.active .user-calendar-activities',
+          data,
+          calendarActivitiesPath,
+          utcOffset,
+          0,
+          monthsAgo,
+        );
       })
       .catch(() => flash(__('There was an error loading users activity calendar.')));
   }

app/controllers/users_controller.rb

@@ -56,10 +56,12 @@ class UsersController < ApplicationController
   def projects
     load_projects
 
+    skip_pagination = Gitlab::Utils.to_boolean(params[:skip_pagination])
+
     respond_to do |format|
       format.html { render 'show' }
       format.json do
-        pager_json("shared/projects/_list", @projects.count, projects: @projects)
+        pager_json("shared/projects/_list", @projects.count, projects: @projects, skip_pagination: skip_pagination)
       end
     end
   end

app/views/shared/projects/_list.html.haml

@@ -8,6 +8,7 @@
 - user = local_assigns[:user]
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true
 - remote = false unless local_assigns[:remote] == true
+- skip_pagination = false unless local_assigns[:skip_pagination] == true
 
 .js-projects-list-holder
   - if any_projects?(projects)
@@ -25,6 +26,6 @@
           = icon('lock fw', base: 'circle', class: 'fa-lg private-fork-icon')
           %strong= pluralize(@private_forks_count, 'private fork')
           %span  you have no access to.
-    = paginate_collection(projects, remote: remote)
+    = paginate_collection(projects, remote: remote) unless skip_pagination
   - else
     .nothing-here-block No projects found

changelogs/unreleased/52564-personal-projects-pagination-in-profile-overview-tab-is-broken.yml

@@ -0,0 +1,5 @@
+---
+title: Hide pagination for personal projects on profile overview tab
+merge_request: 22321
+author:
+type: other

spec/features/users/overview_spec.rb

@@ -104,8 +104,9 @@ describe 'Overview tab on a user profile', :js do
     end
 
     describe 'user has a personal project' do
-      let(:private_project) { create(:project, :private, namespace: user.namespace, creator: user) { |p| p.add_maintainer(user) } }
-      let!(:private_event)   { create(:event, project: private_project, author: user) }
+      before do
+        create(:project, :private, namespace: user.namespace, creator: user) { |p| p.add_maintainer(user) }
+      end
 
       include_context 'visit overview tab'
 
@@ -119,5 +120,31 @@ describe 'Overview tab on a user profile', :js do
         expect(find('#js-overview .projects-block')).to have_selector('.js-view-all', visible: true)
       end
     end
+
+    describe 'user has more than ten personal projects' do
+      before do
+        create_list(:project, 11, :private, namespace: user.namespace, creator: user) do |project|
+          project.add_maintainer(user)
+        end
+      end
+
+      include_context 'visit overview tab'
+
+      it 'it shows max. ten entries in the list of projects' do
+        page.within('.projects-block') do
+          expect(page).to have_selector('.project-row', count: 10)
+        end
+      end
+
+      it 'shows a link to the project list' do
+        expect(find('#js-overview .projects-block')).to have_selector('.js-view-all', visible: true)
+      end
+
+      it 'does not show pagination' do
+        page.within('.projects-block') do
+          expect(page).not_to have_selector('.gl-pagination')
+        end
+      end
+    end
   end
 end