Try to fix coverage report merge.

* Fixing metrics

* run prettier

.github/workflows/ci.yml

@@ -161,6 +161,7 @@ jobs:
     env:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
       AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      COVERAGE: 1
     strategy:
       fail-fast: false
       matrix:
@@ -217,6 +218,9 @@ jobs:
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
+      - name: "Generate code coverage report for shard ${{ matrix['shardIndex'] }}"
+        if: ${{ !cancelled() }}
+        run: npx nyc report --reporter=html --reporter=text --reporter=lcov --report-dir=coverage/shard-${{ matrix.shardIndex }}
       - name: Upload blob report to GitHub Actions Artifacts
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
@@ -224,6 +228,40 @@ jobs:
           name: blob-report-${{ matrix.shardIndex }}
           path: blob-report
           retention-days: 1
+      - name: Upload coverage report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report-${{ matrix.shardIndex }}
+          path: coverage/shard-${{ matrix.shardIndex }}
+          retention-days: 1
+
+  merge-coverage-reports:
+    name: "Merge Coverage Reports"
+    if: ${{ !cancelled() }}
+    needs: [playwright-tests]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Download all raw coverage data
+        uses: actions/download-artifact@v4
+        with:
+          path: all-coverage
+          pattern: coverage-report-*
+          merge-multiple: true
+      - name: Generate merged coverage report
+        run: npx nyc merge all-coverage coverage.json
+      - name: Upload merged coverage report
+        uses: actions/upload-artifact@v4
+        with:
+          name: merged-coverage-report--attempt-${{ github.run_attempt }}
+          path: all-coverage
+          retention-days: 14
 
   merge-playwright-reports:
     name: "Merge Playwright Reports"
@@ -255,4 +293,4 @@ jobs:
         with:
           name: html-report--attempt-${{ github.run_attempt }}
           path: playwright-report
-          retention-days: 14
+          retention-days: 14

.gitignore

