feat(database-collections): add storage size details in a tooltip COMPASS-7691 (#7519)

* COMPASS-7691: Add storage size details in a tooltip

* feat: add InlineDefinition to highlight tooltip availability

Author: ivandevp

packages/databases-collections-list/src/collections.spec.tsx

@@ -554,4 +554,37 @@ describe('Collections', () => {
       'Derived from foo'
     );
   });
+
+  it('renders a tooltip for storage size cell with storage breakdown and data size', async function () {
+    renderCollectionsList({
+      collections: colls,
+    });
+
+    const fooRow = screen.getByTestId('collections-list-row-foo');
+    expect(fooRow).to.exist;
+
+    const storageCell = fooRow.querySelector('td:nth-child(3)');
+    expect(storageCell).to.exist;
+
+    // Hover over the span inside the cell (the tooltip trigger)
+    const span = storageCell?.querySelector('span');
+    expect(span).to.exist;
+    userEvent.hover(span as Element);
+
+    await waitFor(
+      function () {
+        expect(screen.getByRole('tooltip')).to.exist;
+      },
+      {
+        timeout: 5000,
+      }
+    );
+
+    const tooltipText = screen.getByRole('tooltip').textContent;
+    expect(tooltipText).to.include('Storage Size:');
+    expect(tooltipText).to.include('1.00 kB');
+    expect(tooltipText).to.include('Used:');
+    expect(tooltipText).to.include('Free:');
+    expect(tooltipText).to.include('Data Size:');
+  });
 });

packages/databases-collections-list/src/collections.tsx

@@ -13,6 +13,7 @@ import {
   Placeholder,
   compactBytes,
   compactNumber,
+  InlineDefinition,
 } from '@mongodb-js/compass-components';
 import { ItemsTable, VirtualItemsTable } from './items-table';
 import type { CollectionProps } from 'mongodb-collection-model';
@@ -291,9 +292,46 @@ function collectionColumns({
         if (type === 'view') {
           return '-';
         }
-        return enableDbAndCollStats && collection.storage_size !== undefined
-          ? compactBytes(collection.storage_size)
-          : '-';
+
+        if (!enableDbAndCollStats || collection.storage_size === undefined) {
+          return '-';
+        }
+
+        const storageSize = collection.storage_size;
+        const freeStorageSize = collection.free_storage_size ?? 0;
+        const usedStorageSize = storageSize - freeStorageSize;
+        const documentSize = collection.document_size;
+        const displayValue = compactBytes(storageSize);
+
+        const definition = (
+          <div>
+            <div>
+              <strong>Storage Size:</strong> {compactBytes(storageSize)} (total
+              allocated)
+            </div>
+            <div>
+              <strong>Used:</strong> {compactBytes(usedStorageSize)}
+            </div>
+            <div>
+              <strong>Free:</strong> {compactBytes(freeStorageSize)}
+            </div>
+            {documentSize !== undefined && (
+              <div>
+                <strong>Data Size:</strong> {compactBytes(documentSize)}{' '}
+                (uncompressed)
+              </div>
+            )}
+          </div>
+        );
+
+        return (
+          <InlineDefinition
+            definition={definition}
+            tooltipProps={{ align: 'top', justify: 'start' }}
+          >
+            {displayValue}
+          </InlineDefinition>
+        );
       },
     },
     /*

packages/databases-collections-list/src/databases.spec.tsx

@@ -272,4 +272,36 @@ describe('Databases', function () {
       'Your privileges grant you access to this namespace, but it might not currently exist'
     );
   });
+
+  it('renders a tooltip for storage size cell with storage and data size', async function () {
+    renderDatabasesList({
+      databases: dbs,
+    });
+
+    const fooRow = screen.getByTestId('databases-list-row-foo');
+    expect(fooRow).to.exist;
+
+    const storageCell = fooRow.querySelector('td:nth-child(2)');
+    expect(storageCell).to.exist;
+
+    // Hover over the span inside the cell (the tooltip trigger)
+    const span = storageCell?.querySelector('span');
+    expect(span).to.exist;
+    userEvent.hover(span as Element);
+
+    await waitFor(
+      function () {
+        expect(screen.getByRole('tooltip')).to.exist;
+      },
+      {
+        timeout: 5000,
+      }
+    );
+
+    const tooltipText = screen.getByRole('tooltip').textContent;
+    expect(tooltipText).to.include('Storage Size:');
+    expect(tooltipText).to.include('5.00 kB');
+    expect(tooltipText).to.include('Data Size:');
+    expect(tooltipText).to.include('1.00 kB');
+  });
 });

packages/databases-collections-list/src/databases.tsx

@@ -17,6 +17,7 @@ import {
   useDarkMode,
   compactBytes,
   compactNumber,
+  InlineDefinition,
 } from '@mongodb-js/compass-components';
 
 const databaseNameWrapStyles = css({
@@ -129,9 +130,37 @@ function databaseColumns({
           return <Placeholder maxChar={10}></Placeholder>;
         }
 
-        return enableDbAndCollStats && database.storage_size !== undefined
-          ? compactBytes(database.storage_size)
-          : '-';
+        if (!enableDbAndCollStats || database.storage_size === undefined) {
+          return '-';
+        }
+
+        const storageSize = database.storage_size;
+        const dataSize = database.data_size;
+        const displayValue = compactBytes(storageSize);
+
+        const definition = (
+          <div>
+            <div>
+              <strong>Storage Size:</strong> {compactBytes(storageSize)} (total
+              allocated)
+            </div>
+            {dataSize !== undefined && (
+              <div>
+                <strong>Data Size:</strong> {compactBytes(dataSize)}{' '}
+                (uncompressed)
+              </div>
+            )}
+          </div>
+        );
+
+        return (
+          <InlineDefinition
+            definition={definition}
+            tooltipProps={{ align: 'top', justify: 'start' }}
+          >
+            {displayValue}
+          </InlineDefinition>
+        );
       },
     },
     /*