Added localization build (#2380)

* Added localization build

* Commit types

* Added locProject.json

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2425084 (#2392)

* Fixed package.json

* Fix compilation error

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2431677 (#2396)

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2432830 (#2397)

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2431872

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2432783

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2432830

* Localized file check-in by OneLocBuild Task: Build definition ID 13114: Build ID 2434398 (#2400)

---------

Co-authored-by: olprod <olprod@microsoft.com>

src/@types/i18next.d.ts

@@ -0,0 +1,11 @@
+import "i18next";
+import Resources from "../Localization/en/Resources.json";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "Resources";
+    resources: {
+      Resources: typeof Resources;
+    };
+  }
+}

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -16,6 +16,8 @@ import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { TerminalKind } from "Contracts/ViewModels";
 import { SplashScreenButton } from "Explorer/SplashScreen/SplashScreenButton";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { useCarousel } from "hooks/useCarousel";
@@ -169,16 +171,16 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
 
   switch (userContext.apiType) {
     case "Postgres":
-      title = "Welcome to Azure Cosmos DB for PostgreSQL";
-      subtitle = "Get started with our sample datasets, documentation, and additional tools.";
+      title = t(Keys.splashScreen.title.postgres);
+      subtitle = t(Keys.splashScreen.subtitle.getStarted);
       break;
     case "VCoreMongo":
-      title = "Welcome to Azure DocumentDB (with MongoDB compatibility)";
-      subtitle = "Get started with our sample datasets, documentation, and additional tools.";
+      title = t(Keys.splashScreen.title.vcoreMongo);
+      subtitle = t(Keys.splashScreen.subtitle.getStarted);
       break;
     default:
-      title = "Welcome to Azure Cosmos DB";
-      subtitle = "Globally distributed, multi-model database service for any scale";
+      title = t(Keys.splashScreen.title.default);
+      subtitle = t(Keys.splashScreen.subtitle.default);
   }
 
   React.useEffect(() => {

src/Index.tsx

@@ -1,3 +1,4 @@
+import "./i18n";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import Arrow from "../images/Arrow.svg";

src/Localization/LocProject.json

@@ -0,0 +1,14 @@
+{
+  "Projects": [
+    {
+      "LanguageSet": "Azure_LanguagesExt",
+      "LocItems": [
+        {
+          "SourceFile": "src\\Localization\\en\\Resources.json",
+          "CopyOption": "LangIDOnPath",
+          "OutputPath": "src\\Localization"
+        }
+      ]
+    }
+  ]
+}

src/Localization/cs/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Vítá vás Azure Cosmos DB",
+      "postgres": "Vítá vás Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Vítá vás Azure DocumentDB (s kompatibilitou MongoDB)"
+    },
+    "subtitle": {
+      "default": "Globálně distribuovaná databázová služba s více modely pro libovolné škálování",
+      "getStarted": "Začněte s našimi ukázkovými datovými sadami, dokumentací a dalšími nástroji."
+    }
+  }
+}

src/Localization/de/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Willkommen bei Azure Cosmos DB",
+      "postgres": "Willkommen bei Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Willkommen bei Azure DocumentDB (mit MongoDB-Kompatibilität)"
+    },
+    "subtitle": {
+      "default": "Global verteilter Datenbankdienst mit Unterstützung mehrerer Datenmodelle in jeder Größenordnung",
+      "getStarted": "Erste Schritte mit unseren Beispieldatensätzen, der Dokumentation und weiteren Tools."
+    }
+  }
+}

src/Localization/en/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Welcome to Azure Cosmos DB",
+      "postgres": "Welcome to Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Welcome to Azure DocumentDB (with MongoDB compatibility)"
+    },
+    "subtitle": {
+      "default": "Globally distributed, multi-model database service for any scale",
+      "getStarted": "Get started with our sample datasets, documentation, and additional tools."
+    }
+  }
+}

src/Localization/es/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Le presentamos Azure Cosmos DB",
+      "postgres": "Le damos la bienvenida a Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Le damos la bienvenida a Azure DocumentDB (con compatibilidad con MongoDB)"
+    },
+    "subtitle": {
+      "default": "Servicio de base de datos multimodelo distribuido globalmente para cualquier escala",
+      "getStarted": "Introducción a nuestros conjuntos de datos de ejemplo, documentación y herramientas adicionales."
+    }
+  }
+}

src/Localization/fr/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Bienvenue dans Azure Cosmos DB",
+      "postgres": "Bienvenue à Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Bienvenue à Azure DocumentDB (avec compatibilité MongoDB)"
+    },
+    "subtitle": {
+      "default": "Service de base de données multimodèle, mondialement distribuée et disponible à toute échelle",
+      "getStarted": "Commencez avec nos jeux de données d’exemple, notre documentation et nos outils supplémentaires."
+    }
+  }
+}

