Add French, German, and Spanish to Full Text Search (Update container only) (#2228)

* Add multiple languages for Full Text Search Policy

* fix tests

* show multiple languages for multi language support enabled accounts

* addressed comments

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

src/Common/Constants.ts

@@ -89,7 +89,7 @@ export class CapabilityNames {
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
   public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
-  public static readonly EnableNoSQLFullTextSearch: string = "EnableNoSQLFullTextSearch";
+  public static readonly EnableNoSQLFullTextSearchPreviewFeatures: string = "EnableNoSQLFullTextSearchPreviewFeatures";
 }
 
 export enum CapacityMode {

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -12,6 +12,7 @@ import {
 import { FullTextIndex, FullTextPath, FullTextPolicy } from "Contracts/DataModels";
 import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import * as React from "react";
+import { isFullTextSearchPreviewFeaturesEnabled } from "Utils/CapabilityUtils";
 
 export interface FullTextPoliciesComponentProps {
   fullTextPolicy: FullTextPolicy;
@@ -22,6 +23,7 @@ export interface FullTextPoliciesComponentProps {
   ) => void;
   discardChanges?: boolean;
   onChangesDiscarded?: () => void;
+  englishOnly?: boolean;
 }
 
 export interface FullTextPolicyData {
@@ -66,6 +68,7 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
   onFullTextPathChange,
   discardChanges,
   onChangesDiscarded,
+  englishOnly,
 }): JSX.Element => {
   const getFullTextPathError = (path: string, index?: number): string => {
     let error = "";
@@ -87,6 +90,7 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
     if (!fullTextPolicy) {
       fullTextPolicy = { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] };
     }
+
     return fullTextPolicy.fullTextPaths.map((fullTextPath: FullTextPath) => ({
       ...fullTextPath,
       pathError: getFullTextPathError(fullTextPath.path),
@@ -166,7 +170,7 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
         <Dropdown
           required={true}
           styles={dropdownStyles}
-          options={getFullTextLanguageOptions()}
+          options={getFullTextLanguageOptions(englishOnly)}
           selectedKey={defaultLanguage}
           onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
             setDefaultLanguage(option.key as never)
@@ -211,7 +215,7 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
                   <Dropdown
                     required={true}
                     styles={dropdownStyles}
-                    options={getFullTextLanguageOptions()}
+                    options={getFullTextLanguageOptions(englishOnly)}
                     selectedKey={fullTextPolicy.language}
                     onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
                       onFullTextPathPolicyChange(index, option)
@@ -229,11 +233,30 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
   );
 };
 
-export const getFullTextLanguageOptions = (): IDropdownOption[] => {
-  return [
+export const getFullTextLanguageOptions = (englishOnly?: boolean): IDropdownOption[] => {
+  const multiLanguageSupportEnabled: boolean = isFullTextSearchPreviewFeaturesEnabled() && !englishOnly;
+  const fullTextLanguageOptions: IDropdownOption[] = [
     {
       key: "en-US",
       text: "English (US)",
     },
+    ...(multiLanguageSupportEnabled
+      ? [
+          {
+            key: "fr-FR",
+            text: "French",
+          },
+          {
+            key: "de-DE",
+            text: "German",
+          },
+          {
+            key: "es-ES",
+            text: "Spanish",
+          },
+        ]
+      : []),
   ];
+
+  return fullTextLanguageOptions;
 };

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -893,6 +893,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       ) => {
                         this.setState({ fullTextPolicy, fullTextIndexes, fullTextPolicyValidated });
                       }}
+                      // Remove when multi language support on container create issue is fixed
+                      englishOnly={true}
                     />
                   </Stack>
                 </Stack>

src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -516,6 +516,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             }
           >
             <FullTextPoliciesComponent
+              englishOnly={true}
               fullTextPolicy={
                 {
                   "defaultLanguage": "en-US",

src/Utils/CapabilityUtils.ts

@@ -24,3 +24,10 @@ export const isVectorSearchEnabled = (): boolean => {
     (isCapabilityEnabled(Constants.CapabilityNames.EnableNoSQLVectorSearch) || isFabricNative())
   );
 };
+
+export const isFullTextSearchPreviewFeaturesEnabled = (): boolean => {
+  return (
+    userContext.apiType === "SQL" &&
+    isCapabilityEnabled(Constants.CapabilityNames.EnableNoSQLFullTextSearchPreviewFeatures)
+  );
+};