From 9ace7b8a348ecf58497f72e0731ca3f0ee972bf3 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 27 Feb 2024 15:50:41 +0100
Subject: [PATCH 1/6] Warn user before closing browser when upload is in
 progress

---
 packages/web-runtime/src/components/UploadInfo.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 434ca225f18..53114cc9651 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -175,7 +175,7 @@ export default defineComponent({
   components: { ResourceListItem, ResourceIcon, ResourceName },
   setup() {
     const capabilityStore = useCapabilityStore()
-    const capabilityRefs = storeToRefs(capabilityStore)
+
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
 
@@ -283,6 +283,12 @@ export default defineComponent({
       return requestIds.map((item) => `X-Request-Id: ${item}`).join('\r\n')
     }
   },
+  mounted() {
+    window.addEventListener('beforeunload', this.onBeforeUnload)
+  },
+  unmounted() {
+    window.removeEventListener('beforeunload', this.onBeforeUnload)
+  },
   created() {
     this.$uppyService.subscribe('uploadStarted', () => {
       if (!this.remainingTime) {
@@ -649,6 +655,11 @@ export default defineComponent({
     },
     getUploadItemClass(item) {
       return this.errors[item.meta.uploadId] ? 'upload-info-danger' : 'upload-info-success'
+    },
+    onBeforeUnload(e: BeforeUnloadEvent) {
+      if (this.runningUploads) {
+        e.preventDefault()
+      }
     }
   }
 })
@@ -693,6 +704,7 @@ export default defineComponent({
   .upload-info-danger {
     color: var(--oc-color-swatch-danger-default);
   }
+
   .upload-info-success {
     color: var(--oc-color-swatch-success-default);
   }

From 51f8a76f8f7aa2fa348aae87a7e4227d9fd1dd2a Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 27 Feb 2024 15:53:30 +0100
Subject: [PATCH 2/6] Add changelog item

---
 ...nhancement-warn-user-before-close-browser-when-uploading | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading

diff --git a/changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading b/changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading
new file mode 100644
index 00000000000..cb991c7cc42
--- /dev/null
+++ b/changelog/unreleased/enhancement-warn-user-before-close-browser-when-uploading
@@ -0,0 +1,6 @@
+Enhancement: Warn user before closing browser when upload is in progress
+
+We've added a warning message for the user, if they try to close the browser while upload is in progress.
+
+https://github.com/owncloud/web/pull/10519
+https://github.com/owncloud/web/issues/10500

From 194804928917bea3ddc89ee3a7918dca7c162064 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 27 Feb 2024 16:33:52 +0100
Subject: [PATCH 3/6] Use watcher

---
 .../web-runtime/src/components/UploadInfo.vue   | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 53114cc9651..443b812f6b2 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -160,7 +160,7 @@ import { isUndefined } from 'lodash-es'
 import getSpeed from '@uppy/utils/lib/getSpeed'
 
 import { urlJoin } from '@ownclouders/web-client/src/utils'
-import { useCapabilityStore, useConfigStore } from '@ownclouders/web-pkg'
+import { useConfigStore } from '@ownclouders/web-pkg'
 import {
   formatFileSize,
   UppyResource,
@@ -174,8 +174,6 @@ import { storeToRefs } from 'pinia'
 export default defineComponent({
   components: { ResourceListItem, ResourceIcon, ResourceName },
   setup() {
-    const capabilityStore = useCapabilityStore()
-
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
 
@@ -283,11 +281,14 @@ export default defineComponent({
       return requestIds.map((item) => `X-Request-Id: ${item}`).join('\r\n')
     }
   },
-  mounted() {
-    window.addEventListener('beforeunload', this.onBeforeUnload)
-  },
-  unmounted() {
-    window.removeEventListener('beforeunload', this.onBeforeUnload)
+  watch: {
+    runningUploads(val) {
+      if (val === 0) {
+        return window.removeEventListener('beforeunload', (this as any).onBeforeUnload)
+      }
+
+      return window.addEventListener('beforeunload', (this as any).onBeforeUnload)
+    }
   },
   created() {
     this.$uppyService.subscribe('uploadStarted', () => {

From 11ad12a7e94f895f8aa1c8277ddbbbf8ab77f783 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 27 Feb 2024 18:44:22 +0100
Subject: [PATCH 4/6] Move to composition api

---
 .../web-runtime/src/components/UploadInfo.vue | 91 +++++++++++--------
 1 file changed, 54 insertions(+), 37 deletions(-)

diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 443b812f6b2..4e7cff88108 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch, unref } from 'vue'
 import { isUndefined } from 'lodash-es'
 import getSpeed from '@uppy/utils/lib/getSpeed'
 
@@ -177,31 +177,62 @@ export default defineComponent({
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
 
+    const showInfo = ref(false) // show the overlay?
+    const infoExpanded = ref(false) // show the info including all uploads?
+    const uploads = ref<Record<any, any>>({}) // uploads that are being displayed via "infoExpanded"
+    const errors = ref({}) // all failed files
+    const successful = ref([]) // all successful files
+    const filesInProgressCount = ref(0) // files (not folders!) that are being processed currently
+    const totalProgress = ref(0) // current uploads progress (0-100)
+    const uploadsPaused = ref(false) // all uploads paused?
+    const uploadsCancelled = ref(false) // all uploads cancelled?
+    const inFinalization = ref(false) // uploads transferred but still need to be finalized
+    const inPreparation = ref(true) // preparation before upload
+    const runningUploads = ref(0) // all uploads (not files!) that are in progress currently
+    const bytesTotal = ref(0)
+    const bytesUploaded = ref(0)
+    const uploadSpeed = ref(0)
+    const filesInEstimation = ref({})
+    const timeStarted = ref(null)
+    const remainingTime = ref(undefined)
+    const disableActions = ref(false) // disables the following actions: pause, resume, retry
+
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (unref(runningUploads)) {
+        e.preventDefault()
+      }
+    }
+
+    watch(runningUploads, (val) => {
+      if (val === 0) {
+        return window.removeEventListener('beforeunload', onBeforeUnload)
+      }
+      return window.addEventListener('beforeunload', onBeforeUnload)
+    })
+
     return {
-      configOptions
+      configOptions,
+      showInfo,
+      infoExpanded,
+      uploads,
+      errors,
+      successful,
+      filesInProgressCount,
+      totalProgress,
+      uploadsPaused,
+      uploadsCancelled,
+      inFinalization,
+      inPreparation,
+      runningUploads,
+      bytesTotal,
+      bytesUploaded,
+      uploadSpeed,
+      filesInEstimation,
+      timeStarted,
+      remainingTime,
+      disableActions
     }
   },
-  data: () => ({
-    showInfo: false, // show the overlay?
-    infoExpanded: false, // show the info including all uploads?
-    uploads: {} as Record<any, any>, // uploads that are being displayed via "infoExpanded"
-    errors: {}, // all failed files
-    successful: [], // all successful files
-    filesInProgressCount: 0, // files (not folders!) that are being processed currently
-    totalProgress: 0, // current uploads progress (0-100)
-    uploadsPaused: false, // all uploads paused?
-    uploadsCancelled: false, // all uploads cancelled?
-    inFinalization: false, // uploads transferred but still need to be finalized
-    inPreparation: true, // preparation before upload
-    runningUploads: 0, // all uploads (not files!) that are in progress currently
-    bytesTotal: 0,
-    bytesUploaded: 0,
-    uploadSpeed: 0,
-    filesInEstimation: {},
-    timeStarted: null,
-    remainingTime: undefined,
-    disableActions: false // disables the following actions: pause, resume, retry
-  }),
   computed: {
     uploadDetails() {
       if (!this.uploadSpeed || !this.runningUploads) {
@@ -281,15 +312,6 @@ export default defineComponent({
       return requestIds.map((item) => `X-Request-Id: ${item}`).join('\r\n')
     }
   },
-  watch: {
-    runningUploads(val) {
-      if (val === 0) {
-        return window.removeEventListener('beforeunload', (this as any).onBeforeUnload)
-      }
-
-      return window.addEventListener('beforeunload', (this as any).onBeforeUnload)
-    }
-  },
   created() {
     this.$uppyService.subscribe('uploadStarted', () => {
       if (!this.remainingTime) {
@@ -656,11 +678,6 @@ export default defineComponent({
     },
     getUploadItemClass(item) {
       return this.errors[item.meta.uploadId] ? 'upload-info-danger' : 'upload-info-success'
-    },
-    onBeforeUnload(e: BeforeUnloadEvent) {
-      if (this.runningUploads) {
-        e.preventDefault()
-      }
     }
   }
 })

From b570da51e4aed6b3a96e5ceea2eb4d05687dd96a Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 27 Feb 2024 19:59:30 +0100
Subject: [PATCH 5/6] Fix unit tests

---
 .../tests/unit/components/UploadInfo.spec.ts  | 245 ++++++++----------
 1 file changed, 108 insertions(+), 137 deletions(-)

diff --git a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
index 29383c5e3e4..5751486e738 100644
--- a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
+++ b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
@@ -1,6 +1,7 @@
 import UploadInfo from '../../../src/components/UploadInfo.vue'
 import { defaultPlugins, shallowMount, defaultComponentMocks } from 'web-test-helpers'
 import { ResourceListItem } from '@ownclouders/web-pkg'
+import { nextTick } from 'vue'
 
 const selectors = {
   overlay: '#upload-info',
@@ -21,150 +22,145 @@ describe('UploadInfo component', () => {
     const overlay = wrapper.find(selectors.overlay)
     expect(overlay.exists()).toBeFalsy()
   })
-  it('should show the component', () => {
-    const { wrapper } = getShallowWrapper({ showInfo: true })
+  it('should show the component', async () => {
+    const { wrapper } = getShallowWrapper()
+    wrapper.vm.showInfo = true
+    await nextTick()
     const overlay = wrapper.find(selectors.overlay)
     expect(overlay.exists()).toBeTruthy()
   })
   describe('title', () => {
-    it('should show that an upload is in progress', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 1,
-        runningUploads: 1
-      })
+    it('should show that an upload is in progress', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.filesInProgressCount = 1
+      wrapper.vm.runningUploads = 1
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('1 item uploading...')
     })
-    it('should show that an upload was successful', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        successful: ['1'],
-        errors: {}
-      })
+    it('should show that an upload was successful', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.successful = ['1']
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Upload complete')
     })
-    it('should show that an upload failed', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: [{ name: 'file', type: 'file' }],
-        successful: []
-      })
+    it('should show that an upload failed', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      ;(wrapper.vm.errors = [{ name: 'file', type: 'file' }]), await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Upload failed')
     })
-    it('should show that an upload was cancelled', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: {},
-        successful: [],
-        uploadsCancelled: true
-      })
+    it('should show that an upload was cancelled', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.uploadsCancelled = true
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Upload cancelled')
     })
-    it('should show that an upload is preparing', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 1,
-        inPreparation: true
-      })
+    it('should show that an upload is preparing', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.runningUploads = 1
+      wrapper.vm.inPreparation = true
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Preparing upload...')
     })
-    it('should show that an upload is being finalized', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 1,
-        runningUploads: 1,
-        inFinalization: true,
-        errors: [],
-        successful: []
-      })
+    it('should show that an upload is being finalized', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.filesInProgressCount = 1
+      wrapper.vm.runningUploads = 1
+      wrapper.vm.inFinalization = true
+      await nextTick()
+
       const uploadTitle = wrapper.find(selectors.title).text()
       expect(uploadTitle).toBe('Finalizing upload...')
     })
   })
   describe('progress bar', () => {
-    it('should show the progress bar when an upload is in progress', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 1,
-        runningUploads: 1
-      })
+    it('should show the progress bar when an upload is in progress', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.filesInProgressCount = 1
+      wrapper.vm.runningUploads = 1
+      await nextTick()
+
       const progressBar = wrapper.find(selectors.progress)
       expect(progressBar.exists()).toBeTruthy()
     })
   })
   describe('info', () => {
-    it('should show the number of successful items', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: {},
-        successful: ['1', '2']
-      })
+    it('should show the number of successful items', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.successful = ['1', '2']
+      await nextTick()
+
       const info = wrapper.find(selectors.success).text()
       expect(info).toBe('2 items uploaded')
     })
-    it('should show the number of failed items', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        filesInProgressCount: 0,
-        runningUploads: 0,
-        errors: [{ name: 'file', type: 'file' }],
-        successful: ['1']
-      })
+    it('should show the number of failed items', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.errors = [{ name: 'file', type: 'file' }]
+      wrapper.vm.successful = ['1']
+      await nextTick()
+
       const info = wrapper.find(selectors.error).text()
       expect(info).toBe('1 of 2 items failed')
     })
   })
   describe('details', () => {
-    it('should hide the info by default', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true
-      })
+    it('should hide the info by default', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      await nextTick()
+
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeFalsy()
     })
-    it('should list all the uploaded files when the info is displayed', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        infoExpanded: true,
-        uploads: [
-          { name: 'file', type: 'file', meta: { uploadId: '1' } },
-          { name: 'file2', type: 'file', meta: { uploadId: '2' } }
-        ]
-      })
+    it('should list all the uploaded files when the info is displayed', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.infoExpanded = true
+      wrapper.vm.uploads = [
+        { name: 'file', type: 'file', meta: { uploadId: '1' } },
+        { name: 'file2', type: 'file', meta: { uploadId: '2' } }
+      ]
+      await nextTick()
+
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeTruthy()
 
       const uploadedItems = wrapper.findAll(selectors.info.item)
       expect(uploadedItems.length).toBe(2)
     })
-    it('should show a message on the failed uploaded files', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        infoExpanded: true,
-        uploads: [
-          { name: 'file', type: 'file', meta: { uploadId: '1' } },
-          { name: 'file2', type: 'file', meta: { uploadId: '2' } },
-          { name: 'file3', type: 'file', meta: { uploadId: '3' } }
-        ],
-        errors: {
+    it('should show a message on the failed uploaded files', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.infoExpanded = true
+      ;(wrapper.vm.uploads = [
+        { name: 'file', type: 'file', meta: { uploadId: '1' } },
+        { name: 'file2', type: 'file', meta: { uploadId: '2' } },
+        { name: 'file3', type: 'file', meta: { uploadId: '3' } }
+      ]),
+        (wrapper.vm.errors = {
           1: new Error(),
           2: new Error()
-        }
-      })
+        })
+      await nextTick()
+
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeTruthy()
 
@@ -173,21 +169,21 @@ describe('UploadInfo component', () => {
       expect(infoMessages.at(0).text()).toBe('Unknown error')
       expect(infoMessages.at(0).text()).toBe('Unknown error')
     })
-    it('folder is clickable', () => {
-      const { wrapper } = getShallowWrapper({
-        showInfo: true,
-        infoExpanded: true,
-        uploads: [
-          {
-            name: 'file',
-            type: 'folder',
-            isFolder: true,
-            targetRoute: { params: { driveAliasAndItem: 'some/drive/alias' } },
-            path: '',
-            meta: { uploadId: '1' }
-          }
-        ]
-      })
+    it('folder is clickable', async () => {
+      const { wrapper } = getShallowWrapper()
+      wrapper.vm.showInfo = true
+      wrapper.vm.infoExpanded = true
+      wrapper.vm.uploads = [
+        {
+          name: 'file',
+          type: 'folder',
+          isFolder: true,
+          targetRoute: { params: { driveAliasAndItem: 'some/drive/alias' } },
+          path: '',
+          meta: { uploadId: '1' }
+        }
+      ]
+      await nextTick()
 
       const info = wrapper.find(selectors.info.items)
       expect(info.exists()).toBeTruthy()
@@ -211,18 +207,7 @@ describe('UploadInfo component', () => {
   })
 })
 
-function getShallowWrapper({
-  showInfo = false,
-  infoExpanded = false,
-  uploads = [],
-  filesInProgressCount = 0,
-  runningUploads = 0,
-  successful = [],
-  errors = {},
-  uploadsCancelled = false,
-  inPreparation = false,
-  inFinalization = false
-} = {}) {
+function getShallowWrapper() {
   const mocks = {
     ...defaultComponentMocks()
   }
@@ -230,20 +215,6 @@ function getShallowWrapper({
   return {
     mocks,
     wrapper: shallowMount(UploadInfo, {
-      data() {
-        return {
-          showInfo,
-          infoExpanded,
-          uploads,
-          filesInProgressCount,
-          runningUploads,
-          successful,
-          errors,
-          uploadsCancelled,
-          inPreparation,
-          inFinalization
-        }
-      },
       global: {
         plugins: [...defaultPlugins()],
         mocks

From c83ae7ce37f2280a27bba25e01728f404e5921f9 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 27 Feb 2024 20:02:15 +0100
Subject: [PATCH 6/6] Fix unit tests

---
 packages/web-runtime/tests/unit/components/UploadInfo.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
index 5751486e738..515ed7c3964 100644
--- a/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
+++ b/packages/web-runtime/tests/unit/components/UploadInfo.spec.ts
@@ -33,6 +33,7 @@ describe('UploadInfo component', () => {
     it('should show that an upload is in progress', async () => {
       const { wrapper } = getShallowWrapper()
       wrapper.vm.showInfo = true
+      wrapper.vm.inPreparation = false
       wrapper.vm.filesInProgressCount = 1
       wrapper.vm.runningUploads = 1
       await nextTick()