feat(compass-collection): Document Count Screen - Mock Data Generator CLOUDP-333856

[ncarbon]

Description

This PR adds the "Document Count" step (Figma) to the mock data generator modal in the compass-collection package, allowing users to specify the number of documents to generate and view an estimated disk size based on the avg_document_size obtained from the collection model during schema analysis. It introduces validation, error handling, and updates the Redux state to support average document size (avgDocumentSize).

• Note: I did not implement the vertical stepper since it's in the private leafygreen-ui-private repo.
  • awaiting response from leafygreen team to see if this is something we can import from Artifactory (MANA access is pending), or can be made public.

Mock Data Generator Modal Enhancements:

• Added a new DocumentCountScreen component that lets users specify the number of documents to generate, shows estimated disk size (using the new avgDocumentSize from schema analysis), and validates input with error messaging for out-of-range values. [1] [2] [3]
• Updated modal logic to disable the Next button when the document count is invalid (less than 1 or greater than 100,000).

Schema Analysis & State Updates:

• Extended schema analysis state and Redux actions to include avgDocumentSize, sourced from the collection model, enabling accurate disk size estimation in the modal. [1] [2] [3] [4] [5] [6]

Dependency Updates:

• Added the numeral library for formatting byte sizes in the UI.

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• If this change updates the UI, screenshots/videos are added and a design review is requested
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[Copilot]

Pull Request Overview

This PR adds a "Document Count Screen" to the mock data generator modal in the compass-collection package, allowing users to specify the number of documents to generate with estimated disk size calculation based on average document size from schema analysis.

• Implements document count input with validation (1-100,000 range) and error handling
• Integrates average document size from collection model into schema analysis state
• Adds estimated disk size calculation and display using the numeral library

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
stores/collection-tab.ts	Adds collection model to Redux thunk extra arguments
schema-analysis-types.ts	Extends schema metadata type to include average document size
modules/collection-tab.ts	Updates schema analysis to capture and store average document size from collection model
mock-data-generator-modal.tsx	Integrates DocumentCountScreen component and adds validation logic for next button
mock-data-generator-modal.spec.tsx	Adds comprehensive test coverage for document count screen functionality
document-count-screen.tsx	Implements new document count input screen with disk size estimation
constants.ts	Defines default and maximum document count constants
package.json	Adds numeral dependency for byte formatting

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[jcobis]

Nice work Nataly!

[gribnoysup]

Nothing blocking, a few suggestions that I think should make this a bit tighter, otherwise looks good

[gribnoysup]

Super small nit: I know it's in the designs, but this "Note" here feels redundant, we already prefill the input with the default count, so doesn't seem to be a reason to spell it

[jcobis]

I agree fully, was going to flag this actually

[gribnoysup]

Nit: instead of adding a dependency I would suggest to move the formatting helpers in https://github.com/mongodb-js/compass/blob/main/packages/databases-collections-list/src/format.ts to compass-components package, and use them here, this way we will have consistent formatting across the code

[gribnoysup]

Super duper nit: for readability it might be easier to short circuit here first, then return the form instead of using a ternary for the whole return statement

Suggested change

	return schemaAnalysisState.status === 'complete' ? (
	if (schemaAnalysisState.status !== 'complete') {
	return <div>We are analyzing your collection.</div>
	}
	// ... rest of the form

[mabaasit]

[nit] the estimated size is a bit off visually, we can probably center it wrt to input field?

[jcobis]

Thank you for the keen eye. We're basing off the designs for now and can bring this up with them