Skip to content

Commit 6e82d90

Browse files
ncarbonncarbon
committed
reorganize faker schema validation and improve component structure
1 parent 6aad6f0 commit 6e82d90

File tree

13 files changed

+314
-381
lines changed

13 files changed

+314
-381
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 2 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,6 @@
4848
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
4949
},
5050
"dependencies": {
51-
"@faker-js/faker": "^10.0.0",
5251
"@mongodb-js/compass-app-registry": "^9.4.21",
5352
"@mongodb-js/compass-app-stores": "^7.58.1",
5453
"@mongodb-js/compass-components": "^1.50.1",
@@ -73,6 +72,7 @@
7372
"redux-thunk": "^2.4.2"
7473
},
7574
"devDependencies": {
75+
"@faker-js/faker": "^10.0.0",
7676
"@mongodb-js/eslint-config-compass": "^1.4.8",
7777
"@mongodb-js/mocha-config-compass": "^1.7.1",
7878
"@mongodb-js/prettier-config-compass": "^1.2.8",

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import {
2+
Banner,
3+
BannerVariant,
4+
Body,
5+
css,
6+
Option,
7+
palette,
8+
Select,
9+
spacing,
10+
TextInput,
11+
} from '@mongodb-js/compass-components';
12+
import React from 'react';
13+
import { UNRECOGNIZED_FAKER_METHOD } from '../../modules/collection-tab';
14+
15+
const fieldMappingSelectorsStyles = css({
16+
width: '50%',
17+
display: 'flex',
18+
flexDirection: 'column',
19+
gap: spacing[200],
20+
});
21+
22+
const labelStyles = css({
23+
color: palette.gray.dark1,
24+
fontWeight: 600,
25+
});
26+
27+
interface Props {
28+
activeJsonType: string;
29+
activeFakerFunction: string;
30+
activeFakerArgs: Array<string | number | boolean | { json: string }>;
31+
onJsonTypeSelect: (jsonType: string) => void;
32+
onFakerFunctionSelect: (fakerFunction: string) => void;
33+
}
34+
35+
const FakerMappingSelector = ({
36+
activeJsonType,
37+
activeFakerFunction,
38+
activeFakerArgs,
39+
onJsonTypeSelect,
40+
onFakerFunctionSelect,
41+
}: Props) => {
42+
return (
43+
<div
44+
className={fieldMappingSelectorsStyles}
45+
data-testid="field-mapping-selectors"
46+
>
47+
<Body className={labelStyles}>Mapping</Body>
48+
<Select
49+
data-testid="document-field-type-select"
50+
label="JSON Type"
51+
value={activeJsonType}
52+
onChange={onJsonTypeSelect}
53+
>
54+
{[activeJsonType].map((type) => (
55+
<Option key={type} value={type}>
56+
{type}
57+
</Option>
58+
))}
59+
</Select>
60+
<Select
61+
data-testid="faker-funtion-select"
62+
label="Faker Function"
63+
value={activeFakerFunction}
64+
onChange={onFakerFunctionSelect}
65+
>
66+
{[activeFakerFunction].map((field) => (
67+
<Option key={field} value={field}>
68+
{field}
69+
</Option>
70+
))}
71+
</Select>
72+
{activeFakerFunction === UNRECOGNIZED_FAKER_METHOD && (
73+
<Banner variant={BannerVariant.Warning}>
74+
Please select a function or we will default fill this field with the
75+
string “PLACEHOLDER”
76+
</Banner>
77+
)}
78+
{activeFakerArgs.map((arg, idx) => {
79+
if (typeof arg === 'string') {
80+
return (
81+
<TextInput
82+
key={idx}
83+
label={`Faker Function Parameter ${typeof arg}`}
84+
readOnly
85+
value={arg}
86+
/>
87+
);
88+
}
89+
if (typeof arg === 'number') {
90+
return (
91+
<TextInput
92+
key={idx}
93+
label={`Faker Function Parameter ${typeof arg}`}
94+
readOnly
95+
value={arg.toString()}
96+
/>
97+
);
98+
}
99+
if (typeof arg === 'boolean') {
100+
return (
101+
<TextInput
102+
key={idx}
103+
label={`Faker Function Parameter ${typeof arg}`}
104+
readOnly
105+
value={arg.toString()}
106+
/>
107+
);
108+
}
109+
return (
110+
<TextInput
111+
key={idx}
112+
label={`Faker Function Parameter ${typeof arg}`}
113+
readOnly
114+
value={JSON.stringify(arg.json)}
115+
/>
116+
);
117+
})}
118+
</div>
119+
);
120+
};
121+
122+
export default FakerMappingSelector;

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

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import {
22
Body,
33
Button,
4+
ButtonSize,
45
ButtonVariant,
56
css,
6-
H3,
77
Link,
8+
palette,
89
spacing,
9-
VerticalRule,
1010
} from '@mongodb-js/compass-components';
1111
import React from 'react';
1212
import FieldSelector from './schema-field-selector';
13-
import FakerMappingSelector from './field-mapping-selectors';
14-
import { FakerMapping } from './types';
13+
import FakerMappingSelector from './faker-mapping-selector';
14+
import type { FakerSchemaMapping } from './types';
1515

1616
const containerStyles = css({
1717
display: 'flex',
@@ -23,21 +23,34 @@ const innerEditorStyles = css({
2323
display: 'flex',
2424
flexDirection: 'row',
2525
justifyContent: 'space-between',
26-
maxHeight: '500px',
27-
overflow: 'auto',
26+
});
27+
28+
const titleStyles = css({
29+
color: palette.black,
30+
fontWeight: 600,
31+
fontSize: '16px',
32+
lineHeight: '20px',
33+
marginBottom: 0,
34+
});
35+
36+
const bodyStyles = css({
37+
color: palette.gray.dark1,
2838
});
2939

3040
const confirmMappingsButtonStyles = css({
3141
width: '200px',
3242
});
3343

3444
const FakerSchemaEditor = ({
35-
fakerSchema,
45+
onSchemaConfirmed,
46+
fakerMappings,
3647
}: {
37-
fakerSchema: Array<FakerMapping>;
48+
isSchemaConfirmed: boolean;
49+
onSchemaConfirmed: () => void;
50+
fakerMappings: Array<FakerSchemaMapping>;
3851
}) => {
3952
const [fakerSchemaFormValues, setFakerSchemaFormValues] =
40-
React.useState<Array<FakerMapping>>(fakerSchema);
53+
React.useState<Array<FakerSchemaMapping>>(fakerMappings);
4154
const [activeField, setActiveField] = React.useState<string>(
4255
fakerSchemaFormValues[0].fieldPath
4356
);
@@ -49,6 +62,10 @@ const FakerSchemaEditor = ({
4962
(mapping) => mapping.fieldPath === activeField
5063
)?.fakerMethod;
5164

65+
const activeFakerArgs = fakerSchemaFormValues.find(
66+
(mapping) => mapping.fieldPath === activeField
67+
)?.fakerArgs;
68+
5269
const onJsonTypeSelect = (newJsonType: string) => {
5370
const updatedFakerFieldMapping = fakerSchemaFormValues.find(
5471
(mapping) => mapping.fieldPath === activeField
@@ -78,18 +95,21 @@ const FakerSchemaEditor = ({
7895
};
7996

8097
const onConfirmMappings = () => {
81-
console.log('Clicked confirm mappings');
98+
onSchemaConfirmed();
8299
};
83100

84101
return (
85102
<div data-testid="faker-schema-editor" className={containerStyles}>
86103
<div>
87-
<H3>Confirm Field to Faker Function Mappings</H3>
88-
<Body>
104+
<h3 className={titleStyles}>
105+
Confirm Field to Faker Function Mappings
106+
</h3>
107+
<Body className={bodyStyles}>
89108
We have sampled your collection and created a schema based on your
90109
documents. That schema has been sent to an LLM and it has returned the
91110
following mapping between your schema fields and{' '}
92-
<Link href="TODO">faker functions</Link>.
111+
<Link href="https://fakerjs.dev/api/faker.html">faker functions</Link>
112+
.
93113
</Body>
94114
</div>
95115
<div className={innerEditorStyles}>
@@ -98,17 +118,18 @@ const FakerSchemaEditor = ({
98118
fields={fakerSchemaFormValues.map((mapping) => mapping.fieldPath)}
99119
onFieldSelect={setActiveField}
100120
/>
101-
<VerticalRule />
102121
{activeJsonType && activeFakerFunction && (
103122
<FakerMappingSelector
104123
activeJsonType={activeJsonType}
105124
activeFakerFunction={activeFakerFunction}
125+
activeFakerArgs={activeFakerArgs || []}
106126
onJsonTypeSelect={onJsonTypeSelect}
107127
onFakerFunctionSelect={onFakerFunctionSelect}
108128
/>
109129
)}
110130
</div>
111131
<Button
132+
size={ButtonSize.Small}
112133
className={confirmMappingsButtonStyles}
113134
variant={ButtonVariant.Primary}
114135
onClick={onConfirmMappings}

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

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎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
@@ -160,7 +160,7 @@ describe('MockDataGeneratorModal', () => {
160160
userEvent.click(screen.getByText('Confirm'));
161161

162162
await waitFor(() => {
163-
expect(screen.getByTestId('faker-schema-editor')).to.exist;
163+
expect(screen.getByTestId('schema-editor-loading')).to.exist;
164164
});
165165

166166
userEvent.click(screen.getByText('Cancel'));
@@ -176,7 +176,7 @@ describe('MockDataGeneratorModal', () => {
176176
userEvent.click(screen.getByText('Confirm'));
177177

178178
await waitFor(() => {
179-
expect(screen.getByTestId('faker-schema-editor')).to.exist;
179+
expect(screen.getByTestId('schema-editor-loading')).to.exist;
180180
});
181181

182182
userEvent.click(screen.getByText('Back'));

0 commit comments

Comments
 (0)