src/Localization/hu/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Üdvözli az Azure Cosmos DB",
+      "postgres": "Üdvözli az Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Üdvözli az Azure DocumentDB (MongoDB-kompatibilitással)"
+    },
+    "subtitle": {
+      "default": "Globálisan elosztott, többmodelles adatbázis-szolgáltatás bármilyen mérethez",
+      "getStarted": "Ismerje meg a minta adathalmazok, a dokumentáció és a további eszközök használatának első lépéseit."
+    }
+  }
+}

src/Localization/id/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Selamat Datang di Azure Cosmos DB",
+      "postgres": "Selamat datang di Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Selamat datang di Azure DocumentDB (dengan kompatibilitas MongoDB)"
+    },
+    "subtitle": {
+      "default": "Layanan database multimodel yang didistribusikan secara global untuk skala apa saja",
+      "getStarted": "Mulai dengan himpunan data sampel, dokumentasi, dan alat tambahan kami."
+    }
+  }
+}

src/Localization/it/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Benvenuto in Azure Cosmos DB",
+      "postgres": "Benvenuti in Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Benvenuti in Azure DocumentDB (con compatibilità MongoDB)"
+    },
+    "subtitle": {
+      "default": "Servizio database multimodello distribuito a livello globale a qualsiasi livello di scalabilità",
+      "getStarted": "Inizia con i nostri set di dati di esempio, la documentazione e gli strumenti aggiuntivi."
+    }
+  }
+}

src/Localization/ja/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Azure Cosmos DB へようこそ",
+      "postgres": "Azure Cosmos DB for PostgreSQL へようこそ",
+      "vcoreMongo": "Azure DocumentDB (MongoDB 互換) へようこそ"
+    },
+    "subtitle": {
+      "default": "あらゆるスケールに対応するグローバル分散型のマルチモデル データベース サーバー",
+      "getStarted": "サンプル データセット、ドキュメント、追加ツールを使用して開始してください。"
+    }
+  }
+}

src/Localization/ko/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Azure Cosmos DB 시작",
+      "postgres": "Azure Cosmos DB for PostgreSQL 시작",
+      "vcoreMongo": "Azure DocumentDB 시작(MongoDB 호환성 포함)"
+    },
+    "subtitle": {
+      "default": "모든 규모에 대해 전역적으로 분산된 다중 모델 데이터베이스 서비스",
+      "getStarted": "샘플 데이터 세트, 설명서 및 추가 도구를 시작하세요."
+    }
+  }
+}

src/Localization/nl/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Welkom bij Azure Cosmos DB",
+      "postgres": "Welkom bij Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Welkom bij Azure DocumentDB (met MongoDB-compatibiliteit)"
+    },
+    "subtitle": {
+      "default": "Wereldwijd gedistribueerde, multi-modeldatabase-service voor elke schaalgrootte",
+      "getStarted": "Ga aan de slag met onze voorbeelddatasets, documentatie en extra tools."
+    }
+  }
+}

src/Localization/pl/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Azure Cosmos DB — Zapraszamy!",
+      "postgres": "Azure Cosmos DB for PostgreSQL — Zapraszamy!",
+      "vcoreMongo": "Witamy w usłudze Azure DocumentDB (ze zgodnością z bazą danych MongoDB)"
+    },
+    "subtitle": {
+      "default": "Globalnie rozproszona, wielomodelowa usługa bazy danych na dowolną skalę",
+      "getStarted": "Rozpocznij pracę z naszymi przykładowymi zestawami danych, dokumentacją i dodatkowymi narzędziami."
+    }
+  }
+}

src/Localization/pt-BR/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Bem-vindo ao Azure Cosmos DB",
+      "postgres": "Bem-vindo ao Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Bem-vindo ao Azure DocumentDB (com compatibilidade com MongoDB)"
+    },
+    "subtitle": {
+      "default": "Serviço de multimodelo de banco de dados globalmente distribuído para qualquer escala",
+      "getStarted": "Comece com nossos conjuntos de dados de exemplo, documentação e ferramentas adicionais."
+    }
+  }
+}

src/Localization/pt-PT/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Bem-vindo ao Azure Cosmos DB",
+      "postgres": "Bem-vindo ao Azure Cosmos DB para PostgreSQL",
+      "vcoreMongo": "Bem-vindo ao Azure DocumentDB (com compatibilidade do MongoDB)"
+    },
+    "subtitle": {
+      "default": "Serviço de base de dados com múltiplos modelos distribuído globalmente para qualquer dimensionamento",
+      "getStarted": "Comece a trabalhar com os nossos conjuntos de dados de exemplo, documentação e ferramentas adicionais."
+    }
+  }
+}

src/Localization/ru/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Вас приветствует Azure Cosmos DB",
+      "postgres": "Добро пожаловать в Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Добро пожаловать в Azure DocumentDB (с совместимостью с MongoDB)"
+    },
+    "subtitle": {
+      "default": "Глобально распределенная многомодельная служба базы данных для использования в любом масштабе",
+      "getStarted": "Начните работу с нашими примерами наборов данных, документацией и дополнительными инструментами."
+    }
+  }
+}

