fix error clearing, remove suggestions from start (need to fix), move query + initialQuery to redux

Author: rubydong

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

@@ -65,7 +65,6 @@ function CreateIndexForm({
   onRemoveFieldClick,
   onTabClick,
   showIndexesGuidanceVariant,
-  query,
 }: CreateIndexFormProps) {
   const { id: connectionId } = useConnectionInfo();
   const rollingIndexesFeatureEnabled = !!usePreference('enableRollingIndexes');
@@ -93,9 +92,6 @@ 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);
 
@@ -180,9 +176,6 @@ function CreateIndexForm({
           serverVersion={serverVersion}
           dbName={dbName}
           collectionName={collectionName}
-          initialQuery={query}
-          inputQuery={inputQuery}
-          setInputQuery={setInputQuery}
         />
       )}
 

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

@@ -13,13 +13,11 @@ import {
   Tooltip,
   useDarkMode,
 } from '@mongodb-js/compass-components';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback } 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';
@@ -109,8 +107,7 @@ export type IndexFlowSectionProps = {
   dbName: string;
   collectionName: string;
   onErrorEncountered: (error: string) => void;
-  onErrorCleared: () => void;
-  onCoveredQueriesFetched: ({ fields }: CoveredQueriesFetchedProps) => void;
+  onCoveredQueriesFetched: () => void;
   coveredQueriesArr: Array<Record<string, number>> | null;
   hasIndexFieldChanges: boolean;
 };
@@ -211,7 +208,6 @@ const IndexFlowSection = ({
   dbName,
   collectionName,
   onErrorEncountered,
-  onErrorCleared,
   onCoveredQueriesFetched,
   coveredQueriesArr,
   hasIndexFieldChanges,
@@ -246,17 +242,11 @@ const IndexFlowSection = ({
     });
 
     try {
-      onCoveredQueriesFetched({
-        fields,
-      });
+      onCoveredQueriesFetched();
     } catch (e) {
       onErrorEncountered(e instanceof Error ? e.message : String(e));
     }
-  }, [fields, onCoveredQueriesFetched, onErrorEncountered, track]);
-
-  useEffect(() => {
-    onErrorCleared();
-  }, [fields, onErrorCleared]);
+  }, [onCoveredQueriesFetched, onErrorEncountered, track]);
 
   const coveredQueries = generateCoveredQueries(coveredQueriesArr, track);
   const optimalQueries = generateOptimalQueries(coveredQueriesArr);
