Skip to content

Commit 1c91d8a

Browse files
jcobisCopilot
jcobis
and
Copilot
authored
feat(compass-collection): Document Count Screen followups – CLOUDP-348924 (#7408)
* refactor: centralize formatting utilities in compass-components - Create shared compactBytes() and compactNumber() utilities - Remove numeral dependency from compass-collection, compass-crud, and compass-indexes - Use centralized formatting for consistent SI notation across packages - Update tests to match new formatting (e.g., '100.0 kB' instead of '100.0KB') - Fix webpack-config-compass browserslist for Electron 37.6 compatibility * Remove document count defensive check * Revert unneeded upgrade * Update packages/compass-components/src/utils/format.ts Co-authored-by: Copilot <[email protected]> * Package-lock * Negative bytes * Package * E2E test --------- Co-authored-by: Copilot <[email protected]>
1 parent 40c3b27 commit 1c91d8a

File tree

16 files changed

+102
-112
lines changed

16 files changed

+102
-112
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 48 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-collection/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
"mongodb-collection-model": "^5.35.3",
6969
"mongodb-ns": "^3.0.1",
7070
"mongodb-schema": "^12.6.3",
71-
"numeral": "^2.0.6",
7271
"react": "^17.0.2",
7372
"react-redux": "^8.1.3",
7473
"redux": "^4.2.1",

‎packages/compass-collection/src/components/mock-data-generator-modal/document-count-screen.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Body,
3+
compactBytes,
34
css,
45
palette,
56
spacing,
@@ -9,7 +10,6 @@ import React, { useMemo } from 'react';
910
import { connect } from 'react-redux';
1011
import type { CollectionState } from '../../modules/collection-tab';
1112
import type { SchemaAnalysisState } from '../../schema-analysis-types';
12-
import numeral from 'numeral';
1313
import { DEFAULT_DOCUMENT_COUNT, MAX_DOCUMENT_COUNT } from './constants';
1414

1515
const BYTE_PRECISION_THRESHOLD = 1000;
@@ -40,8 +40,8 @@ const boldStyles = css({
4040
});
4141

4242
const formatBytes = (bytes: number) => {
43-
const precision = bytes <= BYTE_PRECISION_THRESHOLD ? '0' : '0.0';
44-
return numeral(bytes).format(precision + 'b');
43+
const decimals = bytes <= BYTE_PRECISION_THRESHOLD ? 0 : 1;
44+
return compactBytes(bytes, true, decimals);
4545
};
4646

4747
type ErrorState =
@@ -101,7 +101,7 @@ const DocumentCountScreen = ({
101101
}
102102
};
103103

104-
return schemaAnalysisState.status === 'complete' ? (
104+
return (
105105
<div>
106106
<Body className={titleStyles}>
107107
Specify Number of Documents to Generate
@@ -130,9 +130,6 @@ const DocumentCountScreen = ({
130130
</div>
131131
</div>
132132
</div>
133-
) : (
134-
// Not reachable since schema analysis must be finished before the modal can be opened
135-
<div>We are analyzing your collection.</div>
136133
);
137134
};
138135

‎packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -811,10 +811,10 @@ describe('MockDataGeneratorModal', () => {
811811
);
812812
userEvent.clear(documentCountInput);
813813
userEvent.type(documentCountInput, '1000');
814-
expect(screen.getByText('100.0KB')).to.exist;
814+
expect(screen.getByText('100.0 kB')).to.exist;
815815
userEvent.clear(documentCountInput);
816816
userEvent.type(documentCountInput, '2000');
817-
expect(screen.getByText('200.0KB')).to.exist;
817+
expect(screen.getByText('200.0 kB')).to.exist;
818818
});
819819
});
820820

