Localization first batch (#2408)

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",
+        title: t(Keys.splashScreen.fabric.newContainer.title),
-        description: "Create a destination container to store your data",
+        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",
+        title: t(Keys.splashScreen.fabric.sampleData.title),
-        description: "Load sample data in your database",
+        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",
+        title: t(Keys.splashScreen.fabric.sampleVectorData.title),
-        description: "Load sample vector data with text-embedding-ada-002",
+        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",
+        title: t(Keys.splashScreen.fabric.appDevelopment.title),
-        description: "Start here to use an SDK to build your apps",
+        description: t(Keys.splashScreen.fabric.appDevelopment.description),
         icon: <LinkMultipleRegular />,
         onClick: () => window.open("https://aka.ms/cosmosdbfabricsdk", "_blank"),
       },
       {
-        title: "Sample Gallery",
+        title: t(Keys.splashScreen.fabric.sampleGallery.title),
-        description: "Get real-world end-to-end samples",
+        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

@@ -251,8 +251,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
           <Stack className="splashStackRow" horizontal>
             <SplashScreenButton
               imgSrc={QuickStartIcon}
-              title={"Launch quick start"}
+              title={t(Keys.splashScreen.quickStart.title)}
-              description={"Launch a quick start tutorial to get started with sample data"}
+              description={t(Keys.splashScreen.quickStart.description)}
               onClick={() => {
                 container.onNewCollectionClicked({ isQuickstart: true });
                 traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
@@ -260,8 +260,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             />
             <SplashScreenButton
               imgSrc={ContainersIcon}
-              title={`New ${getCollectionName()}`}
+              title={t(Keys.splashScreen.newCollection.title, { collectionName: getCollectionName() })}
-              description={"Create a new container for storage and throughput"}
+              description={t(Keys.splashScreen.newCollection.description)}
               onClick={() => {
                 container.onNewCollectionClicked();
                 traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
@@ -272,10 +272,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             <SplashScreenButton
               imgSrc={CosmosDBIcon}
               imgSize={35}
-              title={"Azure Cosmos DB Samples Gallery"}
+              title={t(Keys.splashScreen.samplesGallery.title)}
-              description={
+              description={t(Keys.splashScreen.samplesGallery.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"
-              }
               onClick={() => {
                 window.open("https://azurecosmosdb.github.io/gallery/?tags=example", "_blank");
                 traceOpen(Action.LearningResourcesClicked, { apiType: userContext.apiType });
@@ -283,8 +281,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
             />
             <SplashScreenButton
               imgSrc={ConnectIcon}
-              title={"Connect"}
+              title={t(Keys.splashScreen.connectCard.title)}
-              description={"Prefer using your own choice of tooling? Find the connection string you need to connect"}
+              description={t(Keys.splashScreen.connectCard.description)}
               onClick={() => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect)}
             />
           </Stack>
@@ -299,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)}
@@ -311,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
+              {t(Keys.splashScreen.teachingBubble.newToPostgres.body)}
-              sample data, query.
             </TeachingBubble>
           )}
         {/*TODO: convert below to use SplashScreenButton */}
@@ -351,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={() => {
@@ -366,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({
@@ -376,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>
@@ -395,8 +392,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       const launchQuickstartBtn = {
         id: "quickstartDescription",
         iconSrc: QuickStartIcon,
-        title: "Launch quick start",
+        title: t(Keys.splashScreen.quickStart.title),
-        description: "Launch a quick start tutorial to get started with sample data",
+        description: t(Keys.splashScreen.quickStart.description),
         onClick: () => {
           if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
             useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
@@ -418,8 +415,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     if (userContext.apiType === "Postgres") {
       return {
         iconSrc: PowerShellIcon,
-        title: "PostgreSQL Shell",
+        title: t(Keys.splashScreen.shell.postgres.title),
-        description: "Create table and interact with data using PostgreSQL's shell interface",
+        description: t(Keys.splashScreen.shell.postgres.description),
         onClick: () => container.openNotebookTerminal(TerminalKind.Postgres),
       };
     }
@@ -427,16 +424,16 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     if (userContext.apiType === "VCoreMongo") {
       return {
         iconSrc: PowerShellIcon,
-        title: "Mongo Shell",
+        title: t(Keys.splashScreen.shell.vcoreMongo.title),
-        description: "Create a collection and interact with data using MongoDB's shell interface",
+        description: t(Keys.splashScreen.shell.vcoreMongo.description),
         onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo),
       };
     }
 
     return {
       iconSrc: ContainersIcon,
-      title: `New ${getCollectionName()}`,
+      title: t(Keys.splashScreen.newCollection.title, { collectionName: getCollectionName() }),
-      description: "Create a new container for storage and throughput",
+      description: t(Keys.splashScreen.newCollection.description),
       onClick: () => {
         container.onNewCollectionClicked();
         traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
@@ -446,19 +443,19 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
 
   const getThirdCard = (): SplashScreenItem => {
     let icon = ConnectIcon;
-    let title = "Connect";
+    let title = t(Keys.splashScreen.connectCard.title);
-    let description = "Prefer using your own choice of tooling? Find the connection string you need to connect";
+    let description = t(Keys.splashScreen.connectCard.description);
     let onClick = () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect);
 
     if (userContext.apiType === "Postgres") {
-      title = "Connect with pgAdmin";
+      title = t(Keys.splashScreen.connectCard.pgAdmin.title);
-      description = "Prefer pgAdmin? Find your connection strings here";
+      description = t(Keys.splashScreen.connectCard.pgAdmin.description);
     }
 
     if (userContext.apiType === "VCoreMongo") {
       icon = VisualStudioIcon;
-      title = "Connect with VS Code";
+      title = t(Keys.splashScreen.connectCard.vsCode.title);
-      description = "Query and Manage your MongoDB and DocumentDB clusters in Visual Studio Code";
+      description = t(Keys.splashScreen.connectCard.vsCode.description);
       onClick = () => container?.openInVsCode && container.openInVsCode();
     }
 
@@ -487,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);
@@ -526,18 +523,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/msl-modeling-partitioning-2",
-            title: "Advanced Modeling Patterns",
+            title: t(Keys.splashScreen.top3Items.sql.advancedModeling.title),
-            description: "Learn advanced strategies to optimize your database.",
+            description: t(Keys.splashScreen.top3Items.sql.advancedModeling.description),
           },
           {
             link: "https://aka.ms/msl-modeling-partitioning-1",
-            title: "Partitioning Best Practices",
+            title: t(Keys.splashScreen.top3Items.sql.partitioning.title),
-            description: "Learn to apply data model and partitioning strategies.",
+            description: t(Keys.splashScreen.top3Items.sql.partitioning.description),
           },
           {
             link: "https://aka.ms/msl-resource-planning",
-            title: "Plan Your Resource Requirements",
+            title: t(Keys.splashScreen.top3Items.sql.resourcePlanning.title),
-            description: "Get to know the different configuration choices.",
+            description: t(Keys.splashScreen.top3Items.sql.resourcePlanning.description),
           },
         ];
         break;
@@ -545,18 +542,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/mongodbintro",
-            title: "What is the MongoDB API?",
+            title: t(Keys.splashScreen.top3Items.mongo.whatIsMongo.title),
-            description: "Understand Azure Cosmos DB for MongoDB and its features.",
+            description: t(Keys.splashScreen.top3Items.mongo.whatIsMongo.description),
           },
           {
             link: "https://aka.ms/mongodbfeaturesupport",
-            title: "Features and Syntax",
+            title: t(Keys.splashScreen.top3Items.mongo.features.title),
-            description: "Discover the advantages and features",
+            description: t(Keys.splashScreen.top3Items.mongo.features.description),
           },
           {
             link: "https://aka.ms/mongodbpremigration",
-            title: "Migrate Your Data",
+            title: t(Keys.splashScreen.top3Items.mongo.migrate.title),
-            description: "Pre-migration steps for moving data",
+            description: t(Keys.splashScreen.top3Items.mongo.migrate.description),
           },
         ];
         break;
@@ -564,18 +561,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/cassandrajava",
-            title: "Build a Java App",
+            title: t(Keys.splashScreen.top3Items.cassandra.buildJavaApp.title),
-            description: "Create a Java app using an SDK.",
+            description: t(Keys.splashScreen.top3Items.cassandra.buildJavaApp.description),
           },
           {
             link: "https://aka.ms/cassandrapartitioning",
-            title: "Partitioning Best Practices",
+            title: t(Keys.splashScreen.top3Items.cassandra.partitioning.title),
-            description: "Learn how partitioning works.",
+            description: t(Keys.splashScreen.top3Items.cassandra.partitioning.description),
           },
           {
             link: "https://aka.ms/cassandraRu",
-            title: "Request Units (RUs)",
+            title: t(Keys.splashScreen.top3Items.cassandra.requestUnits.title),
-            description: "Understand RU charges.",
+            description: t(Keys.splashScreen.top3Items.cassandra.requestUnits.description),
           },
         ];
         break;
@@ -583,18 +580,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/Graphdatamodeling",
-            title: "Data Modeling",
+            title: t(Keys.splashScreen.top3Items.gremlin.dataModeling.title),
-            description: "Graph data modeling recommendations",
+            description: t(Keys.splashScreen.top3Items.gremlin.dataModeling.description),
           },
           {
             link: "https://aka.ms/graphpartitioning",
-            title: "Partitioning Best Practices",
+            title: t(Keys.splashScreen.top3Items.gremlin.partitioning.title),
-            description: "Learn how partitioning works",
+            description: t(Keys.splashScreen.top3Items.gremlin.partitioning.description),
           },
           {
             link: "https://aka.ms/graphapiquery",
-            title: "Query Data",
+            title: t(Keys.splashScreen.top3Items.gremlin.queryData.title),
-            description: "Querying data with Gremlin",
+            description: t(Keys.splashScreen.top3Items.gremlin.queryData.description),
           },
         ];
         break;
@@ -602,18 +599,18 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         items = [
           {
             link: "https://aka.ms/tableintro",
-            title: "What is the Table API?",
+            title: t(Keys.splashScreen.top3Items.tables.whatIsTable.title),
-            description: "Understand Azure Cosmos DB for Table and its features",
+            description: t(Keys.splashScreen.top3Items.tables.whatIsTable.description),
           },
           {
             link: "https://aka.ms/tableimport",
-            title: "Migrate your data",
+            title: t(Keys.splashScreen.top3Items.tables.migrate.title),
-            description: "Learn how to migrate your data",
+            description: t(Keys.splashScreen.top3Items.tables.migrate.description),
           },
           {
             link: "https://aka.ms/tablefaq",
-            title: "Azure Cosmos DB for Table FAQs",
+            title: t(Keys.splashScreen.top3Items.tables.faq.title),
-            description: "Common questions about Azure Cosmos DB for Table",
+            description: t(Keys.splashScreen.top3Items.tables.faq.description),
           },
         ];
         break;
@@ -670,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>
@@ -685,15 +682,15 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     }
     const cdbLiveTv: item = {
       link: "https://developer.azurecosmosdb.com/tv",
-      title: "Learn the Fundamentals",
+      title: t(Keys.splashScreen.learningResources.liveTv.title),
-      description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
+      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",
+        title: t(Keys.splashScreen.learningResources.shortcuts.title),
-        description: "Learn keyboard shortcuts to navigate Data Explorer.",
+        description: t(Keys.splashScreen.learningResources.shortcuts.description),
       },
     ];
 