@@ -17,7 +17,10 @@ Contracts/*
 failure.png
 screenshots/*
 GettingStarted-ignore*.ipynb
+src/Localization/Keys.generated.ts
 /test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.nyc_output/
+coverage-e2e/

package.json

@@ -72,6 +72,7 @@
     "i18next": "23.11.5",
     "i18next-browser-languagedetector": "6.0.1",
     "i18next-http-backend": "3.0.2",
+    "i18next-resources-to-backend": "1.2.1",
     "iframe-resizer-react": "1.1.0",
     "immer": "9.0.6",
     "immutable": "4.0.0-rc.12",
@@ -170,10 +171,12 @@
     "@webpack-cli/serve": "2.0.5",
     "babel-jest": "29.7.0",
     "babel-loader": "8.1.0",
+    "babel-plugin-istanbul": "7.0.1",
     "brace-expansion": "1.1.12",
     "buffer": "5.1.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "create-file-webpack": "1.0.2",
+    "cross-env": "10.1.0",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.8",
@@ -188,6 +191,7 @@
     "html-inline-css-webpack-plugin": "1.11.2",
     "html-loader": "5.0.0",
     "html-webpack-plugin": "5.5.3",
+    "i18next-resources-for-ts": "2.0.0",
     "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
     "jest-circus": "29.7.0",
@@ -202,6 +206,7 @@
     "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "node-fetch": "2.6.7",
+    "nyc": "18.0.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
@@ -214,6 +219,7 @@
     "typedoc": "0.26.2",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
+    "values-to-keys": "1.1.0",
     "wait-on": "9.0.3",
     "webpack": "5.104.1",
     "webpack-bundle-analyzer": "5.2.0",
@@ -222,7 +228,8 @@
     "ws": "8.17.1"
   },
   "scripts": {
-    "postinstall": "patch-package",
+    "postinstall": "patch-package && npm run generate:i18n-keys",
+    "prestart": "npm run generate:i18n-keys",
     "start": "webpack serve --mode development",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",
@@ -234,6 +241,9 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
+    "test:e2e:coverage": "cross-env COVERAGE=1 npx playwright test",
+    "test:e2e:coverage:report": "nyc report --reporter=html --reporter=text --report-dir=coverage-e2e",
+    "start:coverage": "cross-env COVERAGE=1 webpack serve --mode development",
     "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
@@ -249,6 +259,7 @@
     "strict:find": "node ./strict-null-checks/find.js",
     "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
+    "generate:i18n-keys": "node utils/generateI18nKeys.mjs",
     "generateARMClients": "npx ts-node utils/armClientGenerator/generator.ts"
   },
   "repository": {
@@ -266,6 +277,22 @@
     "url": "https://github.com/Azure/cosmos-explorer/issues"
   },
   "homepage": "https://github.com/Azure/cosmos-explorer",
+  "nyc": {
+    "report-dir": "coverage-e2e",
+    "temp-dir": ".nyc_output",
+    "include": [
+      "src/**"
+    ],
+    "exclude": [
+      "node_modules",
+      "test"
+    ],
+    "reporter": [
+      "text",
+      "html",
+      "lcov"
+    ]
+  },
   "prettier": {
     "printWidth": 120,
     "endOfLine": "auto"

playwright.config.ts

@@ -26,15 +26,6 @@ export default defineConfig({
   },
 
   projects: [
-    {
-      name: "chromium",
-      use: {
-        ...devices["Desktop Chrome"],
-        launchOptions: {
-          args: ["--disable-web-security", "--disable-features=IsolateOrigins,site-per-process"],
-        },
-      },
-    },
     {
       name: "firefox",
       use: {

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/ConfigContext.ts

@@ -79,6 +79,10 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/dataexplorer-preview\\.azurewebsites\\.net$`,
     `^https:\\/\\/explorer\\.cosmos\\.sovcloud-api\\.fr$`,
     `^https:\\/\\/portal\\.sovcloud-azure\\.fr$`,
+    `^https:\\/\\/explorer\\.cosmos\\.sovcloud-api\\.de$`,
+    `^https:\\/\\/portal\\.sovcloud-azure\\.de$`,
+    `^https:\\/\\/explorer\\.cosmos\\.sovcloud-api\\.sg$`,
+    `^https:\\/\\/portal\\.sovcloud-azure\\.sg$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",

src/Explorer/ContainerCopy/CopyJobUtils.test.ts

@@ -395,6 +395,14 @@ describe("CopyJobUtils", () => {
       expect(result).toBe(false);
     });
 
+    it("should return false for different completion percentage", () => {
+      const jobs1 = [createMockJob("job1", "Running")];
+      const jobs2 = [{ ...createMockJob("job1", "Running"), CompletionPercentage: 75 }];
+
+      const result = CopyJobUtils.isEqual(jobs1, jobs2);
+      expect(result).toBe(false);
+    });
+
     it("should return true for empty arrays", () => {
       const result = CopyJobUtils.isEqual([], []);
       expect(result).toBe(true);

src/Explorer/ContainerCopy/CopyJobUtils.ts

@@ -142,7 +142,7 @@ export function isEqual(prevJobs: CopyJobType[], newJobs: CopyJobType[]): boolea
     if (!newJob) {
       return false;
     }
-    return prevJob.Status === newJob.Status;
+    return prevJob.Status === newJob.Status && prevJob.CompletionPercentage === newJob.CompletionPercentage;
   });
 }
 

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -543,6 +543,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           <span style={{ float: "left", transform: "translateX(-50%)" }}>
             {this.props.instantMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
           </span>
+          <span style={{ float: "right" }}>
+            {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
+          </span>
           <span style={{ float: "right" }} data-test="soft-allowed-maximum-throughput">
             {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
           </span>

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -426,6 +426,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 >
                   5,000
                 </span>
+                <span
+                  style={
+                    {
+                      "float": "right",
+                    }
+                  }
+                >
+                  1,000,000
+                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -1025,6 +1034,15 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 >
                   5,000
                 </span>
+                <span
+                  style={
+                    {
+                      "float": "right",
+                    }
+                  }
+                >
+                  1,000,000
+                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -1602,6 +1620,15 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 >
                   5,000
                 </span>
+                <span
+                  style={
+                    {
+                      "float": "right",
+                    }
+                  }
+                >
+                  1,000,000
+                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -113,7 +113,7 @@ export class ContainerSampleGenerator {
               ? await createMongoDocument(collection.databaseId, collection, shardKey, doc)
               : await createDocument(collection, doc);
           } catch (error) {
-            NotificationConsoleUtils.logConsoleError(error);
+            NotificationConsoleUtils.logConsoleError(error instanceof Error ? error.message : String(error));
           }
         }),
       );

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -329,7 +329,10 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private static extractHeaderStatus(consoleData: ConsoleData) {
-    return consoleData?.message.split(":\n")[0];
+    if (!consoleData?.message || typeof consoleData.message !== "string") {
+      return undefined;
+    }
+    return consoleData.message.split(":\n")[0];
   }
 
   private onConsoleWasExpanded = (): void => {

src/Explorer/SplashScreen/FabricHome.tsx

@@ -6,6 +6,8 @@ import { DocumentAddRegular, LinkMultipleRegular, OpenRegular } from "@fluentui/
 import { SampleDataConfiguration, SampleDataImportDialog } from "Explorer/SplashScreen/SampleDataImportDialog";
 import { SampleDataFile } from "Explorer/SplashScreen/SampleUtil";
 import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { isFabricNative, isFabricNativeReadOnly } from "Platform/Fabric/FabricUtil";
 import * as React from "react";
 import { userContext } from "UserContext";
@@ -159,8 +161,8 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
   const getSplashScreenButtons = (): JSX.Element => {
     const buttons: FabricHomeScreenButtonProps[] = [
       {
-        title: "New container",
-        description: "Create a destination container to store your data",
+        title: t(Keys.splashScreen.fabric.newContainer.title),
+        description: t(Keys.splashScreen.fabric.newContainer.description),
         icon: <DocumentAddRegular />,
         onClick: () => {
           const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
@@ -168,8 +170,8 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         },
       },
       {
-        title: "Sample Data",
-        description: "Load sample data in your database",
+        title: t(Keys.splashScreen.fabric.sampleData.title),
+        description: t(Keys.splashScreen.fabric.sampleData.description),
         icon: <img src={CosmosDbBlackIcon} alt={"Azure Cosmos DB icon"} aria-hidden="true" />,
         onClick: () => {
           setSelectedSampleDataConfiguration({
@@ -181,8 +183,8 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         },
       },
       {
-        title: "Sample Vector Data",
-        description: "Load sample vector data with text-embedding-ada-002",
+        title: t(Keys.splashScreen.fabric.sampleVectorData.title),
+        description: t(Keys.splashScreen.fabric.sampleVectorData.description),
         icon: <img src={AzureOpenAiIcon} alt={"Azure Open AI icon"} aria-hidden="true" />,
         onClick: () => {
           setSelectedSampleDataConfiguration({
@@ -194,14 +196,14 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         },
       },
       {
-        title: "App development",
-        description: "Start here to use an SDK to build your apps",
+        title: t(Keys.splashScreen.fabric.appDevelopment.title),
+        description: t(Keys.splashScreen.fabric.appDevelopment.description),
         icon: <LinkMultipleRegular />,
         onClick: () => window.open("https://aka.ms/cosmosdbfabricsdk", "_blank"),
       },
       {
-        title: "Sample Gallery",
-        description: "Get real-world end-to-end samples",
+        title: t(Keys.splashScreen.fabric.sampleGallery.title),
+        description: t(Keys.splashScreen.fabric.sampleGallery.description),
         icon: <img src={GithubIcon} alt={"GitHub icon"} aria-hidden="true" />,
         onClick: () => window.open("https://aka.ms/CosmosFabricSamplesGallery", "_blank"),
       },
@@ -222,7 +224,9 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
     );
   };
 
-  const title = isFabricNativeReadOnly() ? "Use your database" : "Build your database";
+  const title = isFabricNativeReadOnly()
+    ? t(Keys.splashScreen.fabric.useTitle)
+    : t(Keys.splashScreen.fabric.buildTitle);
   return (
     <>
       <CosmosFluentProvider className={styles.homeContainer}>
@@ -238,9 +242,9 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         {getSplashScreenButtons()}
         {
           <div className={styles.footer}>
-            Need help?{" "}
+            {t(Keys.splashScreen.sections.needHelp)}{" "}
             <Link href="https://learn.microsoft.com/fabric/database/cosmos-db/overview" target="_blank">
-              Learn more <OpenRegular />
+              {t(Keys.common.learnMore)} <OpenRegular />
             </Link>
           </div>
         }

src/Explorer/SplashScreen/SampleDataImportDialog.tsx

@@ -12,6 +12,8 @@ import {
 } from "@fluentui/react-components";
 import Explorer from "Explorer/Explorer";
 import { checkContainerExists, createContainer, importData, SampleDataFile } from "Explorer/SplashScreen/SampleUtil";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import React, { useEffect, useState } from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
 
@@ -59,7 +61,7 @@ export const SampleDataImportDialog: React.FC<{
     setStatus("creating");
     const databaseName = props.sampleDataConfiguration.databaseName;
     if (checkContainerExists(databaseName, containerName)) {
-      const msg = `The container "${containerName}" in database "${databaseName}" already exists. Please delete it and retry.`;
+      const msg = t(Keys.splashScreen.sampleDataDialog.errorContainerExists, { containerName, databaseName });
       setStatus("error");
       setErrorMessage(msg);
       return;
@@ -75,7 +77,11 @@ export const SampleDataImportDialog: React.FC<{
       );
     } catch (error) {
       setStatus("error");
-      setErrorMessage(`Failed to create container: ${error instanceof Error ? error.message : String(error)}`);
+      setErrorMessage(
+        t(Keys.splashScreen.sampleDataDialog.errorCreateContainer, {
+          error: error instanceof Error ? error.message : String(error),
+        }),
+      );
       return;
     }
 
@@ -86,7 +92,11 @@ export const SampleDataImportDialog: React.FC<{
       setStatus("completed");
     } catch (error) {
       setStatus("error");
-      setErrorMessage(`Failed to import data: ${error instanceof Error ? error.message : String(error)}`);
+      setErrorMessage(
+        t(Keys.splashScreen.sampleDataDialog.errorImportData, {
+          error: error instanceof Error ? error.message : String(error),
+        }),
+      );
     }
   };
 
@@ -112,14 +122,26 @@ export const SampleDataImportDialog: React.FC<{
   const renderContent = () => {
     switch (status) {
       case "idle":
-        return `Create a container "${containerName}" and import sample data into it. This may take a few minutes.`;
+        return t(Keys.splashScreen.sampleDataDialog.createPrompt, { containerName });
 
       case "creating":
-        return <Spinner size="small" labelPosition="above" label={`Creating container "${containerName}"...`} />;
+        return (
+          <Spinner
+            size="small"
+            labelPosition="above"
+            label={t(Keys.splashScreen.sampleDataDialog.creatingContainer, { containerName })}
+          />
+        );
       case "importing":
-        return <Spinner size="small" labelPosition="above" label={`Importing data into "${containerName}"...`} />;
+        return (
+          <Spinner
+            size="small"
+            labelPosition="above"
+            label={t(Keys.splashScreen.sampleDataDialog.importingData, { containerName })}
+          />
+        );
       case "completed":
-        return `Successfully created "${containerName}" with sample data.`;
+        return t(Keys.splashScreen.sampleDataDialog.success, { containerName });
       case "error":
         return (
           <div style={{ color: "red" }}>
@@ -132,14 +154,14 @@ export const SampleDataImportDialog: React.FC<{
   const getButtonLabel = () => {
     switch (status) {
       case "idle":
-        return "Start";
+        return t(Keys.splashScreen.sampleDataDialog.startButton);
       case "creating":
       case "importing":
-        return "Close";
+        return t(Keys.common.close);
       case "completed":
-        return "Close";
+        return t(Keys.common.close);
       case "error":
-        return "Close";
+        return t(Keys.common.close);
     }
   };
 
@@ -147,7 +169,7 @@ export const SampleDataImportDialog: React.FC<{
     <Dialog open={props.open} onOpenChange={(event, data) => props.setOpen(data.open)}>
       <DialogSurface>
         <DialogBody>
-          <DialogTitle>Sample Data</DialogTitle>
+          <DialogTitle>{t(Keys.splashScreen.sampleDataDialog.title)}</DialogTitle>
           <DialogContent>
             <div className={styles.dialogContent}>{renderContent()}</div>
           </DialogContent>

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(() => {
@@ -249,8 +251,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
           <Stack className="splashStackRow" horizontal>
             <SplashScreenButton
               imgSrc={QuickStartIcon}
-              title={"Launch quick start"}
-              description={"Launch a quick start tutorial to get started with sample data"}
+              title={t(Keys.splashScreen.quickStart.title)}
+              description={t(Keys.splashScreen.quickStart.description)}
               onClick={() => {
                 container.onNewCollectionClicked({ isQuickstart: true });
                 traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
@@ -258,8 +260,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             />
             <SplashScreenButton
               imgSrc={ContainersIcon}
-              title={`New ${getCollectionName()}`}
-              description={"Create a new container for storage and throughput"}
+              title={t(Keys.splashScreen.newCollection.title, { collectionName: getCollectionName() })}
+              description={t(Keys.splashScreen.newCollection.description)}
               onClick={() => {
                 container.onNewCollectionClicked();
                 traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
@@ -270,10 +272,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             <SplashScreenButton
               imgSrc={CosmosDBIcon}
               imgSize={35}
-              title={"Azure Cosmos DB Samples Gallery"}
-              description={
-                "Discover samples that showcase scalable, intelligent app patterns. Try one now to see how fast you can go from concept to code with Cosmos DB"
-              }
+              title={t(Keys.splashScreen.samplesGallery.title)}
+              description={t(Keys.splashScreen.samplesGallery.description)}
               onClick={() => {
                 window.open("https://azurecosmosdb.github.io/gallery/?tags=example", "_blank");
                 traceOpen(Action.LearningResourcesClicked, { apiType: userContext.apiType });
@@ -281,8 +281,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             />
             <SplashScreenButton
               imgSrc={ConnectIcon}
-              title={"Connect"}
-              description={"Prefer using your own choice of tooling? Find the connection string you need to connect"}
+              title={t(Keys.splashScreen.connectCard.title)}
+              description={t(Keys.splashScreen.connectCard.description)}
               onClick={() => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect)}
             />
           </Stack>
@@ -297,7 +297,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
           usePostgres.getState().showPostgreTeachingBubble &&
           !usePostgres.getState().showResetPasswordBubble && (
             <TeachingBubble
-              headline="New to Cosmos DB PGSQL?"
+              headline={t(Keys.splashScreen.teachingBubble.newToPostgres.headline)}
               target={"#mainButton-quickstartDescription"}
               hasCloseButton
               onDismiss={() => usePostgres.getState().setShowPostgreTeachingBubble(false)}
@@ -309,15 +309,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
                 preventDismissOnScroll: true,
               }}
               primaryButtonProps={{
-                text: "Get started",
+                text: t(Keys.common.getStarted),
                 onClick: () => {
                   useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
                   usePostgres.getState().setShowPostgreTeachingBubble(false);
                 },
               }}
             >
-              Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you can find
-              sample data, query.
+              {t(Keys.splashScreen.teachingBubble.newToPostgres.body)}
             </TeachingBubble>
           )}
         {/*TODO: convert below to use SplashScreenButton */}
