Text changes for API rebranding (#1330)

* Text changes for API rebranding

* Text changes and bug fixes for API rebranding

* Format updates

src/Common/CollapsedResourceTree.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
 import { NormalizedEventKey } from "./Constants";
 
 export interface CollapsedResourceTreeProps {
@@ -45,7 +45,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
             <span className="collectionCollapsed">
-              <span>{userContext.apiType} API</span>
+              <span>{getApiShortDisplayName()}</span>
             </span>
           </li>
         </ul>

src/Common/ResourceTreeContainer.tsx

@@ -6,6 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
 import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
 import { NormalizedEventKey } from "./Constants";
 
 export interface ResourceTreeContainerProps {
@@ -42,7 +43,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
         {/* Collections Window Title/Command Bar - Start */}
         <div className="collectiontitle">
           <div className="coltitle">
-            <span className="titlepadcol">{userContext.apiType} API</span>
+            <span className="titlepadcol">{getApiShortDisplayName()}</span>
             <div className="float-right">
               <span
                 className="padimgcolrefresh"

src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx

@@ -101,7 +101,7 @@ export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
           onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 4 of 8"
         >
-          Query your data using the filter function. Azure Cosmos DB API for MongoDB provides comprehensive support for
+          Query your data using the filter function. Azure Cosmos DB for MongoDB provides comprehensive support for
           MongoDB query language constructs. You can also use your favorite MongoDB tools and drivers to do so.
         </TeachingBubble>
       );

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -117,7 +117,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           <div className="splashScreenContainer">
             <div className="splashScreen">
               <div className="title">
-                {userContext.apiType === "Postgres" ? "Welcome to Cosmos DB - PostgreSQL" : "Welcome to Cosmos DB"}
+                {userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Azure Cosmos DB"}
                 <FeaturePanelLauncher />
               </div>
               <div className="subtitle">
@@ -348,8 +350,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       title: userContext.apiType === "Postgres" ? "Connect with PG Admin" : "Connect",
       description:
         userContext.apiType === "Postgres"
-          ? "Prefer using your own choice of tooling? Find the connection string you need to connect"
-          : "Prefer PGadmin? Find your connection strings here",
+          ? "Prefer PGadmin? Find your connection strings here"
+          : "Prefer using your own choice of tooling? Find the connection string you need to connect",
       onClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect),
     };
     heroes.push(connectBtn);
@@ -433,7 +435,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           {
             link: "https://aka.ms/mongodbintro",
             title: "What is the MongoDB API?",
-            description: "Understand the Cosmos DB API for MongoDB and its features.",
+            description: "Understand Azure Cosmos DB for MongoDB and its features.",
           },
           {
             link: "https://aka.ms/mongodbfeaturesupport",
@@ -490,7 +492,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           {
             link: "https://aka.ms/tableintro",
             title: "What is the Table API?",
-            description: "Understand the Table API in Cosmos DB and its features",
+            description: "Understand Azure Cosmos DB for Table and its features",
           },
           {
             link: "https://aka.ms/tableimport",
@@ -499,8 +501,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           },
           {
             link: "https://aka.ms/tablefaq",
-            title: "Table API FAQs",
-            description: "Common questions about the Table API",
+            title: "Azure Cosmos DB for Table FAQs",
+            description: "Common questions about Azure Cosmos DB for Table",
           },
         ];
         break;
@@ -637,17 +639,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           {
             link: "https://aka.ms/tabledotnet",
             title: "Build a .NET App",
-            description: "How to access Table API from a .NET app.",
+            description: "How to access Azure Cosmos DB for Table from a .NET app.",
           },
           {
             link: "https://aka.ms/Tablejava",
             title: "Build a Java App",
-            description: "Create a Table API app with Java SDK ",
+            description: "Create a Azure Cosmos DB for Table app with Java SDK ",
           },
           {
             link: "https://aka.ms/tablenodejs",
             title: "Build a Node.js App",
-            description: "Create a Table API app with Node.js SDK",
+            description: "Create a Azure Cosmos DB for Table app with Node.js SDK",
           },
         ];
         break;

src/SelfServe/SelfServeUtils.tsx

@@ -40,23 +40,23 @@ export enum SelfServeType {
  */
 export enum BladeType {
   /**
-   * Keys blade of a SQL API account.
+   * Keys blade of a Azure Cosmos DB for NoSQL account.
    */
   SqlKeys = "keys",
   /**
-   * Keys blade of a Mongo API account.
+   * Keys blade of a Azure Cosmos DB for MongoDB account.
    */
   MongoKeys = "mongoDbKeys",
   /**
-   * Keys blade of a Cassandra API account.
+   * Keys blade of a Azure Cosmos DB for Apache Cassandra account.
    */
   CassandraKeys = "cassandraDbKeys",
   /**
-   * Keys blade of a Gremlin API account.
+   * Keys blade of a Azure Cosmos DB for Apache Gremlin account.
    */
   GremlinKeys = "keys",
   /**
-   * Keys blade of a Table API account.
+   * Keys blade of a Azure Cosmos DB for Table account.
    */
   TableKeys = "tableKeys",
   /**

src/Utils/APITypeUtils.ts

@@ -57,3 +57,20 @@ export const getUploadName = (): string => {
       return "Items";
   }
 };
+
+export const getApiShortDisplayName = (): string => {
+  switch (userContext.apiType) {
+    case "Cassandra":
+      return "Apache Cassandra API";
+    case "Gremlin":
+      return "Apache Gremlin API";
+    case "Mongo":
+      return "MongoDB API";
+    case "Postgres":
+      return "PostgreSQL API";
+    case "SQL":
+      return "NoSQL API";
+    case "Tables":
+      return "Table API";
+  }
+};