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

Author: kpamaran

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

@@ -61,6 +61,7 @@ describe('CollectionHeaderActions [Component]', function () {
               hasSchemaAnalysisData={true}
               analyzedSchemaDepth={2}
               schemaAnalysisStatus="complete"
+              schemaAnalysisError={null}
               {...props}
             />
           </PreferencesProvider>
@@ -294,5 +295,37 @@ describe('CollectionHeaderActions [Component]', function () {
       expect(button).to.exist;
       expect(button).to.have.attribute('aria-disabled', 'true');
     });
+
+    it('should show an error banner when the schema is in an unsupported state', async function () {
+      mockUseAssignment.returns({
+        assignment: {
+          assignmentData: {
+            variant: 'mockDataGeneratorVariant',
+          },
+        },
+      });
+
+      await renderCollectionHeaderActions(
+        {
+          namespace: 'test.collection',
+          isReadonly: false,
+          hasSchemaAnalysisData: false,
+          schemaAnalysisStatus: 'error',
+          schemaAnalysisError: {
+            errorType: 'unsupportedState',
+            errorMessage: 'Unsupported state',
+          },
+          onOpenMockDataModal: sinon.stub(),
+        },
+        {},
+        atlasConnectionInfo
+      );
+
+      const button = screen.getByTestId(
+        'collection-header-generate-mock-data-button'
+      );
+      expect(button).to.exist;
+      expect(button).to.have.attribute('aria-disabled', 'true');
+    });
   });
 });

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

@@ -21,6 +21,7 @@ import {
 import {
   SCHEMA_ANALYSIS_STATE_ANALYZING,
   type SchemaAnalysisStatus,
+  type SchemaAnalysisError,
 } from '../../schema-analysis-types';
 
 /**
@@ -35,6 +36,14 @@ const collectionHeaderActionsStyles = css({
   gap: spacing[200],
 });
 
+const tooltipMessageStyles = css({
+  display: 'block',
+  marginBottom: spacing[100],
+  '&:last-child': {
+    marginBottom: 0,
+  },
+});
+
 function buildChartsUrl(
   groupId: string,
   clusterName: string,
@@ -57,6 +66,7 @@ type CollectionHeaderActionsProps = {
   sourcePipeline?: unknown[];
   onOpenMockDataModal: () => void;
   hasSchemaAnalysisData: boolean;
+  schemaAnalysisError: SchemaAnalysisError | null;
   analyzedSchemaDepth: number;
   schemaAnalysisStatus: SchemaAnalysisStatus | null;
 };
@@ -73,6 +83,7 @@ const CollectionHeaderActions: React.FunctionComponent<
   hasSchemaAnalysisData,
   analyzedSchemaDepth,
   schemaAnalysisStatus,
+  schemaAnalysisError,
 }: CollectionHeaderActionsProps) => {
   const connectionInfo = useConnectionInfo();
   const { id: connectionId, atlasMetadata } = connectionInfo;
@@ -145,10 +156,30 @@ const CollectionHeaderActions: React.FunctionComponent<
             </div>
           }
         >
-          {exceedsMaxNestingDepth &&
-            'At this time we are unable to generate mock data for collections that have deeply nested documents'}
-          {isCollectionEmpty &&
-            'Please add data to your collection to generate similar mock documents'}
+          {/* TODO(CLOUDP-333853): update disabled open-modal button
+          tooltip to communicate if schema analysis is incomplete */}
+          <>
+            {exceedsMaxNestingDepth && (
+              <span className={tooltipMessageStyles}>
+                At this time we are unable to generate mock data for collections
+                that have deeply nested documents.
+              </span>
+            )}
+            {isCollectionEmpty && (
+              <span className={tooltipMessageStyles}>
+                Please add data to your collection to generate similar mock
+                documents.
+              </span>
+            )}
+            {schemaAnalysisError &&
+              schemaAnalysisError.errorType === 'unsupportedState' && (
+                <span className={tooltipMessageStyles}>
+                  This collection has a field with a name that contains a
+                  &quot.&quot, which mock data generation does not support at
+                  this time.
+                </span>
+              )}
+          </>
         </Tooltip>
       )}
       {atlasMetadata && (

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

@@ -24,7 +24,9 @@ import { openMockDataGeneratorModal } from '../../modules/collection-tab';
 import type { CollectionState } from '../../modules/collection-tab';
 import {
   SCHEMA_ANALYSIS_STATE_COMPLETE,
+  SCHEMA_ANALYSIS_STATE_ERROR,
   type SchemaAnalysisStatus,
+  type SchemaAnalysisError,
 } from '../../schema-analysis-types';
 
 const collectionHeaderStyles = css({
@@ -70,6 +72,7 @@ type CollectionHeaderProps = {
   hasSchemaAnalysisData: boolean;
   analyzedSchemaDepth: number;
   schemaAnalysisStatus: SchemaAnalysisStatus | null;
+  schemaAnalysisError: SchemaAnalysisError | null;
 };
 
 const getInsightsForPipeline = (pipeline: any[], isAtlas: boolean) => {
@@ -108,6 +111,7 @@ const CollectionHeader: React.FunctionComponent<CollectionHeaderProps> = ({
   hasSchemaAnalysisData,
   analyzedSchemaDepth,
   schemaAnalysisStatus,
+  schemaAnalysisError,
 }) => {
   const darkMode = useDarkMode();
   const showInsights = usePreference('showInsights');
@@ -188,6 +192,7 @@ const CollectionHeader: React.FunctionComponent<CollectionHeaderProps> = ({
           hasSchemaAnalysisData={hasSchemaAnalysisData}
           analyzedSchemaDepth={analyzedSchemaDepth}
           schemaAnalysisStatus={schemaAnalysisStatus}
+          schemaAnalysisError={schemaAnalysisError}
         />
       </div>
       <MockDataGeneratorModal />
@@ -199,6 +204,10 @@ const mapStateToProps = (state: CollectionState) => {
   const { schemaAnalysis } = state;
 
   return {
+    schemaAnalysisError:
+      schemaAnalysis && schemaAnalysis.status === SCHEMA_ANALYSIS_STATE_ERROR
+        ? schemaAnalysis.error
+        : null,
     hasSchemaAnalysisData:
       schemaAnalysis &&
       schemaAnalysis.status === SCHEMA_ANALYSIS_STATE_COMPLETE &&

packages/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor.tsx renamed to 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,
+        },
+      }
     );
   }
 
@@ -204,6 +211,37 @@ describe('MockDataGeneratorModal', () => {
       ).to.equal('true');
     });
 
+    it('displays the namespace', async () => {
+      await renderModal();
+      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.getByText('Sample Documents Collected')).to.exist;
+      expect(
+        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.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.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.getByText('"String"')).to.exist;
+      expect(screen.queryByText('"John"')).to.not.exist;
+    });
+
     it('renders the faker schema editor when the confirm button is clicked', async () => {
       await renderModal();
 
@@ -230,10 +268,9 @@ 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
   });
 
   describe('on the generate data step', () => {

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,
@@ -21,8 +22,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`
@@ -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,13 +59,14 @@ const MockDataGeneratorModal = ({
   onNextStep,
   onConfirmSchema,
   onPreviousStep,
+  namespace,
 }: Props) => {
   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:
@@ -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, {