feat(compass-collection): Output Validation Followup - Mock Data Generator LLM CLOUDP-347048

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

@@ -2,7 +2,9 @@ import {
   Banner,
   BannerVariant,
   Body,
+  Code,
   css,
+  Label,
   Option,
   palette,
   Select,
@@ -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%',
@@ -24,16 +27,25 @@ const labelStyles = css({
   fontWeight: 600,
 });
 
+const formatFakerFunctionCallWithArgs = (
+  fakerFunction: string,
+  fakerArgs: FakerArg[]
+) => {
+  return `faker.${fakerFunction}(${fakerArgs.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) => {
@@ -66,13 +78,28 @@ 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="sample-faker-function-call">
+            Sample Faker Function Call
+          </Label>
+          <Code
+            id="sample-faker-function-call"
+            language="javascript"
+            copyable={false}
+          >
+            {formatFakerFunctionCallWithArgs(
+              activeFakerFunction,
+              activeFakerArgs
+            )}
+          </Code>
+        </>
       )}
-      {/* TODO(CLOUDP-344400): Render faker function parameters once we have a way to validate them. */}
     </div>
   );
 };

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

@@ -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);
@@ -109,6 +110,7 @@ const FakerSchemaEditorContent = ({
           <FakerMappingSelector
             activeJsonType={activeJsonType}
             activeFakerFunction={activeFakerFunction}
+            activeFakerArgs={activeFakerArgs}
             onJsonTypeSelect={onJsonTypeSelect}
             onFakerFunctionSelect={onFakerFunctionSelect}
           />

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

@@ -64,7 +64,7 @@ describe('MockDataGeneratorModal', () => {
 
     const store = createStore(
       collectionTabReducer,
-      initialState,
+      initialState as any,
       applyMiddleware(thunk.withExtraArgument(mockServices))
     );
 
@@ -538,6 +538,44 @@ describe('MockDataGeneratorModal', () => {
       );
     });
 
+    it('does not show faker args that are too large', async () => {
+      const largeLengthArgs = Array.from({ length: 11 }, () => 'test');
+      const mockServices = createMockServices();
+      mockServices.atlasAiService.getMockDataSchema = () =>
+        Promise.resolve({
+          fields: [
+            {
+              fieldPath: 'name',
+              mongoType: 'String',
+              fakerMethod: 'person.firstName',
+              fakerArgs: [JSON.stringify(largeLengthArgs)],
+              isArray: false,
+              probability: 1.0,
+            },
+          ],
+        });
+
+      await renderModal({
+        mockServices,
+        schemaAnalysis: {
+          ...defaultSchemaAnalysisState,
+          processedSchema: {
+            name: {
+              type: 'String',
+              probability: 1.0,
+            },
+          },
+          sampleDocument: { name: 'Peaches' },
+        },
+      });
+
+      // advance to the schema editor step
+      userEvent.click(screen.getByText('Confirm'));
+      await waitFor(() => {
+        expect(screen.getByTestId('faker-schema-editor')).to.exist;
+      });
+    });
+
     it('disables the Next button when the faker schema mapping is not confirmed', async () => {
       await renderModal({
         mockServices: mockServicesWithMockDataResponse,

packages/compass-collection/src/components/mock-data-generator-modal/script-generation-utils.ts

@@ -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;