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

app/assets/javascripts/activities.js

-/* 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);

app/assets/javascripts/activities.js.es6

+/* 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 = {}));

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();

app/assets/javascripts/pager.js

-/* 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);

app/assets/javascripts/pager.js.es6

+(() => {
+  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;
+})();

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;
     }
 

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()
   })

changelogs/unreleased/24499-fix-activity-autoload-on-large-viewports.yml

+---
+title: Fix activity page endless scroll on large viewports
+merge_request: 7608
+author: 

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++) {