Apply max quota to users and spaces

changelog/unreleased/enhnacement-respect-max-quota

@@ -0,0 +1,6 @@
+Enhancement: Respect max quota
+
+We've updated the quota-select component, so that values higher than max quota set on the server side won't be shown.
+
+https://github.com/owncloud/web/pull/8489
+https://github.com/owncloud/web/issues/8490

packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue

@@ -5,6 +5,7 @@
       v-if="quotaModalIsOpen"
       :cancel="closeQuotaModal"
       :spaces="items"
+      :max-quota="maxQuota"
       @space-quota-updated="spaceQuotaUpdated"
     />
   </div>
@@ -22,6 +23,7 @@ import { computed, defineComponent, getCurrentInstance, PropType, unref } from '
 import { Resource } from 'web-client'
 import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
 import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
+import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'ContextActions',
@@ -85,6 +87,7 @@ export default defineComponent({
       instance.$data.$_editQuota_selectedSpace.spaceQuota = quota
     }
     return {
+      maxQuota: useCapabilitySpacesMaxQuota(),
       menuSections,
       quotaModalIsOpen,
       closeQuotaModal,

packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue

@@ -4,6 +4,7 @@
       v-if="quotaModalIsOpen"
       :cancel="closeQuotaModal"
       :spaces="resources"
+      :max-quota="maxQuota"
       @space-quota-updated="spaceQuotaUpdated"
     />
     <oc-list id="oc-spaces-actions-sidebar" class-name="oc-mt-s">
@@ -29,6 +30,7 @@ import EditQuota from 'web-pkg/src/mixins/spaces/editQuota'
 import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
 import { computed, defineComponent, getCurrentInstance, inject, unref } from 'vue'
 import { Resource } from 'web-client'
+import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'ActionsPanel',
@@ -58,7 +60,14 @@ export default defineComponent({
     const spaceQuotaUpdated = (quota) => {
       instance.$data.$_editQuota_selectedSpace.spaceQuota = quota
     }
-    return { actions, quotaModalIsOpen, closeQuotaModal, spaceQuotaUpdated, resources }
+    return {
+      actions,
+      maxQuota: useCapabilitySpacesMaxQuota(),
+      quotaModalIsOpen,
+      closeQuotaModal,
+      spaceQuotaUpdated,
+      resources
+    }
   }
 })
 </script>

packages/web-app-admin-settings/src/components/Users/ContextActions.vue

@@ -5,6 +5,7 @@
       v-if="quotaModalIsOpen"
       :cancel="closeQuotaModal"
       :spaces="selectedPersonalDrives"
+      :max-quota="maxQuota"
       @space-quota-updated="spaceQuotaUpdated"
     />
   </div>
@@ -30,6 +31,7 @@ import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue'
 import EditQuota from 'web-pkg/src/mixins/spaces/editQuota'
 import { SpaceResource } from 'web-client/src'
 import { useGettext } from 'vue3-gettext'
+import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'ContextActions',
@@ -111,6 +113,7 @@ export default defineComponent({
     }
 
     return {
+      maxQuota: useCapabilitySpacesMaxQuota(),
       menuSections,
       quotaModalIsOpen,
       closeQuotaModal,

packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue

@@ -74,6 +74,7 @@
           class="oc-mb-s"
           :title="$gettext('Personal quota')"
           :total-quota="editUser.drive.quota.total || 0"
+          :max-quota="maxQuota"
           @selected-option-change="changeSelectedQuotaOption"
         />
         <p
@@ -109,6 +110,7 @@ import QuotaSelect from 'web-pkg/src/components/QuotaSelect.vue'
 import { cloneDeep } from 'lodash-es'
 import { Group, User } from 'web-client/src/generated'
 import { MaybeRef, useGraphClient, useStore } from 'web-pkg'
+import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'EditPanel',
@@ -151,7 +153,6 @@ export default defineComponent({
         valid: true
       }
     })
-
     const groupOptions = computed(() => {
       const { memberOf: selectedGroups } = unref(editUser)
       return props.groups
@@ -161,7 +162,14 @@ export default defineComponent({
 
     const isLoginInputDisabled = computed(() => currentUser.uuid === (props.user as User).id)
 
-    return { isLoginInputDisabled, editUser, formData, groupOptions, ...useGraphClient() }
+    return {
+      maxQaxQuota: useCapabilitySpacesMaxQuota(),
+      isLoginInputDisabled,
+      editUser,
+      formData,
+      groupOptions,
+      ...useGraphClient()
+    }
   },
   computed: {
     loginOptions() {

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -42,6 +42,7 @@
           v-if="quotaModalIsOpen"
           :cancel="closeQuotaModal"
           :spaces="selectedSpaces"
+          :max-quota="maxQuota"
           @space-quota-updated="spaceQuotaUpdated"
         />
         <no-content-message
@@ -76,7 +77,12 @@
 
 <script lang="ts">
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useGraphClient, useStore } from 'web-pkg/src/composables'
+import {
+  useAccessToken,
+  useCapabilitySpacesMaxQuota,
+  useGraphClient,
+  useStore
+} from 'web-pkg/src/composables'
 import {
   computed,
   defineComponent,
@@ -294,6 +300,7 @@ export default defineComponent({
     }
 
     return {
+      maxQuota: useCapabilitySpacesMaxQuota(),
       sideBarOpen,
       sideBarActivePanel,
       spaces,

packages/web-app-admin-settings/src/views/Users.vue

@@ -86,6 +86,7 @@
       v-if="quotaModalIsOpen"
       :cancel="closeQuotaModal"
       :spaces="selectedPersonalDrives"
+      :max-quota="maxQuota"
       @space-quota-updated="spaceQuotaUpdated"
     />
   </div>
@@ -106,6 +107,7 @@ import Delete from '../mixins/users/delete'
 import {
   queryItemAsString,
   useAccessToken,
+  useCapabilitySpacesMaxQuota,
   useGraphClient,
   useRouteQuery,
   useStore
@@ -294,6 +296,7 @@ export default defineComponent({
 
     return {
       ...useSideBar(),
+      maxQuota: useCapabilitySpacesMaxQuota(),
       template,
       selectedUsers,
       loadedUser,

packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue

@@ -5,7 +5,12 @@
       :cancel="closeReadmeContentModal"
       :space="resources[0]"
     ></readme-content-modal>
-    <quota-modal v-if="quotaModalIsOpen" :cancel="closeQuotaModal" :spaces="[resources[0]]" />
+    <quota-modal
+      v-if="quotaModalIsOpen"
+      :cancel="closeQuotaModal"
+      :spaces="[resources[0]]"
+      :max-quota="maxQuota"
+    />
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"
@@ -44,6 +49,7 @@ import ReadmeContentModal from 'web-pkg/src/components/Spaces/ReadmeContentModal
 import { thumbnailService } from '../../../services'
 import { computed, ComputedRef, defineComponent, inject, unref } from 'vue'
 import { Resource, SpaceResource } from 'web-client'
+import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'SpaceActions',
@@ -66,6 +72,7 @@ export default defineComponent({
     })
 
     return {
+      maxQuota: useCapabilitySpacesMaxQuota(),
       space: inject<ComputedRef<SpaceResource>>('space'),
       resources
     }

packages/web-app-files/src/components/Spaces/SpaceContextActions.vue

@@ -5,6 +5,7 @@
       v-if="quotaModalIsOpen"
       :cancel="closeQuotaModal"
       :spaces="quotaModalSelectedSpaces"
+      :max-quota="maxQuota"
     />
     <readme-content-modal
       v-if="readmeContentModalIsOpen"
@@ -44,6 +45,7 @@ import { isLocationSpacesActive } from '../../router'
 import { defineComponent, PropType } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
 import { thumbnailService } from 'web-app-files/src/services'
+import { useCapabilitySpacesMaxQuota } from 'web-pkg/src/composables'
 
 export default defineComponent({
   name: 'SpaceContextActions',
@@ -72,7 +74,11 @@ export default defineComponent({
       required: true
     }
   },
-
+  setup() {
+    return {
+      maxQuota: useCapabilitySpacesMaxQuota()
+    }
+  },
   computed: {
     quotaModalSelectedSpaces() {
       return [this.$data.$_editQuota_selectedSpace]

packages/web-pkg/src/components/QuotaSelect.vue

@@ -67,6 +67,11 @@ export default {
           displayUnit: 'GB',
           value: Math.pow(10, 9)
         },
+        {
+          displayValue: '2',
+          displayUnit: 'GB',
+          value: 2 * Math.pow(10, 9)
+        },
         {
           displayValue: '5',
           displayUnit: 'GB',
@@ -87,16 +92,6 @@ export default {
           displayUnit: 'GB',
           value: 100 * Math.pow(10, 9)
         },
-        {
-          displayValue: '500',
-          displayUnit: 'GB',
-          value: 500 * Math.pow(10, 9)
-        },
-        {
-          displayValue: '1000',
-          displayUnit: 'GB',
-          value: 1000 * Math.pow(10, 9)
-        },
         {
           displayValue: this.$gettext('No restriction'),
           displayUnit: '',
@@ -142,10 +137,10 @@ export default {
           value,
           displayValue,
           displayUnit: 'GB',
-          error: this.$gettextInterpolate(
-            this.$gettext('Max quota limit of %{ limit } GB exceeded'),
-            { limit: this.maxQuota * Math.pow(10, -9) }
-          ),
+          error: this.$gettext('Please enter a value equal or less than %{ maxQuota } GB', {
+            maxQuota: this.maxQuota * Math.pow(10, -9)
+          }),
+
           selectable: false
         }
       }
@@ -156,34 +151,40 @@ export default {
       }
     },
     setOptions() {
-      let computedOptions = [...this.DEFAULT_OPTIONS]
-      const selectedQuotaInOptions = computedOptions.find(
+      let availableOptions = [...this.DEFAULT_OPTIONS]
+
+      if (this.maxQuota) {
+        availableOptions = availableOptions.filter((availableOption) => {
+          if (this.totalQuota === 0 && availableOption.value === 0) {
+            availableOption.selectable = false
+            return true
+          }
+          return availableOption.value !== 0 && availableOption.value <= this.maxQuota
+        })
+      }
+
+      const selectedQuotaInOptions = availableOptions.find(
         (option) => option.value === this.totalQuota
       )
+
       if (!selectedQuotaInOptions) {
-        const newOption = {
+        availableOptions.push({
           displayValue: (this.totalQuota * Math.pow(10, -9))
             .toFixed(2)
             .toString()
             .replace('.00', ''),
           displayUnit: 'GB',
-          value: this.totalQuota
-        }
-        computedOptions.push(newOption)
-      }
-      if (this.maxQuota) {
-        computedOptions.forEach((computedOption) => {
-          if (computedOption.value > this.maxQuota || computedOption.value === 0) {
-            computedOption.selectable = false
-          }
+          value: this.totalQuota,
+          selectable: !(this.maxQuota && this.totalQuota > this.maxQuota)
         })
       }
+
       // Sort options and make sure that unlimited is at the end
-      computedOptions = [
-        ...computedOptions.filter((o) => o.value).sort((a, b) => a.value - b.value),
-        ...computedOptions.filter((o) => !o.value)
+      availableOptions = [
+        ...availableOptions.filter((o) => o.value).sort((a, b) => a.value - b.value),
+        ...availableOptions.filter((o) => !o.value)
       ]
-      this.options = computedOptions
+      this.options = availableOptions
     }
   }
 }

packages/web-pkg/src/components/Spaces/QuotaModal.vue

@@ -12,6 +12,7 @@
         <quota-select
           :title="$gettext('Space quota')"
           :total-quota="selectedOption"
+          :max-quota="maxQuota"
           @selected-option-change="changeSelectedQuotaOption"
         />
       </template>
@@ -40,6 +41,10 @@ export default defineComponent({
     cancel: {
       type: Function,
       required: true
+    },
+    maxQuota: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['spaceQuotaUpdated'],

packages/web-pkg/src/composables/capability/useCapability.ts

@@ -39,6 +39,7 @@ export const useCapabilityFilesSharingResharingDefault = createCapabilityComposa
 )
 
 export const useCapabilitySpacesEnabled = createCapabilityComposable('spaces.enabled', false)
+export const useCapabilitySpacesMaxQuota = createCapabilityComposable('spaces.max_quota', 0)
 export const useCapabilityProjectSpacesEnabled = createCapabilityComposable(
   'spaces.projects',
   false