Merge branch 'master' of https://github.com/Azure/cosmos-explorer into users/aisayas/pbe

Upgrade Cosmos SDK to 4.0.0 (#1664 )
* upgrade cosmos sdk to 4.0.0 * added explicit any test * fixed package-lock.json --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com>
2025-12-31 06:41:35 +00:00 · 2023-10-19 15:28:04 -04:00 · 2023-10-19 15:22:12 -04:00 · 2023-10-19 13:49:55 -04:00 · 2023-10-19 13:45:47 -04:00 · 2023-10-19 13:21:39 -04:00
44 changed files with 2623 additions and 2124 deletions
--- a/images/CopilotCommand.svg
+++ b/images/CopilotCommand.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3626 11.9771C13.1573 11.9837 13.019 12.0288 12.9215 12.0836C12.817 12.1424 12.7301 12.229 12.6508 12.3542C12.4802 12.6239 12.3837 12.9957 12.252 13.5033L12.2347 13.5699C12.1079 14.0581 11.9424 14.6764 11.5775 15.1594C11.1788 15.687 10.5903 16 9.74835 16H4.63681C3.55423 16 2.75741 15.2435 2.18373 14.3271C1.60629 13.4047 1.17786 12.2045 0.845481 11.0542L0.845003 11.0525C0.464365 9.73512 -0.017355 8.06787 0.000479698 6.72244C0.00951195 6.04103 0.145994 5.34953 0.569528 4.825C1.00712 4.28305 1.66518 4.02294 2.50365 4.02294H2.63739C2.84267 4.01631 2.98102 3.97123 3.07848 3.9164C3.18305 3.85757 3.26995 3.77102 3.34916 3.64584C3.51985 3.37613 3.61631 3.00432 3.74801 2.49671L3.76529 2.43012C3.89213 1.94191 4.05757 1.32365 4.42251 0.840633C4.82119 0.312966 5.40972 0 6.25165 0H11.3632C12.4458 0 13.2426 0.756543 13.8163 1.67295C14.3937 2.59534 14.8221 3.79546 15.1545 4.94582L15.155 4.94748C15.5356 6.26488 16.0174 7.93213 15.9995 9.27756C15.9905 9.95897 15.854 10.6505 15.4305 11.175C14.9929 11.717 14.3348 11.9771 13.4963 11.9771H13.3626ZM14.1354 5.28381C13.8114 4.16251 13.4194 3.09096 12.9303 2.3096C12.4374 1.52225 11.9215 1.14296 11.3632 1.14296H7.95613C8.10274 1.42082 8.22537 1.731 8.33548 2.05199C8.48008 2.47355 8.61427 2.94842 8.75233 3.43699L8.78302 3.54557C9.32758 5.47082 10.008 7.94794 10.4498 9.5646C10.6507 10.2998 11.2693 10.8098 11.9798 10.8333H13.4156C13.4253 10.8333 13.4351 10.8335 13.4447 10.8341H13.4963C14.1298 10.8341 14.4484 10.6443 14.6237 10.4272C14.813 10.1928 14.9255 9.8162 14.9328 9.26133C14.9477 8.13479 14.5323 6.65749 14.1354 5.28381ZM3.06972 13.6904C3.56261 14.4777 4.0785 14.857 4.63681 14.857H8.04387C7.89726 14.5792 7.77463 14.269 7.66452 13.948C7.51992 13.5265 7.38573 13.0516 7.24767 12.563L7.21698 12.4544C6.67242 10.5292 5.99197 8.05206 5.55019 6.4354C5.34929 5.70024 4.73069 5.19015 4.02018 5.16674H2.58445C2.57465 5.16674 2.56492 5.16646 2.55526 5.1659H2.50365C1.87025 5.1659 1.5516 5.35572 1.37634 5.57277C1.18703 5.80723 1.07454 6.1838 1.06719 6.73867C1.05225 7.86521 1.46769 9.34251 1.86459 10.7162C2.18857 11.8375 2.58057 12.909 3.06972 13.6904ZM9.10298 10.8333H9.87304C9.67506 10.5554 9.5217 10.236 9.42598 9.88575C9.233 9.17956 8.99466 8.30985 8.74215 7.39421L8.47331 6.42622C8.26579 5.67902 7.62465 5.16674 6.89702 5.16674H6.12695C6.32494 5.44463 6.4783 5.76395 6.57402 6.11425C6.767 6.82044 7.00534 7.69015 7.25785 8.60579L7.52669 9.57378C7.73421 10.321 8.37535 10.8333 9.10298 10.8333ZM6.89702 4.02378C7.23212 4.02378 7.55609 4.08968 7.85646 4.21152C7.82459 4.0984 7.7931 3.98682 7.76205 3.87706L7.73417 3.77844C7.59304 3.27914 7.46754 2.83514 7.33414 2.44626C7.19129 2.02979 7.05211 1.71602 6.90214 1.4942C6.77014 1.29897 6.56087 1.14296 6.25165 1.14296C5.69009 1.14296 5.42306 1.33297 5.2517 1.55976C5.04661 1.83121 4.92755 2.21889 4.79304 2.73662C4.78284 2.77588 4.77249 2.81622 4.76191 2.85744C4.66966 3.21703 4.55997 3.64464 4.37733 4.02378H6.89702ZM9.10298 11.9762C8.76788 11.9762 8.44391 11.9103 8.14354 11.7885C8.1754 11.9016 8.2069 12.0132 8.23795 12.1229L8.26583 12.2216C8.40696 12.7208 8.53246 13.1649 8.66585 13.5537C8.80871 13.9702 8.94789 14.284 9.09786 14.5058C9.22986 14.701 9.43913 14.857 9.74835 14.857C10.3099 14.857 10.5769 14.667 10.7483 14.4402C10.9534 14.1688 11.0725 13.7811 11.207 13.2634C11.2172 13.2241 11.2275 13.1838 11.2381 13.1426C11.3303 12.783 11.44 12.3554 11.6227 11.9762H9.10298Z" fill="#0078D4"/>
+</svg>
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1179,16 +1179,16 @@ menuQuickStart {
  }
 }

-.gridRowSelected {
+#tbodycontent tr.gridRowSelected {
  .active();
 }

-.gridRowSelected:hover {
+#tbodycontent tr.gridRowSelected:hover {
  cursor: default;
  .hover();
 }

-.gridRowHighlighted {
+#tbodycontent tr.gridRowHighlighted {
  border-style: dotted;
  border-width: 2px;
 }
@@ -2576,9 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
  font-style: italic;
 }
-.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.querydropdown.placeholderVisible::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #767474;
-  opacity: 1; 
+  opacity: 1;
 }

 .querydropdown:hover {
@@ -2648,7 +2649,7 @@ a:link {

 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
  font-weight: bolder;
-  border-bottom: 2px solid rgba(0,120,212,1);
+  border-bottom: 2px solid rgba(0, 120, 212, 1);
 }

 .nav-tabs > li.active:focus > .tabNavContentContainer {
@@ -3096,4 +3097,3 @@ a:link {
  background: white;
  height: 100%;
 }
-
--- a/package-lock.json
+++ b/package-lock.json
@@ -179,10 +179,11 @@
      }
    },
    "@azure/cosmos": {
-      "version": "3.16.2",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.2.tgz",
-      "integrity": "sha512-sceY5LWj0BHGj8PSyaVCfDRQLVZyoCfIY78kyIROJVEw0k+p9XFs8fhpykN8JklkCftL0WlaVY+X25SQwnhZsw==",
+      "version": "4.0.0",
+      "resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/@azure/cosmos/-/cosmos-4.0.0.tgz",
+      "integrity": "sha1-X9qLNctiu82lIVm5bEw5gahD1bk=",
      "requires": {
+        "@azure/abort-controller": "^1.0.0",
        "@azure/core-auth": "^1.3.0",
        "@azure/core-rest-pipeline": "^1.2.0",
        "debug": "^4.1.1",
@@ -22133,6 +22134,12 @@
      "resolved": "https://registry.npmjs.org/react-splitter-layout/-/react-splitter-layout-4.0.0.tgz",
      "integrity": "sha512-SLqOjBOxRuizWUa83w6q5/u9cDWa9/yj9Iko9V9JFN8x+cqIXiDlUFWSx+icz3IIgvsN/oRIw3za5/32RjIwrA=="
    },
+    "react-string-format": {
+      "version": "1.0.1",
+      "resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/react-string-format/-/react-string-format-1.0.1.tgz",
+      "integrity": "sha1-JyQaRZHqURInBBx64HC3FJBh3AA=",
+      "license": "MIT"
+    },
    "react-syntax-highlighter": {
      "version": "12.2.1",
      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
  "main": "index.js",
  "dependencies": {
    "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.16.2",
+    "@azure/cosmos": "4.0.0",
    "@azure/cosmos-language-service": "0.0.5",
    "@azure/identity": "1.2.1",
    "@azure/ms-rest-nodeauth": "3.0.7",
@@ -92,6 +92,7 @@
    "react-notification-system": "0.2.17",
    "react-redux": "7.1.3",
    "react-splitter-layout": "4.0.0",
+    "react-string-format": "1.0.1",
    "react-youtube": "9.0.1",
    "redux": "4.0.4",
    "reflect-metadata": "0.1.13",
@@ -234,4 +235,4 @@
    "printWidth": 120,
    "endOfLine": "auto"
  }
-}
+}
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -427,12 +427,6 @@ export class JunoEndpoints {
  public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }

-export class PriorityLevel {
-  public static readonly High = "high";
-  public static readonly Low = "low";
-  public static readonly Default = "low";
-}
-
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
 export const QueryCopilotSampleContainerId = "SampleContainer";

--- a/src/Common/CosmosClient.test.ts
+++ b/src/Common/CosmosClient.test.ts
@@ -125,7 +125,7 @@ describe("requestPlugin", () => {
      const headers = {};
      const endpoint = "https://docs.azure.com";
      const path = "/dbs/foo";
-      requestPlugin({ endpoint, headers, path } as any, next as any);
+      requestPlugin({ endpoint, headers, path } as any, undefined, next as any);
      expect(next.mock.calls[0][0]).toMatchSnapshot();
    });
  });
@@ -137,7 +137,7 @@ describe("requestPlugin", () => {
      const headers = {};
      const endpoint = "";
      const path = "/dbs/foo";
-      requestPlugin({ endpoint, headers, path } as any, next as any);
+      requestPlugin({ endpoint, headers, path } as any, undefined, next as any);
      expect(next.mock.calls[0][0]).toMatchSnapshot();
    });
  });
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -1,13 +1,12 @@
 import * as Cosmos from "@azure/cosmos";
-import { configContext, Platform } from "../ConfigContext";
+import { sendCachedDataMessage } from "Common/MessageHandler";
+import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
+import { Platform, configContext } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { PriorityLevel } from "../Common/Constants";
-import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
-import { AuthType } from "../AuthType";

 const _global = typeof self === "undefined" ? window : self;

@@ -26,6 +25,15 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
    return decodeURIComponent(headers.authorization);
  }

+  if (configContext.platform === Platform.Fabric) {
+    const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
+      requestInfo,
+    ]);
+    console.log("Response from Fabric: ", authorizationToken);
+    headers[HttpHeaders.msDate] = authorizationToken.XDate;
+    return authorizationToken.PrimaryReadWriteToken;
+  }
+
  if (userContext.masterKey) {
    // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
@@ -41,7 +49,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
  return decodeURIComponent(result.PrimaryReadWriteToken);
 };

-export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
+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();
  return next(requestContext);
@@ -56,7 +64,11 @@ export const endpoint = () => {
  return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
 };