‎packages/compass-components/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ export {
218218
} from './components/links/link';
219219
export { ChevronCollapse } from './components/chevron-collapse-icon';
220220
export { formatDate } from './utils/format-date';
221+
export { compactBytes, compactNumber } from './utils/format';
221222
export {
222223
VirtualList,
223224
type VirtualListRef,

‎packages/compass-components/src/utils/format.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Format bytes into a human-readable string with appropriate units.
3+
*
4+
* @param bytes - The number of bytes to format
5+
* @param si - Use SI units (1000-based) if true, binary units (1024-based) if false
6+
* @param decimals - Number of decimal places to show
7+
* @returns Formatted string with units (e.g., "1.5 MB", "2.0 KiB", "-1.5 MB")
8+
*/
9+
export function compactBytes(bytes: number, si = true, decimals = 2): string {
10+
const isNegative = bytes < 0;
11+
const absBytes = Math.abs(bytes);
12+
13+
if (absBytes === 0) {
14+
return '0 B';
15+
}
16+
17+
const threshold = si ? 1000 : 1024;
18+
const units = si
19+
? ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
20+
: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
21+
let i = Math.floor(Math.log(absBytes) / Math.log(threshold));
22+
if (i >= units.length) {
23+
i = units.length - 1;
24+
}
25+
const num = absBytes / Math.pow(threshold, i);
26+
return `${isNegative ? '-' : ''}${num.toFixed(decimals)} ${units[i]}`;
27+
}
28+
29+
/**
30+
* Format a number into a compact notation with appropriate suffix.
31+
*
32+
* @param number - The number to format
33+
* @returns Formatted string with compact notation (e.g., "1.5K", "2M")
34+
*/
35+
export function compactNumber(number: number): string {
36+
return new Intl.NumberFormat('en', {
37+
notation: 'compact',
38+
})
39+
.formatToParts(number)
40+
.reduce((acc, part) => {
41+
return `${acc}${part.value}`;
42+
}, '');
43+
}

‎packages/compass-crud/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@
9898
"mongodb-data-service": "^22.34.3",
9999
"mongodb-ns": "^3.0.1",
100100
"mongodb-query-parser": "^4.3.0",
101-
"numeral": "^2.0.6",
102101
"react": "^17.0.2",
103102
"reflux": "^0.4.1",
104103
"semver": "^7.6.3"

‎packages/compass-crud/src/plugin-title.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useMemo } from 'react';
2-
import numeral from 'numeral';
3-
import { css, Tooltip, Badge, spacing } from '@mongodb-js/compass-components';
2+
import {
3+
css,
4+
Tooltip,
5+
Badge,
6+
spacing,
7+
compactBytes,
8+
compactNumber,
9+
} from '@mongodb-js/compass-components';
410
import type { CrudStore } from './stores/crud-store';
511
import { usePreference } from 'compass-preferences-model/provider';
612

@@ -22,12 +28,14 @@ const isNumber = (val: any): val is number => {
2228
return typeof val === 'number' && !isNaN(val);
2329
};
2430

25-
const format = (value: any, format = 'a') => {
31+
const format = (value: any, formatType: 'number' | 'bytes' = 'number') => {
2632
if (!isNumber(value)) {
2733
return INVALID;
2834
}
29-
const precision = value <= 1000 ? '0' : '0.0';
30-
return numeral(value).format(precision + format);
35+
const decimals = value <= 1000 ? 0 : 1;
36+
return formatType === 'bytes'
37+
? compactBytes(value, true, decimals)
38+
: compactNumber(value);
3139
};
3240

3341
type CollectionStatsProps = {
@@ -84,9 +92,9 @@ export const CrudTabTitle = ({
8492
avg_document_size = NaN,
8593
} = collectionStats ?? {};
8694
return {
87-
documentCount: format(document_count),
88-
storageSize: format(storage_size - free_storage_size, 'b'),
89-
avgDocumentSize: format(avg_document_size, 'b'),
95+
documentCount: format(document_count, 'number'),
96+
storageSize: format(storage_size - free_storage_size, 'bytes'),
97+
avgDocumentSize: format(avg_document_size, 'bytes'),
9098
};
9199
}, [collectionStats]);
92100
const enableDbAndCollStats = usePreference('enableDbAndCollStats');

‎packages/compass-indexes/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
"@mongodb-js/prettier-config-compass": "^1.2.9",
5454
"@mongodb-js/testing-library-compass": "^1.3.17",
5555
"@mongodb-js/tsconfig-compass": "^1.2.12",
56-
"@types/numeral": "^2.0.5",
5756
"chai": "^4.2.0",
5857
"depcheck": "^1.4.1",
5958
"electron": "^37.6.1",
@@ -88,7 +87,6 @@
8887
"mongodb-mql-engines": "^0.0.4",
8988
"mongodb-ns": "^3.0.1",
9089
"mongodb-query-parser": "^4.3.0",
91-
"numeral": "^2.0.6",
9290
"react": "^17.0.2",
9391
"react-redux": "^8.1.3",
9492
"redux": "^4.2.1",

‎packages/compass-indexes/src/components/regular-indexes-table/size-field.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ describe('SizeField', function () {
1717
describe('SizeField functions', function () {
1818
it('formats size', function () {
1919
expect(formatSize(908)).to.equal('908 B');
20-
expect(formatSize(2020)).to.equal('2.0 KB');
21-
expect(formatSize(202020)).to.equal('202.0 KB');
20+
expect(formatSize(2020)).to.equal('2.0 kB');
21+
expect(formatSize(202020)).to.equal('202.0 kB');
2222
});
2323

2424
it('returns correct tooltip', function () {

0 commit comments

Comments
 (0)