Merge branch '24499-fix-activity-autoload-on-large-viewports' into 'master'

Resolve "Activity entries are not loaded fully to cover full window's height"

## What does this MR do?

Fixes a bug in which a browser window large enough to encompass the default number of items in an auto-loading endless-scroll list could not trigger the loading of additional items.

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

I refactored activities.js and pager.js into es6 syntax while I was investigating the issue.  No changes were made other than some es6 flourishes and eslint conformity, so nothing should be effected, but perhaps best to double check other pages which utilize these scripts.

## Screenshots (if relevant)

![endless-scroll-fixed](/uploads/b672b606826af745528c209ab6cfe95c/endless-scroll-fixed.gif)

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- Tests
  - [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 it does - 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 #24499

See merge request !7608

9 files changed, 119 insertions, 107 deletions

diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
deleted file mode 100644
index 906a1a69d93..00000000000
--- a/app/assets/javascripts/activities.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-undef, quotes, no-var, padded-blocks, max-len */
-(function() {
-  this.Activities = (function() {
-    function Activities() {
-      Pager.init(20, true, false, this.updateTooltips);
-      $(".event-filter-link").on("click", (function(_this) {
-        return function(event) {
-          event.preventDefault();
-          _this.toggleFilter($(event.currentTarget));
-          return _this.reloadActivities();
-        };
-      })(this));
-    }
-
-    Activities.prototype.updateTooltips = function() {
-      gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
-    };
-
-    Activities.prototype.reloadActivities = function() {
-      $(".content_list").html('');
-      Pager.init(20, true, false, this.updateTooltips);
-    };
-
-    Activities.prototype.toggleFilter = function(sender) {
-      var filter = sender.attr("id").split("_")[0];
-
-      $('.event-filter .active').removeClass("active");
-      Cookies.set("event_filter", filter);
-
-      sender.closest('li').toggleClass("active");
-    };
-
-    return Activities;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/activities.js.es6 b/app/assets/javascripts/activities.js.es6
new file mode 100644
index 00000000000..19bcfef89fb
--- /dev/null
+++ b/app/assets/javascripts/activities.js.es6
@@ -0,0 +1,36 @@
+/* eslint-disable no-param-reassign, class-methods-use-this */
+/* global Pager, Cookies */
+
+((global) => {
+  class Activities {
+    constructor() {
+      Pager.init(20, true, false, this.updateTooltips);
+      $('.event-filter-link').on('click', (e) => {
+        e.preventDefault();
+        this.toggleFilter(e.currentTarget);
+        this.reloadActivities();
+      });
+    }
+
+    updateTooltips() {
+      gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
+    }
+
+    reloadActivities() {
+      $('.content_list').html('');
+      Pager.init(20, true, false, this.updateTooltips);
+    }
+
+    toggleFilter(sender) {
+      const $sender = $(sender);
+      const filter = $sender.attr('id').split('_')[0];
+
+      $('.event-filter .active').removeClass('active');
+      Cookies.set('event_filter', filter);
+
+      $sender.closest('li').toggleClass('active');
+    }
+  }
+
+  global.Activities = Activities;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 756a24cc0fc..ab4858dca32 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -110,10 +110,10 @@
           Issuable.init();
           break;
         case 'dashboard:activity':
-          new Activities();
+          new gl.Activities();
           break;
         case 'dashboard:projects:starred':
-          new Activities();
+          new gl.Activities();
           break;
         case 'projects:commit:show':
           new Commit();
@@ -139,7 +139,7 @@
           new gl.Pipelines();
           break;
         case 'groups:activity':
-          new Activities();
+          new gl.Activities();
           break;
         case 'groups:show':
           shortcut_handler = new ShortcutsNavigation();
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
deleted file mode 100644
index d22d2d9dbae..00000000000
--- a/app/assets/javascripts/pager.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-undef, prefer-template, wrap-iife, comma-dangle, no-return-assign, no-else-return, consistent-return, no-unused-vars, padded-blocks, max-len */
-(function() {
-  this.Pager = {
-    init: function(limit, preload, disable, callback) {
-      this.limit = limit != null ? limit : 0;
-      this.disable = disable != null ? disable : false;
-      this.callback = callback != null ? callback : $.noop;
-      this.loading = $('.loading').first();
-      if (preload) {
-        this.offset = 0;
-        this.getOld();
-      } else {
-        this.offset = this.limit;
-      }
-      return this.initLoadMore();
-    },
-    getOld: function() {
-      this.loading.show();
-      return $.ajax({
-        type: "GET",
-        url: $(".content_list").data('href') || location.href,
-        data: "limit=" + this.limit + "&offset=" + this.offset,
-        complete: (function(_this) {
-          return function() {
-            return _this.loading.hide();
-          };
-        })(this),
-        success: function(data) {
-          Pager.append(data.count, data.html);
-          return Pager.callback();
-        },
-        dataType: "json"
-      });
-    },
-    append: function(count, html) {
-      $(".content_list").append(html);
-      if (count > 0) {
-        return this.offset += count;
-      } else {
-        return this.disable = true;
-      }
-    },
-    initLoadMore: function() {
-      $(document).unbind('scroll');
-      return $(document).endlessScroll({
-        bottomPixels: 400,
-        fireDelay: 1000,
-        fireOnce: true,
-        ceaseFire: function() {
-          return Pager.disable;
-        },
-        callback: (function(_this) {
-          return function(i) {
-            if (!_this.loading.is(':visible')) {
-              _this.loading.show();
-              return Pager.getOld();
-            }
-          };
-        })(this)
-      });
-    }
-  };
-
-}).call(this);
diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6
new file mode 100644
index 00000000000..e35cf6d295e
--- /dev/null
+++ b/app/assets/javascripts/pager.js.es6
@@ -0,0 +1,73 @@
+(() => {
+  const ENDLESS_SCROLL_BOTTOM_PX = 400;
+  const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
+
+  const Pager = {
+    init(limit = 0, preload = false, disable = false, callback = $.noop) {
+      this.limit = limit;
+      this.offset = this.limit;
+      this.disable = disable;
+      this.callback = callback;
+      this.loading = $('.loading').first();
+      if (preload) {
+        this.offset = 0;
+        this.getOld();
+      }
+      this.initLoadMore();
+    },
+
+    getOld() {
+      this.loading.show();
+      $.ajax({
+        type: 'GET',
+        url: $('.content_list').data('href') || window.location.href,
+        data: `limit=${this.limit}&offset=${this.offset}`,
+        dataType: 'json',
+        error: () => this.loading.hide(),
+        success: (data) => {
+          this.append(data.count, data.html);
+          this.callback();
+
+          // keep loading until we've filled the viewport height
+          if (!this.disable && !this.isScrollable()) {
+            this.getOld();
+          } else {
+            this.loading.hide();
+          }
+        },
+      });
+    },
+
+    append(count, html) {
+      $('.content_list').append(html);
+      if (count > 0) {
+        this.offset += count;
+      } else {
+        this.disable = true;
+      }
+    },
+
+    isScrollable() {
+      const $w = $(window);
+      return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
+    },
+
+    initLoadMore() {
+      $(document).unbind('scroll');
+      $(document).endlessScroll({
+        bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
+        fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
+        fireOnce: true,
+        ceaseFire: () => this.disable === true,
+        callback: () => {
+          if (!this.loading.is(':visible')) {
+            this.loading.show();
+            this.getOld();
+          }
+        },
+      });
+    },
+  };
+
+  window.Pager = Pager;
+})();
diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
index 2b310da319c..5a625611987 100644
--- a/app/assets/javascripts/user_tabs.js.es6
+++ b/app/assets/javascripts/user_tabs.js.es6
@@ -134,7 +134,7 @@ content on the Users#show page.
       }
       const $calendarWrap = this.$parentEl.find('.user-calendar');
       $calendarWrap.load($calendarWrap.data('href'));
-      new Activities();
+      new gl.Activities();
       return this.loaded['activity'] = true;
     }
 
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index d011e51e696..4f15f2997fb 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -13,7 +13,7 @@
   = spinner
 
 :javascript
-  var activity = new Activities();
+  var activity = new gl.Activities();
   $(document).on('page:restore', function (event) {
     activity.reloadActivities()
   })
diff --git a/changelogs/unreleased/24499-fix-activity-autoload-on-large-viewports.yml b/changelogs/unreleased/24499-fix-activity-autoload-on-large-viewports.yml
new file mode 100644
index 00000000000..53dcc2a82f1
--- /dev/null
+++ b/changelogs/unreleased/24499-fix-activity-autoload-on-large-viewports.yml
@@ -0,0 +1,4 @@
+---
+title: Fix activity page endless scroll on large viewports
+merge_request: 7608
+author: 
diff --git a/spec/javascripts/activities_spec.js.es6 b/spec/javascripts/activities_spec.js.es6
index 9d855ef1060..8640cd44085 100644
--- a/spec/javascripts/activities_spec.js.es6
+++ b/spec/javascripts/activities_spec.js.es6
@@ -35,7 +35,7 @@
   describe('Activities', () => {
     beforeEach(() => {
       fixture.load(fixtureTemplate);
-      new Activities();
+      new gl.Activities();
     });
 
     for(let i = 0; i < filters.length; i++) {