Merge branch 'users/bogercraig/de_read_region_selection' of https://github.com/Azure/cosmos-explorer into users/bogercraig/de_read_region_selection

Need to modify endpoint selection in CosmosClient to select endpoints based on client called.

.gitignore

@@ -16,4 +16,5 @@ Contracts/*
 .env
 failure.png
 screenshots/*
-GettingStarted-ignore*.ipynb
+GettingStarted-ignore*.ipynb
+.vscode/

src/Common/Constants.ts

@@ -124,6 +124,34 @@ export enum MongoBackendEndpointType {
   remote,
 }
 
+export enum BackendApi {
+  GenerateToken,
+}
+
+export class PortalBackendEndpoints {
+  public static readonly Development: string = "https://localhost:7235";
+  public static readonly Mpac: string = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
+  public static readonly Prod: string = "https://cdb-ms-prod-pbe.cosmos.azure.com";
+  public static readonly Fairfax: string = "https://cdb-ff-prod-pbe.cosmos.azure.us";
+  public static readonly Mooncake: string = "https://cdb-mc-prod-pbe.cosmos.azure.cn";
+}
+
+export class MongoProxyEndpoints {
+  public static readonly Development: string = "https://localhost:7238";
+  public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
+  public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
+  public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
+  public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
+}
+
+export class CassandraProxyEndpoints {
+  public static readonly Development: string = "https://localhost:7240";
+  public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
+  public static readonly Prod: string = "https://cdb-ms-prod-cp.cosmos.azure.com";
+  public static readonly Fairfax: string = "https://cdb-ff-prod-cp.cosmos.azure.us";
+  public static readonly Mooncake: string = "https://cdb-mc-prod-cp.cosmos.azure.cn";
+}
+
 //TODO: Remove this when new backend is migrated over
 export class CassandraBackend {
   public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
@@ -139,7 +167,7 @@ export class CassandraBackend {
 export class CassandraProxyAPIs {
   public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
   public static readonly connectionStringCreateOrDeleteApi: string = "api/connectionstring/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra/postquery";
+  public static readonly queryApi: string = "api/cassandra";
   public static readonly connectionStringQueryApi: string = "api/connectionstring/cassandra";
   public static readonly keysApi: string = "api/cassandra/keys";
   public static readonly connectionStringKeysApi: string = "api/connectionstring/cassandra/keys";
@@ -446,22 +474,6 @@ export class JunoEndpoints {
   public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }
 
-export class MongoProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7238";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
-}
-
-export class CassandraProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7240";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-cp.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-cp.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-cp.cosmos.azure.cn";
-}
-
 export class PriorityLevel {
   public static readonly High = "high";
   public static readonly Low = "low";

src/Common/CosmosClient.ts

@@ -1,7 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
-import { sendCachedDataMessage } from "Common/MessageHandler";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
+import { AuthorizationToken } from "Contracts/MessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
@@ -51,15 +50,23 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       case Cosmos.ResourceType.offer:
       case Cosmos.ResourceType.user:
       case Cosmos.ResourceType.permission:
-        // User master tokens
-        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-          MessageTypes.GetAuthorizationToken,
-          [requestInfo],
-          userContext.fabricContext.connectionId,
-        );
-        console.log("Response from Fabric: ", authorizationToken);
-        headers[HttpHeaders.msDate] = authorizationToken.XDate;
-        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
+        // 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 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
+
+      /* ************** TODO: Uncomment this code if we need to support these operations **************
+      // User master tokens
+      const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
+        MessageTypes.GetAuthorizationToken,
+        [requestInfo],
+        userContext.fabricContext.connectionId,
+      );
+      console.log("Response from Fabric: ", authorizationToken);
+      headers[HttpHeaders.msDate] = authorizationToken.XDate;
+      return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
+       ***********************************************************************************************/
     }
   }
 
@@ -78,6 +85,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   return decodeURIComponent(result.PrimaryReadWriteToken);
 };
 
