refactored code

less/Common/Constants.less

@@ -61,8 +61,6 @@
 
 @GalleryBackgroundColor: #fdfdfd;
 
-@LinkColor: #2d6da4;
-
 //Icons
 @InfoIconColor: #0072c6;
 @WarningIconColor: #db7500;
@@ -248,10 +246,6 @@
   outline: 1px dashed @FocusColor;
 }
 
-.focusedBorder() {
-  border: 1px dashed @FocusColor;
-}
-
 /************************************************************************************************
                                Common Toggle Switch
 *************************************************************************************************/

package-lock.json

@@ -51,6 +51,7 @@
         "@types/mkdirp": "1.0.1",
         "@types/node-fetch": "2.5.7",
         "@xmldom/xmldom": "0.7.13",
+        "@xterm/xterm": "5.5.0",
         "allotment": "1.20.2",
         "applicationinsights": "1.8.0",
         "bootstrap": "3.4.1",
@@ -13238,6 +13239,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "license": "BSD-3-Clause"

package.json

@@ -13,8 +13,8 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@fluentui/react": "8.119.0",
     "@fluentui/react-components": "9.54.2",
-    "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
+    "@jupyterlab/services": "6.0.2",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
@@ -46,6 +46,7 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@xmldom/xmldom": "0.7.13",
+    "@xterm/xterm": "5.5.0",
     "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",

src/Common/Constants.ts

@@ -530,13 +530,6 @@ export class ariaLabelForLearnMoreLink {
   public static readonly AzureSynapseLink = "Learn more about Azure Synapse Link.";
 }
 
-export class MaterializedViewsLabels {
-  public static readonly NewMaterializedView: string = "New Materialized View";
-}
-export class FeedbackLabels {
-  public static readonly provideFeedback: string = "Provide feedback";
-}
-
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 

src/Common/CosmosClient.ts