@@ -349,7 +348,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         ))}
         {userContext.apiType === "Postgres" && usePostgres.getState().showResetPasswordBubble && (
           <TeachingBubble
-            headline="Create your password"
+            headline={t(Keys.splashScreen.teachingBubble.resetPassword.headline)}
             target={"#mainButton-quickstartDescription"}
             hasCloseButton
             onDismiss={() => {
@@ -364,7 +363,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
               preventDismissOnScroll: true,
             }}
             primaryButtonProps={{
-              text: "Create",
+              text: t(Keys.common.create),
               onClick: () => {
                 localStorage.setItem(userContext.databaseAccount.id, "true");
                 sendMessage({
@@ -374,7 +373,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
               },
             }}
           >
-            If you haven&apos;t changed your password yet, change it now.
+            {t(Keys.splashScreen.teachingBubble.resetPassword.body)}
           </TeachingBubble>
         )}
       </div>
@@ -393,8 +392,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       const launchQuickstartBtn = {
         id: "quickstartDescription",
         iconSrc: QuickStartIcon,
-        title: "Launch quick start",
-        description: "Launch a quick start tutorial to get started with sample data",
+        title: t(Keys.splashScreen.quickStart.title),
+        description: t(Keys.splashScreen.quickStart.description),
         onClick: () => {
           if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
             useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
@@ -416,8 +415,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     if (userContext.apiType === "Postgres") {
       return {
         iconSrc: PowerShellIcon,
-        title: "PostgreSQL Shell",
-        description: "Create table and interact with data using PostgreSQL's shell interface",
+        title: t(Keys.splashScreen.shell.postgres.title),
+        description: t(Keys.splashScreen.shell.postgres.description),
         onClick: () => container.openNotebookTerminal(TerminalKind.Postgres),
       };
     }
@@ -425,16 +424,16 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     if (userContext.apiType === "VCoreMongo") {
       return {
         iconSrc: PowerShellIcon,
-        title: "Mongo Shell",
-        description: "Create a collection and interact with data using MongoDB's shell interface",
+        title: t(Keys.splashScreen.shell.vcoreMongo.title),
+        description: t(Keys.splashScreen.shell.vcoreMongo.description),
         onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo),
       };
     }
 
     return {
       iconSrc: ContainersIcon,
-      title: `New ${getCollectionName()}`,
-      description: "Create a new container for storage and throughput",
+      title: t(Keys.splashScreen.newCollection.title, { collectionName: getCollectionName() }),
+      description: t(Keys.splashScreen.newCollection.description),
       onClick: () => {
         container.onNewCollectionClicked();
         traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
@@ -444,19 +443,19 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
 
   const getThirdCard = (): SplashScreenItem => {
     let icon = ConnectIcon;
-    let title = "Connect";
-    let description = "Prefer using your own choice of tooling? Find the connection string you need to connect";
+    let title = t(Keys.splashScreen.connectCard.title);
+    let description = t(Keys.splashScreen.connectCard.description);
     let onClick = () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect);
 
     if (userContext.apiType === "Postgres") {
-      title = "Connect with pgAdmin";
-      description = "Prefer pgAdmin? Find your connection strings here";
+      title = t(Keys.splashScreen.connectCard.pgAdmin.title);
+      description = t(Keys.splashScreen.connectCard.pgAdmin.description);
     }
 
     if (userContext.apiType === "VCoreMongo") {
       icon = VisualStudioIcon;
-      title = "Connect with VS Code";
-      description = "Query and Manage your MongoDB and DocumentDB clusters in Visual Studio Code";
+      title = t(Keys.splashScreen.connectCard.vsCode.title);
+      description = t(Keys.splashScreen.connectCard.vsCode.description);
       onClick = () => container?.openInVsCode && container.openInVsCode();
     }
 
@@ -485,7 +484,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       info: activity.path,
       iconSrc: NotebookIcon,
       title: activity.name,
-      description: "Notebook",
+      description: t(Keys.splashScreen.sections.notebook),
       onClick: () => {
         const notebookItem = container.createNotebookContentItemFile(activity.name, activity.path);
         notebookItem && container.openNotebook(notebookItem);
@@ -524,18 +523,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/msl-modeling-partitioning-2",
-            title: "Advanced Modeling Patterns",
-            description: "Learn advanced strategies to optimize your database.",
+            title: t(Keys.splashScreen.top3Items.sql.advancedModeling.title),
+            description: t(Keys.splashScreen.top3Items.sql.advancedModeling.description),
           },
           {
             link: "https://aka.ms/msl-modeling-partitioning-1",
-            title: "Partitioning Best Practices",
-            description: "Learn to apply data model and partitioning strategies.",
+            title: t(Keys.splashScreen.top3Items.sql.partitioning.title),
+            description: t(Keys.splashScreen.top3Items.sql.partitioning.description),
           },
           {
             link: "https://aka.ms/msl-resource-planning",
-            title: "Plan Your Resource Requirements",
-            description: "Get to know the different configuration choices.",
+            title: t(Keys.splashScreen.top3Items.sql.resourcePlanning.title),
+            description: t(Keys.splashScreen.top3Items.sql.resourcePlanning.description),
           },
         ];
         break;
@@ -543,18 +542,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/mongodbintro",
-            title: "What is the MongoDB API?",
-            description: "Understand Azure Cosmos DB for MongoDB and its features.",
+            title: t(Keys.splashScreen.top3Items.mongo.whatIsMongo.title),
+            description: t(Keys.splashScreen.top3Items.mongo.whatIsMongo.description),
           },
           {
             link: "https://aka.ms/mongodbfeaturesupport",
-            title: "Features and Syntax",
-            description: "Discover the advantages and features",
+            title: t(Keys.splashScreen.top3Items.mongo.features.title),
+            description: t(Keys.splashScreen.top3Items.mongo.features.description),
           },
           {
             link: "https://aka.ms/mongodbpremigration",
-            title: "Migrate Your Data",
-            description: "Pre-migration steps for moving data",
+            title: t(Keys.splashScreen.top3Items.mongo.migrate.title),
+            description: t(Keys.splashScreen.top3Items.mongo.migrate.description),
           },
         ];
         break;
@@ -562,18 +561,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/cassandrajava",
-            title: "Build a Java App",
-            description: "Create a Java app using an SDK.",
+            title: t(Keys.splashScreen.top3Items.cassandra.buildJavaApp.title),
+            description: t(Keys.splashScreen.top3Items.cassandra.buildJavaApp.description),
           },
           {
             link: "https://aka.ms/cassandrapartitioning",
-            title: "Partitioning Best Practices",
-            description: "Learn how partitioning works.",
+            title: t(Keys.splashScreen.top3Items.cassandra.partitioning.title),
+            description: t(Keys.splashScreen.top3Items.cassandra.partitioning.description),
           },
           {
             link: "https://aka.ms/cassandraRu",
-            title: "Request Units (RUs)",
-            description: "Understand RU charges.",
+            title: t(Keys.splashScreen.top3Items.cassandra.requestUnits.title),
+            description: t(Keys.splashScreen.top3Items.cassandra.requestUnits.description),
           },
         ];
         break;
