From 89cd6b4aa0b83a4d551e18340646250a14bc5011 Mon Sep 17 00:00:00 2001
From: Dmytro Chyrva <dchyrva@akamai.com>
Date: Tue, 20 Jan 2026 09:54:51 +0100
Subject: [PATCH] change: STORIF-165 - Updated content usage status format.

---
 .../QuotaUsageBar/QuotaUsageBar.test.tsx       | 16 ++++++++++++++++
 .../components/QuotaUsageBar/QuotaUsageBar.tsx | 18 +++++++++++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx
index 8b8da628179..665c47ba819 100644
--- a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx
+++ b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.test.tsx
@@ -13,4 +13,20 @@ describe('QuotaUsageBanner', () => {
     const quotaUsageText = getByText('1 of 10 Bytes used');
     expect(quotaUsageText).toBeVisible();
   });
+
+  it.each([1000000000, 100000000, 10000000, 1000000])(
+    'should display content usage in proper format',
+    (usage) => {
+      const { getByText } = renderWithTheme(
+        <QuotaUsageBar
+          limit={109951162777600}
+          resourceMetric="byte"
+          usage={usage}
+        />
+      );
+
+      const quotaUsageText = getByText('<0.01 of 100 TB used');
+      expect(quotaUsageText).toBeVisible();
+    }
+  );
 });
diff --git a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx
index d7a19a57304..d041a256567 100644
--- a/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx
+++ b/packages/manager/src/components/QuotaUsageBar/QuotaUsageBar.tsx
@@ -23,6 +23,18 @@ export const QuotaUsageBar = ({ limit, usage, resourceMetric }: Props) => {
       initialLimit: limit,
     });
 
+  function getUsageText() {
+    let convertedUsageString = convertedUsage.toLocaleString();
+    const convertedLimitString = convertedLimit.toLocaleString();
+
+    // Special case to display storage usage
+    if (convertedUsage === 0 && convertedResourceMetric === 'TB') {
+      convertedUsageString = '<0.01';
+    }
+
+    return `${convertedUsageString} of ${convertedLimitString} ${convertedResourceMetric} used`;
+  }
+
   return (
     <>
       <BarPercent
@@ -45,11 +57,7 @@ export const QuotaUsageBar = ({ limit, usage, resourceMetric }: Props) => {
         sx={{ mb: 1, mt: 2, padding: '3px' }}
         value={usage}
       />
-      <Typography sx={{ mb: 1, mt: -0.5 }}>
-        {`${convertedUsage?.toLocaleString() ?? 'unknown'} of ${
-          convertedLimit?.toLocaleString() ?? 'unknown'
-        } ${convertedResourceMetric} used`}
-      </Typography>
+      <Typography sx={{ mb: 1, mt: -0.5 }}>{getUsageText()}</Typography>
     </>
   );
 };