fix(files): sort not working after changing views

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

Author: st3iny

apps/files/src/main.ts

@@ -15,6 +15,7 @@ import router from './router/router'
 import RouterService from './services/RouterService'
 import SettingsModel from './models/Setting.js'
 import SettingsService from './services/Settings.js'
+import type { ProxiedNavigation } from './vue'
 
 __webpack_nonce__ = getCSPNonce()
 
@@ -44,9 +45,19 @@ Vue.use(PiniaVuePlugin)
 // Init HotKeys AFTER pinia is set up
 registerHotkeys()
 
-// Init Navigation Service
-// This only works with Vue 2 - with Vue 3 this will not modify the source but return just a observer
-const Navigation = Vue.observable(getNavigation())
+// Init Navigation Service (turn getNavigation() into a *read-only* observable object)
+const Navigation = Vue.observable<ProxiedNavigation>({
+	active: null,
+	views: [],
+})
+const actualNavigation = getNavigation()
+actualNavigation.addEventListener('update', () => {
+	Vue.set(Navigation, 'views', actualNavigation.views)
+	Vue.set(Navigation, 'active', actualNavigation.active)
+})
+actualNavigation.addEventListener('updateActive', () => {
+	Vue.set(Navigation, 'active', actualNavigation.active)
+})
 Vue.prototype.$navigation = Navigation
 
 // Init Files App Settings Service

apps/files/src/views/Navigation.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import type { View } from '@nextcloud/files'
+import { getNavigation, type View } from '@nextcloud/files'
 import type { ViewConfig } from '../types.ts'
 
 import { defineComponent } from 'vue'
@@ -179,7 +179,7 @@ export default defineComponent({
 		showView(view: View) {
 			// Closing any opened sidebar
 			window.OCA?.Files?.Sidebar?.close?.()
-			this.$navigation.setActive(view)
+			getNavigation().setActive(view)
 			emit('files:navigation:changed', view)
 		},
 

apps/files/src/vue.d.ts

@@ -2,10 +2,15 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { Navigation } from '@nextcloud/files'
+import type { View } from '@nextcloud/files'
+
+export interface ProxiedNavigation {
+	get active(): View | null,
+	get views(): View[],
+}
 
 declare module 'vue/types/vue' {
 	interface Vue {
-		$navigation: Navigation
+		$navigation: ProxiedNavigation,
 	}
 }

cypress/e2e/files/files-sorting.cy.ts

@@ -267,4 +267,65 @@ describe('Files: Sorting the file list', { testIsolation: true }, () => {
 			}
 		})
 	})
+
+	it('Sorting works after switching view twice', () => {
+		cy.uploadContent(currentUser, new Blob(), 'text/plain', '/1 tiny.txt')
+			.uploadContent(currentUser, new Blob(['a'.repeat(1024)]), 'text/plain', '/z big.txt')
+			.uploadContent(currentUser, new Blob(['a'.repeat(512)]), 'text/plain', '/a medium.txt')
+			.mkdir(currentUser, '/folder')
+		cy.login(currentUser)
+		cy.visit('/apps/files')
+
+		// click sort button twice
+		cy.get('th').contains('button', 'Size').click()
+		cy.get('th').contains('button', 'Size').click()
+
+		// switch to personal and click sort button twice again
+		cy.get('[data-cy-files-navigation-item="personal"]').click()
+		cy.get('th').contains('button', 'Size').click()
+		cy.get('th').contains('button', 'Size').click()
+
+		// switch back to files view and do actual assertions
+		cy.get('[data-cy-files-navigation-item="files"]').click()
+
+		// click sort button
+		cy.get('th').contains('button', 'Size').click()
+		// sorting is set
+		cy.contains('th', 'Size').should('have.attr', 'aria-sort', 'ascending')
+		// Files are sorted
+		cy.get('[data-cy-files-list-row]').each(($row, index) => {
+			switch (index) {
+			case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
+				break
+			case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
+				break
+			case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
+				break
+			case 3: expect($row.attr('data-cy-files-list-row-name')).to.eq('a medium.txt')
+				break
+			case 4: expect($row.attr('data-cy-files-list-row-name')).to.eq('z big.txt')
+				break
+			}
+		})
+
+		// click sort button
+		cy.get('th').contains('button', 'Size').click()
+		// sorting is set
+		cy.contains('th', 'Size').should('have.attr', 'aria-sort', 'descending')
+		// Files are sorted
+		cy.get('[data-cy-files-list-row]').each(($row, index) => {
+			switch (index) {
+			case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
+				break
+			case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('z big.txt')
+				break
+			case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('a medium.txt')
+				break
+			case 3: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
+				break
+			case 4: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
+				break
+			}
+		})
+	})
 })