working version of the state management

Author: rubydong

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import {
   css,
   spacing,
@@ -78,16 +78,6 @@ 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
@@ -165,8 +155,6 @@ function CreateIndexForm({
                   onRemoveFieldClick={onRemoveFieldClick}
                 />
               }
-              coveredQueriesObj={coveredQueriesObj}
-              setCoveredQueriesObj={setCoveredQueriesObj}
             />
           ) : (
             // Control UI

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

@@ -17,13 +17,16 @@ import React, { useState, useCallback, useEffect } from 'react';
 import {
   errorCleared,
   errorEncountered,
+  fetchCoveredQueries,
   type Field,
+  type CoveredQueriesFetchedProps,
 } from '../../modules/create-index';
 import MDBCodeViewer from './mdb-code-viewer';
 import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation';
 import { connect } from 'react-redux';
 import type { TrackFunction } from '@mongodb-js/compass-telemetry/provider';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import type { RootState } from '../../modules';
 
 const flexContainerStyles = css({
   display: 'flex',
@@ -107,16 +110,15 @@ 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;
+  onCoveredQueriesFetched: ({
+    coveredQueries,
+    optimalQueries,
+    showCoveredQueries,
+  }: CoveredQueriesFetchedProps) => void;
+  coveredQueries: JSX.Element | null;
+  optimalQueries: string | JSX.Element | null;
+  showCoveredQueries: boolean;
+  hasIndexFieldChanges: boolean;
 };
 
 const generateCoveredQueries = (
@@ -204,13 +206,15 @@ const IndexFlowSection = ({
   collectionName,
   onErrorEncountered,
   onErrorCleared,
-  coveredQueriesObj,
-  setCoveredQueriesObj,
+  onCoveredQueriesFetched,
+  coveredQueries,
+  optimalQueries,
+  showCoveredQueries,
+  hasIndexFieldChanges,
 }: IndexFlowSectionProps) => {
   const darkMode = useDarkMode();
   const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
     useState(false);
-  const [hasFieldChanges, setHasFieldChanges] = useState(false);
 
   const hasUnsupportedQueryTypes = fields.some((field) => {
     return field.type === '2dsphere' || field.type === 'text';
@@ -220,7 +224,7 @@ const IndexFlowSection = ({
   const isCoveredQueriesButtonDisabled =
     !areAllFieldsFilledIn(fields) ||
     hasUnsupportedQueryTypes ||
-    !hasFieldChanges;
+    !hasIndexFieldChanges;
 
   const indexNameTypeMap = fields.reduce<Record<string, string>>(
     (accumulator, currentValue) => {
@@ -242,26 +246,20 @@ const IndexFlowSection = ({
     });
 
     try {
-      setCoveredQueriesObj({
+      onCoveredQueriesFetched({
         coveredQueries: generateCoveredQueries(coveredQueriesArr, track),
         optimalQueries: generateOptimalQueries(coveredQueriesArr),
         showCoveredQueries: true,
       });
     } catch (e) {
       onErrorEncountered(e instanceof Error ? e.message : String(e));
     }
-
-    setHasFieldChanges(false);
-  }, [fields, onErrorEncountered, setCoveredQueriesObj, track]);
+  }, [fields, onCoveredQueriesFetched, onErrorEncountered, track]);
 
   useEffect(() => {
-    setHasFieldChanges(true);
     onErrorCleared();
   }, [fields, onErrorCleared]);
 
-  const { coveredQueries, optimalQueries, showCoveredQueries } =
-    coveredQueriesObj;
-
   return (
     <div>
       <div
@@ -424,13 +422,25 @@ const IndexFlowSection = ({
   );
 };
 
-const mapState = () => {
-  return {};
+const mapState = ({ createIndex }: RootState) => {
+  const {
+    coveredQueries,
+    optimalQueries,
+    showCoveredQueries,
+    hasIndexFieldChanges,
+  } = createIndex;
+  return {
+    coveredQueries,
+    optimalQueries,
+    showCoveredQueries,
+    hasIndexFieldChanges,
+  };
 };
 
 const mapDispatch = {
   onErrorEncountered: errorEncountered,
   onErrorCleared: errorCleared,
+  onCoveredQueriesFetched: fetchCoveredQueries,
 };
 
 export default connect(mapState, mapDispatch)(IndexFlowSection);

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

@@ -22,6 +22,7 @@ import type {
   IndexSuggestionState,
   SuggestedIndexFetchedProps,
 } from '../../modules/create-index';
+import { queryUpdated } from '../../modules/create-index';
 import { connect } from 'react-redux';
 import { parseFilter } from 'mongodb-query-parser';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
@@ -96,25 +97,6 @@ const insightStyles = css({
   height: spacing[500],
 });
 
-const validateQuery = ({
-  inputQuery,
-  defaultState,
-}: {
-  inputQuery: string;
-  defaultState: boolean;
-}) => {
-  let isShowSuggestionsButtonDisabled = defaultState;
-  try {
-    parseFilter(inputQuery);
-    if (!inputQuery.startsWith('{') || !inputQuery.endsWith('}')) {
-      isShowSuggestionsButtonDisabled = true;
-    }
-  } catch {
-    isShowSuggestionsButtonDisabled = true;
-  }
-  return isShowSuggestionsButtonDisabled;
-};
-
 const QueryFlowSection = ({
   schemaFields,
   serverVersion,
@@ -126,6 +108,8 @@ const QueryFlowSection = ({
   initialQuery,
   inputQuery,
   setInputQuery,
+  hasQueryChanges,
+  onQueryUpdated,
 }: {
   schemaFields: { name: string; description?: string }[];
   serverVersion: string;
@@ -141,13 +125,17 @@ const QueryFlowSection = ({
   initialQuery: Document | null;
   inputQuery: string;
   setInputQuery: (query: string) => void;
+  hasQueryChanges: boolean; // to keep track of the state between the tab flows
+  onQueryUpdated: () => void;
 }) => {
   const track = useTelemetry();
   const darkMode = useDarkMode();
 
+  // if initialQuery isnt null then we should have new changes
   const [hasNewChanges, setHasNewChanges] = React.useState(
-    initialQuery !== null
+    initialQuery !== null || hasQueryChanges
   );
+
   const [isShowSuggestionsButtonDisabled, setIsShowSuggestionsButtonDisabled] =
     React.useState(true);
 
@@ -176,7 +164,7 @@ const QueryFlowSection = ({
       inputQuery: sanitizedInputQuery,
     });
     setHasNewChanges(false);
-  }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick]);
+  }, [inputQuery, onSuggestedIndexButtonClick, dbName, collectionName]);
 
   const handleSuggestedIndexButtonClick = () => {
     generateSuggestedIndexes();
@@ -189,28 +177,28 @@ const QueryFlowSection = ({
     (text: string) => {
       setInputQuery(text);
       setHasNewChanges(true);
+      onQueryUpdated();
     },
-    [setInputQuery]
+    [onQueryUpdated, setInputQuery]
   );
 
   const isFetchingIndexSuggestions = fetchingSuggestionsState === 'fetching';
 
   useMemo(() => {
-    const isQueryInvalid = validateQuery({
-      inputQuery,
-      defaultState: !hasNewChanges,
-    });
-    setIsShowSuggestionsButtonDisabled(isQueryInvalid);
+    let _isShowSuggestionsButtonDisabled = !hasNewChanges;
+    try {
+      parseFilter(inputQuery);
+
+      if (!inputQuery.startsWith('{') || !inputQuery.endsWith('}')) {
+        _isShowSuggestionsButtonDisabled = true;
+      }
+    } catch {
+      _isShowSuggestionsButtonDisabled = true;
+    } finally {
+      setIsShowSuggestionsButtonDisabled(_isShowSuggestionsButtonDisabled);
+    }
   }, [hasNewChanges, inputQuery]);
 
-  // We need to validate the changes upon initial render to possibly enable the button
-  useEffect(() => {
-    const isQueryInvalid = validateQuery({ inputQuery, defaultState: false });
-    setIsShowSuggestionsButtonDisabled(isQueryInvalid);
-    // only run this validation once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     // If there is an initial query from the insights nudge, we generate suggested indexes
     if (initialQuery !== null) {
@@ -305,17 +293,23 @@ const QueryFlowSection = ({
 };
 
 const mapState = ({ createIndex }: RootState) => {
-  const { indexSuggestions, sampleDocs, fetchingSuggestionsState } =
-    createIndex;
+  const {
+    indexSuggestions,
+    sampleDocs,
+    fetchingSuggestionsState,
+    hasQueryChanges,
+  } = createIndex;
   return {
     indexSuggestions,
     sampleDocs,
     fetchingSuggestionsState,
+    hasQueryChanges,
   };
 };
 
 const mapDispatch = {
   onSuggestedIndexButtonClick: fetchIndexSuggestions,
+  onQueryUpdated: queryUpdated,
 };
 
 export default connect(mapState, mapDispatch)(QueryFlowSection);