diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index 2bfa8932b1a..7878ab89e31 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -144,16 +144,28 @@ export default { currentDiffFileId(hash) { if (hash) { this.scrollVirtualScrollerToFileHash(hash); + this.openFileTree(hash); } }, }, methods: { - ...mapActions('diffs', ['toggleTreeOpen', 'goToFile', 'setRenderTreeList']), + ...mapActions('diffs', ['toggleTreeOpen', 'goToFile', 'setRenderTreeList', 'setTreeOpen']), scrollVirtualScrollerToFileHash(hash) { const index = this.treeList.findIndex((f) => f.fileHash === hash); if (index !== -1) { - this.$refs.scroller.scrollToItem(index); + this.$refs.scroller.scrollToItem?.(index); + } + }, + openFileTree(hash) { + const file = this.flatFilteredTreeList.find((f) => f.fileHash === hash); + + if (file) { + file.path + .split('/') + .slice(0, -1) + .reduce((acc, part) => [...acc, acc.length ? `${acc.at(-1)}/${part}` : part], []) + .forEach((path) => this.setTreeOpen({ path, opened: true })); } }, }, diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index be3876f8d46..f0a2ca967cf 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/app/assets/javascripts/diffs/store/actions.js @@ -665,6 +665,10 @@ export const toggleTreeOpen = ({ commit }, path) => { commit(types.TOGGLE_FOLDER_OPEN, path); }; +export const setTreeOpen = ({ commit }, { path, opened }) => { + commit(types.SET_FOLDER_OPEN, { path, opened }); +}; + export const setCurrentFileHash = ({ commit }, hash) => { commit(types.SET_CURRENT_DIFF_FILE, hash); }; diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js index 7b02ff49e0b..2621aeaacd6 100644 --- a/app/assets/javascripts/diffs/store/mutation_types.js +++ b/app/assets/javascripts/diffs/store/mutation_types.js @@ -21,6 +21,7 @@ export const SET_LINE_DISCUSSIONS_FOR_FILE = 'SET_LINE_DISCUSSIONS_FOR_FILE'; export const TOGGLE_FILE_DISCUSSION_EXPAND = 'TOGGLE_FILE_DISCUSSION_EXPAND'; export const REMOVE_LINE_DISCUSSIONS_FOR_FILE = 'REMOVE_LINE_DISCUSSIONS_FOR_FILE'; export const TOGGLE_FOLDER_OPEN = 'TOGGLE_FOLDER_OPEN'; +export const SET_FOLDER_OPEN = 'SET_FOLDER_OPEN'; export const TREE_ENTRY_DIFF_LOADING = 'TREE_ENTRY_DIFF_LOADING'; export const SET_SHOW_TREE_LIST = 'SET_SHOW_TREE_LIST'; export const SET_CURRENT_DIFF_FILE = 'SET_CURRENT_DIFF_FILE'; diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js index ce1c7ad2453..9f219284375 100644 --- a/app/assets/javascripts/diffs/store/mutations.js +++ b/app/assets/javascripts/diffs/store/mutations.js @@ -291,6 +291,9 @@ export default { [types.TOGGLE_FOLDER_OPEN](state, path) { state.treeEntries[path].opened = !state.treeEntries[path].opened; }, + [types.SET_FOLDER_OPEN](state, { path, opened }) { + state.treeEntries[path].opened = opened; + }, [types.TREE_ENTRY_DIFF_LOADING](state, { path, loading = true }) { state.treeEntries[path].diffLoading = loading; }, diff --git a/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js b/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js index 36379943ae2..657e03c9a94 100644 --- a/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js +++ b/app/assets/javascripts/diffs/stores/legacy_diffs/actions.js @@ -665,6 +665,10 @@ export function toggleTreeOpen(path) { this[types.TOGGLE_FOLDER_OPEN](path); } +export function setTreeOpen({ path, opened }) { + this[types.SET_FOLDER_OPEN]({ path, opened }); +} + export function setCurrentFileHash(hash) { this[types.SET_CURRENT_DIFF_FILE](hash); } diff --git a/app/assets/javascripts/diffs/stores/legacy_diffs/mutations.js b/app/assets/javascripts/diffs/stores/legacy_diffs/mutations.js index 1948a6b6bea..f3af0c55f9d 100644 --- a/app/assets/javascripts/diffs/stores/legacy_diffs/mutations.js +++ b/app/assets/javascripts/diffs/stores/legacy_diffs/mutations.js @@ -287,6 +287,9 @@ export default { [types.TOGGLE_FOLDER_OPEN](path) { this.treeEntries[path].opened = !this.treeEntries[path].opened; }, + [types.SET_FOLDER_OPEN]({ path, opened }) { + this.treeEntries[path].opened = opened; + }, [types.TREE_ENTRY_DIFF_LOADING]({ path, loading = true }) { this.treeEntries[path].diffLoading = loading; }, diff --git a/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue b/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue index 84416e38afe..b4e80191672 100644 --- a/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue +++ b/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue @@ -12,6 +12,7 @@ export default { directives: { GlTooltip: GlTooltipDirective, }, + inject: ['newListsEnabled'], props: { title: { type: String, @@ -68,7 +69,7 @@ export default { is-collapsible :collapsed="!open" :toggle-aria-label="toggleButtonLabel" - :body-class="{ '!gl-mx-0 gl-mb-0': hasMergeRequests }" + :body-class="{ '!gl-mx-0 gl-mb-0': hasMergeRequests || newListsEnabled }" >