address smaller feedback

Author: kpamaran

packages/compass-collection/src/components/collection-header-actions/collection-header-actions.tsx

@@ -95,12 +95,14 @@ const CollectionHeaderActions: React.FunctionComponent<
     mockDataGeneratorAssignment?.assignment?.assignmentData?.variant ===
     ExperimentTestGroup.mockDataGeneratorVariant;
 
-  const shouldShowMockDataButton =
+  let shouldShowMockDataButton =
     isInMockDataTreatmentVariant &&
     atlasMetadata && // Only show in Atlas
     !isReadonly && // Don't show for readonly collections (views)
     !sourceName; // sourceName indicates it's a view
 
+  // shouldShowMockDataButton = true;
+
   const exceedsMaxNestingDepth =
     analyzedSchemaDepth > MAX_COLLECTION_NESTING_DEPTH;
 
@@ -145,7 +147,7 @@ const CollectionHeaderActions: React.FunctionComponent<
             </div>
           }
         >
-          {/* todo within (CLOUDP-333853): update disabled open-modal button
+          {/* TODO(CLOUDP-333853): update disabled open-modal button
           tooltip to communicate if schema analysis is incomplete */}
           {exceedsMaxNestingDepth &&
             'At this time we are unable to generate mock data for collections that have deeply nested documents'}

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