@@ -581,18 +580,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/Graphdatamodeling",
-            title: "Data Modeling",
-            description: "Graph data modeling recommendations",
+            title: t(Keys.splashScreen.top3Items.gremlin.dataModeling.title),
+            description: t(Keys.splashScreen.top3Items.gremlin.dataModeling.description),
           },
           {
             link: "https://aka.ms/graphpartitioning",
-            title: "Partitioning Best Practices",
-            description: "Learn how partitioning works",
+            title: t(Keys.splashScreen.top3Items.gremlin.partitioning.title),
+            description: t(Keys.splashScreen.top3Items.gremlin.partitioning.description),
           },
           {
             link: "https://aka.ms/graphapiquery",
-            title: "Query Data",
-            description: "Querying data with Gremlin",
+            title: t(Keys.splashScreen.top3Items.gremlin.queryData.title),
+            description: t(Keys.splashScreen.top3Items.gremlin.queryData.description),
           },
         ];
         break;
@@ -600,18 +599,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/tableintro",
-            title: "What is the Table API?",
-            description: "Understand Azure Cosmos DB for Table and its features",
+            title: t(Keys.splashScreen.top3Items.tables.whatIsTable.title),
+            description: t(Keys.splashScreen.top3Items.tables.whatIsTable.description),
           },
           {
             link: "https://aka.ms/tableimport",
-            title: "Migrate your data",
-            description: "Learn how to migrate your data",
+            title: t(Keys.splashScreen.top3Items.tables.migrate.title),
+            description: t(Keys.splashScreen.top3Items.tables.migrate.description),
           },
           {
             link: "https://aka.ms/tablefaq",
-            title: "Azure Cosmos DB for Table FAQs",
-            description: "Common questions about Azure Cosmos DB for Table",
+            title: t(Keys.splashScreen.top3Items.tables.faq.title),
+            description: t(Keys.splashScreen.top3Items.tables.faq.description),
           },
         ];
         break;
@@ -668,7 +667,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         </ul>
         {recentItems.length > 0 && (
           <Link onClick={() => clearMostRecent()} className={styles.listItemTitle}>
-            Clear Recents
+            {t(Keys.splashScreen.sections.clearRecents)}
           </Link>
         )}
       </Stack>
@@ -683,15 +682,15 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     }
     const cdbLiveTv: item = {
       link: "https://developer.azurecosmosdb.com/tv",
-      title: "Learn the Fundamentals",
-      description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
+      title: t(Keys.splashScreen.learningResources.liveTv.title),
+      description: t(Keys.splashScreen.learningResources.liveTv.description),
     };
 
     const commonItems: item[] = [
       {
         link: "https://learn.microsoft.com/azure/cosmos-db/data-explorer-shortcuts",
-        title: "Data Explorer keyboard shortcuts",
-        description: "Learn keyboard shortcuts to navigate Data Explorer.",
+        title: t(Keys.splashScreen.learningResources.shortcuts.title),
+        description: t(Keys.splashScreen.learningResources.shortcuts.description),
       },
     ];
 
@@ -702,14 +701,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/msl-sdk-connect",
-            title: "Get Started using an SDK",
-            description: "Learn about the Azure Cosmos DB SDK.",
+            title: t(Keys.splashScreen.learningResources.sql.sdk.title),
+            description: t(Keys.splashScreen.learningResources.sql.sdk.description),
           },
           cdbLiveTv,
           {
             link: "https://aka.ms/msl-move-data",
-            title: "Migrate Your Data",
-            description: "Migrate data using Azure services and open-source solutions.",
+            title: t(Keys.splashScreen.learningResources.sql.migrate.title),
+            description: t(Keys.splashScreen.learningResources.sql.migrate.description),
           },
         ];
         break;
@@ -717,13 +716,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/mongonodejs",
-            title: "Build an app with Node.js",
-            description: "Create a Node.js app.",
+            title: t(Keys.splashScreen.learningResources.mongo.nodejs.title),
+            description: t(Keys.splashScreen.learningResources.mongo.nodejs.description),
           },
           {
             link: "https://aka.ms/mongopython",
-            title: "Getting Started Guide",
-            description: "Learn the basics to get started.",
+            title: t(Keys.splashScreen.learningResources.mongo.gettingStarted.title),
+            description: t(Keys.splashScreen.learningResources.mongo.gettingStarted.description),
           },
           cdbLiveTv,
         ];
@@ -732,14 +731,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/cassandracontainer",
-            title: "Create a Container",
-            description: "Get to know the create a container options.",
+            title: t(Keys.splashScreen.learningResources.cassandra.createContainer.title),
+            description: t(Keys.splashScreen.learningResources.cassandra.createContainer.description),
           },
           cdbLiveTv,
           {
             link: "https://aka.ms/Cassandrathroughput",
-            title: "Provision Throughput",
-            description: "Learn how to configure throughput.",
+            title: t(Keys.splashScreen.learningResources.cassandra.throughput.title),
+            description: t(Keys.splashScreen.learningResources.cassandra.throughput.description),
           },
         ];
         break;
@@ -747,13 +746,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/graphquickstart",
-            title: "Get Started ",
-            description: "Create, query, and traverse using the Gremlin console",
+            title: t(Keys.splashScreen.learningResources.gremlin.getStarted.title),
+            description: t(Keys.splashScreen.learningResources.gremlin.getStarted.description),
           },
           {
             link: "https://aka.ms/graphimport",
-            title: "Import Graph Data",
-            description: "Learn Bulk ingestion data using BulkExecutor",
+            title: t(Keys.splashScreen.learningResources.gremlin.importData.title),
+            description: t(Keys.splashScreen.learningResources.gremlin.importData.description),
           },
           cdbLiveTv,
         ];
@@ -762,13 +761,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/tabledotnet",
-            title: "Build a .NET App",
-            description: "How to access Azure Cosmos DB for Table from a .NET app.",
+            title: t(Keys.splashScreen.learningResources.tables.dotnet.title),
+            description: t(Keys.splashScreen.learningResources.tables.dotnet.description),
           },
           {
             link: "https://aka.ms/Tablejava",
-            title: "Build a Java App",
-            description: "Create a Azure Cosmos DB for Table app with Java SDK ",
+            title: t(Keys.splashScreen.learningResources.tables.java.title),
+            description: t(Keys.splashScreen.learningResources.tables.java.description),
           },
           cdbLiveTv,
         ];
@@ -807,17 +806,17 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const postgresNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2208312",
-      title: "Data Modeling",
+      title: t(Keys.splashScreen.nextStepItems.postgres.dataModeling),
       description: "",
     },
     {
       link: " https://go.microsoft.com/fwlink/?linkid=2206941 ",
-      title: "How to choose a Distribution Column",
+      title: t(Keys.splashScreen.nextStepItems.postgres.distributionColumn),
       description: "",
     },
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2207425",
-      title: "Build Apps with Python/Java/Django",
+      title: t(Keys.splashScreen.nextStepItems.postgres.buildApps),
       description: "",
     },
   ];
@@ -825,17 +824,17 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://learn.microsoft.com/azure/cosmos-db/mongodb/vcore/migration-options",
-      title: "Migrate Data",
+      title: t(Keys.splashScreen.nextStepItems.vcoreMongo.migrateData),
       description: "",
     },
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/vector-search-ai",
-      title: "Build AI apps with Vector Search",
+      title: t(Keys.splashScreen.nextStepItems.vcoreMongo.vectorSearch),
       description: "",
     },
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/tutorial-nodejs-web-app?tabs=github-codespaces",
-      title: "Build Apps with Nodejs",
+      title: t(Keys.splashScreen.nextStepItems.vcoreMongo.buildApps),
       description: "",
     },
   ];
@@ -863,17 +862,17 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const postgresLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2207226",
-      title: "Performance Tuning",
+      title: t(Keys.splashScreen.learnMoreItems.postgres.performanceTuning),
       description: "",
     },
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2208037",
-      title: "Useful Diagnostic Queries",
+      title: t(Keys.splashScreen.learnMoreItems.postgres.diagnosticQueries),
       description: "",
     },
     {
       link: "https://go.microsoft.com/fwlink/?linkid=2205270",
-      title: "Distributed SQL Reference",
+      title: t(Keys.splashScreen.learnMoreItems.postgres.sqlReference),
       description: "",
     },
   ];