+// TODO
+// Need to create separate plugins or change endpoint logic to return the correct write or read endpoint.
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, diagnosticNode, next) => {
   requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
@@ -127,9 +136,32 @@ enum SDKSupportedCapabilities {
   PartitionMerge = 1 << 0,
 }
 
-let _client: Cosmos.CosmosClient;
+// Client Management
+
+let _client: Cosmos.CosmosClient;
+let _readClients: Map<string, Cosmos.CosmosClient> = new Map();
+
+export enum ClientOperationType {
+  READ,
+  WRITE,
+}
+
+export function client(clientOperationType: ClientOperationType): Cosmos.CosmosClient {
+  switch (clientOperationType) {
+    case ClientOperationType.READ:
+      return readClients();
+    case ClientOperationType.WRITE:
+      return writeClient();
+    default:
+      throw new Error("Invalid operation type");
+  }
+}
+
+export function writeClient(): Cosmos.CosmosClient {
+  console.log(`Called primary client`);
+  const currentUserContextDocumentEndpoint = userContext?.databaseAccount?.properties?.documentEndpoint;
+  console.log(`Current selected endpoint in userContext: ${currentUserContextDocumentEndpoint}`);
 
-export function client(): Cosmos.CosmosClient {
   if (_client) return _client;
 
   let _defaultHeaders: Cosmos.CosmosHeaders = {};
@@ -176,3 +208,61 @@ export function client(): Cosmos.CosmosClient {
   _client = new Cosmos.CosmosClient(options);
   return _client;
 }
+
+export function readClients(): Cosmos.CosmosClient {
+  console.log(`Called read only client`);
+  const currentUserContextDocumentEndpoint = userContext?.databaseAccount?.properties?.documentEndpoint;
+  console.log(`Current selected read endpoint in userContext: ${currentUserContextDocumentEndpoint}`);
+  3;
+
+  const selectedEndpoint = endpoint() || "https://cosmos.azure.com";
+
+  if (_readClients.has(selectedEndpoint)) {
+    return _readClients.get(selectedEndpoint);
+  }
+
+  let _defaultHeaders: Cosmos.CosmosHeaders = {};
+  _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
+    SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
+
+  if (
+    userContext.authType === AuthType.ConnectionString ||
+    userContext.authType === AuthType.EncryptedToken ||
+    userContext.authType === AuthType.ResourceToken
+  ) {
+    // Default to low priority. Needed for non-AAD-auth scenarios
+    // where we cannot use RP API, and thus, cannot detect whether priority
+    // based execution is enabled.
+    // The header will be ignored if priority based execution is disabled on the account.
+    _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
+  }
+
+  const options: Cosmos.CosmosClientOptions = {
+    endpoint: selectedEndpoint, // CosmosClient gets upset if we pass a bad URL. This should never actually get called
+    key: userContext.masterKey,
+    tokenProvider,
+    userAgentSuffix: "Azure Portal",
+    defaultHeaders: _defaultHeaders,
+    connectionPolicy: {
+      retryOptions: {
+        maxRetryAttemptCount: LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts),
+        fixedRetryIntervalInMilliseconds: LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval),
+        maxWaitTimeInSeconds: LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds),
+      },
+    },
+  };
+
+  if (configContext.PROXY_PATH !== undefined) {
+    (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
+  }
+
+  if (PriorityBasedExecutionUtils.isFeatureEnabled()) {
+    const plugins = (options as any).plugins || [];
+    plugins.push({ on: "request", plugin: PriorityBasedExecutionUtils.requestPlugin });
+    (options as any).plugins = plugins;
+  }
+
+  _readClients.set(selectedEndpoint, new Cosmos.CosmosClient(options));
+
+  return _readClients.get(selectedEndpoint);
+}

src/Common/MongoProxyClient.ts

@@ -690,6 +690,7 @@ export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameter
 }
 
 function useMongoProxyEndpoint(api: string): boolean {
+  const activeMongoProxyEndpoints: string[] = [MongoProxyEndpoints.Development];
   let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
   if (userContext.databaseAccount.properties.ipRules?.length > 0) {
     canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
@@ -698,6 +699,6 @@ function useMongoProxyEndpoint(api: string): boolean {
   return (
     canAccessMongoProxy &&
     configContext.NEW_MONGO_APIS?.includes(api) &&
-    [MongoProxyEndpoints.Development, MongoProxyEndpoints.Mpac].includes(configContext.MONGO_PROXY_ENDPOINT)
+    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
   );
 }

src/Common/dataAccess/bulkCreateDocument.ts

@@ -1,7 +1,7 @@
 import { JSONObject, OperationResponse } from "@azure/cosmos";
 import { CollectionBase } from "../../Contracts/ViewModels";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export const bulkCreateDocument = async (
@@ -13,7 +13,7 @@ export const bulkCreateDocument = async (
   );
 
   try {
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(collection.databaseId)
       .container(collection.id())
       .items.bulk(

src/Common/dataAccess/createCollection.ts

@@ -6,14 +6,14 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { createUpdateSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { createUpdateTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { createMongoCollectionWithProxy } from "../MongoProxyClient";
 import { createDatabase } from "./createDatabase";
@@ -284,7 +284,9 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     }
   }
 
-  const databaseResponse: DatabaseResponse = await client().databases.createIfNotExists(createDatabaseBody);
+  const databaseResponse: DatabaseResponse = await client(ClientOperationType.WRITE).databases.createIfNotExists(
+    createDatabaseBody,
+  );
   const collectionResponse: ContainerResponse = await databaseResponse?.database.containers.create(
     createCollectionBody,
     collectionOptions,

src/Common/dataAccess/createDatabase.ts

@@ -4,6 +4,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
 import { userContext } from "../../UserContext";
 import { getDatabaseName } from "../../Utils/APITypeUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
@@ -15,8 +16,7 @@ import {
   MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function createDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
@@ -153,7 +153,7 @@ async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): P
     }
   }
 
-  const response: DatabaseResponse = await client().databases.create(createBody);
+  const response: DatabaseResponse = await client(ClientOperationType.WRITE).databases.create(createBody);
   return response.resource;
 }
 

src/Common/dataAccess/createDocument.ts

@@ -1,6 +1,6 @@
 import { CollectionBase } from "../../Contracts/ViewModels";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -9,7 +9,7 @@ export const createDocument = async (collection: CollectionBase, newDocument: un
   const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
 
   try {
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(collection.databaseId)
       .container(collection.id())
       .items.create(newDocument);

src/Common/dataAccess/createStoredProcedure.ts

@@ -1,6 +1,7 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import {
   createUpdateSqlStoredProcedure,
   getSqlStoredProcedure,
@@ -9,8 +10,7 @@ import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function createStoredProcedure(
@@ -63,7 +63,7 @@ export async function createStoredProcedure(
       return rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(databaseId)
       .container(collectionId)
       .scripts.storedProcedures.create(storedProcedure);

src/Common/dataAccess/createTrigger.ts

@@ -1,10 +1,10 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function createTrigger(
@@ -55,7 +55,7 @@ export async function createTrigger(
       return rpResponse && rpResponse.properties?.resource;
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(databaseId)
       .container(collectionId)
       .scripts.triggers.create(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -1,6 +1,7 @@
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import {
   createUpdateSqlUserDefinedFunction,
   getSqlUserDefinedFunction,
@@ -9,8 +10,7 @@ import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function createUserDefinedFunction(
@@ -63,7 +63,7 @@ export async function createUserDefinedFunction(
       return rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(databaseId)
       .container(collectionId)
       .scripts.userDefinedFunctions.create(userDefinedFunction);

src/Common/dataAccess/dataTransfers.ts

@@ -122,14 +122,21 @@ const pollDataTransferJobOperation = async (
 
   updateDataTransferJob(body);
 
-  if (status === "Cancelled" || status === "Failed" || status === "Faulted") {
+  if (status === "Cancelled") {
+    removeFromPolling(jobName);
+    clearMessage && clearMessage();
+    const cancelMessage = `Data transfer job ${jobName} cancelled`;
+    NotificationConsoleUtils.logConsoleError(cancelMessage);
+    throw new AbortError(cancelMessage);
+  }
+  if (status === "Failed" || status === "Faulted") {
     removeFromPolling(jobName);
     const errorMessage = body?.properties?.error
       ? JSON.stringify(body?.properties?.error)
       : "Operation could not be completed";
     const error = new Error(errorMessage);
     clearMessage && clearMessage();
-    NotificationConsoleUtils.logConsoleError(`Data transfer job ${jobName} Failed`);
+    NotificationConsoleUtils.logConsoleError(`Data transfer job ${jobName} failed: ${errorMessage}`);
     throw new AbortError(error);
   }
   if (status === "Completed") {

src/Common/dataAccess/deleteCollection.ts

@@ -6,7 +6,7 @@ import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos
 import { deleteSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { deleteTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { client, ClientOperationType } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
@@ -15,7 +15,7 @@ export async function deleteCollection(databaseId: string, collectionId: string)
     if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
-      await client().database(databaseId).container(collectionId).delete();
+      await client(ClientOperationType.WRITE).database(databaseId).container(collectionId).delete();
     }
     logConsoleInfo(`Successfully deleted container ${collectionId}`);
   } catch (error) {

src/Common/dataAccess/deleteConflict.ts

@@ -1,9 +1,9 @@
-import ConflictId from "../../Explorer/Tree/ConflictId";
-import { CollectionBase } from "../../Contracts/ViewModels";
 import { RequestOptions } from "@azure/cosmos";
-import { client } from "../CosmosClient";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import ConflictId from "../../Explorer/Tree/ConflictId";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 
 export const deleteConflict = async (collection: CollectionBase, conflictId: ConflictId): Promise<void> => {
   const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
@@ -13,7 +13,7 @@ export const deleteConflict = async (collection: CollectionBase, conflictId: Con
       partitionKey: getPartitionKeyHeaderForConflict(conflictId),
     };
 
-    await client()
+    await client(ClientOperationType.WRITE)
       .database(collection.databaseId)
       .container(collection.id())
       .conflict(conflictId.id())

src/Common/dataAccess/deleteDatabase.ts

@@ -5,7 +5,7 @@ import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/g
 import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { client, ClientOperationType } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function deleteDatabase(databaseId: string): Promise<void> {
@@ -15,7 +15,7 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
     if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteDatabaseWithARM(databaseId);
     } else {
-      await client().database(databaseId).delete();
+      await client(ClientOperationType.WRITE).database(databaseId).delete();
     }
     logConsoleInfo(`Successfully deleted database ${databaseId}`);
   } catch (error) {

src/Common/dataAccess/deleteDocument.ts

@@ -1,7 +1,7 @@
 import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { getPartitionKeyValue } from "./getPartitionKeyValue";
@@ -11,7 +11,7 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
   const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
 
   try {
-    await client()
+    await client(ClientOperationType.WRITE)
       .database(collection.databaseId)
       .container(collection.id())
       .item(documentId.id(), getPartitionKeyValue(documentId))

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -2,7 +2,7 @@ import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteSqlStoredProcedure } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { client, ClientOperationType } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function deleteStoredProcedure(
@@ -26,7 +26,11 @@ export async function deleteStoredProcedure(
         storedProcedureId,
       );
     } else {
-      await client().database(databaseId).container(collectionId).scripts.storedProcedure(storedProcedureId).delete();
+      await client(ClientOperationType.WRITE)
+        .database(databaseId)
+        .container(collectionId)
+        .scripts.storedProcedure(storedProcedureId)
+        .delete();
     }
   } catch (error) {
     handleError(error, "DeleteStoredProcedure", `Error while deleting stored procedure ${storedProcedureId}`);

src/Common/dataAccess/deleteTrigger.ts

@@ -2,7 +2,7 @@ import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { client, ClientOperationType } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function deleteTrigger(databaseId: string, collectionId: string, triggerId: string): Promise<void> {
@@ -22,7 +22,11 @@ export async function deleteTrigger(databaseId: string, collectionId: string, tr
         triggerId,
       );
     } else {
-      await client().database(databaseId).container(collectionId).scripts.trigger(triggerId).delete();
+      await client(ClientOperationType.WRITE)
+        .database(databaseId)
+        .container(collectionId)
+        .scripts.trigger(triggerId)
+        .delete();
     }
   } catch (error) {
     handleError(error, "DeleteTrigger", `Error while deleting trigger ${triggerId}`);

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -2,7 +2,7 @@ import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { client, ClientOperationType } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function deleteUserDefinedFunction(databaseId: string, collectionId: string, id: string): Promise<void> {
@@ -22,7 +22,11 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
         id,
       );
     } else {
-      await client().database(databaseId).container(collectionId).scripts.userDefinedFunction(id).delete();
+      await client(ClientOperationType.WRITE)
+        .database(databaseId)
+        .container(collectionId)
+        .scripts.userDefinedFunction(id)
+        .delete();
     }
   } catch (error) {
     handleError(error, "DeleteUserDefinedFunction", `Error while deleting user defined function ${id}`);

src/Common/dataAccess/executeStoredProcedure.ts

@@ -1,9 +1,9 @@
 import { Collection } from "../../Contracts/ViewModels";
-import { ClientDefaults, HttpHeaders } from "../Constants";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import StoredProcedure from "../../Explorer/Tree/StoredProcedure";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { ClientDefaults, HttpHeaders } from "../Constants";
+import { ClientOperationType, client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export interface ExecuteSprocResult {
   result: StoredProcedure;
@@ -22,7 +22,7 @@ export const executeStoredProcedure = async (
   }, ClientDefaults.requestTimeoutMs);
 
   try {
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(collection.databaseId)
       .container(collection.id())
       .scripts.storedProcedure(storedProcedure.id())

src/Common/dataAccess/getIndexTransformationProgress.ts

@@ -1,9 +1,9 @@
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import * as Constants from "../Constants";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import * as Constants from "../Constants";
+import { ClientOperationType, client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function getIndexTransformationProgress(databaseId: string, collectionId: string): Promise<number> {
   if (userContext.authType !== AuthType.AAD) {
@@ -12,7 +12,10 @@ export async function getIndexTransformationProgress(databaseId: string, collect
   let indexTransformationPercentage: number;
   const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
   try {
-    const response = await client().database(databaseId).container(collectionId).read({ populateQuotaInfo: true });
+    const response = await client(ClientOperationType.READ)
+      .database(databaseId)
+      .container(collectionId)
+      .read({ populateQuotaInfo: true });
 
     indexTransformationPercentage = parseInt(
       response.headers[Constants.HttpHeaders.collectionIndexTransformationProgress] as string,

src/Common/dataAccess/queryConflicts.ts

@@ -1,5 +1,5 @@
 import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 
 export const queryConflicts = (
   databaseId: string,
@@ -7,5 +7,5 @@ export const queryConflicts = (
   query: string,
   options: FeedOptions,
 ): QueryIterator<ConflictDefinition & Resource> => {
-  return client().database(databaseId).container(containerId).conflicts.query(query, options);
+  return client(ClientOperationType.READ).database(databaseId).container(containerId).conflicts.query(query, options);
 };

src/Common/dataAccess/queryDocuments.ts

@@ -1,7 +1,7 @@
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Queries } from "../Constants";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 
 export const queryDocuments = (
   databaseId: string,
@@ -10,7 +10,7 @@ export const queryDocuments = (
   options: FeedOptions,
 ): QueryIterator<ItemDefinition & Resource> => {
   options = getCommonQueryOptions(options);
-  return client().database(databaseId).container(containerId).items.query(query, options);
+  return client(ClientOperationType.READ).database(databaseId).container(containerId).items.query(query, options);
 };
 
 export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {

src/Common/dataAccess/readCollection.ts

@@ -3,11 +3,11 @@ import { sampleDataClient } from "Common/SampleDataClient";
 import { userContext } from "UserContext";
 import * as DataModels from "../../Contracts/DataModels";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollection(databaseId: string, collectionId: string): Promise<DataModels.Collection> {
-  const cosmosClient = client();
+  const cosmosClient = client(ClientOperationType.READ);
   return await readCollectionInternal(cosmosClient, databaseId, collectionId);
 }
 

src/Common/dataAccess/readCollections.ts

@@ -10,7 +10,7 @@ import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/greml
 import { listMongoDBCollections } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlContainers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { listTables } from "../../Utils/arm/generatedClients/cosmos/tableResources";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
@@ -31,7 +31,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
       const tokenCollectionId = resourceIdObj[3];
 
       if (tokenDatabaseId === databaseId) {
-        promises.push(client().database(databaseId).container(tokenCollectionId).read());
+        promises.push(client(ClientOperationType.READ).database(databaseId).container(tokenCollectionId).read());
       }
     }
 
@@ -61,7 +61,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
       return await readCollectionsWithARM(databaseId);
     }
 
-    const sdkResponse = await client().database(databaseId).containers.readAll().fetchAll();
+    const sdkResponse = await client(ClientOperationType.READ).database(databaseId).containers.readAll().fetchAll();
     return sdkResponse.resources as DataModels.Collection[];
   } catch (error) {
     handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
@@ -77,7 +77,7 @@ export async function readCollectionsWithPagination(
 ): Promise<DataModels.CollectionsWithPagination> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
   try {
-    const sdkResponse = await client()
+    const sdkResponse = await client(ClientOperationType.READ)
       .database(databaseId)
       .containers.query(
         { query: "SELECT * FROM c" },

src/Common/dataAccess/readDatabases.ts

@@ -7,7 +7,7 @@ import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlDatabases } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readDatabases(): Promise<DataModels.Database[]> {
@@ -56,7 +56,7 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
     ) {
       databases = await readDatabasesWithARM();
     } else {
-      const sdkResponse = await client().databases.readAll().fetchAll();
+      const sdkResponse = await client(ClientOperationType.READ).databases.readAll().fetchAll();
       databases = sdkResponse.resources as DataModels.Database[];
     }
   } catch (error) {

src/Common/dataAccess/readDocument.ts

@@ -3,7 +3,7 @@ import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { HttpHeaders } from "../Constants";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { getPartitionKeyValue } from "./getPartitionKeyValue";
@@ -19,7 +19,7 @@ export const readDocument = async (collection: CollectionBase, documentId: Docum
             [HttpHeaders.partitionKey]: documentId.partitionKeyValue,
           }
         : {};
-    const response = await client()
+    const response = await client(ClientOperationType.READ)
       .database(collection.databaseId)
       .container(collection.id())
       .item(documentId.id(), getPartitionKeyValue(documentId))

src/Common/dataAccess/readOfferWithSDK.ts

@@ -1,7 +1,7 @@
 import { RequestOptions } from "@azure/cosmos";
 import { Offer } from "../../Contracts/DataModels";
 import { HttpHeaders } from "../Constants";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { parseSDKOfferResponse } from "../OfferUtility";
 import { readOffers } from "./readOffers";
 
@@ -21,7 +21,7 @@ export const readOfferWithSDK = async (offerId: string, resourceId: string): Pro
       [HttpHeaders.populateCollectionThroughputInfo]: true,
     },
   };
-  const response = await client().offer(offerId).read(options);
+  const response = await client(ClientOperationType.READ).offer(offerId).read(options);
 
   return parseSDKOfferResponse(response);
 };

src/Common/dataAccess/readOffers.ts

@@ -1,13 +1,13 @@
 import { SDKOfferDefinition } from "../../Contracts/DataModels";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
-import { handleError, getErrorMessage } from "../ErrorHandlingUtils";
+import { ClientOperationType, client } from "../CosmosClient";
+import { getErrorMessage, handleError } from "../ErrorHandlingUtils";
 
 export const readOffers = async (): Promise<SDKOfferDefinition[]> => {
   const clearMessage = logConsoleProgress(`Querying offers`);
 
   try {
-    const response = await client().offers.readAll().fetchAll();
+    const response = await client(ClientOperationType.READ).offers.readAll().fetchAll();
     return response?.resources;
   } catch (error) {
     // This should be removed when we can correctly identify if an account is serverless when connected using connection string too.

src/Common/dataAccess/readStoredProcedures.ts

@@ -4,7 +4,7 @@ import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readStoredProcedures(
@@ -34,7 +34,7 @@ export async function readStoredProcedures(
       throw new Error(cloudError?.error?.message);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.READ)
       .database(databaseId)
       .container(collectionId)
       .scripts.storedProcedures.readAll()

src/Common/dataAccess/readTriggers.ts

@@ -1,10 +1,10 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listSqlTriggers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readTriggers(
@@ -28,7 +28,11 @@ export async function readTriggers(
       return rpResponse?.value?.map((trigger) => trigger.properties?.resource);
     }
 
-    const response = await client().database(databaseId).container(collectionId).scripts.triggers.readAll().fetchAll();
+    const response = await client(ClientOperationType.READ)
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.triggers.readAll()
+      .fetchAll();
     return response?.resources;
   } catch (error) {
     handleError(error, "ReadTriggers", `Failed to query triggers for container ${collectionId}`);

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -1,9 +1,9 @@
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readUserDefinedFunctions(
@@ -24,7 +24,7 @@ export async function readUserDefinedFunctions(
       return rpResponse?.value?.map((udf) => udf.properties?.resource as UserDefinedFunctionDefinition & Resource);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.READ)
       .database(databaseId)
       .container(collectionId)
       .scripts.userDefinedFunctions.readAll()

src/Common/dataAccess/updateCollection.ts

@@ -2,6 +2,7 @@ import { ContainerDefinition, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
@@ -19,8 +20,7 @@ import {
   SqlContainerCreateUpdateParameters,
   SqlContainerResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function updateCollection(
@@ -40,7 +40,7 @@ export async function updateCollection(
     ) {
       collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
     } else {
-      const sdkResponse = await client()
+      const sdkResponse = await client(ClientOperationType.WRITE)
         .database(databaseId)
         .container(collectionId)
         .replace(newCollection as ContainerDefinition, options);

src/Common/dataAccess/updateDocument.ts

@@ -3,7 +3,7 @@ import { HttpHeaders } from "Common/Constants";
 import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { getPartitionKeyValue } from "./getPartitionKeyValue";
@@ -23,7 +23,7 @@ export const updateDocument = async (
             [HttpHeaders.partitionKey]: documentId.partitionKeyValue,
           }
         : {};
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(collection.databaseId)
       .container(collection.id())
       .item(documentId.id(), getPartitionKeyValue(documentId))

src/Common/dataAccess/updateOffer.ts

@@ -2,6 +2,7 @@ import { OfferDefinition, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import {
   migrateCassandraKeyspaceToAutoscale,
   migrateCassandraKeyspaceToManualThroughput,
@@ -40,9 +41,8 @@ import {
   updateTableThroughput,
 } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { HttpHeaders } from "../Constants";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { parseSDKOfferResponse } from "../OfferUtility";
 import { readCollectionOffer } from "./readCollectionOffer";
@@ -401,7 +401,7 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
     newOffer.content.offerAutopilotSettings = { maxThroughput: 0 };
   }
 
-  const sdkResponse = await client()
+  const sdkResponse = await client(ClientOperationType.WRITE)
     .offer(params.currentOffer.id)
     // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
     .replace(newOffer as unknown as OfferDefinition, options);

src/Common/dataAccess/updateStoredProcedure.ts

@@ -1,6 +1,7 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import {
   createUpdateSqlStoredProcedure,
   getSqlStoredProcedure,
@@ -9,8 +10,7 @@ import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function updateStoredProcedure(
@@ -54,7 +54,7 @@ export async function updateStoredProcedure(
       throw new Error(`Failed to update stored procedure: ${storedProcedure.id} does not exist.`);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(databaseId)
       .container(collectionId)
       .scripts.storedProcedure(storedProcedure.id)

src/Common/dataAccess/updateTrigger.ts

@@ -1,10 +1,10 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function updateTrigger(
@@ -47,7 +47,7 @@ export async function updateTrigger(
       throw new Error(`Failed to update trigger: ${trigger.id} does not exist.`);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(databaseId)
       .container(collectionId)
       .scripts.trigger(trigger.id)

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -1,6 +1,7 @@
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import {
   createUpdateSqlUserDefinedFunction,
   getSqlUserDefinedFunction,
@@ -9,8 +10,7 @@ import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
 } from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+import { ClientOperationType, client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function updateUserDefinedFunction(
@@ -53,7 +53,7 @@ export async function updateUserDefinedFunction(
       throw new Error(`Failed to update user defined function: ${userDefinedFunction.id} does not exist.`);
     }
 
-    const response = await client()
+    const response = await client(ClientOperationType.WRITE)
       .database(databaseId)
       .container(collectionId)
       .scripts.userDefinedFunction(userDefinedFunction.id)

src/ConfigContext.ts

@@ -1,4 +1,10 @@
-import { CassandraProxyEndpoints, JunoEndpoints, MongoProxyEndpoints } from "Common/Constants";
+import {
+  BackendApi,
+  CassandraProxyEndpoints,
+  JunoEndpoints,
+  MongoProxyEndpoints,
+  PortalBackendEndpoints,
+} from "Common/Constants";
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
@@ -39,6 +45,8 @@ export interface ConfigContext {
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
+  PORTAL_BACKEND_ENDPOINT?: string;
+  NEW_BACKEND_APIS?: BackendApi[];
   MONGO_BACKEND_ENDPOINT?: string;
   MONGO_PROXY_ENDPOINT?: string;
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED?: boolean;
@@ -90,6 +98,8 @@ let configContext: Readonly<ConfigContext> = {
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
   JUNO_ENDPOINT: JunoEndpoints.Prod,
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+  PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
+  NEW_BACKEND_APIS: [BackendApi.GenerateToken],
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
     // "resourcelist",

src/Contracts/FabricMessagesContract.ts

@@ -53,6 +53,7 @@ export type FabricMessageV2 =
       id: string;
       message: {
         connectionId: string;
+        isVisible: boolean;
       };
     }
   | {
@@ -72,7 +73,7 @@ export type FabricMessageV2 =
       };
     }
   | {
-      type: "setToolbarStatus";
+      type: "explorerVisible";
       message: {
         visible: boolean;
       };

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

@@ -136,15 +136,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
   };
 
   const getPercentageComplete = () => {
+    const jobStatus = portalDataTransferJob?.properties?.status;
+    const isCompleted = jobStatus === "Completed";
+    if (isCompleted) {
+      return 1;
+    }
     const processedCount = portalDataTransferJob?.properties?.processedCount;
     const totalCount = portalDataTransferJob?.properties?.totalCount;
-    const jobStatus = portalDataTransferJob?.properties?.status;
-    const isCancelled = jobStatus === "Cancelled";
-    const isCompleted = jobStatus === "Completed";
-    if (totalCount <= 0 && !isCompleted) {
-      return isCancelled ? 0 : null;
-    }
-    return isCompleted ? 1 : processedCount / totalCount;
+    const isJobInProgress = isCurrentJobInProgress(portalDataTransferJob);
+    return isJobInProgress ? (totalCount > 0 ? processedCount / totalCount : null) : 0;
   };
 
   return (

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -149,7 +149,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.IndexingPolicyTab:
       return "Indexing Policy";
     case SettingsV2TabTypes.PartitionKeyTab:
-      return "Partition Keys";
+      return "Partition Keys (preview)";
     case SettingsV2TabTypes.ComputedPropertiesTab:
       return "Computed Properties (preview)";
     default:

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

@@ -207,7 +207,7 @@ exports[`SettingsComponent renders 1`] = `
         />
       </PivotItem>
       <PivotItem
-        headerText="Partition Keys"
+        headerText="Partition Keys (preview)"
         itemKey="PartitionKeyTab"
         key="PartitionKeyTab"
         style={

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -23,7 +23,7 @@ import * as Constants from "../../../Common/Constants";
 import { Platform, configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { JunoClient } from "../../../Juno/JunoClient";
-import { userContext } from "../../../UserContext";
+import { updateUserContext, userContext } from "../../../UserContext";
 import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
 import { useSidePanel } from "../../../hooks/useSidePanel";
@@ -58,10 +58,10 @@ export function createStaticCommandBarButtons(
     }
   };
 
-  const homeBtn = createHomeButton();
-  buttons.push(homeBtn);
-
   if (configContext.platform !== Platform.Fabric) {
+    const homeBtn = createHomeButton();
+    buttons.push(homeBtn);
+
     const newCollectionBtn = createNewCollectionGroup(container);
     buttons.push(newCollectionBtn);
     if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
@@ -168,6 +168,14 @@ export function createStaticCommandBarButtons(
     }
   }
 
+  // Attempting to add region selection button here.
+  addDivider();
+  const [selectedRegion, setSelectedRegion] = React.useState(
+    userContext.databaseAccount.properties.locations[0].locationName,
+  );
+  const newReadRegionSelectionBtn = createReadRegionSelectionGroup(container, selectedRegion, setSelectedRegion);
+  buttons.push(newReadRegionSelectionBtn);
+
   return buttons;
 }
 
@@ -240,7 +248,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     buttons.push(fullScreenButton);
   }
 
-  if (configContext.platform !== Platform.Emulator) {
+  if (configContext.platform === Platform.Portal) {
     const label = "Feedback";
     const feedbackButtonOptions: CommandButtonComponentProps = {
       iconSrc: FeedbackIcon,
@@ -601,6 +609,103 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
   };
 }
 
+// function createReadRegionSelectionGroup(container: Explorer): CommandButtonComponentProps {
+//   const label = "Select a Read Region";
+//   return {
+//     iconAlt: label,
+//     commandButtonLabel: label,
+//     hasPopup: false,
+//     disabled: false,
+//     ariaLabel: label,
+//     onCommandClick: async () => {
+//       console.log(
+//         `CURRENT DOCUMENT ENDPOINT: ${JSON.stringify(userContext.databaseAccount.properties.documentEndpoint)}`,
+//       );
+//       userContext.databaseAccount.properties.readLocations.forEach((readLocation) => {
+//         console.log(`CURRENT READ ENDPOINT(S): ${JSON.stringify(readLocation)}`);
+//       });
+//       const updatedDatabaseAccount = {
+//         ...userContext.databaseAccount,
+//         properties: {
+//           ...userContext.databaseAccount.properties,
+//           documentEndpoint: "https://test-craig-nosql-periodic-eastus.documents.azure.com:443/",
+//         },
+//       };
+//       updateUserContext({
+//         databaseAccount: updatedDatabaseAccount,
+//       });
+//     },
+//   };
+// }
+
+function createReadRegionSelectionGroup(
+  container: Explorer,
+  selectedRegion: string,
+  setSelectedRegion: (region: string) => void,
+): CommandButtonComponentProps {
+  const children = userContext.databaseAccount.properties.readLocations.map((readLocation) => ({
+    commandButtonLabel: readLocation.locationName,
+    onCommandClick: async () => {
+      const updatedDatabaseAccount = {
+        ...userContext.databaseAccount,
+        properties: {
+          ...userContext.databaseAccount.properties,
+          documentEndpoint: readLocation.documentEndpoint,
+        },
+      };
+      updateUserContext({
+        databaseAccount: updatedDatabaseAccount,
+      });
+      setSelectedRegion(readLocation.locationName);
+    },
+    hasPopup: false,
+    ariaLabel: `Select ${readLocation.locationName}`,
+  }));
+  const label = selectedRegion || "Select a Read Region";
+  return {
+    iconAlt: label,
+    commandButtonLabel: label,
+    onCommandClick: () => {},
+    hasPopup: true,
+    ariaLabel: label,
+    isDropdown: true,
+    children,
+    dropdownWidth: 100,
+  };
+}
+
+// function createAccountRegionSelectionButton(container: Explorer): JSX.Element {
+//   const [selectedEndpoint, setSelectedEndpoint] = useState(userContext.databaseAccount.properties.documentEndpoint);
+
+//   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+//     const endpoint = event.target.value as string;
+//     setSelectedEndpoint(endpoint);
+
+//     const updatedDatabaseAccount = {
+//       ...userContext.databaseAccount,
+//       properties: {
+//         ...userContext.databaseAccount.properties,
+//         documentEndpoint: endpoint,
+//       },
+//     };
+//     updateUserContext({
+//       databaseAccount: updatedDatabaseAccount,
+//     });
+//   };
+
+//   return (
+//     <Select
+//       value={selectedEndpoint}
+//       onChange={handleChange}
+//       displayEmpty
+//     >
+//       {userContext.databaseAccount.properties.readLocations.map((readLocation) => (
+//         <MenuItem value={readLocation}>{readLocation}</MenuItem>
+//       ))}
+//     </Select>
+//   );
+// }
+
 function createStaticCommandBarButtonsForResourceToken(
   container: Explorer,
   selectedNodeState: SelectedNodeState,

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,4 +1,5 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
+import { useDatabases } from "Explorer/useDatabases";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -40,97 +41,112 @@ function openCollectionTab(
   databases: ViewModels.Database[],
   initialDatabaseIndex = 0,
 ) {
-  for (let i = initialDatabaseIndex; i < databases.length; i++) {
-    const database: ViewModels.Database = databases[i];
-    if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
-      continue;
-    }
-
-    const collectionActionHandler = (collections: ViewModels.Collection[]) => {
-      if (!action.collectionResourceId && collections.length === 0) {
-        subscription.dispose();
-        openCollectionTab(action, databases, ++i);
-        return;
-      }
-
-      for (let j = 0; j < collections.length; j++) {
-        const collection: ViewModels.Collection = collections[j];
-        if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
-          continue;
-        }
-
-        // select the collection
-        collection.expandCollection();
-
-        if (
-          action.tabKind === ActionContracts.TabKind.SQLDocuments ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
-        ) {
-          collection.onDocumentDBDocumentsClick();
-          break;
-        }
-
-        if (
-          action.tabKind === ActionContracts.TabKind.MongoDocuments ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
-        ) {
-          collection.onMongoDBDocumentsClick();
-          break;
-        }
-
-        if (
-          action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
-        ) {
-          collection.onSchemaAnalyzerClick();
-          break;
-        }
-
-        if (
-          action.tabKind === ActionContracts.TabKind.TableEntities ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
-        ) {
-          collection.onTableEntitiesClick();
-          break;
-        }
-
-        if (
-          action.tabKind === ActionContracts.TabKind.Graph ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
-        ) {
-          collection.onGraphDocumentsClick();
-          break;
-        }
-
-        if (
-          action.tabKind === ActionContracts.TabKind.SQLQuery ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
-        ) {
-          collection.onNewQueryClick(
-            collection,
-            undefined,
-            generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
-          );
-          break;
-        }
-
-        if (
-          action.tabKind === ActionContracts.TabKind.ScaleSettings ||
-          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
-        ) {
-          collection.onSettingsClick();
-          break;
-        }
-      }
-      subscription.dispose();
+  //if databases are not yet loaded, wait until loaded
+  if (!databases || databases.length === 0) {
+    const databaseActionHandler = (databases: ViewModels.Database[]) => {
+      databasesUnsubscription();
+      openCollectionTab(action, databases, 0);
+      return;
     };
+    const databasesUnsubscription = useDatabases.subscribe(databaseActionHandler, (state) => state.databases);
+  } else {
+    for (let i = initialDatabaseIndex; i < databases.length; i++) {
+      const database: ViewModels.Database = databases[i];
+      if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
+        continue;
+      }
 
-    const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
-    if (database.collections && database.collections() && database.collections().length) {
-      collectionActionHandler(database.collections());
+      //expand database first if not expanded to load the collections
+      if (!database.isDatabaseExpanded?.()) {
+        database.expandDatabase?.();
+      }
+
+      const collectionActionHandler = (collections: ViewModels.Collection[]) => {
+        if (!action.collectionResourceId && collections.length === 0) {
+          subscription.dispose();
+          openCollectionTab(action, databases, ++i);
+          return;
+        }
+
+        for (let j = 0; j < collections.length; j++) {
+          const collection: ViewModels.Collection = collections[j];
+          if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
+            continue;
+          }
+
+          // select the collection
+          collection.expandCollection();
+
+          if (
+            action.tabKind === ActionContracts.TabKind.SQLDocuments ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
+          ) {
+            collection.onDocumentDBDocumentsClick();
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.MongoDocuments ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
+          ) {
+            collection.onMongoDBDocumentsClick();
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
+          ) {
+            collection.onSchemaAnalyzerClick();
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.TableEntities ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
+          ) {
+            collection.onTableEntitiesClick();
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.Graph ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
+          ) {
+            collection.onGraphDocumentsClick();
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.SQLQuery ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
+          ) {
+            collection.onNewQueryClick(
+              collection,
+              undefined,
+              generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
+            );
+            break;
+          }
+
+          if (
+            action.tabKind === ActionContracts.TabKind.ScaleSettings ||
+            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
+          ) {
+            collection.onSettingsClick();
+            break;
+          }
+        }
+        subscription.dispose();
+      };
+
+      const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
+      if (database.collections && database.collections() && database.collections().length) {
+        collectionActionHandler(database.collections());
+      }
+
+      break;
     }
-
-    break;
   }
 }
 

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -6,6 +6,7 @@ import {
   Icon,
   IconButton,
   Link,
+  MessageBar,
   Stack,
   Text,
   TooltipHost,
@@ -207,6 +208,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
         </Stack>
         {createNewContainer ? (
           <Stack>
+            <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
             <Stack className="panelGroupSpacing">
               <Stack horizontal>
                 <span className="mandatoryStar">*&nbsp;</span>

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -49,7 +49,7 @@ export const QueryCopilotFeedbackModal = ({
   };
 
   return (
-    <Modal isOpen={showFeedbackModal}>
+    <Modal isOpen={showFeedbackModal} styles={{ main: { borderRadius: 8, maxWidth: 600 } }}>
       <form onSubmit={handleSubmit}>
         <Stack style={{ padding: 24 }}>
           <Stack horizontal horizontalAlign="space-between">
@@ -68,9 +68,14 @@ export const QueryCopilotFeedbackModal = ({
             rows={3}
           />
           <TextField
-            styles={{ root: { marginBottom: 14 } }}
+            styles={{
+              root: { marginBottom: 14 },
+              fieldGroup: { backgroundColor: "#F3F2F1", borderRadius: 4, borderColor: "#D1D1D1" },
+            }}
             label="Query generated"
             defaultValue={generatedQuery}
+            multiline
+            rows={3}
             readOnly
           />
           <Text style={{ fontSize: 12, marginBottom: 14 }}>

src/Explorer/QueryCopilot/Modal/__snapshots__/QueryCopilotFeedbackModal.test.tsx.snap

@@ -3,6 +3,14 @@
 exports[`Query Copilot Feedback Modal snapshot test shoud render and match snapshot 1`] = `
 <Modal
   isOpen={true}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -67,9 +75,16 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -125,6 +140,14 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
 exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`] = `
 <Modal
   isOpen={false}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -189,9 +212,16 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -247,6 +277,14 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
 exports[`Query Copilot Feedback Modal snapshot test should close on cancel click 1`] = `
 <Modal
   isOpen={false}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -311,9 +349,16 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -369,6 +414,14 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
 exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] = `
 <Modal
   isOpen={false}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -433,9 +486,16 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -491,6 +551,14 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
 exports[`Query Copilot Feedback Modal snapshot test should not render dont show again button 1`] = `
 <Modal
   isOpen={false}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -555,9 +623,16 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -613,6 +688,14 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
 exports[`Query Copilot Feedback Modal snapshot test should render dont show again button and check it 1`] = `
 <Modal
   isOpen={true}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -677,9 +760,16 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },
@@ -750,6 +840,14 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
 exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`] = `
 <Modal
   isOpen={false}
+  styles={
+    Object {
+      "main": Object {
+        "borderRadius": 8,
+        "maxWidth": 600,
+      },
+    }
+  }
 >
   <form
     onSubmit={[Function]}
@@ -814,9 +912,16 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
       <StyledTextFieldBase
         defaultValue="test query"
         label="Query generated"
+        multiline={true}
         readOnly={true}
+        rows={3}
         styles={
           Object {
+            "fieldGroup": Object {
+              "backgroundColor": "#F3F2F1",
+              "borderColor": "#D1D1D1",
+              "borderRadius": 4,
+            },
             "root": Object {
               "marginBottom": 14,
             },

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -11,8 +11,8 @@ import {
   Link,
   MessageBar,
   MessageBarType,
+  ProgressIndicator,
   Separator,
-  Spinner,
   Stack,
   TeachingBubble,
   Text,
@@ -36,7 +36,6 @@ import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React, { useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
-import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import RecentIcon from "../../../images/Recent.svg";
 import errorIcon from "../../../images/close-black.svg";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -215,12 +214,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
       const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
       if (response.ok) {
         if (generateSQLQueryResponse?.sql !== "N/A") {
-          let query = `-- **Prompt:** ${userPrompt}\r\n`;
-          if (generateSQLQueryResponse.explanation) {
-            query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
-          }
-          query += generateSQLQueryResponse.sql;
-          setQuery(query);
+          const queryExplanation = `-- **Explanation of query:** ${
+            generateSQLQueryResponse.explanation ? generateSQLQueryResponse.explanation : "N/A"
+          }\r\n`;
+          const currentGeneratedQuery = queryExplanation + generateSQLQueryResponse.sql;
+          const lastQuery = generatedQuery && query ? `${query}\r\n` : "";
+          setQuery(`${lastQuery}${currentGeneratedQuery}`);
           setGeneratedQuery(generateSQLQueryResponse.sql);
           setGeneratedQueryComments(generateSQLQueryResponse.explanation);
           setShowFeedbackBar(true);
@@ -297,9 +296,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     if (isGeneratingQuery === null) {
       return " ";
     } else if (isGeneratingQuery) {
-      return "Content is loading!";
+      return "Content is loading";
     } else {
-      return "Content is updated!";
+      return "Content is updated";
     }
   };
 
@@ -310,12 +309,388 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   return (
     <Stack
       className="copilot-prompt-pane"
-      styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}
+      styles={{ root: { backgroundColor: "#FAFAFA", padding: "8px" } }}
       id="copilot-textfield-label"
     >
-      <Stack horizontal>
-        <Image src={CopilotIcon} style={{ width: 24, height: 24 }} alt="Copilot" role="none" />
-        <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
+      <Stack
+        horizontal
+        styles={{
+          root: {
+            width: "100%",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#D1D1D1",
+            borderRadius: 8,
+            boxShadow: "0px 4px 8px 0px #00000024",
+          },
+        }}
+      >
+        <Stack style={{ width: "100%" }}>
+          <Stack horizontal verticalAlign="center" style={{ padding: "8px 8px 0px 8px" }}>
+            <TextField
+              id="naturalLanguageInput"
+              value={userPrompt}
+              onChange={handleUserPromptChange}
+              onClick={() => {
+                inputEdited.current = true;
+                setShowSamplePrompts(true);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && userPrompt) {
+                  inputEdited.current = true;
+                  startGenerateQueryProcess();
+                }
+              }}
+              style={{ lineHeight: 30 }}
+              styles={{
+                root: { width: "100%" },
+                suffix: {
+                  background: "none",
+                  padding: 0,
+                },
+                fieldGroup: {
+                  borderRadius: 4,
+                  borderColor: "#D1D1D1",
+                  "::after": {
+                    border: "inherit",
+                    borderWidth: 2,
+                    borderBottomColor: "#464FEB",
+                    borderRadius: 4,
+                  },
+                },
+              }}
+              disabled={isGeneratingQuery}
+              autoComplete="off"
+              placeholder="Ask a question in natural language and we’ll generate the query for you."
+              aria-labelledby="copilot-textfield-label"
+              onRenderSuffix={() => {
+                return (
+                  <IconButton
+                    iconProps={{ iconName: "Send" }}
+                    disabled={isGeneratingQuery || !userPrompt.trim()}
+                    style={{ background: "none" }}
+                    onClick={() => startGenerateQueryProcess()}
+                    aria-label="Send"
+                  />
+                );
+              }}
+            />
+            {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
+              <TeachingBubble
+                calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
+                target="#naturalLanguageInput"
+                hasCloseButton={true}
+                closeButtonAriaLabel="Close"
+                onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
+                hasSmallHeadline={true}
+                headline="Write a prompt"
+              >
+                Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
+                <Link
+                  onClick={() => {
+                    setShowSamplePrompts(true);
+                    toggleCopilotTeachingBubbleVisible(false);
+                  }}
+                  style={{ color: "white", fontWeight: 600 }}
+                >
+                  sample prompts
+                </Link>{" "}
+                or write your own query
+              </TeachingBubble>
+            )}
+            {showSamplePrompts && (
+              <Callout
+                styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
+                target="#naturalLanguageInput"
+                isBeakVisible={false}
+                onDismiss={() => setShowSamplePrompts(false)}
+                directionalHintFixed={true}
+                directionalHint={DirectionalHint.bottomLeftEdge}
+                alignTargetEdge={true}
+                gapSpace={4}
+              >
+                <Stack>
+                  {filteredHistories?.length > 0 && (
+                    <Stack>
+                      <Text
+                        style={{
+                          width: "100%",
+                          fontSize: 14,
+                          fontWeight: 600,
+                          color: "#0078D4",
+                          marginLeft: 16,
+                          padding: "4px 0",
+                        }}
+                      >
+                        Recent
+                      </Text>
+                      {filteredHistories.map((history, i) => (
+                        <DefaultButton
+                          key={i}
+                          onClick={() => {
+                            setUserPrompt(history);
+                            setShowSamplePrompts(false);
+                            inputEdited.current = true;
+                          }}
+                          onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
+                          styles={promptStyles}
+                        >
+                          {history}
+                        </DefaultButton>
+                      ))}
+                    </Stack>
+                  )}
+                  {filteredSuggestedPrompts?.length > 0 && (
+                    <Stack>
+                      <Text
+                        style={{
+                          width: "100%",
+                          fontSize: 14,
+                          fontWeight: 600,
+                          color: "#0078D4",
+                          marginLeft: 16,
+                          padding: "4px 0",
+                        }}
+                      >
+                        Suggested Prompts
+                      </Text>
+                      {filteredSuggestedPrompts.map((prompt) => (
+                        <DefaultButton
+                          key={prompt.id}
+                          onClick={() => {
+                            setUserPrompt(prompt.text);
+                            setShowSamplePrompts(false);
+                            inputEdited.current = true;
+                          }}
+                          onRenderIcon={() => <Image src={HintIcon} />}
+                          styles={promptStyles}
+                        >
+                          {prompt.text}
+                        </DefaultButton>
+                      ))}
+                    </Stack>
+                  )}
+                  {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
+                    <Stack>
+                      <Separator
+                        styles={{
+                          root: {
+                            selectors: { "::before": { background: "#E1DFDD" } },
+                            padding: 0,
+                          },
+                        }}
+                      />
+                      <Text
+                        style={{
+                          width: "100%",
+                          fontSize: 14,
+                          marginLeft: 16,
+                          padding: "4px 0",
+                        }}
+                      >
+                        Learn about{" "}
+                        <Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
+                          writing effective prompts
+                        </Link>
+                      </Text>
+                    </Stack>
+                  )}
+                </Stack>
+              </Callout>
+            )}
+          </Stack>
+          {!isGeneratingQuery && (
+            <Stack style={{ padding: 8 }}>
+              {!showFeedbackBar && (
+                <Text style={{ fontSize: 12 }}>
+                  AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
+                  <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
+                    Read preview terms
+                  </Link>
+                  {showErrorMessageBar && (
+                    <MessageBar messageBarType={MessageBarType.error}>
+                      {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
+                    </MessageBar>
+                  )}
+                  {showInvalidQueryMessageBar && (
+                    <MessageBar
+                      messageBarType={MessageBarType.info}
+                      styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
+                    >
+                      We were unable to generate a query based upon the prompt provided. Please modify the prompt and
+                      try again. For examples of how to write a good prompt, please read
+                      <Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
+                        this article.
+                      </Link>{" "}
+                      Our content guidelines can be found
+                      <Link href="https://aka.ms/cdb-query-copilot" target="_blank">
+                        here.
+                      </Link>
+                    </MessageBar>
+                  )}
+                </Text>
+              )}
+              {showFeedbackBar && (
+                <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
+                  {userContext.feedbackPolicies?.policyAllowFeedback && (
+                    <Stack horizontal verticalAlign="center">
+                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
+                      {showCallout && !hideFeedbackModalForLikedQueries && (
+                        <Callout
+                          role="status"
+                          style={{ padding: "6px 12px" }}
+                          styles={{
+                            root: {
+                              borderRadius: 8,
+                            },
+                            beakCurtain: {
+                              borderRadius: 8,
+                            },
+                            calloutMain: {
+                              borderRadius: 8,
+                            },
+                          }}
+                          target="#likeBtn"
+                          onDismiss={() => {
+                            setShowCallout(false);
+                            SubmitFeedback({
+                              params: {
+                                generatedQuery: generatedQuery,
+                                likeQuery: likeQuery,
+                                description: "",
+                                userPrompt: userPrompt,
+                              },
+                              explorer,
+                              databaseId,
+                              containerId,
+                              mode: isSampleCopilotActive ? "Sample" : "User",
+                            });
+                          }}
+                          directionalHint={DirectionalHint.topCenter}
+                        >
+                          <Text>
+                            Thank you. Need to give{" "}
+                            <Link
+                              onClick={() => {
+                                setShowCallout(false);
+                                openFeedbackModal(generatedQuery, true, userPrompt);
+                              }}
+                            >
+                              more feedback?
+                            </Link>
+                          </Text>
+                        </Callout>
+                      )}
+                      <IconButton
+                        id="likeBtn"
+                        style={{ marginLeft: 10 }}
+                        aria-label="Like"
+                        role="toggle"
+                        iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+                        onClick={() => {
+                          setShowCallout(!likeQuery);
+                          setLikeQuery(!likeQuery);
+                          if (likeQuery === true) {
+                            document.getElementById("likeStatus").innerHTML = "Unpressed";
+                          }
+                          if (likeQuery === false) {
+                            document.getElementById("likeStatus").innerHTML = "Liked";
+                          }
+                          if (dislikeQuery) {
+                            setDislikeQuery(!dislikeQuery);
+                          }
+                        }}
+                      />
+                      <IconButton
+                        style={{ margin: "0 4px" }}
+                        role="toggle"
+                        aria-label="Dislike"
+                        iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
+                        onClick={() => {
+                          let toggleStatusValue = "Unpressed";
+                          if (!dislikeQuery) {
+                            openFeedbackModal(generatedQuery, false, userPrompt);
+                            setLikeQuery(false);
+                            toggleStatusValue = "Disliked";
+                          }
+                          setDislikeQuery(!dislikeQuery);
+                          setShowCallout(false);
+                          document.getElementById("likeStatus").innerHTML = toggleStatusValue;
+                        }}
+                      />
+                      <span role="status" style={{ position: "absolute", left: "-9999px" }} id="likeStatus"></span>
+                      <Separator
+                        vertical
+                        styles={{
+                          root: {
+                            "::after": {
+                              backgroundColor: "#767676",
+                            },
+                          },
+                        }}
+                      />
+                    </Stack>
+                  )}
+                  <CommandBarButton
+                    className="copyQuery"
+                    onClick={copyGeneratedCode}
+                    iconProps={{ iconName: "Copy" }}
+                    style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
+                    styles={{
+                      root: {
+                        backgroundColor: "inherit",
+                      },
+                    }}
+                  >
+                    Copy code
+                  </CommandBarButton>
+                  <CommandBarButton
+                    className="deleteQuery"
+                    onClick={() => {
+                      setShowDeletePopup(true);
+                    }}
+                    iconProps={{ iconName: "Delete" }}
+                    style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
+                    styles={{
+                      root: {
+                        backgroundColor: "inherit",
+                      },
+                    }}
+                  >
+                    Clear editor
+                  </CommandBarButton>
+                </Stack>
+              )}
+            </Stack>
+          )}
+          {isGeneratingQuery && (
+            <ProgressIndicator
+              label="Thinking..."
+              ariaLabel={getAriaLabel()}
+              barHeight={4}
+              styles={{
+                root: {
+                  fontSize: 12,
+                  width: "100%",
+                  bottom: 0,
+                },
+                itemName: {
+                  padding: "0px 8px",
+                },
+                itemProgress: {
+                  borderBottomLeftRadius: 8,
+                  borderBottomRightRadius: 8,
+                  padding: 0,
+                },
+                progressBar: {
+                  backgroundImage:
+                    "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(24, 90, 189) 35%, rgb(71, 207, 250) 70%, rgb(180, 124, 248) 92%, rgba(0, 0, 0, 0))",
+                  animationDuration: "5s",
+                },
+              }}
+            />
+          )}
+        </Stack>
         <IconButton
           iconProps={{ imageProps: { src: errorIcon } }}
           onClick={() => {
@@ -323,307 +698,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             clearFeedback();
             resetMessageStates();
           }}
-          styles={{
-            root: {
-              marginLeft: "auto !important",
-            },
-          }}
           ariaLabel="Close"
           title="Close copilot"
         />
       </Stack>
-      <Stack horizontal verticalAlign="center">
-        <TextField
-          id="naturalLanguageInput"
-          value={userPrompt}
-          onChange={handleUserPromptChange}
-          onClick={() => {
-            inputEdited.current = true;
-            setShowSamplePrompts(true);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && userPrompt) {
-              inputEdited.current = true;
-              startGenerateQueryProcess();
-            }
-          }}
-          style={{ lineHeight: 30 }}
-          styles={{ root: { width: "95%" }, fieldGroup: { borderRadius: 6 } }}
-          disabled={isGeneratingQuery}
-          autoComplete="off"
-          placeholder="Ask a question in natural language and we’ll generate the query for you."
-          aria-labelledby="copilot-textfield-label"
-        />
-        {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
-          <TeachingBubble
-            calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
-            target="#naturalLanguageInput"
-            hasCloseButton={true}
-            closeButtonAriaLabel="Close"
-            onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
-            hasSmallHeadline={true}
-            headline="Write a prompt"
-          >
-            Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
-            <Link
-              onClick={() => {
-                setShowSamplePrompts(true);
-                toggleCopilotTeachingBubbleVisible(false);
-              }}
-              style={{ color: "white", fontWeight: 600 }}
-            >
-              sample prompts
-            </Link>{" "}
-            or write your own query
-          </TeachingBubble>
-        )}
-        <IconButton
-          iconProps={{ iconName: "Send" }}
-          disabled={isGeneratingQuery || !userPrompt.trim()}
-          style={{ marginLeft: 8 }}
-          onClick={() => startGenerateQueryProcess()}
-          aria-label="Send"
-        />
-        <div role="alert" aria-label={getAriaLabel()}>
-          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
-        </div>
-        {showSamplePrompts && (
-          <Callout
-            styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
-            target="#naturalLanguageInput"
-            isBeakVisible={false}
-            onDismiss={() => setShowSamplePrompts(false)}
-            directionalHintFixed={true}
-            directionalHint={DirectionalHint.bottomLeftEdge}
-            alignTargetEdge={true}
-            gapSpace={4}
-          >
-            <Stack>
-              {filteredHistories?.length > 0 && (
-                <Stack>
-                  <Text
-                    style={{
-                      width: "100%",
-                      fontSize: 14,
-                      fontWeight: 600,
-                      color: "#0078D4",
-                      marginLeft: 16,
-                      padding: "4px 0",
-                    }}
-                  >
-                    Recent
-                  </Text>
-                  {filteredHistories.map((history, i) => (
-                    <DefaultButton
-                      key={i}
-                      onClick={() => {
-                        setUserPrompt(history);
-                        setShowSamplePrompts(false);
-                        inputEdited.current = true;
-                      }}
-                      onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
-                      styles={promptStyles}
-                    >
-                      {history}
-                    </DefaultButton>
-                  ))}
-                </Stack>
-              )}
-              {filteredSuggestedPrompts?.length > 0 && (
-                <Stack>
-                  <Text
-                    style={{
-                      width: "100%",
-                      fontSize: 14,
-                      fontWeight: 600,
-                      color: "#0078D4",
-                      marginLeft: 16,
-                      padding: "4px 0",
-                    }}
-                  >
-                    Suggested Prompts
-                  </Text>
-                  {filteredSuggestedPrompts.map((prompt) => (
-                    <DefaultButton
-                      key={prompt.id}
-                      onClick={() => {
-                        setUserPrompt(prompt.text);
-                        setShowSamplePrompts(false);
-                        inputEdited.current = true;
-                      }}
-                      onRenderIcon={() => <Image src={HintIcon} />}
-                      styles={promptStyles}
-                    >
-                      {prompt.text}
-                    </DefaultButton>
-                  ))}
-                </Stack>
-              )}
-              {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
-                <Stack>
-                  <Separator
-                    styles={{
-                      root: {
-                        selectors: { "::before": { background: "#E1DFDD" } },
-                        padding: 0,
-                      },
-                    }}
-                  />
-                  <Text
-                    style={{
-                      width: "100%",
-                      fontSize: 14,
-                      marginLeft: 16,
-                      padding: "4px 0",
-                    }}
-                  >
-                    Learn about{" "}
-                    <Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
-                      writing effective prompts
-                    </Link>
-                  </Text>
-                </Stack>
-              )}
-            </Stack>
-          </Callout>
-        )}
-      </Stack>
-
-      <Stack style={{ margin: "8px 0" }}>
-        <Text style={{ fontSize: 12 }}>
-          AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-          <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
-            Read preview terms
-          </Link>
-          {showErrorMessageBar && (
-            <MessageBar messageBarType={MessageBarType.error}>
-              {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
-            </MessageBar>
-          )}
-          {showInvalidQueryMessageBar && (
-            <MessageBar
-              messageBarType={MessageBarType.info}
-              styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
-            >
-              We were unable to generate a query based upon the prompt provided. Please modify the prompt and try again.
-              For examples of how to write a good prompt, please read
-              <Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
-                this article.
-              </Link>{" "}
-              Our content guidelines can be found
-              <Link href="https://aka.ms/cdb-query-copilot" target="_blank">
-                here.
-              </Link>
-            </MessageBar>
-          )}
-        </Text>
-      </Stack>
-
-      {showFeedbackBar && (
-        <Stack
-          style={{ backgroundColor: "#FFF8F0", padding: "2px 8px", minHeight: 32 }}
-          horizontal
-          verticalAlign="center"
-        >
-          {userContext.feedbackPolicies?.policyAllowFeedback && (
-            <Stack horizontal verticalAlign="center">
-              <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
-              {showCallout && !hideFeedbackModalForLikedQueries && (
-                <Callout
-                  role="status"
-                  style={{ padding: 8 }}
-                  target="#likeBtn"
-                  onDismiss={() => {
-                    setShowCallout(false);
-                    SubmitFeedback({
-                      params: {
-                        generatedQuery: generatedQuery,
-                        likeQuery: likeQuery,
-                        description: "",
-                        userPrompt: userPrompt,
-                      },
-                      explorer,
-                      databaseId,
-                      containerId,
-                      mode: isSampleCopilotActive ? "Sample" : "User",
-                    });
-                  }}
-                  directionalHint={DirectionalHint.topCenter}
-                >
-                  <Text>
-                    Thank you. Need to give{" "}
-                    <Link
-                      onClick={() => {
-                        setShowCallout(false);
-                        openFeedbackModal(generatedQuery, true, userPrompt);
-                      }}
-                    >
-                      more feedback?
-                    </Link>
-                  </Text>
-                </Callout>
-              )}
-              <IconButton
-                id="likeBtn"
-                style={{ marginLeft: 20 }}
-                aria-label="Like"
-                role="toggle"
-                iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
-                onClick={() => {
-                  setShowCallout(!likeQuery);
-                  setLikeQuery(!likeQuery);
-                  if (likeQuery === true) {
-                    document.getElementById("likeStatus").innerHTML = "Unpressed";
-                  }
-                  if (likeQuery === false) {
-                    document.getElementById("likeStatus").innerHTML = "Liked";
-                  }
-                  if (dislikeQuery) {
-                    setDislikeQuery(!dislikeQuery);
-                  }
-                }}
-              />
-              <IconButton
-                style={{ margin: "0 10px" }}
-                role="toggle"
-                aria-label="Dislike"
-                iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
-                onClick={() => {
-                  let toggleStatusValue = "Unpressed";
-                  if (!dislikeQuery) {
-                    openFeedbackModal(generatedQuery, false, userPrompt);
-                    setLikeQuery(false);
-                    toggleStatusValue = "Disliked";
-                  }
-                  setDislikeQuery(!dislikeQuery);
-                  setShowCallout(false);
-                  document.getElementById("likeStatus").innerHTML = toggleStatusValue;
-                }}
-              />
-              <span role="status" style={{ position: "absolute", left: "-9999px" }} id="likeStatus"></span>
-              <Separator vertical style={{ color: "#EDEBE9" }} />
-            </Stack>
-          )}
-          <CommandBarButton
-            className="copyQuery"
-            onClick={copyGeneratedCode}
-            iconProps={{ iconName: "Copy" }}
-            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-          >
-            Copy query
-          </CommandBarButton>
-          <CommandBarButton
-            className="deleteQuery"
-            onClick={() => {
-              setShowDeletePopup(true);
-            }}
-            iconProps={{ iconName: "Delete" }}
-            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-          >
-            Delete query
-          </CommandBarButton>
-        </Stack>
-      )}
       {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
       {query !== "" && query.trim().length !== 0 && (
         <DeletePopup

src/Explorer/Tabs/TabsBase.ts

@@ -40,11 +40,10 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     this.database = options.database;
     this.rid = options.rid || (this.collection && this.collection.rid) || "";
     this.tabKind = options.tabKind;
-    this.tabTitle = ko.observable<string>(options.title);
+    this.tabTitle = ko.observable<string>(this.getTitle(options));
     this.tabPath =
-      ko.observable(options.tabPath ?? "") ||
-      (this.collection &&
-        ko.observable<string>(`${this.collection.databaseId}>${this.collection.id()}>${this.tabTitle()}`));
+      this.collection &&
+      ko.observable<string>(`${this.collection.databaseId}>${this.collection.id()}>${options.title}`);
     this.pendingNotification = ko.observable<DataModels.Notification>(undefined);
     this.onLoadStartKey = options.onLoadStartKey;
     this.closeTabButton = {
@@ -143,6 +142,26 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     return (this.collection && this.collection.container) || (this.database && this.database.container);
   }
 
+  public getTitle(options: ViewModels.TabOptions): string {
+    const coll = this.collection?.id();
+    const db = this.database?.id();
+    if (coll) {
+      if (coll.length > 8) {
+        return coll.slice(0, 5) + "…" + options.title;
+      } else {
+        return coll + "." + options.title;
+      }
+    } else if (db) {
+      if (db.length > 8) {
+        return db.slice(0, 5) + "…" + options.title;
+      } else {
+        return db + "." + options.title;
+      }
+    } else {
+      return options.title;
+    }
+  }
+
   /** Renders a Javascript object to be displayed inside Monaco Editor */
   public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
     return JSON.stringify(value, replacer, space);

src/Explorer/Tree/Collection.ts

@@ -308,7 +308,7 @@ export default class Collection implements ViewModels.Collection {
         collectionName: this.id(),
 
         dataExplorerArea: Constants.Areas.Tab,
-        tabTitle: this.rawDataModel.id + " - Items",
+        tabTitle: "Items",
       });
       this.documentIds([]);
 
@@ -316,7 +316,7 @@ export default class Collection implements ViewModels.Collection {
         partitionKey: this.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
         tabKind: ViewModels.CollectionTabKind.Documents,
-        title: this.rawDataModel.id + " - Items",
+        title: "Items",
         collection: this,
         node: this,
         tabPath: `${this.databaseId}>${this.id()}>Documents`,

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -1,10 +1,11 @@
 import { useBoolean } from "@fluentui/react-hooks";
 import { userContext } from "UserContext";
+import { usePortalBackendEndpoint } from "Utils/EndpointUtils";
 import * as React from "react";
 import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
 import ErrorImage from "../../../../images/error.svg";
 import { AuthType } from "../../../AuthType";
-import { HttpHeaders } from "../../../Common/Constants";
+import { BackendApi, HttpHeaders } from "../../../Common/Constants";
 import { configContext } from "../../../ConfigContext";
 import { GenerateTokenResponse } from "../../../Contracts/DataModels";
 import { isResourceTokenConnectionString } from "../Helpers/ResourceTokenUtils";
@@ -18,6 +19,23 @@ interface Props {
 }
 
 export const fetchEncryptedToken = async (connectionString: string): Promise<string> => {
+  if (!usePortalBackendEndpoint(BackendApi.GenerateToken)) {
+    return await fetchEncryptedToken_ToBeDeprecated(connectionString);
+  }
+
+  const headers = new Headers();
+  headers.append(HttpHeaders.connectionString, connectionString);
+  const url = configContext.PORTAL_BACKEND_ENDPOINT + "/api/connectionstring/token/generatetoken";
+  const response = await fetch(url, { headers, method: "POST" });
+  if (!response.ok) {
+    throw response;
+  }
+
+  const encryptedTokenResponse: string = await response.json();
+  return decodeURIComponent(encryptedTokenResponse);
+};
+
+export const fetchEncryptedToken_ToBeDeprecated = async (connectionString: string): Promise<string> => {
   const headers = new Headers();
   headers.append(HttpHeaders.connectionString, connectionString);
   const url = configContext.BACKEND_ENDPOINT + "/api/guest/tokens/generateToken";

src/UserContext.ts

@@ -51,6 +51,7 @@ interface FabricContext {
   connectionId: string;
   databaseConnectionInfo: FabricDatabaseConnectionInfo | undefined;
   isReadOnly: boolean;
+  isVisible: boolean;
 }
 
 export type AdminFeedbackControlPolicy =

src/Utils/EndpointUtils.ts

@@ -1,4 +1,11 @@
-import { CassandraProxyEndpoints, JunoEndpoints, MongoProxyEndpoints } from "Common/Constants";
+import {
+  BackendApi,
+  CassandraProxyEndpoints,
+  JunoEndpoints,
+  MongoProxyEndpoints,
+  PortalBackendEndpoints,
+} from "Common/Constants";
+import { configContext } from "ConfigContext";
 import * as Logger from "../Common/Logger";
 
 export function validateEndpoint(
@@ -137,3 +144,9 @@ export const allowedJunoOrigins: ReadonlyArray<string> = [
 ];
 
 export const allowedNotebookServerUrls: ReadonlyArray<string> = [];
+
+export function usePortalBackendEndpoint(backendApi: BackendApi): boolean {
+  const activePortalBackendEndpoints: string[] = [PortalBackendEndpoints.Development];
+  const activeBackendApi: boolean = configContext.NEW_BACKEND_APIS?.includes(backendApi) || false;
+  return activeBackendApi && activePortalBackendEndpoints.includes(configContext.PORTAL_BACKEND_ENDPOINT as string);
+}

src/hooks/useKnockoutExplorer.ts

@@ -2,7 +2,6 @@ import { createUri } from "Common/UrlUtility";
 import { DATA_EXPLORER_RPC_VERSION } from "Contracts/DataExplorerMessagesContract";
 import { FABRIC_RPC_VERSION, FabricMessageV2 } from "Contracts/FabricMessagesContract";
 import Explorer from "Explorer/Explorer";
-import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
@@ -90,6 +89,7 @@ async function configureFabric(): Promise<Explorer> {
   // These are the versions of Fabric that Data Explorer supports.
   const SUPPORTED_FABRIC_VERSIONS = [FABRIC_RPC_VERSION];
 
+  let firstContainerOpened = false;
   let explorer: Explorer;
   return new Promise<Explorer>((resolve) => {
     window.addEventListener(
@@ -121,7 +121,10 @@ async function configureFabric(): Promise<Explorer> {
             await scheduleRefreshDatabaseResourceToken(true);
             resolve(explorer);
             await explorer.refreshAllDatabases();
-            openFirstContainer(explorer, userContext.fabricContext.databaseConnectionInfo.databaseId);
+            if (userContext.fabricContext.isVisible && !firstContainerOpened) {
+              firstContainerOpened = true;
+              openFirstContainer(explorer, userContext.fabricContext.databaseConnectionInfo.databaseId);
+            }
             break;
           }
           case "newContainer":
@@ -132,8 +135,16 @@ async function configureFabric(): Promise<Explorer> {
             handleCachedDataMessage(data);
             break;
           }
-          case "setToolbarStatus": {
-            useCommandBar.getState().setIsHidden(data.message.visible === false);
+          case "explorerVisible": {
+            userContext.fabricContext.isVisible = data.message.visible;
+            if (
+              userContext.fabricContext.isVisible &&
+              !firstContainerOpened &&
+              userContext?.fabricContext?.databaseConnectionInfo?.databaseId !== undefined
+            ) {
+              firstContainerOpened = true;
+              openFirstContainer(explorer, userContext.fabricContext.databaseConnectionInfo.databaseId);
+            }
             break;
           }
           default:
@@ -327,12 +338,13 @@ function configureHostedWithResourceToken(config: ResourceToken): Explorer {
   return explorer;
 }
 
-function createExplorerFabric(params: { connectionId: string }): Explorer {
+function createExplorerFabric(params: { connectionId: string; isVisible: boolean }): Explorer {
   updateUserContext({
     fabricContext: {
       connectionId: params.connectionId,
       databaseConnectionInfo: undefined,
       isReadOnly: true,
+      isVisible: params.isVisible ?? true,
     },
     authType: AuthType.ConnectionString,
     databaseAccount: {

webpack.config.js

@@ -302,6 +302,7 @@ module.exports = function (_env = {}, argv = {}) {
           pathRewrite: { "^/proxy": "" },
           router: (req) => {
             let newTarget = req.headers["x-ms-proxy-target"];
+            console.log(`Proxy path used. New target is: ${newTarget}`);
             return newTarget;
           },
         },