[stable29] fix(files): sort not working after changing views

apps/files/src/components/BreadCrumbs.vue

@@ -172,7 +172,7 @@ export default defineComponent({
 		},
 		getDirDisplayName(path: string): string {
 			if (path === '/') {
-				return this.$navigation?.active?.name || t('files', 'Home')
+				return this.currentView?.name || t('files', 'Home')
 			}
 
 			const source = this.getFileSourceFromPath(path)

apps/files/src/components/FilesListTableFooter.vue

@@ -65,6 +65,7 @@ import Vue from 'vue'
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { useRouteParameters } from '../composables/useRouteParameters.ts'
+import { useNavigation } from '../composables/useNavigation'
 
 export default Vue.extend({
 	name: 'FilesListTableFooter',
@@ -99,19 +100,17 @@ export default Vue.extend({
 		const pathsStore = usePathsStore()
 		const filesStore = useFilesStore()
 		const { directory } = useRouteParameters()
+		const { currentView } = useNavigation()
 
 		return {
 			filesStore,
 			pathsStore,
 			directory,
+			currentView,
 		}
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		currentFolder() {
 			if (!this.currentView?.id) {
 				return

apps/files/src/main.ts

@@ -1,5 +1,4 @@
 import { PiniaVuePlugin } from 'pinia'
-import { getNavigation } from '@nextcloud/files'
 import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
 
@@ -32,11 +31,6 @@ Object.assign(window.OCP.Files, { Router })
 // Init Pinia store
 Vue.use(PiniaVuePlugin)
 
-// Init Navigation Service
-// This only works with Vue 2 - with Vue 3 this will not modify the source but return just a oberserver
-const Navigation = Vue.observable(getNavigation())
-Vue.prototype.$navigation = Navigation
-
 // Init Files App Settings Service
 const Settings = new SettingsService()
 Object.assign(window.OCA.Files, { Settings })

apps/files/src/mixins/filesSorting.ts

@@ -23,16 +23,20 @@ import Vue from 'vue'
 
 import { mapState } from 'pinia'
 import { useViewConfigStore } from '../store/viewConfig'
-import { Navigation, View } from '@nextcloud/files'
+import { useNavigation } from '../composables/useNavigation'
 
 export default Vue.extend({
+	setup() {
+		const { currentView } = useNavigation()
+
+		return {
+			currentView,
+		}
+	},
+
 	computed: {
 		...mapState(useViewConfigStore, ['getConfig', 'setSortingBy', 'toggleSortingDirection']),
 
-		currentView(): View {
-			return (this.$navigation as Navigation).active as View
-		},
-
 		/**
 		 * Get the sorting mode for the current view
 		 */

apps/files/src/views/Navigation.cy.ts

@@ -11,7 +11,6 @@ import NavigationView from './Navigation.vue'
 import { useViewConfigStore } from '../store/viewConfig'
 import { Folder, View, getNavigation } from '@nextcloud/files'
 
-import Vue from 'vue'
 import router from '../router/router'
 
 const resetNavigation = () => {
@@ -30,12 +29,8 @@ const createView = (id: string, name: string, parent?: string) => new View({
 })
 
 describe('Navigation renders', () => {
-	let Navigation: Navigation
-
 	before(() => {
 		delete window._nc_navigation
-		Navigation = getNavigation()
-		Vue.prototype.$navigation = Navigation
 
 		cy.mockInitialState('files', 'storageStats', {
 			used: 1000 * 1000 * 1000,
@@ -67,7 +62,6 @@ describe('Navigation API', () => {
 		delete window._nc_navigation
 		Navigation = getNavigation()
 
-		Vue.prototype.$navigation = Navigation
 		await router.replace({ name: 'filelist', params: { view: 'files' } })
 	})
 
@@ -159,12 +153,8 @@ describe('Navigation API', () => {
 })
 
 describe('Quota rendering', () => {
-	let Navigation: Navigation
-
 	before(() => {
 		delete window._nc_navigation
-		Navigation = getNavigation()
-		Vue.prototype.$navigation = Navigation
 	})
 
 	afterEach(() => cy.unmockInitialState())

apps/files/src/views/Navigation.vue

@@ -75,7 +75,7 @@
 </template>
 
 <script lang="ts">
-import type { View } from '@nextcloud/files'
+import { getNavigation, type View } from '@nextcloud/files'
 
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
@@ -196,7 +196,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)
 		},
 

cypress/e2e/files/files_sorting.cy.ts

@@ -284,4 +284,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
+			}
+		})
+	})
 })