-export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
+export async function getTokenFromAuthService(
+  verb: string,
+  resourceType: string,
+  resourceId?: string,
+): Promise<AuthorizationToken> {
  try {
    const host = configContext.BACKEND_ENDPOINT;
    const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
@@ -95,18 +107,6 @@ export function client(): Cosmos.CosmosClient {
  _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: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
    key: userContext.masterKey,
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -22,7 +22,7 @@ export function handleCachedDataMessage(message: any): void {
  if (messageContent.error != null) {
    cachedDataPromise.deferred.reject(messageContent.error);
  } else {
-    cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
+    cachedDataPromise.deferred.resolve(messageContent.data);
  }
  runGarbageCollector();
 }
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -1,46 +1,6 @@
+import { MessageTypes } from "Contracts/MessageTypes";
 import * as ActionContracts from "./ActionContracts";
 import * as Diagnostics from "./Diagnostics";
 import * as Versions from "./Versions";

-/**
- * Messaging types used with Data Explorer <-> Portal communication
- * and Hosted <-> Explorer communication
- */
-export enum MessageTypes {
-  TelemetryInfo,
-  LogInfo,
-  RefreshResources,
-  AllDatabases,
-  CollectionsForDatabase,
-  RefreshOffers,
-  AllOffers,
-  UpdateLocationHash,
-  SingleOffer,
-  RefreshOffer,
-  UpdateAccountName,
-  ForbiddenError,
-  AadSignIn,
-  GetAccessAadRequest,
-  GetAccessAadResponse,
-  UpdateAccountSwitch,
-  UpdateDirectoryControl,
-  SwitchAccount,
-  SendNotification,
-  ClearNotification,
-  ExplorerClickEvent,
-  LoadingStatus,
-  GetArcadiaToken,
-  CreateWorkspace,
-  CreateSparkPool,
-  RefreshDatabaseAccount,
-  CloseTab,
-  OpenQuickstartBlade,
-  OpenPostgreSQLPasswordReset,
-  OpenPostgresNetworkingBlade,
-  OpenCosmosDBNetworkingBlade,
-  DisplayNPSSurvey,
-  OpenVCoreMongoNetworkingBlade,
-  OpenVCoreMongoConnectionStringsBlade,
-}
-
-export { ActionContracts, Diagnostics, Versions };
+export { ActionContracts, Diagnostics, MessageTypes, Versions };
--- a/src/Contracts/FabricContract.ts
+++ b/src/Contracts/FabricContract.ts
@@ -1,3 +1,5 @@
+import { AuthorizationToken, MessageTypes } from "./MessageTypes";
+
 export type FabricMessage =
  | {
      type: "newContainer";
@@ -5,21 +7,52 @@ export type FabricMessage =
    }
  | {
      type: "initialize";
-      connectionString: string | undefined;
+      message: {
+        endpoint: string | undefined;
+        error: string | undefined;
+      };
    }
  | {
      type: "openTab";
      databaseName: string;
      collectionName: string | undefined;
+    }
+  | {
+      type: "authorizationToken";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: AuthorizationToken | undefined;
+      };
    };

 export type DataExploreMessage =
  | "ready"
  | {
-      type: number;
+      type: MessageTypes.TelemetryInfo;
      data: {
        action: "LoadDatabases";
        actionModifier: "success" | "start";
        defaultExperience: "SQL";
      };
+    }
+  | {
+      type: MessageTypes.GetAuthorizationToken;
+      id: string;
+      params: GetCosmosTokenMessageOptions[];
    };
+
+export type GetCosmosTokenMessageOptions = {
+  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
+  resourceId: string;
+};
+
+export type CosmosDBTokenResponse = {
+  token: string;
+  date: string;
+};
+
+export type CosmosDBConnectionInfoResponse = {
+  endpoint: string;
+};
--- a/src/Contracts/MessageTypes.ts
+++ b/src/Contracts/MessageTypes.ts
@@ -0,0 +1,48 @@
+/**
+ * Messaging types used with Data Explorer <-> Portal communication,
+ * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
+ */
+export enum MessageTypes {
+  TelemetryInfo,
+  LogInfo,
+  RefreshResources,
+  AllDatabases,
+  CollectionsForDatabase,
+  RefreshOffers,
+  AllOffers,
+  UpdateLocationHash,
+  SingleOffer,
+  RefreshOffer,
+  UpdateAccountName,
+  ForbiddenError,
+  AadSignIn,
+  GetAccessAadRequest,
+  GetAccessAadResponse,
+  UpdateAccountSwitch,
+  UpdateDirectoryControl,
+  SwitchAccount,
+  SendNotification,
+  ClearNotification,
+  ExplorerClickEvent,
+  LoadingStatus,
+  GetArcadiaToken,
+  CreateWorkspace,
+  CreateSparkPool,
+  RefreshDatabaseAccount,
+  CloseTab,
+  OpenQuickstartBlade,
+  OpenPostgreSQLPasswordReset,
+  OpenPostgresNetworkingBlade,
+  OpenCosmosDBNetworkingBlade,
+  DisplayNPSSurvey,
+  OpenVCoreMongoNetworkingBlade,
+  OpenVCoreMongoConnectionStringsBlade,
+
+  // Data Explorer -> Fabric communication
+  GetAuthorizationToken,
+}
+
+export interface AuthorizationToken {
+  XDate: string;
+  PrimaryReadWriteToken: string;
+}
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -123,19 +123,6 @@ describe("ContainerSampleGenerator", () => {
    await generator.createSampleContainerAsync();
  });

-  it("should not create any sample for Mongo API account", async () => {
-    const experience = "Sample generation not supported for this API Mongo";
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableMongo" }],
-        },
-      } as DatabaseAccount,
-    });
-
-    expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
-  });
-
  it("should not create any sample for Table API account", async () => {
    const experience = "Sample generation not supported for this API Tables";
    updateUserContext({
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -689,9 +689,9 @@ export default class Explorer {
  private _initSettings() {
    if (!ExplorerSettings.hasSettingsDefined()) {
      ExplorerSettings.createDefaultSettings();
-    } else {
-      ExplorerSettings.ensurePriorityLevel();
    }
+
+    ExplorerSettings.ensurePriorityLevel();
  }

  public uploadFile(
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -67,7 +67,7 @@ export function createStaticCommandBarButtons(
    }
  }

-  if (userContext.apiType !== "Tables") {
+  if (userContext.apiType !== "Tables" && configContext.platform !== Platform.Fabric) {
    newCollectionBtn.children = [createNewCollectionGroup(container)];
    const newDatabaseBtn = createNewDatabase(container);
    newCollectionBtn.children.push(newDatabaseBtn);
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -114,7 +114,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
    super(props);

    this.state = {
-      createNewDatabase: userContext.apiType !== "Tables" && !this.props.databaseId,
+      createNewDatabase:
+        userContext.apiType !== "Tables" && configContext.platform !== Platform.Fabric && !this.props.databaseId,
      newDatabaseId: props.isQuickstart ? this.getSampleDBName() : "",
      isSharedThroughputChecked: this.getSharedThroughputDefault(),
      selectedDatabaseId:
@@ -274,36 +275,38 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
              </TooltipHost>
            </Stack>

-            <Stack horizontal verticalAlign="center">
-              <div role="radiogroup">
-                <input
-                  className="panelRadioBtn"
-                  checked={this.state.createNewDatabase}
-                  aria-label="Create new database"
-                  aria-checked={this.state.createNewDatabase}
-                  name="databaseType"
-                  type="radio"
-                  role="radio"
-                  id="databaseCreateNew"
-                  tabIndex={0}
-                  onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">Create new</span>
+            {configContext.platform !== Platform.Fabric && (
+              <Stack horizontal verticalAlign="center">
+                <div role="radiogroup">
+                  <input
+                    className="panelRadioBtn"
+                    checked={this.state.createNewDatabase}
+                    aria-label="Create new database"
+                    aria-checked={this.state.createNewDatabase}
+                    name="databaseType"
+                    type="radio"
+                    role="radio"
+                    id="databaseCreateNew"
+                    tabIndex={0}
+                    onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">Create new</span>

-                <input
-                  className="panelRadioBtn"
-                  checked={!this.state.createNewDatabase}
-                  aria-label="Use existing database"
-                  aria-checked={!this.state.createNewDatabase}
-                  name="databaseType"
-                  type="radio"
-                  role="radio"
-                  tabIndex={0}
-                  onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">Use existing</span>
-              </div>
-            </Stack>
+                  <input
+                    className="panelRadioBtn"
+                    checked={!this.state.createNewDatabase}
+                    aria-label="Use existing database"
+                    aria-checked={!this.state.createNewDatabase}
+                    name="databaseType"
+                    type="radio"
+                    role="radio"
+                    tabIndex={0}
+                    onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">Use existing</span>
+                </div>
+              </Stack>
+            )}

            {this.state.createNewDatabase && (
              <Stack className="panelGroupSpacing">
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -1,4 +1,14 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
+import { PriorityLevel } from "@azure/cosmos";
+import {
+  Checkbox,
+  ChoiceGroup,
+  IChoiceGroupOption,
+  ISpinButtonStyles,
+  IToggleStyles,
+  Position,
+  SpinButton,
+  Toggle,
+} from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { configContext } from "ConfigContext";
@@ -6,10 +16,10 @@ import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
 import { userContext } from "UserContext";
 import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { FunctionComponent, MouseEvent, useState } from "react";
-import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { FunctionComponent, useState } from "react";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";

 export const SettingsPane: FunctionComponent = () => {
  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
@@ -19,6 +29,13 @@ export const SettingsPane: FunctionComponent = () => {
      ? Constants.Queries.UnlimitedPageOption
      : Constants.Queries.CustomPageOption,
  );
+  const [queryTimeoutEnabled, setQueryTimeoutEnabled] = useState<boolean>(
+    LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
+  );
+  const [queryTimeout, setQueryTimeout] = useState<number>(LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout));
+  const [automaticallyCancelQueryAfterTimeout, setAutomaticallyCancelQueryAfterTimeout] = useState<boolean>(
+    LocalStorageUtility.getEntryBoolean(StorageKey.AutomaticallyCancelQueryAfterTimeout),
+  );
  const [customItemPerPage, setCustomItemPerPage] = useState<number>(
    LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0,
  );
@@ -42,10 +59,10 @@ export const SettingsPane: FunctionComponent = () => {
      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
      : Constants.Queries.DefaultMaxDegreeOfParallelism,
  );
-  const [priorityLevel, setPriorityLevel] = useState<string>(
+  const [priorityLevel, setPriorityLevel] = useState<PriorityLevel>(
    LocalStorageUtility.hasItem(StorageKey.PriorityLevel)
-      ? LocalStorageUtility.getEntryString(StorageKey.PriorityLevel)
-      : Constants.PriorityLevel.Default,
+      ? (LocalStorageUtility.getEntryString(StorageKey.PriorityLevel) as PriorityLevel)
+      : PriorityLevel.Low,
  );
  const explorerVersion = configContext.gitSha;
  const shouldShowQueryPageOptions = userContext.apiType === "SQL";
@@ -53,7 +70,7 @@ export const SettingsPane: FunctionComponent = () => {
  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  const handlerOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
+  const handlerOnSubmit = () => {
    setIsExecuting(true);

    LocalStorageUtility.setEntryNumber(
@@ -61,10 +78,11 @@ export const SettingsPane: FunctionComponent = () => {
      isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage,
    );
    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
+    LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
    LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
-    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
+    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel);

    if (shouldShowGraphAutoVizOption) {
      LocalStorageUtility.setEntryBoolean(
@@ -73,6 +91,14 @@ export const SettingsPane: FunctionComponent = () => {
      );
    }

+    if (queryTimeoutEnabled) {
+      LocalStorageUtility.setEntryNumber(StorageKey.QueryTimeout, queryTimeout);
+      LocalStorageUtility.setEntryBoolean(
+        StorageKey.AutomaticallyCancelQueryAfterTimeout,
+        automaticallyCancelQueryAfterTimeout,
+      );
+    }
+
    setIsExecuting(false);
    logConsoleInfo(
      `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`,
@@ -97,7 +123,6 @@ export const SettingsPane: FunctionComponent = () => {
      `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`,
    );
    closeSidePanel();
-    e.preventDefault();
  };

  const isCustomPageOptionSelected = () => {
@@ -112,7 +137,7 @@ export const SettingsPane: FunctionComponent = () => {
    formError: "",
    isExecuting,
    submitButtonText: "Apply",
-    onSubmit: () => handlerOnSubmit(undefined),
+    onSubmit: () => handlerOnSubmit(),
  };
  const pageOptionList: IChoiceGroupOption[] = [
    { key: Constants.Queries.CustomPageOption, text: "Custom" },
@@ -125,21 +150,36 @@ export const SettingsPane: FunctionComponent = () => {
  ];

  const priorityLevelOptionList: IChoiceGroupOption[] = [
-    { key: Constants.PriorityLevel.Low, text: "Low" },
-    { key: Constants.PriorityLevel.High, text: "High" },
+    { key: PriorityLevel.Low, text: "Low" },
+    { key: PriorityLevel.High, text: "High" },
  ];

  const handleOnPriorityLevelOptionChange = (
    ev: React.FormEvent<HTMLInputElement>,
    option: IChoiceGroupOption,
  ): void => {
-    setPriorityLevel(option.key);
+    setPriorityLevel(option.key as PriorityLevel);
  };

  const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
    setPageOption(option.key);
  };

+  const handleOnQueryTimeoutToggleChange = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    setQueryTimeoutEnabled(checked);
+  };
+
+  const handleOnAutomaticallyCancelQueryToggleChange = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    setAutomaticallyCancelQueryAfterTimeout(checked);
+  };
+
+  const handleOnQueryTimeoutSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
+    const queryTimeout = Number(newValue);
+    if (!isNaN(queryTimeout)) {
+      setQueryTimeout(queryTimeout);
+    }
+  };
+
  const choiceButtonStyles = {
    root: {
      clear: "both",
@@ -161,6 +201,35 @@ export const SettingsPane: FunctionComponent = () => {
      },
    ],
  };
+
+  const queryTimeoutToggleStyles: IToggleStyles = {
+    label: {
+      fontSize: 12,
+      fontWeight: 400,
+      display: "block",
+    },
+    root: {},
+    container: {},
+    pill: {},
+    thumb: {},
+    text: {},
+  };
+
+  const queryTimeoutSpinButtonStyles: ISpinButtonStyles = {
+    label: {
+      fontSize: 12,
+      fontWeight: 400,
+    },
+    root: {
+      paddingBottom: 10,
+    },
+    labelWrapper: {},
+    icon: {},
+    spinButtonWrapper: {},
+    input: {},
+    arrowButtonsContainer: {},
+  };
+
  return (
    <RightPaneForm {...genericPaneProps}>
      <div className="paneMainContent">
@@ -211,6 +280,50 @@ export const SettingsPane: FunctionComponent = () => {
            </div>
          </div>
        )}
+        {userContext.apiType === "SQL" && (
+          <div className="settingsSection">
+            <div className="settingsSectionPart">
+              <div>
+                <legend id="queryTimeoutLabel" className="settingsSectionLabel legendLabel">
+                  Query Timeout
+                </legend>
+                <InfoTooltip>
+                  When a query reaches a specified time limit, a popup with an option to cancel the query will show
+                  unless automatic cancellation has been enabled
+                </InfoTooltip>
+              </div>
+              <div>
+                <Toggle
+                  styles={queryTimeoutToggleStyles}
+                  label="Enable query timeout"
+                  onChange={handleOnQueryTimeoutToggleChange}
+                  defaultChecked={queryTimeoutEnabled}
+                />
+              </div>
+              {queryTimeoutEnabled && (
+                <div>
+                  <SpinButton
+                    label="Query timeout (ms)"
+                    labelPosition={Position.top}
+                    defaultValue={(queryTimeout || 5000).toString()}
+                    min={100}
+                    step={1000}
+                    onChange={handleOnQueryTimeoutSpinButtonChange}
+                    incrementButtonAriaLabel="Increase value by 1000"
+                    decrementButtonAriaLabel="Decrease value by 1000"
+                    styles={queryTimeoutSpinButtonStyles}
+                  />
+                  <Toggle
+                    label="Automatically cancel query after timeout"
+                    styles={queryTimeoutToggleStyles}
+                    onChange={handleOnAutomaticallyCancelQueryToggleChange}
+                    defaultChecked={automaticallyCancelQueryAfterTimeout}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
        <div className="settingsSection">
          <div className="settingsSectionPart">
            <div className="settingsSectionLabel">
@@ -289,8 +402,7 @@ export const SettingsPane: FunctionComponent = () => {
                </legend>
                <InfoTooltip>
                  Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
-                  Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the
-                  server-side default priority level will be used.
+                  Execution.
                </InfoTooltip>
                <ChoiceGroup
                  ariaLabelledBy="priorityLevel"
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -97,6 +97,46 @@ exports[`Settings Pane should render Default properly 1`] = `
        </div>
      </div>
    </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div>
+          <legend
+            className="settingsSectionLabel legendLabel"
+            id="queryTimeoutLabel"
+          >
+            Query Timeout
+          </legend>
+          <InfoTooltip>
+            When a query reaches a specified time limit, a popup with an option to cancel the query will show unless automatic cancellation has been enabled
+          </InfoTooltip>
+        </div>
+        <div>
+          <StyledToggleBase
+            defaultChecked={false}
+            label="Enable query timeout"
+            onChange={[Function]}
+            styles={
+              Object {
+                "container": Object {},
+                "label": Object {
+                  "display": "block",
+                  "fontSize": 12,
+                  "fontWeight": 400,
+                },
+                "pill": Object {},
+                "root": Object {},
+                "text": Object {},
+                "thumb": Object {},
+              }
+            }
+          />
+        </div>
+      </div>
+    </div>
    <div
      className="settingsSection"
    >
--- a/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx
+++ b/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx
@@ -102,7 +102,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
    expect(wrapper).toMatchSnapshot();
  });

-  it("should submit submission", () => {
+  it("should not submit submission if required description field is null", () => {
    const explorer = new Explorer();
    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);

@@ -110,12 +110,24 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
    submitButton.simulate("click");
    wrapper.setProps({});

+    expect(SubmitFeedback).toHaveBeenCalledTimes(0);
+  });
+
+  it("should submit submission", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
+    const explorer = new Explorer();
+    const wrapper = shallow(<QueryCopilotFeedbackModal explorer={explorer} />);
+
+    const submitButton = wrapper.find("form");
+    submitButton.simulate("submit");
+    wrapper.setProps({});
+
    expect(SubmitFeedback).toHaveBeenCalledTimes(1);
    expect(SubmitFeedback).toHaveBeenCalledWith({
      params: {
        likeQuery: false,
-        generatedQuery: "",
-        userPrompt: "",
+        generatedQuery: "test query",
+        userPrompt: "test prompt",
        description: "",
        contact: getUserEmail(),
      },
--- a/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx
+++ b/src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx
@@ -25,93 +25,94 @@ export const QueryCopilotFeedbackModal = ({ explorer }: { explorer: Explorer }):
    closeFeedbackModal,
    setHideFeedbackModalForLikedQueries,
  } = useQueryCopilot();
-  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(true);
+  const [isContactAllowed, setIsContactAllowed] = React.useState<boolean>(false);
  const [description, setDescription] = React.useState<string>("");
  const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
  const [contact, setContact] = React.useState<string>(getUserEmail());

+  const handleSubmit = () => {
+    closeFeedbackModal();
+    setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
+    SubmitFeedback({
+      params: { generatedQuery, likeQuery, description, userPrompt, contact },
+      explorer: explorer,
+    });
+  };
+
  return (
    <Modal isOpen={showFeedbackModal}>
-      <Stack style={{ padding: 24 }}>
-        <Stack horizontal horizontalAlign="space-between">
-          <Text style={{ fontSize: 20, fontWeight: 600, marginBottom: 20 }}>Send feedback to Microsoft</Text>
-          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => closeFeedbackModal()} />
-        </Stack>
-        <Text style={{ fontSize: 14, marginBottom: 14 }}>Your feedback will help improve the experience.</Text>
-        <TextField
-          styles={{ root: { marginBottom: 14 } }}
-          label="Description"
-          required
-          placeholder="Provide more details"
-          value={description}
-          onChange={(_, newValue) => setDescription(newValue)}
-          multiline
-          rows={3}
-        />
-        <TextField
-          styles={{ root: { marginBottom: 14 } }}
-          label="Query generated"
-          defaultValue={generatedQuery}
-          readOnly
-        />
-        <ChoiceGroup
-          styles={{
-            root: {
-              marginBottom: 14,
-            },
-            flexContainer: {
-              selectors: {
-                ".ms-ChoiceField-field::before": { marginTop: 4 },
-                ".ms-ChoiceField-field::after": { marginTop: 4 },
-                ".ms-ChoiceFieldLabel": { paddingLeft: 6 },
-              },
-            },
-          }}
-          label="May we contact you about your feedback?"
-          options={[
-            { key: "yes", text: "Yes, you may contact me." },
-            { key: "no", text: "No, do not contact me." },
-          ]}
-          selectedKey={isContactAllowed ? "yes" : "no"}
-          onChange={(_, option) => {
-            setIsContactAllowed(option.key === "yes");
-            setContact(option.key === "yes" ? getUserEmail() : "");
-          }}
-        ></ChoiceGroup>
-        <Text style={{ fontSize: 12, marginBottom: 14 }}>
-          By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the{" "}
-          {
-            <Link href="https://privacy.microsoft.com/privacystatement" target="_blank">
-              Privacy statement
-            </Link>
-          }{" "}
-          for more information.
-        </Text>
-        {likeQuery && (
-          <Checkbox
-            styles={{ label: { paddingLeft: 0 }, root: { marginBottom: 14 } }}
-            label="Don't show me this next time"
-            checked={doNotShowAgainChecked}
-            onChange={(_, checked) => setDoNotShowAgainChecked(checked)}
+      <form onSubmit={handleSubmit}>
+        <Stack style={{ padding: 24 }}>
+          <Stack horizontal horizontalAlign="space-between">
+            <Text style={{ fontSize: 20, fontWeight: 600, marginBottom: 20 }}>Send feedback to Microsoft</Text>
+            <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => closeFeedbackModal()} />
+          </Stack>
+          <Text style={{ fontSize: 14, marginBottom: 14 }}>Your feedback will help improve the experience.</Text>
+          <TextField
+            styles={{ root: { marginBottom: 14 } }}
+            label="Description"
+            required
+            placeholder="Provide more details"
+            value={description}
+            onChange={(_, newValue) => setDescription(newValue)}
+            multiline
+            rows={3}
          />
-        )}
-        <Stack horizontal horizontalAlign="end">
-          <PrimaryButton
-            styles={{ root: { marginRight: 8 } }}
-            onClick={() => {
-              closeFeedbackModal();
-              setHideFeedbackModalForLikedQueries(doNotShowAgainChecked);
-              SubmitFeedback({
-                params: { generatedQuery, likeQuery, description, userPrompt, contact },
-                explorer: explorer,
-              });
+          <TextField
+            styles={{ root: { marginBottom: 14 } }}
+            label="Query generated"
+            defaultValue={generatedQuery}
+            readOnly
+          />
+          <ChoiceGroup
+            styles={{
+              root: {
+                marginBottom: 14,
+              },
+              flexContainer: {
+                selectors: {
+                  ".ms-ChoiceField-field::before": { marginTop: 4 },
+                  ".ms-ChoiceField-field::after": { marginTop: 4 },
+                  ".ms-ChoiceFieldLabel": { paddingLeft: 6 },
+                },
+              },
            }}
-          >
-            Submit
-          </PrimaryButton>
-          <DefaultButton onClick={() => closeFeedbackModal()}>Cancel</DefaultButton>
+            label="May we contact you about your feedback?"
+            options={[
+              { key: "yes", text: "Yes, you may contact me." },
+              { key: "no", text: "No, do not contact me." },
+            ]}
+            selectedKey={isContactAllowed ? "yes" : "no"}
+            onChange={(_, option) => {
+              setIsContactAllowed(option.key === "yes");
+              setContact(option.key === "yes" ? getUserEmail() : "");
+            }}
+          ></ChoiceGroup>
+          <Text style={{ fontSize: 12, marginBottom: 14 }}>
+            By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the{" "}
+            {
+              <Link href="https://privacy.microsoft.com/privacystatement" target="_blank">
+                Privacy statement
+              </Link>
+            }{" "}
+            for more information.
+          </Text>
+          {likeQuery && (
+            <Checkbox
+              styles={{ label: { paddingLeft: 0 }, root: { marginBottom: 14 } }}
+              label="Don't show me this next time"
+              checked={doNotShowAgainChecked}
+              onChange={(_, checked) => setDoNotShowAgainChecked(checked)}
+            />
+          )}
+          <Stack horizontal horizontalAlign="end">
+            <PrimaryButton styles={{ root: { marginRight: 8 } }} type="submit">
+              Submit
+            </PrimaryButton>
+            <DefaultButton onClick={() => closeFeedbackModal()}>Cancel</DefaultButton>
+          </Stack>
        </Stack>
-      </Stack>
+      </form>
    </Modal>
  );
 };
--- a/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
+++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
@@ -52,7 +52,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
          </Stack>
          <Stack horizontalAlign="center">
            <Stack.Item align="center" style={{ textAlign: "center" }}>
-              <Text className="title bold">Welcome to Query Copilot for Azure Cosmos DB (Private Preview)</Text>
+              <Text className="title bold">Welcome to Copilot in Azure Cosmos DB (Private Preview)</Text>
            </Stack.Item>
            <Stack.Item align="center" className="text">
              <Stack horizontal>
@@ -61,7 +61,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                </StackItem>
                <StackItem align="start">
                  <Text className="bold">
-                    Let Query Copilot do the work for you
+                    Let Copilot do the work for you
                    <br />
                  </Text>
                </StackItem>
--- a/src/Explorer/QueryCopilot/Modal/snapshots/QueryCopilotFeedbackModal.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/Modal/snapshots/QueryCopilotFeedbackModal.test.tsx.snap
--- a/src/Explorer/QueryCopilot/Modal/snapshots/WelcomeModal.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/Modal/snapshots/WelcomeModal.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
          <Text
            className="title bold"
          >
-            Welcome to Query Copilot for Azure Cosmos DB (Private Preview)
+            Welcome to Copilot in Azure Cosmos DB (Private Preview)
          </Text>
        </StackItem>
        <StackItem
@@ -100,7 +100,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
              <Text
                className="bold"
              >
-                Let Query Copilot do the work for you
+                Let Copilot do the work for you
                <br />
              </Text>
            </StackItem>
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -0,0 +1,567 @@
+import {
+  Callout,
+  CommandBarButton,
+  DefaultButton,
+  DirectionalHint,
+  IButtonStyles,
+  IconButton,
+  Image,
+  Link,
+  MessageBar,
+  MessageBarType,
+  Separator,
+  Spinner,
+  Stack,
+  TeachingBubble,
+  Text,
+  TextField,
+} from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
+import {
+  ContainerStatusType,
+  PoolIdType,
+  QueryCopilotSampleContainerSchema,
+  ShortenedQueryCopilotSampleContainerSchema,
+} from "Common/Constants";
+import { handleError } from "Common/ErrorHandlingUtils";
+import { createUri } from "Common/UrlUtility";
+import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
+import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
+import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
+import { SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
+import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/SamplePrompts/SamplePrompts";
+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 { useTabs } from "../../hooks/useTabs";
+
+type QueryCopilotPromptProps = QueryCopilotProps & {
+  toggleCopilot: (toggle: boolean) => void;
+};
+
+interface SuggestedPrompt {
+  id: number;
+  text: string;
+}
+
+const promptStyles: IButtonStyles = {
+  root: { border: 0, selectors: { ":hover": { outline: "1px dashed #605e5c" } } },
+  label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
+};
+
+export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
+  explorer,
+  toggleCopilot,
+}: QueryCopilotPromptProps): JSX.Element => {
+  const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
+  const inputEdited = useRef(false);
+  const {
+    hideFeedbackModalForLikedQueries,
+    userPrompt,
+    setUserPrompt,
+    generatedQuery,
+    setGeneratedQuery,
+    query,
+    setQuery,
+    isGeneratingQuery,
+    setIsGeneratingQuery,
+    likeQuery,
+    setLikeQuery,
+    dislikeQuery,
+    setDislikeQuery,
+    showCallout,
+    setShowCallout,
+    isSamplePromptsOpen,
+    setIsSamplePromptsOpen,
+    showSamplePrompts,
+    setShowSamplePrompts,
+    showDeletePopup,
+    setShowDeletePopup,
+    showFeedbackBar,
+    setShowFeedbackBar,
+    showCopyPopup,
+    setshowCopyPopup,
+    showErrorMessageBar,
+    showInvalidQueryMessageBar,
+    setShowInvalidQueryMessageBar,
+    setShowErrorMessageBar,
+    setGeneratedQueryComments,
+    setQueryResults,
+    setErrorMessage,
+  } = useQueryCopilot();
+
+  const sampleProps: SamplePromptsProps = {
+    isSamplePromptsOpen: isSamplePromptsOpen,
+    setIsSamplePromptsOpen: setIsSamplePromptsOpen,
+    setTextBox: setUserPrompt,
+  };
+
+  const copyGeneratedCode = () => {
+    if (!query) {
+      return;
+    }
+    const queryElement = document.createElement("textarea");
+    queryElement.value = query;
+    document.body.appendChild(queryElement);
+    queryElement.select();
+    document.execCommand("copy");
+    document.body.removeChild(queryElement);
+
+    setshowCopyPopup(true);
+    setTimeout(() => {
+      setshowCopyPopup(false);
+    }, 6000);
+  };
+
+  const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
+  const cachedHistories = cachedHistoriesString?.split("|");
+  const [histories, setHistories] = useState<string[]>(cachedHistories || []);
+  const suggestedPrompts: SuggestedPrompt[] = [
+    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
+    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
+    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
+  ];
+  const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
+  const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
+
+  const handleUserPromptChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    inputEdited.current = true;
+    const { value } = event.target;
+    setUserPrompt(value);
+
+    // Filter history prompts
+    const filteredHistory = histories.filter((history) => history.toLowerCase().includes(value.toLowerCase()));
+    setFilteredHistories(filteredHistory);
+
+    // Filter suggested prompts
+    const filteredSuggested = suggestedPrompts.filter((prompt) =>
+      prompt.text.toLowerCase().includes(value.toLowerCase()),
+    );
+    setFilteredSuggestedPrompts(filteredSuggested);
+  };
+
+  const updateHistories = (): void => {
+    const formattedUserPrompt = userPrompt.replace(/\s+/g, " ").trim();
+    const existingHistories = histories.map((history) => history.replace(/\s+/g, " ").trim());
+
+    const updatedHistories = existingHistories.filter(
+      (history) => history.toLowerCase() !== formattedUserPrompt.toLowerCase(),
+    );
+    const newHistories = [formattedUserPrompt, ...updatedHistories.slice(0, 2)];
+
+    setHistories(newHistories);
+    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
+  };
+
+  const resetMessageStates = (): void => {
+    setShowErrorMessageBar(false);
+    setShowInvalidQueryMessageBar(false);
+    setShowFeedbackBar(false);
+  };
+
+  const resetQueryResults = (): void => {
+    setQueryResults(null);
+    setErrorMessage("");
+  };
+
+  const generateSQLQuery = async (): Promise<void> => {
+    try {
+      resetMessageStates();
+      setIsGeneratingQuery(true);
+      setShowDeletePopup(false);
+      useTabs.getState().setIsTabExecuting(true);
+      useTabs.getState().setIsQueryErrorThrown(false);
+      if (
+        useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
+        !userContext.features.disableCopilotPhoenixGateaway
+      ) {
+        await explorer.allocateContainer(PoolIdType.QueryCopilot);
+      }
+      const payload = {
+        containerSchema: userContext.features.enableCopilotFullSchema
+          ? QueryCopilotSampleContainerSchema
+          : ShortenedQueryCopilotSampleContainerSchema,
+        userPrompt: userPrompt,
+      };
+      useQueryCopilot.getState().refreshCorrelationId();
+      const serverInfo = useQueryCopilot.getState().notebookServerInfo;
+      const queryUri = userContext.features.disableCopilotPhoenixGateaway
+        ? createUri("https://copilotorchestrater.azurewebsites.net/", "generateSQLQuery")
+        : createUri(serverInfo.notebookServerEndpoint, "generateSQLQuery");
+      const response = await fetch(queryUri, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          "x-ms-correlationid": useQueryCopilot.getState().correlationId,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      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);
+          setGeneratedQuery(generateSQLQueryResponse.sql);
+          setGeneratedQueryComments(generateSQLQueryResponse.explanation);
+          setShowFeedbackBar(true);
+          resetQueryResults();
+        } else {
+          setShowInvalidQueryMessageBar(true);
+        }
+      } else {
+        handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
+        useTabs.getState().setIsQueryErrorThrown(true);
+        setShowErrorMessageBar(true);
+      }
+    } catch (error) {
+      handleError(error, "executeNaturalLanguageQuery");
+      useTabs.getState().setIsQueryErrorThrown(true);
+      setShowErrorMessageBar(true);
+      throw error;
+    } finally {
+      setIsGeneratingQuery(false);
+      useTabs.getState().setIsTabExecuting(false);
+    }
+  };
+
+  const showTeachingBubble = (): void => {
+    if (!inputEdited.current) {
+      setTimeout(() => {
+        if (!inputEdited.current && !isWelcomModalVisible()) {
+          toggleCopilotTeachingBubbleVisible();
+          inputEdited.current = true;
+        }
+      }, 30000);
+    }
+  };
+
+  const isWelcomModalVisible = (): boolean => {
+    return localStorage.getItem("hideWelcomeModal") !== "true";
+  };
+
+  const clearFeedback = () => {
+    resetButtonState();
+    resetQueryResults();
+  };
+
+  const resetButtonState = () => {
+    setDislikeQuery(false);
+    setLikeQuery(false);
+    setShowCallout(false);
+  };
+
+  const startGenerateQueryProcess = () => {
+    updateHistories();
+    generateSQLQuery();
+    resetButtonState();
+  };
+
+  React.useEffect(() => {
+    showTeachingBubble();
+    useTabs.getState().setIsQueryErrorThrown(false);
+  }, []);
+
+  return (
+    <Stack className="copilot-prompt-pane" styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}>
+      <Stack horizontal>
+        <Image src={CopilotIcon} style={{ width: 24, height: 24 }} />
+        <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
+        <IconButton
+          iconProps={{ imageProps: { src: errorIcon } }}
+          onClick={() => {
+            toggleCopilot(false);
+            clearFeedback();
+            resetMessageStates();
+          }}
+          styles={{
+            root: {
+              marginLeft: "auto !important",
+            },
+          }}
+          ariaLabel="Close"
+        />
+      </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"
+        />
+        {copilotTeachingBubbleVisible && (
+          <TeachingBubble
+            calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
+            target="#naturalLanguageInput"
+            hasCloseButton={true}
+            closeButtonAriaLabel="Close"
+            onDismiss={toggleCopilotTeachingBubbleVisible}
+            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();
+              }}
+              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()}
+        />
+        {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+        {showSamplePrompts && (
+          <Callout
+            styles={{ root: { minWidth: 400 } }}
+            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={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">
+            Read preview terms
+          </Link>
+          {showErrorMessageBar && (
+            <MessageBar messageBarType={MessageBarType.error}>
+              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" }} horizontal verticalAlign="center">
+          <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
+          {showCallout && !hideFeedbackModalForLikedQueries && (
+            <Callout
+              style={{ padding: 8 }}
+              target="#likeBtn"
+              onDismiss={() => {
+                setShowCallout(false);
+                SubmitFeedback({
+                  params: {
+                    generatedQuery: generatedQuery,
+                    likeQuery: likeQuery,
+                    description: "",
+                    userPrompt: userPrompt,
+                  },
+                  explorer: explorer,
+                });
+              }}
+              directionalHint={DirectionalHint.topCenter}
+            >
+              <Text>
+                Thank you. Need to give{" "}
+                <Link
+                  onClick={() => {
+                    setShowCallout(false);
+                    useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
+                  }}
+                >
+                  more feedback?
+                </Link>
+              </Text>
+            </Callout>
+          )}
+          <IconButton
+            id="likeBtn"
+            style={{ marginLeft: 20 }}
+            iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+            onClick={() => {
+              setShowCallout(!likeQuery);
+              setLikeQuery(!likeQuery);
+              if (dislikeQuery) {
+                setDislikeQuery(!dislikeQuery);
+              }
+            }}
+          />
+          <IconButton
+            style={{ margin: "0 10px" }}
+            iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
+            onClick={() => {
+              if (!dislikeQuery) {
+                useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
+                setLikeQuery(false);
+              }
+              setDislikeQuery(!dislikeQuery);
+              setShowCallout(false);
+            }}
+          />
+          <Separator vertical style={{ color: "#EDEBE9" }} />
+          <CommandBarButton
+            onClick={copyGeneratedCode}
+            iconProps={{ iconName: "Copy" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Copy query
+          </CommandBarButton>
+          <CommandBarButton
+            onClick={() => {
+              setShowDeletePopup(true);
+            }}
+            iconProps={{ iconName: "Delete" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Delete query
+          </CommandBarButton>
+        </Stack>
+      )}
+      <WelcomeModal visible={isWelcomModalVisible()} />
+      {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
+      {query !== "" && query.trim().length !== 0 && (
+        <DeletePopup
+          showDeletePopup={showDeletePopup}
+          setShowDeletePopup={setShowDeletePopup}
+          setQuery={setQuery}
+          clearFeedback={clearFeedback}
+          showFeedbackBar={setShowFeedbackBar}
+        />
+      )}
+      <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
+    </Stack>
+  );
+};
--- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
@@ -1,242 +1,33 @@
 /* eslint-disable no-console */
-import {
-  Callout,
-  CommandBarButton,
-  DefaultButton,
-  DirectionalHint,
-  IButtonStyles,
-  IconButton,
-  Image,
-  Link,
-  MessageBar,
-  MessageBarType,
-  Separator,
-  Spinner,
-  Stack,
-  TeachingBubble,
-  Text,
-  TextField,
-} from "@fluentui/react";
-import { useBoolean } from "@fluentui/react-hooks";
-import {
-  ContainerStatusType,
-  PoolIdType,
-  QueryCopilotSampleContainerSchema,
-  ShortenedQueryCopilotSampleContainerSchema,
-} from "Common/Constants";
-import { handleError } from "Common/ErrorHandlingUtils";
-import { createUri } from "Common/UrlUtility";
+import { Stack } from "@fluentui/react";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
-import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
-import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
-import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
-import { OnExecuteQueryClick, SubmitFeedback } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
-import { GenerateSQLQueryResponse, QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
+import { QueryCopilotPromptbar } from "Explorer/QueryCopilot/QueryCopilotPromptbar";
+import { OnExecuteQueryClick } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { QueryCopilotResults } from "Explorer/QueryCopilot/Shared/QueryCopilotResults";
-import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/SamplePrompts/SamplePrompts";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import SplitterLayout from "react-splitter-layout";
+import QueryCommandIcon from "../../../images/CopilotCommand.svg";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
-import HintIcon from "../../../images/Hint.svg";
-import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
-import RecentIcon from "../../../images/Recent.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
-import { useTabs } from "../../hooks/useTabs";
-
-interface SuggestedPrompt {
-  id: number;
-  text: string;
-}
-
-const promptStyles: IButtonStyles = {
-  root: { border: 0, selectors: { ":hover": { outline: "1px dashed #605e5c" } } },
-  label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
-};
+import * as StringUtility from "../../Shared/StringUtility";

 export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: QueryCopilotProps): JSX.Element => {
-  const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
-  const inputEdited = useRef(false);
-  const {
-    hideFeedbackModalForLikedQueries,
-    userPrompt,
-    setUserPrompt,
-    generatedQuery,
-    setGeneratedQuery,
-    query,
-    setQuery,
-    selectedQuery,
-    setSelectedQuery,
-    isGeneratingQuery,
-    setIsGeneratingQuery,
-    likeQuery,
-    setLikeQuery,
-    dislikeQuery,
-    setDislikeQuery,
-    showCallout,
-    setShowCallout,
-    showSamplePrompts,
-    setShowSamplePrompts,
-    isSamplePromptsOpen,
-    setIsSamplePromptsOpen,
-    showDeletePopup,
-    setShowDeletePopup,
-    showFeedbackBar,
-    setShowFeedbackBar,
-    showCopyPopup,
-    setshowCopyPopup,
-    showErrorMessageBar,
-    showInvalidQueryMessageBar,
-    setShowInvalidQueryMessageBar,
-    setShowErrorMessageBar,
-    setGeneratedQueryComments,
-    setQueryResults,
-    setErrorMessage,
-  } = useQueryCopilot();
+  const { query, setQuery, selectedQuery, setSelectedQuery, isGeneratingQuery } = useQueryCopilot();

-  const sampleProps: SamplePromptsProps = {
-    isSamplePromptsOpen: isSamplePromptsOpen,
-    setIsSamplePromptsOpen: setIsSamplePromptsOpen,
-    setTextBox: setUserPrompt,
-  };
-
-  const copyGeneratedCode = () => {
-    if (!query) {
-      return;
-    }
-    const queryElement = document.createElement("textarea");
-    queryElement.value = query;
-    document.body.appendChild(queryElement);
-    queryElement.select();
-    document.execCommand("copy");
-    document.body.removeChild(queryElement);
-
-    setshowCopyPopup(true);
-    setTimeout(() => {
-      setshowCopyPopup(false);
-    }, 6000);
-  };
-
-  const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
-  const cachedHistories = cachedHistoriesString?.split("|");
-  const [histories, setHistories] = useState<string[]>(cachedHistories || []);
-  const suggestedPrompts: SuggestedPrompt[] = [
-    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
-    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
-    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
-  ];
-  const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
-  const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
-
-  const handleUserPromptChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    inputEdited.current = true;
-    const { value } = event.target;
-    setUserPrompt(value);
-
-    // Filter history prompts
-    const filteredHistory = histories.filter((history) => history.toLowerCase().includes(value.toLowerCase()));
-    setFilteredHistories(filteredHistory);
-
-    // Filter suggested prompts
-    const filteredSuggested = suggestedPrompts.filter((prompt) =>
-      prompt.text.toLowerCase().includes(value.toLowerCase()),
-    );
-    setFilteredSuggestedPrompts(filteredSuggested);
-  };
-
-  const updateHistories = (): void => {
-    const formattedUserPrompt = userPrompt.replace(/\s+/g, " ").trim();
-    const existingHistories = histories.map((history) => history.replace(/\s+/g, " ").trim());
-
-    const updatedHistories = existingHistories.filter(
-      (history) => history.toLowerCase() !== formattedUserPrompt.toLowerCase(),
-    );
-    const newHistories = [formattedUserPrompt, ...updatedHistories.slice(0, 2)];
-
-    setHistories(newHistories);
-    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
-  };
-
-  const resetMessageStates = (): void => {
-    setShowErrorMessageBar(false);
-    setShowInvalidQueryMessageBar(false);
-    setShowFeedbackBar(false);
-  };
-
-  const resetQueryResults = (): void => {
-    setQueryResults(null);
-    setErrorMessage("");
-  };
-
-  const generateSQLQuery = async (): Promise<void> => {
-    try {
-      resetMessageStates();
-      setIsGeneratingQuery(true);
-      setShowDeletePopup(false);
-      useTabs.getState().setIsTabExecuting(true);
-      useTabs.getState().setIsQueryErrorThrown(false);
-      if (
-        useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active &&
-        !userContext.features.disableCopilotPhoenixGateaway
-      ) {
-        await explorer.allocateContainer(PoolIdType.QueryCopilot);
-      }
-      const payload = {
-        containerSchema: userContext.features.enableCopilotFullSchema
-          ? QueryCopilotSampleContainerSchema
-          : ShortenedQueryCopilotSampleContainerSchema,
-        userPrompt: userPrompt,
-      };
-      useQueryCopilot.getState().refreshCorrelationId();
-      const serverInfo = useQueryCopilot.getState().notebookServerInfo;
-      const queryUri = userContext.features.disableCopilotPhoenixGateaway
-        ? createUri("https://copilotorchestrater.azurewebsites.net/", "generateSQLQuery")
-        : createUri(serverInfo.notebookServerEndpoint, "generateSQLQuery");
-      const response = await fetch(queryUri, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-          "x-ms-correlationid": useQueryCopilot.getState().correlationId,
-        },
-        body: JSON.stringify(payload),
-      });
-
-      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);
-          setGeneratedQuery(generateSQLQueryResponse.sql);
-          setGeneratedQueryComments(generateSQLQueryResponse.explanation);
-          setShowFeedbackBar(true);
-          resetQueryResults();
-        } else {
-          setShowInvalidQueryMessageBar(true);
-        }
-      } else {
-        handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
-        useTabs.getState().setIsQueryErrorThrown(true);
-        setShowErrorMessageBar(true);
-      }
-    } catch (error) {
-      handleError(error, "executeNaturalLanguageQuery");
-      useTabs.getState().setIsQueryErrorThrown(true);
-      setShowErrorMessageBar(true);
-      throw error;
-    } finally {
-      setIsGeneratingQuery(false);
-      useTabs.getState().setIsTabExecuting(false);
-    }
-  };
+  const cachedCopilotToggleStatus: string = localStorage.getItem(
+    `${userContext.databaseAccount?.id}-queryCopilotToggleStatus`,
+  );
+  const copilotInitialActive: boolean = cachedCopilotToggleStatus
+    ? StringUtility.toBoolean(cachedCopilotToggleStatus)
+    : true;
+  const [copilotActive, setCopilotActive] = useState<boolean>(copilotInitialActive);

  const getCommandbarButtons = (): CommandButtonComponentProps[] => {
    const executeQueryBtnLabel = selectedQuery ? "Execute Selection" : "Execute Query";
@@ -261,324 +52,47 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
      disabled: true,
    };

-    // Sample Prompts temporary disabled due current design
-    // const samplePromptsBtn = {
-    //   iconSrc: SamplePromptsIcon,
-    //   iconAlt: "Sample Prompts",
-    //   onCommandClick: () => setIsSamplePromptsOpen(true),
-    //   commandButtonLabel: "Sample Prompts",
-    //   ariaLabel: "Sample Prompts",
-    //   hasPopup: false,
-    // };
+    const toggleCopilotButton = {
+      iconSrc: QueryCommandIcon,
+      iconAlt: "Copilot",
+      onCommandClick: () => {
+        toggleCopilot(true);
+      },
+      commandButtonLabel: "Copilot",
+      ariaLabel: "Copilot",
+      hasPopup: false,
+      disabled: copilotActive,
+    };

-    return [executeQueryBtn, saveQueryBtn];
-  };
-  const showTeachingBubble = (): void => {
-    if (!inputEdited.current) {
-      setTimeout(() => {
-        if (!inputEdited.current) {
-          toggleCopilotTeachingBubbleVisible();
-          inputEdited.current = true;
-        }
-      }, 30000);
-    }
-  };
-
-  const clearFeedback = () => {
-    resetButtonState();
-    resetQueryResults();
-  };
-
-  const resetButtonState = () => {
-    setDislikeQuery(false);
-    setLikeQuery(false);
-    setShowCallout(false);
-  };
-
-  const startGenerateQueryProcess = () => {
-    updateHistories();
-    generateSQLQuery();
-    resetButtonState();
+    return [executeQueryBtn, saveQueryBtn, toggleCopilotButton];
  };

  React.useEffect(() => {
    useCommandBar.getState().setContextButtons(getCommandbarButtons());
-  }, [query, selectedQuery]);
+  }, [query, selectedQuery, copilotActive]);

  React.useEffect(() => {
-    showTeachingBubble();
-    useTabs.getState().setIsQueryErrorThrown(false);
+    return () => {
+      const commandbarButtons = getCommandbarButtons();
+      commandbarButtons.pop();
+      commandbarButtons.map((props: CommandButtonComponentProps) => (props.disabled = true));
+      useCommandBar.getState().setContextButtons(commandbarButtons);
+    };
  }, []);

+  const toggleCopilot = (toggle: boolean) => {
+    setCopilotActive(toggle);
+    localStorage.setItem(`${userContext.databaseAccount?.id}-queryCopilotToggleStatus`, toggle.toString());
+  };
+
  return (
-    <Stack className="tab-pane" style={{ padding: 24, width: "100%" }}>
+    <Stack className="tab-pane" style={{ width: "100%" }}>
      <div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}>
-        <Stack horizontal verticalAlign="center">
-          <Image src={CopilotIcon} style={{ width: 24, height: 24 }} />
-          <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
-        </Stack>
-        <Stack horizontal verticalAlign="center" style={{ marginTop: 16, width: "100%", position: "relative" }}>
-          <TextField
-            id="naturalLanguageInput"
-            value={userPrompt}
-            onChange={handleUserPromptChange}
-            onClick={() => {
-              inputEdited.current = true;
-              setShowSamplePrompts(true);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                inputEdited.current = true;
-                startGenerateQueryProcess();
-              }
-            }}
-            style={{ lineHeight: 30 }}
-            styles={{ root: { width: "95%" } }}
-            disabled={isGeneratingQuery}
-            autoComplete="off"
-          />
-          {copilotTeachingBubbleVisible && (
-            <TeachingBubble
-              calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
-              target="#naturalLanguageInput"
-              hasCloseButton={true}
-              closeButtonAriaLabel="Close"
-              onDismiss={toggleCopilotTeachingBubbleVisible}
-              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();
-                }}
-                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()}
-          />
-          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
-          {showSamplePrompts && (
-            <Callout
-              styles={{ root: { minWidth: 400 } }}
-              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={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={{ marginTop: 8, marginBottom: 24 }}>
-          <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">
-              Read preview terms
-            </Link>
-            {showErrorMessageBar && (
-              <MessageBar messageBarType={MessageBarType.error}>
-                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" }} horizontal verticalAlign="center">
-            <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
-            {showCallout && !hideFeedbackModalForLikedQueries && (
-              <Callout
-                style={{ padding: 8 }}
-                target="#likeBtn"
-                onDismiss={() => {
-                  setShowCallout(false);
-                  SubmitFeedback({
-                    params: {
-                      generatedQuery: generatedQuery,
-                      likeQuery: likeQuery,
-                      description: "",
-                      userPrompt: userPrompt,
-                    },
-                    explorer: explorer,
-                  });
-                }}
-                directionalHint={DirectionalHint.topCenter}
-              >
-                <Text>
-                  Thank you. Need to give{" "}
-                  <Link
-                    onClick={() => {
-                      setShowCallout(false);
-                      useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
-                    }}
-                  >
-                    more feedback?
-                  </Link>
-                </Text>
-              </Callout>
-            )}
-            <IconButton
-              id="likeBtn"
-              style={{ marginLeft: 20 }}
-              iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
-              onClick={() => {
-                setShowCallout(!likeQuery);
-                setLikeQuery(!likeQuery);
-                if (dislikeQuery) {
-                  setDislikeQuery(!dislikeQuery);
-                }
-              }}
-            />
-            <IconButton
-              style={{ margin: "0 10px" }}
-              iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
-              onClick={() => {
-                if (!dislikeQuery) {
-                  useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
-                  setLikeQuery(false);
-                }
-                setDislikeQuery(!dislikeQuery);
-                setShowCallout(false);
-              }}
-            />
-            <Separator vertical style={{ color: "#EDEBE9" }} />
-            <CommandBarButton
-              onClick={copyGeneratedCode}
-              iconProps={{ iconName: "Copy" }}
-              style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-            >
-              Copy code
-            </CommandBarButton>
-            <CommandBarButton
-              onClick={() => {
-                setShowDeletePopup(true);
-              }}
-              iconProps={{ iconName: "Delete" }}
-              style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-            >
-              Delete code
-            </CommandBarButton>
-          </Stack>
+        {copilotActive && (
+          <QueryCopilotPromptbar explorer={explorer} toggleCopilot={toggleCopilot}></QueryCopilotPromptbar>
        )}
-
        <Stack className="tabPaneContentContainer">
-          <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
+          <SplitterLayout percentage={true} vertical={true} primaryIndex={0} primaryMinSize={30} secondaryMinSize={70}>
            <EditorReact
              language={"sql"}
              content={query}
@@ -592,18 +106,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
            <QueryCopilotResults />
          </SplitterLayout>
        </Stack>
-        <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"} />
-        {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
-        {query !== "" && query.trim().length !== 0 && (
-          <DeletePopup
-            showDeletePopup={showDeletePopup}
-            setShowDeletePopup={setShowDeletePopup}
-            setQuery={setQuery}
-            clearFeedback={clearFeedback}
-            showFeedbackBar={setShowFeedbackBar}
-          />
-        )}
-        <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
      </div>
    </Stack>
  );
--- a/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts
+++ b/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts
@@ -21,6 +21,7 @@ import { userContext } from "UserContext";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTabs } from "hooks/useTabs";
+import * as StringUtility from "../../../Shared/StringUtility";

 export const SendQueryRequest = async ({
  userPrompt,
@@ -184,15 +185,20 @@ export const QueryDocumentsPerPage = async (
      correlationId: useQueryCopilot.getState().correlationId,
    });
  } catch (error) {
+    const isCopilotActive = StringUtility.toBoolean(
+      localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotToggleStatus`),
+    );
    const errorMessage = getErrorMessage(error);
    traceFailure(Action.ExecuteQueryGeneratedFromQueryCopilot, {
      correlationId: useQueryCopilot.getState().correlationId,
      errorMessage: errorMessage,
    });
-    useQueryCopilot.getState().setErrorMessage(errorMessage);
    handleError(errorMessage, "executeQueryCopilotTab");
    useTabs.getState().setIsQueryErrorThrown(true);
-    useQueryCopilot.getState().setShowErrorMessageBar(true);
+    if (isCopilotActive) {
+      useQueryCopilot.getState().setErrorMessage(errorMessage);
+      useQueryCopilot.getState().setShowErrorMessageBar(true);
+    }
  } finally {
    useQueryCopilot.getState().setIsExecuting(false);
    useTabs.getState().setIsTabExecuting(false);
--- a/src/Explorer/QueryCopilot/snapshots/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/snapshots/QueryCopilotTab.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
  className="tab-pane"
  style={
    Object {
-      "padding": 24,
      "width": "100%",
    }
  }
@@ -18,103 +17,37 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
      }
    }
  >
-    <Stack
-      horizontal={true}
-      verticalAlign="center"
-    >
-      <Image
-        src={Object {}}
-        style={
-          Object {
-            "height": 24,
-            "width": 24,
-          }
-        }
-      />
-      <Text
-        style={
-          Object {
-            "fontSize": 16,
-            "fontWeight": 600,
-            "marginLeft": 8,
-          }
-        }
-      >
-        Copilot
-      </Text>
-    </Stack>
-    <Stack
-      horizontal={true}
-      style={
-        Object {
-          "marginTop": 16,
-          "position": "relative",
-          "width": "100%",
-        }
-      }
-      verticalAlign="center"
-    >
-      <StyledTextFieldBase
-        autoComplete="off"
-        disabled={false}
-        id="naturalLanguageInput"
-        onChange={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "lineHeight": 30,
-          }
-        }
-        styles={
-          Object {
-            "root": Object {
-              "width": "95%",
+    <QueryCopilotPromptbar
+      explorer={
+        Explorer {
+          "_isInitializingNotebooks": false,
+          "_resetNotebookWorkspace": [Function],
+          "isFixedCollectionWithSharedThroughputSupported": [Function],
+          "isTabsContentExpanded": [Function],
+          "onRefreshDatabasesKeyPress": [Function],
+          "onRefreshResourcesClick": [Function],
+          "phoenixClient": PhoenixClient {
+            "armResourceId": undefined,
+            "retryOptions": Object {
+              "maxTimeout": 5000,
+              "minTimeout": 5000,
+              "retries": 3,
            },
-          }
-        }
-        value=""
-      />
-      <CustomizedIconButton
-        disabled={true}
-        iconProps={
-          Object {
-            "iconName": "Send",
-          }
-        }
-        onClick={[Function]}
-        style={
-          Object {
-            "marginLeft": 8,
-          }
-        }
-      />
-    </Stack>
-    <Stack
-      style={
-        Object {
-          "marginBottom": 24,
-          "marginTop": 8,
+          },
+          "provideFeedbackEmail": [Function],
+          "queriesClient": QueriesClient {
+            "container": [Circular],
+          },
+          "refreshNotebookList": [Function],
+          "resourceTree": ResourceTreeAdapter {
+            "container": [Circular],
+            "copyNotebook": [Function],
+            "parameters": [Function],
+          },
        }
      }
-    >
-      <Text
-        style={
-          Object {
-            "fontSize": 12,
-          }
-        }
-      >
-        AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
-         
-        <StyledLinkBase
-          href="https://aka.ms/cdb-copilot-preview-terms"
-          target="_blank"
-        >
-          Read preview terms
-        </StyledLinkBase>
-      </Text>
-    </Stack>
+      toggleCopilot={[Function]}
+    />
    <Stack
      className="tabPaneContentContainer"
    >
@@ -123,10 +56,10 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
        onDragEnd={null}
        onDragStart={null}
        onSecondaryPaneSizeChange={null}
-        percentage={false}
+        percentage={true}
        primaryIndex={0}
-        primaryMinSize={100}
-        secondaryMinSize={200}
+        primaryMinSize={30}
+        secondaryMinSize={70}
        vertical={true}
      >
        <EditorReact
@@ -142,20 +75,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
        <QueryCopilotResults />
      </t>
    </Stack>
-    <WelcomeModal
-      visible={true}
-    />
-    <DeletePopup
-      clearFeedback={[Function]}
-      setQuery={[Function]}
-      setShowDeletePopup={[Function]}
-      showDeletePopup={false}
-      showFeedbackBar={[Function]}
-    />
-    <CopyPopup
-      setShowCopyPopup={[Function]}
-      showCopyPopup={false}
-    />
  </div>
 </Stack>
 `;
--- a/src/Explorer/Tabs/DocumentsTab.html
+++ b/src/Explorer/Tabs/DocumentsTab.html
@@ -98,7 +98,7 @@
            <button
              class="filterbtnstyle queryButton"
              data-bind="
-                                click: refreshDocumentsGrid,
+                                click: refreshDocumentsGrid.bind($data, true),
                                enable: applyFilterButton.enabled"
              aria-label="Apply filter"
              tabindex="0"
@@ -176,7 +176,7 @@
                  <img
                    class="refreshcol"
                    src="/refresh-cosmos.svg"
-                    data-bind="click: refreshDocumentsGrid"
+                    data-bind="click: refreshDocumentsGrid.bind($data, false)"
                    alt="Refresh documents"
                    tabindex="0"
                  />
@@ -209,7 +209,10 @@
          </table>
        </div>
        <div class="loadMore">
-          <a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
+          <a
+            role="button"
+            data-bind="click: loadNextPage.bind($data, false), event: { keypress: onLoadMoreKeyInput }"
+            tabindex="0"
            >Load more</a
          >
        </div>
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -1,12 +1,15 @@
-import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import * as ko from "knockout";
 import Q from "q";
+import { format } from "react-string-format";
+import { QueryConstants } from "Shared/Constants";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
-import DiscardIcon from "../../../images/discard.svg";
 import NewDocumentIcon from "../../../images/NewDocument.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
 import UploadIcon from "../../../images/Upload_16x16.svg";
+import DiscardIcon from "../../../images/discard.svg";
+import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
 import {
  DocumentsGridMetrics,
@@ -14,15 +17,15 @@ import {
  QueryCopilotSampleContainerId,
  QueryCopilotSampleDatabaseId,
 } from "../../Common/Constants";
+import editable from "../../Common/EditableUtility";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import * as HeadersUtility from "../../Common/HeadersUtility";
+import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
 import { readDocument } from "../../Common/dataAccess/readDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
@@ -30,6 +33,7 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import * as QueryUtils from "../../Utils/QueryUtils";
+import { extractPartitionKeyValues } from "../../Utils/QueryUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
@@ -79,6 +83,7 @@ export default class DocumentsTab extends TabsBase {
  private _resourceTokenPartitionKey: string;
  private _isQueryCopilotSampleContainer: boolean;
  private queryAbortController: AbortController;
+  private cancelQueryTimeoutID: NodeJS.Timeout;

  constructor(options: ViewModels.DocumentsTabOptions) {
    super(options);
@@ -346,6 +351,22 @@ export default class DocumentsTab extends TabsBase {
    return true;
  }

+  /**
+   * Query first page of documents
+   * Select and query first document and display content
+   */
+  private async autoPopulateContent(applyFilterButtonPressed?: boolean) {
+    // reset iterator
+    this._documentsIterator = this.createIterator();
+    // load documents
+    await this.loadNextPage(applyFilterButtonPressed);
+
+    // Select first document and load content
+    if (this.documentIds().length > 0) {
+      this.documentIds()[0].click();
+    }
+  }
+
  public onShowFilterClick(): Q.Promise<any> {
    this.isFilterCreated(true);
    this.isFilterExpanded(true);
@@ -375,15 +396,14 @@ export default class DocumentsTab extends TabsBase {
    return true;
  };

-  public async refreshDocumentsGrid(): Promise<void> {
+  public async refreshDocumentsGrid(applyFilterButtonPressed?: boolean): Promise<void> {
    // clear documents grid
    this.documentIds([]);
-
    try {
      // reset iterator
      this._documentsIterator = this.createIterator();
      // load documents
-      await this.loadNextPage();
+      await this.autoPopulateContent(applyFilterButtonPressed);
      // collapse filter
      this.appliedFilter(this.filterContent());
      this.isFilterExpanded(false);
@@ -406,6 +426,11 @@ export default class DocumentsTab extends TabsBase {
    this.queryAbortController.abort();
  }

+  /**
+   * TODO Doesn't seem to be used: remove?
+   * @param clickedDocumentId
+   * @returns
+   */
  public onDocumentIdClick(clickedDocumentId: DocumentId): Q.Promise<any> {
    if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
      return Q();
@@ -455,7 +480,7 @@ export default class DocumentsTab extends TabsBase {
          const value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
          this.selectedDocumentContent.setBaseline(value);
          this.initialDocumentContent(value);
-          const partitionKeyValueArray = extractPartitionKey(
+          const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
            savedDocument,
            this.partitionKey as PartitionKeyDefinition,
          );
@@ -506,7 +531,10 @@ export default class DocumentsTab extends TabsBase {
    const selectedDocumentId = this.selectedDocumentId();
    const documentContent = JSON.parse(this.selectedDocumentContent());

-    const partitionKeyValueArray = extractPartitionKey(documentContent, this.partitionKey as PartitionKeyDefinition);
+    const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
+      documentContent,
+      this.partitionKey as PartitionKeyDefinition,
+    );
    selectedDocumentId.partitionKeyValue = partitionKeyValueArray;

    this.isExecutionError(false);
@@ -624,8 +652,7 @@ export default class DocumentsTab extends TabsBase {

    if (!this._documentsIterator) {
      try {
-        this._documentsIterator = this.createIterator();
-        await this.loadNextPage();
+        await this.autoPopulateContent();
      } catch (error) {
        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
          TelemetryProcessor.traceFailure(
@@ -716,9 +743,35 @@ export default class DocumentsTab extends TabsBase {
    this.initDocumentEditor(documentId, content);
  }

-  public loadNextPage(): Q.Promise<any> {
+  public loadNextPage(applyFilterButtonClicked?: boolean): Q.Promise<any> {
    this.isExecuting(true);
    this.isExecutionError(false);
+    let automaticallyCancelQueryAfterTimeout: boolean;
+    if (applyFilterButtonClicked && this.queryTimeoutEnabled()) {
+      const queryTimeout: number = LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout);
+      automaticallyCancelQueryAfterTimeout = LocalStorageUtility.getEntryBoolean(
+        StorageKey.AutomaticallyCancelQueryAfterTimeout,
+      );
+      const cancelQueryTimeoutID: NodeJS.Timeout = setTimeout(() => {
+        if (this.isExecuting()) {
+          if (automaticallyCancelQueryAfterTimeout) {
+            this.queryAbortController.abort();
+          } else {
+            useDialog
+              .getState()
+              .showOkCancelModalDialog(
+                QueryConstants.CancelQueryTitle,
+                format(QueryConstants.CancelQuerySubTextTemplate, QueryConstants.CancelQueryTimeoutThresholdReached),
+                "Yes",
+                () => this.queryAbortController.abort(),
+                "No",
+                undefined,
+              );
+          }
+        }
+      }, queryTimeout);
+      this.cancelQueryTimeoutID = cancelQueryTimeoutID;
+    }
    return this._loadNextPageInternal()
      .then(
        (documentsIdsResponse = []) => {
@@ -774,7 +827,15 @@ export default class DocumentsTab extends TabsBase {
          }
        },
      )
-      .finally(() => this.isExecuting(false));
+      .finally(() => {
+        this.isExecuting(false);
+        if (applyFilterButtonClicked && this.queryTimeoutEnabled()) {
+          clearTimeout(this.cancelQueryTimeoutID);
+          if (!automaticallyCancelQueryAfterTimeout) {
+            useDialog.getState().closeDialog();
+          }
+        }
+      });
  }

  public onLoadMoreKeyInput = (source: any, event: KeyboardEvent): void => {
@@ -952,4 +1013,8 @@ export default class DocumentsTab extends TabsBase {
        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
    };
  }
+
+  private queryTimeoutEnabled(): boolean {
+    return !this.isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled);
+  }
 }
--- a/src/Explorer/Tabs/MongoDocumentsTab.ts
+++ b/src/Explorer/Tabs/MongoDocumentsTab.ts
@@ -1,4 +1,5 @@
-import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
+import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
+import { extractPartitionKeyValues } from "Utils/QueryUtils";
 import * as ko from "knockout";
 import Q from "q";
 import * as Constants from "../../Common/Constants";
@@ -88,7 +89,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
    )
      .then(
        (savedDocument: any) => {
-          let partitionKeyArray = extractPartitionKey(
+          const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
            savedDocument,
            this._getPartitionKeyDefinition() as PartitionKeyDefinition,
          );
@@ -150,7 +151,7 @@ export default class MongoDocumentsTab extends DocumentsTab {

          this.documentIds().forEach((documentId: DocumentId) => {
            if (documentId.rid === updatedDocument._rid) {
-              const partitionKeyArray = extractPartitionKey(
+              const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
                updatedDocument,
                this._getPartitionKeyDefinition() as PartitionKeyDefinition,
              );
@@ -289,7 +290,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
  }

  private _hasShardKeySpecified(document: any): boolean {
-    return Boolean(extractPartitionKey(document, this._getPartitionKeyDefinition() as PartitionKeyDefinition));
+    return Boolean(extractPartitionKeyValues(document, this._getPartitionKeyDefinition() as PartitionKeyDefinition));
  }

  private _getPartitionKeyDefinition(): DataModels.PartitionKey {
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -1,12 +1,16 @@
 import { FeedOptions } from "@azure/cosmos";
+import { useDialog } from "Explorer/Controls/Dialog";
 import { OnExecuteQueryClick } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { QueryCopilotResults } from "Explorer/QueryCopilot/Shared/QueryCopilotResults";
 import { QueryCopilotSidebar } from "Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
+import { QueryConstants } from "Shared/Constants";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import React, { Fragment } from "react";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
+import { format } from "react-string-format";
 import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
 import CancelQueryIcon from "../../../../images/Entity_cancel.svg";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
@@ -80,6 +84,7 @@ interface IQueryTabStates {
  isExecuting: boolean;
  showCopilotSidebar: boolean;
  queryCopilotGeneratedQuery: string;
+  cancelQueryTimeoutID: NodeJS.Timeout;
 }

 export default class QueryTabComponent extends React.Component<IQueryTabComponentProps, IQueryTabStates> {
@@ -107,13 +112,13 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
      isExecuting: false,
      showCopilotSidebar: useQueryCopilot.getState().showCopilotSidebar,
      queryCopilotGeneratedQuery: useQueryCopilot.getState().query,
+      cancelQueryTimeoutID: undefined,
    };
    this.isCloseClicked = false;
    this.splitterId = this.props.tabId + "_splitter";
    this.queryEditorId = `queryeditor${this.props.tabId}`;
    this.isPreferredApiMongoDB = this.props.isPreferredApiMongoDB;
    this.isCopilotTabActive = QueryCopilotSampleDatabaseId === this.props.collection.databaseId;
-
    this.executeQueryButton = {
      enabled: !!this.state.sqlQueryEditorContent && this.state.sqlQueryEditorContent.length > 0,
      visible: true,
@@ -250,6 +255,34 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    this.setState({
      isExecuting: true,
    });
+    let automaticallyCancelQueryAfterTimeout: boolean;
+    if (this.queryTimeoutEnabled()) {
+      const queryTimeout: number = LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout);
+      automaticallyCancelQueryAfterTimeout = LocalStorageUtility.getEntryBoolean(
+        StorageKey.AutomaticallyCancelQueryAfterTimeout,
+      );
+      const cancelQueryTimeoutID: NodeJS.Timeout = setTimeout(() => {
+        if (this.state.isExecuting) {
+          if (automaticallyCancelQueryAfterTimeout) {
+            this.queryAbortController.abort();
+          } else {
+            useDialog
+              .getState()
+              .showOkCancelModalDialog(
+                QueryConstants.CancelQueryTitle,
+                format(QueryConstants.CancelQuerySubTextTemplate, QueryConstants.CancelQueryTimeoutThresholdReached),
+                "Yes",
+                () => this.queryAbortController.abort(),
+                "No",
+                undefined,
+              );
+          }
+        }
+      }, queryTimeout);
+      this.setState({
+        cancelQueryTimeoutID,
+      });
+    }
    useCommandBar.getState().setContextButtons(this.getTabsButtons());

    try {
@@ -273,7 +306,14 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
      this.props.tabsBaseInstance.isExecuting(false);
      this.setState({
        isExecuting: false,
+        cancelQueryTimeoutID: undefined,
      });
+      if (this.queryTimeoutEnabled()) {
+        clearTimeout(this.state.cancelQueryTimeoutID);
+        if (!automaticallyCancelQueryAfterTimeout) {
+          useDialog.getState().closeDialog();
+        }
+      }
      this.togglesOnFocus();
      useCommandBar.getState().setContextButtons(this.getTabsButtons());
    }
@@ -405,6 +445,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
    return this.state.sqlQueryEditorContent;
  }

+  private queryTimeoutEnabled(): boolean {
+    return !this.isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled);
+  }
+
  private unsubscribeCopilotSidebar: () => void;

  componentDidMount(): void {
--- a/src/Explorer/Tree/ConflictId.ts
+++ b/src/Explorer/Tree/ConflictId.ts
@@ -1,4 +1,4 @@
-import { extractPartitionKey } from "@azure/cosmos";
+import { extractPartitionKeyValues } from "Utils/QueryUtils";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import { readDocument } from "../../Common/dataAccess/readDocument";
@@ -42,7 +42,7 @@ export default class ConflictId {
    }
    this.partitionKeyProperty = container && container.partitionKeyProperty;
    this.partitionKey = container && container.partitionKey;
-    this.partitionKeyValue = extractPartitionKey(this.parsedContent, this.partitionKey as any);
+    this.partitionKeyValue = extractPartitionKeyValues(this.parsedContent, this.partitionKey as any);
    this.stringPartitionKeyValue = this.getPartitionKeyValueAsString();
    this.id = ko.observable(data.id);
    this.isDirty = ko.observable(false);
--- a/src/Platform/Hosted/Components/ConnectExplorer.test.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.test.tsx
@@ -1,6 +1,8 @@
 jest.mock("../../../hooks/useDirectories");
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { updateUserContext, userContext } from "UserContext";
 import React from "react";
 import { ConnectExplorer } from "./ConnectExplorer";

@@ -16,3 +18,24 @@ it("shows the connect form", () => {
  fireEvent.click(screen.getByText("Connect to your account with connection string"));
  expect(screen.queryByPlaceholderText("Please enter a connection string")).toBeDefined();
 });
+
+it("hides the connection string link when feature.disableConnectionStringLogin is true", () => {
+  const connectionString = "fakeConnectionString";
+  const login = jest.fn();
+  const setConnectionString = jest.fn();
+  const setEncryptedToken = jest.fn();
+  const setAuthType = jest.fn();
+  const oldFeatures = userContext.features;
+
+  const params = new URLSearchParams({
+    "feature.disableConnectionStringLogin": "true",
+  });
+
+  const testFeatures = extractFeatures(params);
+  updateUserContext({ features: testFeatures });
+
+  render(<ConnectExplorer {...{ login, setEncryptedToken, setAuthType, connectionString, setConnectionString }} />);
+  expect(screen.queryByPlaceholderText("Connect to your account with connection string")).toBeNull();
+
+  updateUserContext({ features: oldFeatures });
+});
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -1,4 +1,5 @@
 import { useBoolean } from "@fluentui/react-hooks";
+import { userContext } from "UserContext";
 import * as React from "react";
 import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
 import ErrorImage from "../../../../images/error.svg";
@@ -37,6 +38,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
  setConnectionString,
 }: Props) => {
  const [isFormVisible, { setTrue: showForm }] = useBoolean(false);
+  const enableConnectionStringLogin = !userContext.features.disableConnectionStringLogin;

  return (
    <div id="connectExplorer" className="connectExplorerContainer" style={{ display: "flex" }}>
@@ -46,7 +48,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
            <img src={ConnectImage} alt="Azure Cosmos DB" />
          </p>
          <p className="welcomeText">Welcome to Azure Cosmos DB</p>
-          {isFormVisible ? (
+          {isFormVisible && enableConnectionStringLogin ? (
            <form
              id="connectWithConnectionString"
              onSubmit={async (event) => {
@@ -89,9 +91,11 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
          ) : (
            <div id="connectWithAad">
              <input className="filterbtnstyle" type="button" value="Sign In" onClick={login} />
-              <p className="switchConnectTypeText" onClick={showForm}>
-                Connect to your account with connection string
-              </p>
+              {enableConnectionStringLogin && (
+                <p className="switchConnectTypeText" onClick={showForm}>
+                  Connect to your account with connection string
+                </p>
+              )}
            </div>
          )}
        </div>
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -41,6 +41,7 @@ export type Features = {
  readonly enableCopilotFullSchema: boolean;
  readonly copilotChatFixedMonacoEditorHeight: boolean;
  readonly enablePriorityBasedExecution: boolean;
+  readonly disableConnectionStringLogin: boolean;

  // can be set via both flight and feature flag
  autoscaleDefault: boolean;
@@ -114,6 +115,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
    enableCopilotFullSchema: "true" === get("enablecopilotfullschema", "true"),
    copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
    enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
+    disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
  };
 }

--- a/src/Shared/Constants.ts
+++ b/src/Shared/Constants.ts
@@ -208,3 +208,9 @@ export class FreeTierLimits {
  public static RU: number = 1000;
  public static Storage: number = 25;
 }
+
+export class QueryConstants {
+  public static readonly CancelQueryTitle: string = "Cancel query";
+  public static readonly CancelQuerySubTextTemplate: string = "{0} Do you want to cancel this query?";
+  public static readonly CancelQueryTimeoutThresholdReached: string = "The query timeout threshold has been reached.";
+}
--- a/src/Shared/ExplorerSettings.ts
+++ b/src/Shared/ExplorerSettings.ts
@@ -1,3 +1,4 @@
+import { PriorityLevel } from "@azure/cosmos";
 import * as Constants from "../Common/Constants";
 import { LocalStorageUtility, StorageKey } from "./StorageUtility";

@@ -6,7 +7,7 @@ export const createDefaultSettings = () => {
  LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, Constants.Queries.itemsPerPage);
  LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "true");
  LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, Constants.Queries.DefaultMaxDegreeOfParallelism);
-  LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, Constants.PriorityLevel.Default);
+  LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, PriorityLevel.Low);
 };

 export const hasSettingsDefined = (): boolean => {
@@ -19,6 +20,6 @@ export const hasSettingsDefined = (): boolean => {

 export const ensurePriorityLevel = () => {
  if (!LocalStorageUtility.hasItem(StorageKey.PriorityLevel)) {
-    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, Constants.PriorityLevel.Default);
+    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, PriorityLevel.Low);
  }
 };
--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -4,6 +4,9 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
  ActualItemPerPage,
+  QueryTimeoutEnabled,
+  QueryTimeout,
+  AutomaticallyCancelQueryAfterTimeout,
  ContainerPaginationEnabled,
  CustomItemPerPage,
  DatabaseAccountId,
--- a/src/Utils/PriorityBasedExecutionUtils.test.ts
+++ b/src/Utils/PriorityBasedExecutionUtils.test.ts
@@ -1,7 +1,7 @@
-import * as PriorityBasedExecutionUtils from "./PriorityBasedExecutionUtils";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { PriorityLevel } from "../Common/Constants";
 import * as Cosmos from "@azure/cosmos";
+import { PriorityLevel } from "@azure/cosmos";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import * as PriorityBasedExecutionUtils from "./PriorityBasedExecutionUtils";

 describe("Priority execution utility", () => {
  it("check default priority level is Low", () => {
--- a/src/Utils/PriorityBasedExecutionUtils.ts
+++ b/src/Utils/PriorityBasedExecutionUtils.ts
@@ -1,6 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
+import { Constants, PriorityLevel } from "@azure/cosmos";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { PriorityLevel } from "../Common/Constants";
 import { userContext } from "../UserContext";

 export function isFeatureEnabled(): boolean {
@@ -21,18 +21,18 @@ export function isRelevantRequest(requestContext: Cosmos.RequestContext): boolea
 }

 export function getPriorityLevel(): PriorityLevel {
-  const priorityLevel = LocalStorageUtility.getEntryString(StorageKey.PriorityLevel);
-  if (priorityLevel && Object.values(PriorityLevel).includes(priorityLevel)) {
+  const priorityLevel: string = LocalStorageUtility.getEntryString(StorageKey.PriorityLevel);
+  if (priorityLevel) {
    return priorityLevel as PriorityLevel;
  } else {
-    return PriorityLevel.Default;
+    return PriorityLevel.Low;
  }
 }

-export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
+export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, undefined, next) => {
  if (isRelevantRequest(requestContext)) {
    const priorityLevel: PriorityLevel = getPriorityLevel();
-    requestContext.headers["x-ms-cosmos-priority-level"] = priorityLevel as string;
+    requestContext.headers[Constants.HttpHeaders.PriorityLevel] = priorityLevel;
  }
  return next(requestContext);
 };
--- a/src/Utils/QueryUtils.test.ts
+++ b/src/Utils/QueryUtils.test.ts
@@ -1,8 +1,10 @@
+import { PartitionKey, PartitionKeyDefinition, PartitionKeyKind } from "@azure/cosmos";
 import * as Q from "q";
 import * as sinon from "sinon";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import * as QueryUtils from "./QueryUtils";
+import { extractPartitionKeyValues } from "./QueryUtils";

 describe("Query Utils", () => {
  const generatePartitionKeyForPath = (path: string): DataModels.PartitionKey => {
@@ -94,4 +96,69 @@ describe("Query Utils", () => {
      expect(queryStub.getCall(0).args[0]).toBe(0);
    });
  });
+
+  describe("extractPartitionKey", () => {
+    const documentContent = {
+      "Volcano Name": "Adams",
+      Country: "United States",
+      Region: "US-Washington",
+      Location: {
+        type: "Point",
+        coordinates: [-121.49, 46.206],
+      },
+      Elevation: 3742,
+      Type: "Stratovolcano",
+      Status: "Tephrochronology",
+      "Last Known Eruption": "Last known eruption from A.D. 1-1499, inclusive",
+      id: "9e3c494e-8367-3f50-1f56-8c6fcb961363",
+      _rid: "xzo0AJRYUxUFAAAAAAAAAA==",
+      _self: "dbs/xzo0AA==/colls/xzo0AJRYUxU=/docs/xzo0AJRYUxUFAAAAAAAAAA==/",
+      _etag: '"ce00fa43-0000-0100-0000-652840440000"',
+      _attachments: "attachments/",
+      _ts: 1697136708,
+    };
+
+    it("should extract single partition key value", () => {
+      const singlePartitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.Hash,
+        paths: ["/Elevation"],
+      };
+
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(
+        documentContent,
+        singlePartitionKeyDefinition,
+      );
+      expect(partitionKeyValues.length).toBe(1);
+      expect(partitionKeyValues[0]).toEqual(3742);
+    });
+
+    it("should extract two partition key values", () => {
+      const multiPartitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.MultiHash,
+        paths: ["/Type", "/Status"],
+      };
+      const expectedPartitionKeyValues: string[] = ["Stratovolcano", "Tephrochronology"];
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(
+        documentContent,
+        multiPartitionKeyDefinition,
+      );
+      expect(partitionKeyValues.length).toBe(2);
+      expect(expectedPartitionKeyValues).toContain(documentContent["Type"]);
+      expect(expectedPartitionKeyValues).toContain(documentContent["Status"]);
+    });
+
+    it("should extract no partition key values", () => {
+      const singlePartitionKeyDefinition: PartitionKeyDefinition = {
+        kind: PartitionKeyKind.Hash,
+        paths: ["/InvalidPartitionKeyPath"],
+      };
+
+      const partitionKeyValues: PartitionKey[] = extractPartitionKeyValues(
+        documentContent,
+        singlePartitionKeyDefinition,
+      );
+
+      expect(partitionKeyValues.length).toBe(0);
+    });
+  });
 });
--- a/src/Utils/QueryUtils.ts
+++ b/src/Utils/QueryUtils.ts
@@ -1,3 +1,4 @@
+import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";

@@ -82,3 +83,22 @@ export const queryPagesUntilContentPresent = async (

  return await doRequest(firstItemIndex);
 };
+
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+export const extractPartitionKeyValues = (
+  documentContent: any,
+  partitionKeyDefinition: PartitionKeyDefinition,
+): PartitionKey[] => {
+  if (!partitionKeyDefinition.paths || partitionKeyDefinition.paths.length === 0) {
+    return undefined;
+  }
+
+  const partitionKeyValues: PartitionKey[] = [];
+  partitionKeyDefinition.paths.forEach((partitionKeyPath: string) => {
+    const partitionKeyPathWithoutSlash: string = partitionKeyPath.substring(1);
+    if (documentContent[partitionKeyPathWithoutSlash]) {
+      partitionKeyValues.push(documentContent[partitionKeyPathWithoutSlash]);
+    }
+  });
+  return partitionKeyValues;
+};
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -2,15 +2,13 @@ import { createUri } from "Common/UrlUtility";
 import { FabricMessage } from "Contracts/FabricContract";
 import Explorer from "Explorer/Explorer";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import { fetchEncryptedToken } from "Platform/Hosted/Components/ConnectExplorer";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
-import { fetchAccessData } from "hooks/usePortalAccessToken";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
 import { AuthType } from "../AuthType";
 import { AccountKind, Flights } from "../Common/Constants";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendMessage, sendReadyMessage } from "../Common/MessageHandler";
+import { handleCachedDataMessage, sendMessage, sendReadyMessage } from "../Common/MessageHandler";
 import { Platform, configContext, updateConfigContext } from "../ConfigContext";
 import { ActionType, DataExplorerAction, TabKind } from "../Contracts/ActionContracts";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
@@ -107,23 +105,7 @@ async function configureFabric(): Promise<Explorer> {

        switch (data.type) {
          case "initialize": {
-            // TODO For now, retrieve info from session storage. Replace with info injected into Data Explorer
-            const connectionString = data.connectionString ?? sessionStorage.getItem("connectionString");
-            if (!connectionString) {
-              console.error("No connection string found in session storage");
-              return undefined;
-            }
-            const encryptedToken = await fetchEncryptedToken(connectionString);
-            // TODO Duplicated from useTokenMetadata
-            const encryptedTokenMetadata = await fetchAccessData(encryptedToken);
-
-            const hostedConfig: EncryptedToken = {
-              authType: AuthType.EncryptedToken,
-              encryptedToken,
-              encryptedTokenMetadata,
-            };
-
-            explorer = await configureWithEncryptedToken(hostedConfig);
+            explorer = await configureWithFabric(data.message.endpoint);
            resolve(explorer);
            break;
          }
@@ -166,6 +148,10 @@ async function configureFabric(): Promise<Explorer> {

            break;
          }
+          case "authorizationToken": {
+            handleCachedDataMessage(data);
+            break;
+          }
          default:
            console.error(`Unknown Fabric message type: ${JSON.stringify(data)}`);
            break;
@@ -315,6 +301,25 @@ function configureHostedWithResourceToken(config: ResourceToken): Explorer {
  return explorer;
 }

+function configureWithFabric(documentEndpoint: string): Explorer {
+  updateUserContext({
+    authType: AuthType.ConnectionString,
+    databaseAccount: {
+      id: "",
+      location: "",
+      type: "",
+      name: "Mounted",
+      kind: AccountKind.Default,
+      properties: {
+        documentEndpoint,
+      },
+    },
+  });
+  const explorer = new Explorer();
+  setTimeout(() => explorer.refreshAllDatabases(), 0);
+  return explorer;
+}
+
 function configureWithEncryptedToken(config: EncryptedToken): Explorer {
  const apiExperience = DefaultExperienceUtility.getDefaultExperienceFromApiKind(config.encryptedTokenMetadata.apiKind);
  updateUserContext({
--- a/src/hooks/useQueryCopilot.ts
+++ b/src/hooks/useQueryCopilot.ts
@@ -128,7 +128,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({

  openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) =>
    set({ generatedQuery, likeQuery, userPrompt, showFeedbackModal: true }),
-  closeFeedbackModal: () => set({ generatedQuery: "", likeQuery: false, userPrompt: "", showFeedbackModal: false }),
+  closeFeedbackModal: () => set({ showFeedbackModal: false }),
  setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) =>
    set({ hideFeedbackModalForLikedQueries }),
  refreshCorrelationId: () => set({ correlationId: guid() }),
--- a/web.config
+++ b/web.config
@@ -6,6 +6,15 @@
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
    </staticContent>
    <rewrite>
+      <rules>
+        <rule name="AAD-Redirect" stopProcessing="true">
+          <match url="^aad" ignoreCase="true"/>
+          <conditions>
+            <add input="{HTTP_HOST}" pattern="^cosmos.azure.com" />
+          </conditions>
+          <action type="Redirect" url="/?feature.enableAadDataPlane=true&amp;feature.disableConnectionStringLogin=true" redirectType="Permanent" />
+        </rule>
+      </rules>
      <outboundRules>
        <rule name="Strict-Transport-Security" enabled="true">
          <match serverVariable="RESPONSE_Strict_Transport_Security" pattern=".*" />
Author	SHA1	Message	Date
Asier Isayas	a96f4bbb46	Merge branch 'master' of https://github.com/Azure/cosmos-explorer into users/aisayas/pbe	2023-10-19 15:28:04 -04:00
Asier Isayas	8075ef2847	Upgrade Cosmos SDK to 4.0.0 (#1664 ) * upgrade cosmos sdk to 4.0.0 * added explicit any test * fixed package-lock.json --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-10-19 15:22:12 -04:00
Asier Isayas	063ad23bce	Merge branch 'master' of https://github.com/Azure/cosmos-explorer into users/aisayas/pbe	2023-10-19 13:49:55 -04:00
Asier Isayas	eacbeae417	set default priority level to Low	2023-10-19 13:45:47 -04:00
Asier Isayas	94158504a8	Cancel query timeout (#1651 ) * cancel query option * query timeout * run prettier * removed comments * fixed npm run compile errors * fixed tests * fixed unit test errors * fixed unit test errors * fixed unit test errors * fixed unit test errors * fixed unit test errors * increased min timeout * added automatican cancel query option * added react string format * npm run format * added unless automatic cancellation has been enabled --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-10-19 13:21:39 -04:00
Laurent Nguyen	9b032ecae4	Turn off "New Database" for Fabric (#1663 ) * Turn off "New Database" for Fabric * Fix format	2023-10-18 08:30:45 +00:00
Asier Isayas	6493c985b4	fixed package-lock.json	2023-10-17 14:23:51 -04:00
Asier Isayas	569167fa10	fixed merge conflicts	2023-10-17 13:52:28 -04:00
Asier Isayas	6e267b2bba	added explicit any test	2023-10-17 12:53:52 -04:00
jawelton74	14d7677056	Add feature for disabling connection string login and enable this for aad redirect. (#1660 ) * Add redirect for /aad to /?feature.enableAadDataPlane=true * Add feature to hide the connection string login link. Enable this new feature for the aad redirect.	2023-10-16 13:18:40 -07:00
Asier Isayas	282004b09b	upgrade cosmos sdk to 4.0.0	2023-10-13 12:15:36 -04:00
sunghyunkang1111	d376a7463c	P1, P2 bug fixes for private preview (#1657 ) * P1 bug fix for private preview * Add updated snapshot files * Fix failing unit test * Fix unit tests and update snapshot	2023-10-12 21:54:01 -05:00
Laurent Nguyen	9669301d14	Remove obsolete unit test (#1655 )	2023-10-12 08:00:08 +02:00
Laurent Nguyen	dcd8d1637b	Implement retrieval of authorization token for Fabric via iframe rpc (#1647 ) * For Fabric, send message to get Authorization token from iframe parent * tokenProvider: set date header and return token * Expect account endpoint on initialize message from Fabric * Fix format --------- Co-authored-by: artrejo <artrejo@microsoft.com>	2023-10-10 12:25:58 -07:00
Laurent Nguyen	f36fccd3ef	Auto-select first item in DocumentsTab. Fix selection highlighting (#1645 ) * Auto-select first document in documentsTab * Fix style row selection by making selector more specific	2023-10-10 07:19:35 +02:00
jawelton74	8ff9a84004	Add redirect for /aad to /?feature.enableAadDataPlane=true (#1649 )	2023-10-09 11:31:36 -07:00
sunghyunkang1111	e42e24b175	Redesign copilot (#1650 ) * Add copilot toggle button * take out toggle button when closing tab * Update snapshots * Fix the prettier issue * fix prettier	2023-10-09 12:42:25 -05:00
Laurent Nguyen	44d6f29edd	Revert "For Fabric, send message to get Authorization token from iframe parent" This reverts commit `9db06af552`.	2023-10-06 14:35:30 +00:00
Laurent Nguyen	9db06af552	For Fabric, send message to get Authorization token from iframe parent	2023-10-06 14:33:46 +00:00