@@ -704,14 +701,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/msl-sdk-connect",
-            title: "Get Started using an SDK",
+            title: t(Keys.splashScreen.learningResources.sql.sdk.title),
-            description: "Learn about the Azure Cosmos DB SDK.",
+            description: t(Keys.splashScreen.learningResources.sql.sdk.description),
           },
           cdbLiveTv,
           {
             link: "https://aka.ms/msl-move-data",
-            title: "Migrate Your Data",
+            title: t(Keys.splashScreen.learningResources.sql.migrate.title),
-            description: "Migrate data using Azure services and open-source solutions.",
+            description: t(Keys.splashScreen.learningResources.sql.migrate.description),
           },
         ];
         break;
@@ -719,13 +716,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/mongonodejs",
-            title: "Build an app with Node.js",
+            title: t(Keys.splashScreen.learningResources.mongo.nodejs.title),
-            description: "Create a Node.js app.",
+            description: t(Keys.splashScreen.learningResources.mongo.nodejs.description),
           },
           {
             link: "https://aka.ms/mongopython",
-            title: "Getting Started Guide",
+            title: t(Keys.splashScreen.learningResources.mongo.gettingStarted.title),
-            description: "Learn the basics to get started.",
+            description: t(Keys.splashScreen.learningResources.mongo.gettingStarted.description),
           },
           cdbLiveTv,
         ];
