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

2 files changed, 33 insertions, 11 deletions

diff --git a/app/assets/javascripts/pages/users/user_overview_block.js b/app/assets/javascripts/pages/users/user_overview_block.js
index 0009419cd0c..2ed177be558 100644
--- a/app/assets/javascripts/pages/users/user_overview_block.js
+++ b/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');
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 23b0348a99f..1de9945baad 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/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.')));
   }