@@ -1,15 +1,13 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
-import { checkDatabaseResourceTokensValidity, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
+import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { FabricArtifactInfo, updateUserContext, userContext } from "../UserContext";
+import { updateUserContext, userContext } from "../UserContext";
-import { isDataplaneRbacSupported } from "../Utils/APITypeUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -20,7 +18,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
   if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
     Logger.logInfo(
       `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
@@ -43,7 +41,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
-  if (isFabricMirroredKey()) {
+  if (configContext.platform === Platform.Fabric) {
     switch (requestInfo.resourceType) {
       case Cosmos.ResourceType.conflicts:
       case Cosmos.ResourceType.container:
@@ -55,13 +53,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // User resource tokens
         // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = (
+        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
+        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
-        ).resourceTokenInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(
-          (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
-            .resourceTokenInfo.resourceTokensTimestamp,
-        );
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -72,9 +65,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // For now, these operations aren't used, so fetching the authorization token is commented out.
         // This provider must return a real token to pass validation by the client, so we return the cached resource token
         // (which is a valid token, but won't work for these operations).
-        const resourceTokens2 = (
+        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-        ).resourceTokenInfo.resourceTokens;
         return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
 
       /* ************** TODO: Uncomment this code if we need to support these operations **************

src/Common/DatabaseAccountUtility.ts

@@ -26,7 +26,3 @@ export function getWorkloadType(): WorkloadType {
   }
   return workloadType;
 }
-
-export function isMaterializedViewsEnabled(): boolean {
-  return userContext.apiType === "SQL" && userContext.databaseAccount?.properties?.enableMaterializedViews;
-}

src/Common/StyleConstants.ts

@@ -1,10 +1,10 @@
-import { isFabric } from "Platform/Fabric/FabricUtil";
+import { Platform, configContext } from "../ConfigContext";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
 
 export function updateStyles(): void {
-  if (isFabric()) {
+  if (configContext.platform === Platform.Fabric) {
     StyleConstants.AccentMediumHigh = StyleConstants.FabricAccentMediumHigh;
     StyleConstants.AccentMedium = StyleConstants.FabricAccentMedium;
     StyleConstants.AccentLight = StyleConstants.FabricAccentLight;

src/Common/dataAccess/createCollection.ts

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

src/Common/dataAccess/createMaterializedView.ts

@@ -1,70 +0,0 @@
-import { constructRpOptions } from "Common/dataAccess/createCollection";
-import { handleError } from "Common/ErrorHandlingUtils";
-import { Collection, CreateMaterializedViewsParams } from "Contracts/DataModels";
-import { userContext } from "UserContext";
-import { createUpdateSqlContainer } from "Utils/arm/generatedClients/cosmos/sqlResources";
-import {
-  CreateUpdateOptions,
-  SqlContainerResource,
-  SqlDatabaseCreateUpdateParameters,
-} from "Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
-
-export const createMaterializedView = async (params: CreateMaterializedViewsParams): Promise<Collection> => {
-  const clearMessage = logConsoleProgress(
-    `Creating a new materialized view ${params.materializedViewId} for database ${params.databaseId}`,
-  );
-
-  const options: CreateUpdateOptions = constructRpOptions(params);
-
-  const resource: SqlContainerResource = {
-    id: params.materializedViewId,
-  };
-  if (params.materializedViewDefinition) {
-    resource.materializedViewDefinition = params.materializedViewDefinition;
-  }
-  if (params.analyticalStorageTtl) {
-    resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
-  if (params.indexingPolicy) {
-    resource.indexingPolicy = params.indexingPolicy;
-  }
-  if (params.partitionKey) {
-    resource.partitionKey = params.partitionKey;
-  }
-  if (params.uniqueKeyPolicy) {
-    resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
-  }
-  if (params.vectorEmbeddingPolicy) {
-    resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
-  }
-  if (params.fullTextPolicy) {
-    resource.fullTextPolicy = params.fullTextPolicy;
-  }
-
-  const rpPayload: SqlDatabaseCreateUpdateParameters = {
-    properties: {
-      resource,
-      options,
-    },
-  };
-
-  try {
-    const createResponse = await createUpdateSqlContainer(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.materializedViewId,
-      rpPayload,
-    );
-    logConsoleInfo(`Successfully created materialized view ${params.materializedViewId}`);
-
-    return createResponse && (createResponse.properties.resource as Collection);
-  } catch (error) {
-    handleError(error, "CreateMaterializedView", `Error while creating materialized view ${params.materializedViewId}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};

src/Common/dataAccess/deleteCollection.ts

@@ -1,4 +1,3 @@
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
@@ -13,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.features.enableSDKoperations && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/readCollections.ts

@@ -1,10 +1,9 @@
 import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
+import { Platform, configContext } from "ConfigContext";
-import { isFabric, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { FabricArtifactInfo, userContext } from "../../UserContext";
+import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -17,13 +16,15 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
 
-  if (isFabricMirroredKey() && userContext.fabricContext?.databaseName === databaseId) {
+  if (
+    configContext.platform === Platform.Fabric &&
+    userContext.fabricContext &&
+    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
+  ) {
     const collections: DataModels.Collection[] = [];
     const promises: Promise<ContainerResponse>[] = [];
 
-    for (const collectionResourceId in (
+    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
-      userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-    ).resourceTokenInfo.resourceTokens) {
       // Dictionary key looks like this: dbs/SampleDB/colls/Container
       const resourceIdObj = collectionResourceId.split("/");
       const tokenDatabaseId = resourceIdObj[1];
@@ -55,8 +56,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables" &&
+      userContext.apiType !== "Tables"
-      !isFabric()
     ) {
       return await readCollectionsWithARM(databaseId);
     }
@@ -126,12 +126,5 @@ async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Co
       throw new Error(`Unsupported default experience type: ${apiType}`);
   }
 
-  // TO DO: Remove when we get RP API Spec with materializedViews
+  return rpResponse?.value?.map((collection) => collection.properties?.resource as DataModels.Collection);
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  return rpResponse?.value?.map((collection: any) => {
-    const collectionDataModel: DataModels.Collection = collection.properties?.resource as DataModels.Collection;
-    collectionDataModel.materializedViews = collection.properties?.resource?.materializedViews;
-    collectionDataModel.materializedViewDefinition = collection.properties?.resource?.materializedViewDefinition;
-    return collectionDataModel;
-  });
 }

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,4 +1,4 @@
-import { isFabric, isFabricMirroredKey, isFabricNative } from "Platform/Fabric/FabricUtil";
+import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -11,9 +11,8 @@ import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
-  if (isFabricMirroredKey() || isFabricNative()) {
+  if (configContext.platform === Platform.Fabric) {
-    // For Fabric Mirroring, it is slow, because it requests the token and we don't need it.
+    // TODO This works, but is very slow, because it requests the token, so we skip for now
-    // For Fabric Native, it is not supported.
     console.error("Skiping readDatabaseOffer for Fabric");
     return undefined;
   }
@@ -24,8 +23,7 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables" &&
+      userContext.apiType !== "Tables"
-      !isFabric()
     ) {
       return await readDatabaseOfferWithARM(params.databaseId);
     }

src/Common/dataAccess/readDatabases.ts

@@ -1,8 +1,7 @@
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
+import { Platform, configContext } from "ConfigContext";
-import { isFabric, isFabricMirroredKey, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { FabricArtifactInfo, userContext } from "../../UserContext";
+import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -15,13 +14,8 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
 
-  if (
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.databaseConnectionInfo.resourceTokens) {
-    isFabricMirroredKey() &&
+    const tokensData = userContext.fabricContext.databaseConnectionInfo;
-    (userContext.fabricContext?.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]).resourceTokenInfo
-      .resourceTokens
-  ) {
-    const tokensData = (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
-      .resourceTokenInfo;
 
     const databaseIdsSet = new Set<string>(); // databaseId
 
@@ -52,28 +46,13 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
       }));
     clearMessage();
     return databases;
-  } else if (isFabricNative() && userContext.fabricContext?.databaseName) {
-    const databaseId = userContext.fabricContext.databaseName;
-    databases = [
-      {
-        _rid: "",
-        _self: "",
-        _etag: "",
-        _ts: 0,
-        id: databaseId,
-        collections: [],
-      },
-    ];
-    clearMessage();
-    return databases;
   }
 
   try {
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables" &&
+      userContext.apiType !== "Tables"
-      !isFabric()
     ) {
       databases = await readDatabasesWithARM();
     } else {

src/Common/dataAccess/updateCollection.ts

@@ -1,5 +1,4 @@
 import { ContainerDefinition, RequestOptions } from "@azure/cosmos";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -37,8 +36,7 @@ export async function updateCollection(
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables" &&
+      userContext.apiType !== "Tables"
-      !isFabric()
     ) {
       collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
     } else {

src/Common/dataAccess/updateOffer.ts

@@ -1,5 +1,4 @@
 import { OfferDefinition, RequestOptions } from "@azure/cosmos";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { Offer, SDKOfferDefinition, ThroughputBucket, 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.features.enableSDKoperations && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.apiType === "Tables") {

src/Contracts/DataModels.ts

@@ -32,7 +32,6 @@ export interface DatabaseAccountExtendedProperties {
   writeLocations?: DatabaseAccountResponseLocation[];
   enableFreeTier?: boolean;
   enableAnalyticalStorage?: boolean;
-  enableMaterializedViews?: boolean;
   isVirtualNetworkFilterEnabled?: boolean;
   ipRules?: IpRule[];
   privateEndpointConnections?: unknown[];
@@ -43,6 +42,11 @@ export interface DatabaseAccountExtendedProperties {
   publicNetworkAccess?: string;
   enablePriorityBasedExecution?: boolean;
   vcoreMongoEndpoint?: string;
+  virtualNetworkRules?: VNetRule[];
+}
+
+export interface VNetRule {
+  id: string;
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -165,8 +169,6 @@ export interface Collection extends Resource {
   schema?: ISchema;
   requestSchema?: () => void;
   computedProperties?: ComputedProperties;
-  materializedViews?: MaterializedView[];
-  materializedViewDefinition?: MaterializedViewDefinition;
 }
 
 export interface CollectionsWithPagination {
@@ -226,17 +228,6 @@ export interface ComputedProperty {
 
 export type ComputedProperties = ComputedProperty[];
 
-export interface MaterializedView {
-  id: string;
-  _rid: string;
-}
-
-export interface MaterializedViewDefinition {
-  definition: string;
-  sourceCollectionId: string;
-  sourceCollectionRid?: string;
-}
-
 export interface PartitionKey {
   paths: string[];
   kind: "Hash" | "Range" | "MultiHash";
@@ -359,7 +350,9 @@ export interface CreateDatabaseParams {
   offerThroughput?: number;
 }
 
-export interface CreateCollectionParamsBase {
+export interface CreateCollectionParams {
+  createNewDatabase: boolean;
+  collectionId: string;
   databaseId: string;
   databaseLevelThroughput: boolean;
   offerThroughput?: number;
@@ -373,16 +366,6 @@ export interface CreateCollectionParamsBase {
   fullTextPolicy?: FullTextPolicy;
 }
 
-export interface CreateCollectionParams extends CreateCollectionParamsBase {
-  createNewDatabase: boolean;
-  collectionId: string;
-}
-
-export interface CreateMaterializedViewsParams extends CreateCollectionParamsBase {
-  materializedViewId: string;
-  materializedViewDefinition: MaterializedViewDefinition;
-}
-
 export interface VectorEmbeddingPolicy {
   vectorEmbeddings: VectorEmbedding[];
 }

src/Contracts/FabricMessageTypes.ts

@@ -4,7 +4,6 @@
 export enum FabricMessageTypes {
   GetAuthorizationToken = "GetAuthorizationToken",
   GetAllResourceTokens = "GetAllResourceTokens",
-  GetAccessToken = "GetAccessToken",
   Ready = "Ready",
 }
 

src/Contracts/FabricMessagesContract.ts

@@ -1,9 +1,47 @@
-import { AuthorizationToken } from "./FabricMessageTypes";
+import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 
 // This is the version of these messages
-export const FABRIC_RPC_VERSION = "FabricMessageV3";
+export const FABRIC_RPC_VERSION = "2";
 
 // Fabric to Data Explorer
+
+// TODO Deprecated. Remove this section once DE is updated
+export type FabricMessageV1 =
+  | {
+      type: "newContainer";
+      databaseName: string;
+    }
+  | {
+      type: "initialize";
+      message: {
+        endpoint: string | undefined;
+        databaseId: string | undefined;
+        resourceTokens: unknown | undefined;
+        resourceTokensTimestamp: number | undefined;
+        error: string | undefined;
+      };
+    }
+  | {
+      type: "authorizationToken";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: AuthorizationToken | undefined;
+      };
+    }
+  | {
+      type: "allResourceTokens";
+      message: {
+        id: string;
+        error: string | undefined;
+        endpoint: string | undefined;
+        databaseId: string | undefined;
+        resourceTokens: unknown | undefined;
+        resourceTokensTimestamp: number | undefined;
+      };
+    };
+// -----------------------------
+
 export type FabricMessageV2 =
   | {
       type: "newContainer";
@@ -31,7 +69,7 @@ export type FabricMessageV2 =
       message: {
         id: string;
         error: string | undefined;
-        data: ResourceTokenInfo | undefined;
+        data: FabricDatabaseConnectionInfo | undefined;
       };
     }
   | {
@@ -41,81 +79,17 @@ export type FabricMessageV2 =
       };
     };
 
-export type FabricMessageV3 =
+export type CosmosDBTokenResponse = {
-  | {
+  token: string;
-      type: "newContainer";
+  date: string;
-      databaseName: string;
+};
-    }
-  | {
-      type: "initialize";
-      version: string;
-      id: string;
-      message: InitializeMessageV3<CosmosDbArtifactType>;
-    }
-  | {
-      type: "authorizationToken";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: AuthorizationToken | undefined;
-      };
-    }
-  | {
-      type: "allResourceTokens_v2";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: ResourceTokenInfo | undefined;
-      };
-    }
-  | {
-      type: "explorerVisible";
-      message: {
-        visible: boolean;
-      };
-    }
-  | {
-      type: "accessToken";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: { accessToken: string };
-      };
-    };
 
-export enum CosmosDbArtifactType {
+export type CosmosDBConnectionInfoResponse = {
-  MIRRORED_KEY = "MIRRORED_KEY",
-  MIRRORED_AAD = "MIRRORED_AAD",
-  NATIVE = "NATIVE",
-}
-export interface ArtifactConnectionInfo {
-  [CosmosDbArtifactType.MIRRORED_KEY]: { connectionId: string };
-  [CosmosDbArtifactType.MIRRORED_AAD]: AccessTokenConnectionInfo;
-  [CosmosDbArtifactType.NATIVE]: AccessTokenConnectionInfo;
-}
-
-export interface AccessTokenConnectionInfo {
-  accessToken: string;
-  databaseName: string;
-  accountEndpoint: string;
-}
-
-export interface InitializeMessageV3<T extends CosmosDbArtifactType> {
-  connectionId: string;
-  isVisible: boolean;
-  isReadOnly: boolean;
-  artifactType: T;
-  artifactConnectionInfo: ArtifactConnectionInfo[T];
-}
-export interface CosmosDBConnectionInfoResponse {
   endpoint: string;
   databaseId: string;
-  resourceTokens: Record<string, string> | undefined;
+  resourceTokens: { [resourceId: string]: string };
-  accessToken: string | undefined;
+};
-  isReadOnly: boolean;
-  credentialType: "Key" | "OAuth2" | undefined;
-}
 
-export interface ResourceTokenInfo extends CosmosDBConnectionInfoResponse {
+export interface FabricDatabaseConnectionInfo extends CosmosDBConnectionInfoResponse {
   resourceTokensTimestamp: number;
 }

src/Contracts/ViewModels.ts

@@ -143,8 +143,6 @@ export interface Collection extends CollectionBase {
   geospatialConfig: ko.Observable<DataModels.GeospatialConfig>;
   documentIds: ko.ObservableArray<DocumentId>;
   computedProperties: ko.Observable<DataModels.ComputedProperties>;
-  materializedViews: ko.Observable<DataModels.MaterializedView[]>;
-  materializedViewDefinition: ko.Observable<DataModels.MaterializedViewDefinition>;
 
   cassandraKeys: CassandraTableKeys;
   cassandraSchema: CassandraTableKey[];

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,13 +1,5 @@
-import { MaterializedViewsLabels } from "Common/Constants";
-import { isMaterializedViewsEnabled } from "Common/DatabaseAccountUtility";
-import { configContext, Platform } from "ConfigContext";
 import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
-import {
-  AddMaterializedViewPanel,
-  AddMaterializedViewPanelProps,
-} from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -27,6 +19,7 @@ import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
+import { Platform, configContext } from "./../ConfigContext";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
@@ -48,7 +41,7 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
-  if (isFabric() && userContext.fabricContext?.isReadOnly) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
     return undefined;
   }
 
@@ -60,7 +53,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
-  if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
+  if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
@@ -103,17 +96,17 @@ export const createCollectionContextMenuButton = (
       iconSrc: HostedTerminalIcon,
       onClick: () => {
         const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        if (useNotebook.getState().isShellEnabled) {
+        if (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
       },
-      label: useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell",
+      label: (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) ? "Open Mongo Shell" : "New Shell",
     });
   }
 
-  if (useNotebook.getState().isShellEnabled && userContext.apiType === "Cassandra") {
+  if ((useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) && userContext.apiType === "Cassandra") {
     items.push({
       iconSrc: HostedTerminalIcon,
       onClick: () => {
@@ -152,7 +145,7 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (!isFabric() || (isFabric() && !userContext.fabricContext?.isReadOnly)) {
+  if (configContext.platform !== Platform.Fabric) {
     items.push({
       iconSrc: DeleteCollectionIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
@@ -170,24 +163,6 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (isMaterializedViewsEnabled() && !selectedCollection.materializedViewDefinition()) {
-    items.push({
-      label: MaterializedViewsLabels.NewMaterializedView,
-      onClick: () => {
-        const addMaterializedViewPanelProps: AddMaterializedViewPanelProps = {
-          explorer: container,
-          sourceContainer: selectedCollection,
-        };
-        useSidePanel
-          .getState()
-          .openSidePanel(
-            MaterializedViewsLabels.NewMaterializedView,
-            <AddMaterializedViewPanel {...addMaterializedViewPanelProps} />,
-          );
-      },
-    });
-  }
-
   return items;
 };
 

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -45,10 +45,6 @@ import {
   ConflictResolutionComponentProps,
 } from "./SettingsSubComponents/ConflictResolutionComponent";
 import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
-import {
-  MaterializedViewComponent,
-  MaterializedViewComponentProps,
-} from "./SettingsSubComponents/MaterializedViewComponent";
 import {
   MongoIndexingPolicyComponent,
   MongoIndexingPolicyComponentProps,
@@ -166,7 +162,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private shouldShowComputedPropertiesEditor: boolean;
   private shouldShowIndexingPolicyEditor: boolean;
   private shouldShowPartitionKeyEditor: boolean;
-  private isMaterializedView: boolean;
   private isVectorSearchEnabled: boolean;
   private isFullTextSearchEnabled: boolean;
   private totalThroughputUsed: number;
@@ -184,8 +179,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowComputedPropertiesEditor = userContext.apiType === "SQL";
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
-      this.isMaterializedView =
-        !!this.collection?.materializedViewDefinition() || !!this.collection?.materializedViews();
       this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
       this.isFullTextSearchEnabled = isFullTextSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 
@@ -1279,11 +1272,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       explorer: this.props.settingsTab.getContainer(),
     };
 
-    const materializedViewComponentProps: MaterializedViewComponentProps = {
-      collection: this.collection,
-      explorer: this.props.settingsTab.getContainer(),
-    };
-
     const tabs: SettingsV2TabInfo[] = [];
     if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
@@ -1347,13 +1335,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    if (this.isMaterializedView) {
-      tabs.push({
-        tab: SettingsV2TabTypes.MaterializedViewTab,
-        content: <MaterializedViewComponent {...materializedViewComponentProps} />,
-      });
-    }
-
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.test.tsx

@@ -1,46 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { collection, container } from "../TestUtils";
-import { MaterializedViewComponent } from "./MaterializedViewComponent";
-import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
-import { MaterializedViewTargetComponent } from "./MaterializedViewTargetComponent";
-
-describe("MaterializedViewComponent", () => {
-  let testCollection: typeof collection;
-  let testExplorer: typeof container;
-
-  beforeEach(() => {
-    testCollection = { ...collection };
-  });
-
-  it("renders only the source component when materializedViewDefinition is missing", () => {
-    testCollection.materializedViews([
-      { id: "view1", _rid: "rid1" },
-      { id: "view2", _rid: "rid2" },
-    ]);
-    testCollection.materializedViewDefinition(null);
-    const wrapper = shallow(<MaterializedViewComponent collection={testCollection} explorer={testExplorer} />);
-    expect(wrapper.find(MaterializedViewSourceComponent).exists()).toBe(true);
-    expect(wrapper.find(MaterializedViewTargetComponent).exists()).toBe(false);
-  });
-
-  it("renders only the target component when materializedViews is missing", () => {
-    testCollection.materializedViews(null);
-    testCollection.materializedViewDefinition({
-      definition: "SELECT * FROM c WHERE c.id = 1",
-      sourceCollectionId: "source1",
-      sourceCollectionRid: "rid123",
-    });
-    const wrapper = shallow(<MaterializedViewComponent collection={testCollection} explorer={testExplorer} />);
-    expect(wrapper.find(MaterializedViewSourceComponent).exists()).toBe(false);
-    expect(wrapper.find(MaterializedViewTargetComponent).exists()).toBe(true);
-  });
-
-  it("renders neither component when both are missing", () => {
-    testCollection.materializedViews(null);
-    testCollection.materializedViewDefinition(null);
-    const wrapper = shallow(<MaterializedViewComponent collection={testCollection} explorer={testExplorer} />);
-    expect(wrapper.find(MaterializedViewSourceComponent).exists()).toBe(false);
-    expect(wrapper.find(MaterializedViewTargetComponent).exists()).toBe(false);
-  });
-});

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx

@@ -1,36 +0,0 @@
-import { FontIcon, Link, Stack, Text } from "@fluentui/react";
-import Explorer from "Explorer/Explorer";
-import React from "react";
-import * as ViewModels from "../../../../Contracts/ViewModels";
-import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
-import { MaterializedViewTargetComponent } from "./MaterializedViewTargetComponent";
-
-export interface MaterializedViewComponentProps {
-  collection: ViewModels.Collection;
-  explorer: Explorer;
-}
-
-export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps> = ({ collection, explorer }) => {
-  const isTargetContainer = !!collection?.materializedViewDefinition();
-  const isSourceContainer = !!collection?.materializedViews();
-
-  return (
-    <Stack tokens={{ childrenGap: 8 }} styles={{ root: { maxWidth: 600 } }}>
-      <Stack horizontal verticalAlign="center" wrap tokens={{ childrenGap: 8 }}>
-        <Text styles={{ root: { fontWeight: 600 } }}>This container has the following views defined for it.</Text>
-        <Text>
-          <Link
-            target="_blank"
-            href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/materialized-views#defining-materialized-views"
-          >
-            Learn more
-            <FontIcon iconName="NavigateExternalInline" style={{ marginLeft: "4px" }} />
-          </Link>{" "}
-          about how to define materialized views and how to use them.
-        </Text>
-      </Stack>
-      {isSourceContainer && <MaterializedViewSourceComponent collection={collection} explorer={explorer} />}
-      {isTargetContainer && <MaterializedViewTargetComponent collection={collection} />}
-    </Stack>
-  );
-};

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.test.tsx

@@ -1,36 +0,0 @@
-import { PrimaryButton } from "@fluentui/react";
-import { shallow } from "enzyme";
-import React from "react";
-import { collection, container } from "../TestUtils";
-import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
-
-describe("MaterializedViewSourceComponent", () => {
-  let testCollection: typeof collection;
-  let testExplorer: typeof container;
-
-  beforeEach(() => {
-    testCollection = { ...collection };
-  });
-
-  it("renders without crashing", () => {
-    const wrapper = shallow(<MaterializedViewSourceComponent collection={testCollection} explorer={testExplorer} />);
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("renders the PrimaryButton", () => {
-    const wrapper = shallow(<MaterializedViewSourceComponent collection={testCollection} explorer={testExplorer} />);
-    expect(wrapper.find(PrimaryButton).exists()).toBe(true);
-  });
-
-  it("updates when new materialized views are provided", () => {
-    const wrapper = shallow(<MaterializedViewSourceComponent collection={testCollection} explorer={testExplorer} />);
-
-    // Simulating an update by modifying the observable directly
-    testCollection.materializedViews([{ id: "view3", _rid: "rid3" }]);
-
-    wrapper.setProps({ collection: testCollection });
-    wrapper.update();
-
-    expect(wrapper.find(PrimaryButton).exists()).toBe(true);
-  });
-});

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.tsx

@@ -1,113 +0,0 @@
-import { PrimaryButton } from "@fluentui/react";
-import { MaterializedViewsLabels } from "Common/Constants";
-import Explorer from "Explorer/Explorer";
-import { loadMonaco } from "Explorer/LazyMonaco";
-import { AddMaterializedViewPanel } from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
-import { useDatabases } from "Explorer/useDatabases";
-import { useSidePanel } from "hooks/useSidePanel";
-import * as monaco from "monaco-editor";
-import React, { useEffect, useRef } from "react";
-import * as ViewModels from "../../../../Contracts/ViewModels";
-
-export interface MaterializedViewSourceComponentProps {
-  collection: ViewModels.Collection;
-  explorer: Explorer;
-}
-
-export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceComponentProps> = ({
-  collection,
-  explorer,
-}) => {
-  const editorContainerRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(null);
-
-  const materializedViews = collection?.materializedViews() ?? [];
-
-  // Helper function to fetch the definition and partition key of targetContainer by traversing through all collections and matching id from MaterializedViews[] with collection id.
-  const getViewDetails = (viewId: string): { definition: string; partitionKey: string[] } => {
-    let definition = "";
-    let partitionKey: string[] = [];
-
-    useDatabases.getState().databases.find((database) => {
-      const collection = database.collections().find((collection) => collection.id() === viewId);
-      if (collection) {
-        const materializedViewDefinition = collection.materializedViewDefinition();
-        materializedViewDefinition && (definition = materializedViewDefinition.definition);
-        collection.partitionKey?.paths && (partitionKey = collection.partitionKey.paths);
-      }
-    });
-
-    return { definition, partitionKey };
-  };
-
-  //JSON value for the editor using the fetched id and definitions.
-  const jsonValue = JSON.stringify(
-    materializedViews.map((view) => {
-      const { definition, partitionKey } = getViewDetails(view.id);
-      return {
-        name: view.id,
-        partitionKey: partitionKey.join(", "),
-        definition,
-      };
-    }),
-    null,
-    2,
-  );
-
-  // Initialize Monaco editor with the computed JSON value.
-  useEffect(() => {
-    let disposed = false;
-    const initMonaco = async () => {
-      const monacoInstance = await loadMonaco();
-      if (disposed || !editorContainerRef.current) {
-        return;
-      }
-
-      editorRef.current = monacoInstance.editor.create(editorContainerRef.current, {
-        value: jsonValue,
-        language: "json",
-        ariaLabel: "Materialized Views JSON",
-        readOnly: true,
-      });
-    };
-
-    initMonaco();
-    return () => {
-      disposed = true;
-      editorRef.current?.dispose();
-    };
-  }, [jsonValue]);
-
-  // Update the editor when the jsonValue changes.
-  useEffect(() => {
-    if (editorRef.current) {
-      editorRef.current.setValue(jsonValue);
-    }
-  }, [jsonValue]);
-
-  return (
-    <div>
-      <div
-        ref={editorContainerRef}
-        style={{
-          height: 250,
-          border: "1px solid #ccc",
-          borderRadius: 4,
-          overflow: "hidden",
-        }}
-      />
-      <PrimaryButton
-        text="Add view"
-        styles={{ root: { width: "fit-content", marginTop: 12 } }}
-        onClick={() =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              MaterializedViewsLabels.NewMaterializedView,
-              <AddMaterializedViewPanel explorer={explorer} sourceContainer={collection} />,
-            )
-        }
-      />
-    </div>
-  );
-};

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.test.tsx

@@ -1,32 +0,0 @@
-import { Text } from "@fluentui/react";
-import { Collection } from "Contracts/ViewModels";
-import { shallow } from "enzyme";
-import React from "react";
-import { collection } from "../TestUtils";
-import { MaterializedViewTargetComponent } from "./MaterializedViewTargetComponent";
-
-describe("MaterializedViewTargetComponent", () => {
-  let testCollection: Collection;
-
-  beforeEach(() => {
-    testCollection = {
-      ...collection,
-      materializedViewDefinition: collection.materializedViewDefinition,
-    };
-  });
-
-  it("renders without crashing", () => {
-    const wrapper = shallow(<MaterializedViewTargetComponent collection={testCollection} />);
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it("displays the source container ID", () => {
-    const wrapper = shallow(<MaterializedViewTargetComponent collection={testCollection} />);
-    expect(wrapper.find(Text).at(2).dive().text()).toBe("source1");
-  });
-
-  it("displays the materialized view definition", () => {
-    const wrapper = shallow(<MaterializedViewTargetComponent collection={testCollection} />);
-    expect(wrapper.find(Text).at(4).dive().text()).toBe("SELECT * FROM c WHERE c.id = 1");
-  });
-});

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.tsx

@@ -1,43 +0,0 @@
-import { Stack, Text } from "@fluentui/react";
-import * as React from "react";
-import * as ViewModels from "../../../../Contracts/ViewModels";
-
-export interface MaterializedViewTargetComponentProps {
-  collection: ViewModels.Collection;
-}
-
-export const MaterializedViewTargetComponent: React.FC<MaterializedViewTargetComponentProps> = ({ collection }) => {
-  const materializedViewDefinition = collection?.materializedViewDefinition();
-
-  const textHeadingStyle = {
-    root: { fontWeight: "600", fontSize: 16 },
-  };
-
-  const valueBoxStyle = {
-    root: {
-      backgroundColor: "#f3f3f3",
-      padding: "5px 10px",
-      borderRadius: "4px",
-    },
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 15 }} styles={{ root: { maxWidth: 600 } }}>
-      <Text styles={textHeadingStyle}>Materialized View Settings</Text>
-
-      <Stack tokens={{ childrenGap: 5 }}>
-        <Text styles={{ root: { fontWeight: "600" } }}>Source container</Text>
-        <Stack styles={valueBoxStyle}>
-          <Text>{materializedViewDefinition?.sourceCollectionId}</Text>
-        </Stack>
-      </Stack>
-
-      <Stack tokens={{ childrenGap: 5 }}>
-        <Text styles={{ root: { fontWeight: "600" } }}>Materialized view definition</Text>
-        <Stack styles={valueBoxStyle}>
-          <Text>{materializedViewDefinition?.definition}</Text>
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-};

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -57,7 +57,6 @@ export enum SettingsV2TabTypes {
   ComputedPropertiesTab,
   ContainerVectorPolicyTab,
   ThroughputBucketsTab,
-  MaterializedViewTab,
 }
 
 export enum ContainerPolicyTabTypes {
@@ -172,8 +171,6 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       return "Container Policies";
     case SettingsV2TabTypes.ThroughputBucketsTab:
       return "Throughput Buckets";
-    case SettingsV2TabTypes.MaterializedViewTab:
-      return "Materialized Views (Preview)";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -48,15 +48,6 @@ export const collection = {
   ]),
   vectorEmbeddingPolicy: ko.observable<DataModels.VectorEmbeddingPolicy>({} as DataModels.VectorEmbeddingPolicy),
   fullTextPolicy: ko.observable<DataModels.FullTextPolicy>({} as DataModels.FullTextPolicy),
-  materializedViews: ko.observable<DataModels.MaterializedView[]>([
-    { id: "view1", _rid: "rid1" },
-    { id: "view2", _rid: "rid2" },
-  ]),
-  materializedViewDefinition: ko.observable<DataModels.MaterializedViewDefinition>({
-    definition: "SELECT * FROM c WHERE c.id = 1",
-    sourceCollectionId: "source1",
-    sourceCollectionRid: "rid123",
-  }),
   readSettings: () => {
     return;
   },

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -60,8 +60,6 @@ exports[`SettingsComponent renders 1`] = `
               "getDatabase": [Function],
               "id": [Function],
               "indexingPolicy": [Function],
-              "materializedViewDefinition": [Function],
-              "materializedViews": [Function],
               "offer": [Function],
               "partitionKey": {
                 "kind": "hash",
@@ -141,8 +139,6 @@ exports[`SettingsComponent renders 1`] = `
               "getDatabase": [Function],
               "id": [Function],
               "indexingPolicy": [Function],
-              "materializedViewDefinition": [Function],
-              "materializedViews": [Function],
               "offer": [Function],
               "partitionKey": {
                 "kind": "hash",
@@ -262,8 +258,6 @@ exports[`SettingsComponent renders 1`] = `
               "getDatabase": [Function],
               "id": [Function],
               "indexingPolicy": [Function],
-              "materializedViewDefinition": [Function],
-              "materializedViews": [Function],
               "offer": [Function],
               "partitionKey": {
                 "kind": "hash",
@@ -342,101 +336,6 @@ exports[`SettingsComponent renders 1`] = `
           shouldDiscardComputedProperties={false}
         />
       </PivotItem>
-      <PivotItem
-        headerText="Materialized Views (Preview)"
-        itemKey="MaterializedViewTab"
-        key="MaterializedViewTab"
-        style={
-          {
-            "marginTop": 20,
-          }
-        }
-      >
-        <MaterializedViewComponent
-          collection={
-            {
-              "analyticalStorageTtl": [Function],
-              "changeFeedPolicy": [Function],
-              "computedProperties": [Function],
-              "conflictResolutionPolicy": [Function],
-              "container": Explorer {
-                "_isInitializingNotebooks": false,
-                "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isTabsContentExpanded": [Function],
-                "onRefreshDatabasesKeyPress": [Function],
-                "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {
-                  "armResourceId": undefined,
-                  "retryOptions": {
-                    "maxTimeout": 5000,
-                    "minTimeout": 5000,
-                    "retries": 3,
-                  },
-                },
-                "provideFeedbackEmail": [Function],
-                "queriesClient": QueriesClient {
-                  "container": [Circular],
-                },
-                "refreshNotebookList": [Function],
-                "resourceTree": ResourceTreeAdapter {
-                  "container": [Circular],
-                  "copyNotebook": [Function],
-                  "parameters": [Function],
-                },
-              },
-              "databaseId": "test",
-              "defaultTtl": [Function],
-              "fullTextPolicy": [Function],
-              "geospatialConfig": [Function],
-              "getDatabase": [Function],
-              "id": [Function],
-              "indexingPolicy": [Function],
-              "materializedViewDefinition": [Function],
-              "materializedViews": [Function],
-              "offer": [Function],
-              "partitionKey": {
-                "kind": "hash",
-                "paths": [],
-                "version": 2,
-              },
-              "partitionKeyProperties": [
-                "partitionKey",
-              ],
-              "readSettings": [Function],
-              "uniqueKeyPolicy": {},
-              "usageSizeInKB": [Function],
-              "vectorEmbeddingPolicy": [Function],
-            }
-          }
-          explorer={
-            Explorer {
-              "_isInitializingNotebooks": false,
-              "isFixedCollectionWithSharedThroughputSupported": [Function],
-              "isTabsContentExpanded": [Function],
-              "onRefreshDatabasesKeyPress": [Function],
-              "onRefreshResourcesClick": [Function],
-              "phoenixClient": PhoenixClient {
-                "armResourceId": undefined,
-                "retryOptions": {
-                  "maxTimeout": 5000,
-                  "minTimeout": 5000,
-                  "retries": 3,
-                },
-              },
-              "provideFeedbackEmail": [Function],
-              "queriesClient": QueriesClient {
-                "container": [Circular],
-              },
-              "refreshNotebookList": [Function],
-              "resourceTree": ResourceTreeAdapter {
-                "container": [Circular],
-                "copyNotebook": [Function],
-                "parameters": [Function],
-              },
-            }
-          }
-        />
-      </PivotItem>
     </StyledPivot>
   </div>
 </div>

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -35,20 +35,12 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   setIsThroughputCapExceeded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
-  let defaultThroughput: number;
+  const defaultThroughput: number =
-  const workloadType: Constants.WorkloadType = getWorkloadType();
-
-  if (
     isFreeTier ||
     isQuickstart ||
-    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(workloadType)
+    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(getWorkloadType())
-  ) {
+      ? AutoPilotUtils.autoPilotThroughput1K
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput1K;
+      : AutoPilotUtils.autoPilotThroughput4K;
-  } else if (workloadType === Constants.WorkloadType.Production) {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput10K;
-  } else {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput4K;
-  }
 
   const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
   const [throughput, setThroughput] = useState<number>(defaultThroughput);

src/Explorer/Explorer.tsx

@@ -8,7 +8,7 @@ import { MessageTypes } from "Contracts/ExplorerContracts";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { isFabricMirrored, isFabricMirroredKey, scheduleRefreshFabricToken } from "Platform/Fabric/FabricUtil";
+import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
@@ -43,7 +43,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
-import { ReactTabKind, useTabs } from "../hooks/useTabs";
+import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
@@ -55,7 +55,7 @@ import type NotebookManager from "./Notebook/NotebookManager";
 import { NotebookPaneContent } from "./Notebook/NotebookManager";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { useNotebook } from "./Notebook/useNotebook";
-import { AddCollectionPanel } from "./Panes/AddCollectionPanel/AddCollectionPanel";
+import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
 import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
@@ -187,10 +187,6 @@ export default class Explorer {
       useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
     }
 
-    if (isFabricMirrored()) {
-      useTabs.getState().closeReactTab(ReactTabKind.Home);
-    }
-
     this.refreshExplorer();
   }
 
@@ -351,8 +347,8 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = async (): Promise<void> => {
-    if (isFabricMirroredKey()) {
+    if (configContext.platform === Platform.Fabric) {
-      scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
+      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
       return;
     }
 
@@ -910,25 +906,28 @@ export default class Explorer {
   }
 
   public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
-    if (useNotebook.getState().isPhoenixFeatures) {
+  
-      await this.allocateContainer(PoolIdType.DefaultPoolId);
+    if (userContext.features.enableCloudShell || !useNotebook.getState().isPhoenixFeatures) {
-      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      this.connectToTerminal(kind);
-      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
+      return;
-        this.connectToNotebookTerminal(kind);
+    }
-      } else {
+  
-        useDialog
+    await this.allocateContainer(PoolIdType.DefaultPoolId);
-          .getState()
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-          .showOkModalDialog(
+  
-            "Failed to connect",
+    if (notebookServerInfo?.notebookServerEndpoint) {
-            "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again.",
+      this.connectToTerminal(kind);
-          );
-      }
     } else {
-      this.connectToNotebookTerminal(kind);
+      useDialog
+        .getState()
+        .showOkModalDialog(
+          "Failed to connect",
+          "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again."
+        );
     }
   }
 
-  private connectToNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  private connectToTerminal(kind: ViewModels.TerminalKind): void {
     let title: string;
 
     switch (kind) {

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less

@@ -14,6 +14,10 @@
       .flex-direction(@direction: row);
       padding: 4px 5px;
 
+      label {
+        padding: 0px;
+      }
+
       .valueCol {
         flex-grow: 1;
         padding-right: 5px;
@@ -59,10 +63,6 @@
     height: 100%;
   }
 
-  .customTrashIcon {
-    padding-top: 33px;
-  }
-
   .rightPaneTrashIconImg {
     vertical-align: top;
   }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -142,11 +142,10 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div className="labelCol">
                   <TextField
                     className="edgeInput"
-                    label={index === 0 && "Key"}
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
-                    required
+                    aria-required="true"
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -154,11 +153,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                   />
                 </div>
+                <span className="mandatoryStar">*&nbsp;</span>
 
                 <div className="valueCol">
                   <TextField
                     className="edgeInput"
-                    label={index === 0 && "Value"}
                     type="text"
                     placeholder="Value"
                     autoComplete="off"
@@ -170,8 +169,6 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div>
                   <Dropdown
                     role="combobox"
-                    label={index === 0 && "Type"}
-                    ariaLabel="Type"
                     placeholder="Select an option"
                     defaultSelectedKey={data.values[0].type}
                     style={{ width: 100 }}
@@ -184,7 +181,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div className="actionCol">
                   <div
-                    className={`rightPaneTrashIcon rightPaneBtns ${index === 0 && "customTrashIcon"}`}
+                    className="rightPaneTrashIcon rightPaneBtns"
                     tabIndex={0}
                     role="button"
                     aria-label={`Delete ${data.key}`}

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -6,12 +6,12 @@
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/StyleConstants";
+import { Platform, configContext } from "../../../ConfigContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -93,18 +93,19 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
     );
   }
 
-  const rootStyle = isFabric()
+  const rootStyle =
-    ? {
+    configContext.platform === Platform.Fabric
-        root: {
+      ? {
-          backgroundColor: "transparent",
+          root: {
-          padding: "2px 8px 0px 8px",
+            backgroundColor: "transparent",
-        },
+            padding: "2px 8px 0px 8px",
-      }
+          },
-    : {
+        }
-        root: {
+      : {
-          backgroundColor: backgroundColor,
+          root: {
-        },
+            backgroundColor: backgroundColor,
-      };
+          },
+        };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -37,25 +37,21 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(enableAzureSynapseLinkBtn).toBeDefined();
     });
 
-    // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
+    it("Button should not be visible for Tables API", () => {
-    //       Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
+      updateUserContext({
-    //       unsupported in jest and needs to be tested with react-hooks-testing-library.
+        databaseAccount: {
-    //
+          properties: {
-    // it("Button should not be visible for Tables API", () => {
+            capabilities: [{ name: "EnableTable" }],
-    //   updateUserContext({
+          },
-    //     databaseAccount: {
+        } as DatabaseAccount,
-    //       properties: {
+      });
-    //         capabilities: [{ name: "EnableTable" }],
+
-    //       },
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-    //     } as DatabaseAccount,
+      const enableAzureSynapseLinkBtn = buttons.find(
-    //   });
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-    //
+      );
-    //   const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    //  const enableAzureSynapseLinkBtn = buttons.find(
+    });
-    //    (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-    //  );
-    //  expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    //});
 
     it("Button should not be visible for Cassandra API", () => {
       updateUserContext({

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,5 +1,4 @@
 import { KeyboardAction } from "KeyboardShortcuts";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -62,7 +61,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (isDataplaneRbacSupported(userContext.apiType)) {
+  if (userContext.apiType === "SQL") {
     const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
     const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
     const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
@@ -126,13 +125,13 @@ export function createContextCommandBarButtons(
   const buttons: CommandButtonComponentProps[] = [];
 
   if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
-    const label = useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell";
+    const label = (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        if (useNotebook.getState().isShellEnabled) {
+        if (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
@@ -146,7 +145,7 @@ export function createContextCommandBarButtons(
   }
 
   if (
-    useNotebook.getState().isShellEnabled &&
+    (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) &&
     !selectedNodeState.isDatabaseNodeOrNoneSelected() &&
     userContext.apiType === "Cassandra"
   ) {

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -37,10 +37,6 @@
                 background-color:@NotificationHigh;
         }
 
-        &:focus {
-            .focusedBorder();
-        }
-
         .statusBar {
             .dataTypeIcons {
                 cursor: pointer;

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -81,6 +81,10 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
+  public setElememntRef = (element: HTMLElement): void => {
+    this.consoleHeaderElement = element;
+  };
+
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
       (data: ConsoleData) => data.type === ConsoleDataType.InProgress,
@@ -97,9 +101,7 @@ export class NotificationConsoleComponent extends React.Component<
         <div
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
-          role="button"
+          ref={this.setElememntRef}
-          aria-label="Console"
-          aria-expanded={this.props.isConsoleExpanded}
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
@@ -107,15 +109,15 @@ export class NotificationConsoleComponent extends React.Component<
           <div className="statusBar">
             <span className="dataTypeIcons">
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={LoadingIcon} alt="In progress items" />
+                <img src={LoadingIcon} alt="in progress items" />
                 <span className="numInProgress">{numInProgress}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={ErrorBlackIcon} alt="Error items" />
+                <img src={ErrorBlackIcon} alt="error items" />
                 <span className="numErroredItems">{numErroredItems}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={infoBubbleIcon} alt="Info items" />
+                <img src={infoBubbleIcon} alt="info items" />
                 <span className="numInfoItems">{numInfoItems}</span>
               </span>
             </span>
@@ -127,10 +129,17 @@ export class NotificationConsoleComponent extends React.Component<
               </span>
             </span>
           </div>
-          <div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
+          <div
+            className="expandCollapseButton"
+            data-test="NotificationConsole/ExpandCollapseButton"
+            role="button"
+            tabIndex={0}
+            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
+            aria-expanded={!this.props.isConsoleExpanded}
+          >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
-              alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
+              alt={this.props.isConsoleExpanded ? "ChevronDownIcon" : "ChevronUpIcon"}
             />
           </div>
         </div>
@@ -250,6 +259,9 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
+    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
+      this.consoleHeaderElement.focus();
+    }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -5,13 +5,10 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   className="notificationConsoleContainer"
 >
   <div
-    aria-expanded={false}
-    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="button"
     tabIndex={0}
   >
     <div
@@ -24,7 +21,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="In progress items"
+            alt="in progress items"
             src={{}}
           />
           <span
@@ -37,7 +34,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Error items"
+            alt="error items"
             src={{}}
           />
           <span
@@ -50,7 +47,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Info items"
+            alt="info items"
             src={{}}
           />
           <span
@@ -74,11 +71,15 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       </span>
     </div>
     <div
+      aria-expanded={true}
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
+      role="button"
+      tabIndex={0}
     >
       <img
-        alt="Expand icon"
+        alt="ChevronUpIcon"
         src=""
       />
     </div>
@@ -175,13 +176,10 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   className="notificationConsoleContainer"
 >
   <div
-    aria-expanded={false}
-    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="button"
     tabIndex={0}
   >
     <div
@@ -194,7 +192,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="In progress items"
+            alt="in progress items"
             src={{}}
           />
           <span
@@ -207,7 +205,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Error items"
+            alt="error items"
             src={{}}
           />
           <span
@@ -220,7 +218,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="Info items"
+            alt="info items"
             src={{}}
           />
           <span
@@ -246,11 +244,15 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       </span>
     </div>
     <div
+      aria-expanded={true}
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
+      role="button"
+      tabIndex={0}
     >
       <img
-        alt="Expand icon"
+        alt="ChevronUpIcon"
         src=""
       />
     </div>

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,6 +1,6 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
+import { configContext, Platform } from "ConfigContext";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -58,9 +58,9 @@ function openCollectionTab(
       }
 
       if (
-        isFabricMirrored() &&
+        configContext.platform === Platform.Fabric &&
         !(
-          // whitelist the tab kinds that are allowed to be opened in Fabric mirrored
+          // whitelist the tab kinds that are allowed to be opened in Fabric
           (
             action.tabKind === ActionContracts.TabKind.SQLDocuments ||
             action.tabKind === ActionContracts.TabKind.SQLQuery

src/Explorer/Panes/AddCollectionPanel.test.tsx

@@ -1,6 +1,6 @@
 import { shallow } from "enzyme";
 import React from "react";
-import Explorer from "../../Explorer";
+import Explorer from "../Explorer";
 import { AddCollectionPanel } from "./AddCollectionPanel";
 
 const props = {

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -21,28 +21,13 @@ import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
-import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
 import {
-  AllPropertiesIndexed,
+  FullTextPoliciesComponent,
-  AnalyticalStorageContent,
+  getFullTextLanguageOptions,
-  ContainerVectorPolicyTooltipContent,
+} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-  FullTextPolicyDefault,
+import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
-  getPartitionKey,
-  getPartitionKeyName,
-  getPartitionKeyPlaceHolder,
-  getPartitionKeyTooltipText,
-  isFreeTierAccount,
-  isSynapseLinkEnabled,
-  parseUniqueKeys,
-  scrollToSection,
-  SharedDatabaseDefault,
-  shouldShowAnalyticalStoreOptions,
-  UniqueKeysHeader,
-} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { CollectionCreation } from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -56,15 +41,15 @@ import {
   isVectorSearchEnabled,
 } from "Utils/CapabilityUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
-import { CollapsibleSectionComponent } from "../../Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
+import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
-import "../../Controls/ThroughputInput/ThroughputInput.less";
+import "../Controls/ThroughputInput/ThroughputInput.less";
-import { ContainerSampleGenerator } from "../../DataSamples/ContainerSampleGenerator";
+import { ContainerSampleGenerator } from "../DataSamples/ContainerSampleGenerator";
-import Explorer from "../../Explorer";
+import Explorer from "../Explorer";
-import { useDatabases } from "../../useDatabases";
+import { useDatabases } from "../useDatabases";
-import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelFooterComponent } from "./PanelFooterComponent";
-import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
+import { PanelInfoErrorComponent } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "../PanelLoadingScreen";
+import { PanelLoadingScreen } from "./PanelLoadingScreen";
 
 export interface AddCollectionPanelProps {
   explorer: Explorer;
@@ -72,6 +57,40 @@ export interface AddCollectionPanelProps {
   isQuickstart?: boolean;
 }
 
+const SharedDatabaseDefault: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [],
+  excludedPaths: [
+    {
+      path: "/*",
+    },
+  ],
+};
+
+export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [
+    {
+      path: "/*",
+      indexes: [
+        {
+          kind: "Range",
+          dataType: "Number",
+          precision: -1,
+        },
+        {
+          kind: "Range",
+          dataType: "String",
+          precision: -1,
+        },
+      ],
+    },
+  ],
+  excludedPaths: [],
+};
+
 export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
   vectorEmbeddings: [],
 };
@@ -124,7 +143,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       collectionId: props.isQuickstart ? `Sample${getCollectionName()}` : "",
       enableIndexing: true,
       isSharded: userContext.apiType !== "Tables",
-      partitionKey: getPartitionKey(props.isQuickstart),
+      partitionKey: this.getPartitionKey(),
       subPartitionKeys: [],
       enableDedicatedThroughput: false,
       createMongoWildCardIndex:
@@ -140,7 +159,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       vectorEmbeddingPolicy: [],
       vectorIndexingPolicy: [],
       vectorPolicyValidated: true,
-      fullTextPolicy: FullTextPolicyDefault,
+      fullTextPolicy: { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] },
       fullTextIndexes: [],
       fullTextPolicyValidated: true,
     };
@@ -154,7 +173,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
   componentDidUpdate(_prevProps: AddCollectionPanelProps, prevState: AddCollectionPanelState): void {
     if (this.state.errorMessage && this.state.errorMessage !== prevState.errorMessage) {
-      scrollToSection("panelContainer");
+      this.scrollToSection("panelContainer");
     }
   }
 
@@ -171,7 +190,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           />
         )}
 
-        {!this.state.errorMessage && isFreeTierAccount() && (
+        {!this.state.errorMessage && this.isFreeTierAccount() && (
           <PanelInfoErrorComponent
             message={getUpsellMessage(userContext.portalEnv, true, isFirstResourceCreated, true)}
             messageType="info"
@@ -265,152 +284,150 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         )}
 
         <div className="panelMainContent">
-          {!(isFabricNative() && this.props.databaseId !== undefined) && (
+          <Stack hidden={userContext.apiType === "Tables"}>
-            <Stack hidden={userContext.apiType === "Tables"}>
+            <Stack horizontal>
-              <Stack horizontal>
+              <span className="mandatoryStar">*&nbsp;</span>
-                <span className="mandatoryStar">*&nbsp;</span>
+              <Text className="panelTextBold" variant="small">
-                <Text className="panelTextBold" variant="small">
+                Database {userContext.apiType === "Mongo" ? "name" : "id"}
-                  Database {userContext.apiType === "Mongo" ? "name" : "id"}
+              </Text>
-                </Text>
+              <TooltipHost
-                <TooltipHost
+                directionalHint={DirectionalHint.bottomLeftEdge}
-                  directionalHint={DirectionalHint.bottomLeftEdge}
+                content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                  content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                  true,
+                ).toLocaleLowerCase()}.`}
+              >
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
                     true,
                   ).toLocaleLowerCase()}.`}
-                >
+                />
-                  <Icon
+              </TooltipHost>
-                    iconName="Info"
+            </Stack>
-                    className="panelInfoIcon"
-                    tabIndex={0}
-                    ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                      true,
-                    ).toLocaleLowerCase()}.`}
-                  />
-                </TooltipHost>
-              </Stack>
 
-              {configContext.platform !== Platform.Fabric && (
+            {configContext.platform !== Platform.Fabric && (
-                <Stack horizontal verticalAlign="center">
+              <Stack horizontal verticalAlign="center">
-                  <div role="radiogroup">
+                <div role="radiogroup">
-                    <input
-                      className="panelRadioBtn"
-                      checked={this.state.createNewDatabase}
-                      aria-label="Create new database"
-                      aria-checked={this.state.createNewDatabase}
-                      name="databaseType"
-                      type="radio"
-                      role="radio"
-                      id="databaseCreateNew"
-                      tabIndex={0}
-                      onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-                    />
-                    <span className="panelRadioBtnLabel">Create new</span>
-
-                    <input
-                      className="panelRadioBtn"
-                      checked={!this.state.createNewDatabase}
-                      aria-label="Use existing database"
-                      aria-checked={!this.state.createNewDatabase}
-                      name="databaseType"
-                      type="radio"
-                      role="radio"
-                      tabIndex={0}
-                      onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-                    />
-                    <span className="panelRadioBtnLabel">Use existing</span>
-                  </div>
-                </Stack>
-              )}
-
-              {this.state.createNewDatabase && (
-                <Stack className="panelGroupSpacing">
                   <input
-                    name="newDatabaseId"
+                    className="panelRadioBtn"
-                    id="newDatabaseId"
+                    checked={this.state.createNewDatabase}
-                    aria-required
+                    aria-label="Create new database"
-                    required
+                    aria-checked={this.state.createNewDatabase}
-                    type="text"
+                    name="databaseType"
-                    autoComplete="off"
+                    type="radio"
-                    pattern="[^/?#\\]*[^/?# \\]"
+                    role="radio"
-                    title="May not end with space nor contain characters '\' '/' '#' '?'"
+                    id="databaseCreateNew"
-                    placeholder="Type a new database id"
-                    size={40}
-                    className="panelTextField"
-                    aria-label="New database id, Type a new database id"
-                    autoFocus
                     tabIndex={0}
-                    value={this.state.newDatabaseId}
+                    onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      this.setState({ newDatabaseId: event.target.value })
-                    }
                   />
+                  <span className="panelRadioBtnLabel">Create new</span>
 
-                  {!isServerlessAccount() && (
+                  <input
-                    <Stack horizontal>
+                    className="panelRadioBtn"
-                      <Checkbox
+                    checked={!this.state.createNewDatabase}
-                        label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
+                    aria-label="Use existing database"
-                        checked={this.state.isSharedThroughputChecked}
+                    aria-checked={!this.state.createNewDatabase}
-                        styles={{
+                    name="databaseType"
-                          text: { fontSize: 12 },
+                    type="radio"
-                          checkbox: { width: 12, height: 12 },
+                    role="radio"
-                          label: { padding: 0, alignItems: "center" },
+                    tabIndex={0}
-                        }}
+                    onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                  />
-                          this.setState({ isSharedThroughputChecked: isChecked })
+                  <span className="panelRadioBtnLabel">Use existing</span>
-                        }
+                </div>
-                      />
+              </Stack>
-                      <TooltipHost
+            )}
-                        directionalHint={DirectionalHint.bottomLeftEdge}
+
-                        content={`Throughput configured at the database level will be shared across all ${getCollectionName(
+            {this.state.createNewDatabase && (
+              <Stack className="panelGroupSpacing">
+                <input
+                  name="newDatabaseId"
+                  id="newDatabaseId"
+                  aria-required
+                  required
+                  type="text"
+                  autoComplete="off"
+                  pattern="[^/?#\\]*[^/?# \\]"
+                  title="May not end with space nor contain characters '\' '/' '#' '?'"
+                  placeholder="Type a new database id"
+                  size={40}
+                  className="panelTextField"
+                  aria-label="New database id, Type a new database id"
+                  autoFocus
+                  tabIndex={0}
+                  value={this.state.newDatabaseId}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                    this.setState({ newDatabaseId: event.target.value })
+                  }
+                />
+
+                {!isServerlessAccount() && (
+                  <Stack horizontal>
+                    <Checkbox
+                      label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
+                      checked={this.state.isSharedThroughputChecked}
+                      styles={{
+                        text: { fontSize: 12 },
+                        checkbox: { width: 12, height: 12 },
+                        label: { padding: 0, alignItems: "center" },
+                      }}
+                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                        this.setState({ isSharedThroughputChecked: isChecked })
+                      }
+                    />
+                    <TooltipHost
+                      directionalHint={DirectionalHint.bottomLeftEdge}
+                      content={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                        true,
+                      ).toLocaleLowerCase()} within the database.`}
+                    >
+                      <Icon
+                        iconName="Info"
+                        className="panelInfoIcon"
+                        tabIndex={0}
+                        ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
                           true,
                         ).toLocaleLowerCase()} within the database.`}
-                      >
+                      />
-                        <Icon
+                    </TooltipHost>
-                          iconName="Info"
+                  </Stack>
-                          className="panelInfoIcon"
+                )}
-                          tabIndex={0}
-                          ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
-                            true,
-                          ).toLocaleLowerCase()} within the database.`}
-                        />
-                      </TooltipHost>
-                    </Stack>
-                  )}
 
-                  {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
+                {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
-                    <ThroughputInput
+                  <ThroughputInput
-                      showFreeTierExceedThroughputTooltip={isFreeTierAccount() && !isFirstResourceCreated}
+                    showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
-                      isDatabase={true}
+                    isDatabase={true}
-                      isSharded={this.state.isSharded}
+                    isSharded={this.state.isSharded}
-                      isFreeTier={isFreeTierAccount()}
+                    isFreeTier={this.isFreeTierAccount()}
-                      isQuickstart={this.props.isQuickstart}
+                    isQuickstart={this.props.isQuickstart}
-                      setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
+                    setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
-                      setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
+                    setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
-                      setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
+                    setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
-                        this.setState({ isThroughputCapExceeded })
+                      this.setState({ isThroughputCapExceeded })
-                      }
+                    }
-                      onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
+                    onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
-                    />
+                  />
-                  )}
+                )}
-                </Stack>
+              </Stack>
-              )}
+            )}
-              {!this.state.createNewDatabase && (
+            {!this.state.createNewDatabase && (
-                <Dropdown
+              <Dropdown
-                  ariaLabel="Choose an existing database"
+                ariaLabel="Choose an existing database"
-                  styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
+                styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
-                  style={{ width: 300, fontSize: 12 }}
+                style={{ width: 300, fontSize: 12 }}
-                  placeholder="Choose an existing database"
+                placeholder="Choose an existing database"
-                  options={this.getDatabaseOptions()}
+                options={this.getDatabaseOptions()}
-                  onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
+                onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
-                    this.setState({ selectedDatabaseId: database.key as string })
+                  this.setState({ selectedDatabaseId: database.key as string })
-                  }
+                }
-                  defaultSelectedKey={this.props.databaseId}
+                defaultSelectedKey={this.props.databaseId}
-                  responsiveMode={999}
+                responsiveMode={999}
-                />
+              />
-              )}
+            )}
-              <Separator className="panelSeparator" />
+            <Separator className="panelSeparator" />
-            </Stack>
+          </Stack>
-          )}
 
           <Stack>
             <Stack horizontal>
@@ -559,14 +576,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               <Stack horizontal>
                 <span className="mandatoryStar">*&nbsp;</span>
                 <Text className="panelTextBold" variant="small">
-                  {getPartitionKeyName()}
+                  {this.getPartitionKeyName()}
                 </Text>
-                <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={getPartitionKeyTooltipText()}>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={this.getPartitionKeyTooltipText()}
+                >
                   <Icon
                     iconName="Info"
                     className="panelInfoIcon"
                     tabIndex={0}
-                    ariaLabel={getPartitionKeyTooltipText()}
+                    ariaLabel={this.getPartitionKeyTooltipText()}
                   />
                 </TooltipHost>
               </Stack>
@@ -580,8 +600,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 required
                 size={40}
                 className="panelTextField"
-                placeholder={getPartitionKeyPlaceHolder()}
+                placeholder={this.getPartitionKeyPlaceHolder()}
-                aria-label={getPartitionKeyName()}
+                aria-label={this.getPartitionKeyName()}
                 pattern={userContext.apiType === "Gremlin" ? "^/[^/]*" : ".*"}
                 title={userContext.apiType === "Gremlin" ? "May not use composite partition key" : ""}
                 value={this.state.partitionKey}
@@ -619,8 +639,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         tabIndex={index > 0 ? 1 : 0}
                         className="panelTextField"
                         autoComplete="off"
-                        placeholder={getPartitionKeyPlaceHolder(index)}
+                        placeholder={this.getPartitionKeyPlaceHolder(index)}
-                        aria-label={getPartitionKeyName()}
+                        aria-label={this.getPartitionKeyName()}
                         pattern={".*"}
                         title={""}
                         value={subPartitionKey}
@@ -646,7 +666,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     </Stack>
                   );
                 })}
-              {!isFabricNative() && userContext.apiType === "SQL" && (
+              {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
                     styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
@@ -711,10 +731,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
           {this.shouldShowCollectionThroughputInput() && (
             <ThroughputInput
-              showFreeTierExceedThroughputTooltip={isFreeTierAccount() && !isFirstResourceCreated}
+              showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
               isDatabase={false}
               isSharded={this.state.isSharded}
-              isFreeTier={isFreeTierAccount()}
+              isFreeTier={this.isFreeTierAccount()}
               isQuickstart={this.props.isQuickstart}
               setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
               setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
@@ -727,9 +747,29 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {!isFabricNative() && userContext.apiType === "SQL" && (
+          {userContext.apiType === "SQL" && (
             <Stack>
-              {UniqueKeysHeader()}
+              <Stack horizontal>
+                <Text className="panelTextBold" variant="small">
+                  Unique keys
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={
+                    "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
+                  }
+                >
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={
+                      "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
+                    }
+                  />
+                </TooltipHost>
+              </Stack>
+
               {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
                 return (
                   <Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
@@ -777,10 +817,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
-          {shouldShowAnalyticalStoreOptions() && (
+          {this.shouldShowAnalyticalStoreOptions() && (
             <Stack className="panelGroupSpacing">
               <Text className="panelTextBold" variant="small">
-                {AnalyticalStorageContent()}
+                {this.getAnalyticalStorageContent()}
               </Text>
 
               <Stack horizontal verticalAlign="center">
@@ -788,7 +828,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   <input
                     className="panelRadioBtn"
                     checked={this.state.enableAnalyticalStore}
-                    disabled={!isSynapseLinkEnabled()}
+                    disabled={!this.isSynapseLinkEnabled()}
                     aria-label="Enable analytical store"
                     aria-checked={this.state.enableAnalyticalStore}
                     name="analyticalStore"
@@ -803,7 +843,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   <input
                     className="panelRadioBtn"
                     checked={!this.state.enableAnalyticalStore}
-                    disabled={!isSynapseLinkEnabled()}
+                    disabled={!this.isSynapseLinkEnabled()}
                     aria-label="Disable analytical store"
                     aria-checked={!this.state.enableAnalyticalStore}
                     name="analyticalStore"
@@ -817,7 +857,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 </div>
               </Stack>
 
-              {!isSynapseLinkEnabled() && (
+              {!this.isSynapseLinkEnabled() && (
                 <Stack className="panelGroupSpacing">
                   <Text variant="small">
                     Azure Synapse Link is required for creating an analytical store{" "}
@@ -847,9 +887,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 title="Container Vector Policy"
                 isExpandedByDefault={false}
                 onExpand={() => {
-                  scrollToSection("collapsibleVectorPolicySectionContent");
+                  this.scrollToSection("collapsibleVectorPolicySectionContent");
                 }}
-                tooltipContent={ContainerVectorPolicyTooltipContent()}
+                tooltipContent={this.getContainerVectorPolicyTooltipContent()}
               >
                 <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
                   <Stack styles={{ root: { paddingLeft: 40 } }}>
@@ -875,7 +915,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 title="Container Full Text Search Policy"
                 isExpandedByDefault={false}
                 onExpand={() => {
-                  scrollToSection("collapsibleFullTextPolicySectionContent");
+                  this.scrollToSection("collapsibleFullTextPolicySectionContent");
                 }}
                 //TODO: uncomment when learn more text becomes available
                 // tooltipContent={this.getContainerFullTextPolicyTooltipContent()}
@@ -897,13 +937,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {!isFabricNative() && userContext.apiType !== "Tables" && (
+          {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
               isExpandedByDefault={false}
               onExpand={() => {
                 TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-                scrollToSection("collapsibleAdvancedSectionContent");
+                this.scrollToSection("collapsibleAdvancedSectionContent");
               }}
             >
               <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
@@ -1013,6 +1053,31 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }));
   }
 
+  private getPartitionKeyName(isLowerCase?: boolean): string {
+    const partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
+
+    return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
+  }
+
+  private getPartitionKeyPlaceHolder(index?: number): string {
+    switch (userContext.apiType) {
+      case "Mongo":
+        return "e.g., categoryId";
+      case "Gremlin":
+        return "e.g., /address";
+      case "SQL":
+        return `${
+          index === undefined
+            ? "Required - first partition key e.g., /TenantId"
+            : index === 0
+            ? "second partition key e.g., /UserId"
+            : "third partition key e.g., /SessionId"
+        }`;
+      default:
+        return "e.g., /address/zipCode";
+    }
+  }
+
   private onCreateNewDatabaseRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
     if (event.target.checked && !this.state.createNewDatabase) {
       this.setState({
@@ -1100,12 +1165,48 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return !!selectedDatabase?.offer();
   }
 
+  private isFreeTierAccount(): boolean {
+    return userContext.databaseAccount?.properties?.enableFreeTier;
+  }
+
   private getFreeTierIndexingText(): string {
     return this.state.enableIndexing
       ? "All properties in your documents will be indexed by default for flexible and efficient queries."
       : "Indexing will be turned off. Recommended if you don't need to run queries or only have key value operations.";
   }
 
+  private getPartitionKeyTooltipText(): string {
+    if (userContext.apiType === "Mongo") {
+      return "The shard key (field) is used to split your data across many replica sets (shards) to achieve unlimited scalability. It’s critical to choose a field that will evenly distribute your data.";
+    }
+
+    let tooltipText = `The ${this.getPartitionKeyName(
+      true,
+    )} is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume.`;
+
+    if (userContext.apiType === "SQL") {
+      tooltipText += " For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice.";
+    }
+
+    return tooltipText;
+  }
+
+  private getPartitionKey(): string {
+    if (userContext.apiType !== "SQL" && userContext.apiType !== "Mongo") {
+      return "";
+    }
+    if (userContext.features.partitionKeyDefault) {
+      return userContext.apiType === "SQL" ? "/id" : "_id";
+    }
+    if (userContext.features.partitionKeyDefault2) {
+      return userContext.apiType === "SQL" ? "/pk" : "pk";
+    }
+    if (this.props.isQuickstart) {
+      return userContext.apiType === "SQL" ? "/categoryId" : "categoryId";
+    }
+    return "";
+  }
+
   private getPartitionKeySubtext(): string {
     if (
       userContext.features.partitionKeyDefault &&
@@ -1117,6 +1218,34 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return "";
   }
 
+  private getAnalyticalStorageContent(): JSX.Element {
+    return (
+      <Text variant="small">
+        Enable analytical store capability to perform near real-time analytics on your operational data, without
+        impacting the performance of transactional workloads.{" "}
+        <Link
+          aria-label={Constants.ariaLabelForLearnMoreLink.AnalyticalStore}
+          target="_blank"
+          href="https://aka.ms/analytical-store-overview"
+        >
+          Learn more
+        </Link>
+      </Text>
+    );
+  }
+
+  private getContainerVectorPolicyTooltipContent(): JSX.Element {
+    return (
+      <Text variant="small">
+        Describe any properties in your data that contain vectors, so that they can be made available for similarity
+        queries.{" "}
+        <Link target="_blank" href="https://aka.ms/CosmosDBVectorSetup">
+          Learn more
+        </Link>
+      </Text>
+    );
+  }
+
   //TODO: uncomment when learn more text becomes available
   // private getContainerFullTextPolicyTooltipContent(): JSX.Element {
   //   return (
@@ -1131,7 +1260,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   // }
 
   private shouldShowCollectionThroughputInput(): boolean {
-    if (isFabricNative() || isServerlessAccount()) {
+    if (isServerlessAccount()) {
       return false;
     }
 
@@ -1147,7 +1276,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowIndexingOptionsForFreeTierAccount(): boolean {
-    if (!isFreeTierAccount()) {
+    if (!this.isFreeTierAccount()) {
       return false;
     }
 
@@ -1156,6 +1285,39 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       : this.isSelectedDatabaseSharedThroughput();
   }
 
+  private shouldShowAnalyticalStoreOptions(): boolean {
+    if (configContext.platform === Platform.Emulator) {
+      return false;
+    }
+
+    switch (userContext.apiType) {
+      case "SQL":
+      case "Mongo":
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  private isSynapseLinkEnabled(): boolean {
+    if (!userContext.databaseAccount) {
+      return false;
+    }
+
+    const { properties } = userContext.databaseAccount;
+    if (!properties) {
+      return false;
+    }
+
+    if (properties.enableAnalyticalStorage) {
+      return true;
+    }
+
+    return properties.capabilities?.some(
+      (capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics,
+    );
+  }
+
   private shouldShowVectorSearchParameters() {
     return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
   }
@@ -1236,11 +1398,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private getAnalyticalStorageTtl(): number {
-    if (!isSynapseLinkEnabled()) {
+    if (!this.isSynapseLinkEnabled()) {
       return undefined;
     }
 
-    if (!shouldShowAnalyticalStoreOptions()) {
+    if (!this.shouldShowAnalyticalStoreOptions()) {
       return undefined;
     }
 
@@ -1254,6 +1416,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return Constants.AnalyticalStorageTtl.Disabled;
   }
 
+  private scrollToSection(id: string): void {
+    document.getElementById(id)?.scrollIntoView();
+  }
+
   private getSampleDBName(): string {
     const existingSampleDBs = useDatabases
       .getState()
@@ -1288,7 +1454,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       partitionKeyString = "/'$pk'";
     }
 
-    const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = parseUniqueKeys(this.state.uniqueKeys);
+    const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = this.parseUniqueKeys();
     const partitionKeyVersion = this.state.useHashV1 ? undefined : 2;
     const partitionKey: DataModels.PartitionKey = partitionKeyString
       ? {

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility.tsx

@@ -1,217 +0,0 @@
-import { DirectionalHint, Icon, Link, Stack, Text, TooltipHost } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { configContext, Platform } from "ConfigContext";
-import * as DataModels from "Contracts/DataModels";
-import { getFullTextLanguageOptions } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
-import React from "react";
-import { userContext } from "UserContext";
-
-export function getPartitionKeyTooltipText(): string {
-  if (userContext.apiType === "Mongo") {
-    return "The shard key (field) is used to split your data across many replica sets (shards) to achieve unlimited scalability. It’s critical to choose a field that will evenly distribute your data.";
-  }
-
-  let tooltipText = `The ${getPartitionKeyName(
-    true,
-  )} is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume.`;
-
-  if (userContext.apiType === "SQL") {
-    tooltipText += " For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice.";
-  }
-
-  return tooltipText;
-}
-
-export function getPartitionKeyName(isLowerCase?: boolean): string {
-  const partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
-
-  return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
-}
-
-export function getPartitionKeyPlaceHolder(index?: number): string {
-  switch (userContext.apiType) {
-    case "Mongo":
-      return "e.g., categoryId";
-    case "Gremlin":
-      return "e.g., /address";
-    case "SQL":
-      return `${
-        index === undefined
-          ? "Required - first partition key e.g., /TenantId"
-          : index === 0
-          ? "second partition key e.g., /UserId"
-          : "third partition key e.g., /SessionId"
-      }`;
-    default:
-      return "e.g., /address/zipCode";
-  }
-}
-
-export function getPartitionKey(isQuickstart?: boolean): string {
-  if (userContext.apiType !== "SQL" && userContext.apiType !== "Mongo") {
-    return "";
-  }
-  if (userContext.features.partitionKeyDefault) {
-    return userContext.apiType === "SQL" ? "/id" : "_id";
-  }
-  if (userContext.features.partitionKeyDefault2) {
-    return userContext.apiType === "SQL" ? "/pk" : "pk";
-  }
-  if (isQuickstart) {
-    return userContext.apiType === "SQL" ? "/categoryId" : "categoryId";
-  }
-  return "";
-}
-
-export function isFreeTierAccount(): boolean {
-  return userContext.databaseAccount?.properties?.enableFreeTier;
-}
-
-export function UniqueKeysHeader(): JSX.Element {
-  const tooltipContent =
-    "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key.";
-
-  return (
-    <Stack horizontal>
-      <Text className="panelTextBold" variant="small">
-        Unique keys
-      </Text>
-      <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={tooltipContent}>
-        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} ariaLabel={tooltipContent} />
-      </TooltipHost>
-    </Stack>
-  );
-}
-
-export function shouldShowAnalyticalStoreOptions(): boolean {
-  if (isFabricNative() || configContext.platform === Platform.Emulator) {
-    return false;
-  }
-
-  switch (userContext.apiType) {
-    case "SQL":
-    case "Mongo":
-      return true;
-    default:
-      return false;
-  }
-}
-
-export function AnalyticalStorageContent(): JSX.Element {
-  return (
-    <Text variant="small">
-      Enable analytical store capability to perform near real-time analytics on your operational data, without impacting
-      the performance of transactional workloads.{" "}
-      <Link
-        aria-label={Constants.ariaLabelForLearnMoreLink.AnalyticalStore}
-        target="_blank"
-        href="https://aka.ms/analytical-store-overview"
-      >
-        Learn more
-      </Link>
-    </Text>
-  );
-}
-
-export function isSynapseLinkEnabled(): boolean {
-  if (!userContext.databaseAccount) {
-    return false;
-  }
-
-  const { properties } = userContext.databaseAccount;
-  if (!properties) {
-    return false;
-  }
-
-  if (properties.enableAnalyticalStorage) {
-    return true;
-  }
-
-  return properties.capabilities?.some(
-    (capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics,
-  );
-}
-
-export function scrollToSection(id: string): void {
-  document.getElementById(id)?.scrollIntoView();
-}
-
-export function ContainerVectorPolicyTooltipContent(): JSX.Element {
-  return (
-    <Text variant="small">
-      Describe any properties in your data that contain vectors, so that they can be made available for similarity
-      queries.{" "}
-      <Link target="_blank" href="https://aka.ms/CosmosDBVectorSetup">
-        Learn more
-      </Link>
-    </Text>
-  );
-}
-
-export function parseUniqueKeys(uniqueKeys: string[]): DataModels.UniqueKeyPolicy {
-  if (uniqueKeys?.length === 0) {
-    return undefined;
-  }
-
-  const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = { uniqueKeys: [] };
-  uniqueKeys.forEach((uniqueKey: string) => {
-    if (uniqueKey) {
-      const validPaths: string[] = uniqueKey.split(",")?.filter((path) => path?.length > 0);
-      const trimmedPaths: string[] = validPaths?.map((path) => path.trim());
-      if (trimmedPaths?.length > 0) {
-        if (userContext.apiType === "Mongo") {
-          trimmedPaths.map((path) => {
-            const transformedPath = path.split(".").join("/");
-            if (transformedPath[0] !== "/") {
-              return "/" + transformedPath;
-            }
-            return transformedPath;
-          });
-        }
-        uniqueKeyPolicy.uniqueKeys.push({ paths: trimmedPaths });
-      }
-    }
-  });
-
-  return uniqueKeyPolicy;
-}
-
-export const SharedDatabaseDefault: DataModels.IndexingPolicy = {
-  indexingMode: "consistent",
-  automatic: true,
-  includedPaths: [],
-  excludedPaths: [
-    {
-      path: "/*",
-    },
-  ],
-};
-
-export const FullTextPolicyDefault: DataModels.FullTextPolicy = {
-  defaultLanguage: getFullTextLanguageOptions()[0].key as never,
-  fullTextPaths: [],
-};
-
-export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
-  indexingMode: "consistent",
-  automatic: true,
-  includedPaths: [
-    {
-      path: "/*",
-      indexes: [
-        {
-          kind: "Range",
-          dataType: "Number",
-          precision: -1,
-        },
-        {
-          kind: "Range",
-          dataType: "String",
-          precision: -1,
-        },
-      ],
-    },
-  ],
-  excludedPaths: [],
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVAdvancedComponent.tsx

@@ -1,54 +0,0 @@
-import { Checkbox, Icon, Link, Stack, Text } from "@fluentui/react";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import { scrollToSection } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
-
-export interface AddMVAdvancedComponentProps {
-  useHashV1: boolean;
-  setUseHashV1: React.Dispatch<React.SetStateAction<boolean>>;
-  setSubPartitionKeys: React.Dispatch<React.SetStateAction<string[]>>;
-}
-export const AddMVAdvancedComponent = (props: AddMVAdvancedComponentProps): JSX.Element => {
-  const { useHashV1, setUseHashV1, setSubPartitionKeys } = props;
-
-  const useHashV1CheckboxOnChange = (isChecked: boolean): void => {
-    setUseHashV1(isChecked);
-    setSubPartitionKeys([]);
-  };
-
-  return (
-    <CollapsibleSectionComponent
-      title="Advanced"
-      isExpandedByDefault={false}
-      onExpand={() => {
-        TelemetryProcessor.traceOpen(Action.ExpandAddMaterializedViewPaneAdvancedSection);
-        scrollToSection("collapsibleAdvancedSectionContent");
-      }}
-    >
-      <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
-        <Checkbox
-          label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
-          checked={useHashV1}
-          styles={{
-            text: { fontSize: 12 },
-            checkbox: { width: 12, height: 12 },
-            label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
-          }}
-          onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
-            useHashV1CheckboxOnChange(isChecked);
-          }}
-        />
-        <Text variant="small">
-          <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created
-          container will use a legacy partitioning scheme that supports partition key values of size only up to 101
-          bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
-          <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
-            Learn more
-          </Link>
-        </Text>
-      </Stack>
-    </CollapsibleSectionComponent>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVAnalyticalStoreComponent.tsx

@@ -1,99 +0,0 @@
-import { DefaultButton, Link, Stack, Text } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import Explorer from "Explorer/Explorer";
-import {
-  AnalyticalStorageContent,
-  isSynapseLinkEnabled,
-} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-import { getCollectionName } from "Utils/APITypeUtils";
-
-export interface AddMVAnalyticalStoreComponentProps {
-  explorer: Explorer;
-  enableAnalyticalStore: boolean;
-  setEnableAnalyticalStore: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export const AddMVAnalyticalStoreComponent = (props: AddMVAnalyticalStoreComponentProps): JSX.Element => {
-  const { explorer, enableAnalyticalStore, setEnableAnalyticalStore } = props;
-
-  const onEnableAnalyticalStoreRadioButtonChange = (checked: boolean): void => {
-    if (checked && !enableAnalyticalStore) {
-      setEnableAnalyticalStore(true);
-    }
-  };
-
-  const onDisableAnalyticalStoreRadioButtonnChange = (checked: boolean): void => {
-    if (checked && enableAnalyticalStore) {
-      setEnableAnalyticalStore(false);
-    }
-  };
-
-  return (
-    <Stack className="panelGroupSpacing">
-      <Text className="panelTextBold" variant="small">
-        {AnalyticalStorageContent()}
-      </Text>
-
-      <Stack horizontal verticalAlign="center">
-        <div role="radiogroup">
-          <input
-            className="panelRadioBtn"
-            checked={enableAnalyticalStore}
-            disabled={!isSynapseLinkEnabled()}
-            aria-label="Enable analytical store"
-            aria-checked={enableAnalyticalStore}
-            name="analyticalStore"
-            type="radio"
-            role="radio"
-            id="enableAnalyticalStoreBtn"
-            tabIndex={0}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              onEnableAnalyticalStoreRadioButtonChange(event.target.checked);
-            }}
-          />
-          <span className="panelRadioBtnLabel">On</span>
-
-          <input
-            className="panelRadioBtn"
-            checked={!enableAnalyticalStore}
-            disabled={!isSynapseLinkEnabled()}
-            aria-label="Disable analytical store"
-            aria-checked={!enableAnalyticalStore}
-            name="analyticalStore"
-            type="radio"
-            role="radio"
-            id="disableAnalyticalStoreBtn"
-            tabIndex={0}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              onDisableAnalyticalStoreRadioButtonnChange(event.target.checked);
-            }}
-          />
-          <span className="panelRadioBtnLabel">Off</span>
-        </div>
-      </Stack>
-
-      {!isSynapseLinkEnabled() && (
-        <Stack className="panelGroupSpacing">
-          <Text variant="small">
-            Azure Synapse Link is required for creating an analytical store {getCollectionName().toLocaleLowerCase()}.
-            Enable Synapse Link for this Cosmos DB account.{" "}
-            <Link
-              href="https://aka.ms/cosmosdb-synapselink"
-              target="_blank"
-              aria-label={Constants.ariaLabelForLearnMoreLink.AzureSynapseLink}
-              className="capacitycalculator-link"
-            >
-              Learn more
-            </Link>
-          </Text>
-          <DefaultButton
-            text="Enable"
-            onClick={() => explorer.openEnableSynapseLinkDialog()}
-            style={{ height: 27, width: 80 }}
-            styles={{ label: { fontSize: 12 } }}
-          />
-        </Stack>
-      )}
-    </Stack>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVFullTextSearchComponent.tsx

@@ -1,45 +0,0 @@
-import { Stack } from "@fluentui/react";
-import { FullTextIndex, FullTextPolicy } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-import { scrollToSection } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-
-export interface AddMVFullTextSearchComponentProps {
-  fullTextPolicy: FullTextPolicy;
-  setFullTextPolicy: React.Dispatch<React.SetStateAction<FullTextPolicy>>;
-  setFullTextIndexes: React.Dispatch<React.SetStateAction<FullTextIndex[]>>;
-  setFullTextPolicyValidated: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export const AddMVFullTextSearchComponent = (props: AddMVFullTextSearchComponentProps): JSX.Element => {
-  const { fullTextPolicy, setFullTextPolicy, setFullTextIndexes, setFullTextPolicyValidated } = props;
-
-  return (
-    <Stack>
-      <CollapsibleSectionComponent
-        title="Container Full Text Search Policy"
-        isExpandedByDefault={false}
-        onExpand={() => {
-          scrollToSection("collapsibleFullTextPolicySectionContent");
-        }}
-      >
-        <Stack id="collapsibleFullTextPolicySectionContent" styles={{ root: { position: "relative" } }}>
-          <Stack styles={{ root: { paddingLeft: 40 } }}>
-            <FullTextPoliciesComponent
-              fullTextPolicy={fullTextPolicy}
-              onFullTextPathChange={(
-                fullTextPolicy: FullTextPolicy,
-                fullTextIndexes: FullTextIndex[],
-                fullTextPolicyValidated: boolean,
-              ) => {
-                setFullTextPolicy(fullTextPolicy);
-                setFullTextIndexes(fullTextIndexes);
-                setFullTextPolicyValidated(fullTextPolicyValidated);
-              }}
-            />
-          </Stack>
-        </Stack>
-      </CollapsibleSectionComponent>
-    </Stack>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVPartitionKeyComponent.tsx

@@ -1,132 +0,0 @@
-import { DefaultButton, DirectionalHint, Icon, IconButton, Link, Stack, Text, TooltipHost } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import {
-  getPartitionKeyName,
-  getPartitionKeyPlaceHolder,
-  getPartitionKeyTooltipText,
-} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-
-export interface AddMVPartitionKeyComponentProps {
-  partitionKey?: string;
-  setPartitionKey: React.Dispatch<React.SetStateAction<string>>;
-  subPartitionKeys: string[];
-  setSubPartitionKeys: React.Dispatch<React.SetStateAction<string[]>>;
-  useHashV1: boolean;
-}
-
-export const AddMVPartitionKeyComponent = (props: AddMVPartitionKeyComponentProps): JSX.Element => {
-  const { partitionKey, setPartitionKey, subPartitionKeys, setSubPartitionKeys, useHashV1 } = props;
-
-  const partitionKeyValueOnChange = (value: string): void => {
-    if (!partitionKey && !value.startsWith("/")) {
-      setPartitionKey("/" + value);
-    } else {
-      setPartitionKey(value);
-    }
-  };
-
-  const subPartitionKeysValueOnChange = (value: string, index: number): void => {
-    const updatedSubPartitionKeys: string[] = [...subPartitionKeys];
-    if (!updatedSubPartitionKeys[index] && !value.startsWith("/")) {
-      updatedSubPartitionKeys[index] = "/" + value.trim();
-    } else {
-      updatedSubPartitionKeys[index] = value.trim();
-    }
-    setSubPartitionKeys(updatedSubPartitionKeys);
-  };
-
-  return (
-    <Stack>
-      <Stack horizontal>
-        <span className="mandatoryStar">*&nbsp;</span>
-        <Text className="panelTextBold" variant="small">
-          Partition key
-        </Text>
-        <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={getPartitionKeyTooltipText()}>
-          <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
-        </TooltipHost>
-      </Stack>
-
-      <input
-        type="text"
-        id="addmaterializedView-partitionKeyValue"
-        aria-required
-        required
-        size={40}
-        className="panelTextField"
-        placeholder={getPartitionKeyPlaceHolder()}
-        aria-label={getPartitionKeyName()}
-        pattern=".*"
-        value={partitionKey}
-        style={{ marginBottom: 8 }}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          partitionKeyValueOnChange(event.target.value);
-        }}
-      />
-      {subPartitionKeys.map((subPartitionKey: string, subPartitionKeyIndex: number) => {
-        return (
-          <Stack style={{ marginBottom: 8 }} key={`uniqueKey${subPartitionKeyIndex}`} horizontal>
-            <div
-              style={{
-                width: "20px",
-                border: "solid",
-                borderWidth: "0px 0px 1px 1px",
-                marginRight: "5px",
-              }}
-            ></div>
-            <input
-              type="text"
-              id="addMaterializedView-partitionKeyValue"
-              key={`addMaterializedView-partitionKeyValue_${subPartitionKeyIndex}`}
-              aria-required
-              required
-              size={40}
-              tabIndex={subPartitionKeyIndex > 0 ? 1 : 0}
-              className="panelTextField"
-              autoComplete="off"
-              placeholder={getPartitionKeyPlaceHolder(subPartitionKeyIndex)}
-              aria-label={getPartitionKeyName()}
-              pattern={".*"}
-              title={""}
-              value={subPartitionKey}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                subPartitionKeysValueOnChange(event.target.value, subPartitionKeyIndex);
-              }}
-            />
-            <IconButton
-              iconProps={{ iconName: "Delete" }}
-              style={{ height: 27 }}
-              onClick={() => {
-                const updatedSubPartitionKeys = subPartitionKeys.filter(
-                  (_, subPartitionKeyIndexToRemove) => subPartitionKeyIndex !== subPartitionKeyIndexToRemove,
-                );
-                setSubPartitionKeys(updatedSubPartitionKeys);
-              }}
-            />
-          </Stack>
-        );
-      })}
-      <Stack className="panelGroupSpacing">
-        <DefaultButton
-          styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
-          hidden={useHashV1}
-          disabled={subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
-          onClick={() => setSubPartitionKeys([...subPartitionKeys, ""])}
-        >
-          Add hierarchical partition key
-        </DefaultButton>
-        {subPartitionKeys.length > 0 && (
-          <Text variant="small">
-            <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your
-            data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview
-            JavaScript V3 SDK.{" "}
-            <Link href="https://aka.ms/cosmos-hierarchical-partitioning" target="_blank">
-              Learn more
-            </Link>
-          </Text>
-        )}
-      </Stack>
-    </Stack>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVThroughputComponent.tsx

@@ -1,71 +0,0 @@
-import { Checkbox, Stack } from "@fluentui/react";
-import { ThroughputInput } from "Explorer/Controls/ThroughputInput/ThroughputInput";
-import { isFreeTierAccount } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import { useDatabases } from "Explorer/useDatabases";
-import React from "react";
-import { getCollectionName } from "Utils/APITypeUtils";
-import { isServerlessAccount } from "Utils/CapabilityUtils";
-
-export interface AddMVThroughputComponentProps {
-  enableDedicatedThroughput: boolean;
-  setEnabledDedicatedThroughput: React.Dispatch<React.SetStateAction<boolean>>;
-  isSelectedSourceContainerSharedThroughput: () => boolean;
-  showCollectionThroughputInput: () => boolean;
-  materializedViewThroughputOnChange: (materializedViewThroughputValue: number) => void;
-  isMaterializedViewAutoscaleOnChange: (isMaterializedViewAutoscaleValue: boolean) => void;
-  setIsThroughputCapExceeded: React.Dispatch<React.SetStateAction<boolean>>;
-  isCostAknowledgedOnChange: (isCostAknowledgedValue: boolean) => void;
-}
-
-export const AddMVThroughputComponent = (props: AddMVThroughputComponentProps): JSX.Element => {
-  const {
-    enableDedicatedThroughput,
-    setEnabledDedicatedThroughput,
-    isSelectedSourceContainerSharedThroughput,
-    showCollectionThroughputInput,
-    materializedViewThroughputOnChange,
-    isMaterializedViewAutoscaleOnChange,
-    setIsThroughputCapExceeded,
-    isCostAknowledgedOnChange,
-  } = props;
-
-  return (
-    <Stack>
-      {!isServerlessAccount() && isSelectedSourceContainerSharedThroughput() && (
-        <Stack horizontal verticalAlign="center">
-          <Checkbox
-            label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`}
-            checked={enableDedicatedThroughput}
-            styles={{
-              text: { fontSize: 12 },
-              checkbox: { width: 12, height: 12 },
-              label: { padding: 0, alignItems: "center" },
-            }}
-            onChange={(_, isChecked: boolean) => setEnabledDedicatedThroughput(isChecked)}
-          />
-        </Stack>
-      )}
-      {showCollectionThroughputInput() && (
-        <ThroughputInput
-          showFreeTierExceedThroughputTooltip={isFreeTierAccount() && !useDatabases.getState().isFirstResourceCreated()}
-          isDatabase={false}
-          isSharded={false}
-          isFreeTier={isFreeTierAccount()}
-          isQuickstart={false}
-          setThroughputValue={(throughput: number) => {
-            materializedViewThroughputOnChange(throughput);
-          }}
-          setIsAutoscale={(isAutoscale: boolean) => {
-            isMaterializedViewAutoscaleOnChange(isAutoscale);
-          }}
-          setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) => {
-            setIsThroughputCapExceeded(isThroughputCapExceeded);
-          }}
-          onCostAcknowledgeChange={(isAcknowledged: boolean) => {
-            isCostAknowledgedOnChange(isAcknowledged);
-          }}
-        />
-      )}
-    </Stack>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVUniqueKeysComponent.tsx

@@ -1,78 +0,0 @@
-import { ActionButton, IconButton, Stack } from "@fluentui/react";
-import { UniqueKeysHeader } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-import { userContext } from "UserContext";
-
-export interface AddMVUniqueKeysComponentProps {
-  uniqueKeys: string[];
-  setUniqueKeys: React.Dispatch<React.SetStateAction<string[]>>;
-}
-
-export const AddMVUniqueKeysComponent = (props: AddMVUniqueKeysComponentProps): JSX.Element => {
-  const { uniqueKeys, setUniqueKeys } = props;
-
-  const updateUniqueKeysOnChange = (value: string, uniqueKeyToReplaceIndex: number): void => {
-    const updatedUniqueKeys = uniqueKeys.map((uniqueKey: string, uniqueKeyIndex: number) => {
-      if (uniqueKeyToReplaceIndex === uniqueKeyIndex) {
-        return value;
-      }
-      return uniqueKey;
-    });
-    setUniqueKeys(updatedUniqueKeys);
-  };
-
-  const deleteUniqueKeyOnClick = (uniqueKeyToDeleteIndex: number): void => {
-    const updatedUniqueKeys = uniqueKeys.filter((_, uniqueKeyIndex) => uniqueKeyToDeleteIndex !== uniqueKeyIndex);
-    setUniqueKeys(updatedUniqueKeys);
-  };
-
-  const addUniqueKeyOnClick = (): void => {
-    setUniqueKeys([...uniqueKeys, ""]);
-  };
-
-  return (
-    <Stack>
-      {UniqueKeysHeader()}
-
-      {uniqueKeys.map((uniqueKey: string, uniqueKeyIndex: number): JSX.Element => {
-        return (
-          <Stack style={{ marginBottom: 8 }} key={`uniqueKey-${uniqueKeyIndex}`} horizontal>
-            <input
-              type="text"
-              autoComplete="off"
-              placeholder={
-                userContext.apiType === "Mongo"
-                  ? "Comma separated paths e.g. firstName,address.zipCode"
-                  : "Comma separated paths e.g. /firstName,/address/zipCode"
-              }
-              className="panelTextField"
-              autoFocus
-              value={uniqueKey}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                updateUniqueKeysOnChange(event.target.value, uniqueKeyIndex);
-              }}
-            />
-
-            <IconButton
-              iconProps={{ iconName: "Delete" }}
-              style={{ height: 27 }}
-              onClick={() => {
-                deleteUniqueKeyOnClick(uniqueKeyIndex);
-              }}
-            />
-          </Stack>
-        );
-      })}
-
-      <ActionButton
-        iconProps={{ iconName: "Add" }}
-        styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
-        onClick={() => {
-          addUniqueKeyOnClick();
-        }}
-      >
-        Add unique key
-      </ActionButton>
-    </Stack>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMVVectorSearchComponent.tsx

@@ -1,58 +0,0 @@
-import { Stack } from "@fluentui/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
-import {
-  ContainerVectorPolicyTooltipContent,
-  scrollToSection,
-} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import React from "react";
-
-export interface AddMVVectorSearchComponentProps {
-  vectorEmbeddingPolicy: VectorEmbedding[];
-  setVectorEmbeddingPolicy: React.Dispatch<React.SetStateAction<VectorEmbedding[]>>;
-  vectorIndexingPolicy: VectorIndex[];
-  setVectorIndexingPolicy: React.Dispatch<React.SetStateAction<VectorIndex[]>>;
-  setVectorPolicyValidated: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const AddMVVectorSearchComponent = (props: AddMVVectorSearchComponentProps): JSX.Element => {
-  const {
-    vectorEmbeddingPolicy,
-    setVectorEmbeddingPolicy,
-    vectorIndexingPolicy,
-    setVectorIndexingPolicy,
-    setVectorPolicyValidated,
-  } = props;
-
-  return (
-    <Stack>
-      <CollapsibleSectionComponent
-        title="Container Vector Policy"
-        isExpandedByDefault={false}
-        onExpand={() => {
-          scrollToSection("collapsibleVectorPolicySectionContent");
-        }}
-        tooltipContent={ContainerVectorPolicyTooltipContent()}
-      >
-        <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-          <Stack styles={{ root: { paddingLeft: 40 } }}>
-            <VectorEmbeddingPoliciesComponent
-              vectorEmbeddings={vectorEmbeddingPolicy}
-              vectorIndexes={vectorIndexingPolicy}
-              onVectorEmbeddingChange={(
-                vectorEmbeddingPolicy: VectorEmbedding[],
-                vectorIndexingPolicy: VectorIndex[],
-                vectorPolicyValidated: boolean,
-              ) => {
-                setVectorEmbeddingPolicy(vectorEmbeddingPolicy);
-                setVectorIndexingPolicy(vectorIndexingPolicy);
-                setVectorPolicyValidated(vectorPolicyValidated);
-              }}
-            />
-          </Stack>
-        </Stack>
-      </CollapsibleSectionComponent>
-    </Stack>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel.test.tsx

@@ -1,28 +0,0 @@
-import { shallow, ShallowWrapper } from "enzyme";
-import Explorer from "Explorer/Explorer";
-import {
-  AddMaterializedViewPanel,
-  AddMaterializedViewPanelProps,
-} from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
-import React, { Component } from "react";
-
-const props: AddMaterializedViewPanelProps = {
-  explorer: new Explorer(),
-};
-
-describe("AddMaterializedViewPanel", () => {
-  it("render default panel", () => {
-    const wrapper: ShallowWrapper<AddMaterializedViewPanelProps, object, Component> = shallow(
-      <AddMaterializedViewPanel {...props} />,
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should render form", () => {
-    const wrapper: ShallowWrapper<AddMaterializedViewPanelProps, object, Component> = shallow(
-      <AddMaterializedViewPanel {...props} />,
-    );
-    const form = wrapper.find("form").first();
-    expect(form).toBeDefined();
-  });
-});

src/Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel.tsx

@@ -1,430 +0,0 @@
-import {
-  DirectionalHint,
-  Dropdown,
-  DropdownMenuItemType,
-  Icon,
-  IDropdownOption,
-  Link,
-  Separator,
-  Stack,
-  Text,
-  TooltipHost,
-} from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { createMaterializedView } from "Common/dataAccess/createMaterializedView";
-import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
-import * as DataModels from "Contracts/DataModels";
-import { FullTextIndex, FullTextPolicy, VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import { Collection, Database } from "Contracts/ViewModels";
-import Explorer from "Explorer/Explorer";
-import {
-  AllPropertiesIndexed,
-  FullTextPolicyDefault,
-  getPartitionKey,
-  isSynapseLinkEnabled,
-  parseUniqueKeys,
-  scrollToSection,
-  shouldShowAnalyticalStoreOptions,
-} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
-import {
-  chooseSourceContainerStyle,
-  chooseSourceContainerStyles,
-} from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanelStyles";
-import { AddMVAdvancedComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVAdvancedComponent";
-import { AddMVAnalyticalStoreComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVAnalyticalStoreComponent";
-import { AddMVFullTextSearchComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVFullTextSearchComponent";
-import { AddMVPartitionKeyComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVPartitionKeyComponent";
-import { AddMVThroughputComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVThroughputComponent";
-import { AddMVUniqueKeysComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVUniqueKeysComponent";
-import { AddMVVectorSearchComponent } from "Explorer/Panes/AddMaterializedViewPanel/AddMVVectorSearchComponent";
-import { PanelFooterComponent } from "Explorer/Panes/PanelFooterComponent";
-import { PanelInfoErrorComponent } from "Explorer/Panes/PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "Explorer/Panes/PanelLoadingScreen";
-import { useDatabases } from "Explorer/useDatabases";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { useEffect, useState } from "react";
-import { CollectionCreation } from "Shared/Constants";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "UserContext";
-import { isFullTextSearchEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
-
-export interface AddMaterializedViewPanelProps {
-  explorer: Explorer;
-  sourceContainer?: Collection;
-}
-export const AddMaterializedViewPanel = (props: AddMaterializedViewPanelProps): JSX.Element => {
-  const { explorer, sourceContainer } = props;
-
-  const [sourceContainerOptions, setSourceContainerOptions] = useState<IDropdownOption[]>();
-  const [selectedSourceContainer, setSelectedSourceContainer] = useState<Collection>(sourceContainer);
-  const [materializedViewId, setMaterializedViewId] = useState<string>();
-  const [definition, setDefinition] = useState<string>();
-  const [partitionKey, setPartitionKey] = useState<string>(getPartitionKey());
-  const [subPartitionKeys, setSubPartitionKeys] = useState<string[]>([]);
-  const [useHashV1, setUseHashV1] = useState<boolean>();
-  const [enableDedicatedThroughput, setEnabledDedicatedThroughput] = useState<boolean>();
-  const [isThroughputCapExceeded, setIsThroughputCapExceeded] = useState<boolean>();
-  const [uniqueKeys, setUniqueKeys] = useState<string[]>([]);
-  const [enableAnalyticalStore, setEnableAnalyticalStore] = useState<boolean>();
-  const [vectorEmbeddingPolicy, setVectorEmbeddingPolicy] = useState<VectorEmbedding[]>();
-  const [vectorIndexingPolicy, setVectorIndexingPolicy] = useState<VectorIndex[]>();
-  const [vectorPolicyValidated, setVectorPolicyValidated] = useState<boolean>();
-  const [fullTextPolicy, setFullTextPolicy] = useState<FullTextPolicy>(FullTextPolicyDefault);
-  const [fullTextIndexes, setFullTextIndexes] = useState<FullTextIndex[]>();
-  const [fullTextPolicyValidated, setFullTextPolicyValidated] = useState<boolean>();
-  const [errorMessage, setErrorMessage] = useState<string>();
-  const [showErrorDetails, setShowErrorDetails] = useState<boolean>();
-  const [isExecuting, setIsExecuting] = useState<boolean>();
-
-  useEffect(() => {
-    const sourceContainerOptions: IDropdownOption[] = [];
-    useDatabases.getState().databases.forEach((database: Database) => {
-      sourceContainerOptions.push({
-        key: database.rid,
-        text: database.id(),
-        itemType: DropdownMenuItemType.Header,
-      });
-
-      database.collections().forEach((collection: Collection) => {
-        const isMaterializedView: boolean = !!collection.materializedViewDefinition();
-        sourceContainerOptions.push({
-          key: collection.rid,
-          text: collection.id(),
-          disabled: isMaterializedView,
-          ...(isMaterializedView && {
-            title: "This is a materialized view.",
-          }),
-          data: collection,
-        });
-      });
-    });
-
-    setSourceContainerOptions(sourceContainerOptions);
-  }, []);
-
-  useEffect(() => {
-    scrollToSection("panelContainer");
-  }, [errorMessage]);
-
-  let materializedViewThroughput: number;
-  let isMaterializedViewAutoscale: boolean;
-  let isCostAcknowledged: boolean;
-
-  const materializedViewThroughputOnChange = (materializedViewThroughputValue: number): void => {
-    materializedViewThroughput = materializedViewThroughputValue;
-  };
-
-  const isMaterializedViewAutoscaleOnChange = (isMaterializedViewAutoscaleValue: boolean): void => {
-    isMaterializedViewAutoscale = isMaterializedViewAutoscaleValue;
-  };
-
-  const isCostAknowledgedOnChange = (isCostAcknowledgedValue: boolean): void => {
-    isCostAcknowledged = isCostAcknowledgedValue;
-  };
-
-  const isSelectedSourceContainerSharedThroughput = (): boolean => {
-    if (!selectedSourceContainer) {
-      return false;
-    }
-
-    return !!selectedSourceContainer.getDatabase().offer();
-  };
-
-  const showCollectionThroughputInput = (): boolean => {
-    if (isServerlessAccount()) {
-      return false;
-    }
-
-    if (enableDedicatedThroughput) {
-      return true;
-    }
-
-    return !!selectedSourceContainer && !isSelectedSourceContainerSharedThroughput();
-  };
-
-  const showVectorSearchParameters = (): boolean => {
-    return isVectorSearchEnabled() && (isServerlessAccount() || showCollectionThroughputInput());
-  };
-
-  const showFullTextSearchParameters = (): boolean => {
-    return isFullTextSearchEnabled() && (isServerlessAccount() || showCollectionThroughputInput());
-  };
-
-  const getAnalyticalStorageTtl = (): number => {
-    if (!isSynapseLinkEnabled()) {
-      return undefined;
-    }
-
-    if (!shouldShowAnalyticalStoreOptions()) {
-      return undefined;
-    }
-
-    if (enableAnalyticalStore) {
-      // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
-        ? Constants.AnalyticalStorageTtl.Days90
-        : Constants.AnalyticalStorageTtl.Infinite;
-    }
-
-    return Constants.AnalyticalStorageTtl.Disabled;
-  };
-
-  const validateInputs = (): boolean => {
-    if (!selectedSourceContainer) {
-      setErrorMessage("Please select a source container");
-      return false;
-    }
-
-    if (materializedViewThroughput > CollectionCreation.DefaultCollectionRUs100K && !isCostAcknowledged) {
-      const errorMessage = isMaterializedViewAutoscale
-        ? "Please acknowledge the estimated monthly spend."
-        : "Please acknowledge the estimated daily spend.";
-      setErrorMessage(errorMessage);
-      return false;
-    }
-
-    if (materializedViewThroughput > CollectionCreation.MaxRUPerPartition) {
-      setErrorMessage("Unsharded collections support up to 10,000 RUs");
-      return false;
-    }
-
-    if (showVectorSearchParameters()) {
-      if (!vectorPolicyValidated) {
-        setErrorMessage("Please fix errors in container vector policy");
-        return false;
-      }
-
-      if (!fullTextPolicyValidated) {
-        setErrorMessage("Please fix errors in container full text search policy");
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  const submit = async (event?: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    event?.preventDefault();
-
-    if (!validateInputs()) {
-      return;
-    }
-
-    const materializedViewIdTrimmed: string = materializedViewId.trim();
-
-    const materializedViewDefinition: DataModels.MaterializedViewDefinition = {
-      sourceCollectionId: sourceContainer.id(),
-      definition: definition,
-    };
-
-    const partitionKeyTrimmed: string = partitionKey.trim();
-
-    const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = parseUniqueKeys(uniqueKeys);
-    const partitionKeyVersion = useHashV1 ? undefined : 2;
-    const partitionKeyPaths: DataModels.PartitionKey = partitionKeyTrimmed
-      ? {
-          paths: [
-            partitionKeyTrimmed,
-            ...(userContext.apiType === "SQL" && subPartitionKeys.length > 0 ? subPartitionKeys : []),
-          ],
-          kind: userContext.apiType === "SQL" && subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
-          version: partitionKeyVersion,
-        }
-      : undefined;
-
-    const indexingPolicy: DataModels.IndexingPolicy = AllPropertiesIndexed;
-    let vectorEmbeddingPolicyFinal: DataModels.VectorEmbeddingPolicy;
-
-    if (showVectorSearchParameters()) {
-      indexingPolicy.vectorIndexes = vectorIndexingPolicy;
-      vectorEmbeddingPolicyFinal = {
-        vectorEmbeddings: vectorEmbeddingPolicy,
-      };
-    }
-
-    if (showFullTextSearchParameters()) {
-      indexingPolicy.fullTextIndexes = fullTextIndexes;
-    }
-
-    const telemetryData: TelemetryProcessor.TelemetryData = {
-      database: {
-        id: selectedSourceContainer.databaseId,
-        shared: isSelectedSourceContainerSharedThroughput(),
-      },
-      collection: {
-        id: materializedViewIdTrimmed,
-        throughput: materializedViewThroughput,
-        isAutoscale: isMaterializedViewAutoscale,
-        partitionKeyPaths,
-        uniqueKeyPolicy,
-        collectionWithDedicatedThroughput: enableDedicatedThroughput,
-      },
-      subscriptionQuotaId: userContext.quotaId,
-      dataExplorerArea: Constants.Areas.ContextualPane,
-    };
-
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, telemetryData);
-    const databaseLevelThroughput: boolean = isSelectedSourceContainerSharedThroughput() && !enableDedicatedThroughput;
-
-    let offerThroughput: number;
-    let autoPilotMaxThroughput: number;
-
-    if (!databaseLevelThroughput) {
-      if (isMaterializedViewAutoscale) {
-        autoPilotMaxThroughput = materializedViewThroughput;
-      } else {
-        offerThroughput = materializedViewThroughput;
-      }
-    }
-
-    const createMaterializedViewParams: DataModels.CreateMaterializedViewsParams = {
-      materializedViewId: materializedViewIdTrimmed,
-      materializedViewDefinition: materializedViewDefinition,
-      databaseId: selectedSourceContainer.databaseId,
-      databaseLevelThroughput: databaseLevelThroughput,
-      offerThroughput: offerThroughput,
-      autoPilotMaxThroughput: autoPilotMaxThroughput,
-      analyticalStorageTtl: getAnalyticalStorageTtl(),
-      indexingPolicy: indexingPolicy,
-      partitionKey: partitionKeyPaths,
-      uniqueKeyPolicy: uniqueKeyPolicy,
-      vectorEmbeddingPolicy: vectorEmbeddingPolicyFinal,
-      fullTextPolicy: fullTextPolicy,
-    };
-
-    setIsExecuting(true);
-
-    try {
-      await createMaterializedView(createMaterializedViewParams);
-      await explorer.refreshAllDatabases();
-      TelemetryProcessor.traceSuccess(Action.CreateMaterializedView, telemetryData, startKey);
-      useSidePanel.getState().closeSidePanel();
-    } catch (error) {
-      const errorMessage: string = getErrorMessage(error);
-      setErrorMessage(errorMessage);
-      setShowErrorDetails(true);
-      const failureTelemetryData = { ...telemetryData, error: errorMessage, errorStack: getErrorStack(error) };
-      TelemetryProcessor.traceFailure(Action.CreateMaterializedView, failureTelemetryData, startKey);
-    } finally {
-      setIsExecuting(false);
-    }
-  };
-
-  return (
-    <form className="panelFormWrapper" id="panelMaterializedView" onSubmit={submit}>
-      {errorMessage && (
-        <PanelInfoErrorComponent message={errorMessage} messageType="error" showErrorDetails={showErrorDetails} />
-      )}
-      <div className="panelMainContent">
-        <Stack>
-          <Stack horizontal>
-            <span className="mandatoryStar">*&nbsp;</span>
-            <Text className="panelTextBold" variant="small">
-              Source container id
-            </Text>
-          </Stack>
-          <Dropdown
-            placeholder="Choose source container"
-            options={sourceContainerOptions}
-            defaultSelectedKey={sourceContainer?.rid}
-            styles={chooseSourceContainerStyles()}
-            style={chooseSourceContainerStyle()}
-            onChange={(_, options: IDropdownOption) => setSelectedSourceContainer(options.data as Collection)}
-          />
-          <Separator className="panelSeparator" />
-          <Stack horizontal>
-            <span className="mandatoryStar">*&nbsp;</span>
-            <Text className="panelTextBold" variant="small">
-              View container id
-            </Text>
-          </Stack>
-          <input
-            id="materializedViewId"
-            type="text"
-            aria-required
-            required
-            autoComplete="off"
-            pattern="[^/?#\\]*[^/?# \\]"
-            title="May not end with space nor contain characters '\' '/' '#' '?'"
-            placeholder={`e.g., viewByEmailId`}
-            size={40}
-            className="panelTextField"
-            value={materializedViewId}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => setMaterializedViewId(event.target.value)}
-          />
-          <Stack horizontal>
-            <span className="mandatoryStar">*&nbsp;</span>
-            <Text className="panelTextBold" variant="small">
-              Materialized View Definition
-            </Text>
-            <TooltipHost
-              directionalHint={DirectionalHint.bottomLeftEdge}
-              content={
-                <Link
-                  href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/materialized-views#defining-materialized-views"
-                  target="blank"
-                >
-                  Learn more about defining materialized views.
-                </Link>
-              }
-            >
-              <Icon role="button" iconName="Info" className="panelInfoIcon" tabIndex={0} />
-            </TooltipHost>
-          </Stack>
-          <input
-            id="materializedViewDefinition"
-            type="text"
-            aria-required
-            required
-            autoComplete="off"
-            placeholder={"SELECT c.email, c.accountId FROM c"}
-            size={40}
-            className="panelTextField"
-            value={definition || ""}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => setDefinition(event.target.value)}
-          />
-          <AddMVPartitionKeyComponent
-            {...{ partitionKey, setPartitionKey, subPartitionKeys, setSubPartitionKeys, useHashV1 }}
-          />
-          <AddMVThroughputComponent
-            {...{
-              enableDedicatedThroughput,
-              setEnabledDedicatedThroughput,
-              isSelectedSourceContainerSharedThroughput,
-              showCollectionThroughputInput,
-              materializedViewThroughputOnChange,
-              isMaterializedViewAutoscaleOnChange,
-              setIsThroughputCapExceeded,
-              isCostAknowledgedOnChange,
-            }}
-          />
-          <AddMVUniqueKeysComponent {...{ uniqueKeys, setUniqueKeys }} />
-          {shouldShowAnalyticalStoreOptions() && (
-            <AddMVAnalyticalStoreComponent {...{ explorer, enableAnalyticalStore, setEnableAnalyticalStore }} />
-          )}
-          {showVectorSearchParameters() && (
-            <AddMVVectorSearchComponent
-              {...{
-                vectorEmbeddingPolicy,
-                setVectorEmbeddingPolicy,
-                vectorIndexingPolicy,
-                setVectorIndexingPolicy,
-                vectorPolicyValidated,
-                setVectorPolicyValidated,
-              }}
-            />
-          )}
-          {showFullTextSearchParameters() && (
-            <AddMVFullTextSearchComponent
-              {...{ fullTextPolicy, setFullTextPolicy, setFullTextIndexes, setFullTextPolicyValidated }}
-            />
-          )}
-          <AddMVAdvancedComponent {...{ useHashV1, setUseHashV1, setSubPartitionKeys }} />
-        </Stack>
-      </div>
-      <PanelFooterComponent buttonLabel="OK" isButtonDisabled={isThroughputCapExceeded} />
-      {isExecuting && <PanelLoadingScreen />}
-    </form>
-  );
-};

src/Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanelStyles.ts

@@ -1,15 +0,0 @@
-import { IDropdownStyleProps, IDropdownStyles, IStyleFunctionOrObject } from "@fluentui/react";
-import { CSSProperties } from "react";
-
-export function chooseSourceContainerStyles(): IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles> {
-  return {
-    title: { height: 27, lineHeight: 27 },
-    dropdownItem: { fontSize: 12 },
-    dropdownItemDisabled: { fontSize: 12 },
-    dropdownItemSelected: { fontSize: 12 },
-  };
-}
-
-export function chooseSourceContainerStyle(): CSSProperties {
-  return { width: 300, fontSize: 12 };
-}

src/Explorer/Panes/AddMaterializedViewPanel/__snapshots__/AddMaterializedViewPanel.test.tsx.snap

@@ -1,190 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddMaterializedViewPanel render default panel 1`] = `
-<form
-  className="panelFormWrapper"
-  id="panelMaterializedView"
-  onSubmit={[Function]}
->
-  <div
-    className="panelMainContent"
-  >
-    <Stack>
-      <Stack
-        horizontal={true}
-      >
-        <span
-          className="mandatoryStar"
-        >
-          * 
-        </span>
-        <Text
-          className="panelTextBold"
-          variant="small"
-        >
-          Source container id
-        </Text>
-      </Stack>
-      <Dropdown
-        onChange={[Function]}
-        placeholder="Choose source container"
-        style={
-          {
-            "fontSize": 12,
-            "width": 300,
-          }
-        }
-        styles={
-          {
-            "dropdownItem": {
-              "fontSize": 12,
-            },
-            "dropdownItemDisabled": {
-              "fontSize": 12,
-            },
-            "dropdownItemSelected": {
-              "fontSize": 12,
-            },
-            "title": {
-              "height": 27,
-              "lineHeight": 27,
-            },
-          }
-        }
-      />
-      <Separator
-        className="panelSeparator"
-      />
-      <Stack
-        horizontal={true}
-      >
-        <span
-          className="mandatoryStar"
-        >
-          * 
-        </span>
-        <Text
-          className="panelTextBold"
-          variant="small"
-        >
-          View container id
-        </Text>
-      </Stack>
-      <input
-        aria-required={true}
-        autoComplete="off"
-        className="panelTextField"
-        id="materializedViewId"
-        onChange={[Function]}
-        pattern="[^/?#\\\\]*[^/?# \\\\]"
-        placeholder="e.g., viewByEmailId"
-        required={true}
-        size={40}
-        title="May not end with space nor contain characters '\\' '/' '#' '?'"
-        type="text"
-      />
-      <Stack
-        horizontal={true}
-      >
-        <span
-          className="mandatoryStar"
-        >
-          * 
-        </span>
-        <Text
-          className="panelTextBold"
-          variant="small"
-        >
-          Materialized View Definition
-        </Text>
-        <StyledTooltipHostBase
-          content={
-            <StyledLinkBase
-              href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/materialized-views#defining-materialized-views"
-              target="blank"
-            >
-              Learn more about defining materialized views.
-            </StyledLinkBase>
-          }
-          directionalHint={4}
-        >
-          <Icon
-            className="panelInfoIcon"
-            iconName="Info"
-            role="button"
-            tabIndex={0}
-          />
-        </StyledTooltipHostBase>
-      </Stack>
-      <input
-        aria-required={true}
-        autoComplete="off"
-        className="panelTextField"
-        id="materializedViewDefinition"
-        onChange={[Function]}
-        placeholder="SELECT c.email, c.accountId FROM c"
-        required={true}
-        size={40}
-        type="text"
-        value=""
-      />
-      <AddMVPartitionKeyComponent
-        partitionKey=""
-        setPartitionKey={[Function]}
-        setSubPartitionKeys={[Function]}
-        subPartitionKeys={[]}
-      />
-      <AddMVThroughputComponent
-        isCostAknowledgedOnChange={[Function]}
-        isMaterializedViewAutoscaleOnChange={[Function]}
-        isSelectedSourceContainerSharedThroughput={[Function]}
-        materializedViewThroughputOnChange={[Function]}
-        setEnabledDedicatedThroughput={[Function]}
-        setIsThroughputCapExceeded={[Function]}
-        showCollectionThroughputInput={[Function]}
-      />
-      <AddMVUniqueKeysComponent
-        setUniqueKeys={[Function]}
-        uniqueKeys={[]}
-      />
-      <AddMVAnalyticalStoreComponent
-        explorer={
-          Explorer {
-            "_isInitializingNotebooks": false,
-            "isFixedCollectionWithSharedThroughputSupported": [Function],
-            "isTabsContentExpanded": [Function],
-            "onRefreshDatabasesKeyPress": [Function],
-            "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {
-              "armResourceId": undefined,
-              "retryOptions": {
-                "maxTimeout": 5000,
-                "minTimeout": 5000,
-                "retries": 3,
-              },
-            },
-            "provideFeedbackEmail": [Function],
-            "queriesClient": QueriesClient {
-              "container": [Circular],
-            },
-            "refreshNotebookList": [Function],
-            "resourceTree": ResourceTreeAdapter {
-              "container": [Circular],
-              "copyNotebook": [Function],
-              "parameters": [Function],
-            },
-          }
-        }
-        setEnableAnalyticalStore={[Function]}
-      />
-      <AddMVAdvancedComponent
-        setSubPartitionKeys={[Function]}
-        setUseHashV1={[Function]}
-      />
-    </Stack>
-  </div>
-  <PanelFooterComponent
-    buttonLabel="OK"
-  />
-</form>
-`;

src/Explorer/Panes/PanelComponent.less

@@ -94,7 +94,6 @@
     padding-left: @MediumSpace;
 
     .paneErrorLink {
-      color: @LinkColor;
       cursor: pointer;
       font-size: @mediumFontSize;
     }

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,7 +32,6 @@ import {
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
 import { updateUserContext, userContext } from "UserContext";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
@@ -184,7 +183,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const showEnableEntraIdRbac =
-    isDataplaneRbacSupported(userContext.apiType) &&
+    userContext.apiType === "SQL" &&
     userContext.authType === AuthType.AAD &&
     configContext.platform !== Platform.Fabric &&
     !isEmulator;

src/Explorer/QueryCopilot/CopilotCarousel.tsx

@@ -18,7 +18,7 @@ import { createCollection } from "Common/dataAccess/createCollection";
 import * as DataModels from "Contracts/DataModels";
 import { ContainerSampleGenerator } from "Explorer/DataSamples/ContainerSampleGenerator";
 import Explorer from "Explorer/Explorer";
-import { AllPropertiesIndexed } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import { AllPropertiesIndexed } from "Explorer/Panes/AddCollectionPanel";
 import { PromptCard } from "Explorer/QueryCopilot/PromptCard";
 import { useDatabases } from "Explorer/useDatabases";
 import { useCarousel } from "hooks/useCarousel";

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -393,7 +393,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="off"
+              autoComplete="list"
+              aria-expanded={showSamplePrompts}
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -579,7 +580,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
                   {userContext.feedbackPolicies?.policyAllowFeedback && (
                     <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>{FeedbackLabels.provideFeedback}</Text>
+                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -629,9 +630,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label={FeedbackLabels.provideFeedback}
+                        aria-label="Like"
-                        role="button"
+                        role="toggle"
-                        title="Like"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -649,9 +649,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="button"
+                        role="toggle"
-                        aria-label={FeedbackLabels.provideFeedback}
+                        aria-label="Dislike"
-                        title="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";

src/Explorer/Sidebar.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  makeStyles,
   Menu,
   MenuButton,
   MenuButtonProps,
@@ -8,26 +7,20 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
+  SplitButton,
+  makeStyles,
   mergeClasses,
   shorthands,
-  SplitButton,
 } from "@fluentui/react-components";
 import { Add16Regular, ArrowSync12Regular, ChevronLeft12Regular, ChevronRight12Regular } from "@fluentui/react-icons";
-import { MaterializedViewsLabels } from "Common/Constants";
+import { Platform, configContext } from "ConfigContext";
-import { isMaterializedViewsEnabled } from "Common/DatabaseAccountUtility";
-import { configContext, Platform } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { AddDatabasePanel } from "Explorer/Panes/AddDatabasePanel/AddDatabasePanel";
-import {
-  AddMaterializedViewPanel,
-  AddMaterializedViewPanelProps,
-} from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
 import { Tabs } from "Explorer/Tabs/Tabs";
 import { CosmosFluentProvider, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import { useDatabases } from "Explorer/useDatabases";
 import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric, isFabricMirrored, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { Allotment, AllotmentHandle } from "allotment";
@@ -130,7 +123,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
 
   const actions = useMemo<GlobalCommand[]>(() => {
     if (
-      (isFabric() && userContext.fabricContext?.isReadOnly) ||
+      configContext.platform === Platform.Fabric ||
       userContext.apiType === "Postgres" ||
       userContext.apiType === "VCoreMongo"
     ) {
@@ -144,15 +137,12 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
         id: "new_collection",
         label: `New ${getCollectionName()}`,
         icon: <Add16Regular />,
-        onClick: () => {
+        onClick: () => explorer.onNewCollectionClicked(),
-          const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
-          explorer.onNewCollectionClicked({ databaseId });
-        },
         keyboardAction: KeyboardAction.NEW_COLLECTION,
       },
     ];
 
-    if (configContext.platform !== Platform.Fabric && userContext.apiType !== "Tables") {
+    if (userContext.apiType !== "Tables") {
       actions.push({
         id: "new_database",
         label: `New ${getDatabaseName()}`,
@@ -168,25 +158,6 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
       });
     }
 
-    if (isMaterializedViewsEnabled()) {
-      const addMaterializedViewPanelProps: AddMaterializedViewPanelProps = {
-        explorer,
-      };
-
-      actions.push({
-        id: "new_materialized_view",
-        label: MaterializedViewsLabels.NewMaterializedView,
-        icon: <Add16Regular />,
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              MaterializedViewsLabels.NewMaterializedView,
-              <AddMaterializedViewPanel {...addMaterializedViewPanelProps} />,
-            ),
-      });
-    }
-
     return actions;
   }, [explorer]);
 
@@ -317,7 +288,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   }, [setLoading]);
 
   const hasGlobalCommands = !(
-    isFabricMirrored() ||
+    configContext.platform === Platform.Fabric ||
     userContext.apiType === "Postgres" ||
     userContext.apiType === "VCoreMongo"
   );

src/Explorer/SplashScreen/FabricHome.tsx

@@ -1,173 +0,0 @@
-/**
- * Accordion top class
- */
-import { Link, makeStyles, tokens } from "@fluentui/react-components";
-import { DocumentAddRegular, LinkMultipleRegular } from "@fluentui/react-icons";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
-import * as React from "react";
-import { userContext } from "UserContext";
-import CosmosDbBlackIcon from "../../../images/CosmosDB_black.svg";
-import LinkIcon from "../../../images/Link_blue.svg";
-import Explorer from "../Explorer";
-
-export interface SplashScreenProps {
-  explorer: Explorer;
-}
-
-const useStyles = makeStyles({
-  homeContainer: {
-    width: "100%",
-    alignContent: "center",
-  },
-  title: {
-    textAlign: "center",
-    fontSize: "20px",
-    fontWeight: "bold",
-  },
-  buttonsContainer: {
-    width: "584px",
-    margin: "auto",
-    display: "grid",
-    padding: "16px",
-    gridTemplateColumns: "repeat(3, 1fr)",
-    gap: "10px",
-    gridAutoRows: "minmax(184px, auto)",
-  },
-  one: {
-    gridColumn: "1 / 3",
-    gridRow: "1 / 3",
-    "& svg": {
-      width: "48px",
-      height: "48px",
-      margin: "auto",
-    },
-  },
-  two: {
-    gridColumn: "3",
-    gridRow: "1",
-    "& img": {
-      width: "32px",
-      height: "32px",
-      margin: "auto",
-    },
-  },
-  three: {
-    gridColumn: "3",
-    gridRow: "2",
-    "& svg": {
-      width: "32px",
-      height: "32px",
-      margin: "auto",
-    },
-  },
-  buttonContainer: {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    border: "1px solid #e0e0e0",
-    cursor: "pointer",
-    "&:hover": {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      "border-color": tokens.colorNeutralStroke1Hover,
-    },
-  },
-  buttonUpperPart: {
-    textAlign: "center",
-    flexGrow: 1,
-    display: "flex",
-    backgroundColor: "#e3f7ef",
-  },
-  buttonLowerPart: {
-    borderTop: "1px solid #e0e0e0",
-    height: "76px",
-    padding: "8px",
-    "> div:nth-child(1)": {
-      fontWeight: "bold",
-    },
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-  },
-  footer: {
-    textAlign: "center",
-  },
-});
-
-interface FabricHomeScreenButtonProps {
-  title: string;
-  description: string;
-  icon: JSX.Element;
-  onClick?: () => void;
-}
-
-const FabricHomeScreenButton: React.FC<FabricHomeScreenButtonProps & { className: string }> = ({
-  title,
-  description,
-  icon,
-  className,
-  onClick,
-}) => {
-  const styles = useStyles();
-
-  // TODO Make this a11y copmliant: aria-label for icon
-  return (
-    <div role="button" className={`${styles.buttonContainer} ${className}`} onClick={onClick}>
-      <div className={styles.buttonUpperPart}>{icon}</div>
-      <div className={styles.buttonLowerPart}>
-        <div>{title}</div>
-        <div>{description}</div>
-      </div>
-    </div>
-  );
-};
-
-export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScreenProps) => {
-  const styles = useStyles();
-  const getSplashScreenButtons = (): JSX.Element => {
-    const buttons: FabricHomeScreenButtonProps[] = [
-      {
-        title: "New container",
-        description: "Create a destination container to store your data",
-        icon: <DocumentAddRegular />,
-        onClick: () => {
-          const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
-          props.explorer.onNewCollectionClicked({ databaseId });
-        },
-      },
-      {
-        title: "Sample data",
-        description: "Automatically load sample data in your database",
-        icon: <img src={CosmosDbBlackIcon} />,
-      },
-      {
-        title: "App development",
-        description: "Start here to use an SDK to build your apps",
-        icon: <LinkMultipleRegular />,
-      },
-    ];
-
-    return (
-      <div className={styles.buttonsContainer}>
-        <FabricHomeScreenButton className={styles.one} {...buttons[0]} />
-        <FabricHomeScreenButton className={styles.two} {...buttons[1]} />
-        <FabricHomeScreenButton className={styles.three} {...buttons[2]} />
-      </div>
-    );
-  };
-
-  const title = "Build your database";
-  return (
-    <div className={styles.homeContainer}>
-      <div className={styles.title} role="heading" aria-label={title}>
-        {title}
-      </div>
-      {getSplashScreenButtons()}
-      <div className={styles.footer}>
-        Need help?{" "}
-        <Link href="https://cosmos.azure.com/docs" target="_blank">
-          Learn more <img src={LinkIcon} alt="Learn more" />
-        </Link>
-      </div>
-    </div>
-  );
-};

src/Explorer/Tabs/CloudShellTab/AttachAddOn.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ */
+
+import { IDisposable, ITerminalAddon, Terminal } from 'xterm';
+
+interface IAttachOptions {
+    bidirectional?: boolean;
+}
+
+export class AttachAddon implements ITerminalAddon {
+    private _socket: WebSocket;
+    private _bidirectional: boolean;
+    private _disposables: IDisposable[] = [];
+    private _socketData: string;
+
+    constructor(socket: WebSocket, options?: IAttachOptions) {
+        this._socket = socket;
+        // always set binary type to arraybuffer, we do not handle blobs
+        this._socket.binaryType = 'arraybuffer';
+        this._bidirectional = !(options && options.bidirectional === false);
+        this._socketData = '';
+    }
+
+    public activate(terminal: Terminal): void {
+        this._disposables.push(
+            addSocketListener(this._socket, 'message', ev => {
+                let data: ArrayBuffer | string = ev.data;
+                const startStatusJson = 'ie_us';
+                const endStatusJson = 'ie_ue';
+
+                if (typeof data === 'object') {
+                    const enc = new TextDecoder("utf-8");
+                    data = enc.decode(ev.data as any);
+                }
+
+                // for example of json object look in TerminalHelper in the socket.onMessage
+                if (data.includes(startStatusJson) && data.includes(endStatusJson)) {
+                    // process as one line
+                    const statusData = data.split(startStatusJson)[1].split(endStatusJson)[0];
+                    data = data.replace(statusData, '');
+                    data = data.replace(startStatusJson, '');
+                    data = data.replace(endStatusJson, '');
+                } else if (data.includes(startStatusJson)) {
+                    // check for start
+                    const partialStatusData = data.split(startStatusJson)[1];
+                    this._socketData += partialStatusData;
+                    data = data.replace(partialStatusData, '');
+                    data = data.replace(startStatusJson, '');
+                } else if (data.includes(endStatusJson)) {
+                    // check for end and process the command
+                    const partialStatusData = data.split(endStatusJson)[0];
+                    this._socketData += partialStatusData;
+                    data = data.replace(partialStatusData, '');
+                    data = data.replace(endStatusJson, '');
+                    this._socketData = '';
+                } else if (this._socketData.length > 0) {
+                    // check if the line is all data then just concatenate
+                    this._socketData += data;
+                    data = '';
+                }
+                terminal.write(data);
+            })
+        );
+
+        if (this._bidirectional) {
+            this._disposables.push(terminal.onData(data => this._sendData(data)));
+            this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
+        }
+
+        this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
+        this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()));
+    }
+
+    public dispose(): void {
+        for (const d of this._disposables) {
+            d.dispose();
+        }
+    }
+
+    private _sendData(data: string): void {
+        if (!this._checkOpenSocket()) {
+            return;
+        }
+        this._socket.send(data);
+    }
+
+    private _sendBinary(data: string): void {
+        if (!this._checkOpenSocket()) {
+            return;
+        }
+        const buffer = new Uint8Array(data.length);
+        for (let i = 0; i < data.length; ++i) {
+            buffer[i] = data.charCodeAt(i) & 255;
+        }
+        this._socket.send(buffer);
+    }
+
+    private _checkOpenSocket(): boolean {
+        switch (this._socket.readyState) {
+            case WebSocket.OPEN:
+                return true;
+            case WebSocket.CONNECTING:
+                throw new Error('Attach addon was loaded before socket was open');
+            case WebSocket.CLOSING:
+                return false;
+            case WebSocket.CLOSED:
+                throw new Error('Attach addon socket is closed');
+            default:
+                throw new Error('Unexpected socket state');
+        }
+    }
+}
+
+function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {
+    socket.addEventListener(type, handler);
+    return {
+        dispose: () => {
+            if (!handler) {
+                // Already disposed
+                return;
+            }
+            socket.removeEventListener(type, handler);
+        }
+    };
+}

src/Explorer/Tabs/CloudShellTab/CloudShellTabComponent.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef } from "react";
+import { Terminal } from "xterm";
+import { FitAddon } from 'xterm-addon-fit';
+import "xterm/css/xterm.css";
+import { TerminalKind } from "../../../Contracts/ViewModels";
+import { startCloudShellTerminal } from "./Core/CloudShellTerminalCore";
+
+export interface CloudShellTerminalProps {
+    shellType: TerminalKind;
+}
+
+export const CloudShellTerminalComponent: React.FC<CloudShellTerminalProps> = ({
+    shellType
+}: CloudShellTerminalProps) => {
+    const terminalRef = useRef(null); // Reference for terminal container
+    const xtermRef = useRef(null);    // Reference for XTerm instance
+    const socketRef = useRef(null);   // Reference for WebSocket
+    const fitAddon = new FitAddon();
+
+    useEffect(() => {
+        // Initialize XTerm instance
+        const term = new Terminal({
+            cursorBlink: true,
+            cursorStyle: 'bar',
+            fontFamily: 'monospace',
+            fontSize: 14,
+            theme: {
+                background: "#1e1e1e", 
+                foreground: "#d4d4d4", 
+                cursor: "#ffcc00"
+            },
+            scrollback: 1000
+        });
+
+        term.loadAddon(fitAddon);
+
+        // Attach terminal to the DOM
+        if (terminalRef.current) {
+            term.open(terminalRef.current);
+            xtermRef.current = term;
+        }
+        
+        if (fitAddon) {
+            fitAddon.fit();
+        }
+
+        // Adjust terminal size on window resize
+        const handleResize = () => fitAddon.fit();
+        window.addEventListener('resize', handleResize);
+
+        try {
+            socketRef.current = startCloudShellTerminal(term, shellType);
+            term.onData((data) => {
+                if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
+                    socketRef.current.send(data);
+                }
+            });
+        } catch (error) {
+            console.error("Failed to initialize CloudShell terminal:", error);
+            term.writeln(`\x1B[31mError initializing terminal: ${error.message}\x1B[0m`);
+        }
+
+        // Cleanup function to close WebSocket and dispose terminal
+        return () => {
+            if (!socketRef.current) return;
+            if (socketRef.current) {
+                socketRef.current.close(); // Close WebSocket connection
+            }
+            window.removeEventListener('resize', handleResize);
+            term.dispose(); // Clean up XTerm instance
+        };
+        
+    }, [shellType]);
+
+    return <div ref={terminalRef} style={{ width: "100%", height: "500px"}} />;
+};

src/Explorer/Tabs/CloudShellTab/Commands.tsx

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ */
+
+import { TerminalKind } from "../../../Contracts/ViewModels";
+import { userContext } from "../../../UserContext";
+
+export const getCommands = (terminalKind: TerminalKind, key: string) => {
+    let dbAccount = userContext.databaseAccount;
+    let endpoint;
+    switch (terminalKind) {
+        case TerminalKind.Postgres:
+            endpoint = dbAccount.properties.postgresqlEndpoint;
+            break;
+        case TerminalKind.Mongo:
+            endpoint = dbAccount.properties.mongoEndpoint;
+            break;
+        case TerminalKind.VCoreMongo:
+            endpoint = dbAccount.properties.vcoreMongoEndpoint;
+            break;
+        case TerminalKind.Cassandra:
+            endpoint = dbAccount.properties.cassandraEndpoint;
+            break;
+        default:
+            throw new Error("Unknown Terminal Kind");
+    }
+
+    let config = {
+        host: getHostFromUrl(endpoint),
+        name: dbAccount.name,
+        password: key,
+        endpoint: endpoint
+    };
+
+    return commands(terminalKind, config).join("\n").concat("\n");
+};
+
+export interface CommandConfig {
+    host: string,
+    name: string,
+    password: string,
+    endpoint: string
+}
+
+export const commands = (terminalKind: TerminalKind, config?: CommandConfig): string[] => {
+    switch (terminalKind) {
+        case TerminalKind.Postgres:
+            return [
+                // 1. Fetch and display location details in a readable format
+                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+                // 2. Check if psql is installed; if not, proceed with installation
+                "if ! command -v psql &> /dev/null; then echo '⚠️ psql not found. Installing...'; fi",
+                // 3. Download PostgreSQL if not installed
+                "if ! command -v psql &> /dev/null; then curl -LO https://ftp.postgresql.org/pub/source/v15.2/postgresql-15.2.tar.bz2; fi",
+                // 4. Extract PostgreSQL package if not installed
+                "if ! command -v psql &> /dev/null; then tar -xvjf postgresql-15.2.tar.bz2; fi",
+                // 5. Create a directory for PostgreSQL installation if not installed
+                "if ! command -v psql &> /dev/null; then mkdir -p ~/pgsql; fi",
+                // 6. Download readline (dependency for PostgreSQL) if not installed
+                "if ! command -v psql &> /dev/null; then curl -LO https://ftp.gnu.org/gnu/readline/readline-8.1.tar.gz; fi",
+                // 7. Extract readline package if not installed
+                "if ! command -v psql &> /dev/null; then tar -xvzf readline-8.1.tar.gz; fi",
+                // 8. Configure readline if not installed
+                "if ! command -v psql &> /dev/null; then cd readline-8.1 && ./configure --prefix=$HOME/pgsql; fi",
+                // 9. Add PostgreSQL to PATH if not installed
+                "if ! command -v psql &> /dev/null; then echo 'export PATH=$HOME/pgsql/bin:$PATH' >> ~/.bashrc; fi",
+                // 10. Source .bashrc to update PATH (even if psql was already installed)
+                "source ~/.bashrc",
+                // 11. Verify PostgreSQL installation
+                "psql --version",
+                `psql 'read -p "Enter Database Name: " dbname && read -p "Enter Username: " username && host=${config.endpoint} port=5432 dbname=$dbname user=$username sslmode=require'`
+            ];
+        case TerminalKind.Mongo:
+            return [
+                // 1. Fetch and display location details in a readable format
+                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+                // 2. Check if mongosh is installed; if not, proceed with installation
+                "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
+                // 3. Download mongosh if not installed
+                "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
+                // 4. Extract mongosh package if not installed
+                "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
+                // 5. Move mongosh binaries if not installed
+                "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
+                // 6. Add mongosh to PATH if not installed
+                "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
+                // 7. Source .bashrc to update PATH (even if mongosh was already installed)
+                "source ~/.bashrc",
+                // 8. Verify mongosh installation
+                "mongosh --version",
+                // 9. Login to MongoDB
+                `mongosh --host ${config.host} --port 10255 --username ${config.name} --password ${config.password} --tls --tlsAllowInvalidCertificates`
+            ];   
+        case TerminalKind.VCoreMongo:
+            return [
+                // 1. Fetch and display location details in a readable format
+                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+                // 2. Check if mongosh is installed; if not, proceed with installation
+                "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
+                // 3. Download mongosh if not installed
+                "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
+                // 4. Extract mongosh package if not installed
+                "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
+                // 5. Move mongosh binaries if not installed
+                "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
+                // 6. Add mongosh to PATH if not installed
+                "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
+                // 7. Source .bashrc to update PATH (even if mongosh was already installed)
+                "source ~/.bashrc",
+                // 8. Verify mongosh installation
+                "mongosh --version",
+                // 10. Login to MongoDBmongosh mongodb+srv://<credentials>@neesharma-stage-mongo-vcore.mongocluster.cosmos.azure.com/?authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000\u0007
+                `read -p "Enter username: " username && mongosh "mongodb+srv://$username:@${config.endpoint}/?authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000" --tls --tlsAllowInvalidCertificates`
+            ];     
+        case TerminalKind.Cassandra:
+            return [
+                // 1. Fetch and display location details in a readable format
+                "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+                // 2. Check if cqlsh is installed; if not, proceed with installation
+                "if ! command -v cqlsh &> /dev/null; then echo '⚠️ cqlsh not found. Installing...'; fi",
+                // 3. Download Cassandra if not installed
+                "if ! command -v cqlsh &> /dev/null; then curl -LO https://archive.apache.org/dist/cassandra/5.0.3/apache-cassandra-5.0.3-bin.tar.gz; fi",
+                // 4. Extract Cassandra package if not installed
+                "if ! command -v cqlsh &> /dev/null; then tar -xvzf apache-cassandra-5.0.3-bin.tar.gz; fi",
+                // 5. Move Cassandra binaries if not installed
+                "if ! command -v cqlsh &> /dev/null; then mkdir -p ~/cassandra && mv apache-cassandra-5.0.3/* ~/cassandra/; fi",
+                // 6. Add Cassandra to PATH if not installed
+                "if ! command -v cqlsh &> /dev/null; then echo 'export PATH=$HOME/cassandra/bin:$PATH' >> ~/.bashrc; fi",
+                // 7. Set environment variables for SSL
+                "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VERSION=TLSv1_2' >> ~/.bashrc; fi",
+                "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VALIDATE=false' >> ~/.bashrc; fi",
+                // 8. Source .bashrc to update PATH (even if cqlsh was already installed)
+                "source ~/.bashrc",
+                // 9. Verify cqlsh installation
+                "cqlsh --version",
+                // 10. Login to Cassandra
+                `cqlsh ${config.host} 10350 -u ${config.name} -p ${config.password} --ssl --protocol-version=4`
+            ];
+        default:
+            return ["echo Unknown Shell"];
+    }
+}
+
+const getHostFromUrl = (mongoEndpoint: string): string => {
+    try {
+        const url = new URL(mongoEndpoint);
+        return url.hostname;
+    } catch (error) {
+        console.error("Invalid Mongo Endpoint URL:", error);
+        return "";
+    }
+};

src/Explorer/Tabs/CloudShellTab/Core/CloudShellTerminalCore.tsx

@@ -0,0 +1,393 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Core functionality for CloudShell terminal management
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from "../../../../UserContext";
+import {
+    authorizeSession,
+    connectTerminal,
+    provisionConsole,
+    putEphemeralUserSettings,
+    registerCloudShellProvider,
+    verifyCloudShellProviderRegistration
+} from "../Data/CloudShellApiClient";
+import { getNormalizedRegion } from "../Data/RegionUtils";
+import { ShellTypeHandler } from "../ShellTypes/ShellTypeFactory";
+import { AttachAddon } from "../Utils/AttachAddOn";
+import { wait } from "../Utils/CommonUtils";
+import { terminalLog } from "../Utils/LogFormatter";
+
+// Constants
+const DEFAULT_CLOUDSHELL_REGION = "westus";
+const POLLING_INTERVAL_MS = 5000;
+const MAX_RETRY_COUNT = 10;
+const MAX_PING_COUNT = 20 * 60; // 20 minutes (60 seconds/minute)
+
+/**
+ * Main function to start a CloudShell terminal
+ */
+export const startCloudShellTerminal = async (terminal: Terminal, shellType: TerminalKind) => {
+  // Get the shell handler for this type
+  const shellHandler = ShellTypeHandler.getHandler(shellType);
+  
+  terminal.writeln(terminalLog.header("Initializing Azure CloudShell"));
+  await ensureCloudShellProviderRegistered(terminal);
+
+  const { resolvedRegion, defaultCloudShellRegion } = determineCloudShellRegion(terminal);
+
+  // Ask for user consent for region
+  const consentGranted = await askForRegionConsent(terminal, resolvedRegion);
+  if (!consentGranted) {
+    return {}; // Exit if user declined
+  }
+
+  // Check network requirements for this shell type
+  const networkConfig = await shellHandler.configureNetworkAccess(terminal, resolvedRegion);
+
+  terminal.writeln("");
+  // Provision CloudShell session
+  terminal.writeln(terminalLog.cloudshell(`Provisioning Started....`));
+
+  let sessionDetails: {
+    socketUri?: string;
+    provisionConsoleResponse?: any;
+    targetUri?: string;
+  };
+
+  try {
+    sessionDetails = await provisionCloudShellSession(resolvedRegion, terminal, networkConfig.vNetSettings, networkConfig.isAllPublicAccessEnabled);
+  } catch (err) {
+    terminal.writeln(terminalLog.error(err));
+    terminal.writeln(terminalLog.error("Failed to provision in primary region"));
+    terminal.writeln(terminalLog.warning(`Attempting with fallback region: ${defaultCloudShellRegion}`));
+
+    sessionDetails = await provisionCloudShellSession(defaultCloudShellRegion, terminal, networkConfig.vNetSettings, networkConfig.isAllPublicAccessEnabled);
+  }
+
+  if (!sessionDetails.socketUri) {
+    terminal.writeln(terminalLog.error('Unable to provision console. Please try again later.'));
+    return {};
+  }
+
+  // Configure WebSocket connection with shell-specific commands
+  const socket = await establishTerminalConnection(
+    terminal,
+    shellHandler,
+    sessionDetails.socketUri,
+    sessionDetails.provisionConsoleResponse,
+    sessionDetails.targetUri
+  );
+
+  return socket;
+};
+
+/**
+ * Ensures that the CloudShell provider is registered for the current subscription
+ */
+export const ensureCloudShellProviderRegistered = async (terminal: Terminal): Promise<void> => {
+  try {
+    terminal.writeln(terminalLog.info("Verifying provider registration..."));
+    const response: any = await verifyCloudShellProviderRegistration(userContext.subscriptionId);
+
+    if (response.registrationState !== "Registered") {
+      terminal.writeln(terminalLog.warning("Registering CloudShell provider..."));
+      await registerCloudShellProvider(userContext.subscriptionId);
+      terminal.writeln(terminalLog.success("Provider registration successful"));
+    }
+  } catch (err) {
+    terminal.writeln(terminalLog.error("Unable to verify provider registration"));
+    throw err;
+  }
+};
+
+/**
+ * Determines the appropriate CloudShell region
+ */
+export const determineCloudShellRegion = (terminal: Terminal): { resolvedRegion: string; defaultCloudShellRegion: string } => {
+  const region = userContext.databaseAccount?.location;
+  const resolvedRegion = getNormalizedRegion(region, DEFAULT_CLOUDSHELL_REGION);
+
+  return { resolvedRegion, defaultCloudShellRegion: DEFAULT_CLOUDSHELL_REGION };
+};
+
+/**
+ * Asks the user for consent to use the specified CloudShell region
+ */
+export const askForRegionConsent = async (terminal: Terminal, resolvedRegion: string): Promise<boolean> => {
+  terminal.writeln(terminalLog.header("CloudShell Region Confirmation"));
+  terminal.writeln(terminalLog.info("The CloudShell container will be provisioned in a specific Azure region."));
+  // Data residency and compliance information
+  terminal.writeln(terminalLog.subheader("Important Information"));
+  const dbRegion = userContext.databaseAccount?.location || "unknown";
+  terminal.writeln(terminalLog.item("Database Region", dbRegion));
+  terminal.writeln(terminalLog.item("CloudShell Container Region", resolvedRegion));
+
+  terminal.writeln(terminalLog.subheader("What this means to you?"));
+  terminal.writeln(terminalLog.item("Data Residency", "Commands and query results will be processed in this region"));
+  terminal.writeln(terminalLog.item("Network", "Database connections will originate from this region"));
+
+  // Consent question
+  terminal.writeln("");
+  terminal.writeln(terminalLog.prompt("Would you like to provision Azure CloudShell in the '" + resolvedRegion + "' region?"));
+  terminal.writeln(terminalLog.prompt("Press 'Y' to continue or 'N' to cancel (Y/N)"));
+
+  return new Promise<boolean>((resolve) => {
+    const keyListener = terminal.onKey(({ key }: { key: string }) => {
+      keyListener.dispose();
+      terminal.writeln("");
+
+      if (key.toLowerCase() === 'y') {
+        terminal.writeln(terminalLog.success("Proceeding with CloudShell in " + resolvedRegion));
+        terminal.writeln(terminalLog.separator());
+        resolve(true);
+      } else {
+        terminal.writeln(terminalLog.error("CloudShell provisioning canceled"));
+        setTimeout(() => terminal.dispose(), 2000);
+        resolve(false);
+      }
+    });
+  });
+};
+
+/**
+ * Provisions a CloudShell session
+ */
+export const provisionCloudShellSession = async (
+  resolvedRegion: string,
+  terminal: Terminal,
+  vNetSettings: object,
+  isAllPublicAccessEnabled: boolean
+): Promise<{ socketUri?: string; provisionConsoleResponse?: any; targetUri?: string }> => {
+  return new Promise( async (resolve, reject) => {
+    try {
+      terminal.writeln(terminalLog.header("Configuring CloudShell Session"));
+      // Check if vNetSettings is available and not empty
+      const hasVNetSettings = vNetSettings && Object.keys(vNetSettings).length > 0;
+      if (hasVNetSettings) {
+        terminal.writeln(terminalLog.vnet("Enabling private network configuration"));
+        displayNetworkSettings(terminal, vNetSettings, resolvedRegion);
+      }
+      else {
+        terminal.writeln(terminalLog.warning("No VNet configuration provided"));
+        terminal.writeln(terminalLog.warning("CloudShell will be provisioned with public network access"));
+
+        if (!isAllPublicAccessEnabled) {
+          terminal.writeln(terminalLog.error("Warning: Your database has network restrictions"));
+          terminal.writeln(terminalLog.error("CloudShell may not be able to connect without proper VNet configuration"));
+        }
+      }
+      terminal.writeln(terminalLog.warning("Any previous VNet settings will be overridden"));
+
+       // Apply user settings
+      await putEphemeralUserSettings(userContext.subscriptionId, resolvedRegion, vNetSettings);
+      terminal.writeln(terminalLog.success("Session settings applied"));
+      
+      // Provision console
+      let provisionConsoleResponse;
+      let attemptCounter = 0;
+
+      do {
+        provisionConsoleResponse = await provisionConsole(userContext.subscriptionId, resolvedRegion);
+        terminal.writeln(terminalLog.progress("Provisioning", provisionConsoleResponse.properties.provisioningState));
+        
+        attemptCounter++;
+
+        if (provisionConsoleResponse.properties.provisioningState !== "Succeeded") {
+          await wait(POLLING_INTERVAL_MS);
+        }
+      } while (provisionConsoleResponse.properties.provisioningState !== "Succeeded" && attemptCounter < 10);
+
+      if (provisionConsoleResponse.properties.provisioningState !== "Succeeded") {
+        const errorMessage = `Provisioning failed: ${provisionConsoleResponse.properties.provisioningState}`;
+        terminal.writeln(terminalLog.error(errorMessage));
+        return reject(new Error(errorMessage));
+      }
+      
+      // Connect terminal
+      const connectTerminalResponse = await connectTerminal(
+        provisionConsoleResponse.properties.uri,
+        { rows: terminal.rows, cols: terminal.cols }
+      );
+
+      const targetUri = `${provisionConsoleResponse.properties.uri}/terminals?cols=${terminal.cols}&rows=${terminal.rows}&version=2019-01-01&shell=bash`;
+      const termId = connectTerminalResponse.id;
+
+      // Determine socket URI
+      let socketUri = connectTerminalResponse.socketUri.replace(":443/", "");
+      const targetUriBody = targetUri.replace('https://', '').split('?')[0];
+
+      if (socketUri.indexOf(targetUriBody) === -1) {
+        socketUri = `wss://${targetUriBody}/${termId}`;
+      }
+
+      if (targetUriBody.includes('servicebus')) {
+        const targetUriBodyArr = targetUriBody.split('/');
+        socketUri = `wss://${targetUriBodyArr[0]}/$hc/${targetUriBodyArr[1]}/terminals/${termId}`;
+      }
+
+      return resolve({ socketUri, provisionConsoleResponse, targetUri });
+    } catch (err) {
+      terminal.writeln(terminalLog.error(`Provisioning failed: ${err.message}`));
+      return reject(err);
+    }
+  });
+};
+
+/**
+ * Display VNet settings in the terminal
+ */
+const displayNetworkSettings = (terminal: Terminal, vNetSettings: any, resolvedRegion: string): void => {
+  if (vNetSettings.networkProfileResourceId) {
+    const profileName = vNetSettings.networkProfileResourceId.split('/').pop();
+    terminal.writeln(terminalLog.item("Network Profile", profileName));
+    
+    if (vNetSettings.relayNamespaceResourceId) {
+      const relayName = vNetSettings.relayNamespaceResourceId.split('/').pop();
+      terminal.writeln(terminalLog.item("Relay Namespace", relayName));
+    }
+          
+    terminal.writeln(terminalLog.item("Region", resolvedRegion));
+    terminal.writeln(terminalLog.success("CloudShell will use this VNet to connect to your database"));
+  }
+};
+
+/**
+ * Establishes a terminal connection via WebSocket
+ */
+export const establishTerminalConnection = async (
+  terminal: Terminal,
+  shellHandler: any,
+  socketUri: string,
+  provisionConsoleResponse: any,
+  targetUri: string
+): Promise<WebSocket> => {
+  let socket = new WebSocket(socketUri);
+
+  // Get shell-specific initial commands 
+  const initCommands = await shellHandler.getInitialCommands();
+
+  // Configure the socket
+  socket = configureSocketConnection(socket, socketUri, terminal, initCommands, 0);
+
+  // Attach the terminal addon
+  const attachAddon = new AttachAddon(socket);
+  terminal.loadAddon(attachAddon);
+  terminal.writeln(terminalLog.success("Connection established"));
+
+  // Authorize the session
+  try {
+    const authorizeResponse = await authorizeSession(provisionConsoleResponse.properties.uri);
+    const cookieToken = authorizeResponse.token;
+
+    // Load auth token with a hidden image
+    const img = document.createElement("img");
+    img.src = `${targetUri}&token=${encodeURIComponent(cookieToken)}`;
+    terminal.focus();
+  } catch (err) {
+    terminal.writeln(terminalLog.error("Authorization failed"));
+    socket.close();
+    throw err;
+  }
+
+  return socket;
+};
+
+/**
+ * Configures a WebSocket connection for the terminal
+ */
+export const configureSocketConnection = (
+  socket: WebSocket,
+  uri: string,
+  terminal: Terminal,
+  initCommands: string,
+  socketRetryCount: number
+): WebSocket => {
+  let jsonData = '';
+  let keepAliveID: NodeJS.Timeout = null;
+  let pingCount = 0;
+
+  sendTerminalStartupCommands(socket, initCommands);
+
+  socket.onclose = () => {
+    if (keepAliveID) {
+      clearTimeout(keepAliveID);
+      pingCount = 0;
+    }
+    terminal.writeln(terminalLog.warning("Session terminated. Refresh the page to start a new session."));
+  };
+
+  socket.onerror = () => {
+    if (socketRetryCount < MAX_RETRY_COUNT && socket.readyState !== WebSocket.CLOSED) {
+      configureSocketConnection(socket, uri, terminal, initCommands, socketRetryCount + 1);
+    } else {
+      socket.close();
+    }
+  };
+
+  socket.onmessage = (event: MessageEvent<string>) => {
+    pingCount = 0; // Reset ping count on message receipt
+
+    let eventData = '';
+    if (typeof event.data === "object") {
+      try {
+        const enc = new TextDecoder("utf-8");
+        eventData = enc.decode(event.data as any);
+      } catch (e) {
+        // Not an array buffer, ignore
+      }
+    }
+
+    if (typeof event.data === 'string') {
+      eventData = event.data;
+    }
+
+    // Process event data
+    if (eventData.includes("ie_us") && eventData.includes("ie_ue")) {
+      const statusData = eventData.split('ie_us')[1].split('ie_ue')[0];
+      console.log(statusData);
+    } else if (eventData.includes("ie_us")) {
+      jsonData += eventData.split('ie_us')[1];
+    } else if (eventData.includes("ie_ue")) {
+      jsonData += eventData.split('ie_ue')[0];
+      console.log(jsonData);
+      jsonData = '';
+    } else if (jsonData.length > 0) {
+      jsonData += eventData;
+    }
+  };
+
+  return socket;
+};
+
+/**
+ * Sends startup commands to the terminal
+ */
+export const sendTerminalStartupCommands = (socket: WebSocket, initCommands: string): void => {
+  let keepAliveID: NodeJS.Timeout = null;
+  let pingCount = 0;
+
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(initCommands);
+  } else {
+    socket.onopen = () => {
+      socket.send(initCommands);
+
+      const keepSocketAlive = (socket: WebSocket) => {
+        if (socket.readyState === WebSocket.OPEN) {
+          if (pingCount >= MAX_PING_COUNT) {
+            socket.close();
+          } else {
+            socket.send('');
+            pingCount++;
+            keepAliveID = setTimeout(() => keepSocketAlive(socket), 1000);
+          }
+        }
+      };
+
+      keepSocketAlive(socket);
+    };
+  }
+};

src/Explorer/Tabs/CloudShellTab/Data.tsx

@@ -0,0 +1,320 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ */
+
+import { ApiVersionsConfig, ResourceType } from "Explorer/Tabs/CloudShellTab/DataModels";
+import { v4 as uuidv4 } from 'uuid';
+import { configContext } from "../../../ConfigContext";
+import { TerminalKind } from "../../../Contracts/ViewModels";
+import { userContext } from '../../../UserContext';
+import { armRequest } from "../../../Utils/arm/request";
+import { Authorization, ConnectTerminalResponse, NetworkType, OsType, ProvisionConsoleResponse, SessionType, Settings, ShellType } from "./DataModels";
+
+/**
+ * API version configuration by terminal type and resource type
+ */
+const API_VERSIONS : ApiVersionsConfig = {
+    // Default version for fallback
+    DEFAULT: "2024-07-01",
+    
+    // Resource type specific defaults
+    RESOURCE_DEFAULTS: {
+      [ResourceType.NETWORK]: "2023-05-01",
+      [ResourceType.DATABASE]: "2024-07-01",
+      [ResourceType.VNET]: "2023-05-01",
+      [ResourceType.SUBNET]: "2023-05-01",
+      [ResourceType.RELAY]: "2024-01-01",
+      [ResourceType.ROLE]: "2022-04-01"
+    },
+    
+    // Shell-type specific versions with resource overrides
+    SHELL_TYPES: {
+      [TerminalKind.Mongo]: {
+        [ResourceType.DATABASE]: "2024-11-15"
+      },
+      [TerminalKind.VCoreMongo]: {
+        [ResourceType.DATABASE]: "2024-07-01"
+      },
+      [TerminalKind.Cassandra]: {
+        [ResourceType.DATABASE]: "2024-11-15"
+      }
+    }
+  };
+
+export const validateUserSettings = (userSettings: Settings) => {
+    if (userSettings.sessionType !== SessionType.Ephemeral && userSettings.osType !== OsType.Linux) {
+        return false;
+    } else {
+        return true;
+    }
+}
+
+// Current shell type context
+let currentShellType: TerminalKind | null = null;
+
+/**
+ * Set the active shell type to determine API version
+ */
+export const setShellType = (shellType: TerminalKind): void => {
+  currentShellType = shellType;
+};
+
+/**
+ * Get the appropriate API version based on shell type and resource type
+ * Uses a cascading fallback approach for maximum flexibility
+ */
+export const getApiVersion = (resourceType?: ResourceType): string => {
+    // If no shell type is set, fallback to resource default or global default
+    if (!currentShellType) {
+      return resourceType ? 
+        (API_VERSIONS.RESOURCE_DEFAULTS[resourceType] || API_VERSIONS.DEFAULT) : 
+        API_VERSIONS.DEFAULT;
+    }
+    
+    // Shell type is set, try to get specific version in this priority:
+    // 1. Shell-specific + resource-specific
+    if (resourceType && 
+        API_VERSIONS.SHELL_TYPES[currentShellType]) {
+      const shellTypeConfig = API_VERSIONS.SHELL_TYPES[currentShellType];
+      if (resourceType in shellTypeConfig) {
+        return shellTypeConfig[resourceType] as string;
+      }
+    }
+
+    // 2. Resource-specific default
+    if (resourceType && resourceType in API_VERSIONS.RESOURCE_DEFAULTS) {
+      return API_VERSIONS.RESOURCE_DEFAULTS[resourceType];
+    }
+    
+    // 3. Global default
+    return API_VERSIONS.DEFAULT;
+};
+
+export const getUserRegion = async (subscriptionId: string, resourceGroup: string, accountName: string) => {
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`,
+        method: "GET",
+        apiVersion: "2022-12-01"
+      });
+
+};
+
+export const deleteUserSettings = async (): Promise<void> => {
+    await armRequest<void>({
+        host: configContext.ARM_ENDPOINT,
+        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+        method: "DELETE",
+        apiVersion: "2023-02-01-preview"
+      });
+};
+
+export const getUserSettings = async (): Promise<Settings> => {
+    const resp = await armRequest<any>({
+        host: configContext.ARM_ENDPOINT,
+        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+        method: "GET",
+        apiVersion: "2023-02-01-preview"
+      });
+
+    return resp;
+};
+
+export const putEphemeralUserSettings = async (userSubscriptionId: string, userRegion: string, vNetSettings?: object) => {
+    const ephemeralSettings = {
+        properties: {
+            preferredOsType: OsType.Linux,
+            preferredShellType: ShellType.Bash,
+            preferredLocation: userRegion,
+            networkType: (!vNetSettings || Object.keys(vNetSettings).length === 0) ? NetworkType.Default : (vNetSettings ? NetworkType.Isolated : NetworkType.Default),
+            sessionType: SessionType.Ephemeral,
+            userSubscription: userSubscriptionId,
+            vnetSettings: vNetSettings ?? {}
+        }
+    };
+
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+        method: "PUT",
+        apiVersion: "2023-02-01-preview",
+        body: ephemeralSettings
+      });
+};
+
+export const verifyCloudShellProviderRegistration = async(subscriptionId: string) => {
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell`,
+        method: "GET",
+        apiVersion: "2022-12-01"
+      });
+};
+
+export const registerCloudShellProvider = async (subscriptionId: string) => {
+    return await armRequest({
+        host: configContext.ARM_ENDPOINT,
+        path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell/register`,
+        method: "POST",
+        apiVersion: "2022-12-01"
+      });
+};
+
+export const provisionConsole = async (subscriptionId: string, location: string): Promise<ProvisionConsoleResponse> => {
+    const data = {
+        properties: {
+            osType: OsType.Linux
+        }
+    };
+
+    return await armRequest<any>({
+        host: configContext.ARM_ENDPOINT,
+        path: `providers/Microsoft.Portal/consoles/default`,
+        method: "PUT",
+        apiVersion: "2023-02-01-preview",
+        customHeaders: {
+            'x-ms-console-preferred-location': location
+        },
+        body: data,
+      });
+};
+
+export const connectTerminal = async (consoleUri: string, size: { rows: number, cols: number }): Promise<ConnectTerminalResponse> => {
+    const targetUri = consoleUri + `/terminals?cols=${size.cols}&rows=${size.rows}&version=2019-01-01&shell=bash`;
+    const resp = await fetch(targetUri, {
+        method: "POST",
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Content-Length': '2',
+            'Authorization': userContext.authorizationToken,
+            'x-ms-client-request-id': uuidv4(),
+            'Accept-Language': getLocale(),
+        },
+        body: "{}" // empty body is necessary
+    });
+    return resp.json();
+};
+
+export const authorizeSession = async (consoleUri: string): Promise<Authorization> => {
+    const targetUri = consoleUri + "/authorize";
+    const resp = await fetch(targetUri, {
+        method: "POST",
+        headers: {
+            'Accept': 'application/json',
+            'Authorization': userContext.authorizationToken,
+            'Accept-Language': getLocale(),
+            "Content-Type": 'application/json'
+        },
+        body: "{}" // empty body is necessary
+    });
+    return resp.json();
+};
+
+export const getLocale = () => {
+    const langLocale = navigator.language;
+    return (langLocale && langLocale.length === 2 ? langLocale[1] : 'en-us');
+};
+
+const validCloudShellRegions = new Set(["westus", "southcentralus", "eastus", "northeurope", "westeurope", "centralindia", "southeastasia", "westcentralus"]);
+
+export const getNormalizedRegion = (region: string, defaultCloudshellRegion: string) => {
+    if (!region) return defaultCloudshellRegion;
+    
+    const regionMap: Record<string, string> = {
+      "centralus": "westcentralus",
+      "eastus2": "eastus"
+    };
+    
+    const normalizedRegion = regionMap[region.toLowerCase()] || region;
+    return validCloudShellRegions.has(normalizedRegion.toLowerCase()) ? normalizedRegion : defaultCloudshellRegion;
+};
+  
+export async function getNetworkProfileInfo<T>(networkProfileResourceId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
+    return await GetARMCall<T>(networkProfileResourceId, apiVersion);
+}
+
+export async function getAccountDetails<T>(databaseAccountId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
+    return await GetARMCall<T>(databaseAccountId, apiVersion);
+}
+
+export async function getVnetInformation<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
+    return await GetARMCall<T>(vnetId, apiVersion);
+}
+
+export async function getSubnetInformation<T>(subnetId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
+    return await GetARMCall<T>(subnetId, apiVersion);
+}
+
+export async function updateSubnetInformation<T>(subnetId: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
+    return await PutARMCall(subnetId, request, apiVersion);
+}
+
+export async function updateDatabaseAccount<T>(accountId: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
+    return await PutARMCall(accountId, request, apiVersion);
+}
+
+export async function getDatabaseOperations<T>(accountId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
+    return await GetARMCall<T>(`${accountId}/operations`, apiVersion);  
+}
+
+export async function updateVnet<T>(vnetId: string, request: object, apiVersionOverride?: string) {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
+    return await PutARMCall<T>(vnetId, request, apiVersion);
+}
+
+export async function getVnet<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
+    return await GetARMCall<T>(vnetId, apiVersion);  
+}
+
+export async function createNetworkProfile<T>(networkProfileId: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
+    return await PutARMCall<T>(networkProfileId, request, apiVersion);
+}
+
+export async function createRelay<T>(relayId: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
+    return await PutARMCall<T>(relayId, request, apiVersion);
+}
+
+export async function getRelay<T>(relayId: string, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
+    return await GetARMCall<T>(relayId, apiVersion);
+}
+
+export async function createRoleOnNetworkProfile<T>(roleid: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
+    return await PutARMCall<T>(roleid, request, apiVersion); 
+}
+
+export async function createRoleOnRelay<T>(roleid: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
+    return await PutARMCall<T>(roleid, request, apiVersion); 
+}
+
+export async function GetARMCall<T>(path: string, apiVersion: string = API_VERSIONS.DEFAULT): Promise<T> {
+    return await armRequest<T>({
+        host: configContext.ARM_ENDPOINT,
+        path: path,
+        method: "GET",
+        apiVersion: apiVersion
+    });
+}
+
+export async function PutARMCall<T>(path: string, request: object, apiVersion: string = API_VERSIONS.DEFAULT): Promise<T> {
+    return await armRequest<T>({
+        host: configContext.ARM_ENDPOINT,
+        path: path,
+        method: "PUT",
+        apiVersion: apiVersion,
+        body: request
+    });
+}

src/Explorer/Tabs/CloudShellTab/Data/CloudShellApiClient.tsx

@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ * CloudShell API client for various operations
+ */
+
+import { v4 as uuidv4 } from 'uuid';
+import { configContext } from "../../../../ConfigContext";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from '../../../../UserContext';
+import { armRequest } from "../../../../Utils/arm/request";
+import { ApiVersionsConfig, DEFAULT_API_VERSIONS } from "../Models/ApiVersions";
+import { Authorization, ConnectTerminalResponse, NetworkType, OsType, ProvisionConsoleResponse, ResourceType, SessionType, Settings, ShellType } from "../Models/DataModels";
+import { getLocale } from '../Data/LocalizationUtils';
+
+// Current shell type context
+let currentShellType: TerminalKind | null = null;
+
+/**
+ * Set the active shell type to determine API version
+ */
+export const setShellType = (shellType: TerminalKind): void => {
+  currentShellType = shellType;
+};
+
+/**
+ * Get the appropriate API version based on shell type and resource type
+ */
+export const getApiVersion = (resourceType?: ResourceType, apiVersions?: ApiVersionsConfig): string => {
+  if (!apiVersions) {
+    apiVersions = DEFAULT_API_VERSIONS; // Default fallback
+  }
+
+  // Shell type is set, try to get specific version in this priority:
+  // 1. Shell-specific + resource-specific
+  if (resourceType && 
+      apiVersions.SHELL_TYPES[currentShellType]) {
+    const shellTypeConfig = apiVersions.SHELL_TYPES[currentShellType];
+    if (resourceType in shellTypeConfig) {
+      return shellTypeConfig[resourceType] as string;
+    }
+  }
+
+  // 2. Resource-specific default
+  if (resourceType && resourceType in apiVersions.RESOURCE_DEFAULTS) {
+    return apiVersions.RESOURCE_DEFAULTS[resourceType];
+  }
+  
+  // 3. Global default
+  return apiVersions.DEFAULT;
+};
+
+export const getUserRegion = async (subscriptionId: string, resourceGroup: string, accountName: string) => {
+  return await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`,
+      method: "GET",
+      apiVersion: "2022-12-01"
+    });
+};
+
+export const deleteUserSettings = async (): Promise<void> => {
+  await armRequest<void>({
+      host: configContext.ARM_ENDPOINT,
+      path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+      method: "DELETE",
+      apiVersion: "2023-02-01-preview"
+    });
+};
+
+export const getUserSettings = async (): Promise<Settings> => {
+  const resp = await armRequest<any>({
+      host: configContext.ARM_ENDPOINT,
+      path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+      method: "GET",
+      apiVersion: "2023-02-01-preview"
+    });
+  return resp;
+};
+
+export const putEphemeralUserSettings = async (userSubscriptionId: string, userRegion: string, vNetSettings?: object) => {
+  const ephemeralSettings = {
+      properties: {
+          preferredOsType: OsType.Linux,
+          preferredShellType: ShellType.Bash,
+          preferredLocation: userRegion,
+          networkType: (!vNetSettings || Object.keys(vNetSettings).length === 0) ? NetworkType.Default : (vNetSettings ? NetworkType.Isolated : NetworkType.Default),
+          sessionType: SessionType.Ephemeral,
+          userSubscription: userSubscriptionId,
+          vnetSettings: vNetSettings ?? {}
+      }
+  };
+
+  return await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: `/providers/Microsoft.Portal/userSettings/cloudconsole`,
+      method: "PUT",
+      apiVersion: "2023-02-01-preview",
+      body: ephemeralSettings
+    });
+};
+
+export const verifyCloudShellProviderRegistration = async(subscriptionId: string) => {
+  return await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell`,
+      method: "GET",
+      apiVersion: "2022-12-01"
+    });
+};
+
+export const registerCloudShellProvider = async (subscriptionId: string) => {
+  return await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: `/subscriptions/${subscriptionId}/providers/Microsoft.CloudShell/register`,
+      method: "POST",
+      apiVersion: "2022-12-01"
+    });
+};
+
+export const provisionConsole = async (subscriptionId: string, location: string): Promise<ProvisionConsoleResponse> => {
+  const data = {
+      properties: {
+          osType: OsType.Linux
+      }
+  };
+
+  return await armRequest<any>({
+      host: configContext.ARM_ENDPOINT,
+      path: `providers/Microsoft.Portal/consoles/default`,
+      method: "PUT",
+      apiVersion: "2023-02-01-preview",
+      customHeaders: {
+          'x-ms-console-preferred-location': location
+      },
+      body: data,
+    });
+};
+
+export const connectTerminal = async (consoleUri: string, size: { rows: number, cols: number }): Promise<ConnectTerminalResponse> => {
+  const targetUri = consoleUri + `/terminals?cols=${size.cols}&rows=${size.rows}&version=2019-01-01&shell=bash`;
+  const resp = await fetch(targetUri, {
+      method: "POST",
+      headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'Content-Length': '2',
+          'Authorization': userContext.authorizationToken,
+          'x-ms-client-request-id': uuidv4(),
+          'Accept-Language': getLocale(),
+      },
+      body: "{}" // empty body is necessary
+  });
+  return resp.json();
+};
+
+export const authorizeSession = async (consoleUri: string): Promise<Authorization> => {
+  const targetUri = consoleUri + "/authorize";
+  const resp = await fetch(targetUri, {
+      method: "POST",
+      headers: {
+          'Accept': 'application/json',
+          'Authorization': userContext.authorizationToken,
+          'Accept-Language': getLocale(),
+          "Content-Type": 'application/json'
+      },
+      body: "{}" // empty body is necessary
+  });
+  return resp.json();
+};
+
+export async function getNetworkProfileInfo<T>(networkProfileResourceId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
+  return await GetARMCall<T>(networkProfileResourceId, apiVersion);
+}
+
+export async function getAccountDetails<T>(databaseAccountId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
+  return await GetARMCall<T>(databaseAccountId, apiVersion);
+}
+
+export async function getVnetInformation<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
+  return await GetARMCall<T>(vnetId, apiVersion);
+}
+
+export async function getSubnetInformation<T>(subnetId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
+  return await GetARMCall<T>(subnetId, apiVersion);
+}
+
+export async function updateSubnetInformation<T>(subnetId: string, request: object, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.SUBNET);
+  return await PutARMCall<T>(subnetId, request, apiVersion);
+}
+
+export async function updateDatabaseAccount<T>(accountId: string, request: object, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
+  return await PutARMCall<T>(accountId, request, apiVersion);
+}
+
+export async function getDatabaseOperations<T>(accountId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.DATABASE);
+  return await GetARMCall<T>(`${accountId}/operations`, apiVersion);  
+}
+
+export async function updateVnet<T>(vnetId: string, request: object, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
+  return await PutARMCall<T>(vnetId, request, apiVersion);
+}
+
+export async function getVnet<T>(vnetId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.VNET);
+  return await GetARMCall<T>(vnetId, apiVersion);  
+}
+
+export async function createNetworkProfile<T>(networkProfileId: string, request: object, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
+  return await PutARMCall<T>(networkProfileId, request, apiVersion);
+}
+
+export async function createRelay<T>(relayId: string, request: object, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
+  return await PutARMCall<T>(relayId, request, apiVersion);
+}
+
+export async function getRelay<T>(relayId: string, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.RELAY);
+  return await GetARMCall<T>(relayId, apiVersion);
+}
+
+export async function createRoleOnNetworkProfile<T>(roleId: string, request: object, apiVersionOverride?: string): Promise<T> {
+const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
+  return await PutARMCall<T>(roleId, request, apiVersion); 
+}
+
+export async function createRoleOnRelay<T>(roleId: string, request: object, apiVersionOverride?: string): Promise<T> {
+  const apiVersion = apiVersionOverride || getApiVersion(ResourceType.ROLE);
+  return await PutARMCall<T>(roleId, request, apiVersion); 
+}
+
+export async function createPrivateEndpoint<T>(privateEndpointId: string, request: object, apiVersionOverride?: string): Promise<T> {
+    const apiVersion = apiVersionOverride || getApiVersion(ResourceType.NETWORK);
+    return await PutARMCall<T>(privateEndpointId, request, apiVersion);
+}
+
+export async function GetARMCall<T>(path: string, apiVersion: string = '2024-07-01'): Promise<T> {
+  return await armRequest<T>({
+      host: configContext.ARM_ENDPOINT,
+      path: path,
+      method: "GET",
+      apiVersion: apiVersion
+  });
+}
+
+export async function PutARMCall<T>(path: string, request: object, apiVersion: string = '2024-07-01'): Promise<T> {
+  return await armRequest<T>({
+      host: configContext.ARM_ENDPOINT,
+      path: path,
+      method: "PUT",
+      apiVersion: apiVersion,
+      body: request
+  });
+}

src/Explorer/Tabs/CloudShellTab/Data/LocalizationUtils.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ * Localization utilities for CloudShell
+ */
+
+/**
+ * Gets the current locale for API requests
+ */
+export const getLocale = (): string => {
+  const langLocale = navigator.language;
+  return (langLocale && langLocale.length > 2 ? langLocale : 'en-us');
+};

src/Explorer/Tabs/CloudShellTab/Data/RegionUtils.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ * Region utilities for CloudShell
+ */
+
+export const getLocale = () => {
+  const langLocale = navigator.language;
+  return (langLocale && langLocale.length === 2 ? langLocale[1] : 'en-us');
+};
+
+const validCloudShellRegions = new Set([
+  "westus", 
+  "southcentralus", 
+  "eastus", 
+  "northeurope", 
+  "westeurope", 
+  "centralindia", 
+  "southeastasia", 
+  "westcentralus"
+]);
+
+/**
+ * Normalizes a region name to a valid CloudShell region
+ * @param region The region to normalize
+ * @param defaultCloudshellRegion Default region to use if the provided region is not supported
+ */
+export const getNormalizedRegion = (region: string, defaultCloudshellRegion: string) => {
+  if (!region) return defaultCloudshellRegion;
+  
+  const regionMap: Record<string, string> = {
+    "centralus": "westcentralus",
+    "eastus2": "eastus"
+  };
+  
+  const normalizedRegion = regionMap[region.toLowerCase()] || region;
+  return validCloudShellRegions.has(normalizedRegion.toLowerCase()) ? normalizedRegion : defaultCloudshellRegion;
+};

src/Explorer/Tabs/CloudShellTab/DataModels.tsx

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ */
+import { TerminalKind } from "../../../Contracts/ViewModels";
+
+export const enum OsType {
+    Linux = "linux",
+    Windows = "windows"
+}
+
+export const enum ShellType {
+    Bash = "bash",
+    PowerShellCore = "pwsh"
+}
+  
+export const enum NetworkType {
+    Default = "Default",
+    Isolated = "Isolated"
+}
+
+export const enum SessionType {
+    Mounted = "Mounted",
+    Ephemeral = "Ephemeral"
+}
+
+export const enum UserInputs {
+    NoReset = "1",
+    ConfigureVNet = "2",
+    ResetVNet = "3"
+};
+
+export type Settings = {
+    properties: UserSettingProperties
+};
+
+export type UserSettingProperties = {
+    networkType: string;  
+    preferredLocation: string;
+    preferredOsType: OsType;
+    preferredShellType: ShellType;
+    userSubscription: string;
+    sessionType: SessionType;
+    vnetSettings: VnetSettings; 
+}
+
+export type VnetSettings = {
+    networkProfileResourceId?: string;
+    relayNamespaceResourceId?: string;
+    location?: string;
+}
+
+export type ProvisionConsoleResponse = {
+    properties: {
+        osType: OsType;
+        provisioningState: string;
+        uri: string;
+    };
+};
+
+export type Authorization = {
+    token: string;
+};
+
+export type ConnectTerminalResponse = {
+    id: string;
+    idleTimeout: string;
+    rootDirectory: string;
+    socketUri: string;
+    tokenUpdated: boolean;
+};
+
+export type VnetModel = {
+    name: string;
+    id: string;
+    etag: string;
+    type: string;
+    location: string;
+    tags: Record<string, string>;
+    properties: {
+        provisioningState: string;
+        resourceGuid: string;
+        addressSpace: {
+            addressPrefixes: string[];
+        };
+        encryption: {
+            enabled: boolean;
+            enforcement: string;
+        };
+        privateEndpointVNetPolicies: string;
+        subnets: Array<{
+            name: string;
+            id: string;
+            etag: string;
+            type: string;
+            properties: {
+                provisioningState: string;
+                addressPrefixes?: string[];
+                addressPrefix?: string;
+                networkSecurityGroup?: { id: string };
+                ipConfigurations?: { id: string }[];
+                ipConfigurationProfiles?: { id: string }[];
+                privateEndpoints?: { id: string }[];
+                serviceEndpoints?: Array<{
+                    provisioningState: string;
+                    service: string;
+                    locations: string[];
+                }>;
+                delegations?: Array<{
+                    name: string;
+                    id: string;
+                    etag: string;
+                    type: string;
+                    properties: {
+                        provisioningState: string;
+                        serviceName: string;
+                        actions: string[];
+                    };
+                }>;
+                purpose?: string;
+                privateEndpointNetworkPolicies?: string;
+                privateLinkServiceNetworkPolicies?: string;
+            };
+        }>;
+        virtualNetworkPeerings: any[];
+        enableDdosProtection: boolean;
+    };
+};
+
+export type RelayNamespace = {
+    id: string;
+    name: string;
+    type: string;
+    location: string;
+    tags: Record<string, string>;
+    properties: {
+        metricId: string;
+        serviceBusEndpoint: string;
+        provisioningState: string;
+        status: string;
+        createdAt: string;
+        updatedAt: string;
+    };
+    sku: {
+        name: string;
+        tier: string;
+    };
+};
+
+export type RelayNamespaceResponse = {
+    value: RelayNamespace[];
+};
+
+/**
+ * Resource types for API versioning
+ */
+export enum ResourceType {
+    NETWORK = "NETWORK",
+    DATABASE = "DATABASE",
+    VNET = "VNET",
+    SUBNET = "SUBNET",
+    RELAY = "RELAY",
+    ROLE = "ROLE"
+  }
+
+// Type definition for API_VERSIONS configuration
+export type ApiVersionsConfig = {
+    // Global default API version
+    DEFAULT: string;
+    
+    // Resource-specific default API versions
+    RESOURCE_DEFAULTS: {
+      [key in ResourceType]: string;
+    };
+    
+    // Shell-type specific configurations
+    SHELL_TYPES: {
+      [key in TerminalKind]?: {
+        // Resource-specific overrides for this shell type
+        [key in ResourceType]?: string;
+      };
+    };
+  };
+  
+
+

src/Explorer/Tabs/CloudShellTab/LogFormatter.tsx

@@ -0,0 +1,29 @@
+
+/**
+ * Standardized terminal logging functions for consistent formatting
+ */
+export const terminalLog = {
+  // Section headers
+  header: (message: string) => `\n\x1B[1;34m┌─ ${message} ${"─".repeat(Math.max(45 - message.length, 0))}\x1B[0m`,
+  subheader: (message: string) => `\x1B[1;36m├ ${message}\x1B[0m`,
+  sectionEnd: () => `\x1B[1;34m└${"─".repeat(50)}\x1B[0m\n`,
+  
+  // Status messages
+  success: (message: string) => `\x1B[32m✓ ${message}\x1B[0m`,
+  warning: (message: string) => `\x1B[33m⚠ ${message}\x1B[0m`,
+  error: (message: string) => `\x1B[31m✗ ${message}\x1B[0m`,
+  info: (message: string) => `\x1B[34m${message}\x1B[0m`,
+  
+  // Resource information
+  database: (message: string) => `\x1B[35m🔶  Database: ${message}\x1B[0m`,
+  vnet: (message: string) => `\x1B[36m🔷  Network: ${message}\x1B[0m`,
+  cloudshell: (message: string) => `\x1B[32m🔷  CloudShell: ${message}\x1B[0m`,
+  
+  // Data formatting
+  item: (label: string, value: string) => `  • ${label}: \x1B[32m${value}\x1B[0m`,
+  progress: (operation: string, status: string) => `\x1B[34m${operation}: \x1B[36m${status}\x1B[0m`,
+  
+  // User interaction
+  prompt: (message: string) => `\x1B[1;37m${message}\x1B[0m`,
+  separator: () => `\x1B[30;1m${"─".repeat(50)}\x1B[0m`
+};

src/Explorer/Tabs/CloudShellTab/Models/ApiVersions.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ * API versions configuration for CloudShell
+ */
+
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { ResourceType } from "./DataModels";
+
+/**
+ * Configuration for API versions used by the CloudShell
+ */
+export type ApiVersionsConfig = {
+    DEFAULT: string;
+    RESOURCE_DEFAULTS: Record<ResourceType, string>;
+    SHELL_TYPES: Record<TerminalKind, Record<ResourceType, string>>;
+}
+
+/**
+ * Default API versions configuration
+ */
+export const DEFAULT_API_VERSIONS: ApiVersionsConfig = {
+    DEFAULT: '2024-07-01',
+    RESOURCE_DEFAULTS: {
+      [ResourceType.DATABASE]: '2024-11-15',
+      [ResourceType.NETWORK]: '2024-07-01',
+      [ResourceType.VNET]: '2024-07-01',
+      [ResourceType.SUBNET]: '2024-07-01',
+      [ResourceType.RELAY]: '2022-10-01',
+      [ResourceType.ROLE]: '2022-04-01',
+    },
+    SHELL_TYPES: {
+      [TerminalKind.Mongo]: {
+        [ResourceType.DATABASE]: '2024-11-15',
+        [ResourceType.NETWORK]: '2024-07-01',
+        [ResourceType.VNET]: '2024-07-01',
+        [ResourceType.SUBNET]: '2024-07-01',
+        [ResourceType.RELAY]: '2024-01-01',
+        [ResourceType.ROLE]: '2022-04-01',
+      },
+      [TerminalKind.VCoreMongo]: {
+        [ResourceType.DATABASE]: '2024-07-01',
+        [ResourceType.NETWORK]: '2024-07-01',
+        [ResourceType.VNET]: '2024-07-01',
+        [ResourceType.SUBNET]: '2024-07-01',
+        [ResourceType.RELAY]: '2024-01-01',
+        [ResourceType.ROLE]: '2022-04-01',
+      },
+      [TerminalKind.Postgres]: {
+        [ResourceType.DATABASE]: '2024-11-15',
+        [ResourceType.NETWORK]: '2024-07-01',
+        [ResourceType.VNET]: '2024-07-01',
+        [ResourceType.SUBNET]: '2024-07-01',
+        [ResourceType.RELAY]: '2024-01-01',
+        [ResourceType.ROLE]: '2022-04-01',
+      },
+      [TerminalKind.Cassandra]: {
+        [ResourceType.DATABASE]: '2024-11-15',
+        [ResourceType.NETWORK]: '2024-07-01',
+        [ResourceType.VNET]: '2024-07-01',
+        [ResourceType.SUBNET]: '2024-07-01',
+        [ResourceType.RELAY]: '2024-01-01',
+        [ResourceType.ROLE]: '2022-04-01',
+      },
+      [TerminalKind.Default]: {
+        [ResourceType.DATABASE]: undefined,
+        [ResourceType.NETWORK]: undefined,
+        [ResourceType.VNET]: undefined,
+        [ResourceType.SUBNET]: undefined,
+        [ResourceType.RELAY]: undefined,
+        [ResourceType.ROLE]: undefined,
+      },
+    },
+  };
+  

src/Explorer/Tabs/CloudShellTab/Models/DataModels.tsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) Microsoft Corporation.  All rights reserved.
+ * Data models for CloudShell
+ */
+
+export const enum OsType {
+    Linux = "linux",
+    Windows = "windows"
+}
+
+export const enum ShellType {
+    Bash = "bash",
+    PowerShellCore = "pwsh"
+}
+  
+export const enum NetworkType {
+    Default = "Default",
+    Isolated = "Isolated"
+}
+
+export const enum SessionType {
+    Mounted = "Mounted",
+    Ephemeral = "Ephemeral"
+}
+
+export const enum UserInputs {
+    NoReset = "1",
+    ConfigureVNet = "2",
+    ResetVNet = "3"
+};
+
+export type Settings = {
+    properties: UserSettingProperties
+};
+
+export type UserSettingProperties = {
+    networkType: string;  
+    preferredLocation: string;
+    preferredOsType: OsType;
+    preferredShellType: ShellType;
+    userSubscription: string;
+    sessionType: SessionType;
+    vnetSettings: VnetSettings; 
+}
+
+export type VnetSettings = {
+    networkProfileResourceId?: string;
+    relayNamespaceResourceId?: string;
+    location?: string;
+}
+
+export type ProvisionConsoleResponse = {
+    properties: {
+        osType: OsType;
+        provisioningState: string;
+        uri: string;
+    };
+};
+
+export type Authorization = {
+    token: string;
+};
+
+export type ConnectTerminalResponse = {
+    id: string;
+    idleTimeout: string;
+    rootDirectory: string;
+    socketUri: string;
+    tokenUpdated: boolean;
+};
+
+export type VnetModel = {
+    name: string;
+    id: string;
+    etag: string;
+    type: string;
+    location: string;
+    tags: Record<string, string>;
+    properties: {
+        provisioningState: string;
+        resourceGuid: string;
+        addressSpace: {
+            addressPrefixes: string[];
+        };
+        encryption: {
+            enabled: boolean;
+            enforcement: string;
+        };
+        privateEndpointVNetPolicies: string;
+        subnets: Array<{
+            name: string;
+            id: string;
+            etag: string;
+            type: string;
+            properties: {
+                provisioningState: string;
+                addressPrefixes?: string[];
+                addressPrefix?: string;
+                networkSecurityGroup?: { id: string };
+                ipConfigurations?: { id: string }[];
+                ipConfigurationProfiles?: { id: string }[];
+                privateEndpoints?: { id: string }[];
+                serviceEndpoints?: Array<{
+                    provisioningState: string;
+                    service: string;
+                    locations: string[];
+                }>;
+                delegations?: Array<{
+                    name: string;
+                    id: string;
+                    etag: string;
+                    type: string;
+                    properties: {
+                        provisioningState: string;
+                        serviceName: string;
+                        actions: string[];
+                    };
+                }>;
+                purpose?: string;
+                privateEndpointNetworkPolicies?: string;
+                privateLinkServiceNetworkPolicies?: string;
+            };
+        }>;
+        virtualNetworkPeerings: any[];
+        enableDdosProtection: boolean;
+    };
+};
+
+export type RelayNamespace = {
+    id: string;
+    name: string;
+    type: string;
+    location: string;
+    tags: Record<string, string>;
+    properties: {
+        metricId: string;
+        serviceBusEndpoint: string;
+        provisioningState: string;
+        status: string;
+        createdAt: string;
+        updatedAt: string;
+    };
+    sku: {
+        name: string;
+        tier: string;
+    };
+};
+
+export type RelayNamespaceResponse = {
+    value: RelayNamespace[];
+};
+
+/**
+ * Resource types for API versioning
+ */
+export enum ResourceType {
+    NETWORK = "NETWORK",
+    DATABASE = "DATABASE",
+    VNET = "VNET",
+    SUBNET = "SUBNET",
+    RELAY = "RELAY",
+    ROLE = "ROLE"
+}

src/Explorer/Tabs/CloudShellTab/Network/FirewallHandler.tsx

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Firewall handling functionality for CloudShell
+ */
+
+import { Terminal } from "xterm";
+import { userContext } from "../../../../UserContext";
+import { hasFirewallRestrictions } from "../../Shared/CheckFirewallRules";
+import { getAccountDetails, updateDatabaseAccount } from "../Data/CloudShellApiClient";
+import { askConfirmation } from "../Utils/CommonUtils";
+import { terminalLog } from "../Utils/LogFormatter";
+
+export class FirewallHandler {
+  /**
+   * Checks if firewall configuration is needed for CloudShell
+   */
+  public static async checkFirewallConfiguration(terminal: Terminal): Promise<boolean> {
+    if (!hasFirewallRestrictions()) {
+      return false; // No firewall rules to configure
+    }
+
+    terminal.writeln(terminalLog.header("Database Firewall Configuration"));
+    terminal.writeln(terminalLog.warning("Your database has firewall restrictions enabled"));
+    terminal.writeln(terminalLog.warning("CloudShell might need access through these restrictions"));
+
+    const shouldConfigureFirewall = await askConfirmation(
+      terminal, 
+      "Would you like to check and configure firewall settings?"
+    );
+
+    if (!shouldConfigureFirewall) {
+      terminal.writeln(terminalLog.info("Skipping firewall configuration"));
+      return false;
+    }
+
+    return await this.configureFirewallForCloudShell(terminal);
+  }
+
+  /**
+   * Configures firewall for CloudShell access
+   */
+  private static async configureFirewallForCloudShell(terminal: Terminal): Promise<boolean> {
+    try {
+      // Get current database account details
+      terminal.writeln(terminalLog.database("Retrieving current firewall configuration..."));
+      const dbAccount = userContext.databaseAccount;
+      const currentDbAccount = await getAccountDetails(dbAccount.id);
+      
+      // Check if "Allow Azure Services" is already enabled
+      const ipRules = currentDbAccount.properties.ipRules || [];
+      const azureServicesEnabled = currentDbAccount.properties.publicNetworkAccess === "Enabled";
+      
+      if (azureServicesEnabled) {
+        terminal.writeln(terminalLog.success("Azure services access is already enabled"));
+        return true;
+      }
+      
+      // Ask user to enable Azure services access
+      terminal.writeln(terminalLog.warning("Azure services access is not enabled"));
+      terminal.writeln(terminalLog.info("CloudShell requires 'Allow Azure Services' to be enabled"));
+      
+      const enableAzureServices = await askConfirmation(
+        terminal,
+        "Enable 'Allow Azure Services' for this database?"
+      );
+      
+      if (!enableAzureServices) {
+        terminal.writeln(terminalLog.warning("CloudShell may not be able to connect without enabling Azure services access"));
+        return false;
+      }
+      
+      // Update database account to enable Azure services access
+      terminal.writeln(terminalLog.info("Updating database firewall configuration..."));
+      
+      // Create update payload - only modify firewall-related properties
+      const updatePayload = {
+        ...currentDbAccount,
+        properties: {
+          ...currentDbAccount.properties,
+          publicNetworkAccess: "Enabled"
+        }
+      };
+      
+      await updateDatabaseAccount(dbAccount.id, updatePayload);
+      terminal.writeln(terminalLog.success("Database firewall updated successfully"));
+      terminal.writeln(terminalLog.success("Azure services access is now enabled"));
+      
+      return true;
+    } catch (error) {
+      terminal.writeln(terminalLog.error(`Error configuring firewall: ${error.message}`));
+      return false;
+    }
+  }
+}

src/Explorer/Tabs/CloudShellTab/Network/NetworkAccessHandler.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Network access configuration handler for CloudShell
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { IsPublicAccessAvailable } from "../../Shared/CheckFirewallRules";
+import { getUserSettings } from "../Data/CloudShellApiClient";
+import { VnetSettings } from "../Models/DataModels";
+import { terminalLog } from "../Utils/LogFormatter";
+import { VNetHandler } from "./VNetHandler";
+
+export class NetworkAccessHandler {
+  /**
+   * Configures network access for the CloudShell based on shell type and network restrictions
+   */
+  public static async configureNetworkAccess(
+    terminal: Terminal, 
+    region: string, 
+    shellType: TerminalKind
+  ): Promise<{
+    vNetSettings: any;
+    isAllPublicAccessEnabled: boolean;
+  }> {
+    // Check if public access is available for this shell type
+    const isAllPublicAccessEnabled = await IsPublicAccessAvailable(shellType);
+
+    // If public access is enabled, no need for VNet configuration
+    if (isAllPublicAccessEnabled) {
+      terminal.writeln(terminalLog.database("Public access enabled. Skipping VNet configuration."));
+      return {
+        vNetSettings: {},
+        isAllPublicAccessEnabled: true
+      };
+    }
+
+    // Public access is restricted, we need to configure a VNet or use existing one
+    terminal.writeln(terminalLog.database("Network restrictions detected"));
+    terminal.writeln(terminalLog.info("Loading CloudShell configuration..."));
+
+    // Get existing settings if available
+    const settings = await getUserSettings();
+    if (!settings) {
+      terminal.writeln(terminalLog.warning("No existing user settings found."));
+    }
+
+    // Retrieve CloudShell VNet settings if available
+    let cloudShellVnetSettings: VnetSettings | undefined;
+    if (settings) {
+      cloudShellVnetSettings = await VNetHandler.retrieveCloudShellVnetSettings(settings, terminal);
+    }
+
+    // If CloudShell has VNet settings, check with database config
+    let finalVNetSettings = {};
+    if (cloudShellVnetSettings && cloudShellVnetSettings.networkProfileResourceId) {
+      // Check if we should use existing VNet settings
+      const isContinueWithSameVnet = await VNetHandler.askForVNetConfigConsent(terminal, shellType);
+      
+      if (isContinueWithSameVnet) {
+        // Check if the VNet is already configured in the database
+        const isVNetInDatabaseConfig = await VNetHandler.isCloudShellVNetInDatabaseConfig(cloudShellVnetSettings, terminal);
+
+        if (!isVNetInDatabaseConfig) {
+          terminal.writeln(terminalLog.warning("CloudShell VNet is not configured in database access list"));
+          const addToDatabase = await VNetHandler.askToAddVNetToDatabase(terminal, cloudShellVnetSettings);
+
+          if (addToDatabase) {
+            await VNetHandler.addCloudShellVNetToDatabase(cloudShellVnetSettings, terminal);
+            finalVNetSettings = cloudShellVnetSettings;
+          } else {
+            // User declined to add VNet to database, need to recreate
+            terminal.writeln(terminalLog.warning("Will configure new VNet..."));
+            cloudShellVnetSettings = undefined;
+          }
+        } else {
+          terminal.writeln(terminalLog.success("CloudShell VNet is already in database configuration"));
+          finalVNetSettings = cloudShellVnetSettings;
+        }
+      } else {
+        cloudShellVnetSettings = undefined; // User declined to use existing VNet settings
+      }
+    }
+
+    // If we don't have valid VNet settings, create new ones
+    if (!cloudShellVnetSettings || !cloudShellVnetSettings.networkProfileResourceId) {
+      terminal.writeln(terminalLog.subheader("Configuring network infrastructure"));
+      finalVNetSettings = await VNetHandler.configureCloudShellVNet(terminal, region);
+      
+      // Add the new VNet to the database
+      await VNetHandler.addCloudShellVNetToDatabase(finalVNetSettings as VnetSettings, terminal);
+    }
+
+    return {
+      vNetSettings: finalVNetSettings,
+      isAllPublicAccessEnabled: false
+    };
+  }
+}

src/Explorer/Tabs/CloudShellTab/Network/VNetHandler.tsx

@@ -0,0 +1,894 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * VNet handling functionality for CloudShell
+ */
+
+import { v4 as uuidv4 } from 'uuid';
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from "../../../../UserContext";
+import { hasPrivateEndpointsRestrictions } from "../../Shared/CheckFirewallRules";
+import {
+  createNetworkProfile,
+  createPrivateEndpoint,
+  createRelay,
+  createRoleOnNetworkProfile,
+  createRoleOnRelay,
+  getAccountDetails,
+  getDatabaseOperations,
+  getNetworkProfileInfo,
+  getRelay,
+  getSubnetInformation,
+  getVnet,
+  getVnetInformation,
+  updateDatabaseAccount,
+  updateSubnetInformation,
+  updateVnet
+} from "../Data/CloudShellApiClient";
+import { Settings, VnetSettings } from "../Models/DataModels";
+import { askConfirmation, askQuestion, wait } from "../Utils/CommonUtils";
+import { terminalLog } from "../Utils/LogFormatter";
+
+// Constants for VNet configuration
+const POLLING_INTERVAL_MS = 5000;
+const MAX_RETRY_COUNT = 10;
+const STANDARD_SKU = "Standard";
+const DEFAULT_VNET_ADDRESS_PREFIX = "10.0.0.0/16";
+const DEFAULT_SUBNET_ADDRESS_PREFIX = "10.0.1.0/24";
+const DEFAULT_CONTAINER_INSTANCE_OID = "88536fb9-d60a-4aee-8195-041425d6e927";
+
+export class VNetHandler {
+  /**
+   * Retrieves CloudShell VNet settings from user settings
+   */
+  public static async retrieveCloudShellVnetSettings(settings: Settings, terminal: Terminal): Promise<VnetSettings> {
+    if (settings?.properties?.vnetSettings && Object.keys(settings.properties.vnetSettings).length > 0) {
+      try {
+        const netProfileInfo = await getNetworkProfileInfo<any>(settings.properties.vnetSettings.networkProfileResourceId);
+
+        terminal.writeln(terminalLog.header("Existing Network Configuration"));
+
+        const subnetId = netProfileInfo.properties.containerNetworkInterfaceConfigurations[0]
+        .properties.ipConfigurations[0].properties.subnet.id;
+        const vnetResourceId = subnetId.replace(/\/subnets\/[^/]+$/, '');
+
+        terminal.writeln(terminalLog.item("VNet", vnetResourceId));
+        terminal.writeln(terminalLog.item("Subnet", subnetId));
+        terminal.writeln(terminalLog.item("Location", settings.properties.vnetSettings.location));
+        terminal.writeln(terminalLog.item("Network Profile", settings.properties.vnetSettings.networkProfileResourceId));
+        terminal.writeln(terminalLog.item("Relay Namespace", settings.properties.vnetSettings.relayNamespaceResourceId));
+
+        return {
+          networkProfileResourceId: settings.properties.vnetSettings.networkProfileResourceId,
+          relayNamespaceResourceId: settings.properties.vnetSettings.relayNamespaceResourceId,
+          location: settings.properties.vnetSettings.location
+        };
+      } catch (err) {
+        terminal.writeln(terminalLog.warning("Error retrieving network profile. Will configure new network."));
+        return undefined;
+      }
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Asks the user if they want to use existing network configuration (VNet or private endpoint)
+   */
+  public static async askForVNetConfigConsent(terminal: Terminal, shellType: TerminalKind = null): Promise<boolean> {
+    // Check if this shell type supports only private endpoints
+    const isPrivateEndpointOnlyShell = shellType === TerminalKind.VCoreMongo;
+    // Check if the database has private endpoints configured
+    const hasPrivateEndpoints = hasPrivateEndpointsRestrictions();
+    
+    // Determine which network type to mention based on shell type and database configuration
+    const networkType = isPrivateEndpointOnlyShell || hasPrivateEndpoints ? "private endpoint" : "network";
+    
+    // Ask for consent
+    terminal.writeln("");
+    terminal.writeln(terminalLog.prompt(`Use this existing ${networkType} configuration?`));
+    terminal.writeln(terminalLog.info(`Answering 'N' will configure a new ${networkType} for CloudShell`));
+
+    return await askConfirmation(terminal, `Press Y/N to continue...`);
+  }
+
+  /**
+   * Checks if the CloudShell VNet is already in the database configuration
+   */
+  public static async isCloudShellVNetInDatabaseConfig(vNetSettings: VnetSettings, terminal: Terminal): Promise<boolean> {
+    try {
+      terminal.writeln(terminalLog.subheader("Verifying if CloudShell VNet is configured in database"));
+
+      // Get the subnet ID from the CloudShell Network Profile
+      const netProfileInfo = await getNetworkProfileInfo<any>(vNetSettings.networkProfileResourceId);
+
+      if (!netProfileInfo?.properties?.containerNetworkInterfaceConfigurations?.[0]
+        ?.properties?.ipConfigurations?.[0]?.properties?.subnet?.id) {
+        terminal.writeln(terminalLog.warning("Could not retrieve subnet ID from CloudShell VNet"));
+        return false;
+      }
+
+      const cloudShellSubnetId = netProfileInfo.properties.containerNetworkInterfaceConfigurations[0]
+        .properties.ipConfigurations[0].properties.subnet.id;
+
+      terminal.writeln(terminalLog.item("CloudShell Subnet", cloudShellSubnetId.split('/').pop() || ""));
+
+      // Check if this subnet ID is in the database VNet rules
+      const dbAccount = userContext.databaseAccount;
+      if (!dbAccount?.properties?.virtualNetworkRules) {
+        return false;
+      }
+
+      const vnetRules = dbAccount.properties.virtualNetworkRules;
+
+      // Check if the CloudShell subnet is already in the rules
+      return vnetRules.some(rule => rule.id === cloudShellSubnetId);
+
+    } catch (err) {
+      terminal.writeln(terminalLog.error("Error checking database VNet configuration"));
+      return false;
+    }
+  }
+
+  /**
+   * Asks the user if they want to add the CloudShell VNet to the database configuration
+   */
+  public static async askToAddVNetToDatabase(terminal: Terminal, vNetSettings: VnetSettings): Promise<boolean> {
+    terminal.writeln("");
+    terminal.writeln(terminalLog.header("Network Configuration Mismatch"));
+    terminal.writeln(terminalLog.warning("Your CloudShell VNet is not in your database's allowed networks"));
+    terminal.writeln(terminalLog.warning("To connect from CloudShell, this VNet must be added to your database"));
+    
+    return await askConfirmation(terminal, "Add CloudShell VNet to database configuration?");
+  }
+
+ /**
+ * Adds the CloudShell VNet to the database configuration
+ * Now supports both VNet rules and private endpoints
+ */
+public static async addCloudShellVNetToDatabase(vNetSettings: VnetSettings, terminal: Terminal): Promise<void> {
+  try {
+    terminal.writeln(terminalLog.header("Updating database network configuration"));
+
+    // Step 1: Get the subnet ID from CloudShell Network Profile
+    const { cloudShellSubnetId, cloudShellVnetId } = await this.getCloudShellNetworkIds(vNetSettings, terminal);
+
+    // Step 2: Get current database account details
+    const { currentDbAccount } = await this.getDatabaseAccountDetails(terminal);
+
+    // Step 3: Determine if database uses private endpoints
+    const usesPrivateEndpoints = hasPrivateEndpointsRestrictions() || 
+                                (currentDbAccount.properties.privateEndpointConnections?.length > 0);
+    
+    // Log which networking mode we're using
+    if (usesPrivateEndpoints) {
+      terminal.writeln(terminalLog.info("Database is configured with private endpoints"));
+    } else {
+      terminal.writeln(terminalLog.info("Database is configured with VNet rules"));
+    }
+
+    // Step 4: Check if connection is already configured
+    if (usesPrivateEndpoints) {
+      if (await this.isPrivateEndpointAlreadyConfigured(cloudShellVnetId, currentDbAccount, terminal)) {
+        return;
+      }
+    } else {
+      if (await this.isVNetAlreadyConfigured(cloudShellSubnetId, currentDbAccount, terminal)) {
+        return;
+      }
+    }
+
+    // Step 5: Check network resource statuses and ongoing operations
+    const { vnetInfo, subnetInfo, operationInProgress } =
+      await this.checkNetworkResourceStatuses(cloudShellSubnetId, cloudShellVnetId, currentDbAccount.id, terminal);
+
+    // Step 6: If no operation in progress, update the configuration
+    if (!operationInProgress) {
+      if (usesPrivateEndpoints) {
+        // Create or update private endpoint configuration
+        await this.configurePrivateEndpoint(
+          cloudShellSubnetId, 
+          vnetInfo.location, 
+          currentDbAccount.id, 
+          terminal
+        );
+      } else {
+        // Enable CosmosDB service endpoint on subnet if needed (for VNet rules)
+        await this.enableCosmosDBServiceEndpoint(cloudShellSubnetId, subnetInfo, terminal);
+
+        // Update database account with VNet rule
+        await this.updateDatabaseWithVNetRule(currentDbAccount, cloudShellSubnetId, currentDbAccount.id, terminal);
+      }
+    } else {
+      terminal.writeln(terminalLog.info("Monitoring existing network operation..."));
+      // Step 7: Monitor the update progress
+      await this.monitorVNetAdditionProgress(cloudShellSubnetId, currentDbAccount.id, terminal);
+    }
+
+  } catch (err) {
+    terminal.writeln(terminalLog.error(`Error updating database network configuration: ${err.message}`));
+    throw err;
+  }
+}
+
+/**
+ * Checks if a private endpoint is already configured for the CloudShell VNet
+ */
+private static async isPrivateEndpointAlreadyConfigured(
+  cloudShellVnetId: string, 
+  currentDbAccount: any, 
+  terminal: Terminal
+): Promise<boolean> {
+  // Check if private endpoints exist and are properly configured for this VNet
+  const hasConfiguredEndpoint = currentDbAccount.properties.privateEndpointConnections?.some(
+    (connection: any) => {
+      const isApproved = connection.properties.privateLinkServiceConnectionState.status === 'Approved';
+      // We would need to check if the endpoint is in the CloudShell VNet
+      // For simplicity, we're assuming connection.properties.networkInterface contains this info
+      const endpointVNetId = connection.properties.networkInterface?.id?.split('/subnets/')[0];
+      return isApproved && endpointVNetId === cloudShellVnetId;
+    }
+  );
+
+  if (hasConfiguredEndpoint) {
+    terminal.writeln(terminalLog.success("CloudShell private endpoint is already configured"));
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Configures a private endpoint for the CloudShell VNet to connect to the database
+ */
+private static async configurePrivateEndpoint(
+  cloudShellSubnetId: string,
+  vnetLocation: any,
+  dbAccountId: string,
+  terminal: Terminal
+): Promise<void> {
+  // Extract necessary information from IDs
+  const subnetIdParts = cloudShellSubnetId.split('/');
+  const subnetIndex = subnetIdParts.indexOf('subnets');
+  
+  const subnetName = subnetIdParts[subnetIndex + 1];
+  const resourceGroup = subnetIdParts[4];
+  const subscriptionId = subnetIdParts[2];
+  
+  // Generate a unique name for the private endpoint
+  const privateEndpointName = `pe-cloudshell-cosmos-${Math.floor(10000 + Math.random() * 90000)}`;
+  
+  terminal.writeln(terminalLog.subheader("Creating private endpoint for CloudShell"));
+  terminal.writeln(terminalLog.item("Private Endpoint Name", privateEndpointName));
+  terminal.writeln(terminalLog.item("Target Subnet", subnetName));
+  
+  // Construct the private endpoint creation payload
+  const privateEndpointPayload = {
+    location: vnetLocation,
+    properties: {
+      privateLinkServiceConnections: [
+        {
+          name: privateEndpointName,
+          properties: {
+            privateLinkServiceId: dbAccountId,
+            groupIds: [
+                "MongoDB"
+            ],
+            requestMessage: "CloudShell connectivity request"
+          },
+          type: "Microsoft.Network/privateEndpoints/privateLinkServiceConnections"
+        }
+      ],
+      subnet: {
+        id: cloudShellSubnetId
+      }
+    }
+  };
+  
+  // Send the request to create the private endpoint
+  // Note: This is a placeholder - we would need to implement this API call
+  terminal.writeln(terminalLog.info("Submitting private endpoint creation request"));
+  
+  try {
+    const privateEndpointUrl = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.Network/privateEndpoints/${privateEndpointName}`;
+    
+    await createPrivateEndpoint(privateEndpointUrl, privateEndpointPayload, "2024-05-01");
+    
+    terminal.writeln(terminalLog.success("Private endpoint creation request submitted"));
+    terminal.writeln(terminalLog.warning("Please approve the private endpoint connection in the Azure portal"));
+    terminal.writeln(terminalLog.info("Note: Private endpoint operations may take several minutes to complete"));
+  } catch (err) {
+    terminal.writeln(terminalLog.error(`Failed to create private endpoint: ${err.message}`));
+    throw err;
+  }
+}
+  /**
+   * Gets the subnet and VNet IDs from CloudShell Network Profile
+   */
+  private static async getCloudShellNetworkIds(vNetSettings: VnetSettings, terminal: Terminal): Promise<{ cloudShellSubnetId: string; cloudShellVnetId: string }> {
+    const netProfileInfo = await getNetworkProfileInfo<any>(vNetSettings.networkProfileResourceId);
+
+    if (!netProfileInfo?.properties?.containerNetworkInterfaceConfigurations?.[0]
+      ?.properties?.ipConfigurations?.[0]?.properties?.subnet?.id) {
+      throw new Error("Could not retrieve subnet ID from CloudShell VNet");
+    }
+
+    const cloudShellSubnetId = netProfileInfo.properties.containerNetworkInterfaceConfigurations[0]
+      .properties.ipConfigurations[0].properties.subnet.id;
+
+    // Extract VNet ID from subnet ID
+    const cloudShellVnetId = cloudShellSubnetId.substring(0, cloudShellSubnetId.indexOf('/subnets/'));
+
+    terminal.writeln(terminalLog.subheader("Identified CloudShell network resources"));
+    terminal.writeln(terminalLog.item("Subnet", cloudShellSubnetId.split('/').pop() || ""));
+    terminal.writeln(terminalLog.item("VNet", cloudShellVnetId.split('/').pop() || ""));
+
+    return { cloudShellSubnetId, cloudShellVnetId };
+  }
+
+  /**
+   * Gets the database account details
+   */
+  private static async getDatabaseAccountDetails(terminal: Terminal): Promise<{ currentDbAccount: any }> {
+    const dbAccount = userContext.databaseAccount;
+    terminal.writeln(terminalLog.database("Verifying current configuration"));
+    const currentDbAccount = await getAccountDetails(dbAccount.id);
+
+    return { currentDbAccount };
+  }
+
+  /**
+   * Checks if the VNet is already configured in the database
+   */
+  private static async isVNetAlreadyConfigured(cloudShellSubnetId: string, currentDbAccount: any, terminal: Terminal): Promise<boolean> {
+    const vnetAlreadyConfigured = currentDbAccount.properties.virtualNetworkRules &&
+      currentDbAccount.properties.virtualNetworkRules.some(
+        (rule: any) => rule.id === cloudShellSubnetId
+      );
+
+    if (vnetAlreadyConfigured) {
+      terminal.writeln(terminalLog.success("CloudShell VNet is already in database configuration"));
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Checks the status of network resources and ongoing operations
+   */
+  private static async checkNetworkResourceStatuses(
+    cloudShellSubnetId: string,
+    cloudShellVnetId: string,
+    dbAccountId: string,
+    terminal: Terminal
+  ): Promise<{ vnetInfo: any; subnetInfo: any; operationInProgress: boolean }> {
+    terminal.writeln(terminalLog.subheader("Checking network resource status"));
+
+    let operationInProgress = false;
+    let vnetInfo: any = null;
+    let subnetInfo: any = null;
+
+    if (cloudShellVnetId && cloudShellSubnetId) {
+      // Get VNet and subnet resource status
+      vnetInfo = await getVnetInformation<any>(cloudShellVnetId);
+      subnetInfo = await getSubnetInformation<any>(cloudShellSubnetId);
+
+      // Check if there's an ongoing operation on the VNet or subnet
+      const vnetProvisioningState = vnetInfo?.properties?.provisioningState;
+      const subnetProvisioningState = subnetInfo?.properties?.provisioningState;
+
+      if (vnetProvisioningState !== 'Succeeded' && vnetProvisioningState !== 'Failed') {
+        terminal.writeln(terminalLog.warning(`VNet operation in progress: ${vnetProvisioningState}`));
+        operationInProgress = true;
+      }
+
+      if (subnetProvisioningState !== 'Succeeded' && subnetProvisioningState !== 'Failed') {
+        terminal.writeln(terminalLog.warning(`Subnet operation in progress: ${subnetProvisioningState}`));
+        operationInProgress = true;
+      }
+
+      // Also check database operations
+      const latestDbAccount = await getAccountDetails<any>(dbAccountId);
+
+      if (latestDbAccount.properties.virtualNetworkRules) {
+        const isPendingAdd = latestDbAccount.properties.virtualNetworkRules.some(
+          (rule: any) => rule.id === cloudShellSubnetId && rule.status === 'Updating'
+        );
+
+        if (isPendingAdd) {
+          terminal.writeln(terminalLog.warning("CloudShell VNet addition to database is already in progress"));
+          operationInProgress = true;
+        }
+      }
+    }
+
+    return { vnetInfo, subnetInfo, operationInProgress };
+  }
+
+  /**
+   * Enables the CosmosDB service endpoint on a subnet if needed
+   */
+  private static async enableCosmosDBServiceEndpoint(cloudShellSubnetId: string, subnetInfo: any, terminal: Terminal): Promise<void> {
+    if (!subnetInfo) {
+      terminal.writeln(terminalLog.warning("Unable to check subnet endpoint configuration"));
+      return;
+    }
+
+    terminal.writeln(terminalLog.subheader("Checking and configuring CosmosDB service endpoint"));
+
+    // Parse the subnet ID to get resource information
+    const subnetIdParts = cloudShellSubnetId.split('/');
+    const subnetIndex = subnetIdParts.indexOf('subnets');
+    if (subnetIndex > 0) {
+      const subnetName = subnetIdParts[subnetIndex + 1];
+      const vnetName = subnetIdParts[subnetIndex - 1];
+      const resourceGroup = subnetIdParts[4];
+      const subscriptionId = subnetIdParts[2];
+
+      // Get the subnet URL
+      const subnetUrl = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}/subnets/${subnetName}`;
+
+      // Check if CosmosDB service endpoint is already enabled
+      const hasCosmosDBEndpoint = subnetInfo.properties.serviceEndpoints &&
+        subnetInfo.properties.serviceEndpoints.some(
+          (endpoint: any) => endpoint.service === 'Microsoft.AzureCosmosDB'
+        );
+
+      if (!hasCosmosDBEndpoint) {
+        terminal.writeln(terminalLog.warning("Enabling CosmosDB service endpoint on subnet..."));
+
+        // Create update payload with CosmosDB service endpoint
+        const serviceEndpoints = [
+          ...(subnetInfo.properties.serviceEndpoints || []),
+          { service: 'Microsoft.AzureCosmosDB' }
+        ];
+
+        // Update the subnet configuration while preserving existing properties
+        const subnetUpdatePayload = {
+          ...subnetInfo,
+          properties: {
+            ...subnetInfo.properties,
+            serviceEndpoints: serviceEndpoints
+          }
+        };
+
+        // Apply the subnet update
+        await updateSubnetInformation(subnetUrl, subnetUpdatePayload);
+
+        // Wait for the subnet update to complete
+        let subnetUpdateComplete = false;
+        let subnetRetryCount = 0;
+
+        while (!subnetUpdateComplete && subnetRetryCount < MAX_RETRY_COUNT) {
+          const updatedSubnet = await getSubnetInformation<any>(subnetUrl);
+
+          const endpointEnabled = updatedSubnet.properties.serviceEndpoints &&
+            updatedSubnet.properties.serviceEndpoints.some(
+              (endpoint: any) => endpoint.service === 'Microsoft.AzureCosmosDB'
+            );
+
+          if (endpointEnabled && updatedSubnet.properties.provisioningState === 'Succeeded') {
+            subnetUpdateComplete = true;
+            terminal.writeln(terminalLog.success("CosmosDB service endpoint enabled successfully"));
+          } else {
+            subnetRetryCount++;
+            terminal.writeln(terminalLog.progress("Subnet update", `Waiting (${subnetRetryCount}/${MAX_RETRY_COUNT})`));
+            await wait(POLLING_INTERVAL_MS);
+          }
+        }
+
+        if (!subnetUpdateComplete) {
+          throw new Error("Failed to enable CosmosDB service endpoint on subnet");
+        }
+      } else {
+        terminal.writeln(terminalLog.success("CosmosDB service endpoint is already enabled"));
+      }
+    }
+  }
+
+  /**
+   * Updates the database account with a new VNet rule
+   */
+  private static async updateDatabaseWithVNetRule(currentDbAccount: any, cloudShellSubnetId: string, dbAccountId: string, terminal: Terminal): Promise<void> {
+    // Create a deep copy of the current database account
+    const updatePayload = JSON.parse(JSON.stringify(currentDbAccount));
+
+    // Update only the network-related properties
+    updatePayload.properties.virtualNetworkRules = [
+      ...(currentDbAccount.properties.virtualNetworkRules || []),
+      { id: cloudShellSubnetId, ignoreMissingVNetServiceEndpoint: false }
+    ];
+    updatePayload.properties.isVirtualNetworkFilterEnabled = true;
+
+    // Update the database account
+    terminal.writeln(terminalLog.subheader("Submitting VNet update request to database"));
+    await updateDatabaseAccount(dbAccountId, updatePayload);
+    terminal.writeln(terminalLog.success("Updated Database account with Cloud Shell Vnet"));
+  }
+
+  /**
+   * Monitors the progress of adding a VNet to the database account
+   */
+  private static async monitorVNetAdditionProgress(cloudShellSubnetId: string, dbAccountId: string, terminal: Terminal): Promise<void> {
+    let updateComplete = false;
+    let retryCount = 0;
+    let lastStatus = "";
+    let lastProgress = 0;
+    let lastOpId = "";
+
+    terminal.writeln(terminalLog.subheader("Monitoring database update progress"));
+
+    while (!updateComplete && retryCount < MAX_RETRY_COUNT) {
+      // Check if the VNet is now in the database account 
+      const updatedDbAccount = await getAccountDetails<any>(dbAccountId);
+      
+      const isVNetAdded = updatedDbAccount.properties.virtualNetworkRules?.some(
+        (rule: any) => rule.id === cloudShellSubnetId && (!rule.status || rule.status === 'Succeeded')
+      );
+      
+      if (isVNetAdded) {
+        updateComplete = true;
+        terminal.writeln(terminalLog.success("CloudShell VNet successfully added to database configuration"));
+        break;
+      }
+      
+      // If not yet added, check for operation progress
+      const operations = await getDatabaseOperations<any>(dbAccountId);
+      
+      // Find network-related operations
+      const networkOps = operations.value?.filter(
+        (op: any) => 
+        (op.properties.description?.toLowerCase().includes('network') ||
+          op.properties.description?.toLowerCase().includes('vnet'))
+      ) || [];
+      
+      // Find active operations
+      const activeOp = networkOps.find((op: any) => op.properties.status === 'InProgress');
+      
+      if (activeOp) {
+        // Show progress details if available
+        const currentStatus = activeOp.properties.status;
+        const progress = activeOp.properties.percentComplete || 0;
+        const opId = activeOp.name;
+        
+        // Only update the terminal if something has changed
+        if (currentStatus !== lastStatus || progress !== lastProgress || opId !== lastOpId) {
+          // Create a progress bar
+          const progressBarLength = 20;
+          const filledLength = Math.floor(progress / 100 * progressBarLength);
+          const progressBar = "█".repeat(filledLength) + "░".repeat(progressBarLength - filledLength);
+          
+          terminal.writeln(`\x1B[34m  [${progressBar}] ${progress}% - ${currentStatus}\x1B[0m`);
+          lastStatus = currentStatus;
+          lastProgress = progress;
+          lastOpId = opId;
+        }
+      } else if (networkOps.length > 0) {
+        // If there are completed operations, show their status
+        const lastCompletedOp = networkOps[0];
+        
+        if (lastCompletedOp.properties.status !== lastStatus) {
+          terminal.writeln(terminalLog.progress("Operation status", lastCompletedOp.properties.status));
+          lastStatus = lastCompletedOp.properties.status;
+        }
+      }
+      
+      retryCount++;
+      await wait(POLLING_INTERVAL_MS);
+    }
+    
+    if (!updateComplete) {
+      terminal.writeln(terminalLog.warning("Database update timed out. Please check the Azure portal."));
+    }
+  }
+
+  /**
+   * Configures a new VNet for CloudShell
+   */
+  public static async configureCloudShellVNet(terminal: Terminal, resolvedRegion: string): Promise<VnetSettings> {
+    // Use professional and shorter names for resources
+    const randomSuffix = Math.floor(10000 + Math.random() * 90000);
+
+    const subnetName = `cloudshell-subnet-${randomSuffix}`;
+    const vnetName = `cloudshell-vnet-${randomSuffix}`;
+    const networkProfileName = `cloudshell-network-profile-${randomSuffix}`;
+    const relayName = `cloudshell-relay-${randomSuffix}`;
+
+    terminal.writeln(terminalLog.header("Network Resource Configuration"));
+
+    const azureContainerInstanceOID = await askQuestion(
+      terminal,
+      "Enter Azure Container Instance OID (Refer. https://learn.microsoft.com/en-us/azure/cloud-shell/vnet/deployment#get-the-azure-container-instance-id)",
+      DEFAULT_CONTAINER_INSTANCE_OID
+    );
+
+    const vNetSubscriptionId = await askQuestion(
+      terminal,
+      "Enter Virtual Network Subscription ID",
+      userContext.subscriptionId
+    );
+
+    const vNetResourceGroup = await askQuestion(
+      terminal,
+      "Enter Virtual Network Resource Group",
+      userContext.resourceGroup
+    );
+
+    // Step 1: Create VNet with Subnet
+    terminal.writeln(terminalLog.header("Deploying Network Resources"));
+    const vNetConfigPayload = await this.createCloudShellVnet(
+      resolvedRegion,
+      subnetName,
+      terminal,
+      vnetName,
+      vNetSubscriptionId,
+      vNetResourceGroup
+    );
+
+    // Step 2: Create Network Profile
+    await this.createNetworkProfileWithVnet(
+      vNetSubscriptionId,
+      vNetResourceGroup,
+      vnetName,
+      subnetName,
+      resolvedRegion,
+      terminal,
+      networkProfileName
+    );
+
+    // Step 3: Create Network Relay
+    await this.createNetworkRelay(
+      resolvedRegion,
+      terminal,
+      relayName,
+      vNetSubscriptionId,
+      vNetResourceGroup
+    );
+
+    // Step 4: Assign Roles
+    terminal.writeln(terminalLog.header("Configuring Security Permissions"));
+    await this.assignRoleToNetworkProfile(
+      azureContainerInstanceOID,
+      vNetSubscriptionId,
+      terminal,
+      networkProfileName,
+      vNetResourceGroup
+    );
+
+    await this.assignRoleToRelay(
+      azureContainerInstanceOID,
+      vNetSubscriptionId,
+      terminal,
+      relayName,
+      vNetResourceGroup
+    );
+
+    // Step 5: Create and return VNet settings
+    const networkProfileResourceId = `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName.replace(/[\n\r]/g, "")}`;
+    const relayResourceId = `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName.replace(/[\n\r]/g, "")}`;
+
+    terminal.writeln(terminalLog.success("Network configuration complete"));
+
+    return {
+      networkProfileResourceId,
+      relayNamespaceResourceId: relayResourceId,
+      location: vNetConfigPayload.location
+    };
+  }
+
+  /**
+   * Creates a VNet for CloudShell
+   */
+  private static async createCloudShellVnet(
+    resolvedRegion: string,
+    subnetName: string,
+    terminal: Terminal,
+    vnetName: string,
+    vNetSubscriptionId: string,
+    vNetResourceGroup: string
+  ): Promise<any> {
+    const vNetConfigPayload = {
+      location: resolvedRegion,
+      properties: {
+        addressSpace: {
+          addressPrefixes: [DEFAULT_VNET_ADDRESS_PREFIX],
+        },
+        subnets: [
+          {
+            name: subnetName,
+            properties: {
+              addressPrefix: DEFAULT_SUBNET_ADDRESS_PREFIX,
+              delegations: [
+                {
+                  name: "CloudShellDelegation",
+                  properties: {
+                    serviceName: "Microsoft.ContainerInstance/containerGroups"
+                  }
+                }
+              ],
+            },
+          },
+        ],
+      },
+    };
+
+    terminal.writeln(terminalLog.vnet(`Creating VNet: ${vnetName}`));
+    let vNetResponse = await updateVnet<any>(
+      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}`,
+      vNetConfigPayload
+    );
+
+    while (vNetResponse?.properties?.provisioningState !== "Succeeded") {
+      vNetResponse = await getVnet<any>(
+        `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}`
+      );
+
+      const vNetState = vNetResponse?.properties?.provisioningState;
+      if (vNetState !== "Succeeded" && vNetState !== "Failed") {
+        await wait(POLLING_INTERVAL_MS);
+        terminal.writeln(terminalLog.progress("VNet deployment", vNetState));
+      } else {
+        break;
+      }
+    }
+
+    terminal.writeln(terminalLog.success("VNet created successfully"));
+    return vNetConfigPayload;
+  }
+
+  /**
+   * Creates a Network Profile for CloudShell
+   */
+  private static async createNetworkProfileWithVnet(
+    vNetSubscriptionId: string,
+    vNetResourceGroup: string,
+    vnetName: string,
+    subnetName: string,
+    resolvedRegion: string,
+    terminal: Terminal,
+    networkProfileName: string
+  ): Promise<void> {
+    const subnetId = `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/virtualNetworks/${vnetName}/subnets/${subnetName}`;
+
+    const createNetworkProfilePayload = {
+      location: resolvedRegion,
+      properties: {
+        containerNetworkInterfaceConfigurations: [
+          {
+            name: 'defaultContainerNicConfig',
+            properties: {
+              ipConfigurations: [
+                {
+                  name: 'defaultContainerIpConfig',
+                  properties: {
+                    subnet: {
+                      id: subnetId,
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    };
+
+    terminal.writeln(terminalLog.vnet("Creating Network Profile"));
+    let networkProfileResponse = await createNetworkProfile<any>(
+      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName}`,
+      createNetworkProfilePayload
+    );
+
+    while (networkProfileResponse?.properties?.provisioningState !== "Succeeded") {
+      networkProfileResponse = await getNetworkProfileInfo<any>(
+        `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName}`
+      );
+
+      const networkProfileState = networkProfileResponse?.properties?.provisioningState;
+      if (networkProfileState !== "Succeeded" && networkProfileState !== "Failed") {
+        await wait(POLLING_INTERVAL_MS);
+        terminal.writeln(terminalLog.progress("Network Profile", networkProfileState));
+      } else {
+        break;
+      }
+    }
+
+    terminal.writeln(terminalLog.success("Network Profile created successfully"));
+  }
+
+  /**
+   * Creates a Network Relay for CloudShell
+   */
+  private static async createNetworkRelay(
+    resolvedRegion: string,
+    terminal: Terminal,
+    relayName: string,
+    vNetSubscriptionId: string,
+    vNetResourceGroup: string
+  ): Promise<void> {
+    const relayPayload = {
+      location: resolvedRegion,
+      sku: {
+        name: STANDARD_SKU,
+        tier: STANDARD_SKU,
+      }
+    };
+
+    terminal.writeln(terminalLog.vnet("Creating Relay Namespace"));
+    let relayResponse = await createRelay<any>(
+      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName}`,
+      relayPayload
+    );
+
+    while (relayResponse?.properties?.provisioningState !== "Succeeded") {
+      relayResponse = await getRelay<any>(
+        `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName}`
+      );
+
+      const relayState = relayResponse?.properties?.provisioningState;
+      if (relayState !== "Succeeded" && relayState !== "Failed") {
+        await wait(POLLING_INTERVAL_MS);
+        terminal.writeln(terminalLog.progress("Relay Namespace", relayState));
+      } else {
+        break;
+      }
+    }
+
+    terminal.writeln(terminalLog.success("Relay Namespace created successfully"));
+  }
+
+  /**
+   * Assigns a role to a Network Profile
+   */
+  private static async assignRoleToNetworkProfile(
+    azureContainerInstanceOID: string,
+    vNetSubscriptionId: string,
+    terminal: Terminal,
+    networkProfileName: string,
+    vNetResourceGroup: string
+  ): Promise<void> {
+    const nfRoleName = uuidv4();
+    const networkProfileRoleAssignmentPayload = {
+      properties: {
+        principalId: azureContainerInstanceOID,
+        roleDefinitionId: `/subscriptions/${vNetSubscriptionId}/providers/Microsoft.Authorization/roleDefinitions/4d97b98b-1d4f-4787-a291-c67834d212e7`
+      }
+    };
+
+    terminal.writeln(terminalLog.info("Assigning permissions to Network Profile"));
+    await createRoleOnNetworkProfile<any>(
+      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Network/networkProfiles/${networkProfileName}/providers/Microsoft.Authorization/roleAssignments/${nfRoleName}`,
+      networkProfileRoleAssignmentPayload
+    );
+
+    terminal.writeln(terminalLog.success("Network Profile permissions assigned"));
+  }
+
+  /**
+   * Assigns a role to a Network Relay
+   */
+  private static async assignRoleToRelay(
+    azureContainerInstanceOID: string,
+    vNetSubscriptionId: string,
+    terminal: Terminal,
+    relayName: string,
+    vNetResourceGroup: string
+  ): Promise<void> {
+    const relayRoleName = uuidv4();
+    const relayRoleAssignmentPayload = {
+      properties: {
+        principalId: azureContainerInstanceOID,
+        roleDefinitionId: `/subscriptions/${vNetSubscriptionId}/providers/Microsoft.Authorization/roleDefinitions/b24988ac-6180-42a0-ab88-20f7382dd24c`,
+      }
+    };
+
+    terminal.writeln(terminalLog.info("Assigning permissions to Relay Namespace"));
+    await createRoleOnRelay<any>(
+      `/subscriptions/${vNetSubscriptionId}/resourceGroups/${vNetResourceGroup}/providers/Microsoft.Relay/namespaces/${relayName}/providers/Microsoft.Authorization/roleAssignments/${relayRoleName}`,
+      relayRoleAssignmentPayload
+    );
+
+    terminal.writeln(terminalLog.success("Relay Namespace permissions assigned"));
+  }
+}

src/Explorer/Tabs/CloudShellTab/ShellTypes/CassandraShellHandler.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Cassandra shell type handler
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from "../../../../UserContext";
+import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { setShellType } from "../Data/CloudShellApiClient";
+import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
+import { getHostFromUrl } from "../Utils/CommonUtils";
+import { ShellTypeConfig } from "./ShellTypeFactory";
+
+export class CassandraShellHandler implements ShellTypeConfig {
+  private shellType: TerminalKind = TerminalKind.Cassandra;
+
+  constructor() {
+    setShellType(this.shellType);
+  }
+
+  public getShellName(): string {
+    return "Cassandra";
+  }
+
+  public async getInitialCommands(): Promise<string> {
+    const dbAccount = userContext.databaseAccount;
+    const endpoint = dbAccount.properties.cassandraEndpoint;
+    
+    // Get database key
+    const dbName = dbAccount.name;
+    let key = "";
+    if (dbName) {
+      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
+      key = keys?.primaryMasterKey || "";
+    }
+
+    const config = {
+      host: getHostFromUrl(endpoint),
+      name: dbAccount.name,
+      password: key,
+      endpoint: endpoint
+    };
+
+    return this.getCommands(config).join("\n").concat("\n");
+  }
+
+  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
+    vNetSettings: any;
+    isAllPublicAccessEnabled: boolean;
+  }> {
+    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
+  }
+
+  private getCommands(config: any): string[] {
+    return [
+      // 1. Fetch and display location details in a readable format
+      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+      // 2. Check if cqlsh is installed; if not, proceed with installation
+      "if ! command -v cqlsh &> /dev/null; then echo '⚠️ cqlsh not found. Installing...'; fi",
+      // 3. Download Cassandra if not installed
+      "if ! command -v cqlsh &> /dev/null; then curl -LO https://archive.apache.org/dist/cassandra/5.0.3/apache-cassandra-5.0.3-bin.tar.gz; fi",
+      // 4. Extract Cassandra package if not installed
+      "if ! command -v cqlsh &> /dev/null; then tar -xvzf apache-cassandra-5.0.3-bin.tar.gz; fi",
+      // 5. Move Cassandra binaries if not installed
+      "if ! command -v cqlsh &> /dev/null; then mkdir -p ~/cassandra && mv apache-cassandra-5.0.3/* ~/cassandra/; fi",
+      // 6. Add Cassandra to PATH if not installed
+      "if ! command -v cqlsh &> /dev/null; then echo 'export PATH=$HOME/cassandra/bin:$PATH' >> ~/.bashrc; fi",
+      // 7. Set environment variables for SSL
+      "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VERSION=TLSv1_2' >> ~/.bashrc; fi",
+      "if ! command -v cqlsh &> /dev/null; then echo 'export SSL_VALIDATE=false' >> ~/.bashrc; fi",
+      // 8. Source .bashrc to update PATH (even if cqlsh was already installed)
+      "source ~/.bashrc",
+      // 9. Verify cqlsh installation
+      "cqlsh --version",
+      // 10. Login to Cassandra
+      `cqlsh ${config.host} 10350 -u ${config.name} -p ${config.password} --ssl --protocol-version=4`
+    ];
+  }
+}

src/Explorer/Tabs/CloudShellTab/ShellTypes/MongoShellHandler.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Mongo shell type handler
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from "../../../../UserContext";
+import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { setShellType } from "../Data/CloudShellApiClient";
+import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
+import { getHostFromUrl } from "../Utils/CommonUtils";
+import { ShellTypeConfig } from "./ShellTypeFactory";
+
+export class MongoShellHandler implements ShellTypeConfig {
+  private shellType: TerminalKind = TerminalKind.Mongo;
+
+  constructor() {
+    setShellType(this.shellType);
+  }
+
+  public getShellName(): string {
+    return "MongoDB";
+  }
+
+  public async getInitialCommands(): Promise<string> {
+    const dbAccount = userContext.databaseAccount;
+    const endpoint = dbAccount.properties.mongoEndpoint;
+    
+    // Get database key
+    const dbName = dbAccount.name;
+    let key = "";
+    if (dbName) {
+      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
+      key = keys?.primaryMasterKey || "";
+    }
+
+    const config = {
+      host: getHostFromUrl(endpoint),
+      name: dbAccount.name,
+      password: key,
+      endpoint: endpoint
+    };
+
+    return this.getCommands(config).join("\n").concat("\n");
+  }
+
+  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
+    vNetSettings: any;
+    isAllPublicAccessEnabled: boolean;
+  }> {
+    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
+  }
+
+  private getCommands(config: any): string[] {
+    return [
+      // 1. Fetch and display location details in a readable format
+      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+      // 2. Check if mongosh is installed; if not, proceed with installation
+      "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
+      // 3. Download mongosh if not installed
+      "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
+      // 4. Extract mongosh package if not installed
+      "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
+      // 5. Move mongosh binaries if not installed
+      "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
+      // 6. Add mongosh to PATH if not installed
+      "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
+      // 7. Source .bashrc to update PATH (even if mongosh was already installed)
+      "source ~/.bashrc",
+      // 8. Verify mongosh installation
+      "mongosh --version",
+      // 9. Login to MongoDB
+      `mongosh --host ${config.host} --port 10255 --username ${config.name} --password ${config.password} --tls --tlsAllowInvalidCertificates`
+    ];
+  }
+}

src/Explorer/Tabs/CloudShellTab/ShellTypes/PostgresShellHandler.tsx

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * PostgreSQL shell type handler
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from "../../../../UserContext";
+import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { setShellType } from "../Data/CloudShellApiClient";
+import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
+import { getHostFromUrl } from "../Utils/CommonUtils";
+import { ShellTypeConfig } from "./ShellTypeFactory";
+
+export class PostgresShellHandler implements ShellTypeConfig {
+  private shellType: TerminalKind = TerminalKind.Postgres;
+
+  constructor() {
+    setShellType(this.shellType);
+  }
+
+  public getShellName(): string {
+    return "PostgreSQL";
+  }
+
+  public async getInitialCommands(): Promise<string> {
+    const dbAccount = userContext.databaseAccount;
+    const endpoint = dbAccount.properties.postgresqlEndpoint;
+    
+    // Get database key
+    const dbName = dbAccount.name;
+    let key = "";
+    if (dbName) {
+      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
+      key = keys?.primaryMasterKey || "";
+    }
+
+    const config = {
+      host: getHostFromUrl(endpoint),
+      name: dbAccount.name,
+      password: key,
+      endpoint: endpoint
+    };
+
+    return this.getCommands(config).join("\n").concat("\n");
+  }
+
+  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
+    vNetSettings: any;
+    isAllPublicAccessEnabled: boolean;
+  }> {
+    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
+  }
+
+  private getCommands(config: any): string[] {
+    return [
+      // 1. Fetch and display location details in a readable format
+      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+      // 2. Check if psql is installed; if not, proceed with installation
+      "if ! command -v psql &> /dev/null; then echo '⚠️ psql not found. Installing...'; fi",
+      // 3. Download PostgreSQL if not installed
+      "if ! command -v psql &> /dev/null; then curl -LO https://ftp.postgresql.org/pub/source/v15.2/postgresql-15.2.tar.bz2; fi",
+      // 4. Extract PostgreSQL package if not installed
+      "if ! command -v psql &> /dev/null; then tar -xvjf postgresql-15.2.tar.bz2; fi",
+      // 5. Create a directory for PostgreSQL installation if not installed
+      "if ! command -v psql &> /dev/null; then mkdir -p ~/pgsql; fi",
+      // 6. Download readline (dependency for PostgreSQL) if not installed
+      "if ! command -v psql &> /dev/null; then curl -LO https://ftp.gnu.org/gnu/readline/readline-8.1.tar.gz; fi",
+      // 7. Extract readline package if not installed
+      "if ! command -v psql &> /dev/null; then tar -xvzf readline-8.1.tar.gz; fi",
+      // 8. Configure readline if not installed
+      "if ! command -v psql &> /dev/null; then cd readline-8.1 && ./configure --prefix=$HOME/pgsql; fi",
+      // 9. Add PostgreSQL to PATH if not installed
+      "if ! command -v psql &> /dev/null; then echo 'export PATH=$HOME/pgsql/bin:$PATH' >> ~/.bashrc; fi",
+      // 10. Source .bashrc to update PATH (even if psql was already installed)
+      "source ~/.bashrc",
+      // 11. Verify PostgreSQL installation
+      "psql --version",
+      `psql 'read -p "Enter Database Name: " dbname && read -p "Enter Username: " username && host=${config.endpoint} port=5432 dbname=$dbname user=$username sslmode=require'`
+    ];
+  }
+}

src/Explorer/Tabs/CloudShellTab/ShellTypes/ShellTypeFactory.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Factory for creating shell type handlers
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { CassandraShellHandler } from "./CassandraShellHandler";
+import { MongoShellHandler } from "./MongoShellHandler";
+import { PostgresShellHandler } from "./PostgresShellHandler";
+import { VCoreMongoShellHandler } from "./VCoreMongoShellHandler";
+
+export interface ShellTypeConfig {
+  getShellName(): string;
+  getInitialCommands(): Promise<string>;
+  configureNetworkAccess(terminal: Terminal, region: string): Promise<{
+    vNetSettings: any;
+    isAllPublicAccessEnabled: boolean;
+  }>;
+}
+
+export class ShellTypeHandler {
+  /**
+   * Gets the appropriate handler for the given shell type
+   */
+  public static getHandler(shellType: TerminalKind): ShellTypeConfig {
+    switch (shellType) {
+      case TerminalKind.Postgres:
+        return new PostgresShellHandler();
+      case TerminalKind.Mongo:
+        return new MongoShellHandler();
+      case TerminalKind.VCoreMongo:
+        return new VCoreMongoShellHandler();
+      case TerminalKind.Cassandra:
+        return new CassandraShellHandler();
+      default:
+        throw new Error(`Unsupported shell type: ${shellType}`);
+    }
+  }
+
+  /**
+   * Gets the display name for a shell type
+   */
+  public static getShellNameForDisplay(terminalKind: TerminalKind): string {
+    switch (terminalKind) {
+      case TerminalKind.Postgres:
+        return "PostgreSQL";
+      case TerminalKind.Mongo:
+      case TerminalKind.VCoreMongo:
+        return "MongoDB";
+      case TerminalKind.Cassandra:
+        return "Cassandra";
+      default:
+        return "";
+    }
+  }
+}

src/Explorer/Tabs/CloudShellTab/ShellTypes/VCoreMongoShellHandler.tsx

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * VCore MongoDB shell type handler
+ */
+
+import { Terminal } from "xterm";
+import { TerminalKind } from "../../../../Contracts/ViewModels";
+import { userContext } from "../../../../UserContext";
+import { listKeys } from "../../../../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { setShellType } from "../Data/CloudShellApiClient";
+import { NetworkAccessHandler } from "../Network/NetworkAccessHandler";
+import { getHostFromUrl } from "../Utils/CommonUtils";
+import { ShellTypeConfig } from "./ShellTypeFactory";
+
+export class VCoreMongoShellHandler implements ShellTypeConfig {
+  private shellType: TerminalKind = TerminalKind.VCoreMongo;
+
+  constructor() {
+    setShellType(this.shellType);
+  }
+
+  public getShellName(): string {
+    return "MongoDB VCore";
+  }
+
+  public async getInitialCommands(): Promise<string> {
+    const dbAccount = userContext.databaseAccount;
+    const endpoint = dbAccount.properties.vcoreMongoEndpoint;
+    
+    // Get database key
+    const dbName = dbAccount.name;
+    let key = "";
+    if (dbName) {
+      const keys = await listKeys(userContext.subscriptionId, userContext.resourceGroup, dbName);
+      key = keys?.primaryMasterKey || "";
+    }
+
+    const config = {
+      host: getHostFromUrl(endpoint),
+      name: dbAccount.name,
+      password: key,
+      endpoint: endpoint
+    };
+
+    return this.getCommands(config).join("\n").concat("\n");
+  }
+
+  public async configureNetworkAccess(terminal: Terminal, region: string): Promise<{
+    vNetSettings: any;
+    isAllPublicAccessEnabled: boolean;
+  }> {
+    // VCore MongoDB uses private endpoints
+    return await NetworkAccessHandler.configureNetworkAccess(terminal, region, this.shellType);
+  }
+
+  private getCommands(config: any): string[] {
+    return [
+      // 1. Fetch and display location details in a readable format
+      "curl -s https://ipinfo.io | jq -r '\"Region: \" + .region + \" Country: \" + .country + \" City: \" + .city + \" IP Addr: \" + .ip'",
+      // 2. Check if mongosh is installed; if not, proceed with installation
+      "if ! command -v mongosh &> /dev/null; then echo '⚠️ mongosh not found. Installing...'; fi",
+      // 3. Download mongosh if not installed
+      "if ! command -v mongosh &> /dev/null; then curl -LO https://downloads.mongodb.com/compass/mongosh-2.3.8-linux-x64.tgz; fi",
+      // 4. Extract mongosh package if not installed
+      "if ! command -v mongosh &> /dev/null; then tar -xvzf mongosh-2.3.8-linux-x64.tgz; fi",
+      // 5. Move mongosh binaries if not installed
+      "if ! command -v mongosh &> /dev/null; then mkdir -p ~/mongosh && mv mongosh-2.3.8-linux-x64/* ~/mongosh/; fi",
+      // 6. Add mongosh to PATH if not installed
+      "if ! command -v mongosh &> /dev/null; then echo 'export PATH=$HOME/mongosh/bin:$PATH' >> ~/.bashrc; fi",
+      // 7. Source .bashrc to update PATH (even if mongosh was already installed)
+      "source ~/.bashrc",
+      // 8. Verify mongosh installation
+      "mongosh --version",
+      // 9. Login to MongoDB
+      `read -p "Enter username: " username && mongosh "mongodb+srv://$username:@${config.endpoint}/?authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000" --tls --tlsAllowInvalidCertificates`
+    ];
+  }
+}

src/Explorer/Tabs/CloudShellTab/Utils/AttachAddOn.tsx

@@ -0,0 +1,123 @@
+
+import { IDisposable, ITerminalAddon, Terminal } from 'xterm';
+
+interface IAttachOptions {
+    bidirectional?: boolean;
+}
+
+export class AttachAddon implements ITerminalAddon {
+    private _socket: WebSocket;
+    private _bidirectional: boolean;
+    private _disposables: IDisposable[] = [];
+    private _socketData: string;
+
+    constructor(socket: WebSocket, options?: IAttachOptions) {
+        this._socket = socket;
+        // always set binary type to arraybuffer, we do not handle blobs
+        this._socket.binaryType = 'arraybuffer';
+        this._bidirectional = !(options && options.bidirectional === false);
+        this._socketData = '';
+    }
+
+    public activate(terminal: Terminal): void {
+        this._disposables.push(
+            addSocketListener(this._socket, 'message', ev => {
+                let data: ArrayBuffer | string = ev.data;
+                const startStatusJson = 'ie_us';
+                const endStatusJson = 'ie_ue';
+
+                if (typeof data === 'object') {
+                    const enc = new TextDecoder("utf-8");
+                    data = enc.decode(ev.data as any);
+                }
+
+                // for example of json object look in TerminalHelper in the socket.onMessage
+                if (data.includes(startStatusJson) && data.includes(endStatusJson)) {
+                    // process as one line
+                    const statusData = data.split(startStatusJson)[1].split(endStatusJson)[0];
+                    data = data.replace(statusData, '');
+                    data = data.replace(startStatusJson, '');
+                    data = data.replace(endStatusJson, '');
+                } else if (data.includes(startStatusJson)) {
+                    // check for start
+                    const partialStatusData = data.split(startStatusJson)[1];
+                    this._socketData += partialStatusData;
+                    data = data.replace(partialStatusData, '');
+                    data = data.replace(startStatusJson, '');
+                } else if (data.includes(endStatusJson)) {
+                    // check for end and process the command
+                    const partialStatusData = data.split(endStatusJson)[0];
+                    this._socketData += partialStatusData;
+                    data = data.replace(partialStatusData, '');
+                    data = data.replace(endStatusJson, '');
+                    this._socketData = '';
+                } else if (this._socketData.length > 0) {
+                    // check if the line is all data then just concatenate
+                    this._socketData += data;
+                    data = '';
+                }
+                terminal.write(data);
+            })
+        );
+
+        if (this._bidirectional) {
+            this._disposables.push(terminal.onData(data => this._sendData(data)));
+            this._disposables.push(terminal.onBinary(data => this._sendBinary(data)));
+        }
+
+        this._disposables.push(addSocketListener(this._socket, 'close', () => this.dispose()));
+        this._disposables.push(addSocketListener(this._socket, 'error', () => this.dispose()));
+    }
+
+    public dispose(): void {
+        for (const d of this._disposables) {
+            d.dispose();
+        }
+    }
+
+    private _sendData(data: string): void {
+        if (!this._checkOpenSocket()) {
+            return;
+        }
+        this._socket.send(data);
+    }
+
+    private _sendBinary(data: string): void {
+        if (!this._checkOpenSocket()) {
+            return;
+        }
+        const buffer = new Uint8Array(data.length);
+        for (let i = 0; i < data.length; ++i) {
+            buffer[i] = data.charCodeAt(i) & 255;
+        }
+        this._socket.send(buffer);
+    }
+
+    private _checkOpenSocket(): boolean {
+        switch (this._socket.readyState) {
+            case WebSocket.OPEN:
+                return true;
+            case WebSocket.CONNECTING:
+                throw new Error('Attach addon was loaded before socket was open');
+            case WebSocket.CLOSING:
+                return false;
+            case WebSocket.CLOSED:
+                throw new Error('Attach addon socket is closed');
+            default:
+                throw new Error('Unexpected socket state');
+        }
+    }
+}
+
+function addSocketListener<K extends keyof WebSocketEventMap>(socket: WebSocket, type: K, handler: (this: WebSocket, ev: WebSocketEventMap[K]) => any): IDisposable {
+    socket.addEventListener(type, handler);
+    return {
+        dispose: () => {
+            if (!handler) {
+                // Already disposed
+                return;
+            }
+            socket.removeEventListener(type, handler);
+        }
+    };
+}

src/Explorer/Tabs/CloudShellTab/Utils/CommonUtils.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Common utility functions for CloudShell
+ */
+
+import { Terminal } from "xterm";
+import { terminalLog } from "./LogFormatter";
+
+/**
+ * Utility function to wait for a specified duration
+ */
+export const wait = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));
+
+/**
+ * Utility function to ask a question in the terminal
+ */
+export const askQuestion = (terminal: Terminal, question: string, defaultAnswer: string = ""): Promise<string> => {
+  return new Promise<string>((resolve) => {
+    const prompt = terminalLog.prompt(`${question} (${defaultAnswer}): `);
+    terminal.writeln(prompt);
+    terminal.focus();
+    let response = "";
+
+    const dataListener = terminal.onData((data: string) => {
+      if (data === "\r") { // Enter key pressed
+        terminal.writeln(""); // Move to a new line
+        dataListener.dispose();
+        if (response.trim() === "") {
+          response = defaultAnswer; // Use default answer if no input
+        }
+        return resolve(response.trim());
+      } else if (data === "\u007F" || data === "\b") { // Handle backspace
+        if (response.length > 0) {
+          response = response.slice(0, -1);
+          terminal.write("\x1B[D \x1B[D"); // Move cursor back, clear character
+        }
+      } else if (data.charCodeAt(0) >= 32) { // Ignore control characters
+        response += data;
+        terminal.write(data); // Display typed characters
+      }
+    });
+
+    // Prevent cursor movement beyond the prompt
+    terminal.onKey(({ domEvent }: { domEvent: KeyboardEvent }) => {
+      if (domEvent.key === "ArrowLeft" && response.length === 0) {
+        domEvent.preventDefault(); // Stop moving left beyond the question
+      }
+    });
+  });
+};
+
+/**
+ * Utility function to ask for yes/no confirmation
+ */
+export const askConfirmation = async (terminal: Terminal, question: string): Promise<boolean> => {
+  terminal.writeln("");
+  terminal.writeln(terminalLog.prompt(`${question} (Y/N)`));
+  terminal.focus();
+  return new Promise<boolean>((resolve) => {
+    const keyListener = terminal.onKey(({ key }: { key: string }) => {
+      keyListener.dispose();
+      terminal.writeln("");
+
+      if (key.toLowerCase() === 'y') {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
+    });
+  });
+};
+
+/**
+ * Extract host from a URL
+ */
+export const getHostFromUrl = (url: string): string => {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.hostname;
+  } catch (error) {
+    console.error("Invalid URL:", error);
+    return "";
+  }
+};

src/Explorer/Tabs/CloudShellTab/Utils/LogFormatter.tsx

@@ -0,0 +1,28 @@
+/**
+ * Standardized terminal logging functions for consistent formatting
+ */
+export const terminalLog = {
+  // Section headers
+  header: (message: string) => `\n\x1B[1;34m┌─ ${message} ${"─".repeat(Math.max(45 - message.length, 0))}\x1B[0m`,
+  subheader: (message: string) => `\x1B[1;36m├ ${message}\x1B[0m`,
+  sectionEnd: () => `\x1B[1;34m└${"─".repeat(50)}\x1B[0m\n`,
+  
+  // Status messages
+  success: (message: string) => `\x1B[32m✓ ${message}\x1B[0m`,
+  warning: (message: string) => `\x1B[33m⚠ ${message}\x1B[0m`,
+  error: (message: string) => `\x1B[31m✗ ${message}\x1B[0m`,
+  info: (message: string) => `\x1B[34m${message}\x1B[0m`,
+  
+  // Resource information
+  database: (message: string) => `\x1B[35m🔶  Database: ${message}\x1B[0m`,
+  vnet: (message: string) => `\x1B[36m🔷  Network: ${message}\x1B[0m`,
+  cloudshell: (message: string) => `\x1B[32m🔷  CloudShell: ${message}\x1B[0m`,
+  
+  // Data formatting
+  item: (label: string, value: string) => `  • ${label}: \x1B[32m${value}\x1B[0m`,
+  progress: (operation: string, status: string) => `\x1B[34m${operation}: \x1B[36m${status}\x1B[0m`,
+  
+  // User interaction
+  prompt: (message: string) => `\x1B[1;37m${message}\x1B[0m`,
+  separator: () => `\x1B[30;1m${"─".repeat(50)}\x1B[0m`
+};

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -2,7 +2,6 @@ import { FeedResponse, ItemDefinition, Resource } from "@azure/cosmos";
 import { waitFor } from "@testing-library/react";
 import { deleteDocuments } from "Common/dataAccess/deleteDocument";
 import { Platform, updateConfigContext } from "ConfigContext";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { useDialog } from "Explorer/Controls/Dialog";
 import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
 import { ProgressModalDialog } from "Explorer/Controls/ProgressModalDialog";
@@ -342,15 +341,10 @@ describe("Documents tab (noSql API)", () => {
     updateConfigContext({ platform: Platform.Fabric });
     updateUserContext({
       fabricContext: {
-        databaseName: "database",
+        connectionId: "test",
-        artifactInfo: {
+        databaseConnectionInfo: undefined,
-          connectionId: "test",
-          resourceTokenInfo: undefined,
-        },
-        artifactType: CosmosDbArtifactType.MIRRORED_KEY,
         isReadOnly: true,
         isVisible: true,
-        fabricClientRpcVersion: "rpcVersion",
       },
     });
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -20,6 +20,7 @@ import {
 import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { readDocument } from "Common/dataAccess/readDocument";
 import { updateDocument } from "Common/dataAccess/updateDocument";
+import { Platform, configContext } from "ConfigContext";
 import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "Explorer/Controls/Dialog";
@@ -42,7 +43,6 @@ import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -344,7 +344,7 @@ export const getTabsButtons = ({
   onRevertExistingDocumentClick,
   onDeleteExistingDocumentsClick,
 }: ButtonsDependencies): CommandButtonComponentProps[] => {
-  if (isFabric() && userContext.fabricContext?.isReadOnly) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
     // All the following buttons require write access
     return [];
   }
@@ -2136,7 +2136,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     selectedColumnIds={selectedColumnIds}
                     columnDefinitions={columnDefinitions}
                     isRowSelectionDisabled={
-                      isBulkDeleteDisabled || (isFabric() && userContext.fabricContext?.isReadOnly)
+                      isBulkDeleteDisabled ||
+                      (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
                     }
                     onColumnSelectionChange={onColumnSelectionChange}
                     defaultColumnSelection={getInitialColumnSelection()}

src/Explorer/Tabs/Shared/CheckFirewallRules.ts

@@ -1,5 +1,6 @@
 import { configContext } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
+import * as ViewModels from "Contracts/ViewModels";
 import { userContext } from "UserContext";
 import { armRequest } from "Utils/arm/request";
 
@@ -10,16 +11,8 @@ export async function checkFirewallRules(
   setMessageFunc?: (message: string) => void,
   message?: string,
 ): Promise<void> {
-  const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const isEnabled = await callFirewallAPis(apiVersion, firewallRulesPredicate);
-  const response: any = await armRequest({
-    host: configContext.ARM_ENDPOINT,
-    path: firewallRulesUri,
-    method: "GET",
-    apiVersion: apiVersion,
-  });
-  const firewallRules: DataModels.FirewallRule[] = response?.data?.value || response?.value || [];
-  const isEnabled = firewallRules.some(firewallRulesPredicate);
 
   if (isAllPublicIPAddressesEnabled) {
     isAllPublicIPAddressesEnabled(isEnabled);
@@ -42,3 +35,89 @@ export async function checkFirewallRules(
     );
   }
 }
+
+export async function callFirewallAPis(
+  apiVersion: string,
+  firewallRulesPredicate: (rule: DataModels.FirewallRule) => unknown): 
+    Promise<boolean> {  
+  const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const response: any = await armRequest({
+    host: configContext.ARM_ENDPOINT,
+    path: firewallRulesUri,
+    method: "GET",
+    apiVersion: apiVersion,
+  });
+  const firewallRules: DataModels.FirewallRule[] = response?.data?.value || response?.value || [];
+  const isEnabled = firewallRules.some(firewallRulesPredicate);
+
+  return isEnabled;
+}
+
+export async function checkNetworkRules(kind: ViewModels.TerminalKind, isPublicAccessEnabledFlag: ko.Observable<boolean> | React.Dispatch<React.SetStateAction<boolean>>): Promise<void> {
+  if (kind === ViewModels.TerminalKind.Postgres) {
+    await checkFirewallRules(
+      "2022-11-08",
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255",
+      isPublicAccessEnabledFlag,
+    );
+  }
+
+  if (kind === ViewModels.TerminalKind.VCoreMongo) {
+    await checkFirewallRules(
+      "2023-03-01-preview",
+      (rule) =>
+        rule.name.startsWith("AllowAllAzureServicesAndResourcesWithinAzureIps") ||
+        (rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"),
+        isPublicAccessEnabledFlag,
+    );
+  }
+}
+
+export async function IsPublicAccessAvailable(kind: ViewModels.TerminalKind): Promise<boolean> {
+  if (kind === ViewModels.TerminalKind.Postgres) {
+    return await callFirewallAPis(
+      "2022-11-08",
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
+    );
+  }
+
+  if (kind === ViewModels.TerminalKind.VCoreMongo) {
+    return await callFirewallAPis(
+      "2023-03-01-preview",
+      (rule) =>
+        rule.name.startsWith("AllowAllAzureServicesAndResourcesWithinAzureIps") ||
+        (rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255")
+    );
+  }
+
+  return !hasDatabaseNetworkRestrictions();
+}
+
+/**
+ * Checks if the database account has network restrictions
+ */
+const hasDatabaseNetworkRestrictions = (): boolean => {
+  return hasVNetRestrictions() || hasFirewallRestrictions() || hasPrivateEndpointsRestrictions();
+};
+
+/**
+ * Checks if the database account has Private Endpoint restrictions
+ */
+export const hasPrivateEndpointsRestrictions = (): boolean => {
+  return userContext.databaseAccount.properties.privateEndpointConnections && userContext.databaseAccount.properties.privateEndpointConnections.length > 0;
+};
+
+/**
+ * Checks if the database account has Firewall restrictions
+ */
+export const hasFirewallRestrictions = (): boolean => {
+  return userContext.databaseAccount.properties.isVirtualNetworkFilterEnabled;;
+};
+
+/**
+ * Checks if the database account has VNet restrictions
+ */
+export const hasVNetRestrictions = (): boolean => {
+  return userContext.databaseAccount.properties.virtualNetworkRules && userContext.databaseAccount.properties.virtualNetworkRules.length > 0
+};

src/Explorer/Tabs/Tabs.tsx

@@ -2,7 +2,6 @@ import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { QueryCopilotTab } from "Explorer/QueryCopilot/QueryCopilotTab";
-import { FabricHomeScreen } from "Explorer/SplashScreen/FabricHome";
 import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
@@ -10,7 +9,6 @@ import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
 import { VcoreMongoConnectTab } from "Explorer/Tabs/VCoreMongoConnectTab";
 import { VcoreMongoQuickstartTab } from "Explorer/Tabs/VCoreMongoQuickstartTab";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
@@ -273,11 +271,7 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
         <ConnectTab />
       );
     case ReactTabKind.Home:
-      if (isFabricNative()) {
+      return <SplashScreen explorer={explorer} />;
-        return <FabricHomeScreen explorer={explorer} />;
-      } else {
-        return <SplashScreen explorer={explorer} />;
-      }
     case ReactTabKind.Quickstart:
       return userContext.apiType === "VCoreMongo" ? (
         <VcoreMongoQuickstartTab explorer={explorer} />

src/Explorer/Tabs/TerminalTab.tsx

@@ -1,7 +1,7 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
-import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
+import { checkNetworkRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
 import * as ko from "knockout";
 import * as React from "react";
 import FirewallRuleScreenshot from "../../../images/firewallRule.png";
@@ -13,8 +13,10 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "../Explorer";
 import { useNotebook } from "../Notebook/useNotebook";
+import { CloudShellTerminalComponent } from "./CloudShellTab/CloudShellTabComponent";
 import TabsBase from "./TabsBase";
 
+
 export interface TerminalTabOptions extends ViewModels.TabOptions {
   account: DataModels.DatabaseAccount;
   container: Explorer;
@@ -43,81 +45,98 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
         <QuickstartFirewallNotification
           messageType={MessageTypes.OpenPostgresNetworkingBlade}
           screenshot={FirewallRuleScreenshot}
-          shellName={this.getShellNameForDisplay(this.kind)}
+          shellName={getShellNameForDisplay(this.kind)}
         />
       );
     }
-
     return this.parameters() ? (
       <NotebookTerminalComponent
         notebookServerInfo={this.getNotebookServerInfo()}
         databaseAccount={this.getDatabaseAccount()}
         tabId={this.getTabId()}
         username={this.getUsername()}
-      />
+      />): (
+      <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
+    );
+  }
+}
+
+/**
+ * CloudShell terminal tab
+ */
+class CloudShellTerminalComponentAdapter implements ReactAdapter {
+
+  // parameters: true: show, false: hide
+  public parameters: ko.Computed<boolean>;
+  constructor(
+    private kind: ViewModels.TerminalKind,
+  ) {}
+
+  public renderComponent(): JSX.Element {
+
+    console.log("this.parameters() " + this.parameters() );
+    return this.parameters() ? (
+      <CloudShellTerminalComponent 
+        shellType={this.kind}/>
     ) : (
       <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
     );
   }
+}
 
-  private getShellNameForDisplay(terminalKind: ViewModels.TerminalKind): string {
+export const getShellNameForDisplay = (terminalKind: ViewModels.TerminalKind): string => {
-    switch (terminalKind) {
+  switch (terminalKind) {
-      case ViewModels.TerminalKind.Postgres:
+    case ViewModels.TerminalKind.Postgres:
-        return "PostgreSQL";
+      return "PostgreSQL";
-      case ViewModels.TerminalKind.Mongo:
+    case ViewModels.TerminalKind.Mongo:
-      case ViewModels.TerminalKind.VCoreMongo:
+    case ViewModels.TerminalKind.VCoreMongo:
-        return "MongoDB";
+      return "MongoDB";
-      default:
+    default:
-        return "";
+      return "";
-    }
   }
 }
 
 export default class TerminalTab extends TabsBase {
-  public readonly html = '<div style="height: 100%" data-bind="react:notebookTerminalComponentAdapter"></div>  ';
+  public readonly html = '<div style="height: 100%" data-bind="react: terminalComponentAdapter"></div>';
   private container: Explorer;
-  private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
+  private terminalComponentAdapter: any;
   private isAllPublicIPAddressesEnabled: ko.Observable<boolean>;
 
-  constructor(options: TerminalTabOptions) {
+  constructor (options: TerminalTabOptions) {
     super(options);
     this.container = options.container;
     this.isAllPublicIPAddressesEnabled = ko.observable(true);
-    this.notebookTerminalComponentAdapter = new NotebookTerminalComponentAdapter(
+    
-      () => this.getNotebookServerInfo(options),
+    checkNetworkRules(options.kind, this.isAllPublicIPAddressesEnabled);
-      () => userContext?.databaseAccount,
+    
-      () => this.tabId,
+    this.initializeNotebookTerminalAdapter(options);
-      () => this.getUsername(),
+  }
-      this.isAllPublicIPAddressesEnabled,
+
-      options.kind,
+  private async initializeNotebookTerminalAdapter(options: TerminalTabOptions): Promise<void> {
-    );
+    if (userContext.features.enableCloudShell) {
-    this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
+      this.terminalComponentAdapter = new CloudShellTerminalComponentAdapter(
-      if (
+        options.kind
+      );
+
+      this.terminalComponentAdapter.parameters = ko.computed<boolean>(() =>
+        this.isTemplateReady()
+      );
+    }
+    else {
+      this.terminalComponentAdapter = new NotebookTerminalComponentAdapter(
+        () => this.getNotebookServerInfo(options),
+        () => userContext?.databaseAccount,
+        () => this.tabId,
+        () => this.getUsername(),
+        this.isAllPublicIPAddressesEnabled,
+        options.kind
+      );
+
+      this.terminalComponentAdapter.parameters = ko.computed<boolean>(() =>
         this.isTemplateReady() &&
         useNotebook.getState().isNotebookEnabled &&
         useNotebook.getState().notebookServerInfo?.notebookServerEndpoint &&
         this.isAllPublicIPAddressesEnabled()
-      ) {
-        return true;
-      }
-      return false;
-    });
-
-    if (options.kind === ViewModels.TerminalKind.Postgres) {
-      checkFirewallRules(
-        "2022-11-08",
-        (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255",
-        this.isAllPublicIPAddressesEnabled,
-      );
-    }
-
-    if (options.kind === ViewModels.TerminalKind.VCoreMongo) {
-      checkFirewallRules(
-        "2023-03-01-preview",
-        (rule) =>
-          rule.name.startsWith("AllowAllAzureServicesAndResourcesWithinAzureIps") ||
-          (rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"),
-        this.isAllPublicIPAddressesEnabled,
       );
     }
   }

src/Explorer/Tree/Collection.ts

@@ -1,7 +1,6 @@
 import { Resource, StoredProcedureDefinition, TriggerDefinition, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import * as ko from "knockout";
 import * as _ from "underscore";
 import * as Constants from "../../Common/Constants";
@@ -35,6 +34,7 @@ import QueryTablesTab from "../Tabs/QueryTablesTab";
 import { CollectionSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
+import { Platform, configContext } from "./../../ConfigContext";
 import ConflictId from "./ConflictId";
 import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
@@ -58,8 +58,6 @@ export default class Collection implements ViewModels.Collection {
   public uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
   public usageSizeInKB: ko.Observable<number>;
   public computedProperties: ko.Observable<DataModels.ComputedProperties>;
-  public materializedViews: ko.Observable<DataModels.MaterializedView[]>;
-  public materializedViewDefinition: ko.Observable<DataModels.MaterializedViewDefinition>;
 
   public offer: ko.Observable<DataModels.Offer>;
   public conflictResolutionPolicy: ko.Observable<DataModels.ConflictResolutionPolicy>;
@@ -126,8 +124,6 @@ export default class Collection implements ViewModels.Collection {
     this.requestSchema = data.requestSchema;
     this.geospatialConfig = ko.observable(data.geospatialConfig);
     this.computedProperties = ko.observable(data.computedProperties);
-    this.materializedViews = ko.observable(data.materializedViews);
-    this.materializedViewDefinition = ko.observable(data.materializedViewDefinition);
 
     this.partitionKeyPropertyHeaders = this.partitionKey?.paths;
     this.partitionKeyProperties = this.partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader, i) => {
@@ -214,7 +210,7 @@ export default class Collection implements ViewModels.Collection {
     });
 
     const showScriptsMenus: boolean =
-      !isFabricMirrored() && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+      configContext.platform != Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
     this.showStoredProcedures = ko.observable<boolean>(showScriptsMenus);
     this.showTriggers = ko.observable<boolean>(showScriptsMenus);
     this.showUserDefinedFunctions = ko.observable<boolean>(showScriptsMenus);

src/Explorer/Tree/Database.tsx

@@ -19,7 +19,7 @@ import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import Explorer from "../Explorer";
-import { AddCollectionPanel } from "../Panes/AddCollectionPanel/AddCollectionPanel";
+import { AddCollectionPanel } from "../Panes/AddCollectionPanel";
 import { DatabaseSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";

src/Explorer/Tree/ResourceTree.tsx

@@ -1,7 +1,7 @@
 import { Tree, TreeItemValue, TreeOpenChangeData, TreeOpenChangeEvent } from "@fluentui/react-components";
 import { Home16Regular } from "@fluentui/react-icons";
 import { AuthType } from "AuthType";
-import { Collection } from "Contracts/ViewModels";
+import { Platform, configContext } from "ConfigContext";
 import { useTreeStyles } from "Explorer/Controls/TreeComponent/Styles";
 import { TreeNode, TreeNodeComponent } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import {
@@ -11,7 +11,6 @@ import {
 } from "Explorer/Tree/treeNodeUtil";
 import { useDatabases } from "Explorer/useDatabases";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -61,7 +60,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ explorer }: Resource
 
   const databaseTreeNodes = useMemo(() => {
     return userContext.authType === AuthType.ResourceToken
-      ? createResourceTokenTreeNodes(resourceTokenCollection as Collection)
+      ? createResourceTokenTreeNodes(resourceTokenCollection)
       : createDatabaseTreeNodes(explorer, isNotebookEnabled, databases, refreshActiveTab);
   }, [resourceTokenCollection, databases, isNotebookEnabled, refreshActiveTab]);
 
@@ -77,22 +76,23 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ explorer }: Resource
       : [];
   }, [isSampleDataEnabled, sampleDataResourceTokenCollection]);
 
-  const headerNodes: TreeNode[] = isFabricMirrored()
+  const headerNodes: TreeNode[] =
-    ? []
+    configContext.platform === Platform.Fabric
-    : [
+      ? []
-        {
+      : [
-          id: "home",
+          {
-          iconSrc: <Home16Regular />,
+            id: "home",
-          label: "Home",
+            iconSrc: <Home16Regular />,
-          isSelected: () =>
+            label: "Home",
-            useSelectedNode.getState().selectedNode === undefined &&
+            isSelected: () =>
-            useTabs.getState().activeReactTab === ReactTabKind.Home,
+              useSelectedNode.getState().selectedNode === undefined &&
-          onClick: () => {
+              useTabs.getState().activeReactTab === ReactTabKind.Home,
-            useSelectedNode.getState().setSelectedNode(undefined);
+            onClick: () => {
-            useTabs.getState().openAndActivateReactTab(ReactTabKind.Home);
+              useSelectedNode.getState().setSelectedNode(undefined);
+              useTabs.getState().openAndActivateReactTab(ReactTabKind.Home);
+            },
           },
-        },
+        ];
-      ];
 
   const rootNodes: TreeNode[] = useMemo(() => {
     if (sampleDataNodes.length > 0) {

src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap

@@ -30,7 +30,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -72,7 +72,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -145,7 +145,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -264,7 +264,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -369,7 +369,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -442,7 +442,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -546,7 +546,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -696,7 +696,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -740,7 +740,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
 ]
 `;
 
-exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric non read-only 1`] = `
+exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric 1`] = `
 [
   {
     "children": [
@@ -753,14 +753,8 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -780,14 +774,8 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -834,14 +822,8 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -888,14 +870,8 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -939,145 +915,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
 ]
 `;
 
-exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric read-only 1`] = `
-[
-  {
-    "children": [
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <EyeRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "standardCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <EyeRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "conflictsCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-    ],
-    "className": "databaseNode",
-    "contextMenu": undefined,
-    "iconSrc": <DatabaseRegular
-      fontSize={16}
-    />,
-    "isExpanded": true,
-    "isSelected": [Function],
-    "label": "standardDb",
-    "onCollapsed": [Function],
-    "onContextMenuOpen": [Function],
-    "onExpanded": [Function],
-  },
-  {
-    "children": [
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <EyeRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "sampleItemsCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-    ],
-    "className": "databaseNode",
-    "contextMenu": undefined,
-    "iconSrc": <DatabaseRegular
-      fontSize={16}
-    />,
-    "isExpanded": true,
-    "isSelected": [Function],
-    "label": "sharedDatabase",
-    "onCollapsed": [Function],
-    "onContextMenuOpen": [Function],
-    "onExpanded": [Function],
-  },
-  {
-    "children": [
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <EyeRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "schemaCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-      {
-        "className": "loadMoreNode",
-        "label": "load more",
-        "onClick": [Function],
-      },
-    ],
-    "className": "databaseNode",
-    "contextMenu": undefined,
-    "iconSrc": <DatabaseRegular
-      fontSize={16}
-    />,
-    "isExpanded": true,
-    "isSelected": [Function],
-    "label": "giganticDatabase",
-    "onCollapsed": [Function],
-    "onContextMenuOpen": [Function],
-    "onExpanded": [Function],
-  },
-]
-`;
-
 exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Portal 1`] = `
 [
   {
@@ -1135,7 +972,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
                   },
                 ],
                 "isSelected": [Function],
-                "label": "mockSproc4",
+                "label": "mockSproc3",
                 "onClick": [Function],
               },
             ],
@@ -1153,7 +990,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
                   },
                 ],
                 "isSelected": [Function],
-                "label": "mockUdf4",
+                "label": "mockUdf3",
                 "onClick": [Function],
               },
             ],
@@ -1171,7 +1008,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
                   },
                 ],
                 "isSelected": [Function],
-                "label": "mockTrigger4",
+                "label": "mockTrigger3",
                 "onClick": [Function],
               },
             ],
@@ -1208,7 +1045,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -1311,7 +1148,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -1445,7 +1282,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -1625,7 +1462,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -1799,7 +1636,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -1897,7 +1734,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -2031,7 +1868,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -2211,7 +2048,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
-        "iconSrc": <EyeRegular
+        "iconSrc": <DocumentMultipleRegular
           fontSize={16}
         />,
         "isExpanded": true,
@@ -2266,7 +2103,7 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
       },
     ],
     "className": "collectionNode",
-    "iconSrc": <EyeRegular
+    "iconSrc": <DocumentMultipleRegular
       fontSize={16}
     />,
     "isExpanded": true,

src/Explorer/Tree/treeNodeUtil.test.ts

@@ -1,6 +1,5 @@
 import { CapabilityNames } from "Common/Constants";
 import { Platform, updateConfigContext } from "ConfigContext";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -17,7 +16,7 @@ import {
 } from "Explorer/Tree/treeNodeUtil";
 import { useDatabases } from "Explorer/useDatabases";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import { FabricContext, updateUserContext, UserContext } from "UserContext";
+import { updateUserContext } from "UserContext";
 import PromiseSource from "Utils/PromiseSource";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTabs } from "hooks/useTabs";
@@ -82,7 +81,6 @@ jest.mock("Explorer/Tree/Trigger", () => {
 jest.mock("Common/DatabaseAccountUtility", () => {
   return {
     isPublicInternetAccessAllowed: () => true,
-    isMaterializedViewsEnabled: () => false,
   };
 });
 
@@ -135,15 +133,6 @@ const baseCollection = {
     kind: "hash",
     version: 2,
   },
-  materializedViews: ko.observable<DataModels.MaterializedView[]>([
-    { id: "view1", _rid: "rid1" },
-    { id: "view2", _rid: "rid2" },
-  ]),
-  materializedViewDefinition: ko.observable<DataModels.MaterializedViewDefinition>({
-    definition: "SELECT * FROM c WHERE c.id = 1",
-    sourceCollectionId: "source1",
-    sourceCollectionRid: "rid123",
-  }),
   storedProcedures: ko.observableArray([]),
   userDefinedFunctions: ko.observableArray([]),
   triggers: ko.observableArray([]),
@@ -371,30 +360,9 @@ describe("createDatabaseTreeNodes", () => {
     });
   });
 
-  it.each<[string, Platform, boolean, Partial<DataModels.DatabaseAccountExtendedProperties>, Partial<UserContext>]>([
+  it.each<[string, Platform, boolean, Partial<DataModels.DatabaseAccountExtendedProperties>]>([
-    [
+    ["the SQL API, on Fabric", Platform.Fabric, false, { capabilities: [], enableMultipleWriteLocations: true }],
-      "the SQL API, on Fabric read-only",
+    ["the SQL API, on Portal", Platform.Portal, false, { capabilities: [], enableMultipleWriteLocations: true }],
-      Platform.Fabric,
-      false,
-      { capabilities: [], enableMultipleWriteLocations: true },
-      { fabricContext: { isReadOnly: true } as FabricContext<CosmosDbArtifactType> },
-    ],
-    [
-      "the SQL API, on Fabric non read-only",
-      Platform.Fabric,
-      false,
-      { capabilities: [], enableMultipleWriteLocations: true },
-      { fabricContext: { isReadOnly: false } as FabricContext<CosmosDbArtifactType> },
-    ],
-    [
-      "the SQL API, on Portal",
-      Platform.Portal,
-      false,
-      { capabilities: [], enableMultipleWriteLocations: true },
-      {
-        fabricContext: undefined,
-      },
-    ],
     [
       "the Cassandra API, serverless, on Hosted",
       Platform.Hosted,
@@ -405,7 +373,6 @@ describe("createDatabaseTreeNodes", () => {
           { name: CapabilityNames.EnableServerless, description: "" },
         ],
       },
-      { fabricContext: undefined },
     ],
     [
       "the Mongo API, with Notebooks and Phoenix features, on Emulator",
@@ -414,31 +381,26 @@ describe("createDatabaseTreeNodes", () => {
       {
         capabilities: [{ name: CapabilityNames.EnableMongo, description: "" }],
       },
-      { fabricContext: undefined },
     ],
-  ])(
+  ])("generates the correct tree structure for %s", (_, platform, isNotebookEnabled, dbAccountProperties) => {
-    "generates the correct tree structure for %s",
+    useNotebook.setState({ isPhoenixFeatures: isNotebookEnabled });
-    (_, platform, isNotebookEnabled, dbAccountProperties, userContext) => {
+    updateConfigContext({ platform });
-      useNotebook.setState({ isPhoenixFeatures: isNotebookEnabled });
+    updateUserContext({
-      updateConfigContext({ platform });
+      databaseAccount: {
-      updateUserContext({
+        properties: {
-        ...userContext,
+          enableMultipleWriteLocations: true,
-        databaseAccount: {
+          ...dbAccountProperties,
-          properties: {
+        },
-            enableMultipleWriteLocations: true,
+      } as unknown as DataModels.DatabaseAccount,
-            ...dbAccountProperties,
+    });
-          },
+    const nodes = createDatabaseTreeNodes(
-        } as unknown as DataModels.DatabaseAccount,
+      explorer,
-      });
+      isNotebookEnabled,
-      const nodes = createDatabaseTreeNodes(
+      useDatabases.getState().databases,
-        explorer,
+      refreshActiveTab,
-        isNotebookEnabled,
+    );
-        useDatabases.getState().databases,
+    expect(nodes).toMatchSnapshot();
-        refreshActiveTab,
+  });
-      );
-      expect(nodes).toMatchSnapshot();
-    },
-  );
 
   // The above tests focused on the tree structure. The below tests focus on some core behaviors of the nodes.
   // They are not exhaustive, because exhaustive tests here require a lot of mocking and can become very brittle.
@@ -589,18 +551,7 @@ describe("createDatabaseTreeNodes", () => {
       });
 
       it.each([
-        [
+        ["in Fabric", () => updateConfigContext({ platform: Platform.Fabric })],
-          "in Fabric",
-          () => {
-            updateConfigContext({ platform: Platform.Fabric });
-            updateUserContext({
-              fabricContext: {
-                artifactType: CosmosDbArtifactType.MIRRORED_KEY,
-                isReadOnly: true,
-              } as FabricContext<CosmosDbArtifactType>,
-            });
-          },
-        ],
         [
           "for Cassandra API",
           () =>

src/Explorer/Tree/treeNodeUtil.tsx

@@ -1,4 +1,4 @@
-import { DatabaseRegular, DocumentMultipleRegular, EyeRegular, SettingsRegular } from "@fluentui/react-icons";
+import { DatabaseRegular, DocumentMultipleRegular, SettingsRegular } from "@fluentui/react-icons";
 import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import { collectionWasOpened } from "Explorer/MostRecentActivity/MostRecentActivity";
 import TabsBase from "Explorer/Tabs/TabsBase";
@@ -6,7 +6,6 @@ import StoredProcedure from "Explorer/Tree/StoredProcedure";
 import Trigger from "Explorer/Tree/Trigger";
 import UserDefinedFunction from "Explorer/Tree/UserDefinedFunction";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import { getItemName } from "Utils/APITypeUtils";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
 import { useTabs } from "hooks/useTabs";
@@ -23,13 +22,14 @@ import { useNotebook } from "../Notebook/useNotebook";
 import { useSelectedNode } from "../useSelectedNode";
 
 export const shouldShowScriptNodes = (): boolean => {
-  return !isFabricMirrored() && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+  return (
+    configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+  );
 };
 
 const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;
 const TreeSettingsIcon = <SettingsRegular fontSize={16} />;
 const TreeCollectionIcon = <DocumentMultipleRegular fontSize={16} />;
-const MaterializedViewCollectionIcon = <EyeRegular fontSize={16} />; //check icon
 
 export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => {
   const updatedSampleTree: TreeNode = {
@@ -81,7 +81,7 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie
   return [updatedSampleTree];
 };
 
-export const createResourceTokenTreeNodes = (collection: ViewModels.Collection): TreeNode[] => {
+export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBase): TreeNode[] => {
   if (!collection) {
     return [
       {
@@ -111,7 +111,7 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.Collection):
     isExpanded: true,
     children,
     className: "collectionNode",
-    iconSrc: collection.materializedViewDefinition() ? MaterializedViewCollectionIcon : TreeCollectionIcon,
+    iconSrc: TreeCollectionIcon,
     onClick: () => {
       // Rewritten version of expandCollapseCollection
       useSelectedNode.getState().setSelectedNode(collection);
@@ -229,7 +229,7 @@ export const buildCollectionNode = (
     children: children,
     className: "collectionNode",
     contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
-    iconSrc: collection.materializedViewDefinition() ? MaterializedViewCollectionIcon : TreeCollectionIcon,
+    iconSrc: TreeCollectionIcon,
     onClick: () => {
       useSelectedNode.getState().setSelectedNode(collection);
       collection.openTab();

src/Platform/Fabric/FabricUtil.ts

@@ -1,112 +1,56 @@
 import { sendCachedDataMessage } from "Common/MessageHandler";
-import { configContext, Platform } from "ConfigContext";
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
-import { CosmosDbArtifactType, ResourceTokenInfo } from "Contracts/FabricMessagesContract";
+import { FabricDatabaseConnectionInfo } from "Contracts/FabricMessagesContract";
-import { FabricArtifactInfo, updateUserContext, userContext } from "UserContext";
+import { updateUserContext, userContext } from "UserContext";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 
 const TOKEN_VALIDITY_MS = (3600 - 600) * 1000; // 1 hour minus 10 minutes to be safe
 const DEBOUNCE_DELAY_MS = 1000 * 20; // 20 second
-let timeoutId: NodeJS.Timeout | undefined;
+let timeoutId: NodeJS.Timeout;
 
 // Prevents multiple parallel requests during DEBOUNCE_DELAY_MS
-let lastRequestTimestamp: number | undefined = undefined;
+let lastRequestTimestamp: number = undefined;
 
-/**
+const requestDatabaseResourceTokens = async (): Promise<void> => {
- * Request fabric token:
- * - Mirrored key and AAD: Database Resource Tokens
- * - Native: AAD token
- * @returns
- */
-const requestFabricToken = async (): Promise<void> => {
   if (lastRequestTimestamp !== undefined && lastRequestTimestamp + DEBOUNCE_DELAY_MS > Date.now()) {
     return;
   }
 
   lastRequestTimestamp = Date.now();
   try {
-    if (isFabricMirrored()) {
+    const fabricDatabaseConnectionInfo = await sendCachedDataMessage<FabricDatabaseConnectionInfo>(
-      await requestAndStoreDatabaseResourceTokens();
+      FabricMessageTypes.GetAllResourceTokens,
-    } else if (isFabricNative()) {
+      [],
-      await requestAndStoreAccessToken();
+      userContext.fabricContext.connectionId,
+    );
+
+    if (!userContext.databaseAccount.properties.documentEndpoint) {
+      userContext.databaseAccount.properties.documentEndpoint = fabricDatabaseConnectionInfo.endpoint;
     }
 
-    scheduleRefreshFabricToken();
+    updateUserContext({
+      fabricContext: {
+        ...userContext.fabricContext,
+        databaseConnectionInfo: fabricDatabaseConnectionInfo,
+        isReadOnly: true,
+      },
+      databaseAccount: { ...userContext.databaseAccount },
+    });
+    scheduleRefreshDatabaseResourceToken();
   } catch (error) {
-    logConsoleError(error as string);
+    logConsoleError(error);
     throw error;
   } finally {
     lastRequestTimestamp = undefined;
   }
 };
 
-const requestAndStoreDatabaseResourceTokens = async (): Promise<void> => {
-  if (!userContext.fabricContext || !userContext.databaseAccount) {
-    // This should not happen
-    logConsoleError("Fabric context or database account is missing: cannot request tokens");
-    return;
-  }
-
-  const resourceTokenInfo = await sendCachedDataMessage<ResourceTokenInfo>(
-    FabricMessageTypes.GetAllResourceTokens,
-    [],
-    userContext.fabricContext.artifactInfo?.connectionId,
-  );
-
-  if (!userContext.databaseAccount.properties.documentEndpoint) {
-    userContext.databaseAccount.properties.documentEndpoint = resourceTokenInfo.endpoint;
-  }
-
-  if (resourceTokenInfo.credentialType === "OAuth2") {
-    // Mirrored AAD
-    updateUserContext({
-      fabricContext: {
-        ...userContext.fabricContext,
-        databaseName: resourceTokenInfo.databaseId,
-        artifactInfo: undefined,
-        isReadOnly: resourceTokenInfo.isReadOnly ?? userContext.fabricContext.isReadOnly,
-      },
-      databaseAccount: { ...userContext.databaseAccount },
-      aadToken: resourceTokenInfo.accessToken,
-    });
-  } else {
-    // TODO: In Fabric contract V2, credentialType is undefined. For V3, it is "Key". Check for "Key" when V3 is supported for Fabric Mirroring Key
-    // Mirrored key
-    updateUserContext({
-      fabricContext: {
-        ...userContext.fabricContext,
-        databaseName: resourceTokenInfo.databaseId,
-        artifactInfo: {
-          ...(userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]),
-          resourceTokenInfo,
-        },
-        isReadOnly: resourceTokenInfo.isReadOnly ?? userContext.fabricContext.isReadOnly,
-      },
-      databaseAccount: { ...userContext.databaseAccount },
-    });
-  }
-};
-
-const requestAndStoreAccessToken = async (): Promise<void> => {
-  if (!userContext.fabricContext || !userContext.databaseAccount) {
-    // This should not happen
-    logConsoleError("Fabric context or database account is missing: cannot request tokens");
-    return;
-  }
-
-  const accessTokenInfo = await sendCachedDataMessage<{ accessToken: string }>(FabricMessageTypes.GetAccessToken, []);
-
-  updateUserContext({
-    aadToken: accessTokenInfo.accessToken,
-  });
-};
-
 /**
  * Check token validity and schedule a refresh if necessary
  * @param tokenTimestamp
  * @returns
  */
-export const scheduleRefreshFabricToken = (refreshNow?: boolean): Promise<void> => {
+export const scheduleRefreshDatabaseResourceToken = (refreshNow?: boolean): Promise<void> => {
   return new Promise((resolve) => {
     if (timeoutId !== undefined) {
       clearTimeout(timeoutId);
@@ -115,7 +59,7 @@ export const scheduleRefreshFabricToken = (refreshNow?: boolean): Promise<void>
 
     timeoutId = setTimeout(
       () => {
-        requestFabricToken().then(resolve);
+        requestDatabaseResourceTokens().then(resolve);
       },
       refreshNow ? 0 : TOKEN_VALIDITY_MS,
     );
@@ -124,15 +68,6 @@ export const scheduleRefreshFabricToken = (refreshNow?: boolean): Promise<void>
 
 export const checkDatabaseResourceTokensValidity = (tokenTimestamp: number): void => {
   if (tokenTimestamp + TOKEN_VALIDITY_MS < Date.now()) {
-    scheduleRefreshFabricToken(true);
+    scheduleRefreshDatabaseResourceToken(true);
   }
 };
-
-export const isFabric = (): boolean => configContext.platform === Platform.Fabric;
-export const isFabricMirroredKey = (): boolean =>
-  isFabric() && userContext.fabricContext?.artifactType === CosmosDbArtifactType.MIRRORED_KEY;
-export const isFabricMirroredAAD = (): boolean =>
-  isFabric() && userContext.fabricContext?.artifactType === CosmosDbArtifactType.MIRRORED_AAD;
-export const isFabricMirrored = (): boolean => isFabricMirroredKey() || isFabricMirroredAAD();
-export const isFabricNative = (): boolean =>
-  isFabric() && userContext.fabricContext?.artifactType === CosmosDbArtifactType.NATIVE;

src/Platform/Hosted/extractFeatures.ts

@@ -39,6 +39,7 @@ export type Features = {
   readonly copilotChatFixedMonacoEditorHeight: boolean;
   readonly enablePriorityBasedExecution: boolean;
   readonly disableConnectionStringLogin: boolean;
+  readonly enableCloudShell: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -110,6 +111,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
+    enableCloudShell: "true" === get("enablecloudshell"),
   };
 }
 

src/SelfServe/SelfServe.tsx

@@ -41,13 +41,13 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
     case SelfServeType.example: {
       const SelfServeExample = await import(/* webpackChunkName: "SelfServeExample" */ "./Example/SelfServeExample");
       const selfServeExample = new SelfServeExample.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(selfServeExample.constructor.name);
       return selfServeExample.toSelfServeDescriptor();
     }
     case SelfServeType.sqlx: {
       const SqlX = await import(/* webpackChunkName: "SqlX" */ "./SqlX/SqlX");
       const sqlX = new SqlX.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(sqlX.constructor.name);
       return sqlX.toSelfServeDescriptor();
     }
     case SelfServeType.graphapicompute: {
@@ -55,7 +55,7 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
         /* webpackChunkName: "GraphAPICompute" */ "./GraphAPICompute/GraphAPICompute"
       );
       const graphAPICompute = new GraphAPICompute.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(graphAPICompute.constructor.name);
       return graphAPICompute.toSelfServeDescriptor();
     }
     case SelfServeType.materializedviewsbuilder: {
@@ -63,7 +63,7 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
         /* webpackChunkName: "MaterializedViewsBuilder" */ "./MaterializedViewsBuilder/MaterializedViewsBuilder"
       );
       const materializedViewsBuilder = new MaterializedViewsBuilder.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(materializedViewsBuilder.constructor.name);
       return materializedViewsBuilder.toSelfServeDescriptor();
     }
     default:
@@ -103,7 +103,7 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
   const urlSearchParams = new URLSearchParams(window.location.search);
   const selfServeTypeText = urlSearchParams.get("selfServeType") || inputs.selfServeType;
-  const selfServeType = SelfServeType[selfServeTypeText.toLocaleLowerCase() as keyof typeof SelfServeType];
+  const selfServeType = SelfServeType[selfServeTypeText?.toLowerCase() as keyof typeof SelfServeType];
   if (
     !inputs.subscriptionId ||
     !inputs.resourceGroup ||

src/SelfServe/SelfServeUtils.tsx

@@ -29,11 +29,10 @@ export enum SelfServeType {
   // Unsupported self serve type passed as feature flag
   invalid = "invalid",
   // Add your self serve types here
-  // NOTE: text and casing of the enum's value must match the corresponding file in Localization\en\
+  example = "example",
-  example = "SelfServeExample",
+  sqlx = "sqlx",
-  sqlx = "SqlX",
+  graphapicompute = "graphapicompute",
-  graphapicompute = "GraphAPICompute",
+  materializedviewsbuilder = "materializedviewsbuilder",
-  materializedviewsbuilder = "MaterializedViewsBuilder",
 }
 
 /**