feat: Fix the state management for the two flows (disabled state, displaying covered queries) CLOUDP-325467

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

@@ -1,8 +1,12 @@
 import React from 'react';
 import { render, screen } from '@mongodb-js/testing-library-compass';
-import IndexFlowSection from './index-flow-section';
+import IndexFlowSection, {
+  generateCoveredQueries,
+  generateCoveredQueriesArr,
+  generateOptimalQueries,
+} from './index-flow-section';
 import { expect } from 'chai';
-import type { Field } from '../../modules/create-index';
+import { ActionTypes, type Field } from '../../modules/create-index';
 import { Provider } from 'react-redux';
 import { setupStore } from '../../../test/setup-store';
 
@@ -83,9 +87,20 @@ describe('IndexFlowSection', () => {
       { name: 'field4', type: '1 (asc)' },
     ];
 
+    const coveredQueriesArr = generateCoveredQueriesArr(fields);
+    const coveredQueries = generateCoveredQueries(coveredQueriesArr, () => {});
+    const optimalQueries = generateOptimalQueries(coveredQueriesArr);
+
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+        coveredQueries,
+        optimalQueries,
+        showCoveredQueries: true,
+      });
     });
 
     it('renders the covered queries examples', () => {
@@ -131,9 +146,20 @@ describe('IndexFlowSection', () => {
       { name: 'field3', type: '1 (asc)' },
     ];
 
+    const coveredQueriesArr = generateCoveredQueriesArr(fields);
+    const coveredQueries = generateCoveredQueries(coveredQueriesArr, () => {});
+    const optimalQueries = generateOptimalQueries(coveredQueriesArr);
+
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+        coveredQueries,
+        optimalQueries,
+        showCoveredQueries: true,
+      });
     });
 
     it('renders the covered queries examples', () => {
@@ -177,9 +203,20 @@ describe('IndexFlowSection', () => {
       { name: 'field2', type: '1 (asc)' },
     ];
 
+    const coveredQueriesArr = generateCoveredQueriesArr(fields);
+    const coveredQueries = generateCoveredQueries(coveredQueriesArr, () => {});
+    const optimalQueries = generateOptimalQueries(coveredQueriesArr);
+
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+        coveredQueries,
+        optimalQueries,
+        showCoveredQueries: true,
+      });
     });
 
     it('renders the covered queries examples', () => {
@@ -206,9 +243,20 @@ describe('IndexFlowSection', () => {
   describe('when 1 index field is filled in and user clicks on covered queries button', () => {
     const fields: Field[] = [{ name: 'field1', type: '1 (asc)' }];
 
+    const coveredQueriesArr = generateCoveredQueriesArr(fields);
+    const coveredQueries = generateCoveredQueries(coveredQueriesArr, () => {});
+    const optimalQueries = generateOptimalQueries(coveredQueriesArr);
+
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+        coveredQueries,
+        optimalQueries,
+        showCoveredQueries: true,
+      });
     });
 
     it('renders the covered queries examples', () => {

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,9 +110,20 @@ export type IndexFlowSectionProps = {
   collectionName: string;
   onErrorEncountered: (error: string) => void;
   onErrorCleared: () => void;
+  onCoveredQueriesFetched: ({
+    coveredQueries,
+    optimalQueries,
+    showCoveredQueries,
+  }: CoveredQueriesFetchedProps) => void;
+  coveredQueriesObj: {
+    coveredQueries: JSX.Element | null;
+    optimalQueries: string | JSX.Element | null;
+    showCoveredQueries: boolean;
+  };
+  hasIndexFieldChanges: boolean;
 };
 
-const generateCoveredQueries = (
+export const generateCoveredQueries = (
   coveredQueriesArr: Array<Record<string, number>>,
   track: TrackFunction
 ) => {
@@ -135,7 +149,7 @@ const generateCoveredQueries = (
   return <>{rows}</>;
 };
 
-const generateOptimalQueries = (
+export const generateOptimalQueries = (
   coveredQueriesArr: Array<Record<string, number>>
 ) => {
   const numOfFields = coveredQueriesArr.length;
@@ -187,18 +201,27 @@ const generateOptimalQueries = (
   );
 };
 
+export const generateCoveredQueriesArr = (fields: Field[]) => {
+  return fields.map((field, index) => {
+    return { [field.name]: index + 1 };
+  });
+};
+
 const IndexFlowSection = ({
   createIndexFieldsComponent,
   fields,
   dbName,
   collectionName,
   onErrorEncountered,
   onErrorCleared,
+  onCoveredQueriesFetched,
+  coveredQueriesObj,
+
+  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';
@@ -208,7 +231,7 @@ const IndexFlowSection = ({
   const isCoveredQueriesButtonDisabled =
     !areAllFieldsFilledIn(fields) ||
     hasUnsupportedQueryTypes ||
-    !hasFieldChanges;
+    !hasIndexFieldChanges;
 
   const indexNameTypeMap = fields.reduce<Record<string, string>>(
     (accumulator, currentValue) => {
@@ -220,40 +243,25 @@ 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 };
-    });
+    const coveredQueriesArr = generateCoveredQueriesArr(fields);
 
     track('Covered Queries Button Clicked', {
       context: 'Create Index Modal',
     });
 
     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, track]);
+  }, [fields, onCoveredQueriesFetched, onErrorEncountered, track]);
 
   useEffect(() => {
-    setHasFieldChanges(true);
     onErrorCleared();
   }, [fields, onErrorCleared]);
 
@@ -422,13 +430,18 @@ const IndexFlowSection = ({
   );
 };
 
-const mapState = () => {
-  return {};
+const mapState = ({ createIndex }: RootState) => {
+  const { coveredQueriesObj, hasIndexFieldChanges } = createIndex;
+  return {
+    coveredQueriesObj,
+    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';
@@ -107,6 +108,8 @@ const QueryFlowSection = ({
   initialQuery,
   inputQuery,
   setInputQuery,
+  hasQueryChanges,
+  onQueryUpdated,
 }: {
   schemaFields: { name: string; description?: string }[];
   serverVersion: string;
@@ -122,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);
 
@@ -157,7 +164,7 @@ const QueryFlowSection = ({
       inputQuery: sanitizedInputQuery,
     });
     setHasNewChanges(false);
-  }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick]);
+  }, [inputQuery, onSuggestedIndexButtonClick, dbName, collectionName]);
 
   const handleSuggestedIndexButtonClick = () => {
     generateSuggestedIndexes();
@@ -166,14 +173,17 @@ const QueryFlowSection = ({
     });
   };
 
-  const handleQueryInputChange = useCallback((text: string) => {
-    setInputQuery(text);
-    setHasNewChanges(true);
-  }, []);
+  const handleQueryInputChange = useCallback(
+    (text: string) => {
+      setInputQuery(text);
+      setHasNewChanges(true);
+      onQueryUpdated();
+    },
+    [onQueryUpdated, setInputQuery]
+  );
 
   const isFetchingIndexSuggestions = fetchingSuggestionsState === 'fetching';
 
-  // Validate query upon typing
   useMemo(() => {
     let _isShowSuggestionsButtonDisabled = !hasNewChanges;
     try {
@@ -190,10 +200,14 @@ const QueryFlowSection = ({
   }, [hasNewChanges, inputQuery]);
 
   useEffect(() => {
+    // If there is an initial query from the insights nudge, we generate suggested indexes
     if (initialQuery !== null) {
       generateSuggestedIndexes();
     }
-  }, [initialQuery]);
+    // 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 (
     <>
@@ -282,17 +296,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);