Merge pull request #46370 from nextcloud/refactor/app-menu

refactor: split app menu into smaller components

apps/settings/src/components/AppStoreDiscover/AppLink.vue

@@ -18,12 +18,10 @@ import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import { defineComponent } from 'vue'
 import { RouterLink } from 'vue-router'
+import type { INavigationEntry } from '../../../../../core/src/types/navigation'
 
-const knownRoutes = Object.fromEntries(
-	Object.entries(
-		loadState<Record<string, { app?: string, href: string }>>('core', 'apps'),
-	).map(([k, v]) => [v.app ?? k, v.href]),
-)
+const apps = loadState<INavigationEntry[]>('core', 'apps')
+const knownRoutes = Object.fromEntries(apps.map((app) => [app.app ?? app.id, app.href]))
 
 /**
  * This component either shows a native link to the installed app or external size - or a router link to the appstore page of the app if not installed

apps/theming/src/components/UserAppMenuSection.vue

@@ -33,6 +33,7 @@
 
 <script lang="ts">
 import type { IApp } from './AppOrderSelector.vue'
+import type { INavigationEntry } from '../../../../core/src/types/navigation.d.ts'
 
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
@@ -47,26 +48,6 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
-/** See NavigationManager */
-interface INavigationEntry {
-	/** Navigation id */
-	id: string
-	/** Order where this entry should be shown */
-	order: number
-	/** Target of the navigation entry */
-	href: string
-	/** The icon used for the naviation entry */
-	icon: string
-	/** Type of the navigation entry ('link' vs 'settings') */
-	type: 'link' | 'settings'
-	/** Localized name of the navigation entry */
-	name: string
-	/** Whether this is the default app */
-	default?: boolean
-	/** App that registered this navigation entry (not necessarly the same as the id) */
-	app?: string
-}
-
 /** The app order user setting */
 type IAppOrder = Record<string, { order: number, app?: string }>
 
@@ -98,7 +79,7 @@ export default defineComponent({
 		/**
 		 * Array of all available apps, it is set by a core controller for the app menu, so it is always available
 		 */
-		 const initialAppOrder = Object.values(loadState<Record<string, INavigationEntry>>('core', 'apps'))
+		 const initialAppOrder = loadState<INavigationEntry[]>('core', 'apps')
 			.filter(({ type }) => type === 'link')
 			.map((app) => ({ ...app, label: app.name, default: app.default && app.app === enforcedDefaultApp }))
 

apps/theming/src/components/admin/AppMenuSection.vue

@@ -30,6 +30,8 @@
 </template>
 
 <script lang="ts">
+import type { INavigationEntry } from '../../../../../core/src/types/navigation'
+
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
@@ -75,9 +77,8 @@ export default defineComponent({
 		/**
 		 * All enabled apps which can be navigated
 		 */
-		const allApps = Object.values(
-			loadState<Record<string, { id: string, name?: string, icon: string }>>('core', 'apps'),
-		).map(({ id, name, icon }) => ({ label: name, id, icon }))
+		const allApps = loadState<INavigationEntry[]>('core', 'apps')
+			.map(({ id, name, icon }) => ({ label: name, id, icon }))
 
 		/**
 		 * Currently selected app, wrapps the setter

apps/updatenotification/src/init.ts

@@ -2,13 +2,15 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import type { INavigationEntry } from '../../../core/src/types/navigation'
+
 import { subscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import Vue, { defineAsyncComponent } from 'vue'
 import axios from '@nextcloud/axios'
 
-const navigationEntries = loadState('core', 'apps', {})
+const navigationEntries = loadState<INavigationEntry[]>('core', 'apps', [])
 
 const DialogVue = defineAsyncComponent(() => import('./components/AppChangelogDialog.vue'))
 
@@ -39,8 +41,9 @@ function showDialog(appId: string, version?: string) {
 							dialog.$destroy?.()
 							resolve(dismissed)
 
-							if (dismissed && appId in navigationEntries) {
-								window.location = navigationEntries[appId].href
+							const app = navigationEntries.find(({ app }) => app === appId)
+							if (dismissed && app !== undefined) {
+								window.location.href = app.href
 							}
 						}
 					},