Fix duplication of commits header on commits page

app/assets/javascripts/activities.js

@@ -5,7 +5,8 @@ import Cookies from 'js-cookie';
 
 class Activities {
   constructor() {
-    Pager.init(20, true, false, this.updateTooltips);
+    Pager.init(20, true, false, data => data, this.updateTooltips);
+
     $('.event-filter-link').on('click', (e) => {
       e.preventDefault();
       this.toggleFilter(e.currentTarget);
@@ -19,7 +20,7 @@ class Activities {
 
   reloadActivities() {
     $('.content_list').html('');
-    Pager.init(20, true, false, this.updateTooltips);
+    Pager.init(20, true, false, data => data, this.updateTooltips);
   }
 
   toggleFilter(sender) {

app/assets/javascripts/commits.js

@@ -7,6 +7,8 @@ window.CommitsList = (function() {
   CommitsList.timer = null;
 
   CommitsList.init = function(limit) {
+    this.$contentList = $('.content_list');
+
     $("body").on("click", ".day-commits-table li.commit", function(e) {
       if (e.target.nodeName !== "A") {
         location.href = $(this).attr("url");
@@ -14,9 +16,9 @@ window.CommitsList = (function() {
         return false;
       }
     });
-    Pager.init(limit, false, false, function() {
-      gl.utils.localTimeAgo($('.js-timeago'));
-    });
+
+    Pager.init(limit, false, false, this.processCommits);
+
     this.content = $("#commits-list");
     this.searchField = $("#commits-search");
     this.lastSearch = this.searchField.val();
@@ -62,5 +64,34 @@ window.CommitsList = (function() {
     });
   };
 
+  // Prepare loaded data.
+  CommitsList.processCommits = (data) => {
+    let processedData = data;
+    const $processedData = $(processedData);
+    const $commitsHeadersLast = CommitsList.$contentList.find('li.js-commit-header').last();
+    const lastShownDay = $commitsHeadersLast.data('day');
+    const $loadedCommitsHeadersFirst = $processedData.filter('li.js-commit-header').first();
+    const loadedShownDayFirst = $loadedCommitsHeadersFirst.data('day');
+    let commitsCount;
+
+    // If commits headers show the same date,
+    // remove the last header and change the previous one.
+    if (lastShownDay === loadedShownDayFirst) {
+      // Last shown commits count under the last commits header.
+      commitsCount = $commitsHeadersLast.nextUntil('li.js-commit-header').find('li.commit').length;
+
+      // Remove duplicate of commits header.
+      processedData = $processedData.not(`li.js-commit-header[data-day="${loadedShownDayFirst}"]`);
+
+      // Update commits count in the previous commits header.
+      commitsCount += Number($(processedData).nextUntil('li.js-commit-header').first().find('li.commit').length);
+      $commitsHeadersLast.find('span.commits-count').text(`${commitsCount} ${gl.text.pluralize('commit', commitsCount)}`);
+    }
+
+    gl.utils.localTimeAgo($processedData.find('.js-timeago'));
+
+    return processedData;
+  };
+
   return CommitsList;
 })();

app/assets/javascripts/pager.js

@@ -6,11 +6,12 @@ import '~/lib/utils/url_utility';
   const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
 
   const Pager = {
-    init(limit = 0, preload = false, disable = false, callback = $.noop) {
+    init(limit = 0, preload = false, disable = false, prepareData = $.noop, callback = $.noop) {
       this.url = $('.content_list').data('href') || gl.utils.removeParams(['limit', 'offset']);
       this.limit = limit;
       this.offset = parseInt(gl.utils.getParameterByName('offset'), 10) || this.limit;
       this.disable = disable;
+      this.prepareData = prepareData;
       this.callback = callback;
       this.loading = $('.loading').first();
       if (preload) {
@@ -29,7 +30,7 @@ import '~/lib/utils/url_utility';
         dataType: 'json',
         error: () => this.loading.hide(),
         success: (data) => {
-          this.append(data.count, data.html);
+          this.append(data.count, this.prepareData(data.html));
           this.callback();
 
           // keep loading until we've filled the viewport height

app/views/projects/commits/_commits.html.haml

@@ -2,8 +2,11 @@
 - commits, hidden = limited_commits(@commits)
 
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
-  %li.commit-header #{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}
-  %li.commits-row
+  %li.commit-header.js-commit-header{ data: { day: day } }
+    %span.day= day.strftime('%d %b, %Y')
+    %span.commits-count= pluralize(commits.count, 'commit')
+
+  %li.commits-row{ data: { day: day } }
     %ul.content-list.commit-list
       = render commits, project: project, ref: ref
 

changelogs/unreleased/fix_commits_page.yml

+---
+title: Fix duplication of commits header on commits page
+merge_request: 11006
+author: @blackst0ne

spec/javascripts/commits_spec.js

@@ -28,6 +28,32 @@ import '~/commits';
       expect(CommitsList).toBeDefined();
     });
 
+    describe('processCommits', () => {
+      it('should join commit headers', () => {
+        CommitsList.$contentList = $(`
+          <div>
+            <li class="commit-header" data-day="2016-09-20">
+              <span class="day">20 Sep, 2016</span>
+              <span class="commits-count">1 commit</span>
+            </li>
+            <li class="commit"></li>
+          </div>
+        `);
+
+        const data = `
+          <li class="commit-header" data-day="2016-09-20">
+            <span class="day">20 Sep, 2016</span>
+            <span class="commits-count">1 commit</span>
+          </li>
+          <li class="commit"></li>
+        `;
+
+        // The last commit header should be removed
+        // since the previous one has the same data-day value.
+        expect(CommitsList.processCommits(data).find('li.commit-header').length).toBe(0);
+      });
+    });
+
     describe('on entering input', () => {
       let ajaxSpy;