@@ -734,14 +731,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/cassandracontainer",
-            title: "Create a Container",
+            title: t(Keys.splashScreen.learningResources.cassandra.createContainer.title),
-            description: "Get to know the create a container options.",
+            description: t(Keys.splashScreen.learningResources.cassandra.createContainer.description),
           },
           cdbLiveTv,
           {
             link: "https://aka.ms/Cassandrathroughput",
-            title: "Provision Throughput",
+            title: t(Keys.splashScreen.learningResources.cassandra.throughput.title),
-            description: "Learn how to configure throughput.",
+            description: t(Keys.splashScreen.learningResources.cassandra.throughput.description),
           },
         ];
         break;
@@ -749,13 +746,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/graphquickstart",
-            title: "Get Started ",
+            title: t(Keys.splashScreen.learningResources.gremlin.getStarted.title),
-            description: "Create, query, and traverse using the Gremlin console",
+            description: t(Keys.splashScreen.learningResources.gremlin.getStarted.description),
           },
           {
             link: "https://aka.ms/graphimport",
-            title: "Import Graph Data",
+            title: t(Keys.splashScreen.learningResources.gremlin.importData.title),
-            description: "Learn Bulk ingestion data using BulkExecutor",
+            description: t(Keys.splashScreen.learningResources.gremlin.importData.description),
           },
           cdbLiveTv,
         ];