@@ -881,17 +880,17 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/vector-search",
-      title: "Vector Search",
+      title: t(Keys.splashScreen.learnMoreItems.vcoreMongo.vectorSearch),
       description: "",
     },
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/how-to-create-text-index",
-      title: "Text Indexing",
+      title: t(Keys.splashScreen.learnMoreItems.vcoreMongo.textIndexing),
       description: "",
     },
     {
       link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/troubleshoot-common-issues",
-      title: "Troubleshoot common issues",
+      title: t(Keys.splashScreen.learnMoreItems.vcoreMongo.troubleshoot),
       description: "",
     },
   ];
@@ -932,24 +931,25 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             persistentBeak
           >
             <TeachingBubbleContent
-              headline={`Start with sample ${getCollectionName().toLocaleLowerCase()}`}
+              headline={t(Keys.splashScreen.teachingBubble.coachMark.headline, {
+                collectionName: getCollectionName().toLocaleLowerCase(),
+              })}
               hasCloseButton
-              closeButtonAriaLabel="Close"
+              closeButtonAriaLabel={t(Keys.common.close)}
               primaryButtonProps={{
-                text: "Get started",
+                text: t(Keys.common.getStarted),
                 onClick: () => {
                   useCarousel.getState().setShowCoachMark(false);
                   container.onNewCollectionClicked({ isQuickstart: true });
                 },
               }}
               secondaryButtonProps={{
-                text: "Cancel",
+                text: t(Keys.common.cancel),
                 onClick: () => useCarousel.getState().setShowCoachMark(false),
               }}
               onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
             >
-              You will be guided to create a sample container with sample data, then we will give you a tour of data
-              explorer. You can also cancel launching this tour and explore yourself
+              {t(Keys.splashScreen.teachingBubble.coachMark.body)}
             </TeachingBubbleContent>
           </Coachmark>
         )}
@@ -963,7 +963,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
                   fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
                 }}
               >
-                Next steps
+                {t(Keys.splashScreen.sections.nextSteps)}
               </Text>
               {getNextStepItems()}
             </Stack>
@@ -975,7 +975,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
                   fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
                 }}
               >
-                Tips & learn more
+                {t(Keys.splashScreen.sections.tipsAndLearnMore)}
               </Text>
               {getTipsAndLearnMoreItems()}
             </Stack>
@@ -984,15 +984,15 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         ) : (
           <div className={styles.moreStuffContainer}>
             <div className={styles.moreStuffColumn}>
-              <h2 className={styles.columnTitle}>Recents</h2>
+              <h2 className={styles.columnTitle}>{t(Keys.splashScreen.sections.recents)}</h2>
               {getRecentItems()}
             </div>
             <div className={styles.moreStuffColumn}>
-              <h2 className={styles.columnTitle}>Top 3 things you need to know</h2>
+              <h2 className={styles.columnTitle}>{t(Keys.splashScreen.sections.top3)}</h2>
               {top3Items()}
             </div>
             <div className={styles.moreStuffColumn}>
-              <h2 className={styles.columnTitle}>Learning Resources</h2>
+              <h2 className={styles.columnTitle}>{t(Keys.splashScreen.sections.learningResources)}</h2>
               {getLearningResourceItems()}
             </div>
           </div>

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -789,7 +789,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   );
   let partitionKeyProperties = useMemo(() => {
     return partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
-      partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
+      partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, "").replace(/["]+/g, ""),
     );
   }, [partitionKeyPropertyHeaders]);
 
@@ -1470,7 +1470,11 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                 const partitionKey = _partitionKey || (_collection && _collection.partitionKey);
                 const partitionKeyPropertyHeaders = _collection?.partitionKeyPropertyHeaders || partitionKey?.paths;
                 const partitionKeyProperties = partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
