Prevent fetching commits for next page

This prevents (batch) fetching commits for files on the next page.

Changelog: performance

app/assets/javascripts/repository/components/table/index.vue

@@ -51,6 +51,9 @@ export default {
     };
   },
   computed: {
+    totalEntries() {
+      return Object.values(this.entries).flat().length;
+    },
     tableCaption() {
       if (this.isLoading) {
         return sprintf(
@@ -111,6 +114,7 @@ export default {
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"
               :loading-path="loadingPath"
+              :total-entries="totalEntries"
             />
           </template>
           <template v-if="isLoading">

app/assets/javascripts/repository/components/table/row.vue

@@ -43,12 +43,17 @@ export default {
           type: this.type,
           path: this.currentPath,
           projectPath: this.projectPath,
+          maxOffset: this.totalEntries,
         };
       },
     },
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   props: {
+    totalEntries: {
+      type: Number,
+      required: true,
+    },
     id: {
       type: String,
       required: true,

app/assets/javascripts/repository/graphql.js

@@ -17,15 +17,21 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 const defaultClient = createDefaultClient(
   {
     Query: {
-      commit(_, { path, fileName, type }) {
+      commit(_, { path, fileName, type, maxOffset }) {
         return new Promise((resolve) => {
-          fetchLogsTree(defaultClient, path, '0', {
-            resolve,
-            entry: {
-              name: fileName,
-              type,
+          fetchLogsTree(
+            defaultClient,
+            path,
+            '0',
+            {
+              resolve,
+              entry: {
+                name: fileName,
+                type,
+              },
             },
-          });
+            maxOffset,
+          );
         });
       },
       readme(_, { url }) {

app/assets/javascripts/repository/log_tree.js

@@ -7,6 +7,7 @@ import refQuery from './queries/ref.query.graphql';
 
 const fetchpromises = {};
 const resolvers = {};
+let maxOffset;
 
 export function resolveCommit(commits, path, { resolve, entry }) {
   const commit = commits.find(
@@ -18,7 +19,15 @@ export function resolveCommit(commits, path, { resolve, entry }) {
   }
 }
 
-export function fetchLogsTree(client, path, offset, resolver = null) {
+export function fetchLogsTree(client, path, offset, resolver = null, _maxOffset = null) {
+  if (_maxOffset) {
+    maxOffset = _maxOffset;
+  }
+
+  if (Number(offset) > maxOffset) {
+    return Promise.resolve();
+  }
+
   if (resolver) {
     if (!resolvers[path]) {
       resolvers[path] = [resolver];
@@ -60,6 +69,7 @@ export function fetchLogsTree(client, path, offset, resolver = null) {
         fetchLogsTree(client, path, headerLogsOffset);
       } else {
         delete resolvers[path];
+        maxOffset = null;
       }
     });
 

app/assets/javascripts/repository/queries/commit.query.graphql

 #import "ee_else_ce/repository/queries/commit.fragment.graphql"
 
-query getCommit($fileName: String!, $type: String!, $path: String!) {
-  commit(path: $path, fileName: $fileName, type: $type) @client {
+query getCommit($fileName: String!, $type: String!, $path: String!, $maxOffset: Number!) {
+  commit(path: $path, fileName: $fileName, type: $type, maxOffset: $maxOffset) @client {
     ...TreeEntryCommit
   }
 }

spec/frontend/repository/components/table/row_spec.js

@@ -19,6 +19,7 @@ function factory(propsData = {}) {
       name: propsData.path,
       projectPath: 'gitlab-org/gitlab-ce',
       url: `https://test.com`,
+      totalEntries: 10,
     },
     directives: {
       GlHoverLoad: createMockDirective(),

spec/frontend/repository/log_tree_spec.js

@@ -69,6 +69,11 @@ describe('fetchLogsTree', () => {
     mock.restore();
   });
 
+  it('does not call axios get if offset is larger than the maximum offset', () =>
+    fetchLogsTree(client, '', '1000', resolver, 900).then(() => {
+      expect(axios.get).not.toHaveBeenCalled();
+    }));
+
   it('calls axios get', () =>
     fetchLogsTree(client, '', '0', resolver).then(() => {
       expect(axios.get).toHaveBeenCalledWith('/gitlab-org/gitlab-foss/-/refs/main/logs_tree/', {