@@ -764,13 +761,13 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
         apiItems = [
           {
             link: "https://aka.ms/tabledotnet",
-            title: "Build a .NET App",
+            title: t(Keys.splashScreen.learningResources.tables.dotnet.title),
-            description: "How to access Azure Cosmos DB for Table from a .NET app.",
+            description: t(Keys.splashScreen.learningResources.tables.dotnet.description),
           },
           {
             link: "https://aka.ms/Tablejava",
-            title: "Build a Java App",
+            title: t(Keys.splashScreen.learningResources.tables.java.title),
-            description: "Create a Azure Cosmos DB for Table app with Java SDK ",
+            description: t(Keys.splashScreen.learningResources.tables.java.description),
           },
           cdbLiveTv,
         ];
@@ -809,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: "",
     },
   ];
@@ -827,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: "",
     },
   ];
@@ -865,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: "",
     },
   ];
@@ -883,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: "",
     },
   ];
@@ -934,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
+              {t(Keys.splashScreen.teachingBubble.coachMark.body)}
-              explorer. You can also cancel launching this tour and explore yourself
             </TeachingBubbleContent>
           </Coachmark>
         )}
@@ -965,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>
@@ -977,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>
@@ -986,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/Localization/en/Resources.json

@@ -1,4 +1,37 @@
 {
+  "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",
@@ -8,6 +41,255 @@
     "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}}"
     }
   }
 }