Start implementation of quota exceeded check

changelog/unreleased/bugfix-show-message-while-upload-size-exceeds-quota

@@ -0,0 +1,6 @@
+Bugfix: Show message while upload size exceeds quota
+
+We fixed a bug where an upload silently failed if the upload size exceeds the space quota. It now displays a detailed message instead
+
+https://github.com/owncloud/web/pull/7032
+https://github.com/owncloud/web/issues/7025

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -103,6 +103,7 @@
 <script lang="ts">
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import pathUtil from 'path'
+import filesize from 'filesize'
 
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
@@ -185,7 +186,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
-    ...mapGetters('Files', ['files', 'currentFolder', 'publicLinkPassword']),
+    ...mapGetters('Files', ['files', 'currentFolder', 'publicLinkPassword', 'spaces']),
     ...mapState('Files', ['areFileExtensionsShown']),
 
     mimetypesAllowedForCreation() {
@@ -264,7 +265,13 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files', ['loadPreview', 'loadIndicators']),
-    ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
+    ...mapActions([
+      'openFile',
+      'showMessage',
+      'createModal',
+      'setModalInputErrorMessage',
+      'hideModal'
+    ]),
     ...mapMutations('Files', ['UPSERT_RESOURCE']),
     ...mapMutations(['SET_QUOTA']),
 
@@ -662,6 +669,12 @@ export default defineComponent({
     onFilesSelected(files: File[]) {
       const conflicts = []
       const uppyResources: UppyResource[] = this.inputFilesToUppyFiles(files)
+      const quotaExceeded = this.checkQuotaExceeded(uppyResources)
+
+      if (quotaExceeded) {
+        return this.$uppyService.clearInputs()
+      }
+
       for (const file of uppyResources) {
         const relativeFilePath = file.meta.relativePath
         if (relativeFilePath) {
@@ -695,6 +708,69 @@ export default defineComponent({
       }
     },
 
+    checkQuotaExceeded(uppyResources: UppyResource[]) {
+      let quotaExceeded = false
+
+      const uploadSizeSpaceMapping = uppyResources.reduce((acc, uppyResource) => {
+        let targetUploadSpace
+
+        if (uppyResource.meta.route.params?.storage === 'home') {
+          targetUploadSpace = this.spaces.find((space) => space.driveType === 'personal')
+        } else {
+          targetUploadSpace = this.spaces.find(
+            (space) => space.id === uppyResource.meta.route?.params?.storageId
+          )
+        }
+
+        if (!targetUploadSpace) {
+          return acc
+        }
+
+        const matchingMappingRecord = acc.find(
+          (mappingRecord) => mappingRecord.space.id === targetUploadSpace.id
+        )
+
+        if (!matchingMappingRecord) {
+          acc.push({
+            space: targetUploadSpace,
+            uploadSize: uppyResource.data.size
+          })
+          return acc
+        }
+
+        matchingMappingRecord.uploadSize += uppyResource.data.size
+
+        return acc
+      }, [])
+
+      uploadSizeSpaceMapping.forEach(({ space, uploadSize }) => {
+        if (space.spaceQuota.remaining && space.spaceQuota.remaining < uploadSize) {
+          let spaceName = space.name
+
+          if (space.driveType === 'personal') {
+            spaceName = this.$gettext('Personal')
+          }
+
+          const translated = this.$gettext(
+            'There is not enough quota on %{spaceName}, you need additional %{missingSpace} to upload these files'
+          )
+
+          this.showMessage({
+            title: this.$gettext('Not enough quota'),
+            desc: this.$gettextInterpolate(translated, {
+              spaceName,
+              missingSpace: filesize((space.spaceQuota.remaining - uploadSize) * -1)
+            }),
+            status: 'danger'
+          })
+
+          quotaExceeded = true
+        }
+      })
+
+      return quotaExceeded
+    },
+
     async handleUppyFileUpload(files: UppyResource[]) {
       await this.createDirectoryTree(files)
       await this.updateStoreForCreatedFolders(files)
@@ -736,7 +812,10 @@ export default defineComponent({
         message,
         cancelText: this.$gettext('Cancel'),
         confirmText: isVersioningEnabled ? this.$gettext('Create') : this.$gettext('Overwrite'),
-        onCancel: this.hideModal,
+        onCancel: () => {
+          this.$uppyService.clearInputs()
+          this.hideModal()
+        },
         onConfirm: () => {
           this.hideModal()
           this.handleUppyFileUpload(files)

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.js

@@ -163,6 +163,54 @@ describe('CreateAndUpload component', () => {
       }
     )
   })
+
+  describe('method "checkQuotaExceeded"', () => {
+    it('should be true if space quota exceeded', () => {
+      const store = createStore({ currentFolder }, newFileHandlers)
+      const wrapper = getShallowWrapper(route, store)
+      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
+      expect(
+        wrapper.vm.checkQuotaExceeded([
+          {
+            data: {
+              size: 1001
+            },
+            meta: {
+              route: {
+                params: {
+                  storage: 'home'
+                }
+              }
+            }
+          }
+        ])
+      ).toBeTruthy()
+      expect(showMessageStub).toHaveBeenCalledTimes(1)
+    })
+
+    it('should be false if space quota not exceeded', () => {
+      const store = createStore({ currentFolder }, newFileHandlers)
+      const wrapper = getShallowWrapper(route, store)
+      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
+      expect(
+        wrapper.vm.checkQuotaExceeded([
+          {
+            data: {
+              size: 999
+            },
+            meta: {
+              route: {
+                params: {
+                  storage: 'home'
+                }
+              }
+            }
+          }
+        ])
+      ).toBeFalsy()
+      expect(showMessageStub).toHaveBeenCalledTimes(0)
+    })
+  })
 })
 
 function getFileHandlerSelector(extension) {
@@ -224,6 +272,11 @@ function getShallowWrapper(route = {}, store = {}) {
 
 function createStore(state = { currentFolder: {} }, fileHandlers = []) {
   return new Vuex.Store({
+    actions: {
+      createModal: jest.fn(),
+      hideModal: jest.fn(),
+      showMessage: jest.fn()
+    },
     getters: {
       user: function () {
         return { id: 'alice' }
@@ -238,10 +291,27 @@ function createStore(state = { currentFolder: {} }, fileHandlers = []) {
           currentFolder: {
             path: '/'
           },
+          spaces: [
+            {
+              id: '1',
+              name: 'admin',
+              driveType: 'personal'
+            }
+          ],
           ...state
         },
         getters: {
-          currentFolder: () => state.currentFolder
+          currentFolder: () => state.currentFolder,
+          spaces: () => [
+            {
+              id: '1',
+              name: 'admin',
+              driveType: 'personal',
+              spaceQuota: {
+                remaining: 1000
+              }
+            }
+          ]
         }
       }
     }

packages/web-runtime/src/services/uppyService.ts

@@ -201,15 +201,11 @@ export class UppyService {
       result.failed.forEach((file) => {
         this.publish('uploadError', file)
       })
-      this.uploadInputs.forEach((item) => {
-        item.value = null
-      })
+      this.clearInputs()
     })
     this.uppy.on('file-removed', () => {
       this.publish('uploadRemoved')
-      this.uploadInputs.forEach((item) => {
-        item.value = null
-      })
+      this.clearInputs()
     })
     this.uppy.on('file-added', (file) => {
       this.publish('fileAdded')
@@ -258,4 +254,10 @@ export class UppyService {
       }
     })
   }
+
+  clearInputs() {
+    this.uploadInputs.forEach((item) => {
+      item.value = null
+    })
+  }
 }