From 6d173e5b2cb5a4d3084e1fdba56734c5d372f1df Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 7 Oct 2024 17:03:24 +0200
Subject: [PATCH] Feat: Add warning popup to editors, when file exceeds
 threshold

---
 .../components/AppTemplates/AppWrapper.vue    | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index 82b4429bb12..a72549c00a5 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -91,6 +91,10 @@ import { HttpError } from '@ownclouders/web-client'
 import { dirname } from 'path'
 import { useFileActionsOpenWithApp } from '../../composables/actions/files/useFileActionsOpenWithApp'
 import { UnsavedChangesModal } from '../Modals'
+import { formatFileSize } from '../../helpers'
+import toNumber from 'lodash-es/toNumber'
+
+const FILE_SIZE_WARNING_THRESHOLD = 4000000
 
 export default defineComponent({
   name: 'AppWrapper',
@@ -126,7 +130,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $gettext } = useGettext()
+    const { $gettext, current: currentLanguage } = useGettext()
     const appsStore = useAppsStore()
     const { showMessage, showErrorMessage } = useMessages()
     const router = useRouter()
@@ -264,17 +268,24 @@ export default defineComponent({
       })
     }
 
-    const loadFileTask = useTask(function* (signal) {
+    const loadResourceTask = useTask(function* (signal) {
       try {
         if (!unref(driveAliasAndItem)) {
           yield addMissingDriveAliasAndItem()
         }
-
         space.value = unref(unref(currentFileContext).space)
-        resource.value = yield getFileInfo(currentFileContext)
+        resource.value = yield getFileInfo(currentFileContext, { signal })
         resourcesStore.initResourceList({ currentFolder: null, resources: [unref(resource)] })
         selectedResources.value = [unref(resource)]
+      } catch (e) {
+        console.error(e)
+        loadingError.value = e
+        loading.value = false
+      }
+    }).restartable()
 
+    const loadFileTask = useTask(function* (signal) {
+      try {
         const newExtension = props.importResourceWithExtension(unref(resource))
         if (newExtension) {
           const timestamp = DateTime.local().toFormat('yyyyMMddHHmmss')
@@ -318,19 +329,43 @@ export default defineComponent({
             signal
           })
         }
-        loading.value = false
       } catch (e) {
         console.error(e)
         loadingError.value = e
+      } finally {
         loading.value = false
       }
     }).restartable()
 
     watch(
       currentFileContext,
-      () => {
+      async () => {
         if (!unref(noResourceLoading)) {
-          loadFileTask.perform()
+          await loadResourceTask.perform()
+
+          if (unref(isEditor) && toNumber(unref(resource).size) > FILE_SIZE_WARNING_THRESHOLD) {
+            dispatchModal({
+              title: $gettext('File %{resource} exceeds %{threshold}', {
+                resource: unref(resource).name,
+                threshold: formatFileSize(FILE_SIZE_WARNING_THRESHOLD, currentLanguage)
+              }),
+              message: $gettext(
+                'This file exceeds the recommended size of %{threshold} for editing, and may cause performance issues.',
+                {
+                  threshold: formatFileSize(FILE_SIZE_WARNING_THRESHOLD, currentLanguage)
+                }
+              ),
+              confirmText: $gettext('Continue'),
+              onCancel: () => {
+                closeApp()
+              },
+              onConfirm: () => {
+                loadFileTask.perform()
+              }
+            })
+          } else {
+            loadFileTask.perform()
+          }
         }
       },
       { immediate: true }