diff --git a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx index 55e42b7b674..fbe8f45a32c 100644 --- a/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx +++ b/packages/compass-indexes/src/components/create-index-form/create-index-form.tsx @@ -93,6 +93,9 @@ 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); @@ -178,6 +181,8 @@ function CreateIndexForm({ dbName={dbName} collectionName={collectionName} initialQuery={query} + inputQuery={inputQuery} + setInputQuery={setInputQuery} /> )} diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx index 658f08ddbd1..8957cc87b63 100644 --- a/packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx +++ b/packages/compass-indexes/src/components/create-index-form/query-flow-section.spec.tsx @@ -19,6 +19,8 @@ describe('QueryFlowSection', () => { dbName={dbName} collectionName={collectionName} initialQuery={null} + inputQuery={''} + setInputQuery={() => {}} /> ); diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx index 89c7ae3649c..a5a48b0c876 100644 --- a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx +++ b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx @@ -9,7 +9,7 @@ import { useDarkMode, } from '@mongodb-js/compass-components'; import type { Document } from 'mongodb'; -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, useEffect } from 'react'; import { css, spacing } from '@mongodb-js/compass-components'; import { CodemirrorMultilineEditor, @@ -105,6 +105,8 @@ const QueryFlowSection = ({ indexSuggestions, fetchingSuggestionsState, initialQuery, + inputQuery, + setInputQuery, }: { schemaFields: { name: string; description?: string }[]; serverVersion: string; @@ -118,12 +120,12 @@ const QueryFlowSection = ({ indexSuggestions: Record | null; fetchingSuggestionsState: IndexSuggestionState; initialQuery: Document | null; + inputQuery: string; + setInputQuery: (query: string) => void; }) => { const track = useTelemetry(); const darkMode = useDarkMode(); - const [inputQuery, setInputQuery] = React.useState( - initialQuery ? JSON.stringify(initialQuery, null, 2) : '' - ); + const [hasNewChanges, setHasNewChanges] = React.useState( initialQuery !== null ); @@ -146,7 +148,7 @@ const QueryFlowSection = ({ radius: editorContainerRadius, }); - const handleSuggestedIndexButtonClick = useCallback(() => { + const generateSuggestedIndexes = useCallback(() => { const sanitizedInputQuery = inputQuery.trim(); void onSuggestedIndexButtonClick({ @@ -154,13 +156,15 @@ const QueryFlowSection = ({ collectionName, inputQuery: sanitizedInputQuery, }); + setHasNewChanges(false); + }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick]); + const handleSuggestedIndexButtonClick = () => { + generateSuggestedIndexes(); track('Suggested Index Button Clicked', { context: 'Create Index Modal', }); - - setHasNewChanges(false); - }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick, track]); + }; const handleQueryInputChange = useCallback((text: string) => { setInputQuery(text); @@ -185,6 +189,12 @@ const QueryFlowSection = ({ } }, [hasNewChanges, inputQuery]); + useEffect(() => { + if (initialQuery !== null) { + generateSuggestedIndexes(); + } + }, [initialQuery]); + return ( <> {initialQuery && (