Vector Embedding and Full Text Search (#2009)

* Replaced monaco editor on Container Vector Policy tab with controls same as on create container ux * Adds vector embedding policy to container management. Adds FullTextSearch to both add container and container management. * Fixing unit tests and formatting issues * More fixes * Updating full text controls based on feedback * Minor updates * Editing test to fix compile issue * Minor fix * Adding paths for jest to ignore transform due to recent changes in upstream dependencies * Adding mock to temporarily get unit tests to pass * Hiding FTS feature behind the new EnableNoSQLFullTextSearch capability
2025-12-19 17:01:13 +00:00 · 2024-11-18 12:49:27 -08:00
parent 070b7a4ca7
commit 80b926214b
28 changed files with 1257 additions and 427 deletions
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,4 +1,4 @@
-import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
+import { DirectionalHint, Icon, IconButton, Label, Stack, TooltipHost } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -9,6 +9,9 @@ export interface CollapsibleSectionProps {
  onExpand?: () => void;
  children: JSX.Element;
  tooltipContent?: string | JSX.Element | JSX.Element[];
+  showDelete?: boolean;
+  onDelete?: () => void;
+  disabled?: boolean;
 }

 export interface CollapsibleSectionState {
@@ -69,6 +72,20 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
              <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
            </TooltipHost>
          )}
+          {this.props.showDelete && (
+            <Stack.Item style={{ marginLeft: "auto" }}>
+              <IconButton
+                disabled={this.props.disabled}
+                id={`delete-${this.props.title.split(" ").join("-")}`}
+                iconProps={{ iconName: "Delete" }}
+                style={{ height: 27, marginRight: "20px" }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  this.props.onDelete();
+                }}
+              />
+            </Stack.Item>
+          )}
        </Stack>
        {this.state.isExpanded && this.props.children}
      </>
