fixed up typing more

Author: rubydong

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

@@ -21,6 +21,7 @@ import { usePreference } from 'compass-preferences-model/provider';
 import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
 import toNS from 'mongodb-ns';
+import type { Document as BsonDocument } from 'bson';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -49,7 +50,7 @@ export type CreateIndexFormProps = {
   onRemoveFieldClick: (idx: number) => void; // Minus icon.
   onTabClick: (tab: Tab) => void;
   showIndexesGuidanceVariant?: boolean;
-  query: string | null;
+  query: BsonDocument | null;
 };
 
 function CreateIndexForm({

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

@@ -7,6 +7,7 @@ import {
   useFocusRing,
   ParagraphSkeleton,
 } from '@mongodb-js/compass-components';
+import type { Document as BsonDocument } from 'bson';
 import React, { useMemo, useCallback } from 'react';
 import { css, spacing } from '@mongodb-js/compass-components';
 import {
@@ -106,9 +107,11 @@ const QueryFlowSection = ({
   }: SuggestedIndexFetchedProps) => Promise<void>;
   indexSuggestions: Record<string, number> | null;
   fetchingSuggestionsState: IndexSuggestionState;
-  initialQuery: string | null;
+  initialQuery: BsonDocument | null;
 }) => {
-  const [inputQuery, setInputQuery] = React.useState(initialQuery || '');
+  const [inputQuery, setInputQuery] = React.useState(
+    JSON.stringify(initialQuery ?? '', null, 2)
+  );
   const [hasNewChanges, setHasNewChanges] = React.useState(
     initialQuery !== null
   );

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

@@ -29,13 +29,14 @@ 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 as BsonDocument } from 'bson';
 
 type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
   isVisible: boolean;
   namespace: string;
   error: string | null;
   currentTab: Tab;
-  query: string | null;
+  query: BsonDocument | null;
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;

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

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