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 0bf536f0e332519a70f3091664d0691cafe93747..222e37be6a87dbbad8b541429f40612a0451e6c4 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
@@ -2,7 +2,6 @@
import { GlTooltipDirective, GlLoadingIcon, GlFormInput, GlIcon, GlTooltip } from '@gitlab/ui';
import micromatch from 'micromatch';
import { createAlert } from '~/alert';
-import { RecycleScroller } from 'vendor/vue-virtual-scroller';
import FileRow from '~/vue_shared/components/file_row.vue';
import FileTreeBrowserToggle from '~/repository/file_tree_browser/components/file_tree_browser_toggle.vue';
import { s__, __ } from '~/locale';
@@ -26,7 +25,6 @@ import {
} from '../utils';
export default {
- ROW_HEIGHT: 32,
FOCUS_FILE_TREE_BROWSER_FILTER_BAR,
directives: {
GlTooltip: GlTooltipDirective,
@@ -34,7 +32,6 @@ export default {
components: {
GlFormInput,
GlIcon,
- RecycleScroller,
FileRow,
GlLoadingIcon,
FileTreeBrowserToggle,
@@ -97,6 +94,15 @@ export default {
currentRouterPath() {
return this.$route.params?.path && normalizePath(this.$route.params.path);
},
+ siblingMap() {
+ const map = new Map();
+ this.filteredFlatFilesList.forEach((item) => {
+ const key = `${item.parentPath || ''}-${item.level}`;
+ if (!map.has(key)) map.set(key, []);
+ map.get(key).push(item.id);
+ });
+ return map;
+ },
},
watch: {
directoriesCache: { deep: true, handler: 'updateFlatFilesList' },
@@ -116,7 +122,7 @@ export default {
methods: {
updateFlatFilesList() {
if (this.isRootLoading) return;
- // Replace array contents in-place to maintain same reference for RecycleScroller
+ // Replace array contents in-place to maintain reactivity
this.flatFilesList.splice(0, this.flatFilesList.length, ...this.buildList('/', 0));
},
isCurrentPath(path) {
@@ -341,6 +347,10 @@ export default {
// The input might not always be available (i.e. when the FTB is in collapsed state)
return this.$refs.filterInput?.$el;
},
+ siblingInfo(item) {
+ const siblings = this.siblingMap.get(`${item.parentPath || ''}-${item.level}`);
+ return [siblings.length, siblings.indexOf(item.id) + 1];
+ },
},
filterPlaceholder: s__('Repository|Filter files (*.vue, *.rb...)'),
};
@@ -382,36 +392,38 @@ export default {