Reverting a snapshot change

* Updating SDK to 3.16.3

* Updating package-lock Cosmos DB SDK to 3.16.3

* Updating package-lock's Cosmos DB SDK to 3.16.3

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.10.5",
+    "@azure/cosmos": "3.16.3",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
     "@azure/ms-rest-nodeauth": "3.0.7",
@@ -47,6 +47,7 @@
     "@types/node-fetch": "2.5.7",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
+    "botframework-webchat": "4.14.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "3.0.0",
     "clipboard-copy": "4.0.1",
@@ -191,7 +192,7 @@
     "start": "webpack serve --mode development",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",
-    "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
+    "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod --max_old_space_size=4096 && npm run copyToConsumers",
     "build:ci": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:fast",
     "pack:prod": "webpack  --mode production",
     "pack:fast": "webpack  --mode development --progress",

src/Chatbot/ChatbotClient.ts

@@ -0,0 +1,26 @@
+import { HttpHeaders } from "../Common/Constants";
+import { configContext } from "../ConfigContext";
+import { userContext } from "../UserContext";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+
+export class ChatbotClient {
+  public async getConversationToken(): Promise<{ conversationId: string; token: string; expires_in: number }> {
+    const url = `${configContext.JUNO_ENDPOINT}/api/chatbot/bot${userContext.databaseAccount.id}/conversationToken`;
+    const authorizationHeader = getAuthorizationHeader();
+    const response = await window.fetch(url, {
+      method: "GET",
+      headers: {
+        [HttpHeaders.contentType]: "application/json",
+        [authorizationHeader.header]: authorizationHeader.token,
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(await response.json());
+    }
+
+    const tokenResponse: { conversationId: string; token: string; expires_in: number } = await response.json();
+    return tokenResponse;
+  }
+}

src/Common/Constants.ts

@@ -354,6 +354,10 @@ export enum ContainerStatusType {
   Disconnected = "Disconnected",
 }
 
+export enum PoolIdType {
+  DefaultPoolId = "default",
+}
+
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";

src/Common/CosmosClient.test.ts

@@ -1,4 +1,4 @@
-import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
+import { ResourceType } from "@azure/cosmos";
 import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";

src/Common/CosmosClient.ts

@@ -1,6 +1,4 @@
 import * as Cosmos from "@azure/cosmos";
-import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
-import { CosmosHeaders } from "@azure/cosmos/dist-esm";
 import { configContext, Platform } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
@@ -9,7 +7,7 @@ import { getErrorMessage } from "./ErrorHandlingUtils";
 
 const _global = typeof self === "undefined" ? window : self;
 
-export const tokenProvider = async (requestInfo: RequestInfo) => {
+export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
   if (userContext.features.enableAadDataPlane && userContext.aadToken) {
@@ -20,13 +18,13 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 
   if (configContext.platform === Platform.Emulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
   }
 
   if (userContext.masterKey) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
   }
 
@@ -89,7 +87,7 @@ let _client: Cosmos.CosmosClient;
 export function client(): Cosmos.CosmosClient {
   if (_client) return _client;
 
-  let _defaultHeaders: CosmosHeaders = {};
+  let _defaultHeaders: Cosmos.CosmosHeaders = {};
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
 

src/Common/dataAccess/createCollection.ts

@@ -1,7 +1,4 @@
-import { ContainerResponse, DatabaseResponse } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
-import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { ContainerRequest, ContainerResponse, DatabaseRequest, DatabaseResponse, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
@@ -27,7 +24,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,

src/Common/dataAccess/createDatabase.ts

@@ -1,5 +1,4 @@
-import { DatabaseResponse } from "@azure/cosmos";
-import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { DatabaseRequest, DatabaseResponse } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
@@ -26,7 +25,8 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
     if (userContext.apiType === "Tables") {
       throw new Error("Creating database resources is not allowed for tables accounts");
     }
-    const database: DataModels.Database = await (userContext.authType === AuthType.AAD && !userContext.useSDKOperations
+    const database: DataModels.Database = await (userContext.authType === AuthType.AAD &&
+    !userContext.features.enableSDKoperations
       ? createDatabaseWithARM(params)
       : createDatabaseWithSDK(params));
 

src/Common/dataAccess/createStoredProcedure.ts

@@ -20,7 +20,11 @@ export async function createStoredProcedure(
 ): Promise<StoredProcedureDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       try {
         const getResponse = await getSqlStoredProcedure(
           userContext.subscriptionId,

src/Common/dataAccess/createTrigger.ts

@@ -14,7 +14,11 @@ export async function createTrigger(
 ): Promise<TriggerDefinition | SqlTriggerResource> {
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       try {
         const getResponse = await getSqlTrigger(
           userContext.subscriptionId,

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -20,7 +20,11 @@ export async function createUserDefinedFunction(
 ): Promise<UserDefinedFunctionDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       try {
         const getResponse = await getSqlUserDefinedFunction(
           userContext.subscriptionId,

src/Common/dataAccess/deleteCollection.ts

@@ -12,7 +12,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/deleteDatabase.ts

@@ -12,10 +12,7 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
 
   try {
-    if (userContext.apiType === "Tables") {
-      throw new Error("Deleting database resources is not allowed for tables accounts");
-    }
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteDatabaseWithARM(databaseId);
     } else {
       await client().database(databaseId).delete();

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -12,7 +12,11 @@ export async function deleteStoredProcedure(
 ): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       await deleteSqlStoredProcedure(
         userContext.subscriptionId,
         userContext.resourceGroup,

src/Common/dataAccess/deleteTrigger.ts

@@ -8,7 +8,11 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteTrigger(databaseId: string, collectionId: string, triggerId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       await deleteSqlTrigger(
         userContext.subscriptionId,
         userContext.resourceGroup,

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -8,7 +8,11 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteUserDefinedFunction(databaseId: string, collectionId: string, id: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       await deleteSqlUserDefinedFunction(
         userContext.subscriptionId,
         userContext.resourceGroup,

src/Common/dataAccess/readCollectionOffer.ts

@@ -14,7 +14,11 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr
   const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType !== "Tables"
+    ) {
       return await readCollectionOfferWithARM(params.databaseId, params.collectionId);
     }
 

src/Common/dataAccess/readCollections.ts

@@ -13,7 +13,11 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType !== "Tables"
+    ) {
       return await readCollectionsWithARM(databaseId);
     }
 

src/Common/dataAccess/readDatabaseOffer.ts

@@ -13,7 +13,11 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType !== "Tables"
+    ) {
       return await readDatabaseOfferWithARM(params.databaseId);
     }
 

src/Common/dataAccess/readDatabases.ts

@@ -13,7 +13,11 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType !== "Tables"
+    ) {
       databases = await readDatabasesWithARM();
     } else {
       const sdkResponse = await client().databases.readAll().fetchAll();

src/Common/dataAccess/readOfferWithSDK.ts

@@ -1,6 +1,6 @@
-import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos";
 import { Offer } from "../../Contracts/DataModels";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";
 import { parseSDKOfferResponse } from "../OfferUtility";
 import { readOffers } from "./readOffers";

src/Common/dataAccess/readStoredProcedures.ts

@@ -12,7 +12,11 @@ export async function readStoredProcedures(
 ): Promise<(StoredProcedureDefinition & Resource)[]> {
   const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       const rpResponse = await listSqlStoredProcedures(
         userContext.subscriptionId,
         userContext.resourceGroup,

src/Common/dataAccess/readTriggers.ts

@@ -13,7 +13,11 @@ export async function readTriggers(
 ): Promise<SqlTriggerResource[] | TriggerDefinition[]> {
   const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType === "SQL"
+    ) {
       const rpResponse = await listSqlTriggers(
         userContext.subscriptionId,
         userContext.resourceGroup,

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -11,9 +11,9 @@ export async function readUserDefinedFunctions(
   collectionId: string
 ): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
   const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
-  const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
   try {
-    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
       const rpResponse = await listSqlUserDefinedFunctions(
         subscriptionId,
         resourceGroup,

src/Common/dataAccess/updateCollection.ts

@@ -1,5 +1,4 @@
-import { ContainerDefinition } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { ContainerDefinition, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -34,7 +33,11 @@ export async function updateCollection(
   const clearMessage = logConsoleProgress(`Updating container ${collectionId}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
+    if (
+      userContext.authType === AuthType.AAD &&
+      !userContext.features.enableSDKoperations &&
+      userContext.apiType !== "Tables"
+    ) {
       collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
     } else {
       const sdkResponse = await client()

src/Common/dataAccess/updateOffer.ts

@@ -1,5 +1,4 @@
-import { OfferDefinition } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { OfferDefinition, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -57,7 +56,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
   const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.apiType === "Tables") {

src/Common/dataAccess/updateStoredProcedure.ts

@@ -20,9 +20,9 @@ export async function updateStoredProcedure(
 ): Promise<StoredProcedureDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
   try {
-    const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
+    const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
 
-    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
       const getResponse = await getSqlStoredProcedure(
         subscriptionId,
         resourceGroup,

src/Common/dataAccess/updateTrigger.ts

@@ -13,9 +13,9 @@ export async function updateTrigger(
   trigger: SqlTriggerResource
 ): Promise<SqlTriggerResource | TriggerDefinition> {
   const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
-  const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
   try {
-    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
       const getResponse = await getSqlTrigger(
         subscriptionId,
         resourceGroup,

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -19,9 +19,9 @@ export async function updateUserDefinedFunction(
   userDefinedFunction: UserDefinedFunctionDefinition
 ): Promise<UserDefinedFunctionDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
-  const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
   try {
-    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
       const getResponse = await getSqlUserDefinedFunction(
         subscriptionId,
         resourceGroup,

src/Contracts/DataModels.ts

@@ -7,6 +7,11 @@ export interface DatabaseAccount {
   type: string;
   kind: string;
   properties: DatabaseAccountExtendedProperties;
+  systemData?: DatabaseAccountSystemData;
+}
+
+export interface DatabaseAccountSystemData {
+  createdAt: string;
 }
 
 export interface DatabaseAccountExtendedProperties {
@@ -433,18 +438,25 @@ export interface NotebookWorkspaceConnectionInfo {
 
 export interface ContainerInfo {
   durationLeftInMinutes: number;
-  notebookServerInfo: NotebookWorkspaceConnectionInfo;
+  phoenixServerInfo: NotebookWorkspaceConnectionInfo;
   status: ContainerStatusType;
 }
 
 export interface IProvisionData {
   cosmosEndpoint: string;
+  poolId: string;
 }
 
 export interface IContainerData {
   forwardingId: string;
 }
 
+export interface IDbAccountAllow {
+  status: number;
+  message?: string;
+  type?: string;
+}
+
 export interface IResponse<T> {
   status: number;
   data: T;
@@ -469,8 +481,8 @@ export interface IMaxUsersPerDbAccountExceeded extends IPhoenixError {
 }
 
 export interface IPhoenixConnectionInfoResult {
-  readonly notebookAuthToken?: string;
-  readonly notebookServerUrl?: string;
+  readonly authToken?: string;
+  readonly phoenixServiceUrl?: string;
   readonly forwardingId?: string;
 }
 
@@ -558,4 +570,5 @@ export enum PhoenixErrorType {
   RegionNotServicable = "RegionNotServicable",
   SubscriptionNotAllowed = "SubscriptionNotAllowed",
   UnknownError = "UnknownError",
+  PhoenixFlightFallback = "PhoenixFlightFallback",
 }

src/Explorer/ContextMenuButtonFactory.tsx

@@ -44,7 +44,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
-  if (userContext.apiType !== "Tables") {
+  if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
       onClick: () =>

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,6 +1,7 @@
 /**
  * React component for Command button component.
  */
+import { Icon } from "@fluentui/react";
 import * as React from "react";
 import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 import { KeyCodes } from "../../../Common/Constants";
@@ -259,7 +260,18 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
         >
           <div className={contentClassName}>
-            <img className="commandIcon" src={this.props.iconSrc} alt={this.props.iconAlt} />
+            if (this.props.iconName){" "}
+            {
+              <div>
+                <Icon
+                  styles={{ root: { marginBottom: -3 } }}
+                  className="panelInfoIcon"
+                  iconName={this.props.iconName}
+                  ariaLabel="ChatBot"
+                />
+              </div>
+            }{" "}
+            else {<img className="commandIcon" src={this.props.iconSrc} alt={this.props.iconAlt} />}
             {CommandButtonComponent.renderLabel(this.props)}
           </div>
         </span>

src/Explorer/Controls/SupportPaneComponent/SupportPaneComponent.tsx

@@ -0,0 +1,41 @@
+import { Activity } from "botframework-directlinejs";
+import ReactWebChat, { createDirectLine } from "botframework-webchat";
+import * as React from "react";
+import * as _ from "underscore";
+export interface SupportPaneComponentProps {
+  directLineToken: string;
+  userToken: string;
+  subId: string;
+  rg: string;
+  accName: string;
+}
+
+export class SupportPaneComponent extends React.Component<SupportPaneComponentProps> {
+  private readonly userId: string = _.uniqueId();
+
+  constructor(props: SupportPaneComponentProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const styleOptions = {
+      bubbleBackground: "rgba(0, 0, 255, .1)",
+      bubbleFromUserBackground: "rgba(0, 255, 0, .1)",
+    };
+
+    const directLine = createDirectLine({ token: this.props.directLineToken });
+    const dl = {
+      ...directLine,
+      postActivity: (activity: Activity) => {
+        activity.channelData.token = this.props.userToken;
+        activity.channelData.subId = this.props.subId;
+        activity.channelData.rg = this.props.rg;
+        activity.channelData.accName = this.props.accName;
+
+        return directLine.postActivity(activity);
+      },
+    };
+
+    return <ReactWebChat directLine={dl} userID={this.userId} styleOptions={styleOptions} />;
+  }
+}

src/Explorer/Explorer.tsx

@@ -8,8 +8,9 @@ import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValid
 import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
+import { ChatbotClient } from "../Chatbot/ChatbotClient";
 import * as Constants from "../Common/Constants";
-import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook } from "../Common/Constants";
+import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
@@ -85,6 +86,12 @@ export default class Explorer {
   // Notebooks
   public notebookManager?: NotebookManager;
 
+  public conversationToken: ko.Observable<string>;
+  public userToken: ko.Observable<string>;
+  public subId: ko.Observable<string>;
+  public rg: ko.Observable<string>;
+  public accName: ko.Observable<string>;
+
   private _isInitializingNotebooks: boolean;
   private notebookToImport: {
     name: string;
@@ -93,12 +100,14 @@ export default class Explorer {
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
   private phoenixClient: PhoenixClient;
+  private chatbotClient: ChatbotClient;
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this._isInitializingNotebooks = false;
     this.phoenixClient = new PhoenixClient();
+    this.chatbotClient = new ChatbotClient();
     useNotebook.subscribe(
       () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount
@@ -106,6 +115,8 @@ export default class Explorer {
 
     this.queriesClient = new QueriesClient(this);
 
+    this.conversationToken = ko.observable<string>();
+
     useSelectedNode.subscribe(() => {
       // Make sure switching tabs restores tabs display
       this.isTabsContentExpanded(false);
@@ -357,6 +368,7 @@ export default class Explorer {
     ) {
       const provisionData: IProvisionData = {
         cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+        poolId: PoolIdType.DefaultPoolId,
       };
       const connectionStatus: ContainerConnectionInfo = {
         status: ConnectionStatusType.Connecting,
@@ -369,8 +381,8 @@ export default class Explorer {
         });
         useNotebook.getState().setIsAllocating(true);
         connectionInfo = await this.phoenixClient.allocateContainer(provisionData);
-        if (!connectionInfo?.data?.notebookServerUrl) {
-          throw new Error(`NotebookServerUrl is invalid!`);
+        if (!connectionInfo?.data?.phoenixServiceUrl) {
+          throw new Error(`PhoenixServiceUrl is invalid!`);
         }
         await this.setNotebookInfo(connectionInfo, connectionStatus);
         TelemetryProcessor.traceSuccess(Action.PhoenixConnection, {
@@ -421,8 +433,8 @@ export default class Explorer {
       notebookServerEndpoint:
         (validateEndpoint(userContext.features.notebookServerUrl, allowedNotebookServerUrls) &&
           userContext.features.notebookServerUrl) ||
-        connectionInfo.data.notebookServerUrl,
-      authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
+        connectionInfo.data.phoenixServiceUrl,
+      authToken: userContext.features.notebookServerToken || connectionInfo.data.authToken,
       forwardingId: connectionInfo.data.forwardingId,
     });
     this.notebookManager?.notebookClient
@@ -454,6 +466,22 @@ export default class Explorer {
     useDialog.getState().openDialog(resetConfirmationDialogProps);
   }
 
+  private async generateConversationToken() {
+    if (userContext.databaseAccount === undefined || userContext.databaseAccount.id === undefined) {
+      return;
+    }
+    try {
+      const tokenResponse = await this.chatbotClient.getConversationToken();
+      this.conversationToken(tokenResponse?.token);
+      if (tokenResponse?.expires_in) {
+        setTimeout(() => this.generateConversationToken(), (tokenResponse?.expires_in - 1000) * 1000);
+      }
+    } catch (error) {
+      console.error("Exception while getting conversation token");
+      console.error(error);
+    }
+  }
+
   private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
     if (!databaseAccount) {
       return false;
@@ -497,8 +525,8 @@ export default class Explorer {
       if (connectionInfo?.status !== HttpStatusCodes.OK) {
         throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
       }
-      if (!connectionInfo?.data?.notebookServerUrl) {
-        throw new Error(`Reset Workspace: NotebookServerUrl is invalid!`);
+      if (!connectionInfo?.data?.phoenixServiceUrl) {
+        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
       }
       if (useNotebook.getState().isPhoenixNotebooks) {
         await this.setNotebookInfo(connectionInfo, connectionStatus);
@@ -1269,5 +1297,8 @@ export default class Explorer {
     if (useNotebook.getState().isPhoenixNotebooks) {
       await this.initNotebooks(userContext.databaseAccount);
     }
+    if (userContext.features.enableChatbot) {
+      this.generateConversationToken();
+    }
   }
 }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -26,6 +26,7 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { SupportPaneComponent } from "../../Controls/SupportPaneComponent/SupportPaneComponent";
 import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
 import { OpenFullScreen } from "../../OpenFullScreen";
@@ -195,6 +196,35 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
   const showOpenFullScreen =
     configContext.platform === Platform.Portal && !isRunningOnNationalCloud() && userContext.apiType !== "Gremlin";
 
+  if (userContext.authType === AuthType.AAD && userContext.features.enableChatbot) {
+    const label = "Chat Assistant";
+    const supportPaneButton: CommandButtonComponentProps = {
+      iconName: "ChatBot",
+      iconAlt: label,
+      onCommandClick: () => {
+        useSidePanel
+          .getState()
+          .openSidePanel(
+            "Chat Assistant (Beta)",
+            <SupportPaneComponent
+              directLineToken={container.conversationToken()}
+              userToken={userContext.authorizationToken}
+              subId={userContext.subscriptionId}
+              rg={userContext.resourceGroup}
+              accName={userContext.databaseAccount.name}
+            />
+          );
+      },
+      commandButtonLabel: null,
+      ariaLabel: label,
+      tooltipText: label,
+      hasPopup: true,
+      disabled: false,
+      className: "fonticoncustom",
+    };
+    buttons.push(supportPaneButton);
+  }
+
   if (showOpenFullScreen) {
     const label = "Open Full Screen";
     const fullScreenButton: CommandButtonComponentProps = {

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -41,6 +41,9 @@
         height: 18px;
         width: 18px;
         color: rgb(0, 120, 212);
+} 
+.fonticoncustom {
+  padding-top: 12px;
 } 
   .status {
     position: relative;

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -5,7 +5,7 @@ import { useDialog } from "Explorer/Controls/Dialog";
 import promiseRetry, { AbortError } from "p-retry";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
 import * as Constants from "../../Common/Constants";
-import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook } from "../../Common/Constants";
+import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook, PoolIdType } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
@@ -154,6 +154,7 @@ export class NotebookContainerClient {
       if (useNotebook.getState().isPhoenixNotebooks) {
         const provisionData: IProvisionData = {
           cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+          poolId: PoolIdType.DefaultPoolId,
         };
         return await this.phoenixClient.resetContainer(provisionData);
       }

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzer.tsx

@@ -5,6 +5,7 @@ import Immutable from "immutable";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
+import * as Logger from "../../../Common/Logger";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import loadTransform from "../NotebookComponent/loadTransform";
@@ -100,6 +101,7 @@ export class SchemaAnalyzer extends React.Component<SchemaAnalyzerProps, SchemaA
     // Only in cases where CosmosMongoKernel runs into an error we get a single output
     if (outputs.size === 1) {
       traceFailure(Action.SchemaAnalyzerClickAnalyze, data, this.clickAnalyzeTelemetryStartKey);
+      Logger.logError(`Failed to analyze schema: ${JSON.stringify(data)}`, "SchemaAnalyzer/traceClickAnalyzeComplete");
     } else {
       traceSuccess(Action.SchemaAnalyzerClickAnalyze, data, this.clickAnalyzeTelemetryStartKey);
     }

src/Explorer/Notebook/useNotebook.ts

@@ -4,12 +4,12 @@ import { PhoenixClient } from "Phoenix/PhoenixClient";
 import create, { UseStore } from "zustand";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { ConnectionStatusType } from "../../Common/Constants";
+import { ConnectionStatusType, HttpStatusCodes } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
-import { ContainerConnectionInfo, ContainerInfo } from "../../Contracts/DataModels";
+import { ContainerConnectionInfo, ContainerInfo, PhoenixErrorType } from "../../Contracts/DataModels";
 import { useTabs } from "../../hooks/useTabs";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
@@ -96,7 +96,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   containerStatus: {
     status: undefined,
     durationLeftInMinutes: undefined,
-    notebookServerInfo: undefined,
+    phoenixServerInfo: undefined,
   },
   isPhoenixNotebooks: undefined,
   isPhoenixFeatures: undefined,
@@ -296,22 +296,30 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     useNotebook.getState().setContainerStatus({
       status: undefined,
       durationLeftInMinutes: undefined,
-      notebookServerInfo: undefined,
+      phoenixServerInfo: undefined,
     });
   },
   setIsRefreshed: (isRefreshed: boolean) => set({ isRefreshed }),
   setContainerStatus: (containerStatus: ContainerInfo) => set({ containerStatus }),
   getPhoenixStatus: async () => {
     if (get().isPhoenixNotebooks === undefined || get().isPhoenixFeatures === undefined) {
-      let isPhoenix = false;
-      if (userContext.features.phoenixNotebooks || userContext.features.phoenixFeatures) {
-        const phoenixClient = new PhoenixClient();
-        isPhoenix = isPublicInternetAccessAllowed() && (await phoenixClient.isDbAcountWhitelisted());
+      let isPhoenixNotebooks = false;
+      let isPhoenixFeatures = false;
+
+      const isPublicInternetAllowed = isPublicInternetAccessAllowed();
+      const phoenixClient = new PhoenixClient();
+      const dbAccountAllowedInfo = await phoenixClient.getDbAccountAllowedStatus();
+
+      if (dbAccountAllowedInfo.status === HttpStatusCodes.OK) {
+        if (dbAccountAllowedInfo?.type === PhoenixErrorType.PhoenixFlightFallback) {
+          isPhoenixNotebooks = isPublicInternetAllowed && userContext.features.phoenixNotebooks;
+          isPhoenixFeatures = isPublicInternetAllowed && userContext.features.phoenixFeatures;
+        } else {
+          isPhoenixNotebooks = isPhoenixFeatures = isPublicInternetAllowed;
+        }
+      } else {
+        isPhoenixNotebooks = isPhoenixFeatures = false;
       }
-
-      const isPhoenixNotebooks = userContext.features.phoenixNotebooks && isPhoenix;
-      const isPhoenixFeatures = userContext.features.phoenixFeatures && isPhoenix;
-
       set({ isPhoenixNotebooks: isPhoenixNotebooks });
       set({ isPhoenixFeatures: isPhoenixFeatures });
     }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -1193,6 +1193,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       subscriptionQuotaId: userContext.quotaId,
       dataExplorerArea: Constants.Areas.ContextualPane,
       useIndexingForSharedThroughput: this.state.enableIndexing,
+      isQuickstart: !!this.props.isQuickstart,
     };
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, telemetryData);
 
@@ -1254,6 +1255,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           collection.expandCollection();
           useDatabases.getState().updateDatabase(database);
           useTeachingBubble.getState().setIsSampleDBExpanded(true);
+          TelemetryProcessor.traceOpen(Action.LaunchUITour);
         }
       }
       this.setState({ isExecuting: false });

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -3,33 +3,25 @@
  */
 import { Coachmark, DirectionalHint, Image, Link, Stack, TeachingBubbleContent, Text } from "@fluentui/react";
 import { useCarousel } from "hooks/useCarousel";
-import { useTabs } from "hooks/useTabs";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
-import AddDatabaseIcon from "../../../images/AddDatabase.svg";
-import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
-import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
-import OpenQueryIcon from "../../../images/BrowseQuery.svg";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
 import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import NotebookColorIcon from "../../../images/Notebooks.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
-import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { userContext } from "../../UserContext";
-import { getCollectionName, getDatabaseName } from "../../Utils/APITypeUtils";
+import { getCollectionName } from "../../Utils/APITypeUtils";
 import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
 import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import { useNotebook } from "../Notebook/useNotebook";
-import { AddDatabasePanel } from "../Panes/AddDatabasePanel/AddDatabasePanel";
-import { BrowseQueriesPane } from "../Panes/BrowseQueriesPane/BrowseQueriesPane";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 
@@ -48,8 +40,6 @@ export interface SplashScreenProps {
 }
 
 export class SplashScreen extends React.Component<SplashScreenProps> {
-  private static readonly seeMoreItemTitle: string = "See more Cosmos DB documentation";
-  private static readonly seeMoreItemUrl: string = "https://aka.ms/cosmosdbdocument";
   private static readonly dataModelingUrl = "https://docs.microsoft.com/azure/cosmos-db/modeling-data";
   private static readonly throughputEstimatorUrl = "https://cosmos.azure.com/capacitycalculator";
   private static readonly failoverUrl = "https://docs.microsoft.com/azure/cosmos-db/high-availability";
@@ -201,10 +191,12 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         title: "Launch quick start",
         description: "Launch a quick start tutorial to get started with sample data",
         showLinkIcon: userContext.apiType === "Mongo",
-        onClick: () =>
+        onClick: () => {
           userContext.apiType === "Mongo"
             ? window.open("http://aka.ms/mongodbquickstart", "_blank")
-            : this.container.onNewCollectionClicked({ isQuickstart: true }),
+            : this.container.onNewCollectionClicked({ isQuickstart: true });
+          traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
+        },
       };
       heroes.push(launchQuickstartBtn);
     } else if (useNotebook.getState().isPhoenixNotebooks) {
@@ -221,7 +213,10 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       iconSrc: ContainersIcon,
       title: `New ${getCollectionName()}`,
       description: "Create a new container for storage and throughput",
-      onClick: () => this.container.onNewCollectionClicked(),
+      onClick: () => {
+        this.container.onNewCollectionClicked();
+        traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType });
+      },
     };
     heroes.push(newContainerBtn);
 
@@ -229,103 +224,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       iconSrc: ConnectIcon,
       title: "Connect",
       description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
-      onClick: () => useTabs.getState().openAndActivateConnectTab(),
+      onClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect),
     };
     heroes.push(connectBtn);
 
     return heroes;
   }
 
-  private createCommonTaskItems(): SplashScreenItem[] {
-    const items: SplashScreenItem[] = [];
-
-    if (userContext.authType === AuthType.ResourceToken) {
-      return items;
-    }
-
-    if (!useSelectedNode.getState().isDatabaseNodeOrNoneSelected()) {
-      if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
-        items.push({
-          iconSrc: NewQueryIcon,
-          onClick: () => {
-            const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-            selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, undefined);
-          },
-          title: "New SQL Query",
-          description: undefined,
-        });
-      } else if (userContext.apiType === "Mongo") {
-        items.push({
-          iconSrc: NewQueryIcon,
-          onClick: () => {
-            const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-            selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
-          },
-          title: "New Query",
-          description: undefined,
-        });
-      }
-
-      if (userContext.apiType === "SQL") {
-        items.push({
-          iconSrc: OpenQueryIcon,
-          title: "Open Query",
-          description: undefined,
-          onClick: () =>
-            useSidePanel
-              .getState()
-              .openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this.container} />),
-        });
-      }
-
-      if (userContext.apiType !== "Cassandra") {
-        items.push({
-          iconSrc: NewStoredProcedureIcon,
-          title: "New Stored Procedure",
-          description: undefined,
-          onClick: () => {
-            const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-            selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, undefined);
-          },
-        });
-      }
-
-      /* Scale & Settings */
-      const isShared = useDatabases.getState().findSelectedDatabase()?.isDatabaseShared();
-
-      const label = isShared ? "Settings" : "Scale & Settings";
-      items.push({
-        iconSrc: ScaleAndSettingsIcon,
-        title: label,
-        description: undefined,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-          selectedCollection && selectedCollection.onSettingsClick();
-        },
-      });
-    } else {
-      items.push({
-        iconSrc: AddDatabaseIcon,
-        title: "New " + getDatabaseName(),
-        description: undefined,
-        onClick: async () => {
-          const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-          if (throughputCap && throughputCap !== -1) {
-            await useDatabases.getState().loadAllOffers();
-          }
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "New " + getDatabaseName(),
-              <AddDatabasePanel explorer={this.container} buttonElement={document.activeElement as HTMLElement} />
-            );
-        },
-      });
-    }
-
-    return items;
-  }
-
   private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
       iconSrc: CollectionIcon,
@@ -367,29 +272,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     });
   }
 
-  private createTipsItems(): SplashScreenItem[] {
-    return [
-      {
-        iconSrc: undefined,
-        title: "Data Modeling",
-        description: "Learn more about modeling",
-        onClick: () => window.open(SplashScreen.dataModelingUrl),
-      },
-      {
-        iconSrc: undefined,
-        title: "Cost & Throughput Calculation",
-        description: "Learn more about cost calculation",
-        onClick: () => window.open(SplashScreen.throughputEstimatorUrl),
-      },
-      {
-        iconSrc: undefined,
-        title: "Configure automatic failover",
-        description: "Learn more about Cosmos DB high-availability",
-        onClick: () => window.open(SplashScreen.failoverUrl),
-      },
-    ];
-  }
-
   private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       callback();
@@ -397,29 +279,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     }
   }
 
-  private getCommonTasksItems(): JSX.Element {
-    const commonTaskItems = this.createCommonTaskItems();
-    return (
-      <ul>
-        {commonTaskItems.map((item) => (
-          <li
-            className="focusable"
-            key={`${item.title}${item.description}`}
-            onClick={item.onClick}
-            onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
-            tabIndex={0}
-            role="button"
-          >
-            <img src={item.iconSrc} alt="" />
-            <span className="oneLineContent" title={item.info}>
-              {item.title}
-            </span>
-          </li>
-        ))}
-      </ul>
-    );
-  }
-
   private top3Items(): JSX.Element {
     let items: { link: string; title: string; description: string }[];
     switch (userContext.apiType) {
@@ -524,7 +383,12 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         {items.map((item, i) => (
           <Stack key={`top${i}`} style={{ marginBottom: 26 }}>
             <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
+              <Link
+                onClick={() => traceOpen(Action.Top3ItemsClicked, { item: i + 1, apiType: userContext.apiType })}
+                href={item.link}
+                target="_blank"
+                style={{ marginRight: 5 }}
+              >
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
@@ -665,7 +529,14 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         {items.map((item, i) => (
           <Stack key={`learningResource${i}`} style={{ marginBottom: 26 }}>
             <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
+              <Link
+                onClick={() =>
+                  traceOpen(Action.LearningResourcesClicked, { item: i + 1, apiType: userContext.apiType })
+                }
+                href={item.link}
+                target="_blank"
+                style={{ marginRight: 5 }}
+              >
                 {item.title}
               </Link>
               <Image src={LinkIcon} />
@@ -676,33 +547,4 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       </Stack>
     );
   }
-
-  private getTipItems(): JSX.Element {
-    const tipsItems = this.createTipsItems();
-
-    return (
-      <ul>
-        {tipsItems.map((item) => (
-          <li
-            className="tipContainer focusable"
-            key={`${item.title}${item.description}`}
-            onClick={item.onClick}
-            onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
-            tabIndex={0}
-            role="link"
-          >
-            <div className="title" title={item.info}>
-              {item.title}
-            </div>
-            <div className="description">{item.description}</div>
-          </li>
-        ))}
-        <li>
-          <a role="link" href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
-            {SplashScreen.seeMoreItemTitle}
-          </a>
-        </li>
-      </ul>
-    );
-  }
 }

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -600,56 +600,43 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     metricsMap.forEach((queryMetrics) => {
       if (queryMetrics) {
         aggregatedMetrics.documentLoadTime =
-          queryMetrics.documentLoadTime &&
           this._normalize(queryMetrics.documentLoadTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.documentLoadTime);
+          this._normalize(aggregatedMetrics.documentLoadTime);
         aggregatedMetrics.documentWriteTime =
-          queryMetrics.documentWriteTime &&
           this._normalize(queryMetrics.documentWriteTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.documentWriteTime);
+          this._normalize(aggregatedMetrics.documentWriteTime);
         aggregatedMetrics.indexHitDocumentCount =
-          queryMetrics.indexHitDocumentCount &&
           this._normalize(queryMetrics.indexHitDocumentCount) +
-            this._normalize(aggregatedMetrics.indexHitDocumentCount);
+          this._normalize(aggregatedMetrics.indexHitDocumentCount);
         aggregatedMetrics.outputDocumentCount =
-          queryMetrics.outputDocumentCount &&
           this._normalize(queryMetrics.outputDocumentCount) + this._normalize(aggregatedMetrics.outputDocumentCount);
         aggregatedMetrics.outputDocumentSize =
-          queryMetrics.outputDocumentSize &&
           this._normalize(queryMetrics.outputDocumentSize) + this._normalize(aggregatedMetrics.outputDocumentSize);
         aggregatedMetrics.indexLookupTime =
-          queryMetrics.indexLookupTime &&
           this._normalize(queryMetrics.indexLookupTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.indexLookupTime);
+          this._normalize(aggregatedMetrics.indexLookupTime);
         aggregatedMetrics.retrievedDocumentCount =
-          queryMetrics.retrievedDocumentCount &&
           this._normalize(queryMetrics.retrievedDocumentCount) +
-            this._normalize(aggregatedMetrics.retrievedDocumentCount);
+          this._normalize(aggregatedMetrics.retrievedDocumentCount);
         aggregatedMetrics.retrievedDocumentSize =
-          queryMetrics.retrievedDocumentSize &&
           this._normalize(queryMetrics.retrievedDocumentSize) +
-            this._normalize(aggregatedMetrics.retrievedDocumentSize);
+          this._normalize(aggregatedMetrics.retrievedDocumentSize);
         aggregatedMetrics.vmExecutionTime =
-          queryMetrics.vmExecutionTime &&
           this._normalize(queryMetrics.vmExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.vmExecutionTime);
+          this._normalize(aggregatedMetrics.vmExecutionTime);
         aggregatedMetrics.totalQueryExecutionTime =
-          queryMetrics.totalQueryExecutionTime &&
           this._normalize(queryMetrics.totalQueryExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.totalQueryExecutionTime);
+          this._normalize(aggregatedMetrics.totalQueryExecutionTime);
 
         aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime =
-          aggregatedMetrics.runtimeExecutionTimes &&
           this._normalize(queryMetrics.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
+          this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
         aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime =
-          aggregatedMetrics.runtimeExecutionTimes &&
           this._normalize(queryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
+          this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
         aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime =
-          aggregatedMetrics.runtimeExecutionTimes &&
           this._normalize(queryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
+          this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
       }
     });
 

src/Explorer/Tabs/Tabs.tsx

@@ -1,4 +1,6 @@
 import { CollectionTabKind } from "Contracts/ViewModels";
+import Explorer from "Explorer/Explorer";
+import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
@@ -6,28 +8,33 @@ import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
-import { useTabs } from "../../hooks/useTabs";
+import { ReactTabKind, useTabs } from "../../hooks/useTabs";
 import TabsBase from "./TabsBase";
 
 type Tab = TabsBase | (TabsBase & { render: () => JSX.Element });
 
-export const Tabs = (): JSX.Element => {
-  const { openedTabs, activeTab } = useTabs();
-  const isConnectTabOpen = useTabs((state) => state.isConnectTabOpen);
-  const isConnectTabActive = useTabs((state) => state.isConnectTabActive);
+interface TabsProps {
+  explorer: Explorer;
+}
+
+export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab } = useTabs();
+
   return (
     <div className="tabsManagerContainer">
       <div id="content" className="flexContainer hideOverflows">
         <div className="nav-tabs-margin">
           <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
-            {isConnectTabOpen && <TabNav key="connect" tab={undefined} active={isConnectTabActive} />}
+            {openedReactTabs.map((tab) => (
+              <TabNav key={ReactTabKind[tab]} active={activeReactTab === tab} tabKind={tab} />
+            ))}
             {openedTabs.map((tab) => (
               <TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
             ))}
           </ul>
         </div>
         <div className="tabPanesContainer">
-          {isConnectTabActive && <ConnectTab />}
+          {activeReactTab !== undefined && getReactTabContent(activeReactTab, explorer)}
           {openedTabs.map((tab) => (
             <TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
           ))}
@@ -37,7 +44,7 @@ export const Tabs = (): JSX.Element => {
   );
 };
 
-function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
+function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?: ReactTabKind }) {
   const [hovering, setHovering] = useState(false);
   const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
   const tabId = tab ? tab.tabId : "connect";
@@ -51,8 +58,20 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
     <li
       onMouseOver={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
-      onClick={() => (tab ? tab.onTabClick() : useTabs.getState().activateConnectTab())}
-      onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressActivate(undefined, e) : onKeyPressConnectTab(e))}
+      onClick={() => {
+        if (tab) {
+          tab.onTabClick();
+        } else if (tabKind !== undefined) {
+          useTabs.getState().activateReactTab(tabKind);
+        }
+      }}
+      onKeyPress={({ nativeEvent: e }) => {
+        if (tab) {
+          tab.onKeyPressActivate(undefined, e);
+        } else if (tabKind !== undefined) {
+          onKeyPressReactTab(e, tabKind);
+        }
+      }}
       className={active ? "active tabList" : "tabList"}
       title={useObservable(tab?.tabPath || ko.observable(""))}
       aria-selected={active}
@@ -65,16 +84,18 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
       <span className="tabNavContentContainer">
         <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
           <div className="tab_Content">
-            <span className="statusIconContainer">
+            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
               {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
               {useObservable(tab?.isExecuting || ko.observable(false)) && (
                 <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
               )}
             </span>
-            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable("Connect"))}</span>
-            <span className="tabIconSection">
-              <CloseButton tab={tab} active={active} hovering={hovering} />
-            </span>
+            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
+            {tabKind !== ReactTabKind.Home && (
+              <span className="tabIconSection">
+                <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
+              </span>
+            )}
           </div>
         </a>
       </span>
@@ -82,14 +103,24 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
   );
 }
 
-const CloseButton = ({ tab, active, hovering }: { tab: Tab; active: boolean; hovering: boolean }) => (
+const CloseButton = ({
+  tab,
+  active,
+  hovering,
+  tabKind,
+}: {
+  tab: Tab;
+  active: boolean;
+  hovering: boolean;
+  tabKind?: ReactTabKind;
+}) => (
   <span
     style={{ display: hovering || active ? undefined : "none" }}
     title="Close"
     role="button"
     aria-label="Close Tab"
     className="cancelButton"
-    onClick={() => (tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeConnectTab())}
+    onClick={() => (tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind))}
     tabIndex={active ? 0 : undefined}
     onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
   >
@@ -144,9 +175,20 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
   return <div {...attrs} ref={ref} data-bind="html:html" />;
 }
 
-const onKeyPressConnectTab = (e: KeyboardEvent): void => {
+const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
   if (e.key === "Enter" || e.key === "Space") {
-    useTabs.getState().activateConnectTab();
+    useTabs.getState().activateReactTab(tabKind);
     e.stopPropagation();
   }
 };
+
+const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
+  switch (activeReactTab) {
+    case ReactTabKind.Connect:
+      return <ConnectTab />;
+    case ReactTabKind.Home:
+      return <SplashScreen explorer={explorer} />;
+    default:
+      throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
+  }
+};

src/Explorer/Tutorials/QuickstartCarousel.tsx

@@ -2,6 +2,8 @@ import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } f
 import { useCarousel } from "hooks/useCarousel";
 import React, { useState } from "react";
 import Youtube from "react-youtube";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import Image1 from "../../../images/CarouselImage1.svg";
 import Image2 from "../../../images/CarouselImage2.svg";
@@ -34,7 +36,6 @@ export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
             <DefaultButton text="Previous" style={{ margin: "16px 8px 16px 0" }} onClick={() => setPage(page - 1)} />
           )}
           <PrimaryButton
-            id="carouselNextBtn"
             style={{ margin: "16px 16px 16px 0" }}
             text={page === 3 ? "Finish" : "Next"}
             onClick={() => {
@@ -50,6 +51,10 @@ export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
                 }
                 setPage(page + 1);
               }
+
+              if (page === 3) {
+                traceSuccess(Action.CompleteCarousel);
+              }
             }}
           />
         </Stack>
@@ -74,7 +79,7 @@ const getHeaderText = (page: number): string => {
 const getContent = (page: number): JSX.Element => {
   switch (page) {
     case 1:
-      return <Youtube videoId="Jvgh64rvdXU" />;
+      return <Youtube videoId="Jvgh64rvdXU" onPlay={() => traceSuccess(Action.PlayCarouselVideo)} />;
     case 2:
       return <Image style={{ width: 640 }} src={Image1} />;
     case 3:

src/Explorer/Tutorials/QuickstartTutorial.tsx

@@ -1,11 +1,18 @@
 import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
-import { useTabs } from "hooks/useTabs";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceCancel, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 
 export const QuickstartTutorial: React.FC = (): JSX.Element => {
   const { step, isSampleDBExpanded, isDocumentsTabOpened, sampleCollection, setStep } = useTeachingBubble();
 
+  const onDimissTeachingBubble = (): void => {
+    setStep(0);
+    traceCancel(Action.CancelUITour, { step });
+  };
+
   switch (step) {
     case 1:
       return isSampleDBExpanded ? (
@@ -20,7 +27,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
               setStep(2);
             },
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 1 of 7"
         >
           Start viewing and working with your data by opening Items under Data
@@ -42,7 +49,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
             text: "Previous",
             onClick: () => setStep(1),
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 2 of 7"
         >
           View item here using the items window. Additionally you can also filter items to be reviewed with the filter
@@ -65,7 +72,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
             text: "Previous",
             onClick: () => setStep(2),
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 3 of 7"
         >
           Add new item by copy / pasting JSON; or uploading a JSON
@@ -85,7 +92,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
             text: "Previous",
             onClick: () => setStep(3),
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 4 of 7"
         >
           Query your data using either the filter function or new query.
@@ -105,7 +112,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
             text: "Previous",
             onClick: () => setStep(4),
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 5 of 7"
         >
           Change throughput provisioned to your container according to your needs
@@ -125,7 +132,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
             text: "Previous",
             onClick: () => setStep(5),
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 6 of 7"
         >
           Visualize your data, store queries in an interactive document
@@ -139,13 +146,16 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
           hasCloseButton
           primaryButtonProps={{
             text: "Launch connect",
-            onClick: () => useTabs.getState().openAndActivateConnectTab(),
+            onClick: () => {
+              traceSuccess(Action.CompleteUITour);
+              useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect);
+            },
           }}
           secondaryButtonProps={{
             text: "Previous",
             onClick: () => setStep(6),
           }}
-          onDismiss={() => setStep(0)}
+          onDismiss={() => onDimissTeachingBubble()}
           footerContent="Step 7 of 7"
         >
           <Stack>

src/GalleryViewer/GalleryViewer.tsx

@@ -2,6 +2,7 @@ import { initializeIcons, Link, Text } from "@fluentui/react";
 import "bootstrap/dist/css/bootstrap.css";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { userContext } from "UserContext";
 import { initializeConfiguration } from "../ConfigContext";
 import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
 import {
@@ -25,7 +26,9 @@ const onInit = async () => {
 
   const props: GalleryAndNotebookViewerComponentProps = {
     junoClient: new JunoClient(),
-    selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
+    selectedTab:
+      galleryViewerProps.selectedTab ||
+      (userContext.features.publicGallery ? GalleryTab.PublicGallery : GalleryTab.OfficialSamples),
     sortBy: galleryViewerProps.sortBy || SortBy.MostRecent,
     searchText: galleryViewerProps.searchText,
   };

src/Localization/en/MaterializedViewsBuilder.json

@@ -0,0 +1,48 @@
+{
+    "MaterializedViewsBuilderDescription": "Provision a Materializedviews builder cluster for your Azure Cosmos DB account. Materializedviews builder is compute in your account that performs read operations on source collection for any updates and applies them on materialized views as per the materializedview definition.",
+    "MaterializedViewsBuilder": "Materializedviews Builder",
+    "Provisioned": "Provisioned",
+    "Deprovisioned": "Deprovisioned",
+    "LearnAboutMaterializedViews": "Learn more about materializedviews.",
+    "DeprovisioningDetailsText": "Learn more about materializedviews.",
+    "MaterializedviewsBuilderPricing": "Learn more about materializedviews pricing.",
+    "SKUs": "SKUs",
+    "SKUsPlaceHolder": "Select SKUs",
+    "NumberOfInstances": "Number of instances",
+	"CosmosD2s": "Cosmos.D2s (General Purpose Cosmos Compute with 2 vCPUs, 8 GB Memory)",
+    "CosmosD4s": "Cosmos.D4s (General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory)",
+    "CosmosD8s": "Cosmos.D8s (General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory)",
+    "CosmosD16s": "Cosmos.D16s (General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory)",
+    "CosmosD32s": "Cosmos.D32s (General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory)",
+    "CreateMessage": "MaterializedViewsBuilder resource is being created.",
+    "CreateInitializeTitle": "Provisioning resource",
+    "CreateInitializeMessage": "Materializedviews Builder resource will be provisioned.",
+    "CreateSuccessTitle": "Resource provisioned",
+    "CreateSuccesseMessage": "Materializedviews Builder resource provisioned.",
+    "CreateFailureTitle": "Failed to provision resource",
+    "CreateFailureMessage": "Materializedviews Builder resource provisioning failed.",
+    "UpdateMessage": "MaterializedViewsBuilder resource is being updated.",
+    "UpdateInitializeTitle": "Updating resource",
+    "UpdateInitializeMessage": "Materializedviews Builder resource will be updated.",
+    "UpdateSuccessTitle": "Resource updated",
+    "UpdateSuccesseMessage": "Materializedviews Builder resource updated.",
+    "UpdateFailureTitle": "Failed to update resource",
+    "UpdateFailureMessage": "Materializedviews Builder resource updation failed.",
+    "DeleteMessage": "MaterializedViewsBuilder resource is being deleted.",
+    "DeleteInitializeTitle": "Deleting resource",
+    "DeleteInitializeMessage": "Materializedviews Builder resource will be deleted.",
+    "DeleteSuccessTitle": "Resource deleted",
+    "DeleteSuccesseMessage": "Materializedviews Builder resource deleted.",
+    "DeleteFailureTitle": "Failed to delete resource",
+    "DeleteFailureMessage": "Materializedviews Builder resource deletion failed.",
+    "ApproximateCost": "Approximate Cost Per Hour",
+    "CostText": "Hourly cost of the Materializedviews Builder resource depends on the SKU selection, number of instances per region, and number of regions.",
+    "MetricsString": "Metrics",
+    "MetricsText": "Monitor the CPU and memory usage for the Materializedviews Builder instances in ",
+    "MetricsBlade": "the metrics blade.",
+    "MonitorUsage": "Monitor Usage",
+    "ResizingDecisionText": "To understand if the Materializedviews Builder is the right size, ",
+    "ResizingDecisionLink": "learn more about Materializedviews Builder sizing.",
+    "WarningBannerOnUpdate": "Adding or modifying Materializedviews Builder instances may affect your bill.",
+    "WarningBannerOnDelete": "After deprovisioning the Materializedviews Builder, your materializedviews will not be updated with new source changes anymore. Materializedviews builder is compute in your account that performs read operations on source collection for any updates and applies them on materialized views as per the materializedview definition."
+}

src/Main.tsx

@@ -46,12 +46,10 @@ import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
 import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import "./Explorer/Panes/PanelComponent.less";
 import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
-import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import { Tabs } from "./Explorer/Tabs/Tabs";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
-import { useTabs } from "./hooks/useTabs";
 import "./Libs/jquery";
 import "./Shared/appInsights";
 
@@ -59,8 +57,6 @@ initializeIcons();
 
 const App: React.FunctionComponent = () => {
   const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
-  const openedTabs = useTabs((state) => state.openedTabs);
-  const isConnectTabOpen = useTabs((state) => state.isConnectTabOpen);
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
 
   const config = useConfig();
@@ -104,9 +100,7 @@ const App: React.FunctionComponent = () => {
               {/* Collections Tree Collapsed - End */}
             </div>
           </div>
-          {/* Collections Tree - End */}
-          {openedTabs.length === 0 && !isConnectTabOpen && <SplashScreen explorer={explorer} />}
-          <Tabs />
+          <Tabs explorer={explorer} />
         </div>
         {/* Collections Tree and Tabs - End */}
         <div

src/Phoenix/PhoenixClient.ts

@@ -17,6 +17,7 @@ import {
   ContainerConnectionInfo,
   ContainerInfo,
   IContainerData,
+  IDbAccountAllow,
   IMaxAllocationTimeExceeded,
   IMaxDbAccountsPerUserExceeded,
   IMaxUsersPerDbAccountExceeded,
@@ -103,7 +104,7 @@ export class PhoenixClient {
           const containerStatus = await response.json();
           return {
             durationLeftInMinutes: containerStatus?.durationLeftInMinutes,
-            notebookServerInfo: containerStatus?.notebookServerInfo,
+            phoenixServerInfo: containerStatus?.phoenixServerInfo,
             status: ContainerStatusType.Active,
           };
         } else if (response.status === HttpStatusCodes.NotFound) {
@@ -147,7 +148,7 @@ export class PhoenixClient {
       useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
       return {
         durationLeftInMinutes: undefined,
-        notebookServerInfo: undefined,
+        phoenixServerInfo: undefined,
         status: ContainerStatusType.Disconnected,
       };
     }
@@ -161,15 +162,17 @@ export class PhoenixClient {
     }
   }
 
-  public async isDbAcountWhitelisted(): Promise<boolean> {
+  public async getDbAccountAllowedStatus(): Promise<IDbAccountAllow> {
     const startKey = TelemetryProcessor.traceStart(Action.PhoenixDBAccountAllowed, {
       dataExplorerArea: Areas.Notebook,
     });
+    let responseJson;
     try {
       const response = await window.fetch(`${this.getPhoenixControlPlanePathPrefix()}`, {
         method: "GET",
         headers: PhoenixClient.getHeaders(),
       });
+      responseJson = await response?.json();
       if (response.status !== HttpStatusCodes.OK) {
         throw new Error(`Received status code: ${response?.status}`);
       }
@@ -180,7 +183,11 @@ export class PhoenixClient {
         },
         startKey
       );
-      return response.status === HttpStatusCodes.OK;
+      return {
+        status: response.status,
+        message: responseJson?.message,
+        type: responseJson?.type,
+      };
     } catch (error) {
       TelemetryProcessor.traceFailure(
         Action.PhoenixDBAccountAllowed,
@@ -192,7 +199,11 @@ export class PhoenixClient {
         startKey
       );
       Logger.logError(getErrorMessage(error), "PhoenixClient/IsDbAcountWhitelisted");
-      return false;
+      return {
+        status: HttpStatusCodes.Forbidden,
+        message: responseJson?.message,
+        type: responseJson?.type,
+      };
     }
   }
 

src/Platform/Hosted/extractFeatures.ts

@@ -29,6 +29,7 @@ export type Features = {
   readonly mongoProxyEndpoint?: string;
   readonly mongoProxyAPIs?: string;
   readonly enableThroughputCap: boolean;
+  readonly enableChatbot?: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -90,6 +91,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
     notebooksDownBanner: "true" === get("notebooksDownBanner"),
     enableThroughputCap: "true" === get("enablethroughputcap"),
+    enableChatbot: "true" === get("enablechatbot"),
   };
 }
 

src/SelfServe/MaterializedViewsBuilder/MaterializedViewsBuilder.rp.ts

@@ -0,0 +1,228 @@
+import { configContext } from "../../ConfigContext";
+import { userContext } from "../../UserContext";
+import { armRequestWithoutPolling } from "../../Utils/arm/request";
+import { selfServeTraceFailure, selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
+import { RefreshResult } from "../SelfServeTypes";
+import MaterializedViewsBuilder from "./MaterializedViewsBuilder";
+import {
+  FetchPricesResponse,
+  PriceMapAndCurrencyCode,
+  RegionsResponse,
+  MaterializedViewsBuilderServiceResource,
+  UpdateMaterializedViewsBuilderRequestParameters,
+} from "./MaterializedViewsBuilderTypes";
+
+const apiVersion = "2021-07-01-preview";
+
+export enum ResourceStatus {
+  Running = "Running",
+  Creating = "Creating",
+  Updating = "Updating",
+  Deleting = "Deleting",
+}
+
+export interface MaterializedViewsBuilderResponse {
+  sku: string;
+  instances: number;
+  status: string;
+  endpoint: string;
+}
+
+export const getPath = (subscriptionId: string, resourceGroup: string, name: string): string => {
+  return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}/services/materializedviewsBuilder`;
+};
+
+export const updateMaterializedViewsBuilderResource = async (sku: string, instances: number): Promise<string> => {
+  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
+  const body: UpdateMaterializedViewsBuilderRequestParameters = {
+    properties: {
+      instanceSize: sku,
+      instanceCount: instances,
+      serviceType: "materializedviewsBuilder",
+    },
+  };
+  const telemetryData = { ...body, httpMethod: "PUT", selfServeClassName: MaterializedViewsBuilder.name };
+  const updateTimeStamp = selfServeTraceStart(telemetryData);
+  let armRequestResult;
+  try {
+    armRequestResult = await armRequestWithoutPolling({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "PUT",
+      apiVersion,
+      body,
+    });
+    selfServeTraceSuccess(telemetryData, updateTimeStamp);
+  } catch (e) {
+    const failureTelemetry = { ...body, e, selfServeClassName: MaterializedViewsBuilder.name };
+    selfServeTraceFailure(failureTelemetry, updateTimeStamp);
+    throw e;
+  }
+  return armRequestResult?.operationStatusUrl;
+};
+
+export const deleteMaterializedViewsBuilderResource = async (): Promise<string> => {
+  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
+  const telemetryData = { httpMethod: "DELETE", selfServeClassName: MaterializedViewsBuilder.name };
+  const deleteTimeStamp = selfServeTraceStart(telemetryData);
+  let armRequestResult;
+  try {
+    armRequestResult = await armRequestWithoutPolling({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "DELETE",
+      apiVersion,
+    });
+    selfServeTraceSuccess(telemetryData, deleteTimeStamp);
+  } catch (e) {
+    const failureTelemetry = { e, selfServeClassName: MaterializedViewsBuilder.name };
+    selfServeTraceFailure(failureTelemetry, deleteTimeStamp);
+    throw e;
+  }
+  return armRequestResult?.operationStatusUrl;
+};
+
+export const getMaterializedViewsBuilderResource = async (): Promise<MaterializedViewsBuilderServiceResource> => {
+  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
+  const telemetryData = { httpMethod: "GET", selfServeClassName: MaterializedViewsBuilder.name };
+  const getResourceTimeStamp = selfServeTraceStart(telemetryData);
+  let armRequestResult;
+  try {
+    armRequestResult = await armRequestWithoutPolling<MaterializedViewsBuilderServiceResource>({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "GET",
+      apiVersion,
+    });
+    selfServeTraceSuccess(telemetryData, getResourceTimeStamp);
+  } catch (e) {
+    const failureTelemetry = { e, selfServeClassName: MaterializedViewsBuilder.name };
+    selfServeTraceFailure(failureTelemetry, getResourceTimeStamp);
+    throw e;
+  }
+  return armRequestResult?.result;
+};
+
+export const getCurrentProvisioningState = async (): Promise<MaterializedViewsBuilderResponse> => {
+  try {
+    const response = await getMaterializedViewsBuilderResource();
+    return {
+      sku: response.properties.instanceSize,
+      instances: response.properties.instanceCount,
+      status: response.properties.status,
+      endpoint: response.properties.MaterializedViewsBuilderEndPoint,
+    };
+  } catch (e) {
+    return { sku: undefined, instances: undefined, status: undefined, endpoint: undefined };
+  }
+};
+
+export const refreshMaterializedViewsBuilderProvisioning = async (): Promise<RefreshResult> => {
+  try {
+    const response = await getMaterializedViewsBuilderResource();
+    if (response.properties.status === ResourceStatus.Running.toString()) {
+      return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
+    } else if (response.properties.status === ResourceStatus.Creating.toString()) {
+      return { isUpdateInProgress: true, updateInProgressMessageTKey: "CreateMessage" };
+    } else if (response.properties.status === ResourceStatus.Deleting.toString()) {
+      return { isUpdateInProgress: true, updateInProgressMessageTKey: "DeleteMessage" };
+    } else {
+      return { isUpdateInProgress: true, updateInProgressMessageTKey: "UpdateMessage" };
+    }
+  } catch {
+    //TODO differentiate between different failures
+    return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
+  }
+};
+
+const getGeneralPath = (subscriptionId: string, resourceGroup: string, name: string): string => {
+  return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}`;
+};
+
+export const getRegions = async (): Promise<Array<string>> => {
+  const telemetryData = {
+    feature: "Calculate approximate cost",
+    function: "getRegions",
+    description: "",
+    selfServeClassName: MaterializedViewsBuilder.name,
+  };
+  const getRegionsTimestamp = selfServeTraceStart(telemetryData);
+
+  try {
+    const regions = new Array<string>();
+
+    const response = await armRequestWithoutPolling<RegionsResponse>({
+      host: configContext.ARM_ENDPOINT,
+      path: getGeneralPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name),
+      method: "GET",
+      apiVersion: "2021-07-01-preview",
+    });
+
+    if (response.result.location !== undefined) {
+      regions.push(response.result.location.split(" ").join("").toLowerCase());
+    } else {
+      for (const location of response.result.locations) {
+        regions.push(location.locationName.split(" ").join("").toLowerCase());
+      }
+    }
+
+    selfServeTraceSuccess(telemetryData, getRegionsTimestamp);
+    return regions;
+  } catch (err) {
+    const failureTelemetry = { err, selfServeClassName: MaterializedViewsBuilder.name };
+    selfServeTraceFailure(failureTelemetry, getRegionsTimestamp);
+    return new Array<string>();
+  }
+};
+
+const getFetchPricesPathForRegion = (subscriptionId: string): string => {
+  return `/subscriptions/${subscriptionId}/providers/Microsoft.CostManagement/fetchPrices`;
+};
+
+export const getPriceMapAndCurrencyCode = async (regions: Array<string>): Promise<PriceMapAndCurrencyCode> => {
+  const telemetryData = {
+    feature: "Calculate approximate cost",
+    function: "getPriceMapAndCurrencyCode",
+    description: "fetch prices API call",
+    selfServeClassName: MaterializedViewsBuilder.name,
+  };
+  const getPriceMapAndCurrencyCodeTimestamp = selfServeTraceStart(telemetryData);
+
+  try {
+    const priceMap = new Map<string, Map<string, number>>();
+    let currencyCode;
+    for (const region of regions) {
+      const regionPriceMap = new Map<string, number>();
+
+      const response = await armRequestWithoutPolling<FetchPricesResponse>({
+        host: configContext.ARM_ENDPOINT,
+        path: getFetchPricesPathForRegion(userContext.subscriptionId),
+        method: "POST",
+        apiVersion: "2020-01-01-preview",
+        queryParams: {
+          filter:
+            "armRegionName eq '" +
+            region +
+            "' and serviceFamily eq 'Databases' and productName eq 'Azure Cosmos DB MaterializedViews Builder - General Purpose'",
+        },
+      });
+
+      for (const item of response.result.Items) {
+        if (currencyCode === undefined) {
+          currencyCode = item.currencyCode;
+        } else if (item.currencyCode !== currencyCode) {
+          throw Error("Currency Code Mismatch: Currency code not same for all regions / skus.");
+        }
+        regionPriceMap.set(item.skuName, item.retailPrice);
+      }
+      priceMap.set(region, regionPriceMap);
+    }
+
+    selfServeTraceSuccess(telemetryData, getPriceMapAndCurrencyCodeTimestamp);
+    return { priceMap: priceMap, currencyCode: currencyCode };
+  } catch (err) {
+    const failureTelemetry = { err, selfServeClassName: MaterializedViewsBuilder.name };
+    selfServeTraceFailure(failureTelemetry, getPriceMapAndCurrencyCodeTimestamp);
+    return { priceMap: undefined, currencyCode: undefined };
+  }
+};

src/SelfServe/MaterializedViewsBuilder/MaterializedViewsBuilder.tsx

@@ -0,0 +1,416 @@
+import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
+import {
+  selfServeTrace,
+  selfServeTraceFailure,
+  selfServeTraceStart,
+  selfServeTraceSuccess,
+} from "../SelfServeTelemetryProcessor";
+import {
+  ChoiceItem,
+  Description,
+  DescriptionType,
+  Info,
+  InputType,
+  NumberUiType,
+  OnSaveResult,
+  RefreshResult,
+  SelfServeBaseClass,
+  SmartUiInput,
+} from "../SelfServeTypes";
+import { BladeType, generateBladeLink } from "../SelfServeUtils";
+import {
+  deleteMaterializedViewsBuilderResource,
+  getCurrentProvisioningState,
+  getPriceMapAndCurrencyCode,
+  getRegions,
+  refreshMaterializedViewsBuilderProvisioning,
+  updateMaterializedViewsBuilderResource,
+} from "./MaterializedViewsBuilder.rp";
+
+const costPerHourDefaultValue: Description = {
+  textTKey: "CostText",
+  type: DescriptionType.Text,
+  link: {
+    href: "https://aka.ms/cosmos-db-materializedviewsbuilder-pricing",
+    textTKey: "MaterializedviewsBuilderPricing",
+  },
+};
+
+const metricsStringValue: Description = {
+  textTKey: "MetricsText",
+  type: DescriptionType.Text,
+  link: {
+    href: generateBladeLink(BladeType.Metrics),
+    textTKey: "MetricsBlade",
+  },
+};
+
+const CosmosD2s = "Cosmos.D2s";
+const CosmosD4s = "Cosmos.D4s";
+const CosmosD8s = "Cosmos.D8s";
+const CosmosD16s = "Cosmos.D16s";
+
+const onSKUChange = (newValue: InputType, currentValues: Map<string, SmartUiInput>): Map<string, SmartUiInput> => {
+  currentValues.set("sku", { value: newValue });
+  currentValues.set("costPerHour", {
+    value: calculateCost(newValue as string, currentValues.get("instances").value as number),
+  });
+
+  return currentValues;
+};
+
+const onNumberOfInstancesChange = (
+  newValue: InputType,
+  currentValues: Map<string, SmartUiInput>,
+  baselineValues: Map<string, SmartUiInput>
+): Map<string, SmartUiInput> => {
+  currentValues.set("instances", { value: newValue });
+  const MaterializedViewsBuilderOriginallyEnabled = baselineValues.get("enableMaterializedViewsBuilder")
+    ?.value as boolean;
+  const baselineInstances = baselineValues.get("instances")?.value as number;
+  if (!MaterializedViewsBuilderOriginallyEnabled || baselineInstances !== newValue) {
+    currentValues.set("warningBanner", {
+      value: {
+        textTKey: "WarningBannerOnUpdate",
+        link: {
+          href: "https://aka.ms/cosmos-db-materializedviewsbuilder-pricing",
+          textTKey: "MaterializedviewsBuilderPricing",
+        },
+      } as Description,
+      hidden: false,
+    });
+  } else {
+    currentValues.set("warningBanner", undefined);
+  }
+
+  currentValues.set("costPerHour", {
+    value: calculateCost(currentValues.get("sku").value as string, newValue as number),
+  });
+
+  return currentValues;
+};
+
+const onEnableMaterializedViewsBuilderChange = (
+  newValue: InputType,
+  currentValues: Map<string, SmartUiInput>,
+  baselineValues: ReadonlyMap<string, SmartUiInput>
+): Map<string, SmartUiInput> => {
+  currentValues.set("enableMaterializedViewsBuilder", { value: newValue });
+  const MaterializedViewsBuilderOriginallyEnabled = baselineValues.get("enableMaterializedViewsBuilder")
+    ?.value as boolean;
+  if (MaterializedViewsBuilderOriginallyEnabled === newValue) {
+    currentValues.set("sku", baselineValues.get("sku"));
+    currentValues.set("instances", baselineValues.get("instances"));
+    currentValues.set("costPerHour", baselineValues.get("costPerHour"));
+    currentValues.set("warningBanner", baselineValues.get("warningBanner"));
+    currentValues.set("metricsString", baselineValues.get("metricsString"));
+    return currentValues;
+  }
+
+  currentValues.set("warningBanner", undefined);
+  if (newValue === true) {
+    currentValues.set("warningBanner", {
+      value: {
+        textTKey: "WarningBannerOnUpdate",
+        link: {
+          href: "https://aka.ms/cosmos-db-materializedviewsbuilder-pricing",
+          textTKey: "MaterializedviewsBuilderPricing",
+        },
+      } as Description,
+      hidden: false,
+    });
+
+    currentValues.set("costPerHour", {
+      value: calculateCost(baselineValues.get("sku").value as string, baselineValues.get("instances").value as number),
+      hidden: false,
+    });
+  } else {
+    currentValues.set("warningBanner", {
+      value: {
+        textTKey: "WarningBannerOnDelete",
+        link: {
+          href: "https://aka.ms/cosmos-db-materializedviews",
+          textTKey: "DeprovisioningDetailsText",
+        },
+      } as Description,
+      hidden: false,
+    });
+
+    currentValues.set("costPerHour", { value: costPerHourDefaultValue, hidden: true });
+  }
+  const sku = currentValues.get("sku");
+  const instances = currentValues.get("instances");
+  const hideAttributes = newValue === undefined || !(newValue as boolean);
+  currentValues.set("sku", {
+    value: sku.value,
+    hidden: hideAttributes,
+    disabled: MaterializedViewsBuilderOriginallyEnabled,
+  });
+  currentValues.set("instances", {
+    value: instances.value,
+    hidden: hideAttributes,
+    disabled: MaterializedViewsBuilderOriginallyEnabled,
+  });
+
+  currentValues.set("metricsString", {
+    value: metricsStringValue,
+    hidden: !newValue || !MaterializedViewsBuilderOriginallyEnabled,
+  });
+
+  return currentValues;
+};
+
+const skuDropDownItems: ChoiceItem[] = [
+  { labelTKey: "CosmosD2s", key: CosmosD2s },
+  { labelTKey: "CosmosD4s", key: CosmosD4s },
+  { labelTKey: "CosmosD8s", key: CosmosD8s },
+  { labelTKey: "CosmosD16s", key: CosmosD16s },
+];
+
+const getSkus = async (): Promise<ChoiceItem[]> => {
+  return skuDropDownItems;
+};
+
+const getInstancesMin = async (): Promise<number> => {
+  return 1;
+};
+
+const getInstancesMax = async (): Promise<number> => {
+  return 5;
+};
+
+const NumberOfInstancesDropdownInfo: Info = {
+  messageTKey: "ResizingDecisionText",
+  link: {
+    href: "https://aka.ms/cosmos-db-materializedviewsbuilder-size",
+    textTKey: "ResizingDecisionLink",
+  },
+};
+
+const ApproximateCostDropDownInfo: Info = {
+  messageTKey: "CostText",
+  link: {
+    href: "https://aka.ms/cosmos-db-materializedviewsbuilder-pricing",
+    textTKey: "MaterializedviewsBuilderPricing",
+  },
+};
+
+let priceMap: Map<string, Map<string, number>>;
+let currencyCode: string;
+let regions: Array<string>;
+
+const calculateCost = (skuName: string, instanceCount: number): Description => {
+  const telemetryData = {
+    feature: "Calculate approximate cost",
+    function: "calculateCost",
+    description: "performs final calculation",
+    selfServeClassName: MaterializedViewsBuilder.name,
+  };
+  const calculateCostTimestamp = selfServeTraceStart(telemetryData);
+
+  try {
+    let costPerHour = 0;
+    for (const region of regions) {
+      const incrementalCost = priceMap.get(region).get(skuName.replace("Cosmos.", ""));
+      if (incrementalCost === undefined) {
+        throw new Error("Value not found in map.");
+      }
+      costPerHour += incrementalCost;
+    }
+
+    if (costPerHour === 0) {
+      throw new Error("Cost per hour = 0");
+    }
+
+    costPerHour *= instanceCount;
+    costPerHour = Math.round(costPerHour * 100) / 100;
+
+    selfServeTraceSuccess(telemetryData, calculateCostTimestamp);
+    return {
+      textTKey: `${costPerHour} ${currencyCode}`,
+      type: DescriptionType.Text,
+    };
+  } catch (err) {
+    const failureTelemetry = { err, regions, priceMap, selfServeClassName: MaterializedViewsBuilder.name };
+    selfServeTraceFailure(failureTelemetry, calculateCostTimestamp);
+
+    return costPerHourDefaultValue;
+  }
+};
+
+@IsDisplayable()
+@RefreshOptions({ retryIntervalInMs: 20000 })
+export default class MaterializedViewsBuilder extends SelfServeBaseClass {
+  public onRefresh = async (): Promise<RefreshResult> => {
+    return await refreshMaterializedViewsBuilderProvisioning();
+  };
+
+  public onSave = async (
+    currentValues: Map<string, SmartUiInput>,
+    baselineValues: Map<string, SmartUiInput>
+  ): Promise<OnSaveResult> => {
+    selfServeTrace({ selfServeClassName: MaterializedViewsBuilder.name });
+
+    const MaterializedViewsBuilderCurrentlyEnabled = currentValues.get("enableMaterializedViewsBuilder")
+      ?.value as boolean;
+    const MaterializedViewsBuilderOriginallyEnabled = baselineValues.get("enableMaterializedViewsBuilder")
+      ?.value as boolean;
+
+    currentValues.set("warningBanner", undefined);
+
+    if (MaterializedViewsBuilderOriginallyEnabled) {
+      if (!MaterializedViewsBuilderCurrentlyEnabled) {
+        const operationStatusUrl = await deleteMaterializedViewsBuilderResource();
+        return {
+          operationStatusUrl: operationStatusUrl,
+          portalNotification: {
+            initialize: {
+              titleTKey: "DeleteInitializeTitle",
+              messageTKey: "DeleteInitializeMessage",
+            },
+            success: {
+              titleTKey: "DeleteSuccessTitle",
+              messageTKey: "DeleteSuccesseMessage",
+            },
+            failure: {
+              titleTKey: "DeleteFailureTitle",
+              messageTKey: "DeleteFailureMessage",
+            },
+          },
+        };
+      } else {
+        const sku = currentValues.get("sku")?.value as string;
+        const instances = currentValues.get("instances").value as number;
+        const operationStatusUrl = await updateMaterializedViewsBuilderResource(sku, instances);
+        return {
+          operationStatusUrl: operationStatusUrl,
+          portalNotification: {
+            initialize: {
+              titleTKey: "UpdateInitializeTitle",
+              messageTKey: "UpdateInitializeMessage",
+            },
+            success: {
+              titleTKey: "UpdateSuccessTitle",
+              messageTKey: "UpdateSuccesseMessage",
+            },
+            failure: {
+              titleTKey: "UpdateFailureTitle",
+              messageTKey: "UpdateFailureMessage",
+            },
+          },
+        };
+      }
+    } else {
+      const sku = currentValues.get("sku")?.value as string;
+      const instances = currentValues.get("instances").value as number;
+      const operationStatusUrl = await updateMaterializedViewsBuilderResource(sku, instances);
+      return {
+        operationStatusUrl: operationStatusUrl,
+        portalNotification: {
+          initialize: {
+            titleTKey: "CreateInitializeTitle",
+            messageTKey: "CreateInitializeMessage",
+          },
+          success: {
+            titleTKey: "CreateSuccessTitle",
+            messageTKey: "CreateSuccesseMessage",
+          },
+          failure: {
+            titleTKey: "CreateFailureTitle",
+            messageTKey: "CreateFailureMessage",
+          },
+        },
+      };
+    }
+  };
+
+  public initialize = async (): Promise<Map<string, SmartUiInput>> => {
+    // Based on the RP call enableMaterializedViewsBuilder will be true if it has not yet been enabled and false if it has.
+    const defaults = new Map<string, SmartUiInput>();
+    defaults.set("enableMaterializedViewsBuilder", { value: false });
+    defaults.set("sku", { value: CosmosD2s, hidden: true });
+    defaults.set("instances", { value: await getInstancesMin(), hidden: true });
+    defaults.set("costPerHour", undefined);
+    defaults.set("metricsString", {
+      value: undefined,
+      hidden: true,
+    });
+
+    regions = await getRegions();
+    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(regions);
+    priceMap = priceMapAndCurrencyCode.priceMap;
+    currencyCode = priceMapAndCurrencyCode.currencyCode;
+
+    const response = await getCurrentProvisioningState();
+    if (response.status && response.status !== "Deleting") {
+      defaults.set("enableMaterializedViewsBuilder", { value: true });
+      defaults.set("sku", { value: response.sku, disabled: true });
+      defaults.set("instances", { value: response.instances, disabled: false });
+      defaults.set("costPerHour", { value: calculateCost(response.sku, response.instances) });
+
+      defaults.set("metricsString", {
+        value: metricsStringValue,
+        hidden: false,
+      });
+    }
+    defaults.set("warningBanner", undefined);
+    return defaults;
+  };
+
+  @Values({
+    isDynamicDescription: true,
+  })
+  warningBanner: string;
+
+  @Values({
+    description: {
+      textTKey: "MaterializedViewsBuilderDescription",
+      type: DescriptionType.Text,
+      link: {
+        href: "https://aka.ms/cosmos-db-materializedviews",
+        textTKey: "LearnAboutMaterializedViews",
+      },
+    },
+  })
+  description: string;
+
+  @OnChange(onEnableMaterializedViewsBuilderChange)
+  @Values({
+    labelTKey: "MaterializedViewsBuilder",
+    trueLabelTKey: "Provisioned",
+    falseLabelTKey: "Deprovisioned",
+  })
+  enableMaterializedViewsBuilder: boolean;
+
+  @OnChange(onSKUChange)
+  @Values({
+    labelTKey: "SKUs",
+    choices: getSkus,
+    placeholderTKey: "SKUsPlaceHolder",
+  })
+  sku: ChoiceItem;
+
+  @OnChange(onNumberOfInstancesChange)
+  @PropertyInfo(NumberOfInstancesDropdownInfo)
+  @Values({
+    labelTKey: "NumberOfInstances",
+    min: getInstancesMin,
+    max: getInstancesMax,
+    step: 1,
+    uiType: NumberUiType.Spinner,
+  })
+  instances: number;
+
+  @PropertyInfo(ApproximateCostDropDownInfo)
+  @Values({
+    labelTKey: "ApproximateCost",
+    isDynamicDescription: true,
+  })
+  costPerHour: string;
+
+  @Values({
+    labelTKey: "MonitorUsage",
+    description: metricsStringValue,
+  })
+  metricsString: string;
+}

src/SelfServe/MaterializedViewsBuilder/MaterializedViewsBuilderTypes.ts

@@ -0,0 +1,57 @@
+export type MaterializedViewsBuilderServiceResource = {
+  id: string;
+  name: string;
+  type: string;
+  properties: MaterializedViewsBuilderServiceProps;
+  locations: MaterializedViewsBuilderServiceLocations;
+};
+export type MaterializedViewsBuilderServiceProps = {
+  serviceType: string;
+  creationTime: string;
+  status: string;
+  instanceSize: string;
+  instanceCount: number;
+  MaterializedViewsBuilderEndPoint: string;
+};
+
+export type MaterializedViewsBuilderServiceLocations = {
+  location: string;
+  status: string;
+  MaterializedViewsBuilderEndpoint: string;
+};
+
+export type UpdateMaterializedViewsBuilderRequestParameters = {
+  properties: UpdateMaterializedViewsBuilderRequestProperties;
+};
+
+export type UpdateMaterializedViewsBuilderRequestProperties = {
+  instanceSize: string;
+  instanceCount: number;
+  serviceType: string;
+};
+
+export type FetchPricesResponse = {
+  Items: Array<PriceItem>;
+  NextPageLink: string | undefined;
+  Count: number;
+};
+
+export type PriceMapAndCurrencyCode = {
+  priceMap: Map<string, Map<string, number>>;
+  currencyCode: string;
+};
+
+export type PriceItem = {
+  retailPrice: number;
+  skuName: string;
+  currencyCode: string;
+};
+
+export type RegionsResponse = {
+  locations: Array<RegionItem>;
+  location: string;
+};
+
+export type RegionItem = {
+  locationName: string;
+};

src/SelfServe/SelfServe.tsx

@@ -58,6 +58,14 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
       await loadTranslations(graphAPICompute.constructor.name);
       return graphAPICompute.toSelfServeDescriptor();
     }
+    case SelfServeType.materializedviewsbuilder: {
+      const MaterializedViewsBuilder = await import(
+        /* webpackChunkName: "MaterializedViewsBuilder" */ "./MaterializedViewsBuilder/MaterializedViewsBuilder"
+      );
+      const materializedViewsBuilder = new MaterializedViewsBuilder.default();
+      await loadTranslations(materializedViewsBuilder.constructor.name);
+      return materializedViewsBuilder.toSelfServeDescriptor();
+    }
     default:
       return undefined;
   }

src/SelfServe/SelfServeUtils.tsx

@@ -32,6 +32,7 @@ export enum SelfServeType {
   example = "example",
   sqlx = "sqlx",
   graphapicompute = "graphapicompute",
+  materializedviewsbuilder = "materializedviewsbuilder",
 }
 
 /**

src/SelfServe/SqlX/SqlX.rp.ts

@@ -7,6 +7,7 @@ import SqlX from "./SqlX";
 import {
   FetchPricesResponse,
   PriceMapAndCurrencyCode,
+  RegionItem,
   RegionsResponse,
   SqlxServiceResource,
   UpdateDedicatedGatewayRequestParameters,
@@ -139,7 +140,7 @@ const getGeneralPath = (subscriptionId: string, resourceGroup: string, name: str
   return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}`;
 };
 
-export const getRegions = async (): Promise<Array<string>> => {
+export const getRegions = async (): Promise<Array<RegionItem>> => {
   const telemetryData = {
     feature: "Calculate approximate cost",
     function: "getRegions",
@@ -149,8 +150,6 @@ export const getRegions = async (): Promise<Array<string>> => {
   const getRegionsTimestamp = selfServeTraceStart(telemetryData);
 
   try {
-    const regions = new Array<string>();
-
     const response = await armRequestWithoutPolling<RegionsResponse>({
       host: configContext.ARM_ENDPOINT,
       path: getGeneralPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name),
@@ -158,20 +157,12 @@ export const getRegions = async (): Promise<Array<string>> => {
       apiVersion: "2021-04-01-preview",
     });
 
-    if (response.result.location !== undefined) {
-      regions.push(response.result.location.split(" ").join("").toLowerCase());
-    } else {
-      for (const location of response.result.locations) {
-        regions.push(location.locationName.split(" ").join("").toLowerCase());
-      }
-    }
-
     selfServeTraceSuccess(telemetryData, getRegionsTimestamp);
-    return regions;
+    return response.result.properties.locations;
   } catch (err) {
     const failureTelemetry = { err, selfServeClassName: SqlX.name };
     selfServeTraceFailure(failureTelemetry, getRegionsTimestamp);
-    return new Array<string>();
+    return new Array<RegionItem>();
   }
 };
 
@@ -179,7 +170,7 @@ const getFetchPricesPathForRegion = (subscriptionId: string): string => {
   return `/subscriptions/${subscriptionId}/providers/Microsoft.CostManagement/fetchPrices`;
 };
 
-export const getPriceMapAndCurrencyCode = async (regions: Array<string>): Promise<PriceMapAndCurrencyCode> => {
+export const getPriceMapAndCurrencyCode = async (regions: Array<RegionItem>): Promise<PriceMapAndCurrencyCode> => {
   const telemetryData = {
     feature: "Calculate approximate cost",
     function: "getPriceMapAndCurrencyCode",
@@ -191,7 +182,7 @@ export const getPriceMapAndCurrencyCode = async (regions: Array<string>): Promis
   try {
     const priceMap = new Map<string, Map<string, number>>();
     let currencyCode;
-    for (const region of regions) {
+    for (const regionItem of regions) {
       const regionPriceMap = new Map<string, number>();
 
       const response = await armRequestWithoutPolling<FetchPricesResponse>({
@@ -202,7 +193,7 @@ export const getPriceMapAndCurrencyCode = async (regions: Array<string>): Promis
         queryParams: {
           filter:
             "armRegionName eq '" +
-            region +
+            regionItem.locationName.split(" ").join("").toLowerCase() +
             "' and serviceFamily eq 'Databases' and productName eq 'Azure Cosmos DB Dedicated Gateway - General Purpose'",
         },
       });
@@ -215,7 +206,7 @@ export const getPriceMapAndCurrencyCode = async (regions: Array<string>): Promis
         }
         regionPriceMap.set(item.skuName, item.retailPrice);
       }
-      priceMap.set(region, regionPriceMap);
+      priceMap.set(regionItem.locationName, regionPriceMap);
     }
 
     selfServeTraceSuccess(telemetryData, getPriceMapAndCurrencyCodeTimestamp);

src/SelfServe/SqlX/SqlX.tsx

@@ -1,3 +1,4 @@
+import { RegionItem } from "SelfServe/SqlX/SqlxTypes";
 import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
 import {
   selfServeTrace,
@@ -208,7 +209,7 @@ const ApproximateCostDropDownInfo: Info = {
 
 let priceMap: Map<string, Map<string, number>>;
 let currencyCode: string;
-let regions: Array<string>;
+let regions: Array<RegionItem>;
 
 const calculateCost = (skuName: string, instanceCount: number): Description => {
   const telemetryData = {
@@ -221,27 +222,47 @@ const calculateCost = (skuName: string, instanceCount: number): Description => {
 
   try {
     let costPerHour = 0;
-    for (const region of regions) {
-      const incrementalCost = priceMap.get(region).get(skuName.replace("Cosmos.", ""));
+    let costBreakdown = "";
+    for (const regionItem of regions) {
+      const incrementalCost = priceMap.get(regionItem.locationName).get(skuName.replace("Cosmos.", ""));
       if (incrementalCost === undefined) {
-        throw new Error("Value not found in map.");
+        throw new Error(`${regionItem.locationName} not found in price map.`);
+      } else if (incrementalCost === 0) {
+        throw new Error(`${regionItem.locationName} cost per hour = 0`);
       }
-      costPerHour += incrementalCost;
+
+      let regionalInstanceCount = instanceCount;
+      if (regionItem.isZoneRedundant) {
+        regionalInstanceCount = Math.ceil(instanceCount * 1.5);
+      }
+
+      const regionalCostPerHour = incrementalCost * regionalInstanceCount;
+      costBreakdown += `
+      ${regionItem.locationName} ${regionItem.isZoneRedundant ? "(AZ)" : ""}
+      ${regionalCostPerHour} ${currencyCode} (${regionalInstanceCount} instances * ${incrementalCost} ${currencyCode})\
+      `;
+
+      if (regionalCostPerHour === 0) {
+        throw new Error(`${regionItem.locationName} Cost per hour = 0`);
+      }
+
+      costPerHour += regionalCostPerHour;
     }
 
     if (costPerHour === 0) {
       throw new Error("Cost per hour = 0");
     }
 
-    costPerHour *= instanceCount;
     costPerHour = Math.round(costPerHour * 100) / 100;
 
     selfServeTraceSuccess(telemetryData, calculateCostTimestamp);
     return {
-      textTKey: `${costPerHour} ${currencyCode}`,
+      textTKey: `${costPerHour} ${currencyCode}
+      ${costBreakdown}`,
       type: DescriptionType.Text,
     };
   } catch (err) {
+    alert(err);
     const failureTelemetry = { err, regions, priceMap, selfServeClassName: SqlX.name };
     selfServeTraceFailure(failureTelemetry, calculateCostTimestamp);
 

src/SelfServe/SqlX/SqlxTypes.ts

@@ -48,10 +48,14 @@ export type PriceItem = {
 };
 
 export type RegionsResponse = {
+  properties: RegionsProperties;
+};
+
+export type RegionsProperties = {
   locations: Array<RegionItem>;
-  location: string;
 };
 
 export type RegionItem = {
   locationName: string;
+  isZoneRedundant: boolean;
 };

src/Shared/Telemetry/TelemetryConstants.ts

@@ -121,6 +121,16 @@ export enum Action {
   ExpandAddCollectionPaneAdvancedSection,
   SchemaAnalyzerClickAnalyze,
   SelfServeComponent,
+  LaunchQuickstart,
+  NewContainerHomepage,
+  Top3ItemsClicked,
+  LearningResourcesClicked,
+  PlayCarouselVideo,
+  OpenCarousel,
+  CompleteCarousel,
+  LaunchUITour,
+  CancelUITour,
+  CompleteUITour,
 }
 
 export const ActionModifiers = {

src/UserContext.ts

@@ -1,4 +1,6 @@
 import { useCarousel } from "hooks/useCarousel";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import { SubscriptionType } from "./Contracts/SubscriptionType";
@@ -34,7 +36,6 @@ interface UserContext {
   readonly accessToken?: string;
   readonly authorizationToken?: string;
   readonly resourceToken?: string;
-  readonly useSDKOperations: boolean;
   readonly subscriptionType?: SubscriptionType;
   readonly quotaId?: string;
   // API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
@@ -56,8 +57,9 @@ interface UserContext {
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
 export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
 
+const ONE_WEEK_IN_MS = 604800000;
+
 const features = extractFeatures();
-const { enableSDKoperations: useSDKOperations } = features;
 
 const userContext: UserContext = {
   apiType: "SQL",
@@ -65,18 +67,38 @@ const userContext: UserContext = {
   isTryCosmosDBSubscription: false,
   portalEnv: "prod",
   features,
-  useSDKOperations,
   addCollectionFlight: CollectionCreation.DefaultAddCollectionDefaultFlight,
   subscriptionType: CollectionCreation.DefaultSubscriptionType,
   collectionCreationDefaults: CollectionCreationDefaults,
 };
 
+function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {
+  let createdAtMs: number = Date.parse(createdAt);
+  if (isNaN(createdAtMs)) {
+    createdAtMs = 0;
+  }
+
+  const nowMs: number = Date.now();
+  const millisecsSinceAccountCreation = nowMs - createdAtMs;
+  return threshold > millisecsSinceAccountCreation;
+}
+
 function updateUserContext(newContext: Partial<UserContext>): void {
   if (newContext.databaseAccount) {
     newContext.apiType = apiType(newContext.databaseAccount);
-    if (!localStorage.getItem(newContext.databaseAccount.id)) {
+
+    const isNewAccount = isAccountNewerThanThresholdInMs(
+      newContext.databaseAccount?.systemData?.createdAt || "",
+      ONE_WEEK_IN_MS
+    );
+
+    if (
+      !localStorage.getItem(newContext.databaseAccount.id) &&
+      (userContext.isTryCosmosDBSubscription || isNewAccount)
+    ) {
       useCarousel.getState().setShouldOpen(true);
       localStorage.setItem(newContext.databaseAccount.id, "true");
+      traceOpen(Action.OpenCarousel);
     }
   }
   Object.assign(userContext, newContext);

src/hooks/useKnockoutExplorer.ts

@@ -352,6 +352,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     hasWriteAccess: inputs.hasWriteAccess ?? true,
     addCollectionFlight: inputs.addCollectionDefaultFlight || CollectionCreation.DefaultAddCollectionDefaultFlight,
     collectionCreationDefaults: inputs.defaultCollectionThroughput,
+    isTryCosmosDBSubscription: inputs.isTryCosmosDBSubscription,
   });
   if (inputs.features) {
     Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));

src/hooks/useTabs.ts

@@ -6,37 +6,43 @@ import TabsBase from "../Explorer/Tabs/TabsBase";
 
 interface TabsState {
   openedTabs: TabsBase[];
+  openedReactTabs: ReactTabKind[];
   activeTab: TabsBase;
-  isConnectTabOpen: boolean;
-  isConnectTabActive: boolean;
+  activeReactTab: ReactTabKind;
   activateTab: (tab: TabsBase) => void;
   activateNewTab: (tab: TabsBase) => void;
+  activateReactTab: (tabkind: ReactTabKind) => void;
   updateTab: (tab: TabsBase) => void;
   getTabs: (tabKind: ViewModels.CollectionTabKind, comparator?: (tab: TabsBase) => boolean) => TabsBase[];
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void;
   closeTabsByComparator: (comparator: (tab: TabsBase) => boolean) => void;
   closeTab: (tab: TabsBase) => void;
   closeAllNotebookTabs: (hardClose: boolean) => void;
-  activateConnectTab: () => void;
-  openAndActivateConnectTab: () => void;
-  closeConnectTab: () => void;
+  openAndActivateReactTab: (tabKind: ReactTabKind) => void;
+  closeReactTab: (tabKind: ReactTabKind) => void;
+}
+
+export enum ReactTabKind {
+  Connect,
+  Home,
 }
 
 export const useTabs: UseStore<TabsState> = create((set, get) => ({
   openedTabs: [],
+  openedReactTabs: [ReactTabKind.Home],
   activeTab: undefined,
-  isConnectTabOpen: false,
-  isConnectTabActive: false,
+  activeReactTab: ReactTabKind.Home,
   activateTab: (tab: TabsBase): void => {
     if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
-      set({ activeTab: tab, isConnectTabActive: false });
+      set({ activeTab: tab, activeReactTab: undefined });
       tab.onActivate();
     }
   },
   activateNewTab: (tab: TabsBase): void => {
-    set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, isConnectTabActive: false }));
+    set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined }));
     tab.onActivate();
   },
+  activateReactTab: (tabKind: ReactTabKind): void => set({ activeTab: undefined, activeReactTab: tabKind }),
   updateTab: (tab: TabsBase) => {
     if (get().activeTab?.tabId === tab.tabId) {
       set({ activeTab: tab });
@@ -73,7 +79,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       return true;
     });
     if (updatedTabs.length === 0) {
-      set({ activeTab: undefined, isConnectTabActive: get().isConnectTabOpen });
+      set({ activeTab: undefined, activeReactTab: ReactTabKind.Home });
     }
 
     if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
@@ -111,21 +117,27 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       });
 
       if (get().openedTabs.length === 0) {
-        set({ activeTab: undefined, isConnectTabActive: get().isConnectTabOpen });
+        set({ activeTab: undefined, activeReactTab: ReactTabKind.Home });
       }
     }
   },
-  activateConnectTab: () => {
-    if (get().isConnectTabOpen) {
-      set({ isConnectTabActive: true, activeTab: undefined });
+  openAndActivateReactTab: (tabKind: ReactTabKind) => {
+    if (get().openedReactTabs.indexOf(tabKind) === -1) {
+      set((state) => ({
+        openedReactTabs: [...state.openedReactTabs, tabKind],
+      }));
     }
+
+    set({ activeTab: undefined, activeReactTab: tabKind });
   },
-  openAndActivateConnectTab: () => set({ isConnectTabActive: true, isConnectTabOpen: true, activeTab: undefined }),
-  closeConnectTab: () => {
-    const { isConnectTabActive, openedTabs } = get();
-    if (isConnectTabActive && openedTabs?.length > 0) {
-      set({ activeTab: openedTabs[0] });
+  closeReactTab: (tabKind: ReactTabKind) => {
+    const { activeReactTab, openedTabs, openedReactTabs } = get();
+    if (activeReactTab === tabKind) {
+      openedTabs?.length > 0
+        ? set({ activeTab: openedTabs[0], activeReactTab: undefined })
+        : set({ activeTab: undefined, activeReactTab: openedReactTabs[0] });
     }
-    set({ isConnectTabActive: false, isConnectTabOpen: false });
+
+    set({ openedReactTabs: openedReactTabs.filter((tab: ReactTabKind) => tabKind !== tab) });
   },
 }));

test/cassandra/container.spec.ts

@@ -13,10 +13,6 @@ test("Cassandra keyspace and table CRUD", async () => {
   await page.waitForSelector("iframe");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   await explorer.click('[data-test="New Table"]');
   await explorer.click('[aria-label="Keyspace id"]');
   await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);

test/graph/container.spec.ts

@@ -12,10 +12,6 @@ test("Graph CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   // Create new database and graph
   await explorer.click('[data-test="New Graph"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);

test/mongo/container.spec.ts

@@ -12,11 +12,6 @@ test("Mongo CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);

test/mongo/container32.spec.ts

@@ -12,11 +12,6 @@ test("Mongo CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);

test/sql/container.spec.ts

@@ -12,11 +12,6 @@ test("SQL CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   await explorer.click('[data-test="New Container"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);
   await explorer.fill('[aria-label="Container id"]', containerId);

test/tables/container.spec.ts

@@ -12,10 +12,6 @@ test("Tables CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-tables-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   await page.waitForSelector('text="Querying databases"', { state: "detached" });
   await explorer.click('[data-test="New Table"]');
   await explorer.fill('[aria-label="Table id"]', tableId);

tsconfig.json

@@ -21,7 +21,8 @@
     "resolveJsonModule": true,
     "noEmit": true,
     "types": ["jest"],
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "skipLibCheck": true
   },
   "typedocOptions": {
     "entryPoints": [

webpack.config.js

@@ -244,10 +244,10 @@ module.exports = function (_env = {}, argv = {}) {
         new TerserPlugin({
           terserOptions: {
             // These options increase our initial bundle size by ~5% but the builds are significantly faster and won't run out of memory
-            compress: false,
+            compress: true,
             mangle: {
-              keep_fnames: true,
-              keep_classnames: true,
+              keep_fnames: false,
+              keep_classnames: false,
             },
           },
         }),