Limit tree entries

Limits tree entries to 1000

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

@@ -100,9 +100,9 @@ export default {
           />
           <template v-for="val in entries">
             <table-row
-              v-for="entry in val"
+              v-for="(entry, index) in val"
               :id="entry.id"
-              :key="`${entry.flatPath}-${entry.id}`"
+              :key="`${entry.flatPath}-${entry.id}-${index}`"
               :sha="entry.sha"
               :project-path="projectPath"
               :current-path="path"

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

@@ -9,6 +9,7 @@ import {
   GlHoverLoadDirective,
 } from '@gitlab/ui';
 import { escapeRegExp } from 'lodash';
+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import filesQuery from 'shared_queries/repository/files.query.graphql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import { TREE_PAGE_SIZE } from '~/repository/constants';
@@ -153,7 +154,8 @@ export default {
       return this.isFolder ? this.loadFolder() : this.loadBlob();
     },
     loadFolder() {
-      this.apolloQuery(filesQuery, {
+      const query = this.glFeatures.paginatedTreeGraphqlQuery ? paginatedTreeQuery : filesQuery;
+      this.apolloQuery(query, {
         projectPath: this.projectPath,
         ref: this.ref,
         path: this.path,

app/assets/javascripts/repository/components/tree_content.vue

 <script>
+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import filesQuery from 'shared_queries/repository/files.query.graphql';
 import createFlash from '~/flash';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -69,6 +70,9 @@ export default {
     hasShowMore() {
       return !this.clickedShowMore && this.pageLimitReached;
     },
+    paginatedTreeEnabled() {
+      return this.glFeatures.paginatedTreeGraphqlQuery;
+    },
   },
 
   watch: {
@@ -91,7 +95,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: filesQuery,
+          query: this.paginatedTreeEnabled ? paginatedTreeQuery : filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
@@ -104,13 +108,20 @@ export default {
           if (data.errors) throw data.errors;
           if (!data?.project?.repository || originalPath !== (this.path || '/')) return;
 
-          const pageInfo = this.hasNextPage(data.project.repository.tree);
+          const pageInfo = this.paginatedTreeEnabled
+            ? data.project.repository.paginatedTree.pageInfo
+            : this.hasNextPage(data.project.repository.tree);
 
           this.isLoadingFiles = false;
           this.entries = Object.keys(this.entries).reduce(
             (acc, key) => ({
               ...acc,
-              [key]: this.normalizeData(key, data.project.repository.tree[key].edges),
+              [key]: this.normalizeData(
+                key,
+                this.paginatedTreeEnabled
+                  ? data.project.repository.paginatedTree.nodes[0][key]
+                  : data.project.repository.tree[key].edges,
+              ),
             }),
             {},
           );
@@ -132,7 +143,9 @@ export default {
         });
     },
     normalizeData(key, data) {
-      return this.entries[key].concat(data.map(({ node }) => node));
+      return this.entries[key].concat(
+        this.paginatedTreeEnabled ? data.nodes.map((entry) => entry) : data.map(({ node }) => node),
+      );
     },
     hasNextPage(data) {
       return []

app/assets/javascripts/repository/mixins/preload.js

+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import filesQuery from 'shared_queries/repository/files.query.graphql';
 import projectPathQuery from '../queries/project_path.query.graphql';
 import getRefMixin from './get_ref';
@@ -21,7 +22,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: filesQuery,
+          query: gon.features.paginatedTreeGraphqlQuery ? paginatedTreeQuery : filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,

app/controllers/projects/tree_controller.rb

@@ -15,6 +15,10 @@ class Projects::TreeController < Projects::ApplicationController
   before_action :authorize_download_code!
   before_action :authorize_edit_tree!, only: [:create_dir]
 
+  before_action do
+    push_frontend_feature_flag(:paginated_tree_graphql_query, @project, default_enabled: :yaml)
+  end
+
   feature_category :source_code_management
 
   def show

app/controllers/projects_controller.rb

@@ -34,6 +34,7 @@ class ProjectsController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:refactor_blob_viewer, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:increase_page_size_exponentially, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:paginated_tree_graphql_query, @project, default_enabled: :yaml)
   end
 
   layout :determine_layout