Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 11 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 17ee2a0d8b6..96fc1649d49 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -289,7 +289,9 @@ export default class MergeRequestTabs {
       }
 
       if (action === 'commits') {
-        this.loadCommits(href);
+        if (!this.commitsLoaded) {
+          this.loadCommits(href);
+        }
         // this.hideSidebar();
         this.resetViewContainer();
         this.commitPipelinesTable = destroyPipelines(this.commitPipelinesTable);
@@ -423,28 +425,39 @@ export default class MergeRequestTabs {
     return this.currentAction;
   }
 
-  loadCommits(source) {
-    if (this.commitsLoaded) {
-      return;
-    }
-
+  loadCommits(source, page = 1) {
     toggleLoader(true);
 
     axios
-      .get(`${source}.json`)
+      .get(`${source}.json`, { params: { page, per_page: 100 } })
       .then(({ data }) => {
+        toggleLoader(false);
+
         const commitsDiv = document.querySelector('div#commits');
         // eslint-disable-next-line no-unsanitized/property
-        commitsDiv.innerHTML = data.html;
+        commitsDiv.innerHTML += data.html;
         localTimeAgo(commitsDiv.querySelectorAll('.js-timeago'));
         this.commitsLoaded = true;
         scrollToContainer('#commits');
 
-        toggleLoader(false);
+        const loadMoreButton = document.querySelector('.js-load-more-commits');
+
+        if (loadMoreButton) {
+          loadMoreButton.addEventListener('click', (e) => {
+            e.preventDefault();
+
+            loadMoreButton.remove();
+            this.loadCommits(source, loadMoreButton.dataset.nextPage);
+          });
+        }
+
+        if (!data.next_page) {
+          return import('./add_context_commits_modal');
+        }
 
-        return import('./add_context_commits_modal');
+        return null;
       })
-      .then((m) => m.default())
+      .then((m) => m?.default())
       .catch(() => {
         toggleLoader(false);
         createAlert({