fixed tests and automatically generate suggestions when applicable

Author: rubydong

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

@@ -1,10 +1,6 @@
 import React from 'react';
 import { render, screen } from '@mongodb-js/testing-library-compass';
-import IndexFlowSection, {
-  generateCoveredQueries,
-  generateCoveredQueriesArr,
-  generateOptimalQueries,
-} from './index-flow-section';
+import IndexFlowSection from './index-flow-section';
 import { expect } from 'chai';
 import { ActionTypes, type Field } from '../../modules/create-index';
 import { Provider } from 'react-redux';
@@ -87,19 +83,16 @@ 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.FieldsChanged,
+        fields,
+      });
       store.dispatch({
         type: ActionTypes.CoveredQueriesFetched,
-        coveredQueries,
-        optimalQueries,
-        showCoveredQueries: true,
       });
     });
 
@@ -146,19 +139,17 @@ 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.FieldsChanged,
+        fields,
+      });
       store.dispatch({
         type: ActionTypes.CoveredQueriesFetched,
-        coveredQueries,
-        optimalQueries,
-        showCoveredQueries: true,
       });
     });
 
@@ -203,19 +194,16 @@ 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.FieldsChanged,
+        fields,
+      });
       store.dispatch({
         type: ActionTypes.CoveredQueriesFetched,
-        coveredQueries,
-        optimalQueries,
-        showCoveredQueries: true,
       });
     });
 
@@ -243,19 +231,16 @@ 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.FieldsChanged,
+        fields,
+      });
       store.dispatch({
         type: ActionTypes.CoveredQueriesFetched,
-        coveredQueries,
-        optimalQueries,
-        showCoveredQueries: true,
       });
     });
 

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>
     );

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

@@ -115,8 +115,6 @@ const QueryFlowSection = ({
   dbName: string;
   collectionName: string;
   onSuggestedIndexButtonClick: ({
-    dbName,
-    collectionName,
     query,
   }: SuggestedIndexFetchedProps) => Promise<void>;
   indexSuggestions: Record<string, number> | null;
@@ -152,11 +150,9 @@ const QueryFlowSection = ({
     const sanitizedInputQuery = query.trim();
 
     void onSuggestedIndexButtonClick({
-      dbName,
-      collectionName,
       query: sanitizedInputQuery,
     });
-  }, [query, onSuggestedIndexButtonClick, dbName, collectionName]);
+  }, [query, onSuggestedIndexButtonClick]);
 
   const handleSuggestedIndexButtonClick = () => {
     generateSuggestedIndexes();
@@ -189,16 +185,6 @@ const QueryFlowSection = ({
     }
   }, [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 (
     <>
       {initialQuery && (

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

@@ -30,14 +30,12 @@ import {
 import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
 import { usePreference } from 'compass-preferences-model/provider';
 import CreateIndexModalHeader from './create-index-modal-header';
-import type { Document } from 'mongodb';
 
 type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
   isVisible: boolean;
   namespace: string;
   error: string | null;
   currentTab: Tab;
-  query: Document | null;
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;
@@ -52,7 +50,6 @@ function CreateIndexModal({
   onErrorBannerCloseClick,
   onCreateIndexClick,
   onCancelCreateIndexClick,
-  query,
   ...props
 }: CreateIndexModalProps) {
   const connectionInfoRef = useConnectionInfoRef();
@@ -117,7 +114,6 @@ function CreateIndexModal({
           namespace={namespace}
           showIndexesGuidanceVariant={showIndexesGuidanceVariant}
           currentTab={currentTab}
-          query={query}
         />
       </ModalBody>
 
@@ -134,15 +130,14 @@ function CreateIndexModal({
 }
 
 const mapState = ({ namespace, serverVersion, createIndex }: RootState) => {
-  const { fields, error, isVisible, currentTab, query } = createIndex;
+  const { fields, error, isVisible, currentTab } = createIndex;
   return {
     fields,
     error,
     isVisible,
     namespace,
     serverVersion,
     currentTab,
-    query,
   };
 };
 

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

@@ -10,6 +10,7 @@ import type { IndexesThunkAction, RootState } from '.';
 import { createRegularIndex } from './regular-indexes';
 import * as mql from 'mongodb-mql-engines';
 import _parseShellBSON, { ParseMode } from '@mongodb-js/shell-bson-parser';
+import toNS from 'mongodb-ns';
 
 export enum ActionTypes {
   FieldAdded = 'compass-indexes/create-index/fields/field-added',
@@ -363,10 +364,27 @@ function getInitialState(): State {
 
 //-------
 
-export const createIndexOpened = (initialQuery?: Document) => ({
-  type: ActionTypes.CreateIndexOpened,
-  initialQuery,
-});
+export const createIndexOpened = (
+  initialQuery?: Document
+): IndexesThunkAction<
+  Promise<void>,
+  SuggestedIndexFetchedAction | CreateIndexOpenedAction
+> => {
+  return async (dispatch) => {
+    dispatch({
+      type: ActionTypes.CreateIndexOpened,
+      initialQuery,
+    });
+
+    if (initialQuery) {
+      await dispatch(
+        fetchIndexSuggestions({
+          query: JSON.stringify(initialQuery, null, 2) || '',
+        })
+      );
+    }
+  };
+};
 
 export const createIndexClosed = () => ({
   type: ActionTypes.CreateIndexClosed,
@@ -398,8 +416,6 @@ export type SuggestedIndexFetchedAction = {
 };
 
 export type SuggestedIndexFetchedProps = {
-  dbName: string;
-  collectionName: string;
   query: string;
 };
 
@@ -419,8 +435,6 @@ export type QueryUpdatedAction = {
 };
 
 export const fetchIndexSuggestions = ({
-  dbName,
-  collectionName,
   query,
 }: SuggestedIndexFetchedProps): IndexesThunkAction<
   Promise<void>,
@@ -430,12 +444,11 @@ export const fetchIndexSuggestions = ({
     dispatch({
       type: ActionTypes.SuggestedIndexesRequested,
     });
-    const namespace = `${dbName}.${collectionName}`;
 
+    const namespace = getState().namespace;
     // Get sample documents from state if it's already there, otherwise fetch it
     let sampleDocuments: Array<Document> | null =
       getState().createIndex.sampleDocs || null;
-
     // If it's null, that means it has not been fetched before
     if (sampleDocuments === null) {
       try {
@@ -462,8 +475,9 @@ export const fetchIndexSuggestions = ({
 
     // Analyze namespace and fetch suggestions
     try {
+      const { database, collection } = toNS(getState().namespace);
       const analyzedNamespace = mql.analyzeNamespace(
-        { database: dbName, collection: collectionName },
+        { database, collection },
         sampleDocuments
       );