Skip to content

Commit c9f3a29

Browse files
ncarbonncarbon
committed
Update @faker-js/faker dependency to version 9.0.0, refactor FakerSchemaEditor to handle loading state, and improve type definitions for FakerSchemaMapping.
1 parent 1258704 commit c9f3a29

File tree

6 files changed

+95
-94
lines changed

6 files changed

+95
-94
lines changed

‎package-lock.json‎

Lines changed: 24 additions & 25 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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
4949
},
5050
"dependencies": {
51-
"@faker-js/faker": "^10.0.0",
51+
"@faker-js/faker": "^9.0.0",
5252
"@mongodb-js/compass-app-registry": "^9.4.22",
5353
"@mongodb-js/compass-app-stores": "^7.59.0",
5454
"@mongodb-js/compass-components": "^1.51.0",

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

Lines changed: 53 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import {
77
Link,
88
palette,
99
spacing,
10+
SpinLoaderWithLabel,
1011
} from '@mongodb-js/compass-components';
1112
import React from 'react';
1213
import FieldSelector from './schema-field-selector';
1314
import FakerMappingSelector from './faker-mapping-selector';
14-
import type { FakerSchemaMapping } from './types';
15+
import type { FakerSchemaMapping, MockDataGeneratorState } from './types';
1516

1617
const containerStyles = css({
1718
display: 'flex',
@@ -41,16 +42,21 @@ const confirmMappingsButtonStyles = css({
4142
width: '200px',
4243
});
4344

44-
const FakerSchemaEditorScreen = ({
45+
const schemaEditorLoaderStyles = css({
46+
display: 'flex',
47+
alignItems: 'center',
48+
justifyContent: 'center',
49+
});
50+
51+
const FakerSchemaEditorContent = ({
52+
fakerSchemaMappings,
4553
onSchemaConfirmed,
46-
fakerMappings,
4754
}: {
48-
isSchemaConfirmed: boolean;
55+
fakerSchemaMappings: Array<FakerSchemaMapping>;
4956
onSchemaConfirmed: (isConfirmed: boolean) => void;
50-
fakerMappings: Array<FakerSchemaMapping>;
5157
}) => {
5258
const [fakerSchemaFormValues, setFakerSchemaFormValues] =
53-
React.useState<Array<FakerSchemaMapping>>(fakerMappings);
59+
React.useState<Array<FakerSchemaMapping>>(fakerSchemaMappings);
5460
const [activeField, setActiveField] = React.useState<string>(
5561
fakerSchemaFormValues[0].fieldPath
5662
);
@@ -97,19 +103,7 @@ const FakerSchemaEditorScreen = ({
97103
};
98104

99105
return (
100-
<div data-testid="faker-schema-editor" className={containerStyles}>
101-
<div>
102-
<h3 className={titleStyles}>
103-
Confirm Field to Faker Function Mappings
104-
</h3>
105-
<Body className={bodyStyles}>
106-
We have sampled your collection and created a schema based on your
107-
documents. That schema has been sent to an LLM and it has returned the
108-
following mapping between your schema fields and{' '}
109-
<Link href="https://fakerjs.dev/api/faker.html">faker functions</Link>
110-
.
111-
</Body>
112-
</div>
106+
<>
113107
<div className={innerEditorStyles}>
114108
<FieldSelector
115109
activeField={activeField}
@@ -133,6 +127,46 @@ const FakerSchemaEditorScreen = ({
133127
>
134128
Confirm mappings
135129
</Button>
130+
</>
131+
);
132+
};
133+
134+
const FakerSchemaEditorScreen = ({
135+
onSchemaConfirmed,
136+
fakerSchemaGenerationState,
137+
}: {
138+
isSchemaConfirmed: boolean;
139+
onSchemaConfirmed: (isConfirmed: boolean) => void;
140+
fakerSchemaGenerationState: MockDataGeneratorState;
141+
}) => {
142+
return (
143+
<div data-testid="faker-schema-editor" className={containerStyles}>
144+
<div>
145+
<h3 className={titleStyles}>
146+
Confirm Field to Faker Function Mappings
147+
</h3>
148+
<Body className={bodyStyles}>
149+
We have sampled your collection and created a schema based on your
150+
documents. That schema has been sent to an LLM and it has returned the
151+
following mapping between your schema fields and{' '}
152+
<Link href="https://fakerjs.dev/api/faker.html">faker functions</Link>
153+
.
154+
</Body>
155+
</div>
156+
{fakerSchemaGenerationState.status === 'in-progress' && (
157+
<div
158+
data-testid="faker-schema-editor-loader"
159+
className={schemaEditorLoaderStyles}
160+
>
161+
<SpinLoaderWithLabel progressText="Processing Documents..." />
162+
</div>
163+
)}
164+
{fakerSchemaGenerationState.status === 'completed' && (
165+
<FakerSchemaEditorContent
166+
fakerSchemaMappings={fakerSchemaGenerationState.fakerSchema}
167+
onSchemaConfirmed={onSchemaConfirmed}
168+
/>
169+
)}
136170
</div>
137171
);
138172
};

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

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
Modal,
1212
ModalFooter,
1313
spacing,
14-
SpinLoaderWithLabel,
1514
} from '@mongodb-js/compass-components';
1615

1716
import { type MockDataGeneratorState, MockDataGeneratorStep } from './types';
@@ -43,12 +42,6 @@ const namespaceStyles = css({
4342
marginBottom: spacing[400],
4443
});
4544

46-
const schemaEditorLoaderStyles = css({
47-
display: 'flex',
48-
alignItems: 'center',
49-
justifyContent: 'center',
50-
});
51-
5245
interface Props {
5346
isOpen: boolean;
5447
onClose: () => void;
@@ -78,28 +71,13 @@ const MockDataGeneratorModal = ({
7871
case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
7972
return <RawSchemaConfirmationScreen />;
8073
case MockDataGeneratorStep.SCHEMA_EDITOR:
81-
{
82-
if (fakerSchemaGenerationState.status === 'in-progress') {
83-
return (
84-
<div
85-
data-testid="faker-schema-editor-loader"
86-
className={schemaEditorLoaderStyles}
87-
>
88-
<SpinLoaderWithLabel progressText="Processing Documents..." />
89-
</div>
90-
);
91-
}
92-
if (fakerSchemaGenerationState.status === 'completed') {
93-
return (
94-
<FakerSchemaEditorScreen
95-
isSchemaConfirmed={isSchemaConfirmed}
96-
onSchemaConfirmed={setIsSchemaConfirmed}
97-
fakerMappings={fakerSchemaGenerationState.fakerSchema}
98-
/>
99-
);
100-
}
101-
}
102-
break;
74+
return (
75+
<FakerSchemaEditorScreen
76+
isSchemaConfirmed={isSchemaConfirmed}
77+
onSchemaConfirmed={setIsSchemaConfirmed}
78+
fakerSchemaGenerationState={fakerSchemaGenerationState}
79+
/>
80+
);
10381
case MockDataGeneratorStep.DOCUMENT_COUNT:
10482
return <></>; // TODO: CLOUDP-333856
10583
case MockDataGeneratorStep.PREVIEW_DATA:
@@ -110,8 +88,7 @@ const MockDataGeneratorModal = ({
11088
}, [currentStep, fakerSchemaGenerationState, isSchemaConfirmed]);
11189

11290
const isNextButtonDisabled =
113-
currentStep === MockDataGeneratorStep.SCHEMA_EDITOR &&
114-
(!isSchemaConfirmed || fakerSchemaGenerationState.status === 'in-progress');
91+
currentStep === MockDataGeneratorStep.SCHEMA_EDITOR && !isSchemaConfirmed;
11592

11693
const handleNextClick = () => {
11794
if (currentStep === MockDataGeneratorStep.GENERATE_DATA) {

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

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { MockDataSchemaResponse } from '@mongodb-js/compass-generative-ai';
2+
13
export enum MockDataGeneratorStep {
24
SCHEMA_CONFIRMATION = 'SCHEMA_CONFIRMATION',
35
SCHEMA_EDITOR = 'SCHEMA_EDITOR',
@@ -33,18 +35,7 @@ export type MockDataGeneratorState =
3335
| MockDataGeneratorCompletedState
3436
| MockDataGeneratorErrorState;
3537

36-
export type FakerSchemaMapping = {
37-
fieldPath: string;
38-
mongoType: string;
39-
fakerMethod: string;
40-
fakerArgs: Array<
41-
| string
42-
| number
43-
| boolean
44-
| {
45-
json: string;
46-
}
47-
>;
48-
isArray: boolean;
49-
probability: number;
50-
};
38+
export type FakerSchemaMapping = Omit<
39+
MockDataSchemaResponse['content']['fields'][number],
40+
'isArray'
41+
>;

‎packages/compass-collection/src/modules/collection-tab.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -706,10 +706,10 @@ const validateFakerSchema = (
706706
return fakerSchema.content.fields.map((field) => {
707707
const { fakerMethod } = field;
708708

709-
const [firstLevel, secondLevel] = fakerMethod.split('.');
710-
if (typeof (faker as any)[firstLevel]?.[secondLevel] !== 'function') {
709+
const [moduleName, methodName] = fakerMethod.split('.');
710+
if (typeof (faker as any)[moduleName]?.[methodName] !== 'function') {
711711
logger.log.warn(
712-
mongoLogId(1_001_000_365),
712+
mongoLogId(1_001_000_372),
713713
'Collection',
714714
'Invalid faker method',
715715
{ fakerMethod }

0 commit comments

Comments
 (0)