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 fbe8f45a32c..bdc9d8541e9 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 @@ -65,7 +65,6 @@ function CreateIndexForm({ onRemoveFieldClick, onTabClick, showIndexesGuidanceVariant, - query, }: CreateIndexFormProps) { const { id: connectionId } = useConnectionInfo(); const rollingIndexesFeatureEnabled = !!usePreference('enableRollingIndexes'); @@ -93,9 +92,6 @@ 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); @@ -180,9 +176,6 @@ function CreateIndexForm({ serverVersion={serverVersion} dbName={dbName} collectionName={collectionName} - initialQuery={query} - inputQuery={inputQuery} - setInputQuery={setInputQuery} /> )} diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx index 8e4c9f15e22..283d10d49be 100644 --- a/packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx +++ b/packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen } from '@mongodb-js/testing-library-compass'; import IndexFlowSection from './index-flow-section'; import { expect } from 'chai'; -import type { Field } from '../../modules/create-index'; +import { ActionTypes, type Field } from '../../modules/create-index'; import { Provider } from 'react-redux'; import { setupStore } from '../../../test/setup-store'; @@ -85,7 +85,15 @@ describe('IndexFlowSection', () => { beforeEach(() => { renderComponent({ fields }); + screen.getByTestId('index-flow-section-covered-queries-button').click(); + store.dispatch({ + type: ActionTypes.FieldsChanged, + fields, + }); + store.dispatch({ + type: ActionTypes.CoveredQueriesFetched, + }); }); it('renders the covered queries examples', () => { @@ -133,7 +141,16 @@ describe('IndexFlowSection', () => { beforeEach(() => { renderComponent({ fields }); + screen.getByTestId('index-flow-section-covered-queries-button').click(); + + store.dispatch({ + type: ActionTypes.FieldsChanged, + fields, + }); + store.dispatch({ + type: ActionTypes.CoveredQueriesFetched, + }); }); it('renders the covered queries examples', () => { @@ -179,7 +196,15 @@ describe('IndexFlowSection', () => { beforeEach(() => { renderComponent({ fields }); + screen.getByTestId('index-flow-section-covered-queries-button').click(); + store.dispatch({ + type: ActionTypes.FieldsChanged, + fields, + }); + store.dispatch({ + type: ActionTypes.CoveredQueriesFetched, + }); }); it('renders the covered queries examples', () => { @@ -208,7 +233,15 @@ describe('IndexFlowSection', () => { beforeEach(() => { renderComponent({ fields }); + screen.getByTestId('index-flow-section-covered-queries-button').click(); + store.dispatch({ + type: ActionTypes.FieldsChanged, + fields, + }); + store.dispatch({ + type: ActionTypes.CoveredQueriesFetched, + }); }); it('renders the covered queries examples', () => { diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx index 94e04337a16..1391fc01dbe 100644 --- a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx +++ b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx @@ -13,10 +13,10 @@ import { Tooltip, useDarkMode, } from '@mongodb-js/compass-components'; -import React, { useState, useCallback, useEffect } from 'react'; +import React, { useState, useCallback } from 'react'; import { - errorCleared, errorEncountered, + fetchCoveredQueries, type Field, } from '../../modules/create-index'; import MDBCodeViewer from './mdb-code-viewer'; @@ -24,6 +24,7 @@ import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation' import { connect } from 'react-redux'; import type { TrackFunction } from '@mongodb-js/compass-telemetry/provider'; import { useTelemetry } from '@mongodb-js/compass-telemetry/provider'; +import type { RootState } from '../../modules'; const flexContainerStyles = css({ display: 'flex', @@ -106,13 +107,18 @@ export type IndexFlowSectionProps = { dbName: string; collectionName: string; onErrorEncountered: (error: string) => void; - onErrorCleared: () => void; + onCoveredQueriesFetched: () => void; + coveredQueriesArr: Array> | null; + hasIndexFieldChanges: boolean; }; -const generateCoveredQueries = ( - coveredQueriesArr: Array>, +export const generateCoveredQueries = ( + coveredQueriesArr: Array> | 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)); @@ -135,9 +141,12 @@ const generateCoveredQueries = ( return <>{rows}; }; -const generateOptimalQueries = ( - coveredQueriesArr: Array> +export const generateOptimalQueries = ( + coveredQueriesArr: Array> | null ) => { + if (!coveredQueriesArr) { + return; + } const numOfFields = coveredQueriesArr.length; // Do not show for 1 field or less @@ -187,18 +196,25 @@ const generateOptimalQueries = ( ); }; +export const generateCoveredQueriesArr = (fields: Field[]) => { + return fields.map((field, index) => { + return { [field.name]: index + 1 }; + }); +}; + const IndexFlowSection = ({ createIndexFieldsComponent, fields, dbName, collectionName, onErrorEncountered, - onErrorCleared, + onCoveredQueriesFetched, + coveredQueriesArr, + hasIndexFieldChanges, }: IndexFlowSectionProps) => { const darkMode = useDarkMode(); const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] = useState(false); - const [hasFieldChanges, setHasFieldChanges] = useState(false); const hasUnsupportedQueryTypes = fields.some((field) => { return field.type === '2dsphere' || field.type === 'text'; @@ -208,7 +224,7 @@ const IndexFlowSection = ({ const isCoveredQueriesButtonDisabled = !areAllFieldsFilledIn(fields) || hasUnsupportedQueryTypes || - !hasFieldChanges; + !hasIndexFieldChanges; const indexNameTypeMap = fields.reduce>( (accumulator, currentValue) => { @@ -220,45 +236,21 @@ const IndexFlowSection = ({ {} ); - const [coveredQueriesObj, setCoveredQueriesObj] = useState<{ - coveredQueries: JSX.Element; - optimalQueries: string | JSX.Element; - showCoveredQueries: boolean; - }>({ - coveredQueries: <>, - optimalQueries: '', - showCoveredQueries: false, - }); - const onCoveredQueriesButtonClick = useCallback(() => { - const coveredQueriesArr = fields.map((field, index) => { - return { [field.name]: index + 1 }; - }); - track('Covered Queries Button Clicked', { context: 'Create Index Modal', }); try { - setCoveredQueriesObj({ - coveredQueries: generateCoveredQueries(coveredQueriesArr, track), - optimalQueries: generateOptimalQueries(coveredQueriesArr), - showCoveredQueries: true, - }); + onCoveredQueriesFetched(); } catch (e) { onErrorEncountered(e instanceof Error ? e.message : String(e)); } + }, [onCoveredQueriesFetched, onErrorEncountered, track]); - setHasFieldChanges(false); - }, [fields, onErrorEncountered, track]); - - useEffect(() => { - setHasFieldChanges(true); - onErrorCleared(); - }, [fields, onErrorCleared]); - - const { coveredQueries, optimalQueries, showCoveredQueries } = - coveredQueriesObj; + const coveredQueries = generateCoveredQueries(coveredQueriesArr, track); + const optimalQueries = generateOptimalQueries(coveredQueriesArr); + const showCoveredQueries = coveredQueriesArr !== null; return (
@@ -422,13 +414,17 @@ const IndexFlowSection = ({ ); }; -const mapState = () => { - return {}; +const mapState = ({ createIndex }: RootState) => { + const { coveredQueriesArr, hasIndexFieldChanges } = createIndex; + return { + coveredQueriesArr, + hasIndexFieldChanges, + }; }; const mapDispatch = { onErrorEncountered: errorEncountered, - onErrorCleared: errorCleared, + onCoveredQueriesFetched: fetchCoveredQueries, }; export default connect(mapState, mapDispatch)(IndexFlowSection); 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 8957cc87b63..d151f7b0520 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 @@ -18,9 +18,6 @@ describe('QueryFlowSection', () => { serverVersion="5.0.0" 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 0d5dfd4d7d1..f07081d3d77 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 @@ -8,8 +8,7 @@ import { ParagraphSkeleton, useDarkMode, } from '@mongodb-js/compass-components'; -import type { Document } from 'mongodb'; -import React, { useMemo, useCallback, useEffect } from 'react'; +import React, { useMemo, useCallback } from 'react'; import { css, spacing } from '@mongodb-js/compass-components'; import { CodemirrorMultilineEditor, @@ -20,8 +19,10 @@ import type { RootState } from '../../modules'; import { fetchIndexSuggestions } from '../../modules/create-index'; import type { IndexSuggestionState, + QueryUpdatedProps, SuggestedIndexFetchedProps, } from '../../modules/create-index'; +import { queryUpdated } from '../../modules/create-index'; import { connect } from 'react-redux'; import { parseFilter } from 'mongodb-query-parser'; import { useTelemetry } from '@mongodb-js/compass-telemetry/provider'; @@ -105,30 +106,27 @@ const QueryFlowSection = ({ indexSuggestions, fetchingSuggestionsState, initialQuery, - inputQuery, - setInputQuery, + query, + hasQueryChanges, + onQueryUpdated, }: { schemaFields: { name: string; description?: string }[]; serverVersion: string; dbName: string; collectionName: string; onSuggestedIndexButtonClick: ({ - dbName, - collectionName, - inputQuery, + query, }: SuggestedIndexFetchedProps) => Promise; indexSuggestions: Record | null; fetchingSuggestionsState: IndexSuggestionState; - initialQuery: Document | null; - inputQuery: string; - setInputQuery: (query: string) => void; + initialQuery: string | null; + query: string; + hasQueryChanges: boolean; + onQueryUpdated: ({ query }: QueryUpdatedProps) => void; }) => { const track = useTelemetry(); const darkMode = useDarkMode(); - const [hasNewChanges, setHasNewChanges] = React.useState( - initialQuery !== null - ); const [isShowSuggestionsButtonDisabled, setIsShowSuggestionsButtonDisabled] = React.useState(true); @@ -149,15 +147,12 @@ const QueryFlowSection = ({ }); const generateSuggestedIndexes = useCallback(() => { - const sanitizedInputQuery = inputQuery.trim(); + const sanitizedInputQuery = query.trim(); void onSuggestedIndexButtonClick({ - dbName, - collectionName, - inputQuery: sanitizedInputQuery, + query: sanitizedInputQuery, }); - setHasNewChanges(false); - }, [inputQuery, dbName, collectionName, onSuggestedIndexButtonClick]); + }, [query, onSuggestedIndexButtonClick]); const handleSuggestedIndexButtonClick = () => { generateSuggestedIndexes(); @@ -166,20 +161,21 @@ const QueryFlowSection = ({ }); }; - const handleQueryInputChange = useCallback((text: string) => { - setInputQuery(text); - setHasNewChanges(true); - }, []); + const handleQueryInputChange = useCallback( + (text: string) => { + onQueryUpdated({ query: text }); + }, + [onQueryUpdated] + ); const isFetchingIndexSuggestions = fetchingSuggestionsState === 'fetching'; - // Validate query upon typing useMemo(() => { - let _isShowSuggestionsButtonDisabled = !hasNewChanges; + let _isShowSuggestionsButtonDisabled = !hasQueryChanges; try { - parseFilter(inputQuery); + parseFilter(query); - if (!inputQuery.startsWith('{') || !inputQuery.endsWith('}')) { + if (!query.startsWith('{') || !query.endsWith('}')) { _isShowSuggestionsButtonDisabled = true; } } catch { @@ -187,13 +183,7 @@ const QueryFlowSection = ({ } finally { setIsShowSuggestionsButtonDisabled(_isShowSuggestionsButtonDisabled); } - }, [hasNewChanges, inputQuery]); - - useEffect(() => { - if (initialQuery !== null) { - generateSuggestedIndexes(); - } - }, [initialQuery]); + }, [hasQueryChanges, query]); return ( <> @@ -221,7 +211,7 @@ const QueryFlowSection = ({ showAnnotationsGutter={false} copyable={false} formattable={false} - text={inputQuery} + text={query} onChangeText={(text) => handleQueryInputChange(text)} placeholder="Type a query: { field: 'value' }" completer={completer} @@ -282,17 +272,27 @@ const QueryFlowSection = ({ }; const mapState = ({ createIndex }: RootState) => { - const { indexSuggestions, sampleDocs, fetchingSuggestionsState } = - createIndex; + const { + indexSuggestions, + sampleDocs, + fetchingSuggestionsState, + query, + initialQuery, + hasQueryChanges, + } = createIndex; return { indexSuggestions, sampleDocs, fetchingSuggestionsState, + query, + initialQuery, + hasQueryChanges, }; }; const mapDispatch = { onSuggestedIndexButtonClick: fetchIndexSuggestions, + onQueryUpdated: queryUpdated, }; export default connect(mapState, mapDispatch)(QueryFlowSection); diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx index fc9a8842cd5..b49fe7b8ae7 100644 --- a/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx +++ b/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 & { 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} /> @@ -134,7 +130,7 @@ function CreateIndexModal({ } const mapState = ({ namespace, serverVersion, createIndex }: RootState) => { - const { fields, error, isVisible, currentTab, query } = createIndex; + const { fields, error, isVisible, currentTab } = createIndex; return { fields, error, @@ -142,7 +138,6 @@ const mapState = ({ namespace, serverVersion, createIndex }: RootState) => { namespace, serverVersion, currentTab, - query, }; }; diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx index 285f90aa86d..0e512e13ce2 100644 --- a/packages/compass-indexes/src/components/indexes/indexes.tsx +++ b/packages/compass-indexes/src/components/indexes/indexes.tsx @@ -181,7 +181,7 @@ export function Indexes({ - +
); } diff --git a/packages/compass-indexes/src/modules/create-index.spec.ts b/packages/compass-indexes/src/modules/create-index.spec.ts index ce88ec3ec2c..b0cb75a9c27 100644 --- a/packages/compass-indexes/src/modules/create-index.spec.ts +++ b/packages/compass-indexes/src/modules/create-index.spec.ts @@ -209,25 +209,25 @@ describe('create-index module', function () { describe('createIndexOpened', function () { const query = EJSON.serialize({}); it('sets isVisible=true', function () { - store.dispatch(createIndexOpened()); + void store.dispatch(createIndexOpened()); expect(store.getState().createIndex.isVisible).to.equal(true); }); it('sets isVisible=true with a query', function () { - store.dispatch(createIndexOpened({ query })); + void store.dispatch(createIndexOpened({ query })); expect(store.getState().createIndex.isVisible).to.equal(true); }); it('sets currentTab=IndexFlow if no query is provided', function () { - store.dispatch(createIndexOpened()); + void store.dispatch(createIndexOpened()); expect(store.getState().createIndex.currentTab).to.equal('IndexFlow'); }); it('sets currentTab=QueryFlow if a query is provided', function () { - store.dispatch(createIndexOpened({ query })); + void store.dispatch(createIndexOpened({ query })); expect(store.getState().createIndex.currentTab).to.equal('QueryFlow'); }); diff --git a/packages/compass-indexes/src/modules/create-index.tsx b/packages/compass-indexes/src/modules/create-index.tsx index 4e239d7f8e0..061c567150e 100644 --- a/packages/compass-indexes/src/modules/create-index.tsx +++ b/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', @@ -30,8 +31,13 @@ export enum ActionTypes { TabUpdated = 'compass-indexes/create-index/tab-updated', + // Query Flow SuggestedIndexesRequested = 'compass-indexes/create-index/suggested-indexes-requested', SuggestedIndexesFetched = 'compass-indexes/create-index/suggested-indexes-fetched', + QueryUpdatedAction = 'compass-indexes/create-index/clear-has-query-changes', + + // Index Flow + CoveredQueriesFetched = 'compass-indexes/create-index/covered-queries-fetched', } // fields @@ -76,7 +82,7 @@ type ErrorClearedAction = { export type CreateIndexOpenedAction = { type: ActionTypes.CreateIndexOpened; - query?: Document; + initialQuery?: Document; }; type CreateIndexClosedAction = { @@ -313,7 +319,19 @@ export type State = { sampleDocs: Array | null; // base query to be used for query flow index creation - query: Document | null; + query: string; + + // the initial query that user had prefilled from the insights nudge in the documents tab + initialQuery: string; + + // to determine whether there has been new query changes since user last pressed the button + hasQueryChanges: 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> | null; + + // to determine whether there has been new index field changes since user last pressed the button + hasIndexFieldChanges: boolean; }; export const INITIAL_STATE: State = { @@ -323,10 +341,18 @@ export const INITIAL_STATE: State = { fields: INITIAL_FIELDS_STATE, options: INITIAL_OPTIONS_STATE, currentTab: 'IndexFlow', + + // Query flow fetchingSuggestionsState: 'initial', indexSuggestions: null, sampleDocs: null, - query: null, + query: '', + initialQuery: '', + hasQueryChanges: false, + + // Index flow + coveredQueriesArr: null, + hasIndexFieldChanges: false, }; function getInitialState(): State { @@ -338,10 +364,27 @@ function getInitialState(): State { //------- -export const createIndexOpened = (query?: Document) => ({ - type: ActionTypes.CreateIndexOpened, - query, -}); +export const createIndexOpened = ( + initialQuery?: Document +): IndexesThunkAction< + Promise, + 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, @@ -373,20 +416,25 @@ export type SuggestedIndexFetchedAction = { }; export type SuggestedIndexFetchedProps = { - dbName: string; - collectionName: string; - inputQuery: string; + query: string; +}; + +export type CoveredQueriesFetchedAction = { + type: ActionTypes.CoveredQueriesFetched; +}; + +export type QueryUpdatedProps = { + query: string; +}; + +export type QueryUpdatedAction = { + type: ActionTypes.QueryUpdatedAction; + query: string; }; export const fetchIndexSuggestions = ({ - dbName, - collectionName, - inputQuery, -}: { - dbName: string; - collectionName: string; - inputQuery: string; -}): IndexesThunkAction< + query, +}: SuggestedIndexFetchedProps): IndexesThunkAction< Promise, SuggestedIndexFetchedAction | SuggestedIndexesRequestedAction > => { @@ -394,12 +442,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 | null = getState().createIndex.sampleDocs || null; - // If it's null, that means it has not been fetched before if (sampleDocuments === null) { try { @@ -426,16 +473,17 @@ 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 ); - const query = mql.parseQuery( - _parseShellBSON(inputQuery, { mode: ParseMode.Loose }), + const parsedQuery = mql.parseQuery( + _parseShellBSON(query, { mode: ParseMode.Loose }), analyzedNamespace ); - const results = await mql.suggestIndex([query]); + const results = await mql.suggestIndex([parsedQuery]); const indexSuggestions = results?.index; if ( @@ -461,6 +509,17 @@ export const fetchIndexSuggestions = ({ }; }; +export const fetchCoveredQueries = (): CoveredQueriesFetchedAction => ({ + type: ActionTypes.CoveredQueriesFetched, +}); + +export const queryUpdated = ({ + query, +}: QueryUpdatedProps): QueryUpdatedAction => ({ + type: ActionTypes.QueryUpdatedAction, + query, +}); + function isEmptyValue(value: unknown) { if (value === '') { return true; @@ -639,6 +698,8 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { return { ...state, fields: [...state.fields, { name: '', type: '' }], + hasIndexFieldChanges: true, + error: null, }; } @@ -648,6 +709,8 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { return { ...state, fields, + hasIndexFieldChanges: true, + error: null, }; } @@ -661,6 +724,8 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { return { ...state, fields, + hasIndexFieldChanges: true, + error: null, }; } @@ -668,6 +733,8 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { return { ...state, fields: action.fields, + hasIndexFieldChanges: true, + error: null, }; } @@ -705,11 +772,17 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { if ( isAction(action, ActionTypes.CreateIndexOpened) ) { + const parsedInitialQuery = action.initialQuery + ? JSON.stringify(action.initialQuery, null, 2) + : ''; + return { ...getInitialState(), isVisible: true, - query: action.query ?? null, - currentTab: action.query ? 'QueryFlow' : 'IndexFlow', + // get it from the current query or initial query from insights nudge + query: state.query || parsedInitialQuery, + initialQuery: parsedInitialQuery, + currentTab: action.initialQuery ? 'QueryFlow' : 'IndexFlow', }; } @@ -733,6 +806,7 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { return { ...state, isVisible: false, + query: '', }; } @@ -781,6 +855,31 @@ const reducer: Reducer = (state = INITIAL_STATE, action) => { error: action.error, indexSuggestions: action.indexSuggestions, sampleDocs: action.sampleDocs, + hasQueryChanges: false, + }; + } + + if ( + isAction( + action, + ActionTypes.CoveredQueriesFetched + ) + ) { + return { + ...state, + coveredQueriesArr: state.fields.map((field, index) => { + return { [field.name]: index + 1 }; + }), + hasIndexFieldChanges: false, + }; + } + + if (isAction(action, ActionTypes.QueryUpdatedAction)) { + return { + ...state, + query: action.query, + hasQueryChanges: true, + error: null, }; } diff --git a/packages/compass-indexes/src/stores/store.ts b/packages/compass-indexes/src/stores/store.ts index ddfd17d042b..0a0a8ee0628 100644 --- a/packages/compass-indexes/src/stores/store.ts +++ b/packages/compass-indexes/src/stores/store.ts @@ -132,7 +132,7 @@ export function activateIndexesPlugin( localAppRegistry, 'open-create-index-modal', (openCreateModalRequest?: { query: Document }) => { - store.dispatch(createIndexOpened(openCreateModalRequest?.query)); + void store.dispatch(createIndexOpened(openCreateModalRequest?.query)); } );