Skip to content

Commit 08b758f

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 a4956ae commit 08b758f

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.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 FakerSchemaEditor = ({
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 FakerSchemaEditor = ({
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 FakerSchemaEditor = ({
133127
>
134128
Confirm mappings
135129
</Button>
130+
</>
131+
);
132+
};
133+
134+
const FakerSchemaEditor = ({
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
@@ -10,7 +10,6 @@ import {
1010
Modal,
1111
ModalFooter,
1212
spacing,
13-
SpinLoaderWithLabel,
1413
} from '@mongodb-js/compass-components';
1514

1615
import { type MockDataGeneratorState, MockDataGeneratorStep } from './types';
@@ -37,12 +36,6 @@ const rightButtonsStyles = css`
3736
flex-direction: row;
3837
`;
3938

40-
const schemaEditorLoaderStyles = css({
41-
display: 'flex',
42-
alignItems: 'center',
43-
justifyContent: 'center',
44-
});
45-
4639
interface Props {
4740
isOpen: boolean;
4841
onClose: () => void;
@@ -70,28 +63,13 @@ const MockDataGeneratorModal = ({
7063
case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
7164
return <SchemaConfirmationScreen />;
7265
case MockDataGeneratorStep.SCHEMA_EDITOR:
73-
{
74-
if (fakerSchemaGenerationState.status === 'in-progress') {
75-
return (
76-
<div
77-
data-testid="faker-schema-editor-loader"
78-
className={schemaEditorLoaderStyles}
79-
>
80-
<SpinLoaderWithLabel progressText="Processing Documents..." />
81-
</div>
82-
);
83-
}
84-
if (fakerSchemaGenerationState.status === 'completed') {
85-
return (
86-
<FakerSchemaEditor
87-
isSchemaConfirmed={isSchemaConfirmed}
88-
onSchemaConfirmed={setIsSchemaConfirmed}
89-
fakerMappings={fakerSchemaGenerationState.fakerSchema}
90-
/>
91-
);
92-
}
93-
}
94-
break;
66+
return (
67+
<FakerSchemaEditor
68+
isSchemaConfirmed={isSchemaConfirmed}
69+
onSchemaConfirmed={setIsSchemaConfirmed}
70+
fakerSchemaGenerationState={fakerSchemaGenerationState}
71+
/>
72+
);
9573
case MockDataGeneratorStep.DOCUMENT_COUNT:
9674
return <></>; // TODO: CLOUDP-333856
9775
case MockDataGeneratorStep.PREVIEW_DATA:
@@ -102,8 +80,7 @@ const MockDataGeneratorModal = ({
10280
}, [currentStep, fakerSchemaGenerationState, isSchemaConfirmed]);
10381

10482
const isNextButtonDisabled =
105-
currentStep === MockDataGeneratorStep.SCHEMA_EDITOR &&
106-
(!isSchemaConfirmed || fakerSchemaGenerationState.status === 'in-progress');
83+
currentStep === MockDataGeneratorStep.SCHEMA_EDITOR && !isSchemaConfirmed;
10784

10885
const handleNextClick = () => {
10986
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
@@ -696,10 +696,10 @@ const validateFakerSchema = (
696696
return fakerSchema.content.fields.map((field) => {
697697
const { fakerMethod } = field;
698698

699-
const [firstLevel, secondLevel] = fakerMethod.split('.');
700-
if (typeof (faker as any)[firstLevel]?.[secondLevel] !== 'function') {
699+
const [moduleName, methodName] = fakerMethod.split('.');
700+
if (typeof (faker as any)[moduleName]?.[methodName] !== 'function') {
701701
logger.log.warn(
702-
mongoLogId(1_001_000_365),
702+
mongoLogId(1_001_000_372),
703703
'Collection',
704704
'Invalid faker method',
705705
{ fakerMethod }

0 commit comments

Comments
 (0)