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

@@ -7,10 +7,12 @@ import {
   palette,
   Select,
   spacing,
+  TextInput,
 } from '@mongodb-js/compass-components';
 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 +26,106 @@ const labelStyles = css({
   fontWeight: 600,
 });
 
+/**
+ * Renders read-only TextInput components for each key-value pair in a faker arguments object.
+ */
+const getFakerArgsInputFromObject = (fakerArgsObject: Record<string, any>) => {
+  return Object.entries(fakerArgsObject).map(([key, item]: [string, any]) => {
+    if (typeof item === 'string' || typeof item === 'boolean') {
+      return (
+        <TextInput
+          key={`faker-arg-${key}`}
+          type="text"
+          label={key}
+          aria-label={`Faker Arg ${key}`}
+          readOnly
+          value={item.toString()}
+        />
+      );
+    } else if (typeof item === 'number') {
+      return (
+        <TextInput
+          key={`faker-arg-${key}`}
+          type="number"
+          label={key}
+          aria-label={`Faker Arg ${key}`}
+          readOnly
+          value={item.toString()}
+        />
+      );
+    } else if (
+      Array.isArray(item) &&
+      item.length > 0 &&
+      typeof item[0] === 'string'
+    ) {
+      return (
+        <TextInput
+          key={`faker-arg-${key}`}
+          type="text"
+          label={key}
+          aria-label={`Faker Arg ${key}`}
+          readOnly
+          value={item.join(', ')}
+        />
+      );
+    }
+    return null;
+  });
+};
+
+/**
+ * Renders TextInput components for each faker argument based on its type.
+ */
+const getFakerArgsInput = (fakerArgs: FakerArg[]) => {
+  return fakerArgs.map((arg, idx) => {
+    if (typeof arg === 'string' || typeof arg === 'boolean') {
+      return (
+        <TextInput
+          key={`faker-arg-${idx}`}
+          type="text"
+          label="Faker Arg"
+          readOnly
+          value={arg.toString()}
+        />
+      );
+    } else if (typeof arg === 'number') {
+      return (
+        <TextInput
+          key={`faker-arg-${idx}`}
+          type="number"
+          label="Faker Arg"
+          readOnly
+          value={arg.toString()}
+        />
+      );
+    } else if (typeof arg === 'object' && 'json' in arg) {
+      // parse the object
+      let parsedArg;
+      try {
+        parsedArg = JSON.parse(arg.json);
+      } catch {
+        // If parsing fails, skip rendering this arg
+        return null;
+      }
+      if (typeof parsedArg === 'object') {
+        return getFakerArgsInputFromObject(parsedArg);
+      }
+    }
+  });
+};
+
 interface Props {
   activeJsonType: string;
   activeFakerFunction: string;
   onJsonTypeSelect: (jsonType: MongoDBFieldType) => void;
+  activeFakerArgs: FakerArg[];
   onFakerFunctionSelect: (fakerFunction: string) => void;
 }
 
 const FakerMappingSelector = ({
   activeJsonType,
   activeFakerFunction,
+  activeFakerArgs,
   onJsonTypeSelect,
   onFakerFunctionSelect,
 }: Props) => {
@@ -72,7 +164,7 @@ const FakerMappingSelector = ({
           string &quot;Unrecognized&quot;
         </Banner>
       )}
-      {/* TODO(CLOUDP-344400): Render faker function parameters once we have a way to validate them. */}
+      {getFakerArgsInput(activeFakerArgs)}
     </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

@@ -62,6 +62,7 @@ describe('MockDataGeneratorModal', () => {
       },
     };
 
+    // @ts-expect-error // TODO: fix ts error
     const store = createStore(
       collectionTabReducer,
       initialState,
@@ -538,6 +539,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;