From 4430b42b07441b03ecdb9fade77970830b30444d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 09:30:20 +0300
Subject: [PATCH] Add total quota to quota meter

---
 .../src/components/Masthead/QuotaMeter.test.ts   |  3 ++-
 client/src/components/Masthead/QuotaMeter.vue    | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.test.ts b/client/src/components/Masthead/QuotaMeter.test.ts
index 9e5b22c62886..3599cc2d754a 100644
--- a/client/src/components/Masthead/QuotaMeter.test.ts
+++ b/client/src/components/Masthead/QuotaMeter.test.ts
@@ -38,10 +38,11 @@ describe("QuotaMeter.vue", () => {
         const user = {
             total_disk_usage: 5120,
             quota_percent: 50,
+            quota: "100 MB",
         };
         const config = { enable_quotas: true };
         const wrapper = await createQuotaMeterWrapper(config, user);
-        expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50%");
+        expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50% of 100 MB");
     });
 
     it("changes appearance depending on usage", async () => {
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index d22b2f13400e..55833a9ab511 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -16,6 +16,8 @@ const hasQuota = computed(() => {
     return quotasEnabled && quotaLimited;
 });
 
+const quotaLimit = computed(() => currentUser.value?.quota ?? 0);
+
 const totalUsageString = computed(() => {
     const total = currentUser.value?.total_disk_usage ?? 0;
     return bytesToString(total, true);
@@ -44,8 +46,14 @@ const variant = computed(() => {
             <BProgress :max="100">
                 <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
             </BProgress>
-            <span v-if="hasQuota">{{ "Using " + usage.toFixed(0) }}%</span>
-            <span v-else>{{ "Using " + totalUsageString }}</span>
+            <span>
+                <span v-localize>Using</span>
+                <span v-if="hasQuota">
+                    <span>{{ usage.toFixed(0) }}%</span>
+                    <span v-if="quotaLimit !== 0">of {{ quotaLimit }}</span>
+                </span>
+                <span v-else>{{ totalUsageString }}</span>
+            </span>
         </BLink>
     </div>
 </template>
@@ -57,7 +65,7 @@ const variant = computed(() => {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
     .quota-progress {
-        width: 150px;
+        width: 12rem;
         height: 1.4em;
         position: relative;
         & > * {
@@ -65,8 +73,6 @@ const variant = computed(() => {
             width: 100%;
             height: 100%;
             text-align: center;
-        }
-        & > span {
             line-height: 1.4em;
             pointer-events: none;
         }