refactor: migrate app bundles to Vue 3

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/appstore/src/AppstoreApp.vue

@@ -15,7 +15,15 @@ import { APPSTORE_CATEGORY_NAMES } from './constants.ts'
 
 const route = useRoute()
 
-const currentCategory = computed(() => [route.params.category].flat()[0] ?? 'discover')
+const currentCategory = computed(() => {
+	if (route.params.category) {
+		return [route.params.category].flat()[0]!
+	}
+	if (route.name === 'apps-bundles') {
+		return 'bundles'
+	}
+	return 'discover'
+})
 const heading = computed(() => APPSTORE_CATEGORY_NAMES[currentCategory.value] ?? currentCategory.value)
 const pageTitle = computed(() => `${heading.value} - ${t('appstore', 'App store')}`)
 

apps/appstore/src/components/AppTable/AppTableRow.vue

@@ -27,9 +27,16 @@ const { app, isNarrow } = defineProps<{
 }>()
 
 const actions = useActions(() => app)
-const inlineActions = computed(() => !isNarrow || actions.value.length === 1
-	? actions.value.slice(0, 1)
-	: [])
+const inlineActions = computed(() => {
+	if (actions.value.length === 1) {
+		return [...actions.value]
+	}
+	if (isNarrow) {
+		return []
+	}
+	return actions.value.slice(0, 1)
+		.filter((action) => action.inline !== false)
+})
 const menuActions = computed(() => actions.value.slice(inlineActions.value.length))
 
 const route = useRoute()
