feat(compass-collection): CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping #7425

kylelai1 · 2025-10-06T17:28:14Z

Description

CLOUDP-348131

Adds the mongo type to faker method mapping for the schema editor dropdowns.
Drive-by fix for schema display for dark mode compatibility.

Checklist

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

Motivation and Context

Bugfix
[ x ] New feature
Dependency update
Misc

Types of changes

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

Screen.Recording.2025-10-06.at.11.26.02.AM.mov

Copilot

Pull Request Overview

This PR implements a mongo type to faker method mapping system for schema editor dropdowns, enabling users to select appropriate faker methods based on MongoDB field types.

Adds a comprehensive mapping of MongoDB types to corresponding Faker.js methods
Implements dynamic dropdown population based on selected MongoDB type
Includes dark mode compatibility fixes for schema display

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/compass-generative-ai/src/index.ts	Exports MongoDBFieldTypeValues enum for external use
packages/compass-generative-ai/src/atlas-ai-service.ts	Makes MongoDBFieldTypeValues enum public by removing internal comment
packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx	Adds dark mode support for document container styling
packages/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx	Implements automatic faker method selection when MongoDB type changes
packages/compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.tsx	Replaces hardcoded dropdown options with dynamic mapping-based options
packages/compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.spec.tsx	Adds comprehensive test coverage for the new dropdown functionality
packages/compass-collection/src/components/mock-data-generator-modal/constants.ts	Defines the mapping of MongoDB types to available Faker methods

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

Copilot · 2025-10-07T14:24:06Z

...s/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx

 import FakerMappingSelector from './faker-mapping-selector';
 import type { FakerSchema, MockDataGeneratorState } from './types';
 import type { MongoDBFieldType } from '@mongodb-js/compass-generative-ai';
+import { getDefaultFakerMethod } from './script-generation-utils';


The import of getDefaultFakerMethod from ./script-generation-utils is added but this function is not defined or implemented in the visible changes. This will cause a compilation error.

Suggested change

import { getDefaultFakerMethod } from './script-generation-utils';

jcobis · 2025-10-08T15:22:10Z

packages/compass-collection/src/components/mock-data-generator-modal/constants.ts

+/**
+ * Map of MongoDB types to available Faker methods.
+ * Not all Faker methods are included here.
+ * More can be found in the Faker.js API: https://fakerjs.dev/api/


This is linking to faker v10, while we're currently on v9— maybe we should just take this opportunity to bump to v10. Think we could just update in package.json: "@faker-js/faker": "^10.0.0", I think should be straightforward, only change I see on first pass would be internet.userName -> internet.username in this file

jcobis · 2025-10-08T15:26:45Z

packages/compass-collection/src/components/mock-data-generator-modal/constants.ts

+ * Not all Faker methods are included here.
+ * More can be found in the Faker.js API: https://fakerjs.dev/api/
+ */
+export const MONGO_TYPE_TO_FAKER_METHODS: Record<


Gave Augment link to https://v9.fakerjs.dev/api/ and had it come up with some more additions. (If you upgrade to v10 can do the same with the new API link):

