From ae4a02cded0b63d55c6697f5c80f3395b42095fd Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Thu, 30 Oct 2025 13:12:04 +0100 Subject: [PATCH 1/2] COMPASS-7691: Add storage size details in a tooltip --- .../src/collections.spec.tsx | 33 +++++++++++++ .../src/collections.tsx | 48 +++++++++++++++++-- .../src/databases.spec.tsx | 32 +++++++++++++ .../src/databases.tsx | 39 +++++++++++++-- 4 files changed, 146 insertions(+), 6 deletions(-) diff --git a/packages/databases-collections-list/src/collections.spec.tsx b/packages/databases-collections-list/src/collections.spec.tsx index cbb82d60b1a..ebe3e4a6bee 100644 --- a/packages/databases-collections-list/src/collections.spec.tsx +++ b/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:'); + }); }); diff --git a/packages/databases-collections-list/src/collections.tsx b/packages/databases-collections-list/src/collections.tsx index baf6c30ddbf..ed69347e4ff 100644 --- a/packages/databases-collections-list/src/collections.tsx +++ b/packages/databases-collections-list/src/collections.tsx @@ -291,9 +291,51 @@ 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); + + return ( + >) => ( + + {displayValue} + {children} + + )} + > +
+
+ Storage Size: {compactBytes(storageSize)}{' '} + (total allocated) +
+
+ Used: {compactBytes(usedStorageSize)} +
+
+ Free: {compactBytes(freeStorageSize)} +
+ {documentSize !== undefined && ( +
+ Data Size: {compactBytes(documentSize)}{' '} + (uncompressed) +
+ )} +
+ + ); }, }, /* diff --git a/packages/databases-collections-list/src/databases.spec.tsx b/packages/databases-collections-list/src/databases.spec.tsx index e9ea5b83a98..b8928a06f90 100644 --- a/packages/databases-collections-list/src/databases.spec.tsx +++ b/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'); + }); }); diff --git a/packages/databases-collections-list/src/databases.tsx b/packages/databases-collections-list/src/databases.tsx index 27ac853de10..63120ffd9a1 100644 --- a/packages/databases-collections-list/src/databases.tsx +++ b/packages/databases-collections-list/src/databases.tsx @@ -129,9 +129,42 @@ function databaseColumns({ return ; } - 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); + + return ( + >) => ( + + {displayValue} + {children} + + )} + > +
+
+ Storage Size: {compactBytes(storageSize)}{' '} + (total allocated) +
+ {dataSize !== undefined && ( +
+ Data Size: {compactBytes(dataSize)}{' '} + (uncompressed) +
+ )} +
+ + ); }, }, /* From 6dd287dddfe0519356132e354aa7fe2f18eae168 Mon Sep 17 00:00:00 2001 From: Ivan Medina Date: Thu, 30 Oct 2025 14:35:11 +0100 Subject: [PATCH 2/2] feat: add InlineDefinition to highlight tooltip availability --- .../src/collections.tsx | 56 +++++++++---------- .../src/databases.tsx | 44 +++++++-------- 2 files changed, 46 insertions(+), 54 deletions(-) diff --git a/packages/databases-collections-list/src/collections.tsx b/packages/databases-collections-list/src/collections.tsx index ed69347e4ff..ede1dc1b3f3 100644 --- a/packages/databases-collections-list/src/collections.tsx +++ b/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'; @@ -302,39 +303,34 @@ function collectionColumns({ const documentSize = collection.document_size; const displayValue = compactBytes(storageSize); - return ( - >) => ( - - {displayValue} - {children} - - )} - > + const definition = ( +
+ Storage Size: {compactBytes(storageSize)} (total + allocated) +
+
+ Used: {compactBytes(usedStorageSize)} +
+
+ Free: {compactBytes(freeStorageSize)} +
+ {documentSize !== undefined && (
- Storage Size: {compactBytes(storageSize)}{' '} - (total allocated) -
-
- Used: {compactBytes(usedStorageSize)} -
-
- Free: {compactBytes(freeStorageSize)} + Data Size: {compactBytes(documentSize)}{' '} + (uncompressed)
- {documentSize !== undefined && ( -
- Data Size: {compactBytes(documentSize)}{' '} - (uncompressed) -
- )} -
- + )} + + ); + + return ( + + {displayValue} + ); }, }, diff --git a/packages/databases-collections-list/src/databases.tsx b/packages/databases-collections-list/src/databases.tsx index 63120ffd9a1..3127b10ee9e 100644 --- a/packages/databases-collections-list/src/databases.tsx +++ b/packages/databases-collections-list/src/databases.tsx @@ -17,6 +17,7 @@ import { useDarkMode, compactBytes, compactNumber, + InlineDefinition, } from '@mongodb-js/compass-components'; const databaseNameWrapStyles = css({ @@ -137,33 +138,28 @@ function databaseColumns({ const dataSize = database.data_size; const displayValue = compactBytes(storageSize); - return ( - >) => ( - - {displayValue} - {children} - - )} - > + const definition = ( +
+ Storage Size: {compactBytes(storageSize)} (total + allocated) +
+ {dataSize !== undefined && (
- Storage Size: {compactBytes(storageSize)}{' '} - (total allocated) + Data Size: {compactBytes(dataSize)}{' '} + (uncompressed)
- {dataSize !== undefined && ( -
- Data Size: {compactBytes(dataSize)}{' '} - (uncompressed) -
- )} -
- + )} + + ); + + return ( + + {displayValue} + ); }, },