-                  partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
+                  partitionKeyPropertyHeader
+                    .replace(/[/]+/g, ".")
+                    .substring(1)
+                    .replace(/[']+/g, "")
+                    .replace(/["]+/g, ""),
                 );
 
                 return newDocumentId(rawDocument, partitionKeyProperties, partitionKeyValue);

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,295 @@
+{
+  "common": {
+    "ok": "OK",
+    "cancel": "Cancel",
+    "close": "Close",
+    "save": "Save",
+    "delete": "Delete",
+    "update": "Update",
+    "discard": "Discard",
+    "execute": "Execute",
+    "loading": "Loading",
+    "loadingEllipsis": "Loading...",
+    "next": "Next",
+    "previous": "Previous",
+    "yes": "Yes",
+    "no": "No",
+    "result": "Result",
+    "learnMore": "Learn more",
+    "getStarted": "Get started",
+    "retry": "Retry",
+    "apply": "Apply",
+    "refresh": "Refresh",
+    "copy": "Copy",
+    "create": "Create",
+    "confirm": "Confirm",
+    "open": "Open",
+    "rename": "Rename",
+    "download": "Download",
+    "upload": "Upload",
+    "connect": "Connect",
+    "remove": "Remove",
+    "increaseValueBy1": "Increase value by 1",
+    "decreaseValueBy1": "Decrease value by 1"
+  },
+  "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."
+    },
+    "quickStart": {
+      "title": "Launch quick start",
+      "description": "Launch a quick start tutorial to get started with sample data"
+    },
+    "newCollection": {
+      "title": "New {{collectionName}}",
+      "description": "Create a new container for storage and throughput"
+    },
+    "samplesGallery": {
+      "title": "Azure Cosmos DB Samples Gallery",
+      "description": "Discover samples that showcase scalable, intelligent app patterns. Try one now to see how fast you can go from concept to code with Cosmos DB"
+    },
+    "connectCard": {
+      "title": "Connect",
+      "description": "Prefer using your own choice of tooling? Find the connection string you need to connect",
+      "pgAdmin": {
+        "title": "Connect with pgAdmin",
+        "description": "Prefer pgAdmin? Find your connection strings here"
+      },
+      "vsCode": {
+        "title": "Connect with VS Code",
+        "description": "Query and Manage your MongoDB and DocumentDB clusters in Visual Studio Code"
+      }
+    },
+    "shell": {
+      "postgres": {
+        "title": "PostgreSQL Shell",
+        "description": "Create table and interact with data using PostgreSQL's shell interface"
+      },
+      "vcoreMongo": {
+        "title": "Mongo Shell",
+        "description": "Create a collection and interact with data using MongoDB's shell interface"
+      }
+    },
+    "teachingBubble": {
+      "newToPostgres": {
+        "headline": "New to Cosmos DB PGSQL?",
+        "body": "Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you can find sample data, query."
+      },
+      "resetPassword": {
+        "headline": "Create your password",
+        "body": "If you haven't changed your password yet, change it now."
+      },
+      "coachMark": {
+        "headline": "Start with sample {{collectionName}}",
+        "body": "You will be guided to create a sample container with sample data, then we will give you a tour of data explorer. You can also cancel launching this tour and explore yourself"
+      }
+    },
+    "sections": {
+      "recents": "Recents",
+      "clearRecents": "Clear Recents",
+      "top3": "Top 3 things you need to know",
+      "learningResources": "Learning Resources",
+      "nextSteps": "Next steps",
+      "tipsAndLearnMore": "Tips & learn more",
+      "notebook": "Notebook",
+      "needHelp": "Need help?"
+    },
+    "top3Items": {
+      "sql": {
+        "advancedModeling": {
+          "title": "Advanced Modeling Patterns",
+          "description": "Learn advanced strategies to optimize your database."
+        },
+        "partitioning": {
+          "title": "Partitioning Best Practices",
+          "description": "Learn to apply data model and partitioning strategies."
+        },
+        "resourcePlanning": {
+          "title": "Plan Your Resource Requirements",
+          "description": "Get to know the different configuration choices."
+        }
+      },
+      "mongo": {
+        "whatIsMongo": {
+          "title": "What is the MongoDB API?",
+          "description": "Understand Azure Cosmos DB for MongoDB and its features."
+        },
+        "features": {
+          "title": "Features and Syntax",
+          "description": "Discover the advantages and features"
+        },
+        "migrate": {
+          "title": "Migrate Your Data",
+          "description": "Pre-migration steps for moving data"
+        }
+      },
+      "cassandra": {
+        "buildJavaApp": {
+          "title": "Build a Java App",
+          "description": "Create a Java app using an SDK."
+        },
+        "partitioning": {
+          "title": "Partitioning Best Practices",
+          "description": "Learn how partitioning works."
+        },
+        "requestUnits": {
+          "title": "Request Units (RUs)",
+          "description": "Understand RU charges."
+        }
+      },
+      "gremlin": {
+        "dataModeling": {
+          "title": "Data Modeling",
+          "description": "Graph data modeling recommendations"
+        },
+        "partitioning": {
+          "title": "Partitioning Best Practices",
+          "description": "Learn how partitioning works"
+        },
+        "queryData": {
+          "title": "Query Data",
+          "description": "Querying data with Gremlin"
+        }
+      },
+      "tables": {
+        "whatIsTable": {
+          "title": "What is the Table API?",
+          "description": "Understand Azure Cosmos DB for Table and its features"
+        },
+        "migrate": {
+          "title": "Migrate your data",
+          "description": "Learn how to migrate your data"
+        },
+        "faq": {
+          "title": "Azure Cosmos DB for Table FAQs",
+          "description": "Common questions about Azure Cosmos DB for Table"
+        }
+      }
+    },
+    "learningResources": {
+      "shortcuts": {
+        "title": "Data Explorer keyboard shortcuts",
+        "description": "Learn keyboard shortcuts to navigate Data Explorer."
+      },
+      "liveTv": {
+        "title": "Learn the Fundamentals",
+        "description": "Watch Azure Cosmos DB Live TV show introductory and how to videos."
+      },
+      "sql": {
+        "sdk": {
+          "title": "Get Started using an SDK",
+          "description": "Learn about the Azure Cosmos DB SDK."
+        },
+        "migrate": {
+          "title": "Migrate Your Data",
+          "description": "Migrate data using Azure services and open-source solutions."
+        }
+      },
+      "mongo": {
+        "nodejs": {
+          "title": "Build an app with Node.js",
+          "description": "Create a Node.js app."
+        },
+        "gettingStarted": {
+          "title": "Getting Started Guide",
+          "description": "Learn the basics to get started."
+        }
+      },
+      "cassandra": {
+        "createContainer": {
+          "title": "Create a Container",
+          "description": "Get to know the create a container options."
+        },
+        "throughput": {
+          "title": "Provision Throughput",
+          "description": "Learn how to configure throughput."
+        }
+      },
+      "gremlin": {
+        "getStarted": {
+          "title": "Get Started ",
+          "description": "Create, query, and traverse using the Gremlin console"
+        },
+        "importData": {
+          "title": "Import Graph Data",
+          "description": "Learn Bulk ingestion data using BulkExecutor"
+        }
+      },
+      "tables": {
+        "dotnet": {
+          "title": "Build a .NET App",
+          "description": "How to access Azure Cosmos DB for Table from a .NET app."
+        },
+        "java": {
+          "title": "Build a Java App",
+          "description": "Create a Azure Cosmos DB for Table app with Java SDK "
+        }
+      }
+    },
+    "nextStepItems": {
+      "postgres": {
+        "dataModeling": "Data Modeling",
+        "distributionColumn": "How to choose a Distribution Column",
+        "buildApps": "Build Apps with Python/Java/Django"
+      },
+      "vcoreMongo": {
+        "migrateData": "Migrate Data",
+        "vectorSearch": "Build AI apps with Vector Search",
+        "buildApps": "Build Apps with Nodejs"
+      }
+    },
+    "learnMoreItems": {
+      "postgres": {
+        "performanceTuning": "Performance Tuning",
+        "diagnosticQueries": "Useful Diagnostic Queries",
+        "sqlReference": "Distributed SQL Reference"
+      },
+      "vcoreMongo": {
+        "vectorSearch": "Vector Search",
+        "textIndexing": "Text Indexing",
+        "troubleshoot": "Troubleshoot common issues"
+      }
+    },
+    "fabric": {
+      "buildTitle": "Build your database",
+      "useTitle": "Use your database",
+      "newContainer": {
+        "title": "New container",
+        "description": "Create a destination container to store your data"
+      },
+      "sampleData": {
+        "title": "Sample Data",
+        "description": "Load sample data in your database"
+      },
+      "sampleVectorData": {
+        "title": "Sample Vector Data",
+        "description": "Load sample vector data with text-embedding-ada-002"
+      },
+      "appDevelopment": {
+        "title": "App development",
+        "description": "Start here to use an SDK to build your apps"
+      },
+      "sampleGallery": {
+        "title": "Sample Gallery",
+        "description": "Get real-world end-to-end samples"
+      }
+    },
+    "sampleDataDialog": {
+      "title": "Sample Data",
+      "startButton": "Start",
+      "createPrompt": "Create a container \"{{containerName}}\" and import sample data into it. This may take a few minutes.",
+      "creatingContainer": "Creating container \"{{containerName}}\"...",
+      "importingData": "Importing data into \"{{containerName}}\"...",
+      "success": "Successfully created \"{{containerName}}\" with sample data.",
+      "errorContainerExists": "The container \"{{containerName}}\" in database \"{{databaseName}}\" already exists. Please delete it and retry.",
+      "errorCreateContainer": "Failed to create container: {{error}}",
+      "errorImportData": "Failed to import data: {{error}}"
+    }
+  }
+}

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/Metrics/ScenarioMonitor.ts

@@ -105,6 +105,23 @@ class ScenarioMonitor {
     });
 
     ctx.timeoutId = window.setTimeout(() => {
+      const missingPhases = ctx.config.requiredPhases.filter((p) => !ctx.completed.has(p));
+
+      this.devLog(
+        `timeout: ${scenario} | missing=[${missingPhases.join(", ")}] | completed=[${Array.from(ctx.completed).join(
+          ", ",
+        )}] | documentHidden=${document.hidden} | hasExpectedFailure=${ctx.hasExpectedFailure}`,
+      );
+
+      traceMark(Action.MetricsScenario, {
+        event: "scenario_timeout",
+        scenario,
+        missingPhases: missingPhases.join(","),
+        completedPhases: Array.from(ctx.completed).join(","),
+        documentHidden: document.hidden,
+        hasExpectedFailure: ctx.hasExpectedFailure,
+      });
+
       // If an expected failure occurred (auth, firewall, etc.), emit healthy instead of unhealthy
       const healthy = ctx.hasExpectedFailure;
       this.emit(ctx, healthy, true);
@@ -288,6 +305,7 @@ class ScenarioMonitor {
       scenario: ctx.scenario,
       healthy,
       timedOut,
+      documentHidden: document.hidden,
       platform,
       api,
       durationMs: finalSnapshot.durationMs,

src/Metrics/useMetricPhases.ts

@@ -1,24 +1,26 @@
 import React from "react";
 import MetricScenario from "./MetricEvents";
-import { useMetricScenario } from "./MetricScenarioProvider";
+import { scenarioMonitor } from "./ScenarioMonitor";
 import { ApplicationMetricPhase, CommonMetricPhase } from "./ScenarioConfig";
 
 /**
  * Hook to automatically complete the Interactive phase when the component becomes interactive.
  * Uses requestAnimationFrame to complete after the browser has painted.
+ *
+ * Calls scenarioMonitor directly (not via React context) so that the effect dependencies
+ * are only [scenario, enabled] — both stable primitives. This prevents re-renders from
+ * cancelling the pending rAF due to an unstable context function reference.
  */
 export function useInteractive(scenario: MetricScenario, enabled = true) {
-  const { completePhase } = useMetricScenario();
-
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
     const id = requestAnimationFrame(() => {
-      completePhase(scenario, CommonMetricPhase.Interactive);
+      scenarioMonitor.completePhase(scenario, CommonMetricPhase.Interactive);
     });
     return () => cancelAnimationFrame(id);
-  }, [scenario, completePhase, enabled]);
+  }, [scenario, enabled]);
 }
 
 /**
@@ -26,18 +28,20 @@ export function useInteractive(scenario: MetricScenario, enabled = true) {
  * Tracks tree rendering and completes Interactive phase.
  * Only completes DatabaseTreeRendered if the database fetch was successful.
  * Note: Scenario must be started before databases are fetched (in refreshExplorer).
+ *
+ * Calls scenarioMonitor directly (not via React context) for the same stability reason
+ * as useInteractive — avoids effect re-runs from unstable context function references.
  */
 export function useDatabaseLoadScenario(databaseTreeNodes: unknown[], fetchSucceeded: boolean) {
-  const { completePhase } = useMetricScenario();
   const hasCompletedTreeRenderRef = React.useRef(false);
 
   // Track DatabaseTreeRendered phase (only if fetch succeeded)
   React.useEffect(() => {
     if (!hasCompletedTreeRenderRef.current && fetchSucceeded) {
       hasCompletedTreeRenderRef.current = true;
-      completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabaseTreeRendered);
+      scenarioMonitor.completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabaseTreeRendered);
     }
-  }, [databaseTreeNodes, fetchSucceeded, completePhase]);
+  }, [databaseTreeNodes, fetchSucceeded]);
 
   // Track Interactive phase
   useInteractive(MetricScenario.DatabaseLoad);

src/Platform/Fabric/FabricUtil.ts

