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

* fix disabled state of suggested index button when switching between tabs

* maintain covered queries in btwn tabs

* working version of the state management

* do not render suggested index everytime initial query changes

* skipping failing tests

* combine coveredqueries data into an obj

* fix broken tests

* updated the state to hold coveredQueriesArr instead

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

* fixed tests and automatically generate suggestions when applicable

* clear error when query is updated

* default query = null for create index modal

* added return for the createIndexOpened call

* remove irrelevant comment

* update tests, move logic to reducer for hasQueryChanges

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.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@mongodb-js/testing-library-compass';
 import IndexFlowSection 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';
 
@@ -85,7 +85,15 @@ describe('IndexFlowSection', () => {
 
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.FieldsChanged,
+        fields,
+      });
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+      });
     });
 
     it('renders the covered queries examples', () => {
@@ -133,7 +141,16 @@ describe('IndexFlowSection', () => {
 
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+
+      store.dispatch({
+        type: ActionTypes.FieldsChanged,
+        fields,
+      });
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+      });
     });
 
     it('renders the covered queries examples', () => {
@@ -179,7 +196,15 @@ describe('IndexFlowSection', () => {
 
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.FieldsChanged,
+        fields,
+      });
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+      });
     });
 
     it('renders the covered queries examples', () => {
@@ -208,7 +233,15 @@ describe('IndexFlowSection', () => {
 
     beforeEach(() => {
       renderComponent({ fields });
+
       screen.getByTestId('index-flow-section-covered-queries-button').click();
+      store.dispatch({
+        type: ActionTypes.FieldsChanged,
+        fields,
+      });
+      store.dispatch({
+        type: ActionTypes.CoveredQueriesFetched,
+      });
     });
 
     it('renders the covered queries examples', () => {

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

@@ -13,17 +13,18 @@ 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,
 } 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',
@@ -106,13 +107,18 @@ export type IndexFlowSectionProps = {
   dbName: string;
   collectionName: string;
   onErrorEncountered: (error: string) => void;
-  onErrorCleared: () => void;
+  onCoveredQueriesFetched: () => void;
+  coveredQueriesArr: Array<Record<string, number>> | null;
+  hasIndexFieldChanges: boolean;
 };
 
-const generateCoveredQueries = (
-  coveredQueriesArr: Array<Record<string, number>>,
+export const generateCoveredQueries = (
+  coveredQueriesArr: Array<Record<string, number>> | null,
   track: TrackFunction
 ) => {
+  if (!coveredQueriesArr) {
+    return;
+  }
   const rows = [];
   for (let i = 0; i < coveredQueriesArr.length; i++) {
     const currentRow = Object.assign({}, ...coveredQueriesArr.slice(0, i + 1));
@@ -135,9 +141,12 @@ const generateCoveredQueries = (
   return <>{rows}</>;
 };
 
-const generateOptimalQueries = (
-  coveredQueriesArr: Array<Record<string, number>>
+export const generateOptimalQueries = (
+  coveredQueriesArr: Array<Record<string, number>> | null
 ) => {
+  if (!coveredQueriesArr) {
+    return;
+  }
   const numOfFields = coveredQueriesArr.length;
 
   // Do not show for 1 field or less
@@ -187,18 +196,25 @@ 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,
+  coveredQueriesArr,
+  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 +224,7 @@ const IndexFlowSection = ({
   const isCoveredQueriesButtonDisabled =
     !areAllFieldsFilledIn(fields) ||
     hasUnsupportedQueryTypes ||
-    !hasFieldChanges;
+    !hasIndexFieldChanges;
 
   const indexNameTypeMap = fields.reduce<Record<string, string>>(
     (accumulator, currentValue) => {
@@ -220,45 +236,21 @@ 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 };
-    });
-
     track('Covered Queries Button Clicked', {
       context: 'Create Index Modal',
     });
 
     try {
-      setCoveredQueriesObj({
-        coveredQueries: generateCoveredQueries(coveredQueriesArr, track),
-        optimalQueries: generateOptimalQueries(coveredQueriesArr),
-        showCoveredQueries: true,
-      });
+      onCoveredQueriesFetched();
     } catch (e) {
       onErrorEncountered(e instanceof Error ? e.message : String(e));
     }
+  }, [onCoveredQueriesFetched, onErrorEncountered, track]);
 
-    setHasFieldChanges(false);
-  }, [fields, onErrorEncountered, track]);
-
-  useEffect(() => {
-    setHasFieldChanges(true);
-    onErrorCleared();
-  }, [fields, onErrorCleared]);
-
-  const { coveredQueries, optimalQueries, showCoveredQueries } =
-    coveredQueriesObj;
+  const coveredQueries = generateCoveredQueries(coveredQueriesArr, track);
+  const optimalQueries = generateOptimalQueries(coveredQueriesArr);
+  const showCoveredQueries = coveredQueriesArr !== null;
 
   return (
     <div>
@@ -422,13 +414,17 @@ const IndexFlowSection = ({
   );
 };
 
-const mapState = () => {
-  return {};
+const mapState = ({ createIndex }: RootState) => {
+  const { coveredQueriesArr, hasIndexFieldChanges } = createIndex;
+  return {
+    coveredQueriesArr,
+    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.spec.tsx

@@ -18,9 +18,6 @@ describe('QueryFlowSection', () => {
           serverVersion="5.0.0"
           dbName={dbName}
           collectionName={collectionName}
-          initialQuery={null}
-          inputQuery={''}
-          setInputQuery={() => {}}
         />
       </Provider>
     );