Add remaining quota information, slight redesign

changelog/unreleased/enhancement-redesign-quota-information

@@ -0,0 +1,6 @@
+Enhancement: Quota Information Redesign
+
+We've slightly redesigned the quota information for the space and logged-in user,
+we also show now the remaining space in the quota information.
+
+https://github.com/owncloud/web/pull/11722

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

@@ -1,6 +1,11 @@
 <template>
   <div class="space-quota">
-    <p class="oc-mb-s oc-mt-rm" v-text="spaceStorageDetailsLabel" />
+    <p class="oc-m-rm" v-text="spaceStorageDetailsLabel" />
+    <p
+      v-if="spaceQuota.total"
+      class="oc-m-rm oc-text-muted oc-text-xsmall"
+      v-text="spaceStorageSubDetailsLabel"
+    />
     <oc-progress
       :value="quotaUsagePercent"
       :max="100"
@@ -35,7 +40,7 @@ export default defineComponent({
   computed: {
     spaceStorageDetailsLabel() {
       if (this.spaceQuota.total) {
-        return this.$gettext('%{used} of %{total} used (%{percentage}% used)', {
+        return this.$gettext('%{used} of %{total} used', {
           used: this.quotaUsed,
           total: this.quotaTotal,
           percentage: this.quotaUsagePercent.toString()
@@ -46,6 +51,12 @@ export default defineComponent({
         used: this.quotaUsed
       })
     },
+    spaceStorageSubDetailsLabel() {
+      return this.$gettext('%{percentage}% used, %{remaining} remaining', {
+        percentage: this.quotaUsagePercent.toString(),
+        remaining: this.quotaRemaining.toString()
+      })
+    },
     quotaTotal() {
       return formatFileSize(this.spaceQuota.total, this.currentLanguage)
     },
@@ -55,6 +66,9 @@ export default defineComponent({
     quotaUsagePercent() {
       return parseFloat(((this.spaceQuota.used / this.spaceQuota.total) * 100).toFixed(2))
     },
+    quotaRemaining() {
+      return formatFileSize(this.spaceQuota.remaining, this.currentLanguage)
+    },
     quotaProgressVariant() {
       switch (this.spaceQuota.state) {
         case 'normal':

packages/web-pkg/tests/unit/components/SpaceQuota.spec.ts

@@ -5,7 +5,7 @@ import { Quota } from '@ownclouders/web-client/graph/generated'
 
 describe('SpaceQuota component', () => {
   it('renders the space storage quota label', () => {
-    const { wrapper } = getWrapper({ total: 10, used: 1, state: 'normal' })
+    const { wrapper } = getWrapper({ total: 10, used: 1, remaining: 9, state: 'normal' })
     expect(wrapper.find('.space-quota').exists()).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -15,7 +15,7 @@ describe('SpaceQuota component', () => {
     { state: 'critical', expectedVariation: 'warning' },
     { state: 'exceeded', expectedVariation: 'danger' }
   ])('renders the progress variant correctly', (dataSet) => {
-    const { wrapper } = getWrapper({ total: 10, used: 1, state: dataSet.state })
+    const { wrapper } = getWrapper({ total: 10, used: 1, remaining: 9, state: dataSet.state })
     const progressBar = wrapper.findComponent<typeof OcProgress>('.space-quota oc-progress-stub')
     expect(progressBar.exists()).toBeTruthy()
     expect(progressBar.props().variation).toBe(dataSet.expectedVariation)

packages/web-pkg/tests/unit/components/__snapshots__/SpaceQuota.spec.ts.snap

@@ -2,7 +2,8 @@
 
 exports[`SpaceQuota component > renders the space storage quota label 1`] = `
 "<div class="space-quota">
-  <p class="oc-mb-s oc-mt-rm">1 B of 10 B used (10% used)</p>
+  <p class="oc-m-rm">1 B of 10 B used</p>
+  <p class="oc-m-rm oc-text-muted oc-text-xsmall">10% used, 9 B remaining</p>
   <oc-progress-stub max="100" size="small" variation="primary" indeterminate="false" value="10"></oc-progress-stub>
 </div>"
 `;

packages/web-runtime/src/components/Account/QuotaInformation.vue

@@ -1,10 +1,17 @@
 <template>
-  <div class="quota-information oc-flex oc-flex-bottom">
+  <div class="quota-information oc-flex oc-flex-middle">
     <oc-icon name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs" />
     <div>
       <p class="oc-my-rm">
         <span class="quota-information-text" v-text="personalStorageDetailsLabel" />
       </p>
+      <p class="oc-my-rm">
+        <span
+          v-if="quota.total"
+          class="quota-information-details-text oc-text-xsmall oc-text-muted"
+          v-text="personalStorageSubDetailsLabel"
+        />
+      </p>
       <oc-progress
         v-if="limitedPersonalStorage"
         class="quota-information-progress-bar"
@@ -47,17 +54,23 @@ export default defineComponent({
       const total = props.quota.total || 0
       const used = props.quota.used || 0
       return total
-        ? $gettext('%{used} of %{total} used (%{percentage}%)', {
+        ? $gettext('%{used} of %{total} used', {
             used: formatFileSize(used, currentLanguage),
-            total: formatFileSize(total, currentLanguage),
-            percentage: (unref(quotaUsagePercent) || 0).toString()
+            total: formatFileSize(total, currentLanguage)
           })
         : $gettext('%{used} used', {
             used: formatFileSize(used, currentLanguage),
             total: formatFileSize(total, currentLanguage)
           })
     })
 
+    const personalStorageSubDetailsLabel = computed(() => {
+      return $gettext('%{percentage}% used, %{remaining} remaining', {
+        percentage: (unref(quotaUsagePercent) || 0).toString(),
+        remaining: formatFileSize(props.quota.remaining, currentLanguage).toString()
+      })
+    })
+
     const quotaProgressVariant = computed(() => {
       if ((unref(quotaUsagePercent) || 0) < 80) {
         return 'primary'
@@ -71,6 +84,7 @@ export default defineComponent({
     return {
       quotaUsagePercent,
       personalStorageDetailsLabel,
+      personalStorageSubDetailsLabel,
       limitedPersonalStorage,
       quotaProgressVariant
     }

packages/web-runtime/tests/unit/components/Topbar/UserMenu.spec.ts

@@ -12,8 +12,11 @@ import { Quota } from '@ownclouders/web-client/graph/generated'
 
 const totalQuota = 1000
 const basicQuota = 300
+const basicRemainingQuota = 700
 const warningQuota = 810
+const warningRemainingQuota = 190
 const dangerQuota = 910
+const dangerRemainingQuota = 90
 
 const noEmail = ''
 const email = '[email protected]'
@@ -27,7 +30,10 @@ describe('User Menu component', () => {
   })
   describe('when quota and no email is set', () => {
     it('renders a navigation without email', () => {
-      const wrapper = getMountedWrapper({ used: basicQuota, total: totalQuota }, noEmail)
+      const wrapper = getMountedWrapper(
+        { used: basicQuota, remaining: basicRemainingQuota, total: totalQuota },
+        noEmail
+      )
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
@@ -48,6 +54,7 @@ describe('User Menu component', () => {
       const wrapper = getMountedWrapper(
         {
           used: basicQuota,
+          remaining: basicRemainingQuota,
           total: totalQuota
         },
         email
@@ -60,6 +67,7 @@ describe('User Menu component', () => {
       const wrapper = getMountedWrapper(
         {
           used: warningQuota,
+          remaining: warningRemainingQuota,
           total: totalQuota
         },
         email
@@ -72,6 +80,7 @@ describe('User Menu component', () => {
       const wrapper = getMountedWrapper(
         {
           used: dangerQuota,
+          remaining: dangerRemainingQuota,
           total: totalQuota
         },
         email
@@ -84,6 +93,7 @@ describe('User Menu component', () => {
       const wrapper = getMountedWrapper(
         {
           used: basicQuota,
+          remaining: basicRemainingQuota,
           total: 0
         },
         email
@@ -96,6 +106,7 @@ describe('User Menu component', () => {
       const wrapper = getMountedWrapper(
         {
           used: dangerQuota,
+          remaining: dangerRemainingQuota,
           total: 0
         },
         email
@@ -108,6 +119,7 @@ describe('User Menu component', () => {
       const wrapper = getMountedWrapper(
         {
           used: dangerQuota,
+          remaining: dangerRemainingQuota,
           total: totalQuota
         },
         email,

packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap

@@ -65,10 +65,11 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
       <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s">
         <avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper oc-py-xs"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
-        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
+        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
-            <p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used (30%)</span></p>
+            <p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used</span></p>
+            <p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">30% used, 700 B remaining</span></p>
             <oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="primary" value="30"></oc-progress-stub>
           </div>
         </div></span>
@@ -98,10 +99,11 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
       <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s">
         <avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span>
-        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
+        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
-            <p class="oc-my-rm"><span class="quota-information-text">810 B of 1 kB used (81%)</span></p>
+            <p class="oc-my-rm"><span class="quota-information-text">810 B of 1 kB used</span></p>
+            <p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">81% used, 190 B remaining</span></p>
             <oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="warning" value="81"></oc-progress-stub>
           </div>
         </div></span>
@@ -131,10 +133,11 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
       <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s">
         <avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span>
-        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
+        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
-            <p class="oc-my-rm"><span class="quota-information-text">910 B of 1 kB used (91%)</span></p>
+            <p class="oc-my-rm"><span class="quota-information-text">910 B of 1 kB used</span></p>
+            <p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">91% used, 90 B remaining</span></p>
             <oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="danger" value="91"></oc-progress-stub>
           </div>
         </div></span>
@@ -164,10 +167,11 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
       <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s">
         <avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span>
-        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
+        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
-            <p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used (30%)</span></p>
+            <p class="oc-my-rm"><span class="quota-information-text">300 B of 1 kB used</span></p>
+            <p class="oc-my-rm"><span class="quota-information-details-text oc-text-xsmall oc-text-muted">30% used, 700 B remaining</span></p>
             <oc-progress-stub class="quota-information-progress-bar" max="100" size="small" variation="primary" value="30"></oc-progress-stub>
           </div>
         </div></span>
@@ -197,10 +201,13 @@ exports[`User Menu component > when quota is not defined > renders no percentag
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
       <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s">
         <avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span>
-        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
+        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
             <p class="oc-my-rm"><span class="quota-information-text">910 B used</span></p>
+            <p class="oc-my-rm">
+              <!--v-if-->
+            </p>
             <!--v-if-->
           </div>
         </div></span>
@@ -230,10 +237,13 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
       <li data-v-08f1b1e7="" class="profile-info-wrapper oc-pl-s">
         <avatar-image-stub data-v-08f1b1e7="" width="32" userid="einstein" user-name="Albert Einstein"></avatar-image-stub> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="oc-text-small">[email protected]</span>
-        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-bottom oc-text-small oc-mt-xs">
+        <div data-v-08f1b1e7="" class="quota-information oc-flex oc-flex-middle oc-text-small oc-mt-xs">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="oc-mr-xs"></oc-icon-stub>
           <div>
             <p class="oc-my-rm"><span class="quota-information-text">300 B used</span></p>
+            <p class="oc-my-rm">
+              <!--v-if-->
+            </p>
             <!--v-if-->
           </div>
         </div></span>