maintain covered queries in btwn tabs

Author: rubydong

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   css,
   spacing,
@@ -78,6 +78,16 @@ function CreateIndexForm({
 
   const track = useTelemetry();
 
+  const [coveredQueriesObj, setCoveredQueriesObj] = useState<{
+    coveredQueries: JSX.Element;
+    optimalQueries: string | JSX.Element;
+    showCoveredQueries: boolean;
+  }>({
+    coveredQueries: <></>,
+    optimalQueries: '',
+    showCoveredQueries: false,
+  });
+
   const schemaFields = useAutocompleteFields(namespace);
   const schemaFieldNames = useMemo(() => {
     return schemaFields
@@ -155,6 +165,8 @@ function CreateIndexForm({
                   onRemoveFieldClick={onRemoveFieldClick}
                 />
               }
+              coveredQueriesObj={coveredQueriesObj}
+              setCoveredQueriesObj={setCoveredQueriesObj}
             />
           ) : (
             // Control UI

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

@@ -107,6 +107,16 @@ export type IndexFlowSectionProps = {
   collectionName: string;
   onErrorEncountered: (error: string) => void;
   onErrorCleared: () => void;
+  coveredQueriesObj: {
+    coveredQueries: JSX.Element;
+    optimalQueries: string | JSX.Element;
+    showCoveredQueries: boolean;
+  };
+  setCoveredQueriesObj: (coveredQueriesObj: {
+    coveredQueries: JSX.Element;
+    optimalQueries: string | JSX.Element;
+    showCoveredQueries: boolean;
+  }) => void;
 };
 
 const generateCoveredQueries = (
@@ -194,6 +204,8 @@ const IndexFlowSection = ({
   collectionName,
   onErrorEncountered,
   onErrorCleared,
+  coveredQueriesObj,
+  setCoveredQueriesObj,
 }: IndexFlowSectionProps) => {
   const darkMode = useDarkMode();
   const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
@@ -220,16 +232,6 @@ const IndexFlowSection = ({
     {}
   );
 
-  const [coveredQueriesObj, setCoveredQueriesObj] = useState<{
-    coveredQueries: JSX.Element;
-    optimalQueries: string | JSX.Element;
-    showCoveredQueries: boolean;
-  }>({
-    coveredQueries: <></>,
-    optimalQueries: '',
-    showCoveredQueries: false,
-  });
-
   const onCoveredQueriesButtonClick = useCallback(() => {
     const coveredQueriesArr = fields.map((field, index) => {
       return { [field.name]: index + 1 };
@@ -250,7 +252,7 @@ const IndexFlowSection = ({
     }
 
     setHasFieldChanges(false);
-  }, [fields, onErrorEncountered, track]);
+  }, [fields, onErrorEncountered, setCoveredQueriesObj, track]);
 
   useEffect(() => {
     setHasFieldChanges(true);