Read query from redux and pass to components

Author: waltertan12

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 } from 'bson';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,
@@ -49,6 +50,7 @@ export type CreateIndexFormProps = {
   onRemoveFieldClick: (idx: number) => void; // Minus icon.
   onTabClick: (tab: Tab) => void;
   showIndexesGuidanceVariant?: boolean;
+  query?: Document;
 };
 
 function CreateIndexForm({
@@ -62,6 +64,7 @@ function CreateIndexForm({
   onRemoveFieldClick,
   onTabClick,
   showIndexesGuidanceVariant,
+  query,
 }: CreateIndexFormProps) {
   const { id: connectionId } = useConnectionInfo();
   const rollingIndexesFeatureEnabled = !!usePreference('enableRollingIndexes');
@@ -163,6 +166,7 @@ function CreateIndexForm({
           serverVersion={serverVersion}
           dbName={dbName}
           collectionName={collectionName}
+          initialQuery={query}
         />
       )}
 

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

@@ -20,6 +20,7 @@ import type {
   SuggestedIndexFetchedProps,
 } from '../../modules/create-index';
 import { connect } from 'react-redux';
+import type { Document } from 'bson';
 
 const inputQueryContainerStyles = css({
   display: 'flex',
@@ -83,6 +84,7 @@ const QueryFlowSection = ({
   onSuggestedIndexButtonClick,
   indexSuggestions,
   fetchingSuggestionsState,
+  initialQuery,
 }: {
   schemaFields: { name: string; description?: string }[];
   serverVersion: string;
@@ -95,8 +97,11 @@ const QueryFlowSection = ({
   }: SuggestedIndexFetchedProps) => Promise<void>;
   indexSuggestions: Record<string, number> | null;
   fetchingSuggestionsState: IndexSuggestionState;
+  initialQuery?: Document;
 }) => {
-  const [inputQuery, setInputQuery] = React.useState('');
+  const [inputQuery, setInputQuery] = React.useState(
+    JSON.stringify(initialQuery?.filter ?? {}, null, 2)
+  );
   const completer = useMemo(
     () =>
       createQueryAutocompleter({

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

@@ -29,12 +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 } from 'bson';
 
 type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
   isVisible: boolean;
   namespace: string;
   error: string | null;
   currentTab: Tab;
+  query?: Document;
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;
@@ -49,6 +51,7 @@ function CreateIndexModal({
   onErrorBannerCloseClick,
   onCreateIndexClick,
   onCancelCreateIndexClick,
+  query,
   ...props
 }: CreateIndexModalProps) {
   const connectionInfoRef = useConnectionInfoRef();
@@ -108,6 +111,7 @@ function CreateIndexModal({
           namespace={namespace}
           showIndexesGuidanceVariant={showIndexesGuidanceVariant}
           currentTab={currentTab}
+          query={query}
         />
       </ModalBody>
 
@@ -124,14 +128,15 @@ function CreateIndexModal({
 }
 
 const mapState = ({ namespace, serverVersion, createIndex }: RootState) => {
-  const { fields, error, isVisible, currentTab } = createIndex;
+  const { fields, error, isVisible, currentTab, query } = createIndex;
   return {
     fields,
     error,
     isVisible,
     namespace,
     serverVersion,
     currentTab,
+    query,
   };
 };
 

packages/compass-indexes/src/components/indexes-toolbar/indexes-toolbar.tsx

@@ -303,7 +303,7 @@ const mapState = ({
 });
 
 const mapDispatch = {
-  onCreateRegularIndexClick: createIndexOpened,
+  onCreateRegularIndexClick: () => createIndexOpened(),
   onCreateSearchIndexClick: createSearchIndexOpened,
   onIndexViewChanged: indexViewChanged,
 };