fix account-info quota rendering

owncloud · May 9, 2022 · f1c36b4 · f1c36b4
1 parent 801486d
commit f1c36b4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -58,12 +58,15 @@
           <oc-icon name="cloud" fill-type="line" class="oc-p-xs" />
           <div class="storage-wrapper-text">
             <p class="oc-my-rm">
-              <span v-text="personalStorageLabel" />
-              <br />
+              <template v-if="!isNaN(quota.relative) && quota.definition !== 'none'">
+                <span v-text="personalStorageLabel" />
+                <br />
+              </template>
               <span class="oc-text-small" v-text="personalStorageDetailsLabel" />
             </p>
             <oc-progress
-              :value="parseInt(quotaUsagePercent)"
+              v-if="!isNaN(quota.relative) && quota.definition !== 'none'"
+              :value="quota.relative"
               :max="100"
               size="small"
               :variation="quotaProgressVariant"
@@ -95,30 +98,26 @@ export default {
     },
     personalStorageLabel() {
       return this.$gettextInterpolate(this.$gettext('Personal storage (%{percentage}% used)'), {
-        percentage: this.quotaUsagePercent
+        percentage: this.quota.relative || 0
       })
     },
     personalStorageDetailsLabel() {
-      return this.$gettextInterpolate(this.$gettext('%{used} of %{total} used'), {
-        used: this.quotaUsed,
-        total: this.quotaTotal
-      })
+      const total = this.quota.definition === 'none' ? 0 : this.quota.total || 0
+      const used = this.quota.used
+      return this.$gettextInterpolate(
+        total ? this.$gettext('%{used} of %{total} used') : this.$gettext('%{used} used'),
+        {
+          used: filesize(used),
+          total: filesize(total)
+        }
+      )
     },
     quotaEnabled() {
       return !!this.quota
     },
-    quotaTotal() {
-      return filesize(this.quota.total)
-    },
-    quotaUsed() {
-      return filesize(this.quota.used)
-    },
-    quotaUsagePercent() {
-      return ((this.quota.used / this.quota.total) * 100).toFixed(1)
-    },
     quotaProgressVariant() {
-      if (this.quotaUsagePercent < 80) return 'primary'
-      if (this.quotaUsagePercent < 90) return 'warning'
+      if ((this.quota.relative || 0) < 80) return 'primary'
+      if ((this.quota.relative || 0) < 90) return 'warning'
       return 'danger'
     }
   },

diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.js.snap
@@ -29,8 +29,10 @@ exports[`User Menu component when basic quota is set renders a danger quota prog
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub name="cloud" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
         <div class="storage-wrapper-text">
-          <p class="oc-my-rm"><span>Personal storage (91.0% used)</span> <br> <span class="oc-text-small">910 B of 1 kB used</span></p>
-          <oc-progress-stub value="91" max="100" size="small" variation="danger"></oc-progress-stub>
+          <p class="oc-my-rm">
+            <!----> <span class="oc-text-small">910 B of 1 kB used</span>
+          </p>
+          <!---->
         </div>
       </li>
     </oc-list-stub>
@@ -131,8 +133,10 @@ exports[`User Menu component when quota and no email is set renders a navigation
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub name="cloud" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
         <div class="storage-wrapper-text">
-          <p class="oc-my-rm"><span>Personal storage (30.0% used)</span> <br> <span class="oc-text-small">300 B of 1 kB used</span></p>
-          <oc-progress-stub value="30" max="100" size="small" variation="primary"></oc-progress-stub>
+          <p class="oc-my-rm">
+            <!----> <span class="oc-text-small">300 B of 1 kB used</span>
+          </p>
+          <!---->
         </div>
       </li>
     </oc-list-stub>
@@ -169,8 +173,10 @@ exports[`User Menu component when quota is above 80% and below 90% renders a war
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub name="cloud" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
         <div class="storage-wrapper-text">
-          <p class="oc-my-rm"><span>Personal storage (81.0% used)</span> <br> <span class="oc-text-small">810 B of 1 kB used</span></p>
-          <oc-progress-stub value="81" max="100" size="small" variation="warning"></oc-progress-stub>
+          <p class="oc-my-rm">
+            <!----> <span class="oc-text-small">810 B of 1 kB used</span>
+          </p>
+          <!---->
         </div>
       </li>
     </oc-list-stub>
@@ -207,8 +213,10 @@ exports[`User Menu component when quota is below 80% renders a primary quota pro
       <li class="storage-wrapper oc-pl-s">
         <oc-icon-stub name="cloud" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
         <div class="storage-wrapper-text">
-          <p class="oc-my-rm"><span>Personal storage (30.0% used)</span> <br> <span class="oc-text-small">300 B of 1 kB used</span></p>
-          <oc-progress-stub value="30" max="100" size="small" variation="primary"></oc-progress-stub>
+          <p class="oc-my-rm">
+            <!----> <span class="oc-text-small">300 B of 1 kB used</span>
+          </p>
+          <!---->
         </div>
       </li>
     </oc-list-stub>