@@ -37,7 +37,7 @@ const requestFabricToken = async (): Promise<void> => {
 
     scheduleRefreshFabricToken();
   } catch (error) {
-    logConsoleError(error as string);
+    logConsoleError(error instanceof Error ? error.message : String(error));
     throw error;
   } finally {
     lastRequestTimestamp = undefined;

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/Utils/QueryUtils.test.ts

@@ -4,7 +4,12 @@ import * as sinon from "sinon";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import * as QueryUtils from "./QueryUtils";
-import { defaultQueryFields, extractPartitionKeyValues, getValueForPath } from "./QueryUtils";
+import {
+  defaultQueryFields,
+  extractPartitionKeyValues,
+  getValueForPath,
+  stripDoubleQuotesFromSegment,
+} from "./QueryUtils";
 
 const documentContent = {
   "Volcano Name": "Adams",
@@ -279,5 +284,97 @@ describe("Query Utils", () => {
       expect(partitionKeyValues.length).toBe(2);
       expect(partitionKeyValues).toEqual([null, {}]);
     });
+
+    it("should extract partition key value when path has enclosing double quotes", () => {
+      const docWithSpecialKey = {
+        id: "test-id",
+        "partition-key": "some-value",
+      };
+
+      const partitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.Hash,
+        paths: ['/"partition-key"'],
+      };
+
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(docWithSpecialKey, partitionKeyDefinition);
+      expect(partitionKeyValues.length).toBe(1);
+      expect(partitionKeyValues[0]).toEqual("some-value");
+    });
+
+    it("should extract nested partition key value when path segments have enclosing double quotes", () => {
+      const docWithSpecialKey = {
+        id: "test-id",
+        "my-field": {
+          "sub-field": 42,
+        },
+      };
+
+      const partitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.Hash,
+        paths: ['/"my-field"/"sub-field"'],
+      };
+
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(docWithSpecialKey, partitionKeyDefinition);
+      expect(partitionKeyValues.length).toBe(1);
+      expect(partitionKeyValues[0]).toEqual(42);
+    });
+
+    it("should return {} for missing double-quoted partition key", () => {
+      const docWithSpecialKey = {
+        id: "test-id",
+      };
+
+      const partitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.Hash,
+        paths: ['/"partition-key"'],
+      };
+
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(docWithSpecialKey, partitionKeyDefinition);
+      expect(partitionKeyValues.length).toBe(1);
+      expect(partitionKeyValues[0]).toEqual({});
+    });
+
+    it("should handle multi-hash with mixed quoted and unquoted paths", () => {
+      const doc = {
+        id: "test-id",
+        Country: "Japan",
+        "partition-key": "hello",
+      };
+
+      const partitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.MultiHash,
+        paths: ["/Country", '/"partition-key"'],
+      };
+
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(doc, partitionKeyDefinition);
+      expect(partitionKeyValues.length).toBe(2);
+      expect(partitionKeyValues).toEqual(["Japan", "hello"]);
+    });
+  });
+
+  describe("stripDoubleQuotesFromSegment", () => {
+    it("should strip enclosing double quotes", () => {
+      expect(stripDoubleQuotesFromSegment('"partition-key"')).toBe("partition-key");
+    });
+
+    it("should not strip if only opening quote", () => {
+      expect(stripDoubleQuotesFromSegment('"partition-key')).toBe('"partition-key');
+    });
+
+    it("should not strip if only closing quote", () => {
+      expect(stripDoubleQuotesFromSegment('partition-key"')).toBe('partition-key"');
+    });
+
+    it("should return empty string when stripping quotes from empty quoted string", () => {
+      expect(stripDoubleQuotesFromSegment('""')).toBe("");
+    });
+
+    it("should not modify unquoted segments", () => {
+      expect(stripDoubleQuotesFromSegment("Country")).toBe("Country");
+    });
+
+    it("should not strip single quotes", () => {
+      expect(stripDoubleQuotesFromSegment("'partition-key'")).toBe("'partition-key'");
+    });
   });
 });

src/Utils/QueryUtils.ts

@@ -116,6 +116,17 @@ export const queryPagesUntilContentPresent = async (
   return await doRequest(firstItemIndex);
 };
 
