From cc4f8679700cdf23597243e0c72c88518c00332f Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 13 Jan 2025 17:09:38 +0100
Subject: [PATCH] fix(files): sort not working after changing views

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

[skip ci]
---
 apps/files/src/components/BreadCrumbs.vue |  2 +-
 apps/files/src/main.ts                    |  1 -
 apps/files/src/mixins/filesSorting.ts     | 14 ++++--
 apps/files/src/views/Navigation.cy.ts     | 10 ----
 apps/files/src/views/Navigation.vue       |  6 +--
 apps/files/src/vue.d.ts                   | 11 ----
 cypress/e2e/files/files-sorting.cy.ts     | 61 +++++++++++++++++++++++
 7 files changed, 74 insertions(+), 31 deletions(-)
 delete mode 100644 apps/files/src/vue.d.ts

diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index c423b698d40d8..5f30da9c3b24a 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/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)
diff --git a/apps/files/src/main.ts b/apps/files/src/main.ts
index 7f3f2fe78f5a3..167b1838c072c 100644
--- a/apps/files/src/main.ts
+++ b/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'
 
diff --git a/apps/files/src/mixins/filesSorting.ts b/apps/files/src/mixins/filesSorting.ts
index 53c747fa29b83..12515db103f5b 100644
--- a/apps/files/src/mixins/filesSorting.ts
+++ b/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
 		 */
diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts
index 9c799116650c2..a88878e2d3abe 100644
--- a/apps/files/src/views/Navigation.cy.ts
+++ b/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())
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 9570cb1be6680..b23bd20b585f0 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/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)
 		},
 
diff --git a/apps/files/src/vue.d.ts b/apps/files/src/vue.d.ts
deleted file mode 100644
index fc8714d418b1f..0000000000000
--- a/apps/files/src/vue.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import type { Navigation } from '@nextcloud/files'
-
-declare module 'vue/types/vue' {
-	interface Vue {
-		$navigation: Navigation
-	}
-}
diff --git a/cypress/e2e/files/files-sorting.cy.ts b/cypress/e2e/files/files-sorting.cy.ts
index 250c5f195a60a..b3ae598114c89 100644
--- a/cypress/e2e/files/files-sorting.cy.ts
+++ b/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
+			}
+		})
+	})
 })