src/Localization/sv/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Välkommen till Azure Cosmos DB",
+      "postgres": "Välkommen till Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "Välkommen till Azure DocumentDB (med MongoDB-kompatibilitet)"
+    },
+    "subtitle": {
+      "default": "Globalt distribuerad databas för flera datamodeller oavsett skala",
+      "getStarted": "Kom igång med våra exempeldatamängder, dokumentation och extra verktyg."
+    }
+  }
+}

src/Localization/t.ts

@@ -0,0 +1,24 @@
+import i18n from "../i18n";
+import type enResources from "./en/Resources.json";
+
+/**
+ * Derives a union of all dot-notation key paths from a nested JSON object type.
+ * e.g. { buttons: { save: "Save" } } → "buttons.save"
+ */
+type NestedKeyOf<T, P extends string = ""> = {
+  [K in keyof T & string]: T[K] extends Record<string, unknown>
+    ? NestedKeyOf<T[K], P extends "" ? K : `${P}.${K}`>
+    : P extends ""
+    ? K
+    : `${P}.${K}`;
+}[keyof T & string];
+
+/** All valid translation keys derived from en/Resources.json */
+export type ResourceKey = NestedKeyOf<typeof enResources>;
+
+/**
+ * Type-safe translation function bound to the "Resources" namespace.
+ * Use this everywhere—class components, functional components, and non-React code.
+ */
+export const t = (key: ResourceKey, options?: Record<string, unknown>): string =>
+  (i18n.t as (key: string, options?: unknown) => string)(key, { ns: "Resources", ...options });

src/Localization/tr/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "Azure Cosmos DB'ye hoş geldiniz",
+      "postgres": "Azure Cosmos DB for PostgreSQL'e hoş geldiniz",
+      "vcoreMongo": "Azure DocumentDB'ye (MongoDB uyumluluğu ile) hoş geldiniz"
+    },
+    "subtitle": {
+      "default": "Her ölçeğe uygun, global olarak dağıtılan çok modelli veritabanı hizmeti",
+      "getStarted": "Örnek veri kümelerimizi, belgelerimizi ve ek araçlarımızı kullanmaya başlayın."
+    }
+  }
+}

src/Localization/zh-Hans/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "欢迎使用 Azure Cosmos DB",
+      "postgres": "欢迎使用 Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "欢迎使用 Azure DocumentDB (具有 MongoDB 兼容性)"
+    },
+    "subtitle": {
+      "default": "任何规模的全球分布式多模型数据库服务",
+      "getStarted": "开始使用我们的示例数据集、文档和其他工具。"
+    }
+  }
+}

src/Localization/zh-Hant/Resources.json

@@ -0,0 +1,13 @@
+{
+  "splashScreen": {
+    "title": {
+      "default": "歡迎使用 Azure Cosmos DB",
+      "postgres": "歡迎使用 Azure Cosmos DB for PostgreSQL",
+      "vcoreMongo": "歡迎使用 Azure DocumentDB (具 MongoDB 相容性)"
+    },
+    "subtitle": {
+      "default": "適用於任何規模的全域散發、多模型資料庫服務",
+      "getStarted": "開始使用我們的樣本資料集、文件和其他工具。"
+    }
+  }
+}

src/SelfServe/SelfServeComponent.tsx

@@ -9,7 +9,6 @@ import {
   Stack,
   Text,
 } from "@fluentui/react";
-import { TFunction } from "i18next";
 import promiseRetry, { AbortError, Options } from "p-retry";
 import React from "react";
 import { WithTranslation } from "react-i18next";
@@ -81,7 +80,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
   private smartUiGeneratorClassName: string;
   private retryIntervalInMs: number;
   private retryOptions: Options;
-  private translationFunction: TFunction;
+  private translationFunction: (key: string) => string;
 
   componentDidMount(): void {
     this.performRefresh().then(() => {
@@ -119,7 +118,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     this.retryOptions = { forever: true, maxTimeout: this.retryIntervalInMs, minTimeout: this.retryIntervalInMs };
 
     // translation function passed to SelfServeComponent
-    this.translationFunction = this.props.t;
+    this.translationFunction = this.props.t as (key: string) => string;
   }
 
   private onError = (hasErrors: boolean): void => {

src/i18n.ts

@@ -1,16 +1,21 @@
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
+import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 
 i18n
   .use(LanguageDetector)
+  .use(resourcesToBackend((lng: string, ns: string) => import(`./Localization/${lng}/${ns}.json`)))
   .use(initReactI18next)
   .init({
     fallbackLng: "en",
+    defaultNS: "Resources",
+    ns: ["Resources"],
     detection: { order: ["navigator", "cookie", "localStorage", "sessionStorage", "querystring", "htmlTag"] },
     debug: process.env.NODE_ENV === "development",
     keySeparator: ".",
     interpolation: {
+      escapeValue: false,
       formatSeparator: ",",
     },
     react: {