@@ -74,15 +81,23 @@ const detailsRoute = computed(() => ({
 				<NcButton
 					v-for="action in inlineActions"
 					:key="action.id"
+					:ariaLabel="isNarrow ? action.label(app) : undefined"
+					:title="isNarrow ? action.label(app) : undefined"
 					:variant="action.variant"
 					@click="action.callback(app)">
-					{{ action.label(app) }}
+					<template #icon>
+						<NcIconSvgWrapper :path="action.icon" />
+					</template>
+					<template v-if="!isNarrow" #default>
+						{{ action.label(app) }}
+					</template>
 				</NcButton>
 				<NcActions forceMenu>
 					<NcActionButton
 						v-for="action in menuActions"
 						:key="action.id"
 						closeAfterClick
+						:variant="action.variant"
 						@click="action.callback(app)">
 						<template #icon>
 							<NcIconSvgWrapper :path="action.icon" />

apps/appstore/src/composables/useActions.ts

@@ -6,29 +6,40 @@
 import type { MaybeRefOrGetter } from 'vue'
 import type { IAppstoreApp, IAppstoreExApp } from '../apps.d.ts'
 
-import { mdiCheck, mdiClose, mdiDownload, mdiTrashCanOutline, mdiUpdate } from '@mdi/js'
+import { mdiAlertCircleCheckOutline, mdiCheck, mdiClose, mdiDownload, mdiTrashCanOutline, mdiUpdate } from '@mdi/js'
 import { t } from '@nextcloud/l10n'
 import { computed, toValue } from 'vue'
 import { useAppsStore } from '../store/apps.ts'
 import { useUpdatesStore } from '../store/updates.ts'
-import { canDisable, canEnable, canForceEnable, canInstall, canUninstall, canUpdate } from '../utils/appStatus.ts'
+import { canDisable, canEnable, canInstall, canUninstall, canUpdate, needForceEnable } from '../utils/appStatus.ts'
+
+type AppAction = {
+	id: string
+	icon: string
+	label: (app: IAppstoreApp | IAppstoreExApp) => string
+	callback: (app: IAppstoreApp | IAppstoreExApp) => Promise<void>
+	variant?: 'primary' | 'error' | 'warning'
+	inline?: boolean
+}
 
 const AppAction = Object.freeze({
 	INSTALL: {
 		id: 'install',
 		icon: mdiDownload,
-		variant: 'primary',
 		label: (app: IAppstoreApp | IAppstoreExApp) => {
 			if (app.app_api) {
 				return t('appstore', 'Deploy and enable')
 			}
-			return t('appstore', 'Download and enable')
+			if (app.needsDownload) {
+				return t('appstore', 'Download and enable')
+			}
+			return t('appstore', 'Install and enable')
 		},
 		async callback(app: IAppstoreApp | IAppstoreExApp) {
 			const store = useAppsStore()
 			await store.enableApp(app.id)
 		},
-	} as const,
+	} as AppAction,
 	ENABLE: {
 		id: 'enable',
 		icon: mdiCheck,
@@ -38,37 +49,38 @@ const AppAction = Object.freeze({
 			const store = useAppsStore()
 			await store.enableApp(app.id)
 		},
-	} as const,
+	} as AppAction,
 	FORCE_ENABLE: {
 		id: 'force-enable',
-		icon: mdiCheck,
-		variant: 'primary',
+		icon: mdiAlertCircleCheckOutline,
+		inline: false,
 		label: () => t('appstore', 'Force enable'),
+		variant: 'warning',
 		async callback(app: IAppstoreApp | IAppstoreExApp) {
 			const store = useAppsStore()
 			await store.forceEnableApp(app.id)
 		},
-	} as const,
+	} as AppAction,
 	DISABLE: {
 		id: 'disable',
 		icon: mdiClose,
-		variant: 'tertiary',
 		label: () => t('appstore', 'Disable'),
 		async callback(app: IAppstoreApp | IAppstoreExApp) {
 			const store = useAppsStore()
 			await store.disableApp(app.id)
 		},
-	} as const,
+	} as AppAction,
 	REMOVE: {
 		id: 'remove',
 		icon: mdiTrashCanOutline,
 		variant: 'error',
+		inline: false,
 		label: () => t('appstore', 'Remove'),
 		async callback(app: IAppstoreApp | IAppstoreExApp) {
 			const store = useAppsStore()
 			await store.uninstallApp(app.id)
 		},
-	} as const,
+	} as AppAction,
 	UPDATE: {
 		id: 'update',
 		icon: mdiUpdate,
@@ -78,7 +90,7 @@ const AppAction = Object.freeze({
 			const store = useUpdatesStore()
 			await store.updateApp(app.id)
 		},
-	} as const,
+	} as AppAction,
 })
 
 /**
@@ -97,12 +109,12 @@ export function useActions(app: MaybeRefOrGetter<IAppstoreApp | IAppstoreExApp>)
 			actions.push(AppAction.DISABLE)
 		}
 
-		if (canInstall(toValue(app))) {
+		if (needForceEnable(toValue(app))) {
+			actions.push(AppAction.FORCE_ENABLE)
+		} else if (canInstall(toValue(app))) {
 			actions.push(AppAction.INSTALL)
 		} else if (canEnable(toValue(app))) {
 			actions.push(AppAction.ENABLE)
-		} else if (canForceEnable(toValue(app))) {
-			actions.push(AppAction.FORCE_ENABLE)
 		}
 
 		if (canUninstall(toValue(app))) {

apps/appstore/src/router/routes.ts

@@ -13,6 +13,7 @@ const appstoreEnabled = loadState<boolean>('appstore', 'appstoreEnabled', true)
 // Dynamic loading
 const AppstoreDiscover = defineAsyncComponent(() => import('../views/AppstoreDiscover.vue'))
 const AppstoreManage = defineAsyncComponent(() => import('../views/AppstoreManage.vue'))
+const AppstoreBundles = defineAsyncComponent(() => import('../views/AppstoreBundles.vue'))
 
 const routes: RouteRecordRaw[] = [
 	{
@@ -32,6 +33,11 @@ const routes: RouteRecordRaw[] = [
 				name: 'apps-discover',
 				component: AppstoreDiscover,
 			},
+			{
+				path: 'bundles/:id?',
+				name: 'apps-bundles',
+				component: AppstoreBundles,
+			},
 			{
 				path: ':category(installed|enabled|disabled|updates)/:id?',
 				name: 'apps-manage',

apps/appstore/src/service/api.ts

@@ -9,6 +9,7 @@ import type { IAppstoreApp, IAppstoreCategory } from '../apps.d.ts'
 import axios from '@nextcloud/axios'
 import { addPasswordConfirmationInterceptors, PwdConfirmationMode } from '@nextcloud/password-confirmation'
 import { generateOcsUrl } from '@nextcloud/router'
+import PQueue from 'p-queue'
 import { APPSTORE_CATEGORY_ICONS } from '../constants.ts'
 
 addPasswordConfirmationInterceptors(axios)
@@ -24,13 +25,17 @@ const Url = Object.freeze({
 	update: `${BASE_URL}/apps/update`,
 })
 
+const queue = new PQueue({ concurrency: 1 })
+
 /**
  * Force enable app by ignoring its dependencies
  *
  * @param appId - The app to force enable
  */
 export async function forceEnableApp(appId: string) {
-	await axios.post(Url.forceEnable, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	return queue.add(async () => {
+		await axios.post(Url.forceEnable, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	})
 }
 
 /**
@@ -39,7 +44,9 @@ export async function forceEnableApp(appId: string) {
  * @param appId - The app to enable
  */
 export async function enableApp(appId: string) {
-	await axios.post(Url.enable, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	return queue.add(async () => {
+		await axios.post(Url.enable, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	})
 }
 
 /**
@@ -48,7 +55,9 @@ export async function enableApp(appId: string) {
  * @param appId - The app to disable
  */
 export async function disableApp(appId: string) {
-	await axios.post(Url.disable, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	return queue.add(async () => {
+		await axios.post(Url.disable, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	})
 }
 
 /**
@@ -57,7 +66,9 @@ export async function disableApp(appId: string) {
  * @param appId - The app id to update
  */
 export async function updateApp(appId: string) {
-	await axios.post(Url.update, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	return queue.add(async () => {
+		await axios.post(Url.update, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	})
 }
 
 /**
@@ -66,7 +77,9 @@ export async function updateApp(appId: string) {
  * @param appId - The app to uninstall
  */
 export async function uninstallApp(appId: string) {
-	await axios.post(Url.uninstall, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	return queue.add(async () => {
+		await axios.post(Url.uninstall, { appId }, { confirmPassword: PwdConfirmationMode.Strict })
+	})
 }
 
 /**

apps/appstore/src/utils/appStatus.ts

@@ -11,7 +11,20 @@ import type { IAppstoreApp, IAppstoreExApp } from '../apps.d.ts'
  * @param app - The app to check if installable
  */
 export function canInstall(app: IAppstoreApp | IAppstoreExApp) {
-	return !app.installed && (!app.missingDependencies || app.missingDependencies.length === 0)
+	if (app.installed || app.internal) {
+		return false
+	}
+
+	if (app.missingDependencies === undefined || app.missingDependencies.length === 0) {
+		return true
+	}
+
+	if (!app.isCompatible && app.missingDependencies.length === 1) {
+		// incompatible so can be installed but has to be force-enabled
+		return true
+	}
+
+	return false
 }
 
 /**
@@ -41,6 +54,15 @@ export function canForceEnable(app: IAppstoreApp | IAppstoreExApp) {
 	return !app.active && (app.installed || canInstall(app))
 }
 
+/**
+ * Check if an app needs to be force-enabled
+ *
+ * @param app - The app to check
+ */
+export function needForceEnable(app: IAppstoreApp | IAppstoreExApp) {
+	return !app.active && !app.isCompatible
+}
+
 /**
  * Check if an app can be disabled.
  *