fix more typing and clear error when there's new changes

Author: rubydong

packages/compass-crud/src/stores/crud-store.ts

@@ -1834,7 +1834,7 @@ class CrudStoreImpl
 
   openCreateIndexModal() {
     this.localAppRegistry.emit('open-create-index-modal', {
-      query: EJSON.serialize(this.queryBar.getLastAppliedQuery('crud').filter),
+      query: EJSON.serialize(this.queryBar.getLastAppliedQuery('crud')?.filter),
     });
   }
 

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

@@ -13,7 +13,11 @@ import {
   Tooltip,
 } from '@mongodb-js/compass-components';
 import React, { useState, useCallback, useEffect } from 'react';
-import { errorEncountered, type Field } from '../../modules/create-index';
+import {
+  errorCleared,
+  errorEncountered,
+  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';
@@ -82,6 +86,7 @@ export type IndexFlowSectionProps = {
   dbName: string;
   collectionName: string;
   onErrorEncountered: (error: string) => void;
+  onErrorCleared: () => void;
 };
 
 const generateCoveredQueries = (
@@ -163,6 +168,7 @@ const IndexFlowSection = ({
   dbName,
   collectionName,
   onErrorEncountered,
+  onErrorCleared,
 }: IndexFlowSectionProps) => {
   const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
     useState(false);
@@ -218,7 +224,8 @@ const IndexFlowSection = ({
 
   useEffect(() => {
     setHasFieldChanges(true);
-  }, [fields]);
+    onErrorCleared();
+  }, [fields, onErrorCleared]);
 
   const { coveredQueries, optimalQueries, showCoveredQueries } =
     coveredQueriesObj;
@@ -346,6 +353,7 @@ const mapState = () => {
 
 const mapDispatch = {
   onErrorEncountered: errorEncountered,
+  onErrorCleared: errorCleared,
 };
 
 export default connect(mapState, mapDispatch)(IndexFlowSection);

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

@@ -77,7 +77,7 @@ type ErrorClearedAction = {
 
 export type CreateIndexOpenedAction = {
   type: ActionTypes.CreateIndexOpened;
-  query?: BsonDocument;
+  query?: string;
 };
 
 type CreateIndexClosedAction = {
@@ -314,7 +314,7 @@ export type State = {
   sampleDocs: Array<Document> | null;
 
   // base query to be used for query flow index creation
-  query: BsonDocument | null;
+  query: string | null;
 };
 
 export const INITIAL_STATE: State = {