@@ -213,32 +213,32 @@ describe('MockDataGeneratorModal', () => {
 
     it('displays the namespace', async () => {
       await renderModal();
-      expect(screen.queryByText('test.collection')).to.exist;
+      expect(screen.getByText('test.collection')).to.exist;
     });
 
     it('uses the appropriate copy when Generative AI sample document passing is enabled', async () => {
       await renderModal({ enableGenAISampleDocumentPassing: true });
-      expect(screen.queryByText('Sample Documents Collected')).to.exist;
+      expect(screen.getByText('Sample Documents Collected')).to.exist;
       expect(
-        screen.queryByText(
-          'A sample of document values from your collection will be sent to an LLM for processing.'
+        screen.getByText(
+          'A sample of documents from your collection will be sent to an LLM for processing.'
         )
       ).to.exist;
       // fragment from { "name": "John" }
-      expect(screen.queryByText('"John"')).to.exist;
+      expect(screen.getByText('"John"')).to.exist;
       expect(screen.queryByText('"String"')).to.not.exist;
     });
 
     it('uses the appropriate copy when Generative AI sample document passing is disabled', async () => {
       await renderModal();
-      expect(screen.queryByText('Document Schema Identified')).to.exist;
+      expect(screen.getByText('Document Schema Identified')).to.exist;
       expect(
         screen.queryByText(
           'We have identified the following schema from your documents. This schema will be sent to an LLM for processing.'
         )
       ).to.exist;
       // fragment from { "name": "String" }
-      expect(screen.queryByText('"String"')).to.exist;
+      expect(screen.getByText('"String"')).to.exist;
       expect(screen.queryByText('"John"')).to.not.exist;
     });
 

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

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import {
   css,
+  Body,
   Button,
   ButtonVariant,
   ModalBody,
@@ -36,13 +37,19 @@ const rightButtonsStyles = css`
   flex-direction: row;
 `;
 
+const namespaceStyles = css({
+  marginTop: spacing[200],
+  marginBottom: spacing[400],
+});
+
 interface Props {
   isOpen: boolean;
   onClose: () => void;
   currentStep: MockDataGeneratorStep;
   onNextStep: () => void;
   onConfirmSchema: () => Promise<void>;
   onPreviousStep: () => void;
+  namespace: string;
 }
 
 const MockDataGeneratorModal = ({
@@ -52,6 +59,7 @@ const MockDataGeneratorModal = ({
   onNextStep,
   onConfirmSchema,
   onPreviousStep,
+  namespace,
 }: Props) => {
   const modalBodyContent = useMemo(() => {
     switch (currentStep) {
@@ -78,6 +86,9 @@ const MockDataGeneratorModal = ({
     }
   };
 
+  const shouldShowNamespace =
+    currentStep !== MockDataGeneratorStep.GENERATE_DATA;
+
   return (
     <Modal
       size="large"
@@ -91,6 +102,9 @@ const MockDataGeneratorModal = ({
     >
       <ModalHeader title="Generate Mock Data" />
       <ModalBody>
+        {shouldShowNamespace && (
+          <Body className={namespaceStyles}>{namespace}</Body>
+        )}
         <div data-testid={`generate-mock-data-step-${currentStep}`}>
           {modalBodyContent}
         </div>
@@ -120,6 +134,7 @@ const MockDataGeneratorModal = ({
 const mapStateToProps = (state: CollectionState) => ({
   isOpen: state.mockDataGenerator.isModalOpen,
   currentStep: state.mockDataGenerator.currentStep,
+  namespace: state.namespace,
 });
 
 const ConnectedMockDataGeneratorModal = connect(mapStateToProps, {

packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx

@@ -7,7 +7,6 @@ import {
   spacing,
   Banner,
   BannerVariant,
-  Code,
   Body,
 } from '@mongodb-js/compass-components';
 
@@ -16,26 +15,23 @@ import toSimplifiedFieldInfo from './to-simplified-field-info';
 import type { CollectionState } from '../../modules/collection-tab';
 import type { SchemaAnalysisState } from '../../schema-analysis-types';
 import type { MockDataGeneratorState } from './types';
+import { Document } from '@mongodb-js/compass-crud';
 
 interface RawSchemaConfirmationScreenProps {
   schemaAnalysis: SchemaAnalysisState;
-  namespace: string;
   fakerSchemaGenerationStatus: MockDataGeneratorState['status'];
 }
 
-const namespaceStyles = css({
-  marginTop: spacing[200],
-  marginBottom: spacing[400],
+const documentContainerStyles = css({
+  backgroundColor: palette.gray.light3,
+  border: `1px solid ${palette.gray.light2}`,
+  borderRadius: spacing[400],
 });
 
 const descriptionStyles = css({
   marginBottom: spacing[200],
 });
 
-const codeStyles = css({
-  maxHeight: '30vh',
-});
-
 const errorBannerStyles = css({
   marginTop: spacing[400],
 });
@@ -46,39 +42,40 @@ const errorBannerTextStyles = css({
 
 const RawSchemaConfirmationScreen = ({
   schemaAnalysis,
-  namespace,
   fakerSchemaGenerationStatus,
 }: RawSchemaConfirmationScreenProps) => {
-  const enableSampleDocumentPassing = usePreference(
+  let enableSampleDocumentPassing = usePreference(
     'enableGenAISampleDocumentPassing'
   );
 
+  // enableSampleDocumentPassing = false;
+
   const subtitleText = enableSampleDocumentPassing
     ? 'Sample Documents Collected'
     : 'Document Schema Identified';
 
   const descriptionText = enableSampleDocumentPassing
-    ? 'A sample of document values from your collection will be sent to an LLM for processing.'
+    ? 'A sample of documents from your collection will be sent to an LLM for processing.'
     : 'We have identified the following schema from your documents. This schema will be sent to an LLM for processing.';
 
   return (
     <div data-testid="raw-schema-confirmation">
       {schemaAnalysis.status === 'complete' ? (
         <>
-          <Body className={namespaceStyles}>{namespace}</Body>
           <Body as="h2" baseFontSize={16} weight="medium">
             {subtitleText}
           </Body>
           <Body className={descriptionStyles}>{descriptionText}</Body>
-          <Code language="javascript" copyable={false} className={codeStyles}>
-            {enableSampleDocumentPassing
-              ? JSON.stringify(schemaAnalysis.sampleDocument, null, 4)
-              : JSON.stringify(
-                  toSimplifiedFieldInfo(schemaAnalysis.processedSchema),
-                  null,
-                  4
-                )}
-          </Code>
+          <div className={documentContainerStyles}>
+            <Document
+              editable={false}
+              doc={
+                enableSampleDocumentPassing
+                  ? schemaAnalysis.sampleDocument
+                  : toSimplifiedFieldInfo(schemaAnalysis.processedSchema)
+              }
+            />
+          </div>
           {fakerSchemaGenerationStatus === 'error' && (
             <Banner
               variant={BannerVariant.Danger}
@@ -104,7 +101,6 @@ const mapStateToProps = (state: CollectionState) => {
 
   return {
     schemaAnalysis,
-    namespace: state.namespace,
     fakerSchemaGenerationStatus,
   };
 };

packages/compass-collection/src/transform-schema-to-field-info.spec.ts

@@ -1137,7 +1137,7 @@ describe('processSchema', function () {
       };
 
       expect(() => processSchema(schema)).to.throw(
-        'invalid fieldPath "field[invalid": "[]" can only appear at the end of field parts'
+        "invalid fieldPath 'field[invalid': '[]' can only appear at the end of field parts"
       );
     });
 
@@ -1167,7 +1167,7 @@ describe('processSchema', function () {
       };
 
       expect(() => processSchema(schema)).to.throw(
-        'invalid fieldPath "field[]invalid": "[]" can only appear at the end of field parts'
+        "invalid fieldPath 'field[]invalid': '[]' can only appear at the end of field parts"
       );
     });
 
@@ -1216,11 +1216,11 @@ describe('processSchema', function () {
       };
 
       expect(() => processSchema(schema)).to.throw(
-        'invalid fieldPath "parent.": field parts cannot be empty'
+        "invalid fieldPath 'parent.': field parts cannot be empty"
       );
     });
 
-    it('throws error for field part that is only "[]"', function () {
+    it('throws error for a field part that only contains "[]"', function () {
       const schema: Schema = {
         fields: [
           {
@@ -1246,7 +1246,7 @@ describe('processSchema', function () {
       };
 
       expect(() => processSchema(schema)).to.throw(
-        "expected fieldPath to have a non-empty part before '[]'"
+        "invalid fieldPath '[]': field parts must have characters other than '[]'"
       );
     });
   });

packages/compass-collection/src/transform-schema-to-field-info.ts

@@ -239,12 +239,14 @@ function validateFieldPath(fieldPath: string) {
   for (const part of parts) {
     if (part === '') {
       throw new Error(
-        `invalid fieldPath "${fieldPath}": field parts cannot be empty`
+        `invalid fieldPath '${fieldPath}': field parts cannot be empty`
       );
     }
 
     if (part.replaceAll('[]', '') === '') {
-      throw Error("expected fieldPath to have a non-empty part before '[]'");
+      throw new Error(
+        `invalid fieldPath '${fieldPath}': field parts must have characters other than '[]'`
+      );
     }
 
     // Check that [] only appears as complete pairs and only at the end of the part
@@ -256,7 +258,7 @@ function validateFieldPath(fieldPath: string) {
     const remaining = part.replace(/(\[\])+$/, '');
     if (remaining.includes('[') || remaining.includes(']')) {
       throw new Error(
-        `invalid fieldPath "${fieldPath}": "[]" can only appear at the end of field parts`
+        `invalid fieldPath '${fieldPath}': '[]' can only appear at the end of field parts`
       );
     }
   }