+/**
+ * Strips enclosing double quotes from a partition key path segment.
+ * e.g., '"partition-key"' -> 'partition-key'
+ */
+export const stripDoubleQuotesFromSegment = (segment: string): string => {
+  if (segment.length >= 2 && segment.charAt(0) === '"' && segment.charAt(segment.length - 1) === '"') {
+    return segment.slice(1, -1);
+  }
+  return segment;
+};
+
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 export const getValueForPath = (content: any, pathSegments: string[]): any => {
   if (pathSegments.length === 0) {
@@ -146,7 +157,7 @@ export const extractPartitionKeyValues = (
   const partitionKeyValues: PartitionKey[] = [];
 
   partitionKeyDefinition.paths.forEach((partitionKeyPath: string) => {
-    const pathSegments: string[] = partitionKeyPath.substring(1).split("/");
+    const pathSegments: string[] = partitionKeyPath.substring(1).split("/").map(stripDoubleQuotesFromSegment);
     const value = getValueForPath(documentContent, pathSegments);
 
     if (value !== undefined) {

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: {

test/cassandra/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/coverage.ts

@@ -0,0 +1,68 @@
+/**
+ * Custom Playwright fixture that collects Istanbul code coverage after each test.
+ *
+ * When the app is built with COVERAGE=1 (which enables babel-plugin-istanbul),
+ * the bundled code exposes `window.__coverage__`. This fixture grabs that object
+ * after every test and writes it to `.nyc_output/` so `nyc report` can merge and
+ * render a coverage report.
+ *
+ * Usage: In spec files, replace
+ *   import { test, expect } from "@playwright/test";
+ * with
+ *   import { test, expect } from "../coverage";   // adjust relative path
+ */
+import { test as base, Browser, expect, Frame, Locator, Page } from "@playwright/test";
+import * as crypto from "crypto";
+import * as fs from "fs";
+import * as path from "path";
+
+const nycOutputDir = path.join(__dirname, "..", ".nyc_output");
+
+/**
+ * Try to pull `window.__coverage__` from every frame in the page.
+ * The app loads inside an iframe in testExplorer.html, so we check
+ * both the main page and all child frames.
+ */
+async function collectCoverage(page: Page): Promise<Record<string, unknown> | null> {
+  // Try main frame first
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cov = await page.evaluate(() => (window as Record<string, any>).__coverage__);
+    if (cov && Object.keys(cov).length > 0) {
+      return cov as Record<string, unknown>;
+    }
+  } catch {
+    // page may have been closed already
+  }
+
+  // Try child frames (the explorer often runs inside an iframe)
+  for (const frame of page.frames()) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const cov = await frame.evaluate(() => (window as Record<string, any>).__coverage__);
+      if (cov && Object.keys(cov).length > 0) {
+        return cov as Record<string, unknown>;
+      }
+    } catch {
+      // frame may be detached
+    }
+  }
+
+  return null;
+}
+
+const test = base.extend({
+  page: async ({ page }, use) => {
+    await use(page);
+
+    const coverage = await collectCoverage(page);
+    if (coverage) {
+      fs.mkdirSync(nycOutputDir, { recursive: true });
+      const id = crypto.randomBytes(8).toString("hex");
+      fs.writeFileSync(path.join(nycOutputDir, `coverage-${id}.json`), JSON.stringify(coverage));
+    }
+  },
+});
+
+export { Browser, expect, Frame, Locator, Page, test };
+export type { Page as PageType };

test/gremlin/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/mongo/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/mongo/document.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { setupCORSBypass } from "../CORSBypass";
 import { CommandBarButton, DataExplorer, DocumentsTab, TestAccount } from "../fx";

test/mongo/pagination.spec.ts

@@ -1,6 +1,6 @@
-import { expect, test } from "@playwright/test";
 import { setupCORSBypass } from "../CORSBypass";
-import { DataExplorer, QueryTab, TestAccount, CommandBarButton, Editor } from "../fx";
+import { expect, test } from "../coverage";
+import { CommandBarButton, DataExplorer, Editor, QueryTab, TestAccount } from "../fx";
 import { serializeMongoToJson } from "../testData";
 
 const databaseId = "test-e2etests-mongo-pagination";

test/sql/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/sql/containercopy/offlineMigration.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
 import { truncateName } from "../../../src/Explorer/ContainerCopy/CopyJobUtils";
+import { expect, Frame, Locator, Page, test } from "../../coverage";
 import {
   ContainerCopy,
   getAccountName,

test/sql/containercopy/onlineMigration.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
+import { expect, Frame, Locator, Page, test } from "../../coverage";
 import {
   ContainerCopy,
   getAccountName,

test/sql/containercopy/permissionsScreen.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { expect, Frame, Locator, Page, test } from "@playwright/test";
 import { set } from "lodash";
+import { expect, Frame, Locator, Page, test } from "../../coverage";
 import { ContainerCopy, getAccountName, TestAccount } from "../../fx";
 
 const VISIBLE_TIMEOUT_MS = 30 * 1000;

test/sql/document.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { existsSync, mkdtempSync, rmdirSync, unlinkSync, writeFileSync } from "fs";
 import { tmpdir } from "os";

test/sql/indexAdvisor.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, type Page } from "@playwright/test";
+import { expect, test, type Page } from "../coverage";
 
 import { CommandBarButton, DataExplorer, TestAccount } from "../fx";
 import { createTestSQLContainer, TestContainerContext } from "../testData";

test/sql/query.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { CommandBarButton, DataExplorer, Editor, QueryTab, TestAccount } from "../fx";
 import { TestContainerContext, TestItem, createTestSQLContainer } from "../testData";

test/sql/resourceToken.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { DataExplorer, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/computedProperties.spec.ts

@@ -1,5 +1,5 @@
-import { expect, Page, test } from "@playwright/test";
 import * as DataModels from "../../../src/Contracts/DataModels";
+import { expect, Page, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/dataMasking.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, type Page } from "@playwright/test";
+import { expect, test, type Page } from "../../coverage";
 import { DataExplorer, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/scale.spec.ts

@@ -1,4 +1,4 @@
-import { Browser, expect, Locator, Page, test } from "@playwright/test";
+import { Browser, expect, Locator, Page, test } from "../../coverage";
 import {
   CommandBarButton,
   DataExplorer,

test/sql/scaleAndSettings/settings.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scaleAndSettings/sharedThroughput.spec.ts

@@ -1,4 +1,4 @@
-import { Locator, expect, test } from "@playwright/test";
+import { Locator, expect, test } from "../../coverage";
 import {
   CommandBarButton,
   DataExplorer,

test/sql/scripts/storedProcedure.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scripts/trigger.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/scripts/userDefinedFunction.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../../coverage";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 

test/sql/selfServeExample.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 import { DataExplorer, TestAccount } from "../fx";
 
 test("Self Serve", async ({ page, browserName }) => {

test/sql/testCases.ts

@@ -249,4 +249,27 @@ export const documentTestCases: DocumentTestCase[] = [
       },
     ],
   },
+  {
+    name: "Single Double-Quoted Partition Key",
+    databaseId: "e2etests-sql-readonly",
+    containerId: "doubleQuotedPartitionKey",
+    documents: [
+      {
+        documentId: "doubleQuotedPartitionKey",
+        partitionKeys: [{ key: "/partition-key", value: "doubleQuotedValue" }],
+      },
+      {
+        documentId: "doubleQuotedPartitionKey_empty_string",
+        partitionKeys: [{ key: "/partition-key", value: "" }],
+      },
+      {
+        documentId: "doubleQuotedPartitionKey_null",
+        partitionKeys: [{ key: "/partition-key", value: null }],
+      },
+      {
+        documentId: "doubleQuotedPartitionKey_missing",
+        partitionKeys: [],
+      },
+    ],
+  },
 ];

test/tables/container.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "../coverage";
 
 import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUniqueName } from "../fx";
 

test/testData.ts

@@ -251,7 +251,14 @@ export const setPartitionKeys = (partitionKeys: PartitionKey[]) => {
   partitionKeys.forEach((partitionKey) => {
     const { key: keyPath, value: keyValue } = partitionKey;
     const cleanPath = keyPath.startsWith("/") ? keyPath.slice(1) : keyPath;
-    const keys = cleanPath.split("/");
+    const keys = cleanPath.split("/").map((segment) => {
+      // Strip enclosing double quotes from partition key path segments
+      // e.g., '"partition-key"' -> 'partition-key'
+      if (segment.length >= 2 && segment.charAt(0) === '"' && segment.charAt(segment.length - 1) === '"') {
+        return segment.slice(1, -1);
+      }
+      return segment;
+    });
     let current = result;
 
     keys.forEach((key, index) => {

utils/generateI18nKeys.mjs

@@ -0,0 +1,71 @@
+/**
+ * Generates src/Localization/Keys.generated.ts from en/Resources.json.
+ *
+ * Every leaf value becomes its dot-notation key path, with JSDoc annotations
+ * showing the English translation so developers see real text on hover.
+ *
+ * Libraries:
+ *   - values-to-keys   — replaces translation values with dot-path keys
+ *   - i18next-resources-for-ts (json2ts) — serialises objects as typed `as const` TS
+ *
+ * Usage:  node utils/generateI18nKeys.mjs
+ */
+
+import { readFileSync, writeFileSync } from "fs";
+import { json2ts } from "i18next-resources-for-ts";
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+import { replace } from "values-to-keys";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, "..");
+const INPUT = resolve(ROOT, "src/Localization/en/Resources.json");
+const OUTPUT = resolve(ROOT, "src/Localization/Keys.generated.ts");
+
+// ── helpers ────────────────────────────────────────────────────────
+
+/**
+ * Walk two parallel objects (keyed + original) and produce TS source
+ * with JSDoc comments showing the English value at every leaf.
+ */
+function serialiseWithJSDoc(obj, orig, indent = 2) {
+  const pad = " ".repeat(indent);
+  const lines = ["{"];
+  for (const key of Object.keys(obj)) {
+    const val = obj[key];
+    const origVal = orig[key];
+    if (typeof val === "object" && val !== null) {
+      lines.push(`${pad}${key}: ${serialiseWithJSDoc(val, origVal, indent + 2)},`);
+    } else {
+      lines.push(`${pad}/** ${origVal} */`);
+      lines.push(`${pad}${key}: ${JSON.stringify(val)},`);
+    }
+  }
+  lines.push(`${" ".repeat(Math.max(0, indent - 2))}}`);
+  return lines.join("\n");
+}
+
+// ── main ───────────────────────────────────────────────────────────
+
+// Keep the original English values for JSDoc annotations
+const original = JSON.parse(readFileSync(INPUT, "utf-8"));
+
+// Use values-to-keys to replace every leaf value with its dot-path key
+const keyed = replace(JSON.parse(readFileSync(INPUT, "utf-8")));
+
+// Use json2ts to verify the shape is valid for `as const` export
+// (We still use our own serialiser because json2ts doesn't add JSDoc comments)
+json2ts(keyed); // validates structure; throws on malformed input
+
+const banner = `\
+// -----------------------------------------------------------------
+// THIS FILE IS AUTO-GENERATED — DO NOT EDIT BY HAND
+// Regenerate with:  npm run generate:i18n-keys
+// -----------------------------------------------------------------
+`;
+
+const body = `export const Keys = ${serialiseWithJSDoc(keyed, original)} as const;\n`;
+
+writeFileSync(OUTPUT, banner + body, "utf-8");
+// eslint-disable-next-line no-console
+console.log(`Generated ${OUTPUT}`);

web.config

@@ -30,7 +30,7 @@
         <clear />
         <add name="X-Xss-Protection" value="1; mode=block" />
         <add name="X-Content-Type-Options" value="nosniff" />
-        <add name="Content-Security-Policy" value="frame-ancestors 'self' portal.azure.com *.portal.azure.com portal.azure.us portal.azure.cn portal.microsoftazure.de df.onecloud.azure-test.net *.fabric.microsoft.com *.powerbi.com *.analysis-df.windows.net dataexplorer-preview.azurewebsites.net" />
+        <add name="Content-Security-Policy" value="frame-ancestors 'self' portal.azure.com *.portal.azure.com portal.azure.us portal.azure.cn portal.microsoftazure.de df.onecloud.azure-test.net *.fabric.microsoft.com *.powerbi.com *.analysis-df.windows.net dataexplorer-preview.azurewebsites.net portal.sovcloud-azure.fr portal.sovcloud-azure.de portal.sovcloud-azure.sg" />
       </customHeaders>
       <redirectHeaders>
         <clear />

webpack.config.js

@@ -64,17 +64,27 @@ const htmlRule = {
   ],
 };
 
-// We compile our own code with ts-loader
+// We compile our own code with ts-loader (or babel-loader with istanbul when COVERAGE=1)
 const typescriptRule = {
   test: /\.tsx?$/,
-  use: [
-    {
-      loader: "ts-loader",
-      options: {
-        transpileOnly: true,
-      },
-    },
-  ],
+  use: process.env.COVERAGE
+    ? [
+        {
+          loader: "babel-loader",
+          options: {
+            presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript"],
+            plugins: [["istanbul", { extension: [".ts", ".tsx"] }]],
+          },
+        },
+      ]
+    : [
+        {
+          loader: "ts-loader",
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
   exclude: /node_modules/,
 };
 
@@ -103,7 +113,10 @@ module.exports = function (_env = {}, argv = {}) {
     envVars.NODE_ENV = "development";
     envVars.AZURE_CLIENT_SECRET = AZURE_CLIENT_SECRET || null;
     envVars.RESOURCE_GROUP = RESOURCE_GROUP;
-    typescriptRule.use[0].options.compilerOptions = { target: "ES2018" };
+    // compilerOptions is a ts-loader option; skip it when using babel-loader for coverage
+    if (!process.env.COVERAGE) {
+      typescriptRule.use[0].options.compilerOptions = { target: "ES2018" };
+    }
   }
 
   const entry = {