added query and index tabs

rubydong · rubydong · commit e61dc7268fda · 2025-04-18T12:33:07.000-04:00
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
@@ -1,6 +1,13 @@
 import React, { useMemo } from 'react';
-import { css, spacing, Accordion, Body } from '@mongodb-js/compass-components';
-import type { Field } from '../../modules/create-index';
+import {
+  css,
+  spacing,
+  Accordion,
+  Body,
+  RadioBoxGroup,
+  RadioBox,
+} from '@mongodb-js/compass-components';
+import type { Field, Tab } from '../../modules/create-index';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 import { CreateIndexFields } from '../create-index-fields';
 import { hasColumnstoreIndexesSupport } from '../../utils/columnstore-indexes';
@@ -24,24 +31,34 @@ const createIndexModalOptionStyles = css({
   paddingLeft: spacing[1] + 2,
 });
 
+const createIndexModalFlowsStyles = css({
+  marginBottom: spacing[600],
+});
+
 type CreateIndexFormProps = {
   namespace: string;
   fields: Field[];
   serverVersion: string;
+  currentTab: Tab;
   onSelectFieldNameClick: (idx: number, name: string) => void;
   onSelectFieldTypeClick: (idx: number, fType: string) => void;
   onAddFieldClick: () => void; // Plus icon.
   onRemoveFieldClick: (idx: number) => void; // Minus icon.
+  onTabClick: (tab: Tab) => void;
+  showIndexesGuidanceVariant: boolean;
 };
 
 function CreateIndexForm({
   namespace,
   fields,
   serverVersion,
+  currentTab,
   onSelectFieldNameClick,
   onSelectFieldTypeClick,
   onAddFieldClick,
   onRemoveFieldClick,
+  onTabClick,
+  showIndexesGuidanceVariant,
 }: CreateIndexFormProps) {
   const { id: connectionId } = useConnectionInfo();
   const rollingIndexesFeatureEnabled = !!usePreference('enableRollingIndexes');
@@ -68,6 +85,26 @@ function CreateIndexForm({
         className={createIndexModalFieldsStyles}
         data-testid="create-index-form"
       >
+        {showIndexesGuidanceVariant && (
+          <RadioBoxGroup
+            aria-labelledby="index-flows"
+            data-testid="create-index-form-flows"
+            id="create-index-form-flows"
+            onChange={(e) => {
+              onTabClick(e.target.value as Tab);
+            }}
+            value={currentTab}
+            className={createIndexModalFlowsStyles}
+          >
+            <RadioBox id="index-flow" value={'IndexFlow'}>
+              Start with an Index
+            </RadioBox>
+            <RadioBox id="query-flow" value={'QueryFlow'}>
+              Start with a Query
+            </RadioBox>
+          </RadioBoxGroup>
+        )}
+
         <Body weight="medium" className={indexFieldsHeaderStyles}>
           Index fields
         </Body>
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
@@ -6,6 +6,7 @@ import {
   ModalHeader,
   ModalBody,
 } from '@mongodb-js/compass-components';
+import type { Tab } from '../../modules/create-index';
 import {
   fieldAdded,
   fieldRemoved,
@@ -14,6 +15,7 @@ import {
   errorCleared,
   createIndexFormSubmitted,
   createIndexClosed,
+  tabUpdated,
 } from '../../modules/create-index';
 import { CreateIndexForm } from '../create-index-form/create-index-form';
 import CreateIndexActions from '../create-index-actions';
@@ -32,15 +34,18 @@ type CreateIndexModalProps = React.ComponentProps<typeof CreateIndexForm> & {
   isVisible: boolean;
   namespace: string;
   error: string | null;
+  currentTab: Tab;
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;
+  onTabClick: (tab: Tab) => void;
 };
 
 function CreateIndexModal({
   isVisible,
   namespace,
   error,
+  currentTab,
   onErrorBannerCloseClick,
   onCreateIndexClick,
   onCancelCreateIndexClick,
@@ -98,7 +103,12 @@ function CreateIndexModal({
       )}
 
       <ModalBody>
-        <CreateIndexForm namespace={namespace} {...props} />
+        <CreateIndexForm
+          {...props}
+          namespace={namespace}
+          showIndexesGuidanceVariant={showIndexesGuidanceVariant}
+          currentTab={currentTab}
+        />
       </ModalBody>
 
       <ModalFooter>
@@ -114,13 +124,14 @@ function CreateIndexModal({
 }
 
 const mapState = ({ namespace, serverVersion, createIndex }: RootState) => {
-  const { fields, error, isVisible } = createIndex;
+  const { fields, error, isVisible, currentTab } = createIndex;
   return {
     fields,
     error,
     isVisible,
     namespace,
     serverVersion,
+    currentTab,
   };
 };
 
@@ -132,6 +143,7 @@ const mapDispatch = {
   onRemoveFieldClick: fieldRemoved,
   onSelectFieldNameClick: updateFieldName,
   onSelectFieldTypeClick: fieldTypeUpdated,
+  onTabClick: tabUpdated,
 };
 
 export default connect(mapState, mapDispatch)(CreateIndexModal);
diff --git a/packages/compass-indexes/src/modules/create-index.tsx b/packages/compass-indexes/src/modules/create-index.tsx
@@ -25,11 +25,14 @@ export enum ActionTypes {
   CreateIndexClosed = 'compass-indexes/create-index/create-index-hidden',
 
   CreateIndexFormSubmitted = 'compass-indexes/create-index/create-index-form-submitted',
+
+  TabUpdated = 'compass-indexes/create-index/tab-updated',
 }
 
 // fields
 
 export type Field = { name: string; type: string };
+export type Tab = 'QueryFlow' | 'IndexFlow';
 
 const INITIAL_FIELDS_STATE = [{ name: '', type: '' }];
 
@@ -82,6 +85,11 @@ type CreateIndexFormSubmittedAction = {
   type: ActionTypes.CreateIndexFormSubmitted;
 };
 
+type TabUpdatedAction = {
+  type: ActionTypes.TabUpdated;
+  currentTab: Tab;
+};
+
 export const fieldAdded = () => ({
   type: ActionTypes.FieldAdded,
 });
@@ -97,6 +105,11 @@ export const fieldTypeUpdated = (idx: number, fType: string) => ({
   fType,
 });
 
+export const tabUpdated = (tab: Tab) => ({
+  type: ActionTypes.TabUpdated,
+  currentTab: tab,
+});
+
 const fieldsChanged = (fields: Field[]) => ({
   type: ActionTypes.FieldsChanged,
   fields: fields,
@@ -280,6 +293,9 @@ export type State = {
 
   // index options
   options: Options;
+
+  // current tab that user is on (Query Flow or Index Flow)
+  currentTab: Tab;
 };
 
 export const INITIAL_STATE: State = {
@@ -288,6 +304,7 @@ export const INITIAL_STATE: State = {
   error: null,
   fields: INITIAL_FIELDS_STATE,
   options: INITIAL_OPTIONS_STATE,
+  currentTab: 'IndexFlow',
 };
 
 function getInitialState(): State {
@@ -590,6 +607,13 @@ const reducer: Reducer<State, Action> = (state = INITIAL_STATE, action) => {
     };
   }
 
+  if (isAction<TabUpdatedAction>(action, ActionTypes.TabUpdated)) {
+    return {
+      ...state,
+      currentTab: action.currentTab,
+    };
+  }
+
   return state;
 };
 
