feat(editLocallyAction): Handle possible no local client scenario

Resolves: #46438

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

apps/files/src/actions/editLocallyAction.ts

@@ -9,9 +9,15 @@ import { FileAction, Permission, type Node } from '@nextcloud/files'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import axios from '@nextcloud/axios'
-
+import { spawnDialog } from '@nextcloud/dialogs'
 import LaptopSvg from '@mdi/svg/svg/laptop.svg?raw'
+import ConfirmLocalEditModal from '../components/modals/ConfirmLocalEditModal.vue'
+
+var openingLocally: Boolean = false
 
+const startOpenLocalProcess = async function (path: string) {
+	showConfirmLocalEditModal(path)
+}
 const openLocalClient = async function(path: string) {
 	const link = generateOcsUrl('apps/files/api/v1') + '/openlocaleditor?format=json'
 
@@ -27,6 +33,27 @@ const openLocalClient = async function(path: string) {
 	}
 }
 
+
+const showConfirmLocalEditModal = async function(path: string, fileName: string = '') {
+	spawnDialog(
+		ConfirmLocalEditModal,
+		{
+			name: t('richdocuments', 'Open file locally'),
+			description: t('richdocuments', 'The file should now open locally. If you don\'t see this happening, make sure that the desktop client is installed on your system.'),
+			confirmButtonText: t('richdocuments', 'Retry to open locally'),
+			cancelButtonText: t('richdocuments', 'Continue editing online'),
+		},
+		(decision) => {
+			if (!decision) {
+				window.OCA.Viewer.open({ path: fileName })
+				return
+			}
+			openingLocally = true
+			openLocalClient
+		},
+	)
+}
+
 export const action = new FileAction({
 	id: 'edit-locally',
 	displayName: () => t('files', 'Edit locally'),

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -262,6 +262,7 @@ export default defineComponent({
 		},
 
 		async onActionClick(action, isSubmenu = false) {
+			debugger
 			// Skip click on loading
 			if (this.isLoading || this.loading !== '') {
 				return

apps/files/src/components/modals/ConfirmLocalEditModal.vue

@@ -0,0 +1,82 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcModal>
+		<div class="confirmation-dialog">
+			<h1>{{ name }}</h1>
+			<p>{{ description }}</p>
+			<div class="confirmation-dialog--buttons">
+				<NcButton type="secondary"
+					@click="() => close(false)">
+					{{ cancelButtonText }}
+				</NcButton>
+				<NcButton type="primary"
+					@click="() => close(true)">
+					{{ confirmButtonText }}
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import { translate as t } from '@nextcloud/l10n'
+
+export default {
+	name: 'ConfirmLocalEditModal',
+	components: {
+		NcButton,
+		NcModal,
+	},
+	props: {
+		name: {
+			type: String,
+			default: '',
+		},
+		description: {
+			type: String,
+			default: '',
+		},
+		confirmButtonText: {
+			type: String,
+			default: t('richdocuments', 'Confirm'),
+		},
+		cancelButtonText: {
+			type: String,
+			default: t('richdocuments', 'Cancel'),
+		},
+	},
+	emits: ['close'],
+	methods: {
+		t,
+		close(result) {
+			this.$emit('close', result)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.confirmation-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 24px;
+    h1 {
+        font-size: 120%;
+        font-weight: bold;
+        margin-bottom: 12px;
+    }
+
+    &--buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 24px;
+    }
+}
+</style>