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

@@ -110,23 +110,18 @@ 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;
-  };
+  onCoveredQueriesFetched: ({ fields }: CoveredQueriesFetchedProps) => void;
+  coveredQueriesArr: Array<Record<string, number>> | null;
   hasIndexFieldChanges: boolean;
 };
 
 export const generateCoveredQueries = (
-  coveredQueriesArr: Array<Record<string, number>>,
+  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));
@@ -150,8 +145,11 @@ export const generateCoveredQueries = (
 };
 
 export const generateOptimalQueries = (
-  coveredQueriesArr: Array<Record<string, number>>
+  coveredQueriesArr: Array<Record<string, number>> | null
 ) => {
+  if (!coveredQueriesArr) {
+    return;
+  }
   const numOfFields = coveredQueriesArr.length;
 
   // Do not show for 1 field or less
@@ -215,8 +213,7 @@ const IndexFlowSection = ({
   onErrorEncountered,
   onErrorCleared,
   onCoveredQueriesFetched,
-  coveredQueriesObj,
-
+  coveredQueriesArr,
   hasIndexFieldChanges,
 }: IndexFlowSectionProps) => {
   const darkMode = useDarkMode();
@@ -244,17 +241,13 @@ const IndexFlowSection = ({
   );
 
   const onCoveredQueriesButtonClick = useCallback(() => {
-    const coveredQueriesArr = generateCoveredQueriesArr(fields);
-
     track('Covered Queries Button Clicked', {
       context: 'Create Index Modal',
     });
 
     try {
       onCoveredQueriesFetched({
-        coveredQueries: generateCoveredQueries(coveredQueriesArr, track),
-        optimalQueries: generateOptimalQueries(coveredQueriesArr),
-        showCoveredQueries: true,
+        fields,
       });
     } catch (e) {
       onErrorEncountered(e instanceof Error ? e.message : String(e));
@@ -265,8 +258,9 @@ const IndexFlowSection = ({
     onErrorCleared();
   }, [fields, onErrorCleared]);
 
-  const { coveredQueries, optimalQueries, showCoveredQueries } =
-    coveredQueriesObj;
+  const coveredQueries = generateCoveredQueries(coveredQueriesArr, track);
+  const optimalQueries = generateOptimalQueries(coveredQueriesArr);
+  const showCoveredQueries = coveredQueriesArr !== null;
 
   return (
     <div>
@@ -431,9 +425,9 @@ const IndexFlowSection = ({
 };
 
 const mapState = ({ createIndex }: RootState) => {
-  const { coveredQueriesObj, hasIndexFieldChanges } = createIndex;
+  const { coveredQueriesArr, hasIndexFieldChanges } = createIndex;
   return {
-    coveredQueriesObj,
+    coveredQueriesArr,
     hasIndexFieldChanges,
   };
 };

packages/compass-indexes/src/modules/create-index.tsx

@@ -323,12 +323,8 @@ export type State = {
   // to determine whether there has been new query changes since user last pressed the button
   hasQueryChanges: boolean;
 
-  // covered queries obj for the index flow
-  coveredQueriesObj: {
-    coveredQueries: JSX.Element | null;
-    optimalQueries: string | JSX.Element | null;
-    showCoveredQueries: boolean;
-  };
+  // covered queries array for the index flow to keep track of what the user last sees after pressing the covered queries button
+  coveredQueriesArr: Array<Record<string, number>> | null;
 
   // to determine whether there has been new index field changes since user last pressed the button
   hasIndexFieldChanges: boolean;
@@ -350,11 +346,7 @@ export const INITIAL_STATE: State = {
   hasQueryChanges: false,
 
   // Index flow
-  coveredQueriesObj: {
-    coveredQueries: null,
-    optimalQueries: null,
-    showCoveredQueries: false,
-  },
+  coveredQueriesArr: null,
   hasIndexFieldChanges: false,
 };
 
@@ -408,16 +400,12 @@ export type SuggestedIndexFetchedProps = {
 };
 
 export type CoveredQueriesFetchedProps = {
-  coveredQueries: JSX.Element;
-  optimalQueries: string | JSX.Element;
-  showCoveredQueries: boolean;
+  fields: Field[];
 };
 
 export type CoveredQueriesFetchedAction = {
   type: ActionTypes.CoveredQueriesFetched;
-  coveredQueries: JSX.Element;
-  optimalQueries: string | JSX.Element;
-  showCoveredQueries: boolean;
+  coveredQueriesArr: Array<Record<string, number>>;
 };
 
 export type QueryUpdatedAction = {
@@ -504,19 +492,19 @@ export const fetchIndexSuggestions = ({
 };
 
 export const fetchCoveredQueries = ({
-  coveredQueries,
-  optimalQueries,
-  showCoveredQueries,
+  fields,
 }: CoveredQueriesFetchedProps): IndexesThunkAction<
   void,
   CoveredQueriesFetchedAction
 > => {
   return (dispatch) => {
+    const coveredQueriesArr = fields.map((field, index) => {
+      return { [field.name]: index + 1 };
+    });
+
     dispatch({
       type: ActionTypes.CoveredQueriesFetched,
-      coveredQueries,
-      optimalQueries,
-      showCoveredQueries,
+      coveredQueriesArr,
     });
   };
 };
@@ -866,11 +854,7 @@ const reducer: Reducer<State, Action> = (state = INITIAL_STATE, action) => {
   ) {
     return {
       ...state,
-      coveredQueriesObj: {
-        coveredQueries: action.coveredQueries,
-        optimalQueries: action.optimalQueries,
-        showCoveredQueries: action.showCoveredQueries,
-      },
+      coveredQueriesArr: action.coveredQueriesArr,
       hasIndexFieldChanges: false,
     };
   }