fix(files): sort not working after changing views

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

Author: st3iny

apps/files/src/components/BreadCrumbs.vue

@@ -155,7 +155,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/main.ts

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { getCSPNonce } from '@nextcloud/auth'
-import { getNavigation } from '@nextcloud/files'
 import { PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 
@@ -36,11 +35,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 observer
-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

@@ -6,16 +6,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

@@ -10,7 +10,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 = () => {
@@ -29,12 +28,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,
@@ -66,7 +61,6 @@ describe('Navigation API', () => {
 		delete window._nc_navigation
 		Navigation = getNavigation()
 
-		Vue.prototype.$navigation = Navigation
 		await router.replace({ name: 'filelist', params: { view: 'files' } })
 	})
 
@@ -158,12 +152,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

@@ -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'
@@ -164,7 +164,7 @@ export default defineComponent({
 				// eslint-disable-next-line @typescript-eslint/no-unused-vars
 				.filter(([viewId, config]) => config.expanded === true)
 				// eslint-disable-next-line @typescript-eslint/no-unused-vars
-				.map(([viewId, config]) => this.$navigation.views.find(view => view.id === viewId))
+				.map(([viewId, config]) => this.views.find(view => view.id === viewId))
 				.filter(Boolean) // Only registered views
 				.filter(view => view.loadChildViews && !view.loaded)
 			for (const view of viewsToLoad) {
@@ -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

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