fix(files): sort not working after changing viewsfix/files/sort-after-view-change

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

6 files changed, 13 insertions, 36 deletions

diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 3569228dbde..a14c6545118 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/apps/files/src/components/BreadCrumbs.vue
@@ -153,7 +153,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 b4755df8eed..4b8aca9efd4 100644
--- a/apps/files/src/main.ts
+++ b/apps/files/src/main.ts
@@ -4,7 +4,6 @@
  */
 import type { Pinia } from 'pinia'
 import { getCSPNonce } from '@nextcloud/auth'
-import { getNavigation } from '@nextcloud/files'
 import { PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 
@@ -44,11 +43,6 @@ 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())
-Vue.prototype.$navigation = Navigation
-
 // Init Files App Settings Service
 const Settings = new SettingsService()
 Object.assign(window.OCA.Files, { Settings })
diff --git a/apps/files/src/mixins/filesSorting.ts b/apps/files/src/mixins/filesSorting.ts
index 53c747fa29b..12515db103f 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 9c799116650..a88878e2d3a 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 4fa4f72fe3c..6e387881d9c 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 fc8714d418b..00000000000
--- 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
-	}
-}