change: STORIF-165 - Updated content usage status format.

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();
+    }
+  );
 });

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>
     </>
   );
 };