From 595c04b3ba690ea999deaaf1ddae1c3884244ee5 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Thu, 14 Aug 2025 09:58:39 +0200
Subject: [PATCH 1/6] Implement pagination in the file tree browser

Adds a Show more button to request next pages of the list
---
 .../components/tree_list.vue                  | 43 +++++++++++++++----
 .../repository/file_tree_browser/utils.js     | 14 ++++++
 .../vue_shared/components/file_row.vue        | 12 +++++-
 .../components/tree_list_spec.js              | 33 ++++++++++++--
 .../file_tree_browser/utils_spec.js           | 32 +++++++++++++-
 .../vue_shared/components/file_row_spec.js    | 29 ++++++++++++-
 6 files changed, 149 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index ab7567f0fdd0d7..6a18f9d7bc16e1 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -14,7 +14,7 @@ import { FOCUS_FILE_TREE_BROWSER_FILTER_BAR, keysFor } from '~/behaviors/shortcu
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
 import { Mousetrap } from '~/lib/mousetrap';
 import Shortcut from '~/behaviors/shortcuts/shortcut.vue';
-import { normalizePath, dedupeByFlatPathAndId } from '../utils';
+import { normalizePath, dedupeByFlatPathAndId, generateShowMoreItem } from '../utils';
 
 export default {
   ROW_HEIGHT: 32,
@@ -109,8 +109,8 @@ export default {
     buildList(path, level) {
       const contents = this.getDirectoryContents(path);
       return this.processDirectories(contents.trees, path, level)
-        .concat(this.processFiles(contents.blobs, level))
-        .concat(this.processSubmodules(contents.submodules, level));
+        .concat(this.processFiles(contents.blobs, path, level))
+        .concat(this.processSubmodules(contents.submodules, path, level));
     },
     processDirectories(trees = [], path, level) {
       const directoryList = [];
@@ -129,6 +129,9 @@ export default {
           isCurrentPath: this.isCurrentPath(treePath),
         });
 
+        if (this.shouldRenderShowMore(treePath, path))
+          directoryList.push(generateShowMoreItem(tree.id, path, level));
+
         // Recursively add children for expanded directories
         if (this.expandedPathsMap[treePath] && !this.isDirectoryLoading(treePath)) {
           directoryList.push(...this.buildList(treePath, level + 1));
@@ -137,7 +140,7 @@ export default {
 
       return directoryList;
     },
-    processFiles(blobs = [], level) {
+    processFiles(blobs = [], path, level) {
       const filesList = [];
 
       blobs.forEach((blob, index) => {
@@ -152,11 +155,14 @@ export default {
           level,
           isCurrentPath: this.isCurrentPath(blobPath),
         });
+
+        if (this.shouldRenderShowMore(blobPath, path))
+          filesList.push(generateShowMoreItem(blob.id, path, level));
       });
 
       return filesList;
     },
-    processSubmodules(submodules = [], level) {
+    processSubmodules(submodules = [], path, level) {
       const submodulesList = [];
 
       submodules.forEach((submodule, index) => {
@@ -170,6 +176,9 @@ export default {
           level,
           isCurrentPath: this.isCurrentPath(submodulePath),
         });
+
+        if (this.shouldRenderShowMore(submodulePath, path))
+          submodulesList.push(generateShowMoreItem(submodule.id, path, level));
       });
 
       return submodulesList;
@@ -177,8 +186,9 @@ export default {
     async fetchDirectory(dirPath) {
       const path = normalizePath(dirPath);
       const apiPath = path === '/' ? path : path.substring(1);
+      const nextPageCursor = this.directoriesCache[path]?.pageInfo?.endCursor || '';
 
-      if (this.directoriesCache[path] || this.loadingPathsMap[path]) return;
+      if ((this.directoriesCache[path] && !nextPageCursor) || this.loadingPathsMap[path]) return;
 
       this.loadingPathsMap = { ...this.loadingPathsMap, [path]: true };
 
@@ -191,7 +201,7 @@ export default {
             ref: currentRef,
             refType: getRefType(refType),
             path: apiPath,
-            nextPageCursor: '',
+            nextPageCursor,
             pageSize: TREE_PAGE_SIZE,
           },
         });
@@ -203,10 +213,16 @@ export default {
           blobs: dedupeByFlatPathAndId(treeData.blobs.nodes),
           submodules: dedupeByFlatPathAndId(treeData.submodules.nodes),
         };
+        const cached = this.directoriesCache[path] || { trees: [], blobs: [], submodules: [] };
 
         this.directoriesCache = {
           ...this.directoriesCache,
-          [path]: directoryContents,
+          [path]: {
+            trees: [...cached.trees, ...directoryContents.trees],
+            blobs: [...cached.blobs, ...directoryContents.blobs],
+            submodules: [...cached.submodules, ...directoryContents.submodules],
+            pageInfo: project?.repository?.paginatedTree?.pageInfo,
+          },
         };
       } catch (error) {
         createAlert({
@@ -218,6 +234,8 @@ export default {
         const newMap = { ...this.loadingPathsMap };
         delete newMap[path];
         this.loadingPathsMap = newMap;
+        await this.$nextTick();
+        this.$refs.scroller?.handleResize?.(); // ensures the scroller is properly updated with new data
       }
     },
 
@@ -270,6 +288,14 @@ export default {
     getDirectoryContents(path) {
       return this.directoriesCache[normalizePath(path)] || { trees: [], blobs: [], submodules: [] };
     },
+    shouldRenderShowMore(itemPath, parentPath) {
+      const cached = this.directoriesCache[parentPath];
+      if (!cached) return false;
+
+      const { trees, blobs, submodules, pageInfo } = cached;
+      const lastItemPath = normalizePath([...trees, ...blobs, ...submodules].at(-1)?.path);
+      return itemPath === lastItemPath && pageInfo?.hasNextPage;
+    },
     triggerFocusFilterBar() {
       const filterBar = this.$refs.filterInput;
       if (filterBar && filterBar.$el) {
@@ -341,6 +367,7 @@ export default {
             class="!gl-mx-0"
             truncate-middle
             @clickTree="navigateTo(item.path)"
+            @showMore="fetchDirectory(item.parentPath)"
           />
         </template>
       </recycle-scroller>
diff --git a/app/assets/javascripts/repository/file_tree_browser/utils.js b/app/assets/javascripts/repository/file_tree_browser/utils.js
index 540ac4748fe242..5ab550bc9e38d6 100644
--- a/app/assets/javascripts/repository/file_tree_browser/utils.js
+++ b/app/assets/javascripts/repository/file_tree_browser/utils.js
@@ -28,3 +28,17 @@ export const dedupeByFlatPathAndId = (arr) => {
     return true;
   });
 };
+
+/**
+ * Generates a show more item for the file-row component.
+ * @param {string} id - Unique id for the entry
+ * @param {string} parentPath - The path of the parent directory
+ * @param {number} level - Level used for indentation in rendering the tree
+ * @returns {Object} Show more item object with id, level, parentPath, and isShowMore properties
+ */
+export const generateShowMoreItem = (id, parentPath, level) => ({
+  id: `${id}-show-more`,
+  level,
+  parentPath,
+  isShowMore: true,
+});
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index d28106894671f2..a5d9520ce6693d 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTruncate, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlTruncate, GlIcon, GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
@@ -11,6 +11,7 @@ export default {
     FileIcon,
     GlTruncate,
     GlIcon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -125,6 +126,15 @@ export default {
 
 <template>
   <file-header v-if="file.isHeader" :path="file.path" />
+  <gl-button
+    v-else-if="file.isShowMore"
+    variant="link"
+    :loading="file.loading"
+    class="file-row"
+    @click="$emit('showMore')"
+  >
+    {{ __('Show more') }}
+  </gl-button>
   <button
     v-else
     :class="fileClass"
diff --git a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
index 7e56c9eae64dbc..3664a641e4b7d8 100644
--- a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
+++ b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
@@ -1,6 +1,7 @@
 import Vue, { nextTick } from 'vue';
 import { GlFormInput, GlIcon, GlTooltip } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
+import { cloneDeep } from 'lodash';
 import { PiniaVuePlugin } from 'pinia';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -23,14 +24,15 @@ jest.mock('~/repository/utils/ref_type', () => ({ getRefType: jest.fn(() => 'MOC
 jest.mock('~/lib/utils/url_utility', () => ({ joinPaths: jest.fn((...args) => args.join('/')) }));
 jest.mock('~/behaviors/shortcuts/shortcuts_toggle');
 
-const getQueryHandlerSuccess = jest.fn().mockResolvedValue(mockResponse);
-
 describe('Tree List', () => {
   let wrapper;
   let apolloProvider;
   let pinia;
+  let getQueryHandlerSuccess;
+
+  const createComponent = async (apiResponse = mockResponse) => {
+    getQueryHandlerSuccess = jest.fn().mockResolvedValue(apiResponse);
 
-  const createComponent = async () => {
     apolloProvider = createMockApollo([[paginatedTreeQuery, getQueryHandlerSuccess]]);
 
     const recycleScrollerStub = stubComponent(
@@ -160,6 +162,31 @@ describe('Tree List', () => {
     expect(navigateTo).toHaveBeenCalledWith(path);
   });
 
+  describe('pagination', () => {
+    beforeEach(() => {
+      const paginatedResponse = cloneDeep(mockResponse);
+      paginatedResponse.data.project.repository.paginatedTree.pageInfo.hasNextPage = true;
+      return createComponent(paginatedResponse);
+    });
+
+    it('renders a show more button when hasNextPage is true', () => {
+      expect(findRecycleScroller().props('items')[2]).toMatchObject({ isShowMore: true });
+    });
+
+    it('fetches the next page', () => {
+      findFileRows().at(2).vm.$emit('showMore');
+
+      expect(getQueryHandlerSuccess).toHaveBeenCalledWith({
+        projectPath: 'group/project',
+        ref: 'main',
+        refType: 'MOCK_REF_TYPE',
+        path: '/',
+        nextPageCursor: 'cursor123',
+        pageSize: 100,
+      });
+    });
+  });
+
   describe('filtering', () => {
     it('renders filter input with icon', () => {
       expect(findFilterInput().exists()).toBe(true);
diff --git a/spec/frontend/repository/file_tree_browser/utils_spec.js b/spec/frontend/repository/file_tree_browser/utils_spec.js
index 752c6ff8149d5f..1f85200cdbbaa2 100644
--- a/spec/frontend/repository/file_tree_browser/utils_spec.js
+++ b/spec/frontend/repository/file_tree_browser/utils_spec.js
@@ -1,4 +1,8 @@
-import { normalizePath, dedupeByFlatPathAndId } from '~/repository/file_tree_browser/utils';
+import {
+  normalizePath,
+  dedupeByFlatPathAndId,
+  generateShowMoreItem,
+} from '~/repository/file_tree_browser/utils';
 
 describe('File tree browser utilities', () => {
   describe('normalizePath', () => {
@@ -52,4 +56,30 @@ describe('File tree browser utilities', () => {
       });
     });
   });
+
+  describe('generateShowMoreItem', () => {
+    it('generates show more item with correct structure', () => {
+      const result = generateShowMoreItem('file-123', '/path/to/directory', 2);
+
+      expect(result).toEqual({
+        id: 'file-123-show-more',
+        level: 2,
+        parentPath: '/path/to/directory',
+        isShowMore: true,
+      });
+    });
+
+    it.each`
+      id            | parentPath   | level | expectedId
+      ${''}         | ${'/'}       | ${0}  | ${'-show-more'}
+      ${'abc'}      | ${'/root'}   | ${1}  | ${'abc-show-more'}
+      ${'file-456'} | ${'/nested'} | ${3}  | ${'file-456-show-more'}
+    `('creates id "$expectedId" from "$id"', ({ id, parentPath, level, expectedId }) => {
+      const result = generateShowMoreItem(id, parentPath, level);
+      expect(result.id).toBe(expectedId);
+      expect(result.level).toBe(level);
+      expect(result.parentPath).toBe(parentPath);
+      expect(result.isShowMore).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/file_row_spec.js b/spec/frontend/vue_shared/components/file_row_spec.js
index e3dd729823ccef..7add131e6df24f 100644
--- a/spec/frontend/vue_shared/components/file_row_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlButton } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { file } from 'jest/ide/helpers';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -197,4 +197,31 @@ describe('File row component', () => {
 
     expect(wrapper.findComponent(GlIcon).props('name')).toBe('link');
   });
+
+  describe('Show more button', () => {
+    const findShowMoreButton = () => wrapper.findComponent(GlButton);
+
+    it('renders show more button when file.isShowMore is true', () => {
+      createComponent({ file: { isShowMore: true, loading: false }, level: 0 });
+
+      const showMoreButton = findShowMoreButton();
+      expect(showMoreButton.props('variant')).toBe('link');
+      expect(showMoreButton.props('loading')).toBe(false);
+      expect(showMoreButton.text().trim()).toBe('Show more');
+    });
+
+    it('emits showMore event when show more button is clicked', () => {
+      createComponent({ file: { isShowMore: true, loading: false }, level: 0 });
+
+      findShowMoreButton().vm.$emit('click');
+
+      expect(wrapper.emitted('showMore')).toHaveLength(1);
+    });
+
+    it('shows loading state on show more button', () => {
+      createComponent({ file: { isShowMore: true, loading: true }, level: 0 });
+
+      expect(findShowMoreButton().props('loading')).toBe(true);
+    });
+  });
 });
-- 
GitLab


From 942a496854283dae91720e997028d7d095f47e22 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Wed, 3 Sep 2025 11:23:49 +0200
Subject: [PATCH 2/6] Prevent scroll jump when loading more files

- Convert flatFilesList from computed to data property to maintain stable array reference
- Use splice() to update array contents in-place instead of replacing the array
- Add watchers to rebuild list when directory cache or expansion state changes
- Remove unused currentPath and isCurrentPath properties
- Simplify toggleDirectory to avoid redundant expandPathAncestors call

This fixes the issue where clicking "Show More" in paginated directories
would cause the scroll position to jump to the top of the file list.
The virtual scroller now properly tracks items since the array reference
remains stable.
---
 .../components/tree_list.vue                  | 35 ++++++++-----------
 .../components/tree_list_spec.js              | 10 ++----
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index 6a18f9d7bc16e1..a33ca05bdedb00 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -50,10 +50,10 @@ export default {
   data() {
     return {
       filter: '',
-      currentPath: '/',
       directoriesCache: {},
       expandedPathsMap: {},
       loadingPathsMap: {},
+      flatFilesList: [],
     };
   },
   computed: {
@@ -84,13 +84,13 @@ export default {
         micromatch.contains(item.path, pattern, { nocase: true }),
       );
     },
-    flatFilesList() {
-      if (this.isRootLoading) return [];
-      return this.buildList('/', 0);
-    },
+  },
+  watch: {
+    directoriesCache: { deep: true, handler: 'updateFlatFilesList' },
+    expandedPathsMap: { deep: true, handler: 'updateFlatFilesList' },
   },
   mounted() {
-    this.navigateTo(this.$route.params.path || '/');
+    this.expandPathAncestors(this.$route.params.path || '/');
     this.mousetrap = new Mousetrap();
 
     if (!this.shortcutsDisabled) {
@@ -101,6 +101,11 @@ export default {
     this.mousetrap.unbind(keysFor(FOCUS_FILE_TREE_BROWSER_FILTER_BAR));
   },
   methods: {
+    updateFlatFilesList() {
+      if (this.isRootLoading) return;
+      // Replace array contents in-place to maintain same reference for RecycleScroller
+      this.flatFilesList.splice(0, this.flatFilesList.length, ...this.buildList('/', 0));
+    },
     isCurrentPath(path) {
       if (!this.$route.params.path) return path === '/';
       const routePath = normalizePath(this.$route.params.path);
@@ -126,7 +131,6 @@ export default {
           level,
           opened: Boolean(this.expandedPathsMap[treePath]),
           loading: this.isDirectoryLoading(treePath),
-          isCurrentPath: this.isCurrentPath(treePath),
         });
 
         if (this.shouldRenderShowMore(treePath, path))
@@ -153,7 +157,6 @@ export default {
           name: blob.name,
           mode: blob.mode,
           level,
-          isCurrentPath: this.isCurrentPath(blobPath),
         });
 
         if (this.shouldRenderShowMore(blobPath, path))
@@ -174,7 +177,6 @@ export default {
           name: submodule.name,
           submodule: true,
           level,
-          isCurrentPath: this.isCurrentPath(submodulePath),
         });
 
         if (this.shouldRenderShowMore(submodulePath, path))
@@ -234,8 +236,6 @@ export default {
         const newMap = { ...this.loadingPathsMap };
         delete newMap[path];
         this.loadingPathsMap = newMap;
-        await this.$nextTick();
-        this.$refs.scroller?.handleResize?.(); // ensures the scroller is properly updated with new data
       }
     },
 
@@ -261,11 +261,11 @@ export default {
     toggleDirectory(normalizedPath) {
       if (!this.expandedPathsMap[normalizedPath]) {
         // If directory is collapsed, expand it
-        this.expandPathAncestors(normalizedPath);
         this.expandedPathsMap = {
           ...this.expandedPathsMap,
           [normalizedPath]: true,
         };
+        this.fetchDirectory(normalizedPath);
       } else {
         // If directory is already expanded, collapse it
         const newExpandedPaths = { ...this.expandedPathsMap };
@@ -274,13 +274,6 @@ export default {
       }
     },
 
-    // Navigate to a specific directory or file
-    navigateTo(path) {
-      const normalizedPath = normalizePath(path);
-      this.currentPath = normalizedPath;
-      this.toggleDirectory(normalizedPath);
-    },
-
     isDirectoryLoading(path) {
       return Boolean(this.loadingPathsMap[normalizePath(path)]);
     },
@@ -362,11 +355,11 @@ export default {
             :style="{ '--level': item.level }"
             :class="{
               'tree-list-parent': item.level > 0,
-              '!gl-bg-gray-50': item.isCurrentPath,
+              '!gl-bg-gray-50': isCurrentPath(item.path),
             }"
             class="!gl-mx-0"
             truncate-middle
-            @clickTree="navigateTo(item.path)"
+            @clickTree="toggleDirectory(item.path)"
             @showMore="fetchDirectory(item.parentPath)"
           />
         </template>
diff --git a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
index 3664a641e4b7d8..051551374cf42f 100644
--- a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
+++ b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
@@ -97,7 +97,6 @@ describe('Tree List', () => {
     expect(scroller.props('items')).toEqual([
       {
         id: '/dir_1/dir_2-gid://123-0',
-        isCurrentPath: false,
         level: 0,
         loading: false,
         name: 'dir_2',
@@ -109,7 +108,6 @@ describe('Tree List', () => {
       {
         fileHash: 'abc123',
         id: '/dir_1/file.txt-gid://456-0',
-        isCurrentPath: false,
         level: 0,
         mode: '100644',
         name: 'file.txt',
@@ -127,7 +125,6 @@ describe('Tree List', () => {
     expect(fileRows.at(0).props()).toMatchObject({
       file: {
         id: '/dir_1/dir_2-gid://123-0',
-        isCurrentPath: false,
         level: 0,
         name: 'dir_2',
         path: '/dir_1/dir_2',
@@ -143,7 +140,6 @@ describe('Tree List', () => {
       file: {
         fileHash: 'abc123',
         id: '/dir_1/file.txt-gid://456-0',
-        isCurrentPath: false,
         level: 0,
         mode: '100644',
         name: 'file.txt',
@@ -155,11 +151,11 @@ describe('Tree List', () => {
     });
   });
 
-  it('calls navigateTo with correct path when clickTree is emitted from FileRow', () => {
-    const navigateTo = jest.spyOn(wrapper.vm, 'navigateTo').mockImplementation(() => {});
+  it('calls toggleDirectory with correct path when clickTree is emitted from FileRow', () => {
+    const toggleDirectory = jest.spyOn(wrapper.vm, 'toggleDirectory').mockImplementation(() => {});
     const path = '/dir_1/dir_2';
     findFileRows().at(0).vm.$emit('clickTree', path);
-    expect(navigateTo).toHaveBeenCalledWith(path);
+    expect(toggleDirectory).toHaveBeenCalledWith(path);
   });
 
   describe('pagination', () => {
-- 
GitLab


From 294b96467f66f6058f75574115a48852270c51ca Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Wed, 3 Sep 2025 12:07:14 +0200
Subject: [PATCH 3/6] Change process methods to use object params

Changes to object params for better readability
---
 .../file_tree_browser/components/tree_list.vue       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index a33ca05bdedb00..2fbca230f43c77 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -113,11 +113,11 @@ export default {
     },
     buildList(path, level) {
       const contents = this.getDirectoryContents(path);
-      return this.processDirectories(contents.trees, path, level)
-        .concat(this.processFiles(contents.blobs, path, level))
-        .concat(this.processSubmodules(contents.submodules, path, level));
+      return this.processDirectories({ trees: contents.trees, path, level })
+        .concat(this.processFiles({ blobs: contents.blobs, path, level }))
+        .concat(this.processSubmodules({ submodules: contents.submodules, path, level }));
     },
-    processDirectories(trees = [], path, level) {
+    processDirectories({ trees = [], path, level }) {
       const directoryList = [];
 
       trees.forEach((tree, index) => {
@@ -144,7 +144,7 @@ export default {
 
       return directoryList;
     },
-    processFiles(blobs = [], path, level) {
+    processFiles({ blobs = [], path, level }) {
       const filesList = [];
 
       blobs.forEach((blob, index) => {
@@ -165,7 +165,7 @@ export default {
 
       return filesList;
     },
-    processSubmodules(submodules = [], path, level) {
+    processSubmodules({ submodules = [], path, level }) {
       const submodulesList = [];
 
       submodules.forEach((submodule, index) => {
-- 
GitLab


From 7f5300698d7875ecd96041015e9c48cda256d85d Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Thu, 4 Sep 2025 10:35:55 +0200
Subject: [PATCH 4/6] Update Show more button styling

Left-align and use tertiary styling
---
 app/assets/javascripts/vue_shared/components/file_row.vue | 5 +++--
 spec/frontend/vue_shared/components/file_row_spec.js      | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index a5d9520ce6693d..6f9ffbcc849889 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -128,9 +128,10 @@ export default {
   <file-header v-if="file.isHeader" :path="file.path" />
   <gl-button
     v-else-if="file.isShowMore"
-    variant="link"
+    category="tertiary"
     :loading="file.loading"
-    class="file-row"
+    class="!gl-ml-5"
+    button-text-classes="gl-text-blue-700"
     @click="$emit('showMore')"
   >
     {{ __('Show more') }}
diff --git a/spec/frontend/vue_shared/components/file_row_spec.js b/spec/frontend/vue_shared/components/file_row_spec.js
index 7add131e6df24f..def2908d626f37 100644
--- a/spec/frontend/vue_shared/components/file_row_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_spec.js
@@ -205,7 +205,7 @@ describe('File row component', () => {
       createComponent({ file: { isShowMore: true, loading: false }, level: 0 });
 
       const showMoreButton = findShowMoreButton();
-      expect(showMoreButton.props('variant')).toBe('link');
+      expect(showMoreButton.props('category')).toBe('tertiary');
       expect(showMoreButton.props('loading')).toBe(false);
       expect(showMoreButton.text().trim()).toBe('Show more');
     });
-- 
GitLab


From faf074f80cace5859fd8b810f32412113d87d9b2 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Fri, 5 Sep 2025 11:16:39 +0200
Subject: [PATCH 5/6] Remove redundant path normalization

- Removes redundant normalization
- Move current route into a computed prop + normalize
---
 .../file_tree_browser/components/tree_list.vue      | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index 2fbca230f43c77..af5d7dce225486 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -84,13 +84,16 @@ export default {
         micromatch.contains(item.path, pattern, { nocase: true }),
       );
     },
+    currentRouterPath() {
+      return this.$route.params?.path && normalizePath(this.$route.params.path);
+    },
   },
   watch: {
     directoriesCache: { deep: true, handler: 'updateFlatFilesList' },
     expandedPathsMap: { deep: true, handler: 'updateFlatFilesList' },
   },
   mounted() {
-    this.expandPathAncestors(this.$route.params.path || '/');
+    this.expandPathAncestors(this.currentRouterPath || '/');
     this.mousetrap = new Mousetrap();
 
     if (!this.shortcutsDisabled) {
@@ -108,8 +111,7 @@ export default {
     },
     isCurrentPath(path) {
       if (!this.$route.params.path) return path === '/';
-      const routePath = normalizePath(this.$route.params.path);
-      return path === routePath;
+      return path === this.currentRouterPath;
     },
     buildList(path, level) {
       const contents = this.getDirectoryContents(path);
@@ -241,10 +243,9 @@ export default {
 
     // Expand all parent directories leading to a path
     expandPathAncestors(path) {
-      const normalizedPath = normalizePath(path);
       this.fetchDirectory('/');
 
-      const segments = normalizedPath.split('/').filter(Boolean);
+      const segments = path.split('/').filter(Boolean);
       let currentPath = '';
 
       // For each segment of the path, expand the parent directory
@@ -279,7 +280,7 @@ export default {
     },
 
     getDirectoryContents(path) {
-      return this.directoriesCache[normalizePath(path)] || { trees: [], blobs: [], submodules: [] };
+      return this.directoriesCache[path] || { trees: [], blobs: [], submodules: [] };
     },
     shouldRenderShowMore(itemPath, parentPath) {
       const cached = this.directoriesCache[parentPath];
-- 
GitLab


From 5af824c9310aa0f56356dbee7a4bba0e14818089 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Mon, 8 Sep 2025 09:47:08 +0200
Subject: [PATCH 6/6] Prevent scroll into view for show more button

Added a conditional for the Show more button to prevent null errors
---
 app/assets/javascripts/vue_shared/components/file_row.vue | 2 +-
 spec/frontend/vue_shared/components/file_row_spec.js      | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 6f9ffbcc849889..839df397311c6e 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -101,7 +101,7 @@ export default {
       });
     },
     hasPathAtCurrentRoute() {
-      if (!this.$router || !this.$router.currentRoute) {
+      if (!this.$router || !this.$router.currentRoute || this.file.isShowMore) {
         return false;
       }
 
diff --git a/spec/frontend/vue_shared/components/file_row_spec.js b/spec/frontend/vue_shared/components/file_row_spec.js
index def2908d626f37..84cc1ffbe9cdf7 100644
--- a/spec/frontend/vue_shared/components/file_row_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_spec.js
@@ -130,6 +130,14 @@ describe('File row component', () => {
     });
   });
 
+  it('does not call scrollIntoView for Show more button', () => {
+    const path = '/project/test.js';
+    const router = { currentRoute: { path } };
+    createComponent({ file: { path, isShowMore: true }, level: 0 }, router);
+
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+  });
+
   it('renders header for file', () => {
     createComponent({
       file: {
-- 
GitLab