Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import {
Banner,
BannerVariant,
Body,
Code,
css,
Label,
Option,
palette,
Select,
Expand All @@ -11,6 +13,7 @@ import {
import React from 'react';
import { UNRECOGNIZED_FAKER_METHOD } from '../../modules/collection-tab';
import type { MongoDBFieldType } from '@mongodb-js/compass-generative-ai';
import type { FakerArg } from './script-generation-utils';

const fieldMappingSelectorsStyles = css({
width: '50%',
Expand All @@ -24,16 +27,37 @@ const labelStyles = css({
fontWeight: 600,
});

const parseFakerArg = (arg: FakerArg): string => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: there's a parseFakerArgs with a different behavior. One should be renamed

if (typeof arg === 'object' && arg !== null && 'json' in arg) {
try {
return JSON.stringify(JSON.parse(arg.json));
} catch {
return '';
}
}
return arg.toString();
};

const formatFakerFunctionCallWithArgs = (
fakerFunction: string,
fakerArgs: FakerArg[]
) => {
const parsedFakerArgs = fakerArgs.map(parseFakerArg);
return `faker.${fakerFunction}(${parsedFakerArgs.join(', ')})`;
};

interface Props {
activeJsonType: string;
activeFakerFunction: string;
onJsonTypeSelect: (jsonType: MongoDBFieldType) => void;
activeFakerArgs: FakerArg[];
onFakerFunctionSelect: (fakerFunction: string) => void;
}

const FakerMappingSelector = ({
activeJsonType,
activeFakerFunction,
activeFakerArgs,
onJsonTypeSelect,
onFakerFunctionSelect,
}: Props) => {
Expand Down Expand Up @@ -66,13 +90,29 @@ const FakerMappingSelector = ({
</Option>
))}
</Select>
{activeFakerFunction === UNRECOGNIZED_FAKER_METHOD && (
{activeFakerFunction === UNRECOGNIZED_FAKER_METHOD ? (
<Banner variant={BannerVariant.Warning}>
Please select a function or we will default fill this field with the
string &quot;Unrecognized&quot;
</Banner>
) : (
<>
<Label htmlFor="faker-function-call-preview">
Preview Faker Function Call
</Label>
<Code
id="faker-function-call-preview"
data-testid="faker-function-call-preview"
language="javascript"
copyable={false}
>
{formatFakerFunctionCallWithArgs(
activeFakerFunction,
activeFakerArgs
)}
</Code>
</>
)}
{/* TODO(CLOUDP-344400): Render faker function parameters once we have a way to validate them. */}
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const FakerSchemaEditorContent = ({

const activeJsonType = fakerSchemaFormValues[activeField]?.mongoType;
const activeFakerFunction = fakerSchemaFormValues[activeField]?.fakerMethod;
const activeFakerArgs = fakerSchemaFormValues[activeField]?.fakerArgs;

const resetIsSchemaConfirmed = () => {
onSchemaConfirmed(false);
Expand Down Expand Up @@ -109,6 +110,7 @@ const FakerSchemaEditorContent = ({
<FakerMappingSelector
activeJsonType={activeJsonType}
activeFakerFunction={activeFakerFunction}
activeFakerArgs={activeFakerArgs}
onJsonTypeSelect={onJsonTypeSelect}
onFakerFunctionSelect={onFakerFunctionSelect}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('MockDataGeneratorModal', () => {

const store = createStore(
collectionTabReducer,
initialState,
initialState as any,
applyMiddleware(thunk.withExtraArgument(mockServices))
);

Expand Down Expand Up @@ -538,6 +538,111 @@ describe('MockDataGeneratorModal', () => {
);
});

it('displays preview of the faker call without args when the args are invalid', async () => {
const largeLengthArgs = Array.from({ length: 11 }, () => 'testArg');
const mockServices = createMockServices();
mockServices.atlasAiService.getMockDataSchema = () =>
Promise.resolve({
fields: [
{
fieldPath: 'name',
mongoType: 'String',
fakerMethod: 'person.firstName',
fakerArgs: largeLengthArgs,
isArray: false,
probability: 1.0,
},
{
fieldPath: 'age',
mongoType: 'Int32',
fakerMethod: 'number.int',
fakerArgs: [
{
json: JSON.stringify({
a: largeLengthArgs,
}),
},
],
isArray: false,
probability: 1.0,
},
{
fieldPath: 'username',
mongoType: 'String',
fakerMethod: 'string.alpha',
// large string
fakerArgs: ['a'.repeat(1001)],
isArray: false,
probability: 1.0,
},
{
fieldPath: 'avatar',
mongoType: 'String',
fakerMethod: 'image.url',
fakerArgs: [
{
json: JSON.stringify({
width: 100_000,
height: 100_000,
}),
},
],
isArray: false,
probability: 1.0,
},
],
});

await renderModal({
mockServices,
schemaAnalysis: {
...defaultSchemaAnalysisState,
processedSchema: {
name: {
type: 'String',
probability: 1.0,
},
age: {
type: 'Int32',
probability: 1.0,
},
username: {
type: 'String',
probability: 1.0,
},
avatar: {
type: 'String',
probability: 1.0,
},
},
},
});

// advance to the schema editor step
userEvent.click(screen.getByText('Confirm'));
await waitFor(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems to be an assertion missing? I'm not connecting how "faker args that are too large" are not shown

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, I added the assertion in utils.spec.ts. Fixing.

expect(screen.getByTestId('faker-schema-editor')).to.exist;
});

userEvent.click(screen.getByText('name'));
expect(screen.getByTestId('faker-function-call-preview')).to.exist;
expect(screen.queryByText(/testArg/)).to.not.exist;

userEvent.click(screen.getByText('age'));
expect(screen.getByTestId('faker-function-call-preview')).to.exist;
expect(screen.queryByText(/testArg/)).to.not.exist;

userEvent.click(screen.getByText('username'));
expect(screen.queryByText(/aaaaaaa/)).to.not.exist;
expect(screen.getByTestId('faker-function-call-preview')).to.exist;

userEvent.click(screen.getByText('avatar'));
expect(screen.getByTestId('faker-function-call-preview')).to.exist;
expect(screen.queryByText(/width/)).to.not.exist;
expect(screen.queryByText(/height/)).to.not.exist;
expect(screen.queryByText(/100000/)).to.not.exist;
});

it('disables the Next button when the faker schema mapping is not confirmed', async () => {
await renderModal({
mockServices: mockServicesWithMockDataResponse,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import type { MongoDBFieldType } from '@mongodb-js/compass-generative-ai';
import type { FakerFieldMapping } from './types';

export type FakerArg = string | number | boolean | { json: string };
export type FakerArg =
| string
| number
| boolean
| { json: string }
| FakerArg[];

const DEFAULT_ARRAY_LENGTH = 3;
const INDENT_SIZE = 2;
Expand Down
Loading
Loading