--- a/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.test.tsx
+++ b/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.test.tsx
@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+
+describe("AddFullTextPolicyForm", () => {
+  //CTODO: add tests
+  it.skip("should render correctly", () => {});
+});
--- a/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
+++ b/src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
@@ -0,0 +1,239 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { FullTextIndex, FullTextPath, FullTextPolicy } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import * as React from "react";
+
+export interface FullTextPoliciesComponentProps {
+  fullTextPolicy: FullTextPolicy;
+  onFullTextPathChange: (
+    fullTextPolicy: FullTextPolicy,
+    fullTextIndexes: FullTextIndex[],
+    validationPassed: boolean,
+  ) => void;
+  discardChanges?: boolean;
+  onChangesDiscarded?: () => void;
+}
+
+export interface FullTextPolicyData {
+  path: string;
+  language: string;
+  pathError: string;
+}
+
+const labelStyles = {
+  root: {
+    fontSize: 12,
+  },
+};
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPoliciesComponentProps> = ({
+  fullTextPolicy,
+  onFullTextPathChange,
+  discardChanges,
+  onChangesDiscarded,
+}): JSX.Element => {
+  const getFullTextPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Full text path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      fullTextPathData?.find(
+        (fullTextPath: FullTextPolicyData, dataIndex: number) => dataIndex !== index && fullTextPath.path === path,
+      )
+    ) {
+      error = "Full text path is already defined";
+    }
+    return error;
+  };
+
+  const initializeData = (fullTextPolicy: FullTextPolicy): FullTextPolicyData[] => {
+    if (!fullTextPolicy) {
+      fullTextPolicy = { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] };
+    }
+    return fullTextPolicy.fullTextPaths.map((fullTextPath: FullTextPath) => ({
+      ...fullTextPath,
+      pathError: getFullTextPathError(fullTextPath.path),
+    }));
+  };
+
+  const [fullTextPathData, setFullTextPathData] = React.useState<FullTextPolicyData[]>(initializeData(fullTextPolicy));
+  const [defaultLanguage, setDefaultLanguage] = React.useState<string>(
+    fullTextPolicy ? fullTextPolicy.defaultLanguage : (getFullTextLanguageOptions()[0].key as never),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [fullTextPathData, defaultLanguage]);
+
+  React.useEffect(() => {
+    if (discardChanges) {
+      setFullTextPathData(initializeData(fullTextPolicy));
+      setDefaultLanguage(fullTextPolicy.defaultLanguage);
+      onChangesDiscarded();
+    }
+  }, [discardChanges]);
+
+  const propagateData = () => {
+    const newFullTextPolicy: FullTextPolicy = {
+      defaultLanguage: defaultLanguage,
+      fullTextPaths: fullTextPathData.map((policy: FullTextPolicyData) => ({
+        path: policy.path,
+        language: policy.language,
+      })),
+    };
+    const fullTextIndexes: FullTextIndex[] = fullTextPathData.map((policy) => ({
+      path: policy.path,
+    }));
+    const validationPassed = fullTextPathData.every((policy: FullTextPolicyData) => policy.pathError === "");
+    onFullTextPathChange(newFullTextPolicy, fullTextIndexes, validationPassed);
+  };
+
+  const onFullTextPathValueChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const fullTextPaths = [...fullTextPathData];
+    if (!fullTextPaths[index]?.path && !value.startsWith("/")) {
+      fullTextPaths[index].path = "/" + value;
+    } else {
+      fullTextPaths[index].path = value;
+    }
+    fullTextPaths[index].pathError = getFullTextPathError(value, index);
+    setFullTextPathData(fullTextPaths);
+  };
+
+  const onFullTextPathPolicyChange = (index: number, option: IDropdownOption): void => {
+    const policies = [...fullTextPathData];
+    policies[index].language = option.key as never;
+    setFullTextPathData(policies);
+  };
+
+  const onAdd = () => {
+    setFullTextPathData([
+      ...fullTextPathData,
+      {
+        path: "",
+        language: defaultLanguage,
+        pathError: getFullTextPathError(""),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const policies = fullTextPathData.filter((_uniqueKey, j) => index !== j);
+    setFullTextPathData(policies);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      <Stack style={{ marginBottom: 10 }}>
+        <Label styles={labelStyles}>Default language</Label>
+        <Dropdown
+          required={true}
+          styles={dropdownStyles}
+          options={getFullTextLanguageOptions()}
+          selectedKey={defaultLanguage}
+          onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+            setDefaultLanguage(option.key as never)
+          }
+        ></Dropdown>
+      </Stack>
+      {fullTextPathData &&
+        fullTextPathData.length > 0 &&
+        fullTextPathData.map((fullTextPolicy: FullTextPolicyData, index: number) => (
+          <CollapsibleSectionComponent
+            key={index}
+            isExpandedByDefault={true}
+            title={`Full text path ${index + 1}`}
+            showDelete={true}
+            onDelete={() => onDelete(index)}
+          >
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label styles={labelStyles}>Path</Label>
+                  <TextField
+                    id={`full-text-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/fullTextPath1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onFullTextPathValueChange(index, event)}
+                    value={fullTextPolicy.path || ""}
+                    errorMessage={fullTextPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={labelStyles}>Language</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getFullTextLanguageOptions()}
+                    selectedKey={fullTextPolicy.language}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onFullTextPathPolicyChange(index, option)
+                    }
+                  ></Dropdown>
+                </Stack>
+              </Stack>
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+        Add full text path
+      </DefaultButton>
+    </Stack>
+  );
+};
+
+export const getFullTextLanguageOptions = (): IDropdownOption[] => {
+  return [
+    {
+      key: "en-US",
+      text: "English (US)",
+    },
+  ];
+};
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -4,11 +4,11 @@ import {
  ComputedPropertiesComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
 import {
-  ContainerVectorPolicyComponent,
-  ContainerVectorPolicyComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
+  ContainerPolicyComponent,
+  ContainerPolicyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent";
 import { useDatabases } from "Explorer/useDatabases";
-import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -105,6 +105,13 @@ export interface SettingsComponentState {
  isSubSettingsSaveable: boolean;
  isSubSettingsDiscardable: boolean;

+  vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
+  vectorEmbeddingPolicyBaseline: DataModels.VectorEmbeddingPolicy;
+  fullTextPolicy: DataModels.FullTextPolicy;
+  fullTextPolicyBaseline: DataModels.FullTextPolicy;
+  shouldDiscardContainerPolicies: boolean;
+  isContainerPolicyDirty: boolean;
+
  indexingPolicyContent: DataModels.IndexingPolicy;
  indexingPolicyContentBaseline: DataModels.IndexingPolicy;
  shouldDiscardIndexingPolicy: boolean;
@@ -149,6 +156,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  private shouldShowIndexingPolicyEditor: boolean;
  private shouldShowPartitionKeyEditor: boolean;
  private isVectorSearchEnabled: boolean;
+  private isFullTextSearchEnabled: boolean;
  private totalThroughputUsed: number;
  public mongoDBCollectionResource: MongoDBCollectionResource;

@@ -164,6 +172,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
      this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
      this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
+      this.isFullTextSearchEnabled = isFullTextSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);

      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;

@@ -203,6 +212,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      isSubSettingsSaveable: false,
      isSubSettingsDiscardable: false,

+      vectorEmbeddingPolicy: undefined,
+      vectorEmbeddingPolicyBaseline: undefined,
+      fullTextPolicy: undefined,
+      fullTextPolicyBaseline: undefined,
+      shouldDiscardContainerPolicies: false,
+      isContainerPolicyDirty: false,
+
      indexingPolicyContent: undefined,
      indexingPolicyContentBaseline: undefined,
      shouldDiscardIndexingPolicy: false,
@@ -307,6 +323,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    return (
      this.state.isScaleSaveable ||
      this.state.isSubSettingsSaveable ||
+      this.state.isContainerPolicyDirty ||
      this.state.isIndexingPolicyDirty ||
      this.state.isConflictResolutionDirty ||
      this.state.isComputedPropertiesDirty ||
@@ -318,6 +335,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    return (
      this.state.isScaleDiscardable ||
      this.state.isSubSettingsDiscardable ||
+      this.state.isContainerPolicyDirty ||
      this.state.isIndexingPolicyDirty ||
      this.state.isConflictResolutionDirty ||
      this.state.isComputedPropertiesDirty ||
@@ -405,6 +423,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
      displayedTtlSeconds: this.state.displayedTtlSecondsBaseline,
      geospatialConfigType: this.state.geospatialConfigTypeBaseline,
+      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicyBaseline,
+      fullTextPolicy: this.state.fullTextPolicyBaseline,
      indexingPolicyContent: this.state.indexingPolicyContentBaseline,
      indexesToAdd: [],
      indexesToDrop: [],
@@ -416,11 +436,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      changeFeedPolicy: this.state.changeFeedPolicyBaseline,
      autoPilotThroughput: this.state.autoPilotThroughputBaseline,
      isAutoPilotSelected: this.state.wasAutopilotOriginallySet,
+      shouldDiscardContainerPolicies: true,
      shouldDiscardIndexingPolicy: true,
      isScaleSaveable: false,
      isScaleDiscardable: false,
      isSubSettingsSaveable: false,
      isSubSettingsDiscardable: false,
+      isContainerPolicyDirty: false,
      isIndexingPolicyDirty: false,
      isMongoIndexingPolicySaveable: false,
      isMongoIndexingPolicyDiscardable: false,
@@ -448,9 +470,17 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  private onScaleDiscardableChange = (isScaleDiscardable: boolean): void =>
    this.setState({ isScaleDiscardable: isScaleDiscardable });

+  private onVectorEmbeddingPolicyChange = (newVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy): void =>
+    this.setState({ vectorEmbeddingPolicy: newVectorEmbeddingPolicy });
+
+  private onFullTextPolicyChange = (newFullTextPolicy: DataModels.FullTextPolicy): void =>
+    this.setState({ fullTextPolicy: newFullTextPolicy });
+
  private onIndexingPolicyContentChange = (newIndexingPolicy: DataModels.IndexingPolicy): void =>
    this.setState({ indexingPolicyContent: newIndexingPolicy });

+  private resetShouldDiscardContainerPolicies = (): void => this.setState({ shouldDiscardContainerPolicies: false });
+
  private resetShouldDiscardIndexingPolicy = (): void => this.setState({ shouldDiscardIndexingPolicy: false });

  private logIndexingPolicySuccessMessage = (): void => {
@@ -538,6 +568,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  private onSubSettingsDiscardableChange = (isSubSettingsDiscardable: boolean): void =>
    this.setState({ isSubSettingsDiscardable: isSubSettingsDiscardable });

+  private onVectorEmbeddingPolicyDirtyChange = (isVectorEmbeddingPolicyDirty: boolean): void =>
+    this.setState({ isContainerPolicyDirty: isVectorEmbeddingPolicyDirty });
+
+  private onFullTextPolicyDirtyChange = (isFullTextPolicyDirty: boolean): void =>
+    this.setState({ isContainerPolicyDirty: isFullTextPolicyDirty });
+
  private onIndexingPolicyDirtyChange = (isIndexingPolicyDirty: boolean): void =>
    this.setState({ isIndexingPolicyDirty: isIndexingPolicyDirty });

@@ -691,6 +727,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
      ? ChangeFeedPolicyState.On
      : ChangeFeedPolicyState.Off;
+    const vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy =
+      this.collection.vectorEmbeddingPolicy && this.collection.vectorEmbeddingPolicy();
+    const fullTextPolicy: DataModels.FullTextPolicy =
+      this.collection.fullTextPolicy && this.collection.fullTextPolicy();
    const indexingPolicyContent = this.collection.indexingPolicy();
    const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
      this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
@@ -724,6 +764,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
      analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
      analyticalStorageTtlSecondsBaseline: analyticalStorageTtlSeconds,
+      vectorEmbeddingPolicy: vectorEmbeddingPolicy,
+      vectorEmbeddingPolicyBaseline: vectorEmbeddingPolicy,
+      fullTextPolicy: fullTextPolicy,
+      fullTextPolicyBaseline: fullTextPolicy,
      indexingPolicyContent: indexingPolicyContent,
      indexingPolicyContentBaseline: indexingPolicyContent,
      conflictResolutionPolicyMode: conflictResolutionPolicyMode,
@@ -854,6 +898,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S

    if (
      this.state.isSubSettingsSaveable ||
+      this.state.isContainerPolicyDirty ||
      this.state.isIndexingPolicyDirty ||
      this.state.isConflictResolutionDirty ||
      this.state.isComputedPropertiesDirty
@@ -875,6 +920,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
      newCollection.defaultTtl = defaultTtl;

+      newCollection.vectorEmbeddingPolicy = this.state.vectorEmbeddingPolicy;
+
+      newCollection.fullTextPolicy = this.state.fullTextPolicy;
+
      newCollection.indexingPolicy = this.state.indexingPolicyContent;

      newCollection.changeFeedPolicy =
@@ -913,6 +962,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
      this.collection.geospatialConfig(updatedCollection.geospatialConfig);
      this.collection.computedProperties(updatedCollection.computedProperties);
+      this.collection.vectorEmbeddingPolicy(updatedCollection.vectorEmbeddingPolicy);
+      this.collection.fullTextPolicy(updatedCollection.fullTextPolicy);

      if (wasIndexingPolicyModified) {
        await this.refreshIndexTransformationProgress();
@@ -921,6 +972,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.setState({
        isSubSettingsSaveable: false,
        isSubSettingsDiscardable: false,
+        isContainerPolicyDirty: false,
        isIndexingPolicyDirty: false,
        isConflictResolutionDirty: false,
        isComputedPropertiesDirty: false,
@@ -1091,6 +1143,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      onSubSettingsDiscardableChange: this.onSubSettingsDiscardableChange,
    };

+    const containerPolicyComponentProps: ContainerPolicyComponentProps = {
+      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicy,
+      vectorEmbeddingPolicyBaseline: this.state.vectorEmbeddingPolicyBaseline,
+      onVectorEmbeddingPolicyChange: this.onVectorEmbeddingPolicyChange,
+      onVectorEmbeddingPolicyDirtyChange: this.onVectorEmbeddingPolicyDirtyChange,
+      isVectorSearchEnabled: this.isVectorSearchEnabled,
+      fullTextPolicy: this.state.fullTextPolicy,
+      fullTextPolicyBaseline: this.state.fullTextPolicyBaseline,
+      onFullTextPolicyChange: this.onFullTextPolicyChange,
+      onFullTextPolicyDirtyChange: this.onFullTextPolicyDirtyChange,
+      isFullTextSearchEnabled: this.isFullTextSearchEnabled,
+      shouldDiscardContainerPolicies: this.state.shouldDiscardContainerPolicies,
+      resetShouldDiscardContainerPolicyChange: this.resetShouldDiscardContainerPolicies,
+    };
+
    const indexingPolicyComponentProps: IndexingPolicyComponentProps = {
      shouldDiscardIndexingPolicy: this.state.shouldDiscardIndexingPolicy,
      resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
@@ -1148,10 +1215,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      explorer: this.props.settingsTab.getContainer(),
    };

-    const containerVectorPolicyProps: ContainerVectorPolicyComponentProps = {
-      vectorEmbeddingPolicy: this.collection.rawDataModel?.vectorEmbeddingPolicy,
-    };
-
    const tabs: SettingsV2TabInfo[] = [];
    if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
      tabs.push({
@@ -1165,10 +1228,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      content: <SubSettingsComponent {...subSettingsComponentProps} />,
    });

-    if (this.isVectorSearchEnabled) {
+    if (this.isVectorSearchEnabled || this.isFullTextSearchEnabled) {
      tabs.push({
        tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
-        content: <ContainerVectorPolicyComponent {...containerVectorPolicyProps} />,
+        content: <ContainerPolicyComponent {...containerPolicyComponentProps} />,
      });
    }

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.text.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.text.tsx
@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+
+describe("ContainerPolicyComponent", () => {
+  //CTODO: add tests
+  it.skip("should render correctly", () => {});
+});
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
@@ -0,0 +1,163 @@
+import { DefaultButton, Pivot, PivotItem, Stack } from "@fluentui/react";
+import { FullTextPolicy, VectorEmbedding, VectorEmbeddingPolicy } from "Contracts/DataModels";
+import {
+  FullTextPoliciesComponent,
+  getFullTextLanguageOptions,
+} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
+import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
+import { ContainerPolicyTabTypes, isDirty } from "Explorer/Controls/Settings/SettingsUtils";
+import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
+import React from "react";
+
+export interface ContainerPolicyComponentProps {
+  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
+  vectorEmbeddingPolicyBaseline: VectorEmbeddingPolicy;
+  onVectorEmbeddingPolicyChange: (newVectorEmbeddingPolicy: VectorEmbeddingPolicy) => void;
+  onVectorEmbeddingPolicyDirtyChange: (isVectorEmbeddingPolicyDirty: boolean) => void;
+  isVectorSearchEnabled: boolean;
+  fullTextPolicy: FullTextPolicy;
+  fullTextPolicyBaseline: FullTextPolicy;
+  onFullTextPolicyChange: (newFullTextPolicy: FullTextPolicy) => void;
+  onFullTextPolicyDirtyChange: (isFullTextPolicyDirty: boolean) => void;
+  isFullTextSearchEnabled: boolean;
+  shouldDiscardContainerPolicies: boolean;
+  resetShouldDiscardContainerPolicyChange: () => void;
+}
+
+export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> = ({
+  vectorEmbeddingPolicy,
+  vectorEmbeddingPolicyBaseline,
+  onVectorEmbeddingPolicyChange,
+  onVectorEmbeddingPolicyDirtyChange,
+  isVectorSearchEnabled,
+  fullTextPolicy,
+  fullTextPolicyBaseline,
+  onFullTextPolicyChange,
+  onFullTextPolicyDirtyChange,
+  isFullTextSearchEnabled,
+  shouldDiscardContainerPolicies,
+  resetShouldDiscardContainerPolicyChange,
+}) => {
+  const [selectedTab, setSelectedTab] = React.useState<ContainerPolicyTabTypes>(
+    ContainerPolicyTabTypes.VectorPolicyTab,
+  );
+  const [vectorEmbeddings, setVectorEmbeddings] = React.useState<VectorEmbedding[]>();
+  const [vectorEmbeddingsBaseline, setVectorEmbeddingsBaseline] = React.useState<VectorEmbedding[]>();
+  const [discardVectorChanges, setDiscardVectorChanges] = React.useState<boolean>(false);
+  const [fullTextSearchPolicy, setFullTextSearchPolicy] = React.useState<FullTextPolicy>();
+  const [fullTextSearchPolicyBaseline, setFullTextSearchPolicyBaseline] = React.useState<FullTextPolicy>();
+  const [discardFullTextChanges, setDiscardFullTextChanges] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setVectorEmbeddings(vectorEmbeddingPolicy?.vectorEmbeddings);
+    setVectorEmbeddingsBaseline(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
+  }, [vectorEmbeddingPolicy]);
+
+  React.useEffect(() => {
+    setFullTextSearchPolicy(fullTextPolicy);
+    setFullTextSearchPolicyBaseline(fullTextPolicyBaseline);
+  }, [fullTextPolicy, fullTextPolicyBaseline]);
+
+  React.useEffect(() => {
+    if (shouldDiscardContainerPolicies) {
+      setVectorEmbeddings(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
+      setDiscardVectorChanges(true);
+      setFullTextSearchPolicy(fullTextPolicyBaseline);
+      setDiscardFullTextChanges(true);
+      resetShouldDiscardContainerPolicyChange();
+    }
+  });
+
+  const checkAndSendVectorEmbeddingPoliciesToSettings = (newVectorEmbeddings: VectorEmbedding[]): void => {
+    if (isDirty(newVectorEmbeddings, vectorEmbeddingsBaseline)) {
+      onVectorEmbeddingPolicyDirtyChange(true);
+      onVectorEmbeddingPolicyChange({ vectorEmbeddings: newVectorEmbeddings });
+    } else {
+      resetShouldDiscardContainerPolicyChange();
+    }
+  };
+
+  const checkAndSendFullTextPolicyToSettings = (newFullTextPolicy: FullTextPolicy): void => {
+    if (isDirty(newFullTextPolicy, fullTextSearchPolicyBaseline)) {
+      onFullTextPolicyDirtyChange(true);
+      onFullTextPolicyChange(newFullTextPolicy);
+    } else {
+      resetShouldDiscardContainerPolicyChange();
+    }
+  };
+
+  const onVectorChangesDiscarded = (): void => {
+    setDiscardVectorChanges(false);
+  };
+
+  const onFullTextChangesDiscarded = (): void => {
+    setDiscardFullTextChanges(false);
+  };
+
+  const onPivotChange = (item: PivotItem): void => {
+    const selectedTab = ContainerPolicyTabTypes[item.props.itemKey as keyof typeof ContainerPolicyTabTypes];
+    setSelectedTab(selectedTab);
+  };
+
+  return (
+    <div>
+      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
+        {isVectorSearchEnabled && (
+          <PivotItem
+            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
+            style={{ marginTop: 20 }}
+            headerText="Vector Policy"
+          >
+            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
+              {vectorEmbeddings && (
+                <VectorEmbeddingPoliciesComponent
+                  disabled={true}
+                  vectorEmbeddings={vectorEmbeddings}
+                  vectorIndexes={undefined}
+                  onVectorEmbeddingChange={(vectorEmbeddings: VectorEmbedding[]) =>
+                    checkAndSendVectorEmbeddingPoliciesToSettings(vectorEmbeddings)
+                  }
+                  discardChanges={discardVectorChanges}
+                  onChangesDiscarded={onVectorChangesDiscarded}
+                />
+              )}
+            </Stack>
+          </PivotItem>
+        )}
+        {isFullTextSearchEnabled && (
+          <PivotItem
+            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
+            style={{ marginTop: 20 }}
+            headerText="Full Text Policy"
+          >
+            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
+              {fullTextSearchPolicy ? (
+                <FullTextPoliciesComponent
+                  fullTextPolicy={fullTextSearchPolicy}
+                  onFullTextPathChange={(newFullTextPolicy: FullTextPolicy) =>
+                    checkAndSendFullTextPolicyToSettings(newFullTextPolicy)
+                  }
+                  discardChanges={discardFullTextChanges}
+                  onChangesDiscarded={onFullTextChangesDiscarded}
+                />
+              ) : (
+                <DefaultButton
+                  id={"create-full-text-policy"}
+                  styles={{ root: { fontSize: 12 } }}
+                  onClick={() => {
+                    checkAndSendFullTextPolicyToSettings({
+                      defaultLanguage: getFullTextLanguageOptions()[0].key as never,
+                      fullTextPaths: [],
+                    });
+                  }}
+                >
+                  Create new full text search policy
+                </DefaultButton>
+              )}
+            </Stack>
+          </PivotItem>
+        )}
+      </Pivot>
+    </div>
+  );
+};
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
@@ -1,30 +0,0 @@
-import { Stack } from "@fluentui/react";
-import { VectorEmbeddingPolicy } from "Contracts/DataModels";
-import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
-import React from "react";
-
-export interface ContainerVectorPolicyComponentProps {
-  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
-}
-
-export const ContainerVectorPolicyComponent: React.FC<ContainerVectorPolicyComponentProps> = ({
-  vectorEmbeddingPolicy,
-}) => {
-  return (
-    <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative" } }}>
-      <EditorReact
-        language={"json"}
-        content={JSON.stringify(vectorEmbeddingPolicy || {}, null, 4)}
-        isReadOnly={true}
-        wordWrap={"on"}
-        ariaLabel={"Container vector policy"}
-        lineNumbers={"on"}
-        scrollBeyondLastLine={false}
-        className={"settingsV2Editor"}
-        spinnerClassName={"settingsV2EditorSpinner"}
-        fontSize={14}
-      />
-    </Stack>
-  );
-};
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -120,11 +120,6 @@ export class IndexingPolicyComponent extends React.Component<
          indexTransformationProgress={this.props.indexTransformationProgress}
          refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
        />
-        {this.props.isVectorSearchEnabled && (
-          <MessageBar messageBarType={MessageBarType.severeWarning}>
-            Container vector policies and vector indexes are not modifiable after container creation
-          </MessageBar>
-        )}
        {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
          <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
        )}
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -4,7 +4,14 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";

 const zeroValue = 0;
-export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy | DataModels.ComputedProperties;
+export type isDirtyTypes =
+  | boolean
+  | string
+  | number
+  | DataModels.IndexingPolicy
+  | DataModels.ComputedProperties
+  | DataModels.VectorEmbedding[]
+  | DataModels.FullTextPolicy;
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -50,6 +57,11 @@ export enum SettingsV2TabTypes {
  ContainerVectorPolicyTab,
 }

+export enum ContainerPolicyTabTypes {
+  VectorPolicyTab,
+  FullTextPolicyTab,
+}
+
 export interface IsComponentDirtyResult {
  isSaveable: boolean;
  isDiscardable: boolean;
@@ -154,7 +166,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
    case SettingsV2TabTypes.ComputedPropertiesTab:
      return "Computed Properties";
    case SettingsV2TabTypes.ContainerVectorPolicyTab:
-      return "Container Vector Policy (preview)";
+      return "Container Policies";
    default:
      throw new Error(`Unknown tab ${tab}`);
  }
--- a/src/Explorer/Controls/Settings/TestUtils.tsx
+++ b/src/Explorer/Controls/Settings/TestUtils.tsx
@@ -46,6 +46,8 @@ export const collection = {
      query: "query",
    },
  ]),
+  vectorEmbeddingPolicy: ko.observable<DataModels.VectorEmbeddingPolicy>({} as DataModels.VectorEmbeddingPolicy),
+  fullTextPolicy: ko.observable<DataModels.FullTextPolicy>({} as DataModels.FullTextPolicy),
  readSettings: () => {
    return;
  },
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -55,6 +55,7 @@ exports[`SettingsComponent renders 1`] = `
              },
              "databaseId": "test",
              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
              "geospatialConfig": [Function],
              "getDatabase": [Function],
              "id": [Function],
@@ -71,6 +72,7 @@ exports[`SettingsComponent renders 1`] = `
              "readSettings": [Function],
              "uniqueKeyPolicy": {},
              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
            }
          }
          isAutoPilotSelected={false}
@@ -132,6 +134,7 @@ exports[`SettingsComponent renders 1`] = `
              },
              "databaseId": "test",
              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
              "geospatialConfig": [Function],
              "getDatabase": [Function],
              "id": [Function],
@@ -148,6 +151,7 @@ exports[`SettingsComponent renders 1`] = `
              "readSettings": [Function],
              "uniqueKeyPolicy": {},
              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
            }
          }
          displayedTtlSeconds="5"
@@ -249,6 +253,7 @@ exports[`SettingsComponent renders 1`] = `
              },
              "databaseId": "test",
              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
              "geospatialConfig": [Function],
              "getDatabase": [Function],
              "id": [Function],
@@ -265,6 +270,7 @@ exports[`SettingsComponent renders 1`] = `
              "readSettings": [Function],
              "uniqueKeyPolicy": {},
              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
            }
          }
          explorer={
--- a/src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.test.tsx
+++ b/src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.test.tsx
@@ -0,0 +1,82 @@
+import "@testing-library/jest-dom";
+import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import React from "react";
+import { VectorEmbeddingPoliciesComponent } from "./VectorEmbeddingPoliciesComponent";
+
+const mockVectorEmbedding: VectorEmbedding[] = [
+  { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
+];
+
+const mockVectorIndex: VectorIndex[] = [{ path: "/vector1", type: "flat" }];
+
+const mockOnVectorEmbeddingChange = jest.fn();
+
+describe("AddVectorEmbeddingPolicyForm", () => {
+  let component: RenderResult;
+
+  beforeEach(() => {
+    component = render(
+      <VectorEmbeddingPoliciesComponent
+        vectorEmbeddings={mockVectorEmbedding}
+        vectorIndexes={mockVectorIndex}
+        onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
+      />,
+    );
+  });
+
+  test("renders correctly", () => {
+    expect(screen.getByText("Vector embedding 1")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("/vector1")).toBeInTheDocument();
+  });
+
+  test("calls onVectorEmbeddingChange on adding a new vector embedding", () => {
+    fireEvent.click(screen.getByText("Add vector embedding"));
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+  });
+
+  test("calls onDelete when delete button is clicked", async () => {
+    const deleteButton = component.container.querySelector("#delete-Vector-embedding-1");
+    fireEvent.click(deleteButton);
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+    expect(screen.queryByText("Vector embedding 1")).toBeNull();
+  });
+
+  test("calls onVectorEmbeddingPathChange on input change", () => {
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/newPath" } });
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+  });
+
+  test("validates input correctly", async () => {
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
+    await waitFor(() => expect(screen.getByText("Path should not be empty")).toBeInTheDocument(), {
+      timeout: 1500,
+    });
+    await waitFor(
+      () =>
+        expect(screen.getByText("Dimension must be greater than 0 and less than or equal 4096")).toBeInTheDocument(),
+      {
+        timeout: 1500,
+      },
+    );
+    fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
+    await waitFor(() => expect(screen.queryByText("Path should not be empty")).toBeNull(), {
+      timeout: 1500,
+    });
+    await waitFor(
+      () => expect(screen.queryByText("Maximum allowed dimension for flat index is 505")).toBeInTheDocument(),
+      {
+        timeout: 1500,
+      },
+    );
+  });
+
+  test("duplicate vector path is not allowed", async () => {
+    fireEvent.click(screen.getByText("Add vector embedding"));
+    fireEvent.change(component.container.querySelector("#vector-policy-path-2"), { target: { value: "/vector1" } });
+    await waitFor(() => expect(screen.queryByText("Vector embedding path is already defined")).toBeNull(), {
+      timeout: 1500,
+    });
+  });
+});
--- a/src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx
+++ b/src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx
@@ -0,0 +1,470 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import {
+  getDataTypeOptions,
+  getDistanceFunctionOptions,
+  getIndexTypeOptions,
+} from "Explorer/Controls/VectorSearch/VectorSearchUtils";
+import React, { FunctionComponent, useState } from "react";
+
+export interface IVectorEmbeddingPoliciesComponentProps {
+  vectorEmbeddings: VectorEmbedding[];
+  onVectorEmbeddingChange: (
+    vectorEmbeddings: VectorEmbedding[],
+    vectorIndexingPolicies: VectorIndex[],
+    validationPassed: boolean,
+  ) => void;
+  vectorIndexes?: VectorIndex[];
+  discardChanges?: boolean;
+  onChangesDiscarded?: () => void;
+  disabled?: boolean;
+}
+
+export interface VectorEmbeddingPolicyData {
+  path: string;
+  dataType: VectorEmbedding["dataType"];
+  distanceFunction: VectorEmbedding["distanceFunction"];
+  dimensions: number;
+  indexType: VectorIndex["type"] | "none";
+  pathError: string;
+  dimensionsError: string;
+  diskANNShardKey?: string;
+  diskANNShardKeyError?: string;
+  indexingSearchListSize?: number;
+  indexingSearchListSizeError?: string;
+  quantizationByteSize?: number;
+  quantizationByteSizeError?: string;
+}
+
+type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
+
+const labelStyles = {
+  root: {
+    fontSize: 12,
+  },
+};
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddingPoliciesComponentProps> = ({
+  vectorEmbeddings,
+  vectorIndexes,
+  onVectorEmbeddingChange,
+  discardChanges,
+  onChangesDiscarded,
+  disabled,
+}): JSX.Element => {
+  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      vectorEmbeddingPolicyData?.find(
+        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+          dataIndex !== index && vectorEmbedding.path === path,
+      )
+    ) {
+      error = "Path is already defined";
+    }
+    return error;
+  };
+
+  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+    let error = "";
+    if (dimension <= 0 || dimension > 4096) {
+      error = "Dimension must be greater than 0 and less than or equal 4096";
+    }
+    if (indexType === "flat" && dimension > 505) {
+      error = "Maximum allowed dimension for flat index is 505";
+    }
+    return error;
+  };
+
+  const onQuantizationByteSizeError = (size: number): string => {
+    let error = "";
+    if (size < 1 || size > 512) {
+      error = "Quantization byte size must be greater than 0 and less than or equal to 512";
+    }
+    return error;
+  };
+
+  const onIndexingSearchListSizeError = (size: number): string => {
+    let error = "";
+    if (size < 25 || size > 500) {
+      error = "Indexing search list size must be greater than or equal to 25 and less than or equal to 500";
+    }
+    return error;
+  };
+
+  //TODO: no restrictions yet due to this field being removed for now.
+  // Uncomment and replace with validation code when field is reinstated
+  // const onDiskANNShardKeyError = (shardKey: string): string => {
+  //   return "";
+  // };
+
+  const initializeData = (vectorEmbeddings: VectorEmbedding[], vectorIndexes: VectorIndex[]) => {
+    const mergedData: VectorEmbeddingPolicyData[] = [];
+    vectorEmbeddings.forEach((embedding) => {
+      const matchingIndex = displayIndexes ? vectorIndexes.find((index) => index.path === embedding.path) : undefined;
+      mergedData.push({
+        ...embedding,
+        indexType: matchingIndex?.type || "none",
+        indexingSearchListSize: matchingIndex?.indexingSearchListSize || undefined,
+        quantizationByteSize: matchingIndex?.quantizationByteSize || undefined,
+        pathError: onVectorEmbeddingPathError(embedding.path),
+        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+      });
+    });
+    return mergedData;
+  };
+
+  const [displayIndexes] = useState<boolean>(!!vectorIndexes);
+  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
+    initializeData(vectorEmbeddings, vectorIndexes),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [vectorEmbeddingPolicyData]);
+
+  React.useEffect(() => {
+    if (discardChanges) {
+      setVectorEmbeddingPolicyData(initializeData(vectorEmbeddings, vectorIndexes));
+      onChangesDiscarded();
+    }
+  }, [discardChanges]);
+
+  const propagateData = () => {
+    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+      path: policy.path,
+      dataType: policy.dataType,
+      dimensions: policy.dimensions,
+      distanceFunction: policy.distanceFunction,
+    }));
+    const vectorIndexes: VectorIndex[] = vectorEmbeddingPolicyData
+      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+      .map(
+        (policy) =>
+          ({
+            path: policy.path,
+            type: policy.indexType,
+            indexingSearchListSize: policy.indexingSearchListSize,
+            quantizationByteSize: policy.quantizationByteSize,
+          }) as VectorIndex,
+      );
+    const validationPassed = vectorEmbeddingPolicyData.every(
+      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+    );
+    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexes, validationPassed);
+  };
+
+  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
+      vectorEmbeddings[index].path = "/" + value;
+    } else {
+      vectorEmbeddings[index].path = value;
+    }
+    const error = onVectorEmbeddingPathError(value, index);
+    vectorEmbeddings[index].pathError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].dimensions = value;
+    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].indexType = option.key as never;
+    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    if (vectorEmbedding.indexType === "diskANN") {
+      vectorEmbedding.indexingSearchListSize = 100;
+    } else {
+      vectorEmbedding.indexingSearchListSize = undefined;
+    }
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onQuantizationByteSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index].quantizationByteSize = value;
+    vectorEmbeddings[index].quantizationByteSizeError = onQuantizationByteSizeError(value);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onIndexingSearchListSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index].indexingSearchListSize = value;
+    vectorEmbeddings[index].indexingSearchListSizeError = onIndexingSearchListSizeError(value);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  // TODO: uncomment after Ignite
+  // DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
+  // const onDiskANNShardKeyChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+  //   const value = event.target.value.trim();
+  //   const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+  //   if (!vectorEmbeddings[index]?.diskANNShardKey && !value.startsWith("/")) {
+  //     vectorEmbeddings[index].diskANNShardKey = "/" + value;
+  //   } else {
+  //     vectorEmbeddings[index].diskANNShardKey = value;
+  //   }
+  //   const error = onDiskANNShardKeyError(value);
+  //   vectorEmbeddings[index].diskANNShardKeyError = error;
+  //   setVectorEmbeddingPolicyData(vectorEmbeddings);
+  // }
+
+  const onVectorEmbeddingPolicyChange = (
+    index: number,
+    option: IDropdownOption,
+    property: VectorEmbeddingPolicyProperty,
+  ): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index][property] = option.key as never;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onAdd = () => {
+    setVectorEmbeddingPolicyData([
+      ...vectorEmbeddingPolicyData,
+      {
+        path: "",
+        dataType: "float32",
+        distanceFunction: "euclidean",
+        dimensions: 0,
+        indexType: "none",
+        pathError: onVectorEmbeddingPathError(""),
+        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      {vectorEmbeddingPolicyData &&
+        vectorEmbeddingPolicyData.length > 0 &&
+        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+          <CollapsibleSectionComponent
+            disabled={disabled}
+            key={index}
+            isExpandedByDefault={true}
+            title={`Vector embedding ${index + 1}`}
+            showDelete={true}
+            onDelete={() => onDelete(index)}
+          >
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Path
+                  </Label>
+                  <TextField
+                    disabled={disabled}
+                    id={`vector-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/vector1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
+                    value={vectorEmbeddingPolicy.path || ""}
+                    errorMessage={vectorEmbeddingPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Data type
+                  </Label>
+                  <Dropdown
+                    disabled={disabled}
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDataTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.dataType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "dataType")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Distance function
+                  </Label>
+                  <Dropdown
+                    disabled={disabled}
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDistanceFunctionOptions()}
+                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label disabled={disabled} styles={labelStyles}>
+                    Dimensions
+                  </Label>
+                  <TextField
+                    disabled={disabled}
+                    id={`vector-policy-dimension-${index + 1}`}
+                    required={true}
+                    styles={textFieldStyles}
+                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      onVectorEmbeddingDimensionsChange(index, event)
+                    }
+                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
+                  />
+                </Stack>
+                {displayIndexes && (
+                  <Stack>
+                    <Label disabled={disabled} styles={labelStyles}>
+                      Index type
+                    </Label>
+                    <Dropdown
+                      disabled={disabled}
+                      required={true}
+                      styles={dropdownStyles}
+                      options={getIndexTypeOptions()}
+                      selectedKey={vectorEmbeddingPolicy.indexType}
+                      onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                        onVectorEmbeddingIndexTypeChange(index, option)
+                      }
+                    ></Dropdown>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label
+                        disabled={
+                          disabled ||
+                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
+                            vectorEmbeddingPolicy.indexType !== "diskANN")
+                        }
+                        styles={labelStyles}
+                      >
+                        Quantization byte size
+                      </Label>
+                      <TextField
+                        disabled={
+                          disabled ||
+                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
+                            vectorEmbeddingPolicy.indexType !== "diskANN")
+                        }
+                        id={`vector-policy-quantizationByteSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.quantizationByteSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onQuantizationByteSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    <Stack style={{ marginLeft: "10px" }}>
+                      <Label disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"} styles={labelStyles}>
+                        Indexing search list size
+                      </Label>
+                      <TextField
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        id={`vector-policy-indexingSearchListSize-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.indexingSearchListSize || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onIndexingSearchListSizeChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    {/*TODO: uncomment after Ignite */}
+                    {/* DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
+                    <Stack
+                      style={{ marginLeft: "10px" }}
+                    >
+                      <Label
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        styles={labelStyles}
+                      >DiskANN shard key</Label>
+                      <TextField
+                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
+                        id={`vector-policy-diskANNShardKey-${index + 1}`}
+                        styles={textFieldStyles}
+                        value={String(vectorEmbeddingPolicy.diskANNShardKey || "")}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          onDiskANNShardKeyChange(index, event)
+                        }
+                      />
+                    </Stack>
+                    */}
+                  </Stack>
+                )}
+              </Stack>
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton
+        disabled={disabled}
+        id={`add-vector-policy`}
+        styles={{ root: { maxWidth: 170, fontSize: 12 } }}
+        onClick={onAdd}
+      >
+        Add vector embedding
+      </DefaultButton>
+    </Stack>
+  );
+};
--- a/src/Explorer/Controls/VectorSearch/VectorSearchUtils.ts
+++ b/src/Explorer/Controls/VectorSearch/VectorSearchUtils.ts
@@ -0,0 +1,16 @@
+import { IDropdownOption } from "@fluentui/react";
+
+const dataTypes = ["float32", "uint8", "int8"];
+const distanceFunctions = ["euclidean", "cosine", "dotproduct"];
+const indexTypes = ["none", "flat", "diskANN", "quantizedFlat"];
+
+export const getDataTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(dataTypes);
+export const getDistanceFunctionOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(distanceFunctions);
+export const getIndexTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(indexTypes);
+
+function createDropdownOptionsFromLiterals<T extends string>(literals: T[]): IDropdownOption[] {
+  return literals.map((value) => ({
+    key: value,
+    text: value,
+  }));
+}