Added localization for the Self Serve Model (#406)

* added localization for selfserve model

* added comment

* addressed PR comments

* fixed format errors

* Addressed PR comments

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -8,10 +8,10 @@ describe("SmartUiComponent", () => {
     root: {
       id: "root",
       info: {
-        message: "Start at $24/mo per database",
+        messageTKey: "Start at $24/mo per database",
         link: {
           href: "https://aka.ms/azure-cosmos-db-pricing",
-          text: "More Details",
+          textTKey: "More Details",
         },
       },
       children: [
@@ -21,10 +21,10 @@ describe("SmartUiComponent", () => {
             dataFieldName: "description",
             type: "string",
             description: {
-              text: "this is an example description text.",
+              textTKey: "this is an example description text.",
               link: {
                 href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-                text: "Click here for more information.",
+                textTKey: "Click here for more information.",
               },
             },
           },
@@ -32,7 +32,7 @@ describe("SmartUiComponent", () => {
         {
           id: "throughput",
           input: {
-            label: "Throughput (input)",
+            labelTKey: "Throughput (input)",
             dataFieldName: "throughput",
             type: "number",
             min: 400,
@@ -45,7 +45,7 @@ describe("SmartUiComponent", () => {
         {
           id: "throughput2",
           input: {
-            label: "Throughput (Slider)",
+            labelTKey: "Throughput (Slider)",
             dataFieldName: "throughput2",
             type: "number",
             min: 400,
@@ -58,7 +58,7 @@ describe("SmartUiComponent", () => {
         {
           id: "throughput3",
           input: {
-            label: "Throughput (invalid)",
+            labelTKey: "Throughput (invalid)",
             dataFieldName: "throughput3",
             type: "boolean",
             min: 400,
@@ -72,7 +72,7 @@ describe("SmartUiComponent", () => {
         {
           id: "containerId",
           input: {
-            label: "Container id",
+            labelTKey: "Container id",
             dataFieldName: "containerId",
             type: "string",
           },
@@ -80,9 +80,9 @@ describe("SmartUiComponent", () => {
         {
           id: "analyticalStore",
           input: {
-            label: "Analytical Store",
-            trueLabel: "Enabled",
-            falseLabel: "Disabled",
+            labelTKey: "Analytical Store",
+            trueLabelTKey: "Enabled",
+            falseLabelTKey: "Disabled",
             defaultValue: true,
             dataFieldName: "analyticalStore",
             type: "boolean",
@@ -91,7 +91,7 @@ describe("SmartUiComponent", () => {
         {
           id: "database",
           input: {
-            label: "Database",
+            labelTKey: "Database",
             dataFieldName: "database",
             type: "object",
             choices: [
@@ -117,6 +117,9 @@ describe("SmartUiComponent", () => {
         onError={() => {
           return;
         }}
+        getTranslation={(key: string) => {
+          return key;
+        }}
       />
     );
     await new Promise((resolve) => setTimeout(resolve, 0));
@@ -145,6 +148,9 @@ describe("SmartUiComponent", () => {
         onError={() => {
           return;
         }}
+        getTranslation={(key: string) => {
+          return key;
+        }}
       />
     );
     await new Promise((resolve) => setTimeout(resolve, 0));

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -18,6 +18,7 @@ import {
   NumberUiType,
   SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
+import { TFunction } from "i18next";
 
 /**
  * Generic UX renderer
@@ -34,8 +35,8 @@ interface BaseDisplay {
 }
 
 interface BaseInput extends BaseDisplay {
-  label: string;
-  placeholder?: string;
+  labelTKey: string;
+  placeholderTKey?: string;
   errorMessage?: string;
 }
 
@@ -51,8 +52,8 @@ interface NumberInput extends BaseInput {
 }
 
 interface BooleanInput extends BaseInput {
-  trueLabel: string;
-  falseLabel: string;
+  trueLabelTKey: string;
+  falseLabelTKey: string;
   defaultValue?: boolean;
 }
 
@@ -89,6 +90,7 @@ export interface SmartUiComponentProps {
   onInputChange: (input: AnyDisplay, newValue: InputType) => void;
   onError: (hasError: boolean) => void;
   disabled: boolean;
+  getTranslation: TFunction;
 }
 
 interface SmartUiComponentState {
@@ -122,10 +124,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   private renderInfo(info: Info): JSX.Element {
     return (
       <MessageBar styles={{ root: { width: 400 } }}>
-        {info.message}
+        {this.props.getTranslation(info.messageTKey)}
         {info.link && (
           <Link href={info.link.href} target="_blank">
-            {info.link.text}
+            {this.props.getTranslation(info.link.textTKey)}
           </Link>
         )}
       </MessageBar>
@@ -139,10 +141,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       <div className="stringInputContainer">
         <TextField
           id={`${input.dataFieldName}-textField-input`}
-          label={input.label}
+          label={this.props.getTranslation(input.labelTKey)}
           type="text"
           value={value || ""}
-          placeholder={input.placeholder}
+          placeholder={this.props.getTranslation(input.placeholderTKey)}
           disabled={disabled}
           onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
           styles={{
@@ -165,10 +167,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     const description = input.description;
     return (
       <Text id={`${input.dataFieldName}-text-display`}>
-        {input.description.text}{" "}
+        {this.props.getTranslation(input.description.textTKey)}{" "}
         {description.link && (
           <Link target="_blank" href={input.description.link.href}>
-            {input.description.link.text}
+            {this.props.getTranslation(input.description.link.textTKey)}
           </Link>
         )}
       </Text>
@@ -219,12 +221,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   };
 
   private renderNumberInput(input: NumberInput): JSX.Element {
-    const { label, min, max, dataFieldName, step } = input;
+    const { labelTKey, min, max, dataFieldName, step } = input;
     const props = {
-      label: label,
+      label: this.props.getTranslation(labelTKey),
       min: min,
       max: max,
-      ariaLabel: label,
+      ariaLabel: labelTKey,
       step: step,
     };
 
@@ -284,10 +286,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return (
       <Toggle
         id={`${input.dataFieldName}-toggle-input`}
-        label={input.label}
+        label={this.props.getTranslation(input.labelTKey)}
         checked={value || false}
-        onText={input.trueLabel}
-        offText={input.falseLabel}
+        onText={this.props.getTranslation(input.trueLabelTKey)}
+        offText={this.props.getTranslation(input.falseLabelTKey)}
         disabled={disabled}
         onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
         styles={{ root: { width: 400 } }}
@@ -296,7 +298,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   }
 
   private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
+    const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
     const value = this.props.currentValues.get(dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     let selectedKey = value ? value : defaultKey;
@@ -306,14 +308,14 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return (
       <Dropdown
         id={`${input.dataFieldName}-dropdown-input`}
-        label={label}
+        label={this.props.getTranslation(labelTKey)}
         selectedKey={selectedKey}
         onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
-        placeholder={placeholder}
+        placeholder={this.props.getTranslation(placeholderTKey)}
         disabled={disabled}
         options={choices.map((c) => ({
           key: c.key,
-          text: c.label,
+          text: this.props.getTranslation(c.label),
         }))}
         styles={{
           root: { width: 400 },