feat(compass-collection): Render Output Script in Result Screen - Mock Data Generator CLOUDP-333858

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

@@ -28,6 +28,7 @@ const defaultSchemaAnalysisState: SchemaAnalysisState = {
       sample_values: ['John', 'Jane'],
     },
   },
+  arrayLengthMap: {},
   sampleDocument: { name: 'John' },
   schemaMetadata: { maxNestingDepth: 1, validationRules: null },
 };
@@ -39,6 +40,7 @@ describe('MockDataGeneratorModal', () => {
     enableGenAISampleDocumentPassing = false,
     mockServices = createMockServices(),
     schemaAnalysis = defaultSchemaAnalysisState,
+    fakerSchemaGeneration = { status: 'idle' },
     connectionInfo,
   }: {
     isOpen?: boolean;
@@ -47,15 +49,14 @@ describe('MockDataGeneratorModal', () => {
     mockServices?: any;
     connectionInfo?: ConnectionInfo;
     schemaAnalysis?: SchemaAnalysisState;
+    fakerSchemaGeneration?: CollectionState['fakerSchemaGeneration'];
   } = {}) {
     const initialState: CollectionState = {
       workspaceTabId: 'test-workspace-tab-id',
       namespace: 'test.collection',
       metadata: null,
       schemaAnalysis,
-      fakerSchemaGeneration: {
-        status: 'idle',
-      },
+      fakerSchemaGeneration,
       mockDataGenerator: {
         isModalOpen: isOpen,
         currentStep: currentStep,
@@ -629,7 +630,21 @@ describe('MockDataGeneratorModal', () => {
 
   describe('on the generate data step', () => {
     it('enables the Back button', async () => {
-      await renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+      await renderModal({
+        currentStep: MockDataGeneratorStep.GENERATE_DATA,
+        fakerSchemaGeneration: {
+          status: 'completed',
+          fakerSchema: {
+            name: {
+              fakerMethod: 'person.firstName',
+              fakerArgs: [],
+              probability: 1.0,
+              mongoType: 'String',
+            },
+          },
+          requestId: 'test-request-id',
+        },
+      });
 
       expect(
         screen
@@ -639,7 +654,21 @@ describe('MockDataGeneratorModal', () => {
     });
 
     it('renders the main sections: Prerequisites, steps, and Resources', async () => {
-      await renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+      await renderModal({
+        currentStep: MockDataGeneratorStep.GENERATE_DATA,
+        fakerSchemaGeneration: {
+          status: 'completed',
+          fakerSchema: {
+            name: {
+              fakerMethod: 'person.firstName',
+              fakerArgs: [],
+              probability: 1.0,
+              mongoType: 'String',
+            },
+          },
+          requestId: 'test-request-id',
+        },
+      });
 
       expect(screen.getByText('Prerequisites')).to.exist;
       expect(screen.getByText('1. Create a .js file with the following script'))
@@ -649,7 +678,21 @@ describe('MockDataGeneratorModal', () => {
     });
 
     it('closes the modal when the Done button is clicked', async () => {
-      await renderModal({ currentStep: MockDataGeneratorStep.GENERATE_DATA });
+      await renderModal({
+        currentStep: MockDataGeneratorStep.GENERATE_DATA,
+        fakerSchemaGeneration: {
+          status: 'completed',
+          fakerSchema: {
+            name: {
+              fakerMethod: 'person.firstName',
+              fakerArgs: [],
+              probability: 1.0,
+              mongoType: 'String',
+            },
+          },
+          requestId: 'test-request-id',
+        },
+      });
 
       expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
       userEvent.click(screen.getByText('Done'));
@@ -684,6 +727,18 @@ describe('MockDataGeneratorModal', () => {
       await renderModal({
         currentStep: MockDataGeneratorStep.GENERATE_DATA,
         connectionInfo: atlasConnectionInfo,
+        fakerSchemaGeneration: {
+          status: 'completed',
+          fakerSchema: {
+            name: {
+              fakerMethod: 'person.firstName',
+              fakerArgs: [],
+              probability: 1.0,
+              mongoType: 'String',
+            },
+          },
+          requestId: 'test-request-id',
+        },
       });
 
       const databaseUsersLink = screen.getByRole('link', {

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

@@ -22,6 +22,7 @@ import {
   generateFakerMappings,
   mockDataGeneratorPreviousButtonClicked,
 } from '../../modules/collection-tab';
+import { SCHEMA_ANALYSIS_STATE_COMPLETE } from '../../schema-analysis-types';
 import RawSchemaConfirmationScreen from './raw-schema-confirmation-screen';
 import FakerSchemaEditorScreen from './faker-schema-editor-screen';
 import ScriptScreen from './script-screen';
@@ -51,6 +52,7 @@ interface Props {
   onPreviousStep: () => void;
   namespace: string;
   fakerSchemaGenerationState: MockDataGeneratorState;
+  schemaAnalysis: CollectionState['schemaAnalysis'];
 }
 
 const MockDataGeneratorModal = ({
@@ -62,10 +64,17 @@ const MockDataGeneratorModal = ({
   onPreviousStep,
   namespace,
   fakerSchemaGenerationState,
+  schemaAnalysis,
 }: Props) => {
   const [isSchemaConfirmed, setIsSchemaConfirmed] =
     React.useState<boolean>(false);
 
+  const arrayLengthMap = useMemo(() => {
+    return schemaAnalysis?.status === SCHEMA_ANALYSIS_STATE_COMPLETE
+      ? schemaAnalysis.arrayLengthMap
+      : {};
+  }, [schemaAnalysis]);
+
   const modalBodyContent = useMemo(() => {
     switch (currentStep) {
       case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
@@ -83,9 +92,27 @@ const MockDataGeneratorModal = ({
       case MockDataGeneratorStep.PREVIEW_DATA:
         return <></>; // TODO: CLOUDP-333857
       case MockDataGeneratorStep.GENERATE_DATA:
-        return <ScriptScreen />;
+        // UX flow ensures faker schema is completed, but TypeScript needs the guard
+        if (fakerSchemaGenerationState.status === 'completed') {
+          return (
+            <ScriptScreen
+              fakerSchema={fakerSchemaGenerationState.fakerSchema}
+              namespace={namespace}
+              arrayLengthMap={arrayLengthMap}
+              documentCount={100} // TODO(CLOUDP-333856): Get from document count step
+            />
+          );
+        }
+        // Should never happen, but needed for TypeScript guard
+        return <div>Loading script...</div>;
     }
-  }, [currentStep, fakerSchemaGenerationState, isSchemaConfirmed]);
+  }, [
+    currentStep,
+    fakerSchemaGenerationState,
+    isSchemaConfirmed,
+    namespace,
+    arrayLengthMap,
+  ]);
 
   const isNextButtonDisabled =
     currentStep === MockDataGeneratorStep.SCHEMA_EDITOR && !isSchemaConfirmed;
@@ -159,6 +186,7 @@ const mapStateToProps = (state: CollectionState) => ({
   currentStep: state.mockDataGenerator.currentStep,
   namespace: state.namespace,
   fakerSchemaGenerationState: state.fakerSchemaGeneration,
+  schemaAnalysis: state.schemaAnalysis,
 });
 
 const ConnectedMockDataGeneratorModal = connect(mapStateToProps, {

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

@@ -426,7 +426,7 @@ describe('Script Generation', () => {
         collectionName: 'posts',
         documentCount: 1,
         arrayLengthMap: {
-          tags: [5],
+          'tags[]': 5,
         },
       });
 
@@ -455,12 +455,8 @@ describe('Script Generation', () => {
         collectionName: 'groups',
         documentCount: 1,
         arrayLengthMap: {
-          users: {
-            length: 5,
-            elements: {
-              tags: [4],
-            },
-          },
+          'users[]': 5,
+          'users[].tags[]': 4,
         },
       });
 
@@ -495,8 +491,8 @@ describe('Script Generation', () => {
         collectionName: 'posts',
         documentCount: 1,
         arrayLengthMap: {
-          tags: [0],
-          categories: [2],
+          'tags[]': 0,
+          'categories[]': 2,
         },
       });
 
@@ -530,8 +526,11 @@ describe('Script Generation', () => {
         collectionName: 'data',
         documentCount: 1,
         arrayLengthMap: {
-          matrix: [2, 5], // 2x5 matrix
-          cube: [3, 4, 2], // 3x4x2 cube
+          'matrix[]': 2,
+          'matrix[][]': 5,
+          'cube[]': 3,
+          'cube[][]': 4,
+          'cube[][][]': 2,
         },
       });
 
@@ -562,19 +561,12 @@ describe('Script Generation', () => {
         collectionName: 'complex',
         documentCount: 1,
         arrayLengthMap: {
-          users: {
-            length: 2,
-            elements: {
-              tags: [3],
-              posts: {
-                length: 4,
-                elements: {
-                  comments: [5],
-                },
-              },
-            },
-          },
-          matrix: [2, 3],
+          'users[]': 2,
+          'users[].tags[]': 3,
+          'users[].posts[]': 4,
+          'users[].posts[].comments[]': 5,
+          'matrix[]': 2,
+          'matrix[][]': 3,
         },
       });
 
@@ -598,6 +590,69 @@ describe('Script Generation', () => {
         testDocumentCodeExecution(result.script);
       }
     });
+
+    it('should handle field names with [] in middle (not array notation)', () => {
+      const schema = {
+        'brackets[]InMiddle': createFieldMapping('lorem.word'),
+        'items[].nested[]ArrayFieldWithBrackets[]':
+          createFieldMapping('lorem.sentence'),
+        'matrix[]WithBrackets[][]': createFieldMapping('number.int'),
+      };
+
+      const result = generateScript(schema, {
+        databaseName: 'testdb',
+        collectionName: 'edgecases',
+        documentCount: 1,
+        arrayLengthMap: {
+          'items[]': 2,
+          'items[].nested[]ArrayFieldWithBrackets[]': 3,
+          'matrix[]WithBrackets[]': 2,
+          'matrix[]WithBrackets[][]': 4,
+        },
+      });
+
+      expect(result.success).to.equal(true);
+      if (result.success) {
+        // Verify field names with [] in middle are treated as regular field names
+        expect(result.script).to.contain(
+          '"brackets[]InMiddle": faker.lorem.word()'
+        );
+
+        // Verify array of objects with bracket field names containing arrays
+        expect(result.script).to.contain(
+          'items: Array.from({length: 2}, () => ({\n      "nested[]ArrayFieldWithBrackets": Array.from({length: 3}, () => faker.lorem.sentence())'
+        );
+
+        // Verify multi-dimensional arrays with bracket field names
+        expect(result.script).to.contain(
+          '"matrix[]WithBrackets": Array.from({length: 2}, () => Array.from({length: 4}, () => faker.number.int()))'
+        );
+
+        // Test that the generated document code is executable
+        const document = testDocumentCodeExecution(result.script);
+        expect(document).to.be.an('object');
+
+        // Verify the three specific edge cases
+        expect(document).to.have.property('brackets[]InMiddle');
+
+        expect(document).to.have.property('items');
+        expect(document.items).to.be.an('array').with.length(2);
+        expect(document.items[0]).to.have.property(
+          'nested[]ArrayFieldWithBrackets'
+        );
+        expect(document.items[0]['nested[]ArrayFieldWithBrackets'])
+          .to.be.an('array')
+          .with.length(3);
+
+        expect(document).to.have.property('matrix[]WithBrackets');
+        expect(document['matrix[]WithBrackets'])
+          .to.be.an('array')
+          .with.length(2);
+        expect(document['matrix[]WithBrackets'][0])
+          .to.be.an('array')
+          .with.length(4);
+      }
+    });
   });
 
   describe('Unrecognized Field Defaults', () => {