feat(compass-collection): finish contents of mock data generator confirmation screen CLOUDP-333852

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

@@ -1,12 +1,12 @@
 import React from 'react';
 
 // TODO: More to come from CLOUDP-333853, CLOUDP-333854
-const FakerSchemaEditor = () => {
+const FakerSchemaEditorScreen = () => {
   return (
     <div data-testid="faker-schema-editor">
       Schema Editor Content Placeholder
     </div>
   );
 };
 
-export default FakerSchemaEditor;
+export default FakerSchemaEditorScreen;

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

@@ -20,10 +20,12 @@ describe('MockDataGeneratorModal', () => {
   async function renderModal({
     isOpen = true,
     currentStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION,
+    enableGenAISampleDocumentPassing = false,
     mockServices = createMockServices(),
     connectionInfo,
   }: {
     isOpen?: boolean;
+    enableGenAISampleDocumentPassing?: boolean;
     currentStep?: MockDataGeneratorStep;
     mockServices?: any;
     connectionInfo?: ConnectionInfo;
@@ -63,7 +65,12 @@ describe('MockDataGeneratorModal', () => {
       <Provider store={store}>
         <MockDataGeneratorModal />
       </Provider>,
-      connectionInfo
+      connectionInfo,
+      {
+        preferences: {
+          enableGenAISampleDocumentPassing,
+        },
+      }
     );
   }
 
@@ -109,6 +116,34 @@ describe('MockDataGeneratorModal', () => {
       expect(screen.queryByTestId('generate-mock-data-modal')).to.not.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.queryByText(
+          'A sample of document values 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.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.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.queryByText('"John"')).to.not.exist;
+
+      screen.debug();
+    });
+
     it('closes the modal when the close button is clicked', async () => {
       await renderModal();
 
@@ -230,7 +265,8 @@ describe('MockDataGeneratorModal', () => {
         expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
       });
 
-      // todo: assert a user-friendly error is displayed (CLOUDP-333852)
+      expect(screen.getByText('LLM Request failed. Please confirm again.')).to
+        .exist;
     });
 
     // todo: assert that closing then re-opening the modal after an LLM err removes the err message

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

@@ -21,8 +21,8 @@ import {
   generateFakerMappings,
   mockDataGeneratorPreviousButtonClicked,
 } from '../../modules/collection-tab';
-import { default as SchemaConfirmationScreen } from './raw-schema-confirmation';
-import FakerSchemaEditor from './faker-schema-editor';
+import RawSchemaConfirmationScreen from './raw-schema-confirmation-screen';
+import FakerSchemaEditorScreen from './faker-schema-editor-screen';
 import ScriptScreen from './script-screen';
 
 const footerStyles = css`
@@ -56,9 +56,9 @@ const MockDataGeneratorModal = ({
   const modalBodyContent = useMemo(() => {
     switch (currentStep) {
       case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
-        return <SchemaConfirmationScreen />;
+        return <RawSchemaConfirmationScreen />;
       case MockDataGeneratorStep.SCHEMA_EDITOR:
-        return <FakerSchemaEditor />;
+        return <FakerSchemaEditorScreen />;
       case MockDataGeneratorStep.DOCUMENT_COUNT:
         return <></>; // TODO: CLOUDP-333856
       case MockDataGeneratorStep.PREVIEW_DATA:

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+  css,
+  palette,
+  spacing,
+  Banner,
+  BannerVariant,
+  Code,
+  Body,
+} from '@mongodb-js/compass-components';
+
+import { usePreference } from 'compass-preferences-model/provider';
+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';
+
+interface RawSchemaConfirmationScreenProps {
+  schemaAnalysis: SchemaAnalysisState;
+  namespace: string;
+  fakerSchemaGenerationStatus: MockDataGeneratorState['status'];
+}
+
+const namespaceStyles = css({
+  marginTop: spacing[100],
+  marginBottom: spacing[500],
+});
+
+const headingStyles = css({
+  marginBottom: spacing[100],
+});
+
+const descriptionStyles = css({
+  marginBottom: spacing[300],
+});
+
+const codeStyles = css({
+  maxHeight: '30vh',
+});
+
+const errorBannerStyles = css({
+  marginTop: spacing[400],
+});
+
+const errorBannerTextStyles = css({
+  color: palette.red.dark2,
+});
+
+const RawSchemaConfirmationScreen = ({
+  schemaAnalysis,
+  namespace,
+  fakerSchemaGenerationStatus,
+}: RawSchemaConfirmationScreenProps) => {
+  const enableSampleDocumentPassing = usePreference(
+    'enableGenAISampleDocumentPassing'
+  );
+
+  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.'
+    : 'We have identified the following schema from your documents. This schema will be sent to an LLM for processing.';
+
+  // todo: should establish if unfinished schema analysis edge case should be handled within the modal or
+  // from the button opening the modal
+  const schemaAnalysisIncompletePlaceholder = (
+    <Body>Schema analysis has yet to complete successfully.</Body>
+  );
+
+  return (
+    <div data-testid="raw-schema-confirmation">
+      {schemaAnalysis.status === 'complete' ? (
+        <>
+          <Body className={namespaceStyles}>{namespace}</Body>
+          <Body
+            as="h2"
+            className={headingStyles}
+            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>
+          {fakerSchemaGenerationStatus === 'error' && (
+            <Banner
+              variant={BannerVariant.Danger}
+              className={errorBannerStyles}
+            >
+              <Body className={errorBannerTextStyles}>
+                LLM Request failed. Please confirm again.
+              </Body>
+            </Banner>
+          )}
+        </>
+      ) : (
+        schemaAnalysisIncompletePlaceholder
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = (state: CollectionState) => {
+  const schemaAnalysis = state.schemaAnalysis;
+  const fakerSchemaGenerationStatus = state.fakerSchemaGeneration.status;
+
+  return {
+    schemaAnalysis,
+    namespace: state.namespace,
+    fakerSchemaGenerationStatus,
+  };
+};
+
+const ConnectedRawSchemaConfirmationScreen = connect(
+  mapStateToProps,
+  {}
+)(RawSchemaConfirmationScreen);
+
+export default ConnectedRawSchemaConfirmationScreen;