Mock data generator preview screen

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

@@ -81,18 +81,14 @@ describe('MockDataGeneratorModal', () => {
       atlasAiService: {
         getMockDataSchema: () => {
           return Promise.resolve({
-            content: {
-              fields: [
-                {
-                  fieldPath: 'name',
-                  mongoType: 'string',
-                  fakerMethod: 'person.firstName',
-                  fakerArgs: [],
-                  isArray: false,
-                  probability: 1.0,
-                },
-              ],
-            },
+            fields: [
+              {
+                fieldPath: 'name',
+                mongoType: 'string',
+                fakerMethod: 'person.firstName',
+                fakerArgs: [],
+              },
+            ],
           } as MockDataSchemaResponse);
         },
       },
@@ -287,42 +283,32 @@ describe('MockDataGeneratorModal', () => {
     const mockServicesWithMockDataResponse = createMockServices();
     mockServicesWithMockDataResponse.atlasAiService.getMockDataSchema = () =>
       Promise.resolve({
-        content: {
-          fields: [
-            {
-              fieldPath: 'name',
-              mongoType: 'string',
-              fakerMethod: 'person.firstName',
-              fakerArgs: [],
-              isArray: false,
-              probability: 1.0,
-            },
-            {
-              fieldPath: 'age',
-              mongoType: 'int',
-              fakerMethod: 'number.int',
-              fakerArgs: [],
-              isArray: false,
-              probability: 1.0,
-            },
-            {
-              fieldPath: 'email',
-              mongoType: 'string',
-              fakerMethod: 'internet',
-              fakerArgs: [],
-              isArray: false,
-              probability: 1.0,
-            },
-            {
-              fieldPath: 'username',
-              mongoType: 'string',
-              fakerMethod: 'noSuchMethod',
-              fakerArgs: [],
-              isArray: false,
-              probability: 1.0,
-            },
-          ],
-        },
+        fields: [
+          {
+            fieldPath: 'name',
+            mongoType: 'string',
+            fakerMethod: 'person.firstName',
+            fakerArgs: [],
+          },
+          {
+            fieldPath: 'age',
+            mongoType: 'int',
+            fakerMethod: 'number.int',
+            fakerArgs: [],
+          },
+          {
+            fieldPath: 'email',
+            mongoType: 'string',
+            fakerMethod: 'internet',
+            fakerArgs: [],
+          },
+          {
+            fieldPath: 'username',
+            mongoType: 'string',
+            fakerMethod: 'noSuchMethod',
+            fakerArgs: [],
+          },
+        ],
       });
 
     it('shows a loading spinner when the faker schema generation is in progress', async () => {
@@ -332,9 +318,7 @@ describe('MockDataGeneratorModal', () => {
           setTimeout(
             () =>
               resolve({
-                content: {
-                  fields: [],
-                },
+                fields: [],
               }),
             1000
           )

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

@@ -13,6 +13,7 @@ import {
   spacing,
 } from '@mongodb-js/compass-components';
 
+import type { ValidatedFakerSchemaMapping } from './types';
 import { type MockDataGeneratorState, MockDataGeneratorStep } from './types';
 import { StepButtonLabelMap } from './constants';
 import type { CollectionState } from '../../modules/collection-tab';
@@ -25,6 +26,7 @@ import {
 import RawSchemaConfirmationScreen from './raw-schema-confirmation-screen';
 import FakerSchemaEditorScreen from './faker-schema-editor-screen';
 import ScriptScreen from './script-screen';
+import PreviewScreen from './preview-screen';
 
 const footerStyles = css`
   flex-direction: row;
@@ -79,9 +81,22 @@ const MockDataGeneratorModal = ({
           />
         );
       case MockDataGeneratorStep.DOCUMENT_COUNT:
-        return <></>; // TODO: CLOUDP-333856
+        return <></>; // TODO(CLOUDP-333856)
       case MockDataGeneratorStep.PREVIEW_DATA:
-        return <></>; // TODO: CLOUDP-333857
+        // TODO(CLOUDP-333855): Apply results from schema editor confirmation
+        //
+        // function validateFakerSchema(input: FakerSchemaMapping): asserts input is ValidatedFakerSchemaMapping {
+        //     ...
+        // }
+        return (
+          <PreviewScreen
+            confirmedFakerSchema={
+              (fakerSchemaGenerationState.status === 'completed'
+                ? fakerSchemaGenerationState.fakerSchema
+                : []) as ValidatedFakerSchemaMapping[]
+            }
+          />
+        );
       case MockDataGeneratorStep.GENERATE_DATA:
         return <ScriptScreen />;
     }

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

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { css, spacing, Body, Code } from '@mongodb-js/compass-components';
+import type { ValidatedFakerSchemaMapping } from './types';
+import { generateDocument } from './script-generation-utils';
+
+const descriptionStyles = css({
+  marginBottom: spacing[200],
+});
+
+interface PreviewScreenProps {
+  confirmedFakerSchema: ValidatedFakerSchemaMapping[];
+}
+
+const NUM_SAMPLE_DOCUMENTS = 5;
+
+function PreviewScreen({ confirmedFakerSchema }: PreviewScreenProps) {
+  const sampleDocuments = useMemo(() => {
+    const documents = [];
+    for (let i = 0; i < NUM_SAMPLE_DOCUMENTS; i++) {
+      documents.push(generateDocument(confirmedFakerSchema));
+    }
+
+    return documents;
+  }, [confirmedFakerSchema]);
+
+  return (
+    <div data-testid="preview-screen">
+      <Body as="h2" baseFontSize={16} weight="medium">
+        Preview Mock Data
+      </Body>
+      <Body className={descriptionStyles}>
+        Below is a sample of documents that will be generated based on your
+        script
+      </Body>
+      <Code language="javascript" copyable={false}>
+        {JSON.stringify(sampleDocuments, null, 2)}
+      </Code>
+    </div>
+  );
+}
+
+export default PreviewScreen;

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

@@ -2,8 +2,10 @@ import { expect } from 'chai';
 import { faker } from '@faker-js/faker/locale/en';
 import {
   generateScript,
+  generateDocument,
   type FakerFieldMapping,
 } from './script-generation-utils';
+import type { ValidatedFakerSchemaMapping } from './types';
 
 /**
  * Helper function to test that generated document code is executable
@@ -1255,4 +1257,135 @@ describe('Script Generation', () => {
       }
     });
   });
+
+  describe('generateDocument', () => {
+    const createValidatedSchemaMapping = (
+      fieldPath: string,
+      fakerMethod: string,
+      mongoType: string = 'String',
+      fakerArgs: any[] = []
+    ) =>
+      ({
+        fieldPath,
+        fakerMethod,
+        mongoType,
+        fakerArgs,
+      } as ValidatedFakerSchemaMapping);
+
+    it('should generate document with simple flat fields of mixed types', () => {
+      const schema: ValidatedFakerSchemaMapping[] = [
+        createValidatedSchemaMapping('name', 'person.fullName'),
+        createValidatedSchemaMapping('age', 'number.int', 'Number'),
+        createValidatedSchemaMapping('isActive', 'datatype.boolean', 'Boolean'),
+        createValidatedSchemaMapping('createdAt', 'date.recent', 'Date'),
+        createValidatedSchemaMapping(
+          '_id',
+          'database.mongodbObjectId',
+          'ObjectId'
+        ),
+      ];
+
+      const document = generateDocument(schema);
+
+      expect(document).to.be.an('object');
+      expect(document).to.have.property('name');
+      expect(document.name).to.be.a('string').and.not.be.empty;
+      expect(document).to.have.property('age');
+      expect(document.age).to.be.a('number');
+      expect(document).to.have.property('isActive');
+      expect(document.isActive).to.be.a('boolean');
+      expect(document).to.have.property('createdAt');
+      expect(document.createdAt).to.be.a('date');
+      expect(document).to.have.property('_id');
+      expect(document._id).to.be.a('string');
+    });
+
+    it('should generate document with multi-dimensional arrays of mixed types', () => {
+      const schema: ValidatedFakerSchemaMapping[] = [
+        createValidatedSchemaMapping(
+          'numberMatrix[][]',
+          'number.int',
+          'Number'
+        ),
+        createValidatedSchemaMapping('stringMatrix[][]', 'lorem.word'),
+        createValidatedSchemaMapping(
+          'booleanGrid[][]',
+          'datatype.boolean',
+          'Boolean'
+        ),
+      ];
+
+      const arrayLengthMap = {
+        numberMatrix: [2, 3],
+        stringMatrix: [2, 2],
+        booleanGrid: [3, 2],
+      };
+
+      const document = generateDocument(schema, arrayLengthMap);
+
+      expect(document).to.be.an('object');
+      expect(document).to.have.property('numberMatrix');
+      expect(document.numberMatrix).to.be.an('array').with.length(2);
+      expect(document.numberMatrix[0]).to.be.an('array').with.length(3);
+      expect(document.numberMatrix[0][0]).to.be.a('number');
+
+      expect(document).to.have.property('stringMatrix');
+      expect(document.stringMatrix).to.be.an('array').with.length(2);
+      expect(document.stringMatrix[0]).to.be.an('array').with.length(2);
+      expect(document.stringMatrix[0][0]).to.be.a('string').and.not.be.empty;
+
+      expect(document).to.have.property('booleanGrid');
+      expect(document.booleanGrid).to.be.an('array').with.length(3);
+      expect(document.booleanGrid[0]).to.be.an('array').with.length(2);
+      expect(document.booleanGrid[0][0]).to.be.a('boolean');
+    });
+
+    it('should handle complex nested structures with arrays and objects', () => {
+      const schema: ValidatedFakerSchemaMapping[] = [
+        createValidatedSchemaMapping('company.name', 'company.name'),
+        createValidatedSchemaMapping(
+          'company.employees[].name',
+          'person.fullName'
+        ),
+        createValidatedSchemaMapping(
+          'company.employees[].email',
+          'internet.email'
+        ),
+        createValidatedSchemaMapping(
+          'company.employees[].skills[]',
+          'lorem.word'
+        ),
+        createValidatedSchemaMapping('company.founded', 'date.past', 'Date'),
+        createValidatedSchemaMapping(
+          'company.isActive',
+          'datatype.boolean',
+          'Boolean'
+        ),
+      ];
+
+      const document = generateDocument(schema);
+
+      expect(document).to.be.an('object');
+      expect(document).to.have.property('company');
+      expect(document.company).to.be.an('object');
+      expect(document.company).to.have.property('name');
+      expect(document.company.name).to.be.a('string').and.not.be.empty;
+      expect(document.company).to.have.property('founded');
+      expect(document.company.founded).to.be.a('date');
+      expect(document.company).to.have.property('isActive');
+      expect(document.company.isActive).to.be.a('boolean');
+      expect(document.company).to.have.property('employees');
+      expect(document.company.employees).to.be.an('array').with.length(3);
+
+      const firstEmployee = document.company.employees[0];
+      expect(firstEmployee).to.be.an('object');
+      expect(firstEmployee).to.have.property('name');
+      expect(firstEmployee.name).to.be.a('string').and.not.be.empty;
+      expect(firstEmployee).to.have.property('email');
+      expect(firstEmployee.email).to.be.a('string').and.include('@');
+      expect(firstEmployee).to.have.property('skills');
+      expect(firstEmployee.skills).to.be.an('array').with.length(3);
+      expect(firstEmployee.skills[0]).to.be.a('string').and.not.be.empty;
+    });
+  });
 });