feat: retain state between tab switches and generate suggestions from nudge flow CLOUDP-323832 (#7001)

* retain state between tab switches and generate suggestions from nudge flow

* updated the usecallback portion

* updated test typing

Author: rubydong

packages/compass-indexes/src/components/create-index-form/create-index-form.tsx

@@ -93,6 +93,9 @@ function CreateIndexForm({
     showIndexesGuidanceVariant && currentTab === 'IndexFlow';
   const showIndexesGuidanceQueryFlow =
     showIndexesGuidanceVariant && currentTab === 'QueryFlow';
+  const [inputQuery, setInputQuery] = React.useState(
+    query ? JSON.stringify(query, null, 2) : ''
+  );
 
   const { database: dbName, collection: collectionName } = toNS(namespace);
 
@@ -178,6 +181,8 @@ function CreateIndexForm({
           dbName={dbName}
           collectionName={collectionName}
           initialQuery={query}
+          inputQuery={inputQuery}
+          setInputQuery={setInputQuery}
         />
       )}
 

packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx

@@ -19,6 +19,8 @@ describe('QueryFlowSection', () => {
           dbName={dbName}
           collectionName={collectionName}
           initialQuery={null}
+          inputQuery={''}
+          setInputQuery={() => {}}
         />
       </Provider>
     );

packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx

@@ -9,7 +9,7 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { Document } from 'mongodb';
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import { css, spacing } from '@mongodb-js/compass-components';
 import {
   CodemirrorMultilineEditor,
@@ -105,6 +105,8 @@ const QueryFlowSection = ({
   indexSuggestions,
   fetchingSuggestionsState,
   initialQuery,
+  inputQuery,
+  setInputQuery,
 }: {
   schemaFields: { name: string; description?: string }[];
   serverVersion: string;
@@ -118,12 +120,12 @@ const QueryFlowSection = ({
   indexSuggestions: Record<string, number> | null;
   fetchingSuggestionsState: IndexSuggestionState;
   initialQuery: Document | null;
+  inputQuery: string;
+  setInputQuery: (query: string) => void;
 }) => {
   const track = useTelemetry();
   const darkMode = useDarkMode();
-  const [inputQuery, setInputQuery] = React.useState(
-    initialQuery ? JSON.stringify(initialQuery, null, 2) : ''
-  );
+
   const [hasNewChanges, setHasNewChanges] = React.useState(
     initialQuery !== null
   );
@@ -146,21 +148,23 @@ const QueryFlowSection = ({
     radius: editorContainerRadius,
   });
 
-  const handleSuggestedIndexButtonClick = useCallback(() => {
+  const generateSuggestedIndexes = useCallback(() => {
     const sanitizedInputQuery = inputQuery.trim();
 
     void onSuggestedIndexButtonClick({
       dbName,
       collectionName,
       inputQuery: sanitizedInputQuery,
     });
+    setHasNewChanges(false);
+  }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick]);
 
+  const handleSuggestedIndexButtonClick = () => {
+    generateSuggestedIndexes();
     track('Suggested Index Button Clicked', {
       context: 'Create Index Modal',
     });
-
-    setHasNewChanges(false);
-  }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick, track]);
+  };
 
   const handleQueryInputChange = useCallback((text: string) => {
     setInputQuery(text);
@@ -185,6 +189,12 @@ const QueryFlowSection = ({
     }
   }, [hasNewChanges, inputQuery]);
 
+  useEffect(() => {
+    if (initialQuery !== null) {
+      generateSuggestedIndexes();
+    }
+  }, [initialQuery]);
+
   return (
     <>
       {initialQuery && (