@@ -434,7 +424,6 @@ const mapState = ({ createIndex }: RootState) => {
 
 const mapDispatch = {
   onErrorEncountered: errorEncountered,
-  onErrorCleared: errorCleared,
   onCoveredQueriesFetched: fetchCoveredQueries,
 };
 

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

@@ -8,8 +8,7 @@ import {
   ParagraphSkeleton,
   useDarkMode,
 } from '@mongodb-js/compass-components';
-import type { Document } from 'mongodb';
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { css, spacing } from '@mongodb-js/compass-components';
 import {
   CodemirrorMultilineEditor,
@@ -20,6 +19,7 @@ import type { RootState } from '../../modules';
 import { fetchIndexSuggestions } from '../../modules/create-index';
 import type {
   IndexSuggestionState,
+  QueryUpdatedProps,
   SuggestedIndexFetchedProps,
 } from '../../modules/create-index';
 import { queryUpdated } from '../../modules/create-index';
@@ -106,8 +106,7 @@ const QueryFlowSection = ({
   indexSuggestions,
   fetchingSuggestionsState,
   initialQuery,
-  inputQuery,
-  setInputQuery,
+  query,
   hasQueryChanges,
   onQueryUpdated,
 }: {
@@ -118,24 +117,18 @@ const QueryFlowSection = ({
   onSuggestedIndexButtonClick: ({
     dbName,
     collectionName,
-    inputQuery,
+    query,
   }: SuggestedIndexFetchedProps) => Promise<void>;
   indexSuggestions: Record<string, number> | null;
   fetchingSuggestionsState: IndexSuggestionState;
-  initialQuery: Document | null;
-  inputQuery: string;
-  setInputQuery: (query: string) => void;
+  initialQuery: string | null;
+  query: string;
   hasQueryChanges: boolean; // to keep track of the state between the tab flows
-  onQueryUpdated: () => void;
+  onQueryUpdated: ({ query, hasQueryChanges }: QueryUpdatedProps) => void;
 }) => {
   const track = useTelemetry();
   const darkMode = useDarkMode();
 
-  // if initialQuery isnt null then we should have new changes
-  const [hasNewChanges, setHasNewChanges] = React.useState(
-    initialQuery !== null || hasQueryChanges
-  );
-
   const [isShowSuggestionsButtonDisabled, setIsShowSuggestionsButtonDisabled] =
     React.useState(true);
 
@@ -156,15 +149,14 @@ const QueryFlowSection = ({
   });
 
   const generateSuggestedIndexes = useCallback(() => {
-    const sanitizedInputQuery = inputQuery.trim();
+    const sanitizedInputQuery = query.trim();
 
     void onSuggestedIndexButtonClick({
       dbName,
       collectionName,
-      inputQuery: sanitizedInputQuery,
+      query: sanitizedInputQuery,
     });
-    setHasNewChanges(false);
-  }, [inputQuery, onSuggestedIndexButtonClick, dbName, collectionName]);
+  }, [query, onSuggestedIndexButtonClick, dbName, collectionName]);
 
   const handleSuggestedIndexButtonClick = () => {
     generateSuggestedIndexes();
@@ -175,39 +167,37 @@ const QueryFlowSection = ({
 
   const handleQueryInputChange = useCallback(
     (text: string) => {
-      setInputQuery(text);
-      setHasNewChanges(true);
-      onQueryUpdated();
+      onQueryUpdated({ query: text, hasQueryChanges: true });
     },
-    [onQueryUpdated, setInputQuery]
+    [onQueryUpdated]
   );
 
   const isFetchingIndexSuggestions = fetchingSuggestionsState === 'fetching';
 
   useMemo(() => {
-    let _isShowSuggestionsButtonDisabled = !hasNewChanges;
+    let _isShowSuggestionsButtonDisabled = !hasQueryChanges;
     try {
-      parseFilter(inputQuery);
+      parseFilter(query);
 
-      if (!inputQuery.startsWith('{') || !inputQuery.endsWith('}')) {
+      if (!query.startsWith('{') || !query.endsWith('}')) {
         _isShowSuggestionsButtonDisabled = true;
       }
     } catch {
       _isShowSuggestionsButtonDisabled = true;
     } finally {
       setIsShowSuggestionsButtonDisabled(_isShowSuggestionsButtonDisabled);
     }
-  }, [hasNewChanges, inputQuery]);
-
-  useEffect(() => {
-    // If there is an initial query from the insights nudge, we generate suggested indexes
-    if (initialQuery !== null) {
-      generateSuggestedIndexes();
-    }
-    // we do not want to update this when the initialQuery changes
-    // this should just be done when the component first renders
-    // eslint-disable-next-line
-  }, []);
+  }, [hasQueryChanges, query]);
+
+  // useEffect(() => {
+  //   // If there is an initial query from the insights nudge, we generate suggested indexes
+  //   if (initialQuery !== null) {
+  //     generateSuggestedIndexes();
+  //   }
+  //   // we do not want to update this when the initialQuery changes
+  //   // this should just be done when the component first renders
+  //   // eslint-disable-next-line
+  // }, []);
 
   return (
     <>
@@ -235,7 +225,7 @@ const QueryFlowSection = ({
             showAnnotationsGutter={false}
             copyable={false}
             formattable={false}
-            text={inputQuery}
+            text={query}
             onChangeText={(text) => handleQueryInputChange(text)}
             placeholder="Type a query: { field: 'value' }"
             completer={completer}
@@ -300,12 +290,16 @@ const mapState = ({ createIndex }: RootState) => {
     indexSuggestions,
     sampleDocs,
     fetchingSuggestionsState,
+    query,
+    initialQuery,
     hasQueryChanges,
   } = createIndex;
   return {
     indexSuggestions,
     sampleDocs,
     fetchingSuggestionsState,
+    query,
+    initialQuery,
     hasQueryChanges,
   };
 };