fix: [M3-9805] - Revert Object Storage Size Conversions from Base10 to Base2 (#12075)

* fix: [M3-9805] - Revert Object Storage Size Conversions from Base10 to Base2

* More tests

* Added changeset: Revert Object Storage Size Conversions from Base10 to Base2

---------

Co-authored-by: Jaalah Ramos <[email protected]>

Author: jaalah-akamai

packages/manager/.changeset/pr-12075-fixed-1745266693581.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Revert Object Storage Size Conversions from Base10 to Base2 ([#12075](https://github.com/linode/manager/pull/12075))

packages/manager/src/components/Uploaders/FileUpload.tsx

@@ -92,8 +92,7 @@ export const FileUpload = React.memo((props: FileUploadProps) => {
             })}
             variant="body1"
           >
-            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
-            {readableBytes(props.sizeInBytes, { base10: true }).formatted}
+            {readableBytes(props.sizeInBytes).formatted}
           </StyledFileSizeTypography>
           {props.percentCompleted === 100 ? (
             <FileUploadComplete

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.test.tsx

@@ -49,7 +49,6 @@ describe('ObjectDetailsDrawer', () => {
       screen.findByText(/^Last modified: 2019-12-31/)
     ).resolves.toBeInTheDocument();
 
-    expect(screen.getByText('12.3 KB')).toBeVisible();
     expect(screen.getByText(/^https:\/\/my-bucket/)).toBeVisible();
   });
 
@@ -62,4 +61,28 @@ describe('ObjectDetailsDrawer', () => {
       expect(() => screen.getByTestId('lastModified')).toThrow();
     });
   });
+
+  describe('readableBytes edge cases in Object Storage', () => {
+    it('displays bytes correctly for sizes under 1 KB threshold', () => {
+      renderWithTheme(<ObjectDetailsDrawer {...props} size={1000} />);
+
+      // Values under 1024 bytes should remain as bytes
+      expect(screen.getByText('1000 bytes')).toBeVisible();
+    });
+
+    it('uses base2 calculations (1024-based) for KB display', () => {
+      renderWithTheme(<ObjectDetailsDrawer {...props} size={1024} />);
+
+      // 1024 bytes = 1 KB in base2 (not 1.02 KB as it would be in base10)
+      expect(screen.getByText('1 KB')).toBeVisible();
+    });
+
+    it('converts base10 MB values correctly to base2 display', () => {
+      renderWithTheme(<ObjectDetailsDrawer {...props} size={1000000} />);
+
+      // 1,000,000 bytes / 1024 = 976.56 KB (rounded to 977 KB)
+      // Since this is less than 1 MB in base2, it displays as KB
+      expect(screen.getByText('977 KB')).toBeVisible();
+    });
+  });
 });

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx

@@ -74,8 +74,7 @@ export const ObjectDetailsDrawer = React.memo(
       >
         {size ? (
           <Typography variant="subtitle2">
-            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
-            {readableBytes(size, { base10: true }).formatted}
+            {readableBytes(size).formatted}
           </Typography>
         ) : null}
         {formattedLastModified && Boolean(profile) ? (

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectTableRow.tsx

@@ -37,10 +37,10 @@ export const ObjectTableRow = (props: Props) => {
         <Grid
           container
           spacing={2}
-          wrap="nowrap"
           sx={{
             alignItems: 'center',
           }}
+          wrap="nowrap"
         >
           <Grid className="py0">
             <ObjectIcon size={20} />
@@ -56,10 +56,7 @@ export const ObjectTableRow = (props: Props) => {
           </Grid>
         </Grid>
       </TableCell>
-      <TableCell noWrap>
-        {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
-        {readableBytes(objectSize, { base10: true }).formatted}
-      </TableCell>
+      <TableCell noWrap>{readableBytes(objectSize).formatted}</TableCell>
       <Hidden mdDown>
         <TableCell noWrap>
           <DateTimeDisplay value={objectLastModified} />

packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx

@@ -117,8 +117,7 @@ export const BucketDetailsDrawer = React.memo(
         )}
         {typeof size === 'number' && (
           <Typography variant="subtitle2">
-            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
-            {readableBytes(size, { base10: true }).formatted}
+            {readableBytes(size).formatted}
           </Typography>
         )}
         {/* @TODO OBJ Multicluster: use region instead of cluster if isObjMultiClusterEnabled. */}

packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.test.tsx

@@ -179,9 +179,9 @@ describe('ObjectStorageLanding', () => {
     await screen.findByText(buckets[1].label);
   });
 
-  it('renders a "Total usage" section if there is more than one Bucket', async () => {
+  it('renders a "Total usage" section using base2 calculations if there is more than one Bucket', async () => {
     const buckets = objectStorageBucketFactory.buildList(2, {
-      size: 1e9 * 5,
+      size: 1024 * 1024 * 1024 * 5, // 5 GB in base2 (5 GiB)
     });
 
     // Mock Clusters

packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx

@@ -193,9 +193,7 @@ export const BucketLanding = (props: Props) => {
             style={{ marginTop: 18, textAlign: 'center', width: '100%' }}
             variant="body1"
           >
-            Total storage used:{' '}
-            {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
-            {readableBytes(totalUsage, { base10: true }).formatted}
+            Total storage used: {readableBytes(totalUsage).formatted}
           </Typography>
         ) : null}
         <TransferDisplay

packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.test.tsx

@@ -37,10 +37,10 @@ describe('BucketTableRow', () => {
     getByText('test-bucket-001.alpha.linodeobjects.com');
   });
 
-  it('should render a size with the correct size abbreviation', () => {
+  it('should render size with base2 calculations (displaying GB but representing GiB)', () => {
     const { getByText } = renderWithTheme(
       wrapWithTableBody(<BucketTableRow {...props} />)
     );
-    getByText('5.42 GB');
+    getByText('5.05 GB');
   });
 });

packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx

@@ -89,7 +89,7 @@ export const BucketTableRow = (props: BucketTableRowProps) => {
           <Typography data-qa-region variant="body1">
             {isObjMultiClusterEnabled && regionsLookup && region
               ? regionsLookup[region].label
-              : clusterRegion?.label ?? cluster}
+              : (clusterRegion?.label ?? cluster)}
           </Typography>
         </StyledBucketRegionCell>
       </Hidden>
@@ -109,8 +109,7 @@ export const BucketTableRow = (props: BucketTableRowProps) => {
       </Hidden>
       <StyledBucketSizeCell noWrap>
         <Typography data-qa-size variant="body1">
-          {/* to convert from binary units (GiB) to decimal units (GB) we need to pass the base10 flag */}
-          {readableBytes(size, { base10: true }).formatted}
+          {readableBytes(size).formatted}
         </Typography>
       </StyledBucketSizeCell>