Skip to content

Commit 9ff45bc

Browse files
ELHart05backportbot[bot]
authored andcommitted
fix(files): keep reactivity when destructuring the store in grid view
FileEntryGrid destructured useActiveStore() directly, so activeFolder, activeNode and activeView were plain snapshots taken when the entry was first rendered. Opening a file from grid view therefore handed the file actions a stale folder, and the viewer navigated the list to whichever folder happened to be active back then: from a nested folder this drops you at the root, or a level or two above, with the file open on top. Same fix as #59942, which covered FileEntry but left its grid counterpart behind despite the "keep in sync with FileEntry.vue" note above it. Signed-off-by: ELHart05 <o.allaoua@esi-sba.dz>
1 parent 12a45b3 commit 9ff45bc

2 files changed

Lines changed: 72 additions & 1 deletion

File tree

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*!
2+
* SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*/
5+
6+
import { File, Folder, Permission } from '@nextcloud/files'
7+
import { createTestingPinia } from '@pinia/testing'
8+
import { shallowMount } from '@vue/test-utils'
9+
import { beforeEach, describe, expect, test, vi } from 'vitest'
10+
import { nextTick } from 'vue'
11+
import FileEntryGrid from './FileEntryGrid.vue'
12+
import router from '../router/router.ts'
13+
import { useActiveStore } from '../store/active.ts'
14+
15+
// useFileListWidth builds its ResizeObserver while the module is evaluated, so
16+
// the stub has to exist before the import chain runs. jsdom-testing-mocks sets
17+
// its observer up from a hook, which is already too late here.
18+
vi.hoisted(() => {
19+
globalThis.ResizeObserver = class {
20+
observe() {}
21+
unobserve() {}
22+
disconnect() {}
23+
}
24+
})
25+
26+
vi.mock('@nextcloud/auth')
27+
28+
const source = new File({
29+
id: 42,
30+
source: 'http://nextcloud.local/remote.php/dav/files/test/Deep/Nested/report.pdf',
31+
root: '/files/test',
32+
owner: 'test',
33+
mime: 'application/pdf',
34+
permissions: Permission.READ,
35+
})
36+
37+
const nestedFolder = new Folder({
38+
id: 41,
39+
source: 'http://nextcloud.local/remote.php/dav/files/test/Deep/Nested',
40+
root: '/files/test',
41+
owner: 'test',
42+
permissions: Permission.READ,
43+
})
44+
45+
describe('FileEntryGrid.vue', () => {
46+
beforeEach(async () => {
47+
await router.replace({ name: 'filelist', params: { view: 'files' } })
48+
})
49+
50+
// The grid entry hands its `activeFolder` to the file actions, so a stale copy
51+
// makes opening a file navigate to whichever folder was active when the entry
52+
// was first rendered rather than the one the file lives in.
53+
test('follows the active folder after navigating', async () => {
54+
const wrapper = shallowMount(FileEntryGrid, {
55+
propsData: { source, nodes: [source] },
56+
mocks: { t: (_: string, text: string) => text },
57+
router,
58+
pinia: createTestingPinia({ createSpy: vi.fn }),
59+
})
60+
const activeStore = useActiveStore()
61+
62+
expect(wrapper.vm.activeFolder).not.toBe(nestedFolder)
63+
64+
activeStore.activeFolder = nestedFolder
65+
await nextTick()
66+
67+
expect(wrapper.vm.activeFolder).toBe(nestedFolder)
68+
})
69+
})

apps/files/src/components/FileEntryGrid.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
</template>
7272

7373
<script lang="ts">
74+
import { storeToRefs } from 'pinia'
7475
import { defineComponent } from 'vue'
7576
import NcDateTime from '@nextcloud/vue/components/NcDateTime'
7677
import FileEntryActions from './FileEntry/FileEntryActions.vue'
@@ -117,11 +118,12 @@ export default defineComponent({
117118
fileId: currentRouteFileId,
118119
} = useRouteParameters()
119120
121+
const activeStore = useActiveStore()
120122
const {
121123
activeFolder,
122124
activeNode,
123125
activeView,
124-
} = useActiveStore()
126+
} = storeToRefs(activeStore)
125127
126128
const actions = useFileActions()
127129

0 commit comments

Comments
 (0)