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 {