Connect redux directly

Author: jcobis

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

@@ -22,7 +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';
@@ -52,7 +52,6 @@ interface Props {
   onPreviousStep: () => void;
   namespace: string;
   fakerSchemaGenerationState: MockDataGeneratorState;
-  schemaAnalysis: CollectionState['schemaAnalysis'];
 }
 
 const MockDataGeneratorModal = ({
@@ -64,17 +63,10 @@ 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:
@@ -92,27 +84,9 @@ const MockDataGeneratorModal = ({
       case MockDataGeneratorStep.PREVIEW_DATA:
         return <></>; // TODO: CLOUDP-333857
       case MockDataGeneratorStep.GENERATE_DATA:
-        // 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>;
+        return <ScriptScreen />;
     }
-  }, [
-    currentStep,
-    fakerSchemaGenerationState,
-    isSchemaConfirmed,
-    namespace,
-    arrayLengthMap,
-  ]);
+  }, [currentStep, fakerSchemaGenerationState, isSchemaConfirmed]);
 
   const isNextButtonDisabled =
     currentStep === MockDataGeneratorStep.SCHEMA_EDITOR && !isSchemaConfirmed;
@@ -186,7 +160,6 @@ 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-screen.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { connect } from 'react-redux';
 import {
   Banner,
   Body,
@@ -19,6 +20,8 @@ import toNS from 'mongodb-ns';
 import { generateScript } from './script-generation-utils';
 import type { FakerSchema } from './types';
 import type { ArrayLengthMap } from './script-generation-utils';
+import type { CollectionState } from '../../modules/collection-tab';
+import { SCHEMA_ANALYSIS_STATE_COMPLETE } from '../../schema-analysis-types';
 
 const RUN_SCRIPT_COMMAND = `
 mongosh "mongodb+srv://<your-cluster>.mongodb.net/<your-database>" \\
@@ -27,8 +30,6 @@ mongosh "mongodb+srv://<your-cluster>.mongodb.net/<your-database>" \\
   mockdatascript.js
 `;
 
-const DEFAULT_DOCUMENT_COUNT = 100;
-
 const outerSectionStyles = css({
   display: 'flex',
   flexDirection: 'column',
@@ -71,17 +72,17 @@ const resourceSectionHeader = css({
 });
 
 interface ScriptScreenProps {
-  fakerSchema: FakerSchema;
+  fakerSchema: FakerSchema | null;
   namespace: string;
-  arrayLengthMap?: ArrayLengthMap;
-  documentCount?: number;
+  arrayLengthMap: ArrayLengthMap;
+  documentCount: number;
 }
 
 const ScriptScreen = ({
   fakerSchema,
   namespace,
-  arrayLengthMap = {},
-  documentCount = DEFAULT_DOCUMENT_COUNT,
+  arrayLengthMap,
+  documentCount,
 }: ScriptScreenProps) => {
   const isDarkMode = useDarkMode();
   const connectionInfo = useConnectionInfo();
@@ -90,6 +91,14 @@ const ScriptScreen = ({
 
   // Generate the script using the faker schema
   const scriptResult = useMemo(() => {
+    // Handle case where fakerSchema is not yet available
+    if (!fakerSchema) {
+      return {
+        success: false as const,
+        error: 'Faker schema not available',
+      };
+    }
+
     return generateScript(fakerSchema, {
       documentCount,
       databaseName: database,
@@ -200,5 +209,25 @@ const ScriptScreen = ({
   );
 };
 
-export default ScriptScreen;
+const mapStateToProps = (state: CollectionState) => {
+  const { fakerSchemaGeneration, namespace, schemaAnalysis } = state;
+
+  return {
+    fakerSchema:
+      fakerSchemaGeneration.status === 'completed'
+        ? fakerSchemaGeneration.fakerSchema
+        : null,
+    namespace,
+    arrayLengthMap:
+      schemaAnalysis?.status === SCHEMA_ANALYSIS_STATE_COMPLETE
+        ? schemaAnalysis.arrayLengthMap
+        : {},
+    // TODO(CLOUDP-333856): When document count step is implemented, get documentCount from state
+    documentCount: 100,
+  };
+};
+
+const ConnectedScriptScreen = connect(mapStateToProps)(ScriptScreen);
+
+export default ConnectedScriptScreen;
 export type { ScriptScreenProps };