String: [ // Current methods are good, but could add: 'internet.password', // For password fields 'internet.displayName', // For display names/usernames 'internet.emoji', // For emoji/reaction fields 'system.fileName', // For file name fields 'system.filePath', // For file path fields 'system.mimeType', // For content type fields 'book.title', // For title fields 'music.songName', // For song/media titles 'food.dish', // For food-related strings 'animal.type', // For animal/pet fields 'vehicle.model', // For vehicle/product models 'hacker.phrase', // For tech-related descriptions 'science.chemicalElement', // For scientific data ] Number: [ // Current methods are good, but could add: 'number.binary', // For binary numbers 'number.octal', // For octal numbers 'number.hex', // For hexadecimal numbers 'commerce.price', // For price fields (returns number) 'date.weekday', // For day numbers 'internet.port', // For port numbers ]

jcobis · 2025-10-08T15:39:10Z

...s/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx

          ...currentMapping,
          mongoType: newJsonType,
+          fakerMethod: defaultFakerMethod,
+          fakerArgs: [], // Reset args when changing type


Can we store these args so if the user re-selects the LLM-suggested method, they're re-displayed? I think we can store it in the state of faker-schema-editor-screen.tsx with a useEffect dependent on fakerSchema, and then in onFakerFunctionSelect restore original args if user reselects original LLM method

Quick example code mock-up in this comment

jcobis · 2025-10-08T15:44:53Z

...s/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx

    const currentMapping = fakerSchemaFormValues[activeField];
    if (currentMapping) {
+      // When MongoDB type changes, update the faker method to a default for that type
+      const defaultFakerMethod = getDefaultFakerMethod(newJsonType);


Similarly to my comment about faker args, can we persist the LLM-suggested faker method so that if the user changes the Mongo Type and then reselects the original type, we default to the LLM-suggested faker method? Like with the args, we can store in state.

Quick AI mock-up just as an example, please review ofc:

// Add this state near the other useState declarations (around line 61) const [originalLlmData, setOriginalLlmData] = useState<Record<string, { mongoType: MongoDBFieldType; fakerMethod: string; fakerArgs: any[]; }>>({}); // Add this useEffect after the existing state declarations useEffect(() => { const originalData = Object.fromEntries( Object.entries(fakerSchema).map(([field, mapping]) => [ field, { mongoType: mapping.mongoType, fakerMethod: mapping.fakerMethod, fakerArgs: mapping.fakerArgs } ]) ); setOriginalLlmData(originalData); }, [fakerSchema]); // Update the onJsonTypeSelect function (around line 73) const onJsonTypeSelect = (newJsonType: MongoDBFieldType) => { const currentMapping = fakerSchemaFormValues[activeField]; const originalData = originalLlmData[activeField]; if (currentMapping) { // If switching back to original type, restore original LLM data const shouldRestoreOriginal = originalData && newJsonType === originalData.mongoType && originalData.fakerMethod !== UNRECOGNIZED_FAKER_METHOD; const fakerMethod = shouldRestoreOriginal ? originalData.fakerMethod : getDefaultFakerMethod(newJsonType); const fakerArgs = shouldRestoreOriginal ? originalData.fakerArgs : []; setFakerSchemaFormValues({ ...fakerSchemaFormValues, [activeField]: { ...currentMapping, mongoType: newJsonType, fakerMethod, fakerArgs, }, }); resetIsSchemaConfirmed(); } }; // Update the onFakerFunctionSelect function (around line 91) const onFakerFunctionSelect = (newFakerFunction: string) => { const currentMapping = fakerSchemaFormValues[activeField]; const originalData = originalLlmData[activeField]; if (currentMapping) { // Restore original args if user reselects original LLM method const fakerArgs = (originalData?.fakerMethod === newFakerFunction) ? originalData.fakerArgs : currentMapping.fakerArgs; setFakerSchemaFormValues({ ...fakerSchemaFormValues, [activeField]: { ...currentMapping, fakerMethod: newFakerFunction, fakerArgs, }, }); resetIsSchemaConfirmed(); } };

jcobis · 2025-10-08T15:51:40Z

packages/compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.tsx

 }: Props) => {
+  const fakerMethodOptions = useMemo(() => {
+    const methods =
+      MONGO_TYPE_TO_FAKER_METHODS[activeJsonType as MongoDBFieldType] || [];


Let's just type activeJsonType as MongoDBFieldType so we don't have to cast

Yeah good idea. I see that we already type onJsonTypeSelect with MongoDBFieldType

jcobis · 2025-10-08T15:56:08Z

.../compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.spec.tsx

+} from '@mongodb-js/testing-library-compass';
+import sinon from 'sinon';
+import FakerMappingSelector from './faker-mapping-selector';
+import { UNRECOGNIZED_FAKER_METHOD } from '../../modules/collection-tab';


[Drive-by suggestion]: This made me realize, due to parallel implementation there's a slight mismatch with script-generation-utils.ts, we should change that file to use UNRECOGNIZED_FAKER_METHOD instead of "unrecognized", if you could make that tweak it'd be much appreciated, I think it's just in this one spot (and then update tests accordingly)

jcobis · 2025-10-08T15:58:06Z

...mpass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx

+  css({
+    backgroundColor: isDarkMode ? palette.gray.dark3 : palette.gray.light3,
+    border: `1px solid ${
+      isDarkMode ? palette.gray.dark2 : palette.gray.light2


Awesome 😎

Great fix. However, with this change, css() is called on every render and it is kinda expensive wrt to performance. Within Compass, we usually have two different styles, light and dark and then in component we merge the two based on darkmode. Something like this:

Suggested change

isDarkMode ? palette.gray.dark2 : palette.gray.light2

const documentContainerStyles = css({

border: `1px solid ${palette.gray.light2}`,

...

});

const documentContainerDarkStyles = css({

border: `1px solid ${palette.gray.dark2}`,

});

...

return (

<div className={cx(documentContainerStyles, isDarkmode && documentContainerDarkStyles)} />

);

Good catch. This works, but maybe we can just memoize the CSS object? That way, we don't need to have both a light and dark mode documentContainerStyles.

mabaasit · 2025-10-09T11:40:01Z

.../compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.spec.tsx

+    Object.entries(MONGO_TYPE_TO_FAKER_METHODS).forEach(
+      ([mongoType, methods]) => {


[nit]: this reads better

Suggested change

Object.entries(MONGO_TYPE_TO_FAKER_METHODS).forEach(

([mongoType, methods]) => {

for (const [mongoType, methods] of Object.entries(MONGO_TYPE_TO_FAKER_METHODS)) {

it(`should display faker methods for ${mongoType}`, () => {```

kylelai1 added 3 commits October 6, 2025 12:58

Add mappings

dbeb256

Cleanup

0aaa8f1

Add unit tests

73f6b49

kylelai1 marked this pull request as ready for review October 7, 2025 14:23

kylelai1 requested a review from a team as a code owner October 7, 2025 14:23

kylelai1 requested review from Copilot, gribnoysup and jcobis October 7, 2025 14:23

Copilot AI reviewed Oct 7, 2025

View reviewed changes

kylelai1 changed the title ~~[WIP] feat: CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping~~ feat: CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping Oct 7, 2025

github-actions bot added the feat label Oct 7, 2025

jcobis reviewed Oct 8, 2025

View reviewed changes

jcobis changed the title ~~feat: CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping~~ feat(compass-collection): CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping Oct 8, 2025

jcobis added the no release notes Fix or feature not for release notes label Oct 8, 2025

mabaasit reviewed Oct 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(compass-collection): CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping #7425

feat(compass-collection): CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping #7425

kylelai1 commented Oct 6, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 7, 2025

Uh oh!

jcobis Oct 8, 2025 •

edited

Loading

Uh oh!

jcobis Oct 8, 2025

Uh oh!

jcobis Oct 8, 2025

Uh oh!

jcobis Oct 8, 2025

Uh oh!

jcobis Oct 8, 2025

Uh oh!

jcobis Oct 8, 2025

Uh oh!

kylelai1 Oct 9, 2025

Uh oh!

jcobis Oct 8, 2025

Uh oh!

jcobis Oct 8, 2025

Uh oh!

mabaasit Oct 9, 2025

Uh oh!

kylelai1 Oct 10, 2025

Uh oh!

mabaasit Oct 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

-      isDarkMode ? palette.gray.dark2 : palette.gray.light2
+const documentContainerStyles = css({
+	border: `1px solid ${palette.gray.light2}`,
+	...
+});
+const documentContainerDarkStyles = css({
+	border: `1px solid ${palette.gray.dark2}`,
+});
+...
+return (
+	<div className={cx(documentContainerStyles, isDarkmode && documentContainerDarkStyles)} />
+);

		Object.entries(MONGO_TYPE_TO_FAKER_METHODS).forEach(
		([mongoType, methods]) => {

feat(compass-collection): CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping #7425

Are you sure you want to change the base?

feat(compass-collection): CLOUDP-348131: Schema Editor Dropdowns: Add mongo type to faker method mapping #7425

Conversation

kylelai1 commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Motivation and Context

Types of changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

jcobis Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mabaasit Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kylelai1 commented Oct 6, 2025 •

edited

Loading

jcobis Oct 8, 2025 •

edited

Loading

mabaasit Oct 9, 2025 •

edited

Loading