From 6925fa8e4e49766720137a83e3c6bff52e363b1b Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Tue, 9 Apr 2024 10:55:08 -0700
Subject: [PATCH 01/67] Replace Entra app client secret auth with OpenID
 Connect in E2E tests. (#1792)

* Use Az login with OpenID connection to get test credentials.

* Set subscription id environment variable.

* Update testExplorer and cleanup job.

* Retrieve access token in test case and pass to testExplorer.

* Add debug tracing for tests.

* Set up other mongo test to use Az CLI creds.

* Revert subscription id retrieval.

* Add CLI credentials retrieval to rest of tests.

* Fix missing imports.

* Clean up redundant code.

* Remove commented import statement.
---
 .github/workflows/ci.yml                | 14 ++++++++++++--
 .github/workflows/cleanup.yml           | 15 +++++++++++++--
 test/cassandra/container.spec.ts        |  7 +++++--
 test/graph/container.spec.ts            |  7 +++++--
 test/mongo/container.spec.ts            |  7 +++++--
 test/mongo/container32.spec.ts          |  7 +++++--
 test/selfServe/selfServeExample.spec.ts |  7 ++++++-
 test/sql/container.spec.ts              |  7 +++++--
 test/sql/resourceToken.spec.ts          | 10 +++-------
 test/tables/container.spec.ts           |  6 ++++--
 test/testExplorer/TestExplorer.ts       | 19 +------------------
 test/utils/shared.ts                    | 11 +++++++++++
 utils/cleanupDBs.js                     |  9 +++------
 13 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a53b92645..fd097a194 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -8,6 +8,9 @@ on:
   pull_request:
     branches:
       - master
+permissions:
+  id-token: write
+  contents: read
 jobs:
   codemetrics:
     runs-on: ubuntu-latest
@@ -134,7 +137,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
     strategy:
       fail-fast: false
       matrix:
@@ -145,11 +148,18 @@ jobs:
           - ./test/mongo/container.spec.ts
           - ./test/mongo/container32.spec.ts
           - ./test/selfServe/selfServeExample.spec.ts
-          # - ./test/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:
       - uses: actions/checkout@v4
+
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
       - name: Use Node.js 18.x
         uses: actions/setup-node@v4
         with:
diff --git a/.github/workflows/cleanup.yml b/.github/workflows/cleanup.yml
index 229477f0b..6698951ae 100644
--- a/.github/workflows/cleanup.yml
+++ b/.github/workflows/cleanup.yml
@@ -9,6 +9,10 @@ on:
     # Once every hour
     - cron: "0 15 * * *"
 
+permissions:
+  id-token: write
+  contents: read
+
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   # This workflow contains a single job called "build"
@@ -16,10 +20,17 @@ jobs:
     name: "Cleanup Test Database Accounts"
     runs-on: ubuntu-latest
     env:
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
     steps:
       - uses: actions/checkout@v2
+
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
       - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
diff --git a/test/cassandra/container.spec.ts b/test/cassandra/container.spec.ts
index 48acddb79..80d5df41d 100644
--- a/test/cassandra/container.spec.ts
+++ b/test/cassandra/container.spec.ts
@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
 test("Cassandra keyspace and table CRUD", async () => {
   const keyspaceId = generateUniqueName("keyspace");
   const tableId = generateUniqueName("table");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner&token=${token}`);
   await page.waitForSelector("iframe");
   const explorer = await waitForExplorer();
 
diff --git a/test/graph/container.spec.ts b/test/graph/container.spec.ts
index 3e6155f1c..e7f288da5 100644
--- a/test/graph/container.spec.ts
+++ b/test/graph/container.spec.ts
@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Graph CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   // Create new database and graph
diff --git a/test/mongo/container.spec.ts b/test/mongo/container.spec.ts
index 88a311784..baafefbbe 100644
--- a/test/mongo/container.spec.ts
+++ b/test/mongo/container.spec.ts
@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   // Create new database and collection
diff --git a/test/mongo/container32.spec.ts b/test/mongo/container32.spec.ts
index 25466e266..c71f9d0cc 100644
--- a/test/mongo/container32.spec.ts
+++ b/test/mongo/container32.spec.ts
@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   // Create new database and collection
diff --git a/test/selfServe/selfServeExample.spec.ts b/test/selfServe/selfServeExample.spec.ts
index 7e10c1ce2..3678f5b35 100644
--- a/test/selfServe/selfServeExample.spec.ts
+++ b/test/selfServe/selfServeExample.spec.ts
@@ -1,5 +1,10 @@
+import { getAzureCLICredentialsToken } from "../utils/shared";
+
 test("Self Serve", async () => {
-  await page.goto("https://localhost:1234/testExplorer.html?iframeSrc=selfServe.html");
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
+
+  await page.goto(`https://localhost:1234/testExplorer.html?iframeSrc=selfServe.html&token=${token}`);
   const handle = await page.waitForSelector("iframe");
   const frame = await handle.contentFrame();
 
diff --git a/test/sql/container.spec.ts b/test/sql/container.spec.ts
index aead57b92..a1aacfd42 100644
--- a/test/sql/container.spec.ts
+++ b/test/sql/container.spec.ts
@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
 test("SQL CRUD", async () => {
   const databaseId = generateUniqueName("db");
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us&token=${token}`);
   const explorer = await waitForExplorer();
 
   await explorer.click('[data-test="New Container"]');
diff --git a/test/sql/resourceToken.spec.ts b/test/sql/resourceToken.spec.ts
index f2e9d94ef..18228c7ed 100644
--- a/test/sql/resourceToken.spec.ts
+++ b/test/sql/resourceToken.spec.ts
@@ -1,19 +1,15 @@
 import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";
-import * as msRestNodeAuth from "@azure/ms-rest-nodeauth";
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentials } from "../utils/shared";
 jest.setTimeout(120000);
 
-const clientId = "fd8753b0-0707-4e32-84e9-2532af865fb4";
-const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
-const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
-const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"] ?? "";
 const resourceGroupName = "runners";
 
 test("Resource token", async () => {
-  const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
+  const credentials = await getAzureCLICredentials();
   const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
   const account = await armClient.databaseAccounts.get(resourceGroupName, "portal-sql-runner-west-us");
   const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, "portal-sql-runner-west-us");
diff --git a/test/tables/container.spec.ts b/test/tables/container.spec.ts
index d8daa0a16..98687d60f 100644
--- a/test/tables/container.spec.ts
+++ b/test/tables/container.spec.ts
@@ -1,15 +1,17 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 
 jest.setTimeout(120000);
 
 test("Tables CRUD", async () => {
   const tableId = generateUniqueName("table");
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-tables-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-tables-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   await page.waitForSelector('text="Querying databases"', { state: "detached" });
diff --git a/test/testExplorer/TestExplorer.ts b/test/testExplorer/TestExplorer.ts
index 684673590..a415b5bd6 100644
--- a/test/testExplorer/TestExplorer.ts
+++ b/test/testExplorer/TestExplorer.ts
@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import { ClientSecretCredential } from "@azure/identity";
 import "../../less/hostedexplorer.less";
 import { DataExplorerInputsFrame } from "../../src/Contracts/ViewModels";
 import { updateUserContext } from "../../src/UserContext";
@@ -11,29 +10,13 @@ const urlSearchParams = new URLSearchParams(window.location.search);
 const accountName = urlSearchParams.get("accountName") || "portal-sql-runner-west-us";
 const selfServeType = urlSearchParams.get("selfServeType") || "example";
 const iframeSrc = urlSearchParams.get("iframeSrc") || "explorer.html?platform=Portal&disablePortalInitCache";
-
-if (!process.env.AZURE_CLIENT_SECRET) {
-  throw new Error(
-    "process.env.AZURE_CLIENT_SECRET was not set! Set it in your .env file and restart webpack dev server",
-  );
-}
-
-// Azure SDK clients accept the credential as a parameter
-const credentials = new ClientSecretCredential(
-  process.env.AZURE_TENANT_ID,
-  process.env.AZURE_CLIENT_ID,
-  process.env.AZURE_CLIENT_SECRET,
-  {
-    authorityHost: "https://localhost:1234",
-  },
-);
+const token = urlSearchParams.get("token");
 
 console.log("Resource Group:", resourceGroup);
 console.log("Subcription: ", subscriptionId);
 console.log("Account Name: ", accountName);
 
 const initTestExplorer = async (): Promise<void> => {
-  const { token } = await credentials.getToken("https://management.azure.com//.default");
   updateUserContext({
     authorizationToken: `bearer ${token}`,
   });
diff --git a/test/utils/shared.ts b/test/utils/shared.ts
index 118736129..59ef0994c 100644
--- a/test/utils/shared.ts
+++ b/test/utils/shared.ts
@@ -1,3 +1,4 @@
+import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
 import crypto from "crypto";
 
 export function generateUniqueName(baseName = "", length = 4): string {
@@ -7,3 +8,13 @@ export function generateUniqueName(baseName = "", length = 4): string {
 export function generateDatabaseNameWithTimestamp(baseName = "db", length = 1): string {
   return `${baseName}${crypto.randomBytes(length).toString("hex")}-${Date.now()}`;
 }
+
+export async function getAzureCLICredentials(): Promise<AzureCliCredentials> {
+  return await AzureCliCredentials.create();
+}
+
+export async function getAzureCLICredentialsToken(): Promise<string> {
+  const credentials = await getAzureCLICredentials();
+  const token = (await credentials.getToken()).accessToken;
+  return token;
+}
diff --git a/utils/cleanupDBs.js b/utils/cleanupDBs.js
index 72fcfbafd..b2bbf0be8 100644
--- a/utils/cleanupDBs.js
+++ b/utils/cleanupDBs.js
@@ -2,10 +2,7 @@ const msRestNodeAuth = require("@azure/ms-rest-nodeauth");
 const { CosmosDBManagementClient } = require("@azure/arm-cosmosdb");
 const ms = require("ms");
 
-const clientId = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_ID"];
-const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
-const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
-const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"];
 const resourceGroupName = "runners";
 
 const thirtyMinutesAgo = new Date(Date.now() - 1000 * 60 * 30).getTime();
@@ -19,7 +16,7 @@ function friendlyTime(date) {
 }
 
 async function main() {
-  const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
+  const credentials = await msRestNodeAuth.AzureCliCredentials.create();
   const client = new CosmosDBManagementClient(credentials, subscriptionId);
   const accounts = await client.databaseAccounts.list(resourceGroupName);
   for (const account of accounts) {
@@ -38,7 +35,7 @@ async function main() {
     } else if (account.capabilities.find((c) => c.name === "EnableCassandra")) {
       const cassandraDatabases = await client.cassandraResources.listCassandraKeyspaces(
         resourceGroupName,
-        account.name
+        account.name,
       );
       for (const database of cassandraDatabases) {
         const timestamp = Number(database.resource._ts) * 1000;

From dfcb7719392d77852e0987141aba703cdec90b65 Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Tue, 9 Apr 2024 16:45:36 -0400
Subject: [PATCH 02/67] Activate Mongo Proxy and Cassandra Proxy in Prod
 (#1794)

* activate Mongo Proxy and Cassandra Proxy in Prod

* fix bug that blocked local mongo proxy and cassandra proxy development

* fix pr check tests

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/Common/MongoProxyClient.ts         | 11 +++++++++--
 src/Explorer/Tables/TableDataClient.ts | 13 ++++++++++---
 src/Explorer/Tabs/Tabs.tsx             |  7 ++++++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/Common/MongoProxyClient.ts b/src/Common/MongoProxyClient.ts
index 749248919..44400d874 100644
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -690,9 +690,16 @@ export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameter
 }
 
 function useMongoProxyEndpoint(api: string): boolean {
-  const activeMongoProxyEndpoints: string[] = [MongoProxyEndpoints.Development, MongoProxyEndpoints.Mpac];
+  const activeMongoProxyEndpoints: string[] = [
+    MongoProxyEndpoints.Development,
+    MongoProxyEndpoints.Mpac,
+    MongoProxyEndpoints.Prod,
+  ];
   let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-  if (userContext.databaseAccount.properties.ipRules?.length > 0) {
+  if (
+    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development &&
+    userContext.databaseAccount.properties.ipRules?.length > 0
+  ) {
     canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
   }
 
diff --git a/src/Explorer/Tables/TableDataClient.ts b/src/Explorer/Tables/TableDataClient.ts
index 097ade395..c6882bc33 100644
--- a/src/Explorer/Tables/TableDataClient.ts
+++ b/src/Explorer/Tables/TableDataClient.ts
@@ -3,6 +3,7 @@ import * as ko from "knockout";
 import Q from "q";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
+import { CassandraProxyAPIs, CassandraProxyEndpoints } from "../../Common/Constants";
 import { handleError } from "../../Common/ErrorHandlingUtils";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { createDocument } from "../../Common/dataAccess/createDocument";
@@ -19,7 +20,6 @@ import Explorer from "../Explorer";
 import * as TableConstants from "./Constants";
 import * as Entities from "./Entities";
 import * as TableEntityProcessor from "./TableEntityProcessor";
-import { CassandraProxyAPIs, CassandraProxyEndpoints } from "../../Common/Constants";
 
 export interface CassandraTableKeys {
   partitionKeys: CassandraTableKey[];
@@ -732,9 +732,16 @@ export class CassandraAPIDataClient extends TableDataClient {
   }
 
   private useCassandraProxyEndpoint(api: string): boolean {
-    const activeCassandraProxyEndpoints: string[] = [CassandraProxyEndpoints.Development, CassandraProxyEndpoints.Mpac];
+    const activeCassandraProxyEndpoints: string[] = [
+      CassandraProxyEndpoints.Development,
+      CassandraProxyEndpoints.Mpac,
+      CassandraProxyEndpoints.Prod,
+    ];
     let canAccessCassandraProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-    if (userContext.databaseAccount.properties.ipRules?.length > 0) {
+    if (
+      configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development &&
+      userContext.databaseAccount.properties.ipRules?.length > 0
+    ) {
       canAccessCassandraProxy = canAccessCassandraProxy && configContext.CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED;
     }
 
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index 4af95118b..53678ed5a 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -324,7 +324,12 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
 
 const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
   const ipRules: IpRule[] = userContext.databaseAccount?.properties?.ipRules;
-  if ((userContext.apiType === "Mongo" || userContext.apiType === "Cassandra") && ipRules?.length) {
+  if (
+    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development) ||
+      (userContext.apiType === "Cassandra" &&
+        configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development)) &&
+    ipRules?.length
+  ) {
     const legacyPortalBackendIPs: string[] = PortalBackendIPs[configContext.BACKEND_ENDPOINT];
     const ipAddressesFromIPRules: string[] = ipRules.map((ipRule) => ipRule.ipAddressOrRange);
     const ipRulesIncludeLegacyPortalBackend: boolean = legacyPortalBackendIPs.every((legacyPortalBackendIP: string) =>

From 953bef404ba177e3030e811bf5c4c97e7bcda08c Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Thu, 11 Apr 2024 15:43:46 -0700
Subject: [PATCH 03/67] Set backend endpoints in testExplorer to use MPAC.
 (#1797)

---
 test/testExplorer/TestExplorer.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/testExplorer/TestExplorer.ts b/test/testExplorer/TestExplorer.ts
index a415b5bd6..4dbeb86b6 100644
--- a/test/testExplorer/TestExplorer.ts
+++ b/test/testExplorer/TestExplorer.ts
@@ -35,6 +35,9 @@ const initTestExplorer = async (): Promise<void> => {
       dnsSuffix: "documents.azure.com",
       serverId: "prod1",
       extensionEndpoint: "/proxy",
+      portalBackendEndpoint: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
+      mongoProxyEndpoint: "https://cdb-ms-mpac-mp.cosmos.azure.com",
+      cassandraProxyEndpoint: "https://cdb-ms-mpac-cp.cosmos.azure.com",
       subscriptionType: 3,
       quotaId: "Internal_2014-09-01",
       isTryCosmosDBSubscription: false,

From 00a816c4881a897a93959a124ab8a54e8fea6758 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Sat, 13 Apr 2024 15:19:56 -0500
Subject: [PATCH 04/67] set the value in the editor for results (#1799)

---
 src/Explorer/Controls/Editor/EditorReact.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index 1d7a7381b..47268c856 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -54,13 +54,17 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     const existingContent = this.editor.getModel().getValue();
 
     if (this.props.content !== existingContent) {
-      this.editor.pushUndoStop();
-      this.editor.executeEdits("", [
-        {
-          range: this.editor.getModel().getFullModelRange(),
-          text: this.props.content,
-        },
-      ]);
+      if (this.props.isReadOnly) {
+        this.editor.setValue(this.props.content);
+      } else {
+        this.editor.pushUndoStop();
+        this.editor.executeEdits("", [
+          {
+            range: this.editor.getModel().getFullModelRange(),
+            text: this.props.content,
+          },
+        ]);
+      }
     }
   }
 

From d35e2a325e2b4c00d5eb0ef14ece769c2bb5828d Mon Sep 17 00:00:00 2001
From: JustinKol <144163838+JustinKol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 15:47:58 -0400
Subject: [PATCH 05/67] Cassandra API create table error messages swallowed by
 the Portal and shown as "undefined". (#1790)

* changed error message variable

* changed other error messages

* Added check in case responseJSON is missing

* created error const
---
 src/Explorer/Tables/TableDataClient.ts | 39 +++++++++++++++++---------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/Explorer/Tables/TableDataClient.ts b/src/Explorer/Tables/TableDataClient.ts
index c6882bc33..a9d7c96a6 100644
--- a/src/Explorer/Tables/TableDataClient.ts
+++ b/src/Explorer/Tables/TableDataClient.ts
@@ -172,8 +172,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(entity);
         },
         (error) => {
-          handleError(error, "AddRowCassandra", `Error while adding new row to table ${collection.id()}`);
-          deferred.reject(error);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "AddRowCassandra", `Error while adding new row to table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .finally(clearInProgressMessage);
@@ -406,12 +407,13 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve();
         },
         (error) => {
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
           handleError(
-            error,
+            errorText,
             "CreateKeyspaceCassandra",
             `Error while creating a keyspace with query ${createKeyspaceQuery}`,
           );
-          deferred.reject(error);
+          deferred.reject(errorText);
         },
       )
       .finally(clearInProgressMessage);
@@ -444,8 +446,13 @@ export class CassandraAPIDataClient extends TableDataClient {
               deferred.resolve();
             },
             (error) => {
-              handleError(error, "CreateTableCassandra", `Error while creating a table with query ${createTableQuery}`);
-              deferred.reject(error);
+              const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+              handleError(
+                errorText,
+                "CreateTableCassandra",
+                `Error while creating a table with query ${createTableQuery}`,
+              );
+              deferred.reject(errorText);
             },
           )
           .finally(clearInProgressMessage);
@@ -493,8 +500,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data);
         },
         (error: any) => {
-          handleError(error, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
-          deferred.reject(error);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -533,8 +541,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data);
         },
         (error: any) => {
-          handleError(error, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
-          deferred.reject(error);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -578,8 +587,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data.columns);
         },
         (error: any) => {
-          handleError(error, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
-          deferred.reject(error);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -618,8 +628,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data.columns);
         },
         (error: any) => {
-          handleError(error, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
-          deferred.reject(error);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);

From 6c9673975ad37df7343f889cfa21a2a2d0c83c85 Mon Sep 17 00:00:00 2001
From: JustinKol <144163838+JustinKol@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:24:14 -0400
Subject: [PATCH 06/67] Added hyphen to prohibited characters in keyspace name
 title (#1800)

---
 .../CassandraAddCollectionPane.tsx                        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
index dbef20b12..cd91a6628 100644
--- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -202,8 +202,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
-                pattern="[^/?#\\]*[^/?# \\]"
-                title="May not end with space nor contain characters '\' '/' '#' '?'"
+                pattern="[^/?#\\-]*[^/?#- \\]"
+                title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
                 placeholder="Type a new keyspace id"
                 size={40}
                 value={newKeyspaceId}
@@ -292,8 +292,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               required={true}
               ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
-              pattern="[^/?#\\]*[^/?# \\]"
-              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              pattern="[^/?#\\-]*[^/?#- \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
               placeholder="Enter table Id"
               size={20}
               value={tableId}

From e0cb3da6aa49c3c730aae15ae2d1d081772165e8 Mon Sep 17 00:00:00 2001
From: JustinKol <144163838+JustinKol@users.noreply.github.com>
Date: Tue, 16 Apr 2024 18:47:43 -0400
Subject: [PATCH 07/67] Is executing is false (#1801)

---
 src/Explorer/Panes/Tables/AddTableEntityPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
index 1f23a60bc..9ad999aa0 100644
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -124,8 +124,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
 
     setIsExecuting(true);
     const entity: Entities.ITableEntity = entityFromAttributes(entities);
-    const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
     try {
+      const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
       await tableEntityListViewModel.addEntityToCache(newEntity);
       if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
         tableEntityListViewModel.redrawTableThrottled();

From a44ed1f45c0ae6c977333be0cf96d53e1db29548 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 17 Apr 2024 11:19:09 -0700
Subject: [PATCH 08/67] [Task 3061766] Global Keyboard Shortcuts, implemented
 through the Command Bar (#1789)

* keyboard shortcuts using tinykeys

* refmt and fix lints

* retarget keyboard shortcuts to the body instead of the root element of the React component tree

* refmt

* Update src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

* add Save binding to New Item command bar

---------

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>
---
 package-lock.json                             |  6 ++
 package.json                                  |  1 +
 .../CommandButton/CommandButtonComponent.tsx  | 10 ++-
 .../CommandBar/CommandBarComponentAdapter.tsx |  6 ++
 .../CommandBarComponentButtonFactory.tsx      |  5 ++
 .../Menus/CommandBar/CommandBarUtil.tsx       | 26 ++++++
 src/Explorer/Tabs/DocumentsTab.ts             |  3 +
 .../Tabs/QueryTab/QueryTabComponent.tsx       |  4 +
 .../StoredProcedureTabComponent.tsx           |  4 +
 src/Explorer/Tabs/TriggerTabContent.tsx       |  3 +
 .../Tabs/UserDefinedFunctionTabContent.tsx    |  5 +-
 src/KeyboardShortcuts.tsx                     | 89 +++++++++++++++++++
 src/Main.tsx                                  | 89 ++++++++++---------
 13 files changed, 206 insertions(+), 45 deletions(-)
 create mode 100644 src/KeyboardShortcuts.tsx

diff --git a/package-lock.json b/package-lock.json
index d3a36e3f3..edb334b7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -106,6 +106,7 @@
         "styled-components": "5.0.1",
         "swr": "0.4.0",
         "terser-webpack-plugin": "5.3.9",
+        "tinykeys": "2.1.0",
         "underscore": "1.9.1",
         "utility-types": "3.10.0",
         "zustand": "3.5.0"
@@ -37786,6 +37787,11 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
     },
+    "node_modules/tinykeys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tinykeys/-/tinykeys-2.1.0.tgz",
+      "integrity": "sha512-/MESnqBD1xItZJn5oGQ4OsNORQgJfPP96XSGoyu4eLpwpL0ifO0SYR5OD76u0YMhMXsqkb0UqvI9+yXTh4xv8Q=="
+    },
     "node_modules/tinyqueue": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
diff --git a/package.json b/package.json
index a7bfec4b8..cc195cd5f 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "styled-components": "5.0.1",
     "swr": "0.4.0",
     "terser-webpack-plugin": "5.3.9",
+    "tinykeys": "2.1.0",
     "underscore": "1.9.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
diff --git a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
index 1e5cfc171..6337f947e 100644
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -1,6 +1,7 @@
 /**
  * React component for Command button component.
  */
+import { KeyboardAction } from "KeyboardShortcuts";
 import * as React from "react";
 import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 import { KeyCodes } from "../../../Common/Constants";
@@ -30,7 +31,7 @@ export interface CommandButtonComponentProps {
   /**
    * Click handler for command button click
    */
-  onCommandClick: (e: React.SyntheticEvent) => void;
+  onCommandClick: (e: React.SyntheticEvent | KeyboardEvent) => void;
 
   /**
    * Label for the button
@@ -107,10 +108,17 @@ export interface CommandButtonComponentProps {
    * Vertical bar to divide buttons
    */
   isDivider?: boolean;
+
   /**
    * Aria-label for the button
    */
   ariaLabel: string;
+
+  /**
+   * If specified, a keyboard action that should trigger this button's onCommandClick handler when activated.
+   * If not specified, the button will not be triggerable by keyboard shortcuts.
+   */
+  keyboardAction?: KeyboardAction;
 }
 
 export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index 141bda577..eaa56591d 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -5,6 +5,7 @@
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { useKeyboardActionHandlers } from "KeyboardShortcuts";
 import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
@@ -40,6 +41,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
+  const setKeyboardShortcutHandlers = useKeyboardActionHandlers((state) => state.setHandlers);
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -105,6 +107,10 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
           },
         };
 
+  const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
+  const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
+  setKeyboardShortcutHandlers(keyboardHandlers);
+
   return (
     <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
index 9851dd668..175b43d04 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -1,3 +1,4 @@
+import { KeyboardAction } from "KeyboardShortcuts";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
@@ -297,6 +298,7 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       id: "newQueryBtn",
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_QUERY,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
@@ -312,6 +314,7 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       id: "newQueryBtn",
       iconSrc: AddSqlQueryIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_QUERY,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection);
@@ -397,6 +400,7 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
   return {
     iconSrc: BrowseQueriesIcon,
     iconAlt: label,
+    keyboardAction: KeyboardAction.OPEN_QUERY,
     onCommandClick: () =>
       useSidePanel.getState().openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={container} />),
     commandButtonLabel: label,
@@ -411,6 +415,7 @@ function createOpenQueryFromDiskButton(): CommandButtonComponentProps {
   return {
     iconSrc: OpenQueryFromDiskIcon,
     iconAlt: label,
+    keyboardAction: KeyboardAction.OPEN_QUERY_FROM_DISK,
     onCommandClick: () => useSidePanel.getState().openSidePanel("Load Query", <LoadQueryPane />),
     commandButtonLabel: label,
     ariaLabel: label,
diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
index 384bd06cd..fc67ad894 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -7,6 +7,7 @@ import {
   IDropdownStyles,
 } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
+import { KeyboardHandlerMap } from "KeyboardShortcuts";
 import * as React from "react";
 import _ from "underscore";
 import ChevronDownIcon from "../../../../images/Chevron_down.svg";
@@ -233,3 +234,28 @@ export const createConnectionStatus = (container: Explorer, poolId: PoolIdType,
     onRender: () => <ConnectionStatus container={container} poolId={poolId} />,
   };
 };
+
+export function createKeyboardHandlers(allButtons: CommandButtonComponentProps[]): KeyboardHandlerMap {
+  const handlers: KeyboardHandlerMap = {};
+
+  function createHandlers(buttons: CommandButtonComponentProps[]) {
+    buttons.forEach((button) => {
+      if (!button.disabled && button.keyboardAction) {
+        handlers[button.keyboardAction] = (e) => {
+          button.onCommandClick(e);
+
+          // If the handler is bound, it means the button is visible and enabled, so we should prevent the default action
+          return true;
+        };
+      }
+
+      if (button.children && button.children.length > 0) {
+        createHandlers(button.children);
+      }
+    });
+  }
+
+  createHandlers(allButtons);
+
+  return handlers;
+}
diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts
index 3591378da..263fa77bd 100644
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -1,6 +1,7 @@
 import { ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { Platform, configContext } from "ConfigContext";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import * as ko from "knockout";
@@ -907,6 +908,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onSaveNewDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -936,6 +938,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onSaveExistingDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index fa849c212..e3f740a25 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -10,6 +10,7 @@ import { OnExecuteQueryClick, QueryDocumentsPerPage } from "Explorer/QueryCopilo
 import { QueryCopilotSidebar } from "Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
 import { useSelectedNode } from "Explorer/useSelectedNode";
+import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey, getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -393,6 +394,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       buttons.push({
         iconSrc: ExecuteQueryIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.EXECUTE_ITEM,
         onCommandClick: this.props.isSampleCopilotActive
           ? () => OnExecuteQueryClick(this.props.copilotStore)
           : this.onExecuteQueryClick,
@@ -408,6 +410,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       buttons.push({
         iconSrc: SaveQueryIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onSaveQueryClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -468,6 +471,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       buttons.push({
         iconSrc: CancelQueryIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_QUERY,
         onCommandClick: () => this.queryAbortController.abort(),
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
index 98e398e1b..dc179b002 100644
--- a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
+++ b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
@@ -1,5 +1,6 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { Pivot, PivotItem } from "@fluentui/react";
+import { KeyboardAction } from "KeyboardShortcuts";
 import React from "react";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -321,6 +322,7 @@ export default class StoredProcedureTabComponent extends React.Component<
       buttons.push({
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onSaveClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -334,6 +336,7 @@ export default class StoredProcedureTabComponent extends React.Component<
       buttons.push({
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onUpdateClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -360,6 +363,7 @@ export default class StoredProcedureTabComponent extends React.Component<
       buttons.push({
         iconSrc: ExecuteQueryIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.EXECUTE_ITEM,
         onCommandClick: () => {
           this.collection.container.openExecuteSprocParamsPanel(this.node);
         },
diff --git a/src/Explorer/Tabs/TriggerTabContent.tsx b/src/Explorer/Tabs/TriggerTabContent.tsx
index bf756598e..2c7d32ab4 100644
--- a/src/Explorer/Tabs/TriggerTabContent.tsx
+++ b/src/Explorer/Tabs/TriggerTabContent.tsx
@@ -1,5 +1,6 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react";
+import { KeyboardAction } from "KeyboardShortcuts";
 import React, { Component } from "react";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
@@ -227,6 +228,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
         ...this,
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onSaveClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -241,6 +243,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
         ...this,
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onUpdateClick,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
index c0d78ff9a..d5a3e0649 100644
--- a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
+++ b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
@@ -1,12 +1,13 @@
 import { UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { Label, TextField } from "@fluentui/react";
+import { KeyboardAction } from "KeyboardShortcuts";
 import React, { Component } from "react";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { createUserDefinedFunction } from "../../Common/dataAccess/createUserDefinedFunction";
 import { updateUserDefinedFunction } from "../../Common/dataAccess/updateUserDefinedFunction";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -80,6 +81,7 @@ export default class UserDefinedFunctionTabContent extends Component<
         setState: this.setState,
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onSaveClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -94,6 +96,7 @@ export default class UserDefinedFunctionTabContent extends Component<
         ...this,
         iconSrc: SaveIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.SAVE_ITEM,
         onCommandClick: this.onUpdateClick,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
new file mode 100644
index 000000000..300ee3446
--- /dev/null
+++ b/src/KeyboardShortcuts.tsx
@@ -0,0 +1,89 @@
+import * as React from "react";
+import { PropsWithChildren, useEffect } from "react";
+import { KeyBindingMap, tinykeys } from "tinykeys";
+import create, { UseStore } from "zustand";
+
+/**
+ * Represents a keyboard shortcut handler.
+ * Return `true` to prevent the default action of the keyboard shortcut.
+ * Any other return value will allow the default action to proceed.
+ */
+export type KeyboardActionHandler = (e: KeyboardEvent) => boolean | void;
+
+export type KeyboardHandlerMap = Partial<Record<KeyboardAction, KeyboardActionHandler>>;
+
+/**
+ * The possible actions that can be triggered by keyboard shortcuts.
+ */
+export enum KeyboardAction {
+  NEW_QUERY = "NEW_QUERY",
+  EXECUTE_ITEM = "EXECUTE_ITEM",
+  CANCEL_QUERY = "CANCEL_QUERY",
+  SAVE_ITEM = "SAVE_ITEM",
+  OPEN_QUERY = "OPEN_QUERY",
+  OPEN_QUERY_FROM_DISK = "OPEN_QUERY_FROM_DISK",
+}
+
+/**
+ * The keyboard shortcuts for the application.
+ * This record maps each action to the keyboard shortcuts that trigger the action.
+ * Even if an action is specified here, it will not be triggered unless a handler is set for it.
+ */
+const bindings: Record<KeyboardAction, string[]> = {
+  // NOTE: The "$mod" special value is used to represent the "Control" key on Windows/Linux and the "Command" key on macOS.
+  // See https://www.npmjs.com/package/tinykeys#commonly-used-keys-and-codes for more information on the expected values for keyboard shortcuts.
+
+  [KeyboardAction.NEW_QUERY]: ["$mod+J"],
+  [KeyboardAction.EXECUTE_ITEM]: ["Shift+Enter"],
+  [KeyboardAction.CANCEL_QUERY]: ["Escape"],
+  [KeyboardAction.SAVE_ITEM]: ["$mod+S"],
+  [KeyboardAction.OPEN_QUERY]: ["$mod+O"],
+  [KeyboardAction.OPEN_QUERY_FROM_DISK]: ["$mod+Shift+O"],
+};
+
+interface KeyboardShortcutState {
+  /**
+   * A set of all the keyboard shortcuts handlers.
+   */
+  allHandlers: KeyboardHandlerMap;
+
+  /**
+   * Sets the keyboard shortcut handlers.
+   */
+  setHandlers: (handlers: KeyboardHandlerMap) => void;
+}
+
+export const useKeyboardActionHandlers: UseStore<KeyboardShortcutState> = create((set) => ({
+  allHandlers: {},
+  setHandlers: (handlers: Partial<Record<KeyboardAction, KeyboardActionHandler>>) => {
+    set({ allHandlers: handlers });
+  },
+}));
+
+function createHandler(action: KeyboardAction): KeyboardActionHandler {
+  return (e) => {
+    const state = useKeyboardActionHandlers.getState();
+    const handler = state.allHandlers[action];
+    if (handler && handler(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+}
+
+const allHandlers: KeyBindingMap = {};
+(Object.keys(bindings) as KeyboardAction[]).forEach((action) => {
+  const shortcuts = bindings[action];
+  shortcuts.forEach((shortcut) => {
+    allHandlers[shortcut] = createHandler(action);
+  });
+});
+
+export function KeyboardShortcutRoot({ children }: PropsWithChildren<unknown>) {
+  useEffect(() => {
+    // We bind to the body because Fluent UI components sometimes shift focus to the body, which is above the root React component.
+    tinykeys(document.body, allHandlers);
+  }, []);
+
+  return <>{children}</>;
+}
diff --git a/src/Main.tsx b/src/Main.tsx
index c6b79b139..f79ee29f1 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -21,6 +21,7 @@ import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import { Platform } from "ConfigContext";
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
+import { KeyboardShortcutRoot } from "KeyboardShortcuts";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
 import "../images/favicon.ico";
@@ -91,52 +92,54 @@ const App: React.FunctionComponent = () => {
   }
 
   return (
-    <div className="flexContainer" aria-hidden="false">
-      <div id="divExplorer" className="flexContainer hideOverflows">
-        <div id="freeTierTeachingBubble"> </div>
-        {/* Main Command Bar - Start */}
-        <CommandBar container={explorer} />
-        {/* Collections Tree and Tabs - Begin */}
-        <div className="resourceTreeAndTabs">
-          {/* Collections Tree - Start */}
-          {userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo" && (
-            <div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
-              <div className="collectionsTreeWithSplitter">
-                {/* Collections Tree Expanded - Start */}
-                <ResourceTreeContainer
-                  container={explorer}
-                  toggleLeftPaneExpanded={toggleLeftPaneExpanded}
-                  isLeftPaneExpanded={isLeftPaneExpanded}
-                />
-                {/* Collections Tree Expanded - End */}
-                {/* Collections Tree Collapsed - Start */}
-                <CollapsedResourceTree
-                  toggleLeftPaneExpanded={toggleLeftPaneExpanded}
-                  isLeftPaneExpanded={isLeftPaneExpanded}
-                />
-                {/* Collections Tree Collapsed - End */}
+    <KeyboardShortcutRoot>
+      <div className="flexContainer" aria-hidden="false">
+        <div id="divExplorer" className="flexContainer hideOverflows">
+          <div id="freeTierTeachingBubble"> </div>
+          {/* Main Command Bar - Start */}
+          <CommandBar container={explorer} />
+          {/* Collections Tree and Tabs - Begin */}
+          <div className="resourceTreeAndTabs">
+            {/* Collections Tree - Start */}
+            {userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo" && (
+              <div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
+                <div className="collectionsTreeWithSplitter">
+                  {/* Collections Tree Expanded - Start */}
+                  <ResourceTreeContainer
+                    container={explorer}
+                    toggleLeftPaneExpanded={toggleLeftPaneExpanded}
+                    isLeftPaneExpanded={isLeftPaneExpanded}
+                  />
+                  {/* Collections Tree Expanded - End */}
+                  {/* Collections Tree Collapsed - Start */}
+                  <CollapsedResourceTree
+                    toggleLeftPaneExpanded={toggleLeftPaneExpanded}
+                    isLeftPaneExpanded={isLeftPaneExpanded}
+                  />
+                  {/* Collections Tree Collapsed - End */}
+                </div>
               </div>
-            </div>
-          )}
-          <Tabs explorer={explorer} />
-        </div>
-        {/* Collections Tree and Tabs - End */}
-        <div
-          className="dataExplorerErrorConsoleContainer"
-          role="contentinfo"
-          aria-label="Notification console"
-          id="explorerNotificationConsole"
-        >
-          <NotificationConsole />
+            )}
+            <Tabs explorer={explorer} />
+          </div>
+          {/* Collections Tree and Tabs - End */}
+          <div
+            className="dataExplorerErrorConsoleContainer"
+            role="contentinfo"
+            aria-label="Notification console"
+            id="explorerNotificationConsole"
+          >
+            <NotificationConsole />
+          </div>
         </div>
+        <SidePanel />
+        <Dialog />
+        {<QuickstartCarousel isOpen={isCarouselOpen} />}
+        {<SQLQuickstartTutorial />}
+        {<MongoQuickstartTutorial />}
+        {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
       </div>
-      <SidePanel />
-      <Dialog />
-      {<QuickstartCarousel isOpen={isCarouselOpen} />}
-      {<SQLQuickstartTutorial />}
-      {<MongoQuickstartTutorial />}
-      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
-    </div>
+    </KeyboardShortcutRoot>
   );
 };
 

From af664326ea499a0a69094398874e2da6973fe7bf Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 17 Apr 2024 15:57:29 -0700
Subject: [PATCH 09/67] Fix issues with the command bar when switching through
 React and Trigger tabs (#1804)

* fix bug in trigger tab that takes over the command bar while open

* clear context buttons when a react tab is active

* restore unintentionally removed code

* reformat
---
 src/Explorer/Tabs/Tabs.tsx              |  4 ++++
 src/Explorer/Tabs/TriggerTabContent.tsx | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index 53678ed5a..d3732ac1c 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -6,6 +6,7 @@ import { IpRule } from "Contracts/DataModels";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { QueryCopilotTab } from "Explorer/QueryCopilot/QueryCopilotTab";
 import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
@@ -297,6 +298,9 @@ const isQueryErrorThrown = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
 };
 
 const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
+  // React tabs have no context buttons.
+  useCommandBar.getState().setContextButtons([]);
+
   // eslint-disable-next-line no-console
   switch (activeReactTab) {
     case ReactTabKind.Connect:
diff --git a/src/Explorer/Tabs/TriggerTabContent.tsx b/src/Explorer/Tabs/TriggerTabContent.tsx
index 2c7d32ab4..23ab9b2e1 100644
--- a/src/Explorer/Tabs/TriggerTabContent.tsx
+++ b/src/Explorer/Tabs/TriggerTabContent.tsx
@@ -219,6 +219,18 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
     return !!value;
   }
 
+  componentDidUpdate(_prevProps: TriggerTab, prevState: ITriggerTabContentState): void {
+    const { triggerBody, triggerId, triggerType, triggerOperation } = this.state;
+    if (
+      triggerId !== prevState.triggerId ||
+      triggerBody !== prevState.triggerBody ||
+      triggerType !== prevState.triggerType ||
+      triggerOperation !== prevState.triggerOperation
+    ) {
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
+    }
+  }
+
   protected getTabsButtons(): CommandButtonComponentProps[] {
     const buttons: CommandButtonComponentProps[] = [];
     const label = "Save";
@@ -290,7 +302,6 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
   };
 
   render(): JSX.Element {
-    useCommandBar.getState().setContextButtons(this.getTabsButtons());
     const { triggerId, triggerType, triggerOperation, triggerBody, isIdEditable } = this.state;
     return (
       <div className="tab-pane flexContainer trigger-form" role="tabpanel">

From 98000a27f090ffc73b879b13e0cda75cd5358d0e Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Wed, 17 Apr 2024 19:01:12 -0400
Subject: [PATCH 10/67] Legacy Mongo Shell Mongo Proxy support (#1802)

* LMS Mongo Proxy support

* change stirng to url for get mongo shell url

* fix tests

* enable feature flag

* fixed unit test

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/Common/Constants.ts                       |   2 +-
 src/Common/MongoProxyClient.ts                |  42 ++---
 src/ConfigContext.ts                          |   2 +
 .../MongoShellTab/MongoShellTabComponent.tsx  |  17 +-
 .../MongoShellTab/getMongoShellOrigin.test.ts |  86 ---------
 .../Tabs/MongoShellTab/getMongoShellOrigin.ts |  10 -
 .../MongoShellTab/getMongoShellUrl.test.ts    | 174 +-----------------
 .../Tabs/MongoShellTab/getMongoShellUrl.ts    |  40 +---
 src/Explorer/Tabs/Tabs.tsx                    |   2 +-
 src/Platform/Hosted/extractFeatures.ts        |  12 +-
 src/Utils/EndpointUtils.ts                    |   2 +-
 web.config                                    |   2 +-
 12 files changed, 52 insertions(+), 339 deletions(-)
 delete mode 100644 src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
 delete mode 100644 src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts

diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 1eed03a4f..69bd5ed49 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -138,7 +138,7 @@ export class PortalBackendEndpoints {
 }
 
 export class MongoProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7238";
+  public static readonly Local: string = "https://localhost:7238";
   public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
   public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
   public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
diff --git a/src/Common/MongoProxyClient.ts b/src/Common/MongoProxyClient.ts
index 44400d874..907b0305e 100644
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -672,6 +672,27 @@ export function getEndpoint(endpoint: string): string {
   return url;
 }
 
+export function useMongoProxyEndpoint(api: string): boolean {
+  const activeMongoProxyEndpoints: string[] = [
+    MongoProxyEndpoints.Local,
+    MongoProxyEndpoints.Mpac,
+    MongoProxyEndpoints.Prod,
+  ];
+  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
+  if (
+    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local &&
+    userContext.databaseAccount.properties.ipRules?.length > 0
+  ) {
+    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
+  }
+
+  return (
+    canAccessMongoProxy &&
+    configContext.NEW_MONGO_APIS?.includes(api) &&
+    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
+  );
+}
+
 // TODO: This function throws most of the time except on Forbidden which is a bit strange
 // It causes problems for TypeScript understanding the types
 async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
@@ -688,24 +709,3 @@ async function errorHandling(response: Response, action: string, params: unknown
 export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
   return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}/collections/${params.coll}`;
 }
-
-function useMongoProxyEndpoint(api: string): boolean {
-  const activeMongoProxyEndpoints: string[] = [
-    MongoProxyEndpoints.Development,
-    MongoProxyEndpoints.Mpac,
-    MongoProxyEndpoints.Prod,
-  ];
-  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-  if (
-    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development &&
-    userContext.databaseAccount.properties.ipRules?.length > 0
-  ) {
-    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
-  }
-
-  return (
-    canAccessMongoProxy &&
-    configContext.NEW_MONGO_APIS?.includes(api) &&
-    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
-  );
-}
diff --git a/src/ConfigContext.ts b/src/ConfigContext.ts
index 435166b90..061f25286 100644
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -83,6 +83,7 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
     `^https:\\/\\/.*\\.azure-test\\.net$`,
+    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -108,6 +109,7 @@ let configContext: Readonly<ConfigContext> = {
     "updateDocument",
     "deleteDocument",
     "createCollectionWithProxy",
+    "legacyMongoShell",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
diff --git a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
index cb47a070d..a89ca5fc7 100644
--- a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
+++ b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
@@ -9,7 +9,6 @@ import { isInvalidParentFrameOrigin, isReadyMessage } from "../../../Utils/Messa
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import TabsBase from "../TabsBase";
-import { getMongoShellOrigin } from "./getMongoShellOrigin";
 import { getMongoShellUrl } from "./getMongoShellUrl";
 
 //eslint-disable-next-line
@@ -35,7 +34,7 @@ export interface IMongoShellTabAccessor {
 }
 
 export interface IMongoShellTabComponentStates {
-  url: string;
+  url: URL;
 }
 
 export interface IMongoShellTabComponentProps {
@@ -50,13 +49,16 @@ export default class MongoShellTabComponent extends Component<
   IMongoShellTabComponentStates
 > {
   private _logTraces: Map<string, number>;
+  private _useMongoProxyEndpoint: boolean;
 
   constructor(props: IMongoShellTabComponentProps) {
     super(props);
     this._logTraces = new Map();
+    this._useMongoProxyEndpoint = userContext.features.enableLegacyMongoShell;
+    // this._useMongoProxyEndpoint = useMongoProxyEndpoint("legacyMongoShell");
 
     this.state = {
-      url: getMongoShellUrl(),
+      url: getMongoShellUrl(this._useMongoProxyEndpoint),
     };
 
     props.onMongoShellTabAccessor({
@@ -119,9 +121,10 @@ export default class MongoShellTabComponent extends Component<
       ) + Constants.MongoDBAccounts.defaultPort.toString();
     const databaseId = this.props.collection.databaseId;
     const collectionId = this.props.collection.id();
-    const apiEndpoint = configContext.BACKEND_ENDPOINT;
+    const apiEndpoint = this._useMongoProxyEndpoint
+      ? configContext.MONGO_PROXY_ENDPOINT
+      : configContext.BACKEND_ENDPOINT;
     const encryptedAuthToken: string = userContext.accessToken;
-    const targetOrigin = getMongoShellOrigin();
 
     shellIframe.contentWindow.postMessage(
       {
@@ -137,7 +140,7 @@ export default class MongoShellTabComponent extends Component<
           apiEndpoint: apiEndpoint,
         },
       },
-      targetOrigin,
+      window.origin,
     );
   }
 
@@ -218,7 +221,7 @@ export default class MongoShellTabComponent extends Component<
         name="explorer"
         className="iframe"
         style={{ width: "100%", height: "100%", border: 0, padding: 0, margin: 0, overflow: "hidden" }}
-        src={this.state.url}
+        src={this.state.url.toString()}
         id={this.props.tabsBaseInstance.tabId}
         onLoad={(event) => this.setContentFocus(event)}
         title="Mongo Shell"
diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
deleted file mode 100644
index 8f62b2a0c..000000000
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { extractFeatures } from "Platform/Hosted/extractFeatures";
-import { configContext } from "../../../ConfigContext";
-import { updateUserContext } from "../../../UserContext";
-import { getMongoShellOrigin } from "./getMongoShellOrigin";
-
-describe("getMongoShellOrigin", () => {
-  (window as { origin: string }).origin = "window_origin";
-
-  beforeEach(() => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV1": "false",
-          "feature.enableLegacyMongoShellV2": "false",
-          "feature.enableLegacyMongoShellV1Debug": "false",
-          "feature.enableLegacyMongoShellV2Debug": "false",
-          "feature.loadLegacyMongoShellFromBE": "false",
-        }),
-      ),
-    });
-  });
-
-  it("should return  by default", () => {
-    expect(getMongoShellOrigin()).toBe(window.origin);
-  });
-
-  it("should return window.origin when enableLegacyMongoShellV1", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV1": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellOrigin()).toBe(window.origin);
-  });
-
-  it("should return window.origin when enableLegacyMongoShellV2===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV2": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellOrigin()).toBe(window.origin);
-  });
-
-  it("should return window.origin when enableLegacyMongoShellV1Debug===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV1Debug": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellOrigin()).toBe(window.origin);
-  });
-
-  it("should return window.origin when enableLegacyMongoShellV2Debug===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV2Debug": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellOrigin()).toBe(window.origin);
-  });
-
-  it("should return BACKEND_ENDPOINT when loadLegacyMongoShellFromBE===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.loadLegacyMongoShellFromBE": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellOrigin()).toBe(configContext.BACKEND_ENDPOINT);
-  });
-});
diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
deleted file mode 100644
index 774a4443c..000000000
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { configContext } from "../../../ConfigContext";
-import { userContext } from "../../../UserContext";
-
-export function getMongoShellOrigin(): string {
-  if (userContext.features.loadLegacyMongoShellFromBE === true) {
-    return configContext.BACKEND_ENDPOINT;
-  }
-
-  return window.origin;
-}
diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
index 1d75f682d..0c138ff61 100644
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
@@ -1,9 +1,9 @@
-import { extractFeatures } from "Platform/Hosted/extractFeatures";
-import { Platform, configContext, resetConfigContext, updateConfigContext } from "../../../ConfigContext";
+import { Platform, resetConfigContext, updateConfigContext } from "../../../ConfigContext";
 import { updateUserContext, userContext } from "../../../UserContext";
-import { getExtensionEndpoint, getMongoShellUrl } from "./getMongoShellUrl";
+import { getMongoShellUrl } from "./getMongoShellUrl";
 
 const mongoBackendEndpoint = "https://localhost:1234";
+const hostedExplorerURL = "https://cosmos.azure.com/";
 
 describe("getMongoShellUrl", () => {
   let queryString = "";
@@ -13,6 +13,7 @@ describe("getMongoShellUrl", () => {
 
     updateConfigContext({
       BACKEND_ENDPOINT: mongoBackendEndpoint,
+      hostedExplorerURL: hostedExplorerURL,
       platform: Platform.Hosted,
     });
 
@@ -32,175 +33,18 @@ describe("getMongoShellUrl", () => {
           cassandraEndpoint: "fakeCassandraEndpoint",
         },
       },
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV1": "false",
-          "feature.enableLegacyMongoShellV2": "false",
-          "feature.enableLegacyMongoShellV1Debug": "false",
-          "feature.enableLegacyMongoShellV2Debug": "false",
-          "feature.loadLegacyMongoShellFromBE": "false",
-        }),
-      ),
       portalEnv: "prod",
     });
 
     queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
   });
 
-  it("should return /mongoshell/indexv2.html by default", () => {
-    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  it("should return /indexv2.html by default", () => {
+    expect(getMongoShellUrl().toString()).toContain(`/indexv2.html?${queryString}`);
   });
 
-  it("should return /mongoshell/indexv2.html when portalEnv==localhost", () => {
-    updateUserContext({
-      portalEnv: "localhost",
-    });
-
-    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
-  });
-
-  it("should return /mongoshell/index.html when enableLegacyMongoShellV1===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV1": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellUrl()).toBe(`/mongoshell/index.html?${queryString}`);
-  });
-
-  it("should return /mongoshell/index.html when enableLegacyMongoShellV2===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV2": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
-  });
-
-  it("should return /mongoshell/index.html when enableLegacyMongoShellV1Debug===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV1Debug": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/index.html?${queryString}`);
-  });
-
-  it("should return /mongoshell/index.html when enableLegacyMongoShellV2Debug===true", () => {
-    updateUserContext({
-      features: extractFeatures(
-        new URLSearchParams({
-          "feature.enableLegacyMongoShellV2Debug": "true",
-        }),
-      ),
-    });
-
-    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/indexv2.html?${queryString}`);
-  });
-
-  describe("loadLegacyMongoShellFromBE===true", () => {
-    beforeEach(() => {
-      resetConfigContext();
-      updateConfigContext({
-        BACKEND_ENDPOINT: mongoBackendEndpoint,
-        platform: Platform.Hosted,
-      });
-
-      updateUserContext({
-        features: extractFeatures(
-          new URLSearchParams({
-            "feature.loadLegacyMongoShellFromBE": "true",
-          }),
-        ),
-      });
-    });
-
-    it("should return /mongoshell/index.html", () => {
-      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
-      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
-    });
-
-    it("configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
-      updateConfigContext({
-        platform: Platform.Portal,
-      });
-
-      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
-      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
-    });
-
-    it("configContext.BACKEND_ENDPOINT !== '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
-      resetConfigContext();
-      updateConfigContext({
-        platform: Platform.Portal,
-        BACKEND_ENDPOINT: mongoBackendEndpoint,
-      });
-
-      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
-      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
-    });
-
-    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html", () => {
-      resetConfigContext();
-      updateConfigContext({
-        platform: Platform.Hosted,
-      });
-
-      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
-      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
-    });
-
-    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
-      resetConfigContext();
-      updateConfigContext({
-        platform: Platform.Portal,
-      });
-
-      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
-      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
-    });
-  });
-});
-
-describe("getExtensionEndpoint", () => {
-  it("when platform === Platform.Hosted, backendEndpoint is undefined", () => {
-    expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe("");
-  });
-
-  it("when platform === Platform.Hosted, backendEndpoint === ''", () => {
-    expect(getExtensionEndpoint(Platform.Hosted, "")).toBe("");
-  });
-
-  it("when platform === Platform.Hosted, backendEndpoint === null", () => {
-    expect(getExtensionEndpoint(Platform.Hosted, null)).toBe("");
-  });
-
-  it("when platform === Platform.Hosted, backendEndpoint != ''", () => {
-    expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo");
-  });
-
-  it("when platform === Platform.Portal, backendEndpoint is udefined", () => {
-    expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe("");
-  });
-
-  it("when platform === Platform.Portal, backendEndpoint === ''", () => {
-    expect(getExtensionEndpoint(Platform.Portal, "")).toBe("");
-  });
-
-  it("when platform === Platform.Portal, backendEndpoint === null", () => {
-    expect(getExtensionEndpoint(Platform.Portal, null)).toBe("");
-  });
-
-  it("when platform !== Platform.Portal, backendEndpoint != ''", () => {
-    expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo");
+  it("should return /index.html when useMongoProxyEndpoint is true", () => {
+    const useMongoProxyEndpoint: boolean = true;
+    expect(getMongoShellUrl(useMongoProxyEndpoint).toString()).toContain(`/index.html?${queryString}`);
   });
 });
diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
index a029fe440..5c4c03bdb 100644
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
@@ -1,45 +1,13 @@
-import { configContext, Platform } from "../../../ConfigContext";
+import { configContext } from "ConfigContext";
 import { userContext } from "../../../UserContext";
 
-export function getMongoShellUrl(): string {
+export function getMongoShellUrl(useMongoProxyEndpoint?: boolean): URL {
   const { databaseAccount: account } = userContext;
   const resourceId = account?.id;
   const accountName = account?.name;
   const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
   const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
+  const path: string = useMongoProxyEndpoint ? `/index.html?${queryString}` : `/indexv2.html?${queryString}`;
 
-  if (userContext.features.enableLegacyMongoShellV1 === true) {
-    return `/mongoshell/index.html?${queryString}`;
-  }
-
-  if (userContext.features.enableLegacyMongoShellV1Debug === true) {
-    return `/mongoshell/debug/index.html?${queryString}`;
-  }
-
-  if (userContext.features.enableLegacyMongoShellV2 === true) {
-    return `/mongoshell/indexv2.html?${queryString}`;
-  }
-
-  if (userContext.features.enableLegacyMongoShellV2Debug === true) {
-    return `/mongoshell/debug/indexv2.html?${queryString}`;
-  }
-
-  if (userContext.portalEnv === "localhost") {
-    return `/mongoshell/indexv2.html?${queryString}`;
-  }
-
-  if (userContext.features.loadLegacyMongoShellFromBE === true) {
-    const extensionEndpoint: string = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
-    return `${extensionEndpoint}/content/mongoshell/debug/index.html?${queryString}`;
-  }
-
-  return `/mongoshell/indexv2.html?${queryString}`;
-}
-
-export function getExtensionEndpoint(platform: string, backendEndpoint: string): string {
-  const runtimeEndpoint = platform === Platform.Hosted ? backendEndpoint : "";
-
-  const extensionEndpoint: string = backendEndpoint || runtimeEndpoint || "";
-
-  return extensionEndpoint;
+  return new URL(path, configContext.hostedExplorerURL);
 }
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index d3732ac1c..78281bf62 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -329,7 +329,7 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
 const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
   const ipRules: IpRule[] = userContext.databaseAccount?.properties?.ipRules;
   if (
-    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development) ||
+    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local) ||
       (userContext.apiType === "Cassandra" &&
         configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development)) &&
     ipRules?.length
diff --git a/src/Platform/Hosted/extractFeatures.ts b/src/Platform/Hosted/extractFeatures.ts
index 7bf3c8a3f..626b855bb 100644
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -31,11 +31,6 @@ export type Features = {
   readonly mongoProxyAPIs?: string;
   readonly enableThroughputCap: boolean;
   readonly enableHierarchicalKeys: boolean;
-  readonly enableLegacyMongoShellV1: boolean;
-  readonly enableLegacyMongoShellV1Debug: boolean;
-  readonly enableLegacyMongoShellV2: boolean;
-  readonly enableLegacyMongoShellV2Debug: boolean;
-  readonly loadLegacyMongoShellFromBE: boolean;
   readonly enableCopilot: boolean;
   readonly copilotVersion?: string;
   readonly disableCopilotPhoenixGateaway: boolean;
@@ -43,6 +38,7 @@ export type Features = {
   readonly copilotChatFixedMonacoEditorHeight: boolean;
   readonly enablePriorityBasedExecution: boolean;
   readonly disableConnectionStringLogin: boolean;
+  readonly enableLegacyMongoShell: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -106,11 +102,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     notebooksDownBanner: "true" === get("notebooksDownBanner"),
     enableThroughputCap: "true" === get("enablethroughputcap"),
     enableHierarchicalKeys: "true" === get("enablehierarchicalkeys"),
-    enableLegacyMongoShellV1: "true" === get("enablelegacymongoshellv1"),
-    enableLegacyMongoShellV1Debug: "true" === get("enablelegacymongoshellv1debug"),
-    enableLegacyMongoShellV2: "true" === get("enablelegacymongoshellv2"),
-    enableLegacyMongoShellV2Debug: "true" === get("enablelegacymongoshellv2debug"),
-    loadLegacyMongoShellFromBE: "true" === get("loadlegacymongoshellfrombe"),
     enableCopilot: "true" === get("enablecopilot", "true"),
     copilotVersion: get("copilotversion") ?? "v2.0",
     disableCopilotPhoenixGateaway: "true" === get("disablecopilotphoenixgateaway"),
@@ -118,6 +109,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
+    enableLegacyMongoShell: "true" === get("enablelegacymongoshell"),
   };
 }
 
diff --git a/src/Utils/EndpointUtils.ts b/src/Utils/EndpointUtils.ts
index c59db4205..f8398568c 100644
--- a/src/Utils/EndpointUtils.ts
+++ b/src/Utils/EndpointUtils.ts
@@ -82,7 +82,7 @@ export const MongoProxyOutboundIPs: { [key: string]: string[] } = {
 };
 
 export const allowedMongoProxyEndpoints: ReadonlyArray<string> = [
-  MongoProxyEndpoints.Development,
+  MongoProxyEndpoints.Local,
   MongoProxyEndpoints.Mpac,
   MongoProxyEndpoints.Prod,
   MongoProxyEndpoints.Fairfax,
diff --git a/web.config b/web.config
index 9d9ff2619..4a967e52a 100644
--- a/web.config
+++ b/web.config
@@ -30,7 +30,7 @@
         <clear />
         <add name="X-Xss-Protection" value="1; mode=block" />
         <add name="X-Content-Type-Options" value="nosniff" />
-        <add name="Content-Security-Policy" value="frame-ancestors 'self' portal.azure.com *.portal.azure.com portal.azure.us portal.azure.cn portal.microsoftazure.de df.onecloud.azure-test.net *.fabric.microsoft.com *.powerbi.com *.analysis-df.windows.net" />
+        <add name="Content-Security-Policy" value="frame-ancestors 'self' portal.azure.com *.portal.azure.com portal.azure.us portal.azure.cn portal.microsoftazure.de df.onecloud.azure-test.net *.fabric.microsoft.com *.powerbi.com *.analysis-df.windows.net cosmos-explorer-preview.azurewebsites.net" />
       </customHeaders>
       <redirectHeaders>
         <clear />

From e3fab9b5bf4d5b2527aa4a7b2fe87dbe2d60002a Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Thu, 18 Apr 2024 15:39:13 -0400
Subject: [PATCH 11/67] Add 'mongoshell' to Legacy Mongo Shell path (#1806)

* LMS Mongo Proxy support

* change stirng to url for get mongo shell url

* fix tests

* enable feature flag

* fixed unit test

* add mongoshell to path

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
index 5c4c03bdb..0ecbcb83e 100644
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
@@ -7,7 +7,9 @@ export function getMongoShellUrl(useMongoProxyEndpoint?: boolean): URL {
   const accountName = account?.name;
   const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
   const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
-  const path: string = useMongoProxyEndpoint ? `/index.html?${queryString}` : `/indexv2.html?${queryString}`;
+  const path: string = useMongoProxyEndpoint
+    ? `/mongoshell/index.html?${queryString}`
+    : `/mongoshell/indexv2.html?${queryString}`;
 
   return new URL(path, configContext.hostedExplorerURL);
 }

From a5a5a95973254cdc4f255f986e4ddc11054072b9 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Fri, 19 Apr 2024 09:43:27 -0700
Subject: [PATCH 12/67] [Task 3061766] Additional Keyboard Shortcuts (#1805)

* [Task 3061766] Additional Keyboard Shortcuts

refmt and fix lints

shortcuts for: discard, new item/sproc/udf/trigger, delete
item/sproc/udf/trigger

copilot shortcut

* remove 'Ctrl+I' due to conflict with Monaco Autocomplete
---
 .../CommandBar/CommandBarComponentAdapter.tsx |  4 ++--
 .../CommandBarComponentButtonFactory.tsx      |  6 +++++
 src/Explorer/Tabs/DocumentsTab.ts             |  4 ++++
 .../Tabs/QueryTab/QueryTabComponent.tsx       |  7 +++---
 .../StoredProcedureTabComponent.tsx           |  1 +
 src/Explorer/Tabs/TriggerTabContent.tsx       |  1 +
 .../Tabs/UserDefinedFunctionTabContent.tsx    |  1 +
 src/KeyboardShortcuts.tsx                     | 22 ++++++++++++++++---
 8 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index eaa56591d..a5db3826c 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -41,7 +41,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
-  const setKeyboardShortcutHandlers = useKeyboardActionHandlers((state) => state.setHandlers);
+  const setKeyboardActionHandlers = useKeyboardActionHandlers((state) => state.setHandlers);
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -109,7 +109,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
-  setKeyboardShortcutHandlers(keyboardHandlers);
+  setKeyboardActionHandlers(keyboardHandlers);
 
   return (
     <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
index 175b43d04..a1aa3e49b 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -58,6 +58,7 @@ export function createStaticCommandBarButtons(
     buttons.push(homeBtn);
 
     const newCollectionBtn = createNewCollectionGroup(container);
+    newCollectionBtn.keyboardAction = KeyboardAction.NEW_COLLECTION; // Just for the root button, not the child version we create below.
     buttons.push(newCollectionBtn);
     if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
       const addSynapseLink = createOpenSynapseLinkDialogButton(container);
@@ -95,6 +96,7 @@ export function createStaticCommandBarButtons(
       const newStoredProcedureBtn: CommandButtonComponentProps = {
         iconSrc: AddStoredProcedureIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.NEW_SPROC,
         onCommandClick: () => {
           const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
           selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -278,6 +280,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
+    keyboardAction: KeyboardAction.NEW_DATABASE,
     onCommandClick: async () => {
       const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
       if (throughputCap && throughputCap !== -1) {
@@ -340,6 +343,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newStoredProcedureBtn: CommandButtonComponentProps = {
       iconSrc: AddStoredProcedureIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_SPROC,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -359,6 +363,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newUserDefinedFunctionBtn: CommandButtonComponentProps = {
       iconSrc: AddUdfIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_UDF,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
@@ -378,6 +383,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
     const newTriggerBtn: CommandButtonComponentProps = {
       iconSrc: AddTriggerIcon,
       iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_TRIGGER,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection);
diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts
index 263fa77bd..1d13237d0 100644
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -894,6 +894,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: NewDocumentIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.NEW_ITEM,
         onCommandClick: this.onNewDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -923,6 +924,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onRevertNewDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -953,6 +955,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onRevertExisitingDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
@@ -968,6 +971,7 @@ export default class DocumentsTab extends TabsBase {
       buttons.push({
         iconSrc: DeleteDocumentIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.DELETE_ITEM,
         onCommandClick: this.onDeleteExisitingDocumentClick,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index e3f740a25..07f0a9eba 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -440,7 +440,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
         hasPopup: false,
       };
 
-      const launchCopilotButton = {
+      const launchCopilotButton: CommandButtonComponentProps = {
         iconSrc: LaunchCopilot,
         iconAlt: mainButtonLabel,
         onCommandClick: this.launchQueryCopilotChat,
@@ -453,9 +453,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     }
 
     if (this.props.copilotEnabled) {
-      const toggleCopilotButton = {
+      const toggleCopilotButton: CommandButtonComponentProps = {
         iconSrc: QueryCommandIcon,
         iconAlt: "Copilot",
+        keyboardAction: KeyboardAction.TOGGLE_COPILOT,
         onCommandClick: () => {
           this._toggleCopilot(!this.state.copilotActive);
         },
@@ -471,7 +472,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       buttons.push({
         iconSrc: CancelQueryIcon,
         iconAlt: label,
-        keyboardAction: KeyboardAction.CANCEL_QUERY,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: () => this.queryAbortController.abort(),
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
index dc179b002..ce8c6ac45 100644
--- a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
+++ b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
@@ -350,6 +350,7 @@ export default class StoredProcedureTabComponent extends React.Component<
       buttons.push({
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onDiscard,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/TriggerTabContent.tsx b/src/Explorer/Tabs/TriggerTabContent.tsx
index 23ab9b2e1..5fd28502a 100644
--- a/src/Explorer/Tabs/TriggerTabContent.tsx
+++ b/src/Explorer/Tabs/TriggerTabContent.tsx
@@ -271,6 +271,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
         ...this,
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onDiscard,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
index d5a3e0649..98b90c045 100644
--- a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
+++ b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
@@ -112,6 +112,7 @@ export default class UserDefinedFunctionTabContent extends Component<
         ...this,
         iconSrc: DiscardIcon,
         iconAlt: label,
+        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
         onCommandClick: this.onDiscard,
         commandButtonLabel: label,
         ariaLabel: label,
diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
index 300ee3446..dbf6dddb7 100644
--- a/src/KeyboardShortcuts.tsx
+++ b/src/KeyboardShortcuts.tsx
@@ -18,10 +18,18 @@ export type KeyboardHandlerMap = Partial<Record<KeyboardAction, KeyboardActionHa
 export enum KeyboardAction {
   NEW_QUERY = "NEW_QUERY",
   EXECUTE_ITEM = "EXECUTE_ITEM",
-  CANCEL_QUERY = "CANCEL_QUERY",
+  CANCEL_OR_DISCARD = "CANCEL_OR_DISCARD",
   SAVE_ITEM = "SAVE_ITEM",
   OPEN_QUERY = "OPEN_QUERY",
   OPEN_QUERY_FROM_DISK = "OPEN_QUERY_FROM_DISK",
+  NEW_SPROC = "NEW_SPROC",
+  NEW_UDF = "NEW_UDF",
+  NEW_TRIGGER = "NEW_TRIGGER",
+  NEW_DATABASE = "NEW_DATABASE",
+  NEW_COLLECTION = "NEW_CONTAINER",
+  NEW_ITEM = "NEW_ITEM",
+  DELETE_ITEM = "DELETE_ITEM",
+  TOGGLE_COPILOT = "TOGGLE_COPILOT",
 }
 
 /**
@@ -33,12 +41,20 @@ const bindings: Record<KeyboardAction, string[]> = {
   // NOTE: The "$mod" special value is used to represent the "Control" key on Windows/Linux and the "Command" key on macOS.
   // See https://www.npmjs.com/package/tinykeys#commonly-used-keys-and-codes for more information on the expected values for keyboard shortcuts.
 
-  [KeyboardAction.NEW_QUERY]: ["$mod+J"],
+  [KeyboardAction.NEW_QUERY]: ["$mod+J", "Alt+N Q"],
   [KeyboardAction.EXECUTE_ITEM]: ["Shift+Enter"],
-  [KeyboardAction.CANCEL_QUERY]: ["Escape"],
+  [KeyboardAction.CANCEL_OR_DISCARD]: ["Escape"],
   [KeyboardAction.SAVE_ITEM]: ["$mod+S"],
   [KeyboardAction.OPEN_QUERY]: ["$mod+O"],
   [KeyboardAction.OPEN_QUERY_FROM_DISK]: ["$mod+Shift+O"],
+  [KeyboardAction.NEW_SPROC]: ["Alt+N P"],
+  [KeyboardAction.NEW_UDF]: ["Alt+N F"],
+  [KeyboardAction.NEW_TRIGGER]: ["Alt+N T"],
+  [KeyboardAction.NEW_DATABASE]: ["Alt+N D"],
+  [KeyboardAction.NEW_COLLECTION]: ["Alt+N C"],
+  [KeyboardAction.NEW_ITEM]: ["Alt+N I"],
+  [KeyboardAction.DELETE_ITEM]: ["Alt+D"],
+  [KeyboardAction.TOGGLE_COPILOT]: ["$mod+P"],
 };
 
 interface KeyboardShortcutState {

From c220a8b070e9037710f9d1a8e6c3ad454ce31d6c Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Fri, 19 Apr 2024 13:44:30 -0700
Subject: [PATCH 13/67] [Task 3071878] Tab Navigation Keyboard Shortcuts
 (#1808)

* [Task 3071878] Tab Navigation Keyboard Shortcuts

* throw in development on duplicate handlers

* refmt
---
 .../CommandBar/CommandBarComponentAdapter.tsx |  6 +-
 src/Explorer/Tabs/Tabs.tsx                    | 11 ++++
 src/KeyboardShortcuts.tsx                     | 64 +++++++++++++++++--
 src/hooks/useTabs.ts                          | 46 +++++++++++++
 4 files changed, 118 insertions(+), 9 deletions(-)

diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index a5db3826c..9a5f222a3 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -5,7 +5,7 @@
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
-import { useKeyboardActionHandlers } from "KeyboardShortcuts";
+import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
@@ -41,7 +41,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
-  const setKeyboardActionHandlers = useKeyboardActionHandlers((state) => state.setHandlers);
+  const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -109,7 +109,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
-  setKeyboardActionHandlers(keyboardHandlers);
+  setKeyboardHandlers(keyboardHandlers);
 
   return (
     <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index 78281bf62..b33f3d4af 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -14,6 +14,7 @@ import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
 import { VcoreMongoConnectTab } from "Explorer/Tabs/VCoreMongoConnectTab";
 import { VcoreMongoQuickstartTab } from "Explorer/Tabs/VCoreMongoQuickstartTab";
+import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { hasRUThresholdBeenConfigured } from "Shared/StorageUtility";
 import { userContext } from "UserContext";
 import { CassandraProxyOutboundIPs, MongoProxyOutboundIPs, PortalBackendIPs } from "Utils/EndpointUtils";
@@ -42,6 +43,16 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
     showMongoAndCassandraProxiesNetworkSettingsWarningState,
     setShowMongoAndCassandraProxiesNetworkSettingsWarningState,
   ] = useState<boolean>(showMongoAndCassandraProxiesNetworkSettingsWarning());
+
+  const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.TABS);
+  useEffect(() => {
+    setKeyboardHandlers({
+      [KeyboardAction.SELECT_LEFT_TAB]: () => useTabs.getState().selectLeftTab(),
+      [KeyboardAction.SELECT_RIGHT_TAB]: () => useTabs.getState().selectRightTab(),
+      [KeyboardAction.CLOSE_TAB]: () => useTabs.getState().closeActiveTab(),
+    });
+  }, [setKeyboardHandlers]);
+
   return (
     <div className="tabsManagerContainer">
       {networkSettingsWarning && (
diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
index dbf6dddb7..66efd68b4 100644
--- a/src/KeyboardShortcuts.tsx
+++ b/src/KeyboardShortcuts.tsx
@@ -12,6 +12,15 @@ export type KeyboardActionHandler = (e: KeyboardEvent) => boolean | void;
 
 export type KeyboardHandlerMap = Partial<Record<KeyboardAction, KeyboardActionHandler>>;
 
+/**
+ * The groups of keyboard actions that can be managed by the application.
+ * Each group can be updated separately, but, when updated, must be completely replaced.
+ */
+export enum KeyboardActionGroup {
+  TABS = "TABS",
+  COMMAND_BAR = "COMMAND_BAR",
+}
+
 /**
  * The possible actions that can be triggered by keyboard shortcuts.
  */
@@ -30,6 +39,9 @@ export enum KeyboardAction {
   NEW_ITEM = "NEW_ITEM",
   DELETE_ITEM = "DELETE_ITEM",
   TOGGLE_COPILOT = "TOGGLE_COPILOT",
+  SELECT_LEFT_TAB = "SELECT_LEFT_TAB",
+  SELECT_RIGHT_TAB = "SELECT_RIGHT_TAB",
+  CLOSE_TAB = "CLOSE_TAB",
 }
 
 /**
@@ -55,6 +67,9 @@ const bindings: Record<KeyboardAction, string[]> = {
   [KeyboardAction.NEW_ITEM]: ["Alt+N I"],
   [KeyboardAction.DELETE_ITEM]: ["Alt+D"],
   [KeyboardAction.TOGGLE_COPILOT]: ["$mod+P"],
+  [KeyboardAction.SELECT_LEFT_TAB]: ["$mod+Alt+["],
+  [KeyboardAction.SELECT_RIGHT_TAB]: ["$mod+Alt+]"],
+  [KeyboardAction.CLOSE_TAB]: ["$mod+Alt+W"],
 };
 
 interface KeyboardShortcutState {
@@ -64,15 +79,47 @@ interface KeyboardShortcutState {
   allHandlers: KeyboardHandlerMap;
 
   /**
-   * Sets the keyboard shortcut handlers.
+   * A set of all the groups of keyboard shortcuts handlers.
    */
-  setHandlers: (handlers: KeyboardHandlerMap) => void;
+  groups: Partial<Record<KeyboardActionGroup, KeyboardHandlerMap>>;
+
+  /**
+   * Sets the keyboard shortcut handlers for the given group.
+   */
+  setHandlers: (group: KeyboardActionGroup, handlers: KeyboardHandlerMap) => void;
 }
 
-export const useKeyboardActionHandlers: UseStore<KeyboardShortcutState> = create((set) => ({
+/**
+ * Defines the calling component as the manager of the keyboard actions for the given group.
+ * @param group The group of keyboard actions to manage.
+ * @returns A function that can be used to set the keyboard action handlers for the given group.
+ */
+export const useKeyboardActionGroup = (group: KeyboardActionGroup) => (handlers: KeyboardHandlerMap) =>
+  useKeyboardActionHandlers.getState().setHandlers(group, handlers);
+
+const useKeyboardActionHandlers: UseStore<KeyboardShortcutState> = create((set, get) => ({
   allHandlers: {},
-  setHandlers: (handlers: Partial<Record<KeyboardAction, KeyboardActionHandler>>) => {
-    set({ allHandlers: handlers });
+  groups: {},
+  setHandlers: (group: KeyboardActionGroup, handlers: KeyboardHandlerMap) => {
+    const state = get();
+    const groups = { ...state.groups, [group]: handlers };
+
+    // Combine all the handlers from all the groups in the correct order.
+    const allHandlers: KeyboardHandlerMap = {};
+    eachKey(groups).forEach((group) => {
+      const groupHandlers = groups[group];
+      if (groupHandlers) {
+        eachKey(groupHandlers).forEach((action) => {
+          // Check for duplicate handlers in development mode.
+          // We don't want to raise an error here in production, but having duplicate handlers is a mistake.
+          if (process.env.NODE_ENV === "development" && allHandlers[action]) {
+            throw new Error(`Duplicate handler for Keyboard Action "${action}".`);
+          }
+          allHandlers[action] = groupHandlers[action];
+        });
+      }
+    });
+    set({ groups, allHandlers });
   },
 }));
 
@@ -88,7 +135,7 @@ function createHandler(action: KeyboardAction): KeyboardActionHandler {
 }
 
 const allHandlers: KeyBindingMap = {};
-(Object.keys(bindings) as KeyboardAction[]).forEach((action) => {
+eachKey(bindings).forEach((action) => {
   const shortcuts = bindings[action];
   shortcuts.forEach((shortcut) => {
     allHandlers[shortcut] = createHandler(action);
@@ -103,3 +150,8 @@ export function KeyboardShortcutRoot({ children }: PropsWithChildren<unknown>) {
 
   return <>{children}</>;
 }
+
+/** A _typed_ version of `Object.keys` that preserves the original key type */
+function eachKey<K extends string | number | symbol, V>(record: Partial<Record<K, V>>): K[] {
+  return Object.keys(record) as K[];
+}
diff --git a/src/hooks/useTabs.ts b/src/hooks/useTabs.ts
index 10bc3b144..982768afa 100644
--- a/src/hooks/useTabs.ts
+++ b/src/hooks/useTabs.ts
@@ -1,3 +1,4 @@
+import { clamp } from "@fluentui/react";
 import create, { UseStore } from "zustand";
 import * as ViewModels from "../Contracts/ViewModels";
 import { CollectionTabKind } from "../Contracts/ViewModels";
@@ -29,6 +30,11 @@ export interface TabsState {
   setQueryCopilotTabInitialInput: (input: string) => void;
   setIsTabExecuting: (state: boolean) => void;
   setIsQueryErrorThrown: (state: boolean) => void;
+  getCurrentTabIndex: () => number;
+  selectTabByIndex: (index: number) => void;
+  selectLeftTab: () => void;
+  selectRightTab: () => void;
+  closeActiveTab: () => void;
 }
 
 export enum ReactTabKind {
@@ -175,4 +181,44 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   setIsQueryErrorThrown: (state: boolean) => {
     set({ isQueryErrorThrown: state });
   },
+  getCurrentTabIndex: () => {
+    const state = get();
+    if (state.activeReactTab !== undefined) {
+      return state.openedReactTabs.indexOf(state.activeReactTab);
+    } else if (state.activeTab !== undefined) {
+      const nonReactTabIndex = state.openedTabs.indexOf(state.activeTab);
+      if (nonReactTabIndex !== -1) {
+        return state.openedReactTabs.length + nonReactTabIndex;
+      }
+    }
+
+    return -1;
+  },
+  selectTabByIndex: (index: number) => {
+    const state = get();
+    const totalTabCount = state.openedReactTabs.length + state.openedTabs.length;
+    const clampedIndex = clamp(index, totalTabCount - 1, 0);
+
+    if (clampedIndex < state.openedReactTabs.length) {
+      set({ activeTab: undefined, activeReactTab: state.openedReactTabs[clampedIndex] });
+    } else {
+      set({ activeTab: state.openedTabs[clampedIndex - state.openedReactTabs.length], activeReactTab: undefined });
+    }
+  },
+  selectLeftTab: () => {
+    const state = get();
+    state.selectTabByIndex(state.getCurrentTabIndex() - 1);
+  },
+  selectRightTab: () => {
+    const state = get();
+    state.selectTabByIndex(state.getCurrentTabIndex() + 1);
+  },
+  closeActiveTab: () => {
+    const state = get();
+    if (state.activeReactTab !== undefined) {
+      state.closeReactTab(state.activeReactTab);
+    } else if (state.activeTab !== undefined) {
+      state.closeTab(state.activeTab);
+    }
+  },
 }));

From 2b15a4d43d05431045b750fe56bc59d44ebd182d Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:03:11 -0700
Subject: [PATCH 14/67] Update package.json (#1807)

---
 package-lock.json | 205 +++++++++++++++++++++++++++++++++-------------
 package.json      |   8 +-
 2 files changed, 156 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index edb334b7c..f0b65b98a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@azure/cosmos": "4.0.1-beta.2",
         "@azure/cosmos-language-service": "0.0.5",
         "@azure/identity": "1.2.1",
-        "@azure/ms-rest-nodeauth": "3.0.7",
+        "@azure/ms-rest-nodeauth": "3.1.1",
         "@azure/msal-browser": "2.14.2",
         "@babel/plugin-proposal-class-properties": "7.12.1",
         "@babel/plugin-proposal-decorators": "7.12.12",
@@ -51,6 +51,7 @@
         "@types/lodash": "4.14.171",
         "@types/mkdirp": "1.0.1",
         "@types/node-fetch": "2.5.7",
+        "@xmldom/xmldom": "0.7.13",
         "applicationinsights": "1.8.0",
         "bootstrap": "3.4.1",
         "canvas": "file:./canvas",
@@ -74,12 +75,14 @@
         "i18next-browser-languagedetector": "6.0.1",
         "i18next-http-backend": "1.0.23",
         "iframe-resizer-react": "1.1.0",
+        "immer": "9.0.6",
         "immutable": "4.0.0-rc.12",
         "is-ci": "2.0.0",
         "jquery": "3.7.1",
         "jquery-typeahead": "2.11.1",
         "jquery-ui-dist": "1.13.2",
         "knockout": "3.5.1",
+        "loader-utils": "2.0.3",
         "mkdirp": "1.0.4",
         "monaco-editor": "0.44.0",
         "ms": "2.1.3",
@@ -103,11 +106,12 @@
         "reflect-metadata": "0.1.13",
         "rx-jupyter": "5.5.12",
         "sanitize-html": "2.3.3",
+        "shell-quote": "1.7.3",
         "styled-components": "5.0.1",
         "swr": "0.4.0",
         "terser-webpack-plugin": "5.3.9",
         "tinykeys": "2.1.0",
-        "underscore": "1.9.1",
+        "underscore": "1.12.1",
         "utility-types": "3.10.0",
         "zustand": "3.5.0"
       },
@@ -597,13 +601,13 @@
       }
     },
     "node_modules/@azure/ms-rest-nodeauth": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@azure/ms-rest-nodeauth/-/ms-rest-nodeauth-3.0.7.tgz",
-      "integrity": "sha512-7Q1MyMB+eqUQy8JO+virSIzAjqR2UbKXE/YQZe+53gC8yakm8WOQ5OzGfPP+eyHqeRs6bQESyw2IC5feLWlT2A==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@azure/ms-rest-nodeauth/-/ms-rest-nodeauth-3.1.1.tgz",
+      "integrity": "sha512-UA/8dgLy3+ZiwJjAZHxL4MUB14fFQPkaAOZ94jsTW/Z6WmoOeny2+cLk0+dyIX/iH6qSrEWKwbStEeB970B9pA==",
       "dependencies": {
         "@azure/ms-rest-azure-env": "^2.0.0",
         "@azure/ms-rest-js": "^2.0.4",
-        "adal-node": "^0.1.28"
+        "adal-node": "^0.2.2"
       }
     },
     "node_modules/@azure/msal-browser": {
@@ -14184,6 +14188,14 @@
         }
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.13.tgz",
+      "integrity": "sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -14301,29 +14313,39 @@
       }
     },
     "node_modules/adal-node": {
-      "version": "0.1.28",
-      "resolved": "https://registry.npmjs.org/adal-node/-/adal-node-0.1.28.tgz",
-      "integrity": "sha512-98nQ5MQSyJR0ZY/R0Mue/cv4OkebRyKz4hS40GdkZU42Bq49ldHeup7UeAo/0vROMB57CX2et6IF0U/Pe1rY3A==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/adal-node/-/adal-node-0.2.4.tgz",
+      "integrity": "sha512-zIcvbwQFKMUtKxxj8YMHeTT1o/TPXfVNsTXVgXD8sxwV6h4AFQgK77dRciGhuEF9/Sdm3UQPJVPc/6XxrccSeA==",
       "deprecated": "This package is no longer supported. Please migrate to @azure/msal-node.",
       "dependencies": {
-        "@types/node": "^8.0.47",
-        "async": ">=0.6.0",
+        "@xmldom/xmldom": "^0.8.3",
+        "async": "^2.6.3",
+        "axios": "^0.21.1",
         "date-utils": "*",
         "jws": "3.x.x",
-        "request": ">= 2.52.0",
         "underscore": ">= 1.3.1",
         "uuid": "^3.1.0",
-        "xmldom": ">= 0.1.x",
         "xpath.js": "~1.1.0"
       },
       "engines": {
         "node": ">= 0.6.15"
       }
     },
-    "node_modules/adal-node/node_modules/@types/node": {
-      "version": "8.10.66",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.66.tgz",
-      "integrity": "sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw=="
+    "node_modules/adal-node/node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/adal-node/node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
     },
     "node_modules/adal-node/node_modules/jwa": {
       "version": "1.4.1",
@@ -14940,7 +14962,9 @@
     "node_modules/async": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+      "dev": true,
+      "peer": true
     },
     "node_modules/async-hook-jl": {
       "version": "1.7.6",
@@ -15084,6 +15108,32 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/babel-loader/node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/babel-loader/node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -21759,6 +21809,32 @@
         "html-loader": "^0.5.1"
       }
     },
+    "node_modules/html-loader/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/html-loader/node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/html-minifier": {
       "version": "3.5.21",
       "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz",
@@ -22333,10 +22409,9 @@
       }
     },
     "node_modules/immer": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
-      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
-      "dev": true,
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.6.tgz",
+      "integrity": "sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -29209,29 +29284,16 @@
       }
     },
     "node_modules/loader-utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-      "dev": true,
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
+      "integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
-        "json5": "^1.0.1"
+        "json5": "^2.1.2"
       },
       "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/loader-utils/node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
+        "node": ">=8.9.0"
       }
     },
     "node_modules/locate-path": {
@@ -34255,6 +34317,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/react-dev-utils/node_modules/immer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/react-dev-utils/node_modules/loader-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
@@ -34321,6 +34393,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/react-dev-utils/node_modules/shell-quote": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
+      "dev": true
+    },
     "node_modules/react-dev-utils/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -36410,10 +36488,9 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
-      "dev": true
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
+      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw=="
     },
     "node_modules/shellwords": {
       "version": "0.1.1",
@@ -37255,6 +37332,32 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/style-loader/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/style-loader/node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/style-loader/node_modules/schema-utils": {
       "version": "0.4.7",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -38443,9 +38546,9 @@
       }
     },
     "node_modules/underscore": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz",
-      "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg=="
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
+      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
     },
     "node_modules/unherit": {
       "version": "1.1.3",
@@ -40149,14 +40252,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "devOptional": true
     },
-    "node_modules/xmldom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.6.0.tgz",
-      "integrity": "sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/xpath.js": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/xpath.js/-/xpath.js-1.1.0.tgz",
diff --git a/package.json b/package.json
index cc195cd5f..2c7e2b7f5 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "@azure/cosmos": "4.0.1-beta.2",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
-    "@azure/ms-rest-nodeauth": "3.0.7",
+    "@azure/ms-rest-nodeauth": "3.1.1",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
@@ -46,6 +46,7 @@
     "@types/lodash": "4.14.171",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
+    "@xmldom/xmldom": "0.7.13",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
@@ -69,12 +70,14 @@
     "i18next-browser-languagedetector": "6.0.1",
     "i18next-http-backend": "1.0.23",
     "iframe-resizer-react": "1.1.0",
+    "immer": "9.0.6",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.7.1",
     "jquery-typeahead": "2.11.1",
     "jquery-ui-dist": "1.13.2",
     "knockout": "3.5.1",
+    "loader-utils": "2.0.3",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
@@ -98,11 +101,12 @@
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "sanitize-html": "2.3.3",
+    "shell-quote": "1.7.3",
     "styled-components": "5.0.1",
     "swr": "0.4.0",
     "terser-webpack-plugin": "5.3.9",
     "tinykeys": "2.1.0",
-    "underscore": "1.9.1",
+    "underscore": "1.12.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
   },

From c12eced120fddfa4c8cea5eedce89fae72e1fc50 Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Mon, 22 Apr 2024 07:10:16 -0700
Subject: [PATCH 15/67] Update node-fetch, react-dev-utils and azure/identity
 dependencies. (#1809)

---
 package-lock.json | 1125 +++++++++++++++++++++++++--------------------
 package.json      |    6 +-
 2 files changed, 623 insertions(+), 508 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0b65b98a..590a1c049 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@azure/arm-cosmosdb": "9.1.0",
         "@azure/cosmos": "4.0.1-beta.2",
         "@azure/cosmos-language-service": "0.0.5",
-        "@azure/identity": "1.2.1",
+        "@azure/identity": "1.5.2",
         "@azure/ms-rest-nodeauth": "3.1.1",
         "@azure/msal-browser": "2.14.2",
         "@babel/plugin-proposal-class-properties": "7.12.1",
@@ -180,13 +180,13 @@
         "less-vars-loader": "1.1.0",
         "mini-css-extract-plugin": "2.1.0",
         "monaco-editor-webpack-plugin": "7.1.0",
-        "node-fetch": "2.6.1",
+        "node-fetch": "2.6.7",
         "playwright": "1.13.0",
         "prettier": "3.0.3",
         "process": "0.11.10",
         "querystring-es3": "0.2.1",
         "raw-loader": "0.5.1",
-        "react-dev-utils": "11.0.4",
+        "react-dev-utils": "12.0.1",
         "rimraf": "3.0.0",
         "sinon": "3.2.1",
         "style-loader": "0.23.0",
@@ -253,14 +253,6 @@
         "tslib": "^1.10.0"
       }
     },
-    "node_modules/@azure/core-asynciterator-polyfill": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@azure/core-asynciterator-polyfill/-/core-asynciterator-polyfill-1.0.2.tgz",
-      "integrity": "sha512-3rkP4LnnlWawl0LZptJOdXNrT/fHp2eQMadoasa6afspXdpGrtPZuAQc2PD0cpgyuoXtUWyC3tv7xfntjGS5Dw==",
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/@azure/core-auth": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.5.0.tgz",
@@ -279,66 +271,35 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
-    "node_modules/@azure/core-http": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@azure/core-http/-/core-http-1.2.6.tgz",
-      "integrity": "sha512-odtH7UMKtekc5YQ86xg9GlVHNXR6pq2JgJ5FBo7/jbOjNGdBqcrIVrZx2bevXVJz/uUTSx6vUf62gzTXTfqYSQ==",
+    "node_modules/@azure/core-client": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@azure/core-client/-/core-client-1.9.2.tgz",
+      "integrity": "sha512-kRdry/rav3fUKHl/aDLd/pDLcB+4pOFwPPTVEExuMyaI5r+JBbMWqRbCY1pn5BniDaU3lRxO9eaQ1AmSMehl/w==",
       "dependencies": {
-        "@azure/abort-controller": "^1.0.0",
-        "@azure/core-asynciterator-polyfill": "^1.0.0",
-        "@azure/core-auth": "^1.3.0",
-        "@azure/core-tracing": "1.0.0-preview.11",
+        "@azure/abort-controller": "^2.0.0",
+        "@azure/core-auth": "^1.4.0",
+        "@azure/core-rest-pipeline": "^1.9.1",
+        "@azure/core-tracing": "^1.0.0",
+        "@azure/core-util": "^1.6.1",
         "@azure/logger": "^1.0.0",
-        "@types/node-fetch": "^2.5.0",
-        "@types/tunnel": "^0.0.1",
-        "form-data": "^3.0.0",
-        "node-fetch": "^2.6.0",
-        "process": "^0.11.10",
-        "tough-cookie": "^4.0.0",
-        "tslib": "^2.2.0",
-        "tunnel": "^0.0.6",
-        "uuid": "^8.3.0",
-        "xml2js": "^0.4.19"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/@azure/core-http/node_modules/@azure/core-tracing": {
-      "version": "1.0.0-preview.11",
-      "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.0-preview.11.tgz",
-      "integrity": "sha512-frF0pJc9HTmKncVokhBxCqipjbql02DThQ1ZJ9wLi7SDMLdPAFyDI5xZNzX5guLz+/DtPkY+SGK2li9FIXqshQ==",
+    "node_modules/@azure/core-client/node_modules/@azure/abort-controller": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
+      "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
       "dependencies": {
-        "@opencensus/web-types": "0.0.7",
-        "@opentelemetry/api": "1.0.0-rc.0",
-        "tslib": "^2.0.0"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/@azure/core-http/node_modules/@opentelemetry/api": {
-      "version": "1.0.0-rc.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.0.0-rc.0.tgz",
-      "integrity": "sha512-iXKByCMfrlO5S6Oh97BuM56tM2cIBB0XsL/vWF/AtJrJEKx4MC/Xdu0xDsGXMGcNWpqF7ujMsjjnp0+UHBwnDQ==",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/@azure/core-http/node_modules/form-data": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@azure/core-http/node_modules/tslib": {
+    "node_modules/@azure/core-client/node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
@@ -459,42 +420,44 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/@azure/identity": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@azure/identity/-/identity-1.2.1.tgz",
-      "integrity": "sha512-vCzV4Xg5hWJ2e4Et0waOmIEgYHsqtGF06kklnqblZg0hKDLKxTAX5FzKYuDMk1CctY2UdEmWFcA2li2uOXOLXQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@azure/identity/-/identity-1.5.2.tgz",
+      "integrity": "sha512-vqyeRbd2i0h9F4mqW5JbkP1xfabqKQ21l/81osKhpOQ2LtwaJW6nw4+0PsVYnxcbPHFCIZt6EWAk74a3OGYZJA==",
       "dependencies": {
-        "@azure/core-http": "^1.2.0",
-        "@azure/core-tracing": "1.0.0-preview.9",
+        "@azure/core-auth": "^1.3.0",
+        "@azure/core-client": "^1.0.0",
+        "@azure/core-rest-pipeline": "^1.1.0",
+        "@azure/core-tracing": "1.0.0-preview.12",
         "@azure/logger": "^1.0.0",
-        "@azure/msal-node": "1.0.0-beta.1",
-        "@opentelemetry/api": "^0.10.2",
+        "@azure/msal-node": "1.0.0-beta.6",
+        "@types/stoppable": "^1.1.0",
         "axios": "^0.21.1",
         "events": "^3.0.0",
         "jws": "^4.0.0",
         "msal": "^1.0.2",
         "open": "^7.0.0",
         "qs": "^6.7.0",
+        "stoppable": "^1.1.0",
         "tslib": "^2.0.0",
         "uuid": "^8.3.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       },
       "optionalDependencies": {
-        "keytar": "^5.4.0"
+        "keytar": "^7.3.0"
       }
     },
     "node_modules/@azure/identity/node_modules/@azure/core-tracing": {
-      "version": "1.0.0-preview.9",
-      "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.0-preview.9.tgz",
-      "integrity": "sha512-zczolCLJ5QG42AEPQ+Qg9SRYNUyB+yZ5dzof4YEc+dyWczO9G2sBqbAjLB7IqrsdHN2apkiB2oXeDKCsq48jug==",
+      "version": "1.0.0-preview.12",
+      "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.0-preview.12.tgz",
+      "integrity": "sha512-nvo2Wc4EKZGN6eFu9n3U7OXmASmL8VxoPIH7xaD6OlQqi44bouF0YIi9ID5rEsKLiAU59IYx6M297nqWVMWPDg==",
       "dependencies": {
-        "@opencensus/web-types": "0.0.7",
-        "@opentelemetry/api": "^0.10.2",
-        "tslib": "^2.0.0"
+        "@opentelemetry/api": "^1.0.0",
+        "tslib": "^2.2.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/@azure/identity/node_modules/tslib": {
@@ -634,61 +597,17 @@
       }
     },
     "node_modules/@azure/msal-node": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-1.0.0-beta.1.tgz",
-      "integrity": "sha512-dO/bgVScpl5loZfsfhHXmFLTNoDxGvUiZIsJCe1+HpHyFWXwGsBZ71P5ixbxRhhf/bPpZS3X+/rm1Fq2uUucJw==",
+      "version": "1.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-1.0.0-beta.6.tgz",
+      "integrity": "sha512-ZQI11Uz1j0HJohb9JZLRD8z0moVcPks1AFW4Q/Gcl67+QvH4aKEJti7fjCcipEEZYb/qzLSO8U6IZgPYytsiJQ==",
       "deprecated": "A newer major version of this library is available. Please upgrade to the latest available version.",
       "dependencies": {
-        "@azure/msal-common": "^1.7.2",
-        "axios": "^0.19.2",
+        "@azure/msal-common": "^4.0.0",
+        "axios": "^0.21.1",
         "jsonwebtoken": "^8.5.1",
         "uuid": "^8.3.0"
       }
     },
-    "node_modules/@azure/msal-node/node_modules/@azure/msal-common": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-1.7.2.tgz",
-      "integrity": "sha512-3/voCdFKONENX+5tMrNOBSrVJb6NbE7YB8vc4FZ/4ZbjpK7GVtq9Bu1MW+HZhrmsUzSF/joHx0ZIJDYIequ/jg==",
-      "dependencies": {
-        "debug": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/@azure/msal-node/node_modules/axios": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-      "deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
-      "dependencies": {
-        "follow-redirects": "1.5.10"
-      }
-    },
-    "node_modules/@azure/msal-node/node_modules/follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-      "dependencies": {
-        "debug": "=3.1.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/@azure/msal-node/node_modules/follow-redirects/node_modules/debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/@azure/msal-node/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.4.tgz",
@@ -7071,17 +6990,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/detect-libc": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
-      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -10184,29 +10092,10 @@
         "@octokit/openapi-types": "^19.0.2"
       }
     },
-    "node_modules/@opencensus/web-types": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@opencensus/web-types/-/web-types-0.0.7.tgz",
-      "integrity": "sha512-xB+w7ZDAu3YBzqH44rCmG9/RlrOmFuDPt/bpf17eJr8eZSrLt7nc7LnWdxM9Mmoj/YKMHpxRg28txu3TcpiL+g==",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
     "node_modules/@opentelemetry/api": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.10.2.tgz",
-      "integrity": "sha512-GtpMGd6vkzDMYcpu2t9LlhEgMy/SzBwRnz48EejlRArYqZzqSzAsKmegUK7zHgl+EOIaK9mKHhnRaQu3qw20cA==",
-      "dependencies": {
-        "@opentelemetry/context-base": "^0.10.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/@opentelemetry/context-base": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.10.2.tgz",
-      "integrity": "sha512-hZNKjKOYsckoOEgBziGMnBcX0M7EtstnCmwz5jZUOUYwlZ+/xxX6z3jPu1XVO2Jivk0eLfuP9GP+vFD49CMetw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.8.0.tgz",
+      "integrity": "sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==",
       "engines": {
         "node": ">=8.0.0"
       }
@@ -12839,6 +12728,12 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "devOptional": true
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true
+    },
     "node_modules/@types/post-robot": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/@types/post-robot/-/post-robot-10.0.1.tgz",
@@ -13618,6 +13513,14 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "devOptional": true
     },
+    "node_modules/@types/stoppable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/stoppable/-/stoppable-1.1.3.tgz",
+      "integrity": "sha512-7wGKIBJGE4ZxFjk9NkjAxZMLlIXroETqP1FJCdoSvKmEznwmBxQFmTB1dsCkAvVcNemuSZM5qkkd9HE/NL2JTw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/styled-components": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.1.tgz",
@@ -13644,14 +13547,6 @@
         "@types/jest": "*"
       }
     },
-    "node_modules/@types/tunnel": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/@types/tunnel/-/tunnel-0.0.1.tgz",
-      "integrity": "sha512-AOqu6bQu5MSWwYvehMXLukFHnupHrpZ8nvgae5Ggie9UwzDR1CCwoXgSSWNZJuyOlCdfdsWMA5F2LlmvyoTv8A==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/underscore": {
       "version": "1.7.36",
       "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.7.36.tgz",
@@ -14661,7 +14556,9 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/archy": {
       "version": "1.0.0",
@@ -14669,16 +14566,6 @@
       "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==",
       "dev": true
     },
-    "node_modules/are-we-there-yet": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
-      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
-      "optional": true,
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
-      }
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -16469,7 +16356,9 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16746,7 +16635,9 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/content-disposition": {
       "version": "0.5.4",
@@ -17020,7 +16911,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/cosmiconfig": {
       "version": "5.2.1",
@@ -17861,7 +17752,9 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
       "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "mimic-response": "^2.0.0"
       },
@@ -18150,7 +18043,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/denodeify": {
       "version": "1.2.1",
@@ -18204,15 +18099,12 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
       "optional": true,
-      "bin": {
-        "detect-libc": "bin/detect-libc.js"
-      },
       "engines": {
-        "node": ">=0.10"
+        "node": ">=8"
       }
     },
     "node_modules/detect-newline": {
@@ -20325,9 +20217,9 @@
       "optional": true
     },
     "node_modules/filesize": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
-      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
+      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
       "dev": true,
       "engines": {
         "node": ">= 0.4.0"
@@ -20725,22 +20617,200 @@
       }
     },
     "node_modules/fork-ts-checker-webpack-plugin": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
-      "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
+      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.5.5",
-        "chalk": "^2.4.1",
-        "micromatch": "^3.1.10",
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
         "minimatch": "^3.0.4",
-        "semver": "^5.6.0",
-        "tapable": "^1.0.0",
-        "worker-rpc": "^0.1.0"
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
       },
       "engines": {
-        "node": ">=6.11.5",
+        "node": ">=10",
         "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 6",
+        "typescript": ">= 2.7",
+        "vue-template-compiler": "*",
+        "webpack": ">= 4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.4",
+        "ajv": "^6.12.2",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
@@ -20752,6 +20822,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -20987,43 +21081,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==",
-      "optional": true,
-      "dependencies": {
-        "aproba": "^1.0.3",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
-        "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
-      }
-    },
-    "node_modules/gauge/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "optional": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -21375,16 +21432,18 @@
       "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
     },
     "node_modules/gzip-size": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
-      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
       "dev": true,
       "dependencies": {
-        "duplexer": "^0.1.1",
-        "pify": "^4.0.1"
+        "duplexer": "^0.1.2"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/handle-thing": {
@@ -21520,7 +21579,9 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/has-value": {
       "version": "1.0.0",
@@ -22314,6 +22375,14 @@
         "node-fetch": "2.6.1"
       }
     },
+    "node_modules/i18next-http-backend/node_modules/node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -22863,7 +22932,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
       "integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "number-is-nan": "^1.0.0"
       },
@@ -28995,22 +29066,16 @@
       "integrity": "sha512-yQa1dz+FilQ+w3JM6GH2V/wnFeQhfbkK9stvs3UiraW3GOEO7zrOBBh0ZuHsrzeN1xx6v7P5EpA2JtOUUnfN/w=="
     },
     "node_modules/keytar": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/keytar/-/keytar-5.6.0.tgz",
-      "integrity": "sha512-ueulhshHSGoryfRXaIvTj0BV1yB0KddBGhGoqCxSN9LR1Ks1GKuuCdVhF+2/YOs5fMl6MlTI9On1a4DHDXoTow==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/keytar/-/keytar-7.9.0.tgz",
+      "integrity": "sha512-VPD8mtVtm5JNtA2AErl6Chp06JBfy7diFQ7TQQhdpWOl6MrCRB+eRbvAZUsbGQS9kiMq0coJsy0W0vHpDCkWsQ==",
       "hasInstallScript": true,
       "optional": true,
       "dependencies": {
-        "nan": "2.14.1",
-        "prebuild-install": "5.3.3"
+        "node-addon-api": "^4.3.0",
+        "prebuild-install": "^7.0.1"
       }
     },
-    "node_modules/keytar/node_modules/nan": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "optional": true
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -31389,12 +31454,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/microevent.ts": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
-      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
-      "dev": true
-    },
     "node_modules/micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -31470,7 +31529,9 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
       "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -31885,19 +31946,61 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.30.1.tgz",
-      "integrity": "sha512-/2D0wOQPgaUWzVSVgRMx+trKJRC2UG4SUc4oCJoXx9Uxjtp0Vy3/kt7zcbxHF8+Z/pK3UloLWzBISg72brfy1w==",
+      "version": "3.60.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.60.0.tgz",
+      "integrity": "sha512-zcGgwoXbzw9NczqbGzAWL/ToDYAxv1V8gL1D67ClbdkIfeeDBbY0GelZtC25ayLvVjr2q2cloHeQV1R0QAWqRQ==",
       "optional": true,
       "dependencies": {
-        "semver": "^5.4.1"
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
+    "node_modules/node-abi/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-abi/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "optional": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-abi/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
       "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="
     },
+    "node_modules/node-addon-api": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
+      "integrity": "sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==",
+      "optional": true
+    },
     "node_modules/node-dir": {
       "version": "0.1.17",
       "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
@@ -31912,11 +32015,22 @@
       }
     },
     "node_modules/node-fetch": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
       "engines": {
         "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
       }
     },
     "node_modules/node-forge": {
@@ -32015,12 +32129,6 @@
         "url": "https://github.com/sponsors/antelle"
       }
     },
-    "node_modules/noop-logger": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz",
-      "integrity": "sha512-6kM8CLXvuW5crTxsAtva2YLrRrDaiTIkIePWs9moLHqbFWT94WpNFjwS/5dfLfECg5i/lkmw3aoqVidxt23TEQ==",
-      "optional": true
-    },
     "node_modules/nopt": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -32074,18 +32182,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "optional": true,
-      "dependencies": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -32108,7 +32204,9 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
       "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -33582,44 +33680,81 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prebuild-install": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.3.tgz",
-      "integrity": "sha512-GV+nsUXuPW2p8Zy7SarF/2W/oiK8bFQgJcncoJ0d7kRpekEA0ftChjfEaF9/Y+QJEc/wFR7RAEa8lYByuUIe2g==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
+      "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
       "optional": true,
       "dependencies": {
-        "detect-libc": "^1.0.3",
+        "detect-libc": "^2.0.0",
         "expand-template": "^2.0.3",
         "github-from-package": "0.0.0",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
         "napi-build-utils": "^1.0.1",
-        "node-abi": "^2.7.0",
-        "noop-logger": "^0.1.1",
-        "npmlog": "^4.0.1",
+        "node-abi": "^3.3.0",
         "pump": "^3.0.0",
         "rc": "^1.2.7",
-        "simple-get": "^3.0.3",
+        "simple-get": "^4.0.0",
         "tar-fs": "^2.0.0",
-        "tunnel-agent": "^0.6.0",
-        "which-pm-runs": "^1.0.0"
+        "tunnel-agent": "^0.6.0"
       },
       "bin": {
         "prebuild-install": "bin.js"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       }
     },
-    "node_modules/prebuild-install/node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+    "node_modules/prebuild-install/node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
       "optional": true,
       "dependencies": {
-        "minimist": "^1.2.6"
+        "mimic-response": "^3.1.0"
       },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
       }
     },
     "node_modules/prelude-ls": {
@@ -33803,7 +33938,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/process-on-spawn": {
       "version": "1.0.0",
@@ -34210,106 +34345,110 @@
       }
     },
     "node_modules/react-dev-utils": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
-      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
+      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "7.10.4",
-        "address": "1.1.2",
-        "browserslist": "4.14.2",
-        "chalk": "2.4.2",
-        "cross-spawn": "7.0.3",
-        "detect-port-alt": "1.1.6",
-        "escape-string-regexp": "2.0.0",
-        "filesize": "6.1.0",
-        "find-up": "4.1.0",
-        "fork-ts-checker-webpack-plugin": "4.1.6",
-        "global-modules": "2.0.0",
-        "globby": "11.0.1",
-        "gzip-size": "5.1.1",
-        "immer": "8.0.1",
-        "is-root": "2.1.0",
-        "loader-utils": "2.0.0",
-        "open": "^7.0.2",
-        "pkg-up": "3.1.0",
-        "prompts": "2.4.0",
-        "react-error-overlay": "^6.0.9",
-        "recursive-readdir": "2.2.2",
-        "shell-quote": "1.7.2",
-        "strip-ansi": "6.0.0",
-        "text-table": "0.2.0"
+        "@babel/code-frame": "^7.16.0",
+        "address": "^1.1.2",
+        "browserslist": "^4.18.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.3",
+        "detect-port-alt": "^1.1.6",
+        "escape-string-regexp": "^4.0.0",
+        "filesize": "^8.0.6",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.5.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.4",
+        "gzip-size": "^6.0.0",
+        "immer": "^9.0.7",
+        "is-root": "^2.1.0",
+        "loader-utils": "^3.2.0",
+        "open": "^8.4.0",
+        "pkg-up": "^3.1.0",
+        "prompts": "^2.4.2",
+        "react-error-overlay": "^6.0.11",
+        "recursive-readdir": "^2.2.2",
+        "shell-quote": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
       },
       "engines": {
         "node": ">=10"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/@babel/code-frame": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-      "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.10.4"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/browserslist": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
-      "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
-      "dev": true,
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001125",
-        "electron-to-chromium": "^1.3.564",
-        "escalade": "^3.0.2",
-        "node-releases": "^1.1.61"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       },
       "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/browserslist"
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/react-dev-utils/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
     "node_modules/react-dev-utils/node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "dev": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/react-dev-utils/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "dependencies": {
-        "locate-path": "^5.0.0",
+        "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
       },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/globby": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
-        "slash": "^3.0.0"
-      },
       "engines": {
         "node": ">=10"
       },
@@ -34317,10 +34456,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/react-dev-utils/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-dev-utils/node_modules/immer": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
-      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -34328,47 +34476,74 @@
       }
     },
     "node_modules/react-dev-utils/node_modules/loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
       "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">= 12.13.0"
       }
     },
     "node_modules/react-dev-utils/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
       "dependencies": {
-        "p-locate": "^4.1.0"
+        "p-locate": "^5.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/react-dev-utils/node_modules/node-releases": {
-      "version": "1.1.77",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz",
-      "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==",
-      "dev": true
-    },
-    "node_modules/react-dev-utils/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+    "node_modules/react-dev-utils/node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
       "dev": true,
       "dependencies": {
-        "p-limit": "^2.2.0"
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/react-dev-utils/node_modules/path-exists": {
@@ -34380,41 +34555,13 @@
         "node": ">=8"
       }
     },
-    "node_modules/react-dev-utils/node_modules/prompts": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
-      "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==",
+    "node_modules/react-dev-utils/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
       "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/shell-quote": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
-      "dev": true
-    },
-    "node_modules/react-dev-utils/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
+        "has-flag": "^4.0.0"
       },
       "engines": {
         "node": ">=8"
@@ -34956,7 +35103,7 @@
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
       "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -34971,7 +35118,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
@@ -36560,7 +36707,9 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
       "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "decompress-response": "^4.2.0",
         "once": "^1.3.1",
@@ -37129,6 +37278,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stoppable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stoppable/-/stoppable-1.1.0.tgz",
+      "integrity": "sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==",
+      "engines": {
+        "node": ">=4",
+        "npm": ">=6"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -37161,7 +37319,9 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
       "integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "code-point-at": "^1.0.0",
         "is-fullwidth-code-point": "^1.0.0",
@@ -37175,7 +37335,9 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
       "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -37184,7 +37346,9 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^2.0.0"
       },
@@ -37994,6 +38158,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
       "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+      "devOptional": true,
       "dependencies": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
@@ -38008,6 +38173,7 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
       "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "devOptional": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -39373,21 +39539,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/webpack-bundle-analyzer/node_modules/gzip-size": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-      "dev": true,
-      "dependencies": {
-        "duplexer": "^0.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/webpack-cli": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
@@ -39893,15 +40044,6 @@
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
       "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
     },
-    "node_modules/which-pm-runs": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.1.0.tgz",
-      "integrity": "sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/which-typed-array": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
@@ -39924,7 +40066,9 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
@@ -40063,15 +40207,6 @@
       "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
       "dev": true
     },
-    "node_modules/worker-rpc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
-      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
-      "dev": true,
-      "dependencies": {
-        "microevent.ts": "~0.1.1"
-      }
-    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -40217,26 +40352,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
     },
-    "node_modules/xml2js": {
-      "version": "0.4.23",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
-      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xml2js/node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/xmlbuilder": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-8.2.2.tgz",
diff --git a/package.json b/package.json
index 2c7e2b7f5..9ac61d243 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "4.0.1-beta.2",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.2.1",
+    "@azure/identity": "1.5.2",
     "@azure/ms-rest-nodeauth": "3.1.1",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
@@ -175,13 +175,13 @@
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "7.1.0",
-    "node-fetch": "2.6.1",
+    "node-fetch": "2.6.7",
     "playwright": "1.13.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
     "raw-loader": "0.5.1",
-    "react-dev-utils": "11.0.4",
+    "react-dev-utils": "12.0.1",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",

From 7b81767ded7031167d57f1ae7f2075d8bd9eaad0 Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:34:20 -0700
Subject: [PATCH 16/67] Enable new backend for Settings API in Prod. (#1791)

---
 src/Utils/EndpointUtils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Utils/EndpointUtils.ts b/src/Utils/EndpointUtils.ts
index f8398568c..e4c036d75 100644
--- a/src/Utils/EndpointUtils.ts
+++ b/src/Utils/EndpointUtils.ts
@@ -155,7 +155,11 @@ export function useNewPortalBackendEndpoint(backendApi: string): boolean {
   // This maps backend APIs to the environments supported by the new backend.
   const newBackendApiEnvironmentMap: { [key: string]: string[] } = {
     [BackendApi.GenerateToken]: [PortalBackendEndpoints.Development],
-    [BackendApi.PortalSettings]: [PortalBackendEndpoints.Development, PortalBackendEndpoints.Mpac],
+    [BackendApi.PortalSettings]: [
+      PortalBackendEndpoints.Development,
+      PortalBackendEndpoints.Mpac,
+      PortalBackendEndpoints.Prod,
+    ],
   };
 
   if (!newBackendApiEnvironmentMap[backendApi] || !configContext.PORTAL_BACKEND_ENDPOINT) {

From acf5acfdb45c0609b8dbc83cddfb730ec3a25b66 Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Tue, 23 Apr 2024 08:20:27 -0400
Subject: [PATCH 17/67] Remove Legacy Mongo Shell feature flag (#1810)

* LMS Mongo Proxy support

* change stirng to url for get mongo shell url

* fix tests

* enable feature flag

* fixed unit test

* add mongoshell to path

* remove LMS feature flag

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx | 4 ++--
 src/Platform/Hosted/extractFeatures.ts                     | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
index a89ca5fc7..d3720cf41 100644
--- a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
+++ b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
@@ -1,3 +1,4 @@
+import { useMongoProxyEndpoint } from "Common/MongoProxyClient";
 import React, { Component } from "react";
 import * as Constants from "../../../Common/Constants";
 import { configContext } from "../../../ConfigContext";
@@ -54,8 +55,7 @@ export default class MongoShellTabComponent extends Component<
   constructor(props: IMongoShellTabComponentProps) {
     super(props);
     this._logTraces = new Map();
-    this._useMongoProxyEndpoint = userContext.features.enableLegacyMongoShell;
-    // this._useMongoProxyEndpoint = useMongoProxyEndpoint("legacyMongoShell");
+    this._useMongoProxyEndpoint = useMongoProxyEndpoint("legacyMongoShell");
 
     this.state = {
       url: getMongoShellUrl(this._useMongoProxyEndpoint),
diff --git a/src/Platform/Hosted/extractFeatures.ts b/src/Platform/Hosted/extractFeatures.ts
index 626b855bb..5bd84516e 100644
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -38,7 +38,6 @@ export type Features = {
   readonly copilotChatFixedMonacoEditorHeight: boolean;
   readonly enablePriorityBasedExecution: boolean;
   readonly disableConnectionStringLogin: boolean;
-  readonly enableLegacyMongoShell: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -109,7 +108,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
-    enableLegacyMongoShell: "true" === get("enablelegacymongoshell"),
   };
 }
 

From c1a28793ba04c000b29af923051dff3435118bad Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Tue, 23 Apr 2024 09:08:29 -0700
Subject: [PATCH 18/67] bind F5 to execute query (#1813)

---
 src/KeyboardShortcuts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
index 66efd68b4..023b7078e 100644
--- a/src/KeyboardShortcuts.tsx
+++ b/src/KeyboardShortcuts.tsx
@@ -54,7 +54,7 @@ const bindings: Record<KeyboardAction, string[]> = {
   // See https://www.npmjs.com/package/tinykeys#commonly-used-keys-and-codes for more information on the expected values for keyboard shortcuts.
 
   [KeyboardAction.NEW_QUERY]: ["$mod+J", "Alt+N Q"],
-  [KeyboardAction.EXECUTE_ITEM]: ["Shift+Enter"],
+  [KeyboardAction.EXECUTE_ITEM]: ["Shift+Enter", "F5"],
   [KeyboardAction.CANCEL_OR_DISCARD]: ["Escape"],
   [KeyboardAction.SAVE_ITEM]: ["$mod+S"],
   [KeyboardAction.OPEN_QUERY]: ["$mod+O"],

From d36e511b1873403a742bcdae1fd96f6963df9bdf Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Tue, 23 Apr 2024 10:15:48 -0700
Subject: [PATCH 19/67] Update d3, webpack-dev-server, typedoc dependencies.
 (#1812)

* Update d3, webpack-dev-server, typedoc dependencies.

* Fix unit test failures.

* Revert change to snapshot as it doesn't seem required when running in
github.
---
 jest.config.js    |   5 +-
 package-lock.json | 582 +++++++++++++++++++++++++++++++---------------
 package.json      |   6 +-
 3 files changed, 405 insertions(+), 188 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index c00efdac6..b4f660063 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -76,6 +76,10 @@ module.exports = {
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
     "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
+    "d3-force": "<rootDir>/node_modules/d3-force/dist/d3-force.min.js",
+    "d3-quadtree": "<rootDir>/node_modules/d3-quadtree/dist/d3-quadtree.min.js",
+    "d3-scale-chromatic": "<rootDir>/node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.min.js",
+    "d3-zoom": "<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -130,7 +134,6 @@ module.exports = {
 
   // The test environment that will be used for testing
   // testEnvironment: "jest-environment-jsdom",
-
   modulePaths: ["node_modules", "<rootDir>/src"],
 
   // Options that will be passed to the testEnvironment
diff --git a/package-lock.json b/package-lock.json
index 590a1c049..8dcfe5d50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,7 @@
         "copy-webpack-plugin": "11.0.0",
         "crossroads": "0.12.2",
         "css-element-queries": "1.1.1",
-        "d3": "6.1.1",
+        "d3": "7.8.5",
         "datatables.net-colreorder-dt": "1.7.0",
         "datatables.net-dt": "1.13.8",
         "date-fns": "1.29.0",
@@ -191,14 +191,14 @@
         "sinon": "3.2.1",
         "style-loader": "0.23.0",
         "ts-loader": "9.2.4",
-        "typedoc": "0.21.5",
+        "typedoc": "0.22.15",
         "typescript": "4.3.5",
         "url-loader": "4.1.1",
         "wait-on": "4.0.2",
         "webpack": "5.88.2",
         "webpack-bundle-analyzer": "4.9.1",
         "webpack-cli": "5.1.4",
-        "webpack-dev-server": "4.15.1"
+        "webpack-dev-server": "4.15.2"
       }
     },
     "canvas": {
@@ -17259,40 +17259,43 @@
       }
     },
     "node_modules/d3": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-6.1.1.tgz",
-      "integrity": "sha512-bJYW9wlS2uvP2EoMkcPptrUzLMHQKCbiSW+/la8iGSLZgs4KbI/f3Fch4RtnUA9PA+/nPlwyFYzTwDjX80Of8w==",
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
       "dependencies": {
-        "d3-array": "2",
-        "d3-axis": "2",
-        "d3-brush": "2",
-        "d3-chord": "2",
-        "d3-color": "2",
-        "d3-contour": "2",
-        "d3-delaunay": "5",
-        "d3-dispatch": "2",
-        "d3-drag": "2",
-        "d3-dsv": "2",
-        "d3-ease": "2",
-        "d3-fetch": "2",
-        "d3-force": "2",
-        "d3-format": "2",
-        "d3-geo": "2",
-        "d3-hierarchy": "2",
-        "d3-interpolate": "2",
-        "d3-path": "2",
-        "d3-polygon": "2",
-        "d3-quadtree": "2",
-        "d3-random": "2",
-        "d3-scale": "3",
-        "d3-scale-chromatic": "2",
-        "d3-selection": "2",
-        "d3-shape": "2",
-        "d3-time": "2",
-        "d3-time-format": "3",
-        "d3-timer": "2",
-        "d3-transition": "2",
-        "d3-zoom": "2"
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-array": {
@@ -17304,9 +17307,12 @@
       }
     },
     "node_modules/d3-axis": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
-      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-brush": {
       "version": "2.1.0",
@@ -17321,11 +17327,14 @@
       }
     },
     "node_modules/d3-chord": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
-      "integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
       "dependencies": {
-        "d3-path": "1 - 2"
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-collection": {
@@ -17339,19 +17348,36 @@
       "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
     },
     "node_modules/d3-contour": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
-      "integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
       "dependencies": {
-        "d3-array": "2"
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-delaunay": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
-      "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
       "dependencies": {
-        "delaunator": "4"
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-dispatch": {
@@ -17369,24 +17395,46 @@
       }
     },
     "node_modules/d3-dsv": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
-      "integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
       "dependencies": {
-        "commander": "2",
-        "iconv-lite": "0.4",
+        "commander": "7",
+        "iconv-lite": "0.6",
         "rw": "1"
       },
       "bin": {
-        "csv2json": "bin/dsv2json",
-        "csv2tsv": "bin/dsv2dsv",
-        "dsv2dsv": "bin/dsv2dsv",
-        "dsv2json": "bin/dsv2json",
-        "json2csv": "bin/json2dsv",
-        "json2dsv": "bin/json2dsv",
-        "json2tsv": "bin/json2dsv",
-        "tsv2csv": "bin/dsv2dsv",
-        "tsv2json": "bin/dsv2json"
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/d3-ease": {
@@ -17395,21 +17443,27 @@
       "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
     },
     "node_modules/d3-fetch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
-      "integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
       "dependencies": {
-        "d3-dsv": "1 - 2"
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-force": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
-      "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
       "dependencies": {
-        "d3-dispatch": "1 - 2",
-        "d3-quadtree": "1 - 2",
-        "d3-timer": "1 - 2"
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-format": {
@@ -17418,11 +17472,14 @@
       "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
     },
     "node_modules/d3-geo": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
-      "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
       "dependencies": {
-        "d3-array": "^2.5.0"
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-glyphedge": {
@@ -17436,9 +17493,12 @@
       "integrity": "sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w=="
     },
     "node_modules/d3-hierarchy": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
-      "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-interpolate": {
       "version": "2.0.1",
@@ -17449,9 +17509,12 @@
       }
     },
     "node_modules/d3-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
-      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-path-arrows": {
       "version": "0.4.0",
@@ -17473,19 +17536,28 @@
       "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
     },
     "node_modules/d3-polygon": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
-      "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-quadtree": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
-      "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-random": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
-      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-sankey-circular": {
       "version": "0.25.0",
@@ -17515,12 +17587,15 @@
       }
     },
     "node_modules/d3-scale-chromatic": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
-      "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
       "dependencies": {
-        "d3-color": "1 - 2",
-        "d3-interpolate": "1 - 2"
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-selection": {
@@ -17583,23 +17658,181 @@
       "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
     },
     "node_modules/d3-zoom": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
-      "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
       "dependencies": {
-        "d3-dispatch": "1 - 2",
-        "d3-drag": "2",
-        "d3-interpolate": "1 - 2",
-        "d3-selection": "2",
-        "d3-transition": "2"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3/node_modules/d3-shape": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
-      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
       "dependencies": {
-        "d3-path": "1 - 2"
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
       }
     },
     "node_modules/dashdash": {
@@ -18021,9 +18254,12 @@
       }
     },
     "node_modules/delaunator": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
-      "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
     },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
@@ -21452,36 +21688,6 @@
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
-    "node_modules/handlebars": {
-      "version": "4.7.8",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
-      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.5",
-        "neo-async": "^2.6.2",
-        "source-map": "^0.6.1",
-        "wordwrap": "^1.0.0"
-      },
-      "bin": {
-        "handlebars": "bin/handlebars"
-      },
-      "engines": {
-        "node": ">=0.4.7"
-      },
-      "optionalDependencies": {
-        "uglify-js": "^3.1.4"
-      }
-    },
-    "node_modules/handlebars/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -28937,9 +29143,9 @@
       }
     },
     "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
       "dev": true
     },
     "node_modules/jsonfile": {
@@ -29740,15 +29946,15 @@
       }
     },
     "node_modules/marked": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz",
-      "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
       "dev": true,
       "bin": {
-        "marked": "bin/marked"
+        "marked": "bin/marked.js"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 12"
       }
     },
     "node_modules/martinez-polygon-clipping": {
@@ -35900,6 +36106,11 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rst-selector-parser": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
@@ -36645,9 +36856,9 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
     "node_modules/shiki": {
-      "version": "0.9.15",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.9.15.tgz",
-      "integrity": "sha512-/Y0z9IzhJ8nD9nbceORCqu6NgT9X6I8Fk8c3SICHI5NbZRLdZYFaB233gwct9sU0vvSypyaL/qaKvzyQGJBZSw==",
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.10.1.tgz",
+      "integrity": "sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==",
       "dev": true,
       "dependencies": {
         "jsonc-parser": "^3.0.0",
@@ -38572,19 +38783,16 @@
       }
     },
     "node_modules/typedoc": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.21.5.tgz",
-      "integrity": "sha512-uRDRmYheE5Iju9Zz0X50pTASTpBorIHFt02F5Y8Dt4eBt55h3mwk1CBSY2+EfwBxY16N4Xm7f8KXhnfFZ0AmBw==",
+      "version": "0.22.15",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.15.tgz",
+      "integrity": "sha512-CMd1lrqQbFvbx6S9G6fL4HKp3GoIuhujJReWqlIvSb2T26vGai+8Os3Mde7Pn832pXYemd9BMuuYWhFpL5st0Q==",
       "dev": true,
       "dependencies": {
-        "glob": "^7.1.7",
-        "handlebars": "^4.7.7",
+        "glob": "^7.2.0",
         "lunr": "^2.3.9",
-        "marked": "^2.1.1",
-        "minimatch": "^3.0.0",
-        "progress": "^2.0.3",
-        "shiki": "^0.9.3",
-        "typedoc-default-themes": "^0.12.10"
+        "marked": "^4.0.12",
+        "minimatch": "^5.0.1",
+        "shiki": "^0.10.1"
       },
       "bin": {
         "typedoc": "bin/typedoc"
@@ -38593,16 +38801,28 @@
         "node": ">= 12.10.0"
       },
       "peerDependencies": {
-        "typescript": "4.0.x || 4.1.x || 4.2.x || 4.3.x"
+        "typescript": "4.0.x || 4.1.x || 4.2.x || 4.3.x || 4.4.x || 4.5.x || 4.6.x"
       }
     },
-    "node_modules/typedoc-default-themes": {
-      "version": "0.12.10",
-      "resolved": "https://registry.npmjs.org/typedoc-default-themes/-/typedoc-default-themes-0.12.10.tgz",
-      "integrity": "sha512-fIS001cAYHkyQPidWXmHuhs8usjP5XVJjWB8oZGqkTowZaz3v7g3KDZeeqE82FBrmkAnIBOY3jgy7lnPnqATbA==",
+    "node_modules/typedoc/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/typedoc/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": ">=10"
       }
     },
     "node_modules/typescript": {
@@ -39615,9 +39835,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "dependencies": {
         "colorette": "^2.0.10",
@@ -39691,9 +39911,9 @@
       }
     },
     "node_modules/webpack-dev-server": {
-      "version": "4.15.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
-      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
+      "version": "4.15.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
+      "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
       "dev": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
@@ -39724,7 +39944,7 @@
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
-        "webpack-dev-middleware": "^5.3.1",
+        "webpack-dev-middleware": "^5.3.4",
         "ws": "^8.13.0"
       },
       "bin": {
@@ -40201,12 +40421,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
-      "dev": true
-    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
diff --git a/package.json b/package.json
index 9ac61d243..3a2f8b742 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "copy-webpack-plugin": "11.0.0",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
-    "d3": "6.1.1",
+    "d3": "7.8.5",
     "datatables.net-colreorder-dt": "1.7.0",
     "datatables.net-dt": "1.13.8",
     "date-fns": "1.29.0",
@@ -186,14 +186,14 @@
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.21.5",
+    "typedoc": "0.22.15",
     "typescript": "4.3.5",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.9.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1"
+    "webpack-dev-server": "4.15.2"
   },
   "scripts": {
     "postinstall": "patch-package",

From 17207624a9e20d1d5d77ff0916f8176d9eca65f5 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Tue, 23 Apr 2024 15:46:41 -0700
Subject: [PATCH 20/67] add more intl-friendly tab nav shortcuts (#1814)

---
 src/KeyboardShortcuts.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
index 023b7078e..5ce91b8f2 100644
--- a/src/KeyboardShortcuts.tsx
+++ b/src/KeyboardShortcuts.tsx
@@ -67,8 +67,8 @@ const bindings: Record<KeyboardAction, string[]> = {
   [KeyboardAction.NEW_ITEM]: ["Alt+N I"],
   [KeyboardAction.DELETE_ITEM]: ["Alt+D"],
   [KeyboardAction.TOGGLE_COPILOT]: ["$mod+P"],
-  [KeyboardAction.SELECT_LEFT_TAB]: ["$mod+Alt+["],
-  [KeyboardAction.SELECT_RIGHT_TAB]: ["$mod+Alt+]"],
+  [KeyboardAction.SELECT_LEFT_TAB]: ["$mod+Alt+[", "$mod+Shift+F6"],
+  [KeyboardAction.SELECT_RIGHT_TAB]: ["$mod+Alt+]", "$mod+F6"],
   [KeyboardAction.CLOSE_TAB]: ["$mod+Alt+W"],
 };
 

From f4bcee54612b4821176609fec170e135d03e4ec7 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Tue, 23 Apr 2024 15:47:04 -0700
Subject: [PATCH 21/67] initialize new documents with their partition key
 (#1815)

* initialize new documents with their partition key

* refmt
---
 src/Explorer/Tabs/DocumentsTab.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts
index 1d13237d0..c79f7eb4f 100644
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -463,7 +463,22 @@ export default class DocumentsTab extends TabsBase {
 
   private initializeNewDocument = (): void => {
     this.selectedDocumentId(null);
-    const defaultDocument: string = this.renderObjectForEditor({ id: "replace_with_new_document_id" }, null, 4);
+    const newDocument: any = {
+      id: "replace_with_new_document_id",
+    };
+    this.partitionKeyProperties.forEach((partitionKeyProperty) => {
+      let target = newDocument;
+      const keySegments = partitionKeyProperty.split(".");
+      const finalSegment = keySegments.pop();
+
+      // Initialize nested objects as needed
+      keySegments.forEach((segment) => {
+        target = target[segment] = target[segment] || {};
+      });
+
+      target[finalSegment] = "replace_with_new_partition_key_value";
+    });
+    const defaultDocument: string = this.renderObjectForEditor(newDocument, null, 4);
     this.initialDocumentContent(defaultDocument);
     this.selectedDocumentContent.setBaseline(defaultDocument);
     this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);

From afc82845b5a5eb5fe4367400f6423f1a5a3c60d2 Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Wed, 24 Apr 2024 15:04:01 -0400
Subject: [PATCH 22/67] activate Token Controller (#1820)

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/Utils/EndpointUtils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Utils/EndpointUtils.ts b/src/Utils/EndpointUtils.ts
index e4c036d75..97e733b98 100644
--- a/src/Utils/EndpointUtils.ts
+++ b/src/Utils/EndpointUtils.ts
@@ -154,7 +154,11 @@ export const allowedNotebookServerUrls: ReadonlyArray<string> = [];
 export function useNewPortalBackendEndpoint(backendApi: string): boolean {
   // This maps backend APIs to the environments supported by the new backend.
   const newBackendApiEnvironmentMap: { [key: string]: string[] } = {
-    [BackendApi.GenerateToken]: [PortalBackendEndpoints.Development],
+    [BackendApi.GenerateToken]: [
+      PortalBackendEndpoints.Development,
+      PortalBackendEndpoints.Mpac,
+      PortalBackendEndpoints.Prod,
+    ],
     [BackendApi.PortalSettings]: [
       PortalBackendEndpoints.Development,
       PortalBackendEndpoints.Mpac,

From 618c5ec0fee67545eb53bc471cb45449972b4ff2 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 24 Apr 2024 15:11:51 -0700
Subject: [PATCH 23/67] Add button (and keyboard shortcut) to download query
 (#1817)

---
 .../Tabs/QueryTab/QueryTabComponent.tsx       | 46 +++++++++++++++----
 src/KeyboardShortcuts.tsx                     |  2 +
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 07f0a9eba..d5f4bf697 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -22,6 +22,7 @@ import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
 import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
 import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
+import DownloadQueryIcon from "../../../../images/DownloadQuery.svg";
 import CancelQueryIcon from "../../../../images/Entity_cancel.svg";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
 import SaveQueryIcon from "../../../../images/save-cosmos.svg";
@@ -225,6 +226,20 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     }
   };
 
+  public onDownloadQueryClick = (): void => {
+    const text = this.getCurrentEditorQuery();
+    const queryFile = new File([text], `SavedQuery.txt`, { type: "text/plain" });
+
+    // It appears the most consistent to download a file from a blob is to create an anchor element and simulate clicking it
+    const blobUrl = URL.createObjectURL(queryFile);
+    const anchor = document.createElement("a");
+    anchor.href = blobUrl;
+    anchor.download = queryFile.name;
+    document.body.appendChild(anchor); // Must put the anchor in the document.
+    anchor.click();
+    document.body.removeChild(anchor); // Clean up the anchor.
+  };
+
   public onSaveQueryClick = (): void => {
     useSidePanel.getState().openSidePanel("Save Query", <SaveQueryPane explorer={this.props.collection.container} />);
   };
@@ -405,15 +420,28 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       });
     }
 
-    if (this.saveQueryButton.visible && configContext.platform !== Platform.Fabric) {
-      const label = "Save Query";
+    if (this.saveQueryButton.visible) {
+      if (configContext.platform !== Platform.Fabric) {
+        const label = "Save Query";
+        buttons.push({
+          iconSrc: SaveQueryIcon,
+          iconAlt: label,
+          keyboardAction: KeyboardAction.SAVE_ITEM,
+          onCommandClick: this.onSaveQueryClick,
+          commandButtonLabel: label,
+          ariaLabel: label,
+          hasPopup: false,
+          disabled: !this.saveQueryButton.enabled,
+        });
+      }
+
       buttons.push({
-        iconSrc: SaveQueryIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.SAVE_ITEM,
-        onCommandClick: this.onSaveQueryClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
+        iconSrc: DownloadQueryIcon,
+        iconAlt: "Download Query",
+        keyboardAction: KeyboardAction.DOWNLOAD_ITEM,
+        onCommandClick: this.onDownloadQueryClick,
+        commandButtonLabel: "Download Query",
+        ariaLabel: "Download Query",
         hasPopup: false,
         disabled: !this.saveQueryButton.enabled,
       });
@@ -525,6 +553,8 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       }
     }
 
+    this.saveQueryButton.enabled = newContent.length > 0;
+
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
   }
 
diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
index 5ce91b8f2..98f988038 100644
--- a/src/KeyboardShortcuts.tsx
+++ b/src/KeyboardShortcuts.tsx
@@ -29,6 +29,7 @@ export enum KeyboardAction {
   EXECUTE_ITEM = "EXECUTE_ITEM",
   CANCEL_OR_DISCARD = "CANCEL_OR_DISCARD",
   SAVE_ITEM = "SAVE_ITEM",
+  DOWNLOAD_ITEM = "DOWNLOAD_ITEM",
   OPEN_QUERY = "OPEN_QUERY",
   OPEN_QUERY_FROM_DISK = "OPEN_QUERY_FROM_DISK",
   NEW_SPROC = "NEW_SPROC",
@@ -57,6 +58,7 @@ const bindings: Record<KeyboardAction, string[]> = {
   [KeyboardAction.EXECUTE_ITEM]: ["Shift+Enter", "F5"],
   [KeyboardAction.CANCEL_OR_DISCARD]: ["Escape"],
   [KeyboardAction.SAVE_ITEM]: ["$mod+S"],
+  [KeyboardAction.DOWNLOAD_ITEM]: ["$mod+Shift+S"],
   [KeyboardAction.OPEN_QUERY]: ["$mod+O"],
   [KeyboardAction.OPEN_QUERY_FROM_DISK]: ["$mod+Shift+O"],
   [KeyboardAction.NEW_SPROC]: ["Alt+N P"],

From cbd5e6bf761b5469c63712ec6a451122e3dddcc1 Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Fri, 26 Apr 2024 14:55:47 -0400
Subject: [PATCH 24/67] open Legacy Mongo SHell with correct base URL in
 sovereign clouds (#1823)

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 .../Tabs/MongoShellTab/MongoShellTabComponent.tsx         | 4 ++--
 src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts       | 8 ++------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
index d3720cf41..052c81ce6 100644
--- a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
+++ b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
@@ -35,7 +35,7 @@ export interface IMongoShellTabAccessor {
 }
 
 export interface IMongoShellTabComponentStates {
-  url: URL;
+  url: string;
 }
 
 export interface IMongoShellTabComponentProps {
@@ -221,7 +221,7 @@ export default class MongoShellTabComponent extends Component<
         name="explorer"
         className="iframe"
         style={{ width: "100%", height: "100%", border: 0, padding: 0, margin: 0, overflow: "hidden" }}
-        src={this.state.url.toString()}
+        src={this.state.url}
         id={this.props.tabsBaseInstance.tabId}
         onLoad={(event) => this.setContentFocus(event)}
         title="Mongo Shell"
diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
index 0ecbcb83e..a3b49b373 100644
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
@@ -1,15 +1,11 @@
-import { configContext } from "ConfigContext";
 import { userContext } from "../../../UserContext";
 
-export function getMongoShellUrl(useMongoProxyEndpoint?: boolean): URL {
+export function getMongoShellUrl(useMongoProxyEndpoint?: boolean): string {
   const { databaseAccount: account } = userContext;
   const resourceId = account?.id;
   const accountName = account?.name;
   const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
   const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
-  const path: string = useMongoProxyEndpoint
-    ? `/mongoshell/index.html?${queryString}`
-    : `/mongoshell/indexv2.html?${queryString}`;
 
-  return new URL(path, configContext.hostedExplorerURL);
+  return useMongoProxyEndpoint ? `/mongoshell/index.html?${queryString}` : `/mongoshell/indexv2.html?${queryString}`;
 }

From f8f7ea34bdd156c8e7fd04c9945ae93652942d74 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Fri, 26 Apr 2024 14:09:55 -0500
Subject: [PATCH 25/67] Copilot rewording (#1824)

* Copilot rebranding to query advisor

* fix the subquery link
---
 src/Explorer/Panes/SettingsPane/SettingsPane.tsx    |  4 ++--
 src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx |  2 +-
 src/Explorer/QueryCopilot/QueryCopilotTab.tsx       |  6 +++---
 src/Explorer/SplashScreen/SplashScreen.tsx          |  4 ++--
 src/Explorer/Tabs/QueryTab/QueryResultSection.tsx   | 10 +++++++---
 src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx    |  6 +++---
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index 1f0eda4f7..9b2412c4b 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -630,7 +630,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 Enable sample database
                 <InfoTooltip>
                   This is a sample database and collection with synthetic product data you can use to explore using
-                  NoSQL queries and Copilot. This will appear as another database in the Data Explorer UI, and is
+                  NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and is
                   created by, and maintained by Microsoft at no cost to you.
                 </InfoTooltip>
               </div>
@@ -640,7 +640,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                   label: { padding: 0 },
                 }}
                 className="padding"
-                ariaLabel="Enable sample db for Copilot"
+                ariaLabel="Enable sample db for Query Advisor"
                 checked={copilotSampleDBEnabled}
                 onChange={handleSampleDatabaseChange}
               />
diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index 6aaebc926..6c54cd506 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -385,7 +385,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 hasSmallHeadline={true}
                 headline="Write a prompt"
               >
-                Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
+                Write a prompt here and Query Advisor will generate the query for you. You can also choose from our{" "}
                 <Link
                   onClick={() => {
                     setShowSamplePrompts(true);
diff --git a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
index 240881310..150f7ec5b 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
@@ -57,12 +57,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotProps> = ({ explorer }: Query
 
     const toggleCopilotButton = {
       iconSrc: QueryCommandIcon,
-      iconAlt: "Copilot",
+      iconAlt: "Query Advisor",
       onCommandClick: () => {
         toggleCopilot(true);
       },
-      commandButtonLabel: "Copilot",
-      ariaLabel: "Copilot",
+      commandButtonLabel: "Query Advisor",
+      ariaLabel: "Query Advisor",
       hasPopup: false,
       disabled: copilotActive,
     };
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index aa7e7dcd9..f4ebb9cd0 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -151,9 +151,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             {useQueryCopilot.getState().copilotEnabled && (
               <SplashScreenButton
                 imgSrc={CopilotIcon}
-                title={"Query faster with Copilot"}
+                title={"Query faster with Query Advisor"}
                 description={
-                  "Copilot is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
+                  "Query Advisor is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
                 }
                 onClick={() => {
                   const copilotVersion = userContext.features.copilotVersion;
diff --git a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
index fc93d98a1..30d2ed9c1 100644
--- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
@@ -381,9 +381,13 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
               <img className="paneErrorIcon" src={InfoColor} alt="Error" />
             </span>
             <span className="warningErrorDetailsLinkContainer">
-              We have detected you may be using a subquery. Non-correlated subqueries are not currently supported.
-              <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/sql-query-subquery">
-                Please see Cosmos sub query documentation for further information
+              We detected you may be using a subquery. To learn more about subqueries effectively,{" "}
+              <a
+                href="https://learn.microsoft.com/azure/cosmos-db/nosql/query/subquery"
+                target="_blank"
+                rel="noreferrer"
+              >
+                visit the documentation
               </a>
             </span>
           </div>
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index d5f4bf697..532ce4662 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -483,13 +483,13 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     if (this.props.copilotEnabled) {
       const toggleCopilotButton: CommandButtonComponentProps = {
         iconSrc: QueryCommandIcon,
-        iconAlt: "Copilot",
+        iconAlt: "Query Advisor",
         keyboardAction: KeyboardAction.TOGGLE_COPILOT,
         onCommandClick: () => {
           this._toggleCopilot(!this.state.copilotActive);
         },
-        commandButtonLabel: this.state.copilotActive ? "Disable Copilot" : "Enable Copilot",
-        ariaLabel: this.state.copilotActive ? "Disable Copilot" : "Enable Copilot",
+        commandButtonLabel: this.state.copilotActive ? "Disable Query Advisor" : "Enable Query Advisor",
+        ariaLabel: this.state.copilotActive ? "Disable Query Advisor" : "Enable Query Advisor",
         hasPopup: false,
       };
       buttons.push(toggleCopilotButton);

From b94ce28e96edd5b65896dec56a6baf833fba63cd Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Mon, 29 Apr 2024 22:23:49 +0530
Subject: [PATCH 26/67] [accessibility-2724013]:[Screen reader - Cosmos DB -
 Data Explorer -> Entities -> Add entity]: Screen reader announces incorrect
 role when focus lands on the "Edit" and "Delete" buttons. (#1822)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Common/TableEntity.tsx                                | 4 ++--
 .../GraphExplorerComponent/NodePropertiesComponent.tsx    | 4 ++--
 .../Graph/NewVertexComponent/NewVertexComponent.tsx       | 8 +++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Common/TableEntity.tsx b/src/Common/TableEntity.tsx
index f3d0b5244..eece32ecb 100644
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -142,7 +142,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
               <Image
                 {...imageProps}
                 src={EditIcon}
-                alt="editEntity"
+                alt={`Edit ${entityProperty} entity`}
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
@@ -156,7 +156,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
             <Image
               {...imageProps}
               src={DeleteIcon}
-              alt="delete entity"
+              alt={`Delete ${entityProperty} entity`}
               id="deleteEntity"
               onClick={onDeleteEntity}
               tabIndex={0}
diff --git a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
index 6b0472649..f67425696 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
@@ -349,7 +349,7 @@ export class NodePropertiesComponent extends React.Component<
           onActivated={this.setIsDeleteConfirm.bind(this, true)}
           aria-label="Delete this vertex"
         >
-          <img src={DeleteIcon} alt="Delete" />
+          <img src={DeleteIcon} alt="Delete" role="button" />
         </AccessibleElement>
       );
     } else {
@@ -406,7 +406,7 @@ export class NodePropertiesComponent extends React.Component<
               aria-label="Edit properties"
               onActivated={expandClickHandler}
             >
-              <img src={EditIcon} alt="Edit" />
+              <img src={EditIcon} alt="Edit" role="button" />
             </AccessibleElement>
           )}
 
diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
index de357989a..6b20cfcb0 100644
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -184,12 +184,18 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     className="rightPaneTrashIcon rightPaneBtns"
                     tabIndex={0}
                     role="button"
+                    aria-label={`Delete ${data.key}`}
                     onClick={(event: React.MouseEvent<HTMLDivElement>) => removeNewVertexProperty(event, index)}
                     onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) =>
                       removeNewVertexPropertyKeyPress(event, index)
                     }
                   >
-                    <img className="refreshcol rightPaneTrashIconImg" src={DeleteIcon} alt="Remove property" />
+                    <img
+                      aria-label="hidden"
+                      className="refreshcol rightPaneTrashIconImg"
+                      src={DeleteIcon}
+                      alt="Remove property"
+                    />
                   </div>
                 </div>
               </div>

From a08415e7bcf9683cee3e37459005972a5693b49a Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Mon, 29 Apr 2024 22:26:27 +0530
Subject: [PATCH 27/67] [3100018:[Programmatic Access - Azure Cosmos DB - Edit
 Property]: Text Area edit field does not have a label under 'Edit Property'
 pane. (#1819)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/Panes/Tables/AddTableEntityPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
index 9ad999aa0..7d73ccc1f 100644
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -261,6 +261,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
         <TextField
           multiline
           rows={5}
+          ariaLabel={entityAttributeProperty}
           value={entityAttributeValue}
           onChange={(event, newInput?: string) => {
             entityChange(newInput, selectedRow, "value");

From 92246144f710b2dcdc4e9b8613c54344aca7f753 Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Mon, 29 Apr 2024 16:25:58 -0400
Subject: [PATCH 28/67] Enable Legacy Mongo Shell in Fairfax (#1829)

* enable Mongo Proxy and LMS in sovereign clouds

* remove mooncake

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/Common/MongoProxyClient.ts                           | 1 +
 src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Common/MongoProxyClient.ts b/src/Common/MongoProxyClient.ts
index 907b0305e..d9aa0fb4c 100644
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -677,6 +677,7 @@ export function useMongoProxyEndpoint(api: string): boolean {
     MongoProxyEndpoints.Local,
     MongoProxyEndpoints.Mpac,
     MongoProxyEndpoints.Prod,
+    MongoProxyEndpoints.Fairfax,
   ];
   let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
   if (
diff --git a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
index 0c138ff61..8b16816ab 100644
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
@@ -3,7 +3,6 @@ import { updateUserContext, userContext } from "../../../UserContext";
 import { getMongoShellUrl } from "./getMongoShellUrl";
 
 const mongoBackendEndpoint = "https://localhost:1234";
-const hostedExplorerURL = "https://cosmos.azure.com/";
 
 describe("getMongoShellUrl", () => {
   let queryString = "";
@@ -13,7 +12,6 @@ describe("getMongoShellUrl", () => {
 
     updateConfigContext({
       BACKEND_ENDPOINT: mongoBackendEndpoint,
-      hostedExplorerURL: hostedExplorerURL,
       platform: Platform.Hosted,
     });
 

From b023250e67e834ee8485670a1605973d0db88936 Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:46:24 -0700
Subject: [PATCH 29/67] First set of changes for Notebooks removal. (#1816)

* First set of changes for Notebooks removal.

* Fix unit test snapshots.
---
 src/Contracts/ActionContracts.ts              |   5 -
 .../SettingsComponent.test.tsx.snap           |  16 -
 src/Explorer/Explorer.tsx                     | 612 +-----------------
 src/Explorer/Notebook/NotebookManager.tsx     |  27 +-
 src/Explorer/OpenActions/OpenActions.tsx      |  12 -
 .../CopyNotebookPane/CopyNotebookPane.tsx     | 154 -----
 .../CopyNotebookPaneComponent.tsx             | 120 ----
 .../GitHubReposPanel.test.tsx.snap            |   4 -
 .../StringInputPane.test.tsx.snap             |   4 -
 .../QueryCopilotTab.test.tsx.snap             |   4 -
 src/Explorer/SplashScreen/SplashScreen.tsx    |  28 +-
 src/Explorer/Tabs/NotebookV2Tab.ts            | 336 +---------
 src/Explorer/Tree/ResourceTree.tsx            | 432 +------------
 src/Explorer/Tree/ResourceTreeAdapter.tsx     | 497 +-------------
 src/Utils/GalleryUtils.ts                     |   2 -
 15 files changed, 11 insertions(+), 2242 deletions(-)
 delete mode 100644 src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
 delete mode 100644 src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

diff --git a/src/Contracts/ActionContracts.ts b/src/Contracts/ActionContracts.ts
index f8fc956e6..cf4b66ed6 100644
--- a/src/Contracts/ActionContracts.ts
+++ b/src/Contracts/ActionContracts.ts
@@ -68,10 +68,6 @@ export interface OpenPane extends DataExplorerAction {
   paneKind: PaneKind | string;
 }
 
-export interface OpenSampleNotebook extends DataExplorerAction {
-  path: string;
-}
-
 /**
  * The types of actions that the DataExplorer supports performing upon opening.
  */
@@ -80,5 +76,4 @@ export enum ActionType {
   OpenCollectionTab,
   OpenPane,
   TransmitCachedData,
-  OpenSampleNotebook,
 }
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index ab7abac11..b08834dd6 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -29,8 +29,6 @@ exports[`SettingsComponent renders 1`] = `
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -47,10 +45,8 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
-                "refreshNotebookList": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
-                  "copyNotebook": [Function],
                   "parameters": [Function],
                 },
               },
@@ -107,8 +103,6 @@ exports[`SettingsComponent renders 1`] = `
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -125,10 +119,8 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
-                "refreshNotebookList": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
-                  "copyNotebook": [Function],
                   "parameters": [Function],
                 },
               },
@@ -224,8 +216,6 @@ exports[`SettingsComponent renders 1`] = `
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -242,10 +232,8 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
-                "refreshNotebookList": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
-                  "copyNotebook": [Function],
                   "parameters": [Function],
                 },
               },
@@ -271,8 +259,6 @@ exports[`SettingsComponent renders 1`] = `
           }
           explorer={
             Explorer {
-              "_isInitializingNotebooks": false,
-              "_resetNotebookWorkspace": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isTabsContentExpanded": [Function],
               "onRefreshDatabasesKeyPress": [Function],
@@ -289,10 +275,8 @@ exports[`SettingsComponent renders 1`] = `
               "queriesClient": QueriesClient {
                 "container": [Circular],
               },
-              "refreshNotebookList": [Function],
               "resourceTree": ResourceTreeAdapter {
                 "container": [Circular],
-                "copyNotebook": [Function],
                 "parameters": [Function],
               },
             }
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index 4af478475..368168a4a 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1,4 +1,3 @@
-import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
@@ -16,7 +15,7 @@ import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
+import { Areas, ConnectionStatusType, HttpStatusCodes, PoolIdType } from "../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
 import { QueriesClient } from "../Common/QueriesClient";
@@ -32,34 +31,23 @@ import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
-import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
-import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import * as FileSystemUtil from "./Notebook/FileSystemUtil";
-import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
-import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
+import { NotebookContentItem } from "./Notebook/NotebookContentItem";
 import type NotebookManager from "./Notebook/NotebookManager";
-import { NotebookPaneContent } from "./Notebook/NotebookManager";
-import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { useNotebook } from "./Notebook/useNotebook";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
-import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
-import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
-import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
 import TerminalTab from "./Tabs/TerminalTab";
 import Database from "./Tree/Database";
@@ -87,7 +75,6 @@ export default class Explorer {
   // Notebooks
   public notebookManager?: NotebookManager;
 
-  private _isInitializingNotebooks: boolean;
   private notebookToImport: {
     name: string;
     content: string;
@@ -99,7 +86,6 @@ export default class Explorer {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    this._isInitializingNotebooks = false;
 
     this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
     useNotebook.subscribe(
@@ -205,12 +191,10 @@ export default class Explorer {
         container: this,
         resourceTree: this.resourceTree,
         refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
-        refreshNotebookList: () => this.refreshNotebookList(),
       });
     }
 
     this.refreshCommandBarButtons();
-    this.refreshNotebookList();
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -373,7 +357,6 @@ export default class Explorer {
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
-    this.refreshNotebookList();
   };
 
   // Facade
@@ -381,19 +364,6 @@ export default class Explorer {
     window.open(Constants.Urls.feedbackEmail, "_blank");
   };
 
-  public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
-    if (!databaseAccount) {
-      throw new Error("No database account specified");
-    }
-
-    if (this._isInitializingNotebooks) {
-      return;
-    }
-    this._isInitializingNotebooks = true;
-    this.refreshNotebookList();
-    this._isInitializingNotebooks = false;
-  }
-
   public async allocateContainer(poolId: PoolIdType, mode?: string): Promise<void> {
     const shouldUseNotebookStates = poolId === PoolIdType.DefaultPoolId ? true : false;
     const notebookServerInfo = shouldUseNotebookStates
@@ -472,8 +442,6 @@ export default class Explorer {
           ? useNotebook.getState().setIsAllocating(false)
           : useQueryCopilot.getState().setIsAllocatingContainer(false);
         this.refreshCommandBarButtons();
-        this.refreshNotebookList();
-        this._isInitializingNotebooks = false;
       }
     }
   }
@@ -510,104 +478,6 @@ export default class Explorer {
         .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
   }
 
-  public resetNotebookWorkspace(): void {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
-      handleError(
-        "Attempt to reset notebook workspace, but notebook is not enabled",
-        "Explorer/resetNotebookWorkspace",
-      );
-      return;
-    }
-    const dialogContent = useNotebook.getState().isPhoenixNotebooks
-      ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
-      : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
-
-    const resetConfirmationDialogProps: DialogProps = {
-      isModal: true,
-      title: "Reset Workspace",
-      subText: dialogContent,
-      primaryButtonText: "OK",
-      secondaryButtonText: "Cancel",
-      onPrimaryButtonClick: this._resetNotebookWorkspace,
-      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
-    };
-    useDialog.getState().openDialog(resetConfirmationDialogProps);
-  }
-
-  private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
-    if (!databaseAccount) {
-      return false;
-    }
-    try {
-      const { value: workspaces } = await listByDatabaseAccount(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-      );
-      return workspaces && workspaces.length > 0 && workspaces.some((workspace) => workspace.name === "default");
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
-      return false;
-    }
-  }
-
-  private _resetNotebookWorkspace = async () => {
-    useDialog.getState().closeDialog();
-    const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
-    let connectionStatus: ContainerConnectionInfo;
-    try {
-      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-      if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
-        const error = "No server endpoint detected";
-        Logger.logError(error, "NotebookContainerClient/resetWorkspace");
-        logConsoleError(error);
-        return;
-      }
-      TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-      });
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        useTabs.getState().closeAllNotebookTabs(true);
-        connectionStatus = {
-          status: ConnectionStatusType.Connecting,
-        };
-        useNotebook.getState().setConnectionInfo(connectionStatus);
-      }
-      const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
-      if (connectionInfo?.status !== HttpStatusCodes.OK) {
-        throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
-      }
-      if (!connectionInfo?.data?.phoenixServiceUrl) {
-        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
-      }
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        await this.setNotebookInfo(true, connectionInfo, connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-      }
-      logConsoleInfo("Successfully reset notebook workspace");
-      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-      });
-    } catch (error) {
-      logConsoleError(`Failed to reset notebook workspace: ${error}`);
-      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-        error: getErrorMessage(error),
-        errorStack: getErrorStack(error),
-      });
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        connectionStatus = {
-          status: ConnectionStatusType.Failed,
-        };
-        useNotebook.getState().resetContainerConnection(connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-      }
-      throw error;
-    } finally {
-      clearInProgressMessage();
-    }
-  };
-
   private getDeltaDatabases(
     updatedDatabaseList: DataModels.Database[],
     databases: ViewModels.Database[],
@@ -696,406 +566,6 @@ export default class Explorer {
     }
   }
 
-  public uploadFile(
-    name: string,
-    content: string,
-    parent: NotebookContentItem,
-    isGithubTree?: boolean,
-  ): Promise<NotebookContentItem> {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to upload notebook, but notebook is not enabled";
-      handleError(error, "Explorer/uploadFile");
-      throw new Error(error);
-    }
-
-    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent, isGithubTree);
-    promise
-      .then(() => this.resourceTree.triggerRender())
-      .catch((reason) => useDialog.getState().showOkModalDialog("Unable to upload file", getErrorMessage(reason)));
-    return promise;
-  }
-
-  public async importAndOpen(path: string): Promise<boolean> {
-    const name = NotebookUtil.getName(path);
-    const item = NotebookUtil.createNotebookContentItem(name, path, "file");
-    const parent = this.resourceTree.myNotebooksContentRoot;
-
-    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
-      const existingItem = _.find(parent.children, (node) => node.name === name);
-      if (existingItem) {
-        return this.openNotebook(existingItem);
-      }
-
-      const content = await this.readFile(item);
-      const uploadedItem = await this.uploadFile(name, content, parent);
-      return this.openNotebook(uploadedItem);
-    }
-
-    return Promise.resolve(false);
-  }
-
-  public async importAndOpenContent(name: string, content: string): Promise<boolean> {
-    const parent = this.resourceTree.myNotebooksContentRoot;
-
-    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
-      if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
-        this.notebookToImport = undefined; // we don't want to try opening this notebook again
-      }
-
-      const existingItem = _.find(parent.children, (node) => node.name === name);
-      if (existingItem) {
-        return this.openNotebook(existingItem);
-      }
-
-      const uploadedItem = await this.uploadFile(name, content, parent);
-      return this.openNotebook(uploadedItem);
-    }
-
-    this.notebookToImport = { name, content }; // we'll try opening this notebook later on
-    return Promise.resolve(false);
-  }
-
-  public async publishNotebook(
-    name: string,
-    content: NotebookPaneContent,
-    notebookContentRef?: string,
-    onTakeSnapshot?: (request: SnapshotRequest) => void,
-    onClosePanel?: () => void,
-  ): Promise<void> {
-    if (this.notebookManager) {
-      await this.notebookManager.openPublishNotebookPane(
-        name,
-        content,
-        notebookContentRef,
-        onTakeSnapshot,
-        onClosePanel,
-      );
-    }
-  }
-
-  public copyNotebook(name: string, content: string): void {
-    this.notebookManager?.openCopyNotebookPane(name, content);
-  }
-
-  /**
-   * Note: To keep it simple, this creates a disconnected NotebookContentItem that is not connected to the resource tree.
-   * Connecting it to a tree possibly requires the intermediate missing folders if the item is nested in a subfolder.
-   * Manually creating the missing folders between the root and its parent dir would break the UX: expanding a folder
-   * will not fetch its content if the children array exists (and has only one child which was manually created).
-   * Fetching the intermediate folders possibly involves a few chained async calls which isn't ideal.
-   *
-   * @param name
-   * @param path
-   */
-  public createNotebookContentItemFile(name: string, path: string): NotebookContentItem {
-    return NotebookUtil.createNotebookContentItem(name, path, "file");
-  }
-
-  public async openNotebook(notebookContentItem: NotebookContentItem): Promise<boolean> {
-    if (!notebookContentItem || !notebookContentItem.path) {
-      throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
-    }
-    if (notebookContentItem.type === NotebookContentItemType.Notebook && useNotebook.getState().isPhoenixNotebooks) {
-      await this.allocateContainer(PoolIdType.DefaultPoolId);
-    }
-
-    const notebookTabs = useTabs
-      .getState()
-      .getTabs(
-        ViewModels.CollectionTabKind.NotebookV2,
-        (tab) =>
-          (tab as NotebookV2Tab).notebookPath &&
-          FileSystemUtil.isPathEqual((tab as NotebookV2Tab).notebookPath(), notebookContentItem.path),
-      ) as NotebookV2Tab[];
-    let notebookTab = notebookTabs && notebookTabs[0];
-
-    if (notebookTab) {
-      useTabs.getState().activateTab(notebookTab);
-    } else {
-      const options: NotebookTabOptions = {
-        account: userContext.databaseAccount,
-        tabKind: ViewModels.CollectionTabKind.NotebookV2,
-        node: undefined,
-        title: notebookContentItem.name,
-        tabPath: notebookContentItem.path,
-        collection: undefined,
-        masterKey: userContext.masterKey || "",
-        isTabsContentExpanded: ko.observable(true),
-        onLoadStartKey: undefined,
-        container: this,
-        notebookContentItem,
-      };
-
-      try {
-        const NotebookTabV2 = await import(/* webpackChunkName: "NotebookV2Tab" */ "./Tabs/NotebookV2Tab");
-        notebookTab = new NotebookTabV2.default(options);
-        useTabs.getState().activateNewTab(notebookTab);
-      } catch (reason) {
-        console.error("Import NotebookV2Tab failed!", reason);
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  public renameNotebook(notebookFile: NotebookContentItem, isGithubTree?: boolean): void {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to rename notebook, but notebook is not enabled";
-      handleError(error, "Explorer/renameNotebook");
-      throw new Error(error);
-    }
-
-    // Don't delete if tab is open to avoid accidental deletion
-    const openedNotebookTabs = useTabs
-      .getState()
-      .getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
-        return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
-      });
-    if (openedNotebookTabs.length > 0) {
-      useDialog
-        .getState()
-        .showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
-    } else {
-      useSidePanel.getState().openSidePanel(
-        "Rename Notebook",
-        <StringInputPane
-          closePanel={() => {
-            useSidePanel.getState().closeSidePanel();
-            this.resourceTree.triggerRender();
-          }}
-          inputLabel="Enter new notebook name"
-          submitButtonLabel="Rename"
-          errorMessage="Could not rename notebook"
-          inProgressMessage="Renaming notebook to"
-          successMessage="Renamed notebook to"
-          paneTitle="Rename Notebook"
-          defaultInput={FileSystemUtil.stripExtension(notebookFile.name, "ipynb")}
-          onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input, isGithubTree)
-          }
-          notebookFile={notebookFile}
-        />,
-      );
-    }
-  }
-
-  public onCreateDirectory(parent: NotebookContentItem, isGithubTree?: boolean): void {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to create notebook directory, but notebook is not enabled";
-      handleError(error, "Explorer/onCreateDirectory");
-      throw new Error(error);
-    }
-
-    useSidePanel.getState().openSidePanel(
-      "Create new directory",
-      <StringInputPane
-        closePanel={() => {
-          useSidePanel.getState().closeSidePanel();
-          this.resourceTree.triggerRender();
-        }}
-        errorMessage="Could not create directory "
-        inProgressMessage="Creating directory "
-        successMessage="Created directory "
-        inputLabel="Enter new directory name"
-        paneTitle="Create new directory"
-        submitButtonLabel="Create"
-        defaultInput=""
-        onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input, isGithubTree)
-        }
-        notebookFile={parent}
-      />,
-    );
-  }
-
-  public readFile(notebookFile: NotebookContentItem): Promise<string> {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to read file, but notebook is not enabled";
-      handleError(error, "Explorer/downloadFile");
-      throw new Error(error);
-    }
-
-    return this.notebookManager?.notebookContentClient.readFileContent(notebookFile.path);
-  }
-
-  public downloadFile(notebookFile: NotebookContentItem): Promise<void> {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to download file, but notebook is not enabled";
-      handleError(error, "Explorer/downloadFile");
-      throw new Error(error);
-    }
-
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Downloading ${notebookFile.path}`);
-
-    return this.notebookManager?.notebookContentClient.readFileContent(notebookFile.path).then(
-      (content: string) => {
-        const blob = stringToBlob(content, "text/plain");
-        if (navigator.msSaveBlob) {
-          // for IE and Edge
-          navigator.msSaveBlob(blob, notebookFile.name);
-        } else {
-          const downloadLink: HTMLAnchorElement = document.createElement("a");
-          const url = URL.createObjectURL(blob);
-          downloadLink.href = url;
-          downloadLink.target = "_self";
-          downloadLink.download = notebookFile.name;
-
-          // for some reason, FF displays the download prompt only when
-          // the link is added to the dom so we add and remove it
-          document.body.appendChild(downloadLink);
-          downloadLink.click();
-          downloadLink.remove();
-        }
-
-        clearMessage();
-      },
-      (error) => {
-        logConsoleError(`Could not download notebook ${getErrorMessage(error)}`);
-        clearMessage();
-      },
-    );
-  }
-
-  private refreshNotebookList = async (): Promise<void> => {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      return;
-    }
-
-    await this.resourceTree.initialize();
-    await useNotebook.getState().initializeNotebooksTree(this.notebookManager);
-
-    this.notebookManager?.refreshPinnedRepos();
-    if (this.notebookToImport) {
-      this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
-    }
-  };
-
-  public deleteNotebookFile(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to delete notebook file, but notebook is not enabled";
-      handleError(error, "Explorer/deleteNotebookFile");
-      throw new Error(error);
-    }
-
-    // Don't delete if tab is open to avoid accidental deletion
-    const openedNotebookTabs = useTabs
-      .getState()
-      .getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
-        return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
-      });
-    if (openedNotebookTabs.length > 0) {
-      useDialog
-        .getState()
-        .showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
-      return Promise.reject();
-    }
-
-    if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
-      useDialog.getState().openDialog({
-        isModal: true,
-        title: "Unable to delete file",
-        subText: "Directory is not empty.",
-        primaryButtonText: "Close",
-        secondaryButtonText: undefined,
-        onPrimaryButtonClick: () => useDialog.getState().closeDialog(),
-        onSecondaryButtonClick: undefined,
-      });
-      return Promise.reject();
-    }
-
-    return this.notebookManager?.notebookContentClient.deleteContentItem(item, isGithubTree).then(
-      () => logConsoleInfo(`Successfully deleted: ${item.path}`),
-      (reason) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`),
-    );
-  }
-
-  /**
-   * This creates a new notebook file, then opens the notebook
-   */
-  public async onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to create new notebook, but notebook is not enabled";
-      handleError(error, "Explorer/onNewNotebookClicked");
-      throw new Error(error);
-    }
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      if (isGithubTree) {
-        await this.allocateContainer(PoolIdType.DefaultPoolId);
-        parent = parent || this.resourceTree.myNotebooksContentRoot;
-        this.createNewNoteBook(parent, isGithubTree);
-      } else {
-        useDialog.getState().showOkCancelModalDialog(
-          Notebook.newNotebookModalTitle,
-          undefined,
-          "Create",
-          async () => {
-            await this.allocateContainer(PoolIdType.DefaultPoolId);
-            parent = parent || this.resourceTree.myNotebooksContentRoot;
-            this.createNewNoteBook(parent, isGithubTree);
-          },
-          "Cancel",
-          undefined,
-          this.getNewNoteWarningText(),
-        );
-      }
-    } else {
-      parent = parent || this.resourceTree.myNotebooksContentRoot;
-      this.createNewNoteBook(parent, isGithubTree);
-    }
-  }
-
-  private getNewNoteWarningText(): JSX.Element {
-    return (
-      <>
-        <p>{Notebook.newNotebookModalContent1}</p>
-        <br />
-        <p>
-          {Notebook.newNotebookModalContent2}
-          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
-            {Notebook.learnMore}
-          </Link>
-        </p>
-      </>
-    );
-  }
-
-  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
-    const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
-      dataExplorerArea: Constants.Areas.Notebook,
-    });
-
-    this.notebookManager?.notebookContentClient
-      .createNewNotebookFile(parent, isGithubTree)
-      .then((newFile: NotebookContentItem) => {
-        logConsoleInfo(`Successfully created: ${newFile.name}`);
-        TelemetryProcessor.traceSuccess(
-          Action.CreateNewNotebook,
-          {
-            dataExplorerArea: Constants.Areas.Notebook,
-          },
-          startKey,
-        );
-        return this.openNotebook(newFile);
-      })
-      .then(() => this.resourceTree.triggerRender())
-      .catch((error) => {
-        const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
-        logConsoleError(errorMessage);
-        TelemetryProcessor.traceFailure(
-          Action.CreateNewNotebook,
-          {
-            dataExplorerArea: Constants.Areas.Notebook,
-            error: errorMessage,
-            errorStack: getErrorStack(error),
-          },
-          startKey,
-        );
-      })
-      .finally(clearInProgressMessage);
-  }
-
   // TODO: Delete this function when ResourceTreeAdapter is removed.
   public async refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
@@ -1252,32 +722,6 @@ export default class Explorer {
     }
   }
 
-  public async handleOpenFileAction(path: string): Promise<void> {
-    if (useNotebook.getState().isPhoenixNotebooks === undefined) {
-      await useNotebook.getState().getPhoenixStatus();
-    }
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      await this.allocateContainer(PoolIdType.DefaultPoolId);
-    }
-
-    // We still use github urls like https://github.com/Azure-Samples/cosmos-notebooks/blob/master/CSharp_quickstarts/GettingStarted_CSharp.ipynb
-    // when launching a notebook quickstart from Portal. In future we should just use gallery id and use Juno to fetch instead of directly
-    // calling GitHub. For now convert this url to a raw url and download content.
-    const gitHubInfo = fromContentUri(path);
-    if (gitHubInfo) {
-      const rawUrl = toRawContentUri(gitHubInfo.owner, gitHubInfo.repo, gitHubInfo.branch, gitHubInfo.path);
-      const response = await fetch(rawUrl);
-      if (response.status === Constants.HttpStatusCodes.OK) {
-        this.notebookToImport = {
-          name: NotebookUtil.getName(path),
-          content: await response.text(),
-        };
-
-        this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
-      }
-    }
-  }
-
   public openUploadItemsPanePane(): void {
     useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
   }
@@ -1287,54 +731,6 @@ export default class Explorer {
       .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
-  public openUploadFilePanel(parent?: NotebookContentItem): void {
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      useDialog.getState().showOkCancelModalDialog(
-        Notebook.newNotebookUploadModalTitle,
-        undefined,
-        "Upload",
-        async () => {
-          await this.allocateContainer(PoolIdType.DefaultPoolId);
-          parent = parent || this.resourceTree.myNotebooksContentRoot;
-          this.uploadFilePanel(parent);
-        },
-        "Cancel",
-        undefined,
-        this.getNewNoteWarningText(),
-      );
-    } else {
-      parent = parent || this.resourceTree.myNotebooksContentRoot;
-      this.uploadFilePanel(parent);
-    }
-  }
-
-  private uploadFilePanel(parent?: NotebookContentItem): void {
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Upload file to notebook server",
-        <UploadFilePane uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)} />,
-      );
-  }
-
-  public getDownloadModalConent(fileName: string): JSX.Element {
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      return (
-        <>
-          <p>{Notebook.galleryNotebookDownloadContent1}</p>
-          <br />
-          <p>
-            {Notebook.galleryNotebookDownloadContent2}
-            <Link href={Notebook.cosmosNotebookGitDocumentationUrl} target="_blank">
-              {Notebook.learnMore}
-            </Link>
-          </p>
-        </>
-      );
-    }
-    return <p> Download {fileName} from gallery as a copy to your notebooks to run and/or edit the notebook. </p>;
-  }
-
   public async refreshExplorer(): Promise<void> {
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
@@ -1359,10 +755,6 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      await this.initNotebooks(userContext.databaseAccount);
-    }
-
     await this.refreshSampleData();
   }
 
diff --git a/src/Explorer/Notebook/NotebookManager.tsx b/src/Explorer/Notebook/NotebookManager.tsx
index 3ccbefcaf..45afe6061 100644
--- a/src/Explorer/Notebook/NotebookManager.tsx
+++ b/src/Explorer/Notebook/NotebookManager.tsx
@@ -12,15 +12,13 @@ import * as Logger from "../../Common/Logger";
 import { GitHubClient } from "../../GitHub/GitHubClient";
 import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import { getFullName } from "../../Utils/UserUtils";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
-import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
 import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import { PublishNotebookPane } from "../Panes/PublishNotebookPane/PublishNotebookPane";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
@@ -40,7 +38,6 @@ export interface NotebookManagerOptions {
   container: Explorer;
   resourceTree: ResourceTreeAdapter;
   refreshCommandBarButtons: () => void;
-  refreshNotebookList: () => void;
 }
 
 export default class NotebookManager {
@@ -81,10 +78,6 @@ export default class NotebookManager {
       contents.JupyterContentProvider,
     );
 
-    this.notebookClient = new NotebookContainerClient(() =>
-      this.params.container.initNotebooks(userContext?.databaseAccount),
-    );
-
     this.notebookContentClient = new NotebookContentClient(this.notebookContentProvider);
 
     this.gitHubOAuthService.getTokenObservable().subscribe((token) => {
@@ -106,11 +99,9 @@ export default class NotebookManager {
       }
 
       this.params.refreshCommandBarButtons();
-      this.params.refreshNotebookList();
     });
 
     this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
-      this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
       this.params.resourceTree.triggerRender();
       useNotebook.getState().initializeGitHubRepos(pinnedRepos);
     });
@@ -149,22 +140,6 @@ export default class NotebookManager {
       );
   }
 
-  public openCopyNotebookPane(name: string, content: string): void {
-    const { container } = this.params;
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Copy Notebook",
-        <CopyNotebookPane
-          container={container}
-          junoClient={this.junoClient}
-          gitHubOAuthService={this.gitHubOAuthService}
-          name={name}
-          content={content}
-        />,
-      );
-  }
-
   // Octokit's error handler uses any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private onGitHubClientError = (error: any): void => {
diff --git a/src/Explorer/OpenActions/OpenActions.tsx b/src/Explorer/OpenActions/OpenActions.tsx
index f3ef288c8..e2059cdba 100644
--- a/src/Explorer/OpenActions/OpenActions.tsx
+++ b/src/Explorer/OpenActions/OpenActions.tsx
@@ -195,17 +195,5 @@ export function handleOpenAction(
     return true;
   }
 
-  if (
-    action.actionType === ActionContracts.ActionType.OpenSampleNotebook ||
-    action.actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenSampleNotebook]
-  ) {
-    openFile(action as ActionContracts.OpenSampleNotebook, explorer);
-    return true;
-  }
-
   return false;
 }
-
-function openFile(action: ActionContracts.OpenSampleNotebook, explorer: Explorer) {
-  explorer.handleOpenFileAction(decodeURIComponent(action.path));
-}
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
deleted file mode 100644
index 0f7927b3b..000000000
--- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { IDropdownOption } from "@fluentui/react";
-import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
-import { HttpStatusCodes, PoolIdType } from "../../../Common/Constants";
-import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
-import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
-import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
-import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { useSidePanel } from "../../../hooks/useSidePanel";
-import Explorer from "../../Explorer";
-import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
-import { useNotebook } from "../../Notebook/useNotebook";
-import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
-
-interface Location {
-  type: "MyNotebooks" | "GitHub";
-
-  // GitHub
-  owner?: string;
-  repo?: string;
-  branch?: string;
-}
-export interface CopyNotebookPanelProps {
-  name: string;
-  content: string;
-  container: Explorer;
-  junoClient: JunoClient;
-  gitHubOAuthService: GitHubOAuthService;
-}
-
-export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
-  name,
-  content,
-  container,
-  junoClient,
-  gitHubOAuthService,
-}: CopyNotebookPanelProps) => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
-  const [isExecuting, setIsExecuting] = useState<boolean>();
-  const [formError, setFormError] = useState<string>("");
-  const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
-  const [selectedLocation, setSelectedLocation] = useState<Location>();
-
-  useEffect(() => {
-    open();
-  }, []);
-
-  const open = async (): Promise<void> => {
-    if (gitHubOAuthService.isLoggedIn()) {
-      const response = await junoClient.getPinnedRepos(gitHubOAuthService.getTokenObservable()()?.scope);
-      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
-        handleError(`Received HTTP ${response.status} when fetching pinned repos`, "CopyNotebookPaneAdapter/submit");
-      }
-
-      if (response.data?.length > 0) {
-        setPinnedRepos(response.data);
-      }
-    }
-  };
-
-  const submit = async (): Promise<void> => {
-    let destination: string = selectedLocation?.type;
-    let clearMessage: () => void;
-    setIsExecuting(true);
-
-    try {
-      if (!selectedLocation) {
-        throw new Error(`No location selected`);
-      }
-
-      if (selectedLocation.type === "GitHub") {
-        destination = `${destination} - ${GitHubUtils.toRepoFullName(
-          selectedLocation.owner,
-          selectedLocation.repo,
-        )} - ${selectedLocation.branch}`;
-      } else if (selectedLocation.type === "MyNotebooks" && useNotebook.getState().isPhoenixNotebooks) {
-        destination = useNotebook.getState().notebookFolderName;
-      }
-
-      clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);
-
-      const notebookContentItem = await copyNotebook(selectedLocation);
-      if (!notebookContentItem) {
-        throw new Error(`Failed to upload ${name}`);
-      }
-
-      NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${name} to ${destination}`);
-      closeSidePanel();
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      setFormError(`Failed to copy ${name} to ${destination}`);
-      handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
-    } finally {
-      clearMessage && clearMessage();
-      setIsExecuting(false);
-    }
-  };
-
-  const copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
-    let parent: NotebookContentItem;
-    let isGithubTree: boolean;
-    switch (location.type) {
-      case "MyNotebooks":
-        parent = {
-          name: useNotebook.getState().notebookFolderName,
-          path: useNotebook.getState().notebookBasePath,
-          type: NotebookContentItemType.Directory,
-        };
-        isGithubTree = false;
-        if (useNotebook.getState().isPhoenixNotebooks) {
-          await container.allocateContainer(PoolIdType.DefaultPoolId);
-        }
-        break;
-
-      case "GitHub":
-        parent = {
-          name: selectedLocation.branch,
-          path: GitHubUtils.toContentUri(selectedLocation.owner, selectedLocation.repo, selectedLocation.branch, ""),
-          type: NotebookContentItemType.Directory,
-        };
-        isGithubTree = true;
-        break;
-
-      default:
-        throw new Error(`Unsupported location type ${location.type}`);
-    }
-
-    return container.uploadFile(name, content, parent, isGithubTree);
-  };
-
-  const onDropDownChange = (_: FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
-    setSelectedLocation(option?.data);
-  };
-
-  const props: RightPaneFormProps = {
-    formError,
-    isExecuting: isExecuting,
-    submitButtonText: "OK",
-    onSubmit: () => submit(),
-  };
-
-  const copyNotebookPaneProps: CopyNotebookPaneProps = {
-    name,
-    pinnedRepos,
-    onDropDownChange: onDropDownChange,
-  };
-
-  return (
-    <RightPaneForm {...props}>
-      <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-    </RightPaneForm>
-  );
-};
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
deleted file mode 100644
index 5cd0cfdc1..000000000
--- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  Dropdown,
-  IDropdownOption,
-  IDropdownProps,
-  IRenderFunction,
-  ISelectableOption,
-  Label,
-  SelectableOptionMenuItemType,
-  Stack,
-  Text,
-} from "@fluentui/react";
-import { GitHubReposTitle } from "Explorer/Tree/ResourceTree";
-import React, { FormEvent, FunctionComponent } from "react";
-import { IPinnedRepo } from "../../../Juno/JunoClient";
-import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import { useNotebook } from "../../Notebook/useNotebook";
-
-interface Location {
-  type: "MyNotebooks" | "GitHub";
-
-  // GitHub
-  owner?: string;
-  repo?: string;
-  branch?: string;
-}
-
-export interface CopyNotebookPaneProps {
-  name: string;
-  pinnedRepos: IPinnedRepo[];
-  onDropDownChange: (_: FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
-}
-
-export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps> = ({
-  name,
-  pinnedRepos,
-  onDropDownChange,
-}: CopyNotebookPaneProps) => {
-  const BranchNameWhiteSpace = "   ";
-
-  const onRenderDropDownTitle: IRenderFunction<IDropdownOption[]> = (options: IDropdownOption[]): JSX.Element => {
-    return <span>{options.length && options[0].title}</span>;
-  };
-
-  const onRenderDropDownOption: IRenderFunction<ISelectableOption> = (option: ISelectableOption): JSX.Element => {
-    return <span style={{ whiteSpace: "pre-wrap" }}>{option.text}</span>;
-  };
-
-  const getDropDownOptions = (): IDropdownOption[] => {
-    const options: IDropdownOption[] = [];
-    options.push({
-      key: "MyNotebooks-Item",
-      text: useNotebook.getState().notebookFolderName,
-      title: useNotebook.getState().notebookFolderName,
-      data: {
-        type: "MyNotebooks",
-      } as Location,
-    });
-
-    if (pinnedRepos && pinnedRepos.length > 0) {
-      options.push({
-        key: "GitHub-Header-Divider",
-        text: undefined,
-        itemType: SelectableOptionMenuItemType.Divider,
-      });
-
-      options.push({
-        key: "GitHub-Header",
-        text: GitHubReposTitle,
-        itemType: SelectableOptionMenuItemType.Header,
-      });
-
-      pinnedRepos.forEach((pinnedRepo) => {
-        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
-        options.push({
-          key: `GitHub-Repo-${repoFullName}`,
-          text: repoFullName,
-          disabled: true,
-        });
-
-        pinnedRepo.branches.forEach((branch) =>
-          options.push({
-            key: `GitHub-Repo-${repoFullName}-${branch.name}`,
-            text: `${BranchNameWhiteSpace}${branch.name}`,
-            title: `${repoFullName} - ${branch.name}`,
-            data: {
-              type: "GitHub",
-              owner: pinnedRepo.owner,
-              repo: pinnedRepo.name,
-              branch: branch.name,
-            } as Location,
-          }),
-        );
-      });
-    }
-
-    return options;
-  };
-  const dropDownProps: IDropdownProps = {
-    label: "Location",
-    ariaLabel: "Location",
-    placeholder: "Select an option",
-    onRenderTitle: onRenderDropDownTitle,
-    onRenderOption: onRenderDropDownOption,
-    options: getDropDownOptions(),
-    onChange: onDropDownChange,
-  };
-
-  return (
-    <div className="paneMainContent">
-      <Stack tokens={{ childrenGap: 10 }}>
-        <Stack.Item>
-          <Label htmlFor="notebookName">Name</Label>
-          <Text id="notebookName">{name}</Text>
-        </Stack.Item>
-
-        <Dropdown {...dropDownProps} />
-      </Stack>
-    </div>
-  );
-};
diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
index 4a3a8942e..aa2137c42 100644
--- a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
+++ b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
@@ -17,8 +17,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
       addRepoProps={
         Object {
           "container": Explorer {
-            "_isInitializingNotebooks": false,
-            "_resetNotebookWorkspace": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
@@ -35,10 +33,8 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "queriesClient": QueriesClient {
               "container": [Circular],
             },
-            "refreshNotebookList": [Function],
             "resourceTree": ResourceTreeAdapter {
               "container": [Circular],
-              "copyNotebook": [Function],
               "parameters": [Function],
             },
           },
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index 8054abe19..566808f4b 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
@@ -7,8 +7,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   errorMessage="Could not create directory "
   explorer={
     Explorer {
-      "_isInitializingNotebooks": false,
-      "_resetNotebookWorkspace": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
@@ -25,10 +23,8 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
-      "refreshNotebookList": [Function],
       "resourceTree": ResourceTreeAdapter {
         "container": [Circular],
-        "copyNotebook": [Function],
         "parameters": [Function],
       },
     }
diff --git a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
index 26b52ff90..6d875fe2e 100644
--- a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
@@ -22,8 +22,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       databaseId="CopilotSampleDb"
       explorer={
         Explorer {
-          "_isInitializingNotebooks": false,
-          "_resetNotebookWorkspace": [Function],
           "isFixedCollectionWithSharedThroughputSupported": [Function],
           "isTabsContentExpanded": [Function],
           "onRefreshDatabasesKeyPress": [Function],
@@ -40,10 +38,8 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
           "queriesClient": QueriesClient {
             "container": [Circular],
           },
-          "refreshNotebookList": [Function],
           "resourceTree": ResourceTreeAdapter {
             "container": [Circular],
-            "copyNotebook": [Function],
             "parameters": [Function],
           },
         }
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index f4ebb9cd0..e9477e088 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -25,11 +25,9 @@ import * as React from "react";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
-import NotebookColorIcon from "../../../images/Notebooks.svg";
 import PowerShellIcon from "../../../images/PowerShell.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
 import { userContext } from "../../UserContext";
@@ -410,14 +408,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         },
       };
       heroes.push(launchQuickstartBtn);
-    } else if (useNotebook.getState().isPhoenixNotebooks) {
-      const newNotebookBtn = {
-        iconSrc: NotebookColorIcon,
-        title: "New notebook",
-        description: "Visualize your data stored in Azure Cosmos DB",
-        onClick: () => this.container.onNewNotebookClicked(),
-      };
-      heroes.push(newNotebookBtn);
     }
 
     heroes.push(this.getShellCard());
@@ -493,28 +483,12 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     };
   }
 
-  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
-    return {
-      info: path,
-      iconSrc: NotebookIcon,
-      title: name,
-      description: "Notebook",
-      onClick: () => {
-        const notebookItem = this.container.createNotebookContentItemFile(name, path);
-        notebookItem && this.container.openNotebook(notebookItem);
-      },
-    };
-  }
-
   private createRecentItems(): SplashScreenItem[] {
     return MostRecentActivity.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((activity) => {
       switch (activity.type) {
         default: {
-          const unknownActivity: never = activity;
-          throw new Error(`Unknown activity: ${unknownActivity}`);
+          throw new Error(`Unknown activity: ${activity}`);
         }
-        case MostRecentActivity.Type.OpenNotebook:
-          return this.decorateOpenNotebookActivity(activity);
 
         case MostRecentActivity.Type.OpenCollection:
           return this.decorateOpenCollectionActivity(activity);
diff --git a/src/Explorer/Tabs/NotebookV2Tab.ts b/src/Explorer/Tabs/NotebookV2Tab.ts
index 92e0e6958..fadb43258 100644
--- a/src/Explorer/Tabs/NotebookV2Tab.ts
+++ b/src/Explorer/Tabs/NotebookV2Tab.ts
@@ -1,31 +1,11 @@
-import { stringifyNotebook, toJS } from "@nteract/commutable";
 import * as ko from "knockout";
 import * as Q from "q";
-import { userContext } from "UserContext";
-import ClearAllOutputsIcon from "../../../images/notebook/Notebook-clear-all-outputs.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import CutIcon from "../../../images/notebook/Notebook-cut.svg";
-import NewCellIcon from "../../../images/notebook/Notebook-insert-cell.svg";
-import PasteIcon from "../../../images/notebook/Notebook-paste.svg";
-import RestartIcon from "../../../images/notebook/Notebook-restart.svg";
-import RunAllIcon from "../../../images/notebook/Notebook-run-all.svg";
-import RunIcon from "../../../images/notebook/Notebook-run.svg";
-import { default as InterruptKernelIcon, default as KillKernelIcon } from "../../../images/notebook/Notebook-stop.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import { useNotebookSnapshotStore } from "../../hooks/useNotebookSnapshotStore";
-import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "../Controls/Dialog";
-import * as CommandBarComponentButtonFactory from "../Menus/CommandBar/CommandBarComponentButtonFactory";
-import { KernelSpecsDisplay } from "../Notebook/NotebookClientV2";
-import * as CdbActions from "../Notebook/NotebookComponent/actions";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
-import { CdbAppState, SnapshotRequest } from "../Notebook/NotebookComponent/types";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
 import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
 
@@ -90,275 +70,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
   }
 
   protected getTabsButtons(): CommandButtonComponentProps[] {
-    const availableKernels = NotebookTabV2.clientManager.getAvailableKernelSpecs();
-    const isNotebookUntrusted = this.notebookComponentAdapter.isNotebookUntrusted();
-
-    const runBtnTooltip = isNotebookUntrusted ? NotebookUtil.UntrustedNotebookRunHint : undefined;
-
-    const saveLabel = "Save";
-    const copyToLabel = "Copy to ...";
-    const publishLabel = "Publish to gallery";
-    const kernelLabel = "No Kernel";
-    const runLabel = "Run";
-    const runActiveCellLabel = "Run Active Cell";
-    const runAllLabel = "Run All";
-    const interruptKernelLabel = "Interrupt Kernel";
-    const killKernelLabel = "Halt Kernel";
-    const restartKernelLabel = "Restart Kernel";
-    const clearLabel = "Clear outputs";
-    const newCellLabel = "New Cell";
-    const cellTypeLabel = "Cell Type";
-    const codeLabel = "Code";
-    const markdownLabel = "Markdown";
-    const rawLabel = "Raw";
-    const copyLabel = "Copy";
-    const cutLabel = "Cut";
-    const pasteLabel = "Paste";
-    const cellCodeType = "code";
-    const cellMarkdownType = "markdown";
-    const cellRawType = "raw";
-
-    const saveButtonChildren = [];
-    if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      saveButtonChildren.push({
-        iconName: copyToLabel,
-        onCommandClick: () => this.copyNotebook(),
-        commandButtonLabel: copyToLabel,
-        hasPopup: false,
-        disabled: false,
-        ariaLabel: copyToLabel,
-      });
-    }
-
-    if (userContext.features.publicGallery) {
-      saveButtonChildren.push({
-        iconName: "PublishContent",
-        onCommandClick: async () => await this.publishToGallery(),
-        commandButtonLabel: publishLabel,
-        hasPopup: false,
-        disabled: false,
-        ariaLabel: publishLabel,
-      });
-    }
-
-    let buttons: CommandButtonComponentProps[] = [
-      {
-        iconSrc: SaveIcon,
-        iconAlt: saveLabel,
-        onCommandClick: () => this.notebookComponentAdapter.notebookSave(),
-        commandButtonLabel: saveLabel,
-        hasPopup: false,
-        disabled: false,
-        ariaLabel: saveLabel,
-        children: saveButtonChildren.length && [
-          {
-            iconName: "Save",
-            onCommandClick: () => this.notebookComponentAdapter.notebookSave(),
-            commandButtonLabel: saveLabel,
-            hasPopup: false,
-            disabled: false,
-            ariaLabel: saveLabel,
-          },
-          ...saveButtonChildren,
-        ],
-      },
-      {
-        iconSrc: null,
-        iconAlt: kernelLabel,
-        onCommandClick: () => {},
-        commandButtonLabel: null,
-        hasPopup: false,
-        disabled: availableKernels.length < 1,
-        isDropdown: true,
-        dropdownPlaceholder: kernelLabel,
-        dropdownSelectedKey: this.notebookComponentAdapter.getSelectedKernelName(), //this.currentKernelName,
-        dropdownWidth: 100,
-        children: availableKernels.map(
-          (kernel: KernelSpecsDisplay) =>
-            ({
-              iconSrc: null,
-              iconAlt: kernel.displayName,
-              onCommandClick: () => this.notebookComponentAdapter.notebookChangeKernel(kernel.name),
-              commandButtonLabel: kernel.displayName,
-              dropdownItemKey: kernel.name,
-              hasPopup: false,
-              disabled: false,
-              ariaLabel: kernel.displayName,
-            }) as CommandButtonComponentProps,
-        ),
-        ariaLabel: kernelLabel,
-      },
-      {
-        iconSrc: RunIcon,
-        iconAlt: runLabel,
-        onCommandClick: () => {
-          this.notebookComponentAdapter.notebookRunAndAdvance();
-          this.traceTelemetry(Action.ExecuteCell);
-        },
-        commandButtonLabel: runLabel,
-        tooltipText: runBtnTooltip,
-        ariaLabel: runLabel,
-        hasPopup: false,
-        disabled: isNotebookUntrusted,
-        children: [
-          {
-            iconSrc: RunIcon,
-            iconAlt: runActiveCellLabel,
-            onCommandClick: () => {
-              this.notebookComponentAdapter.notebookRunAndAdvance();
-              this.traceTelemetry(Action.ExecuteCell);
-            },
-            commandButtonLabel: runActiveCellLabel,
-            hasPopup: false,
-            disabled: false,
-            ariaLabel: runActiveCellLabel,
-          },
-          {
-            iconSrc: RunAllIcon,
-            iconAlt: runAllLabel,
-            onCommandClick: () => {
-              this.notebookComponentAdapter.notebookRunAll();
-              this.traceTelemetry(Action.ExecuteAllCells);
-            },
-            commandButtonLabel: runAllLabel,
-            hasPopup: false,
-            disabled: false,
-            ariaLabel: runAllLabel,
-          },
-          {
-            iconSrc: InterruptKernelIcon,
-            iconAlt: interruptKernelLabel,
-            onCommandClick: () => this.notebookComponentAdapter.notebookInterruptKernel(),
-            commandButtonLabel: interruptKernelLabel,
-            hasPopup: false,
-            disabled: false,
-            ariaLabel: interruptKernelLabel,
-          },
-          {
-            iconSrc: KillKernelIcon,
-            iconAlt: killKernelLabel,
-            onCommandClick: () => this.notebookComponentAdapter.notebookKillKernel(),
-            commandButtonLabel: killKernelLabel,
-            hasPopup: false,
-            disabled: false,
-            ariaLabel: killKernelLabel,
-          },
-          {
-            iconSrc: RestartIcon,
-            iconAlt: restartKernelLabel,
-            onCommandClick: () => this.notebookComponentAdapter.notebookRestartKernel(),
-            commandButtonLabel: restartKernelLabel,
-            hasPopup: false,
-            disabled: false,
-            ariaLabel: restartKernelLabel,
-          },
-        ],
-      },
-      {
-        iconSrc: ClearAllOutputsIcon,
-        iconAlt: clearLabel,
-        onCommandClick: () => this.notebookComponentAdapter.notebookClearAllOutputs(),
-        commandButtonLabel: clearLabel,
-        hasPopup: false,
-        disabled: false,
-        ariaLabel: clearLabel,
-      },
-      {
-        iconSrc: NewCellIcon,
-        iconAlt: newCellLabel,
-        onCommandClick: () => this.notebookComponentAdapter.notebookInsertBelow(),
-        commandButtonLabel: newCellLabel,
-        ariaLabel: newCellLabel,
-        hasPopup: false,
-        disabled: false,
-      },
-      CommandBarComponentButtonFactory.createDivider(),
-      {
-        iconSrc: null,
-        iconAlt: null,
-        onCommandClick: () => {},
-        commandButtonLabel: null,
-        ariaLabel: cellTypeLabel,
-        hasPopup: false,
-        disabled: false,
-        isDropdown: true,
-        dropdownPlaceholder: cellTypeLabel,
-        dropdownSelectedKey: this.notebookComponentAdapter.getActiveCellTypeStr(),
-        dropdownWidth: 110,
-        children: [
-          {
-            iconSrc: null,
-            iconAlt: null,
-            onCommandClick: () => this.notebookComponentAdapter.notebookChangeCellType(cellCodeType),
-            commandButtonLabel: codeLabel,
-            ariaLabel: codeLabel,
-            dropdownItemKey: cellCodeType,
-            hasPopup: false,
-            disabled: false,
-          },
-          {
-            iconSrc: null,
-            iconAlt: null,
-            onCommandClick: () => this.notebookComponentAdapter.notebookChangeCellType(cellMarkdownType),
-            commandButtonLabel: markdownLabel,
-            ariaLabel: markdownLabel,
-            dropdownItemKey: cellMarkdownType,
-            hasPopup: false,
-            disabled: false,
-          },
-          {
-            iconSrc: null,
-            iconAlt: null,
-            onCommandClick: () => this.notebookComponentAdapter.notebookChangeCellType(cellRawType),
-            commandButtonLabel: rawLabel,
-            ariaLabel: rawLabel,
-            dropdownItemKey: cellRawType,
-            hasPopup: false,
-            disabled: false,
-          },
-        ],
-      },
-      {
-        iconSrc: CopyIcon,
-        iconAlt: copyLabel,
-        onCommandClick: () => this.notebookComponentAdapter.notebokCopy(),
-        commandButtonLabel: copyLabel,
-        ariaLabel: copyLabel,
-        hasPopup: false,
-        disabled: false,
-        children: [
-          {
-            iconSrc: CopyIcon,
-            iconAlt: copyLabel,
-            onCommandClick: () => this.notebookComponentAdapter.notebokCopy(),
-            commandButtonLabel: copyLabel,
-            ariaLabel: copyLabel,
-            hasPopup: false,
-            disabled: false,
-          },
-          {
-            iconSrc: CutIcon,
-            iconAlt: cutLabel,
-            onCommandClick: () => this.notebookComponentAdapter.notebookCut(),
-            commandButtonLabel: cutLabel,
-            ariaLabel: cutLabel,
-            hasPopup: false,
-            disabled: false,
-          },
-          {
-            iconSrc: PasteIcon,
-            iconAlt: pasteLabel,
-            onCommandClick: () => this.notebookComponentAdapter.notebookPaste(),
-            commandButtonLabel: pasteLabel,
-            ariaLabel: pasteLabel,
-            hasPopup: false,
-            disabled: false,
-          },
-        ],
-      },
-      // TODO: Uncomment when undo/redo is reimplemented in nteract
-    ];
-    return buttons;
+    return [];
   }
 
   protected buildCommandBarOptions(): void {
@@ -382,50 +94,4 @@ export default class NotebookTabV2 extends NotebookTabBase {
       sparkClusterConnectionInfo,
     );
   }
-
-  private publishToGallery = async () => {
-    TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
-      source: Source.CommandBarMenu,
-    });
-
-    const notebookReduxStore = NotebookTabV2.clientManager.getStore();
-    const unsubscribe = notebookReduxStore.subscribe(() => {
-      const cdbState = (notebookReduxStore.getState() as CdbAppState).cdb;
-      useNotebookSnapshotStore.setState({
-        snapshot: cdbState.notebookSnapshot?.imageSrc,
-        error: cdbState.notebookSnapshotError,
-      });
-    });
-
-    const notebookContent = this.notebookComponentAdapter.getContent();
-    const notebookContentRef = this.notebookComponentAdapter.contentRef;
-    const onPanelClose = (): void => {
-      unsubscribe();
-      useNotebookSnapshotStore.setState({
-        snapshot: undefined,
-        error: undefined,
-      });
-      notebookReduxStore.dispatch(CdbActions.takeNotebookSnapshot(undefined));
-    };
-
-    await this.container.publishNotebook(
-      notebookContent.name,
-      notebookContent.content,
-      notebookContentRef,
-      (request: SnapshotRequest) => notebookReduxStore.dispatch(CdbActions.takeNotebookSnapshot(request)),
-      onPanelClose,
-    );
-  };
-
-  private copyNotebook = () => {
-    const notebookContent = this.notebookComponentAdapter.getContent();
-    let content: string;
-    if (typeof notebookContent.content === "string") {
-      content = notebookContent.content;
-    } else {
-      content = stringifyNotebook(toJS(notebookContent.content));
-    }
-
-    this.container.copyNotebook(notebookContent.name, content);
-  };
 }
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index b5f759534..0933eac7b 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,42 +1,23 @@
-import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import { SampleDataTree } from "Explorer/Tree/SampleDataTree";
 import { getItemName } from "Utils/APITypeUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as React from "react";
 import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
-import DeleteIcon from "../../../images/delete.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
-import PublishIcon from "../../../images/notebook/publish_content.svg";
-import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { useDialog } from "../Controls/Dialog";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
+import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
-import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -45,391 +26,21 @@ import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
 
-export const MyNotebooksTitle = "My Notebooks";
-export const GitHubReposTitle = "GitHub repos";
-
 interface ResourceTreeProps {
   container: Explorer;
 }
 
 export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: ResourceTreeProps): JSX.Element => {
   const databases = useDatabases((state) => state.databases);
-  const {
-    isNotebookEnabled,
-    myNotebooksContentRoot,
-    galleryContentRoot,
-    gitHubNotebooksContentRoot,
-    updateNotebookItem,
-  } = useNotebook(
+  const { isNotebookEnabled } = useNotebook(
     (state) => ({
       isNotebookEnabled: state.isNotebookEnabled,
-      myNotebooksContentRoot: state.myNotebooksContentRoot,
-      galleryContentRoot: state.galleryContentRoot,
-      gitHubNotebooksContentRoot: state.gitHubNotebooksContentRoot,
-      updateNotebookItem: state.updateNotebookItem,
     }),
     shallow,
   );
-  const { activeTab, refreshActiveTab } = useTabs();
+  const { refreshActiveTab } = useTabs();
   const showScriptNodes =
     configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
-  const pseudoDirPath = "PsuedoDir";
-
-  const buildGalleryCallout = (): JSX.Element => {
-    if (
-      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
-      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
-    ) {
-      return undefined;
-    }
-
-    const calloutProps: ICalloutProps = {
-      calloutMaxWidth: 350,
-      ariaLabel: "New gallery",
-      role: "alertdialog",
-      gapSpace: 0,
-      target: ".galleryHeader",
-      directionalHint: DirectionalHint.leftTopEdge,
-      onDismiss: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-      },
-      setInitialFocus: true,
-    };
-
-    const openGalleryProps: ILinkProps = {
-      onClick: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        container.openGallery();
-      },
-    };
-
-    return (
-      <Callout {...calloutProps}>
-        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
-          <Text variant="xLarge" block>
-            New gallery
-          </Text>
-          <Text block>
-            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
-            contributors.
-          </Text>
-          <Link {...openGalleryProps}>Open gallery</Link>
-        </Stack>
-      </Callout>
-    );
-  };
-
-  const buildNotebooksTree = (): TreeNode => {
-    const notebooksTree: TreeNode = {
-      label: undefined,
-      isExpanded: true,
-      children: [],
-    };
-
-    if (!useNotebook.getState().isPhoenixNotebooks) {
-      notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
-    } else {
-      if (galleryContentRoot) {
-        notebooksTree.children.push(buildGalleryNotebooksTree());
-      }
-
-      if (
-        myNotebooksContentRoot &&
-        useNotebook.getState().isPhoenixNotebooks &&
-        useNotebook.getState().connectionInfo.status === ConnectionStatusType.Connected
-      ) {
-        notebooksTree.children.push(buildMyNotebooksTree());
-      }
-      if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-        // collapse all other notebook nodes
-        notebooksTree.children.forEach((node) => (node.isExpanded = false));
-        notebooksTree.children.push(buildGitHubNotebooksTree(true));
-      }
-    }
-    return notebooksTree;
-  };
-
-  const buildNotebooksTemporarilyDownTree = (): TreeNode => {
-    return {
-      label: Notebook.temporarilyDownMsg,
-      className: "clickDisabled",
-    };
-  };
-
-  const buildGalleryNotebooksTree = (): TreeNode => {
-    return {
-      label: "Gallery",
-      iconSrc: GalleryIcon,
-      className: "notebookHeader galleryHeader",
-      onClick: () => container.openGallery(),
-      isSelected: () => activeTab?.tabKind === ViewModels.CollectionTabKind.Gallery,
-    };
-  };
-
-  const buildMyNotebooksTree = (): TreeNode => {
-    const myNotebooksTree: TreeNode = buildNotebookDirectoryNode(
-      myNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        container.openNotebook(item);
-      },
-    );
-
-    myNotebooksTree.isExpanded = true;
-    myNotebooksTree.isAlphaSorted = true;
-    // Remove "Delete" menu item from context menu
-    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
-    return myNotebooksTree;
-  };
-
-  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
-    const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
-      gitHubNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        container.openNotebook(item);
-      },
-      true,
-    );
-    const manageGitContextMenu: TreeNodeMenuItem[] = [
-      {
-        label: "Manage GitHub settings",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Manage GitHub settings",
-              <GitHubReposPanel
-                explorer={container}
-                gitHubClientProp={container.notebookManager.gitHubClient}
-                junoClientProp={container.notebookManager.junoClient}
-              />,
-            ),
-      },
-      {
-        label: "Disconnect from GitHub",
-        onClick: () => {
-          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
-            dataExplorerArea: Areas.Notebook,
-          });
-          container.notebookManager?.gitHubOAuthService.logout();
-        },
-      },
-    ];
-    gitHubNotebooksTree.contextMenu = manageGitContextMenu;
-    gitHubNotebooksTree.isExpanded = true;
-    gitHubNotebooksTree.isAlphaSorted = true;
-
-    return gitHubNotebooksTree;
-  };
-
-  const buildChildNodes = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean,
-  ): TreeNode[] => {
-    if (!item || !item.children) {
-      return [];
-    } else {
-      return item.children.map((item) => {
-        const result =
-          item.type === NotebookContentItemType.Directory
-            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
-            : buildNotebookFileNode(item, onFileClick, isGithubTree);
-        result.timestamp = item.timestamp;
-        return result;
-      });
-    }
-  };
-
-  const buildNotebookFileNode = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean,
-  ): TreeNode => {
-    return {
-      label: item.name,
-      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
-      className: "notebookHeader",
-      onClick: () => onFileClick(item),
-      isSelected: () => {
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-                   */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: createFileContextMenu(container, item, isGithubTree),
-      data: item,
-    };
-  };
-
-  const createFileContextMenu = (
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean,
-  ): TreeNodeMenuItem[] => {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}"`,
-              "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
-              "Cancel",
-              undefined,
-            );
-        },
-      },
-      {
-        label: "Copy to ...",
-        iconSrc: CopyIcon,
-        onClick: () => copyNotebook(container, item),
-      },
-      {
-        label: "Download",
-        iconSrc: NotebookIcon,
-        onClick: () => container.downloadFile(item),
-      },
-    ];
-
-    if (item.type === NotebookContentItemType.Notebook && userContext.features.publicGallery) {
-      items.push({
-        label: "Publish to gallery",
-        iconSrc: PublishIcon,
-        onClick: async () => {
-          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
-            source: Source.ResourceTreeMenu,
-          });
-
-          const content = await container.readFile(item);
-          if (content) {
-            await container.publishNotebook(item.name, content);
-          }
-        },
-      });
-    }
-
-    // "Copy to ..." isn't needed if github locations are not available
-    if (!container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      items = items.filter((item) => item.label !== "Copy to ...");
-    }
-
-    return items;
-  };
-
-  const copyNotebook = async (container: Explorer, item: NotebookContentItem) => {
-    const content = await container.readFile(item);
-    if (content) {
-      container.copyNotebook(item.name, content);
-    }
-  };
-
-  const createDirectoryContextMenu = (
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean,
-  ): TreeNodeMenuItem[] => {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Refresh",
-        iconSrc: RefreshIcon,
-        onClick: () => loadSubitems(item, isGithubTree),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}?"`,
-              "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
-              "Cancel",
-              undefined,
-            );
-        },
-      },
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
-      },
-      {
-        label: "New Directory",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.onCreateDirectory(item, isGithubTree),
-      },
-      {
-        label: "Upload File",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.openUploadFilePanel(item),
-      },
-    ];
-
-    //disallow renaming of temporary notebook workspace
-    if (item?.path === useNotebook.getState().notebookBasePath) {
-      items = items.filter((item) => item.label !== "Rename");
-    }
-
-    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
-    if (GitHubUtils.fromContentUri(item.path)) {
-      items = items.filter(
-        (item) =>
-          item.label !== "Delete" &&
-          item.label !== "Rename" &&
-          item.label !== "New Directory" &&
-          item.label !== "Upload File",
-      );
-    }
-
-    return items;
-  };
-
-  const buildNotebookDirectoryNode = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean,
-  ): TreeNode => {
-    return {
-      label: item.name,
-      iconSrc: undefined,
-      className: "notebookHeader",
-      isAlphaSorted: true,
-      isLeavesParentsSeparate: true,
-      onClick: () => {
-        if (!item.children) {
-          loadSubitems(item, isGithubTree);
-        }
-      },
-      isSelected: () => {
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-                   */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
-      data: item,
-      children: buildChildNodes(item, onFileClick, isGithubTree),
-    };
-  };
 
   const buildDataTree = (): TreeNode => {
     const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
@@ -757,11 +368,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return traverse(schema);
   };
 
-  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
-    const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
-    updateNotebookItem(updatedItem, isGithubTree);
-  };
-
   const dataRootNode = buildDataTree();
   const isSampleDataEnabled =
     useQueryCopilot().copilotEnabled &&
@@ -775,46 +381,16 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {!isNotebookEnabled && !isSampleDataEnabled && (
         <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
       )}
-      {isNotebookEnabled && !isSampleDataEnabled && (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-
-          {/* {buildGalleryCallout()} */}
-        </>
-      )}
       {!isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+            <AccordionItemComponent title={"MY DATA"} isExpanded={true}>
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
             <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
           </AccordionComponent>
-
-          {/* {buildGalleryCallout()} */}
-        </>
-      )}
-      {isNotebookEnabled && isSampleDataEnabled && (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
-              <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
-            </AccordionItemComponent>
-            <AccordionItemComponent title={"NOTEBOOKS"}>
-              <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-
-          {/* {buildGalleryCallout()} */}
         </>
       )}
     </>
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.tsx b/src/Explorer/Tree/ResourceTreeAdapter.tsx
index b22f0f916..67fb54773 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -1,42 +1,21 @@
-import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import { getItemName } from "Utils/APITypeUtils";
 import * as ko from "knockout";
 import * as React from "react";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
-import DeleteIcon from "../../../images/delete.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
-import PublishIcon from "../../../images/notebook/publish_content.svg";
-import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { IPinnedRepo } from "../../Juno/JunoClient";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
-import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { useDialog } from "../Controls/Dialog";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
+import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
-import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -46,19 +25,8 @@ import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
 
 export class ResourceTreeAdapter implements ReactAdapter {
-  public static readonly MyNotebooksTitle = "My Notebooks";
-  public static readonly GitHubReposTitle = "GitHub repos";
-
-  private static readonly DataTitle = "DATA";
-  private static readonly NotebooksTitle = "NOTEBOOKS";
-  private static readonly PseudoDirPath = "PsuedoDir";
-
   public parameters: ko.Observable<number>;
 
-  public galleryContentRoot: NotebookContentItem;
-  public myNotebooksContentRoot: NotebookContentItem;
-  public gitHubNotebooksContentRoot: NotebookContentItem;
-
   public constructor(private container: Explorer) {
     this.parameters = ko.observable(Date.now());
 
@@ -76,111 +44,9 @@ export class ResourceTreeAdapter implements ReactAdapter {
     this.triggerRender();
   }
 
-  private traceMyNotebookTreeInfo() {
-    const myNotebooksTree = this.myNotebooksContentRoot;
-    if (myNotebooksTree.children) {
-      // Count 1st generation children (tree is lazy-loaded)
-      const nodeCounts = { files: 0, notebooks: 0, directories: 0 };
-      myNotebooksTree.children.forEach((treeNode) => {
-        switch ((treeNode as NotebookContentItem).type) {
-          case NotebookContentItemType.File:
-            nodeCounts.files++;
-            break;
-          case NotebookContentItemType.Directory:
-            nodeCounts.directories++;
-            break;
-          case NotebookContentItemType.Notebook:
-            nodeCounts.notebooks++;
-            break;
-          default:
-            break;
-        }
-      });
-      TelemetryProcessor.trace(Action.RefreshResourceTreeMyNotebooks, ActionModifiers.Mark, { ...nodeCounts });
-    }
-  }
-
   public renderComponent(): JSX.Element {
     const dataRootNode = this.buildDataTree();
-    const notebooksRootNode = this.buildNotebooksTrees();
-
-    if (useNotebook.getState().isNotebookEnabled) {
-      return (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={ResourceTreeAdapter.DataTitle} isExpanded={!this.gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-            <AccordionItemComponent title={ResourceTreeAdapter.NotebooksTitle}>
-              <TreeComponent className="notebookResourceTree" rootNode={notebooksRootNode} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-
-          {/* {this.galleryContentRoot && this.buildGalleryCallout()} */}
-        </>
-      );
-    } else {
-      return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
-    }
-  }
-
-  public async initialize(): Promise<void[]> {
-    const refreshTasks: Promise<void>[] = [];
-
-    this.galleryContentRoot = {
-      name: "Gallery",
-      path: "Gallery",
-      type: NotebookContentItemType.File,
-    };
-    this.myNotebooksContentRoot = {
-      name: useNotebook.getState().notebookFolderName,
-      path: useNotebook.getState().notebookBasePath,
-      type: NotebookContentItemType.Directory,
-    };
-
-    // Only if notebook server is available we can refresh
-    if (useNotebook.getState().notebookServerInfo?.notebookServerEndpoint) {
-      refreshTasks.push(
-        this.container.refreshContentItem(this.myNotebooksContentRoot).then(() => {
-          this.triggerRender();
-          this.traceMyNotebookTreeInfo();
-        }),
-      );
-    }
-    this.gitHubNotebooksContentRoot = {
-      name: ResourceTreeAdapter.GitHubReposTitle,
-      path: ResourceTreeAdapter.PseudoDirPath,
-      type: NotebookContentItemType.Directory,
-    };
-
-    return Promise.all(refreshTasks);
-  }
-
-  public initializeGitHubRepos(pinnedRepos: IPinnedRepo[]): void {
-    if (this.gitHubNotebooksContentRoot) {
-      this.gitHubNotebooksContentRoot.children = [];
-      pinnedRepos?.forEach((pinnedRepo) => {
-        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
-        const repoTreeItem: NotebookContentItem = {
-          name: repoFullName,
-          path: ResourceTreeAdapter.PseudoDirPath,
-          type: NotebookContentItemType.Directory,
-          children: [],
-        };
-
-        pinnedRepo.branches.forEach((branch) => {
-          repoTreeItem.children.push({
-            name: branch.name,
-            path: GitHubUtils.toContentUri(pinnedRepo.owner, pinnedRepo.name, branch.name, ""),
-            type: NotebookContentItemType.Directory,
-          });
-        });
-
-        this.gitHubNotebooksContentRoot.children.push(repoTreeItem);
-      });
-
-      this.triggerRender();
-    }
+    return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
   }
 
   private buildDataTree(): TreeNode {
@@ -504,365 +370,6 @@ export class ResourceTreeAdapter implements ReactAdapter {
     return traverse(schema);
   }
 
-  private buildNotebooksTrees(): TreeNode {
-    let notebooksTree: TreeNode = {
-      label: undefined,
-      isExpanded: true,
-      children: [],
-    };
-
-    if (this.galleryContentRoot) {
-      notebooksTree.children.push(this.buildGalleryNotebooksTree());
-    }
-
-    if (this.myNotebooksContentRoot) {
-      notebooksTree.children.push(this.buildMyNotebooksTree());
-    }
-
-    if (this.gitHubNotebooksContentRoot) {
-      // collapse all other notebook nodes
-      notebooksTree.children.forEach((node) => (node.isExpanded = false));
-      notebooksTree.children.push(this.buildGitHubNotebooksTree());
-    }
-
-    return notebooksTree;
-  }
-
-  private buildGalleryCallout(): JSX.Element {
-    if (
-      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
-      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
-    ) {
-      return undefined;
-    }
-
-    const calloutProps: ICalloutProps = {
-      calloutMaxWidth: 350,
-      ariaLabel: "New gallery",
-      role: "alertdialog",
-      gapSpace: 0,
-      target: ".galleryHeader",
-      directionalHint: DirectionalHint.leftTopEdge,
-      onDismiss: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        this.triggerRender();
-      },
-      setInitialFocus: true,
-    };
-
-    const openGalleryProps: ILinkProps = {
-      onClick: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        this.container.openGallery();
-        this.triggerRender();
-      },
-    };
-
-    return (
-      <Callout {...calloutProps}>
-        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
-          <Text variant="xLarge" block>
-            New gallery
-          </Text>
-          <Text block>
-            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
-            contributors.
-          </Text>
-          <Link {...openGalleryProps}>Open gallery</Link>
-        </Stack>
-      </Callout>
-    );
-  }
-
-  private buildGalleryNotebooksTree(): TreeNode {
-    return {
-      label: "Gallery",
-      iconSrc: GalleryIcon,
-      className: "notebookHeader galleryHeader",
-      onClick: () => this.container.openGallery(),
-      isSelected: () => {
-        const activeTab = useTabs.getState().activeTab;
-        return activeTab && activeTab.tabKind === ViewModels.CollectionTabKind.Gallery;
-      },
-    };
-  }
-
-  private buildMyNotebooksTree(): TreeNode {
-    const myNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
-      this.myNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        this.container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
-          }
-        });
-      },
-      true,
-      true,
-    );
-
-    myNotebooksTree.isExpanded = true;
-    myNotebooksTree.isAlphaSorted = true;
-    // Remove "Delete" menu item from context menu
-    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
-    return myNotebooksTree;
-  }
-
-  private buildGitHubNotebooksTree(): TreeNode {
-    const gitHubNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
-      this.gitHubNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        this.container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
-          }
-        });
-      },
-      true,
-      true,
-    );
-
-    gitHubNotebooksTree.contextMenu = [
-      {
-        label: "Manage GitHub settings",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Manage GitHub settings",
-              <GitHubReposPanel
-                explorer={this.container}
-                gitHubClientProp={this.container.notebookManager.gitHubClient}
-                junoClientProp={this.container.notebookManager.junoClient}
-              />,
-            ),
-      },
-      {
-        label: "Disconnect from GitHub",
-        onClick: () => {
-          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
-            dataExplorerArea: Areas.Notebook,
-          });
-          this.container.notebookManager?.gitHubOAuthService.logout();
-        },
-      },
-    ];
-
-    gitHubNotebooksTree.isExpanded = true;
-    gitHubNotebooksTree.isAlphaSorted = true;
-
-    return gitHubNotebooksTree;
-  }
-
-  private buildChildNodes(
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    createDirectoryContextMenu: boolean,
-    createFileContextMenu: boolean,
-  ): TreeNode[] {
-    if (!item || !item.children) {
-      return [];
-    } else {
-      return item.children.map((item) => {
-        const result =
-          item.type === NotebookContentItemType.Directory
-            ? this.buildNotebookDirectoryNode(item, onFileClick, createDirectoryContextMenu, createFileContextMenu)
-            : this.buildNotebookFileNode(item, onFileClick, createFileContextMenu);
-        result.timestamp = item.timestamp;
-        return result;
-      });
-    }
-  }
-
-  private buildNotebookFileNode(
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    createFileContextMenu: boolean,
-  ): TreeNode {
-    return {
-      label: item.name,
-      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
-      className: "notebookHeader",
-      onClick: () => onFileClick(item),
-      isSelected: () => {
-        const activeTab = useTabs.getState().activeTab;
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-             NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-           */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: createFileContextMenu && this.createFileContextMenu(item),
-      data: item,
-    };
-  }
-
-  private createFileContextMenu(item: NotebookContentItem): TreeNodeMenuItem[] {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => this.container.renameNotebook(item),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}"`,
-              "Delete",
-              () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
-              "Cancel",
-              undefined,
-            );
-        },
-      },
-      {
-        label: "Copy to ...",
-        iconSrc: CopyIcon,
-        onClick: () => this.copyNotebook(item),
-      },
-      {
-        label: "Download",
-        iconSrc: NotebookIcon,
-        onClick: () => this.container.downloadFile(item),
-      },
-    ];
-
-    if (item.type === NotebookContentItemType.Notebook) {
-      items.push({
-        label: "Publish to gallery",
-        iconSrc: PublishIcon,
-        onClick: async () => {
-          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
-            source: Source.ResourceTreeMenu,
-          });
-
-          const content = await this.container.readFile(item);
-          if (content) {
-            await this.container.publishNotebook(item.name, content);
-          }
-        },
-      });
-    }
-
-    // "Copy to ..." isn't needed if github locations are not available
-    if (!this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      items = items.filter((item) => item.label !== "Copy to ...");
-    }
-
-    return items;
-  }
-
-  private copyNotebook = async (item: NotebookContentItem) => {
-    const content = await this.container.readFile(item);
-    if (content) {
-      this.container.copyNotebook(item.name, content);
-    }
-  };
-
-  private createDirectoryContextMenu(item: NotebookContentItem): TreeNodeMenuItem[] {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Refresh",
-        iconSrc: RefreshIcon,
-        onClick: () => this.container.refreshContentItem(item).then(() => this.triggerRender()),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}?"`,
-              "Delete",
-              () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
-              "Cancel",
-              undefined,
-            );
-        },
-      },
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => this.container.renameNotebook(item),
-      },
-      {
-        label: "New Directory",
-        iconSrc: NewNotebookIcon,
-        onClick: () => this.container.onCreateDirectory(item),
-      },
-      {
-        label: "Upload File",
-        iconSrc: NewNotebookIcon,
-        onClick: () => this.container.openUploadFilePanel(item),
-      },
-    ];
-
-    //disallow renaming of temporary notebook workspace
-    if (item?.path === useNotebook.getState().notebookBasePath) {
-      items = items.filter((item) => item.label !== "Rename");
-    }
-
-    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
-    if (GitHubUtils.fromContentUri(item.path)) {
-      items = items.filter(
-        (item) =>
-          item.label !== "Delete" &&
-          item.label !== "Rename" &&
-          item.label !== "New Directory" &&
-          item.label !== "Upload File",
-      );
-    }
-
-    return items;
-  }
-
-  private buildNotebookDirectoryNode(
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    createDirectoryContextMenu: boolean,
-    createFileContextMenu: boolean,
-  ): TreeNode {
-    return {
-      label: item.name,
-      iconSrc: undefined,
-      className: "notebookHeader",
-      isAlphaSorted: true,
-      isLeavesParentsSeparate: true,
-      onClick: () => {
-        if (!item.children) {
-          this.container.refreshContentItem(item).then(() => this.triggerRender());
-        }
-      },
-      isSelected: () => {
-        const activeTab = useTabs.getState().activeTab;
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-             NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-           */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu:
-        createDirectoryContextMenu && item.path !== ResourceTreeAdapter.PseudoDirPath
-          ? this.createDirectoryContextMenu(item)
-          : undefined,
-      data: item,
-      children: this.buildChildNodes(item, onFileClick, createDirectoryContextMenu, createFileContextMenu),
-    };
-  }
-
   public triggerRender() {
     window.requestAnimationFrame(() => this.parameters(Date.now()));
   }
diff --git a/src/Utils/GalleryUtils.ts b/src/Utils/GalleryUtils.ts
index f11b6df5c..1314b2b3c 100644
--- a/src/Utils/GalleryUtils.ts
+++ b/src/Utils/GalleryUtils.ts
@@ -245,7 +245,6 @@ export function downloadItem(
     },
     "Cancel",
     undefined,
-    container.getDownloadModalConent(name),
   );
 }
 export async function downloadNotebookItem(
@@ -278,7 +277,6 @@ export async function downloadNotebookItem(
       metadata.untrusted = true;
     }
 
-    await container.importAndOpenContent(data.name, JSON.stringify(notebook));
     logConsoleInfo(`Successfully downloaded ${data.name} to ${useNotebook.getState().notebookFolderName}`);
 
     const increaseDownloadResponse = await junoClient.increaseNotebookDownloadCount(data.id);

From 81a5b7cb6d6011c9be922770581dcfe2021ee80d Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Tue, 30 Apr 2024 10:03:27 -0700
Subject: [PATCH 30/67] add shortcuts for the Items tab (#1827)

* add shortcuts for the Items tab

* Add shortcut to clear Items tab filter.
---
 src/Explorer/Tabs/DocumentsTab.html |  3 ++-
 src/Explorer/Tabs/DocumentsTab.ts   | 33 ++++++++++++++++++++++++++++-
 src/Explorer/Tabs/TabsBase.ts       |  2 ++
 src/KeyboardShortcuts.tsx           | 28 ++++++++++++++++++++++--
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTab.html b/src/Explorer/Tabs/DocumentsTab.html
index 4283a661c..cfe1b2039 100644
--- a/src/Explorer/Tabs/DocumentsTab.html
+++ b/src/Explorer/Tabs/DocumentsTab.html
@@ -80,7 +80,8 @@
                                     placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
                                 },
                                 css: { placeholderVisible: filterContent().length === 0 },
-                                textInput: filterContent"
+                                textInput: filterContent,
+                                event: { keydown: onFilterKeyDown }"
           />
 
           <datalist
diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts
index c79f7eb4f..949b13697 100644
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -1,7 +1,7 @@
 import { ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { Platform, configContext } from "ConfigContext";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import { KeyboardAction } from "KeyboardShortcuts";
+import { KeyboardAction, KeyboardActionGroup, KeyboardHandlerSetter, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import * as ko from "knockout";
@@ -86,9 +86,11 @@ export default class DocumentsTab extends TabsBase {
   private _isQueryCopilotSampleContainer: boolean;
   private queryAbortController: AbortController;
   private cancelQueryTimeoutID: NodeJS.Timeout;
+  private setKeyboardActions: KeyboardHandlerSetter;
 
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
+    this.setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
     this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
 
     this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
@@ -665,9 +667,38 @@ export default class DocumentsTab extends TabsBase {
     this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
   }
 
+  public onFilterKeyDown(model: unknown, e: KeyboardEvent): boolean {
+    if (e.key === "Enter") {
+      this.refreshDocumentsGrid(true);
+
+      // Suppress the default behavior of the key
+      return false;
+    } else if (e.key === "Escape") {
+      this.onHideFilterClick();
+
+      // Suppress the default behavior of the key
+      return false;
+    } else {
+      // Allow the default behavior of the key
+      return true;
+    }
+  }
+
   public async onActivate(): Promise<void> {
     super.onActivate();
 
+    this.setKeyboardActions({
+      [KeyboardAction.SEARCH]: () => {
+        this.onShowFilterClick();
+        return true;
+      },
+      [KeyboardAction.CLEAR_SEARCH]: () => {
+        this.filterContent("");
+        this.refreshDocumentsGrid(true);
+        return true;
+      },
+    });
+
     if (!this._documentsIterator) {
       try {
         await this.autoPopulateContent();
diff --git a/src/Explorer/Tabs/TabsBase.ts b/src/Explorer/Tabs/TabsBase.ts
index 0425eac91..8b017f6bc 100644
--- a/src/Explorer/Tabs/TabsBase.ts
+++ b/src/Explorer/Tabs/TabsBase.ts
@@ -1,3 +1,4 @@
+import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as ThemeUtility from "../../Common/ThemeUtility";
@@ -107,6 +108,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   }
 
   public onActivate(): void {
+    clearKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
     this.updateSelectedNode();
     this.collection?.selectedSubnodeKind(this.tabKind);
     this.database?.selectedSubnodeKind(this.tabKind);
diff --git a/src/KeyboardShortcuts.tsx b/src/KeyboardShortcuts.tsx
index 98f988038..2041662ee 100644
--- a/src/KeyboardShortcuts.tsx
+++ b/src/KeyboardShortcuts.tsx
@@ -17,8 +17,17 @@ export type KeyboardHandlerMap = Partial<Record<KeyboardAction, KeyboardActionHa
  * Each group can be updated separately, but, when updated, must be completely replaced.
  */
 export enum KeyboardActionGroup {
+  /** Keyboard actions related to tab navigation. */
   TABS = "TABS",
+
+  /** Keyboard actions managed by the global command bar. */
   COMMAND_BAR = "COMMAND_BAR",
+
+  /**
+   * Keyboard actions specific to the active tab.
+   * This group is automatically cleared when the active tab changes.
+   */
+  ACTIVE_TAB = "ACTIVE_TAB",
 }
 
 /**
@@ -43,6 +52,8 @@ export enum KeyboardAction {
   SELECT_LEFT_TAB = "SELECT_LEFT_TAB",
   SELECT_RIGHT_TAB = "SELECT_RIGHT_TAB",
   CLOSE_TAB = "CLOSE_TAB",
+  SEARCH = "SEARCH",
+  CLEAR_SEARCH = "CLEAR_SEARCH",
 }
 
 /**
@@ -72,6 +83,8 @@ const bindings: Record<KeyboardAction, string[]> = {
   [KeyboardAction.SELECT_LEFT_TAB]: ["$mod+Alt+[", "$mod+Shift+F6"],
   [KeyboardAction.SELECT_RIGHT_TAB]: ["$mod+Alt+]", "$mod+F6"],
   [KeyboardAction.CLOSE_TAB]: ["$mod+Alt+W"],
+  [KeyboardAction.SEARCH]: ["$mod+Shift+F"],
+  [KeyboardAction.CLEAR_SEARCH]: ["$mod+Shift+C"],
 };
 
 interface KeyboardShortcutState {
@@ -91,13 +104,24 @@ interface KeyboardShortcutState {
   setHandlers: (group: KeyboardActionGroup, handlers: KeyboardHandlerMap) => void;
 }
 
+export type KeyboardHandlerSetter = (handlers: KeyboardHandlerMap) => void;
+
 /**
  * Defines the calling component as the manager of the keyboard actions for the given group.
  * @param group The group of keyboard actions to manage.
  * @returns A function that can be used to set the keyboard action handlers for the given group.
  */
-export const useKeyboardActionGroup = (group: KeyboardActionGroup) => (handlers: KeyboardHandlerMap) =>
-  useKeyboardActionHandlers.getState().setHandlers(group, handlers);
+export const useKeyboardActionGroup: (group: KeyboardActionGroup) => KeyboardHandlerSetter =
+  (group: KeyboardActionGroup) => (handlers: KeyboardHandlerMap) =>
+    useKeyboardActionHandlers.getState().setHandlers(group, handlers);
+
+/**
+ * Clears the keyboard action handlers for the given group.
+ * @param group The group of keyboard actions to clear.
+ */
+export const clearKeyboardActionGroup = (group: KeyboardActionGroup) => {
+  useKeyboardActionHandlers.getState().setHandlers(group, {});
+};
 
 const useKeyboardActionHandlers: UseStore<KeyboardShortcutState> = create((set, get) => ({
   allHandlers: {},

From 298197b1b80e07282c93d0ee2b3608848d0c3af2 Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Wed, 1 May 2024 07:21:50 -0700
Subject: [PATCH 31/67] Revert "First set of changes for Notebooks removal.
 (#1816)" (#1830)

This reverts commit b023250e67e834ee8485670a1605973d0db88936.
---
 src/Contracts/ActionContracts.ts              |   5 +
 .../SettingsComponent.test.tsx.snap           |  16 +
 src/Explorer/Explorer.tsx                     | 612 +++++++++++++++++-
 src/Explorer/Notebook/NotebookManager.tsx     |  27 +-
 src/Explorer/OpenActions/OpenActions.tsx      |  12 +
 .../CopyNotebookPane/CopyNotebookPane.tsx     | 154 +++++
 .../CopyNotebookPaneComponent.tsx             | 120 ++++
 .../GitHubReposPanel.test.tsx.snap            |   4 +
 .../StringInputPane.test.tsx.snap             |   4 +
 .../QueryCopilotTab.test.tsx.snap             |   4 +
 src/Explorer/SplashScreen/SplashScreen.tsx    |  28 +-
 src/Explorer/Tabs/NotebookV2Tab.ts            | 336 +++++++++-
 src/Explorer/Tree/ResourceTree.tsx            | 432 ++++++++++++-
 src/Explorer/Tree/ResourceTreeAdapter.tsx     | 497 +++++++++++++-
 src/Utils/GalleryUtils.ts                     |   2 +
 15 files changed, 2242 insertions(+), 11 deletions(-)
 create mode 100644 src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
 create mode 100644 src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

diff --git a/src/Contracts/ActionContracts.ts b/src/Contracts/ActionContracts.ts
index cf4b66ed6..f8fc956e6 100644
--- a/src/Contracts/ActionContracts.ts
+++ b/src/Contracts/ActionContracts.ts
@@ -68,6 +68,10 @@ export interface OpenPane extends DataExplorerAction {
   paneKind: PaneKind | string;
 }
 
+export interface OpenSampleNotebook extends DataExplorerAction {
+  path: string;
+}
+
 /**
  * The types of actions that the DataExplorer supports performing upon opening.
  */
@@ -76,4 +80,5 @@ export enum ActionType {
   OpenCollectionTab,
   OpenPane,
   TransmitCachedData,
+  OpenSampleNotebook,
 }
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index b08834dd6..ab7abac11 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -29,6 +29,8 @@ exports[`SettingsComponent renders 1`] = `
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -45,8 +47,10 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
+                "refreshNotebookList": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
+                  "copyNotebook": [Function],
                   "parameters": [Function],
                 },
               },
@@ -103,6 +107,8 @@ exports[`SettingsComponent renders 1`] = `
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -119,8 +125,10 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
+                "refreshNotebookList": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
+                  "copyNotebook": [Function],
                   "parameters": [Function],
                 },
               },
@@ -216,6 +224,8 @@ exports[`SettingsComponent renders 1`] = `
               "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -232,8 +242,10 @@ exports[`SettingsComponent renders 1`] = `
                 "queriesClient": QueriesClient {
                   "container": [Circular],
                 },
+                "refreshNotebookList": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
+                  "copyNotebook": [Function],
                   "parameters": [Function],
                 },
               },
@@ -259,6 +271,8 @@ exports[`SettingsComponent renders 1`] = `
           }
           explorer={
             Explorer {
+              "_isInitializingNotebooks": false,
+              "_resetNotebookWorkspace": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isTabsContentExpanded": [Function],
               "onRefreshDatabasesKeyPress": [Function],
@@ -275,8 +289,10 @@ exports[`SettingsComponent renders 1`] = `
               "queriesClient": QueriesClient {
                 "container": [Circular],
               },
+              "refreshNotebookList": [Function],
               "resourceTree": ResourceTreeAdapter {
                 "container": [Circular],
+                "copyNotebook": [Function],
                 "parameters": [Function],
               },
             }
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index 368168a4a..4af478475 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1,3 +1,4 @@
+import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
@@ -15,7 +16,7 @@ import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { Areas, ConnectionStatusType, HttpStatusCodes, PoolIdType } from "../Common/Constants";
+import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
 import { QueriesClient } from "../Common/QueriesClient";
@@ -31,23 +32,34 @@ import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
+import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
+import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import { NotebookContentItem } from "./Notebook/NotebookContentItem";
+import * as FileSystemUtil from "./Notebook/FileSystemUtil";
+import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
+import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import type NotebookManager from "./Notebook/NotebookManager";
+import { NotebookPaneContent } from "./Notebook/NotebookManager";
+import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { useNotebook } from "./Notebook/useNotebook";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
+import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
+import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
+import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
 import TerminalTab from "./Tabs/TerminalTab";
 import Database from "./Tree/Database";
@@ -75,6 +87,7 @@ export default class Explorer {
   // Notebooks
   public notebookManager?: NotebookManager;
 
+  private _isInitializingNotebooks: boolean;
   private notebookToImport: {
     name: string;
     content: string;
@@ -86,6 +99,7 @@ export default class Explorer {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
+    this._isInitializingNotebooks = false;
 
     this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
     useNotebook.subscribe(
@@ -191,10 +205,12 @@ export default class Explorer {
         container: this,
         resourceTree: this.resourceTree,
         refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
+        refreshNotebookList: () => this.refreshNotebookList(),
       });
     }
 
     this.refreshCommandBarButtons();
+    this.refreshNotebookList();
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -357,6 +373,7 @@ export default class Explorer {
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
+    this.refreshNotebookList();
   };
 
   // Facade
@@ -364,6 +381,19 @@ export default class Explorer {
     window.open(Constants.Urls.feedbackEmail, "_blank");
   };
 
+  public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
+    if (!databaseAccount) {
+      throw new Error("No database account specified");
+    }
+
+    if (this._isInitializingNotebooks) {
+      return;
+    }
+    this._isInitializingNotebooks = true;
+    this.refreshNotebookList();
+    this._isInitializingNotebooks = false;
+  }
+
   public async allocateContainer(poolId: PoolIdType, mode?: string): Promise<void> {
     const shouldUseNotebookStates = poolId === PoolIdType.DefaultPoolId ? true : false;
     const notebookServerInfo = shouldUseNotebookStates
@@ -442,6 +472,8 @@ export default class Explorer {
           ? useNotebook.getState().setIsAllocating(false)
           : useQueryCopilot.getState().setIsAllocatingContainer(false);
         this.refreshCommandBarButtons();
+        this.refreshNotebookList();
+        this._isInitializingNotebooks = false;
       }
     }
   }
@@ -478,6 +510,104 @@ export default class Explorer {
         .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
   }
 
+  public resetNotebookWorkspace(): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
+      handleError(
+        "Attempt to reset notebook workspace, but notebook is not enabled",
+        "Explorer/resetNotebookWorkspace",
+      );
+      return;
+    }
+    const dialogContent = useNotebook.getState().isPhoenixNotebooks
+      ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
+      : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
+
+    const resetConfirmationDialogProps: DialogProps = {
+      isModal: true,
+      title: "Reset Workspace",
+      subText: dialogContent,
+      primaryButtonText: "OK",
+      secondaryButtonText: "Cancel",
+      onPrimaryButtonClick: this._resetNotebookWorkspace,
+      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
+    };
+    useDialog.getState().openDialog(resetConfirmationDialogProps);
+  }
+
+  private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
+    if (!databaseAccount) {
+      return false;
+    }
+    try {
+      const { value: workspaces } = await listByDatabaseAccount(
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
+      );
+      return workspaces && workspaces.length > 0 && workspaces.some((workspace) => workspace.name === "default");
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
+      return false;
+    }
+  }
+
+  private _resetNotebookWorkspace = async () => {
+    useDialog.getState().closeDialog();
+    const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
+    let connectionStatus: ContainerConnectionInfo;
+    try {
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
+        const error = "No server endpoint detected";
+        Logger.logError(error, "NotebookContainerClient/resetWorkspace");
+        logConsoleError(error);
+        return;
+      }
+      TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        useTabs.getState().closeAllNotebookTabs(true);
+        connectionStatus = {
+          status: ConnectionStatusType.Connecting,
+        };
+        useNotebook.getState().setConnectionInfo(connectionStatus);
+      }
+      const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
+      if (connectionInfo?.status !== HttpStatusCodes.OK) {
+        throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
+      }
+      if (!connectionInfo?.data?.phoenixServiceUrl) {
+        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
+      }
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        await this.setNotebookInfo(true, connectionInfo, connectionStatus);
+        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
+      }
+      logConsoleInfo("Successfully reset notebook workspace");
+      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
+    } catch (error) {
+      logConsoleError(`Failed to reset notebook workspace: ${error}`);
+      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+        error: getErrorMessage(error),
+        errorStack: getErrorStack(error),
+      });
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        connectionStatus = {
+          status: ConnectionStatusType.Failed,
+        };
+        useNotebook.getState().resetContainerConnection(connectionStatus);
+        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
+      }
+      throw error;
+    } finally {
+      clearInProgressMessage();
+    }
+  };
+
   private getDeltaDatabases(
     updatedDatabaseList: DataModels.Database[],
     databases: ViewModels.Database[],
@@ -566,6 +696,406 @@ export default class Explorer {
     }
   }
 
+  public uploadFile(
+    name: string,
+    content: string,
+    parent: NotebookContentItem,
+    isGithubTree?: boolean,
+  ): Promise<NotebookContentItem> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to upload notebook, but notebook is not enabled";
+      handleError(error, "Explorer/uploadFile");
+      throw new Error(error);
+    }
+
+    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent, isGithubTree);
+    promise
+      .then(() => this.resourceTree.triggerRender())
+      .catch((reason) => useDialog.getState().showOkModalDialog("Unable to upload file", getErrorMessage(reason)));
+    return promise;
+  }
+
+  public async importAndOpen(path: string): Promise<boolean> {
+    const name = NotebookUtil.getName(path);
+    const item = NotebookUtil.createNotebookContentItem(name, path, "file");
+    const parent = this.resourceTree.myNotebooksContentRoot;
+
+    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
+      const existingItem = _.find(parent.children, (node) => node.name === name);
+      if (existingItem) {
+        return this.openNotebook(existingItem);
+      }
+
+      const content = await this.readFile(item);
+      const uploadedItem = await this.uploadFile(name, content, parent);
+      return this.openNotebook(uploadedItem);
+    }
+
+    return Promise.resolve(false);
+  }
+
+  public async importAndOpenContent(name: string, content: string): Promise<boolean> {
+    const parent = this.resourceTree.myNotebooksContentRoot;
+
+    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
+      if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
+        this.notebookToImport = undefined; // we don't want to try opening this notebook again
+      }
+
+      const existingItem = _.find(parent.children, (node) => node.name === name);
+      if (existingItem) {
+        return this.openNotebook(existingItem);
+      }
+
+      const uploadedItem = await this.uploadFile(name, content, parent);
+      return this.openNotebook(uploadedItem);
+    }
+
+    this.notebookToImport = { name, content }; // we'll try opening this notebook later on
+    return Promise.resolve(false);
+  }
+
+  public async publishNotebook(
+    name: string,
+    content: NotebookPaneContent,
+    notebookContentRef?: string,
+    onTakeSnapshot?: (request: SnapshotRequest) => void,
+    onClosePanel?: () => void,
+  ): Promise<void> {
+    if (this.notebookManager) {
+      await this.notebookManager.openPublishNotebookPane(
+        name,
+        content,
+        notebookContentRef,
+        onTakeSnapshot,
+        onClosePanel,
+      );
+    }
+  }
+
+  public copyNotebook(name: string, content: string): void {
+    this.notebookManager?.openCopyNotebookPane(name, content);
+  }
+
+  /**
+   * Note: To keep it simple, this creates a disconnected NotebookContentItem that is not connected to the resource tree.
+   * Connecting it to a tree possibly requires the intermediate missing folders if the item is nested in a subfolder.
+   * Manually creating the missing folders between the root and its parent dir would break the UX: expanding a folder
+   * will not fetch its content if the children array exists (and has only one child which was manually created).
+   * Fetching the intermediate folders possibly involves a few chained async calls which isn't ideal.
+   *
+   * @param name
+   * @param path
+   */
+  public createNotebookContentItemFile(name: string, path: string): NotebookContentItem {
+    return NotebookUtil.createNotebookContentItem(name, path, "file");
+  }
+
+  public async openNotebook(notebookContentItem: NotebookContentItem): Promise<boolean> {
+    if (!notebookContentItem || !notebookContentItem.path) {
+      throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
+    }
+    if (notebookContentItem.type === NotebookContentItemType.Notebook && useNotebook.getState().isPhoenixNotebooks) {
+      await this.allocateContainer(PoolIdType.DefaultPoolId);
+    }
+
+    const notebookTabs = useTabs
+      .getState()
+      .getTabs(
+        ViewModels.CollectionTabKind.NotebookV2,
+        (tab) =>
+          (tab as NotebookV2Tab).notebookPath &&
+          FileSystemUtil.isPathEqual((tab as NotebookV2Tab).notebookPath(), notebookContentItem.path),
+      ) as NotebookV2Tab[];
+    let notebookTab = notebookTabs && notebookTabs[0];
+
+    if (notebookTab) {
+      useTabs.getState().activateTab(notebookTab);
+    } else {
+      const options: NotebookTabOptions = {
+        account: userContext.databaseAccount,
+        tabKind: ViewModels.CollectionTabKind.NotebookV2,
+        node: undefined,
+        title: notebookContentItem.name,
+        tabPath: notebookContentItem.path,
+        collection: undefined,
+        masterKey: userContext.masterKey || "",
+        isTabsContentExpanded: ko.observable(true),
+        onLoadStartKey: undefined,
+        container: this,
+        notebookContentItem,
+      };
+
+      try {
+        const NotebookTabV2 = await import(/* webpackChunkName: "NotebookV2Tab" */ "./Tabs/NotebookV2Tab");
+        notebookTab = new NotebookTabV2.default(options);
+        useTabs.getState().activateNewTab(notebookTab);
+      } catch (reason) {
+        console.error("Import NotebookV2Tab failed!", reason);
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  public renameNotebook(notebookFile: NotebookContentItem, isGithubTree?: boolean): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to rename notebook, but notebook is not enabled";
+      handleError(error, "Explorer/renameNotebook");
+      throw new Error(error);
+    }
+
+    // Don't delete if tab is open to avoid accidental deletion
+    const openedNotebookTabs = useTabs
+      .getState()
+      .getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
+        return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
+      });
+    if (openedNotebookTabs.length > 0) {
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
+    } else {
+      useSidePanel.getState().openSidePanel(
+        "Rename Notebook",
+        <StringInputPane
+          closePanel={() => {
+            useSidePanel.getState().closeSidePanel();
+            this.resourceTree.triggerRender();
+          }}
+          inputLabel="Enter new notebook name"
+          submitButtonLabel="Rename"
+          errorMessage="Could not rename notebook"
+          inProgressMessage="Renaming notebook to"
+          successMessage="Renamed notebook to"
+          paneTitle="Rename Notebook"
+          defaultInput={FileSystemUtil.stripExtension(notebookFile.name, "ipynb")}
+          onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
+            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input, isGithubTree)
+          }
+          notebookFile={notebookFile}
+        />,
+      );
+    }
+  }
+
+  public onCreateDirectory(parent: NotebookContentItem, isGithubTree?: boolean): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to create notebook directory, but notebook is not enabled";
+      handleError(error, "Explorer/onCreateDirectory");
+      throw new Error(error);
+    }
+
+    useSidePanel.getState().openSidePanel(
+      "Create new directory",
+      <StringInputPane
+        closePanel={() => {
+          useSidePanel.getState().closeSidePanel();
+          this.resourceTree.triggerRender();
+        }}
+        errorMessage="Could not create directory "
+        inProgressMessage="Creating directory "
+        successMessage="Created directory "
+        inputLabel="Enter new directory name"
+        paneTitle="Create new directory"
+        submitButtonLabel="Create"
+        defaultInput=""
+        onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
+          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input, isGithubTree)
+        }
+        notebookFile={parent}
+      />,
+    );
+  }
+
+  public readFile(notebookFile: NotebookContentItem): Promise<string> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to read file, but notebook is not enabled";
+      handleError(error, "Explorer/downloadFile");
+      throw new Error(error);
+    }
+
+    return this.notebookManager?.notebookContentClient.readFileContent(notebookFile.path);
+  }
+
+  public downloadFile(notebookFile: NotebookContentItem): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to download file, but notebook is not enabled";
+      handleError(error, "Explorer/downloadFile");
+      throw new Error(error);
+    }
+
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Downloading ${notebookFile.path}`);
+
+    return this.notebookManager?.notebookContentClient.readFileContent(notebookFile.path).then(
+      (content: string) => {
+        const blob = stringToBlob(content, "text/plain");
+        if (navigator.msSaveBlob) {
+          // for IE and Edge
+          navigator.msSaveBlob(blob, notebookFile.name);
+        } else {
+          const downloadLink: HTMLAnchorElement = document.createElement("a");
+          const url = URL.createObjectURL(blob);
+          downloadLink.href = url;
+          downloadLink.target = "_self";
+          downloadLink.download = notebookFile.name;
+
+          // for some reason, FF displays the download prompt only when
+          // the link is added to the dom so we add and remove it
+          document.body.appendChild(downloadLink);
+          downloadLink.click();
+          downloadLink.remove();
+        }
+
+        clearMessage();
+      },
+      (error) => {
+        logConsoleError(`Could not download notebook ${getErrorMessage(error)}`);
+        clearMessage();
+      },
+    );
+  }
+
+  private refreshNotebookList = async (): Promise<void> => {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      return;
+    }
+
+    await this.resourceTree.initialize();
+    await useNotebook.getState().initializeNotebooksTree(this.notebookManager);
+
+    this.notebookManager?.refreshPinnedRepos();
+    if (this.notebookToImport) {
+      this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
+    }
+  };
+
+  public deleteNotebookFile(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to delete notebook file, but notebook is not enabled";
+      handleError(error, "Explorer/deleteNotebookFile");
+      throw new Error(error);
+    }
+
+    // Don't delete if tab is open to avoid accidental deletion
+    const openedNotebookTabs = useTabs
+      .getState()
+      .getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
+        return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
+      });
+    if (openedNotebookTabs.length > 0) {
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
+      return Promise.reject();
+    }
+
+    if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
+      useDialog.getState().openDialog({
+        isModal: true,
+        title: "Unable to delete file",
+        subText: "Directory is not empty.",
+        primaryButtonText: "Close",
+        secondaryButtonText: undefined,
+        onPrimaryButtonClick: () => useDialog.getState().closeDialog(),
+        onSecondaryButtonClick: undefined,
+      });
+      return Promise.reject();
+    }
+
+    return this.notebookManager?.notebookContentClient.deleteContentItem(item, isGithubTree).then(
+      () => logConsoleInfo(`Successfully deleted: ${item.path}`),
+      (reason) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`),
+    );
+  }
+
+  /**
+   * This creates a new notebook file, then opens the notebook
+   */
+  public async onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to create new notebook, but notebook is not enabled";
+      handleError(error, "Explorer/onNewNotebookClicked");
+      throw new Error(error);
+    }
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      if (isGithubTree) {
+        await this.allocateContainer(PoolIdType.DefaultPoolId);
+        parent = parent || this.resourceTree.myNotebooksContentRoot;
+        this.createNewNoteBook(parent, isGithubTree);
+      } else {
+        useDialog.getState().showOkCancelModalDialog(
+          Notebook.newNotebookModalTitle,
+          undefined,
+          "Create",
+          async () => {
+            await this.allocateContainer(PoolIdType.DefaultPoolId);
+            parent = parent || this.resourceTree.myNotebooksContentRoot;
+            this.createNewNoteBook(parent, isGithubTree);
+          },
+          "Cancel",
+          undefined,
+          this.getNewNoteWarningText(),
+        );
+      }
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.createNewNoteBook(parent, isGithubTree);
+    }
+  }
+
+  private getNewNoteWarningText(): JSX.Element {
+    return (
+      <>
+        <p>{Notebook.newNotebookModalContent1}</p>
+        <br />
+        <p>
+          {Notebook.newNotebookModalContent2}
+          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
+            {Notebook.learnMore}
+          </Link>
+        </p>
+      </>
+    );
+  }
+
+  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
+    const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
+      dataExplorerArea: Constants.Areas.Notebook,
+    });
+
+    this.notebookManager?.notebookContentClient
+      .createNewNotebookFile(parent, isGithubTree)
+      .then((newFile: NotebookContentItem) => {
+        logConsoleInfo(`Successfully created: ${newFile.name}`);
+        TelemetryProcessor.traceSuccess(
+          Action.CreateNewNotebook,
+          {
+            dataExplorerArea: Constants.Areas.Notebook,
+          },
+          startKey,
+        );
+        return this.openNotebook(newFile);
+      })
+      .then(() => this.resourceTree.triggerRender())
+      .catch((error) => {
+        const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
+        logConsoleError(errorMessage);
+        TelemetryProcessor.traceFailure(
+          Action.CreateNewNotebook,
+          {
+            dataExplorerArea: Constants.Areas.Notebook,
+            error: errorMessage,
+            errorStack: getErrorStack(error),
+          },
+          startKey,
+        );
+      })
+      .finally(clearInProgressMessage);
+  }
+
   // TODO: Delete this function when ResourceTreeAdapter is removed.
   public async refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
@@ -722,6 +1252,32 @@ export default class Explorer {
     }
   }
 
+  public async handleOpenFileAction(path: string): Promise<void> {
+    if (useNotebook.getState().isPhoenixNotebooks === undefined) {
+      await useNotebook.getState().getPhoenixStatus();
+    }
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      await this.allocateContainer(PoolIdType.DefaultPoolId);
+    }
+
+    // We still use github urls like https://github.com/Azure-Samples/cosmos-notebooks/blob/master/CSharp_quickstarts/GettingStarted_CSharp.ipynb
+    // when launching a notebook quickstart from Portal. In future we should just use gallery id and use Juno to fetch instead of directly
+    // calling GitHub. For now convert this url to a raw url and download content.
+    const gitHubInfo = fromContentUri(path);
+    if (gitHubInfo) {
+      const rawUrl = toRawContentUri(gitHubInfo.owner, gitHubInfo.repo, gitHubInfo.branch, gitHubInfo.path);
+      const response = await fetch(rawUrl);
+      if (response.status === Constants.HttpStatusCodes.OK) {
+        this.notebookToImport = {
+          name: NotebookUtil.getName(path),
+          content: await response.text(),
+        };
+
+        this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
+      }
+    }
+  }
+
   public openUploadItemsPanePane(): void {
     useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
   }
@@ -731,6 +1287,54 @@ export default class Explorer {
       .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
+  public openUploadFilePanel(parent?: NotebookContentItem): void {
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      useDialog.getState().showOkCancelModalDialog(
+        Notebook.newNotebookUploadModalTitle,
+        undefined,
+        "Upload",
+        async () => {
+          await this.allocateContainer(PoolIdType.DefaultPoolId);
+          parent = parent || this.resourceTree.myNotebooksContentRoot;
+          this.uploadFilePanel(parent);
+        },
+        "Cancel",
+        undefined,
+        this.getNewNoteWarningText(),
+      );
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.uploadFilePanel(parent);
+    }
+  }
+
+  private uploadFilePanel(parent?: NotebookContentItem): void {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Upload file to notebook server",
+        <UploadFilePane uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)} />,
+      );
+  }
+
+  public getDownloadModalConent(fileName: string): JSX.Element {
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      return (
+        <>
+          <p>{Notebook.galleryNotebookDownloadContent1}</p>
+          <br />
+          <p>
+            {Notebook.galleryNotebookDownloadContent2}
+            <Link href={Notebook.cosmosNotebookGitDocumentationUrl} target="_blank">
+              {Notebook.learnMore}
+            </Link>
+          </p>
+        </>
+      );
+    }
+    return <p> Download {fileName} from gallery as a copy to your notebooks to run and/or edit the notebook. </p>;
+  }
+
   public async refreshExplorer(): Promise<void> {
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
@@ -755,6 +1359,10 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      await this.initNotebooks(userContext.databaseAccount);
+    }
+
     await this.refreshSampleData();
   }
 
diff --git a/src/Explorer/Notebook/NotebookManager.tsx b/src/Explorer/Notebook/NotebookManager.tsx
index 45afe6061..3ccbefcaf 100644
--- a/src/Explorer/Notebook/NotebookManager.tsx
+++ b/src/Explorer/Notebook/NotebookManager.tsx
@@ -12,13 +12,15 @@ import * as Logger from "../../Common/Logger";
 import { GitHubClient } from "../../GitHub/GitHubClient";
 import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
 import { getFullName } from "../../Utils/UserUtils";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
+import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
 import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import { PublishNotebookPane } from "../Panes/PublishNotebookPane/PublishNotebookPane";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
@@ -38,6 +40,7 @@ export interface NotebookManagerOptions {
   container: Explorer;
   resourceTree: ResourceTreeAdapter;
   refreshCommandBarButtons: () => void;
+  refreshNotebookList: () => void;
 }
 
 export default class NotebookManager {
@@ -78,6 +81,10 @@ export default class NotebookManager {
       contents.JupyterContentProvider,
     );
 
+    this.notebookClient = new NotebookContainerClient(() =>
+      this.params.container.initNotebooks(userContext?.databaseAccount),
+    );
+
     this.notebookContentClient = new NotebookContentClient(this.notebookContentProvider);
 
     this.gitHubOAuthService.getTokenObservable().subscribe((token) => {
@@ -99,9 +106,11 @@ export default class NotebookManager {
       }
 
       this.params.refreshCommandBarButtons();
+      this.params.refreshNotebookList();
     });
 
     this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
+      this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
       this.params.resourceTree.triggerRender();
       useNotebook.getState().initializeGitHubRepos(pinnedRepos);
     });
@@ -140,6 +149,22 @@ export default class NotebookManager {
       );
   }
 
+  public openCopyNotebookPane(name: string, content: string): void {
+    const { container } = this.params;
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Copy Notebook",
+        <CopyNotebookPane
+          container={container}
+          junoClient={this.junoClient}
+          gitHubOAuthService={this.gitHubOAuthService}
+          name={name}
+          content={content}
+        />,
+      );
+  }
+
   // Octokit's error handler uses any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private onGitHubClientError = (error: any): void => {
diff --git a/src/Explorer/OpenActions/OpenActions.tsx b/src/Explorer/OpenActions/OpenActions.tsx
index e2059cdba..f3ef288c8 100644
--- a/src/Explorer/OpenActions/OpenActions.tsx
+++ b/src/Explorer/OpenActions/OpenActions.tsx
@@ -195,5 +195,17 @@ export function handleOpenAction(
     return true;
   }
 
+  if (
+    action.actionType === ActionContracts.ActionType.OpenSampleNotebook ||
+    action.actionType === ActionContracts.ActionType[ActionContracts.ActionType.OpenSampleNotebook]
+  ) {
+    openFile(action as ActionContracts.OpenSampleNotebook, explorer);
+    return true;
+  }
+
   return false;
 }
+
+function openFile(action: ActionContracts.OpenSampleNotebook, explorer: Explorer) {
+  explorer.handleOpenFileAction(decodeURIComponent(action.path));
+}
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
new file mode 100644
index 000000000..0f7927b3b
--- /dev/null
+++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
@@ -0,0 +1,154 @@
+import { IDropdownOption } from "@fluentui/react";
+import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
+import { HttpStatusCodes, PoolIdType } from "../../../Common/Constants";
+import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import Explorer from "../../Explorer";
+import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
+import { useNotebook } from "../../Notebook/useNotebook";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
+
+interface Location {
+  type: "MyNotebooks" | "GitHub";
+
+  // GitHub
+  owner?: string;
+  repo?: string;
+  branch?: string;
+}
+export interface CopyNotebookPanelProps {
+  name: string;
+  content: string;
+  container: Explorer;
+  junoClient: JunoClient;
+  gitHubOAuthService: GitHubOAuthService;
+}
+
+export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
+  name,
+  content,
+  container,
+  junoClient,
+  gitHubOAuthService,
+}: CopyNotebookPanelProps) => {
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
+  const [isExecuting, setIsExecuting] = useState<boolean>();
+  const [formError, setFormError] = useState<string>("");
+  const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
+  const [selectedLocation, setSelectedLocation] = useState<Location>();
+
+  useEffect(() => {
+    open();
+  }, []);
+
+  const open = async (): Promise<void> => {
+    if (gitHubOAuthService.isLoggedIn()) {
+      const response = await junoClient.getPinnedRepos(gitHubOAuthService.getTokenObservable()()?.scope);
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        handleError(`Received HTTP ${response.status} when fetching pinned repos`, "CopyNotebookPaneAdapter/submit");
+      }
+
+      if (response.data?.length > 0) {
+        setPinnedRepos(response.data);
+      }
+    }
+  };
+
+  const submit = async (): Promise<void> => {
+    let destination: string = selectedLocation?.type;
+    let clearMessage: () => void;
+    setIsExecuting(true);
+
+    try {
+      if (!selectedLocation) {
+        throw new Error(`No location selected`);
+      }
+
+      if (selectedLocation.type === "GitHub") {
+        destination = `${destination} - ${GitHubUtils.toRepoFullName(
+          selectedLocation.owner,
+          selectedLocation.repo,
+        )} - ${selectedLocation.branch}`;
+      } else if (selectedLocation.type === "MyNotebooks" && useNotebook.getState().isPhoenixNotebooks) {
+        destination = useNotebook.getState().notebookFolderName;
+      }
+
+      clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);
+
+      const notebookContentItem = await copyNotebook(selectedLocation);
+      if (!notebookContentItem) {
+        throw new Error(`Failed to upload ${name}`);
+      }
+
+      NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${name} to ${destination}`);
+      closeSidePanel();
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setFormError(`Failed to copy ${name} to ${destination}`);
+      handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
+    } finally {
+      clearMessage && clearMessage();
+      setIsExecuting(false);
+    }
+  };
+
+  const copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
+    let parent: NotebookContentItem;
+    let isGithubTree: boolean;
+    switch (location.type) {
+      case "MyNotebooks":
+        parent = {
+          name: useNotebook.getState().notebookFolderName,
+          path: useNotebook.getState().notebookBasePath,
+          type: NotebookContentItemType.Directory,
+        };
+        isGithubTree = false;
+        if (useNotebook.getState().isPhoenixNotebooks) {
+          await container.allocateContainer(PoolIdType.DefaultPoolId);
+        }
+        break;
+
+      case "GitHub":
+        parent = {
+          name: selectedLocation.branch,
+          path: GitHubUtils.toContentUri(selectedLocation.owner, selectedLocation.repo, selectedLocation.branch, ""),
+          type: NotebookContentItemType.Directory,
+        };
+        isGithubTree = true;
+        break;
+
+      default:
+        throw new Error(`Unsupported location type ${location.type}`);
+    }
+
+    return container.uploadFile(name, content, parent, isGithubTree);
+  };
+
+  const onDropDownChange = (_: FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
+    setSelectedLocation(option?.data);
+  };
+
+  const props: RightPaneFormProps = {
+    formError,
+    isExecuting: isExecuting,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+  };
+
+  const copyNotebookPaneProps: CopyNotebookPaneProps = {
+    name,
+    pinnedRepos,
+    onDropDownChange: onDropDownChange,
+  };
+
+  return (
+    <RightPaneForm {...props}>
+      <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
+    </RightPaneForm>
+  );
+};
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
new file mode 100644
index 000000000..5cd0cfdc1
--- /dev/null
+++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
@@ -0,0 +1,120 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IDropdownProps,
+  IRenderFunction,
+  ISelectableOption,
+  Label,
+  SelectableOptionMenuItemType,
+  Stack,
+  Text,
+} from "@fluentui/react";
+import { GitHubReposTitle } from "Explorer/Tree/ResourceTree";
+import React, { FormEvent, FunctionComponent } from "react";
+import { IPinnedRepo } from "../../../Juno/JunoClient";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import { useNotebook } from "../../Notebook/useNotebook";
+
+interface Location {
+  type: "MyNotebooks" | "GitHub";
+
+  // GitHub
+  owner?: string;
+  repo?: string;
+  branch?: string;
+}
+
+export interface CopyNotebookPaneProps {
+  name: string;
+  pinnedRepos: IPinnedRepo[];
+  onDropDownChange: (_: FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
+}
+
+export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps> = ({
+  name,
+  pinnedRepos,
+  onDropDownChange,
+}: CopyNotebookPaneProps) => {
+  const BranchNameWhiteSpace = "   ";
+
+  const onRenderDropDownTitle: IRenderFunction<IDropdownOption[]> = (options: IDropdownOption[]): JSX.Element => {
+    return <span>{options.length && options[0].title}</span>;
+  };
+
+  const onRenderDropDownOption: IRenderFunction<ISelectableOption> = (option: ISelectableOption): JSX.Element => {
+    return <span style={{ whiteSpace: "pre-wrap" }}>{option.text}</span>;
+  };
+
+  const getDropDownOptions = (): IDropdownOption[] => {
+    const options: IDropdownOption[] = [];
+    options.push({
+      key: "MyNotebooks-Item",
+      text: useNotebook.getState().notebookFolderName,
+      title: useNotebook.getState().notebookFolderName,
+      data: {
+        type: "MyNotebooks",
+      } as Location,
+    });
+
+    if (pinnedRepos && pinnedRepos.length > 0) {
+      options.push({
+        key: "GitHub-Header-Divider",
+        text: undefined,
+        itemType: SelectableOptionMenuItemType.Divider,
+      });
+
+      options.push({
+        key: "GitHub-Header",
+        text: GitHubReposTitle,
+        itemType: SelectableOptionMenuItemType.Header,
+      });
+
+      pinnedRepos.forEach((pinnedRepo) => {
+        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
+        options.push({
+          key: `GitHub-Repo-${repoFullName}`,
+          text: repoFullName,
+          disabled: true,
+        });
+
+        pinnedRepo.branches.forEach((branch) =>
+          options.push({
+            key: `GitHub-Repo-${repoFullName}-${branch.name}`,
+            text: `${BranchNameWhiteSpace}${branch.name}`,
+            title: `${repoFullName} - ${branch.name}`,
+            data: {
+              type: "GitHub",
+              owner: pinnedRepo.owner,
+              repo: pinnedRepo.name,
+              branch: branch.name,
+            } as Location,
+          }),
+        );
+      });
+    }
+
+    return options;
+  };
+  const dropDownProps: IDropdownProps = {
+    label: "Location",
+    ariaLabel: "Location",
+    placeholder: "Select an option",
+    onRenderTitle: onRenderDropDownTitle,
+    onRenderOption: onRenderDropDownOption,
+    options: getDropDownOptions(),
+    onChange: onDropDownChange,
+  };
+
+  return (
+    <div className="paneMainContent">
+      <Stack tokens={{ childrenGap: 10 }}>
+        <Stack.Item>
+          <Label htmlFor="notebookName">Name</Label>
+          <Text id="notebookName">{name}</Text>
+        </Stack.Item>
+
+        <Dropdown {...dropDownProps} />
+      </Stack>
+    </div>
+  );
+};
diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
index aa2137c42..4a3a8942e 100644
--- a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
+++ b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
@@ -17,6 +17,8 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
       addRepoProps={
         Object {
           "container": Explorer {
+            "_isInitializingNotebooks": false,
+            "_resetNotebookWorkspace": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
@@ -33,8 +35,10 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "queriesClient": QueriesClient {
               "container": [Circular],
             },
+            "refreshNotebookList": [Function],
             "resourceTree": ResourceTreeAdapter {
               "container": [Circular],
+              "copyNotebook": [Function],
               "parameters": [Function],
             },
           },
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index 566808f4b..8054abe19 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
@@ -7,6 +7,8 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   errorMessage="Could not create directory "
   explorer={
     Explorer {
+      "_isInitializingNotebooks": false,
+      "_resetNotebookWorkspace": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
@@ -23,8 +25,10 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "queriesClient": QueriesClient {
         "container": [Circular],
       },
+      "refreshNotebookList": [Function],
       "resourceTree": ResourceTreeAdapter {
         "container": [Circular],
+        "copyNotebook": [Function],
         "parameters": [Function],
       },
     }
diff --git a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
index 6d875fe2e..26b52ff90 100644
--- a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
@@ -22,6 +22,8 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       databaseId="CopilotSampleDb"
       explorer={
         Explorer {
+          "_isInitializingNotebooks": false,
+          "_resetNotebookWorkspace": [Function],
           "isFixedCollectionWithSharedThroughputSupported": [Function],
           "isTabsContentExpanded": [Function],
           "onRefreshDatabasesKeyPress": [Function],
@@ -38,8 +40,10 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
           "queriesClient": QueriesClient {
             "container": [Circular],
           },
+          "refreshNotebookList": [Function],
           "resourceTree": ResourceTreeAdapter {
             "container": [Circular],
+            "copyNotebook": [Function],
             "parameters": [Function],
           },
         }
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index e9477e088..f4ebb9cd0 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -25,9 +25,11 @@ import * as React from "react";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
+import NotebookColorIcon from "../../../images/Notebooks.svg";
 import PowerShellIcon from "../../../images/PowerShell.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
 import { userContext } from "../../UserContext";
@@ -408,6 +410,14 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         },
       };
       heroes.push(launchQuickstartBtn);
+    } else if (useNotebook.getState().isPhoenixNotebooks) {
+      const newNotebookBtn = {
+        iconSrc: NotebookColorIcon,
+        title: "New notebook",
+        description: "Visualize your data stored in Azure Cosmos DB",
+        onClick: () => this.container.onNewNotebookClicked(),
+      };
+      heroes.push(newNotebookBtn);
     }
 
     heroes.push(this.getShellCard());
@@ -483,12 +493,28 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     };
   }
 
+  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
+    return {
+      info: path,
+      iconSrc: NotebookIcon,
+      title: name,
+      description: "Notebook",
+      onClick: () => {
+        const notebookItem = this.container.createNotebookContentItemFile(name, path);
+        notebookItem && this.container.openNotebook(notebookItem);
+      },
+    };
+  }
+
   private createRecentItems(): SplashScreenItem[] {
     return MostRecentActivity.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((activity) => {
       switch (activity.type) {
         default: {
-          throw new Error(`Unknown activity: ${activity}`);
+          const unknownActivity: never = activity;
+          throw new Error(`Unknown activity: ${unknownActivity}`);
         }
+        case MostRecentActivity.Type.OpenNotebook:
+          return this.decorateOpenNotebookActivity(activity);
 
         case MostRecentActivity.Type.OpenCollection:
           return this.decorateOpenCollectionActivity(activity);
diff --git a/src/Explorer/Tabs/NotebookV2Tab.ts b/src/Explorer/Tabs/NotebookV2Tab.ts
index fadb43258..92e0e6958 100644
--- a/src/Explorer/Tabs/NotebookV2Tab.ts
+++ b/src/Explorer/Tabs/NotebookV2Tab.ts
@@ -1,11 +1,31 @@
+import { stringifyNotebook, toJS } from "@nteract/commutable";
 import * as ko from "knockout";
 import * as Q from "q";
+import { userContext } from "UserContext";
+import ClearAllOutputsIcon from "../../../images/notebook/Notebook-clear-all-outputs.svg";
+import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
+import CutIcon from "../../../images/notebook/Notebook-cut.svg";
+import NewCellIcon from "../../../images/notebook/Notebook-insert-cell.svg";
+import PasteIcon from "../../../images/notebook/Notebook-paste.svg";
+import RestartIcon from "../../../images/notebook/Notebook-restart.svg";
+import RunAllIcon from "../../../images/notebook/Notebook-run-all.svg";
+import RunIcon from "../../../images/notebook/Notebook-run.svg";
+import { default as InterruptKernelIcon, default as KillKernelIcon } from "../../../images/notebook/Notebook-stop.svg";
+import SaveIcon from "../../../images/save-cosmos.svg";
+import { useNotebookSnapshotStore } from "../../hooks/useNotebookSnapshotStore";
+import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { useDialog } from "../Controls/Dialog";
+import * as CommandBarComponentButtonFactory from "../Menus/CommandBar/CommandBarComponentButtonFactory";
+import { KernelSpecsDisplay } from "../Notebook/NotebookClientV2";
+import * as CdbActions from "../Notebook/NotebookComponent/actions";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
+import { CdbAppState, SnapshotRequest } from "../Notebook/NotebookComponent/types";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
 import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
 
@@ -70,7 +90,275 @@ export default class NotebookTabV2 extends NotebookTabBase {
   }
 
   protected getTabsButtons(): CommandButtonComponentProps[] {
-    return [];
+    const availableKernels = NotebookTabV2.clientManager.getAvailableKernelSpecs();
+    const isNotebookUntrusted = this.notebookComponentAdapter.isNotebookUntrusted();
+
+    const runBtnTooltip = isNotebookUntrusted ? NotebookUtil.UntrustedNotebookRunHint : undefined;
+
+    const saveLabel = "Save";
+    const copyToLabel = "Copy to ...";
+    const publishLabel = "Publish to gallery";
+    const kernelLabel = "No Kernel";
+    const runLabel = "Run";
+    const runActiveCellLabel = "Run Active Cell";
+    const runAllLabel = "Run All";
+    const interruptKernelLabel = "Interrupt Kernel";
+    const killKernelLabel = "Halt Kernel";
+    const restartKernelLabel = "Restart Kernel";
+    const clearLabel = "Clear outputs";
+    const newCellLabel = "New Cell";
+    const cellTypeLabel = "Cell Type";
+    const codeLabel = "Code";
+    const markdownLabel = "Markdown";
+    const rawLabel = "Raw";
+    const copyLabel = "Copy";
+    const cutLabel = "Cut";
+    const pasteLabel = "Paste";
+    const cellCodeType = "code";
+    const cellMarkdownType = "markdown";
+    const cellRawType = "raw";
+
+    const saveButtonChildren = [];
+    if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+      saveButtonChildren.push({
+        iconName: copyToLabel,
+        onCommandClick: () => this.copyNotebook(),
+        commandButtonLabel: copyToLabel,
+        hasPopup: false,
+        disabled: false,
+        ariaLabel: copyToLabel,
+      });
+    }
+
+    if (userContext.features.publicGallery) {
+      saveButtonChildren.push({
+        iconName: "PublishContent",
+        onCommandClick: async () => await this.publishToGallery(),
+        commandButtonLabel: publishLabel,
+        hasPopup: false,
+        disabled: false,
+        ariaLabel: publishLabel,
+      });
+    }
+
+    let buttons: CommandButtonComponentProps[] = [
+      {
+        iconSrc: SaveIcon,
+        iconAlt: saveLabel,
+        onCommandClick: () => this.notebookComponentAdapter.notebookSave(),
+        commandButtonLabel: saveLabel,
+        hasPopup: false,
+        disabled: false,
+        ariaLabel: saveLabel,
+        children: saveButtonChildren.length && [
+          {
+            iconName: "Save",
+            onCommandClick: () => this.notebookComponentAdapter.notebookSave(),
+            commandButtonLabel: saveLabel,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: saveLabel,
+          },
+          ...saveButtonChildren,
+        ],
+      },
+      {
+        iconSrc: null,
+        iconAlt: kernelLabel,
+        onCommandClick: () => {},
+        commandButtonLabel: null,
+        hasPopup: false,
+        disabled: availableKernels.length < 1,
+        isDropdown: true,
+        dropdownPlaceholder: kernelLabel,
+        dropdownSelectedKey: this.notebookComponentAdapter.getSelectedKernelName(), //this.currentKernelName,
+        dropdownWidth: 100,
+        children: availableKernels.map(
+          (kernel: KernelSpecsDisplay) =>
+            ({
+              iconSrc: null,
+              iconAlt: kernel.displayName,
+              onCommandClick: () => this.notebookComponentAdapter.notebookChangeKernel(kernel.name),
+              commandButtonLabel: kernel.displayName,
+              dropdownItemKey: kernel.name,
+              hasPopup: false,
+              disabled: false,
+              ariaLabel: kernel.displayName,
+            }) as CommandButtonComponentProps,
+        ),
+        ariaLabel: kernelLabel,
+      },
+      {
+        iconSrc: RunIcon,
+        iconAlt: runLabel,
+        onCommandClick: () => {
+          this.notebookComponentAdapter.notebookRunAndAdvance();
+          this.traceTelemetry(Action.ExecuteCell);
+        },
+        commandButtonLabel: runLabel,
+        tooltipText: runBtnTooltip,
+        ariaLabel: runLabel,
+        hasPopup: false,
+        disabled: isNotebookUntrusted,
+        children: [
+          {
+            iconSrc: RunIcon,
+            iconAlt: runActiveCellLabel,
+            onCommandClick: () => {
+              this.notebookComponentAdapter.notebookRunAndAdvance();
+              this.traceTelemetry(Action.ExecuteCell);
+            },
+            commandButtonLabel: runActiveCellLabel,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: runActiveCellLabel,
+          },
+          {
+            iconSrc: RunAllIcon,
+            iconAlt: runAllLabel,
+            onCommandClick: () => {
+              this.notebookComponentAdapter.notebookRunAll();
+              this.traceTelemetry(Action.ExecuteAllCells);
+            },
+            commandButtonLabel: runAllLabel,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: runAllLabel,
+          },
+          {
+            iconSrc: InterruptKernelIcon,
+            iconAlt: interruptKernelLabel,
+            onCommandClick: () => this.notebookComponentAdapter.notebookInterruptKernel(),
+            commandButtonLabel: interruptKernelLabel,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: interruptKernelLabel,
+          },
+          {
+            iconSrc: KillKernelIcon,
+            iconAlt: killKernelLabel,
+            onCommandClick: () => this.notebookComponentAdapter.notebookKillKernel(),
+            commandButtonLabel: killKernelLabel,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: killKernelLabel,
+          },
+          {
+            iconSrc: RestartIcon,
+            iconAlt: restartKernelLabel,
+            onCommandClick: () => this.notebookComponentAdapter.notebookRestartKernel(),
+            commandButtonLabel: restartKernelLabel,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: restartKernelLabel,
+          },
+        ],
+      },
+      {
+        iconSrc: ClearAllOutputsIcon,
+        iconAlt: clearLabel,
+        onCommandClick: () => this.notebookComponentAdapter.notebookClearAllOutputs(),
+        commandButtonLabel: clearLabel,
+        hasPopup: false,
+        disabled: false,
+        ariaLabel: clearLabel,
+      },
+      {
+        iconSrc: NewCellIcon,
+        iconAlt: newCellLabel,
+        onCommandClick: () => this.notebookComponentAdapter.notebookInsertBelow(),
+        commandButtonLabel: newCellLabel,
+        ariaLabel: newCellLabel,
+        hasPopup: false,
+        disabled: false,
+      },
+      CommandBarComponentButtonFactory.createDivider(),
+      {
+        iconSrc: null,
+        iconAlt: null,
+        onCommandClick: () => {},
+        commandButtonLabel: null,
+        ariaLabel: cellTypeLabel,
+        hasPopup: false,
+        disabled: false,
+        isDropdown: true,
+        dropdownPlaceholder: cellTypeLabel,
+        dropdownSelectedKey: this.notebookComponentAdapter.getActiveCellTypeStr(),
+        dropdownWidth: 110,
+        children: [
+          {
+            iconSrc: null,
+            iconAlt: null,
+            onCommandClick: () => this.notebookComponentAdapter.notebookChangeCellType(cellCodeType),
+            commandButtonLabel: codeLabel,
+            ariaLabel: codeLabel,
+            dropdownItemKey: cellCodeType,
+            hasPopup: false,
+            disabled: false,
+          },
+          {
+            iconSrc: null,
+            iconAlt: null,
+            onCommandClick: () => this.notebookComponentAdapter.notebookChangeCellType(cellMarkdownType),
+            commandButtonLabel: markdownLabel,
+            ariaLabel: markdownLabel,
+            dropdownItemKey: cellMarkdownType,
+            hasPopup: false,
+            disabled: false,
+          },
+          {
+            iconSrc: null,
+            iconAlt: null,
+            onCommandClick: () => this.notebookComponentAdapter.notebookChangeCellType(cellRawType),
+            commandButtonLabel: rawLabel,
+            ariaLabel: rawLabel,
+            dropdownItemKey: cellRawType,
+            hasPopup: false,
+            disabled: false,
+          },
+        ],
+      },
+      {
+        iconSrc: CopyIcon,
+        iconAlt: copyLabel,
+        onCommandClick: () => this.notebookComponentAdapter.notebokCopy(),
+        commandButtonLabel: copyLabel,
+        ariaLabel: copyLabel,
+        hasPopup: false,
+        disabled: false,
+        children: [
+          {
+            iconSrc: CopyIcon,
+            iconAlt: copyLabel,
+            onCommandClick: () => this.notebookComponentAdapter.notebokCopy(),
+            commandButtonLabel: copyLabel,
+            ariaLabel: copyLabel,
+            hasPopup: false,
+            disabled: false,
+          },
+          {
+            iconSrc: CutIcon,
+            iconAlt: cutLabel,
+            onCommandClick: () => this.notebookComponentAdapter.notebookCut(),
+            commandButtonLabel: cutLabel,
+            ariaLabel: cutLabel,
+            hasPopup: false,
+            disabled: false,
+          },
+          {
+            iconSrc: PasteIcon,
+            iconAlt: pasteLabel,
+            onCommandClick: () => this.notebookComponentAdapter.notebookPaste(),
+            commandButtonLabel: pasteLabel,
+            ariaLabel: pasteLabel,
+            hasPopup: false,
+            disabled: false,
+          },
+        ],
+      },
+      // TODO: Uncomment when undo/redo is reimplemented in nteract
+    ];
+    return buttons;
   }
 
   protected buildCommandBarOptions(): void {
@@ -94,4 +382,50 @@ export default class NotebookTabV2 extends NotebookTabBase {
       sparkClusterConnectionInfo,
     );
   }
+
+  private publishToGallery = async () => {
+    TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
+      source: Source.CommandBarMenu,
+    });
+
+    const notebookReduxStore = NotebookTabV2.clientManager.getStore();
+    const unsubscribe = notebookReduxStore.subscribe(() => {
+      const cdbState = (notebookReduxStore.getState() as CdbAppState).cdb;
+      useNotebookSnapshotStore.setState({
+        snapshot: cdbState.notebookSnapshot?.imageSrc,
+        error: cdbState.notebookSnapshotError,
+      });
+    });
+
+    const notebookContent = this.notebookComponentAdapter.getContent();
+    const notebookContentRef = this.notebookComponentAdapter.contentRef;
+    const onPanelClose = (): void => {
+      unsubscribe();
+      useNotebookSnapshotStore.setState({
+        snapshot: undefined,
+        error: undefined,
+      });
+      notebookReduxStore.dispatch(CdbActions.takeNotebookSnapshot(undefined));
+    };
+
+    await this.container.publishNotebook(
+      notebookContent.name,
+      notebookContent.content,
+      notebookContentRef,
+      (request: SnapshotRequest) => notebookReduxStore.dispatch(CdbActions.takeNotebookSnapshot(request)),
+      onPanelClose,
+    );
+  };
+
+  private copyNotebook = () => {
+    const notebookContent = this.notebookComponentAdapter.getContent();
+    let content: string;
+    if (typeof notebookContent.content === "string") {
+      content = notebookContent.content;
+    } else {
+      content = stringifyNotebook(toJS(notebookContent.content));
+    }
+
+    this.container.copyNotebook(notebookContent.name, content);
+  };
 }
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index 0933eac7b..b5f759534 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,23 +1,42 @@
+import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import { SampleDataTree } from "Explorer/Tree/SampleDataTree";
 import { getItemName } from "Utils/APITypeUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as React from "react";
 import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
+import GalleryIcon from "../../../images/GalleryIcon.svg";
+import DeleteIcon from "../../../images/delete.svg";
+import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
+import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import FileIcon from "../../../images/notebook/file-cosmos.svg";
+import PublishIcon from "../../../images/notebook/publish_content.svg";
+import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
+import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
+import * as GitHubUtils from "../../Utils/GitHubUtils";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import { useDialog } from "../Controls/Dialog";
+import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
+import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
+import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -26,21 +45,391 @@ import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
 
+export const MyNotebooksTitle = "My Notebooks";
+export const GitHubReposTitle = "GitHub repos";
+
 interface ResourceTreeProps {
   container: Explorer;
 }
 
 export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: ResourceTreeProps): JSX.Element => {
   const databases = useDatabases((state) => state.databases);
-  const { isNotebookEnabled } = useNotebook(
+  const {
+    isNotebookEnabled,
+    myNotebooksContentRoot,
+    galleryContentRoot,
+    gitHubNotebooksContentRoot,
+    updateNotebookItem,
+  } = useNotebook(
     (state) => ({
       isNotebookEnabled: state.isNotebookEnabled,
+      myNotebooksContentRoot: state.myNotebooksContentRoot,
+      galleryContentRoot: state.galleryContentRoot,
+      gitHubNotebooksContentRoot: state.gitHubNotebooksContentRoot,
+      updateNotebookItem: state.updateNotebookItem,
     }),
     shallow,
   );
-  const { refreshActiveTab } = useTabs();
+  const { activeTab, refreshActiveTab } = useTabs();
   const showScriptNodes =
     configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+  const pseudoDirPath = "PsuedoDir";
+
+  const buildGalleryCallout = (): JSX.Element => {
+    if (
+      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
+      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
+    ) {
+      return undefined;
+    }
+
+    const calloutProps: ICalloutProps = {
+      calloutMaxWidth: 350,
+      ariaLabel: "New gallery",
+      role: "alertdialog",
+      gapSpace: 0,
+      target: ".galleryHeader",
+      directionalHint: DirectionalHint.leftTopEdge,
+      onDismiss: () => {
+        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
+      },
+      setInitialFocus: true,
+    };
+
+    const openGalleryProps: ILinkProps = {
+      onClick: () => {
+        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
+        container.openGallery();
+      },
+    };
+
+    return (
+      <Callout {...calloutProps}>
+        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
+          <Text variant="xLarge" block>
+            New gallery
+          </Text>
+          <Text block>
+            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
+            contributors.
+          </Text>
+          <Link {...openGalleryProps}>Open gallery</Link>
+        </Stack>
+      </Callout>
+    );
+  };
+
+  const buildNotebooksTree = (): TreeNode => {
+    const notebooksTree: TreeNode = {
+      label: undefined,
+      isExpanded: true,
+      children: [],
+    };
+
+    if (!useNotebook.getState().isPhoenixNotebooks) {
+      notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
+    } else {
+      if (galleryContentRoot) {
+        notebooksTree.children.push(buildGalleryNotebooksTree());
+      }
+
+      if (
+        myNotebooksContentRoot &&
+        useNotebook.getState().isPhoenixNotebooks &&
+        useNotebook.getState().connectionInfo.status === ConnectionStatusType.Connected
+      ) {
+        notebooksTree.children.push(buildMyNotebooksTree());
+      }
+      if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+        // collapse all other notebook nodes
+        notebooksTree.children.forEach((node) => (node.isExpanded = false));
+        notebooksTree.children.push(buildGitHubNotebooksTree(true));
+      }
+    }
+    return notebooksTree;
+  };
+
+  const buildNotebooksTemporarilyDownTree = (): TreeNode => {
+    return {
+      label: Notebook.temporarilyDownMsg,
+      className: "clickDisabled",
+    };
+  };
+
+  const buildGalleryNotebooksTree = (): TreeNode => {
+    return {
+      label: "Gallery",
+      iconSrc: GalleryIcon,
+      className: "notebookHeader galleryHeader",
+      onClick: () => container.openGallery(),
+      isSelected: () => activeTab?.tabKind === ViewModels.CollectionTabKind.Gallery,
+    };
+  };
+
+  const buildMyNotebooksTree = (): TreeNode => {
+    const myNotebooksTree: TreeNode = buildNotebookDirectoryNode(
+      myNotebooksContentRoot,
+      (item: NotebookContentItem) => {
+        container.openNotebook(item);
+      },
+    );
+
+    myNotebooksTree.isExpanded = true;
+    myNotebooksTree.isAlphaSorted = true;
+    // Remove "Delete" menu item from context menu
+    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
+    return myNotebooksTree;
+  };
+
+  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
+    const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
+      gitHubNotebooksContentRoot,
+      (item: NotebookContentItem) => {
+        container.openNotebook(item);
+      },
+      true,
+    );
+    const manageGitContextMenu: TreeNodeMenuItem[] = [
+      {
+        label: "Manage GitHub settings",
+        onClick: () =>
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              "Manage GitHub settings",
+              <GitHubReposPanel
+                explorer={container}
+                gitHubClientProp={container.notebookManager.gitHubClient}
+                junoClientProp={container.notebookManager.junoClient}
+              />,
+            ),
+      },
+      {
+        label: "Disconnect from GitHub",
+        onClick: () => {
+          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
+            dataExplorerArea: Areas.Notebook,
+          });
+          container.notebookManager?.gitHubOAuthService.logout();
+        },
+      },
+    ];
+    gitHubNotebooksTree.contextMenu = manageGitContextMenu;
+    gitHubNotebooksTree.isExpanded = true;
+    gitHubNotebooksTree.isAlphaSorted = true;
+
+    return gitHubNotebooksTree;
+  };
+
+  const buildChildNodes = (
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean,
+  ): TreeNode[] => {
+    if (!item || !item.children) {
+      return [];
+    } else {
+      return item.children.map((item) => {
+        const result =
+          item.type === NotebookContentItemType.Directory
+            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
+            : buildNotebookFileNode(item, onFileClick, isGithubTree);
+        result.timestamp = item.timestamp;
+        return result;
+      });
+    }
+  };
+
+  const buildNotebookFileNode = (
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean,
+  ): TreeNode => {
+    return {
+      label: item.name,
+      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
+      className: "notebookHeader",
+      onClick: () => onFileClick(item),
+      isSelected: () => {
+        return (
+          activeTab &&
+          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
+          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
+                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
+                   */
+          (activeTab as any).notebookPath() === item.path
+        );
+      },
+      contextMenu: createFileContextMenu(container, item, isGithubTree),
+      data: item,
+    };
+  };
+
+  const createFileContextMenu = (
+    container: Explorer,
+    item: NotebookContentItem,
+    isGithubTree?: boolean,
+  ): TreeNodeMenuItem[] => {
+    let items: TreeNodeMenuItem[] = [
+      {
+        label: "Rename",
+        iconSrc: NotebookIcon,
+        onClick: () => container.renameNotebook(item, isGithubTree),
+      },
+      {
+        label: "Delete",
+        iconSrc: DeleteIcon,
+        onClick: () => {
+          useDialog
+            .getState()
+            .showOkCancelModalDialog(
+              "Confirm delete",
+              `Are you sure you want to delete "${item.name}"`,
+              "Delete",
+              () => container.deleteNotebookFile(item, isGithubTree),
+              "Cancel",
+              undefined,
+            );
+        },
+      },
+      {
+        label: "Copy to ...",
+        iconSrc: CopyIcon,
+        onClick: () => copyNotebook(container, item),
+      },
+      {
+        label: "Download",
+        iconSrc: NotebookIcon,
+        onClick: () => container.downloadFile(item),
+      },
+    ];
+
+    if (item.type === NotebookContentItemType.Notebook && userContext.features.publicGallery) {
+      items.push({
+        label: "Publish to gallery",
+        iconSrc: PublishIcon,
+        onClick: async () => {
+          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
+            source: Source.ResourceTreeMenu,
+          });
+
+          const content = await container.readFile(item);
+          if (content) {
+            await container.publishNotebook(item.name, content);
+          }
+        },
+      });
+    }
+
+    // "Copy to ..." isn't needed if github locations are not available
+    if (!container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+      items = items.filter((item) => item.label !== "Copy to ...");
+    }
+
+    return items;
+  };
+
+  const copyNotebook = async (container: Explorer, item: NotebookContentItem) => {
+    const content = await container.readFile(item);
+    if (content) {
+      container.copyNotebook(item.name, content);
+    }
+  };
+
+  const createDirectoryContextMenu = (
+    container: Explorer,
+    item: NotebookContentItem,
+    isGithubTree?: boolean,
+  ): TreeNodeMenuItem[] => {
+    let items: TreeNodeMenuItem[] = [
+      {
+        label: "Refresh",
+        iconSrc: RefreshIcon,
+        onClick: () => loadSubitems(item, isGithubTree),
+      },
+      {
+        label: "Delete",
+        iconSrc: DeleteIcon,
+        onClick: () => {
+          useDialog
+            .getState()
+            .showOkCancelModalDialog(
+              "Confirm delete",
+              `Are you sure you want to delete "${item.name}?"`,
+              "Delete",
+              () => container.deleteNotebookFile(item, isGithubTree),
+              "Cancel",
+              undefined,
+            );
+        },
+      },
+      {
+        label: "Rename",
+        iconSrc: NotebookIcon,
+        onClick: () => container.renameNotebook(item, isGithubTree),
+      },
+      {
+        label: "New Directory",
+        iconSrc: NewNotebookIcon,
+        onClick: () => container.onCreateDirectory(item, isGithubTree),
+      },
+      {
+        label: "Upload File",
+        iconSrc: NewNotebookIcon,
+        onClick: () => container.openUploadFilePanel(item),
+      },
+    ];
+
+    //disallow renaming of temporary notebook workspace
+    if (item?.path === useNotebook.getState().notebookBasePath) {
+      items = items.filter((item) => item.label !== "Rename");
+    }
+
+    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
+    if (GitHubUtils.fromContentUri(item.path)) {
+      items = items.filter(
+        (item) =>
+          item.label !== "Delete" &&
+          item.label !== "Rename" &&
+          item.label !== "New Directory" &&
+          item.label !== "Upload File",
+      );
+    }
+
+    return items;
+  };
+
+  const buildNotebookDirectoryNode = (
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean,
+  ): TreeNode => {
+    return {
+      label: item.name,
+      iconSrc: undefined,
+      className: "notebookHeader",
+      isAlphaSorted: true,
+      isLeavesParentsSeparate: true,
+      onClick: () => {
+        if (!item.children) {
+          loadSubitems(item, isGithubTree);
+        }
+      },
+      isSelected: () => {
+        return (
+          activeTab &&
+          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
+          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
+                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
+                   */
+          (activeTab as any).notebookPath() === item.path
+        );
+      },
+      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
+      data: item,
+      children: buildChildNodes(item, onFileClick, isGithubTree),
+    };
+  };
 
   const buildDataTree = (): TreeNode => {
     const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
@@ -368,6 +757,11 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return traverse(schema);
   };
 
+  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
+    const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
+    updateNotebookItem(updatedItem, isGithubTree);
+  };
+
   const dataRootNode = buildDataTree();
   const isSampleDataEnabled =
     useQueryCopilot().copilotEnabled &&
@@ -381,16 +775,46 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {!isNotebookEnabled && !isSampleDataEnabled && (
         <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
       )}
+      {isNotebookEnabled && !isSampleDataEnabled && (
+        <>
+          <AccordionComponent>
+            <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+            </AccordionItemComponent>
+          </AccordionComponent>
+
+          {/* {buildGalleryCallout()} */}
+        </>
+      )}
       {!isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent title={"MY DATA"} isExpanded={true}>
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
             <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
           </AccordionComponent>
+
+          {/* {buildGalleryCallout()} */}
+        </>
+      )}
+      {isNotebookEnabled && isSampleDataEnabled && (
+        <>
+          <AccordionComponent>
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
+              <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={"NOTEBOOKS"}>
+              <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
+            </AccordionItemComponent>
+          </AccordionComponent>
+
+          {/* {buildGalleryCallout()} */}
         </>
       )}
     </>
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.tsx b/src/Explorer/Tree/ResourceTreeAdapter.tsx
index 67fb54773..b22f0f916 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -1,21 +1,42 @@
+import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import { getItemName } from "Utils/APITypeUtils";
 import * as ko from "knockout";
 import * as React from "react";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
+import GalleryIcon from "../../../images/GalleryIcon.svg";
+import DeleteIcon from "../../../images/delete.svg";
+import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
+import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import FileIcon from "../../../images/notebook/file-cosmos.svg";
+import PublishIcon from "../../../images/notebook/publish_content.svg";
+import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { IPinnedRepo } from "../../Juno/JunoClient";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
+import * as GitHubUtils from "../../Utils/GitHubUtils";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
+import { useDialog } from "../Controls/Dialog";
+import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
+import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
+import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -25,8 +46,19 @@ import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
 
 export class ResourceTreeAdapter implements ReactAdapter {
+  public static readonly MyNotebooksTitle = "My Notebooks";
+  public static readonly GitHubReposTitle = "GitHub repos";
+
+  private static readonly DataTitle = "DATA";
+  private static readonly NotebooksTitle = "NOTEBOOKS";
+  private static readonly PseudoDirPath = "PsuedoDir";
+
   public parameters: ko.Observable<number>;
 
+  public galleryContentRoot: NotebookContentItem;
+  public myNotebooksContentRoot: NotebookContentItem;
+  public gitHubNotebooksContentRoot: NotebookContentItem;
+
   public constructor(private container: Explorer) {
     this.parameters = ko.observable(Date.now());
 
@@ -44,9 +76,111 @@ export class ResourceTreeAdapter implements ReactAdapter {
     this.triggerRender();
   }
 
+  private traceMyNotebookTreeInfo() {
+    const myNotebooksTree = this.myNotebooksContentRoot;
+    if (myNotebooksTree.children) {
+      // Count 1st generation children (tree is lazy-loaded)
+      const nodeCounts = { files: 0, notebooks: 0, directories: 0 };
+      myNotebooksTree.children.forEach((treeNode) => {
+        switch ((treeNode as NotebookContentItem).type) {
+          case NotebookContentItemType.File:
+            nodeCounts.files++;
+            break;
+          case NotebookContentItemType.Directory:
+            nodeCounts.directories++;
+            break;
+          case NotebookContentItemType.Notebook:
+            nodeCounts.notebooks++;
+            break;
+          default:
+            break;
+        }
+      });
+      TelemetryProcessor.trace(Action.RefreshResourceTreeMyNotebooks, ActionModifiers.Mark, { ...nodeCounts });
+    }
+  }
+
   public renderComponent(): JSX.Element {
     const dataRootNode = this.buildDataTree();
-    return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
+    const notebooksRootNode = this.buildNotebooksTrees();
+
+    if (useNotebook.getState().isNotebookEnabled) {
+      return (
+        <>
+          <AccordionComponent>
+            <AccordionItemComponent title={ResourceTreeAdapter.DataTitle} isExpanded={!this.gitHubNotebooksContentRoot}>
+              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={ResourceTreeAdapter.NotebooksTitle}>
+              <TreeComponent className="notebookResourceTree" rootNode={notebooksRootNode} />
+            </AccordionItemComponent>
+          </AccordionComponent>
+
+          {/* {this.galleryContentRoot && this.buildGalleryCallout()} */}
+        </>
+      );
+    } else {
+      return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
+    }
+  }
+
+  public async initialize(): Promise<void[]> {
+    const refreshTasks: Promise<void>[] = [];
+
+    this.galleryContentRoot = {
+      name: "Gallery",
+      path: "Gallery",
+      type: NotebookContentItemType.File,
+    };
+    this.myNotebooksContentRoot = {
+      name: useNotebook.getState().notebookFolderName,
+      path: useNotebook.getState().notebookBasePath,
+      type: NotebookContentItemType.Directory,
+    };
+
+    // Only if notebook server is available we can refresh
+    if (useNotebook.getState().notebookServerInfo?.notebookServerEndpoint) {
+      refreshTasks.push(
+        this.container.refreshContentItem(this.myNotebooksContentRoot).then(() => {
+          this.triggerRender();
+          this.traceMyNotebookTreeInfo();
+        }),
+      );
+    }
+    this.gitHubNotebooksContentRoot = {
+      name: ResourceTreeAdapter.GitHubReposTitle,
+      path: ResourceTreeAdapter.PseudoDirPath,
+      type: NotebookContentItemType.Directory,
+    };
+
+    return Promise.all(refreshTasks);
+  }
+
+  public initializeGitHubRepos(pinnedRepos: IPinnedRepo[]): void {
+    if (this.gitHubNotebooksContentRoot) {
+      this.gitHubNotebooksContentRoot.children = [];
+      pinnedRepos?.forEach((pinnedRepo) => {
+        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
+        const repoTreeItem: NotebookContentItem = {
+          name: repoFullName,
+          path: ResourceTreeAdapter.PseudoDirPath,
+          type: NotebookContentItemType.Directory,
+          children: [],
+        };
+
+        pinnedRepo.branches.forEach((branch) => {
+          repoTreeItem.children.push({
+            name: branch.name,
+            path: GitHubUtils.toContentUri(pinnedRepo.owner, pinnedRepo.name, branch.name, ""),
+            type: NotebookContentItemType.Directory,
+          });
+        });
+
+        this.gitHubNotebooksContentRoot.children.push(repoTreeItem);
+      });
+
+      this.triggerRender();
+    }
   }
 
   private buildDataTree(): TreeNode {
@@ -370,6 +504,365 @@ export class ResourceTreeAdapter implements ReactAdapter {
     return traverse(schema);
   }
 
+  private buildNotebooksTrees(): TreeNode {
+    let notebooksTree: TreeNode = {
+      label: undefined,
+      isExpanded: true,
+      children: [],
+    };
+
+    if (this.galleryContentRoot) {
+      notebooksTree.children.push(this.buildGalleryNotebooksTree());
+    }
+
+    if (this.myNotebooksContentRoot) {
+      notebooksTree.children.push(this.buildMyNotebooksTree());
+    }
+
+    if (this.gitHubNotebooksContentRoot) {
+      // collapse all other notebook nodes
+      notebooksTree.children.forEach((node) => (node.isExpanded = false));
+      notebooksTree.children.push(this.buildGitHubNotebooksTree());
+    }
+
+    return notebooksTree;
+  }
+
+  private buildGalleryCallout(): JSX.Element {
+    if (
+      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
+      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
+    ) {
+      return undefined;
+    }
+
+    const calloutProps: ICalloutProps = {
+      calloutMaxWidth: 350,
+      ariaLabel: "New gallery",
+      role: "alertdialog",
+      gapSpace: 0,
+      target: ".galleryHeader",
+      directionalHint: DirectionalHint.leftTopEdge,
+      onDismiss: () => {
+        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
+        this.triggerRender();
+      },
+      setInitialFocus: true,
+    };
+
+    const openGalleryProps: ILinkProps = {
+      onClick: () => {
+        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
+        this.container.openGallery();
+        this.triggerRender();
+      },
+    };
+
+    return (
+      <Callout {...calloutProps}>
+        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
+          <Text variant="xLarge" block>
+            New gallery
+          </Text>
+          <Text block>
+            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
+            contributors.
+          </Text>
+          <Link {...openGalleryProps}>Open gallery</Link>
+        </Stack>
+      </Callout>
+    );
+  }
+
+  private buildGalleryNotebooksTree(): TreeNode {
+    return {
+      label: "Gallery",
+      iconSrc: GalleryIcon,
+      className: "notebookHeader galleryHeader",
+      onClick: () => this.container.openGallery(),
+      isSelected: () => {
+        const activeTab = useTabs.getState().activeTab;
+        return activeTab && activeTab.tabKind === ViewModels.CollectionTabKind.Gallery;
+      },
+    };
+  }
+
+  private buildMyNotebooksTree(): TreeNode {
+    const myNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
+      this.myNotebooksContentRoot,
+      (item: NotebookContentItem) => {
+        this.container.openNotebook(item).then((hasOpened) => {
+          if (hasOpened) {
+            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+          }
+        });
+      },
+      true,
+      true,
+    );
+
+    myNotebooksTree.isExpanded = true;
+    myNotebooksTree.isAlphaSorted = true;
+    // Remove "Delete" menu item from context menu
+    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
+    return myNotebooksTree;
+  }
+
+  private buildGitHubNotebooksTree(): TreeNode {
+    const gitHubNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
+      this.gitHubNotebooksContentRoot,
+      (item: NotebookContentItem) => {
+        this.container.openNotebook(item).then((hasOpened) => {
+          if (hasOpened) {
+            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+          }
+        });
+      },
+      true,
+      true,
+    );
+
+    gitHubNotebooksTree.contextMenu = [
+      {
+        label: "Manage GitHub settings",
+        onClick: () =>
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              "Manage GitHub settings",
+              <GitHubReposPanel
+                explorer={this.container}
+                gitHubClientProp={this.container.notebookManager.gitHubClient}
+                junoClientProp={this.container.notebookManager.junoClient}
+              />,
+            ),
+      },
+      {
+        label: "Disconnect from GitHub",
+        onClick: () => {
+          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
+            dataExplorerArea: Areas.Notebook,
+          });
+          this.container.notebookManager?.gitHubOAuthService.logout();
+        },
+      },
+    ];
+
+    gitHubNotebooksTree.isExpanded = true;
+    gitHubNotebooksTree.isAlphaSorted = true;
+
+    return gitHubNotebooksTree;
+  }
+
+  private buildChildNodes(
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    createDirectoryContextMenu: boolean,
+    createFileContextMenu: boolean,
+  ): TreeNode[] {
+    if (!item || !item.children) {
+      return [];
+    } else {
+      return item.children.map((item) => {
+        const result =
+          item.type === NotebookContentItemType.Directory
+            ? this.buildNotebookDirectoryNode(item, onFileClick, createDirectoryContextMenu, createFileContextMenu)
+            : this.buildNotebookFileNode(item, onFileClick, createFileContextMenu);
+        result.timestamp = item.timestamp;
+        return result;
+      });
+    }
+  }
+
+  private buildNotebookFileNode(
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    createFileContextMenu: boolean,
+  ): TreeNode {
+    return {
+      label: item.name,
+      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
+      className: "notebookHeader",
+      onClick: () => onFileClick(item),
+      isSelected: () => {
+        const activeTab = useTabs.getState().activeTab;
+        return (
+          activeTab &&
+          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
+          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
+             NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
+           */
+          (activeTab as any).notebookPath() === item.path
+        );
+      },
+      contextMenu: createFileContextMenu && this.createFileContextMenu(item),
+      data: item,
+    };
+  }
+
+  private createFileContextMenu(item: NotebookContentItem): TreeNodeMenuItem[] {
+    let items: TreeNodeMenuItem[] = [
+      {
+        label: "Rename",
+        iconSrc: NotebookIcon,
+        onClick: () => this.container.renameNotebook(item),
+      },
+      {
+        label: "Delete",
+        iconSrc: DeleteIcon,
+        onClick: () => {
+          useDialog
+            .getState()
+            .showOkCancelModalDialog(
+              "Confirm delete",
+              `Are you sure you want to delete "${item.name}"`,
+              "Delete",
+              () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
+              "Cancel",
+              undefined,
+            );
+        },
+      },
+      {
+        label: "Copy to ...",
+        iconSrc: CopyIcon,
+        onClick: () => this.copyNotebook(item),
+      },
+      {
+        label: "Download",
+        iconSrc: NotebookIcon,
+        onClick: () => this.container.downloadFile(item),
+      },
+    ];
+
+    if (item.type === NotebookContentItemType.Notebook) {
+      items.push({
+        label: "Publish to gallery",
+        iconSrc: PublishIcon,
+        onClick: async () => {
+          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
+            source: Source.ResourceTreeMenu,
+          });
+
+          const content = await this.container.readFile(item);
+          if (content) {
+            await this.container.publishNotebook(item.name, content);
+          }
+        },
+      });
+    }
+
+    // "Copy to ..." isn't needed if github locations are not available
+    if (!this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+      items = items.filter((item) => item.label !== "Copy to ...");
+    }
+
+    return items;
+  }
+
+  private copyNotebook = async (item: NotebookContentItem) => {
+    const content = await this.container.readFile(item);
+    if (content) {
+      this.container.copyNotebook(item.name, content);
+    }
+  };
+
+  private createDirectoryContextMenu(item: NotebookContentItem): TreeNodeMenuItem[] {
+    let items: TreeNodeMenuItem[] = [
+      {
+        label: "Refresh",
+        iconSrc: RefreshIcon,
+        onClick: () => this.container.refreshContentItem(item).then(() => this.triggerRender()),
+      },
+      {
+        label: "Delete",
+        iconSrc: DeleteIcon,
+        onClick: () => {
+          useDialog
+            .getState()
+            .showOkCancelModalDialog(
+              "Confirm delete",
+              `Are you sure you want to delete "${item.name}?"`,
+              "Delete",
+              () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
+              "Cancel",
+              undefined,
+            );
+        },
+      },
+      {
+        label: "Rename",
+        iconSrc: NotebookIcon,
+        onClick: () => this.container.renameNotebook(item),
+      },
+      {
+        label: "New Directory",
+        iconSrc: NewNotebookIcon,
+        onClick: () => this.container.onCreateDirectory(item),
+      },
+      {
+        label: "Upload File",
+        iconSrc: NewNotebookIcon,
+        onClick: () => this.container.openUploadFilePanel(item),
+      },
+    ];
+
+    //disallow renaming of temporary notebook workspace
+    if (item?.path === useNotebook.getState().notebookBasePath) {
+      items = items.filter((item) => item.label !== "Rename");
+    }
+
+    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
+    if (GitHubUtils.fromContentUri(item.path)) {
+      items = items.filter(
+        (item) =>
+          item.label !== "Delete" &&
+          item.label !== "Rename" &&
+          item.label !== "New Directory" &&
+          item.label !== "Upload File",
+      );
+    }
+
+    return items;
+  }
+
+  private buildNotebookDirectoryNode(
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    createDirectoryContextMenu: boolean,
+    createFileContextMenu: boolean,
+  ): TreeNode {
+    return {
+      label: item.name,
+      iconSrc: undefined,
+      className: "notebookHeader",
+      isAlphaSorted: true,
+      isLeavesParentsSeparate: true,
+      onClick: () => {
+        if (!item.children) {
+          this.container.refreshContentItem(item).then(() => this.triggerRender());
+        }
+      },
+      isSelected: () => {
+        const activeTab = useTabs.getState().activeTab;
+        return (
+          activeTab &&
+          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
+          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
+             NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
+           */
+          (activeTab as any).notebookPath() === item.path
+        );
+      },
+      contextMenu:
+        createDirectoryContextMenu && item.path !== ResourceTreeAdapter.PseudoDirPath
+          ? this.createDirectoryContextMenu(item)
+          : undefined,
+      data: item,
+      children: this.buildChildNodes(item, onFileClick, createDirectoryContextMenu, createFileContextMenu),
+    };
+  }
+
   public triggerRender() {
     window.requestAnimationFrame(() => this.parameters(Date.now()));
   }
diff --git a/src/Utils/GalleryUtils.ts b/src/Utils/GalleryUtils.ts
index 1314b2b3c..f11b6df5c 100644
--- a/src/Utils/GalleryUtils.ts
+++ b/src/Utils/GalleryUtils.ts
@@ -245,6 +245,7 @@ export function downloadItem(
     },
     "Cancel",
     undefined,
+    container.getDownloadModalConent(name),
   );
 }
 export async function downloadNotebookItem(
@@ -277,6 +278,7 @@ export async function downloadNotebookItem(
       metadata.untrusted = true;
     }
 
+    await container.importAndOpenContent(data.name, JSON.stringify(notebook));
     logConsoleInfo(`Successfully downloaded ${data.name} to ${useNotebook.getState().notebookFolderName}`);
 
     const increaseDownloadResponse = await junoClient.increaseNotebookDownloadCount(data.id);

From 6ebc48ad28a280a96152aaab968b990ff8b5bef0 Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Thu, 2 May 2024 07:14:31 -0700
Subject: [PATCH 32/67] Remove some Notebooks code (#1832)

* Remove onNewNotebookClicked, openUploadFilePanel functions and
UploadFilePane.

* Remove resetNotebookWorkspace function.

* Remove Notebooks related resource tree node generation.

* Fix test snapshots.
---
 .../SettingsComponent.test.tsx.snap           |   4 -
 src/Explorer/Explorer.tsx                     | 220 ------------------
 .../GitHubReposPanel.test.tsx.snap            |   1 -
 .../StringInputPane.test.tsx.snap             |   1 -
 .../Panes/UploadFilePane/UploadFilePane.tsx   |  91 --------
 .../QueryCopilotTab.test.tsx.snap             |   1 -
 src/Explorer/SplashScreen/SplashScreen.tsx    |   9 -
 src/Explorer/Tree/ResourceTree.tsx            | 166 -------------
 src/Explorer/Tree/ResourceTreeAdapter.tsx     | 183 +--------------
 9 files changed, 1 insertion(+), 675 deletions(-)
 delete mode 100644 src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index ab7abac11..65eb765e5 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -30,7 +30,6 @@ exports[`SettingsComponent renders 1`] = `
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -108,7 +107,6 @@ exports[`SettingsComponent renders 1`] = `
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -225,7 +223,6 @@ exports[`SettingsComponent renders 1`] = `
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -272,7 +269,6 @@ exports[`SettingsComponent renders 1`] = `
           explorer={
             Explorer {
               "_isInitializingNotebooks": false,
-              "_resetNotebookWorkspace": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isTabsContentExpanded": [Function],
               "onRefreshDatabasesKeyPress": [Function],
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index 4af478475..fe648918b 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -38,7 +38,6 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
@@ -56,7 +55,6 @@ import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
 import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
-import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
@@ -510,104 +508,6 @@ export default class Explorer {
         .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
   }
 
-  public resetNotebookWorkspace(): void {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
-      handleError(
-        "Attempt to reset notebook workspace, but notebook is not enabled",
-        "Explorer/resetNotebookWorkspace",
-      );
-      return;
-    }
-    const dialogContent = useNotebook.getState().isPhoenixNotebooks
-      ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
-      : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
-
-    const resetConfirmationDialogProps: DialogProps = {
-      isModal: true,
-      title: "Reset Workspace",
-      subText: dialogContent,
-      primaryButtonText: "OK",
-      secondaryButtonText: "Cancel",
-      onPrimaryButtonClick: this._resetNotebookWorkspace,
-      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
-    };
-    useDialog.getState().openDialog(resetConfirmationDialogProps);
-  }
-
-  private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
-    if (!databaseAccount) {
-      return false;
-    }
-    try {
-      const { value: workspaces } = await listByDatabaseAccount(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-      );
-      return workspaces && workspaces.length > 0 && workspaces.some((workspace) => workspace.name === "default");
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
-      return false;
-    }
-  }
-
-  private _resetNotebookWorkspace = async () => {
-    useDialog.getState().closeDialog();
-    const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
-    let connectionStatus: ContainerConnectionInfo;
-    try {
-      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-      if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
-        const error = "No server endpoint detected";
-        Logger.logError(error, "NotebookContainerClient/resetWorkspace");
-        logConsoleError(error);
-        return;
-      }
-      TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-      });
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        useTabs.getState().closeAllNotebookTabs(true);
-        connectionStatus = {
-          status: ConnectionStatusType.Connecting,
-        };
-        useNotebook.getState().setConnectionInfo(connectionStatus);
-      }
-      const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
-      if (connectionInfo?.status !== HttpStatusCodes.OK) {
-        throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
-      }
-      if (!connectionInfo?.data?.phoenixServiceUrl) {
-        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
-      }
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        await this.setNotebookInfo(true, connectionInfo, connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-      }
-      logConsoleInfo("Successfully reset notebook workspace");
-      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-      });
-    } catch (error) {
-      logConsoleError(`Failed to reset notebook workspace: ${error}`);
-      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-        error: getErrorMessage(error),
-        errorStack: getErrorStack(error),
-      });
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        connectionStatus = {
-          status: ConnectionStatusType.Failed,
-        };
-        useNotebook.getState().resetContainerConnection(connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-      }
-      throw error;
-    } finally {
-      clearInProgressMessage();
-    }
-  };
-
   private getDeltaDatabases(
     updatedDatabaseList: DataModels.Database[],
     databases: ViewModels.Database[],
@@ -1010,92 +910,6 @@ export default class Explorer {
     );
   }
 
-  /**
-   * This creates a new notebook file, then opens the notebook
-   */
-  public async onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
-    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
-      const error = "Attempt to create new notebook, but notebook is not enabled";
-      handleError(error, "Explorer/onNewNotebookClicked");
-      throw new Error(error);
-    }
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      if (isGithubTree) {
-        await this.allocateContainer(PoolIdType.DefaultPoolId);
-        parent = parent || this.resourceTree.myNotebooksContentRoot;
-        this.createNewNoteBook(parent, isGithubTree);
-      } else {
-        useDialog.getState().showOkCancelModalDialog(
-          Notebook.newNotebookModalTitle,
-          undefined,
-          "Create",
-          async () => {
-            await this.allocateContainer(PoolIdType.DefaultPoolId);
-            parent = parent || this.resourceTree.myNotebooksContentRoot;
-            this.createNewNoteBook(parent, isGithubTree);
-          },
-          "Cancel",
-          undefined,
-          this.getNewNoteWarningText(),
-        );
-      }
-    } else {
-      parent = parent || this.resourceTree.myNotebooksContentRoot;
-      this.createNewNoteBook(parent, isGithubTree);
-    }
-  }
-
-  private getNewNoteWarningText(): JSX.Element {
-    return (
-      <>
-        <p>{Notebook.newNotebookModalContent1}</p>
-        <br />
-        <p>
-          {Notebook.newNotebookModalContent2}
-          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
-            {Notebook.learnMore}
-          </Link>
-        </p>
-      </>
-    );
-  }
-
-  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
-    const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
-      dataExplorerArea: Constants.Areas.Notebook,
-    });
-
-    this.notebookManager?.notebookContentClient
-      .createNewNotebookFile(parent, isGithubTree)
-      .then((newFile: NotebookContentItem) => {
-        logConsoleInfo(`Successfully created: ${newFile.name}`);
-        TelemetryProcessor.traceSuccess(
-          Action.CreateNewNotebook,
-          {
-            dataExplorerArea: Constants.Areas.Notebook,
-          },
-          startKey,
-        );
-        return this.openNotebook(newFile);
-      })
-      .then(() => this.resourceTree.triggerRender())
-      .catch((error) => {
-        const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
-        logConsoleError(errorMessage);
-        TelemetryProcessor.traceFailure(
-          Action.CreateNewNotebook,
-          {
-            dataExplorerArea: Constants.Areas.Notebook,
-            error: errorMessage,
-            errorStack: getErrorStack(error),
-          },
-          startKey,
-        );
-      })
-      .finally(clearInProgressMessage);
-  }
-
   // TODO: Delete this function when ResourceTreeAdapter is removed.
   public async refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
@@ -1130,10 +944,6 @@ export default class Explorer {
     let title: string;
 
     switch (kind) {
-      case ViewModels.TerminalKind.Default:
-        title = "Terminal";
-        break;
-
       case ViewModels.TerminalKind.Mongo:
         title = "Mongo Shell";
         break;
@@ -1287,36 +1097,6 @@ export default class Explorer {
       .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
-  public openUploadFilePanel(parent?: NotebookContentItem): void {
-    if (useNotebook.getState().isPhoenixNotebooks) {
-      useDialog.getState().showOkCancelModalDialog(
-        Notebook.newNotebookUploadModalTitle,
-        undefined,
-        "Upload",
-        async () => {
-          await this.allocateContainer(PoolIdType.DefaultPoolId);
-          parent = parent || this.resourceTree.myNotebooksContentRoot;
-          this.uploadFilePanel(parent);
-        },
-        "Cancel",
-        undefined,
-        this.getNewNoteWarningText(),
-      );
-    } else {
-      parent = parent || this.resourceTree.myNotebooksContentRoot;
-      this.uploadFilePanel(parent);
-    }
-  }
-
-  private uploadFilePanel(parent?: NotebookContentItem): void {
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Upload file to notebook server",
-        <UploadFilePane uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)} />,
-      );
-  }
-
   public getDownloadModalConent(fileName: string): JSX.Element {
     if (useNotebook.getState().isPhoenixNotebooks) {
       return (
diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
index 4a3a8942e..19f98d5c6 100644
--- a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
+++ b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
         Object {
           "container": Explorer {
             "_isInitializingNotebooks": false,
-            "_resetNotebookWorkspace": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index 8054abe19..3e8f7c92d 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   explorer={
     Explorer {
       "_isInitializingNotebooks": false,
-      "_resetNotebookWorkspace": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
diff --git a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx b/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
deleted file mode 100644
index d9b1d9792..000000000
--- a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Upload } from "Common/Upload/Upload";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
-import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-
-export interface UploadFilePanelProps {
-  uploadFile: (name: string, content: string) => Promise<NotebookContentItem>;
-}
-
-export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({ uploadFile }: UploadFilePanelProps) => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
-  const extensions: string = undefined; //ex. ".ipynb"
-  const errorMessage = "Could not upload file";
-  const inProgressMessage = "Uploading file to notebook server";
-  const successMessage = "Successfully uploaded file to notebook server";
-
-  const [files, setFiles] = useState<FileList>();
-  const [formErrors, setFormErrors] = useState<string>("");
-  const [isExecuting, setIsExecuting] = useState<boolean>(false);
-
-  const submit = () => {
-    setFormErrors("");
-    if (!files || files.length === 0) {
-      setFormErrors("No file specified. Please input a file.");
-      logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
-      return;
-    }
-
-    const file: File = files.item(0);
-
-    const clearMessage = logConsoleProgress(`${inProgressMessage}: ${file.name}`);
-
-    setIsExecuting(true);
-
-    onSubmit(files.item(0))
-      .then(
-        () => {
-          logConsoleInfo(`${successMessage} ${file.name}`);
-          closeSidePanel();
-        },
-        (error: string) => {
-          setFormErrors(errorMessage);
-          logConsoleError(`${errorMessage} ${file.name}: ${error}`);
-        },
-      )
-      .finally(() => {
-        setIsExecuting(false);
-        clearMessage();
-      });
-  };
-
-  const updateSelectedFiles = (event: ChangeEvent<HTMLInputElement>): void => {
-    setFiles(event.target.files);
-  };
-
-  const onSubmit = async (file: File): Promise<NotebookContentItem> => {
-    const readFileAsText = (inputFile: File): Promise<string> => {
-      const reader = new FileReader();
-      return new Promise((resolve, reject) => {
-        reader.onerror = () => {
-          reader.abort();
-          reject(`Problem parsing file: ${inputFile}`);
-        };
-        reader.onload = () => {
-          resolve(reader.result as string);
-        };
-        reader.readAsText(inputFile);
-      });
-    };
-
-    const fileContent = await readFileAsText(file);
-    return uploadFile(file.name, fileContent);
-  };
-
-  const props: RightPaneFormProps = {
-    formError: formErrors,
-    isExecuting: isExecuting,
-    submitButtonText: "Upload",
-    onSubmit: submit,
-  };
-
-  return (
-    <RightPaneForm {...props}>
-      <div className="paneMainContent">
-        <Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
-      </div>
-    </RightPaneForm>
-  );
-};
diff --git a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
index 26b52ff90..bb942bf55 100644
--- a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       explorer={
         Explorer {
           "_isInitializingNotebooks": false,
-          "_resetNotebookWorkspace": [Function],
           "isFixedCollectionWithSharedThroughputSupported": [Function],
           "isTabsContentExpanded": [Function],
           "onRefreshDatabasesKeyPress": [Function],
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index f4ebb9cd0..0374edd23 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -25,7 +25,6 @@ import * as React from "react";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
-import NotebookColorIcon from "../../../images/Notebooks.svg";
 import PowerShellIcon from "../../../images/PowerShell.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
@@ -410,14 +409,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         },
       };
       heroes.push(launchQuickstartBtn);
-    } else if (useNotebook.getState().isPhoenixNotebooks) {
-      const newNotebookBtn = {
-        iconSrc: NotebookColorIcon,
-        title: "New notebook",
-        description: "Visualize your data stored in Azure Cosmos DB",
-        onClick: () => this.container.onNewNotebookClicked(),
-      };
-      heroes.push(newNotebookBtn);
     }
 
     heroes.push(this.getShellCard());
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index b5f759534..a14c202e8 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,11 +1,9 @@
-import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import { SampleDataTree } from "Explorer/Tree/SampleDataTree";
 import { getItemName } from "Utils/APITypeUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as React from "react";
 import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
 import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
@@ -14,17 +12,14 @@ import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
@@ -36,7 +31,6 @@ import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
-import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -75,152 +69,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
   const pseudoDirPath = "PsuedoDir";
 
-  const buildGalleryCallout = (): JSX.Element => {
-    if (
-      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
-      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
-    ) {
-      return undefined;
-    }
-
-    const calloutProps: ICalloutProps = {
-      calloutMaxWidth: 350,
-      ariaLabel: "New gallery",
-      role: "alertdialog",
-      gapSpace: 0,
-      target: ".galleryHeader",
-      directionalHint: DirectionalHint.leftTopEdge,
-      onDismiss: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-      },
-      setInitialFocus: true,
-    };
-
-    const openGalleryProps: ILinkProps = {
-      onClick: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        container.openGallery();
-      },
-    };
-
-    return (
-      <Callout {...calloutProps}>
-        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
-          <Text variant="xLarge" block>
-            New gallery
-          </Text>
-          <Text block>
-            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
-            contributors.
-          </Text>
-          <Link {...openGalleryProps}>Open gallery</Link>
-        </Stack>
-      </Callout>
-    );
-  };
-
-  const buildNotebooksTree = (): TreeNode => {
-    const notebooksTree: TreeNode = {
-      label: undefined,
-      isExpanded: true,
-      children: [],
-    };
-
-    if (!useNotebook.getState().isPhoenixNotebooks) {
-      notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
-    } else {
-      if (galleryContentRoot) {
-        notebooksTree.children.push(buildGalleryNotebooksTree());
-      }
-
-      if (
-        myNotebooksContentRoot &&
-        useNotebook.getState().isPhoenixNotebooks &&
-        useNotebook.getState().connectionInfo.status === ConnectionStatusType.Connected
-      ) {
-        notebooksTree.children.push(buildMyNotebooksTree());
-      }
-      if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-        // collapse all other notebook nodes
-        notebooksTree.children.forEach((node) => (node.isExpanded = false));
-        notebooksTree.children.push(buildGitHubNotebooksTree(true));
-      }
-    }
-    return notebooksTree;
-  };
-
-  const buildNotebooksTemporarilyDownTree = (): TreeNode => {
-    return {
-      label: Notebook.temporarilyDownMsg,
-      className: "clickDisabled",
-    };
-  };
-
-  const buildGalleryNotebooksTree = (): TreeNode => {
-    return {
-      label: "Gallery",
-      iconSrc: GalleryIcon,
-      className: "notebookHeader galleryHeader",
-      onClick: () => container.openGallery(),
-      isSelected: () => activeTab?.tabKind === ViewModels.CollectionTabKind.Gallery,
-    };
-  };
-
-  const buildMyNotebooksTree = (): TreeNode => {
-    const myNotebooksTree: TreeNode = buildNotebookDirectoryNode(
-      myNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        container.openNotebook(item);
-      },
-    );
-
-    myNotebooksTree.isExpanded = true;
-    myNotebooksTree.isAlphaSorted = true;
-    // Remove "Delete" menu item from context menu
-    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
-    return myNotebooksTree;
-  };
-
-  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
-    const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
-      gitHubNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        container.openNotebook(item);
-      },
-      true,
-    );
-    const manageGitContextMenu: TreeNodeMenuItem[] = [
-      {
-        label: "Manage GitHub settings",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Manage GitHub settings",
-              <GitHubReposPanel
-                explorer={container}
-                gitHubClientProp={container.notebookManager.gitHubClient}
-                junoClientProp={container.notebookManager.junoClient}
-              />,
-            ),
-      },
-      {
-        label: "Disconnect from GitHub",
-        onClick: () => {
-          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
-            dataExplorerArea: Areas.Notebook,
-          });
-          container.notebookManager?.gitHubOAuthService.logout();
-        },
-      },
-    ];
-    gitHubNotebooksTree.contextMenu = manageGitContextMenu;
-    gitHubNotebooksTree.isExpanded = true;
-    gitHubNotebooksTree.isAlphaSorted = true;
-
-    return gitHubNotebooksTree;
-  };
-
   const buildChildNodes = (
     item: NotebookContentItem,
     onFileClick: (item: NotebookContentItem) => void,
@@ -373,11 +221,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         iconSrc: NewNotebookIcon,
         onClick: () => container.onCreateDirectory(item, isGithubTree),
       },
-      {
-        label: "Upload File",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.openUploadFilePanel(item),
-      },
     ];
 
     //disallow renaming of temporary notebook workspace
@@ -782,8 +625,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
           </AccordionComponent>
-
-          {/* {buildGalleryCallout()} */}
         </>
       )}
       {!isNotebookEnabled && isSampleDataEnabled && (
@@ -796,8 +637,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
           </AccordionComponent>
-
-          {/* {buildGalleryCallout()} */}
         </>
       )}
       {isNotebookEnabled && isSampleDataEnabled && (
@@ -809,12 +648,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
             <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={"NOTEBOOKS"}>
-              <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
-            </AccordionItemComponent>
           </AccordionComponent>
-
-          {/* {buildGalleryCallout()} */}
         </>
       )}
     </>
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.tsx b/src/Explorer/Tree/ResourceTreeAdapter.tsx
index b22f0f916..2fd8d6bd1 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -1,9 +1,7 @@
-import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import { getItemName } from "Utils/APITypeUtils";
 import * as ko from "knockout";
 import * as React from "react";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
 import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
@@ -13,21 +11,17 @@ import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { IPinnedRepo } from "../../Juno/JunoClient";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
-import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
 import { useDialog } from "../Controls/Dialog";
 import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
@@ -36,7 +30,6 @@ import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
-import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -102,26 +95,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
   public renderComponent(): JSX.Element {
     const dataRootNode = this.buildDataTree();
-    const notebooksRootNode = this.buildNotebooksTrees();
-
-    if (useNotebook.getState().isNotebookEnabled) {
-      return (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={ResourceTreeAdapter.DataTitle} isExpanded={!this.gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-            <AccordionItemComponent title={ResourceTreeAdapter.NotebooksTitle}>
-              <TreeComponent className="notebookResourceTree" rootNode={notebooksRootNode} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-
-          {/* {this.galleryContentRoot && this.buildGalleryCallout()} */}
-        </>
-      );
-    } else {
-      return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
-    }
+    return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
   }
 
   public async initialize(): Promise<void[]> {
@@ -504,156 +478,6 @@ export class ResourceTreeAdapter implements ReactAdapter {
     return traverse(schema);
   }
 
-  private buildNotebooksTrees(): TreeNode {
-    let notebooksTree: TreeNode = {
-      label: undefined,
-      isExpanded: true,
-      children: [],
-    };
-
-    if (this.galleryContentRoot) {
-      notebooksTree.children.push(this.buildGalleryNotebooksTree());
-    }
-
-    if (this.myNotebooksContentRoot) {
-      notebooksTree.children.push(this.buildMyNotebooksTree());
-    }
-
-    if (this.gitHubNotebooksContentRoot) {
-      // collapse all other notebook nodes
-      notebooksTree.children.forEach((node) => (node.isExpanded = false));
-      notebooksTree.children.push(this.buildGitHubNotebooksTree());
-    }
-
-    return notebooksTree;
-  }
-
-  private buildGalleryCallout(): JSX.Element {
-    if (
-      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
-      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
-    ) {
-      return undefined;
-    }
-
-    const calloutProps: ICalloutProps = {
-      calloutMaxWidth: 350,
-      ariaLabel: "New gallery",
-      role: "alertdialog",
-      gapSpace: 0,
-      target: ".galleryHeader",
-      directionalHint: DirectionalHint.leftTopEdge,
-      onDismiss: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        this.triggerRender();
-      },
-      setInitialFocus: true,
-    };
-
-    const openGalleryProps: ILinkProps = {
-      onClick: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        this.container.openGallery();
-        this.triggerRender();
-      },
-    };
-
-    return (
-      <Callout {...calloutProps}>
-        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
-          <Text variant="xLarge" block>
-            New gallery
-          </Text>
-          <Text block>
-            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
-            contributors.
-          </Text>
-          <Link {...openGalleryProps}>Open gallery</Link>
-        </Stack>
-      </Callout>
-    );
-  }
-
-  private buildGalleryNotebooksTree(): TreeNode {
-    return {
-      label: "Gallery",
-      iconSrc: GalleryIcon,
-      className: "notebookHeader galleryHeader",
-      onClick: () => this.container.openGallery(),
-      isSelected: () => {
-        const activeTab = useTabs.getState().activeTab;
-        return activeTab && activeTab.tabKind === ViewModels.CollectionTabKind.Gallery;
-      },
-    };
-  }
-
-  private buildMyNotebooksTree(): TreeNode {
-    const myNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
-      this.myNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        this.container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
-          }
-        });
-      },
-      true,
-      true,
-    );
-
-    myNotebooksTree.isExpanded = true;
-    myNotebooksTree.isAlphaSorted = true;
-    // Remove "Delete" menu item from context menu
-    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
-    return myNotebooksTree;
-  }
-
-  private buildGitHubNotebooksTree(): TreeNode {
-    const gitHubNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
-      this.gitHubNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        this.container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
-          }
-        });
-      },
-      true,
-      true,
-    );
-
-    gitHubNotebooksTree.contextMenu = [
-      {
-        label: "Manage GitHub settings",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Manage GitHub settings",
-              <GitHubReposPanel
-                explorer={this.container}
-                gitHubClientProp={this.container.notebookManager.gitHubClient}
-                junoClientProp={this.container.notebookManager.junoClient}
-              />,
-            ),
-      },
-      {
-        label: "Disconnect from GitHub",
-        onClick: () => {
-          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
-            dataExplorerArea: Areas.Notebook,
-          });
-          this.container.notebookManager?.gitHubOAuthService.logout();
-        },
-      },
-    ];
-
-    gitHubNotebooksTree.isExpanded = true;
-    gitHubNotebooksTree.isAlphaSorted = true;
-
-    return gitHubNotebooksTree;
-  }
-
   private buildChildNodes(
     item: NotebookContentItem,
     onFileClick: (item: NotebookContentItem) => void,
@@ -800,11 +624,6 @@ export class ResourceTreeAdapter implements ReactAdapter {
         iconSrc: NewNotebookIcon,
         onClick: () => this.container.onCreateDirectory(item),
       },
-      {
-        label: "Upload File",
-        iconSrc: NewNotebookIcon,
-        onClick: () => this.container.openUploadFilePanel(item),
-      },
     ];
 
     //disallow renaming of temporary notebook workspace

From 5c3f18f5f8dcb47884b063c7411d65e2ed304854 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Tue, 7 May 2024 12:30:46 -0700
Subject: [PATCH 33/67] add link to keyboard shortcuts doc to home tab (#1836)

---
 src/Explorer/SplashScreen/SplashScreen.tsx | 24 ++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index 0374edd23..0ed9351ae 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -680,11 +680,20 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       title: "Learn the Fundamentals",
       description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
     };
-    let items: item[];
+
+    const commonItems: item[] = [
+      {
+        link: "https://learn.microsoft.com/azure/cosmos-db/data-explorer-shortcuts",
+        title: "Data Explorer keyboard shortcuts",
+        description: "Learn keyboard shortcuts to navigate Data Explorer.",
+      },
+    ];
+
+    let apiItems: item[];
     switch (userContext.apiType) {
       case "SQL":
       case "Postgres":
-        items = [
+        apiItems = [
           {
             link: "https://aka.ms/msl-sdk-connect",
             title: "Get Started using an SDK",
@@ -699,7 +708,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         ];
         break;
       case "Mongo":
-        items = [
+        apiItems = [
           {
             link: "https://aka.ms/mongonodejs",
             title: "Build an app with Node.js",
@@ -714,7 +723,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         ];
         break;
       case "Cassandra":
-        items = [
+        apiItems = [
           {
             link: "https://aka.ms/cassandracontainer",
             title: "Create a Container",
@@ -729,7 +738,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         ];
         break;
       case "Gremlin":
-        items = [
+        apiItems = [
           {
             link: "https://aka.ms/graphquickstart",
             title: "Get Started ",
@@ -744,7 +753,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         ];
         break;
       case "Tables":
-        items = [
+        apiItems = [
           {
             link: "https://aka.ms/tabledotnet",
             title: "Build a .NET App",
@@ -761,6 +770,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       default:
         break;
     }
+
+    const items = [...commonItems, ...apiItems];
+
     return (
       <Stack>
         {items.map((item, i) => (

From 14e5efcebf5cd56d04a6627184a437b750c644ac Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Thu, 9 May 2024 13:42:59 -0400
Subject: [PATCH 34/67] Point Mongo requests to old backend (#1838)

* point mongo requests to old backend

* point mongo requests to old backend

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/ConfigContext.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/ConfigContext.ts b/src/ConfigContext.ts
index 061f25286..ed8eaab0e 100644
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -102,13 +102,13 @@ let configContext: Readonly<ConfigContext> = {
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
-    "resourcelist",
-    "queryDocuments",
-    "createDocument",
-    "readDocument",
-    "updateDocument",
-    "deleteDocument",
-    "createCollectionWithProxy",
+    // "resourcelist",
+    // "queryDocuments",
+    // "createDocument",
+    // "readDocument",
+    // "updateDocument",
+    // "deleteDocument",
+    // "createCollectionWithProxy",
     "legacyMongoShell",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,

From f56e5e64b90c0790a00b372fd621e4e9ffb0157f Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Tue, 14 May 2024 09:56:16 +0530
Subject: [PATCH 35/67] =?UTF-8?q?[accessibility-3102916]:[Keyboard=20Navig?=
 =?UTF-8?q?ation=20-=20Azure=20CosmosDB=20-=20Data=20=E2=80=A6=20(#1834)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [accessibility-3102916]:[Keyboard Navigation - Azure CosmosDB - Data Explorer]: Keyboard focus is moving to non-interactive control after checkbox control of Advanced button.

* Updated Snap.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/Panes/AddCollectionPanel.tsx                  | 7 +++----
 .../Panes/__snapshots__/AddCollectionPanel.test.tsx.snap   | 1 -
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 2a99a56a7..dee78d7bf 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -924,10 +924,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       }
                     />
                     <Text variant="small">
-                      <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> To ensure compatibility with
-                      older SDKs, the created container will use a legacy partitioning scheme that supports partition
-                      key values of size only up to 101 bytes. If this is enabled, you will not be able to use
-                      hierarchical partition keys.{" "}
+                      <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
+                      created container will use a legacy partitioning scheme that supports partition key values of size
+                      only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
                       <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
                         Learn more
                       </Link>
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index 79485d550..d2fd03913 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -466,7 +466,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             <Icon
               className="removeIcon"
               iconName="InfoSolid"
-              tabIndex={0}
             />
              To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
              

From 9e9d270b65ed43d1772044368ac30dae00950599 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Tue, 14 May 2024 09:56:53 +0530
Subject: [PATCH 36/67] =?UTF-8?q?[accessibility-3102877]:[Programmatic=20A?=
 =?UTF-8?q?ccess=20-=20Azure=20CosmosDB=20=E2=80=93=20Data=20Explorer]:=20?=
 =?UTF-8?q?Ensures=20every=20ARIA=20input=20field=20has=20an=20accessible?=
 =?UTF-8?q?=20name.=20(#1835)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/Panes/AddCollectionPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index dee78d7bf..8c1cfef5b 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -382,6 +382,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             )}
             {!this.state.createNewDatabase && (
               <Dropdown
+                ariaLabel="Choose an existing database"
                 styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
                 style={{ width: 300, fontSize: 12 }}
                 placeholder="Choose an existing database"

From b6e3e5ea1c2dbf655cad894b19c4ca1dddecd690 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Tue, 14 May 2024 09:57:50 +0530
Subject: [PATCH 37/67] Screen Reader does not announce status message after
 invoking 'Add Row' control under 'Add Table Row' pane. (#1837)

* [accessibility-3100026]: [Screen Reader - Azure Cosmos DB - Add Table Row]: Screen Reader does not announce status message after invoking 'Add Row' control under 'Add Table Row' pane.

* Fixed format.

* Snap update.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 less/Common/Constants.less                                 | 7 +++++++
 .../DeleteCollectionConfirmationPane.test.tsx.snap         | 5 +++++
 .../__snapshots__/ExecuteSprocParamsPane.test.tsx.snap     | 5 +++++
 src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx         | 6 ++++++
 .../__snapshots__/RightPaneForm.test.tsx.snap              | 5 +++++
 .../__snapshots__/StringInputPane.test.tsx.snap            | 5 +++++
 .../__snapshots__/TableQuerySelectPanel.test.tsx.snap      | 5 +++++
 .../Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap | 5 +++++
 .../__snapshots__/EditTableEntityPanel.test.tsx.snap       | 5 +++++
 .../DeleteDatabaseConfirmationPanel.test.tsx.snap          | 5 +++++
 src/Explorer/Tables/Constants.ts                           | 5 +++++
 11 files changed, 58 insertions(+)

diff --git a/less/Common/Constants.less b/less/Common/Constants.less
index 946426d37..5b80d67f8 100644
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -335,4 +335,11 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
+}
+/*********************************************************************************************************
+                           Screen Reader Only
+**********************************************************************************************************/
+.screenReaderOnly {
+  position: absolute;
+  left: -9999px;
 }
\ No newline at end of file
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
index e63cb45bd..8add09097 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
@@ -2140,6 +2140,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </DeleteCollectionConfirmationPane>
 `;
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
index 6e0cbbeab..6c5cb5dfb 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
@@ -7073,6 +7073,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </ExecuteSprocParamsPane>
 `;
diff --git a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx b/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
index 27ba8e7f6..575403ccf 100644
--- a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
+++ b/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
@@ -2,6 +2,7 @@ import React, { CSSProperties, FunctionComponent, ReactNode } from "react";
 import { PanelFooterComponent } from "../PanelFooterComponent";
 import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
+import { labelToLoadingItemName } from "Explorer/Tables/Constants";
 
 export interface RightPaneFormProps {
   formError: string;
@@ -27,6 +28,10 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     onSubmit();
+    const screenReaderStatusElement = document.getElementById("screenReaderStatus");
+    if (screenReaderStatusElement) {
+      screenReaderStatusElement.innerHTML = labelToLoadingItemName[submitButtonText] || "Loading";
+    }
   };
 
   return (
@@ -42,6 +47,7 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
           />
         )}
       </form>
+      <span role="status" className="screenReaderOnly" id="screenReaderStatus"></span>
       {isExecuting && <PanelLoadingScreen />}
     </>
   );
diff --git a/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap b/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
index bcfa8a9e6..7691f6ed4 100644
--- a/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
+++ b/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
@@ -1782,5 +1782,10 @@ exports[`Right Pane Form should render Default properly 1`] = `
       </div>
     </PanelFooterComponent>
   </form>
+  <span
+    className="screenReaderOnly"
+    id="screenReaderStatus"
+    role="status"
+  />
 </RightPaneForm>
 `;
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index 3e8f7c92d..e8553fa4e 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
@@ -2449,6 +2449,11 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </StringInputPane>
 `;
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
index ca5c6c926..4a913958d 100644
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
@@ -3019,6 +3019,11 @@ exports[`Table query select Panel should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </TableQuerySelectPanel>
 `;
diff --git a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
index 80d494808..f2ee599f7 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
@@ -2130,6 +2130,11 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </AddTableEntityPanel>
 `;
diff --git a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
index da5c0c722..648f797f7 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
@@ -2136,6 +2136,11 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </EditTableEntityPanel>
 `;
diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
index 4ac4a9e20..6e32d62c0 100644
--- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
@@ -2810,6 +2810,11 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
         </div>
       </PanelFooterComponent>
     </form>
+    <span
+      className="screenReaderOnly"
+      id="screenReaderStatus"
+      role="status"
+    />
   </RightPaneForm>
 </DeleteDatabaseConfirmationPanel>
 `;
diff --git a/src/Explorer/Tables/Constants.ts b/src/Explorer/Tables/Constants.ts
index 76c050f5d..58d5b8e87 100644
--- a/src/Explorer/Tables/Constants.ts
+++ b/src/Explorer/Tables/Constants.ts
@@ -225,3 +225,8 @@ export const InputType = {
   DateTime: "datetime-local",
   Number: "number",
 };
+
+export const labelToLoadingItemName: Record<string, string> = {
+  "Add Row": "Adding row to table",
+  "Add Entity": "Adding entity to table",
+};

From ff4bc78d6cf5c7047f91ee1a13e03d512aec27aa Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Fri, 17 May 2024 06:57:35 -0700
Subject: [PATCH 38/67] Remove preview label from Computed Properties. (#1842)

---
 src/Explorer/Controls/Settings/SettingsUtils.tsx                | 2 +-
 .../Settings/__snapshots__/SettingsComponent.test.tsx.snap      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Controls/Settings/SettingsUtils.tsx b/src/Explorer/Controls/Settings/SettingsUtils.tsx
index 869ae323a..24ef14681 100644
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -151,7 +151,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.PartitionKeyTab:
       return "Partition Keys (preview)";
     case SettingsV2TabTypes.ComputedPropertiesTab:
-      return "Computed Properties (preview)";
+      return "Computed Properties";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index 65eb765e5..b536bed8a 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -296,7 +296,7 @@ exports[`SettingsComponent renders 1`] = `
         />
       </PivotItem>
       <PivotItem
-        headerText="Computed Properties (preview)"
+        headerText="Computed Properties"
         itemKey="ComputedPropertiesTab"
         key="ComputedPropertiesTab"
         style={

From 4da3363cf780411ada15602b57b818f386e077c9 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Fri, 17 May 2024 12:19:23 -0500
Subject: [PATCH 39/67] add capacityMode (#1826)

* add capacityMode

* add check for capacityMode for serverless
---
 src/Common/Constants.ts      | 5 +++++
 src/Contracts/DataModels.ts  | 3 ++-
 src/Utils/CapabilityUtils.ts | 8 +++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 69bd5ed49..0658d28c5 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -90,6 +90,11 @@ export class CapabilityNames {
   public static readonly EnableServerless: string = "EnableServerless";
 }
 
+export enum CapacityMode {
+  Provisioned = "Provisioned",
+  Serverless = "Serverless",
+}
+
 // flight names returned from the portal are always lowercase
 export class Flights {
   public static readonly SettingsV2 = "settingsv2";
diff --git a/src/Contracts/DataModels.ts b/src/Contracts/DataModels.ts
index 3c8a5175d..e85f56964 100644
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -1,4 +1,4 @@
-import { ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
+import { CapacityMode, ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
 
 export interface ArmEntity {
   id: string;
@@ -35,6 +35,7 @@ export interface DatabaseAccountExtendedProperties {
   ipRules?: IpRule[];
   privateEndpointConnections?: unknown[];
   capacity?: { totalThroughputLimit: number };
+  capacityMode?: CapacityMode;
   locations?: DatabaseAccountResponseLocation[];
   postgresqlEndpoint?: string;
   publicNetworkAccess?: string;
diff --git a/src/Utils/CapabilityUtils.ts b/src/Utils/CapabilityUtils.ts
index fc2de8149..216eff13d 100644
--- a/src/Utils/CapabilityUtils.ts
+++ b/src/Utils/CapabilityUtils.ts
@@ -9,4 +9,10 @@ export const isCapabilityEnabled = (capabilityName: string): boolean => {
   return false;
 };
 
-export const isServerlessAccount = (): boolean => isCapabilityEnabled(Constants.CapabilityNames.EnableServerless);
+export const isServerlessAccount = (): boolean => {
+  const { databaseAccount } = userContext;
+  return (
+    databaseAccount?.properties?.capacityMode === Constants.CapacityMode.Serverless ||
+    isCapabilityEnabled(Constants.CapabilityNames.EnableServerless)
+  );
+};

From ceeead8458ceb85e0ee998ad545f456271a6f2eb Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Mon, 20 May 2024 13:30:30 -0500
Subject: [PATCH 40/67] Vector search for NoSQL accounts (#1843)

* Add container vector policy and indexing policy support

* Add vector search capability

* hide vector settings for shared throughput DB

* update package-lock

* fix pipeline

* remove comments

* Address comments

* Address comments
---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 src/Common/Constants.ts                       |   1 +
 .../__snapshots__/queryDocuments.test.ts.snap |   2 +
 src/Common/dataAccess/createCollection.ts     |   5 +-
 src/Common/dataAccess/queryDocuments.ts       |   2 +
 src/Contracts/DataModels.ts                   |  23 ++-
 .../CollapsibleSectionComponent.tsx           |   6 +-
 src/Explorer/Controls/Editor/EditorReact.tsx  |  11 +-
 .../Controls/Settings/SettingsComponent.less  |  21 ++-
 .../Controls/Settings/SettingsComponent.tsx   |  19 +++
 .../ComputedPropertiesComponent.tsx           |   2 +-
 .../ContainerVectorPolicyComponent.tsx        |  30 ++++
 .../IndexingPolicyComponent.tsx               |   8 +-
 .../ComputedPropertiesComponent.test.tsx.snap |   2 +-
 .../IndexingPolicyComponent.test.tsx.snap     |   2 +-
 .../Controls/Settings/SettingsUtils.tsx       |   3 +
 .../SettingsComponent.test.tsx.snap           |   1 +
 src/Explorer/Panes/AddCollectionPanel.tsx     | 146 +++++++++++++++++-
 src/Explorer/Panes/PanelComponent.less        |   7 +
 .../AddCollectionPanel.test.tsx.snap          |   5 +-
 src/Utils/CapabilityUtils.ts                  |   4 +
 .../generatedClients/cosmos/sqlResources.ts   |   2 +-
 .../arm/generatedClients/cosmos/types.ts      |  21 +++
 24 files changed, 297 insertions(+), 36 deletions(-)
 create mode 100644 src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx

diff --git a/package-lock.json b/package-lock.json
index 8dcfe5d50..26c513d6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@azure/arm-cosmosdb": "9.1.0",
-        "@azure/cosmos": "4.0.1-beta.2",
+        "@azure/cosmos": "4.0.1-beta.3",
         "@azure/cosmos-language-service": "0.0.5",
         "@azure/identity": "1.5.2",
         "@azure/ms-rest-nodeauth": "3.1.1",
@@ -362,9 +362,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/@azure/cosmos": {
-      "version": "4.0.1-beta.2",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.0.1-beta.2.tgz",
-      "integrity": "sha512-iuqg/QwLQlxgRi4pnXU8JUYv+f24wkRvJ9ZZI4/sYk+DxSgkuQ194Cc2IpckpeO8z7ZpcBkVQFa82wcZVVZ8Zg==",
+      "version": "4.0.1-beta.3",
+      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.0.1-beta.3.tgz",
+      "integrity": "sha512-CpRGt+S5jnvtGUi4TmlS79YvxpbNc8/5/QHgIvvQ9D2ZFUqO0MjbMCU3lVZV2NAJT02BsbLfRAFe+FPn8nMRQw==",
       "dependencies": {
         "@azure/abort-controller": "^1.0.0",
         "@azure/core-auth": "^1.3.0",
diff --git a/package.json b/package.json
index 3a2f8b742..e1d544d1d 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.0.1-beta.2",
+    "@azure/cosmos": "4.0.1-beta.3",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.5.2",
     "@azure/ms-rest-nodeauth": "3.1.1",
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 0658d28c5..d56f5087a 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -88,6 +88,7 @@ export class CapabilityNames {
   public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
+  public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
 }
 
 export enum CapacityMode {
diff --git a/src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap b/src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap
index 66e740abf..ec64a72b4 100644
--- a/src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap
+++ b/src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`getCommonQueryOptions builds the correct default options objects 1`] = `
 Object {
+  "disableNonStreamingOrderByQuery": true,
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 0,
@@ -12,6 +13,7 @@ Object {
 
 exports[`getCommonQueryOptions reads from localStorage 1`] = `
 Object {
+  "disableNonStreamingOrderByQuery": true,
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 17,
diff --git a/src/Common/dataAccess/createCollection.ts b/src/Common/dataAccess/createCollection.ts
index 73ccff3f4..1d9f41844 100644
--- a/src/Common/dataAccess/createCollection.ts
+++ b/src/Common/dataAccess/createCollection.ts
@@ -6,13 +6,13 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { createUpdateSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { createUpdateTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { createMongoCollectionWithProxy } from "../MongoProxyClient";
@@ -96,6 +96,9 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   if (params.uniqueKeyPolicy) {
     resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
   }
+  if (params.vectorEmbeddingPolicy) {
+    resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
+  }
 
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
diff --git a/src/Common/dataAccess/queryDocuments.ts b/src/Common/dataAccess/queryDocuments.ts
index 0b8ebd29d..223fe987d 100644
--- a/src/Common/dataAccess/queryDocuments.ts
+++ b/src/Common/dataAccess/queryDocuments.ts
@@ -1,4 +1,5 @@
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Queries } from "../Constants";
 import { client } from "../CosmosClient";
@@ -26,5 +27,6 @@ export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
     (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
     Queries.itemsPerPage;
   options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
+  options.disableNonStreamingOrderByQuery = !isVectorSearchEnabled();
   return options;
 };
diff --git a/src/Contracts/DataModels.ts b/src/Contracts/DataModels.ts
index e85f56964..3f7e3a7db 100644
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -158,6 +158,7 @@ export interface Collection extends Resource {
   changeFeedPolicy?: ChangeFeedPolicy;
   analyticalStorageTtl?: number;
   geospatialConfig?: GeospatialConfig;
+  vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
   schema?: ISchema;
   requestSchema?: () => void;
   computedProperties?: ComputedProperties;
@@ -195,8 +196,14 @@ export interface IndexingPolicy {
   indexingMode: "consistent" | "lazy" | "none";
   includedPaths: any;
   excludedPaths: any;
-  compositeIndexes?: any;
-  spatialIndexes?: any;
+  compositeIndexes?: any[];
+  spatialIndexes?: any[];
+  vectorIndexes?: VectorIndex[];
+}
+
+export interface VectorIndex {
+  path: string;
+  type: "flat" | "diskANN" | "quantizedFlat";
 }
 
 export interface ComputedProperty {
@@ -334,6 +341,18 @@ export interface CreateCollectionParams {
   partitionKey?: PartitionKey;
   uniqueKeyPolicy?: UniqueKeyPolicy;
   createMongoWildcardIndex?: boolean;
+  vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
+}
+
+export interface VectorEmbeddingPolicy {
+  vectorEmbeddings: VectorEmbedding[];
+}
+
+export interface VectorEmbedding {
+  dataType: "float16" | "float32" | "uint8" | "int8";
+  dimensions: number;
+  distanceFunction: "euclidean" | "cosine" | "dotproduct";
+  path: string;
 }
 
 export interface ReadDatabaseOfferParams {
diff --git a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
index d943f7cf0..207642d84 100644
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -26,8 +26,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     this.setState({ isExpanded: !this.state.isExpanded });
   };
 
-  public componentDidUpdate(): void {
-    if (this.state.isExpanded && this.props.onExpand) {
+  public componentDidUpdate(_prevProps: CollapsibleSectionProps, prevState: CollapsibleSectionState): void {
+    if (!prevState.isExpanded && this.state.isExpanded && this.props.onExpand) {
       this.props.onExpand();
     }
   }
@@ -43,7 +43,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     return (
       <>
         <Stack
-          className="collapsibleSection"
+          className={"collapsibleSection"}
           horizontal
           verticalAlign="center"
           tokens={accordionStackTokens}
diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index 47268c856..a6f487ba5 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -20,7 +20,10 @@ export interface EditorReactProps {
   lineDecorationsWidth?: monaco.editor.IEditorOptions["lineDecorationsWidth"];
   minimap?: monaco.editor.IEditorOptions["minimap"];
   scrollBeyondLastLine?: monaco.editor.IEditorOptions["scrollBeyondLastLine"];
+  fontSize?: monaco.editor.IEditorOptions["fontSize"];
   monacoContainerStyles?: React.CSSProperties;
+  className?: string;
+  spinnerClassName?: string;
 }
 
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
@@ -75,9 +78,11 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   public render(): JSX.Element {
     return (
       <React.Fragment>
-        {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
+        {!this.state.showEditor && (
+          <Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
+        )}
         <div
-          className="jsonEditor"
+          className={this.props.className || "jsonEditor"}
           style={this.props.monacoContainerStyles}
           ref={(elt: HTMLElement) => this.setRef(elt)}
         />
@@ -119,7 +124,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       value: this.props.content,
       readOnly: this.props.isReadOnly,
       ariaLabel: this.props.ariaLabel,
-      fontSize: 12,
+      fontSize: this.props.fontSize || 12,
       automaticLayout: true,
       theme: this.props.theme,
       wordWrap: this.props.wordWrap || "off",
diff --git a/src/Explorer/Controls/Settings/SettingsComponent.less b/src/Explorer/Controls/Settings/SettingsComponent.less
index ae06f341f..5eb2b13be 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.less
+++ b/src/Explorer/Controls/Settings/SettingsComponent.less
@@ -7,14 +7,14 @@
 }
 
 .settingsV2ToolTip {
-    padding: 10px;
-    font: 12px @DataExplorerFont;
-    max-width: 300px;
+  padding: 10px;
+  font: 12px @DataExplorerFont;
+  max-width: 300px;
 }
 
 .autoPilotSelector span {
-    height: 25px;
-    font: 14px @DataExplorerFont;
+  height: 25px;
+  font: 14px @DataExplorerFont;
 }
 
 .settingsV2TabsContainer {
@@ -25,7 +25,14 @@
   font-family: @DataExplorerFont;
 }
 
-.settingsV2IndexingPolicyEditor {
+.settingsV2Editor {
   width: 100%;
   height: 60vh;
-}
\ No newline at end of file
+}
+
+.settingsV2EditorSpinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 574d75603..04e08753e 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -3,7 +3,12 @@ import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
+import {
+  ContainerVectorPolicyComponent,
+  ContainerVectorPolicyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
 import { useDatabases } from "Explorer/useDatabases";
+import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -144,6 +149,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private shouldShowComputedPropertiesEditor: boolean;
   private shouldShowIndexingPolicyEditor: boolean;
   private shouldShowPartitionKeyEditor: boolean;
+  private isVectorSearchEnabled: boolean;
   private totalThroughputUsed: number;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
@@ -158,6 +164,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowComputedPropertiesEditor = userContext.apiType === "SQL";
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
+      this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
@@ -1097,6 +1104,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       indexTransformationProgress: this.state.indexTransformationProgress,
       refreshIndexTransformationProgress: this.refreshIndexTransformationProgress,
       onIndexingPolicyDirtyChange: this.onIndexingPolicyDirtyChange,
+      isVectorSearchEnabled: this.isVectorSearchEnabled,
     };
 
     const mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps = {
@@ -1143,6 +1151,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       explorer: this.props.settingsTab.getContainer(),
     };
 
+    const containerVectorPolicyProps: ContainerVectorPolicyComponentProps = {
+      vectorEmbeddingPolicy: this.collection.rawDataModel?.vectorEmbeddingPolicy,
+    };
+
     const tabs: SettingsV2TabInfo[] = [];
     if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
@@ -1156,6 +1168,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       content: <SubSettingsComponent {...subSettingsComponentProps} />,
     });
 
+    if (this.isVectorSearchEnabled) {
+      tabs.push({
+        tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
+        content: <ContainerVectorPolicyComponent {...containerVectorPolicyProps} />,
+      });
+    }
+
     if (this.shouldShowIndexingPolicyEditor) {
       tabs.push({
         tab: SettingsV2TabTypes.IndexingPolicyTab,
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
index ad3b12fec..c8650b988 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
@@ -121,7 +121,7 @@ export class ComputedPropertiesComponent extends React.Component<
           </Link>
           &#160; about how to define computed properties and how to use them.
         </Text>
-        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
+        <div className="settingsV2Editor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
       </Stack>
     );
   }
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
new file mode 100644
index 000000000..23ccdc84c
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
@@ -0,0 +1,30 @@
+import { Stack } from "@fluentui/react";
+import { VectorEmbeddingPolicy } from "Contracts/DataModels";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
+import React from "react";
+
+export interface ContainerVectorPolicyComponentProps {
+  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
+}
+
+export const ContainerVectorPolicyComponent: React.FC<ContainerVectorPolicyComponentProps> = ({
+  vectorEmbeddingPolicy,
+}) => {
+  return (
+    <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative" } }}>
+      <EditorReact
+        language={"json"}
+        content={JSON.stringify(vectorEmbeddingPolicy, null, 4)}
+        isReadOnly={true}
+        wordWrap={"on"}
+        ariaLabel={"Container vector policy"}
+        lineNumbers={"on"}
+        scrollBeyondLastLine={false}
+        className={"settingsV2Editor"}
+        spinnerClassName={"settingsV2EditorSpinner"}
+        fontSize={14}
+      />
+    </Stack>
+  );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
index 4d6ca765f..bc5de93a4 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -16,6 +16,7 @@ export interface IndexingPolicyComponentProps {
   logIndexingPolicySuccessMessage: () => void;
   indexTransformationProgress: number;
   refreshIndexTransformationProgress: () => Promise<void>;
+  isVectorSearchEnabled?: boolean;
   onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
 }
 
@@ -119,10 +120,15 @@ export class IndexingPolicyComponent extends React.Component<
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
+        {this.props.isVectorSearchEnabled && (
+          <MessageBar messageBarType={MessageBarType.severeWarning}>
+            Container vector policies and vector indexes are not modifiable after container creation
+          </MessageBar>
+        )}
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
           <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
         )}
-        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
+        <div className="settingsV2Editor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>
     );
   }
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
index 86a9bda74..2f67d7d70 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
       about how to define computed properties and how to use them.
   </Text>
   <div
-    className="settingsV2IndexingPolicyEditor"
+    className="settingsV2Editor"
     tabIndex={0}
   />
 </Stack>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
index 1f66324f5..93516dd7e 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`IndexingPolicyComponent renders 1`] = `
     refreshIndexTransformationProgress={[Function]}
   />
   <div
-    className="settingsV2IndexingPolicyEditor"
+    className="settingsV2Editor"
     tabIndex={0}
   />
 </Stack>
diff --git a/src/Explorer/Controls/Settings/SettingsUtils.tsx b/src/Explorer/Controls/Settings/SettingsUtils.tsx
index 24ef14681..cff7d1f74 100644
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -47,6 +47,7 @@ export enum SettingsV2TabTypes {
   IndexingPolicyTab,
   PartitionKeyTab,
   ComputedPropertiesTab,
+  ContainerVectorPolicyTab,
 }
 
 export interface IsComponentDirtyResult {
@@ -152,6 +153,8 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       return "Partition Keys (preview)";
     case SettingsV2TabTypes.ComputedPropertiesTab:
       return "Computed Properties";
+    case SettingsV2TabTypes.ContainerVectorPolicyTab:
+      return "Container Vector Policy (preview)";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index b536bed8a..561368bdd 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -196,6 +196,7 @@ exports[`SettingsComponent renders 1`] = `
               "indexingMode": "consistent",
             }
           }
+          isVectorSearchEnabled={false}
           logIndexingPolicySuccessMessage={[Function]}
           onIndexingPolicyContentChange={[Function]}
           onIndexingPolicyDirtyChange={[Function]}
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 8c1cfef5b..7bb0f553d 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -21,6 +21,7 @@ import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
 import { SubscriptionType } from "Contracts/SubscriptionType";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -29,7 +30,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
-import { isCapabilityEnabled, isServerlessAccount } from "Utils/CapabilityUtils";
+import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
@@ -81,6 +82,26 @@ export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
   excludedPaths: [],
 };
 
+const DefaultDatabaseVectorIndex: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [
+    {
+      path: "/*",
+    },
+  ],
+  excludedPaths: [
+    {
+      path: '/"_etag"/?',
+    },
+  ],
+  vectorIndexes: [],
+};
+
+export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
+  vectorEmbeddings: [],
+};
+
 export interface AddCollectionPanelState {
   createNewDatabase: boolean;
   newDatabaseId: string;
@@ -101,6 +122,8 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
+  vectorIndexingPolicy: string;
+  vectorEmbeddingPolicy: string;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -136,6 +159,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
+      vectorIndexingPolicy: JSON.stringify(DefaultDatabaseVectorIndex, null, 2),
+      vectorEmbeddingPolicy: JSON.stringify(DefaultVectorEmbeddingPolicy, null, 2),
     };
   }
 
@@ -145,11 +170,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
+  componentDidUpdate(_prevProps: AddCollectionPanelProps, prevState: AddCollectionPanelState): void {
+    if (this.state.errorMessage && this.state.errorMessage !== prevState.errorMessage) {
+      this.scrollToSection("panelContainer");
+    }
+  }
+
   render(): JSX.Element {
     const isFirstResourceCreated = useDatabases.getState().isFirstResourceCreated();
 
     return (
-      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
+      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)} id="panelContainer">
         {this.state.errorMessage && (
           <PanelInfoErrorComponent
             message={this.state.errorMessage}
@@ -864,17 +895,76 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               )}
             </Stack>
           )}
-
+          {this.shouldShowVectorSearchParameters() && (
+            <Stack>
+              <CollapsibleSectionComponent
+                title="Indexing Policy"
+                isExpandedByDefault={false}
+                onExpand={() => {
+                  this.scrollToSection("collapsibleVectorPolicySectionContent");
+                }}
+              >
+                <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
+                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
+                    Learn more
+                  </Link>
+                  <EditorReact
+                    language={"json"}
+                    content={this.state.vectorIndexingPolicy}
+                    isReadOnly={false}
+                    wordWrap={"on"}
+                    ariaLabel={"Editing indexing policy"}
+                    lineNumbers={"on"}
+                    scrollBeyondLastLine={false}
+                    spinnerClassName="panelSectionSpinner"
+                    monacoContainerStyles={{
+                      minHeight: 200,
+                    }}
+                    onContentChanged={(newIndexingPolicy: string) => this.setVectorIndexingPolicy(newIndexingPolicy)}
+                  />
+                </Stack>
+              </CollapsibleSectionComponent>
+              <CollapsibleSectionComponent
+                title="Container Vector Policy"
+                isExpandedByDefault={false}
+                onExpand={() => {
+                  this.scrollToSection("collapsibleVectorPolicySectionContent");
+                }}
+              >
+                <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
+                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
+                    Learn more
+                  </Link>
+                  <EditorReact
+                    language={"json"}
+                    content={this.state.vectorEmbeddingPolicy}
+                    isReadOnly={false}
+                    wordWrap={"on"}
+                    ariaLabel={"Editing container vector policy"}
+                    lineNumbers={"on"}
+                    scrollBeyondLastLine={false}
+                    spinnerClassName="panelSectionSpinner"
+                    monacoContainerStyles={{
+                      minHeight: 200,
+                    }}
+                    onContentChanged={(newVectorEmbeddingPolicy: string) =>
+                      this.setVectorEmbeddingPolicy(newVectorEmbeddingPolicy)
+                    }
+                  />
+                </Stack>
+              </CollapsibleSectionComponent>
+            </Stack>
+          )}
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
               isExpandedByDefault={false}
               onExpand={() => {
                 TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-                this.scrollToAdvancedSection();
+                this.scrollToSection("collapsibleAdvancedSectionContent");
               }}
             >
-              <Stack className="panelGroupSpacing" id="collapsibleSectionContent">
+              <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
                 {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
                   <Stack className="panelGroupSpacing">
                     <Stack horizontal>
@@ -1070,6 +1160,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
+  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: string): void {
+    this.setState({
+      vectorEmbeddingPolicy,
+    });
+  }
+
+  private setVectorIndexingPolicy(vectorIndexingPolicy: string): void {
+    this.setState({
+      vectorIndexingPolicy,
+    });
+  }
+
   private isSelectedDatabaseSharedThroughput(): boolean {
     if (!this.state.selectedDatabaseId) {
       return false;
@@ -1209,6 +1311,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
+  private shouldShowVectorSearchParameters() {
+    return isVectorSearchEnabled() && this.shouldShowCollectionThroughputInput();
+  }
+
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {
     if (this.state.uniqueKeys?.length === 0) {
       return undefined;
@@ -1265,6 +1371,22 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
+    if (this.shouldShowVectorSearchParameters()) {
+      try {
+        JSON.parse(this.state.vectorIndexingPolicy) as DataModels.IndexingPolicy;
+      } catch (e) {
+        this.setState({ errorMessage: "Invalid JSON format for indexingPolicy" });
+        return false;
+      }
+
+      try {
+        JSON.parse(this.state.vectorEmbeddingPolicy) as DataModels.VectorEmbeddingPolicy;
+      } catch (e) {
+        this.setState({ errorMessage: "Invalid JSON format for vectorEmbeddingPolicy" });
+        return false;
+      }
+    }
+
     return true;
   }
 
@@ -1287,8 +1409,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return Constants.AnalyticalStorageTtl.Disabled;
   }
 
-  private scrollToAdvancedSection(): void {
-    document.getElementById("collapsibleSectionContent")?.scrollIntoView();
+  private scrollToSection(id: string): void {
+    document.getElementById(id)?.scrollIntoView();
   }
 
   private getSampleDBName(): string {
@@ -1340,10 +1462,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         }
       : undefined;
 
-    const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
+    let indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
       ? AllPropertiesIndexed
       : SharedDatabaseDefault;
 
+    let vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
+
+    if (this.shouldShowVectorSearchParameters()) {
+      indexingPolicy = JSON.parse(this.state.vectorIndexingPolicy);
+      vectorEmbeddingPolicy = JSON.parse(this.state.vectorEmbeddingPolicy);
+    }
+
     const telemetryData = {
       database: {
         id: databaseId,
@@ -1402,6 +1531,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       partitionKey,
       uniqueKeyPolicy,
       createMongoWildcardIndex: this.state.createMongoWildCardIndex,
+      vectorEmbeddingPolicy,
     };
 
     this.setState({ isExecuting: true });
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 481c6ee64..3a0ab9b3c 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -48,6 +48,13 @@
       font-size: @mediumFontSize;
       padding: 0 @LargeSpace 0 @SmallSpace;
     }
+
+    .panelSectionSpinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 }
 
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index d2fd03913..0831c5a10 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`AddCollectionPanel should render Default properly 1`] = `
 <form
   className="panelFormWrapper"
+  id="panelContainer"
   onSubmit={[Function]}
 >
   <div
@@ -433,7 +434,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     >
       <Stack
         className="panelGroupSpacing"
-        id="collapsibleSectionContent"
+        id="collapsibleAdvancedSectionContent"
       >
         <Stack
           className="panelGroupSpacing"
@@ -485,4 +486,4 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     isButtonDisabled={false}
   />
 </form>
-`;
\ No newline at end of file
+`;
diff --git a/src/Utils/CapabilityUtils.ts b/src/Utils/CapabilityUtils.ts
index 216eff13d..8b6976666 100644
--- a/src/Utils/CapabilityUtils.ts
+++ b/src/Utils/CapabilityUtils.ts
@@ -16,3 +16,7 @@ export const isServerlessAccount = (): boolean => {
     isCapabilityEnabled(Constants.CapabilityNames.EnableServerless)
   );
 };
+
+export const isVectorSearchEnabled = (): boolean => {
+  return userContext.apiType === "SQL" && isCapabilityEnabled(Constants.CapabilityNames.EnableNoSQLVectorSearch);
+};
diff --git a/src/Utils/arm/generatedClients/cosmos/sqlResources.ts b/src/Utils/arm/generatedClients/cosmos/sqlResources.ts
index f85ddb636..049e265e9 100644
--- a/src/Utils/arm/generatedClients/cosmos/sqlResources.ts
+++ b/src/Utils/arm/generatedClients/cosmos/sqlResources.ts
@@ -9,7 +9,7 @@
 import { configContext } from "../../../../ConfigContext";
 import { armRequest } from "../../request";
 import * as Types from "./types";
-const apiVersion = "2024-02-15-preview";
+const apiVersion = "2024-05-15-preview";
 
 /* Lists the SQL databases under an existing Azure Cosmos DB database account. */
 export async function listSqlDatabases(
diff --git a/src/Utils/arm/generatedClients/cosmos/types.ts b/src/Utils/arm/generatedClients/cosmos/types.ts
index 4f69d223c..5272f215b 100644
--- a/src/Utils/arm/generatedClients/cosmos/types.ts
+++ b/src/Utils/arm/generatedClients/cosmos/types.ts
@@ -1235,6 +1235,9 @@ export interface SqlDatabaseResource {
 export interface SqlContainerResource {
   /* Name of the Cosmos DB SQL container */
   id: string;
+
+  vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
+
   /* The configuration of the indexing policy. By default, the indexing is automatic for all document paths within the container */
   indexingPolicy?: IndexingPolicy;
 
@@ -1267,6 +1270,17 @@ export interface SqlContainerResource {
   computedProperties?: ComputedProperty[];
 }
 
+export interface VectorEmbeddingPolicy {
+  vectorEmbeddings: VectorEmbedding[];
+}
+
+export interface VectorEmbedding {
+  path?: string;
+  dataType?: string;
+  dimensions?: number;
+  distanceFunction?: string;
+}
+
 /* Cosmos DB indexing policy */
 export interface IndexingPolicy {
   /* Indicates if the indexing policy is automatic */
@@ -1285,6 +1299,13 @@ export interface IndexingPolicy {
 
   /* List of spatial specifics */
   spatialIndexes?: SpatialSpec[];
+
+  vectorIndexes?: VectorIndex[];
+}
+
+export interface VectorIndex {
+  path?: string;
+  type?: string;
 }
 
 /* undocumented */

From 19d1e0d1df5f4206dc40301201a812c3946740d6 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Mon, 20 May 2024 19:24:04 -0500
Subject: [PATCH 41/67] allow serverless accounts to have vector search
 embeddings (#1844)

---
 .../SettingsSubComponents/ContainerVectorPolicyComponent.tsx    | 2 +-
 src/Explorer/Panes/AddCollectionPanel.tsx                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
index 23ccdc84c..ca4d63a04 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
@@ -15,7 +15,7 @@ export const ContainerVectorPolicyComponent: React.FC<ContainerVectorPolicyCompo
     <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative" } }}>
       <EditorReact
         language={"json"}
-        content={JSON.stringify(vectorEmbeddingPolicy, null, 4)}
+        content={JSON.stringify(vectorEmbeddingPolicy || {}, null, 4)}
         isReadOnly={true}
         wordWrap={"on"}
         ariaLabel={"Container vector policy"}
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 7bb0f553d..274bd0d1d 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -1312,7 +1312,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowVectorSearchParameters() {
-    return isVectorSearchEnabled() && this.shouldShowCollectionThroughputInput();
+    return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
   }
 
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {

From 36736882ee45346751b11d5995b9004586627559 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 29 May 2024 09:09:13 +0200
Subject: [PATCH 42/67] Migrate DocumentsTab to React and add bulk delete and
 column resize (#1770)

* Document page now loads list of docs and displays selection

* DocumentsTabV2 now properly loads documents, show partition keys and display first doc with proper selection behavior. Move it to its own folder.

* Extract table in a separate component

* Resizable columns on the document table

* Fix selection behavior and some layout issue

* Adding table scrolling

* Fix NaN height issue

* Fix NaN height issue

* Fix column sizing + cell selection

* Improvement in width size. Add Load More

* Add react editor and pass column headers

* Dynamic columns for pk

* Fix initial columns size

* Add nav buttons

* Editing content updates buttons state

* Discard and save buttons working

* Fix save new document. Implement delete.

* Remove debug display

* Fix unexpand filter and reformat

* Fix compil issues

* Add refresh button

* Update column header placeholder style

* Implement delete multiple docs

* Fix multi delete

* Fix show/hide delete button

* Fix selection behavior

* Fix UX with buttons behavior and editor display

* Fix UX issue with not discarding edit changes

* Add some TODO's

* Remove debugging info and reformat

* Add mongo support

* Fix build issues

* Fix table header. Remove debug statement

* Restore broken nosql

* Fix mongo save new document/update document

* Fix bugs with clicking on newly created documents

* Fix comment

* Fix double fetch issue when clicking on an item

* Auto-select last document when saving new document

* Fix resourceTokenPartitionKey code

* Fix format

* Fix isQueryCopilotSampleContainer flag

* Fix unused code

* Call tab when updating error flag

* Destructure props to make useEffect dependencies work

* Fix loadStartKey

* minor update

* Fix format

* Add title to table

* Fix table coming off its container with unwanted horizontal scrollbar

* Increase table width. Fix eslint issue.

* Move refresh documents button from table back to DocumentsTabV2

* Fix load more text centering

* Don't show Load More if nothing to show

* Fix columns min width

* Add keyboard shortcuts

* Add keyboard handlers to load more and refresh button

* Add keyboard support to select table row

* Disable eslint issue from fluent library

* Connect cancel query button

* Add Fluent V9 theme for Fabric (#1821)

* Clean up dependencies and memoize internal functions and object. Move methods and object that don't depend on state outside of component.

* Fix filter disappearing when clicking Apply Filter

* Fix typo and format

* Implement bulk delete for nosql

* Replace filter ui components with fluent ui

* Remove jquery calls

* Migrate unit test to DocumentsTabV2

* Remove DocumentsTab and MongoDocumentsTab. Fix build issues.

* Properly handle activetab

* Remove comments and unused code

* Port keyboard shortcuts from commitId 1f4d0f2

* Port item editor shortcuts to improved Items tab branch (#1831)

* set filter focus on Ctrl+Shift+F

* implement filter enter/esc keybinds

* remove debugging

* Collapse filter when query is executed

* Fix monaco editor not happy when parent is null

* Fix how bulk delete operation gets called when no partition key

* Fix update id list after delete

* Fix deleteDocuments

* Fix build issue

* Fix bug in mongo delete

* Fix mongo delete flow

* Proper error handling in mongo

* Handle >100 bulk delete operations

* Add unit tests for DocumentsTableComponent

* More improvements to table unit tests

* Fix import. Disable selection test for now

* Add more DocumentsTab unit react tests

* Remove selection test

* Add more unit tests. Add lcov coverage report to display in vscode

* Move unit tests to correct file

* Add unit test on command bar

* Fix build issues

* Add more unit tests

* Remove unneeded call

* Add DocumentsTab for Mongo API

* Fix linting errors

* Update fluent ui v9 dependency. Color columns separation. Fix refresh button placement to not interfere with header cell width.

* Revert @fluentui/react-components to a safe version that compiles

* Add confirmation window when documents have been deleted

* Fix mongo unit tests

* Fix format

* Update src/Common/dataAccess/deleteDocument.ts

Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>

* Update src/Common/dataAccess/deleteDocument.ts

Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>

* Update src/Common/dataAccess/deleteDocument.ts

Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>

* Fix bug with markup. Simplify code.

* Protect against creating React editor without parent node

* Replace rendering tests with snapshot match

* Add test screenshot to troubleshoot e2e test

* Revert "Add test screenshot to troubleshoot e2e test"

This reverts commit 1b8138ade00571972c0e9bce77846e8fe4a3446a.

* Attempt 2 at troubleshooting failing test

* Revert "Attempt 2 at troubleshooting failing test"

This reverts commit 3e51a593bf2001d44b6e5316d4865e6e861c21c3.

* Delete button now shows if one or more rows are selected

---------

Co-authored-by: Vsevolod Kukol <sevoku@microsoft.com>
Co-authored-by: Ashley Stanton-Nurse <ashleyst@microsoft.com>
---
 .eslintignore                                 |    3 -
 jest.config.js                                |    2 +-
 less/documentDB.less                          |   71 +-
 package-lock.json                             |  653 ++++--
 package.json                                  |   13 +-
 patches/@uiw+react-split+5.9.3.patch          |   11 +
 src/Common/DocumentUtility.ts                 |    6 +-
 src/Common/QueriesClient.ts                   |    7 +-
 src/Common/dataAccess/deleteDocument.ts       |   56 +
 src/Explorer/Controls/Editor/EditorReact.tsx  |    8 +-
 src/Explorer/Tabs/DocumentsTab.html           |  239 ---
 src/Explorer/Tabs/DocumentsTab.test.ts        |  152 --
 src/Explorer/Tabs/DocumentsTab.ts             | 1080 ----------
 .../DocumentsTabV2/DocumentsTabV2.test.tsx    |  476 +++++
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 1816 +++++++++++++++++
 .../DocumentsTabV2Mongo.test.tsx              |  195 ++
 .../DocumentsTableComponent.test.tsx          |   34 +
 .../DocumentsTableComponent.tsx               |  271 +++
 .../DocumentsTabV2.test.tsx.snap              |  558 +++++
 .../DocumentsTableComponent.test.tsx.snap     | 1140 +++++++++++
 src/Explorer/Tabs/MongoDocumentsTab.ts        |  320 ---
 src/Explorer/Tabs/useTabs.test.ts             |    8 +-
 src/Explorer/Theme/ThemeUtil.ts               |   31 +
 src/Explorer/Tree/Collection.ts               |   19 +-
 src/Explorer/Tree/DocumentId.ts               |   14 +-
 src/Explorer/Tree/ObjectId.ts                 |    5 +-
 src/Explorer/Tree/ResourceTokenCollection.ts  |   10 +-
 src/Explorer/Tree2/ResourceTree.tsx           |   30 +-
 src/Platform/Fabric/FabricTheme.tsx           |   22 +
 src/Shared/Telemetry/TelemetryConstants.ts    |    1 +
 src/setupTests.ts                             |    6 +
 31 files changed, 5143 insertions(+), 2114 deletions(-)
 create mode 100644 patches/@uiw+react-split+5.9.3.patch
 delete mode 100644 src/Explorer/Tabs/DocumentsTab.html
 delete mode 100644 src/Explorer/Tabs/DocumentsTab.test.ts
 delete mode 100644 src/Explorer/Tabs/DocumentsTab.ts
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
 delete mode 100644 src/Explorer/Tabs/MongoDocumentsTab.ts
 create mode 100644 src/Explorer/Theme/ThemeUtil.ts

diff --git a/.eslintignore b/.eslintignore
index 78e9b517e..20cdeb4c3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -89,10 +89,7 @@ src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
 src/Explorer/Tabs/ConflictsTab.ts
 src/Explorer/Tabs/DatabaseSettingsTab.ts
-src/Explorer/Tabs/DocumentsTab.test.ts
-src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
-src/Explorer/Tabs/MongoDocumentsTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
 src/Explorer/Tabs/TabComponents.ts
diff --git a/jest.config.js b/jest.config.js
index b4f660063..1c1f48e6d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -31,7 +31,7 @@ module.exports = {
   coveragePathIgnorePatterns: ["/node_modules/"],
 
   // A list of reporter names that Jest uses when writing coverage reports
-  coverageReporters: ["json", "text", "cobertura"],
+  coverageReporters: ["json", "text", "cobertura", "lcov"],
 
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
diff --git a/less/documentDB.less b/less/documentDB.less
index 357d159b3..05ad22760 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2264,33 +2264,33 @@ a:link {
   width: 82px;
 }
 
-.tabdocuments .scrollable {
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-left: 5px;
-  padding-right: 5px;
-  width: 100%;
-}
+// .tabdocuments .scrollable {
+//   height: 100%;
+//   overflow-y: auto;
+//   overflow-x: hidden;
+//   padding-left: 5px;
+//   padding-right: 5px;
+//   width: 100%;
+// }
 
-.tabdocuments > .tabdocumentsGridElement {
-  width: 50%;
-}
+// .tabdocuments > .tabdocumentsGridElement {
+//   width: 50%;
+// }
 
-.tabdocuments > .evenlySpacedHeader {
-  width: 30%;
-}
+// .tabdocuments > .evenlySpacedHeader {
+//   width: 30%;
+// }
 
-.tabdocuments.scrollable:focus,
-.tabdocuments.scrollable:active {
-  outline: 1px dotted;
-}
+// .tabdocuments.scrollable:focus,
+// .tabdocuments.scrollable:active {
+//   outline: 1px dotted;
+// }
 
-.tabdocuments .scrollable table td {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+// .tabdocuments .scrollable table td {
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+// }
 
 .mongoDocumentEditor .monaco-editor.vs .redsquiggly {
   display: none !important;
@@ -2316,10 +2316,9 @@ td a:hover {
 }
 
 .loadMore {
+  display: block;
   width: 100%;
-  padding-left: 30%;
-  padding-top: 2px;
-  cursor: pointer;
+  text-align: center;
 }
 
 .loadMore > a:focus {
@@ -2558,10 +2557,12 @@ a:link {
 }
 
 .filterdivs {
-  padding-top: 15px;
-  height: 45px;
-  margin-bottom: 8px;
+  margin: 10px 0px;
   white-space: nowrap;
+  input {
+    line-height: 14px; // To correct vertical position of the down arrow of the input
+    outline: none; // Remove the dotted border on focus, because fluent has its own focus style (underlined)
+  }
 }
 
 .editFilterContainer {
@@ -2578,6 +2579,18 @@ a:link {
   cursor: pointer;
 }
 
+.documentsTab {
+  .documentsTable {
+    .documentsTableCell {
+      border-left: 1px solid @BaseMedium;
+      height: 100%;
+    }
+    .documentsTableHeader {
+      border-bottom: 1px solid @BaseMedium;
+    }
+  }
+}
+
 .querydropdown {
   border: 1px solid @BaseMedium;
   font-style: normal;
diff --git a/package-lock.json b/package-lock.json
index 26c513d6f..31e3d37db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "@types/lodash": "4.14.171",
         "@types/mkdirp": "1.0.1",
         "@types/node-fetch": "2.5.7",
+        "@uiw/react-split": "5.9.3",
         "@xmldom/xmldom": "0.7.13",
         "applicationinsights": "1.8.0",
         "bootstrap": "3.4.1",
@@ -102,6 +103,7 @@
         "react-redux": "7.1.3",
         "react-splitter-layout": "4.0.0",
         "react-string-format": "1.0.1",
+        "react-window": "1.8.10",
         "react-youtube": "9.0.1",
         "reflect-metadata": "0.1.13",
         "rx-jupyter": "5.5.12",
@@ -128,8 +130,8 @@
         "@types/datatables.net": "1.10.28",
         "@types/datatables.net-colreorder": "1.4.5",
         "@types/dom-to-image": "2.6.2",
-        "@types/enzyme": "3.10.7",
-        "@types/enzyme-adapter-react-16": "1.0.6",
+        "@types/enzyme": "3.10.12",
+        "@types/enzyme-adapter-react-16": "1.0.9",
         "@types/hasher": "0.0.31",
         "@types/jest": "26.0.20",
         "@types/jquery": "3.5.29",
@@ -141,6 +143,7 @@
         "@types/react-notification-system": "0.2.39",
         "@types/react-redux": "7.1.7",
         "@types/react-splitter-layout": "3.0.1",
+        "@types/react-window": "1.8.8",
         "@types/sanitize-html": "1.27.2",
         "@types/sinon": "2.3.3",
         "@types/styled-components": "5.1.1",
@@ -156,8 +159,8 @@
         "create-file-webpack": "1.0.2",
         "css-loader": "6.8.1",
         "enzyme": "3.11.0",
-        "enzyme-adapter-react-16": "1.15.5",
-        "enzyme-to-json": "3.6.1",
+        "enzyme-adapter-react-16": "1.15.8",
+        "enzyme-to-json": "3.6.2",
         "eslint": "8.50.0",
         "eslint-cli": "1.1.1",
         "eslint-plugin-no-null": "1.0.2",
@@ -12481,9 +12484,9 @@
       "integrity": "sha512-PD+wqNhrjWFjAlSVd18jvChZvOXB2SOwAILBmuYev5zswBats5qmzs/QFoooLKd2omj9BT05a8MeSeRmXLGY+Q=="
     },
     "node_modules/@types/enzyme": {
-      "version": "3.10.7",
-      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.7.tgz",
-      "integrity": "sha512-J+0wduPGAkzOvW7sr6hshGv1gBI3WXLRTczkRKzVPxLP3xAkYxZmvvagSBPw8Z452fZ8TGUxCmAXcb44yLQksw==",
+      "version": "3.10.12",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.12.tgz",
+      "integrity": "sha512-xryQlOEIe1TduDWAOphR0ihfebKFSWOXpIsk+70JskCfRfW+xALdnJ0r1ZOTo85F9Qsjk6vtlU7edTYHbls9tA==",
       "dev": true,
       "dependencies": {
         "@types/cheerio": "*",
@@ -12491,9 +12494,9 @@
       }
     },
     "node_modules/@types/enzyme-adapter-react-16": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz",
-      "integrity": "sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.9.tgz",
+      "integrity": "sha512-z24MMxGtUL8HhXdye3tWzjp+19QTsABqLaX2oOZpxMPHRJgLfahQmOeTTrEBQd9ogW20+UmPBXD9j+XOasFHvw==",
       "dev": true,
       "dependencies": {
         "@types/enzyme": "*"
@@ -13426,6 +13429,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -13903,6 +13915,18 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uiw/react-split": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-split/-/react-split-5.9.3.tgz",
+      "integrity": "sha512-HgwETU+kRhzZAp+YiE4Yu8bNJm3jxxnGgGPfkadUl8jA1wsMD3aMMskuhQF5akiUUUadiLUvAc8e1RH9Y/SKDw==",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@ungap/url-search-params": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@ungap/url-search-params/-/url-search-params-0.2.2.tgz",
@@ -14608,12 +14632,15 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -14701,15 +14728,19 @@
       }
     },
     "node_modules/array.prototype.find": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.2.tgz",
-      "integrity": "sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.3.tgz",
+      "integrity": "sha512-fO/ORdOELvjbbeIfZfzrXFMhYHGofRGqd+am9zm3tZ4GlJINj/pA2eITyfd65Vg6+ZbHd/Cys7stpoRSWtQFdA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -14780,16 +14811,17 @@
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
-      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -14914,9 +14946,12 @@
       }
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -15731,13 +15766,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -17879,6 +17919,54 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/datatables.net": {
       "version": "1.13.8",
       "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.8.tgz",
@@ -18142,16 +18230,19 @@
       }
     },
     "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-lazy-prop": {
@@ -18778,20 +18869,20 @@
       }
     },
     "node_modules/enzyme-adapter-react-16": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.5.tgz",
-      "integrity": "sha512-33yUJGT1nHFQlbVI5qdo5Pfqvu/h4qPwi1o0a6ZZsjpiqq92a3HjynDhwd1IeED+Su60HDWV8mxJqkTnLYdGkw==",
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.8.tgz",
+      "integrity": "sha512-uYGC31eGZBp5nGsr4nKhZKvxGQjyHGjS06BJsUlWgE29/hvnpgCsT1BJvnnyny7N3GIIVyxZ4O9GChr6hy2WQA==",
       "dev": true,
       "dependencies": {
-        "enzyme-adapter-utils": "^1.13.1",
-        "enzyme-shallow-equal": "^1.0.4",
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "object.values": "^1.1.1",
-        "prop-types": "^15.7.2",
+        "enzyme-adapter-utils": "^1.14.2",
+        "enzyme-shallow-equal": "^1.0.7",
+        "hasown": "^2.0.0",
+        "object.assign": "^4.1.5",
+        "object.values": "^1.1.7",
+        "prop-types": "^15.8.1",
         "react-is": "^16.13.1",
         "react-test-renderer": "^16.0.0-0",
-        "semver": "^5.7.0"
+        "semver": "^5.7.2"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18809,18 +18900,18 @@
       "dev": true
     },
     "node_modules/enzyme-adapter-utils": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.1.tgz",
-      "integrity": "sha512-JZgMPF1QOI7IzBj24EZoDpaeG/p8Os7WeBZWTJydpsH7JRStc7jYbHE4CmNQaLqazaGFyLM8ALWA3IIZvxW3PQ==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.2.tgz",
+      "integrity": "sha512-1ZC++RlsYRaiOWE5NRaF5OgsMt7F5rn/VuaJIgc7eW/fmgg8eS1/Ut7EugSPPi7VMdWMLcymRnMF+mJUJ4B8KA==",
       "dev": true,
       "dependencies": {
         "airbnb-prop-types": "^2.16.0",
-        "function.prototype.name": "^1.1.5",
-        "has": "^1.0.3",
-        "object.assign": "^4.1.4",
-        "object.fromentries": "^2.0.5",
+        "function.prototype.name": "^1.1.6",
+        "hasown": "^2.0.0",
+        "object.assign": "^4.1.5",
+        "object.fromentries": "^2.0.7",
         "prop-types": "^15.8.1",
-        "semver": "^5.7.1"
+        "semver": "^6.3.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18829,13 +18920,22 @@
         "react": "0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0"
       }
     },
+    "node_modules/enzyme-adapter-utils/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/enzyme-shallow-equal": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.5.tgz",
-      "integrity": "sha512-i6cwm7hN630JXenxxJFBKzgLC3hMTafFQXflvzHgPmDhOBhxUWDe8AeRv1qp2/uWJ2Y8z5yLWMzmAfkTOiOCZg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.7.tgz",
+      "integrity": "sha512-/um0GFqUXnpM9SvKtje+9Tjoz3f1fpBC3eXRFrNs8kpYn69JljciYP7KZTqM/YQbUY9KUjvKB4jo/q+L6WGGvg==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3",
+        "hasown": "^2.0.0",
         "object-is": "^1.1.5"
       },
       "funding": {
@@ -18843,13 +18943,13 @@
       }
     },
     "node_modules/enzyme-to-json": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.1.tgz",
-      "integrity": "sha512-15tXuONeq5ORoZjV/bUo2gbtZrN2IH+Z6DvL35QmZyKHgbY1ahn6wcnLd9Xv9OjiwbAXiiP8MRZwbZrCv1wYNg==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
+      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
       "dev": true,
       "dependencies": {
         "@types/cheerio": "^0.22.22",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.21",
         "react-is": "^16.12.0"
       },
       "engines": {
@@ -18911,49 +19011,56 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
-      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.2",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.5",
-        "es-set-tostringtag": "^2.0.1",
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.2",
-        "get-symbol-description": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.12",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
         "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "safe-array-concat": "^1.0.1",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
-        "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.13"
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -18967,6 +19074,25 @@
       "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
       "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-iterator-helpers": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
@@ -18993,14 +19119,25 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
     },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
-      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
-        "has-tostringtag": "^1.0.0",
-        "hasown": "^2.0.0"
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21334,15 +21471,19 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -21372,12 +21513,13 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21735,20 +21877,20 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -21768,11 +21910,11 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21859,9 +22001,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -22826,11 +22968,11 @@
       "devOptional": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
-      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
+        "es-errors": "^1.3.0",
         "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
@@ -22916,13 +23058,15 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -23034,6 +23178,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -23209,9 +23367,9 @@
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -23348,11 +23506,14 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -23405,11 +23566,11 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -32745,12 +32906,12 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
         "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
@@ -33769,6 +33930,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/post-robot": {
       "version": "10.0.42",
       "resolved": "https://registry.npmjs.org/post-robot/-/post-robot-10.0.42.tgz",
@@ -35185,6 +35354,22 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-youtube": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-9.0.1.tgz",
@@ -35553,13 +35738,14 @@
       }
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
-      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -36190,12 +36376,12 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
-      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -36239,14 +36425,17 @@
       }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -36726,14 +36915,16 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "node_modules/set-function-length": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
-      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dependencies": {
-        "define-data-property": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -37587,13 +37778,14 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
-      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -37603,26 +37795,29 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
-      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
-      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -38708,27 +38903,28 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -38738,15 +38934,16 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -38756,13 +38953,19 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -40265,15 +40468,15 @@
       "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
-      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
diff --git a/package.json b/package.json
index e1d544d1d..d27273af9 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@types/lodash": "4.14.171",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
+    "@uiw/react-split": "5.9.3",
     "@xmldom/xmldom": "0.7.13",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -98,6 +99,7 @@
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
     "react-youtube": "9.0.1",
+    "react-window": "1.8.10",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "sanitize-html": "2.3.3",
@@ -123,8 +125,8 @@
     "@types/datatables.net": "1.10.28",
     "@types/datatables.net-colreorder": "1.4.5",
     "@types/dom-to-image": "2.6.2",
-    "@types/enzyme": "3.10.7",
-    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/enzyme": "3.10.12",
+    "@types/enzyme-adapter-react-16": "1.0.9",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
     "@types/jquery": "3.5.29",
@@ -136,6 +138,7 @@
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/react-splitter-layout": "3.0.1",
+    "@types/react-window": "1.8.8",
     "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
@@ -151,8 +154,8 @@
     "create-file-webpack": "1.0.2",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
-    "enzyme-to-json": "3.6.1",
+    "enzyme-adapter-react-16": "1.15.8",
+    "enzyme-to-json": "3.6.2",
     "eslint": "8.50.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
@@ -243,4 +246,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}
\ No newline at end of file
diff --git a/patches/@uiw+react-split+5.9.3.patch b/patches/@uiw+react-split+5.9.3.patch
new file mode 100644
index 000000000..3e5307463
--- /dev/null
+++ b/patches/@uiw+react-split+5.9.3.patch
@@ -0,0 +1,11 @@
+diff --git a/node_modules/@uiw/react-split/cjs/index.d.ts b/node_modules/@uiw/react-split/cjs/index.d.ts
+index 644bcc3..f794760 100644
+--- a/node_modules/@uiw/react-split/cjs/index.d.ts
++++ b/node_modules/@uiw/react-split/cjs/index.d.ts
+@@ -56,5 +56,5 @@ export default class Split extends React.Component<SplitProps, SplitState> {
+     onMouseDown(paneNumber: number, env: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+     onDragging(env: Event): void;
+     onDragEnd(): void;
+-    render(): import("react/jsx-runtime").JSX.Element;
++    render(): JSX.Element;
+ }
diff --git a/src/Common/DocumentUtility.ts b/src/Common/DocumentUtility.ts
index 99cdefc5a..322d883b0 100644
--- a/src/Common/DocumentUtility.ts
+++ b/src/Common/DocumentUtility.ts
@@ -1,9 +1,9 @@
 import { userContext } from "../UserContext";
 
-export const getEntityName = (): string => {
+export const getEntityName = (multiple?: boolean): string => {
   if (userContext.apiType === "Mongo") {
-    return "document";
+    return multiple ? "documents" : "document";
   }
 
-  return "item";
+  return multiple ? "items" : "item";
 };
diff --git a/src/Common/QueriesClient.ts b/src/Common/QueriesClient.ts
index a4834b128..b56b78bb8 100644
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -3,8 +3,7 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
-import DocumentId from "../Explorer/Tree/DocumentId";
+import DocumentId, { IDocumentIdContainer } from "../Explorer/Tree/DocumentId";
 import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
@@ -162,10 +161,10 @@ export class QueriesClient {
       {
         partitionKey: QueriesClient.PartitionKey,
         partitionKeyProperties: ["id"],
-      } as DocumentsTab,
+      } as IDocumentIdContainer,
       query,
       [query.queryName],
-    ); // TODO: Remove DocumentId's dependency on DocumentsTab
+    );
     const options: any = { partitionKey: query.resourceId };
     return deleteDocument(queriesCollection, documentId)
       .then(
diff --git a/src/Common/dataAccess/deleteDocument.ts b/src/Common/dataAccess/deleteDocument.ts
index 5caef9e0e..f20dc9cc8 100644
--- a/src/Common/dataAccess/deleteDocument.ts
+++ b/src/Common/dataAccess/deleteDocument.ts
@@ -1,3 +1,4 @@
+import { BulkOperationType, OperationInput } from "@azure/cosmos";
 import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -24,3 +25,58 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
     clearMessage();
   }
 };
+
+/**
+ * Bulk delete documents
+ * @param collection
+ * @param documentId
+ * @returns array of ids that were successfully deleted
+ */
+export const deleteDocuments = async (collection: CollectionBase, documentIds: DocumentId[]): Promise<DocumentId[]> => {
+  const nbDocuments = documentIds.length;
+  const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
+  try {
+    const v2Container = await client().database(collection.databaseId).container(collection.id());
+
+    // Bulk can only delete 100 documents at a time
+    const BULK_DELETE_LIMIT = 100;
+    const promiseArray = [];
+
+    while (documentIds.length > 0) {
+      const documentIdsChunk = documentIds.splice(0, BULK_DELETE_LIMIT);
+      const operations: OperationInput[] = documentIdsChunk.map((documentId) => ({
+        id: documentId.id(),
+        // bulk delete: if not partition key is specified, do not pass empty array, but undefined
+        partitionKey:
+          documentId.partitionKeyValue &&
+          Array.isArray(documentId.partitionKeyValue) &&
+          documentId.partitionKeyValue.length === 0
+            ? undefined
+            : documentId.partitionKeyValue,
+        operationType: BulkOperationType.Delete,
+      }));
+
+      const promise = v2Container.items.bulk(operations).then((bulkResult) => {
+        return documentIdsChunk.filter((_, index) => bulkResult[index].statusCode === 204);
+      });
+      promiseArray.push(promise);
+    }
+
+    const allResult = await Promise.all(promiseArray);
+    const flatAllResult = Array.prototype.concat.apply([], allResult);
+    logConsoleInfo(
+      `Successfully deleted ${getEntityName(flatAllResult.length > 1)}: ${flatAllResult.length} out of ${nbDocuments}`,
+    );
+    // TODO: handle case result.length != nbDocuments
+    return flatAllResult;
+  } catch (error) {
+    handleError(
+      error,
+      "DeleteDocuments",
+      `Error while deleting ${documentIds.length} ${getEntityName(documentIds.length > 1)}`,
+    );
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};
diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index a6f487ba5..f2274d7dc 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -137,7 +137,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     this.rootNode.innerHTML = "";
     const monaco = await loadMonaco();
-    createCallback(monaco?.editor?.create(this.rootNode, options));
+    try {
+      createCallback(monaco?.editor?.create(this.rootNode, options));
+    } catch (error) {
+      // This could happen if the parent node suddenly disappears during create()
+      console.error("Unable to create EditorReact", error);
+      return;
+    }
 
     if (this.rootNode.innerHTML) {
       this.setState({
diff --git a/src/Explorer/Tabs/DocumentsTab.html b/src/Explorer/Tabs/DocumentsTab.html
deleted file mode 100644
index cfe1b2039..000000000
--- a/src/Explorer/Tabs/DocumentsTab.html
+++ /dev/null
@@ -1,239 +0,0 @@
-<div
-  class="tab-pane active tabdocuments flexContainer"
-  data-bind="
-    setTemplateReady: true,
-    attr:{
-        id: tabId
-    },
-    visible: isActive"
-  role="tabpanel"
->
-  <!-- ko if: false -->
-  <!-- Messagebox Ok Cancel- Start -->
-  <div class="messagebox-background">
-    <div class="messagebox">
-      <h2 class="messagebox-title">Title</h2>
-      <div class="messagebox-text" tabindex="0">Text</div>
-      <div class="messagebox-buttons">
-        <div class="messagebox-buttons-container">
-          <button value="ok" class="messagebox-button-primary">Ok</button>
-          <button value="cancel" class="messagebox-button-default">Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Messagebox OK Cancel - End -->
-  <!-- /ko -->
-
-  <!-- Filter - Start -->
-  <div class="filterdivs" data-bind="visible: isFilterCreated">
-    <!-- Read-only Filter - Start -->
-    <div class="filterDocCollapsed" data-bind="visible: !isFilterExpanded() && !isPreferredApiMongoDB">
-      <span class="selectQuery">SELECT * FROM c</span>
-      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
-      <button class="filterbtnstyle queryButton" data-bind="click: onShowFilterClick">Edit Filter</button>
-    </div>
-    <div
-      class="filterDocCollapsed"
-      data-bind="
-                visible: !isFilterExpanded() && isPreferredApiMongoDB"
-    >
-      <span
-        class="selectQuery"
-        data-bind="
-                visible: appliedFilter().length > 0"
-        >Filter :
-      </span>
-      <span
-        class="noFilterApplied"
-        data-bind="
-                visible: !appliedFilter().length > 0"
-        >No filter applied</span
-      >
-      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
-      <button
-        class="filterbtnstyle queryButton"
-        data-bind="
-                    click: onShowFilterClick"
-      >
-        Edit Filter
-      </button>
-    </div>
-    <!-- Read-only Filter - End -->
-
-    <!-- Editable Filter - start -->
-    <div
-      class="filterDocExpanded"
-      data-bind="
-                visible: isFilterExpanded"
-    >
-      <div>
-        <div class="editFilterContainer">
-          <span class="filterspan" data-bind="visible: !isPreferredApiMongoDB"> SELECT * FROM c </span>
-          <input
-            type="text"
-            list="filtersList"
-            class="querydropdown"
-            title="Type a query predicate or choose one from the list."
-            data-bind="
-                                attr:{
-                                    placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
-                                },
-                                css: { placeholderVisible: filterContent().length === 0 },
-                                textInput: filterContent,
-                                event: { keydown: onFilterKeyDown }"
-          />
-
-          <datalist
-            id="filtersList"
-            data-bind="
-                            foreach: lastFilterContents"
-          >
-            <option
-              data-bind="
-                                value: $data"
-            ></option>
-          </datalist>
-
-          <span class="filterbuttonpad">
-            <button
-              class="filterbtnstyle queryButton"
-              data-bind="
-                                click: refreshDocumentsGrid.bind($data, true),
-                                enable: applyFilterButton.enabled"
-              aria-label="Apply filter"
-              tabindex="0"
-            >
-              Apply Filter
-            </button>
-          </span>
-          <span class="filterbuttonpad">
-            <button
-              class="filterbtnstyle queryButton"
-              data-bind="
-                                visible: !isPreferredApiMongoDB && isExecuting,
-                                click: onAbortQueryClick"
-              aria-label="Cancel Query"
-              tabindex="0"
-            >
-              Cancel Query
-            </button>
-          </span>
-          <span
-            class="filterclose"
-            role="button"
-            aria-label="close filter"
-            tabindex="0"
-            data-bind="
-                            click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"
-          >
-            <img src="/close-black.svg" style="height: 14px; width: 14px" alt="Hide filter" />
-          </span>
-        </div>
-      </div>
-    </div>
-    <!-- Editable Filter - End -->
-  </div>
-  <!-- Filter - End -->
-
-  <!-- Ids and Editor - Start -->
-  <div class="documentsTabGridAndEditor">
-    <div class="documentsContainerWithSplitter" , data-bind="attr: { id: documentContentsContainerId }">
-      <div class="flexContainer">
-        <!-- Document Ids - Start -->
-        <div
-          class="documentsGridHeaderContainer tabdocuments scrollable"
-          data-bind="
-                attr: {
-                    id: documentContentsGridId,
-                    tabindex: documentIds().length <= 0 ? -1 : 0
-                },
-                style: { height: dataContentsGridScrollHeight },
-                event: { keydown: accessibleDocumentList.onKeyDown }"
-        >
-          <table id="tabsTable" class="table table-hover can-select dataTable">
-            <thead id="theadcontent">
-              <tr>
-                <th class="documentsGridHeader" data-bind="text: idHeader" tabindex="0"></th>
-                <!-- ko if: showPartitionKey -->
-                <!-- ko foreach: partitionKeyPropertyHeaders -->
-                <th
-                  class="documentsGridHeader documentsGridPartition evenlySpacedHeader"
-                  data-bind="
-                                              attr: {
-                                                  title: $data
-                                              },
-                                              text: $data"
-                  tabindex="0"
-                ></th>
-                <!-- /ko -->
-                <!-- /ko -->
-                <th
-                  class="refreshColHeader"
-                  role="button"
-                  aria-label="Refresh documents"
-                  data-bind="event: { keydown: onRefreshButtonKeyDown }"
-                >
-                  <img
-                    class="refreshcol"
-                    src="/refresh-cosmos.svg"
-                    data-bind="click: refreshDocumentsGrid.bind($data, false)"
-                    alt="Refresh documents"
-                    tabindex="0"
-                  />
-                </th>
-              </tr>
-            </thead>
-            <tbody id="tbodycontent">
-              <!-- ko foreach: documentIds -->
-              <tr
-                class="pointer accessibleListElement"
-                data-bind="
-                                click: $data.click,
-                                css: {
-                                    gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
-                                    gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
-                                }"
-                tabindex="0"
-              >
-                <td class="tabdocumentsGridElement"><a data-bind="text: $data.id, attr: { title: $data.id }"></a></td>
-                <!-- ko if: $data.partitionKeyProperties -->
-                <!-- ko foreach: $data.stringPartitionKeyValues -->
-                <td class="tabdocumentsGridElement" data-bind="colspan: $parent.stringPartitionKeyValues.length + 1">
-                  <a data-bind="text: $data, attr: { title: $data }"></a>
-                </td>
-                <!-- /ko -->
-                <!-- /ko -->
-              </tr>
-              <!-- /ko -->
-            </tbody>
-          </table>
-        </div>
-        <div class="loadMore">
-          <a
-            role="button"
-            data-bind="click: loadNextPage.bind($data, false), event: { keypress: onLoadMoreKeyInput }"
-            tabindex="0"
-            >Load more</a
-          >
-        </div>
-        <!-- Document Ids - End -->
-        <!-- Splitter -->
-      </div>
-      <div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
-    </div>
-    <div class="documentWaterMark" data-bind="visible: !shouldShowEditor()">
-      <p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
-      <p class="documentWaterMarkText">Create new or work with existing document(s).</p>
-    </div>
-    <!-- Editor - Start -->
-    <json-editor
-      class="editorDivContent"
-      data-bind="visible: shouldShowEditor, css: { mongoDocumentEditor: isPreferredApiMongoDB }"
-      params="{content: initialDocumentContent, isReadOnly: false,lineNumbers: 'on',ariaLabel: 'Document editor',
-            updatedContent: selectedDocumentContent}"
-    ></json-editor>
-    <!-- Editor - End -->
-  </div>
-  <!-- Ids and Editor - End -->
-</div>
diff --git a/src/Explorer/Tabs/DocumentsTab.test.ts b/src/Explorer/Tabs/DocumentsTab.test.ts
deleted file mode 100644
index c8d84e716..000000000
--- a/src/Explorer/Tabs/DocumentsTab.test.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as ko from "knockout";
-import { DatabaseAccount } from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
-import DocumentId from "../Tree/DocumentId";
-import DocumentsTab from "./DocumentsTab";
-
-describe("Documents tab", () => {
-  describe("buildQuery", () => {
-    it("should generate the right select query for SQL API", () => {
-      const documentsTab = new DocumentsTab({
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.buildQuery("")).toContain("select");
-    });
-  });
-
-  describe("showPartitionKey", () => {
-    const explorer = new Explorer();
-    const mongoExplorer = new Explorer();
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableGremlin" }],
-        },
-      } as DatabaseAccount,
-    });
-
-    const collectionWithoutPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      container: explorer,
-    });
-
-    const collectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      partitionKey: {
-        paths: ["/foo"],
-        kind: "Hash",
-        version: 2,
-        systemKey: true,
-      },
-      container: explorer,
-    });
-
-    const collectionWithNonSystemPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      partitionKey: {
-        paths: ["/foo"],
-        kind: "Hash",
-        version: 2,
-        systemKey: false,
-      },
-      container: explorer,
-    });
-
-    const mongoCollectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
-      id: ko.observable<string>("foo"),
-      database: {
-        id: ko.observable<string>("foo"),
-      },
-      partitionKey: {
-        paths: ["/foo"],
-        kind: "Hash",
-        version: 2,
-        systemKey: true,
-      },
-      container: mongoExplorer,
-    });
-
-    it("should be false for null or undefined collection", () => {
-      const documentsTab = new DocumentsTab({
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(false);
-    });
-
-    it("should be false for null or undefined partitionKey", () => {
-      const documentsTab = new DocumentsTab({
-        collection: collectionWithoutPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(false);
-    });
-
-    it("should be true for non-Mongo accounts with system partitionKey", () => {
-      const documentsTab = new DocumentsTab({
-        collection: collectionWithSystemPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(true);
-    });
-
-    it("should be false for Mongo accounts with system partitionKey", () => {
-      updateUserContext({
-        apiType: "Mongo",
-      });
-      const documentsTab = new DocumentsTab({
-        collection: mongoCollectionWithSystemPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(false);
-    });
-
-    it("should be true for non-system partitionKey", () => {
-      const documentsTab = new DocumentsTab({
-        collection: collectionWithNonSystemPartitionKey,
-        partitionKey: null,
-        documentIds: ko.observableArray<DocumentId>(),
-        tabKind: ViewModels.CollectionTabKind.Documents,
-        title: "",
-        tabPath: "",
-      });
-
-      expect(documentsTab.showPartitionKey).toBe(true);
-    });
-  });
-});
diff --git a/src/Explorer/Tabs/DocumentsTab.ts b/src/Explorer/Tabs/DocumentsTab.ts
deleted file mode 100644
index 949b13697..000000000
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ /dev/null
@@ -1,1080 +0,0 @@
-import { ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import { Platform, configContext } from "ConfigContext";
-import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import { KeyboardAction, KeyboardActionGroup, KeyboardHandlerSetter, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import * as ko from "knockout";
-import Q from "q";
-import { format } from "react-string-format";
-import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
-import NewDocumentIcon from "../../../images/NewDocument.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,
-  KeyCodes,
-  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 * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-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";
-import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
-import DocumentId from "../Tree/DocumentId";
-import { useSelectedNode } from "../useSelectedNode";
-import template from "./DocumentsTab.html";
-import TabsBase from "./TabsBase";
-
-export default class DocumentsTab extends TabsBase {
-  public readonly html = template;
-  public selectedDocumentId: ko.Observable<DocumentId>;
-  public selectedDocumentContent: ViewModels.Editable<string>;
-  public initialDocumentContent: ko.Observable<string>;
-  public documentContentsGridId: string;
-  public documentContentsContainerId: string;
-  public filterContent: ko.Observable<string>;
-  public appliedFilter: ko.Observable<string>;
-  public lastFilterContents: ko.ObservableArray<string>;
-  public isFilterExpanded: ko.Observable<boolean>;
-  public isFilterCreated: ko.Observable<boolean>;
-  public applyFilterButton: ViewModels.Button;
-  public isEditorDirty: ko.Computed<boolean>;
-  public editorState: ko.Observable<ViewModels.DocumentExplorerState>;
-  public newDocumentButton: ViewModels.Button;
-  public saveNewDocumentButton: ViewModels.Button;
-  public saveExistingDocumentButton: ViewModels.Button;
-  public discardNewDocumentChangesButton: ViewModels.Button;
-  public discardExisitingDocumentChangesButton: ViewModels.Button;
-  public deleteExisitingDocumentButton: ViewModels.Button;
-  public displayedError: ko.Observable<string>;
-  public accessibleDocumentList: AccessibleVerticalList;
-  public dataContentsGridScrollHeight: ko.Observable<string>;
-  public isPreferredApiMongoDB: boolean;
-  public shouldShowEditor: ko.Computed<boolean>;
-  public splitter: Splitter;
-  public showPartitionKey: boolean;
-  public idHeader: string;
-
-  // TODO need to refactor
-  public partitionKey: DataModels.PartitionKey;
-  public partitionKeyPropertyHeaders: string[];
-  public partitionKeyProperties: string[];
-  public documentIds: ko.ObservableArray<DocumentId>;
-
-  private _documentsIterator: QueryIterator<ItemDefinition & Resource>;
-  private _resourceTokenPartitionKey: string;
-  private _isQueryCopilotSampleContainer: boolean;
-  private queryAbortController: AbortController;
-  private cancelQueryTimeoutID: NodeJS.Timeout;
-  private setKeyboardActions: KeyboardHandlerSetter;
-
-  constructor(options: ViewModels.DocumentsTabOptions) {
-    super(options);
-    this.setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
-    this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
-
-    this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
-
-    this.documentContentsGridId = `documentContentsGrid${this.tabId}`;
-    this.documentContentsContainerId = `documentContentsContainer${this.tabId}`;
-    this.editorState = ko.observable<ViewModels.DocumentExplorerState>(
-      ViewModels.DocumentExplorerState.noDocumentSelected,
-    );
-    this.selectedDocumentId = ko.observable<DocumentId>();
-    this.selectedDocumentContent = editable.observable<string>("");
-    this.initialDocumentContent = ko.observable<string>("");
-    this.partitionKey = options.partitionKey || (this.collection && this.collection.partitionKey);
-    this._resourceTokenPartitionKey = options.resourceTokenPartitionKey;
-    this.documentIds = options.documentIds;
-
-    this.partitionKeyPropertyHeaders = this.collection?.partitionKeyPropertyHeaders || this.partitionKey?.paths;
-    this.partitionKeyProperties = this.partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
-      partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
-    );
-
-    this.isFilterExpanded = ko.observable<boolean>(false);
-    this.isFilterCreated = ko.observable<boolean>(true);
-    this.filterContent = ko.observable<string>("");
-    this.appliedFilter = ko.observable<string>("");
-    this.displayedError = ko.observable<string>("");
-    this.lastFilterContents = ko.observableArray<string>([
-      'WHERE c.id = "foo"',
-      "ORDER BY c._ts DESC",
-      'WHERE c.id = "foo" ORDER BY c._ts DESC',
-    ]);
-
-    this.dataContentsGridScrollHeight = ko.observable<string>(null);
-
-    // initialize splitter only after template has been loaded so dom elements are accessible
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady) {
-        const tabContainer: HTMLElement = document.getElementById("content");
-        const splitterBounds: SplitterBounds = {
-          min: Constants.DocumentsGridMetrics.DocumentEditorMinWidthRatio * tabContainer.clientWidth,
-          max: Constants.DocumentsGridMetrics.DocumentEditorMaxWidthRatio * tabContainer.clientWidth,
-        };
-        this.splitter = new Splitter({
-          splitterId: "h_splitter2",
-          leftId: this.documentContentsContainerId,
-          bounds: splitterBounds,
-          direction: SplitterDirection.Vertical,
-        });
-      }
-    });
-
-    this.accessibleDocumentList = new AccessibleVerticalList(this.documentIds());
-    this.accessibleDocumentList.setOnSelect(
-      (selectedDocument: DocumentId) => selectedDocument && selectedDocument.click(),
-    );
-    this.selectedDocumentId.subscribe((newSelectedDocumentId: DocumentId) =>
-      this.accessibleDocumentList.updateCurrentItem(newSelectedDocumentId),
-    );
-    this.documentIds.subscribe((newDocuments: DocumentId[]) => {
-      this.accessibleDocumentList.updateItemList(newDocuments);
-      if (newDocuments.length > 0) {
-        this.dataContentsGridScrollHeight(
-          newDocuments.length * DocumentsGridMetrics.IndividualRowHeight + DocumentsGridMetrics.BufferHeight + "px",
-        );
-      } else {
-        this.dataContentsGridScrollHeight(
-          DocumentsGridMetrics.IndividualRowHeight + DocumentsGridMetrics.BufferHeight + "px",
-        );
-      }
-    });
-
-    this.isEditorDirty = ko.computed<boolean>(() => {
-      switch (this.editorState()) {
-        case ViewModels.DocumentExplorerState.noDocumentSelected:
-        case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          return false;
-
-        case ViewModels.DocumentExplorerState.newDocumentValid:
-        case ViewModels.DocumentExplorerState.newDocumentInvalid:
-        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          return true;
-
-        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-          return (
-            this.selectedDocumentContent.getEditableOriginalValue() !==
-            this.selectedDocumentContent.getEditableCurrentValue()
-          );
-
-        default:
-          return false;
-      }
-    });
-
-    this.newDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.noDocumentSelected:
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        return true;
-      }),
-    };
-
-    this.saveNewDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-          case ViewModels.DocumentExplorerState.newDocumentInvalid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.discardNewDocumentChangesButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-          case ViewModels.DocumentExplorerState.newDocumentInvalid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.newDocumentValid:
-          case ViewModels.DocumentExplorerState.newDocumentInvalid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.saveExistingDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.discardExisitingDocumentChangesButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.deleteExisitingDocumentButton = {
-      enabled: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-            return true;
-        }
-
-        return false;
-      }),
-    };
-
-    this.applyFilterButton = {
-      enabled: ko.computed<boolean>(() => {
-        return true;
-      }),
-
-      visible: ko.computed<boolean>(() => {
-        return true;
-      }),
-    };
-    this.buildCommandBarOptions();
-    this.shouldShowEditor = ko.computed<boolean>(() => {
-      const documentHasContent: boolean =
-        this.selectedDocumentContent() != null && this.selectedDocumentContent().length > 0;
-      const isNewDocument: boolean =
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid;
-
-      return documentHasContent || isNewDocument;
-    });
-    this.selectedDocumentContent.subscribe((newContent: string) => this._onEditorContentChange(newContent));
-
-    this.showPartitionKey = this._shouldShowPartitionKey();
-    this._isQueryCopilotSampleContainer =
-      this.collection?.isSampleCollection &&
-      this.collection?.databaseId === QueryCopilotSampleDatabaseId &&
-      this.collection?.id() === QueryCopilotSampleContainerId;
-  }
-
-  private _shouldShowPartitionKey(): boolean {
-    if (!this.collection) {
-      return false;
-    }
-
-    if (!this.collection.partitionKey) {
-      return false;
-    }
-
-    if (this.collection.partitionKey.systemKey && this.isPreferredApiMongoDB) {
-      return false;
-    }
-
-    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);
-
-    $(".filterDocExpanded").addClass("active");
-    $("#content").addClass("active");
-    $(".querydropdown").focus();
-
-    return Q();
-  }
-
-  public onHideFilterClick(): Q.Promise<any> {
-    this.isFilterExpanded(false);
-
-    $(".filterDocExpanded").removeClass("active");
-    $("#content").removeClass("active");
-    $(".queryButton").focus();
-    return Q();
-  }
-
-  public onCloseButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.onHideFilterClick();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public async refreshDocumentsGrid(applyFilterButtonPressed?: boolean): Promise<void> {
-    // clear documents grid
-    this.documentIds([]);
-    try {
-      // reset iterator
-      this._documentsIterator = this.createIterator();
-      // load documents
-      await this.autoPopulateContent(applyFilterButtonPressed);
-      // collapse filter
-      this.appliedFilter(this.filterContent());
-      this.isFilterExpanded(false);
-      document.getElementById("errorStatusIcon")?.focus();
-    } catch (error) {
-      useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
-    }
-  }
-
-  public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.refreshDocumentsGrid();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public onAbortQueryClick(): void {
-    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();
-    }
-
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-
-    return Q();
-  }
-
-  public onNewDocumentClick = (): void => {
-    if (this.isEditorDirty()) {
-      useDialog
-        .getState()
-        .showOkCancelModalDialog(
-          "Unsaved changes",
-          "Changes will be lost. Do you want to continue?",
-          "OK",
-          () => this.initializeNewDocument(),
-          "Cancel",
-          undefined,
-        );
-    } else {
-      this.initializeNewDocument();
-    }
-  };
-
-  private initializeNewDocument = (): void => {
-    this.selectedDocumentId(null);
-    const newDocument: any = {
-      id: "replace_with_new_document_id",
-    };
-    this.partitionKeyProperties.forEach((partitionKeyProperty) => {
-      let target = newDocument;
-      const keySegments = partitionKeyProperty.split(".");
-      const finalSegment = keySegments.pop();
-
-      // Initialize nested objects as needed
-      keySegments.forEach((segment) => {
-        target = target[segment] = target[segment] || {};
-      });
-
-      target[finalSegment] = "replace_with_new_partition_key_value";
-    });
-    const defaultDocument: string = this.renderObjectForEditor(newDocument, null, 4);
-    this.initialDocumentContent(defaultDocument);
-    this.selectedDocumentContent.setBaseline(defaultDocument);
-    this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);
-  };
-
-  public onSaveNewDocumentClick = (): Promise<any> => {
-    this.isExecutionError(false);
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-    const document = JSON.parse(this.selectedDocumentContent());
-    this.isExecuting(true);
-    return createDocument(this.collection, document)
-      .then(
-        (savedDocument: any) => {
-          const value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-          this.initialDocumentContent(value);
-          const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
-            savedDocument,
-            this.partitionKey as PartitionKeyDefinition,
-          );
-          let id = new DocumentId(this, savedDocument, partitionKeyValueArray);
-          let ids = this.documentIds();
-          ids.push(id);
-
-          this.selectedDocumentId(id);
-          this.documentIds(ids);
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public onRevertNewDocumentClick = (): Q.Promise<any> => {
-    this.initialDocumentContent("");
-    this.selectedDocumentContent("");
-    this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-
-    return Q();
-  };
-
-  public onSaveExistingDocumentClick = (): Promise<any> => {
-    const selectedDocumentId = this.selectedDocumentId();
-    const documentContent = JSON.parse(this.selectedDocumentContent());
-
-    const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
-      documentContent,
-      this.partitionKey as PartitionKeyDefinition,
-    );
-    selectedDocumentId.partitionKeyValue = partitionKeyValueArray;
-
-    this.isExecutionError(false);
-    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-    this.isExecuting(true);
-    return updateDocument(this.collection, selectedDocumentId, documentContent)
-      .then(
-        (updatedDocument: any) => {
-          const value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-          this.initialDocumentContent(value);
-          this.documentIds().forEach((documentId: DocumentId) => {
-            if (documentId.rid === updatedDocument._rid) {
-              documentId.id(updatedDocument.id);
-            }
-          });
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public onRevertExisitingDocumentClick = (): Q.Promise<any> => {
-    this.selectedDocumentContent.setBaseline(this.initialDocumentContent());
-    this.initialDocumentContent.valueHasMutated();
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-
-    return Q();
-  };
-
-  public onDeleteExisitingDocumentClick = async (): Promise<void> => {
-    const selectedDocumentId = this.selectedDocumentId();
-    const msg = !this.isPreferredApiMongoDB
-      ? "Are you sure you want to delete the selected item ?"
-      : "Are you sure you want to delete the selected document ?";
-
-    useDialog
-      .getState()
-      .showOkCancelModalDialog(
-        "Confirm delete",
-        msg,
-        "Delete",
-        async () => await this._deleteDocument(selectedDocumentId),
-        "Cancel",
-        undefined,
-      );
-  };
-
-  public onValidDocumentEdit(): Q.Promise<any> {
-    if (
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid ||
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid
-    ) {
-      this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);
-      return Q();
-    }
-
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
-    return Q();
-  }
-
-  public onInvalidDocumentEdit(): Q.Promise<any> {
-    if (
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid ||
-      this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid
-    ) {
-      this.editorState(ViewModels.DocumentExplorerState.newDocumentInvalid);
-      return Q();
-    }
-
-    if (
-      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
-      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
-    ) {
-      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
-      return Q();
-    }
-
-    return Q();
-  }
-
-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
-  }
-
-  public onFilterKeyDown(model: unknown, e: KeyboardEvent): boolean {
-    if (e.key === "Enter") {
-      this.refreshDocumentsGrid(true);
-
-      // Suppress the default behavior of the key
-      return false;
-    } else if (e.key === "Escape") {
-      this.onHideFilterClick();
-
-      // Suppress the default behavior of the key
-      return false;
-    } else {
-      // Allow the default behavior of the key
-      return true;
-    }
-  }
-
-  public async onActivate(): Promise<void> {
-    super.onActivate();
-
-    this.setKeyboardActions({
-      [KeyboardAction.SEARCH]: () => {
-        this.onShowFilterClick();
-        return true;
-      },
-      [KeyboardAction.CLEAR_SEARCH]: () => {
-        this.filterContent("");
-        this.refreshDocumentsGrid(true);
-        return true;
-      },
-    });
-
-    if (!this._documentsIterator) {
-      try {
-        await this.autoPopulateContent();
-      } catch (error) {
-        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-          TelemetryProcessor.traceFailure(
-            Action.Tab,
-            {
-              databaseName: this.collection.databaseId,
-              collectionName: this.collection.id(),
-
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            this.onLoadStartKey,
-          );
-          this.onLoadStartKey = null;
-        }
-      }
-    }
-  }
-
-  protected __deleteDocument(documentId: DocumentId): Promise<void> {
-    return deleteDocument(this.collection, documentId);
-  }
-
-  private _deleteDocument(selectedDocumentId: DocumentId): Promise<void> {
-    this.isExecutionError(false);
-    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-    this.isExecuting(true);
-    return this.__deleteDocument(selectedDocumentId)
-      .then(
-        () => {
-          this.documentIds.remove((documentId: DocumentId) => documentId.rid === selectedDocumentId.rid);
-          this.selectedDocumentContent("");
-          this.selectedDocumentId(null);
-          this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-          TelemetryProcessor.traceSuccess(
-            Action.DeleteDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          console.error(error);
-          TelemetryProcessor.traceFailure(
-            Action.DeleteDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  }
-
-  public createIterator(): QueryIterator<ItemDefinition & Resource> {
-    this.queryAbortController = new AbortController();
-    const filter: string = this.filterContent().trim();
-    const query: string = this.buildQuery(filter);
-    let options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-
-    if (this._resourceTokenPartitionKey) {
-      options.partitionKey = this._resourceTokenPartitionKey;
-    }
-    options.abortSignal = this.queryAbortController.signal;
-    return this._isQueryCopilotSampleContainer
-      ? querySampleDocuments(query, options)
-      : queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
-  }
-
-  public async selectDocument(documentId: DocumentId): Promise<void> {
-    this.selectedDocumentId(documentId);
-    const content = await (this._isQueryCopilotSampleContainer
-      ? readSampleDocument(documentId)
-      : readDocument(this.collection, documentId));
-    this.initDocumentEditor(documentId, content);
-  }
-
-  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 = []) => {
-          const currentDocuments = this.documentIds();
-          const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
-          const nextDocumentIds = documentsIdsResponse
-            // filter documents already loaded in observable
-            .filter((d: any) => {
-              return currentDocumentsRids.indexOf(d._rid) < 0;
-            })
-            // map raw response to view model
-            .map((rawDocument: any) => {
-              const partitionKeyValue = rawDocument._partitionKeyValue;
-              return new DocumentId(this, rawDocument, partitionKeyValue);
-            });
-
-          const merged = currentDocuments.concat(nextDocumentIds);
-          this.documentIds(merged);
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceSuccess(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          logConsoleError(errorMessage);
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceFailure(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                error: errorMessage,
-                errorStack: getErrorStack(error),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-      )
-      .finally(() => {
-        this.isExecuting(false);
-        if (applyFilterButtonClicked && this.queryTimeoutEnabled()) {
-          clearTimeout(this.cancelQueryTimeoutID);
-          if (!automaticallyCancelQueryAfterTimeout) {
-            useDialog.getState().closeDialog();
-          }
-        }
-      });
-  }
-
-  public onLoadMoreKeyInput = (source: any, event: KeyboardEvent): void => {
-    if (event.key === " " || event.key === "Enter") {
-      const focusElement = document.getElementById(this.documentContentsGridId);
-      this.loadNextPage();
-      focusElement && focusElement.focus();
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
-
-  protected _loadNextPageInternal(): Q.Promise<DataModels.DocumentId[]> {
-    return Q(this._documentsIterator.fetchNext().then((response) => response.resources));
-  }
-
-  protected _onEditorContentChange(newContent: string) {
-    try {
-      let parsed: any = JSON.parse(newContent);
-      this.onValidDocumentEdit();
-    } catch (e) {
-      this.onInvalidDocumentEdit();
-    }
-  }
-
-  public initDocumentEditor(documentId: DocumentId, documentContent: any): Q.Promise<any> {
-    if (documentId) {
-      const content: string = this.renderObjectForEditor(documentContent, null, 4);
-      this.selectedDocumentContent.setBaseline(content);
-      this.initialDocumentContent(content);
-      const newState = documentId
-        ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
-        : ViewModels.DocumentExplorerState.newDocumentValid;
-      this.editorState(newState);
-    }
-
-    return Q();
-  }
-
-  public buildQuery(filter: string): string {
-    return QueryUtils.buildDocumentsQuery(filter, this.partitionKeyProperties, this.partitionKey);
-  }
-
-  protected getTabsButtons(): CommandButtonComponentProps[] {
-    if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
-      // All the following buttons require write access
-      return [];
-    }
-
-    const buttons: CommandButtonComponentProps[] = [];
-    const label = !this.isPreferredApiMongoDB ? "New Item" : "New Document";
-    if (this.newDocumentButton.visible()) {
-      buttons.push({
-        iconSrc: NewDocumentIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.NEW_ITEM,
-        onCommandClick: this.onNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !this.newDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-        id: "mongoNewDocumentBtn",
-      });
-    }
-
-    if (this.saveNewDocumentButton.visible()) {
-      const label = "Save";
-      buttons.push({
-        iconSrc: SaveIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.SAVE_ITEM,
-        onCommandClick: this.onSaveNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.saveNewDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.discardNewDocumentChangesButton.visible()) {
-      const label = "Discard";
-      buttons.push({
-        iconSrc: DiscardIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
-        onCommandClick: this.onRevertNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.discardNewDocumentChangesButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.saveExistingDocumentButton.visible()) {
-      const label = "Update";
-      buttons.push({
-        iconSrc: SaveIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.SAVE_ITEM,
-        onCommandClick: this.onSaveExistingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.saveExistingDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.discardExisitingDocumentChangesButton.visible()) {
-      const label = "Discard";
-      buttons.push({
-        iconSrc: DiscardIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
-        onCommandClick: this.onRevertExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.discardExisitingDocumentChangesButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (this.deleteExisitingDocumentButton.visible()) {
-      const label = "Delete";
-      buttons.push({
-        iconSrc: DeleteDocumentIcon,
-        iconAlt: label,
-        keyboardAction: KeyboardAction.DELETE_ITEM,
-        onCommandClick: this.onDeleteExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled:
-          !this.deleteExisitingDocumentButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      });
-    }
-
-    if (!this.isPreferredApiMongoDB) {
-      buttons.push(DocumentsTab._createUploadButton(this.collection.container));
-    }
-
-    return buttons;
-  }
-
-  protected buildCommandBarOptions(): void {
-    ko.computed(() =>
-      ko.toJSON([
-        this.newDocumentButton.visible,
-        this.newDocumentButton.enabled,
-        this.saveNewDocumentButton.visible,
-        this.saveNewDocumentButton.enabled,
-        this.discardNewDocumentChangesButton.visible,
-        this.discardNewDocumentChangesButton.enabled,
-        this.saveExistingDocumentButton.visible,
-        this.saveExistingDocumentButton.enabled,
-        this.discardExisitingDocumentChangesButton.visible,
-        this.discardExisitingDocumentChangesButton.enabled,
-        this.deleteExisitingDocumentButton.visible,
-        this.deleteExisitingDocumentButton.enabled,
-      ]),
-    ).subscribe(() => this.updateNavbarWithTabsButtons());
-    this.updateNavbarWithTabsButtons();
-  }
-
-  public static _createUploadButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Upload Item";
-    return {
-      id: "uploadItemBtn",
-      iconSrc: UploadIcon,
-      iconAlt: label,
-      onCommandClick: () => {
-        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        selectedCollection && container.openUploadItemsPanePane();
-      },
-      commandButtonLabel: label,
-      ariaLabel: label,
-      hasPopup: true,
-      disabled:
-        useSelectedNode.getState().isDatabaseNodeOrNoneSelected() ||
-        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-    };
-  }
-
-  private queryTimeoutEnabled(): boolean {
-    return !this.isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled);
-  }
-}
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
new file mode 100644
index 000000000..d224c2f9a
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
@@ -0,0 +1,476 @@
+import { FeedResponse, ItemDefinition, Resource } from "@azure/cosmos";
+import { deleteDocuments } from "Common/dataAccess/deleteDocument";
+import { Platform, updateConfigContext } from "ConfigContext";
+import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import {
+  ButtonsDependencies,
+  DELETE_BUTTON_ID,
+  DISCARD_BUTTON_ID,
+  DocumentsTabComponent,
+  IDocumentsTabComponentProps,
+  NEW_DOCUMENT_BUTTON_ID,
+  SAVE_BUTTON_ID,
+  UPDATE_BUTTON_ID,
+  UPLOAD_BUTTON_ID,
+  buildQuery,
+  getDiscardExistingDocumentChangesButtonState,
+  getDiscardNewDocumentChangesButtonState,
+  getSaveExistingDocumentButtonState,
+  getSaveNewDocumentButtonState,
+  getTabsButtons,
+  showPartitionKey,
+} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import { ReactWrapper, ShallowWrapper, mount, shallow } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { DatabaseAccount, DocumentId } from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { updateUserContext } from "../../../UserContext";
+import Explorer from "../../Explorer";
+
+jest.mock("Common/dataAccess/queryDocuments", () => ({
+  queryDocuments: jest.fn(() => ({
+    // Omit headers, because we can't mock a private field and we don't need to test it
+    fetchNext: (): Promise<Omit<FeedResponse<ItemDefinition & Resource>, "headers">> =>
+      Promise.resolve({
+        resources: [{ id: "id", _rid: "rid", _self: "self", _etag: "etag", _ts: 123 }],
+        hasMoreResults: false,
+        diagnostics: undefined,
+
+        continuation: undefined,
+        continuationToken: undefined,
+        queryMetrics: "queryMetrics",
+        requestCharge: 1,
+        activityId: "activityId",
+        indexMetrics: "indexMetrics",
+      }),
+  })),
+}));
+
+const PROPERTY_VALUE = "__SOME_PROPERTY_VALUE__";
+jest.mock("Common/dataAccess/readDocument", () => ({
+  readDocument: jest.fn(() =>
+    Promise.resolve({
+      container: undefined,
+      id: "id",
+      property: PROPERTY_VALUE,
+    }),
+  ),
+}));
+
+jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
+  EditorReact: (props: EditorReactProps) => <>{props.content}</>,
+}));
+
+jest.mock("Explorer/Controls/Dialog", () => ({
+  useDialog: {
+    getState: jest.fn(() => ({
+      showOkCancelModalDialog: (title: string, subText: string, okLabel: string, onOk: () => void) => onOk(),
+      showOkModalDialog: () => {},
+    })),
+  },
+}));
+
+jest.mock("Common/dataAccess/deleteDocument", () => ({
+  deleteDocuments: jest.fn((collection: ViewModels.CollectionBase, documentIds: DocumentId[]) =>
+    Promise.resolve(documentIds),
+  ),
+}));
+
+async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | ShallowWrapper<P>, amount = 0) {
+  let newWrapper;
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, amount));
+    newWrapper = wrapper.update();
+  });
+  return newWrapper;
+}
+
+describe("Documents tab (noSql API)", () => {
+  describe("buildQuery", () => {
+    it("should generate the right select query for SQL API", () => {
+      expect(buildQuery(false, "")).toContain("select");
+    });
+  });
+
+  describe("showPartitionKey", () => {
+    const explorer = new Explorer();
+    const mongoExplorer = new Explorer();
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableGremlin" }],
+        },
+      } as DatabaseAccount,
+    });
+
+    const collectionWithoutPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      container: explorer,
+    } as ViewModels.Collection;
+
+    const collectionWithSystemPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: true,
+      },
+      container: explorer,
+    } as ViewModels.Collection;
+
+    const collectionWithNonSystemPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: false,
+      },
+      container: explorer,
+    } as ViewModels.Collection;
+
+    const mongoCollectionWithSystemPartitionKey: ViewModels.Collection = {
+      id: ko.observable<string>("foo"),
+      databaseId: "foo",
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: true,
+      },
+      container: mongoExplorer,
+    } as ViewModels.Collection;
+
+    it("should be false for null or undefined collection", () => {
+      expect(showPartitionKey(undefined, false)).toBe(false);
+      expect(showPartitionKey(null, false)).toBe(false);
+      expect(showPartitionKey(undefined, true)).toBe(false);
+      expect(showPartitionKey(null, true)).toBe(false);
+    });
+
+    it("should be false for null or undefined partitionKey", () => {
+      expect(showPartitionKey(collectionWithoutPartitionKey, false)).toBe(false);
+    });
+
+    it("should be true for non-Mongo accounts with system partitionKey", () => {
+      expect(showPartitionKey(collectionWithSystemPartitionKey, false)).toBe(true);
+    });
+
+    it("should be false for Mongo accounts with system partitionKey", () => {
+      expect(showPartitionKey(mongoCollectionWithSystemPartitionKey, true)).toBe(false);
+    });
+
+    it("should be true for non-system partitionKey", () => {
+      expect(showPartitionKey(collectionWithNonSystemPartitionKey, false)).toBe(true);
+    });
+  });
+
+  describe("when getting command bar button state", () => {
+    describe("should set Save New Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: true, visible: true });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: true });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: false,
+        visible: false,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getSaveNewDocumentButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Discard New Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: true, visible: true });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: true, visible: true });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: false,
+        visible: false,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: false,
+        visible: false,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getDiscardNewDocumentChangesButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Save Existing Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: true,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: false,
+        visible: true,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getSaveExistingDocumentButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Discard Existing Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        enabled: false,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: true,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: true,
+        visible: true,
+      });
+
+      testCases.forEach((testCase) => {
+        const state = getDiscardExistingDocumentChangesButtonState(testCase.state);
+        it(`enable for ${testCase.state}`, () => {
+          expect(state.enabled).toBe(testCase.enabled);
+        });
+        it(`visible for ${testCase.state}`, () => {
+          expect(state.visible).toBe(testCase.visible);
+        });
+      });
+    });
+
+    describe("should set Delete Existing Document state", () => {
+      const testCases = new Set<{ state: ViewModels.DocumentExplorerState; enabled: boolean; visible: boolean }>();
+      testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
+      testCases.add({ state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits, enabled: true, visible: true });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        enabled: true,
+        visible: true,
+      });
+      testCases.add({
+        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        enabled: true,
+        visible: true,
+      });
+    });
+  });
+
+  it("Do not get tabs button for Fabric readonly", () => {
+    updateConfigContext({ platform: Platform.Fabric });
+    updateUserContext({
+      fabricContext: {
+        connectionId: "test",
+        databaseConnectionInfo: undefined,
+        isReadOnly: true,
+        isVisible: true,
+      },
+    });
+
+    const buttons = getTabsButtons({} as ButtonsDependencies);
+    expect(buttons.length).toBe(0);
+  });
+
+  describe("when rendered", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: false,
+      documentIds: [],
+      collection: undefined,
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ShallowWrapper;
+
+    beforeEach(async () => {
+      const props: IDocumentsTabComponentProps = createMockProps();
+      wrapper = shallow(<DocumentsTabComponent {...props} />);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("should render the page", () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it("clicking on Edit filter should render the Apply Filter button", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.findWhere((node) => node.text() === "Apply Filter").exists()).toBeTruthy();
+    });
+
+    it("clicking on Edit filter should render input for filter", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.find("#filterInput").exists()).toBeTruthy();
+    });
+  });
+
+  describe("Command bar buttons", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: false,
+      documentIds: [],
+      collection: {
+        id: ko.observable<string>("foo"),
+        container: new Explorer(),
+        partitionKey: {
+          kind: "MultiHash",
+          paths: ["/pkey1", "/pkey2", "/pkey3"],
+          version: 2,
+        },
+        partitionKeyProperties: ["pkey1", "pkey2", "pkey3"],
+        partitionKeyPropertyHeaders: ["/pkey1", "/pkey2", "/pkey3"],
+      } as ViewModels.CollectionBase,
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ReactWrapper;
+
+    beforeEach(async () => {
+      updateConfigContext({ platform: Platform.Hosted });
+
+      const props: IDocumentsTabComponentProps = createMockProps();
+
+      wrapper = mount(<DocumentsTabComponent {...props} />);
+      wrapper = await waitForComponentToPaint(wrapper);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("renders by default the first document", async () => {
+      expect(wrapper.findWhere((node) => node.text().includes(PROPERTY_VALUE)).exists()).toBeTruthy();
+    });
+
+    it("default buttons", async () => {
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPDATE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DELETE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPLOAD_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking on New Document should show editor with new document", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+      expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy();
+    });
+
+    it("clicking on New Document should show Save and Discard buttons", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking Delete Document asks for confirmation", () => {
+      const mockDeleteDocuments = deleteDocuments as jest.Mock;
+      mockDeleteDocuments.mockClear();
+
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === DELETE_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(mockDeleteDocuments).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
new file mode 100644
index 000000000..1fb6ed9db
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -0,0 +1,1816 @@
+import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { Button, FluentProvider, Input, TableRowId } from "@fluentui/react-components";
+import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
+import Split from "@uiw/react-split";
+import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
+import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
+import MongoUtility from "Common/MongoUtility";
+import { StyleConstants } from "Common/StyleConstants";
+import { createDocument } from "Common/dataAccess/createDocument";
+import { deleteDocuments as deleteNoSqlDocuments } from "Common/dataAccess/deleteDocument";
+import { queryDocuments } from "Common/dataAccess/queryDocuments";
+import { readDocument } from "Common/dataAccess/readDocument";
+import { updateDocument } from "Common/dataAccess/updateDocument";
+import { Platform, configContext } from "ConfigContext";
+import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
+import { useDialog } from "Explorer/Controls/Dialog";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import Explorer from "Explorer/Explorer";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
+import { useSelectedNode } from "Explorer/useSelectedNode";
+import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
+import { QueryConstants } from "Shared/Constants";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { userContext } from "UserContext";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
+import React, { KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { format } from "react-string-format";
+import { CSSProperties } from "styled-components";
+import DeleteDocumentIcon from "../../../../images/DeleteDocument.svg";
+import NewDocumentIcon from "../../../../images/NewDocument.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 * as HeadersUtility from "../../../Common/HeadersUtility";
+import * as Logger from "../../../Common/Logger";
+import * as MongoProxyClient from "../../../Common/MongoProxyClient";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as QueryUtils from "../../../Utils/QueryUtils";
+import { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
+import DocumentId from "../../Tree/DocumentId";
+import ObjectId from "../../Tree/ObjectId";
+import TabsBase from "../TabsBase";
+import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
+
+export class DocumentsTabV2 extends TabsBase {
+  public partitionKey: DataModels.PartitionKey;
+  private documentIds: DocumentId[];
+  private title: string;
+  private resourceTokenPartitionKey: string;
+
+  constructor(options: ViewModels.DocumentsTabOptions) {
+    super(options);
+
+    this.documentIds = options.documentIds();
+    this.title = options.title;
+    this.partitionKey = options.partitionKey;
+    this.resourceTokenPartitionKey = options.resourceTokenPartitionKey;
+  }
+
+  public render(): JSX.Element {
+    return (
+      <DocumentsTabComponent
+        isPreferredApiMongoDB={userContext.apiType === "Mongo"}
+        documentIds={this.documentIds}
+        collection={this.collection}
+        partitionKey={this.partitionKey}
+        onLoadStartKey={this.onLoadStartKey}
+        tabTitle={this.title}
+        resourceTokenPartitionKey={this.resourceTokenPartitionKey}
+        onExecutionErrorChange={(isExecutionError: boolean) => this.isExecutionError(isExecutionError)}
+        onIsExecutingChange={(isExecuting: boolean) => this.isExecuting(isExecuting)}
+        isTabActive={this.isActive()}
+      />
+    );
+  }
+
+  public onActivate(): void {
+    super.onActivate();
+    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+  }
+}
+
+const filterButtonStyle: CSSProperties = {
+  marginLeft: 8,
+};
+
+// From TabsBase.renderObjectForEditor()
+let renderObjectForEditor = (
+  value: unknown,
+  replacer: (this: unknown, key: string, value: unknown) => unknown,
+  space: string | number,
+): string => JSON.stringify(value, replacer, space);
+
+// Export to expose to unit tests
+export const getSaveNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+// Export to expose to unit tests
+export const getDiscardNewDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+// Export to expose to unit tests
+export const getSaveExistingDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+// Export to expose to unit tests
+export const getDiscardExistingDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+
+  visible: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+});
+
+type UiKeyboardEvent = (e: KeyboardEvent | React.SyntheticEvent<Element, Event>) => void;
+
+// Export to expose to unit tests
+export type ButtonsDependencies = {
+  _collection: ViewModels.CollectionBase;
+  selectedRows: Set<TableRowId>;
+  editorState: ViewModels.DocumentExplorerState;
+  isPreferredApiMongoDB: boolean;
+  onNewDocumentClick: UiKeyboardEvent;
+  onSaveNewDocumentClick: UiKeyboardEvent;
+  onRevertNewDocumentClick: UiKeyboardEvent;
+  onSaveExistingDocumentClick: UiKeyboardEvent;
+  onRevertExistingDocumentClick: UiKeyboardEvent;
+  onDeleteExistingDocumentsClick: UiKeyboardEvent;
+};
+
+const createUploadButton = (container: Explorer): CommandButtonComponentProps => {
+  const label = "Upload Item";
+  return {
+    id: UPLOAD_BUTTON_ID,
+    iconSrc: UploadIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+      selectedCollection && container.openUploadItemsPanePane();
+    },
+    commandButtonLabel: label,
+    ariaLabel: label,
+    hasPopup: true,
+    disabled:
+      useSelectedNode.getState().isDatabaseNodeOrNoneSelected() ||
+      useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+  };
+};
+
+// Export to expose to unit tests
+export const NEW_DOCUMENT_BUTTON_ID = "mongoNewDocumentBtn";
+export const SAVE_BUTTON_ID = "saveBtn";
+export const UPDATE_BUTTON_ID = "updateBtn";
+export const DISCARD_BUTTON_ID = "discardBtn";
+export const DELETE_BUTTON_ID = "deleteBtn";
+export const UPLOAD_BUTTON_ID = "uploadItemBtn";
+
+// Export to expose in unit tests
+export const getTabsButtons = ({
+  _collection,
+  selectedRows,
+  editorState,
+  isPreferredApiMongoDB,
+  onNewDocumentClick,
+  onSaveNewDocumentClick,
+  onRevertNewDocumentClick,
+  onSaveExistingDocumentClick,
+  onRevertExistingDocumentClick,
+  onDeleteExistingDocumentsClick,
+}: ButtonsDependencies): CommandButtonComponentProps[] => {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
+    // All the following buttons require write access
+    return [];
+  }
+
+  const buttons: CommandButtonComponentProps[] = [];
+  const label = !isPreferredApiMongoDB ? "New Item" : "New Document";
+  if (getNewDocumentButtonState(editorState).visible) {
+    buttons.push({
+      iconSrc: NewDocumentIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.NEW_ITEM,
+      onCommandClick: onNewDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getNewDocumentButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: NEW_DOCUMENT_BUTTON_ID,
+    });
+  }
+
+  if (getSaveNewDocumentButtonState(editorState).visible) {
+    const label = "Save";
+    buttons.push({
+      iconSrc: SaveIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.SAVE_ITEM,
+      onCommandClick: onSaveNewDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getSaveNewDocumentButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: SAVE_BUTTON_ID,
+    });
+  }
+
+  if (getDiscardNewDocumentChangesButtonState(editorState).visible) {
+    const label = "Discard";
+    buttons.push({
+      iconSrc: DiscardIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
+      onCommandClick: onRevertNewDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getDiscardNewDocumentChangesButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: DISCARD_BUTTON_ID,
+    });
+  }
+
+  if (getSaveExistingDocumentButtonState(editorState).visible) {
+    const label = "Update";
+    buttons.push({
+      iconSrc: SaveIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.SAVE_ITEM,
+      onCommandClick: onSaveExistingDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getSaveExistingDocumentButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: UPDATE_BUTTON_ID,
+    });
+  }
+
+  if (getDiscardExistingDocumentChangesButtonState(editorState).visible) {
+    const label = "Discard";
+    buttons.push({
+      iconSrc: DiscardIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.CANCEL_OR_DISCARD,
+      onCommandClick: onRevertExistingDocumentClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled:
+        !getDiscardExistingDocumentChangesButtonState(editorState).enabled ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: DISCARD_BUTTON_ID,
+    });
+  }
+
+  if (selectedRows.size > 0) {
+    const label = "Delete";
+    buttons.push({
+      iconSrc: DeleteDocumentIcon,
+      iconAlt: label,
+      keyboardAction: KeyboardAction.DELETE_ITEM,
+      onCommandClick: onDeleteExistingDocumentsClick,
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: false,
+      disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      id: DELETE_BUTTON_ID,
+    });
+  }
+
+  if (!isPreferredApiMongoDB) {
+    buttons.push(createUploadButton(_collection.container));
+  }
+
+  return buttons;
+};
+
+const updateNavbarWithTabsButtons = (isTabActive: boolean, dependencies: ButtonsDependencies): void => {
+  if (isTabActive) {
+    useCommandBar.getState().setContextButtons(getTabsButtons(dependencies));
+  }
+};
+
+const getNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
+  enabled: (() => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.noDocumentSelected:
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+        return true;
+      default:
+        return false;
+    }
+  })(),
+  visible: true,
+});
+
+const _loadNextPageInternal = (
+  iterator: QueryIterator<ItemDefinition & Resource>,
+): Promise<DataModels.DocumentId[]> => {
+  return iterator.fetchNext().then((response) => response.resources);
+};
+
+// Export to expose to unit tests
+export const showPartitionKey = (collection: ViewModels.CollectionBase, isPreferredApiMongoDB: boolean) => {
+  if (!collection) {
+    return false;
+  }
+
+  if (!collection.partitionKey) {
+    return false;
+  }
+
+  if (collection.partitionKey.systemKey && isPreferredApiMongoDB) {
+    return false;
+  }
+
+  return true;
+};
+
+// Export to expose to unit tests
+export const buildQuery = (
+  isMongo: boolean,
+  filter: string,
+  partitionKeyProperties?: string[],
+  partitionKey?: DataModels.PartitionKey,
+): string => {
+  if (isMongo) {
+    return filter || "{}";
+  }
+
+  return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
+};
+
+// Export to expose to unit tests
+export interface IDocumentsTabComponentProps {
+  isPreferredApiMongoDB: boolean;
+  documentIds: DocumentId[]; // TODO: this contains ko observables. We need to convert them to React state.
+  collection: ViewModels.CollectionBase;
+  partitionKey: DataModels.PartitionKey;
+  onLoadStartKey: number;
+  tabTitle: string;
+  resourceTokenPartitionKey?: string;
+  onExecutionErrorChange: (isExecutionError: boolean) => void;
+  onIsExecutingChange: (isExecuting: boolean) => void;
+  isTabActive: boolean;
+}
+
+// Export to expose to unit tests
+export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
+  isPreferredApiMongoDB,
+  documentIds: _documentIds,
+  collection: _collection,
+  partitionKey: _partitionKey,
+  onLoadStartKey: _onLoadStartKey,
+  tabTitle,
+  resourceTokenPartitionKey,
+  onExecutionErrorChange,
+  onIsExecutingChange,
+  isTabActive,
+}): JSX.Element => {
+  const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true);
+  const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false);
+  const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
+  const [appliedFilter, setAppliedFilter] = useState<string>("");
+  const [filterContent, setFilterContent] = useState<string>("");
+  const [documentIds, setDocumentIds] = useState<DocumentId[]>([]);
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  const filterInput = useRef<HTMLInputElement>(null);
+
+  // Query
+  const [documentsIterator, setDocumentsIterator] = useState<{
+    iterator: QueryIterator<ItemDefinition & Resource>;
+    applyFilterButtonPressed: boolean;
+  }>(undefined);
+  const [queryAbortController, setQueryAbortController] = useState<AbortController>(undefined);
+  const [cancelQueryTimeoutID, setCancelQueryTimeoutID] = useState<NodeJS.Timeout>(undefined);
+
+  const [onLoadStartKey, setOnLoadStartKey] = useState<number>(_onLoadStartKey);
+
+  const [initialDocumentContent, setInitialDocumentContent] = useState<string>(undefined);
+  const [selectedDocumentContent, setSelectedDocumentContent] = useState<string>(undefined);
+  const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined);
+
+  // Table user clicked on this row
+  const [clickedRow, setClickedRow] = useState<TableRowId>(undefined);
+  // Table multiple selection
+  const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
+
+  // Command buttons
+  const [editorState, setEditorState] = useState<ViewModels.DocumentExplorerState>(
+    ViewModels.DocumentExplorerState.noDocumentSelected,
+  );
+
+  const isQueryCopilotSampleContainer =
+    _collection?.isSampleCollection &&
+    _collection?.databaseId === QueryCopilotSampleDatabaseId &&
+    _collection?.id() === QueryCopilotSampleContainerId;
+
+  // For Mongo only
+  const [continuationToken, setContinuationToken] = useState<string>(undefined);
+
+  const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
+
+  useEffect(() => {
+    if (isFilterFocused) {
+      filterInput.current?.focus();
+    }
+  }, [isFilterFocused]);
+
+  let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
+
+  const applyFilterButton = {
+    enabled: true,
+    visible: true,
+  };
+
+  const partitionKey: DataModels.PartitionKey = useMemo(
+    () => _partitionKey || (_collection && _collection.partitionKey),
+    [_collection, _partitionKey],
+  );
+  const partitionKeyPropertyHeaders: string[] = useMemo(
+    () => _collection?.partitionKeyPropertyHeaders || partitionKey?.paths,
+    [_collection?.partitionKeyPropertyHeaders, partitionKey?.paths],
+  );
+  let partitionKeyProperties = useMemo(
+    () =>
+      partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
+        partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
+      ),
+    [partitionKeyPropertyHeaders],
+  );
+
+  // new DocumentId() requires a DocumentTab which we mock with only the required properties
+  const newDocumentId = useCallback(
+    (rawDocument: DataModels.DocumentId, partitionKeyProperties: string[], partitionKeyValue: string[]) =>
+      new DocumentId(
+        {
+          partitionKey,
+          partitionKeyProperties,
+          // Fake unused mocks
+          isEditorDirty: () => false,
+          selectDocument: () => Promise.reject(),
+        },
+        rawDocument,
+        partitionKeyValue,
+      ),
+    [partitionKey],
+  );
+
+  useEffect(() => {
+    setDocumentIds(_documentIds);
+  }, [_documentIds]);
+
+  // This is executed in onActivate() in the original code.
+  useEffect(() => {
+    setKeyboardActions({
+      [KeyboardAction.SEARCH]: () => {
+        onShowFilterClick();
+        return true;
+      },
+      [KeyboardAction.CLEAR_SEARCH]: () => {
+        setFilterContent("");
+        refreshDocumentsGrid(true);
+        return true;
+      },
+    });
+
+    if (!documentsIterator) {
+      try {
+        refreshDocumentsGrid();
+      } catch (error) {
+        if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+          TelemetryProcessor.traceFailure(
+            Action.Tab,
+            {
+              databaseName: _collection.databaseId,
+              collectionName: _collection.id(),
+
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+              error: getErrorMessage(error),
+              errorStack: getErrorStack(error),
+            },
+            onLoadStartKey,
+          );
+          setOnLoadStartKey(undefined);
+        }
+      }
+    }
+
+    updateNavbarWithTabsButtons(isTabActive, {
+      _collection,
+      selectedRows,
+      editorState,
+      isPreferredApiMongoDB,
+      onNewDocumentClick,
+      onSaveNewDocumentClick,
+      onRevertNewDocumentClick,
+      onSaveExistingDocumentClick,
+      onRevertExistingDocumentClick,
+      onDeleteExistingDocumentsClick,
+    });
+  }, []);
+
+  const isEditorDirty = useCallback((): boolean => {
+    switch (editorState) {
+      case ViewModels.DocumentExplorerState.noDocumentSelected:
+      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+        return false;
+
+      case ViewModels.DocumentExplorerState.newDocumentValid:
+      case ViewModels.DocumentExplorerState.newDocumentInvalid:
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+        return true;
+
+      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        return true;
+
+      default:
+        return false;
+    }
+  }, [editorState]);
+
+  const confirmDiscardingChange = useCallback(
+    (onDiscard: () => void, onCancelDiscard?: () => void): void => {
+      if (isEditorDirty()) {
+        useDialog
+          .getState()
+          .showOkCancelModalDialog(
+            "Unsaved changes",
+            "Your unsaved changes will be lost. Do you want to continue?",
+            "OK",
+            onDiscard,
+            "Cancel",
+            onCancelDiscard,
+          );
+      } else {
+        onDiscard();
+      }
+    },
+    [isEditorDirty],
+  );
+
+  // Update parent (tab) if isExecuting has changed
+  useEffect(() => {
+    onIsExecutingChange(isExecuting);
+  }, [onIsExecutingChange, isExecuting]);
+
+  const onNewDocumentClick = useCallback(
+    (): void => confirmDiscardingChange(() => initializeNewDocument()),
+    [confirmDiscardingChange],
+  );
+
+  const initializeNewDocument = (): void => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const newDocument: any = {
+      id: "replace_with_new_document_id",
+    };
+    partitionKeyProperties.forEach((partitionKeyProperty) => {
+      let target = newDocument;
+      const keySegments = partitionKeyProperty.split(".");
+      const finalSegment = keySegments.pop();
+
+      // Initialize nested objects as needed
+      keySegments.forEach((segment) => {
+        target = target[segment] = target[segment] || {};
+      });
+
+      target[finalSegment] = "replace_with_new_partition_key_value";
+    });
+    const defaultDocument: string = renderObjectForEditor(newDocument, null, 4);
+
+    setInitialDocumentContent(defaultDocument);
+    setSelectedDocumentContent(defaultDocument);
+    setSelectedDocumentContentBaseline(defaultDocument);
+    setSelectedRows(new Set());
+    setClickedRow(undefined);
+    setEditorState(ViewModels.DocumentExplorerState.newDocumentValid);
+  };
+
+  let onSaveNewDocumentClick = useCallback((): Promise<unknown> => {
+    onExecutionErrorChange(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle,
+    });
+    const sanitizedContent = selectedDocumentContent.replace("\n", "");
+    const document = JSON.parse(sanitizedContent);
+    setIsExecuting(true);
+    return createDocument(_collection, document)
+      .then(
+        (savedDocument: DataModels.DocumentId) => {
+          const value: string = renderObjectForEditor(savedDocument || {}, null, 4);
+          setSelectedDocumentContentBaseline(value);
+          setInitialDocumentContent(value);
+          const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
+            savedDocument,
+            partitionKey as PartitionKeyDefinition,
+          );
+          const id = newDocumentId(savedDocument, partitionKeyProperties, partitionKeyValueArray as string[]);
+          const ids = documentIds;
+          ids.push(id);
+
+          setDocumentIds(ids);
+          setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+            },
+            startKey,
+          );
+        },
+        (error) => {
+          onExecutionErrorChange(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey,
+          );
+        },
+      )
+      .then(() => setSelectedRows(new Set([documentIds.length - 1])))
+      .finally(() => setIsExecuting(false));
+  }, [
+    onExecutionErrorChange,
+    tabTitle,
+    selectedDocumentContent,
+    _collection,
+    partitionKey,
+    newDocumentId,
+    partitionKeyProperties,
+    documentIds,
+  ]);
+
+  const onRevertNewDocumentClick = useCallback((): void => {
+    setInitialDocumentContent("");
+    setSelectedDocumentContent("");
+    setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+  }, [setInitialDocumentContent, setSelectedDocumentContent, setEditorState]);
+
+  let onSaveExistingDocumentClick = useCallback((): Promise<void> => {
+    const documentContent = JSON.parse(selectedDocumentContent);
+
+    const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
+      documentContent,
+      partitionKey as PartitionKeyDefinition,
+    );
+
+    const selectedDocumentId = documentIds[clickedRow as number];
+    selectedDocumentId.partitionKeyValue = partitionKeyValueArray;
+
+    onExecutionErrorChange(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle,
+    });
+    setIsExecuting(true);
+    return updateDocument(_collection, selectedDocumentId, documentContent)
+      .then(
+        (updatedDocument: Item & { _rid: string }) => {
+          const value: string = renderObjectForEditor(updatedDocument || {}, null, 4);
+          setSelectedDocumentContentBaseline(value);
+          setInitialDocumentContent(value);
+          setSelectedDocumentContent(value);
+          documentIds.forEach((documentId: DocumentId) => {
+            if (documentId.rid === updatedDocument._rid) {
+              documentId.id(updatedDocument.id);
+            }
+          });
+          setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+            },
+            startKey,
+          );
+        },
+        (error) => {
+          onExecutionErrorChange(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle,
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey,
+          );
+        },
+      )
+      .finally(() => setIsExecuting(false));
+  }, [onExecutionErrorChange, tabTitle, selectedDocumentContent, _collection, partitionKey, documentIds, clickedRow]);
+
+  const onRevertExistingDocumentClick = useCallback((): void => {
+    setSelectedDocumentContentBaseline(initialDocumentContent);
+    setSelectedDocumentContent(selectedDocumentContentBaseline);
+  }, [initialDocumentContent, selectedDocumentContentBaseline, setSelectedDocumentContent]);
+
+  /**
+   * Implementation using bulk delete
+   */
+  let _deleteDocuments = useCallback(
+    async (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
+      onExecutionErrorChange(false);
+      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocuments, {
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle,
+      });
+      setIsExecuting(true);
+      return deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
+        .then(
+          (deletedIds) => {
+            TelemetryProcessor.traceSuccess(
+              Action.DeleteDocuments,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+              },
+              startKey,
+            );
+            return deletedIds;
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            console.error(error);
+            TelemetryProcessor.traceFailure(
+              Action.DeleteDocuments,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+                error: getErrorMessage(error),
+                errorStack: getErrorStack(error),
+              },
+              startKey,
+            );
+            throw error;
+          },
+        )
+        .finally(() => setIsExecuting(false));
+    },
+    [_collection, onExecutionErrorChange, tabTitle],
+  );
+
+  const deleteDocuments = useCallback(
+    (toDeleteDocumentIds: DocumentId[]): void => {
+      onExecutionErrorChange(false);
+      setIsExecuting(true);
+      _deleteDocuments(toDeleteDocumentIds)
+        .then(
+          (deletedIds: DocumentId[]) => {
+            const deletedRids = new Set(deletedIds.map((documentId) => documentId.rid));
+            const newDocumentIds = [...documentIds.filter((documentId) => !deletedRids.has(documentId.rid))];
+            setDocumentIds(newDocumentIds);
+
+            setSelectedDocumentContent(undefined);
+            setClickedRow(undefined);
+            setSelectedRows(new Set());
+            setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+            useDialog
+              .getState()
+              .showOkModalDialog("Delete documents", `${deletedIds.length} document(s) successfully deleted.`);
+          },
+          (error: Error) =>
+            useDialog
+              .getState()
+              .showOkModalDialog("Delete documents", `Document(s) deleted failed (${JSON.stringify(error)})`),
+        )
+        .finally(() => setIsExecuting(false));
+    },
+    [onExecutionErrorChange, _deleteDocuments, documentIds],
+  );
+
+  const onDeleteExistingDocumentsClick = useCallback(async (): Promise<void> => {
+    // TODO: Rework this for localization
+    const isPlural = selectedRows.size > 1;
+    const documentName = !isPreferredApiMongoDB
+      ? isPlural
+        ? `the selected ${selectedRows.size} items`
+        : "the selected item"
+      : isPlural
+      ? `the selected ${selectedRows.size} documents`
+      : "the selected document";
+    const msg = `Are you sure you want to delete ${documentName}?`;
+
+    useDialog
+      .getState()
+      .showOkCancelModalDialog(
+        "Confirm delete",
+        msg,
+        "Delete",
+        () => deleteDocuments(Array.from(selectedRows).map((index) => documentIds[index as number])),
+        "Cancel",
+        undefined,
+      );
+  }, [deleteDocuments, documentIds, isPreferredApiMongoDB, selectedRows]);
+
+  // If editor state changes, update the nav
+  useEffect(
+    () =>
+      updateNavbarWithTabsButtons(isTabActive, {
+        _collection,
+        selectedRows,
+        editorState,
+        isPreferredApiMongoDB,
+        onNewDocumentClick,
+        onSaveNewDocumentClick,
+        onRevertNewDocumentClick,
+        onSaveExistingDocumentClick,
+        onRevertExistingDocumentClick: onRevertExistingDocumentClick,
+        onDeleteExistingDocumentsClick: onDeleteExistingDocumentsClick,
+      }),
+    [
+      _collection,
+      selectedRows,
+      editorState,
+      isPreferredApiMongoDB,
+      onNewDocumentClick,
+      onSaveNewDocumentClick,
+      onRevertNewDocumentClick,
+      onSaveExistingDocumentClick,
+      onRevertExistingDocumentClick,
+      onDeleteExistingDocumentsClick,
+      isTabActive,
+    ],
+  );
+
+  const onShowFilterClick = () => {
+    setIsFilterCreated(true);
+    setIsFilterExpanded(true);
+    setIsFilterFocused(true);
+  };
+
+  const queryTimeoutEnabled = useCallback(
+    (): boolean => !isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
+    [isPreferredApiMongoDB],
+  );
+
+  const createIterator = useCallback((): QueryIterator<ItemDefinition & Resource> => {
+    const _queryAbortController = new AbortController();
+    setQueryAbortController(_queryAbortController);
+    const filter: string = filterContent.trim();
+    const query: string = buildQuery(isPreferredApiMongoDB, filter, partitionKeyProperties, partitionKey);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: any = {};
+    // TODO: Property 'enableCrossPartitionQuery' does not exist on type 'FeedOptions'.
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
+
+    if (resourceTokenPartitionKey) {
+      options.partitionKey = resourceTokenPartitionKey;
+    }
+    // Fixes compile error error TS2741: Property 'throwIfAborted' is missing in type 'AbortSignal' but required in type 'import("/home/runner/work/cosmos-explorer/cosmos-explorer/node_modules/node-abort-controller/index").AbortSignal'.
+    options.abortSignal = _queryAbortController.signal;
+
+    return isQueryCopilotSampleContainer
+      ? querySampleDocuments(query, options)
+      : queryDocuments(_collection.databaseId, _collection.id(), query, options);
+  }, [
+    filterContent,
+    isPreferredApiMongoDB,
+    partitionKeyProperties,
+    partitionKey,
+    resourceTokenPartitionKey,
+    isQueryCopilotSampleContainer,
+    _collection,
+  ]);
+
+  const onHideFilterClick = (): void => {
+    setIsFilterExpanded(false);
+  };
+
+  const onCloseButtonKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      onHideFilterClick();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  let loadNextPage = useCallback(
+    (iterator: QueryIterator<ItemDefinition & Resource>, applyFilterButtonClicked?: boolean): Promise<unknown> => {
+      setIsExecuting(true);
+      onExecutionErrorChange(false);
+      let automaticallyCancelQueryAfterTimeout: boolean;
+      if (applyFilterButtonClicked && queryTimeoutEnabled()) {
+        const queryTimeout: number = LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout);
+        automaticallyCancelQueryAfterTimeout = LocalStorageUtility.getEntryBoolean(
+          StorageKey.AutomaticallyCancelQueryAfterTimeout,
+        );
+        const cancelQueryTimeoutID: NodeJS.Timeout = setTimeout(() => {
+          if (isExecuting) {
+            if (automaticallyCancelQueryAfterTimeout) {
+              queryAbortController.abort();
+            } else {
+              useDialog
+                .getState()
+                .showOkCancelModalDialog(
+                  QueryConstants.CancelQueryTitle,
+                  format(QueryConstants.CancelQuerySubTextTemplate, QueryConstants.CancelQueryTimeoutThresholdReached),
+                  "Yes",
+                  () => queryAbortController.abort(),
+                  "No",
+                  undefined,
+                );
+            }
+          }
+        }, queryTimeout);
+        setCancelQueryTimeoutID(cancelQueryTimeoutID);
+      }
+      return _loadNextPageInternal(iterator)
+        .then(
+          (documentsIdsResponse = []) => {
+            const currentDocuments = documentIds;
+            const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+            const nextDocumentIds = documentsIdsResponse
+              // filter documents already loaded in observable
+              .filter((d: DataModels.DocumentId) => {
+                return currentDocumentsRids.indexOf(d._rid) < 0;
+              })
+              // map raw response to view model
+              .map((rawDocument: DataModels.DocumentId & { _partitionKeyValue: string[] }) => {
+                const partitionKeyValue = rawDocument._partitionKeyValue;
+
+                const partitionKey = _partitionKey || (_collection && _collection.partitionKey);
+                const partitionKeyPropertyHeaders = _collection?.partitionKeyPropertyHeaders || partitionKey?.paths;
+                const partitionKeyProperties = partitionKeyPropertyHeaders?.map((partitionKeyPropertyHeader) =>
+                  partitionKeyPropertyHeader.replace(/[/]+/g, ".").substring(1).replace(/[']+/g, ""),
+                );
+
+                return newDocumentId(rawDocument, partitionKeyProperties, partitionKeyValue);
+              });
+
+            const merged = currentDocuments.concat(nextDocumentIds);
+            setDocumentIds(merged);
+            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceSuccess(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            const errorMessage = getErrorMessage(error);
+            logConsoleError(errorMessage);
+            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceFailure(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: errorMessage,
+                  errorStack: getErrorStack(error),
+                },
+                onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+        )
+        .finally(() => {
+          setIsExecuting(false);
+          if (applyFilterButtonClicked && queryTimeoutEnabled()) {
+            clearTimeout(cancelQueryTimeoutID);
+            if (!automaticallyCancelQueryAfterTimeout) {
+              useDialog.getState().closeDialog();
+            }
+          }
+        });
+    },
+    [
+      onExecutionErrorChange,
+      queryTimeoutEnabled,
+      isExecuting,
+      queryAbortController,
+      documentIds,
+      onLoadStartKey,
+      _partitionKey,
+      _collection,
+      newDocumentId,
+      tabTitle,
+      cancelQueryTimeoutID,
+    ],
+  );
+
+  useEffect(() => {
+    if (documentsIterator) {
+      loadNextPage(documentsIterator.iterator, documentsIterator.applyFilterButtonPressed);
+    }
+  }, [
+    documentsIterator, // loadNextPage: disabled as it will trigger a circular dependency and infinite loop
+  ]);
+
+  const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      const focusElement = event.target as HTMLElement;
+      refreshDocumentsGrid(false);
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      const focusElement = event.target as HTMLElement;
+      loadNextPage(documentsIterator.iterator);
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  const onFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === "Enter") {
+      refreshDocumentsGrid(true);
+
+      // Suppress the default behavior of the key
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      onHideFilterClick();
+
+      // Suppress the default behavior of the key
+      e.preventDefault();
+    }
+  };
+
+  const _isQueryCopilotSampleContainer =
+    _collection?.isSampleCollection &&
+    _collection?.databaseId === QueryCopilotSampleDatabaseId &&
+    _collection?.id() === QueryCopilotSampleContainerId;
+
+  // Table config here
+  const tableItems: DocumentsTableComponentItem[] = documentIds.map((documentId) => {
+    const item: Record<string, string> & { id: string } = {
+      id: documentId.id(),
+    };
+
+    if (partitionKeyPropertyHeaders && documentId.stringPartitionKeyValues) {
+      for (let i = 0; i < partitionKeyPropertyHeaders.length; i++) {
+        item[partitionKeyPropertyHeaders[i]] = documentId.stringPartitionKeyValues[i];
+      }
+    }
+
+    return item;
+  });
+
+  /**
+   * replicate logic of selectedDocument.click();
+   * Document has been clicked on in table
+   * @param tabRowId
+   */
+  const onDocumentClicked = (tabRowId: TableRowId) => {
+    const index = tabRowId as number;
+    setClickedRow(index);
+    loadDocument(documentIds[index]);
+  };
+
+  let loadDocument = (documentId: DocumentId) =>
+    (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(_collection, documentId)).then(
+      (content) => {
+        initDocumentEditor(documentId, content);
+      },
+    );
+
+  const initDocumentEditor = (documentId: DocumentId, documentContent: unknown): void => {
+    if (documentId) {
+      const content: string = renderObjectForEditor(documentContent, null, 4);
+      setSelectedDocumentContentBaseline(content);
+      setSelectedDocumentContent(content);
+      setInitialDocumentContent(content);
+
+      const newState = documentId
+        ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
+        : ViewModels.DocumentExplorerState.newDocumentValid;
+      setEditorState(newState);
+    }
+  };
+
+  const _onEditorContentChange = (newContent: string): void => {
+    setSelectedDocumentContent(newContent);
+
+    if (
+      selectedDocumentContentBaseline === initialDocumentContent &&
+      newContent === initialDocumentContent &&
+      editorState !== ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      return;
+    }
+
+    // Mongo uses BSON format for _id, trying to parse it as JSON blocks normal flow in an edit
+    // Bypass validation for mongo
+    if (isPreferredApiMongoDB) {
+      onValidDocumentEdit();
+      return;
+    }
+
+    try {
+      JSON.parse(newContent);
+      onValidDocumentEdit();
+    } catch (e) {
+      onInvalidDocumentEdit();
+    }
+  };
+
+  const onValidDocumentEdit = (): void => {
+    if (
+      editorState === ViewModels.DocumentExplorerState.newDocumentInvalid ||
+      editorState === ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.newDocumentValid);
+      return;
+    }
+
+    setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
+  };
+
+  const onInvalidDocumentEdit = (): void => {
+    if (
+      editorState === ViewModels.DocumentExplorerState.newDocumentInvalid ||
+      editorState === ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.newDocumentInvalid);
+      return;
+    }
+
+    if (
+      editorState === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
+      editorState === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
+    ) {
+      setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
+      return;
+    }
+  };
+
+  const tableContainerRef = useRef(null);
+  const [tableContainerSizePx, setTableContainerSizePx] = useState<{ height: number; width: number }>(undefined);
+  useEffect(() => {
+    if (!tableContainerRef.current) {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(() =>
+      setTableContainerSizePx({
+        height: tableContainerRef.current.offsetHeight,
+        width: tableContainerRef.current.offsetWidth,
+      }),
+    );
+    resizeObserver.observe(tableContainerRef.current);
+    return () => resizeObserver.disconnect(); // clean up
+  }, []);
+
+  const columnHeaders = {
+    idHeader: isPreferredApiMongoDB ? "_id" : "id",
+    partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
+  };
+
+  const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
+    confirmDiscardingChange(() => {
+      if (selectedRows.size === 0) {
+        setSelectedDocumentContent(undefined);
+        setClickedRow(undefined);
+        setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+      }
+
+      // Find if clickedRow is in selectedRows.If not, clear clickedRow and content
+      if (clickedRow !== undefined && !selectedRows.has(clickedRow)) {
+        setClickedRow(undefined);
+        setSelectedDocumentContent(undefined);
+        setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+      }
+
+      // If only one selection, we consider as a click
+      if (selectedRows.size === 1) {
+        setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      }
+
+      setSelectedRows(selectedRows);
+    });
+  };
+
+  // ********* Override here for mongo (from MongoDocumentsTab) **********
+  if (isPreferredApiMongoDB) {
+    loadDocument = (documentId: DocumentId) =>
+      MongoProxyClient.readDocument(_collection.databaseId, _collection as ViewModels.Collection, documentId).then(
+        (content) => {
+          initDocumentEditor(documentId, content);
+        },
+      );
+
+    renderObjectForEditor = (value: unknown): string => MongoUtility.tojson(value, null, false);
+
+    const _hasShardKeySpecified = (document: unknown): boolean => {
+      return Boolean(extractPartitionKeyValues(document, _getPartitionKeyDefinition() as PartitionKeyDefinition));
+    };
+
+    const _getPartitionKeyDefinition = (): DataModels.PartitionKey => {
+      let partitionKey: DataModels.PartitionKey = _partitionKey;
+
+      if (
+        _partitionKey &&
+        _partitionKey.paths &&
+        _partitionKey.paths.length &&
+        _partitionKey.paths.length > 0 &&
+        _partitionKey.paths[0].indexOf("$v") > -1
+      ) {
+        // Convert BsonSchema2 to /path format
+        partitionKey = {
+          kind: partitionKey.kind,
+          paths: ["/" + partitionKeyProperties?.[0].replace(/\./g, "/")],
+          version: partitionKey.version,
+        };
+      }
+
+      return partitionKey;
+    };
+
+    lastFilterContents = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
+    partitionKeyProperties = partitionKeyProperties?.map((partitionKeyProperty, i) => {
+      if (partitionKeyProperty && ~partitionKeyProperty.indexOf(`"`)) {
+        partitionKeyProperty = partitionKeyProperty.replace(/["]+/g, "");
+      }
+
+      if (partitionKeyProperty && partitionKeyProperty.indexOf("$v") > -1) {
+        // From $v.shard.$v.key.$v > shard.key
+        partitionKeyProperty = partitionKeyProperty.replace(/.\$v/g, "").replace(/\$v./g, "");
+        partitionKeyPropertyHeaders[i] = "/" + partitionKeyProperty;
+      }
+
+      return partitionKeyProperty;
+    });
+
+    /**
+     * Mongo implementation
+     * TODO: update proxy to use mongo driver deleteMany
+     */
+    _deleteDocuments = (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
+      const promises = toDeleteDocumentIds.map((documentId) => _deleteDocument(documentId));
+      return Promise.all(promises);
+    };
+
+    const __deleteDocument = async (documentId: DocumentId): Promise<DocumentId> => {
+      await MongoProxyClient.deleteDocument(_collection.databaseId, _collection as ViewModels.Collection, documentId);
+      return documentId;
+    };
+
+    const _deleteDocument = useCallback(
+      (documentId: DocumentId): Promise<DocumentId> => {
+        onExecutionErrorChange(false);
+        const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle,
+        });
+        setIsExecuting(true);
+        return __deleteDocument(documentId)
+          .then(
+            (deletedDocumentId) => {
+              TelemetryProcessor.traceSuccess(
+                Action.DeleteDocument,
+                {
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                startKey,
+              );
+              return deletedDocumentId;
+            },
+            (error) => {
+              onExecutionErrorChange(true);
+              console.error(error);
+              TelemetryProcessor.traceFailure(
+                Action.DeleteDocument,
+                {
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: getErrorMessage(error),
+                  errorStack: getErrorStack(error),
+                },
+                startKey,
+              );
+              return undefined;
+            },
+          )
+          .finally(() => setIsExecuting(false));
+      },
+      [__deleteDocument, onExecutionErrorChange, tabTitle],
+    );
+
+    onSaveNewDocumentClick = useCallback((): Promise<unknown> => {
+      const documentContent = JSON.parse(selectedDocumentContent);
+      const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle,
+      });
+
+      const partitionKeyProperty = partitionKeyProperties?.[0];
+      if (partitionKeyProperty !== "_id" && !_hasShardKeySpecified(documentContent)) {
+        const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
+        useDialog.getState().showOkModalDialog("Create document failed", message);
+        onExecutionErrorChange(true);
+        TelemetryProcessor.traceFailure(
+          Action.CreateDocument,
+          {
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle,
+            error: message,
+          },
+          startKey,
+        );
+        Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
+        throw new Error("Document without shard key");
+      }
+
+      onExecutionErrorChange(false);
+      setIsExecuting(true);
+      return MongoProxyClient.createDocument(
+        _collection.databaseId,
+        _collection as ViewModels.Collection,
+        partitionKeyProperties?.[0],
+        documentContent,
+      )
+        .then(
+          (savedDocument: { _self: unknown }) => {
+            const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
+              savedDocument,
+              _getPartitionKeyDefinition() as PartitionKeyDefinition,
+            );
+
+            const id = new ObjectId(this, savedDocument, partitionKeyArray);
+            const ids = documentIds;
+            ids.push(id);
+            delete savedDocument._self;
+
+            const value: string = renderObjectForEditor(savedDocument || {}, null, 4);
+            setSelectedDocumentContentBaseline(value);
+
+            setDocumentIds(ids);
+            setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+            TelemetryProcessor.traceSuccess(
+              Action.CreateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+              },
+              startKey,
+            );
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            const errorMessage = getErrorMessage(error);
+            useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+            TelemetryProcessor.traceFailure(
+              Action.CreateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+                error: errorMessage,
+                errorStack: getErrorStack(error),
+              },
+              startKey,
+            );
+          },
+        )
+        .then(() => setSelectedRows(new Set([documentIds.length - 1])))
+        .finally(() => setIsExecuting(false));
+    }, [
+      selectedDocumentContent,
+      tabTitle,
+      partitionKeyProperties,
+      _hasShardKeySpecified,
+      onExecutionErrorChange,
+      _collection,
+      _getPartitionKeyDefinition,
+      documentIds,
+    ]);
+
+    onSaveExistingDocumentClick = (): Promise<void> => {
+      const documentContent = selectedDocumentContent;
+      onExecutionErrorChange(false);
+      setIsExecuting(true);
+      const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle,
+      });
+
+      const selectedDocumentId = documentIds[clickedRow as number];
+      return MongoProxyClient.updateDocument(
+        _collection.databaseId,
+        _collection as ViewModels.Collection,
+        selectedDocumentId,
+        documentContent,
+      )
+        .then(
+          (updatedDocument: { _rid: string }) => {
+            const value: string = renderObjectForEditor(updatedDocument || {}, null, 4);
+            setSelectedDocumentContentBaseline(value);
+
+            documentIds.forEach((documentId: DocumentId) => {
+              if (documentId.rid === updatedDocument._rid) {
+                const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
+                  updatedDocument,
+                  _getPartitionKeyDefinition() as PartitionKeyDefinition,
+                );
+
+                const id = new ObjectId(this, updatedDocument, partitionKeyArray);
+                documentId.id(id.id());
+              }
+            });
+            setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+            TelemetryProcessor.traceSuccess(
+              Action.UpdateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+              },
+              startKey,
+            );
+          },
+          (error) => {
+            onExecutionErrorChange(true);
+            const errorMessage = getErrorMessage(error);
+            useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+            TelemetryProcessor.traceFailure(
+              Action.UpdateDocument,
+              {
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle,
+                error: errorMessage,
+                errorStack: getErrorStack(error),
+              },
+              startKey,
+            );
+          },
+        )
+        .finally(() => setIsExecuting(false));
+    };
+
+    loadNextPage = (): Promise<unknown> => {
+      setIsExecuting(true);
+      onExecutionErrorChange(false);
+      const filter: string = filterContent.trim();
+      const query: string = buildQuery(isPreferredApiMongoDB, filter);
+
+      return MongoProxyClient.queryDocuments(
+        _collection.databaseId,
+        _collection as ViewModels.Collection,
+        true,
+        query,
+        continuationToken,
+      )
+        .then(
+          ({ continuationToken: newContinuationToken, documents }) => {
+            setContinuationToken(newContinuationToken);
+            let currentDocuments = documentIds;
+            const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+            const nextDocumentIds = documents
+              .filter((d: { _rid: string }) => {
+                return currentDocumentsRids.indexOf(d._rid) < 0;
+              })
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              .map((rawDocument: any) => {
+                const partitionKeyValue = rawDocument._partitionKeyValue;
+                return newDocumentId(rawDocument, partitionKeyProperties, [partitionKeyValue]);
+                // return new DocumentId(this, rawDocument, [partitionKeyValue]);
+              });
+
+            const merged = currentDocuments.concat(nextDocumentIds);
+
+            setDocumentIds(merged);
+            currentDocuments = merged;
+
+            if (filterContent.length > 0 && currentDocuments.length > 0) {
+              currentDocuments[0].click();
+            } else {
+              setSelectedDocumentContent("");
+              setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+            }
+            if (_onLoadStartKey !== null && _onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceSuccess(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                },
+                _onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (error: any) => {
+            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+              TelemetryProcessor.traceFailure(
+                Action.Tab,
+                {
+                  databaseName: _collection.databaseId,
+                  collectionName: _collection.id(),
+
+                  dataExplorerArea: Constants.Areas.Tab,
+                  tabTitle,
+                  error: getErrorMessage(error),
+                  errorStack: getErrorStack(error),
+                },
+                _onLoadStartKey,
+              );
+              setOnLoadStartKey(undefined);
+            }
+          },
+        )
+        .finally(() => setIsExecuting(false));
+    };
+  }
+  // ***************** Mongo ***************************
+
+  const refreshDocumentsGrid = useCallback(
+    async (applyFilterButtonPressed?: boolean): Promise<void> => {
+      // clear documents grid
+      setDocumentIds([]);
+      try {
+        // reset iterator which will autoload documents (in useEffect)
+        setDocumentsIterator({
+          iterator: createIterator(),
+          applyFilterButtonPressed,
+        });
+
+        // collapse filter
+        setAppliedFilter(filterContent);
+        setIsFilterExpanded(false);
+      } catch (error) {
+        console.error(error);
+        useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
+      }
+    },
+    [createIterator, filterContent],
+  );
+
+  return (
+    <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
+      <div className="tab-pane active documentsTab" role="tabpanel" style={{ display: "flex" }}>
+        {isFilterCreated && (
+          <div className="filterdivs">
+            {!isFilterExpanded && !isPreferredApiMongoDB && (
+              <div className="filterDocCollapsed">
+                <span className="selectQuery">SELECT * FROM c</span>
+                <span className="appliedQuery">{appliedFilter}</span>
+                <Button appearance="primary" onClick={onShowFilterClick} style={filterButtonStyle}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {!isFilterExpanded && isPreferredApiMongoDB && (
+              <div className="filterDocCollapsed">
+                {appliedFilter.length > 0 && <span className="selectQuery">Filter :</span>}
+                {!(appliedFilter.length > 0) && <span className="noFilterApplied">No filter applied</span>}
+                <span className="appliedQuery">{appliedFilter}</span>
+                <Button style={filterButtonStyle} appearance="primary" onClick={onShowFilterClick}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {isFilterExpanded && (
+              <div className="filterDocExpanded">
+                <div>
+                  <div className="editFilterContainer">
+                    {!isPreferredApiMongoDB && <span className="filterspan"> SELECT * FROM c </span>}
+                    <Input
+                      id="filterInput"
+                      ref={filterInput}
+                      type="text"
+                      list="filtersList"
+                      className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`}
+                      style={{ width: "100%" }}
+                      title="Type a query predicate or choose one from the list."
+                      placeholder={
+                        isPreferredApiMongoDB
+                          ? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
+                          : "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
+                      }
+                      value={filterContent}
+                      autoFocus={true}
+                      onKeyDown={onFilterKeyDown}
+                      onChange={(e) => setFilterContent(e.target.value)}
+                      onBlur={() => setIsFilterFocused(false)}
+                    />
+
+                    <datalist id="filtersList">
+                      {lastFilterContents.map((filter) => (
+                        <option key={filter} value={filter} />
+                      ))}
+                    </datalist>
+
+                    <span className="filterbuttonpad">
+                      <Button
+                        appearance="primary"
+                        style={filterButtonStyle}
+                        onClick={() => refreshDocumentsGrid(true)}
+                        disabled={!applyFilterButton.enabled}
+                        aria-label="Apply filter"
+                        tabIndex={0}
+                      >
+                        Apply Filter
+                      </Button>
+                    </span>
+                    <span className="filterbuttonpad">
+                      {!isPreferredApiMongoDB && isExecuting && (
+                        <Button
+                          style={filterButtonStyle}
+                          appearance="primary"
+                          aria-label="Cancel Query"
+                          onClick={() => queryAbortController.abort()}
+                          tabIndex={0}
+                        >
+                          Cancel Query
+                        </Button>
+                      )}
+                    </span>
+                    <Button
+                      aria-label="close filter"
+                      tabIndex={0}
+                      onClick={onHideFilterClick}
+                      onKeyDown={onCloseButtonKeyDown}
+                      appearance="transparent"
+                      icon={<Dismiss16Filled />}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {/* <Split> doesn't like to be a flex child */}
+        <div style={{ overflow: "hidden", height: "100%" }}>
+          <Split>
+            <div
+              style={{ minWidth: 120, width: "35%", overflow: "hidden", position: "relative" }}
+              ref={tableContainerRef}
+            >
+              <Button
+                appearance="transparent"
+                aria-label="Refresh"
+                size="small"
+                icon={<ArrowClockwise16Filled />}
+                style={{
+                  position: "absolute",
+                  top: 6,
+                  right: 0,
+                  float: "right",
+                  backgroundColor: "white",
+                  zIndex: 1,
+                  color: StyleConstants.AccentMedium,
+                }}
+                onClick={() => refreshDocumentsGrid(false)}
+                onKeyDown={onRefreshKeyInput}
+              />
+              <div
+                style={
+                  {
+                    height: "100%",
+                    width: "calc(100% - 50px)",
+                  } /* Fix to make table not resize beyond parent's width */
+                }
+              >
+                <DocumentsTableComponent
+                  items={tableItems}
+                  onItemClicked={onDocumentClicked}
+                  onSelectedRowsChange={onSelectedRowsChange}
+                  selectedRows={selectedRows}
+                  size={tableContainerSizePx}
+                  columnHeaders={columnHeaders}
+                />
+                {tableItems.length > 0 && (
+                  <a
+                    className="loadMore"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => loadNextPage(documentsIterator.iterator, false)}
+                    onKeyDown={onLoadMoreKeyInput}
+                  >
+                    Load more
+                  </a>
+                )}
+              </div>
+            </div>
+            <div style={{ minWidth: "20%", width: "100%" }}>
+              {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
+                <EditorReact
+                  language={"json"}
+                  content={selectedDocumentContent}
+                  isReadOnly={false}
+                  ariaLabel={"Document editor"}
+                  lineNumbers={"on"}
+                  theme={"_theme"}
+                  onContentChanged={_onEditorContentChange}
+                />
+              )}
+              {selectedRows.size > 1 && (
+                <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
+              )}
+            </div>
+          </Split>
+        </div>
+      </div>
+    </FluentProvider>
+  );
+};
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx
new file mode 100644
index 000000000..79d5e2343
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx
@@ -0,0 +1,195 @@
+import { deleteDocument } from "Common/MongoProxyClient";
+import { Platform, updateConfigContext } from "ConfigContext";
+import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import {
+  DELETE_BUTTON_ID,
+  DISCARD_BUTTON_ID,
+  DocumentsTabComponent,
+  IDocumentsTabComponentProps,
+  NEW_DOCUMENT_BUTTON_ID,
+  SAVE_BUTTON_ID,
+  UPDATE_BUTTON_ID,
+  buildQuery,
+} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import { ReactWrapper, ShallowWrapper, mount } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import Explorer from "../../Explorer";
+
+jest.requireActual("Explorer/Controls/Editor/EditorReact");
+
+const PROPERTY_VALUE = "__SOME_PROPERTY_VALUE__";
+
+jest.mock("Common/MongoProxyClient", () => ({
+  queryDocuments: jest.fn(() =>
+    Promise.resolve({
+      continuationToken: "",
+      documents: [
+        {
+          _rid: "_rid",
+          _self: "_self",
+          _etag: "etag",
+          _ts: 1234,
+          id: "id",
+        },
+      ],
+      headers: {},
+    }),
+  ),
+  readDocument: jest.fn(() =>
+    Promise.resolve({
+      _rid: "_rid1",
+      _self: "_self1",
+      _etag: "etag1",
+      property: PROPERTY_VALUE,
+      _ts: 5678,
+      id: "id1",
+    }),
+  ),
+  deleteDocument: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
+  EditorReact: (props: EditorReactProps) => <>{props.content}</>,
+}));
+
+jest.mock("Explorer/Controls/Dialog", () => ({
+  useDialog: {
+    getState: jest.fn(() => ({
+      showOkCancelModalDialog: (title: string, subText: string, okLabel: string, onOk: () => void) => onOk(),
+      showOkModalDialog: () => {},
+    })),
+  },
+}));
+
+async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | ShallowWrapper<P>, amount = 0) {
+  let newWrapper;
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, amount));
+    newWrapper = wrapper.update();
+  });
+  return newWrapper;
+}
+
+describe("Documents tab (Mongo API)", () => {
+  describe("buildQuery", () => {
+    it("should generate the right select query for SQL API", () => {
+      expect(buildQuery(true, "")).toContain("{}");
+    });
+  });
+
+  describe("Command bar buttons", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: true,
+      documentIds: [],
+      collection: {
+        id: ko.observable<string>("foo"),
+        container: new Explorer(),
+        partitionKey: {
+          kind: "Hash",
+          paths: ["/pkey"],
+          version: 2,
+        },
+        partitionKeyProperties: ["pkey"],
+        partitionKeyPropertyHeaders: ["/pkey"],
+        databaseId: "databaseId",
+        self: "self",
+        rawDataModel: undefined,
+        selectedSubnodeKind: undefined,
+        children: undefined,
+        isCollectionExpanded: undefined,
+        onDocumentDBDocumentsClick: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        onNewQueryClick: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        expandCollection: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        collapseCollection: (): void => {
+          throw new Error("Function not implemented.");
+        },
+        getDatabase: (): ViewModels.Database => {
+          throw new Error("Function not implemented.");
+        },
+        nodeKind: "nodeKind",
+        rid: "rid",
+      },
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ReactWrapper;
+
+    beforeEach(async () => {
+      updateConfigContext({ platform: Platform.Hosted });
+
+      const props: IDocumentsTabComponentProps = createMockProps();
+
+      wrapper = mount(<DocumentsTabComponent {...props} />);
+      wrapper = await waitForComponentToPaint(wrapper);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("renders by default the first document", async () => {
+      expect(wrapper.findWhere((node) => node.text().includes(PROPERTY_VALUE)).exists()).toBeTruthy();
+    });
+
+    it("default buttons", async () => {
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPDATE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DELETE_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking on New Document should show editor with new document", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+      expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy();
+    });
+
+    it("clicking on New Document should show Save and Discard buttons", () => {
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined();
+      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
+    });
+
+    it("clicking Delete Document asks for confirmation", () => {
+      const mockDeleteDocument = deleteDocument as jest.Mock;
+      mockDeleteDocument.mockClear();
+
+      act(() => {
+        useCommandBar
+          .getState()
+          .contextButtons.find((button) => button.id === DELETE_BUTTON_ID)
+          .onCommandClick(undefined);
+      });
+
+      expect(mockDeleteDocument).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
new file mode 100644
index 000000000..e20084648
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
@@ -0,0 +1,34 @@
+import { TableRowId } from "@fluentui/react-components";
+import { mount } from "enzyme";
+import React from "react";
+import { DocumentsTableComponent, IDocumentsTableComponentProps } from "./DocumentsTableComponent";
+
+const PARTITION_KEY_HEADER = "partitionKey";
+const ID_HEADER = "id";
+
+describe("DocumentsTableComponent", () => {
+  const createMockProps = (): IDocumentsTableComponentProps => ({
+    items: [
+      { [ID_HEADER]: "1", [PARTITION_KEY_HEADER]: "pk1" },
+      { [ID_HEADER]: "2", [PARTITION_KEY_HEADER]: "pk2" },
+      { [ID_HEADER]: "3", [PARTITION_KEY_HEADER]: "pk3" },
+    ],
+    onItemClicked: (): void => {},
+    onSelectedRowsChange: (): void => {},
+    selectedRows: new Set<TableRowId>(),
+    size: {
+      height: 0,
+      width: 0,
+    },
+    columnHeaders: {
+      idHeader: ID_HEADER,
+      partitionKeyHeaders: [PARTITION_KEY_HEADER],
+    },
+  });
+
+  it("should render documents and partition keys in header", () => {
+    const props: IDocumentsTableComponentProps = createMockProps();
+    const wrapper = mount(<DocumentsTableComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
new file mode 100644
index 000000000..4089b12bd
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -0,0 +1,271 @@
+import {
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  TableRowData as RowStateBase,
+  Table,
+  TableBody,
+  TableCell,
+  TableCellLayout,
+  TableColumnDefinition,
+  TableColumnSizingOptions,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  TableRowId,
+  TableSelectionCell,
+  createTableColumn,
+  useArrowNavigationGroup,
+  useTableColumnSizing_unstable,
+  useTableFeatures,
+  useTableSelection,
+} from "@fluentui/react-components";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { FixedSizeList as List, ListChildComponentProps } from "react-window";
+
+export type DocumentsTableComponentItem = {
+  id: string;
+} & Record<string, string>;
+
+export type ColumnHeaders = {
+  idHeader: string;
+  partitionKeyHeaders: string[];
+};
+export interface IDocumentsTableComponentProps {
+  items: DocumentsTableComponentItem[];
+  onItemClicked: (index: number) => void;
+  onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
+  selectedRows: Set<TableRowId>;
+  size: { height: number; width: number };
+  columnHeaders: ColumnHeaders;
+  style?: React.CSSProperties;
+}
+
+interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
+  onClick: (e: React.MouseEvent) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  selected: boolean;
+  appearance: "brand" | "none";
+}
+interface ReactWindowRenderFnProps extends ListChildComponentProps {
+  data: TableRowData[];
+}
+
+export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
+  items,
+  onItemClicked,
+  onSelectedRowsChange,
+  selectedRows,
+  style,
+  size,
+  columnHeaders,
+}: IDocumentsTableComponentProps) => {
+  const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
+
+  const initialSizingOptions: TableColumnSizingOptions = {
+    id: {
+      idealWidth: 280,
+      minWidth: 50,
+    },
+  };
+  columnHeaders.partitionKeyHeaders.forEach((pkHeader) => {
+    initialSizingOptions[pkHeader] = {
+      idealWidth: 200,
+      minWidth: 50,
+    };
+  });
+
+  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(initialSizingOptions);
+
+  const onColumnResize = React.useCallback((_, { columnId, width }) => {
+    setColumnSizingOptions((state) => ({
+      ...state,
+      [columnId]: {
+        ...state[columnId],
+        idealWidth: width,
+      },
+    }));
+  }, []);
+
+  // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
+  const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo(
+    () =>
+      [
+        createTableColumn<DocumentsTableComponentItem>({
+          columnId: "id",
+          compare: (a, b) => a.id.localeCompare(b.id),
+          renderHeaderCell: () => columnHeaders.idHeader,
+          renderCell: (item) => (
+            <TableCellLayout truncate title={item.id}>
+              {item.id}
+            </TableCellLayout>
+          ),
+        }),
+      ].concat(
+        columnHeaders.partitionKeyHeaders.map((pkHeader) =>
+          createTableColumn<DocumentsTableComponentItem>({
+            columnId: pkHeader,
+            compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]),
+            // Show Refresh button on last column
+            renderHeaderCell: () => <span title={pkHeader}>{pkHeader}</span>,
+            renderCell: (item) => (
+              <TableCellLayout truncate title={item[pkHeader]}>
+                {item[pkHeader]}
+              </TableCellLayout>
+            ),
+          }),
+        ),
+      ),
+    [columnHeaders],
+  );
+
+  const onIdClicked = useCallback((index: number) => onSelectedRowsChange(new Set([index])), [onSelectedRowsChange]);
+
+  const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
+    const { item, selected, appearance, onClick, onKeyDown } = data[index];
+    return (
+      <TableRow aria-rowindex={index + 2} style={style} key={item.id} aria-selected={selected} appearance={appearance}>
+        <TableSelectionCell
+          checked={selected}
+          checkboxIndicator={{ "aria-label": "Select row" }}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+        />
+        {columns.map((column) => (
+          <TableCell
+            key={column.columnId}
+            className="documentsTableCell"
+            onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
+            onKeyDown={() => onIdClicked(index)}
+            {...columnSizing.getTableCellProps(column.columnId)}
+            tabIndex={column.columnId === "id" ? 0 : -1}
+          >
+            {column.renderCell(item)}
+          </TableCell>
+        ))}
+      </TableRow>
+    );
+  };
+
+  const {
+    getRows,
+    columnSizing_unstable: columnSizing,
+    tableRef,
+    selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
+  } = useTableFeatures(
+    {
+      columns,
+      items,
+    },
+    [
+      useTableColumnSizing_unstable({ columnSizingOptions, onColumnResize }),
+      useTableSelection({
+        selectionMode: "multiselect",
+        selectedItems: selectedRows,
+        // eslint-disable-next-line react/prop-types
+        onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
+      }),
+    ],
+  );
+
+  const rows: TableRowData[] = getRows((row) => {
+    const selected = isRowSelected(row.rowId);
+    return {
+      ...row,
+      onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
+      onKeyDown: (e: React.KeyboardEvent) => {
+        if (e.key === " ") {
+          e.preventDefault();
+          toggleRow(e, row.rowId);
+        }
+      },
+      selected,
+      appearance: selected ? ("brand" as const) : ("none" as const),
+    };
+  });
+
+  const toggleAllKeydown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === " ") {
+        toggleAllRows(e);
+        e.preventDefault();
+      }
+    },
+    [toggleAllRows],
+  );
+
+  // Load document depending on selection
+  useEffect(() => {
+    if (selectedRows.size === 1 && items.length > 0) {
+      const newActiveItemIndex = selectedRows.values().next().value;
+      if (newActiveItemIndex !== activeItemIndex) {
+        onItemClicked(newActiveItemIndex);
+        setActiveItemIndex(newActiveItemIndex);
+      }
+    }
+  }, [selectedRows, items]);
+
+  // Cell keyboard navigation
+  const keyboardNavAttr = useArrowNavigationGroup({ axis: "grid" });
+
+  // TODO: Bug in fluent UI typings that requires any here
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const tableProps: any = {
+    "aria-label": "Filtered documents table",
+    role: "grid",
+    ...columnSizing.getTableProps(),
+    ...keyboardNavAttr,
+    size: "extra-small",
+    ref: tableRef,
+    ...style,
+  };
+
+  return (
+    <Table className="documentsTable" noNativeElements {...tableProps}>
+      <TableHeader className="documentsTableHeader">
+        <TableRow style={{ width: size ? size.width - 15 : "100%" }}>
+          <TableSelectionCell
+            checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
+            onClick={toggleAllRows}
+            onKeyDown={toggleAllKeydown}
+            checkboxIndicator={{ "aria-label": "Select all rows " }}
+          />
+          {columns.map((column /* index */) => (
+            <Menu openOnContext key={column.columnId}>
+              <MenuTrigger>
+                <TableHeaderCell
+                  className="documentsTableCell"
+                  key={column.columnId}
+                  {...columnSizing.getTableHeaderCellProps(column.columnId)}
+                >
+                  {column.renderHeaderCell()}
+                </TableHeaderCell>
+              </MenuTrigger>
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
+                    Keyboard Column Resizing
+                  </MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <List
+          height={size !== undefined ? size.height - 32 /* table header */ - 21 /* load more */ : 0}
+          itemCount={items.length}
+          itemSize={30}
+          width={size ? size.width : 0}
+          itemData={rows}
+          style={{ overflowY: "scroll" }}
+        >
+          {RenderRow}
+        </List>
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
new file mode 100644
index 000000000..0b4c7578e
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
@@ -0,0 +1,558 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
+<FluentProvider
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  theme={
+    Object {
+      "borderRadiusCircular": "10000px",
+      "borderRadiusLarge": "6px",
+      "borderRadiusMedium": "4px",
+      "borderRadiusNone": "0",
+      "borderRadiusSmall": "2px",
+      "borderRadiusXLarge": "8px",
+      "colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)",
+      "colorBrandBackground": "#117865",
+      "colorBrandBackground2": "#e3f7ef",
+      "colorBrandBackground2Hover": "#c0ecdd",
+      "colorBrandBackground2Pressed": "#78d3b9",
+      "colorBrandBackgroundHover": "#0c695a",
+      "colorBrandBackgroundInverted": "#ffffff",
+      "colorBrandBackgroundInvertedHover": "#e3f7ef",
+      "colorBrandBackgroundInvertedPressed": "#9ee0cb",
+      "colorBrandBackgroundInvertedSelected": "#c0ecdd",
+      "colorBrandBackgroundPressed": "#033f38",
+      "colorBrandBackgroundSelected": "#0a5c50",
+      "colorBrandBackgroundStatic": "#117865",
+      "colorBrandForeground1": "#117865",
+      "colorBrandForeground2": "#0c695a",
+      "colorBrandForeground2Hover": "#0a5c50",
+      "colorBrandForeground2Pressed": "#01322E",
+      "colorBrandForegroundInverted": "#2aaC94",
+      "colorBrandForegroundInvertedHover": "#3abb9f",
+      "colorBrandForegroundInvertedPressed": "#2aaC94",
+      "colorBrandForegroundLink": "#0c695a",
+      "colorBrandForegroundLinkHover": "#0a5c50",
+      "colorBrandForegroundLinkPressed": "#033f38",
+      "colorBrandForegroundLinkSelected": "#0c695a",
+      "colorBrandForegroundOnLight": "#117865",
+      "colorBrandForegroundOnLightHover": "#0c695a",
+      "colorBrandForegroundOnLightPressed": "#054d43",
+      "colorBrandForegroundOnLightSelected": "#0a5c50",
+      "colorBrandShadowAmbient": "rgba(0,0,0,0.30)",
+      "colorBrandShadowKey": "rgba(0,0,0,0.25)",
+      "colorBrandStroke1": "#117865",
+      "colorBrandStroke2": "#9ee0cb",
+      "colorBrandStroke2Contrast": "#9ee0cb",
+      "colorBrandStroke2Hover": "#52c7aa",
+      "colorBrandStroke2Pressed": "#117865",
+      "colorCompoundBrandBackground": "#117865",
+      "colorCompoundBrandBackgroundHover": "#0c695a",
+      "colorCompoundBrandBackgroundPressed": "#0a5c50",
+      "colorCompoundBrandForeground1": "#117865",
+      "colorCompoundBrandForeground1Hover": "#0c695a",
+      "colorCompoundBrandForeground1Pressed": "#0a5c50",
+      "colorCompoundBrandStroke": "#117865",
+      "colorCompoundBrandStrokeHover": "#0c695a",
+      "colorCompoundBrandStrokePressed": "#0a5c50",
+      "colorNeutralBackground1": "#ffffff",
+      "colorNeutralBackground1Hover": "#f5f5f5",
+      "colorNeutralBackground1Pressed": "#e0e0e0",
+      "colorNeutralBackground1Selected": "#ebebeb",
+      "colorNeutralBackground2": "#fafafa",
+      "colorNeutralBackground2Hover": "#f0f0f0",
+      "colorNeutralBackground2Pressed": "#dbdbdb",
+      "colorNeutralBackground2Selected": "#e6e6e6",
+      "colorNeutralBackground3": "#f5f5f5",
+      "colorNeutralBackground3Hover": "#ebebeb",
+      "colorNeutralBackground3Pressed": "#d6d6d6",
+      "colorNeutralBackground3Selected": "#e0e0e0",
+      "colorNeutralBackground4": "#f0f0f0",
+      "colorNeutralBackground4Hover": "#fafafa",
+      "colorNeutralBackground4Pressed": "#f5f5f5",
+      "colorNeutralBackground4Selected": "#ffffff",
+      "colorNeutralBackground5": "#ebebeb",
+      "colorNeutralBackground5Hover": "#f5f5f5",
+      "colorNeutralBackground5Pressed": "#f0f0f0",
+      "colorNeutralBackground5Selected": "#fafafa",
+      "colorNeutralBackground6": "#e6e6e6",
+      "colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)",
+      "colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)",
+      "colorNeutralBackgroundDisabled": "#f0f0f0",
+      "colorNeutralBackgroundInverted": "#292929",
+      "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)",
+      "colorNeutralBackgroundStatic": "#333333",
+      "colorNeutralForeground1": "#242424",
+      "colorNeutralForeground1Hover": "#242424",
+      "colorNeutralForeground1Pressed": "#242424",
+      "colorNeutralForeground1Selected": "#242424",
+      "colorNeutralForeground1Static": "#242424",
+      "colorNeutralForeground2": "#424242",
+      "colorNeutralForeground2BrandHover": "#117865",
+      "colorNeutralForeground2BrandPressed": "#0c695a",
+      "colorNeutralForeground2BrandSelected": "#117865",
+      "colorNeutralForeground2Hover": "#242424",
+      "colorNeutralForeground2Link": "#424242",
+      "colorNeutralForeground2LinkHover": "#242424",
+      "colorNeutralForeground2LinkPressed": "#242424",
+      "colorNeutralForeground2LinkSelected": "#242424",
+      "colorNeutralForeground2Pressed": "#242424",
+      "colorNeutralForeground2Selected": "#242424",
+      "colorNeutralForeground3": "#616161",
+      "colorNeutralForeground3BrandHover": "#117865",
+      "colorNeutralForeground3BrandPressed": "#0c695a",
+      "colorNeutralForeground3BrandSelected": "#117865",
+      "colorNeutralForeground3Hover": "#424242",
+      "colorNeutralForeground3Pressed": "#424242",
+      "colorNeutralForeground3Selected": "#424242",
+      "colorNeutralForeground4": "#707070",
+      "colorNeutralForegroundDisabled": "#bdbdbd",
+      "colorNeutralForegroundInverted": "#ffffff",
+      "colorNeutralForegroundInverted2": "#ffffff",
+      "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)",
+      "colorNeutralForegroundInvertedHover": "#ffffff",
+      "colorNeutralForegroundInvertedLink": "#ffffff",
+      "colorNeutralForegroundInvertedLinkHover": "#ffffff",
+      "colorNeutralForegroundInvertedLinkPressed": "#ffffff",
+      "colorNeutralForegroundInvertedLinkSelected": "#ffffff",
+      "colorNeutralForegroundInvertedPressed": "#ffffff",
+      "colorNeutralForegroundInvertedSelected": "#ffffff",
+      "colorNeutralForegroundOnBrand": "#ffffff",
+      "colorNeutralForegroundStaticInverted": "#ffffff",
+      "colorNeutralShadowAmbient": "rgba(0,0,0,0.12)",
+      "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)",
+      "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)",
+      "colorNeutralShadowKey": "rgba(0,0,0,0.14)",
+      "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)",
+      "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)",
+      "colorNeutralStencil1": "#e6e6e6",
+      "colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)",
+      "colorNeutralStencil2": "#fafafa",
+      "colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)",
+      "colorNeutralStroke1": "#d1d1d1",
+      "colorNeutralStroke1Hover": "#c7c7c7",
+      "colorNeutralStroke1Pressed": "#b3b3b3",
+      "colorNeutralStroke1Selected": "#bdbdbd",
+      "colorNeutralStroke2": "#e0e0e0",
+      "colorNeutralStroke3": "#f0f0f0",
+      "colorNeutralStrokeAccessible": "#616161",
+      "colorNeutralStrokeAccessibleHover": "#575757",
+      "colorNeutralStrokeAccessiblePressed": "#4d4d4d",
+      "colorNeutralStrokeAccessibleSelected": "#117865",
+      "colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)",
+      "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)",
+      "colorNeutralStrokeDisabled": "#e0e0e0",
+      "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)",
+      "colorNeutralStrokeOnBrand": "#ffffff",
+      "colorNeutralStrokeOnBrand2": "#ffffff",
+      "colorNeutralStrokeOnBrand2Hover": "#ffffff",
+      "colorNeutralStrokeOnBrand2Pressed": "#ffffff",
+      "colorNeutralStrokeOnBrand2Selected": "#ffffff",
+      "colorNeutralStrokeSubtle": "#e0e0e0",
+      "colorPaletteAnchorBackground2": "#bcc3c7",
+      "colorPaletteAnchorBorderActive": "#394146",
+      "colorPaletteAnchorForeground2": "#202427",
+      "colorPaletteBeigeBackground2": "#d7d4d4",
+      "colorPaletteBeigeBorderActive": "#7a7574",
+      "colorPaletteBeigeForeground2": "#444241",
+      "colorPaletteBerryBackground1": "#fdf5fc",
+      "colorPaletteBerryBackground2": "#edbbe7",
+      "colorPaletteBerryBackground3": "#c239b3",
+      "colorPaletteBerryBorder1": "#edbbe7",
+      "colorPaletteBerryBorder2": "#c239b3",
+      "colorPaletteBerryBorderActive": "#c239b3",
+      "colorPaletteBerryForeground1": "#af33a1",
+      "colorPaletteBerryForeground2": "#6d2064",
+      "colorPaletteBerryForeground3": "#c239b3",
+      "colorPaletteBlueBackground2": "#a9d3f2",
+      "colorPaletteBlueBorderActive": "#0078d4",
+      "colorPaletteBlueForeground2": "#004377",
+      "colorPaletteBrassBackground2": "#e0cea2",
+      "colorPaletteBrassBorderActive": "#986f0b",
+      "colorPaletteBrassForeground2": "#553e06",
+      "colorPaletteBrownBackground2": "#ddc3b0",
+      "colorPaletteBrownBorderActive": "#8e562e",
+      "colorPaletteBrownForeground2": "#50301a",
+      "colorPaletteCornflowerBackground2": "#c8d1fa",
+      "colorPaletteCornflowerBorderActive": "#4f6bed",
+      "colorPaletteCornflowerForeground2": "#2c3c85",
+      "colorPaletteCranberryBackground2": "#eeacb2",
+      "colorPaletteCranberryBorderActive": "#c50f1f",
+      "colorPaletteCranberryForeground2": "#6e0811",
+      "colorPaletteDarkGreenBackground2": "#9ad29a",
+      "colorPaletteDarkGreenBorderActive": "#0b6a0b",
+      "colorPaletteDarkGreenForeground2": "#063b06",
+      "colorPaletteDarkOrangeBackground1": "#fdf6f3",
+      "colorPaletteDarkOrangeBackground2": "#f4bfab",
+      "colorPaletteDarkOrangeBackground3": "#da3b01",
+      "colorPaletteDarkOrangeBorder1": "#f4bfab",
+      "colorPaletteDarkOrangeBorder2": "#da3b01",
+      "colorPaletteDarkOrangeBorderActive": "#da3b01",
+      "colorPaletteDarkOrangeForeground1": "#c43501",
+      "colorPaletteDarkOrangeForeground2": "#7a2101",
+      "colorPaletteDarkOrangeForeground3": "#da3b01",
+      "colorPaletteDarkRedBackground2": "#d69ca5",
+      "colorPaletteDarkRedBorderActive": "#750b1c",
+      "colorPaletteDarkRedForeground2": "#420610",
+      "colorPaletteForestBackground2": "#bdd99b",
+      "colorPaletteForestBorderActive": "#498205",
+      "colorPaletteForestForeground2": "#294903",
+      "colorPaletteGoldBackground2": "#ecdfa5",
+      "colorPaletteGoldBorderActive": "#c19c00",
+      "colorPaletteGoldForeground2": "#6c5700",
+      "colorPaletteGrapeBackground2": "#d9a7e0",
+      "colorPaletteGrapeBorderActive": "#881798",
+      "colorPaletteGrapeForeground2": "#4c0d55",
+      "colorPaletteGreenBackground1": "#f1faf1",
+      "colorPaletteGreenBackground2": "#9fd89f",
+      "colorPaletteGreenBackground3": "#107c10",
+      "colorPaletteGreenBorder1": "#9fd89f",
+      "colorPaletteGreenBorder2": "#107c10",
+      "colorPaletteGreenBorderActive": "#107c10",
+      "colorPaletteGreenForeground1": "#0e700e",
+      "colorPaletteGreenForeground2": "#094509",
+      "colorPaletteGreenForeground3": "#107c10",
+      "colorPaletteGreenForegroundInverted": "#359b35",
+      "colorPaletteLavenderBackground2": "#d2ccf8",
+      "colorPaletteLavenderBorderActive": "#7160e8",
+      "colorPaletteLavenderForeground2": "#3f3682",
+      "colorPaletteLightGreenBackground1": "#f2fbf2",
+      "colorPaletteLightGreenBackground2": "#a7e3a5",
+      "colorPaletteLightGreenBackground3": "#13a10e",
+      "colorPaletteLightGreenBorder1": "#a7e3a5",
+      "colorPaletteLightGreenBorder2": "#13a10e",
+      "colorPaletteLightGreenBorderActive": "#13a10e",
+      "colorPaletteLightGreenForeground1": "#11910d",
+      "colorPaletteLightGreenForeground2": "#0b5a08",
+      "colorPaletteLightGreenForeground3": "#13a10e",
+      "colorPaletteLightTealBackground2": "#a6e9ed",
+      "colorPaletteLightTealBorderActive": "#00b7c3",
+      "colorPaletteLightTealForeground2": "#00666d",
+      "colorPaletteLilacBackground2": "#e6bfed",
+      "colorPaletteLilacBorderActive": "#b146c2",
+      "colorPaletteLilacForeground2": "#63276d",
+      "colorPaletteMagentaBackground2": "#eca5d1",
+      "colorPaletteMagentaBorderActive": "#bf0077",
+      "colorPaletteMagentaForeground2": "#6b0043",
+      "colorPaletteMarigoldBackground1": "#fefbf4",
+      "colorPaletteMarigoldBackground2": "#f9e2ae",
+      "colorPaletteMarigoldBackground3": "#eaa300",
+      "colorPaletteMarigoldBorder1": "#f9e2ae",
+      "colorPaletteMarigoldBorder2": "#eaa300",
+      "colorPaletteMarigoldBorderActive": "#eaa300",
+      "colorPaletteMarigoldForeground1": "#d39300",
+      "colorPaletteMarigoldForeground2": "#835b00",
+      "colorPaletteMarigoldForeground3": "#eaa300",
+      "colorPaletteMinkBackground2": "#cecccb",
+      "colorPaletteMinkBorderActive": "#5d5a58",
+      "colorPaletteMinkForeground2": "#343231",
+      "colorPaletteNavyBackground2": "#a3b2e8",
+      "colorPaletteNavyBorderActive": "#0027b4",
+      "colorPaletteNavyForeground2": "#001665",
+      "colorPalettePeachBackground2": "#ffddb3",
+      "colorPalettePeachBorderActive": "#ff8c00",
+      "colorPalettePeachForeground2": "#8f4e00",
+      "colorPalettePinkBackground2": "#f7c0e3",
+      "colorPalettePinkBorderActive": "#e43ba6",
+      "colorPalettePinkForeground2": "#80215d",
+      "colorPalettePlatinumBackground2": "#cdd6d8",
+      "colorPalettePlatinumBorderActive": "#69797e",
+      "colorPalettePlatinumForeground2": "#3b4447",
+      "colorPalettePlumBackground2": "#d696c0",
+      "colorPalettePlumBorderActive": "#77004d",
+      "colorPalettePlumForeground2": "#43002b",
+      "colorPalettePumpkinBackground2": "#efc4ad",
+      "colorPalettePumpkinBorderActive": "#ca5010",
+      "colorPalettePumpkinForeground2": "#712d09",
+      "colorPalettePurpleBackground2": "#c6b1de",
+      "colorPalettePurpleBorderActive": "#5c2e91",
+      "colorPalettePurpleForeground2": "#341a51",
+      "colorPaletteRedBackground1": "#fdf6f6",
+      "colorPaletteRedBackground2": "#f1bbbc",
+      "colorPaletteRedBackground3": "#d13438",
+      "colorPaletteRedBorder1": "#f1bbbc",
+      "colorPaletteRedBorder2": "#d13438",
+      "colorPaletteRedBorderActive": "#d13438",
+      "colorPaletteRedForeground1": "#bc2f32",
+      "colorPaletteRedForeground2": "#751d1f",
+      "colorPaletteRedForeground3": "#d13438",
+      "colorPaletteRedForegroundInverted": "#dc5e62",
+      "colorPaletteRoyalBlueBackground2": "#9abfdc",
+      "colorPaletteRoyalBlueBorderActive": "#004e8c",
+      "colorPaletteRoyalBlueForeground2": "#002c4e",
+      "colorPaletteSeafoamBackground2": "#a8f0cd",
+      "colorPaletteSeafoamBorderActive": "#00cc6a",
+      "colorPaletteSeafoamForeground2": "#00723b",
+      "colorPaletteSteelBackground2": "#94c8d4",
+      "colorPaletteSteelBorderActive": "#005b70",
+      "colorPaletteSteelForeground2": "#00333f",
+      "colorPaletteTealBackground2": "#9bd9db",
+      "colorPaletteTealBorderActive": "#038387",
+      "colorPaletteTealForeground2": "#02494c",
+      "colorPaletteYellowBackground1": "#fffef5",
+      "colorPaletteYellowBackground2": "#fef7b2",
+      "colorPaletteYellowBackground3": "#fde300",
+      "colorPaletteYellowBorder1": "#fef7b2",
+      "colorPaletteYellowBorder2": "#fde300",
+      "colorPaletteYellowBorderActive": "#fde300",
+      "colorPaletteYellowForeground1": "#817400",
+      "colorPaletteYellowForeground2": "#817400",
+      "colorPaletteYellowForeground3": "#fde300",
+      "colorPaletteYellowForegroundInverted": "#fef7b2",
+      "colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)",
+      "colorStatusDangerBackground1": "#fdf3f4",
+      "colorStatusDangerBackground2": "#eeacb2",
+      "colorStatusDangerBackground3": "#c50f1f",
+      "colorStatusDangerBorder1": "#eeacb2",
+      "colorStatusDangerBorder2": "#c50f1f",
+      "colorStatusDangerBorderActive": "#c50f1f",
+      "colorStatusDangerForeground1": "#b10e1c",
+      "colorStatusDangerForeground2": "#6e0811",
+      "colorStatusDangerForeground3": "#c50f1f",
+      "colorStatusDangerForegroundInverted": "#dc626d",
+      "colorStatusSuccessBackground1": "#f1faf1",
+      "colorStatusSuccessBackground2": "#9fd89f",
+      "colorStatusSuccessBackground3": "#107c10",
+      "colorStatusSuccessBorder1": "#9fd89f",
+      "colorStatusSuccessBorder2": "#107c10",
+      "colorStatusSuccessBorderActive": "#107c10",
+      "colorStatusSuccessForeground1": "#0e700e",
+      "colorStatusSuccessForeground2": "#094509",
+      "colorStatusSuccessForeground3": "#107c10",
+      "colorStatusSuccessForegroundInverted": "#54b054",
+      "colorStatusWarningBackground1": "#fff9f5",
+      "colorStatusWarningBackground2": "#fdcfb4",
+      "colorStatusWarningBackground3": "#f7630c",
+      "colorStatusWarningBorder1": "#fdcfb4",
+      "colorStatusWarningBorder2": "#bc4b09",
+      "colorStatusWarningBorderActive": "#f7630c",
+      "colorStatusWarningForeground1": "#bc4b09",
+      "colorStatusWarningForeground2": "#8a3707",
+      "colorStatusWarningForeground3": "#bc4b09",
+      "colorStatusWarningForegroundInverted": "#faa06b",
+      "colorStrokeFocus1": "#ffffff",
+      "colorStrokeFocus2": "#000000",
+      "colorSubtleBackground": "transparent",
+      "colorSubtleBackgroundHover": "#f5f5f5",
+      "colorSubtleBackgroundInverted": "transparent",
+      "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)",
+      "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)",
+      "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)",
+      "colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)",
+      "colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)",
+      "colorSubtleBackgroundLightAlphaSelected": "transparent",
+      "colorSubtleBackgroundPressed": "#e0e0e0",
+      "colorSubtleBackgroundSelected": "#ebebeb",
+      "colorTransparentBackground": "transparent",
+      "colorTransparentBackgroundHover": "transparent",
+      "colorTransparentBackgroundPressed": "transparent",
+      "colorTransparentBackgroundSelected": "transparent",
+      "colorTransparentStroke": "transparent",
+      "colorTransparentStrokeDisabled": "transparent",
+      "colorTransparentStrokeInteractive": "transparent",
+      "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)",
+      "curveAccelerateMid": "cubic-bezier(1,0,1,1)",
+      "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)",
+      "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)",
+      "curveDecelerateMid": "cubic-bezier(0,0,0,1)",
+      "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)",
+      "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)",
+      "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)",
+      "curveLinear": "cubic-bezier(0,0,1,1)",
+      "durationFast": "150ms",
+      "durationFaster": "100ms",
+      "durationGentle": "250ms",
+      "durationNormal": "200ms",
+      "durationSlow": "300ms",
+      "durationSlower": "400ms",
+      "durationUltraFast": "50ms",
+      "durationUltraSlow": "500ms",
+      "fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+      "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace",
+      "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
+      "fontSizeBase100": "10px",
+      "fontSizeBase200": "12px",
+      "fontSizeBase300": "14px",
+      "fontSizeBase400": "16px",
+      "fontSizeBase500": "20px",
+      "fontSizeBase600": "24px",
+      "fontSizeHero1000": "68px",
+      "fontSizeHero700": "28px",
+      "fontSizeHero800": "32px",
+      "fontSizeHero900": "40px",
+      "fontWeightBold": 700,
+      "fontWeightMedium": 500,
+      "fontWeightRegular": 400,
+      "fontWeightSemibold": 600,
+      "lineHeightBase100": "14px",
+      "lineHeightBase200": "16px",
+      "lineHeightBase300": "20px",
+      "lineHeightBase400": "22px",
+      "lineHeightBase500": "28px",
+      "lineHeightBase600": "32px",
+      "lineHeightHero1000": "92px",
+      "lineHeightHero700": "36px",
+      "lineHeightHero800": "40px",
+      "lineHeightHero900": "52px",
+      "shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)",
+      "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)",
+      "shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)",
+      "shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)",
+      "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)",
+      "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)",
+      "shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)",
+      "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)",
+      "shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)",
+      "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)",
+      "shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)",
+      "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)",
+      "spacingHorizontalL": "16px",
+      "spacingHorizontalM": "12px",
+      "spacingHorizontalMNudge": "10px",
+      "spacingHorizontalNone": "0",
+      "spacingHorizontalS": "8px",
+      "spacingHorizontalSNudge": "6px",
+      "spacingHorizontalXL": "20px",
+      "spacingHorizontalXS": "4px",
+      "spacingHorizontalXXL": "24px",
+      "spacingHorizontalXXS": "2px",
+      "spacingHorizontalXXXL": "32px",
+      "spacingVerticalL": "16px",
+      "spacingVerticalM": "12px",
+      "spacingVerticalMNudge": "10px",
+      "spacingVerticalNone": "0",
+      "spacingVerticalS": "8px",
+      "spacingVerticalSNudge": "6px",
+      "spacingVerticalXL": "20px",
+      "spacingVerticalXS": "4px",
+      "spacingVerticalXXL": "24px",
+      "spacingVerticalXXS": "2px",
+      "spacingVerticalXXXL": "32px",
+      "strokeWidthThick": "2px",
+      "strokeWidthThicker": "3px",
+      "strokeWidthThickest": "4px",
+      "strokeWidthThin": "1px",
+    }
+  }
+>
+  <div
+    className="tab-pane active documentsTab"
+    role="tabpanel"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    <div
+      className="filterdivs"
+    >
+      <div
+        className="filterDocCollapsed"
+      >
+        <span
+          className="selectQuery"
+        >
+          SELECT * FROM c
+        </span>
+        <span
+          className="appliedQuery"
+        />
+        <Button
+          appearance="primary"
+          onClick={[Function]}
+          style={
+            Object {
+              "marginLeft": 8,
+            }
+          }
+        >
+          Edit Filter
+        </Button>
+      </div>
+    </div>
+    <div
+      style={
+        Object {
+          "height": "100%",
+          "overflow": "hidden",
+        }
+      }
+    >
+      <Split
+        mode="horizontal"
+        prefixCls="w-split"
+        visiable={true}
+      >
+        <div
+          style={
+            Object {
+              "minWidth": 120,
+              "overflow": "hidden",
+              "position": "relative",
+              "width": "35%",
+            }
+          }
+        >
+          <Button
+            appearance="transparent"
+            aria-label="Refresh"
+            icon={<ArrowClockwise16Filled />}
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            size="small"
+            style={
+              Object {
+                "backgroundColor": "white",
+                "color": undefined,
+                "float": "right",
+                "position": "absolute",
+                "right": 0,
+                "top": 6,
+                "zIndex": 1,
+              }
+            }
+          />
+          <div
+            style={
+              Object {
+                "height": "100%",
+                "width": "calc(100% - 50px)",
+              }
+            }
+          >
+            <DocumentsTableComponent
+              columnHeaders={
+                Object {
+                  "idHeader": "id",
+                  "partitionKeyHeaders": Array [],
+                }
+              }
+              items={Array []}
+              onItemClicked={[Function]}
+              onSelectedRowsChange={[Function]}
+              selectedRows={
+                Set {
+                  0,
+                }
+              }
+            />
+          </div>
+        </div>
+        <div
+          style={
+            Object {
+              "minWidth": "20%",
+              "width": "100%",
+            }
+          }
+        />
+      </Split>
+    </div>
+  </div>
+</FluentProvider>
+`;
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
new file mode 100644
index 000000000..6e80eac9f
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
@@ -0,0 +1,1140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
+<DocumentsTableComponent
+  columnHeaders={
+    Object {
+      "idHeader": "id",
+      "partitionKeyHeaders": Array [
+        "partitionKey",
+      ],
+    }
+  }
+  items={
+    Array [
+      Object {
+        "id": "1",
+        "partitionKey": "pk1",
+      },
+      Object {
+        "id": "2",
+        "partitionKey": "pk2",
+      },
+      Object {
+        "id": "3",
+        "partitionKey": "pk3",
+      },
+    ]
+  }
+  onItemClicked={[Function]}
+  onSelectedRowsChange={[Function]}
+  selectedRows={Set {}}
+  size={
+    Object {
+      "height": 0,
+      "width": 0,
+    }
+  }
+>
+  <Table
+    aria-label="Filtered documents table"
+    className="documentsTable"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
+    noNativeElements={true}
+    role="grid"
+    size="extra-small"
+    style={
+      Object {
+        "minWidth": "fit-content",
+      }
+    }
+  >
+    <div
+      aria-label="Filtered documents table"
+      className="fui-Table documentsTable ___1kbqy50_18rlg51 fgkb47j fhovq9v ftgm304"
+      data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
+      role="grid"
+      style={
+        Object {
+          "minWidth": "fit-content",
+        }
+      }
+    >
+      <TableHeader
+        className="documentsTableHeader"
+      >
+        <div
+          className="fui-TableHeader documentsTableHeader ___oeyxrt0_1baslyg ftgm304"
+          role="rowgroup"
+        >
+          <TableRow
+            style={
+              Object {
+                "width": -15,
+              }
+            }
+          >
+            <div
+              className="fui-TableRow ___lntl370_1bdwmey f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb fy9rknc f22iagw f122n59"
+              role="row"
+              style={
+                Object {
+                  "width": -15,
+                }
+              }
+            >
+              <TableSelectionCell
+                checkboxIndicator={
+                  Object {
+                    "aria-label": "Select all rows ",
+                  }
+                }
+                checked={false}
+                onClick={[Function]}
+                onKeyDown={[Function]}
+              >
+                <div
+                  className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="cell"
+                >
+                  <Checkbox
+                    aria-label="Select all rows "
+                    checked={false}
+                    className="fui-TableSelectionCell__checkboxIndicator"
+                  >
+                    <span
+                      className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                    >
+                      <input
+                        aria-label="Select all rows "
+                        checked={false}
+                        className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                        id="checkbox-2"
+                        onChange={[Function]}
+                        type="checkbox"
+                      />
+                      <div
+                        aria-hidden={true}
+                        className="fui-Checkbox__indicator rl7ci6d"
+                      />
+                    </span>
+                  </Checkbox>
+                </div>
+              </TableSelectionCell>
+              <Menu
+                key="id"
+                openOnContext={true}
+              >
+                <ContextSelector.Provider
+                  value={
+                    Object {
+                      "checkedValues": Object {},
+                      "hasCheckmarks": false,
+                      "hasIcons": false,
+                      "inline": false,
+                      "isSubmenu": false,
+                      "menuPopoverRef": Object {
+                        "current": null,
+                      },
+                      "mountNode": null,
+                      "onCheckedValueChange": [Function],
+                      "open": false,
+                      "openOnContext": true,
+                      "openOnHover": false,
+                      "persistOnItemClick": false,
+                      "setOpen": [Function],
+                      "triggerId": "menu3",
+                      "triggerRef": Object {
+                        "current": <div
+                          class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                          id="menu3"
+                          role="columnheader"
+                          style="width: 50px; min-width: 50px; max-width: 50px;"
+                        >
+                          <div
+                            class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                            role="presentation"
+                          >
+                            id
+                          </div>
+                          <span
+                            class="fui-TableHeaderCell__aside"
+                          >
+                            <div
+                              aria-hidden="true"
+                              aria-label="Resize column"
+                              aria-valuetext="50 pixels"
+                              class="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
+                              data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                              role="separator"
+                            />
+                          </span>
+                        </div>,
+                      },
+                    }
+                  }
+                >
+                  <MenuTrigger
+                    key=".0"
+                  >
+                    <TableHeaderCell
+                      aside={
+                        <TableResizeHandle
+                          aria-hidden={true}
+                          aria-label="Resize column"
+                          aria-valuetext="50 pixels"
+                          data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseDown={[Function]}
+                          onTouchStart={[Function]}
+                          role="separator"
+                        />
+                      }
+                      className="documentsTableCell"
+                      data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                      id="menu3"
+                      key="id"
+                      onContextMenu={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseMove={[Function]}
+                      style={
+                        Object {
+                          "maxWidth": 50,
+                          "minWidth": 50,
+                          "width": 50,
+                        }
+                      }
+                    >
+                      <div
+                        className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                        data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                        id="menu3"
+                        onContextMenu={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseMove={[Function]}
+                        role="columnheader"
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                      >
+                        <div
+                          className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          role="presentation"
+                        >
+                          id
+                        </div>
+                        <span
+                          className="fui-TableHeaderCell__aside"
+                        >
+                          <TableResizeHandle
+                            aria-hidden={true}
+                            aria-label="Resize column"
+                            aria-valuetext="50 pixels"
+                            data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                            onBlur={[Function]}
+                            onKeyDown={[Function]}
+                            onMouseDown={[Function]}
+                            onTouchStart={[Function]}
+                            role="separator"
+                          >
+                            <div
+                              aria-hidden={true}
+                              aria-label="Resize column"
+                              aria-valuetext="50 pixels"
+                              className="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
+                              data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onKeyDown={[Function]}
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                              role="separator"
+                            />
+                          </TableResizeHandle>
+                        </span>
+                      </div>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                </ContextSelector.Provider>
+              </Menu>
+              <Menu
+                key="partitionKey"
+                openOnContext={true}
+              >
+                <ContextSelector.Provider
+                  value={
+                    Object {
+                      "checkedValues": Object {},
+                      "hasCheckmarks": false,
+                      "hasIcons": false,
+                      "inline": false,
+                      "isSubmenu": false,
+                      "menuPopoverRef": Object {
+                        "current": null,
+                      },
+                      "mountNode": null,
+                      "onCheckedValueChange": [Function],
+                      "open": false,
+                      "openOnContext": true,
+                      "openOnHover": false,
+                      "persistOnItemClick": false,
+                      "setOpen": [Function],
+                      "triggerId": "menu4",
+                      "triggerRef": Object {
+                        "current": <div
+                          class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                          id="menu4"
+                          role="columnheader"
+                          style="width: 50px; min-width: 50px; max-width: 50px;"
+                        >
+                          <div
+                            class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                            role="presentation"
+                          >
+                            <span
+                              title="partitionKey"
+                            >
+                              partitionKey
+                            </span>
+                          </div>
+                        </div>,
+                      },
+                    }
+                  }
+                >
+                  <MenuTrigger
+                    key=".0"
+                  >
+                    <TableHeaderCell
+                      aside={null}
+                      className="documentsTableCell"
+                      data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                      id="menu4"
+                      key="partitionKey"
+                      onContextMenu={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseMove={[Function]}
+                      style={
+                        Object {
+                          "maxWidth": 50,
+                          "minWidth": 50,
+                          "width": 50,
+                        }
+                      }
+                    >
+                      <div
+                        className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                        data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                        id="menu4"
+                        onContextMenu={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseMove={[Function]}
+                        role="columnheader"
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                      >
+                        <div
+                          className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          role="presentation"
+                        >
+                          <span
+                            title="partitionKey"
+                          >
+                            partitionKey
+                          </span>
+                        </div>
+                      </div>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                </ContextSelector.Provider>
+              </Menu>
+            </div>
+          </TableRow>
+        </div>
+      </TableHeader>
+      <TableBody>
+        <div
+          className="fui-TableBody ___oeyxrt0_1baslyg ftgm304"
+          role="rowgroup"
+        >
+          <List
+            direction="ltr"
+            height={-53}
+            itemCount={3}
+            itemData={
+              Array [
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "1",
+                    "partitionKey": "pk1",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 0,
+                  "selected": false,
+                },
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "2",
+                    "partitionKey": "pk2",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 1,
+                  "selected": false,
+                },
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "3",
+                    "partitionKey": "pk3",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 2,
+                  "selected": false,
+                },
+              ]
+            }
+            itemSize={30}
+            layout="vertical"
+            overscanCount={2}
+            style={
+              Object {
+                "overflowY": "scroll",
+              }
+            }
+            useIsScrolling={false}
+            width={0}
+          >
+            <div
+              onScroll={[Function]}
+              style={
+                Object {
+                  "WebkitOverflowScrolling": "touch",
+                  "direction": "ltr",
+                  "height": -53,
+                  "overflow": "auto",
+                  "overflowY": "scroll",
+                  "position": "relative",
+                  "width": 0,
+                  "willChange": "transform",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "height": 90,
+                    "pointerEvents": undefined,
+                    "width": "100%",
+                  }
+                }
+              >
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={0}
+                  key="0"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 0,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={2}
+                    aria-selected={false}
+                    key="1"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 0,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={2}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 0,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableSelectionCell
+                        checkboxIndicator={
+                          Object {
+                            "aria-label": "Select row",
+                          }
+                        }
+                        checked={false}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                      >
+                        <div
+                          className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                        >
+                          <Checkbox
+                            aria-label="Select row"
+                            checked={false}
+                            className="fui-TableSelectionCell__checkboxIndicator"
+                          >
+                            <span
+                              className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                            >
+                              <input
+                                aria-label="Select row"
+                                checked={false}
+                                className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                                id="checkbox-12"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                aria-hidden={true}
+                                className="fui-Checkbox__indicator rl7ci6d"
+                              />
+                            </span>
+                          </Checkbox>
+                        </div>
+                      </TableSelectionCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="1"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="1"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  1
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk1"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk1"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk1
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={1}
+                  key="1"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 30,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={3}
+                    aria-selected={false}
+                    key="2"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 30,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={3}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 30,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableSelectionCell
+                        checkboxIndicator={
+                          Object {
+                            "aria-label": "Select row",
+                          }
+                        }
+                        checked={false}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                      >
+                        <div
+                          className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                        >
+                          <Checkbox
+                            aria-label="Select row"
+                            checked={false}
+                            className="fui-TableSelectionCell__checkboxIndicator"
+                          >
+                            <span
+                              className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                            >
+                              <input
+                                aria-label="Select row"
+                                checked={false}
+                                className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                                id="checkbox-14"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                aria-hidden={true}
+                                className="fui-Checkbox__indicator rl7ci6d"
+                              />
+                            </span>
+                          </Checkbox>
+                        </div>
+                      </TableSelectionCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="2"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="2"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  2
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk2"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk2"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk2
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={2}
+                  key="2"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 60,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={4}
+                    aria-selected={false}
+                    key="3"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 60,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={4}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 60,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableSelectionCell
+                        checkboxIndicator={
+                          Object {
+                            "aria-label": "Select row",
+                          }
+                        }
+                        checked={false}
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                      >
+                        <div
+                          className="fui-TableSelectionCell ___itc2100_zkyq7r0 f17mccla fz5stix f1g0x7ka fhxju0i f1qch9an f1cnd47f fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw fqerorx f1neuvcm fkjuxzh fvrlu0f f1c71y05 f4d9j23"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                        >
+                          <Checkbox
+                            aria-label="Select row"
+                            checked={false}
+                            className="fui-TableSelectionCell__checkboxIndicator"
+                          >
+                            <span
+                              className="fui-Checkbox r1qaeuiq fui-TableSelectionCell__checkboxIndicator ___1v6wcsu_941lme0 f3p8bqa fium13f f1r2dosr f1729es6"
+                            >
+                              <input
+                                aria-label="Select row"
+                                checked={false}
+                                className="fui-Checkbox__input ruo9svu ___qlal8r0_1xrlghj f1vgc2s3"
+                                id="checkbox-16"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                aria-hidden={true}
+                                className="fui-Checkbox__indicator rl7ci6d"
+                              />
+                            </span>
+                          </Checkbox>
+                        </div>
+                      </TableSelectionCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="3"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="3"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  3
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk3"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk3"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk3
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+              </div>
+            </div>
+          </List>
+        </div>
+      </TableBody>
+    </div>
+  </Table>
+</DocumentsTableComponent>
+`;
diff --git a/src/Explorer/Tabs/MongoDocumentsTab.ts b/src/Explorer/Tabs/MongoDocumentsTab.ts
deleted file mode 100644
index d3bf31a54..000000000
--- a/src/Explorer/Tabs/MongoDocumentsTab.ts
+++ /dev/null
@@ -1,320 +0,0 @@
-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";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as Logger from "../../Common/Logger";
-import {
-  createDocument,
-  deleteDocument,
-  queryDocuments,
-  readDocument,
-  updateDocument,
-} from "../../Common/MongoProxyClient";
-import MongoUtility from "../../Common/MongoUtility";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { useDialog } from "../Controls/Dialog";
-import DocumentId from "../Tree/DocumentId";
-import ObjectId from "../Tree/ObjectId";
-import DocumentsTab from "./DocumentsTab";
-
-export default class MongoDocumentsTab extends DocumentsTab {
-  public collection: ViewModels.Collection;
-  private continuationToken: string;
-
-  constructor(options: ViewModels.DocumentsTabOptions) {
-    super(options);
-    this.lastFilterContents = ko.observableArray<string>(['{"id":"foo"}', "{ qty: { $gte: 20 } }"]);
-
-    this.partitionKeyProperties = this.partitionKeyProperties?.map((partitionKeyProperty, i) => {
-      if (partitionKeyProperty && ~partitionKeyProperty.indexOf(`"`)) {
-        partitionKeyProperty = partitionKeyProperty.replace(/["]+/g, "");
-      }
-
-      if (partitionKeyProperty && partitionKeyProperty.indexOf("$v") > -1) {
-        // From $v.shard.$v.key.$v > shard.key
-        partitionKeyProperty = partitionKeyProperty.replace(/.\$v/g, "").replace(/\$v./g, "");
-        this.partitionKeyPropertyHeaders[i] = "/" + partitionKeyProperty;
-      }
-
-      return partitionKeyProperty;
-    });
-
-    this.isFilterExpanded = ko.observable<boolean>(true);
-    super.buildCommandBarOptions.bind(this);
-    super.buildCommandBarOptions();
-  }
-
-  public onSaveNewDocumentClick = (): Promise<any> => {
-    const documentContent = JSON.parse(this.selectedDocumentContent());
-    this.displayedError("");
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-
-    const partitionKeyProperty = this.partitionKeyProperties?.[0];
-    if (partitionKeyProperty !== "_id" && !this._hasShardKeySpecified(documentContent)) {
-      const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
-      this.displayedError(message);
-      let that = this;
-      setTimeout(() => {
-        that.displayedError("");
-      }, Constants.ClientDefaults.errorNotificationTimeoutMs);
-      this.isExecutionError(true);
-      TelemetryProcessor.traceFailure(
-        Action.CreateDocument,
-        {
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          error: message,
-        },
-        startKey,
-      );
-      Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
-      throw new Error("Document without shard key");
-    }
-
-    this.isExecutionError(false);
-    this.isExecuting(true);
-    return createDocument(
-      this.collection.databaseId,
-      this.collection,
-      this.partitionKeyProperties?.[0],
-      documentContent,
-    )
-      .then(
-        (savedDocument: any) => {
-          const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
-            savedDocument,
-            this._getPartitionKeyDefinition() as PartitionKeyDefinition,
-          );
-
-          let id = new ObjectId(this, savedDocument, partitionKeyArray);
-          let ids = this.documentIds();
-          ids.push(id);
-          delete savedDocument._self;
-
-          let value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-
-          this.selectedDocumentId(id);
-          this.documentIds(ids);
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.CreateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public onSaveExistingDocumentClick = (): Promise<any> => {
-    const selectedDocumentId = this.selectedDocumentId();
-    const documentContent = this.selectedDocumentContent();
-    this.isExecutionError(false);
-    this.isExecuting(true);
-    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
-      dataExplorerArea: Constants.Areas.Tab,
-      tabTitle: this.tabTitle(),
-    });
-
-    return updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent)
-      .then(
-        (updatedDocument: any) => {
-          let value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
-          this.selectedDocumentContent.setBaseline(value);
-
-          this.documentIds().forEach((documentId: DocumentId) => {
-            if (documentId.rid === updatedDocument._rid) {
-              const partitionKeyArray: PartitionKey[] = extractPartitionKeyValues(
-                updatedDocument,
-                this._getPartitionKeyDefinition() as PartitionKeyDefinition,
-              );
-
-              const id = new ObjectId(this, updatedDocument, partitionKeyArray);
-              documentId.id(id.id());
-            }
-          });
-          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
-          TelemetryProcessor.traceSuccess(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-            },
-            startKey,
-          );
-        },
-        (error) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.UpdateDocument,
-            {
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey,
-          );
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  };
-
-  public buildQuery(filter: string): string {
-    return filter || "{}";
-  }
-
-  public async selectDocument(documentId: DocumentId): Promise<void> {
-    this.selectedDocumentId(documentId);
-    const content = await readDocument(this.collection.databaseId, this.collection, documentId);
-    this.initDocumentEditor(documentId, content);
-  }
-
-  public loadNextPage(): Q.Promise<any> {
-    this.isExecuting(true);
-    this.isExecutionError(false);
-    const filter: string = this.filterContent().trim();
-    const query: string = this.buildQuery(filter);
-
-    return Q(queryDocuments(this.collection.databaseId, this.collection, true, query, this.continuationToken))
-      .then(
-        ({ continuationToken, documents }) => {
-          this.continuationToken = continuationToken;
-          let currentDocuments = this.documentIds();
-          const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
-          const nextDocumentIds = documents
-            .filter((d: any) => {
-              return currentDocumentsRids.indexOf(d._rid) < 0;
-            })
-            .map((rawDocument: any) => {
-              const partitionKeyValue = rawDocument._partitionKeyValue;
-              return new DocumentId(this, rawDocument, [partitionKeyValue]);
-            });
-
-          const merged = currentDocuments.concat(nextDocumentIds);
-
-          this.documentIds(merged);
-          currentDocuments = this.documentIds();
-          if (this.filterContent().length > 0 && currentDocuments.length > 0) {
-            currentDocuments[0].click();
-          } else {
-            this.selectedDocumentContent("");
-            this.selectedDocumentId(null);
-            this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-          }
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceSuccess(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-        (error: any) => {
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceFailure(
-              Action.Tab,
-              {
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                error: getErrorMessage(error),
-                errorStack: getErrorStack(error),
-              },
-              this.onLoadStartKey,
-            );
-            this.onLoadStartKey = null;
-          }
-        },
-      )
-      .finally(() => this.isExecuting(false));
-  }
-
-  protected _onEditorContentChange(newContent: string) {
-    try {
-      if (
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
-        this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid
-      ) {
-        let parsed: any = JSON.parse(newContent);
-      }
-
-      // Mongo uses BSON format for _id, trying to parse it as JSON blocks normal flow in an edit
-      this.onValidDocumentEdit();
-    } catch (e) {
-      this.onInvalidDocumentEdit();
-    }
-  }
-
-  /** Renders a Javascript object to be displayed inside Monaco Editor */
-  public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
-    return MongoUtility.tojson(value, null, false);
-  }
-
-  private _hasShardKeySpecified(document: any): boolean {
-    return Boolean(extractPartitionKeyValues(document, this._getPartitionKeyDefinition() as PartitionKeyDefinition));
-  }
-
-  private _getPartitionKeyDefinition(): DataModels.PartitionKey {
-    let partitionKey: DataModels.PartitionKey = this.partitionKey;
-
-    if (
-      this.partitionKey &&
-      this.partitionKey.paths &&
-      this.partitionKey.paths.length &&
-      this.partitionKey.paths.length > 0 &&
-      this.partitionKey.paths[0].indexOf("$v") > -1
-    ) {
-      // Convert BsonSchema2 to /path format
-      partitionKey = {
-        kind: partitionKey.kind,
-        paths: ["/" + this.partitionKeyProperties?.[0].replace(/\./g, "/")],
-        version: partitionKey.version,
-      };
-    }
-
-    return partitionKey;
-  }
-
-  protected __deleteDocument(documentId: DocumentId): Promise<void> {
-    return deleteDocument(this.collection.databaseId, this.collection, documentId);
-  }
-}
diff --git a/src/Explorer/Tabs/useTabs.test.ts b/src/Explorer/Tabs/useTabs.test.ts
index 90a13f827..9d4925a2c 100644
--- a/src/Explorer/Tabs/useTabs.test.ts
+++ b/src/Explorer/Tabs/useTabs.test.ts
@@ -1,17 +1,17 @@
+import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { useTabs } from "../../hooks/useTabs";
 import { updateUserContext } from "../../UserContext";
+import { useTabs } from "../../hooks/useTabs";
 import { container } from "../Controls/Settings/TestUtils";
 import DocumentId from "../Tree/DocumentId";
-import DocumentsTab from "./DocumentsTab";
 import { NewQueryTab } from "./QueryTab/QueryTab";
 
 describe("useTabs tests", () => {
   let database: ViewModels.Database;
   let collection: ViewModels.Collection;
   let queryTab: NewQueryTab;
-  let documentsTab: DocumentsTab;
+  let documentsTab: DocumentsTabV2;
 
   beforeEach(() => {
     updateUserContext({
@@ -56,7 +56,7 @@ describe("useTabs tests", () => {
       },
     );
 
-    documentsTab = new DocumentsTab({
+    documentsTab = new DocumentsTabV2({
       partitionKey: undefined,
       documentIds: ko.observableArray<DocumentId>(),
       tabKind: ViewModels.CollectionTabKind.Documents,
diff --git a/src/Explorer/Theme/ThemeUtil.ts b/src/Explorer/Theme/ThemeUtil.ts
new file mode 100644
index 000000000..fe4075c69
--- /dev/null
+++ b/src/Explorer/Theme/ThemeUtil.ts
@@ -0,0 +1,31 @@
+import { BrandVariants, Theme, createLightTheme } from "@fluentui/react-components";
+import { Platform } from "ConfigContext";
+import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
+
+// These are the theme colors for Fluent UI 9 React components
+const appThemePortalBrandRamp: BrandVariants = {
+  10: "#020305",
+  20: "#111723",
+  30: "#16263D",
+  40: "#193253",
+  50: "#1B3F6A",
+  60: "#1B4C82",
+  70: "#18599B",
+  80: "#1267B4",
+  90: "#3174C2",
+  100: "#4F82C8",
+  110: "#6790CF",
+  120: "#7D9ED5",
+  130: "#92ACDC",
+  140: "#A6BAE2",
+  150: "#BAC9E9",
+  160: "#CDD8EF",
+};
+
+export function getPlatformTheme(platform: Platform): Theme {
+  if (platform === Platform.Fabric) {
+    return createLightTheme(appThemeFabricTealBrandRamp);
+  } else {
+    return createLightTheme(appThemePortalBrandRamp);
+  }
+}
diff --git a/src/Explorer/Tree/Collection.ts b/src/Explorer/Tree/Collection.ts
index d7c673620..fffacb134 100644
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -1,5 +1,6 @@
 import { Resource, StoredProcedureDefinition, TriggerDefinition, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import * as ko from "knockout";
 import * as _ from "underscore";
 import * as Constants from "../../Common/Constants";
@@ -27,9 +28,7 @@ import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
 import ConflictsTab from "../Tabs/ConflictsTab";
-import DocumentsTab from "../Tabs/DocumentsTab";
 import GraphTab from "../Tabs/GraphTab";
-import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
 import { NewMongoQueryTab } from "../Tabs/MongoQueryTab/MongoQueryTab";
 import { NewMongoShellTab } from "../Tabs/MongoShellTab/MongoShellTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
@@ -292,13 +291,13 @@ export default class Collection implements ViewModels.Collection {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
-    const documentsTabs: DocumentsTab[] = useTabs
+    const documentsTabs: DocumentsTabV2[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.Documents,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id(),
-      ) as DocumentsTab[];
-    let documentsTab: DocumentsTab = documentsTabs && documentsTabs[0];
+      ) as DocumentsTabV2[];
+    let documentsTab: DocumentsTabV2 = documentsTabs && documentsTabs[0];
 
     if (documentsTab) {
       useTabs.getState().activateTab(documentsTab);
@@ -312,7 +311,7 @@ export default class Collection implements ViewModels.Collection {
       });
       this.documentIds([]);
 
-      documentsTab = new DocumentsTab({
+      documentsTab = new DocumentsTabV2({
         partitionKey: this.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
         tabKind: ViewModels.CollectionTabKind.Documents,
@@ -494,13 +493,13 @@ export default class Collection implements ViewModels.Collection {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
-    const mongoDocumentsTabs: MongoDocumentsTab[] = useTabs
+    const mongoDocumentsTabs: DocumentsTabV2[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.Documents,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id(),
-      ) as MongoDocumentsTab[];
-    let mongoDocumentsTab: MongoDocumentsTab = mongoDocumentsTabs && mongoDocumentsTabs[0];
+      ) as DocumentsTabV2[];
+    let mongoDocumentsTab: DocumentsTabV2 = mongoDocumentsTabs && mongoDocumentsTabs[0];
 
     if (mongoDocumentsTab) {
       useTabs.getState().activateTab(mongoDocumentsTab);
@@ -514,7 +513,7 @@ export default class Collection implements ViewModels.Collection {
       });
       this.documentIds([]);
 
-      mongoDocumentsTab = new MongoDocumentsTab({
+      mongoDocumentsTab = new DocumentsTabV2({
         partitionKey: this.partitionKey,
         documentIds: this.documentIds,
         tabKind: ViewModels.CollectionTabKind.Documents,
diff --git a/src/Explorer/Tree/DocumentId.ts b/src/Explorer/Tree/DocumentId.ts
index 4ccf71e40..c54931c75 100644
--- a/src/Explorer/Tree/DocumentId.ts
+++ b/src/Explorer/Tree/DocumentId.ts
@@ -1,10 +1,18 @@
 import * as ko from "knockout";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDialog } from "../Controls/Dialog";
-import DocumentsTab from "../Tabs/DocumentsTab";
 
+/**
+ * Replaces DocumentsTab so we can plug any object
+ */
+export interface IDocumentIdContainer {
+  partitionKeyProperties?: string[];
+  partitionKey: DataModels.PartitionKey;
+  isEditorDirty: () => boolean;
+  selectDocument: (documentId: DocumentId) => Promise<void>;
+}
 export default class DocumentId {
-  public container: DocumentsTab;
+  public container: IDocumentIdContainer;
   public rid: string;
   public self: string;
   public ts: string;
@@ -15,7 +23,7 @@ export default class DocumentId {
   public stringPartitionKeyValues: string[];
   public isDirty: ko.Observable<boolean>;
 
-  constructor(container: DocumentsTab, data: any, partitionKeyValue: any[]) {
+  constructor(container: IDocumentIdContainer, data: any, partitionKeyValue: any[]) {
     this.container = container;
     this.self = data._self;
     this.rid = data._rid;
diff --git a/src/Explorer/Tree/ObjectId.ts b/src/Explorer/Tree/ObjectId.ts
index fc53a6a37..314a4cd7e 100644
--- a/src/Explorer/Tree/ObjectId.ts
+++ b/src/Explorer/Tree/ObjectId.ts
@@ -1,9 +1,8 @@
 import * as ko from "knockout";
-import DocumentId from "./DocumentId";
-import DocumentsTab from "../Tabs/DocumentsTab";
+import DocumentId, { IDocumentIdContainer } from "./DocumentId";
 
 export default class ObjectId extends DocumentId {
-  constructor(container: DocumentsTab, data: any, partitionKeyValue: any) {
+  constructor(container: IDocumentIdContainer, data: any, partitionKeyValue: any) {
     super(container, data, partitionKeyValue);
     if (typeof data._id === "object") {
       this.id = ko.observable(data._id[Object.keys(data._id)[0]]);
diff --git a/src/Explorer/Tree/ResourceTokenCollection.ts b/src/Explorer/Tree/ResourceTokenCollection.ts
index a5e6ab07f..6212c14a8 100644
--- a/src/Explorer/Tree/ResourceTokenCollection.ts
+++ b/src/Explorer/Tree/ResourceTokenCollection.ts
@@ -1,3 +1,4 @@
+import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
@@ -7,7 +8,6 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { useTabs } from "../../hooks/useTabs";
 import Explorer from "../Explorer";
-import DocumentsTab from "../Tabs/DocumentsTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
@@ -118,15 +118,15 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
-    const documentsTabs: DocumentsTab[] = useTabs
+    const documentsTabs: DocumentsTabV2[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.Documents,
         (tab: TabsBase) =>
           tab.collection?.id() === this.id() &&
           (tab.collection as ViewModels.CollectionBase).databaseId === this.databaseId,
-      ) as DocumentsTab[];
-    let documentsTab: DocumentsTab = documentsTabs && documentsTabs[0];
+      ) as DocumentsTabV2[];
+    let documentsTab: DocumentsTabV2 = documentsTabs && documentsTabs[0];
 
     if (documentsTab) {
       useTabs.getState().activateTab(documentsTab);
@@ -139,7 +139,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
         tabTitle: "Items",
       });
 
-      documentsTab = new DocumentsTab({
+      documentsTab = new DocumentsTabV2({
         partitionKey: this.partitionKey,
         resourceTokenPartitionKey: userContext.parsedResourceToken?.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
diff --git a/src/Explorer/Tree2/ResourceTree.tsx b/src/Explorer/Tree2/ResourceTree.tsx
index 761cda2c6..45e3ba5d4 100644
--- a/src/Explorer/Tree2/ResourceTree.tsx
+++ b/src/Explorer/Tree2/ResourceTree.tsx
@@ -1,14 +1,13 @@
 import {
-  BrandVariants,
   FluentProvider,
-  Theme,
   Tree,
   TreeItemValue,
   TreeOpenChangeData,
   TreeOpenChangeEvent,
-  createLightTheme,
 } from "@fluentui/react-components";
+import { configContext } from "ConfigContext";
 import { TreeNode2, TreeNode2Component } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
+import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useDatabaseTreeNodes } from "Explorer/Tree2/useDatabaseTreeNodes";
 import * as React from "react";
 import shallow from "zustand/shallow";
@@ -22,29 +21,6 @@ interface ResourceTreeProps {
   container: Explorer;
 }
 
-const cosmosdb: BrandVariants = {
-  10: "#020305",
-  20: "#111723",
-  30: "#16263D",
-  40: "#193253",
-  50: "#1B3F6A",
-  60: "#1B4C82",
-  70: "#18599B",
-  80: "#1267B4",
-  90: "#3174C2",
-  100: "#4F82C8",
-  110: "#6790CF",
-  120: "#7D9ED5",
-  130: "#92ACDC",
-  140: "#A6BAE2",
-  150: "#BAC9E9",
-  160: "#CDD8EF",
-};
-
-const lightTheme: Theme = {
-  ...createLightTheme(cosmosdb),
-};
-
 export const DATA_TREE_LABEL = "DATA";
 
 /**
@@ -113,7 +89,7 @@ export const ResourceTree2: React.FC<ResourceTreeProps> = ({ container }: Resour
 
   return (
     <>
-      <FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}>
+      <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ overflow: "hidden" }}>
         <Tree
           aria-label="CosmosDB resources"
           openItems={openItems}
diff --git a/src/Platform/Fabric/FabricTheme.tsx b/src/Platform/Fabric/FabricTheme.tsx
index 5288d91c4..446f1ad93 100644
--- a/src/Platform/Fabric/FabricTheme.tsx
+++ b/src/Platform/Fabric/FabricTheme.tsx
@@ -1,4 +1,5 @@
 import { Theme, createTheme } from "@fluentui/react";
+import { BrandVariants, createLightTheme } from "@fluentui/react-components";
 
 export const appThemeFabric: Theme = createTheme({
   palette: {
@@ -206,3 +207,24 @@ export const appThemeFabric: Theme = createTheme({
     greenLight: "#13a10e",
   },
 });
+
+export const appThemeFabricTealBrandRamp: BrandVariants = {
+  10: "#001919",
+  20: "#012826",
+  30: "#01322E",
+  40: "#033f38",
+  50: "#054d43",
+  60: "#0a5c50",
+  70: "#0c695a",
+  80: "#117865",
+  90: "#1f937e",
+  100: "#2aaC94",
+  110: "#3abb9f",
+  120: "#52c7aa",
+  130: "#78d3b9",
+  140: "#9ee0cb",
+  150: "#c0ecdd",
+  160: "#e3f7ef",
+};
+
+export const appThemeFabricV9 = createLightTheme(appThemeFabricTealBrandRamp);
diff --git a/src/Shared/Telemetry/TelemetryConstants.ts b/src/Shared/Telemetry/TelemetryConstants.ts
index c6211d3f9..3b4892990 100644
--- a/src/Shared/Telemetry/TelemetryConstants.ts
+++ b/src/Shared/Telemetry/TelemetryConstants.ts
@@ -138,6 +138,7 @@ export enum Action {
   QueryGenerationFromCopilotPrompt,
   QueryEdited,
   ExecuteQueryGeneratedFromQueryCopilot,
+  DeleteDocuments,
 }
 
 export const ActionModifiers = {
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 35af8a5a9..04c470c83 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -41,3 +41,9 @@ Object.defineProperty(window, "localStorage", {
 require("jquery-ui-dist/jquery-ui");
 (<any>global).TextEncoder = TextEncoder;
 (<any>global).TextDecoder = TextDecoder;
+
+(<any>global).ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

From f669a99228bbdd00a92895064a35464f02c8a94a Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 29 May 2024 16:03:51 +0200
Subject: [PATCH 43/67] Separate Fabric-specific message types (#1848)

* Update message de->fabric to v3

* Reinstate get authorization token path which doesn't get called every 5 minutes anymore

* Remove obsolete comment

* Add missing types

* Fix format

* Fix build issue

* Revert "Reinstate get authorization token path which doesn't get called every 5 minutes anymore"

This reverts commit a3f3511043201c8824989df04fd2ad813b88bd9e.

* Keep 3 old fabric message types enums for compatibility with the portal

* Re-add warning comment about not changing existing message type enums

---------

Co-authored-by: Laurent Nguyen <languye@microsoft.com>
---
 src/Common/CosmosClient.ts                    |  4 +--
 src/Common/MessageHandler.ts                  |  3 ++-
 src/Contracts/DataExplorerMessagesContract.ts | 27 +++++--------------
 src/Contracts/FabricMessageTypes.ts           | 13 +++++++++
 src/Contracts/FabricMessagesContract.ts       |  2 +-
 src/Contracts/MessageTypes.ts                 | 14 ++++------
 src/Platform/Fabric/FabricUtil.ts             |  4 +--
 src/hooks/useKnockoutExplorer.ts              |  3 ++-
 8 files changed, 33 insertions(+), 37 deletions(-)
 create mode 100644 src/Contracts/FabricMessageTypes.ts

diff --git a/src/Common/CosmosClient.ts b/src/Common/CosmosClient.ts
index f75c47454..c24680f4b 100644
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -1,6 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { AuthorizationToken } from "Contracts/MessageTypes";
+import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
@@ -59,7 +59,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       /* ************** TODO: Uncomment this code if we need to support these operations **************
       // User master tokens
       const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-        MessageTypes.GetAuthorizationToken,
+        FabricMessageTypes.GetAuthorizationToken,
         [requestInfo],
         userContext.fabricContext.connectionId,
       );
diff --git a/src/Common/MessageHandler.ts b/src/Common/MessageHandler.ts
index 0d8304d95..378c58b5f 100644
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -1,3 +1,4 @@
+import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import Q from "q";
 import * as _ from "underscore";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
@@ -36,7 +37,7 @@ export function handleCachedDataMessage(message: any): void {
  * @returns
  */
 export function sendCachedDataMessage<TResponseDataModel>(
-  messageType: MessageTypes,
+  messageType: MessageTypes | FabricMessageTypes,
   params: Object[],
   scope?: string,
   timeoutInMs?: number,
diff --git a/src/Contracts/DataExplorerMessagesContract.ts b/src/Contracts/DataExplorerMessagesContract.ts
index e47e4c384..a38940120 100644
--- a/src/Contracts/DataExplorerMessagesContract.ts
+++ b/src/Contracts/DataExplorerMessagesContract.ts
@@ -1,37 +1,22 @@
-import { MessageTypes } from "./MessageTypes";
+import { FabricMessageTypes } from "./FabricMessageTypes";
 
 // This is the current version of these messages
-export const DATA_EXPLORER_RPC_VERSION = "2";
+export const DATA_EXPLORER_RPC_VERSION = "3";
 
 // Data Explorer to Fabric
-
-// TODO Remove when upgrading to Fabric v2
-export type DataExploreMessageV1 =
-  | "ready"
+export type DataExploreMessageV3 =
   | {
-      type: MessageTypes.GetAuthorizationToken;
-      id: string;
-      params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
-      id: string;
-    };
-// -----------------------------
-
-export type DataExploreMessageV2 =
-  | {
-      type: MessageTypes.Ready;
+      type: FabricMessageTypes.Ready;
       id: string;
       params: [string]; // version
     }
   | {
-      type: MessageTypes.GetAuthorizationToken;
+      type: FabricMessageTypes.GetAuthorizationToken;
       id: string;
       params: GetCosmosTokenMessageOptions[];
     }
   | {
-      type: MessageTypes.GetAllResourceTokens;
+      type: FabricMessageTypes.GetAllResourceTokens;
       id: string;
     };
 
diff --git a/src/Contracts/FabricMessageTypes.ts b/src/Contracts/FabricMessageTypes.ts
new file mode 100644
index 000000000..aa374472d
--- /dev/null
+++ b/src/Contracts/FabricMessageTypes.ts
@@ -0,0 +1,13 @@
+/**
+ * Data Explorer -> Fabric communication.
+ */
+export enum FabricMessageTypes {
+  GetAuthorizationToken = "GetAuthorizationToken",
+  GetAllResourceTokens = "GetAllResourceTokens",
+  Ready = "Ready",
+}
+
+export interface AuthorizationToken {
+  XDate: string;
+  PrimaryReadWriteToken: string;
+}
diff --git a/src/Contracts/FabricMessagesContract.ts b/src/Contracts/FabricMessagesContract.ts
index b381fd845..dcf5a5a50 100644
--- a/src/Contracts/FabricMessagesContract.ts
+++ b/src/Contracts/FabricMessagesContract.ts
@@ -1,4 +1,4 @@
-import { AuthorizationToken } from "./MessageTypes";
+import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 
 // This is the version of these messages
 export const FABRIC_RPC_VERSION = "2";
diff --git a/src/Contracts/MessageTypes.ts b/src/Contracts/MessageTypes.ts
index a19b69e5f..4550d2a53 100644
--- a/src/Contracts/MessageTypes.ts
+++ b/src/Contracts/MessageTypes.ts
@@ -1,12 +1,13 @@
 /**
  * Messaging types used with Data Explorer <-> Portal communication,
- * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
+ * Hosted <-> Explorer communication
  *
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  * WARNING: !!!!!!! YOU CAN ONLY ADD NEW TYPES TO THE END OF THIS ENUM !!!!!!!
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  *
  * Enum are integers, so inserting or deleting a type will break the communication.
+ *
  */
 export enum MessageTypes {
   TelemetryInfo,
@@ -43,14 +44,9 @@ export enum MessageTypes {
   DisplayNPSSurvey,
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
-  GetAuthorizationToken, // Data Explorer -> Fabric
-  GetAllResourceTokens, // Data Explorer -> Fabric
-  Ready, // Data Explorer -> Fabric
+  GetAuthorizationToken, // unused. Can be removed if the portal uses the same list of enums.
+  GetAllResourceTokens, // unused. Can be removed if the portal uses the same list of enums.
+  Ready, // unused. Can be removed if the portal uses the same list of enums.
   OpenCESCVAFeedbackBlade,
   ActivateTab,
 }
-
-export interface AuthorizationToken {
-  XDate: string;
-  PrimaryReadWriteToken: string;
-}
diff --git a/src/Platform/Fabric/FabricUtil.ts b/src/Platform/Fabric/FabricUtil.ts
index 6c6d2ef9c..26ba859ff 100644
--- a/src/Platform/Fabric/FabricUtil.ts
+++ b/src/Platform/Fabric/FabricUtil.ts
@@ -1,6 +1,6 @@
 import { sendCachedDataMessage } from "Common/MessageHandler";
+import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import { FabricDatabaseConnectionInfo } from "Contracts/FabricMessagesContract";
-import { MessageTypes } from "Contracts/MessageTypes";
 import { updateUserContext, userContext } from "UserContext";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 
@@ -19,7 +19,7 @@ const requestDatabaseResourceTokens = async (): Promise<void> => {
   lastRequestTimestamp = Date.now();
   try {
     const fabricDatabaseConnectionInfo = await sendCachedDataMessage<FabricDatabaseConnectionInfo>(
-      MessageTypes.GetAllResourceTokens,
+      FabricMessageTypes.GetAllResourceTokens,
       [],
       userContext.fabricContext.connectionId,
     );
diff --git a/src/hooks/useKnockoutExplorer.ts b/src/hooks/useKnockoutExplorer.ts
index 4e80b3476..3a6061acd 100644
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,5 +1,6 @@
 import { createUri } from "Common/UrlUtility";
 import { DATA_EXPLORER_RPC_VERSION } from "Contracts/DataExplorerMessagesContract";
+import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import { FABRIC_RPC_VERSION, FabricMessageV2 } from "Contracts/FabricMessagesContract";
 import Explorer from "Explorer/Explorer";
 import { useSelectedNode } from "Explorer/useSelectedNode";
@@ -156,7 +157,7 @@ async function configureFabric(): Promise<Explorer> {
     );
 
     sendMessage({
-      type: MessageTypes.Ready,
+      type: FabricMessageTypes.Ready,
       id: "ready",
       params: [DATA_EXPLORER_RPC_VERSION],
     });

From cebf044803e58a56710adbecaf1bcf05587b8627 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 29 May 2024 18:20:07 +0200
Subject: [PATCH 44/67] Fix typo (#1849)

---
 src/Contracts/ViewModels.ts                   | 12 ++---
 src/Explorer/Tabs/ConflictsTab.ts             | 46 +++++++++---------
 .../DocumentsTabV2/DocumentsTabV2.test.tsx    | 30 ++++++------
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 48 +++++++++----------
 src/Explorer/Tabs/ScriptTabBase.ts            | 12 ++---
 .../StoredProcedureTabComponent.tsx           |  2 +-
 src/Explorer/Tabs/TriggerTabContent.tsx       |  2 +-
 .../Tabs/UserDefinedFunctionTabContent.tsx    |  2 +-
 8 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index 66fd54ec4..e50ba6769 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -324,9 +324,9 @@ export enum DocumentExplorerState {
   noDocumentSelected,
   newDocumentValid,
   newDocumentInvalid,
-  exisitingDocumentNoEdits,
-  exisitingDocumentDirtyValid,
-  exisitingDocumentDirtyInvalid,
+  existingDocumentNoEdits,
+  existingDocumentDirtyValid,
+  existingDocumentDirtyInvalid,
 }
 
 export enum IndexingPolicyEditorState {
@@ -339,9 +339,9 @@ export enum IndexingPolicyEditorState {
 export enum ScriptEditorState {
   newInvalid,
   newValid,
-  exisitingNoEdits,
-  exisitingDirtyValid,
-  exisitingDirtyInvalid,
+  existingNoEdits,
+  existingDirtyValid,
+  existingDirtyInvalid,
 }
 
 export enum CollectionTabKind {
diff --git a/src/Explorer/Tabs/ConflictsTab.ts b/src/Explorer/Tabs/ConflictsTab.ts
index c01c206c1..15355bd63 100644
--- a/src/Explorer/Tabs/ConflictsTab.ts
+++ b/src/Explorer/Tabs/ConflictsTab.ts
@@ -6,16 +6,16 @@ import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
 import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
-import { createDocument } from "../../Common/dataAccess/createDocument";
-import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
-import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import editable from "../../Common/EditableUtility";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
 import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
@@ -117,15 +117,15 @@ export default class ConflictsTab extends TabsBase {
     this.isEditorDirty = ko.computed<boolean>(() => {
       switch (this.editorState()) {
         case ViewModels.DocumentExplorerState.noDocumentSelected:
-        case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+        case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
           return false;
 
         case ViewModels.DocumentExplorerState.newDocumentValid:
         case ViewModels.DocumentExplorerState.newDocumentInvalid:
-        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+        case ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid:
           return true;
 
-        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+        case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
           return (
             this.selectedConflictCurrent.getEditableOriginalValue() !==
             this.selectedConflictCurrent.getEditableCurrentValue()
@@ -139,8 +139,8 @@ export default class ConflictsTab extends TabsBase {
     this.acceptChangesButton = {
       enabled: ko.computed<boolean>(() => {
         switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
+          case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
             return true;
         }
 
@@ -155,8 +155,8 @@ export default class ConflictsTab extends TabsBase {
     this.discardButton = {
       enabled: ko.computed<boolean>(() => {
         switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
+          case ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid:
             return true;
         }
 
@@ -171,8 +171,8 @@ export default class ConflictsTab extends TabsBase {
     this.deleteButton = {
       enabled: ko.computed<boolean>(() => {
         switch (this.editorState()) {
-          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
-          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
+          case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
             return true;
         }
 
@@ -247,7 +247,7 @@ export default class ConflictsTab extends TabsBase {
       return Q();
     }
 
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+    this.editorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
 
     return Q();
   }
@@ -407,22 +407,22 @@ export default class ConflictsTab extends TabsBase {
 
   public onDiscardClick = (): Q.Promise<any> => {
     this.selectedConflictContent(this.selectedConflictContent.getEditableOriginalValue());
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+    this.editorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
 
     return Q();
   };
 
   public onValidDocumentEdit(): Q.Promise<any> {
-    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
+    this.editorState(ViewModels.DocumentExplorerState.existingDocumentDirtyValid);
     return Q();
   }
 
   public onInvalidDocumentEdit(): Q.Promise<any> {
     if (
-      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
-      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
+      this.editorState() === ViewModels.DocumentExplorerState.existingDocumentNoEdits ||
+      this.editorState() === ViewModels.DocumentExplorerState.existingDocumentDirtyValid
     ) {
-      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
+      this.editorState(ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid);
       return Q();
     }
 
@@ -555,7 +555,7 @@ export default class ConflictsTab extends TabsBase {
       let parsedConflictContent: any = JSON.parse(documentToInsert);
       const renderedConflictContent: string = this.renderObjectForEditor(parsedConflictContent, null, 4);
       this.selectedConflictContent.setBaseline(renderedConflictContent);
-      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      this.editorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
     }
 
     return Q();
@@ -576,7 +576,7 @@ export default class ConflictsTab extends TabsBase {
 
       const renderedConflictContent: string = this.renderObjectForEditor(parsedConflictContent, null, 4);
       this.selectedConflictContent.setBaseline(renderedConflictContent);
-      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      this.editorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
     }
 
     return Q();
@@ -588,7 +588,7 @@ export default class ConflictsTab extends TabsBase {
       parsedDocumentToDelete = ConflictsTab.removeSystemProperties(parsedDocumentToDelete);
       const renderedDocumentToDelete: string = this.renderObjectForEditor(parsedDocumentToDelete, null, 4);
       this.selectedConflictContent.setBaseline(renderedDocumentToDelete);
-      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      this.editorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
     }
 
     return Q();
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
index d224c2f9a..3d2b1e663 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
@@ -179,17 +179,17 @@ describe("Documents tab (noSql API)", () => {
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: true, visible: true });
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: true });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        state: ViewModels.DocumentExplorerState.existingDocumentNoEdits,
         enabled: false,
         visible: false,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyValid,
         enabled: false,
         visible: false,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid,
         enabled: false,
         visible: false,
       });
@@ -211,17 +211,17 @@ describe("Documents tab (noSql API)", () => {
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: true, visible: true });
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: true, visible: true });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        state: ViewModels.DocumentExplorerState.existingDocumentNoEdits,
         enabled: false,
         visible: false,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyValid,
         enabled: false,
         visible: false,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid,
         enabled: false,
         visible: false,
       });
@@ -243,17 +243,17 @@ describe("Documents tab (noSql API)", () => {
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        state: ViewModels.DocumentExplorerState.existingDocumentNoEdits,
         enabled: false,
         visible: true,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyValid,
         enabled: true,
         visible: true,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid,
         enabled: false,
         visible: true,
       });
@@ -275,17 +275,17 @@ describe("Documents tab (noSql API)", () => {
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits,
+        state: ViewModels.DocumentExplorerState.existingDocumentNoEdits,
         enabled: false,
         visible: true,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyValid,
         enabled: true,
         visible: true,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid,
         enabled: true,
         visible: true,
       });
@@ -306,14 +306,14 @@ describe("Documents tab (noSql API)", () => {
       testCases.add({ state: ViewModels.DocumentExplorerState.noDocumentSelected, enabled: false, visible: false });
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentValid, enabled: false, visible: false });
       testCases.add({ state: ViewModels.DocumentExplorerState.newDocumentInvalid, enabled: false, visible: false });
-      testCases.add({ state: ViewModels.DocumentExplorerState.exisitingDocumentNoEdits, enabled: true, visible: true });
+      testCases.add({ state: ViewModels.DocumentExplorerState.existingDocumentNoEdits, enabled: true, visible: true });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyValid,
         enabled: true,
         visible: true,
       });
       testCases.add({
-        state: ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid,
+        state: ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid,
         enabled: true,
         visible: true,
       });
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 1fb6ed9db..06d472d5b 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -146,7 +146,7 @@ export const getDiscardNewDocumentChangesButtonState = (editorState: ViewModels.
 export const getSaveExistingDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
   enabled: (() => {
     switch (editorState) {
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
         return true;
       default:
         return false;
@@ -155,9 +155,9 @@ export const getSaveExistingDocumentButtonState = (editorState: ViewModels.Docum
 
   visible: (() => {
     switch (editorState) {
-      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+      case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
         return true;
       default:
         return false;
@@ -169,8 +169,8 @@ export const getSaveExistingDocumentButtonState = (editorState: ViewModels.Docum
 export const getDiscardExistingDocumentChangesButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
   enabled: (() => {
     switch (editorState) {
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
         return true;
       default:
         return false;
@@ -179,9 +179,9 @@ export const getDiscardExistingDocumentChangesButtonState = (editorState: ViewMo
 
   visible: (() => {
     switch (editorState) {
-      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+      case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
         return true;
       default:
         return false;
@@ -368,7 +368,7 @@ const getNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState
   enabled: (() => {
     switch (editorState) {
       case ViewModels.DocumentExplorerState.noDocumentSelected:
-      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
         return true;
       default:
         return false;
@@ -588,15 +588,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   const isEditorDirty = useCallback((): boolean => {
     switch (editorState) {
       case ViewModels.DocumentExplorerState.noDocumentSelected:
-      case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+      case ViewModels.DocumentExplorerState.existingDocumentNoEdits:
         return false;
 
       case ViewModels.DocumentExplorerState.newDocumentValid:
       case ViewModels.DocumentExplorerState.newDocumentInvalid:
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid:
         return true;
 
-      case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+      case ViewModels.DocumentExplorerState.existingDocumentDirtyValid:
         return true;
 
       default:
@@ -685,7 +685,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
           ids.push(id);
 
           setDocumentIds(ids);
-          setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
           TelemetryProcessor.traceSuccess(
             Action.CreateDocument,
             {
@@ -759,7 +759,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
               documentId.id(updatedDocument.id);
             }
           });
-          setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
           TelemetryProcessor.traceSuccess(
             Action.UpdateDocument,
             {
@@ -1179,7 +1179,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       setInitialDocumentContent(content);
 
       const newState = documentId
-        ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
+        ? ViewModels.DocumentExplorerState.existingDocumentNoEdits
         : ViewModels.DocumentExplorerState.newDocumentValid;
       setEditorState(newState);
     }
@@ -1193,7 +1193,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       newContent === initialDocumentContent &&
       editorState !== ViewModels.DocumentExplorerState.newDocumentValid
     ) {
-      setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+      setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
       return;
     }
 
@@ -1221,7 +1221,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       return;
     }
 
-    setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
+    setEditorState(ViewModels.DocumentExplorerState.existingDocumentDirtyValid);
   };
 
   const onInvalidDocumentEdit = (): void => {
@@ -1234,10 +1234,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
 
     if (
-      editorState === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
-      editorState === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
+      editorState === ViewModels.DocumentExplorerState.existingDocumentNoEdits ||
+      editorState === ViewModels.DocumentExplorerState.existingDocumentDirtyValid
     ) {
-      setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
+      setEditorState(ViewModels.DocumentExplorerState.existingDocumentDirtyInvalid);
       return;
     }
   };
@@ -1280,7 +1280,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
       // If only one selection, we consider as a click
       if (selectedRows.size === 1) {
-        setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+        setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
       }
 
       setSelectedRows(selectedRows);
@@ -1443,7 +1443,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
             setSelectedDocumentContentBaseline(value);
 
             setDocumentIds(ids);
-            setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+            setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
             TelemetryProcessor.traceSuccess(
               Action.CreateDocument,
               {
@@ -1514,7 +1514,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                 documentId.id(id.id());
               }
             });
-            setEditorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+            setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
             TelemetryProcessor.traceSuccess(
               Action.UpdateDocument,
               {
diff --git a/src/Explorer/Tabs/ScriptTabBase.ts b/src/Explorer/Tabs/ScriptTabBase.ts
index 240941390..de2183c61 100644
--- a/src/Explorer/Tabs/ScriptTabBase.ts
+++ b/src/Explorer/Tabs/ScriptTabBase.ts
@@ -53,7 +53,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     if (this.isNew()) {
       this.editorState = ko.observable(ViewModels.ScriptEditorState.newInvalid);
     } else {
-      this.editorState = ko.observable(ViewModels.ScriptEditorState.exisitingNoEdits);
+      this.editorState = ko.observable(ViewModels.ScriptEditorState.existingNoEdits);
     }
 
     this.id = editable.observable<string>();
@@ -77,15 +77,15 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
             this.editorState(ViewModels.ScriptEditorState.newInvalid);
           }
           break;
-        case ViewModels.ScriptEditorState.exisitingDirtyInvalid:
-        case ViewModels.ScriptEditorState.exisitingDirtyValid:
+        case ViewModels.ScriptEditorState.existingDirtyInvalid:
+        case ViewModels.ScriptEditorState.existingDirtyValid:
           if (isValid) {
-            this.editorState(ViewModels.ScriptEditorState.exisitingDirtyValid);
+            this.editorState(ViewModels.ScriptEditorState.existingDirtyValid);
           } else {
-            this.editorState(ViewModels.ScriptEditorState.exisitingDirtyInvalid);
+            this.editorState(ViewModels.ScriptEditorState.existingDirtyInvalid);
           }
           break;
-        case ViewModels.ScriptEditorState.exisitingDirtyValid:
+        case ViewModels.ScriptEditorState.existingDirtyValid:
         default:
           break;
       }
diff --git a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
index ce8c6ac45..1f230b305 100644
--- a/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
+++ b/src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
@@ -404,7 +404,7 @@ export default class StoredProcedureTabComponent extends React.Component<
           this.node = this.collection.createStoredProcedureNode(createdResource);
           this.props.scriptTabBaseInstance.node = this.node;
           useTabs.getState().updateTab(this.props.scriptTabBaseInstance);
-          this.props.scriptTabBaseInstance.editorState(ViewModels.ScriptEditorState.exisitingNoEdits);
+          this.props.scriptTabBaseInstance.editorState(ViewModels.ScriptEditorState.existingNoEdits);
 
           this.setState({
             executeButton: {
diff --git a/src/Explorer/Tabs/TriggerTabContent.tsx b/src/Explorer/Tabs/TriggerTabContent.tsx
index 5fd28502a..28e81ee38 100644
--- a/src/Explorer/Tabs/TriggerTabContent.tsx
+++ b/src/Explorer/Tabs/TriggerTabContent.tsx
@@ -114,7 +114,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           },
           startKey,
         );
-        this.props.editorState(ViewModels.ScriptEditorState.exisitingNoEdits);
+        this.props.editorState(ViewModels.ScriptEditorState.existingNoEdits);
         this.props.isExecuting(false);
       }
     } catch (createError) {
diff --git a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
index 98b90c045..97d83b747 100644
--- a/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
+++ b/src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
@@ -161,7 +161,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           },
           startKey,
         );
-        this.props.editorState(ViewModels.ScriptEditorState.exisitingNoEdits);
+        this.props.editorState(ViewModels.ScriptEditorState.existingNoEdits);
       }
     } catch (createError) {
       this.props.isExecutionError(true);

From 98c5fe65e6b57142d8a26b66d1d0e93c3e5258cc Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 29 May 2024 09:56:27 -0700
Subject: [PATCH 45/67] Use new Fluent-based Resource Tree for all environments
 (#1841)

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>
---
 .eslintignore                                 |    2 +-
 src/Common/ResourceTreeContainer.tsx          |   12 +-
 src/Contracts/ViewModels.ts                   |    5 +
 src/Explorer/ContextMenuButtonFactory.tsx     |    2 +-
 ....test.tsx => LegacyTreeComponent.test.tsx} |   54 +-
 ...eComponent.tsx => LegacyTreeComponent.tsx} |   95 +-
 .../TreeComponent/TreeNodeComponent.test.tsx  |  180 ++
 .../TreeComponent/TreeNodeComponent.tsx       |  206 ++
 ...snap => LegacyTreeComponent.test.tsx.snap} |   34 +-
 .../TreeNodeComponent.test.tsx.snap           | 1927 +++++++++++++++
 .../TreeComponent2/TreeNode2Component.tsx     |  147 --
 src/Explorer/Explorer.tsx                     |    8 -
 src/Explorer/Panes/AddCollectionPanel.tsx     |    3 +-
 .../Panes/PanelContainerComponent.tsx         |    1 +
 .../PanelContainerComponent.test.tsx.snap     |    2 +
 src/Explorer/Tree/ResourceTokenTree.tsx       |   65 -
 src/Explorer/Tree/ResourceTree.tsx            |  776 ++----
 .../Tree/ResourceTreeAdapter.test.tsx         |   12 +-
 src/Explorer/Tree/ResourceTreeAdapter.tsx     |  147 +-
 src/Explorer/Tree/SampleDataTree.tsx          |    8 +-
 .../ResourceTreeAdapter.test.tsx.snap         |    2 +-
 .../__snapshots__/treeNodeUtil.test.ts.snap   | 2074 +++++++++++++++++
 src/Explorer/Tree/treeNodeUtil.test.ts        |  602 +++++
 .../treeNodeUtil.ts}                          |  233 +-
 src/Explorer/Tree2/ResourceTree.tsx           |  107 -
 src/Explorer/Tree2/useDatabaseTreeNodes.ts    |   90 -
 src/UserContext.ts                            |    2 +-
 src/Utils/PromiseSource.ts                    |   18 +
 test/cassandra/container.spec.ts              |   38 +-
 test/graph/container.spec.ts                  |   34 +-
 test/mongo/container.spec.ts                  |   45 +-
 test/mongo/container32.spec.ts                |   41 +-
 test/sql/container.spec.ts                    |   38 +-
 test/sql/resourceToken.spec.ts                |   16 +-
 test/tables/container.spec.ts                 |   27 +-
 test/testExplorer/TestExplorer.ts             |    4 +-
 test/utils/shared.ts                          |   49 +
 utils/generateResourceToken.js                |   93 +-
 38 files changed, 5866 insertions(+), 1333 deletions(-)
 rename src/Explorer/Controls/TreeComponent/{TreeComponent.test.tsx => LegacyTreeComponent.test.tsx} (70%)
 rename src/Explorer/Controls/TreeComponent/{TreeComponent.tsx => LegacyTreeComponent.tsx} (77%)
 create mode 100644 src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
 create mode 100644 src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
 rename src/Explorer/Controls/TreeComponent/__snapshots__/{TreeComponent.test.tsx.snap => LegacyTreeComponent.test.tsx.snap} (94%)
 create mode 100644 src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
 delete mode 100644 src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx
 delete mode 100644 src/Explorer/Tree/ResourceTokenTree.tsx
 create mode 100644 src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap
 create mode 100644 src/Explorer/Tree/treeNodeUtil.test.ts
 rename src/Explorer/{Tree2/containerTreeNodeUtil.ts => Tree/treeNodeUtil.ts} (59%)
 delete mode 100644 src/Explorer/Tree2/ResourceTree.tsx
 delete mode 100644 src/Explorer/Tree2/useDatabaseTreeNodes.ts
 create mode 100644 src/Utils/PromiseSource.ts

diff --git a/.eslintignore b/.eslintignore
index 20cdeb4c3..f7ed8b5f9 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -125,7 +125,7 @@ src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
-src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
diff --git a/src/Common/ResourceTreeContainer.tsx b/src/Common/ResourceTreeContainer.tsx
index e3968c112..0259c42e2 100644
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -1,14 +1,10 @@
-import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
-import { AuthType } from "../AuthType";
 import Explorer from "../Explorer/Explorer";
-import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
-import { ResourceTree2 } from "../Explorer/Tree2/ResourceTree";
+import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
 import { getApiShortDisplayName } from "../Utils/APITypeUtils";
-import { Platform, configContext } from "./../ConfigContext";
 import { NormalizedEventKey } from "./Constants";
 
 export interface ResourceTreeContainerProps {
@@ -74,12 +70,8 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
             </div>
           </div>
         </div>
-        {userContext.authType === AuthType.ResourceToken ? (
-          <ResourceTokenTree />
-        ) : userContext.features.enableKoResourceTree ? (
+        {userContext.features.enableKoResourceTree ? (
           <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
-        ) : configContext.platform === Platform.Fabric ? (
-          <ResourceTree2 container={container} />
         ) : (
           <ResourceTree container={container} />
         )}
diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index e50ba6769..af69452f1 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -176,6 +176,11 @@ export interface Collection extends CollectionBase {
   loadTriggers(): Promise<any>;
   loadOffer(): Promise<void>;
 
+  showStoredProcedures: ko.Observable<boolean>;
+  showTriggers: ko.Observable<boolean>;
+  showUserDefinedFunctions: ko.Observable<boolean>;
+  showConflicts: ko.Observable<boolean>;
+
   createStoredProcedureNode(data: StoredProcedureDefinition & Resource): StoredProcedure;
   createUserDefinedFunctionNode(data: UserDefinedFunctionDefinition & Resource): UserDefinedFunction;
   createTriggerNode(data: TriggerDefinition | SqlTriggerResource): Trigger;
diff --git a/src/Explorer/ContextMenuButtonFactory.tsx b/src/Explorer/ContextMenuButtonFactory.tsx
index d9f9f3439..90c78e365 100644
--- a/src/Explorer/ContextMenuButtonFactory.tsx
+++ b/src/Explorer/ContextMenuButtonFactory.tsx
@@ -1,3 +1,4 @@
+import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import { useDatabases } from "Explorer/useDatabases";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
@@ -19,7 +20,6 @@ import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { Platform, configContext } from "./../ConfigContext";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
diff --git a/src/Explorer/Controls/TreeComponent/TreeComponent.test.tsx b/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.test.tsx
similarity index 70%
rename from src/Explorer/Controls/TreeComponent/TreeComponent.test.tsx
rename to src/Explorer/Controls/TreeComponent/LegacyTreeComponent.test.tsx
index 1138f0b45..fdb0b8fee 100644
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.test.tsx
+++ b/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.test.tsx
@@ -1,48 +1,48 @@
-import React from "react";
 import { shallow } from "enzyme";
-import { TreeComponent, TreeNode, TreeNodeComponent } from "./TreeComponent";
+import React from "react";
+import { LegacyTreeComponent, LegacyTreeNode, LegacyTreeNodeComponent } from "./LegacyTreeComponent";
 
-const buildChildren = (): TreeNode[] => {
-  const grandChild11: TreeNode = {
+const buildChildren = (): LegacyTreeNode[] => {
+  const grandChild11: LegacyTreeNode = {
     label: "ZgrandChild11",
   };
-  const grandChild12: TreeNode = {
+  const grandChild12: LegacyTreeNode = {
     label: "AgrandChild12",
   };
-  const child1: TreeNode = {
+  const child1: LegacyTreeNode = {
     label: "Bchild1",
     children: [grandChild11, grandChild12],
   };
 
-  const child2: TreeNode = {
+  const child2: LegacyTreeNode = {
     label: "2child2",
   };
 
   return [child1, child2];
 };
 
-const buildChildren2 = (): TreeNode[] => {
-  const grandChild11: TreeNode = {
+const buildChildren2 = (): LegacyTreeNode[] => {
+  const grandChild11: LegacyTreeNode = {
     label: "ZgrandChild11",
   };
-  const grandChild12: TreeNode = {
+  const grandChild12: LegacyTreeNode = {
     label: "AgrandChild12",
   };
 
-  const child1: TreeNode = {
+  const child1: LegacyTreeNode = {
     label: "aChild",
   };
 
-  const child2: TreeNode = {
+  const child2: LegacyTreeNode = {
     label: "bchild",
     children: [grandChild11, grandChild12],
   };
 
-  const child3: TreeNode = {
+  const child3: LegacyTreeNode = {
     label: "cchild",
   };
 
-  const child4: TreeNode = {
+  const child4: LegacyTreeNode = {
     label: "dchild",
     children: [grandChild11, grandChild12],
   };
@@ -50,7 +50,7 @@ const buildChildren2 = (): TreeNode[] => {
   return [child1, child2, child3, child4];
 };
 
-describe("TreeComponent", () => {
+describe("LegacyTreeComponent", () => {
   it("renders a simple tree", () => {
     const root = {
       label: "root",
@@ -62,14 +62,14 @@ describe("TreeComponent", () => {
       className: "tree",
     };
 
-    const wrapper = shallow(<TreeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });
 
-describe("TreeNodeComponent", () => {
+describe("LegacyTreeNodeComponent", () => {
   it("renders a simple node (sorted children, expanded)", () => {
-    const node: TreeNode = {
+    const node: LegacyTreeNode = {
       label: "label",
       id: "id",
       children: buildChildren(),
@@ -98,12 +98,12 @@ describe("TreeNodeComponent", () => {
       generation: 12,
       paddingLeft: 23,
     };
-    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders unsorted children by default", () => {
-    const node: TreeNode = {
+    const node: LegacyTreeNode = {
       label: "label",
       children: buildChildren(),
       isExpanded: true,
@@ -113,12 +113,12 @@ describe("TreeNodeComponent", () => {
       generation: 2,
       paddingLeft: 9,
     };
-    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("does not render children by default", () => {
-    const node: TreeNode = {
+    const node: LegacyTreeNode = {
       label: "label",
       children: buildChildren(),
       isAlphaSorted: false,
@@ -128,12 +128,12 @@ describe("TreeNodeComponent", () => {
       generation: 2,
       paddingLeft: 9,
     };
-    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders sorted children, expanded, leaves and parents separated", () => {
-    const node: TreeNode = {
+    const node: LegacyTreeNode = {
       label: "label",
       id: "id",
       children: buildChildren2(),
@@ -156,12 +156,12 @@ describe("TreeNodeComponent", () => {
       generation: 12,
       paddingLeft: 23,
     };
-    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("renders loading icon", () => {
-    const node: TreeNode = {
+    const node: LegacyTreeNode = {
       label: "label",
       children: [],
       isExpanded: true,
@@ -172,7 +172,7 @@ describe("TreeNodeComponent", () => {
       generation: 2,
       paddingLeft: 9,
     };
-    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeNodeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx b/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
similarity index 77%
rename from src/Explorer/Controls/TreeComponent/TreeComponent.tsx
rename to src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
index 4cf601047..80a682dda 100644
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
@@ -12,6 +12,7 @@ import {
   IContextualMenuItemProps,
   IContextualMenuProps,
 } from "@fluentui/react";
+import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
@@ -22,18 +23,10 @@ import { StyleConstants } from "../../../Common/StyleConstants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
-export interface TreeNodeMenuItem {
-  label: string;
-  onClick: () => void;
-  iconSrc?: string;
-  isDisabled?: boolean;
-  styleClass?: string;
-}
-
-export interface TreeNode {
+export interface LegacyTreeNode {
   label: string;
   id?: string;
-  children?: TreeNode[];
+  children?: LegacyTreeNode[];
   contextMenu?: TreeNodeMenuItem[];
   iconSrc?: string;
   isExpanded?: boolean;
@@ -50,34 +43,37 @@ export interface TreeNode {
   onContextMenuOpen?: () => void;
 }
 
-export interface TreeComponentProps {
-  rootNode: TreeNode;
+export interface LegacyTreeComponentProps {
+  rootNode: LegacyTreeNode;
   style?: any;
   className?: string;
 }
 
-export class TreeComponent extends React.Component<TreeComponentProps> {
+export class LegacyTreeComponent extends React.Component<LegacyTreeComponentProps> {
   public render(): JSX.Element {
     return (
       <div style={this.props.style} className={`treeComponent ${this.props.className}`} role="tree">
-        <TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
+        <LegacyTreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
       </div>
     );
   }
 }
 
 /* Tree node is a react component */
-interface TreeNodeComponentProps {
-  node: TreeNode;
+interface LegacyTreeNodeComponentProps {
+  node: LegacyTreeNode;
   generation: number;
   paddingLeft: number;
 }
 
-interface TreeNodeComponentState {
+interface LegacyTreeNodeComponentState {
   isExpanded: boolean;
   isMenuShowing: boolean;
 }
-export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, TreeNodeComponentState> {
+export class LegacyTreeNodeComponent extends React.Component<
+  LegacyTreeNodeComponentProps,
+  LegacyTreeNodeComponentState
+> {
   private static readonly paddingPerGenerationPx = 16;
   private static readonly iconOffset = 22;
   private static readonly transitionDurationMS = 200;
@@ -85,7 +81,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
   private contextMenuRef = React.createRef<HTMLDivElement>();
   private isExpanded: boolean;
 
-  constructor(props: TreeNodeComponentProps) {
+  constructor(props: LegacyTreeNodeComponentProps) {
     super(props);
     this.isExpanded = props.node.isExpanded;
     this.state = {
@@ -94,13 +90,13 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     };
   }
 
-  componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
+  componentDidUpdate(prevProps: LegacyTreeNodeComponentProps, prevState: LegacyTreeNodeComponentState) {
     // Only call when expand has actually changed
     if (this.state.isExpanded !== prevState.isExpanded) {
       if (this.state.isExpanded) {
-        this.props.node.onExpanded && setTimeout(this.props.node.onExpanded, TreeNodeComponent.callbackDelayMS);
+        this.props.node.onExpanded && setTimeout(this.props.node.onExpanded, LegacyTreeNodeComponent.callbackDelayMS);
       } else {
-        this.props.node.onCollapsed && setTimeout(this.props.node.onCollapsed, TreeNodeComponent.callbackDelayMS);
+        this.props.node.onCollapsed && setTimeout(this.props.node.onCollapsed, LegacyTreeNodeComponent.callbackDelayMS);
       }
     }
     if (this.props.node.isExpanded !== this.isExpanded) {
@@ -115,18 +111,18 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     return this.renderNode(this.props.node, this.props.generation);
   }
 
-  private static getSortedChildren(treeNode: TreeNode): TreeNode[] {
+  private static getSortedChildren(treeNode: LegacyTreeNode): LegacyTreeNode[] {
     if (!treeNode || !treeNode.children) {
       return undefined;
     }
 
-    const compareFct = (a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label);
+    const compareFct = (a: LegacyTreeNode, b: LegacyTreeNode) => a.label.localeCompare(b.label);
 
     let unsortedChildren;
     if (treeNode.isLeavesParentsSeparate) {
       // Separate parents and leave
-      const parents: TreeNode[] = treeNode.children.filter((node) => node.children);
-      const leaves: TreeNode[] = treeNode.children.filter((node) => !node.children);
+      const parents: LegacyTreeNode[] = treeNode.children.filter((node) => node.children);
+      const leaves: LegacyTreeNode[] = treeNode.children.filter((node) => !node.children);
 
       if (treeNode.isAlphaSorted) {
         parents.sort(compareFct);
@@ -141,18 +137,18 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     return unsortedChildren;
   }
 
-  private static isNodeHeaderBlank(node: TreeNode): boolean {
+  private static isNodeHeaderBlank(node: LegacyTreeNode): boolean {
     return (node.label === undefined || node.label === null) && !node.contextMenu;
   }
 
-  private renderNode(node: TreeNode, generation: number): JSX.Element {
-    let paddingLeft = generation * TreeNodeComponent.paddingPerGenerationPx;
+  private renderNode(node: LegacyTreeNode, generation: number): JSX.Element {
+    const paddingLeft = generation * LegacyTreeNodeComponent.paddingPerGenerationPx;
     let additionalOffsetPx = 15;
 
     if (node.children) {
-      const childrenWithSubChildren = node.children.filter((child: TreeNode) => !!child.children);
+      const childrenWithSubChildren = node.children.filter((child: LegacyTreeNode) => !!child.children);
       if (childrenWithSubChildren.length > 0) {
-        additionalOffsetPx = TreeNodeComponent.iconOffset;
+        additionalOffsetPx = LegacyTreeNodeComponent.iconOffset;
       }
     }
 
@@ -160,10 +156,10 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     const showSelected =
       this.props.node.isSelected &&
       this.props.node.isSelected() &&
-      !TreeNodeComponent.isAnyDescendantSelected(this.props.node);
+      !LegacyTreeNodeComponent.isAnyDescendantSelected(this.props.node);
 
     const headerStyle: React.CSSProperties = { paddingLeft: this.props.paddingLeft };
-    if (TreeNodeComponent.isNodeHeaderBlank(node)) {
+    if (LegacyTreeNodeComponent.isNodeHeaderBlank(node)) {
       headerStyle.height = 0;
       headerStyle.padding = 0;
     }
@@ -195,10 +191,13 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
           <img className="loadingIcon" src={LoadingIndicator_3Squares} hidden={!this.props.node.isLoading} />
         </div>
         {node.children && (
-          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
+          <AnimateHeight
+            duration={LegacyTreeNodeComponent.transitionDurationMS}
+            height={this.state.isExpanded ? "auto" : 0}
+          >
             <div className="nodeChildren" data-test={node.label} role="group">
-              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
-                <TreeNodeComponent
+              {LegacyTreeNodeComponent.getSortedChildren(node).map((childNode: LegacyTreeNode) => (
+                <LegacyTreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
                   node={childNode}
                   generation={generation + 1}
@@ -216,12 +215,14 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
    * Recursive: is the node or any descendant selected
    * @param node
    */
-  private static isAnyDescendantSelected(node: TreeNode): boolean {
+  private static isAnyDescendantSelected(node: LegacyTreeNode): boolean {
     return (
       node.children &&
       node.children.reduce(
-        (previous: boolean, child: TreeNode) =>
-          previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
+        (previous: boolean, child: LegacyTreeNode) =>
+          previous ||
+          (child.isSelected && child.isSelected()) ||
+          LegacyTreeNodeComponent.isAnyDescendantSelected(child),
         false,
       )
     );
@@ -232,10 +233,10 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
   }
 
   private onRightClick = (): void => {
-    this.contextMenuRef.current.firstChild.dispatchEvent(TreeNodeComponent.createClickEvent());
+    this.contextMenuRef.current.firstChild.dispatchEvent(LegacyTreeNodeComponent.createClickEvent());
   };
 
-  private renderContextMenuButton(node: TreeNode): JSX.Element {
+  private renderContextMenuButton(node: LegacyTreeNode): JSX.Element {
     const menuItemLabel = "More";
     const buttonStyles: Partial<IButtonStyles> = {
       rootFocused: { outline: `1px dashed ${StyleConstants.FocusColor}` },
@@ -265,7 +266,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
               <div
                 data-test={`treeComponentMenuItemContainer`}
                 className="treeComponentMenuItemContainer"
-                onContextMenu={(e) => e.target.dispatchEvent(TreeNodeComponent.createClickEvent())}
+                onContextMenu={(e) => e.target.dispatchEvent(LegacyTreeNodeComponent.createClickEvent())}
               >
                 {props.item.onRenderIcon()}
                 <span
@@ -297,7 +298,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     );
   }
 
-  private renderCollapseExpandIcon(node: TreeNode): JSX.Element {
+  private renderCollapseExpandIcon(node: LegacyTreeNode): JSX.Element {
     if (!node.children || !node.label) {
       return <></>;
     }
@@ -314,12 +315,12 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     );
   }
 
-  private onNodeClick = (event: React.MouseEvent<HTMLDivElement>, node: TreeNode): void => {
+  private onNodeClick = (event: React.MouseEvent<HTMLDivElement>, node: LegacyTreeNode): void => {
     event.stopPropagation();
     if (node.children) {
       const isExpanded = !this.state.isExpanded;
       // Prevent collapsing if node header is blank
-      if (!(TreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
+      if (!(LegacyTreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
         this.setState({ isExpanded });
       }
     }
@@ -327,14 +328,14 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
   };
 
-  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
+  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: LegacyTreeNode): void => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
     }
   };
 
-  private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
+  private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: LegacyTreeNode): void => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       if (node.children) {
diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
new file mode 100644
index 000000000..602edcb2a
--- /dev/null
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
@@ -0,0 +1,180 @@
+import { TreeItem, TreeItemLayout, tokens } from "@fluentui/react-components";
+import PromiseSource from "Utils/PromiseSource";
+import { mount, shallow } from "enzyme";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { TreeNode, TreeNodeComponent } from "./TreeNodeComponent";
+
+function generateTestNode(id: string, additionalProps?: Partial<TreeNode>): TreeNode {
+  const node: TreeNode = {
+    id,
+    label: `${id}Label`,
+    className: `${id}Class`,
+    iconSrc: `${id}Icon`,
+    onClick: jest.fn().mockName(`${id}Click`),
+    ...additionalProps,
+  };
+  return node;
+}
+
+describe("TreeNodeComponent", () => {
+  it("renders a single node", () => {
+    const node = generateTestNode("root");
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component).toMatchSnapshot();
+
+    // The "click" handler is actually attached to onOpenChange, with a type of "Click".
+    component
+      .find(TreeItem)
+      .props()
+      .onOpenChange(null!, { open: true, value: "borp", target: null!, event: null!, type: "Click" });
+    expect(node.onClick).toHaveBeenCalled();
+  });
+
+  it("renders a node with a menu", () => {
+    const node = generateTestNode("root", {
+      contextMenu: [
+        {
+          label: "enabledItem",
+          onClick: jest.fn().mockName("enabledItemClick"),
+        },
+        {
+          label: "disabledItem",
+          onClick: jest.fn().mockName("disabledItemClick"),
+          isDisabled: true,
+        },
+      ],
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders a loading spinner if the node is loading", async () => {
+    const loading = new PromiseSource();
+    const node = generateTestNode("root", {
+      onExpanded: () => loading.promise,
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+
+    act(() => {
+      component
+        .find(TreeItem)
+        .props()
+        .onOpenChange(null!, { open: true, value: "borp", target: null!, event: null!, type: "ExpandIconClick" });
+    });
+
+    expect(component).toMatchSnapshot("loading");
+    await loading.resolveAndWait();
+    expect(component).toMatchSnapshot("loaded");
+  });
+
+  it("renders single selected leaf node as selected", () => {
+    const node = generateTestNode("root", {
+      isSelected: () => true,
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
+      tokens.colorNeutralBackground1Selected,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders selected parent node as selected if no descendant nodes are selected", () => {
+    const node = generateTestNode("root", {
+      isSelected: () => true,
+      children: [
+        generateTestNode("child1", {
+          children: [generateTestNode("grandchild1"), generateTestNode("grandchild2")],
+        }),
+        generateTestNode("child2"),
+      ],
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
+      tokens.colorNeutralBackground1Selected,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders selected parent node as unselected if any descendant node is selected", () => {
+    const node = generateTestNode("root", {
+      isSelected: () => true,
+      children: [
+        generateTestNode("child1", {
+          children: [
+            generateTestNode("grandchild1", {
+              isSelected: () => true,
+            }),
+            generateTestNode("grandchild2"),
+          ],
+        }),
+        generateTestNode("child2"),
+      ],
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component.find(TreeItemLayout).props().style?.backgroundColor).toBeUndefined();
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders an icon if the node has one", () => {
+    const node = generateTestNode("root", {
+      iconSrc: "the-icon.svg",
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("does not render children if the node is loading", () => {
+    const node = generateTestNode("root", {
+      isLoading: true,
+      children: [
+        generateTestNode("child1", {
+          children: [generateTestNode("grandchild1"), generateTestNode("grandchild2")],
+        }),
+        generateTestNode("child2"),
+      ],
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it("fully renders a tree", () => {
+    const child3Loading = new PromiseSource();
+    const node = generateTestNode("root", {
+      isSelected: () => true,
+      children: [
+        generateTestNode("child1", {
+          children: [
+            generateTestNode("grandchild1", {
+              iconSrc: "grandchild1Icon.svg",
+              isSelected: () => true,
+            }),
+            generateTestNode("grandchild2"),
+          ],
+        }),
+        generateTestNode("child2Loading", {
+          isLoading: true,
+          children: [generateTestNode("grandchild3NotRendered")],
+        }),
+        generateTestNode("child3Expanding", {
+          onExpanded: () => child3Loading.promise,
+        }),
+      ],
+    });
+    const component = mount(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+
+    // Find and expand the child3Expanding node
+    const expandingChild = component.find(TreeItem).filterWhere((n) => n.props().value === "root/child3ExpandingLabel");
+    act(() => {
+      expandingChild.props().onOpenChange(null!, {
+        open: true,
+        value: "root/child3ExpandingLabel",
+        target: null!,
+        event: null!,
+        type: "Click",
+      });
+    });
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
new file mode 100644
index 000000000..1717530ec
--- /dev/null
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -0,0 +1,206 @@
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuOpenChangeData,
+  MenuOpenEvent,
+  MenuPopover,
+  MenuTrigger,
+  Spinner,
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+} from "@fluentui/react-components";
+import { MoreHorizontal20Regular } from "@fluentui/react-icons";
+import { tokens } from "@fluentui/react-theme";
+import * as React from "react";
+import { useCallback } from "react";
+
+export interface TreeNodeMenuItem {
+  label: string;
+  onClick: () => void;
+  iconSrc?: string;
+  isDisabled?: boolean;
+  styleClass?: string;
+}
+
+export interface TreeNode {
+  label: string;
+  id?: string;
+  children?: TreeNode[];
+  contextMenu?: TreeNodeMenuItem[];
+  iconSrc?: string;
+  isExpanded?: boolean;
+  className?: string;
+  isAlphaSorted?: boolean;
+  // data?: any; // Piece of data corresponding to this node
+  timestamp?: number;
+  isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
+  isLoading?: boolean;
+  isScrollable?: boolean;
+  isSelected?: () => boolean;
+  onClick?: () => void; // Only if a leaf, other click will expand/collapse
+  onExpanded?: () => Promise<void>;
+  onCollapsed?: () => void;
+  onContextMenuOpen?: () => void;
+}
+
+export interface TreeNodeComponentProps {
+  node: TreeNode;
+  className?: string;
+  treeNodeId: string;
+}
+
+/** Function that returns true if any descendant (at any depth) of this node is selected. */
+function isAnyDescendantSelected(node: TreeNode): boolean {
+  return (
+    node.children &&
+    node.children.reduce(
+      (previous: boolean, child: TreeNode) =>
+        previous || (child.isSelected && child.isSelected()) || isAnyDescendantSelected(child),
+      false,
+    )
+  );
+}
+
+const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 16, height: 16 }} />;
+
+export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
+  node,
+  treeNodeId,
+}: TreeNodeComponentProps): JSX.Element => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+
+  const getSortedChildren = (treeNode: TreeNode): TreeNode[] => {
+    if (!treeNode || !treeNode.children) {
+      return undefined;
+    }
+
+    const compareFct = (a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label);
+
+    let unsortedChildren;
+    if (treeNode.isLeavesParentsSeparate) {
+      // Separate parents and leave
+      const parents: TreeNode[] = treeNode.children.filter((node) => node.children);
+      const leaves: TreeNode[] = treeNode.children.filter((node) => !node.children);
+
+      if (treeNode.isAlphaSorted) {
+        parents.sort(compareFct);
+        leaves.sort(compareFct);
+      }
+
+      unsortedChildren = parents.concat(leaves);
+    } else {
+      unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
+    }
+
+    return unsortedChildren;
+  };
+
+  const isBranch = node.children?.length > 0;
+
+  const onOpenChange = useCallback(
+    (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
+      if (data.type === "Click" && !isBranch && node.onClick) {
+        node.onClick();
+      }
+      if (!node.isExpanded && data.open && node.onExpanded) {
+        // Catch the transition non-expanded to expanded
+        setIsLoading(true);
+        node.onExpanded?.().then(() => setIsLoading(false));
+      } else if (node.isExpanded && !data.open && node.onCollapsed) {
+        // Catch the transition expanded to non-expanded
+        node.onCollapsed?.();
+      }
+    },
+    [isBranch, node, setIsLoading],
+  );
+
+  const onMenuOpenChange = useCallback(
+    (e: MenuOpenEvent, data: MenuOpenChangeData) => {
+      if (data.open) {
+        node.onContextMenuOpen?.();
+      }
+    },
+    [node],
+  );
+
+  // We show a node as selected if it is selected AND no descendant is selected.
+  // We want to show only the deepest selected node as selected.
+  const isCurrentNodeSelected = node.isSelected && node.isSelected();
+  const shouldShowAsSelected = isCurrentNodeSelected && !isAnyDescendantSelected(node);
+
+  const contextMenuItems = (node.contextMenu ?? []).map((menuItem) => (
+    <MenuItem
+      data-test={`TreeNode/ContextMenuItem:${menuItem.label}`}
+      disabled={menuItem.isDisabled}
+      key={menuItem.label}
+      onClick={menuItem.onClick}
+    >
+      {menuItem.label}
+    </MenuItem>
+  ));
+
+  const treeItem = (
+    <TreeItem
+      value={treeNodeId}
+      itemType={isBranch ? "branch" : "leaf"}
+      style={{ height: "100%" }}
+      onOpenChange={onOpenChange}
+    >
+      <TreeItemLayout
+        className={node.className}
+        data-test={`TreeNode:${treeNodeId}`}
+        actions={
+          contextMenuItems.length > 0 && (
+            <Menu onOpenChange={onMenuOpenChange}>
+              <MenuTrigger disableButtonEnhancement>
+                <Button
+                  aria-label="More options"
+                  data-test="TreeNode/ContextMenuTrigger"
+                  appearance="subtle"
+                  icon={<MoreHorizontal20Regular />}
+                />
+              </MenuTrigger>
+              <MenuPopover data-test={`TreeNode/ContextMenu:${treeNodeId}`}>
+                <MenuList>{contextMenuItems}</MenuList>
+              </MenuPopover>
+            </Menu>
+          )
+        }
+        expandIcon={isLoading ? <Spinner size="extra-tiny" /> : undefined}
+        iconBefore={node.iconSrc && getTreeIcon(node.iconSrc)}
+        style={{
+          backgroundColor: shouldShowAsSelected ? tokens.colorNeutralBackground1Selected : undefined,
+        }}
+      >
+        {node.label}
+      </TreeItemLayout>
+      {!node.isLoading && node.children?.length > 0 && (
+        <Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
+          {getSortedChildren(node).map((childNode: TreeNode) => (
+            <TreeNodeComponent key={childNode.label} node={childNode} treeNodeId={`${treeNodeId}/${childNode.label}`} />
+          ))}
+        </Tree>
+      )}
+    </TreeItem>
+  );
+
+  if (contextMenuItems.length === 0) {
+    return treeItem;
+  }
+
+  // For accessibility, it's highly recommended that any 'actions' also be available in the context menu.
+  // See https://react.fluentui.dev/?path=/docs/components-tree--default#actions
+  return (
+    <Menu positioning="below-end" openOnContext onOpenChange={onMenuOpenChange}>
+      <MenuTrigger disableButtonEnhancement>{treeItem}</MenuTrigger>
+      <MenuPopover>
+        <MenuList>{contextMenuItems}</MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
similarity index 94%
rename from src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
rename to src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
index dda586200..afa484490 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeComponent renders a simple tree 1`] = `
+exports[`LegacyTreeComponent renders a simple tree 1`] = `
 <div
   className="treeComponent tree"
   role="tree"
 >
-  <TreeNodeComponent
+  <LegacyTreeNodeComponent
     generation={0}
     node={
       Object {
@@ -33,7 +33,7 @@ exports[`TreeComponent renders a simple tree 1`] = `
 </div>
 `;
 
-exports[`TreeNodeComponent does not render children by default 1`] = `
+exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
 <div
   className=" main2 nodeItem "
   onClick={[Function]}
@@ -102,7 +102,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
       data-test="label"
       role="group"
     >
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={3}
         key="Bchild1-3-undefined"
         node={
@@ -120,7 +120,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
         }
         paddingLeft={32}
       />
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={3}
         key="2child2-3-undefined"
         node={
@@ -135,7 +135,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
 </div>
 `;
 
-exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
+exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
 <div
   className="nodeClassname main12 nodeItem "
   id="id"
@@ -254,7 +254,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
       data-test="label"
       role="group"
     >
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={13}
         key="2child2-13-undefined"
         node={
@@ -264,7 +264,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
         }
         paddingLeft={214}
       />
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={13}
         key="Bchild1-13-undefined"
         node={
@@ -287,7 +287,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
 </div>
 `;
 
-exports[`TreeNodeComponent renders loading icon 1`] = `
+exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
 <div
   className=" main2 nodeItem "
   onClick={[Function]}
@@ -360,7 +360,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
 </div>
 `;
 
-exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
 <div
   className="nodeClassname main12 nodeItem "
   id="id"
@@ -470,7 +470,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
       data-test="label"
       role="group"
     >
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={13}
         key="bchild-13-undefined"
         node={
@@ -488,7 +488,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
         }
         paddingLeft={192}
       />
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={13}
         key="dchild-13-undefined"
         node={
@@ -506,7 +506,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
         }
         paddingLeft={192}
       />
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={13}
         key="aChild-13-undefined"
         node={
@@ -516,7 +516,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
         }
         paddingLeft={214}
       />
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={13}
         key="cchild-13-undefined"
         node={
@@ -531,7 +531,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
 </div>
 `;
 
-exports[`TreeNodeComponent renders unsorted children by default 1`] = `
+exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
 <div
   className=" main2 nodeItem "
   onClick={[Function]}
@@ -600,7 +600,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
       data-test="label"
       role="group"
     >
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={3}
         key="Bchild1-3-undefined"
         node={
@@ -618,7 +618,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
         }
         paddingLeft={32}
       />
-      <TreeNodeComponent
+      <LegacyTreeNodeComponent
         generation={3}
         key="2child2-3-undefined"
         node={
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
new file mode 100644
index 000000000..6678f29ad
--- /dev/null
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
@@ -0,0 +1,1927 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeNodeComponent does not render children if the node is loading 1`] = `
+<TreeItem
+  itemType="branch"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent fully renders a tree 1`] = `
+<TreeNodeComponent
+  node={
+    Object {
+      "children": Array [
+        Object {
+          "children": Array [
+            Object {
+              "className": "grandchild1Class",
+              "iconSrc": "grandchild1Icon.svg",
+              "id": "grandchild1",
+              "isSelected": [Function],
+              "label": "grandchild1Label",
+              "onClick": [MockFunction grandchild1Click],
+            },
+            Object {
+              "className": "grandchild2Class",
+              "iconSrc": "grandchild2Icon",
+              "id": "grandchild2",
+              "label": "grandchild2Label",
+              "onClick": [MockFunction grandchild2Click],
+            },
+          ],
+          "className": "child1Class",
+          "iconSrc": "child1Icon",
+          "id": "child1",
+          "label": "child1Label",
+          "onClick": [MockFunction child1Click],
+        },
+        Object {
+          "children": Array [
+            Object {
+              "className": "grandchild3NotRenderedClass",
+              "iconSrc": "grandchild3NotRenderedIcon",
+              "id": "grandchild3NotRendered",
+              "label": "grandchild3NotRenderedLabel",
+              "onClick": [MockFunction grandchild3NotRenderedClick],
+            },
+          ],
+          "className": "child2LoadingClass",
+          "iconSrc": "child2LoadingIcon",
+          "id": "child2Loading",
+          "isLoading": true,
+          "label": "child2LoadingLabel",
+          "onClick": [MockFunction child2LoadingClick],
+        },
+        Object {
+          "className": "child3ExpandingClass",
+          "iconSrc": "child3ExpandingIcon",
+          "id": "child3Expanding",
+          "label": "child3ExpandingLabel",
+          "onClick": [MockFunction child3ExpandingClick] {
+            "calls": Array [
+              Array [],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          },
+          "onExpanded": [Function],
+        },
+      ],
+      "className": "rootClass",
+      "iconSrc": "rootIcon",
+      "id": "root",
+      "isSelected": [Function],
+      "label": "rootLabel",
+      "onClick": [MockFunction rootClick],
+    }
+  }
+  treeNodeId="root"
+>
+  <TreeItem
+    itemType="branch"
+    onOpenChange={[Function]}
+    style={
+      Object {
+        "height": "100%",
+      }
+    }
+    value="root"
+  >
+    <div
+      aria-expanded={false}
+      aria-level={0}
+      aria-selected="false"
+      className="fui-TreeItem r1hiwysc"
+      data-fui-tree-item-value="root"
+      onChange={[Function]}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="treeitem"
+      style={
+        Object {
+          "height": "100%",
+        }
+      }
+      tabIndex={-1}
+    >
+      <ContextSelector.Provider
+        value={
+          Object {
+            "actionsRef": Object {
+              "current": null,
+            },
+            "checked": false,
+            "expandIconRef": Object {
+              "current": <div
+                aria-hidden="true"
+                class="fui-TreeItemLayout__expandIcon rogdio4"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                  fill="currentColor"
+                  height="12"
+                  style="transform: rotate(0deg);"
+                  viewBox="0 0 12 12"
+                  width="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>,
+            },
+            "isActionsVisible": false,
+            "isAsideVisible": false,
+            "itemType": "branch",
+            "layoutRef": Object {
+              "current": <div
+                class="fui-TreeItemLayout rcu2h5o rootClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                data-test="TreeNode:root"
+              >
+                <div
+                  aria-hidden="true"
+                  class="fui-TreeItemLayout__expandIcon rogdio4"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                    fill="currentColor"
+                    height="12"
+                    style="transform: rotate(0deg);"
+                    viewBox="0 0 12 12"
+                    width="12"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  aria-hidden="true"
+                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                >
+                  <img
+                    alt=""
+                    src="rootIcon"
+                    style="width: 16px; height: 16px;"
+                  />
+                </div>
+                <div
+                  class="fui-TreeItemLayout__main rfjd92f"
+                >
+                  rootLabel
+                </div>
+              </div>,
+            },
+            "open": false,
+            "selectionRef": Object {
+              "current": null,
+            },
+            "subtreeRef": Object {
+              "current": null,
+            },
+            "treeItemRef": Object {
+              "current": <div
+                aria-expanded="false"
+                aria-level="0"
+                aria-selected="false"
+                class="fui-TreeItem r1hiwysc"
+                data-fui-tree-item-value="root"
+                role="treeitem"
+                style="height: 100%;"
+                tabindex="-1"
+              >
+                <div
+                  class="fui-TreeItemLayout rcu2h5o rootClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                  data-test="TreeNode:root"
+                >
+                  <div
+                    aria-hidden="true"
+                    class="fui-TreeItemLayout__expandIcon rogdio4"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                      fill="currentColor"
+                      height="12"
+                      style="transform: rotate(0deg);"
+                      viewBox="0 0 12 12"
+                      width="12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                  >
+                    <img
+                      alt=""
+                      src="rootIcon"
+                      style="width: 16px; height: 16px;"
+                    />
+                  </div>
+                  <div
+                    class="fui-TreeItemLayout__main rfjd92f"
+                  >
+                    rootLabel
+                  </div>
+                </div>
+                <div
+                  class="fui-Tree rnv2ez3"
+                  role="tree"
+                >
+                  <div
+                    aria-expanded="false"
+                    aria-level="1"
+                    aria-selected="false"
+                    class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                    data-fui-tree-item-value="root/child1Label"
+                    role="treeitem"
+                    style="height: 100%;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="fui-TreeItemLayout rcu2h5o child1Class ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                      data-test="TreeNode:root/child1Label"
+                    >
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__expandIcon rogdio4"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                          fill="currentColor"
+                          height="12"
+                          style="transform: rotate(0deg);"
+                          viewBox="0 0 12 12"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          src="child1Icon"
+                          style="width: 16px; height: 16px;"
+                        />
+                      </div>
+                      <div
+                        class="fui-TreeItemLayout__main rfjd92f"
+                      >
+                        child1Label
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-expanded="false"
+                    aria-level="1"
+                    aria-selected="false"
+                    class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                    data-fui-tree-item-value="root/child2LoadingLabel"
+                    role="treeitem"
+                    style="height: 100%;"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="fui-TreeItemLayout rcu2h5o child2LoadingClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                      data-test="TreeNode:root/child2LoadingLabel"
+                    >
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__expandIcon rogdio4"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                          fill="currentColor"
+                          height="12"
+                          style="transform: rotate(0deg);"
+                          viewBox="0 0 12 12"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          src="child2LoadingIcon"
+                          style="width: 16px; height: 16px;"
+                        />
+                      </div>
+                      <div
+                        class="fui-TreeItemLayout__main rfjd92f"
+                      >
+                        child2LoadingLabel
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-level="1"
+                    aria-selected="false"
+                    class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                    data-fui-tree-item-value="root/child3ExpandingLabel"
+                    role="treeitem"
+                    style="height: 100%;"
+                    tabindex="-1"
+                  >
+                    <div
+                      class="fui-TreeItemLayout rcu2h5o child3ExpandingClass ___ehtpr00_100l8p1 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc"
+                      data-test="TreeNode:root/child3ExpandingLabel"
+                    >
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__expandIcon rogdio4"
+                      >
+                        <div
+                          class="fui-Spinner ___p104zz0_oywd6f0 f22iagw f122n59 f4d9j23 fez10in f4px1ci fn67r4l f1063pyq"
+                          role="progressbar"
+                        >
+                          <span
+                            class="fui-Spinner__spinner ___rymi200_1dtscmh f1or16p5 f1grzc83 f19shzzi f5tbecn fn4mtlg f1y80fxs f1r2crtq f1wsi8sr f1bkm2qd f1urqz7h f1da2vov f11rfva0 f1exc66 f1x2gjcb f1vjiaua fv1u54w f1oebb0s f11ditju f1m9nikz fq8a5sv f1b4lwqj f1najlst fjxod4 fu3xdw0 f1ttdh6v f1eseayc folzdkc fhlfkde f13qeqtg flglbw1"
+                          >
+                            <svg
+                              class="fui-Spinner__Progressbar"
+                            >
+                              <circle
+                                class="fui-Spinner__Track"
+                              />
+                              <circle
+                                class="fui-Spinner__Tail"
+                              />
+                            </svg>
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          src="child3ExpandingIcon"
+                          style="width: 16px; height: 16px;"
+                        />
+                      </div>
+                      <div
+                        class="fui-TreeItemLayout__main rfjd92f"
+                      >
+                        child3ExpandingLabel
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>,
+            },
+            "value": "root",
+          }
+        }
+      >
+        <TreeItemLayout
+          actions={false}
+          className="rootClass"
+          data-test="TreeNode:root"
+          iconBefore={
+            <img
+              alt=""
+              src="rootIcon"
+              style={
+                Object {
+                  "height": 16,
+                  "width": 16,
+                }
+              }
+            />
+          }
+          style={
+            Object {
+              "backgroundColor": undefined,
+            }
+          }
+        >
+          <div
+            className="fui-TreeItemLayout rcu2h5o rootClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+            data-test="TreeNode:root"
+            style={
+              Object {
+                "backgroundColor": undefined,
+              }
+            }
+          >
+            <div
+              aria-hidden={true}
+              className="fui-TreeItemLayout__expandIcon rogdio4"
+            >
+              <TreeItemChevron>
+                <ChevronRight12Regular
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                    fill="currentColor"
+                    height="12"
+                    style={
+                      Object {
+                        "transform": "rotate(0deg)",
+                      }
+                    }
+                    viewBox="0 0 12 12"
+                    width="12"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </ChevronRight12Regular>
+              </TreeItemChevron>
+            </div>
+            <div
+              aria-hidden={true}
+              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+            >
+              <img
+                alt=""
+                src="rootIcon"
+                style={
+                  Object {
+                    "height": 16,
+                    "width": 16,
+                  }
+                }
+              />
+            </div>
+            <div
+              className="fui-TreeItemLayout__main rfjd92f"
+            >
+              rootLabel
+            </div>
+          </div>
+        </TreeItemLayout>
+        <Tree
+          style={
+            Object {
+              "overflow": undefined,
+            }
+          }
+        >
+          <TreeProvider
+            value={
+              Object {
+                "appearance": "subtle",
+                "checkedItems": Object {
+                  "clear": [Function],
+                  "dangerouslyGetInternalMap_unstable": [Function],
+                  "delete": [Function],
+                  "get": [Function],
+                  "has": [Function],
+                  "set": [Function],
+                  "size": 0,
+                  Symbol(Symbol.iterator): [Function],
+                },
+                "contextType": "root",
+                "level": 1,
+                "openItems": Object {
+                  "add": [Function],
+                  "clear": [Function],
+                  "dangerouslyGetInternalSet_unstable": [Function],
+                  "delete": [Function],
+                  "has": [Function],
+                  "size": 0,
+                  Symbol(Symbol.iterator): [Function],
+                },
+                "requestTreeResponse": [Function],
+                "selectionMode": "none",
+                "size": "medium",
+                "treeType": "nested",
+              }
+            }
+          >
+            <ContextSelector.Provider
+              value={
+                Object {
+                  "appearance": "subtle",
+                  "checkedItems": Object {
+                    "clear": [Function],
+                    "dangerouslyGetInternalMap_unstable": [Function],
+                    "delete": [Function],
+                    "get": [Function],
+                    "has": [Function],
+                    "set": [Function],
+                    "size": 0,
+                    Symbol(Symbol.iterator): [Function],
+                  },
+                  "contextType": "root",
+                  "level": 1,
+                  "openItems": Object {
+                    "add": [Function],
+                    "clear": [Function],
+                    "dangerouslyGetInternalSet_unstable": [Function],
+                    "delete": [Function],
+                    "has": [Function],
+                    "size": 0,
+                    Symbol(Symbol.iterator): [Function],
+                  },
+                  "requestTreeResponse": [Function],
+                  "selectionMode": "none",
+                  "size": "medium",
+                  "treeType": "nested",
+                }
+              }
+            >
+              <div
+                className="fui-Tree rnv2ez3"
+                role="tree"
+                style={
+                  Object {
+                    "overflow": undefined,
+                  }
+                }
+              >
+                <TreeNodeComponent
+                  key="child1Label"
+                  node={
+                    Object {
+                      "children": Array [
+                        Object {
+                          "className": "grandchild1Class",
+                          "iconSrc": "grandchild1Icon.svg",
+                          "id": "grandchild1",
+                          "isSelected": [Function],
+                          "label": "grandchild1Label",
+                          "onClick": [MockFunction grandchild1Click],
+                        },
+                        Object {
+                          "className": "grandchild2Class",
+                          "iconSrc": "grandchild2Icon",
+                          "id": "grandchild2",
+                          "label": "grandchild2Label",
+                          "onClick": [MockFunction grandchild2Click],
+                        },
+                      ],
+                      "className": "child1Class",
+                      "iconSrc": "child1Icon",
+                      "id": "child1",
+                      "label": "child1Label",
+                      "onClick": [MockFunction child1Click],
+                    }
+                  }
+                  treeNodeId="root/child1Label"
+                >
+                  <TreeItem
+                    itemType="branch"
+                    onOpenChange={[Function]}
+                    style={
+                      Object {
+                        "height": "100%",
+                      }
+                    }
+                    value="root/child1Label"
+                  >
+                    <div
+                      aria-expanded={false}
+                      aria-level={1}
+                      aria-selected="false"
+                      className="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                      data-fui-tree-item-value="root/child1Label"
+                      onChange={[Function]}
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      role="treeitem"
+                      style={
+                        Object {
+                          "height": "100%",
+                        }
+                      }
+                      tabIndex={-1}
+                    >
+                      <ContextSelector.Provider
+                        value={
+                          Object {
+                            "actionsRef": Object {
+                              "current": null,
+                            },
+                            "checked": false,
+                            "expandIconRef": Object {
+                              "current": <div
+                                aria-hidden="true"
+                                class="fui-TreeItemLayout__expandIcon rogdio4"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                  fill="currentColor"
+                                  height="12"
+                                  style="transform: rotate(0deg);"
+                                  viewBox="0 0 12 12"
+                                  width="12"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                    fill="currentColor"
+                                  />
+                                </svg>
+                              </div>,
+                            },
+                            "isActionsVisible": false,
+                            "isAsideVisible": false,
+                            "itemType": "branch",
+                            "layoutRef": Object {
+                              "current": <div
+                                class="fui-TreeItemLayout rcu2h5o child1Class ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                                data-test="TreeNode:root/child1Label"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__expandIcon rogdio4"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                    fill="currentColor"
+                                    height="12"
+                                    style="transform: rotate(0deg);"
+                                    viewBox="0 0 12 12"
+                                    width="12"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                      fill="currentColor"
+                                    />
+                                  </svg>
+                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    src="child1Icon"
+                                    style="width: 16px; height: 16px;"
+                                  />
+                                </div>
+                                <div
+                                  class="fui-TreeItemLayout__main rfjd92f"
+                                >
+                                  child1Label
+                                </div>
+                              </div>,
+                            },
+                            "open": false,
+                            "selectionRef": Object {
+                              "current": null,
+                            },
+                            "subtreeRef": Object {
+                              "current": null,
+                            },
+                            "treeItemRef": Object {
+                              "current": <div
+                                aria-expanded="false"
+                                aria-level="1"
+                                aria-selected="false"
+                                class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                                data-fui-tree-item-value="root/child1Label"
+                                role="treeitem"
+                                style="height: 100%;"
+                                tabindex="0"
+                              >
+                                <div
+                                  class="fui-TreeItemLayout rcu2h5o child1Class ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                                  data-test="TreeNode:root/child1Label"
+                                >
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__expandIcon rogdio4"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                      fill="currentColor"
+                                      height="12"
+                                      style="transform: rotate(0deg);"
+                                      viewBox="0 0 12 12"
+                                      width="12"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                        fill="currentColor"
+                                      />
+                                    </svg>
+                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      src="child1Icon"
+                                      style="width: 16px; height: 16px;"
+                                    />
+                                  </div>
+                                  <div
+                                    class="fui-TreeItemLayout__main rfjd92f"
+                                  >
+                                    child1Label
+                                  </div>
+                                </div>
+                              </div>,
+                            },
+                            "value": "root/child1Label",
+                          }
+                        }
+                      >
+                        <TreeItemLayout
+                          actions={false}
+                          className="child1Class"
+                          data-test="TreeNode:root/child1Label"
+                          iconBefore={
+                            <img
+                              alt=""
+                              src="child1Icon"
+                              style={
+                                Object {
+                                  "height": 16,
+                                  "width": 16,
+                                }
+                              }
+                            />
+                          }
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="fui-TreeItemLayout rcu2h5o child1Class ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                            data-test="TreeNode:root/child1Label"
+                            style={
+                              Object {
+                                "backgroundColor": undefined,
+                              }
+                            }
+                          >
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__expandIcon rogdio4"
+                            >
+                              <TreeItemChevron>
+                                <ChevronRight12Regular
+                                  style={
+                                    Object {
+                                      "transform": "rotate(0deg)",
+                                    }
+                                  }
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                    fill="currentColor"
+                                    height="12"
+                                    style={
+                                      Object {
+                                        "transform": "rotate(0deg)",
+                                      }
+                                    }
+                                    viewBox="0 0 12 12"
+                                    width="12"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                      fill="currentColor"
+                                    />
+                                  </svg>
+                                </ChevronRight12Regular>
+                              </TreeItemChevron>
+                            </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                src="child1Icon"
+                                style={
+                                  Object {
+                                    "height": 16,
+                                    "width": 16,
+                                  }
+                                }
+                              />
+                            </div>
+                            <div
+                              className="fui-TreeItemLayout__main rfjd92f"
+                            >
+                              child1Label
+                            </div>
+                          </div>
+                        </TreeItemLayout>
+                        <Tree
+                          style={
+                            Object {
+                              "overflow": undefined,
+                            }
+                          }
+                        >
+                          <TreeProvider
+                            value={
+                              Object {
+                                "contextType": "subtree",
+                                "level": 2,
+                              }
+                            }
+                          />
+                        </Tree>
+                      </ContextSelector.Provider>
+                    </div>
+                  </TreeItem>
+                </TreeNodeComponent>
+                <TreeNodeComponent
+                  key="child2LoadingLabel"
+                  node={
+                    Object {
+                      "children": Array [
+                        Object {
+                          "className": "grandchild3NotRenderedClass",
+                          "iconSrc": "grandchild3NotRenderedIcon",
+                          "id": "grandchild3NotRendered",
+                          "label": "grandchild3NotRenderedLabel",
+                          "onClick": [MockFunction grandchild3NotRenderedClick],
+                        },
+                      ],
+                      "className": "child2LoadingClass",
+                      "iconSrc": "child2LoadingIcon",
+                      "id": "child2Loading",
+                      "isLoading": true,
+                      "label": "child2LoadingLabel",
+                      "onClick": [MockFunction child2LoadingClick],
+                    }
+                  }
+                  treeNodeId="root/child2LoadingLabel"
+                >
+                  <TreeItem
+                    itemType="branch"
+                    onOpenChange={[Function]}
+                    style={
+                      Object {
+                        "height": "100%",
+                      }
+                    }
+                    value="root/child2LoadingLabel"
+                  >
+                    <div
+                      aria-expanded={false}
+                      aria-level={1}
+                      aria-selected="false"
+                      className="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                      data-fui-tree-item-value="root/child2LoadingLabel"
+                      onChange={[Function]}
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      role="treeitem"
+                      style={
+                        Object {
+                          "height": "100%",
+                        }
+                      }
+                      tabIndex={-1}
+                    >
+                      <ContextSelector.Provider
+                        value={
+                          Object {
+                            "actionsRef": Object {
+                              "current": null,
+                            },
+                            "checked": false,
+                            "expandIconRef": Object {
+                              "current": <div
+                                aria-hidden="true"
+                                class="fui-TreeItemLayout__expandIcon rogdio4"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                  fill="currentColor"
+                                  height="12"
+                                  style="transform: rotate(0deg);"
+                                  viewBox="0 0 12 12"
+                                  width="12"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                    fill="currentColor"
+                                  />
+                                </svg>
+                              </div>,
+                            },
+                            "isActionsVisible": false,
+                            "isAsideVisible": false,
+                            "itemType": "branch",
+                            "layoutRef": Object {
+                              "current": <div
+                                class="fui-TreeItemLayout rcu2h5o child2LoadingClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                                data-test="TreeNode:root/child2LoadingLabel"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__expandIcon rogdio4"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                    fill="currentColor"
+                                    height="12"
+                                    style="transform: rotate(0deg);"
+                                    viewBox="0 0 12 12"
+                                    width="12"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                      fill="currentColor"
+                                    />
+                                  </svg>
+                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    src="child2LoadingIcon"
+                                    style="width: 16px; height: 16px;"
+                                  />
+                                </div>
+                                <div
+                                  class="fui-TreeItemLayout__main rfjd92f"
+                                >
+                                  child2LoadingLabel
+                                </div>
+                              </div>,
+                            },
+                            "open": false,
+                            "selectionRef": Object {
+                              "current": null,
+                            },
+                            "subtreeRef": Object {
+                              "current": null,
+                            },
+                            "treeItemRef": Object {
+                              "current": <div
+                                aria-expanded="false"
+                                aria-level="1"
+                                aria-selected="false"
+                                class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                                data-fui-tree-item-value="root/child2LoadingLabel"
+                                role="treeitem"
+                                style="height: 100%;"
+                                tabindex="-1"
+                              >
+                                <div
+                                  class="fui-TreeItemLayout rcu2h5o child2LoadingClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                                  data-test="TreeNode:root/child2LoadingLabel"
+                                >
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__expandIcon rogdio4"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                      fill="currentColor"
+                                      height="12"
+                                      style="transform: rotate(0deg);"
+                                      viewBox="0 0 12 12"
+                                      width="12"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                        fill="currentColor"
+                                      />
+                                    </svg>
+                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      src="child2LoadingIcon"
+                                      style="width: 16px; height: 16px;"
+                                    />
+                                  </div>
+                                  <div
+                                    class="fui-TreeItemLayout__main rfjd92f"
+                                  >
+                                    child2LoadingLabel
+                                  </div>
+                                </div>
+                              </div>,
+                            },
+                            "value": "root/child2LoadingLabel",
+                          }
+                        }
+                      >
+                        <TreeItemLayout
+                          actions={false}
+                          className="child2LoadingClass"
+                          data-test="TreeNode:root/child2LoadingLabel"
+                          iconBefore={
+                            <img
+                              alt=""
+                              src="child2LoadingIcon"
+                              style={
+                                Object {
+                                  "height": 16,
+                                  "width": 16,
+                                }
+                              }
+                            />
+                          }
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="fui-TreeItemLayout rcu2h5o child2LoadingClass ___51javz0_ow08sb0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9"
+                            data-test="TreeNode:root/child2LoadingLabel"
+                            style={
+                              Object {
+                                "backgroundColor": undefined,
+                              }
+                            }
+                          >
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__expandIcon rogdio4"
+                            >
+                              <TreeItemChevron>
+                                <ChevronRight12Regular
+                                  style={
+                                    Object {
+                                      "transform": "rotate(0deg)",
+                                    }
+                                  }
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                                    fill="currentColor"
+                                    height="12"
+                                    style={
+                                      Object {
+                                        "transform": "rotate(0deg)",
+                                      }
+                                    }
+                                    viewBox="0 0 12 12"
+                                    width="12"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
+                                      fill="currentColor"
+                                    />
+                                  </svg>
+                                </ChevronRight12Regular>
+                              </TreeItemChevron>
+                            </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                src="child2LoadingIcon"
+                                style={
+                                  Object {
+                                    "height": 16,
+                                    "width": 16,
+                                  }
+                                }
+                              />
+                            </div>
+                            <div
+                              className="fui-TreeItemLayout__main rfjd92f"
+                            >
+                              child2LoadingLabel
+                            </div>
+                          </div>
+                        </TreeItemLayout>
+                      </ContextSelector.Provider>
+                    </div>
+                  </TreeItem>
+                </TreeNodeComponent>
+                <TreeNodeComponent
+                  key="child3ExpandingLabel"
+                  node={
+                    Object {
+                      "className": "child3ExpandingClass",
+                      "iconSrc": "child3ExpandingIcon",
+                      "id": "child3Expanding",
+                      "label": "child3ExpandingLabel",
+                      "onClick": [MockFunction child3ExpandingClick] {
+                        "calls": Array [
+                          Array [],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": undefined,
+                          },
+                        ],
+                      },
+                      "onExpanded": [Function],
+                    }
+                  }
+                  treeNodeId="root/child3ExpandingLabel"
+                >
+                  <TreeItem
+                    itemType="leaf"
+                    onOpenChange={[Function]}
+                    style={
+                      Object {
+                        "height": "100%",
+                      }
+                    }
+                    value="root/child3ExpandingLabel"
+                  >
+                    <div
+                      aria-level={1}
+                      aria-selected="false"
+                      className="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                      data-fui-tree-item-value="root/child3ExpandingLabel"
+                      onChange={[Function]}
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      role="treeitem"
+                      style={
+                        Object {
+                          "height": "100%",
+                        }
+                      }
+                      tabIndex={-1}
+                    >
+                      <ContextSelector.Provider
+                        value={
+                          Object {
+                            "actionsRef": Object {
+                              "current": null,
+                            },
+                            "checked": false,
+                            "expandIconRef": Object {
+                              "current": <div
+                                aria-hidden="true"
+                                class="fui-TreeItemLayout__expandIcon rogdio4"
+                              >
+                                <div
+                                  class="fui-Spinner ___p104zz0_oywd6f0 f22iagw f122n59 f4d9j23 fez10in f4px1ci fn67r4l f1063pyq"
+                                  role="progressbar"
+                                >
+                                  <span
+                                    class="fui-Spinner__spinner ___rymi200_1dtscmh f1or16p5 f1grzc83 f19shzzi f5tbecn fn4mtlg f1y80fxs f1r2crtq f1wsi8sr f1bkm2qd f1urqz7h f1da2vov f11rfva0 f1exc66 f1x2gjcb f1vjiaua fv1u54w f1oebb0s f11ditju f1m9nikz fq8a5sv f1b4lwqj f1najlst fjxod4 fu3xdw0 f1ttdh6v f1eseayc folzdkc fhlfkde f13qeqtg flglbw1"
+                                  >
+                                    <svg
+                                      class="fui-Spinner__Progressbar"
+                                    >
+                                      <circle
+                                        class="fui-Spinner__Track"
+                                      />
+                                      <circle
+                                        class="fui-Spinner__Tail"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>,
+                            },
+                            "isActionsVisible": false,
+                            "isAsideVisible": false,
+                            "itemType": "leaf",
+                            "layoutRef": Object {
+                              "current": <div
+                                class="fui-TreeItemLayout rcu2h5o child3ExpandingClass ___ehtpr00_100l8p1 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc"
+                                data-test="TreeNode:root/child3ExpandingLabel"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__expandIcon rogdio4"
+                                >
+                                  <div
+                                    class="fui-Spinner ___p104zz0_oywd6f0 f22iagw f122n59 f4d9j23 fez10in f4px1ci fn67r4l f1063pyq"
+                                    role="progressbar"
+                                  >
+                                    <span
+                                      class="fui-Spinner__spinner ___rymi200_1dtscmh f1or16p5 f1grzc83 f19shzzi f5tbecn fn4mtlg f1y80fxs f1r2crtq f1wsi8sr f1bkm2qd f1urqz7h f1da2vov f11rfva0 f1exc66 f1x2gjcb f1vjiaua fv1u54w f1oebb0s f11ditju f1m9nikz fq8a5sv f1b4lwqj f1najlst fjxod4 fu3xdw0 f1ttdh6v f1eseayc folzdkc fhlfkde f13qeqtg flglbw1"
+                                    >
+                                      <svg
+                                        class="fui-Spinner__Progressbar"
+                                      >
+                                        <circle
+                                          class="fui-Spinner__Track"
+                                        />
+                                        <circle
+                                          class="fui-Spinner__Tail"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    src="child3ExpandingIcon"
+                                    style="width: 16px; height: 16px;"
+                                  />
+                                </div>
+                                <div
+                                  class="fui-TreeItemLayout__main rfjd92f"
+                                >
+                                  child3ExpandingLabel
+                                </div>
+                              </div>,
+                            },
+                            "open": false,
+                            "selectionRef": Object {
+                              "current": null,
+                            },
+                            "subtreeRef": Object {
+                              "current": null,
+                            },
+                            "treeItemRef": Object {
+                              "current": <div
+                                aria-level="1"
+                                aria-selected="false"
+                                class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
+                                data-fui-tree-item-value="root/child3ExpandingLabel"
+                                role="treeitem"
+                                style="height: 100%;"
+                                tabindex="-1"
+                              >
+                                <div
+                                  class="fui-TreeItemLayout rcu2h5o child3ExpandingClass ___ehtpr00_100l8p1 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc"
+                                  data-test="TreeNode:root/child3ExpandingLabel"
+                                >
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__expandIcon rogdio4"
+                                  >
+                                    <div
+                                      class="fui-Spinner ___p104zz0_oywd6f0 f22iagw f122n59 f4d9j23 fez10in f4px1ci fn67r4l f1063pyq"
+                                      role="progressbar"
+                                    >
+                                      <span
+                                        class="fui-Spinner__spinner ___rymi200_1dtscmh f1or16p5 f1grzc83 f19shzzi f5tbecn fn4mtlg f1y80fxs f1r2crtq f1wsi8sr f1bkm2qd f1urqz7h f1da2vov f11rfva0 f1exc66 f1x2gjcb f1vjiaua fv1u54w f1oebb0s f11ditju f1m9nikz fq8a5sv f1b4lwqj f1najlst fjxod4 fu3xdw0 f1ttdh6v f1eseayc folzdkc fhlfkde f13qeqtg flglbw1"
+                                      >
+                                        <svg
+                                          class="fui-Spinner__Progressbar"
+                                        >
+                                          <circle
+                                            class="fui-Spinner__Track"
+                                          />
+                                          <circle
+                                            class="fui-Spinner__Tail"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      src="child3ExpandingIcon"
+                                      style="width: 16px; height: 16px;"
+                                    />
+                                  </div>
+                                  <div
+                                    class="fui-TreeItemLayout__main rfjd92f"
+                                  >
+                                    child3ExpandingLabel
+                                  </div>
+                                </div>
+                              </div>,
+                            },
+                            "value": "root/child3ExpandingLabel",
+                          }
+                        }
+                      >
+                        <TreeItemLayout
+                          actions={false}
+                          className="child3ExpandingClass"
+                          data-test="TreeNode:root/child3ExpandingLabel"
+                          iconBefore={
+                            <img
+                              alt=""
+                              src="child3ExpandingIcon"
+                              style={
+                                Object {
+                                  "height": 16,
+                                  "width": 16,
+                                }
+                              }
+                            />
+                          }
+                          style={
+                            Object {
+                              "backgroundColor": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="fui-TreeItemLayout rcu2h5o child3ExpandingClass ___ehtpr00_100l8p1 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc"
+                            data-test="TreeNode:root/child3ExpandingLabel"
+                            style={
+                              Object {
+                                "backgroundColor": undefined,
+                              }
+                            }
+                          >
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                src="child3ExpandingIcon"
+                                style={
+                                  Object {
+                                    "height": 16,
+                                    "width": 16,
+                                  }
+                                }
+                              />
+                            </div>
+                            <div
+                              className="fui-TreeItemLayout__main rfjd92f"
+                            >
+                              child3ExpandingLabel
+                            </div>
+                          </div>
+                        </TreeItemLayout>
+                      </ContextSelector.Provider>
+                    </div>
+                  </TreeItem>
+                </TreeNodeComponent>
+              </div>
+            </ContextSelector.Provider>
+          </TreeProvider>
+        </Tree>
+      </ContextSelector.Provider>
+    </div>
+  </TreeItem>
+</TreeNodeComponent>
+`;
+
+exports[`TreeNodeComponent renders a loading spinner if the node is loading: loaded 1`] = `
+<TreeItem
+  itemType="leaf"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent renders a loading spinner if the node is loading: loading 1`] = `
+<TreeItem
+  itemType="leaf"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    expandIcon={
+      <Spinner
+        size="extra-tiny"
+      />
+    }
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent renders a node with a menu 1`] = `
+<Menu
+  onOpenChange={[Function]}
+  openOnContext={true}
+  positioning="below-end"
+>
+  <MenuTrigger
+    disableButtonEnhancement={true}
+  >
+    <TreeItem
+      itemType="leaf"
+      onOpenChange={[Function]}
+      style={
+        Object {
+          "height": "100%",
+        }
+      }
+      value="root"
+    >
+      <TreeItemLayout
+        actions={
+          <Menu
+            onOpenChange={[Function]}
+          >
+            <MenuTrigger
+              disableButtonEnhancement={true}
+            >
+              <Button
+                appearance="subtle"
+                aria-label="More options"
+                data-test="TreeNode/ContextMenuTrigger"
+                icon={<MoreHorizontal20Regular />}
+              />
+            </MenuTrigger>
+            <MenuPopover
+              data-test="TreeNode/ContextMenu:root"
+            >
+              <MenuList>
+                <MenuItem
+                  data-test="TreeNode/ContextMenuItem:enabledItem"
+                  onClick={[MockFunction enabledItemClick]}
+                >
+                  enabledItem
+                </MenuItem>
+                <MenuItem
+                  data-test="TreeNode/ContextMenuItem:disabledItem"
+                  disabled={true}
+                  onClick={[MockFunction disabledItemClick]}
+                >
+                  disabledItem
+                </MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        }
+        className="rootClass"
+        data-test="TreeNode:root"
+        iconBefore={
+          <img
+            alt=""
+            src="rootIcon"
+            style={
+              Object {
+                "height": 16,
+                "width": 16,
+              }
+            }
+          />
+        }
+        style={
+          Object {
+            "backgroundColor": undefined,
+          }
+        }
+      >
+        rootLabel
+      </TreeItemLayout>
+    </TreeItem>
+  </MenuTrigger>
+  <MenuPopover>
+    <MenuList>
+      <MenuItem
+        data-test="TreeNode/ContextMenuItem:enabledItem"
+        key="enabledItem"
+        onClick={[MockFunction enabledItemClick]}
+      >
+        enabledItem
+      </MenuItem>
+      <MenuItem
+        data-test="TreeNode/ContextMenuItem:disabledItem"
+        disabled={true}
+        key="disabledItem"
+        onClick={[MockFunction disabledItemClick]}
+      >
+        disabledItem
+      </MenuItem>
+    </MenuList>
+  </MenuPopover>
+</Menu>
+`;
+
+exports[`TreeNodeComponent renders a single node 1`] = `
+<TreeItem
+  itemType="leaf"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
+<TreeItem
+  itemType="leaf"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="the-icon.svg"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent renders selected parent node as selected if no descendant nodes are selected 1`] = `
+<TreeItem
+  itemType="branch"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": "var(--colorNeutralBackground1Selected)",
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+  <Tree
+    style={
+      Object {
+        "overflow": undefined,
+      }
+    }
+  >
+    <TreeNodeComponent
+      key="child1Label"
+      node={
+        Object {
+          "children": Array [
+            Object {
+              "className": "grandchild1Class",
+              "iconSrc": "grandchild1Icon",
+              "id": "grandchild1",
+              "label": "grandchild1Label",
+              "onClick": [MockFunction grandchild1Click],
+            },
+            Object {
+              "className": "grandchild2Class",
+              "iconSrc": "grandchild2Icon",
+              "id": "grandchild2",
+              "label": "grandchild2Label",
+              "onClick": [MockFunction grandchild2Click],
+            },
+          ],
+          "className": "child1Class",
+          "iconSrc": "child1Icon",
+          "id": "child1",
+          "label": "child1Label",
+          "onClick": [MockFunction child1Click],
+        }
+      }
+      treeNodeId="root/child1Label"
+    />
+    <TreeNodeComponent
+      key="child2Label"
+      node={
+        Object {
+          "className": "child2Class",
+          "iconSrc": "child2Icon",
+          "id": "child2",
+          "label": "child2Label",
+          "onClick": [MockFunction child2Click],
+        }
+      }
+      treeNodeId="root/child2Label"
+    />
+  </Tree>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent renders selected parent node as unselected if any descendant node is selected 1`] = `
+<TreeItem
+  itemType="branch"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+  <Tree
+    style={
+      Object {
+        "overflow": undefined,
+      }
+    }
+  >
+    <TreeNodeComponent
+      key="child1Label"
+      node={
+        Object {
+          "children": Array [
+            Object {
+              "className": "grandchild1Class",
+              "iconSrc": "grandchild1Icon",
+              "id": "grandchild1",
+              "isSelected": [Function],
+              "label": "grandchild1Label",
+              "onClick": [MockFunction grandchild1Click],
+            },
+            Object {
+              "className": "grandchild2Class",
+              "iconSrc": "grandchild2Icon",
+              "id": "grandchild2",
+              "label": "grandchild2Label",
+              "onClick": [MockFunction grandchild2Click],
+            },
+          ],
+          "className": "child1Class",
+          "iconSrc": "child1Icon",
+          "id": "child1",
+          "label": "child1Label",
+          "onClick": [MockFunction child1Click],
+        }
+      }
+      treeNodeId="root/child1Label"
+    />
+    <TreeNodeComponent
+      key="child2Label"
+      node={
+        Object {
+          "className": "child2Class",
+          "iconSrc": "child2Icon",
+          "id": "child2",
+          "label": "child2Label",
+          "onClick": [MockFunction child2Click],
+        }
+      }
+      treeNodeId="root/child2Label"
+    />
+  </Tree>
+</TreeItem>
+`;
+
+exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
+<TreeItem
+  itemType="leaf"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": "var(--colorNeutralBackground1Selected)",
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
diff --git a/src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx b/src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx
deleted file mode 100644
index 14c66db12..000000000
--- a/src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import {
-  Button,
-  Menu,
-  MenuItem,
-  MenuList,
-  MenuPopover,
-  MenuTrigger,
-  Spinner,
-  Tree,
-  TreeItem,
-  TreeItemLayout,
-  TreeOpenChangeData,
-  TreeOpenChangeEvent,
-} from "@fluentui/react-components";
-import { MoreHorizontal20Regular } from "@fluentui/react-icons";
-import { tokens } from "@fluentui/react-theme";
-import * as React from "react";
-
-export interface TreeNode2MenuItem {
-  label: string;
-  onClick: () => void;
-  iconSrc?: string;
-  isDisabled?: boolean;
-  styleClass?: string;
-}
-
-export interface TreeNode2 {
-  label: string;
-  id?: string;
-  children?: TreeNode2[];
-  contextMenu?: TreeNode2MenuItem[];
-  iconSrc?: string;
-  isExpanded?: boolean;
-  className?: string;
-  isAlphaSorted?: boolean;
-  // data?: any; // Piece of data corresponding to this node
-  timestamp?: number;
-  isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
-  isLoading?: boolean;
-  isScrollable?: boolean;
-  isSelected?: () => boolean;
-  onClick?: () => void; // Only if a leaf, other click will expand/collapse
-  onExpanded?: () => Promise<void>;
-  onCollapsed?: () => void;
-  onContextMenuOpen?: () => void;
-}
-
-export interface TreeNode2ComponentProps {
-  node: TreeNode2;
-  className?: string;
-  treeNodeId: string;
-}
-
-const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 20, height: 20 }} />;
-
-export const TreeNode2Component: React.FC<TreeNode2ComponentProps> = ({
-  node,
-  treeNodeId,
-}: TreeNode2ComponentProps): JSX.Element => {
-  const [isLoading, setIsLoading] = React.useState<boolean>(false);
-
-  const getSortedChildren = (treeNode: TreeNode2): TreeNode2[] => {
-    if (!treeNode || !treeNode.children) {
-      return undefined;
-    }
-
-    const compareFct = (a: TreeNode2, b: TreeNode2) => a.label.localeCompare(b.label);
-
-    let unsortedChildren;
-    if (treeNode.isLeavesParentsSeparate) {
-      // Separate parents and leave
-      const parents: TreeNode2[] = treeNode.children.filter((node) => node.children);
-      const leaves: TreeNode2[] = treeNode.children.filter((node) => !node.children);
-
-      if (treeNode.isAlphaSorted) {
-        parents.sort(compareFct);
-        leaves.sort(compareFct);
-      }
-
-      unsortedChildren = parents.concat(leaves);
-    } else {
-      unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
-    }
-
-    return unsortedChildren;
-  };
-
-  const onOpenChange = (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
-    if (!node.isExpanded && data.open && node.onExpanded) {
-      // Catch the transition non-expanded to expanded
-      setIsLoading(true);
-      node.onExpanded?.().then(() => setIsLoading(false));
-    } else if (node.isExpanded && !data.open && node.onCollapsed) {
-      // Catch the transition expanded to non-expanded
-      node.onCollapsed?.();
-    }
-  };
-
-  return (
-    <TreeItem
-      value={treeNodeId}
-      itemType={node.children !== undefined ? "branch" : "leaf"}
-      style={{ height: "100%" }}
-      onOpenChange={onOpenChange}
-    >
-      <TreeItemLayout
-        className={node.className}
-        actions={
-          node.contextMenu && (
-            <Menu>
-              <MenuTrigger disableButtonEnhancement>
-                <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
-              </MenuTrigger>
-              <MenuPopover>
-                <MenuList>
-                  {node.contextMenu.map((menuItem) => (
-                    <MenuItem disabled={menuItem.isDisabled} key={menuItem.label} onClick={menuItem.onClick}>
-                      {menuItem.label}
-                    </MenuItem>
-                  ))}
-                </MenuList>
-              </MenuPopover>
-            </Menu>
-          )
-        }
-        expandIcon={isLoading ? <Spinner size="extra-tiny" /> : undefined}
-        iconBefore={node.iconSrc && getTreeIcon(node.iconSrc)}
-        style={{
-          backgroundColor: node.isSelected && node.isSelected() ? tokens.colorNeutralBackground1Selected : undefined,
-        }}
-      >
-        <span onClick={() => node.onClick?.()}>{node.label}</span>
-      </TreeItemLayout>
-      {!node.isLoading && node.children?.length > 0 && (
-        <Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
-          {getSortedChildren(node).map((childNode: TreeNode2) => (
-            <TreeNode2Component
-              key={childNode.label}
-              node={childNode}
-              treeNodeId={`${treeNodeId}/${childNode.label}`}
-            />
-          ))}
-        </Tree>
-      )}
-    </TreeItem>
-  );
-};
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index fe648918b..b20d1b78c 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -136,14 +136,6 @@ export default class Explorer {
 
     this.isTabsContentExpanded = ko.observable(false);
 
-    document.addEventListener(
-      "contextmenu",
-      (e) => {
-        e.preventDefault();
-      },
-      false,
-    );
-
     $(() => {
       $(document.body).click(() => $(".commandDropdownContainer").hide());
     });
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 274bd0d1d..c4fa38ec4 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -832,8 +832,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     iconName="Info"
                     className="panelInfoIcon"
                     tabIndex={0}
-                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without
-        impacting the performance of transactional workloads."
+                    ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
                   />
                 </TooltipHost>
               </Stack>
diff --git a/src/Explorer/Panes/PanelContainerComponent.tsx b/src/Explorer/Panes/PanelContainerComponent.tsx
index bad1719be..5795ec941 100644
--- a/src/Explorer/Panes/PanelContainerComponent.tsx
+++ b/src/Explorer/Panes/PanelContainerComponent.tsx
@@ -53,6 +53,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
 
     return (
       <Panel
+        data-test={`Panel:${this.props.headerText}`}
         headerText={this.props.headerText}
         isOpen={this.props.isOpen}
         onDismiss={this.onDissmiss}
diff --git a/src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap b/src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap
index 2d2672404..f3ed15938 100644
--- a/src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`PaneContainerComponent test should be resize if notification console is
 <StyledPanelBase
   closeButtonAriaLabel="Close test"
   customWidth="440px"
+  data-test="Panel:test"
   headerClassName="panelHeader"
   headerText="test"
   isFooterAtBottom={true}
@@ -44,6 +45,7 @@ exports[`PaneContainerComponent test should render with panel content and header
 <StyledPanelBase
   closeButtonAriaLabel="Close test"
   customWidth="440px"
+  data-test="Panel:test"
   headerClassName="panelHeader"
   headerText="test"
   isFooterAtBottom={true}
diff --git a/src/Explorer/Tree/ResourceTokenTree.tsx b/src/Explorer/Tree/ResourceTokenTree.tsx
deleted file mode 100644
index 4faf2a676..000000000
--- a/src/Explorer/Tree/ResourceTokenTree.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import CollectionIcon from "../../../images/tree-collection.svg";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { useTabs } from "../../hooks/useTabs";
-import { userContext } from "../../UserContext";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
-import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { useDatabases } from "../useDatabases";
-import { useSelectedNode } from "../useSelectedNode";
-
-export const ResourceTokenTree: React.FC = (): JSX.Element => {
-  const collection = useDatabases((state) => state.resourceTokenCollection);
-
-  const buildCollectionNode = (): TreeNode => {
-    if (!collection) {
-      return {
-        label: undefined,
-        isExpanded: true,
-        children: [],
-      };
-    }
-
-    const children: TreeNode[] = [];
-    children.push({
-      label: "Items",
-      onClick: () => {
-        collection.onDocumentDBDocumentsClick();
-        // push to most recent
-        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
-      },
-      isSelected: () =>
-        useSelectedNode
-          .getState()
-          .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Documents]),
-    });
-
-    const collectionNode: TreeNode = {
-      label: collection.id(),
-      iconSrc: CollectionIcon,
-      isExpanded: true,
-      children,
-      className: "collectionHeader",
-      onClick: () => {
-        // Rewritten version of expandCollapseCollection
-        useSelectedNode.getState().setSelectedNode(collection);
-        useCommandBar.getState().setContextButtons([]);
-        useTabs
-          .getState()
-          .refreshActiveTab(
-            (tab) => tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
-          );
-      },
-      isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
-    };
-
-    return {
-      label: undefined,
-      isExpanded: true,
-      children: [collectionNode],
-    };
-  };
-
-  return <TreeComponent className="dataResourceTree" rootNode={buildCollectionNode()} />;
-};
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index a14c202e8..ae4614ad9 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,43 +1,29 @@
-import { SampleDataTree } from "Explorer/Tree/SampleDataTree";
-import { getItemName } from "Utils/APITypeUtils";
+import {
+  BrandVariants,
+  FluentProvider,
+  Theme,
+  Tree,
+  TreeItemValue,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+  createLightTheme,
+} from "@fluentui/react-components";
+import { AuthType } from "AuthType";
+import { TreeNode, TreeNodeComponent } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
+import {
+  createDatabaseTreeNodes,
+  createResourceTokenTreeNodes,
+  createSampleDataTreeNodes,
+} from "Explorer/Tree/treeNodeUtil";
+import { useDatabases } from "Explorer/useDatabases";
+import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
+import { useTabs } from "hooks/useTabs";
 import * as React from "react";
+import { useEffect, useMemo } from "react";
 import shallow from "zustand/shallow";
-import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import DeleteIcon from "../../../images/delete.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
-import PublishIcon from "../../../images/notebook/publish_content.svg";
-import RefreshIcon from "../../../images/refresh-cosmos.svg";
-import CollectionIcon from "../../../images/tree-collection.svg";
-import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import { isServerlessAccount } from "../../Utils/CapabilityUtils";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { useTabs } from "../../hooks/useTabs";
-import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
-import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { useDialog } from "../Controls/Dialog";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
-import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
-import TabsBase from "../Tabs/TabsBase";
-import { useDatabases } from "../useDatabases";
-import { useSelectedNode } from "../useSelectedNode";
-import { Platform, configContext } from "./../../ConfigContext";
-import StoredProcedure from "./StoredProcedure";
-import Trigger from "./Trigger";
-import UserDefinedFunction from "./UserDefinedFunction";
 
 export const MyNotebooksTitle = "My Notebooks";
 export const GitHubReposTitle = "GitHub repos";
@@ -46,611 +32,153 @@ interface ResourceTreeProps {
   container: Explorer;
 }
 
+const cosmosdb: BrandVariants = {
+  10: "#020305",
+  20: "#111723",
+  30: "#16263D",
+  40: "#193253",
+  50: "#1B3F6A",
+  60: "#1B4C82",
+  70: "#18599B",
+  80: "#1267B4",
+  90: "#3174C2",
+  100: "#4F82C8",
+  110: "#6790CF",
+  120: "#7D9ED5",
+  130: "#92ACDC",
+  140: "#A6BAE2",
+  150: "#BAC9E9",
+  160: "#CDD8EF",
+};
+
+const lightTheme: Theme = {
+  ...createLightTheme(cosmosdb),
+};
+
+export const DATA_TREE_LABEL = "DATA";
+export const MY_DATA_TREE_LABEL = "MY DATA";
+export const SAMPLE_DATA_TREE_LABEL = "SAMPLE DATA";
+
+/**
+ * Top-level tree that has no label, but contains all subtrees
+ */
 export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: ResourceTreeProps): JSX.Element => {
-  const databases = useDatabases((state) => state.databases);
-  const {
-    isNotebookEnabled,
-    myNotebooksContentRoot,
-    galleryContentRoot,
-    gitHubNotebooksContentRoot,
-    updateNotebookItem,
-  } = useNotebook(
+  const [openItems, setOpenItems] = React.useState<Iterable<TreeItemValue>>([DATA_TREE_LABEL]);
+
+  const { isNotebookEnabled } = useNotebook(
     (state) => ({
       isNotebookEnabled: state.isNotebookEnabled,
-      myNotebooksContentRoot: state.myNotebooksContentRoot,
-      galleryContentRoot: state.galleryContentRoot,
-      gitHubNotebooksContentRoot: state.gitHubNotebooksContentRoot,
-      updateNotebookItem: state.updateNotebookItem,
     }),
     shallow,
   );
-  const { activeTab, refreshActiveTab } = useTabs();
-  const showScriptNodes =
-    configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
-  const pseudoDirPath = "PsuedoDir";
 
-  const buildChildNodes = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean,
-  ): TreeNode[] => {
-    if (!item || !item.children) {
-      return [];
-    } else {
-      return item.children.map((item) => {
-        const result =
-          item.type === NotebookContentItemType.Directory
-            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
-            : buildNotebookFileNode(item, onFileClick, isGithubTree);
-        result.timestamp = item.timestamp;
-        return result;
-      });
-    }
-  };
+  // We intentionally avoid using a state selector here because we want to re-render the tree if the active tab changes.
+  const { refreshActiveTab } = useTabs();
 
-  const buildNotebookFileNode = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean,
-  ): TreeNode => {
-    return {
-      label: item.name,
-      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
-      className: "notebookHeader",
-      onClick: () => onFileClick(item),
-      isSelected: () => {
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-                   */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: createFileContextMenu(container, item, isGithubTree),
-      data: item,
-    };
-  };
+  const { databases, resourceTokenCollection, sampleDataResourceTokenCollection } = useDatabases((state) => ({
+    databases: state.databases,
+    resourceTokenCollection: state.resourceTokenCollection,
+    sampleDataResourceTokenCollection: state.sampleDataResourceTokenCollection,
+  }));
+  const { isCopilotEnabled, isCopilotSampleDBEnabled } = useQueryCopilot((state) => ({
+    isCopilotEnabled: state.copilotEnabled,
+    isCopilotSampleDBEnabled: state.copilotSampleDBEnabled,
+  }));
 
-  const createFileContextMenu = (
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean,
-  ): TreeNodeMenuItem[] => {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}"`,
-              "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
-              "Cancel",
-              undefined,
-            );
-        },
-      },
-      {
-        label: "Copy to ...",
-        iconSrc: CopyIcon,
-        onClick: () => copyNotebook(container, item),
-      },
-      {
-        label: "Download",
-        iconSrc: NotebookIcon,
-        onClick: () => container.downloadFile(item),
-      },
-    ];
+  const databaseTreeNodes =
+    userContext.authType === AuthType.ResourceToken
+      ? createResourceTokenTreeNodes(resourceTokenCollection)
+      : createDatabaseTreeNodes(container, isNotebookEnabled, databases, refreshActiveTab);
 
-    if (item.type === NotebookContentItemType.Notebook && userContext.features.publicGallery) {
-      items.push({
-        label: "Publish to gallery",
-        iconSrc: PublishIcon,
-        onClick: async () => {
-          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
-            source: Source.ResourceTreeMenu,
-          });
-
-          const content = await container.readFile(item);
-          if (content) {
-            await container.publishNotebook(item.name, content);
-          }
-        },
-      });
-    }
-
-    // "Copy to ..." isn't needed if github locations are not available
-    if (!container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      items = items.filter((item) => item.label !== "Copy to ...");
-    }
-
-    return items;
-  };
-
-  const copyNotebook = async (container: Explorer, item: NotebookContentItem) => {
-    const content = await container.readFile(item);
-    if (content) {
-      container.copyNotebook(item.name, content);
-    }
-  };
-
-  const createDirectoryContextMenu = (
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean,
-  ): TreeNodeMenuItem[] => {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Refresh",
-        iconSrc: RefreshIcon,
-        onClick: () => loadSubitems(item, isGithubTree),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}?"`,
-              "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
-              "Cancel",
-              undefined,
-            );
-        },
-      },
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
-      },
-      {
-        label: "New Directory",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.onCreateDirectory(item, isGithubTree),
-      },
-    ];
-
-    //disallow renaming of temporary notebook workspace
-    if (item?.path === useNotebook.getState().notebookBasePath) {
-      items = items.filter((item) => item.label !== "Rename");
-    }
-
-    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
-    if (GitHubUtils.fromContentUri(item.path)) {
-      items = items.filter(
-        (item) =>
-          item.label !== "Delete" &&
-          item.label !== "Rename" &&
-          item.label !== "New Directory" &&
-          item.label !== "Upload File",
-      );
-    }
-
-    return items;
-  };
-
-  const buildNotebookDirectoryNode = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean,
-  ): TreeNode => {
-    return {
-      label: item.name,
-      iconSrc: undefined,
-      className: "notebookHeader",
-      isAlphaSorted: true,
-      isLeavesParentsSeparate: true,
-      onClick: () => {
-        if (!item.children) {
-          loadSubitems(item, isGithubTree);
-        }
-      },
-      isSelected: () => {
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-                   */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
-      data: item,
-      children: buildChildNodes(item, onFileClick, isGithubTree),
-    };
-  };
-
-  const buildDataTree = (): TreeNode => {
-    const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
-      const databaseNode: TreeNode = {
-        label: database.id(),
-        iconSrc: CosmosDBIcon,
-        isExpanded: database.isDatabaseExpanded(),
-        className: "databaseHeader",
-        children: [],
-        isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
-        onClick: async (isExpanded) => {
-          useSelectedNode.getState().setSelectedNode(database);
-          // Rewritten version of expandCollapseDatabase():
-          if (isExpanded) {
-            database.collapseDatabase();
-          } else {
-            if (databaseNode.children?.length === 0) {
-              databaseNode.isLoading = true;
-            }
-            await database.expandDatabase();
-          }
-          databaseNode.isLoading = false;
-          useCommandBar.getState().setContextButtons([]);
-          refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
-        },
-        onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
-      };
-
-      if (database.isDatabaseShared()) {
-        databaseNode.children.push({
-          id: database.isSampleDB ? "sampleScaleSettings" : "",
-          label: "Scale",
-          isSelected: () =>
-            useSelectedNode
-              .getState()
-              .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettingsV2]),
-          onClick: database.onSettingsClick.bind(database),
-        });
-      }
-
-      // Find collections
-      database
-        .collections()
-        .forEach((collection: ViewModels.Collection) =>
-          databaseNode.children.push(buildCollectionNode(database, collection)),
-        );
-
-      if (database.collectionsContinuationToken) {
-        const loadMoreNode: TreeNode = {
-          label: "load more",
-          className: "loadMoreHeader",
-          onClick: async () => {
-            await database.loadCollections();
-            useDatabases.getState().updateDatabase(database);
-          },
-        };
-        databaseNode.children.push(loadMoreNode);
-      }
-
-      database.collections.subscribe((collections: ViewModels.Collection[]) => {
-        collections.forEach((collection: ViewModels.Collection) =>
-          databaseNode.children.push(buildCollectionNode(database, collection)),
-        );
-      });
-
-      return databaseNode;
-    });
-
-    return {
-      label: undefined,
-      isExpanded: true,
-      children: databaseTreeNodes,
-    };
-  };
-
-  const buildCollectionNode = (database: ViewModels.Database, collection: ViewModels.Collection): TreeNode => {
-    const children: TreeNode[] = [];
-    children.push({
-      label: getItemName(),
-      id: collection.isSampleCollection ? "sampleItems" : "",
-      onClick: () => {
-        collection.openTab();
-        // push to most recent
-        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
-      },
-      isSelected: () =>
-        useSelectedNode
-          .getState()
-          .isDataNodeSelected(collection.databaseId, collection.id(), [
-            ViewModels.CollectionTabKind.Documents,
-            ViewModels.CollectionTabKind.Graph,
-          ]),
-      contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
-    });
-
-    if (
-      isNotebookEnabled &&
-      userContext.apiType === "Mongo" &&
-      isPublicInternetAccessAllowed() &&
-      useNotebook.getState().isPhoenixFeatures
-    ) {
-      children.push({
-        label: "Schema (Preview)",
-        onClick: collection.onSchemaAnalyzerClick.bind(collection),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.SchemaAnalyzer]),
-      });
-    }
-
-    if (userContext.apiType !== "Cassandra" || !isServerlessAccount()) {
-      let id = "";
-      if (collection.isSampleCollection) {
-        id = database.isDatabaseShared() ? "sampleSettings" : "sampleScaleSettings";
-      }
-
-      children.push({
-        id,
-        label: database.isDatabaseShared() || isServerlessAccount() ? "Settings" : "Scale & Settings",
-        onClick: collection.onSettingsClick.bind(collection),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.CollectionSettingsV2,
-            ]),
-      });
-    }
-
-    const schemaNode: TreeNode = buildSchemaNode(collection);
-    if (schemaNode) {
-      children.push(schemaNode);
-    }
-
-    if (showScriptNodes) {
-      children.push(buildStoredProcedureNode(collection));
-      children.push(buildUserDefinedFunctionsNode(collection));
-      children.push(buildTriggerNode(collection));
-    }
-
-    // This is a rewrite of showConflicts
-    const showConflicts =
-      userContext?.databaseAccount?.properties.enableMultipleWriteLocations &&
-      collection.rawDataModel &&
-      !!collection.rawDataModel.conflictResolutionPolicy;
-
-    if (showConflicts) {
-      children.push({
-        label: "Conflicts",
-        onClick: collection.onConflictsClick.bind(collection),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Conflicts]),
-      });
-    }
-
-    return {
-      label: collection.id(),
-      iconSrc: CollectionIcon,
-      isExpanded: collection.isCollectionExpanded(),
-      children: children,
-      className: "collectionHeader",
-      contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
-      onClick: () => {
-        // Rewritten version of expandCollapseCollection
-        useSelectedNode.getState().setSelectedNode(collection);
-        useCommandBar.getState().setContextButtons([]);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
-        );
-      },
-      onExpanded: () => {
-        if (showScriptNodes) {
-          collection.loadStoredProcedures();
-          collection.loadUserDefinedFunctions();
-          collection.loadTriggers();
-        }
-      },
-      isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
-      onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(collection),
-    };
-  };
-
-  const buildStoredProcedureNode = (collection: ViewModels.Collection): TreeNode => {
-    return {
-      label: "Stored Procedures",
-      children: collection.storedProcedures().map((sp: StoredProcedure) => ({
-        label: sp.id(),
-        onClick: sp.open.bind(sp),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.StoredProcedures,
-            ]),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(container, sp),
-      })),
-      onClick: async () => {
-        await collection.loadStoredProcedures();
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.StoredProcedures);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
-        );
-      },
-    };
-  };
-
-  const buildUserDefinedFunctionsNode = (collection: ViewModels.Collection): TreeNode => {
-    return {
-      label: "User Defined Functions",
-      children: collection.userDefinedFunctions().map((udf: UserDefinedFunction) => ({
-        label: udf.id(),
-        onClick: udf.open.bind(udf),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.UserDefinedFunctions,
-            ]),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(container, udf),
-      })),
-      onClick: async () => {
-        await collection.loadUserDefinedFunctions();
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.UserDefinedFunctions);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
-        );
-      },
-    };
-  };
-
-  const buildTriggerNode = (collection: ViewModels.Collection): TreeNode => {
-    return {
-      label: "Triggers",
-      children: collection.triggers().map((trigger: Trigger) => ({
-        label: trigger.id(),
-        onClick: trigger.open.bind(trigger),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Triggers]),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(container, trigger),
-      })),
-      onClick: async () => {
-        await collection.loadTriggers();
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Triggers);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
-        );
-      },
-    };
-  };
-
-  const buildSchemaNode = (collection: ViewModels.Collection): TreeNode => {
-    if (collection.analyticalStorageTtl() === undefined) {
-      return undefined;
-    }
-
-    if (!collection.schema || !collection.schema.fields) {
-      return undefined;
-    }
-
-    return {
-      label: "Schema",
-      children: getSchemaNodes(collection.schema.fields),
-      onClick: () => {
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Schema);
-        refreshActiveTab((tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid);
-      },
-    };
-  };
-
-  const getSchemaNodes = (fields: DataModels.IDataField[]): TreeNode[] => {
-    const schema: any = {};
-
-    //unflatten
-    fields.forEach((field: DataModels.IDataField) => {
-      const path: string[] = field.path.split(".");
-      const fieldProperties = [field.dataType.name, `HasNulls: ${field.hasNulls}`];
-      let current: any = {};
-      path.forEach((name: string, pathIndex: number) => {
-        if (pathIndex === 0) {
-          if (schema[name] === undefined) {
-            if (pathIndex === path.length - 1) {
-              schema[name] = fieldProperties;
-            } else {
-              schema[name] = {};
-            }
-          }
-          current = schema[name];
-        } else {
-          if (current[name] === undefined) {
-            if (pathIndex === path.length - 1) {
-              current[name] = fieldProperties;
-            } else {
-              current[name] = {};
-            }
-          }
-          current = current[name];
-        }
-      });
-    });
-
-    const traverse = (obj: any): TreeNode[] => {
-      const children: TreeNode[] = [];
-
-      if (obj !== undefined && !Array.isArray(obj) && typeof obj === "object") {
-        Object.entries(obj).forEach(([key, value]) => {
-          children.push({ label: key, children: traverse(value) });
-        });
-      } else if (Array.isArray(obj)) {
-        return [{ label: obj[0] }, { label: obj[1] }];
-      }
-
-      return children;
-    };
-
-    return traverse(schema);
-  };
-
-  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
-    const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
-    updateNotebookItem(updatedItem, isGithubTree);
-  };
-
-  const dataRootNode = buildDataTree();
   const isSampleDataEnabled =
-    useQueryCopilot().copilotEnabled &&
-    useQueryCopilot().copilotSampleDBEnabled &&
+    isCopilotEnabled &&
+    isCopilotSampleDBEnabled &&
     userContext.sampleDataConnectionInfo &&
     userContext.apiType === "SQL";
-  const sampleDataResourceTokenCollection = useDatabases((state) => state.sampleDataResourceTokenCollection);
+
+  const sampleDataNodes = useMemo<TreeNode[]>(() => {
+    return isSampleDataEnabled && sampleDataResourceTokenCollection
+      ? createSampleDataTreeNodes(sampleDataResourceTokenCollection)
+      : [];
+  }, [isSampleDataEnabled, sampleDataResourceTokenCollection]);
+
+  const rootNodes: TreeNode[] = useMemo(() => {
+    if (sampleDataNodes.length > 0) {
+      return [
+        {
+          id: "data",
+          label: MY_DATA_TREE_LABEL,
+          className: "accordionItemHeader",
+          children: databaseTreeNodes,
+          isScrollable: true,
+        },
+        {
+          id: "sampleData",
+          label: SAMPLE_DATA_TREE_LABEL,
+          className: "accordionItemHeader",
+          children: sampleDataNodes,
+        },
+      ];
+    } else {
+      return [
+        {
+          id: "data",
+          label: DATA_TREE_LABEL,
+          className: "accordionItemHeader",
+          children: databaseTreeNodes,
+          isScrollable: true,
+        },
+      ];
+    }
+  }, [databaseTreeNodes, sampleDataNodes]);
+
+  useEffect(() => {
+    // Compute open items based on node.isExpanded
+    const updateOpenItems = (node: TreeNode, parentNodeId: string): void => {
+      // This will look for ANY expanded node, event if its parent node isn't expanded
+      // and add it to the openItems list
+      const globalId = parentNodeId === undefined ? node.label : `${parentNodeId}/${node.label}`;
+
+      if (node.isExpanded) {
+        let found = false;
+        for (const id of openItems) {
+          if (id === globalId) {
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          setOpenItems((prevOpenItems) => [...prevOpenItems, globalId]);
+        }
+      }
+
+      if (node.children) {
+        for (const child of node.children) {
+          updateOpenItems(child, globalId);
+        }
+      }
+    };
+
+    rootNodes.forEach((n) => updateOpenItems(n, undefined));
+  }, [rootNodes, openItems, setOpenItems]);
+
+  const handleOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) => setOpenItems(data.openItems);
 
   return (
     <>
-      {!isNotebookEnabled && !isSampleDataEnabled && (
-        <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-      )}
-      {isNotebookEnabled && !isSampleDataEnabled && (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-        </>
-      )}
-      {!isNotebookEnabled && isSampleDataEnabled && (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
-              <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-        </>
-      )}
-      {isNotebookEnabled && isSampleDataEnabled && (
-        <>
-          <AccordionComponent>
-            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-            </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
-              <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
-            </AccordionItemComponent>
-          </AccordionComponent>
-        </>
-      )}
+      <FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}>
+        <Tree
+          aria-label="CosmosDB resources"
+          openItems={openItems}
+          onOpenChange={handleOpenChange}
+          size="small"
+          style={{ height: "100%", minWidth: "290px" }}
+        >
+          {rootNodes.map((node) => (
+            <TreeNodeComponent key={node.label} className="dataResourceTree" node={node} treeNodeId={node.label} />
+          ))}
+        </Tree>
+      </FluentProvider>
     </>
   );
 };
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.test.tsx b/src/Explorer/Tree/ResourceTreeAdapter.test.tsx
index 44609d95c..13e1137be 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.test.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.test.tsx
@@ -2,7 +2,11 @@ import { shallow } from "enzyme";
 import React from "react";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import {
+  LegacyTreeComponent,
+  LegacyTreeComponentProps,
+  LegacyTreeNode,
+} from "../Controls/TreeComponent/LegacyTreeComponent";
 import Explorer from "../Explorer";
 import Collection from "./Collection";
 import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
@@ -225,12 +229,12 @@ describe("Resource tree for schema", () => {
   const resourceTree = new ResourceTreeAdapter(mockContainer);
 
   it("should render", () => {
-    const rootNode: TreeNode = resourceTree.buildSchemaNode(createMockCollection());
-    const props: TreeComponentProps = {
+    const rootNode: LegacyTreeNode = resourceTree.buildSchemaNode(createMockCollection());
+    const props: LegacyTreeComponentProps = {
       rootNode,
       className: "dataResourceTree",
     };
-    const wrapper = shallow(<TreeComponent {...props} />);
+    const wrapper = shallow(<LegacyTreeComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/src/Explorer/Tree/ResourceTreeAdapter.tsx b/src/Explorer/Tree/ResourceTreeAdapter.tsx
index 2fd8d6bd1..3e669a1b2 100644
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -1,3 +1,5 @@
+import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
+import { shouldShowScriptNodes } from "Explorer/Tree/treeNodeUtil";
 import { getItemName } from "Utils/APITypeUtils";
 import * as ko from "knockout";
 import * as React from "react";
@@ -23,7 +25,7 @@ import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { useDialog } from "../Controls/Dialog";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
+import { LegacyTreeComponent, LegacyTreeNode } from "../Controls/TreeComponent/LegacyTreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
@@ -33,7 +35,6 @@ import { useNotebook } from "../Notebook/useNotebook";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
-import { Platform, configContext } from "./../../ConfigContext";
 import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
@@ -95,7 +96,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
   public renderComponent(): JSX.Element {
     const dataRootNode = this.buildDataTree();
-    return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
+    return <LegacyTreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
   }
 
   public async initialize(): Promise<void[]> {
@@ -157,61 +158,63 @@ export class ResourceTreeAdapter implements ReactAdapter {
     }
   }
 
-  private buildDataTree(): TreeNode {
-    const databaseTreeNodes: TreeNode[] = useDatabases.getState().databases.map((database: ViewModels.Database) => {
-      const databaseNode: TreeNode = {
-        label: database.id(),
-        iconSrc: CosmosDBIcon,
-        isExpanded: false,
-        className: "databaseHeader",
-        children: [],
-        isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(this.container, database.id()),
-        onClick: async (isExpanded) => {
-          // Rewritten version of expandCollapseDatabase():
-          if (isExpanded) {
-            database.collapseDatabase();
-          } else {
-            if (databaseNode.children?.length === 0) {
-              databaseNode.isLoading = true;
+  private buildDataTree(): LegacyTreeNode {
+    const databaseTreeNodes: LegacyTreeNode[] = useDatabases
+      .getState()
+      .databases.map((database: ViewModels.Database) => {
+        const databaseNode: LegacyTreeNode = {
+          label: database.id(),
+          iconSrc: CosmosDBIcon,
+          isExpanded: false,
+          className: "databaseHeader",
+          children: [],
+          isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
+          contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(this.container, database.id()),
+          onClick: async (isExpanded) => {
+            // Rewritten version of expandCollapseDatabase():
+            if (isExpanded) {
+              database.collapseDatabase();
+            } else {
+              if (databaseNode.children?.length === 0) {
+                databaseNode.isLoading = true;
+              }
+              await database.expandDatabase();
             }
-            await database.expandDatabase();
-          }
-          databaseNode.isLoading = false;
-          useSelectedNode.getState().setSelectedNode(database);
-          useCommandBar.getState().setContextButtons([]);
-          useTabs.getState().refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
-        },
-        onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
-      };
+            databaseNode.isLoading = false;
+            useSelectedNode.getState().setSelectedNode(database);
+            useCommandBar.getState().setContextButtons([]);
+            useTabs.getState().refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
+          },
+          onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
+        };
 
-      if (database.isDatabaseShared()) {
-        databaseNode.children.push({
-          label: "Scale",
-          isSelected: () =>
-            useSelectedNode
-              .getState()
-              .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettings]),
-          onClick: database.onSettingsClick.bind(database),
+        if (database.isDatabaseShared()) {
+          databaseNode.children.push({
+            label: "Scale",
+            isSelected: () =>
+              useSelectedNode
+                .getState()
+                .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettings]),
+            onClick: database.onSettingsClick.bind(database),
+          });
+        }
+
+        // Find collections
+        database
+          .collections()
+          .forEach((collection: ViewModels.Collection) =>
+            databaseNode.children.push(this.buildCollectionNode(database, collection)),
+          );
+
+        database.collections.subscribe((collections: ViewModels.Collection[]) => {
+          collections.forEach((collection: ViewModels.Collection) =>
+            databaseNode.children.push(this.buildCollectionNode(database, collection)),
+          );
         });
-      }
 
-      // Find collections
-      database
-        .collections()
-        .forEach((collection: ViewModels.Collection) =>
-          databaseNode.children.push(this.buildCollectionNode(database, collection)),
-        );
-
-      database.collections.subscribe((collections: ViewModels.Collection[]) => {
-        collections.forEach((collection: ViewModels.Collection) =>
-          databaseNode.children.push(this.buildCollectionNode(database, collection)),
-        );
+        return databaseNode;
       });
 
-      return databaseNode;
-    });
-
     return {
       label: undefined,
       isExpanded: true,
@@ -219,18 +222,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
     };
   }
 
-  /**
-   * This is a rewrite of Collection.ts : showScriptsMenu, showStoredProcedures, showTriggers, showUserDefinedFunctions
-   * @param container
-   */
-  private static showScriptNodes(container: Explorer): boolean {
-    return (
-      configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
-    );
-  }
-
-  private buildCollectionNode(database: ViewModels.Database, collection: ViewModels.Collection): TreeNode {
-    const children: TreeNode[] = [];
+  private buildCollectionNode(database: ViewModels.Database, collection: ViewModels.Collection): LegacyTreeNode {
+    const children: LegacyTreeNode[] = [];
     children.push({
       label: getItemName(),
       onClick: () => {
@@ -274,12 +267,12 @@ export class ResourceTreeAdapter implements ReactAdapter {
       });
     }
 
-    const schemaNode: TreeNode = this.buildSchemaNode(collection);
+    const schemaNode: LegacyTreeNode = this.buildSchemaNode(collection);
     if (schemaNode) {
       children.push(schemaNode);
     }
 
-    if (ResourceTreeAdapter.showScriptNodes(this.container)) {
+    if (shouldShowScriptNodes()) {
       children.push(this.buildStoredProcedureNode(collection));
       children.push(this.buildUserDefinedFunctionsNode(collection));
       children.push(this.buildTriggerNode(collection));
@@ -321,7 +314,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
           );
       },
       onExpanded: () => {
-        if (ResourceTreeAdapter.showScriptNodes(this.container)) {
+        if (shouldShowScriptNodes()) {
           collection.loadStoredProcedures();
           collection.loadUserDefinedFunctions();
           collection.loadTriggers();
@@ -332,7 +325,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     };
   }
 
-  private buildStoredProcedureNode(collection: ViewModels.Collection): TreeNode {
+  private buildStoredProcedureNode(collection: ViewModels.Collection): LegacyTreeNode {
     return {
       label: "Stored Procedures",
       children: collection.storedProcedures().map((sp: StoredProcedure) => ({
@@ -358,7 +351,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     };
   }
 
-  private buildUserDefinedFunctionsNode(collection: ViewModels.Collection): TreeNode {
+  private buildUserDefinedFunctionsNode(collection: ViewModels.Collection): LegacyTreeNode {
     return {
       label: "User Defined Functions",
       children: collection.userDefinedFunctions().map((udf: UserDefinedFunction) => ({
@@ -387,7 +380,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     };
   }
 
-  private buildTriggerNode(collection: ViewModels.Collection): TreeNode {
+  private buildTriggerNode(collection: ViewModels.Collection): LegacyTreeNode {
     return {
       label: "Triggers",
       children: collection.triggers().map((trigger: Trigger) => ({
@@ -411,7 +404,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     };
   }
 
-  public buildSchemaNode(collection: ViewModels.Collection): TreeNode {
+  public buildSchemaNode(collection: ViewModels.Collection): LegacyTreeNode {
     if (collection.analyticalStorageTtl() == undefined) {
       return undefined;
     }
@@ -430,7 +423,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     };
   }
 
-  private getSchemaNodes(fields: DataModels.IDataField[]): TreeNode[] {
+  private getSchemaNodes(fields: DataModels.IDataField[]): LegacyTreeNode[] {
     const schema: any = {};
 
     //unflatten
@@ -461,8 +454,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
       });
     });
 
-    const traverse = (obj: any): TreeNode[] => {
-      const children: TreeNode[] = [];
+    const traverse = (obj: any): LegacyTreeNode[] => {
+      const children: LegacyTreeNode[] = [];
 
       if (obj !== null && !Array.isArray(obj) && typeof obj === "object") {
         Object.entries(obj).forEach(([key, value]) => {
@@ -483,7 +476,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     onFileClick: (item: NotebookContentItem) => void,
     createDirectoryContextMenu: boolean,
     createFileContextMenu: boolean,
-  ): TreeNode[] {
+  ): LegacyTreeNode[] {
     if (!item || !item.children) {
       return [];
     } else {
@@ -502,7 +495,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     item: NotebookContentItem,
     onFileClick: (item: NotebookContentItem) => void,
     createFileContextMenu: boolean,
-  ): TreeNode {
+  ): LegacyTreeNode {
     return {
       label: item.name,
       iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
@@ -650,7 +643,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     onFileClick: (item: NotebookContentItem) => void,
     createDirectoryContextMenu: boolean,
     createFileContextMenu: boolean,
-  ): TreeNode {
+  ): LegacyTreeNode {
     return {
       label: item.name,
       iconSrc: undefined,
diff --git a/src/Explorer/Tree/SampleDataTree.tsx b/src/Explorer/Tree/SampleDataTree.tsx
index dc75a8b97..eafd2b862 100644
--- a/src/Explorer/Tree/SampleDataTree.tsx
+++ b/src/Explorer/Tree/SampleDataTree.tsx
@@ -7,15 +7,15 @@ import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as ViewModels from "../../Contracts/ViewModels";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import { LegacyTreeComponent, LegacyTreeNode } from "../Controls/TreeComponent/LegacyTreeComponent";
 
 export const SampleDataTree = ({
   sampleDataResourceTokenCollection,
 }: {
   sampleDataResourceTokenCollection: ViewModels.CollectionBase;
 }): JSX.Element => {
-  const buildSampleDataTree = (): TreeNode => {
-    const updatedSampleTree: TreeNode = {
+  const buildSampleDataTree = (): LegacyTreeNode => {
+    const updatedSampleTree: LegacyTreeNode = {
       label: sampleDataResourceTokenCollection.databaseId,
       isExpanded: false,
       iconSrc: CosmosDBIcon,
@@ -70,7 +70,7 @@ export const SampleDataTree = ({
   };
 
   return (
-    <TreeComponent
+    <LegacyTreeComponent
       className="dataResourceTree"
       rootNode={sampleDataResourceTokenCollection ? buildSampleDataTree() : { label: "Sample data not initialized." }}
     />
diff --git a/src/Explorer/Tree/__snapshots__/ResourceTreeAdapter.test.tsx.snap b/src/Explorer/Tree/__snapshots__/ResourceTreeAdapter.test.tsx.snap
index dbb9ba112..ce0868e6c 100644
--- a/src/Explorer/Tree/__snapshots__/ResourceTreeAdapter.test.tsx.snap
+++ b/src/Explorer/Tree/__snapshots__/ResourceTreeAdapter.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Resource tree for schema should render 1`] = `
   className="treeComponent dataResourceTree"
   role="tree"
 >
-  <TreeNodeComponent
+  <LegacyTreeNodeComponent
     generation={0}
     node={
       Object {
diff --git a/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap b/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap
new file mode 100644
index 000000000..85da68c49
--- /dev/null
+++ b/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap
@@ -0,0 +1,2074 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createDatabaseTreeNodes generates the correct tree structure for the Cassandra API, serverless, on Hosted 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Table",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Rows",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Table",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "standardCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Table",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Rows",
+            "onClick": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Conflicts",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Table",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "conflictsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Table",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Keyspace",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "standardDb",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "id": "",
+        "isSelected": [Function],
+        "label": "Scale",
+        "onClick": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Table",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "sampleItems",
+            "isSelected": [Function],
+            "label": "Rows",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Table",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "sampleItemsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Table",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Keyspace",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "sharedDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Table",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Rows",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "children": Array [
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "street",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: true",
+                      },
+                    ],
+                    "label": "line2",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "number",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "zip",
+                  },
+                ],
+                "label": "address",
+              },
+              Object {
+                "children": Array [
+                  Object {
+                    "label": "string",
+                  },
+                  Object {
+                    "label": "HasNulls: false",
+                  },
+                ],
+                "label": "orderId",
+              },
+            ],
+            "label": "Schema",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Table",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "schemaCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "className": "loadMoreHeader",
+        "label": "load more",
+        "onClick": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Table",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Keyspace",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "giganticDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+]
+`;
+
+exports[`createDatabaseTreeNodes generates the correct tree structure for the Mongo API, with Notebooks and Phoenix features, on Emulator 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Shell",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Collection",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Documents",
+            "onClick": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Schema (Preview)",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Shell",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Collection",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "standardCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Shell",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Collection",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Documents",
+            "onClick": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Schema (Preview)",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Conflicts",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Shell",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Collection",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "conflictsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Collection",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "standardDb",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "id": "",
+        "isSelected": [Function],
+        "label": "Scale",
+        "onClick": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Shell",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Collection",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "sampleItems",
+            "isSelected": [Function],
+            "label": "Documents",
+            "onClick": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Schema (Preview)",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "sampleSettings",
+            "isSelected": [Function],
+            "label": "Settings",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Shell",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Collection",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "sampleItemsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Collection",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "sharedDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Shell",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Collection",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Documents",
+            "onClick": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Schema (Preview)",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "children": Array [
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "street",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: true",
+                      },
+                    ],
+                    "label": "line2",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "number",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "zip",
+                  },
+                ],
+                "label": "address",
+              },
+              Object {
+                "children": Array [
+                  Object {
+                    "label": "string",
+                  },
+                  Object {
+                    "label": "HasNulls: false",
+                  },
+                ],
+                "label": "orderId",
+              },
+            ],
+            "label": "Schema",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Shell",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Collection",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "schemaCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "className": "loadMoreHeader",
+        "label": "load more",
+        "onClick": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Collection",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "giganticDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+]
+`;
+
+exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": undefined,
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "standardCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "children": undefined,
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "conflictsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "standardDb",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": undefined,
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "sampleItemsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "sharedDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": undefined,
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "schemaCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "className": "loadMoreHeader",
+        "label": "load more",
+        "onClick": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "giganticDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+]
+`;
+
+exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Portal 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "contextMenu": Array [
+                  Object {
+                    "iconSrc": Object {},
+                    "label": "Delete Stored Procedure",
+                    "onClick": [Function],
+                  },
+                ],
+                "isSelected": [Function],
+                "label": "mockSproc3",
+                "onClick": [Function],
+              },
+            ],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "contextMenu": Array [
+                  Object {
+                    "iconSrc": Object {},
+                    "label": "Delete User Defined Function",
+                    "onClick": [Function],
+                  },
+                ],
+                "isSelected": [Function],
+                "label": "mockUdf3",
+                "onClick": [Function],
+              },
+            ],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "contextMenu": Array [
+                  Object {
+                    "iconSrc": Object {},
+                    "label": "Delete Trigger",
+                    "onClick": [Function],
+                  },
+                ],
+                "isSelected": [Function],
+                "label": "mockTrigger3",
+                "onClick": [Function],
+              },
+            ],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "standardCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+          Object {
+            "isSelected": [Function],
+            "label": "Conflicts",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "conflictsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "standardDb",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "id": "",
+        "isSelected": [Function],
+        "label": "Scale",
+        "onClick": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "sampleItems",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "sampleSettings",
+            "isSelected": [Function],
+            "label": "Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "sampleItemsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "sharedDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "children": Array [
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "street",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: true",
+                      },
+                    ],
+                    "label": "line2",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "number",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "zip",
+                  },
+                ],
+                "label": "address",
+              },
+              Object {
+                "children": Array [
+                  Object {
+                    "label": "string",
+                  },
+                  Object {
+                    "label": "HasNulls: false",
+                  },
+                ],
+                "label": "orderId",
+              },
+            ],
+            "label": "Schema",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "schemaCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "className": "loadMoreHeader",
+        "label": "load more",
+        "onClick": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "giganticDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+]
+`;
+
+exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expected tree 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "contextMenu": Array [
+                  Object {
+                    "iconSrc": Object {},
+                    "label": "Delete Stored Procedure",
+                    "onClick": [Function],
+                  },
+                ],
+                "isSelected": [Function],
+                "label": "mockSproc1",
+                "onClick": [Function],
+              },
+            ],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "contextMenu": Array [
+                  Object {
+                    "iconSrc": Object {},
+                    "label": "Delete User Defined Function",
+                    "onClick": [Function],
+                  },
+                ],
+                "isSelected": [Function],
+                "label": "mockUdf1",
+                "onClick": [Function],
+              },
+            ],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "contextMenu": Array [
+                  Object {
+                    "iconSrc": Object {},
+                    "label": "Delete Trigger",
+                    "onClick": [Function],
+                  },
+                ],
+                "isSelected": [Function],
+                "label": "mockTrigger1",
+                "onClick": [Function],
+              },
+            ],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "standardCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "conflictsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "standardDb",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "id": "",
+        "isSelected": [Function],
+        "label": "Scale",
+        "onClick": [Function],
+      },
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "sampleItems",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "sampleSettings",
+            "isSelected": [Function],
+            "label": "Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "sampleItemsCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "sharedDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Stored Procedure",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New UDF",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "New Trigger",
+                "onClick": [Function],
+              },
+              Object {
+                "iconSrc": Object {},
+                "label": "Delete Container",
+                "onClick": [Function],
+                "styleClass": "deleteCollectionMenuItem",
+              },
+            ],
+            "id": "",
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+          Object {
+            "id": "",
+            "isSelected": [Function],
+            "label": "Scale & Settings",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [
+              Object {
+                "children": Array [
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "street",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "string",
+                      },
+                      Object {
+                        "label": "HasNulls: true",
+                      },
+                    ],
+                    "label": "line2",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "label": "number",
+                      },
+                      Object {
+                        "label": "HasNulls: false",
+                      },
+                    ],
+                    "label": "zip",
+                  },
+                ],
+                "label": "address",
+              },
+              Object {
+                "children": Array [
+                  Object {
+                    "label": "string",
+                  },
+                  Object {
+                    "label": "HasNulls: false",
+                  },
+                ],
+                "label": "orderId",
+              },
+            ],
+            "label": "Schema",
+            "onClick": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Stored Procedures",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "User Defined Functions",
+            "onExpanded": [Function],
+          },
+          Object {
+            "children": Array [],
+            "label": "Triggers",
+            "onExpanded": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Stored Procedure",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New UDF",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "New Trigger",
+            "onClick": [Function],
+          },
+          Object {
+            "iconSrc": Object {},
+            "label": "Delete Container",
+            "onClick": [Function],
+            "styleClass": "deleteCollectionMenuItem",
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": true,
+        "isSelected": [Function],
+        "label": "schemaCollection",
+        "onClick": [Function],
+        "onCollapsed": [Function],
+        "onContextMenuOpen": [Function],
+        "onExpanded": [Function],
+      },
+      Object {
+        "className": "loadMoreHeader",
+        "label": "load more",
+        "onClick": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "contextMenu": Array [
+      Object {
+        "iconSrc": Object {},
+        "label": "New Container",
+        "onClick": [Function],
+      },
+      Object {
+        "iconSrc": Object {},
+        "label": "Delete Database",
+        "onClick": [Function],
+        "styleClass": "deleteDatabaseMenuItem",
+      },
+    ],
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "giganticDatabase",
+    "onCollapsed": [Function],
+    "onContextMenuOpen": [Function],
+    "onExpanded": [Function],
+  },
+]
+`;
+
+exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "isSelected": [Function],
+        "label": "Items",
+        "onClick": [Function],
+      },
+    ],
+    "className": "collectionHeader",
+    "iconSrc": Object {},
+    "isExpanded": true,
+    "isSelected": [Function],
+    "label": "testCollection",
+    "onClick": [Function],
+  },
+]
+`;
+
+exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "contextMenu": Array [
+              Object {
+                "iconSrc": Object {},
+                "label": "New SQL Query",
+                "onClick": [Function],
+              },
+            ],
+            "isSelected": [Function],
+            "label": "Items",
+            "onClick": [Function],
+          },
+        ],
+        "className": "collectionHeader",
+        "contextMenu": Array [
+          Object {
+            "iconSrc": Object {},
+            "label": "New SQL Query",
+            "onClick": [Function],
+          },
+        ],
+        "iconSrc": Object {},
+        "isExpanded": false,
+        "isSelected": [Function],
+        "label": "testCollection",
+        "onClick": [Function],
+        "onContextMenuOpen": [Function],
+      },
+    ],
+    "className": "databaseHeader",
+    "iconSrc": Object {},
+    "isExpanded": false,
+    "label": "testDatabase",
+  },
+]
+`;
diff --git a/src/Explorer/Tree/treeNodeUtil.test.ts b/src/Explorer/Tree/treeNodeUtil.test.ts
new file mode 100644
index 000000000..72f2270b7
--- /dev/null
+++ b/src/Explorer/Tree/treeNodeUtil.test.ts
@@ -0,0 +1,602 @@
+import { CapabilityNames } from "Common/Constants";
+import { Platform, updateConfigContext } from "ConfigContext";
+import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
+import Explorer from "Explorer/Explorer";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { DeleteDatabaseConfirmationPanel } from "Explorer/Panes/DeleteDatabaseConfirmationPanel";
+import TabsBase from "Explorer/Tabs/TabsBase";
+import StoredProcedure from "Explorer/Tree/StoredProcedure";
+import Trigger from "Explorer/Tree/Trigger";
+import UserDefinedFunction from "Explorer/Tree/UserDefinedFunction";
+import {
+  createDatabaseTreeNodes,
+  createResourceTokenTreeNodes,
+  createSampleDataTreeNodes,
+} from "Explorer/Tree/treeNodeUtil";
+import { useDatabases } from "Explorer/useDatabases";
+import { useSelectedNode } from "Explorer/useSelectedNode";
+import { updateUserContext } from "UserContext";
+import PromiseSource from "Utils/PromiseSource";
+import { useSidePanel } from "hooks/useSidePanel";
+import { useTabs } from "hooks/useTabs";
+import ko from "knockout";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+
+jest.mock("Explorer/Explorer", () => {
+  // eslint-disable-next-line @typescript-eslint/no-extraneous-class
+  class MockExplorer {
+    onNewCollectionClicked = jest.fn();
+  }
+
+  return MockExplorer;
+});
+
+jest.mock("Explorer/Tree/StoredProcedure", () => {
+  let counter = 0;
+  class MockStoredProcedure {
+    id: () => string;
+    open = jest.fn();
+    delete = jest.fn();
+    constructor() {
+      this.id = () => `mockSproc${counter}`;
+      counter++;
+    }
+  }
+
+  return MockStoredProcedure;
+});
+
+jest.mock("Explorer/Tree/UserDefinedFunction", () => {
+  let counter = 0;
+  class MockUserDefinedFunction {
+    id: () => string;
+    open = jest.fn();
+    delete = jest.fn();
+    constructor() {
+      this.id = () => `mockUdf${counter}`;
+      counter++;
+    }
+  }
+
+  return MockUserDefinedFunction;
+});
+
+jest.mock("Explorer/Tree/Trigger", () => {
+  let counter = 0;
+  class MockTrigger {
+    id: () => string;
+    open = jest.fn();
+    delete = jest.fn();
+    constructor() {
+      this.id = () => `mockTrigger${counter}`;
+      counter++;
+    }
+  }
+
+  return MockTrigger;
+});
+
+jest.mock("Common/DatabaseAccountUtility", () => {
+  return {
+    isPublicInternetAccessAllowed: () => true,
+  };
+});
+
+// Defining this value outside the mock, AND prefixing the name with 'mock' is required by Jest's mocking logic.
+let nextTabIndex = 1;
+class MockTab extends TabsBase {
+  constructor(tabOptions: Pick<ViewModels.TabOptions, "tabKind"> & Partial<ViewModels.TabOptions>) {
+    super({
+      title: `Mock Tab ${nextTabIndex}`,
+      tabPath: `mockTabs/tab${nextTabIndex}`,
+      ...tabOptions,
+    } as ViewModels.TabOptions);
+    nextTabIndex++;
+  }
+
+  onActivate = jest.fn();
+}
+
+/** A basic test collection that can be expanded on in tests. */
+const baseCollection = {
+  container: new Explorer(),
+  databaseId: "testDatabase",
+  id: ko.observable<string>("testCollection"),
+  defaultTtl: ko.observable<number>(5),
+  analyticalStorageTtl: ko.observable<number>(undefined),
+  selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(),
+  indexingPolicy: ko.observable<DataModels.IndexingPolicy>({
+    automatic: true,
+    indexingMode: "consistent",
+    includedPaths: [],
+    excludedPaths: [],
+  }),
+  uniqueKeyPolicy: {} as DataModels.UniqueKeyPolicy,
+  usageSizeInKB: ko.observable(100),
+  offer: ko.observable<DataModels.Offer>({
+    autoscaleMaxThroughput: undefined,
+    manualThroughput: 10000,
+    minimumThroughput: 6000,
+    id: "offer",
+    offerReplacePending: false,
+  }),
+  conflictResolutionPolicy: ko.observable<DataModels.ConflictResolutionPolicy>(
+    {} as DataModels.ConflictResolutionPolicy,
+  ),
+  changeFeedPolicy: ko.observable<DataModels.ChangeFeedPolicy>({} as DataModels.ChangeFeedPolicy),
+  geospatialConfig: ko.observable<DataModels.GeospatialConfig>({} as DataModels.GeospatialConfig),
+  getDatabase: () => {},
+  partitionKey: {
+    paths: [],
+    kind: "hash",
+    version: 2,
+  },
+  storedProcedures: ko.observableArray([]),
+  userDefinedFunctions: ko.observableArray([]),
+  triggers: ko.observableArray([]),
+  partitionKeyProperties: ["testPartitionKey"],
+  readSettings: () => {},
+  isCollectionExpanded: ko.observable(true),
+  onSettingsClick: jest.fn(),
+  onDocumentDBDocumentsClick: jest.fn(),
+  onNewQueryClick: jest.fn(),
+  onConflictsClick: jest.fn(),
+  onSchemaAnalyzerClick: jest.fn(),
+} as unknown as ViewModels.Collection;
+
+/** A basic test database that can be expanded on in tests */
+const baseDatabase = {
+  container: new Explorer(),
+  id: ko.observable<string>("testDatabase"),
+  collections: ko.observableArray<ViewModels.Collection>([]),
+  isDatabaseShared: ko.pureComputed(() => false),
+  isDatabaseExpanded: ko.observable(true),
+  selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(),
+  expandDatabase: jest.fn().mockResolvedValue({}),
+  collapseDatabase: jest.fn(),
+  onSettingsClick: jest.fn(),
+} as unknown as ViewModels.Database;
+
+/** Configures app state so that useSelectedNode.getState().isDataNodeSelected() returns true for the provided arguments. */
+function selectDataNode(
+  node: ViewModels.Database | ViewModels.CollectionBase,
+  subnodeKind?: ViewModels.CollectionTabKind,
+) {
+  useSelectedNode.getState().setSelectedNode(node);
+
+  if (subnodeKind !== undefined) {
+    node.selectedSubnodeKind(subnodeKind);
+    useTabs.getState().activateNewTab(new MockTab({ tabKind: subnodeKind, node }));
+  }
+}
+
+describe("createSampleDataTreeNodes", () => {
+  let sampleDataResourceTokenCollection: ViewModels.Collection;
+  let nodes: TreeNode[];
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    const collection = { ...baseCollection };
+    useDatabases.setState({ sampleDataResourceTokenCollection: collection });
+    useSelectedNode.setState({ selectedNode: undefined });
+
+    sampleDataResourceTokenCollection = collection;
+    nodes = createSampleDataTreeNodes(sampleDataResourceTokenCollection);
+  });
+
+  it("creates the expected tree nodes", () => {
+    expect(nodes).toMatchSnapshot();
+  });
+});
+
+describe("createResourceTokenTreeNodes", () => {
+  let resourceTokenCollection: ViewModels.Collection;
+  let nodes: TreeNode[];
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    const collection = { ...baseCollection };
+    useDatabases.setState({ resourceTokenCollection: collection });
+    useSelectedNode.setState({ selectedNode: undefined });
+
+    resourceTokenCollection = collection;
+    nodes = createResourceTokenTreeNodes(resourceTokenCollection);
+  });
+
+  it("returns an empty node when collection is undefined or null", () => {
+    const snapshot = `
+Array [
+  Object {
+    "children": Array [],
+    "isExpanded": true,
+    "label": "",
+  },
+]
+`;
+    expect(createResourceTokenTreeNodes(undefined)).toMatchInlineSnapshot(snapshot);
+    expect(createResourceTokenTreeNodes(null)).toMatchInlineSnapshot(snapshot);
+  });
+
+  it("creates the expected tree nodes", () => {
+    expect(nodes).toMatchSnapshot();
+  });
+});
+
+describe("createDatabaseTreeNodes", () => {
+  let explorer: Explorer;
+  let standardDb: ViewModels.Database;
+  let sharedDb: ViewModels.Database;
+  let giganticDb: ViewModels.Database;
+  let standardCollection: ViewModels.Collection;
+  let sampleItemsCollection: ViewModels.Collection;
+  let schemaCollection: ViewModels.Collection;
+  let conflictsCollection: ViewModels.Collection;
+  let sproc: StoredProcedure;
+  let udf: UserDefinedFunction;
+  let trigger: Trigger;
+  let refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    explorer = new Explorer();
+    standardDb = {
+      ...baseDatabase,
+      id: ko.observable("standardDb"),
+      container: explorer,
+    } as ViewModels.Database;
+    sharedDb = {
+      ...baseDatabase,
+      id: ko.observable("sharedDatabase"),
+      container: explorer,
+      isDatabaseShared: ko.pureComputed(() => true),
+    } as ViewModels.Database;
+    giganticDb = {
+      ...baseDatabase,
+      id: ko.observable("giganticDatabase"),
+      container: explorer,
+      collectionsContinuationToken: "continuationToken",
+    } as ViewModels.Database;
+
+    standardCollection = {
+      ...baseCollection,
+      id: ko.observable("standardCollection"),
+      container: explorer,
+      databaseId: standardDb.id(),
+    } as ViewModels.Collection;
+
+    // These classes are mocked, so the constructor args don't matter
+    sproc = new StoredProcedure(explorer, standardCollection, {} as never);
+    standardCollection.storedProcedures = ko.pureComputed(() => [sproc]);
+    udf = new UserDefinedFunction(explorer, standardCollection, {} as never);
+    standardCollection.userDefinedFunctions = ko.pureComputed(() => [udf]);
+    trigger = new Trigger(explorer, standardCollection, {} as never);
+    standardCollection.triggers = ko.pureComputed(() => [trigger]);
+
+    sampleItemsCollection = {
+      ...baseCollection,
+      id: ko.observable("sampleItemsCollection"),
+      container: explorer,
+      databaseId: sharedDb.id(),
+      isSampleCollection: true,
+    } as ViewModels.Collection;
+
+    schemaCollection = {
+      ...baseCollection,
+      id: ko.observable("schemaCollection"),
+      container: explorer,
+      databaseId: sharedDb.id(),
+      analyticalStorageTtl: ko.observable<number>(5),
+      schema: {
+        fields: [
+          {
+            path: "address.street",
+            dataType: { name: "string" },
+            hasNulls: false,
+          },
+          {
+            path: "address.line2",
+            dataType: { name: "string" },
+            hasNulls: true,
+          },
+          {
+            path: "address.zip",
+            dataType: { name: "number" },
+            hasNulls: false,
+          },
+          {
+            path: "orderId",
+            dataType: { name: "string" },
+            hasNulls: false,
+          },
+        ],
+      } as unknown,
+    } as ViewModels.Collection;
+
+    conflictsCollection = {
+      ...baseCollection,
+      id: ko.observable("conflictsCollection"),
+      rawDataModel: {
+        conflictResolutionPolicy: {
+          mode: "Custom",
+          conflictResolutionPath: "path",
+          conflictResolutionProcedure: "proc",
+        },
+      },
+    } as ViewModels.Collection;
+
+    standardDb.collections = ko.observableArray([standardCollection, conflictsCollection]);
+    sharedDb.collections = ko.observableArray([sampleItemsCollection]);
+    giganticDb.collections = ko.observableArray([schemaCollection]);
+
+    useDatabases.setState({
+      databases: [standardDb, sharedDb, giganticDb],
+      updateDatabase: jest.fn(),
+    });
+    useSelectedNode.setState({ selectedNode: undefined });
+
+    refreshActiveTab = jest.fn();
+  });
+
+  describe("using NoSQL API on Hosted Platform", () => {
+    let nodes: TreeNode[];
+    beforeEach(() => {
+      updateConfigContext({
+        platform: Platform.Hosted,
+      });
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [],
+          },
+        } as never,
+      });
+      nodes = createDatabaseTreeNodes(explorer, false, useDatabases.getState().databases, refreshActiveTab);
+    });
+
+    it("creates expected tree", () => {
+      expect(nodes).toMatchSnapshot();
+    });
+  });
+
+  it.each<[string, Platform, boolean, Partial<DataModels.DatabaseAccountExtendedProperties>]>([
+    ["the SQL API, on Fabric", Platform.Fabric, false, { capabilities: [], enableMultipleWriteLocations: true }],
+    ["the SQL API, on Portal", Platform.Portal, false, { capabilities: [], enableMultipleWriteLocations: true }],
+    [
+      "the Cassandra API, serverless, on Hosted",
+      Platform.Hosted,
+      false,
+      {
+        capabilities: [
+          { name: CapabilityNames.EnableCassandra, description: "" },
+          { name: CapabilityNames.EnableServerless, description: "" },
+        ],
+      },
+    ],
+    [
+      "the Mongo API, with Notebooks and Phoenix features, on Emulator",
+      Platform.Emulator,
+      true,
+      {
+        capabilities: [{ name: CapabilityNames.EnableMongo, description: "" }],
+      },
+    ],
+  ])("generates the correct tree structure for %s", (_, platform, isNotebookEnabled, dbAccountProperties) => {
+    useNotebook.setState({ isPhoenixFeatures: isNotebookEnabled });
+    updateConfigContext({ platform });
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          enableMultipleWriteLocations: true,
+          ...dbAccountProperties,
+        },
+      } as unknown as DataModels.DatabaseAccount,
+    });
+    const nodes = createDatabaseTreeNodes(
+      explorer,
+      isNotebookEnabled,
+      useDatabases.getState().databases,
+      refreshActiveTab,
+    );
+    expect(nodes).toMatchSnapshot();
+  });
+
+  // The above tests focused on the tree structure. The below tests focus on some core behaviors of the nodes.
+  // They are not exhaustive, because exhaustive tests here require a lot of mocking and can become very brittle.
+  // The goal is to cover some key behaviors like loading child nodes, opening tabs/side panels, etc.
+
+  it("adds new collections to database as they appear", () => {
+    const nodes = createDatabaseTreeNodes(explorer, false, useDatabases.getState().databases, refreshActiveTab);
+    const giganticDbNode = nodes.find((node) => node.label === giganticDb.id());
+    expect(giganticDbNode).toBeDefined();
+    expect(giganticDbNode.children.map((node) => node.label)).toStrictEqual(["schemaCollection", "load more"]);
+
+    giganticDb.collections.push({
+      ...baseCollection,
+      id: ko.observable("addedCollection"),
+    });
+
+    expect(giganticDbNode.children.map((node) => node.label)).toStrictEqual([
+      "schemaCollection",
+      "addedCollection",
+      "load more",
+    ]);
+  });
+
+  describe("the database node", () => {
+    let nodes: TreeNode[];
+    let standardDbNode: TreeNode;
+    let sharedDbNode: TreeNode;
+    let giganticDbNode: TreeNode;
+
+    beforeEach(() => {
+      updateConfigContext({ platform: Platform.Hosted });
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [],
+          },
+        } as unknown as DataModels.DatabaseAccount,
+      });
+      nodes = createDatabaseTreeNodes(explorer, false, useDatabases.getState().databases, refreshActiveTab);
+      standardDbNode = nodes.find((node) => node.label === standardDb.id());
+      sharedDbNode = nodes.find((node) => node.label === sharedDb.id());
+      giganticDbNode = nodes.find((node) => node.label === giganticDb.id());
+    });
+
+    it("loads child nodes when expanded", async () => {
+      // Temporarily clear the child nodes to trigger the loading behavior
+      standardDbNode.children = [];
+
+      const expanding = new PromiseSource();
+      let expandCalled = false;
+      standardDb.expandDatabase = () => {
+        expandCalled = true;
+        return expanding.promise;
+      };
+
+      standardDbNode.onExpanded();
+      expect(useSelectedNode.getState().selectedNode).toBe(standardDb);
+      expect(standardDbNode.isLoading).toStrictEqual(true);
+      expect(expandCalled).toStrictEqual(true);
+
+      await expanding.resolveAndWait();
+
+      expect(standardDbNode.isLoading).toStrictEqual(false);
+      expect(useCommandBar.getState().contextButtons).toStrictEqual([]);
+      expect(refreshActiveTab).toHaveBeenCalled();
+      expect(useDatabases.getState().updateDatabase).toHaveBeenCalledWith(standardDb);
+    });
+
+    it("opens a New Container panel when 'New Container' option in context menu is clicked", () => {
+      const newContainerMenuItem = standardDbNode.contextMenu.find((item) => item.label === "New Container");
+      newContainerMenuItem.onClick();
+      expect(explorer.onNewCollectionClicked).toHaveBeenCalled();
+    });
+
+    it("opens a Delete Database panel when 'Delete Database' option in context menu is clicked", () => {
+      const deleteDatabaseMenuItem = standardDbNode.contextMenu.find((item) => item.label === "Delete Database");
+      deleteDatabaseMenuItem.onClick();
+      expect(useSidePanel.getState().headerText).toStrictEqual("Delete Database");
+      expect(useSidePanel.getState().panelContent.type).toStrictEqual(DeleteDatabaseConfirmationPanel);
+    });
+
+    describe("the Scale subnode", () => {
+      let scaleNode: TreeNode;
+      beforeEach(() => {
+        scaleNode = sharedDbNode.children.find((node) => node.label === "Scale");
+      });
+
+      it("is selected when Scale tab is open", () => {
+        expect(scaleNode.isSelected()).toStrictEqual(false);
+        selectDataNode(sharedDb, ViewModels.CollectionTabKind.DatabaseSettingsV2);
+        expect(scaleNode.isSelected()).toStrictEqual(true);
+      });
+
+      it("opens settings tab when clicked", () => {
+        expect(sharedDb.onSettingsClick).not.toHaveBeenCalled();
+        scaleNode.onClick();
+        expect(sharedDb.onSettingsClick).toHaveBeenCalled();
+      });
+    });
+
+    describe("the load more node", () => {
+      it("loads more collections when clicked", async () => {
+        const loadCollections = new PromiseSource();
+        let loadCalled = false;
+        giganticDb.loadCollections = () => {
+          loadCalled = true;
+          return loadCollections.promise;
+        };
+
+        const loadMoreNode = giganticDbNode.children.find((node) => node.label === "load more");
+        loadMoreNode.onClick();
+        expect(loadCalled).toStrictEqual(true);
+        await loadCollections.resolveAndWait();
+        expect(useDatabases.getState().updateDatabase).toHaveBeenCalledWith(giganticDb);
+      });
+    });
+
+    describe("the Collection subnode", () => {
+      let standardCollectionNode: TreeNode;
+      beforeEach(() => {
+        standardCollectionNode = standardDbNode.children.find((node) => node.label === standardCollection.id());
+      });
+
+      it.each([
+        [
+          "for SQL API",
+          () => updateUserContext({ databaseAccount: { properties: {} } as unknown as DataModels.DatabaseAccount }),
+        ],
+        [
+          "for Gremlin API",
+          () =>
+            updateUserContext({
+              databaseAccount: {
+                properties: { capabilities: [{ name: CapabilityNames.EnableGremlin, description: "" }] },
+              } as unknown as DataModels.DatabaseAccount,
+            }),
+        ],
+      ])("loads sprocs/udfs/triggers when expanded, %s", async () => {
+        standardCollection.loadStoredProcedures = jest.fn(() => Promise.resolve());
+        standardCollection.loadUserDefinedFunctions = jest.fn(() => Promise.resolve());
+        standardCollection.loadTriggers = jest.fn(() => Promise.resolve());
+
+        await standardCollectionNode.onExpanded();
+
+        expect(standardCollection.loadStoredProcedures).toHaveBeenCalled();
+        expect(standardCollection.loadUserDefinedFunctions).toHaveBeenCalled();
+        expect(standardCollection.loadTriggers).toHaveBeenCalled();
+      });
+
+      it.each([
+        ["in Fabric", () => updateConfigContext({ platform: Platform.Fabric })],
+        [
+          "for Cassandra API",
+          () =>
+            updateUserContext({
+              databaseAccount: {
+                properties: { capabilities: [{ name: CapabilityNames.EnableCassandra, description: "" }] },
+              } as unknown as DataModels.DatabaseAccount,
+            }),
+        ],
+        [
+          "for Mongo API",
+          () =>
+            updateUserContext({
+              databaseAccount: {
+                properties: { capabilities: [{ name: CapabilityNames.EnableMongo, description: "" }] },
+              } as unknown as DataModels.DatabaseAccount,
+            }),
+        ],
+        [
+          "for Tables API",
+          () =>
+            updateUserContext({
+              databaseAccount: {
+                properties: { capabilities: [{ name: CapabilityNames.EnableTable, description: "" }] },
+              } as unknown as DataModels.DatabaseAccount,
+            }),
+        ],
+      ])("does not load sprocs/udfs/triggers when expanded, %s", async (_, setup) => {
+        setup();
+
+        // Rebuild the nodes after changing the user/config context.
+        nodes = createDatabaseTreeNodes(explorer, false, useDatabases.getState().databases, refreshActiveTab);
+        standardDbNode = nodes.find((node) => node.label === standardDb.id());
+        standardCollectionNode = standardDbNode.children.find((node) => node.label === standardCollection.id());
+
+        standardCollection.loadStoredProcedures = jest.fn(() => Promise.resolve());
+        standardCollection.loadUserDefinedFunctions = jest.fn(() => Promise.resolve());
+        standardCollection.loadTriggers = jest.fn(() => Promise.resolve());
+
+        await standardCollectionNode.onExpanded();
+
+        expect(standardCollection.loadStoredProcedures).not.toHaveBeenCalled();
+        expect(standardCollection.loadUserDefinedFunctions).not.toHaveBeenCalled();
+        expect(standardCollection.loadTriggers).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/src/Explorer/Tree2/containerTreeNodeUtil.ts b/src/Explorer/Tree/treeNodeUtil.ts
similarity index 59%
rename from src/Explorer/Tree2/containerTreeNodeUtil.ts
rename to src/Explorer/Tree/treeNodeUtil.ts
index e197d8ede..e520f9f36 100644
--- a/src/Explorer/Tree2/containerTreeNodeUtil.ts
+++ b/src/Explorer/Tree/treeNodeUtil.ts
@@ -1,4 +1,4 @@
-import { TreeNode2 } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
+import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import TabsBase from "Explorer/Tabs/TabsBase";
 import StoredProcedure from "Explorer/Tree/StoredProcedure";
 import Trigger from "Explorer/Tree/Trigger";
@@ -6,8 +6,11 @@ import UserDefinedFunction from "Explorer/Tree/UserDefinedFunction";
 import { useDatabases } from "Explorer/useDatabases";
 import { getItemName } from "Utils/APITypeUtils";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
+import { useTabs } from "hooks/useTabs";
+import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
+import { Platform, configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
@@ -17,7 +20,192 @@ import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { useNotebook } from "../Notebook/useNotebook";
 import { useSelectedNode } from "../useSelectedNode";
-import { Platform, configContext } from "./../../ConfigContext";
+
+export const shouldShowScriptNodes = (): boolean => {
+  return (
+    configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+  );
+};
+
+export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => {
+  const updatedSampleTree: TreeNode = {
+    label: sampleDataResourceTokenCollection.databaseId,
+    isExpanded: false,
+    iconSrc: CosmosDBIcon,
+    className: "databaseHeader",
+    children: [
+      {
+        label: sampleDataResourceTokenCollection.id(),
+        iconSrc: CollectionIcon,
+        isExpanded: false,
+        className: "collectionHeader",
+        contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+        onClick: () => {
+          useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
+          useCommandBar.getState().setContextButtons([]);
+          useTabs
+            .getState()
+            .refreshActiveTab(
+              (tab: TabsBase) =>
+                tab.collection?.id() === sampleDataResourceTokenCollection.id() &&
+                tab.collection.databaseId === sampleDataResourceTokenCollection.databaseId,
+            );
+        },
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(sampleDataResourceTokenCollection.databaseId, sampleDataResourceTokenCollection.id()),
+        onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection),
+        children: [
+          {
+            label: "Items",
+            onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(),
+            contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+            isSelected: () =>
+              useSelectedNode
+                .getState()
+                .isDataNodeSelected(
+                  sampleDataResourceTokenCollection.databaseId,
+                  sampleDataResourceTokenCollection.id(),
+                  [ViewModels.CollectionTabKind.Documents],
+                ),
+          },
+        ],
+      },
+    ],
+  };
+
+  return [updatedSampleTree];
+};
+
+export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBase): TreeNode[] => {
+  if (!collection) {
+    return [
+      {
+        label: "",
+        isExpanded: true,
+        children: [],
+      },
+    ];
+  }
+
+  const children: TreeNode[] = [];
+  children.push({
+    label: "Items",
+    onClick: () => {
+      collection.onDocumentDBDocumentsClick();
+      // push to most recent
+      mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
+    },
+    isSelected: () =>
+      useSelectedNode
+        .getState()
+        .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Documents]),
+  });
+
+  const collectionNode: TreeNode = {
+    label: collection.id(),
+    iconSrc: CollectionIcon,
+    isExpanded: true,
+    children,
+    className: "collectionHeader",
+    onClick: () => {
+      // Rewritten version of expandCollapseCollection
+      useSelectedNode.getState().setSelectedNode(collection);
+      useCommandBar.getState().setContextButtons([]);
+      useTabs
+        .getState()
+        .refreshActiveTab(
+          (tab) => tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
+        );
+    },
+    isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
+  };
+
+  return [collectionNode];
+};
+
+export const createDatabaseTreeNodes = (
+  container: Explorer,
+  isNotebookEnabled: boolean,
+  databases: ViewModels.Database[],
+  refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
+): TreeNode[] => {
+  const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
+    const buildDatabaseChildNodes = (databaseNode: TreeNode) => {
+      databaseNode.children = [];
+      if (database.isDatabaseShared() && configContext.platform !== Platform.Fabric) {
+        databaseNode.children.push({
+          id: database.isSampleDB ? "sampleScaleSettings" : "",
+          label: "Scale",
+          isSelected: () =>
+            useSelectedNode
+              .getState()
+              .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettingsV2]),
+          onClick: database.onSettingsClick.bind(database),
+        });
+      }
+
+      // Find collections
+      database
+        .collections()
+        .forEach((collection: ViewModels.Collection) =>
+          databaseNode.children.push(
+            buildCollectionNode(database, collection, isNotebookEnabled, container, refreshActiveTab),
+          ),
+        );
+
+      if (database.collectionsContinuationToken) {
+        const loadMoreNode: TreeNode = {
+          label: "load more",
+          className: "loadMoreHeader",
+          onClick: async () => {
+            await database.loadCollections();
+            useDatabases.getState().updateDatabase(database);
+          },
+        };
+        databaseNode.children.push(loadMoreNode);
+      }
+    };
+
+    const databaseNode: TreeNode = {
+      label: database.id(),
+      iconSrc: CosmosDBIcon,
+      className: "databaseHeader",
+      children: [],
+      isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
+      contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
+      onExpanded: async () => {
+        useSelectedNode.getState().setSelectedNode(database);
+        if (!databaseNode.children || databaseNode.children?.length === 0) {
+          databaseNode.isLoading = true;
+        }
+        await database.expandDatabase();
+        databaseNode.isLoading = false;
+        useCommandBar.getState().setContextButtons([]);
+        refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
+        useDatabases.getState().updateDatabase(database);
+      },
+      onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
+      isExpanded: database.isDatabaseExpanded(),
+      onCollapsed: () => {
+        database.collapseDatabase();
+        // useCommandBar.getState().setContextButtons([]);
+        useDatabases.getState().updateDatabase(database);
+      },
+    };
+
+    buildDatabaseChildNodes(databaseNode);
+
+    database.collections.subscribe(() => {
+      buildDatabaseChildNodes(databaseNode);
+    });
+
+    return databaseNode;
+  });
+
+  return databaseTreeNodes;
+};
 
 export const buildCollectionNode = (
   database: ViewModels.Database,
@@ -25,15 +213,14 @@ export const buildCollectionNode = (
   isNotebookEnabled: boolean,
   container: Explorer,
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
-): TreeNode2 => {
-  let children: TreeNode2[];
-
+): TreeNode => {
+  let children: TreeNode[];
   // Flat Tree for Fabric
   if (configContext.platform !== Platform.Fabric) {
     children = buildCollectionNodeChildren(database, collection, isNotebookEnabled, container, refreshActiveTab);
   }
 
-  return {
+  const collectionNode: TreeNode = {
     label: collection.id(),
     iconSrc: CollectionIcon,
     children: children,
@@ -54,6 +241,15 @@ export const buildCollectionNode = (
           tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId,
       );
       useDatabases.getState().updateDatabase(database);
+
+      // If we're showing script nodes, start loading them.
+      if (shouldShowScriptNodes()) {
+        await collection.loadStoredProcedures();
+        await collection.loadUserDefinedFunctions();
+        await collection.loadTriggers();
+      }
+
+      useDatabases.getState().updateDatabase(database);
     },
     isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
     onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(collection),
@@ -64,6 +260,8 @@ export const buildCollectionNode = (
     },
     isExpanded: collection.isCollectionExpanded(),
   };
+
+  return collectionNode;
 };
 
 const buildCollectionNodeChildren = (
@@ -72,9 +270,8 @@ const buildCollectionNodeChildren = (
   isNotebookEnabled: boolean,
   container: Explorer,
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
-): TreeNode2[] => {
-  const showScriptNodes = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
-  const children: TreeNode2[] = [];
+): TreeNode[] => {
+  const children: TreeNode[] = [];
   children.push({
     label: getItemName(),
     id: collection.isSampleCollection ? "sampleItems" : "",
@@ -128,14 +325,14 @@ const buildCollectionNodeChildren = (
     });
   }
 
-  const schemaNode: TreeNode2 = buildSchemaNode(collection, container, refreshActiveTab);
+  const schemaNode: TreeNode = buildSchemaNode(collection, container, refreshActiveTab);
   if (schemaNode) {
     children.push(schemaNode);
   }
 
   const onUpdateDatabase = () => useDatabases.getState().updateDatabase(database);
 
-  if (showScriptNodes) {
+  if (shouldShowScriptNodes()) {
     children.push(buildStoredProcedureNode(collection, container, refreshActiveTab, onUpdateDatabase));
     children.push(buildUserDefinedFunctionsNode(collection, container, refreshActiveTab, onUpdateDatabase));
     children.push(buildTriggerNode(collection, container, refreshActiveTab, onUpdateDatabase));
@@ -166,7 +363,7 @@ const buildStoredProcedureNode = (
   container: Explorer,
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
   onUpdateDatabase: () => void,
-): TreeNode2 => {
+): TreeNode => {
   return {
     label: "Stored Procedures",
     children: collection.storedProcedures().map((sp: StoredProcedure) => ({
@@ -195,7 +392,7 @@ const buildUserDefinedFunctionsNode = (
   container: Explorer,
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
   onUpdateDatabase: () => void,
-): TreeNode2 => {
+): TreeNode => {
   return {
     label: "User Defined Functions",
     children: collection.userDefinedFunctions().map((udf: UserDefinedFunction) => ({
@@ -226,7 +423,7 @@ const buildTriggerNode = (
   container: Explorer,
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
   onUpdateDatabase: () => void,
-): TreeNode2 => {
+): TreeNode => {
   return {
     label: "Triggers",
     children: collection.triggers().map((trigger: Trigger) => ({
@@ -254,7 +451,7 @@ const buildSchemaNode = (
   collection: ViewModels.Collection,
   container: Explorer,
   refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void,
-): TreeNode2 => {
+): TreeNode => {
   if (collection.analyticalStorageTtl() === undefined) {
     return undefined;
   }
@@ -273,7 +470,7 @@ const buildSchemaNode = (
   };
 };
 
-const getSchemaNodes = (fields: DataModels.IDataField[]): TreeNode2[] => {
+const getSchemaNodes = (fields: DataModels.IDataField[]): TreeNode[] => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const schema: any = {};
 
@@ -307,8 +504,8 @@ const getSchemaNodes = (fields: DataModels.IDataField[]): TreeNode2[] => {
   });
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const traverse = (obj: any): TreeNode2[] => {
-    const children: TreeNode2[] = [];
+  const traverse = (obj: any): TreeNode[] => {
+    const children: TreeNode[] = [];
 
     if (obj !== undefined && !Array.isArray(obj) && typeof obj === "object") {
       Object.entries(obj).forEach(([key, value]) => {
diff --git a/src/Explorer/Tree2/ResourceTree.tsx b/src/Explorer/Tree2/ResourceTree.tsx
deleted file mode 100644
index 45e3ba5d4..000000000
--- a/src/Explorer/Tree2/ResourceTree.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import {
-  FluentProvider,
-  Tree,
-  TreeItemValue,
-  TreeOpenChangeData,
-  TreeOpenChangeEvent,
-} from "@fluentui/react-components";
-import { configContext } from "ConfigContext";
-import { TreeNode2, TreeNode2Component } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
-import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
-import { useDatabaseTreeNodes } from "Explorer/Tree2/useDatabaseTreeNodes";
-import * as React from "react";
-import shallow from "zustand/shallow";
-import Explorer from "../Explorer";
-import { useNotebook } from "../Notebook/useNotebook";
-
-export const MyNotebooksTitle = "My Notebooks";
-export const GitHubReposTitle = "GitHub repos";
-
-interface ResourceTreeProps {
-  container: Explorer;
-}
-
-export const DATA_TREE_LABEL = "DATA";
-
-/**
- * Top-level tree that has no label, but contains all subtrees
- */
-export const ResourceTree2: React.FC<ResourceTreeProps> = ({ container }: ResourceTreeProps): JSX.Element => {
-  const {
-    isNotebookEnabled,
-    // myNotebooksContentRoot,
-    // galleryContentRoot,
-    // gitHubNotebooksContentRoot,
-    // updateNotebookItem,
-  } = useNotebook(
-    (state) => ({
-      isNotebookEnabled: state.isNotebookEnabled,
-      myNotebooksContentRoot: state.myNotebooksContentRoot,
-      galleryContentRoot: state.galleryContentRoot,
-      gitHubNotebooksContentRoot: state.gitHubNotebooksContentRoot,
-      updateNotebookItem: state.updateNotebookItem,
-    }),
-    shallow,
-  );
-  // const { activeTab } = useTabs();
-  const databaseTreeNodes = useDatabaseTreeNodes(container, isNotebookEnabled);
-  const [openItems, setOpenItems] = React.useState<Iterable<TreeItemValue>>([DATA_TREE_LABEL]);
-
-  const dataNodeTree: TreeNode2 = {
-    id: "data",
-    label: DATA_TREE_LABEL,
-    className: "accordionItemHeader",
-    children: databaseTreeNodes,
-    isScrollable: true,
-  };
-
-  React.useEffect(() => {
-    // Compute open items based on node.isExpanded
-    const updateOpenItems = (node: TreeNode2, parentNodeId: string): void => {
-      // This will look for ANY expanded node, event if its parent node isn't expanded
-      // and add it to the openItems list
-      const globalId = parentNodeId === undefined ? node.label : `${parentNodeId}/${node.label}`;
-
-      if (node.isExpanded) {
-        let found = false;
-        for (const id of openItems) {
-          if (id === globalId) {
-            found = true;
-            break;
-          }
-        }
-        if (!found) {
-          setOpenItems((prevOpenItems) => [...prevOpenItems, globalId]);
-        }
-      }
-
-      if (node.children) {
-        for (const child of node.children) {
-          updateOpenItems(child, globalId);
-        }
-      }
-    };
-
-    updateOpenItems(dataNodeTree, undefined);
-  }, [databaseTreeNodes]);
-
-  const handleOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) => setOpenItems(data.openItems);
-
-  return (
-    <>
-      <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ overflow: "hidden" }}>
-        <Tree
-          aria-label="CosmosDB resources"
-          openItems={openItems}
-          onOpenChange={handleOpenChange}
-          size="medium"
-          style={{ height: "100%", width: "290px" }}
-        >
-          {[dataNodeTree].map((node) => (
-            <TreeNode2Component key={node.label} className="dataResourceTree" node={node} treeNodeId={node.label} />
-          ))}
-        </Tree>
-      </FluentProvider>
-    </>
-  );
-};
diff --git a/src/Explorer/Tree2/useDatabaseTreeNodes.ts b/src/Explorer/Tree2/useDatabaseTreeNodes.ts
deleted file mode 100644
index 10233624c..000000000
--- a/src/Explorer/Tree2/useDatabaseTreeNodes.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { TreeNode2 } from "Explorer/Controls/TreeComponent2/TreeNode2Component";
-import TabsBase from "Explorer/Tabs/TabsBase";
-import { buildCollectionNode } from "Explorer/Tree2/containerTreeNodeUtil";
-import { useDatabases } from "Explorer/useDatabases";
-import { useTabs } from "hooks/useTabs";
-import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import * as ViewModels from "../../Contracts/ViewModels";
-import Explorer from "../Explorer";
-import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
-import { useSelectedNode } from "../useSelectedNode";
-import { Platform, configContext } from "./../../ConfigContext";
-
-export const useDatabaseTreeNodes = (container: Explorer, isNotebookEnabled: boolean): TreeNode2[] => {
-  const databases = useDatabases((state) => state.databases);
-  const { refreshActiveTab } = useTabs();
-
-  const databaseTreeNodes: TreeNode2[] = databases.map((database: ViewModels.Database) => {
-    const databaseNode: TreeNode2 = {
-      label: database.id(),
-      iconSrc: CosmosDBIcon,
-      className: "databaseHeader",
-      children: [],
-      isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
-      contextMenu: undefined, // TODO Disable this for now as the actions don't work. ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
-      onExpanded: async () => {
-        useSelectedNode.getState().setSelectedNode(database);
-        if (!databaseNode.children || databaseNode.children?.length === 0) {
-          databaseNode.isLoading = true;
-        }
-        await database.expandDatabase();
-        databaseNode.isLoading = false;
-        useCommandBar.getState().setContextButtons([]);
-        refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
-        useDatabases.getState().updateDatabase(database);
-      },
-      onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
-      isExpanded: database.isDatabaseExpanded(),
-      onCollapsed: () => {
-        database.collapseDatabase();
-        // useCommandBar.getState().setContextButtons([]);
-        useDatabases.getState().updateDatabase(database);
-      },
-    };
-
-    if (database.isDatabaseShared() && configContext.platform !== Platform.Fabric) {
-      databaseNode.children.push({
-        id: database.isSampleDB ? "sampleScaleSettings" : "",
-        label: "Scale",
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettingsV2]),
-        onClick: database.onSettingsClick.bind(database),
-      });
-    }
-
-    // Find collections
-    database
-      .collections()
-      .forEach((collection: ViewModels.Collection) =>
-        databaseNode.children.push(
-          buildCollectionNode(database, collection, isNotebookEnabled, container, refreshActiveTab),
-        ),
-      );
-
-    if (database.collectionsContinuationToken) {
-      const loadMoreNode: TreeNode2 = {
-        label: "load more",
-        className: "loadMoreHeader",
-        onClick: async () => {
-          await database.loadCollections();
-          useDatabases.getState().updateDatabase(database);
-        },
-      };
-      databaseNode.children.push(loadMoreNode);
-    }
-
-    database.collections.subscribe((collections: ViewModels.Collection[]) => {
-      collections.forEach((collection: ViewModels.Collection) =>
-        databaseNode.children.push(
-          buildCollectionNode(database, collection, isNotebookEnabled, container, refreshActiveTab),
-        ),
-      );
-    });
-
-    return databaseNode;
-  });
-
-  return databaseTreeNodes;
-};
diff --git a/src/UserContext.ts b/src/UserContext.ts
index 2fa1bb946..30a0236dc 100644
--- a/src/UserContext.ts
+++ b/src/UserContext.ts
@@ -69,7 +69,7 @@ export type AdminFeedbackPolicySettings = {
   [key in AdminFeedbackControlPolicy]: boolean;
 };
 
-interface UserContext {
+export interface UserContext {
   readonly fabricContext?: FabricContext;
   readonly authType?: AuthType;
   readonly masterKey?: string;
diff --git a/src/Utils/PromiseSource.ts b/src/Utils/PromiseSource.ts
new file mode 100644
index 000000000..97dac0db1
--- /dev/null
+++ b/src/Utils/PromiseSource.ts
@@ -0,0 +1,18 @@
+export default class PromiseSource<T = void> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (reason?: unknown) => void;
+
+  constructor() {
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+
+  /** Resolves the promise, then gets off the thread and waits until the currently-registered 'then' callback run. */
+  async resolveAndWait(value: T): Promise<T> {
+    this.resolve(value);
+    return await this.promise;
+  }
+}
diff --git a/test/cassandra/container.spec.ts b/test/cassandra/container.spec.ts
index 80d5df41d..c9c9a663d 100644
--- a/test/cassandra/container.spec.ts
+++ b/test/cassandra/container.spec.ts
@@ -1,6 +1,14 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
@@ -8,30 +16,42 @@ test("Cassandra keyspace and table CRUD", async () => {
   const keyspaceId = generateUniqueName("keyspace");
   const tableId = generateUniqueName("table");
 
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Cassandra);
+  await page.goto(url);
   await page.waitForSelector("iframe");
   const explorer = await waitForExplorer();
 
   await explorer.click('[data-test="New Table"]');
+
+  await explorer.waitForSelector(getPanelSelector("Add Table"));
   await explorer.click('[aria-label="Keyspace id"]');
   await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);
   await explorer.click('[aria-label="addCollection-table Id Create table"]');
   await explorer.fill('[aria-label="addCollection-table Id Create table"]', tableId);
+  await explorer.fill('[aria-label="Table max RU/s"]', "1000");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${keyspaceId}`);
-  await explorer.click(`[data-test="${tableId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
+  await explorer.waitForSelector(getPanelSelector("Add Table"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${keyspaceId}`));
+  await openContextMenu(explorer, `DATA/${keyspaceId}/${tableId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${keyspaceId}/${tableId}`, "Delete Table"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Table"));
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${keyspaceId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Keyspace")');
+  await explorer.waitForSelector(getPanelSelector("Delete Table"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${keyspaceId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${keyspaceId}`, "Delete Keyspace"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Keyspace"));
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', keyspaceId);
   await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Keyspace"), { state: "detached" });
+
   await expect(explorer).not.toHaveText(".dataResourceTree", keyspaceId);
   await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
 });
diff --git a/test/graph/container.spec.ts b/test/graph/container.spec.ts
index e7f288da5..e50cc01d5 100644
--- a/test/graph/container.spec.ts
+++ b/test/graph/container.spec.ts
@@ -1,6 +1,14 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  generateDatabaseNameWithTimestamp,
+  generateUniqueName,
+  getAzureCLICredentialsToken,
+  getPanelSelector,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
@@ -17,22 +25,34 @@ test("Graph CRUD", async () => {
 
   // Create new database and graph
   await explorer.click('[data-test="New Graph"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Graph"));
   await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
   await explorer.fill('[aria-label="Graph id, Example Graph1"]', containerId);
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`.nodeItem >> text=${containerId}`);
+  await explorer.waitForSelector(getPanelSelector("New Graph"), { state: "detached" });
+
   // Delete database and graph
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Graph")');
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Graph"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Graph"));
   await explorer.fill('text=* Confirm by typing the graph id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Graph"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
   await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
   await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
   await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
diff --git a/test/mongo/container.spec.ts b/test/mongo/container.spec.ts
index baafefbbe..ce39ce0a8 100644
--- a/test/mongo/container.spec.ts
+++ b/test/mongo/container.spec.ts
@@ -1,6 +1,15 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateDatabaseNameWithTimestamp,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
@@ -8,42 +17,56 @@ test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
 
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Mongo);
+  await page.goto(url);
   const explorer = await waitForExplorer();
 
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Collection"));
   await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
   await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
   await explorer.fill('[aria-label="Shard key"]', "pk");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`.nodeItem >> text=${containerId}`);
+  await explorer.waitForSelector(getPanelSelector("New Collection"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+
   // Create indexing policy
-  await explorer.click(".nodeItem >> text=Settings");
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}/Settings`));
   await explorer.click('button[role="tab"]:has-text("Indexing Policy")');
   await explorer.click('[aria-label="Index Field Name 0"]');
   await explorer.fill('[aria-label="Index Field Name 0"]', "foo");
   await explorer.click("text=Select an index type");
   await explorer.click('button[role="option"]:has-text("Single Field")');
   await explorer.click('[data-test="Save"]');
+
   // Remove indexing policy
   await explorer.click('[aria-label="Delete index Button"]');
   await explorer.click('[data-test="Save"]');
+
   // Delete database and collection
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Collection")');
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Collection"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"));
   await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
   await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
   await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
   await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
diff --git a/test/mongo/container32.spec.ts b/test/mongo/container32.spec.ts
index c71f9d0cc..3b0742952 100644
--- a/test/mongo/container32.spec.ts
+++ b/test/mongo/container32.spec.ts
@@ -1,6 +1,15 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateDatabaseNameWithTimestamp,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
@@ -8,31 +17,43 @@ test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
 
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Mongo32);
+  await page.goto(url);
   const explorer = await waitForExplorer();
 
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Collection"));
   await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
   await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
   await explorer.fill('[aria-label="Shard key"]', "pk");
   await explorer.click("#sidePanelOkButton");
-  explorer.click(`.nodeItem >> text=${databaseId}`);
-  explorer.click(`.nodeItem >> text=${containerId}`);
+  await explorer.waitForSelector(getPanelSelector("New Collection"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+
   // Delete database and collection
-  explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  explorer.click('button[role="menuitem"]:has-text("Delete Collection")');
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Collection"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"));
   await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
   await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
   await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
   await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
diff --git a/test/sql/container.spec.ts b/test/sql/container.spec.ts
index a1aacfd42..a08530959 100644
--- a/test/sql/container.spec.ts
+++ b/test/sql/container.spec.ts
@@ -1,6 +1,14 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
@@ -8,28 +16,40 @@ test("SQL CRUD", async () => {
   const databaseId = generateUniqueName("db");
   const containerId = generateUniqueName("container");
 
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.SQL);
+  await page.goto(url);
   const explorer = await waitForExplorer();
 
   await explorer.click('[data-test="New Container"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Container"));
   await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
   await explorer.fill('[aria-label="Container id, Example Container1"]', containerId);
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Container")');
+  await explorer.waitForSelector(getPanelSelector("New Container"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await explorer.hover(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Container"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Container"));
   await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);
   await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Container"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
   await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
   await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
   await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
   await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
   await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
diff --git a/test/sql/resourceToken.spec.ts b/test/sql/resourceToken.spec.ts
index 18228c7ed..78adf42fb 100644
--- a/test/sql/resourceToken.spec.ts
+++ b/test/sql/resourceToken.spec.ts
@@ -2,7 +2,8 @@ import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentials } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentials, getTreeNodeSelector } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
 const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"] ?? "";
@@ -16,7 +17,7 @@ test("Resource token", async () => {
   const dbId = generateUniqueName("db");
   const collectionId = generateUniqueName("col");
   const client = new CosmosClient({
-    endpoint: account.documentEndpoint,
+    endpoint: account.documentEndpoint!,
     key: keys.primaryMasterKey,
   });
   const { database } = await client.databases.createIfNotExists({ id: dbId });
@@ -32,11 +33,10 @@ test("Resource token", async () => {
   await page.goto("https://localhost:1234/hostedExplorer.html");
   await page.waitForSelector("div > p.switchConnectTypeText");
   await page.click("div > p.switchConnectTypeText");
-  await page.type("input[class='inputToken']", resourceTokenConnectionString);
+  await page.fill("input[class='inputToken']", resourceTokenConnectionString);
   await page.click("input[value='Connect']");
-  await page.waitForSelector("iframe");
-  const explorer = await page.frame({
-    name: "explorer",
-  });
-  await explorer.textContent(`css=.dataResourceTree >> "${collectionId}"`);
+  const explorer = await waitForExplorer();
+
+  const collectionNodeLabel = await explorer.textContent(getTreeNodeSelector(`DATA/${collectionId}`));
+  expect(collectionNodeLabel).toBe(collectionId);
 });
diff --git a/test/tables/container.spec.ts b/test/tables/container.spec.ts
index 98687d60f..0d3824d02 100644
--- a/test/tables/container.spec.ts
+++ b/test/tables/container.spec.ts
@@ -1,27 +1,40 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 
 jest.setTimeout(120000);
 
 test("Tables CRUD", async () => {
   const tableId = generateUniqueName("table");
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-tables-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Tables);
+  await page.goto(url);
   const explorer = await waitForExplorer();
 
   await page.waitForSelector('text="Querying databases"', { state: "detached" });
   await explorer.click('[data-test="New Table"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Table"));
   await explorer.fill('[aria-label="Table id, Example Table1"]', tableId);
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`[data-test="TablesDB"]`);
-  await explorer.click(`[data-test="${tableId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
+  await explorer.waitForSelector(getPanelSelector("New Table"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/TablesDB/${tableId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/TablesDB/${tableId}`, "Delete Table"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Table"));
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
   await explorer.click('[aria-label="OK"]');
+  await explorer.waitForSelector(getPanelSelector("Delete Table"), { state: "detached" });
+
   await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
 });
diff --git a/test/testExplorer/TestExplorer.ts b/test/testExplorer/TestExplorer.ts
index 4dbeb86b6..12b83d577 100644
--- a/test/testExplorer/TestExplorer.ts
+++ b/test/testExplorer/TestExplorer.ts
@@ -4,9 +4,9 @@ import { DataExplorerInputsFrame } from "../../src/Contracts/ViewModels";
 import { updateUserContext } from "../../src/UserContext";
 import { get, listKeys } from "../../src/Utils/arm/generatedClients/cosmos/databaseAccounts";
 
-const resourceGroup = process.env.RESOURCE_GROUP || "";
-const subscriptionId = process.env.SUBSCRIPTION_ID || "";
 const urlSearchParams = new URLSearchParams(window.location.search);
+const resourceGroup = urlSearchParams.get("resourceGroup") || process.env.RESOURCE_GROUP || "";
+const subscriptionId = urlSearchParams.get("subscriptionId") || process.env.SUBSCRIPTION_ID || "";
 const accountName = urlSearchParams.get("accountName") || "portal-sql-runner-west-us";
 const selfServeType = urlSearchParams.get("selfServeType") || "example";
 const iframeSrc = urlSearchParams.get("iframeSrc") || "explorer.html?platform=Portal&disablePortalInitCache";
diff --git a/test/utils/shared.ts b/test/utils/shared.ts
index 59ef0994c..f131425af 100644
--- a/test/utils/shared.ts
+++ b/test/utils/shared.ts
@@ -1,5 +1,35 @@
 import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
 import crypto from "crypto";
+import { Frame } from "playwright";
+
+export enum AccountType {
+  Tables = "Tables",
+  Cassandra = "Cassandra",
+  Gremlin = "Gremlin",
+  Mongo = "Mongo",
+  Mongo32 = "Mongo32",
+  SQL = "SQL",
+}
+
+export const defaultAccounts: Record<AccountType, string> = {
+  [AccountType.Tables]: "portal-tables-runner",
+  [AccountType.Cassandra]: "portal-cassandra-runner",
+  [AccountType.Gremlin]: "portal-gremlin-runner",
+  [AccountType.Mongo]: "portal-mongo-runner",
+  [AccountType.Mongo32]: "portal-mongo32-runner",
+  [AccountType.SQL]: "portal-sql-runner-west-us",
+};
+
+const resourceGroup = process.env.DE_TEST_RESOURCE_GROUP ?? "runners";
+const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+
+export async function getTestExplorerUrl(accountType: AccountType) {
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
+  const accountName =
+    process.env[`DE_TEST_ACCOUNT_NAME_${accountType.toLocaleUpperCase()}`] ?? defaultAccounts[accountType];
+  return `https://localhost:1234/testExplorer.html?accountName=${accountName}&resourceGroup=${resourceGroup}&subscriptionId=${subscriptionId}&token=${token}`;
+}
 
 export function generateUniqueName(baseName = "", length = 4): string {
   return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
@@ -18,3 +48,22 @@ export async function getAzureCLICredentialsToken(): Promise<string> {
   const token = (await credentials.getToken()).accessToken;
   return token;
 }
+
+export function getPanelSelector(title: string) {
+  return `[data-test="Panel:${title}"]`;
+}
+
+export function getTreeNodeSelector(id: string) {
+  return `[data-test="TreeNode:${id}"]`;
+}
+
+export function getTreeMenuItemSelector(nodeId: string, itemLabel: string) {
+  return `[data-test="TreeNode/ContextMenu:${nodeId}"] [data-test="TreeNode/ContextMenuItem:${itemLabel}"]`;
+}
+
+export async function openContextMenu(explorer: Frame, nodeIdentifier: string) {
+  const nodeSelector = getTreeNodeSelector(nodeIdentifier);
+  await explorer.hover(nodeSelector);
+  await explorer.click(`${nodeSelector} [data-test="TreeNode/ContextMenuTrigger"]`);
+  await explorer.waitForSelector(`[data-test="TreeNode/ContextMenu:${nodeIdentifier}"]`);
+}
diff --git a/utils/generateResourceToken.js b/utils/generateResourceToken.js
index 49bc5db18..9e2a6f1af 100644
--- a/utils/generateResourceToken.js
+++ b/utils/generateResourceToken.js
@@ -1,24 +1,79 @@
 const { CosmosClient } = require("@azure/cosmos");
 
-async function main() {
-  const endpoint = process.env.ENDPOINT;
-  if (!endpoint) {
-    throw new Error("Expected env var ENDPOINT");
-  }
-  const key = process.env.KEY;
-  if (!key) {
-    throw new Error("Expected env var KEY");
-  }
-  const databaseId = process.env.DATABASE;
-  if (!databaseId) {
-    throw new Error("Expected env var DATABASE");
-  }
-  const containerId = process.env.CONTAINER;
-  if (!containerId) {
-    throw new Error("Expected env var CONTAINER");
-  }
-  const partitionKey = process.env.partitionKey;
+let endpoint = process.env.ENDPOINT;
+let key = process.env.KEY;
+let databaseId = process.env.DATABASE;
+let containerId = process.env.CONTAINER;
+let partitionKey = process.env.partitionKey;
 
+// Super rudimentary, but dependency-free arg parsing
+const args = process.argv.slice(2);
+for (let i = 0; i < args.length; i++) {
+  switch (args[i]) {
+    case "--help":
+      console.log("Usage: node generateResourceToken.js --endpoint <endpoint> --key <key> --database <database> --container <container> --partitionKey <partitionKey>");
+      console.log("Options");
+      console.log("  --endpoint: Cosmos DB endpoint (can also be set via ENDPOINT env var)");
+      console.log("  --key: Cosmos DB key (can also be set via KEY env var)");
+      console.log("  --database: Cosmos DB database ID (can also be set via DATABASE env var)");
+      console.log("  --container: Cosmos DB container ID (can also be set via CONTAINER env var)");
+      console.log("  --partitionKey: Cosmos DB container partition key (can also be set via partitionKey env var; Optional)");
+      process.exit(0);
+      break;
+    case "--endpoint":
+      i++;
+      if (i >= args.length) {
+        throw new Error("--endpoint requires an argument");
+      }
+      endpoint = args[i];
+      break;
+    case "--key":
+      i++;
+      if (i >= args.length) {
+        throw new Error("--key requires an argument");
+      }
+      key = args[i];
+      break;
+    case "--database":
+      i++;
+      if (i >= args.length) {
+        throw new Error("--database requires an argument");
+      }
+      databaseId = args[i];
+      break;
+    case "--container":
+      i++;
+      if (i >= args.length) {
+        throw new Error("--container requires an argument");
+      }
+      containerId = args[i];
+      break;
+    case "--partitionKey":
+      i++;
+      if (i >= args.length) {
+        throw new Error("--partitionKey requires an argument");
+      }
+      partitionKey = args[i];
+      break;
+    default:
+      throw new Error(`Unknown argument: ${args[i]}`);
+  }
+}
+
+if (!endpoint) {
+  throw new Error("Endpoint is required, either via --endpoint or ENDPOINT env var");
+}
+if (!key) {
+  throw new Error("Key is required, either via --key or KEY env var");
+}
+if (!databaseId) {
+  throw new Error("Database is required, either via --database or DATABASE env var");
+}
+if (!containerId) {
+  throw new Error("Container is required, either via --container or CONTAINER env var");
+}
+
+async function main() {
   const client = new CosmosClient({
     endpoint,
     key
@@ -53,4 +108,4 @@ async function main() {
 main().catch(error => {
   console.log("Error!");
   throw error;
-});
+}).then(() => process.exit(0));

From 6276464e0d3f0a741c926f685c35c5fc5223c749 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Fri, 31 May 2024 17:57:11 +0200
Subject: [PATCH 46/67] Fix refreshgrid behaving like load more (#1853)

---
 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 06d472d5b..4a78919db 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1627,6 +1627,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     async (applyFilterButtonPressed?: boolean): Promise<void> => {
       // clear documents grid
       setDocumentIds([]);
+      setContinuationToken(undefined); // For mongo
       try {
         // reset iterator which will autoload documents (in useEffect)
         setDocumentsIterator({

From 96ba0a9729b48f14cce4531eeeab8a4d80e04c69 Mon Sep 17 00:00:00 2001
From: Asier Isayas <asier.isayas@gmail.com>
Date: Fri, 31 May 2024 13:31:24 -0400
Subject: [PATCH 47/67] Reactivate Mongo Proxy (#1850)

* Reactivate Mongo Proxy

* Reactivate Mongo Proxy

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>
---
 src/ConfigContext.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/ConfigContext.ts b/src/ConfigContext.ts
index ed8eaab0e..061f25286 100644
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -102,13 +102,13 @@ let configContext: Readonly<ConfigContext> = {
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
-    // "resourcelist",
-    // "queryDocuments",
-    // "createDocument",
-    // "readDocument",
-    // "updateDocument",
-    // "deleteDocument",
-    // "createCollectionWithProxy",
+    "resourcelist",
+    "queryDocuments",
+    "createDocument",
+    "readDocument",
+    "updateDocument",
+    "deleteDocument",
+    "createCollectionWithProxy",
     "legacyMongoShell",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,

From 495296602adc441f38c19325d74dc6a53260a78f Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Mon, 3 Jun 2024 15:23:09 +0200
Subject: [PATCH 48/67] Fix delete documents on mongo bug (#1852)

---
 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 4a78919db..35c3f8221 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -845,8 +845,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       _deleteDocuments(toDeleteDocumentIds)
         .then(
           (deletedIds: DocumentId[]) => {
-            const deletedRids = new Set(deletedIds.map((documentId) => documentId.rid));
-            const newDocumentIds = [...documentIds.filter((documentId) => !deletedRids.has(documentId.rid))];
+            const deletedIdsSet = new Set(deletedIds.map((documentId) => documentId.id));
+            const newDocumentIds = [...documentIds.filter((documentId) => !deletedIdsSet.has(documentId.id))];
             setDocumentIds(newDocumentIds);
 
             setSelectedDocumentContent(undefined);

From b76d83d8e1112f57bf6ddb1e944d48319cb6e045 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Mon, 3 Jun 2024 19:11:16 +0200
Subject: [PATCH 49/67] Disable table selection for Fabric/read-only (#1855)

* Disable table selection for Fabric/read-only

* Update unit tests

* Fix format

---------

Co-authored-by: Laurent Nguyen <languye@microsoft.com>
---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    |   3 +
 .../DocumentsTableComponent.test.tsx          |   8 +
 .../DocumentsTableComponent.tsx               |  30 +-
 .../DocumentsTabV2.test.tsx.snap              |   1 +
 .../DocumentsTableComponent.test.tsx.snap     | 981 ++++++++++++++++++
 5 files changed, 1011 insertions(+), 12 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 35c3f8221..9cfc4301d 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1779,6 +1779,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                   selectedRows={selectedRows}
                   size={tableContainerSizePx}
                   columnHeaders={columnHeaders}
+                  isSelectionDisabled={
+                    configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
+                  }
                 />
                 {tableItems.length > 0 && (
                   <a
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
index e20084648..4b396a3fa 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
@@ -24,6 +24,7 @@ describe("DocumentsTableComponent", () => {
       idHeader: ID_HEADER,
       partitionKeyHeaders: [PARTITION_KEY_HEADER],
     },
+    isSelectionDisabled: false,
   });
 
   it("should render documents and partition keys in header", () => {
@@ -31,4 +32,11 @@ describe("DocumentsTableComponent", () => {
     const wrapper = mount(<DocumentsTableComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("should not render selection column when isSelectionDisabled is true", () => {
+    const props: IDocumentsTableComponentProps = createMockProps();
+    props.isSelectionDisabled = true;
+    const wrapper = mount(<DocumentsTableComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 4089b12bd..d66568875 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -41,6 +41,7 @@ export interface IDocumentsTableComponentProps {
   size: { height: number; width: number };
   columnHeaders: ColumnHeaders;
   style?: React.CSSProperties;
+  isSelectionDisabled?: boolean;
 }
 
 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -61,6 +62,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   style,
   size,
   columnHeaders,
+  isSelectionDisabled,
 }: IDocumentsTableComponentProps) => {
   const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
 
@@ -127,12 +129,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     const { item, selected, appearance, onClick, onKeyDown } = data[index];
     return (
       <TableRow aria-rowindex={index + 2} style={style} key={item.id} aria-selected={selected} appearance={appearance}>
-        <TableSelectionCell
-          checked={selected}
-          checkboxIndicator={{ "aria-label": "Select row" }}
-          onClick={onClick}
-          onKeyDown={onKeyDown}
-        />
+        {!isSelectionDisabled && (
+          <TableSelectionCell
+            checked={selected}
+            checkboxIndicator={{ "aria-label": "Select row" }}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+          />
+        )}
         {columns.map((column) => (
           <TableCell
             key={column.columnId}
@@ -226,12 +230,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     <Table className="documentsTable" noNativeElements {...tableProps}>
       <TableHeader className="documentsTableHeader">
         <TableRow style={{ width: size ? size.width - 15 : "100%" }}>
-          <TableSelectionCell
-            checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
-            onClick={toggleAllRows}
-            onKeyDown={toggleAllKeydown}
-            checkboxIndicator={{ "aria-label": "Select all rows " }}
-          />
+          {!isSelectionDisabled && (
+            <TableSelectionCell
+              checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
+              onClick={toggleAllRows}
+              onKeyDown={toggleAllKeydown}
+              checkboxIndicator={{ "aria-label": "Select all rows " }}
+            />
+          )}
           {columns.map((column /* index */) => (
             <Menu openOnContext key={column.columnId}>
               <MenuTrigger>
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
index 0b4c7578e..52bc636a8 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
@@ -532,6 +532,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
                   "partitionKeyHeaders": Array [],
                 }
               }
+              isSelectionDisabled={true}
               items={Array []}
               onItemClicked={[Function]}
               onSelectedRowsChange={[Function]}
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
index 6e80eac9f..44eb5db8b 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
@@ -1,5 +1,985 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DocumentsTableComponent should not render selection column when isSelectionDisabled is true 1`] = `
+<DocumentsTableComponent
+  columnHeaders={
+    Object {
+      "idHeader": "id",
+      "partitionKeyHeaders": Array [
+        "partitionKey",
+      ],
+    }
+  }
+  isSelectionDisabled={true}
+  items={
+    Array [
+      Object {
+        "id": "1",
+        "partitionKey": "pk1",
+      },
+      Object {
+        "id": "2",
+        "partitionKey": "pk2",
+      },
+      Object {
+        "id": "3",
+        "partitionKey": "pk3",
+      },
+    ]
+  }
+  onItemClicked={[Function]}
+  onSelectedRowsChange={[Function]}
+  selectedRows={Set {}}
+  size={
+    Object {
+      "height": 0,
+      "width": 0,
+    }
+  }
+>
+  <Table
+    aria-label="Filtered documents table"
+    className="documentsTable"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
+    noNativeElements={true}
+    role="grid"
+    size="extra-small"
+    style={
+      Object {
+        "minWidth": "fit-content",
+      }
+    }
+  >
+    <div
+      aria-label="Filtered documents table"
+      className="fui-Table documentsTable ___1kbqy50_18rlg51 fgkb47j fhovq9v ftgm304"
+      data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
+      role="grid"
+      style={
+        Object {
+          "minWidth": "fit-content",
+        }
+      }
+    >
+      <TableHeader
+        className="documentsTableHeader"
+      >
+        <div
+          className="fui-TableHeader documentsTableHeader ___oeyxrt0_1baslyg ftgm304"
+          role="rowgroup"
+        >
+          <TableRow
+            style={
+              Object {
+                "width": -15,
+              }
+            }
+          >
+            <div
+              className="fui-TableRow ___lntl370_1bdwmey f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb fy9rknc f22iagw f122n59"
+              role="row"
+              style={
+                Object {
+                  "width": -15,
+                }
+              }
+            >
+              <Menu
+                key="id"
+                openOnContext={true}
+              >
+                <ContextSelector.Provider
+                  value={
+                    Object {
+                      "checkedValues": Object {},
+                      "hasCheckmarks": false,
+                      "hasIcons": false,
+                      "inline": false,
+                      "isSubmenu": false,
+                      "menuPopoverRef": Object {
+                        "current": null,
+                      },
+                      "mountNode": null,
+                      "onCheckedValueChange": [Function],
+                      "open": false,
+                      "openOnContext": true,
+                      "openOnHover": false,
+                      "persistOnItemClick": false,
+                      "setOpen": [Function],
+                      "triggerId": "menu17",
+                      "triggerRef": Object {
+                        "current": <div
+                          class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                          id="menu17"
+                          role="columnheader"
+                          style="width: 50px; min-width: 50px; max-width: 50px;"
+                        >
+                          <div
+                            class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                            role="presentation"
+                          >
+                            id
+                          </div>
+                          <span
+                            class="fui-TableHeaderCell__aside"
+                          >
+                            <div
+                              aria-hidden="true"
+                              aria-label="Resize column"
+                              aria-valuetext="50 pixels"
+                              class="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
+                              data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                              role="separator"
+                            />
+                          </span>
+                        </div>,
+                      },
+                    }
+                  }
+                >
+                  <MenuTrigger
+                    key=".0"
+                  >
+                    <TableHeaderCell
+                      aside={
+                        <TableResizeHandle
+                          aria-hidden={true}
+                          aria-label="Resize column"
+                          aria-valuetext="50 pixels"
+                          data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                          onBlur={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseDown={[Function]}
+                          onTouchStart={[Function]}
+                          role="separator"
+                        />
+                      }
+                      className="documentsTableCell"
+                      data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                      id="menu17"
+                      key="id"
+                      onContextMenu={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseMove={[Function]}
+                      style={
+                        Object {
+                          "maxWidth": 50,
+                          "minWidth": 50,
+                          "width": 50,
+                        }
+                      }
+                    >
+                      <div
+                        className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                        data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                        id="menu17"
+                        onContextMenu={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseMove={[Function]}
+                        role="columnheader"
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                      >
+                        <div
+                          className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          role="presentation"
+                        >
+                          id
+                        </div>
+                        <span
+                          className="fui-TableHeaderCell__aside"
+                        >
+                          <TableResizeHandle
+                            aria-hidden={true}
+                            aria-label="Resize column"
+                            aria-valuetext="50 pixels"
+                            data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                            onBlur={[Function]}
+                            onKeyDown={[Function]}
+                            onMouseDown={[Function]}
+                            onTouchStart={[Function]}
+                            role="separator"
+                          >
+                            <div
+                              aria-hidden={true}
+                              aria-label="Resize column"
+                              aria-valuetext="50 pixels"
+                              className="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
+                              data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onKeyDown={[Function]}
+                              onMouseDown={[Function]}
+                              onTouchStart={[Function]}
+                              role="separator"
+                            />
+                          </TableResizeHandle>
+                        </span>
+                      </div>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                </ContextSelector.Provider>
+              </Menu>
+              <Menu
+                key="partitionKey"
+                openOnContext={true}
+              >
+                <ContextSelector.Provider
+                  value={
+                    Object {
+                      "checkedValues": Object {},
+                      "hasCheckmarks": false,
+                      "hasIcons": false,
+                      "inline": false,
+                      "isSubmenu": false,
+                      "menuPopoverRef": Object {
+                        "current": null,
+                      },
+                      "mountNode": null,
+                      "onCheckedValueChange": [Function],
+                      "open": false,
+                      "openOnContext": true,
+                      "openOnHover": false,
+                      "persistOnItemClick": false,
+                      "setOpen": [Function],
+                      "triggerId": "menu18",
+                      "triggerRef": Object {
+                        "current": <div
+                          class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                          data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                          id="menu18"
+                          role="columnheader"
+                          style="width: 50px; min-width: 50px; max-width: 50px;"
+                        >
+                          <div
+                            class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                            role="presentation"
+                          >
+                            <span
+                              title="partitionKey"
+                            >
+                              partitionKey
+                            </span>
+                          </div>
+                        </div>,
+                      },
+                    }
+                  }
+                >
+                  <MenuTrigger
+                    key=".0"
+                  >
+                    <TableHeaderCell
+                      aside={null}
+                      className="documentsTableCell"
+                      data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                      id="menu18"
+                      key="partitionKey"
+                      onContextMenu={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseMove={[Function]}
+                      style={
+                        Object {
+                          "maxWidth": 50,
+                          "minWidth": 50,
+                          "width": 50,
+                        }
+                      }
+                    >
+                      <div
+                        className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
+                        data-tabster="{\\"restorer\\":{\\"type\\":1}}"
+                        id="menu18"
+                        onContextMenu={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseMove={[Function]}
+                        role="columnheader"
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                      >
+                        <div
+                          className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          onKeyUp={[Function]}
+                          role="presentation"
+                        >
+                          <span
+                            title="partitionKey"
+                          >
+                            partitionKey
+                          </span>
+                        </div>
+                      </div>
+                    </TableHeaderCell>
+                  </MenuTrigger>
+                </ContextSelector.Provider>
+              </Menu>
+            </div>
+          </TableRow>
+        </div>
+      </TableHeader>
+      <TableBody>
+        <div
+          className="fui-TableBody ___oeyxrt0_1baslyg ftgm304"
+          role="rowgroup"
+        >
+          <List
+            direction="ltr"
+            height={-53}
+            itemCount={3}
+            itemData={
+              Array [
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "1",
+                    "partitionKey": "pk1",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 0,
+                  "selected": false,
+                },
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "2",
+                    "partitionKey": "pk2",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 1,
+                  "selected": false,
+                },
+                Object {
+                  "appearance": "none",
+                  "item": Object {
+                    "id": "3",
+                    "partitionKey": "pk3",
+                  },
+                  "onClick": [Function],
+                  "onKeyDown": [Function],
+                  "rowId": 2,
+                  "selected": false,
+                },
+              ]
+            }
+            itemSize={30}
+            layout="vertical"
+            overscanCount={2}
+            style={
+              Object {
+                "overflowY": "scroll",
+              }
+            }
+            useIsScrolling={false}
+            width={0}
+          >
+            <div
+              onScroll={[Function]}
+              style={
+                Object {
+                  "WebkitOverflowScrolling": "touch",
+                  "direction": "ltr",
+                  "height": -53,
+                  "overflow": "auto",
+                  "overflowY": "scroll",
+                  "position": "relative",
+                  "width": 0,
+                  "willChange": "transform",
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "height": 90,
+                    "pointerEvents": undefined,
+                    "width": "100%",
+                  }
+                }
+              >
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={0}
+                  key="0"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 0,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={2}
+                    aria-selected={false}
+                    key="1"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 0,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={2}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 0,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="1"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="1"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  1
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk1"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk1"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk1
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={1}
+                  key="1"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 30,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={3}
+                    aria-selected={false}
+                    key="2"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 30,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={3}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 30,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="2"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="2"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  2
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk2"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk2"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk2
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+                <RenderRow
+                  data={
+                    Array [
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "1",
+                          "partitionKey": "pk1",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 0,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "2",
+                          "partitionKey": "pk2",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 1,
+                        "selected": false,
+                      },
+                      Object {
+                        "appearance": "none",
+                        "item": Object {
+                          "id": "3",
+                          "partitionKey": "pk3",
+                        },
+                        "onClick": [Function],
+                        "onKeyDown": [Function],
+                        "rowId": 2,
+                        "selected": false,
+                      },
+                    ]
+                  }
+                  index={2}
+                  key="2"
+                  style={
+                    Object {
+                      "height": 30,
+                      "left": 0,
+                      "position": "absolute",
+                      "right": undefined,
+                      "top": 60,
+                      "width": "100%",
+                    }
+                  }
+                >
+                  <TableRow
+                    appearance="none"
+                    aria-rowindex={4}
+                    aria-selected={false}
+                    key="3"
+                    style={
+                      Object {
+                        "height": 30,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": undefined,
+                        "top": 60,
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    <div
+                      aria-rowindex={4}
+                      aria-selected={false}
+                      className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
+                      role="row"
+                      style={
+                        Object {
+                          "height": 30,
+                          "left": 0,
+                          "position": "absolute",
+                          "right": undefined,
+                          "top": 60,
+                          "width": "100%",
+                        }
+                      }
+                    >
+                      <TableCell
+                        className="documentsTableCell"
+                        key="id"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <TableCellLayout
+                            title="3"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="3"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  3
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                      <TableCell
+                        className="documentsTableCell"
+                        key="partitionKey"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        style={
+                          Object {
+                            "maxWidth": 50,
+                            "minWidth": 50,
+                            "width": 50,
+                          }
+                        }
+                        tabIndex={-1}
+                      >
+                        <div
+                          className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
+                          onClick={[Function]}
+                          onKeyDown={[Function]}
+                          role="cell"
+                          style={
+                            Object {
+                              "maxWidth": 50,
+                              "minWidth": 50,
+                              "width": 50,
+                            }
+                          }
+                          tabIndex={-1}
+                        >
+                          <TableCellLayout
+                            title="pk3"
+                            truncate={true}
+                          >
+                            <div
+                              className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
+                              title="pk3"
+                            >
+                              <div
+                                className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
+                              >
+                                <span
+                                  className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
+                                >
+                                  pk3
+                                </span>
+                              </div>
+                            </div>
+                          </TableCellLayout>
+                        </div>
+                      </TableCell>
+                    </div>
+                  </TableRow>
+                </RenderRow>
+              </div>
+            </div>
+          </List>
+        </div>
+      </TableBody>
+    </div>
+  </Table>
+</DocumentsTableComponent>
+`;
+
 exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
 <DocumentsTableComponent
   columnHeaders={
@@ -10,6 +990,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
       ],
     }
   }
+  isSelectionDisabled={false}
   items={
     Array [
       Object {

From 52c2cfe419959a708e45def21d528e3403910165 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:42:48 +0530
Subject: [PATCH 50/67] [Accessibility-3100036]: Close button is nested under
 'Home' tab control under 'Data Explorer' pane. (#1818)

* [3100036]: [Programmatic Access - Azure Cosmos DB - Data Explorer]: Close button is nested under 'Home' tab control under 'Data Explorer' pane.

* Fabric-Less updated.

* Added specific width for contentWrapper.

* less update.

* Fixed out-scope space issue

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 less/Common/Constants.less |   1 +
 less/documentDB.less       | 120 +++++++++++++++++++------------------
 less/documentDBFabric.less |  10 ++--
 src/Explorer/Tabs/Tabs.tsx |  76 ++++++++++++-----------
 4 files changed, 109 insertions(+), 98 deletions(-)

diff --git a/less/Common/Constants.less b/less/Common/Constants.less
index 5b80d67f8..d79c3e4e0 100644
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -130,6 +130,7 @@
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
+@ContentWrapper: 111px;
 @StatusIconContainerSize: 18px;
 @LoadingErrorIconSize: 14px;
 @ErrorIconContainer: 16px;
diff --git a/less/documentDB.less b/less/documentDB.less
index 05ad22760..00ffe2b0c 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2671,7 +2671,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText {
   font-weight: bolder;
   border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
@@ -2707,67 +2707,71 @@ a:link {
     width: @TabsWidth;
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
-
-    .statusIconContainer {
-      width: @StatusIconContainerSize;
-      height: @StatusIconContainerSize;
-      margin-left: @SmallSpace;
-      display: inline-flex;
-
-      .errorIconContainer {
-        width: @ErrorIconContainer;
-        height: @ErrorIconContainer;
-        margin-top: 1px;
-
-        .errorIcon {
-          width: @ErrorIconWidth;
-          height: @LoadingErrorIconSize;
-          background-image: url(../images/error_no_outline.svg);
-          background-repeat: no-repeat;
-          background-position: center;
-          background-size: 3px;
-          display: block;
-          margin: 1px 0px 0px 6px;
+    .contentWrapper {
+        .flex-display();
+        width: @ContentWrapper;
+    
+        .statusIconContainer {
+          width: @StatusIconContainerSize;
+          height: @StatusIconContainerSize;
+          margin-left: @SmallSpace;
+          display: inline-flex;
+    
+          .errorIconContainer {
+            width: @ErrorIconContainer;
+            height: @ErrorIconContainer;
+            margin-top: 1px;
+    
+            .errorIcon {
+              width: @ErrorIconWidth;
+              height: @LoadingErrorIconSize;
+              background-image: url(../images/error_no_outline.svg);
+              background-repeat: no-repeat;
+              background-position: center;
+              background-size: 3px;
+              display: block;
+              margin: 1px 0px 0px 6px;
+            }
+          }
+    
+          .errorIconContainer.actionsEnabled {
+            &:hover {
+              .hover();
+            }
+    
+            &:focus {
+              .focus();
+            }
+    
+            &:active {
+              .active();
+            }
+          }
+    
+          .errorIconContainer[tabindex]:active {
+            outline: none;
+          }
+    
+          .loadingIcon {
+            width: @LoadingErrorIconSize;
+            height: @LoadingErrorIconSize;
+            margin: 0px 0px @SmallSpace @SmallSpace;
+          }
+        }
+    
+        .tabNavText {
+          margin-left: @SmallSpace;
+          margin-right: 2px;
+          color: @BaseDark;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          flex-grow: 1;
         }
       }
 
-      .errorIconContainer.actionsEnabled {
-        &:hover {
-          .hover();
-        }
-
-        &:focus {
-          .focus();
-        }
-
-        &:active {
-          .active();
-        }
-      }
-
-      .errorIconContainer[tabindex]:active {
-        outline: none;
-      }
-
-      .loadingIcon {
-        width: @LoadingErrorIconSize;
-        height: @LoadingErrorIconSize;
-        margin: 0px 0px @SmallSpace @SmallSpace;
-      }
-    }
-
-    .tabNavText {
-      margin-left: @SmallSpace;
-      margin-right: 2px;
-      color: @BaseDark;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      flex-grow: 1;
-    }
-
     .tabIconSection {
-      width: 30px;
+      width: 29px;
       position: relative;
       padding-top: 2px;
 
diff --git a/less/documentDBFabric.less b/less/documentDBFabric.less
index be4e5c17e..ea4001780 100644
--- a/less/documentDBFabric.less
+++ b/less/documentDBFabric.less
@@ -75,7 +75,7 @@ a:focus {
   border-bottom: 2px solid @FabricAccentMedium;
 }
 
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.tabNavText {
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
   border-bottom: 0px none transparent;
 }
 
@@ -93,9 +93,11 @@ a:focus {
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
 
-    .statusIconContainer {
-      margin-left: 0px;
-    }
+    .contentWrapper {
+        .statusIconContainer {
+          margin-left: 0px;
+        }
+      }
 
     .tabIconSection {
       .cancelButton {
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index b33f3d4af..64636f077 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -153,47 +153,51 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
     <li
       onMouseOver={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
-      onClick={() => {
-        if (tab) {
-          tab.onTabClick();
-        } else if (tabKind !== undefined) {
-          useTabs.getState().activateReactTab(tabKind);
-        }
-      }}
-      onKeyPress={({ nativeEvent: e }) => {
-        if (tab) {
-          tab.onKeyPressActivate(undefined, e);
-        } else if (tabKind !== undefined) {
-          onKeyPressReactTab(e, tabKind);
-        }
-      }}
       className={active ? "active tabList" : "tabList"}
       style={active ? { fontWeight: "bolder" } : {}}
-      title={useObservable(tab?.tabPath || ko.observable(""))}
-      aria-selected={active}
-      aria-expanded={active}
-      aria-controls={tabId}
-      tabIndex={0}
-      role="tab"
-      ref={focusTab}
     >
       <span className="tabNavContentContainer">
         <div className="tab_Content">
-          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
-            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-            {isTabExecuting(tab, tabKind) && (
-              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-            )}
-            {isQueryErrorThrown(tab, tabKind) && (
-              <img
-                src={errorQuery}
-                title="Error"
-                alt="Error"
-                style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
-              />
-            )}
+          <span
+            className="contentWrapper"
+            onClick={() => {
+              if (tab) {
+                tab.onTabClick();
+              } else if (tabKind !== undefined) {
+                useTabs.getState().activateReactTab(tabKind);
+              }
+            }}
+            onKeyPress={({ nativeEvent: e }) => {
+              if (tab) {
+                tab.onKeyPressActivate(undefined, e);
+              } else if (tabKind !== undefined) {
+                onKeyPressReactTab(e, tabKind);
+              }
+            }}
+            title={useObservable(tab?.tabPath || ko.observable(""))}
+            aria-selected={active}
+            aria-expanded={active}
+            aria-controls={tabId}
+            tabIndex={0}
+            role="tab"
+            ref={focusTab}
+          >
+            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
+              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+              {isTabExecuting(tab, tabKind) && (
+                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
+              )}
+              {isQueryErrorThrown(tab, tabKind) && (
+                <img
+                  src={errorQuery}
+                  title="Error"
+                  alt="Error"
+                  style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
+                />
+              )}
+            </span>
+            <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
           </span>
-          <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
           <span className="tabIconSection">
             <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
           </span>
@@ -280,7 +284,7 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
 }
 
 const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
-  if (e.key === "Enter" || e.key === "Space") {
+  if (e.key === "Enter" || e.code === "Space") {
     useTabs.getState().activateReactTab(tabKind);
     e.stopPropagation();
   }

From 06e28ae3e7dae9098b32f4f3d78cb83e75326adb Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:45:55 +0530
Subject: [PATCH 51/67] [Visual Requirement - Azure Cosmos DB - Add Table]:
 Luminosity ratio of links with surrounding text is less than required 3:1
 under 'Add Table' pane. (#1840)

---
 src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx | 8 +++++++-
 .../__snapshots__/ThroughputInput.test.tsx.snap           | 4 +++-
 .../CassandraAddCollectionPane.tsx                        | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 07b105642..527592b0e 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -223,6 +223,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
             <Link
+              className="underlinedLink"
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"
@@ -271,7 +272,12 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <Stack className="throughputInputSpacing">
           <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with&nbsp;
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="Capacity calculator">
+            <Link
+              className="underlinedLink"
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="Capacity calculator"
+            >
               capacity calculator
             </Link>
             .
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index 391d88845..110f15955 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
@@ -733,11 +733,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
+              className="underlinedLink"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
+                className="underlinedLink"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -1017,7 +1019,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link root-117"
+                  className="ms-Link underlinedLink root-117"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
index cd91a6628..9332652e9 100644
--- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -275,7 +275,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             <span className="mandatoryStar">*&nbsp;</span>
             <Text className="panelTextBold" variant="small">
               Enter CQL command to create the table.{" "}
-              <Link href="https://aka.ms/cassandra-create-table" target="_blank">
+              <Link className="underlinedLink" href="https://aka.ms/cassandra-create-table" target="_blank">
                 Learn More
               </Link>
             </Text>

From 7c5fb1b6972a52f6648f5c17dcc7d69c366ade76 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:46:35 +0530
Subject: [PATCH 52/67] [accessibility-3102730]:[Visual Requirement - Azure
 Cosmos DB - Data Explorer]: Luminosity ratio of 'Learn More' link with
 surrounding text is less than required 3:1 under 'Data Explorer' pane.
 (#1847)

---
 src/Explorer/Tabs/Tabs.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index 64636f077..d4588b19e 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -92,6 +92,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
           {`To prevent queries from using excessive RUs, Data Explorer has a 5,000 RU default limit. To modify or remove
           the limit, go to the Settings cog on the right and find "RU Threshold".`}
           <Link
+            className="underlinedLink"
             href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold"
             target="_blank"
           >

From 7002da0b516485afb62193c53ee66a53227daf7d Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 5 Jun 2024 17:47:27 +0200
Subject: [PATCH 53/67] Implement ctrl-shift click to select multiple documents
 (#1851)

* Initial implementation of shift and ctrl click to select

* Implement shift-ctrl selection

* Fix snapshot, update selectionHelper comment

* Fix missing type

* Properly disable cursor selection

* Update snapshots

* Do not enable (multiselect) if readonly

* Consider meta key for mac and ctrl for everything else
---
 .../DataTable/DataTableOperationManager.ts    |  9 +-
 src/Explorer/Tables/Utilities.ts              | 28 +-----
 .../DocumentsTableComponent.tsx               | 65 +++++++++++--
 .../Tabs/DocumentsTabV2/SelectionHelper.ts    | 92 +++++++++++++++++++
 .../DocumentsTableComponent.test.tsx.snap     | 72 ++++++++++-----
 .../DocumentsTabV2/selectionHelper.test.ts    | 84 +++++++++++++++++
 src/Utils/KeyboardUtils.ts                    | 15 +++
 7 files changed, 304 insertions(+), 61 deletions(-)
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
 create mode 100644 src/Explorer/Tabs/DocumentsTabV2/selectionHelper.test.ts
 create mode 100644 src/Utils/KeyboardUtils.ts

diff --git a/src/Explorer/Tables/DataTable/DataTableOperationManager.ts b/src/Explorer/Tables/DataTable/DataTableOperationManager.ts
index 47d202650..67ba1c6a7 100644
--- a/src/Explorer/Tables/DataTable/DataTableOperationManager.ts
+++ b/src/Explorer/Tables/DataTable/DataTableOperationManager.ts
@@ -1,5 +1,6 @@
 import ko from "knockout";
 
+import { isEnvironmentAltPressed, isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import * as Constants from "../Constants";
 import * as Entities from "../Entities";
 import * as Utilities from "../Utilities";
@@ -28,7 +29,7 @@ export default class DataTableOperationManager {
     var elem: JQuery<Element> = $(event.currentTarget);
     this.updateLastSelectedItem(elem, event.shiftKey);
 
-    if (Utilities.isEnvironmentCtrlPressed(event)) {
+    if (isEnvironmentCtrlPressed(event)) {
       this.applyCtrlSelection(elem);
     } else if (event.shiftKey) {
       this.applyShiftSelection(elem);
@@ -74,9 +75,9 @@ export default class DataTableOperationManager {
         DataTableOperations.scrollToRowIfNeeded(dataTableRows, safeIndex, isUpArrowKey);
       }
     } else if (
-      Utilities.isEnvironmentCtrlPressed(event) &&
-      !Utilities.isEnvironmentShiftPressed(event) &&
-      !Utilities.isEnvironmentAltPressed(event) &&
+      isEnvironmentCtrlPressed(event) &&
+      !isEnvironmentShiftPressed(event) &&
+      !isEnvironmentAltPressed(event) &&
       event.keyCode === Constants.keyCodes.A
     ) {
       this.applySelectAll();
diff --git a/src/Explorer/Tables/Utilities.ts b/src/Explorer/Tables/Utilities.ts
index 4e3d11bc0..8d5ab453c 100644
--- a/src/Explorer/Tables/Utilities.ts
+++ b/src/Explorer/Tables/Utilities.ts
@@ -1,8 +1,8 @@
-import * as _ from "underscore";
 import Q from "q";
+import * as _ from "underscore";
+import * as Constants from "./Constants";
 import * as Entities from "./Entities";
 import { CassandraTableKey } from "./TableDataClient";
-import * as Constants from "./Constants";
 
 /**
  * Generates a pseudo-random GUID.
@@ -180,30 +180,6 @@ export function onEsc(
   return onKey(event, Constants.keyCodes.Esc, action, metaKey, shiftKey, altKey);
 }
 
-/**
- * Is the environment 'ctrl' key press. This key is used for multi selection, like select one more item, select all.
- * For Windows and Linux, it's ctrl. For Mac, it's command.
- */
-export function isEnvironmentCtrlPressed(event: JQueryEventObject): boolean {
-  return isMac() ? event.metaKey : event.ctrlKey;
-}
-
-export function isEnvironmentShiftPressed(event: JQueryEventObject): boolean {
-  return event.shiftKey;
-}
-
-export function isEnvironmentAltPressed(event: JQueryEventObject): boolean {
-  return event.altKey;
-}
-
-/**
- * Returns whether the current platform is MacOS.
- */
-export function isMac(): boolean {
-  var platform = navigator.platform.toUpperCase();
-  return platform.indexOf("MAC") >= 0;
-}
-
 // MAX_SAFE_INTEGER and MIN_SAFE_INTEGER will be provided by ECMAScript 6's Number
 export var MAX_SAFE_INTEGER = Math.pow(2, 53) - 1;
 export var MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index d66568875..58f486c3b 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -22,6 +22,9 @@ import {
   useTableFeatures,
   useTableSelection,
 } from "@fluentui/react-components";
+import { NormalizedEventKey } from "Common/Constants";
+import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
+import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
 
@@ -123,17 +126,63 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     [columnHeaders],
   );
 
-  const onIdClicked = useCallback((index: number) => onSelectedRowsChange(new Set([index])), [onSelectedRowsChange]);
+  const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(undefined);
+  const onTableCellClicked = useCallback(
+    (e: React.MouseEvent, index: number) => {
+      if (isSelectionDisabled) {
+        // Only allow click
+        onSelectedRowsChange(new Set<TableRowId>([index]));
+        setSelectionStartIndex(index);
+        return;
+      }
+
+      const result = selectionHelper(
+        selectedRows as Set<number>,
+        index,
+        isEnvironmentShiftPressed(e),
+        isEnvironmentCtrlPressed(e),
+        selectionStartIndex,
+      );
+      onSelectedRowsChange(result.selection);
+      if (result.selectionStartIndex !== undefined) {
+        setSelectionStartIndex(result.selectionStartIndex);
+      }
+    },
+    [isSelectionDisabled, selectedRows, selectionStartIndex, onSelectedRowsChange],
+  );
+
+  /**
+   * Callback for when:
+   * - a key has been pressed on the cell
+   * - a key is down and the cell is clicked by the mouse
+   */
+  const onIdClicked = useCallback(
+    (e: React.KeyboardEvent<Element>, index: number) => {
+      if (e.key === NormalizedEventKey.Enter || e.key === NormalizedEventKey.Space) {
+        onSelectedRowsChange(new Set<TableRowId>([index]));
+      }
+    },
+    [onSelectedRowsChange],
+  );
 
   const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
     const { item, selected, appearance, onClick, onKeyDown } = data[index];
     return (
-      <TableRow aria-rowindex={index + 2} style={style} key={item.id} aria-selected={selected} appearance={appearance}>
+      <TableRow
+        aria-rowindex={index + 2}
+        style={{ ...style, cursor: "pointer", userSelect: "none" }}
+        key={item.id}
+        aria-selected={selected}
+        appearance={appearance}
+      >
         {!isSelectionDisabled && (
           <TableSelectionCell
             checked={selected}
             checkboxIndicator={{ "aria-label": "Select row" }}
-            onClick={onClick}
+            onClick={(e: React.MouseEvent) => {
+              setSelectionStartIndex(index);
+              onClick(e);
+            }}
             onKeyDown={onKeyDown}
           />
         )}
@@ -141,8 +190,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
           <TableCell
             key={column.columnId}
             className="documentsTableCell"
-            onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
-            onKeyDown={() => onIdClicked(index)}
+            // When clicking on a cell with shift/ctrl key, onKeyDown is called instead of onClick.
+            onClick={(e: React.MouseEvent<Element, MouseEvent>) => onTableCellClicked(e, index)}
+            onKeyPress={(e: React.KeyboardEvent<Element>) => onIdClicked(e, index)}
             {...columnSizing.getTableCellProps(column.columnId)}
             tabIndex={column.columnId === "id" ? 0 : -1}
           >
@@ -166,7 +216,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     [
       useTableColumnSizing_unstable({ columnSizingOptions, onColumnResize }),
       useTableSelection({
-        selectionMode: "multiselect",
+        selectionMode: isSelectionDisabled ? "single" : "multiselect",
         selectedItems: selectedRows,
         // eslint-disable-next-line react/prop-types
         onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
@@ -207,9 +257,10 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
       if (newActiveItemIndex !== activeItemIndex) {
         onItemClicked(newActiveItemIndex);
         setActiveItemIndex(newActiveItemIndex);
+        setSelectionStartIndex(newActiveItemIndex);
       }
     }
-  }, [selectedRows, items]);
+  }, [selectedRows, items, activeItemIndex, onItemClicked]);
 
   // Cell keyboard navigation
   const keyboardNavAttr = useArrowNavigationGroup({ axis: "grid" });
diff --git a/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts b/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
new file mode 100644
index 000000000..fe4426d4e
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
@@ -0,0 +1,92 @@
+/**
+ * Utility class to help with selection.
+ * This emulates File Explorer selection behavior.
+ * ctrl: toggle selection of index.
+ * shift: select all rows between selectionStartIndex and index
+ * shift + ctrl: select or deselect all rows between selectionStartIndex and index depending on whether selectionStartIndex is selected
+ * No modifier only selects the clicked row
+ * ctrl: updates selection start index
+ * shift: do not update selection start index
+ *
+ * @param currentSelection current selection
+ * @param clickedIndex index of clicked row
+ * @param isShiftKey shift key is pressed
+ * @param isCtrlKey ctrl key is pressed
+ * @param selectionStartIndex index of current selected row
+ * @returns new selection and selection start
+ */
+export const selectionHelper = (
+  currentSelection: Set<number>,
+  clickedIndex: number,
+  isShiftKey: boolean,
+  isCtrlKey: boolean,
+  selectionStartIndex: number,
+): {
+  selection: Set<number>;
+  selectionStartIndex: number;
+} => {
+  if (isShiftKey) {
+    // Shift is about selecting range of rows
+    if (isCtrlKey) {
+      // shift + ctrl
+      const isSelectionStartIndexSelected = currentSelection.has(selectionStartIndex);
+      const min = Math.min(clickedIndex, selectionStartIndex);
+      const max = Math.max(clickedIndex, selectionStartIndex);
+
+      const newSelection = new Set<number>(currentSelection);
+      for (let i = min; i <= max; i++) {
+        // Select or deselect range depending on how selectionStartIndex is selected
+        if (isSelectionStartIndexSelected) {
+          // Select range
+          newSelection.add(i);
+        } else {
+          // Deselect range
+          newSelection.delete(i);
+        }
+      }
+
+      return {
+        selection: newSelection,
+        selectionStartIndex: undefined,
+      };
+    } else {
+      // shift only
+      // Shift only: enable everything between lastClickedIndex and clickedIndex and disable everything else
+      const min = Math.min(clickedIndex, selectionStartIndex);
+      const max = Math.max(clickedIndex, selectionStartIndex);
+      const newSelection = new Set<number>();
+      for (let i = min; i <= max; i++) {
+        newSelection.add(i);
+      }
+
+      return {
+        selection: newSelection,
+        selectionStartIndex: undefined, // do not change selection start
+      };
+    }
+  } else {
+    if (isCtrlKey) {
+      // Ctrl only: toggle selection where we clicked
+      const isNotSelected = !currentSelection.has(clickedIndex);
+      if (isNotSelected) {
+        return {
+          selection: new Set(currentSelection.add(clickedIndex)),
+          selectionStartIndex: clickedIndex,
+        };
+      } else {
+        // Remove
+        currentSelection.delete(clickedIndex);
+        return {
+          selection: new Set(currentSelection),
+          selectionStartIndex: clickedIndex,
+        };
+      }
+    } else {
+      // If no modifier keys are pressed, select only the clicked row
+      return {
+        selection: new Set<number>([clickedIndex]),
+        selectionStartIndex: clickedIndex,
+      };
+    }
+  }
+};
diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
index 44eb5db8b..2fbeba2da 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
@@ -476,11 +476,13 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                     key="1"
                     style={
                       Object {
+                        "cursor": "pointer",
                         "height": 30,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
                         "top": 0,
+                        "userSelect": "none",
                         "width": "100%",
                       }
                     }
@@ -492,11 +494,13 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                       role="row"
                       style={
                         Object {
+                          "cursor": "pointer",
                           "height": 30,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
                           "top": 0,
+                          "userSelect": "none",
                           "width": "100%",
                         }
                       }
@@ -505,7 +509,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         className="documentsTableCell"
                         key="id"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -518,7 +522,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -554,7 +558,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         className="documentsTableCell"
                         key="partitionKey"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -567,7 +571,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -660,11 +664,13 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                     key="2"
                     style={
                       Object {
+                        "cursor": "pointer",
                         "height": 30,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
                         "top": 30,
+                        "userSelect": "none",
                         "width": "100%",
                       }
                     }
@@ -676,11 +682,13 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                       role="row"
                       style={
                         Object {
+                          "cursor": "pointer",
                           "height": 30,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
                           "top": 30,
+                          "userSelect": "none",
                           "width": "100%",
                         }
                       }
@@ -689,7 +697,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         className="documentsTableCell"
                         key="id"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -702,7 +710,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -738,7 +746,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         className="documentsTableCell"
                         key="partitionKey"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -751,7 +759,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -844,11 +852,13 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                     key="3"
                     style={
                       Object {
+                        "cursor": "pointer",
                         "height": 30,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
                         "top": 60,
+                        "userSelect": "none",
                         "width": "100%",
                       }
                     }
@@ -860,11 +870,13 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                       role="row"
                       style={
                         Object {
+                          "cursor": "pointer",
                           "height": 30,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
                           "top": 60,
+                          "userSelect": "none",
                           "width": "100%",
                         }
                       }
@@ -873,7 +885,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         className="documentsTableCell"
                         key="id"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -886,7 +898,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -922,7 +934,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         className="documentsTableCell"
                         key="partitionKey"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -935,7 +947,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -1496,11 +1508,13 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                     key="1"
                     style={
                       Object {
+                        "cursor": "pointer",
                         "height": 30,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
                         "top": 0,
+                        "userSelect": "none",
                         "width": "100%",
                       }
                     }
@@ -1512,11 +1526,13 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                       role="row"
                       style={
                         Object {
+                          "cursor": "pointer",
                           "height": 30,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
                           "top": 0,
+                          "userSelect": "none",
                           "width": "100%",
                         }
                       }
@@ -1565,7 +1581,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         className="documentsTableCell"
                         key="id"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -1578,7 +1594,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -1614,7 +1630,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         className="documentsTableCell"
                         key="partitionKey"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -1627,7 +1643,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -1720,11 +1736,13 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                     key="2"
                     style={
                       Object {
+                        "cursor": "pointer",
                         "height": 30,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
                         "top": 30,
+                        "userSelect": "none",
                         "width": "100%",
                       }
                     }
@@ -1736,11 +1754,13 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                       role="row"
                       style={
                         Object {
+                          "cursor": "pointer",
                           "height": 30,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
                           "top": 30,
+                          "userSelect": "none",
                           "width": "100%",
                         }
                       }
@@ -1789,7 +1809,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         className="documentsTableCell"
                         key="id"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -1802,7 +1822,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -1838,7 +1858,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         className="documentsTableCell"
                         key="partitionKey"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -1851,7 +1871,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -1944,11 +1964,13 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                     key="3"
                     style={
                       Object {
+                        "cursor": "pointer",
                         "height": 30,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
                         "top": 60,
+                        "userSelect": "none",
                         "width": "100%",
                       }
                     }
@@ -1960,11 +1982,13 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                       role="row"
                       style={
                         Object {
+                          "cursor": "pointer",
                           "height": 30,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
                           "top": 60,
+                          "userSelect": "none",
                           "width": "100%",
                         }
                       }
@@ -2013,7 +2037,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         className="documentsTableCell"
                         key="id"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -2026,7 +2050,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
@@ -2062,7 +2086,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         className="documentsTableCell"
                         key="partitionKey"
                         onClick={[Function]}
-                        onKeyDown={[Function]}
+                        onKeyPress={[Function]}
                         style={
                           Object {
                             "maxWidth": 50,
@@ -2075,7 +2099,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                         <div
                           className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
                           onClick={[Function]}
-                          onKeyDown={[Function]}
+                          onKeyPress={[Function]}
                           role="cell"
                           style={
                             Object {
diff --git a/src/Explorer/Tabs/DocumentsTabV2/selectionHelper.test.ts b/src/Explorer/Tabs/DocumentsTabV2/selectionHelper.test.ts
new file mode 100644
index 000000000..129a08c41
--- /dev/null
+++ b/src/Explorer/Tabs/DocumentsTabV2/selectionHelper.test.ts
@@ -0,0 +1,84 @@
+import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
+
+describe("Selection helper", () => {
+  describe("when shift:off", () => {
+    it("ctrl:off: should return clicked items and update selection start", () => {
+      const currentSelection = new Set<number>([1, 2, 3]);
+      const clickedIndex = 4;
+      const isShiftKey = false;
+      const isCtrlKey = false;
+      const selectionStartIndex = 1;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([4]));
+      expect(result.selectionStartIndex).toEqual(4);
+    });
+
+    it("ctrl:on: should turn on selection and update selection start on not selected item", () => {
+      const currentSelection = new Set<number>([1, 3]);
+      const clickedIndex = 2;
+      const isShiftKey = false;
+      const isCtrlKey = true;
+      const selectionStartIndex = 1;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([1, 2, 3]));
+      expect(result.selectionStartIndex).toEqual(2);
+    });
+
+    it("ctrl:on: should turn off selection and update selection start on selected item", () => {
+      const currentSelection = new Set<number>([1, 2, 3]);
+      const clickedIndex = 2;
+      const isShiftKey = false;
+      const isCtrlKey = true;
+      const selectionStartIndex = 1;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([1, 3]));
+      expect(result.selectionStartIndex).toEqual(2);
+    });
+  });
+
+  describe("when shift:on", () => {
+    it("ctrl:off: should only select between selection start and clicked index (selection start < clicked index)", () => {
+      const currentSelection = new Set<number>([7, 8, 10]);
+      const clickedIndex = 9;
+      const isShiftKey = true;
+      const isCtrlKey = false;
+      const selectionStartIndex = 5;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([5, 6, 7, 8, 9]));
+      expect(result.selectionStartIndex).toEqual(undefined);
+    });
+
+    it("ctrl:off: should only select between selection start and clicked index (selection start > clicked index)", () => {
+      const currentSelection = new Set<number>([4, 6, 8]);
+      const clickedIndex = 2;
+      const isShiftKey = true;
+      const isCtrlKey = false;
+      const selectionStartIndex = 5;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([2, 3, 4, 5]));
+      expect(result.selectionStartIndex).toEqual(undefined);
+    });
+
+    it("ctrl:on: selection start on selected item should keep current selection and select range, and not update selection start", () => {
+      const currentSelection = new Set<number>([1, 4, 5, 7]);
+      const clickedIndex = 9;
+      const isShiftKey = true;
+      const isCtrlKey = true;
+      const selectionStartIndex = 5;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([1, 4, 5, 6, 7, 8, 9]));
+      expect(result.selectionStartIndex).toEqual(undefined);
+    });
+
+    it("ctrl:on: selection start on deselected item should deselect range, and not update selection start", () => {
+      const currentSelection = new Set<number>([1, 4, 6, 7, 10]);
+      const clickedIndex = 9;
+      const isShiftKey = true;
+      const isCtrlKey = true;
+      const selectionStartIndex = 5;
+      const result = selectionHelper(currentSelection, clickedIndex, isShiftKey, isCtrlKey, selectionStartIndex);
+      expect(result.selection).toEqual(new Set<number>([1, 4, 10]));
+      expect(result.selectionStartIndex).toEqual(undefined);
+    });
+  });
+});
diff --git a/src/Utils/KeyboardUtils.ts b/src/Utils/KeyboardUtils.ts
new file mode 100644
index 000000000..e7ef66ef9
--- /dev/null
+++ b/src/Utils/KeyboardUtils.ts
@@ -0,0 +1,15 @@
+/**
+ * Is the environment 'ctrl' key press. This key is used for multi selection, like select one more item, select all.
+ * For Windows and Linux, it's ctrl. For Mac, it's command.
+ */
+export const isEnvironmentCtrlPressed = (event: JQueryEventObject | React.MouseEvent): boolean =>
+  isMac() ? event.metaKey : event.ctrlKey;
+
+export const isEnvironmentShiftPressed = (event: JQueryEventObject | React.MouseEvent): boolean => event.shiftKey;
+
+export const isEnvironmentAltPressed = (event: JQueryEventObject | React.MouseEvent): boolean => event.altKey;
+
+/**
+ * Returns whether the current platform is MacOS.
+ */
+export const isMac = (): boolean => navigator.platform.toUpperCase().indexOf("MAC") >= 0;

From 9b1277515185809957d2c9bfcab41d2f69e058d6 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 5 Jun 2024 12:16:28 -0700
Subject: [PATCH 54/67] Allow query result view to be toggled from command bar
 (#1833)

* allow query result view to be toggled from command bar

also provides a default results view option that's stored in the
browser's local storage

* update SettingsPane test snapshot
---
 .../CommandButton/CommandButtonComponent.tsx  |  2 +-
 .../Menus/CommandBar/CommandBarUtil.tsx       | 18 +++---
 .../Panes/SettingsPane/SettingsPane.tsx       | 37 +++++++++++
 .../__snapshots__/SettingsPane.test.tsx.snap  | 61 +++++++++++++++++++
 .../Tabs/QueryTab/QueryTabComponent.tsx       | 55 ++++++++++++++++-
 src/Shared/StorageUtility.ts                  | 10 +++
 6 files changed, 172 insertions(+), 11 deletions(-)

diff --git a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
index 6337f947e..b6e847d54 100644
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -31,7 +31,7 @@ export interface CommandButtonComponentProps {
   /**
    * Click handler for command button click
    */
-  onCommandClick: (e: React.SyntheticEvent | KeyboardEvent) => void;
+  onCommandClick?: (e: React.SyntheticEvent | KeyboardEvent) => void;
 
   /**
    * Label for the button
diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
index fc67ad894..0c9de46ce 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -60,14 +60,16 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
           iconName: btn.iconName,
         },
-        onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
-          btn.onCommandClick(ev);
-          let copilotEnabled = false;
-          if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
-            copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
-          }
-          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
-        },
+        onClick: btn.onCommandClick
+          ? (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+              btn.onCommandClick(ev);
+              let copilotEnabled = false;
+              if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
+                copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
+              }
+              TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
+            }
+          : undefined,
         key: `${btn.commandButtonLabel}${index}`,
         text: label,
         "data-test": label,
diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index 9b2412c4b..ff96d6716 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -9,12 +9,14 @@ import {
   Toggle,
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
+import { SplitterDirection } from "Common/Splitter";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { configContext } from "ConfigContext";
 import {
   DefaultRUThreshold,
   LocalStorageUtility,
   StorageKey,
+  getDefaultQueryResultsView,
   getRUThreshold,
   ruThresholdEnabled as isRUThresholdEnabled,
 } from "Shared/StorageUtility";
@@ -47,6 +49,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
   );
   const [queryTimeout, setQueryTimeout] = useState<number>(LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout));
+  const [defaultQueryResultsView, setDefaultQueryResultsView] = useState<SplitterDirection>(
+    getDefaultQueryResultsView(),
+  );
   const [automaticallyCancelQueryAfterTimeout, setAutomaticallyCancelQueryAfterTimeout] = useState<boolean>(
     LocalStorageUtility.getEntryBoolean(StorageKey.AutomaticallyCancelQueryAfterTimeout),
   );
@@ -121,6 +126,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
     LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
     LocalStorageUtility.setEntryString(StorageKey.CopilotSampleDBEnabled, copilotSampleDBEnabled.toString());
+    LocalStorageUtility.setEntryString(StorageKey.DefaultQueryResultsView, defaultQueryResultsView);
 
     if (shouldShowGraphAutoVizOption) {
       LocalStorageUtility.setEntryBoolean(
@@ -197,6 +203,11 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     { key: Constants.PriorityLevel.High, text: "High" },
   ];
 
+  const defaultQueryResultsViewOptionList: IChoiceGroupOption[] = [
+    { key: SplitterDirection.Vertical, text: "Vertical" },
+    { key: SplitterDirection.Horizontal, text: "Horizontal" },
+  ];
+
   const handleOnPriorityLevelOptionChange = (
     ev: React.FormEvent<HTMLInputElement>,
     option: IChoiceGroupOption,
@@ -234,6 +245,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     }
   };
 
+  const handleOnDefaultQueryResultsViewChange = (
+    ev: React.MouseEvent<HTMLElement>,
+    option: IChoiceGroupOption,
+  ): void => {
+    setDefaultQueryResultsView(option.key as SplitterDirection);
+  };
+
   const handleOnQueryRetryAttemptsSpinButtonChange = (ev: React.MouseEvent<HTMLElement>, newValue?: string): void => {
     const retryAttempts = Number(newValue);
     if (!isNaN(retryAttempts)) {
@@ -438,6 +456,25 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 )}
               </div>
             </div>
+            <div className="settingsSection">
+              <div className="settingsSectionPart">
+                <div>
+                  <legend id="defaultQueryResultsView" className="settingsSectionLabel legendLabel">
+                    Default Query Results View
+                  </legend>
+                  <InfoTooltip>Select the default view to use when displaying query results.</InfoTooltip>
+                </div>
+                <div>
+                  <ChoiceGroup
+                    ariaLabelledBy="defaultQueryResultsView"
+                    selectedKey={defaultQueryResultsView}
+                    options={defaultQueryResultsViewOptionList}
+                    styles={choiceButtonStyles}
+                    onChange={handleOnDefaultQueryResultsViewChange}
+                  />
+                </div>
+              </div>
+            </div>
           </>
         )}
         <div className="settingsSection">
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index 6f4ac0c06..f887a53dd 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -205,6 +205,67 @@ exports[`Settings Pane should render Default properly 1`] = `
         </div>
       </div>
     </div>
+    <div
+      className="settingsSection"
+    >
+      <div
+        className="settingsSectionPart"
+      >
+        <div>
+          <legend
+            className="settingsSectionLabel legendLabel"
+            id="defaultQueryResultsView"
+          >
+            Default Query Results View
+          </legend>
+          <InfoTooltip>
+            Select the default view to use when displaying query results.
+          </InfoTooltip>
+        </div>
+        <div>
+          <StyledChoiceGroup
+            ariaLabelledBy="defaultQueryResultsView"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "key": "vertical",
+                  "text": "Vertical",
+                },
+                Object {
+                  "key": "horizontal",
+                  "text": "Horizontal",
+                },
+              ]
+            }
+            selectedKey="vertical"
+            styles={
+              Object {
+                "flexContainer": Array [
+                  Object {
+                    "selectors": Object {
+                      ".ms-ChoiceField": Object {
+                        "marginTop": 0,
+                      },
+                      ".ms-ChoiceField-wrapper label": Object {
+                        "fontSize": 12,
+                        "paddingTop": 0,
+                      },
+                      ".ms-ChoiceFieldGroup root-133": Object {
+                        "clear": "both",
+                      },
+                    },
+                  },
+                ],
+                "root": Object {
+                  "clear": "both",
+                },
+              }
+            }
+          />
+        </div>
+      </div>
+    </div>
     <div
       className="settingsSection"
     >
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 532ce4662..bfcaa9bda 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-console */
 import { FeedOptions, QueryOperationOptions } from "@azure/cosmos";
+import { SplitterDirection } from "Common/Splitter";
 import { Platform, configContext } from "ConfigContext";
 import { useDialog } from "Explorer/Controls/Dialog";
 import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
@@ -12,7 +13,13 @@ import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey, getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
+import {
+  LocalStorageUtility,
+  StorageKey,
+  getDefaultQueryResultsView,
+  getRUThreshold,
+  ruThresholdEnabled,
+} from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { TabsState, useTabs } from "hooks/useTabs";
@@ -25,6 +32,7 @@ import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
 import DownloadQueryIcon from "../../../../images/DownloadQuery.svg";
 import CancelQueryIcon from "../../../../images/Entity_cancel.svg";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
+import CheckIcon from "../../../../images/check-1.svg";
 import SaveQueryIcon from "../../../../images/save-cosmos.svg";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
@@ -103,6 +111,7 @@ interface IQueryTabStates {
   cancelQueryTimeoutID: NodeJS.Timeout;
   copilotActive: boolean;
   currentTabActive: boolean;
+  queryResultsView: SplitterDirection;
 }
 
 export const QueryTabFunctionComponent = (props: IQueryTabComponentProps): any => {
@@ -147,6 +156,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       cancelQueryTimeoutID: undefined,
       copilotActive: this._queryCopilotActive(),
       currentTabActive: true,
+      queryResultsView: getDefaultQueryResultsView(),
     };
     this.isCloseClicked = false;
     this.splitterId = this.props.tabId + "_splitter";
@@ -508,9 +518,45 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       });
     }
 
+    buttons.push(this.createViewButtons());
+
     return buttons;
   }
 
+  private createViewButtons(): CommandButtonComponentProps {
+    const verticalButton: CommandButtonComponentProps = {
+      isSelected: this.state.queryResultsView === SplitterDirection.Vertical,
+      iconSrc: this.state.queryResultsView === SplitterDirection.Vertical ? CheckIcon : undefined,
+      commandButtonLabel: "Vertical",
+      ariaLabel: "Vertical",
+      onCommandClick: () => this._setViewLayout(SplitterDirection.Vertical),
+      hasPopup: false,
+    };
+    const horizontalButton: CommandButtonComponentProps = {
+      isSelected: this.state.queryResultsView === SplitterDirection.Horizontal,
+      iconSrc: this.state.queryResultsView === SplitterDirection.Horizontal ? CheckIcon : undefined,
+      commandButtonLabel: "Horizontal",
+      ariaLabel: "Horizontal",
+      onCommandClick: () => this._setViewLayout(SplitterDirection.Horizontal),
+      hasPopup: false,
+    };
+
+    return {
+      commandButtonLabel: "View",
+      ariaLabel: "View",
+      hasPopup: true,
+      children: [verticalButton, horizontalButton],
+    };
+  }
+  private _setViewLayout(direction: SplitterDirection): void {
+    this.setState({ queryResultsView: direction });
+
+    // We'll need to refresh the context buttons to update the selected state of the view buttons
+    setTimeout(() => {
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
+    }, 100);
+  }
+
   private _toggleCopilot = (active: boolean) => {
     this.setState({ copilotActive: active });
     useQueryCopilot.getState().setCopilotEnabledforExecution(active);
@@ -634,7 +680,12 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
             ></QueryCopilotPromptbar>
           )}
           <div className="tabPaneContentContainer">
-            <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
+            <SplitterLayout
+              vertical={this.state.queryResultsView === SplitterDirection.Vertical}
+              primaryIndex={0}
+              primaryMinSize={100}
+              secondaryMinSize={200}
+            >
               <Fragment>
                 <div className="queryEditor" style={{ height: "100%" }}>
                   <EditorReact
diff --git a/src/Shared/StorageUtility.ts b/src/Shared/StorageUtility.ts
index b229ac7db..652451e57 100644
--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -1,3 +1,4 @@
+import { SplitterDirection } from "Common/Splitter";
 import * as LocalStorageUtility from "./LocalStorageUtility";
 import * as SessionStorageUtility from "./SessionStorageUtility";
 import * as StringUtility from "./StringUtility";
@@ -27,6 +28,7 @@ export enum StorageKey {
   GalleryCalloutDismissed,
   VisitedAccounts,
   PriorityLevel,
+  DefaultQueryResultsView,
 }
 
 export const hasRUThresholdBeenConfigured = (): boolean => {
@@ -51,4 +53,12 @@ export const getRUThreshold = (): number => {
   return DefaultRUThreshold;
 };
 
+export const getDefaultQueryResultsView = (): SplitterDirection => {
+  const defaultQueryResultsViewRaw = LocalStorageUtility.getEntryString(StorageKey.DefaultQueryResultsView);
+  if (defaultQueryResultsViewRaw === SplitterDirection.Horizontal) {
+    return SplitterDirection.Horizontal;
+  }
+  return SplitterDirection.Vertical;
+};
+
 export const DefaultRUThreshold = 5000;

From 736731474f9da69839766b63989d323bcdac5946 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 5 Jun 2024 12:27:29 -0700
Subject: [PATCH 55/67] show an expand icon for nodes with non-null children
 arrray (#1862)

---
 .../TreeComponent/TreeNodeComponent.test.tsx  | 14 +++++++
 .../TreeComponent/TreeNodeComponent.tsx       |  3 +-
 .../TreeNodeComponent.test.tsx.snap           | 38 +++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
index 602edcb2a..e0cdf5700 100644
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
@@ -124,6 +124,20 @@ describe("TreeNodeComponent", () => {
     expect(component).toMatchSnapshot();
   });
 
+  it("renders a node as expandable if it has empty, but defined, children array", () => {
+    const node = generateTestNode("root", {
+      isLoading: true,
+      children: [
+        generateTestNode("child1", {
+          children: [],
+        }),
+        generateTestNode("child2"),
+      ],
+    });
+    const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
+    expect(component).toMatchSnapshot();
+  });
+
   it("does not render children if the node is loading", () => {
     const node = generateTestNode("root", {
       isLoading: true,
diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
index 1717530ec..354046222 100644
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -100,7 +100,8 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
     return unsortedChildren;
   };
 
-  const isBranch = node.children?.length > 0;
+  // A branch node is any node with a defined children array, even if the array is empty.
+  const isBranch = !!node.children;
 
   const onOpenChange = useCallback(
     (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
index 6678f29ad..a20da1f66 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
@@ -1534,6 +1534,44 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 </TreeItem>
 `;
 
+exports[`TreeNodeComponent renders a node as expandable if it has empty, but defined, children array 1`] = `
+<TreeItem
+  itemType="branch"
+  onOpenChange={[Function]}
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
+  value="root"
+>
+  <TreeItemLayout
+    actions={false}
+    className="rootClass"
+    data-test="TreeNode:root"
+    iconBefore={
+      <img
+        alt=""
+        src="rootIcon"
+        style={
+          Object {
+            "height": 16,
+            "width": 16,
+          }
+        }
+      />
+    }
+    style={
+      Object {
+        "backgroundColor": undefined,
+      }
+    }
+  >
+    rootLabel
+  </TreeItemLayout>
+</TreeItem>
+`;
+
 exports[`TreeNodeComponent renders a node with a menu 1`] = `
 <Menu
   onOpenChange={[Function]}

From 417ef899f06b8a6c8bbe3196d6d41cffcadcd4c2 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 5 Jun 2024 12:46:32 -0700
Subject: [PATCH 56/67] Update Playwright, improve E2E test reliability, add
 scripts to deploy test resources (#1857)

---
 .editorconfig                                 |   10 +
 .eslintignore                                 |    2 +
 .github/workflows/ci.yml                      |  140 +-
 .gitignore                                    |    6 +-
 jest-playwright.config.js                     |   13 -
 jest.config.playwright.js                     |    7 -
 package-lock.json                             | 1426 +----------------
 package.json                                  |    4 +-
 playwright.config.ts                          |   53 +
 .../TreeComponent/LegacyTreeComponent.tsx     |    5 +-
 .../TreeComponent/TreeNodeComponent.tsx       |    1 +
 .../LegacyTreeComponent.test.tsx.snap         |   15 +-
 .../TreeNodeComponent.test.tsx.snap           |   24 +
 .../Menus/CommandBar/CommandBarUtil.tsx       |    2 +-
 ...teCollectionConfirmationPane.test.tsx.snap |    6 +
 .../Panes/DeleteDatabaseConfirmationPanel.tsx |   16 +-
 .../ExecuteSprocParamsPane.test.tsx.snap      |    6 +
 src/Explorer/Panes/PanelFooterComponent.tsx   |    1 +
 .../__snapshots__/RightPaneForm.test.tsx.snap |    6 +
 .../StringInputPane.test.tsx.snap             |    6 +
 .../TableQuerySelectPanel.test.tsx.snap       |    6 +
 .../AddTableEntityPanel.test.tsx.snap         |    6 +
 .../EditTableEntityPanel.test.tsx.snap        |    6 +
 ...eteDatabaseConfirmationPanel.test.tsx.snap |   29 +-
 src/HostedExplorer.tsx                        |    1 +
 src/Main.tsx                                  |    2 +-
 .../Hosted/Components/ConnectExplorer.tsx     |    2 +-
 src/SelfServe/SelfServeComponent.tsx          |    2 +-
 .../SelfServeComponent.test.tsx.snap          |    4 +
 test/README.md                                |  143 ++
 test/cassandra/container.spec.ts              |   78 +-
 test/fx.ts                                    |  151 ++
 test/graph/container.spec.ts                  |   58 -
 test/gremlin/container.spec.ts                |   41 +
 test/mongo/container.spec.ts                  |  101 +-
 test/mongo/container32.spec.ts                |   59 -
 test/notebooks/GettingStarted.ipynb           |  110 --
 test/notebooks/upload.spec.ts                 |   25 -
 test/playwrightEnv.js                         |   26 -
 test/resources/README.md                      |    4 +
 test/resources/account.bicep                  |   50 +
 test/resources/all-accounts.bicep             |   31 +
 test/resources/create-resource-group.ps1      |   31 +
 test/resources/deploy.ps1                     |  113 ++
 test/scripts/check-test-accounts.ps1          |   22 +
 test/scripts/set-test-accounts.ps1            |   69 +
 test/selfServe/selfServeExample.spec.ts       |   41 -
 test/sql/container.spec.ts                    |   77 +-
 test/sql/resourceToken.spec.ts                |   51 +-
 test/sql/selfServeExample.spec.ts             |   23 +
 test/tables/container.spec.ts                 |   50 +-
 test/testExplorer/TestExplorer.ts             |   10 +
 test/utils.js                                 |   21 -
 test/utils/shared.ts                          |   69 -
 test/utils/waitForExplorer.ts                 |    9 -
 webpack.config.js                             |   23 +
 56 files changed, 1176 insertions(+), 2117 deletions(-)
 create mode 100644 .editorconfig
 delete mode 100644 jest-playwright.config.js
 delete mode 100644 jest.config.playwright.js
 create mode 100644 playwright.config.ts
 create mode 100644 test/README.md
 create mode 100644 test/fx.ts
 delete mode 100644 test/graph/container.spec.ts
 create mode 100644 test/gremlin/container.spec.ts
 delete mode 100644 test/mongo/container32.spec.ts
 delete mode 100644 test/notebooks/GettingStarted.ipynb
 delete mode 100644 test/notebooks/upload.spec.ts
 delete mode 100644 test/playwrightEnv.js
 create mode 100644 test/resources/README.md
 create mode 100644 test/resources/account.bicep
 create mode 100644 test/resources/all-accounts.bicep
 create mode 100644 test/resources/create-resource-group.ps1
 create mode 100644 test/resources/deploy.ps1
 create mode 100644 test/scripts/check-test-accounts.ps1
 create mode 100644 test/scripts/set-test-accounts.ps1
 delete mode 100644 test/selfServe/selfServeExample.spec.ts
 create mode 100644 test/sql/selfServeExample.spec.ts
 delete mode 100644 test/utils.js
 delete mode 100644 test/utils/shared.ts
 delete mode 100644 test/utils/waitForExplorer.ts

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..65096ce0b
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,10 @@
+# NOTE: Prettier reads EditorConfig settings, so be careful adjusting settings here and assuming they'll only affect your editor ;).
+
+# top-most EditorConfig file
+root = true
+
+[*.yml]
+indent_size = 2
+
+[*.{js,jsx,ts,tsx}]
+indent_size = 2
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
index f7ed8b5f9..2eeecaed5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,5 @@
+playwright.config.ts
+
 **/node_modules/
 src/**/__mocks__/**/*
 dist/
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fd097a194..15c555e31 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -104,79 +104,6 @@ jobs:
         run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
-  endtoendemulator:
-    name: "End To End Emulator Tests"
-    # Temporarily disabled. This test needs to be rewritten in playwright
-    if: false
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-      - uses: southpolesteve/cosmos-emulator-github-action@v1
-      - name: End to End Tests
-        run: |
-          npm ci
-          npm start &
-          npm run wait-for-server
-          npx jest -c ./jest.config.e2e.js --detectOpenHandles test/sql/container.spec.ts
-        shell: bash
-        env:
-          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
-          PLATFORM: "Emulator"
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: screenshots
-          path: failed-*
-  endtoend:
-    name: "E2E"
-    runs-on: ubuntu-latest
-    env:
-      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-    strategy:
-      fail-fast: false
-      matrix:
-        test-file:
-          - ./test/cassandra/container.spec.ts
-          - ./test/graph/container.spec.ts
-          - ./test/sql/container.spec.ts
-          - ./test/mongo/container.spec.ts
-          - ./test/mongo/container32.spec.ts
-          - ./test/selfServe/selfServeExample.spec.ts
-          - ./test/sql/resourceToken.spec.ts
-          - ./test/tables/container.spec.ts
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: "Az CLI login"
-        uses: azure/login@v1
-        with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-      - run: npm ci
-      - run: npm start &
-      - run: npm run wait-for-server
-      - name: ${{ matrix['test-file'] }}
-        run: |
-          # Run tests up to three times
-          for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
-        shell: bash
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: screenshots
-          path: screenshots/
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -226,3 +153,70 @@ jobs:
         name: packages
         with:
           path: "*.nupkg"
+
+  playwright-tests:
+    name: "Run Playwright Tests (Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})"
+    runs-on: ubuntu-latest
+    env:
+      NODE_TLS_REJECT_UNAUTHORIZED: 0
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
+    steps:
+      - uses: actions/checkout@v4
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+            name: blob-report-${{ matrix.shardIndex }}
+            path: blob-report
+            retention-days: 1
+
+  merge-playwright-reports:
+    name: "Merge Playwright Reports"
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [playwright-tests]
+
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Download blob reports from GitHub Actions Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: all-blob-reports
+        pattern: blob-report-*
+        merge-multiple: true
+
+    - name: Merge into HTML Report
+      run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+    - name: Upload HTML report
+      uses: actions/upload-artifact@v4
+      with:
+        name: html-report--attempt-${{ github.run_attempt }}
+        path: playwright-report
+        retention-days: 14
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index be016240b..3617cf905 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,4 +16,8 @@ Contracts/*
 .env
 failure.png
 screenshots/*
-GettingStarted-ignore*.ipynb
\ No newline at end of file
+GettingStarted-ignore*.ipynb
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/jest-playwright.config.js b/jest-playwright.config.js
deleted file mode 100644
index d66e8f221..000000000
--- a/jest-playwright.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const isCI = require("is-ci");
-
-module.exports = {
-  exitOnPageError: false,
-  launchOptions: {
-    headless: isCI,
-    slowMo: 10,
-    timeout: 60000,
-  },
-  contextOptions: {
-    ignoreHTTPSErrors: true,
-  },
-};
diff --git a/jest.config.playwright.js b/jest.config.playwright.js
deleted file mode 100644
index c452a5368..000000000
--- a/jest.config.playwright.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  preset: "jest-playwright-preset",
-  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
-  setupFiles: ["dotenv/config"],
-  testEnvironment: "./test/playwrightEnv.js",
-  setupFilesAfterEnv: ["expect-playwright"],
-};
diff --git a/package-lock.json b/package-lock.json
index 31e3d37db..5a872d3fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -122,6 +122,7 @@
         "@babel/preset-env": "7.9.0",
         "@babel/preset-react": "7.9.4",
         "@babel/preset-typescript": "7.9.0",
+        "@playwright/test": "1.44.0",
         "@testing-library/react": "11.2.3",
         "@types/applicationinsights-js": "1.0.7",
         "@types/codemirror": "0.0.56",
@@ -166,7 +167,6 @@
         "eslint-plugin-no-null": "1.0.2",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-react-hooks": "4.6.0",
-        "expect-playwright": "0.3.3",
         "fast-glob": "3.2.5",
         "fs-extra": "7.0.0",
         "html-inline-css-webpack-plugin": "1.11.2",
@@ -175,7 +175,6 @@
         "html-webpack-plugin": "5.5.3",
         "jest": "26.6.3",
         "jest-canvas-mock": "2.3.1",
-        "jest-playwright-preset": "1.5.1",
         "jest-react-hooks-shallow": "1.5.1",
         "jest-trx-results-processor": "0.0.7",
         "less": "3.8.1",
@@ -184,7 +183,6 @@
         "mini-css-extract-plugin": "2.1.0",
         "monaco-editor-webpack-plugin": "7.1.0",
         "node-fetch": "2.6.7",
-        "playwright": "1.13.0",
         "prettier": "3.0.3",
         "process": "0.11.10",
         "querystring-es3": "0.2.1",
@@ -10210,6 +10208,53 @@
         "@phosphor/virtualdom": "^1.2.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz",
+      "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.44.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@playwright/test/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/@playwright/test/node_modules/playwright": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz",
+      "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.44.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.23",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
@@ -11806,6 +11851,7 @@
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
       "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@hapi/hoek": "^9.0.0"
       }
@@ -11814,13 +11860,15 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
       "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@sideway/pinpoint": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
@@ -13580,15 +13628,6 @@
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
       "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
     },
-    "node_modules/@types/wait-on": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/@types/wait-on/-/wait-on-5.3.4.tgz",
-      "integrity": "sha512-EBsPjFMrFlMbbUFf9D1Fp+PAB2TwmUn7a3YtHyD9RLuTIk1jDd8SxXVAoez2Ciy+8Jsceo2MYEYZzJ/DvorOKw==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -13611,16 +13650,6 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
       "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
     },
-    "node_modules/@types/yauzl": {
-      "version": "2.10.3",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
-      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/youtube-player": {
       "version": "5.5.6",
       "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.6.tgz",
@@ -14314,19 +14343,6 @@
         "node": ">= 6.0.0"
       }
     },
-    "node_modules/aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
-      "dependencies": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/airbnb-prop-types": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
@@ -14553,18 +14569,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/append-transform": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-2.0.0.tgz",
-      "integrity": "sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==",
-      "dev": true,
-      "dependencies": {
-        "default-require-extensions": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/applicationinsights": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/applicationinsights/-/applicationinsights-1.8.0.tgz",
@@ -14584,12 +14588,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/archy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==",
-      "dev": true
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -15667,15 +15665,6 @@
         "ieee754": "^1.1.4"
       }
     },
-    "node_modules/buffer-crc32": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -15714,57 +15703,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/caching-transform": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz",
-      "integrity": "sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==",
-      "dev": true,
-      "dependencies": {
-        "hasha": "^5.0.0",
-        "make-dir": "^3.0.0",
-        "package-hash": "^4.0.0",
-        "write-file-atomic": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/caching-transform/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/caching-transform/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/caching-transform/node_modules/write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "dev": true,
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -16210,15 +16148,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/clean-webpack-plugin": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
@@ -17285,19 +17214,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
-    "node_modules/cwd": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
-      "integrity": "sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==",
-      "dev": true,
-      "dependencies": {
-        "find-pkg": "^0.1.2",
-        "fs-exists-sync": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/d3": {
       "version": "7.8.5",
       "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
@@ -18083,12 +17999,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dedent": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
-      "dev": true
-    },
     "node_modules/deep-diff": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
@@ -18191,21 +18101,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/default-require-extensions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.1.tgz",
-      "integrity": "sha512-eXTJmRbm2TIt9MgWTsOH1wEuhew6XGZcMeGKCtLedIg/NCsg1iBePXkceTdK4Fii7pzmN9tGsZhKzZ4h7O/fxw==",
-      "dev": true,
-      "dependencies": {
-        "strip-bom": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -19167,12 +19062,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es6-error": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
-      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
-      "dev": true
-    },
     "node_modules/es6-templates": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
@@ -20079,15 +19968,6 @@
         "node": ">= 10.14.2"
       }
     },
-    "node_modules/expect-playwright": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/expect-playwright/-/expect-playwright-0.3.3.tgz",
-      "integrity": "sha512-uoeyx2D5LawJdziMdweOp6cnZzFOOPT9VvPG6gOh6YC7N9pU0k2KpVlRiz/Vc/fFBiGUNNeJq2Aq+9GJ65Nfrw==",
-      "dev": true,
-      "peerDependencies": {
-        "playwright-core": "^1.9.1"
-      }
-    },
     "node_modules/expect/node_modules/@jest/types": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
@@ -20350,26 +20230,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/extract-zip": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
-      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "get-stream": "^5.1.0",
-        "yauzl": "^2.10.0"
-      },
-      "bin": {
-        "extract-zip": "cli.js"
-      },
-      "engines": {
-        "node": ">= 10.17.0"
-      },
-      "optionalDependencies": {
-        "@types/yauzl": "^2.9.1"
-      }
-    },
     "node_modules/extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -20558,15 +20418,6 @@
         "bser": "2.1.1"
       }
     },
-    "node_modules/fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
-      "dev": true,
-      "dependencies": {
-        "pend": "~1.2.0"
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -20685,124 +20536,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/find-file-up": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-0.1.3.tgz",
-      "integrity": "sha512-mBxmNbVyjg1LQIIpgO8hN+ybWBgDQK8qjht+EbrTCGmmPV/sc7RF1i9stPTD6bpvXZywBdrwRYxhSdJv867L6A==",
-      "dev": true,
-      "dependencies": {
-        "fs-exists-sync": "^0.1.0",
-        "resolve-dir": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/find-pkg": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-0.1.2.tgz",
-      "integrity": "sha512-0rnQWcFwZr7eO0513HahrWafsc3CTFioEB7DRiEYCUM/70QXSY8f3mCST17HXLcPvEhzH/Ty/Bxd72ZZsr/yvw==",
-      "dev": true,
-      "dependencies": {
-        "find-file-up": "^0.1.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/find-process": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/find-process/-/find-process-1.4.7.tgz",
-      "integrity": "sha512-/U4CYp1214Xrp3u3Fqr9yNynUrr5Le4y0SsJh2lMDDSbpwYSz3M2SMWQC+wqcx79cN8PQtHQIL8KnuY9M66fdg==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "commander": "^5.1.0",
-        "debug": "^4.1.1"
-      },
-      "bin": {
-        "find-process": "bin/find-process.js"
-      }
-    },
-    "node_modules/find-process/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/find-process/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/find-process/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/find-process/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/find-process/node_modules/commander": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/find-process/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-process/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -20968,19 +20701,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-      "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -21284,41 +21004,12 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fromentries": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz",
-      "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
       "optional": true
     },
-    "node_modules/fs-exists-sync": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
-      "integrity": "sha512-cR/vflFyPZtrN6b38ZyWxpWdhlXrzZEBawlpBQMq7033xVY7/kg0GDMBK5jg8lDYQckdJ5x/YC88lM3C7VMsLg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/fs-extra": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.0.tgz",
@@ -21967,31 +21658,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/hasha": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
-      "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
-      "dev": true,
-      "dependencies": {
-        "is-stream": "^2.0.0",
-        "type-fest": "^0.8.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/hasha/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/hasher": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/hasher/-/hasher-1.2.0.tgz",
@@ -22106,18 +21772,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/homedir-polyfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-      "dev": true,
-      "dependencies": {
-        "parse-passwd": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -23701,18 +23355,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/istanbul-lib-hook": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-3.0.0.tgz",
-      "integrity": "sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==",
-      "dev": true,
-      "dependencies": {
-        "append-transform": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/istanbul-lib-instrument": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz",
@@ -23738,44 +23380,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/istanbul-lib-processinfo": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-2.0.3.tgz",
-      "integrity": "sha512-NkwHbo3E00oybX6NGJi6ar0B29vxyvNwoC7eJ4G4Yq28UfY758Hgn/heV8VRFhevPED4LXfFz0DQ8z/0kw9zMg==",
-      "dev": true,
-      "dependencies": {
-        "archy": "^1.0.0",
-        "cross-spawn": "^7.0.3",
-        "istanbul-lib-coverage": "^3.2.0",
-        "p-map": "^3.0.0",
-        "rimraf": "^3.0.0",
-        "uuid": "^8.3.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-processinfo/node_modules/istanbul-lib-coverage": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-processinfo/node_modules/p-map": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
-      "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
-      "dev": true,
-      "dependencies": {
-        "aggregate-error": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -24070,217 +23674,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jest-circus": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-26.6.3.tgz",
-      "integrity": "sha512-ACrpWZGcQMpbv13XbzRzpytEJlilP/Su0JtNCi5r/xLpOUhnaIJr8leYYpLEMgPFURZISEHrnnpmB54Q/UziPw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/babel__traverse": "^7.0.4",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "dedent": "^0.7.0",
-        "expect": "^26.6.2",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2",
-        "stack-utils": "^2.0.2",
-        "throat": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-circus/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-circus/node_modules/@types/istanbul-reports": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
-      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "node_modules/jest-circus/node_modules/@types/yargs": {
-      "version": "15.0.19",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz",
-      "integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==",
-      "dev": true,
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/jest-circus/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-circus/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-circus/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-circus/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/jest-circus/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/jest-circus/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-circus/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-circus/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/jest-circus/node_modules/jest-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
-      "integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "is-ci": "^2.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-circus/node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/jest-circus/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-circus/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/jest-cli": {
       "version": "26.6.3",
       "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
@@ -26622,38 +26015,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jest-playwright-preset": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/jest-playwright-preset/-/jest-playwright-preset-1.5.1.tgz",
-      "integrity": "sha512-zsFAe61V72vSLkd1fCcf7YbHmbdAB82SLBdUuCUF43aODIojshQEDF88KdWL9P+4JQ+DvEABT+6sFX4sY0rR2w==",
-      "dev": true,
-      "dependencies": {
-        "expect-playwright": "^0.3.3",
-        "jest-circus": "^26.6.3",
-        "jest-environment-node": "^26.6.2",
-        "jest-process-manager": "^0.2.9",
-        "jest-runner": "^26.6.3",
-        "nyc": "^15.1.0",
-        "playwright-core": ">=1.2.0",
-        "rimraf": "^3.0.2",
-        "uuid": "^8.3.2"
-      }
-    },
-    "node_modules/jest-playwright-preset/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/jest-pnp-resolver": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
@@ -26670,113 +26031,6 @@
         }
       }
     },
-    "node_modules/jest-process-manager": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/jest-process-manager/-/jest-process-manager-0.2.9.tgz",
-      "integrity": "sha512-IKVdOSz1NLwKg9HTeyEDn63waMvKK6wcS+tCarGquNIktlXt4zAW2cfJ9vAA/xBcidWYKOPXHvy1l1N8qfw3Ww==",
-      "dev": true,
-      "dependencies": {
-        "@types/wait-on": "^5.2.0",
-        "chalk": "^4.1.0",
-        "cwd": "^0.10.0",
-        "exit": "^0.1.2",
-        "find-process": "^1.4.4",
-        "prompts": "^2.4.0",
-        "signal-exit": "^3.0.3",
-        "spawnd": "^4.4.0",
-        "tree-kill": "^1.2.2",
-        "wait-on": "^5.2.1"
-      }
-    },
-    "node_modules/jest-process-manager/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-process-manager/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-process-manager/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/jest-process-manager/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/jest-process-manager/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-process-manager/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-process-manager/node_modules/wait-on": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-5.3.0.tgz",
-      "integrity": "sha512-DwrHrnTK+/0QFaB9a8Ol5Lna3k7WvUR4jzSKmz0YaPBpuN2sACyiPVKVfj6ejnjcajAcvn3wlbTyMIn9AZouOg==",
-      "dev": true,
-      "dependencies": {
-        "axios": "^0.21.1",
-        "joi": "^17.3.0",
-        "lodash": "^4.17.21",
-        "minimist": "^1.2.5",
-        "rxjs": "^6.6.3"
-      },
-      "bin": {
-        "wait-on": "bin/wait-on"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
     "node_modules/jest-react-hooks-shallow": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/jest-react-hooks-shallow/-/jest-react-hooks-shallow-1.5.1.tgz",
@@ -28713,6 +27967,7 @@
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.11.0.tgz",
       "integrity": "sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@hapi/hoek": "^9.0.0",
         "@hapi/topo": "^5.0.0",
@@ -28721,12 +27976,6 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "node_modules/jpeg-js": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
-      "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==",
-      "dev": true
-    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -32465,18 +31714,6 @@
       "dev": true,
       "optional": true
     },
-    "node_modules/node-preload": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/node-preload/-/node-preload-0.2.1.tgz",
-      "integrity": "sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==",
-      "dev": true,
-      "dependencies": {
-        "process-on-spawn": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -32591,205 +31828,6 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
       "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
     },
-    "node_modules/nyc": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz",
-      "integrity": "sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==",
-      "dev": true,
-      "dependencies": {
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "caching-transform": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "decamelize": "^1.2.0",
-        "find-cache-dir": "^3.2.0",
-        "find-up": "^4.1.0",
-        "foreground-child": "^2.0.0",
-        "get-package-type": "^0.1.0",
-        "glob": "^7.1.6",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-hook": "^3.0.0",
-        "istanbul-lib-instrument": "^4.0.0",
-        "istanbul-lib-processinfo": "^2.0.2",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.0.2",
-        "make-dir": "^3.0.0",
-        "node-preload": "^0.2.1",
-        "p-map": "^3.0.0",
-        "process-on-spawn": "^1.0.0",
-        "resolve-from": "^5.0.0",
-        "rimraf": "^3.0.0",
-        "signal-exit": "^3.0.2",
-        "spawn-wrap": "^2.0.0",
-        "test-exclude": "^6.0.0",
-        "yargs": "^15.0.2"
-      },
-      "bin": {
-        "nyc": "bin/nyc.js"
-      },
-      "engines": {
-        "node": ">=8.9"
-      }
-    },
-    "node_modules/nyc/node_modules/find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dev": true,
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
-    "node_modules/nyc/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/istanbul-lib-coverage": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/istanbul-lib-instrument": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
-      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.7.5",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.0.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/nyc/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/p-map": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
-      "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
-      "dev": true,
-      "dependencies": {
-        "aggregate-error": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nyc/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/nyc/node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "dev": true,
-      "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -33198,15 +32236,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/os-name": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
@@ -33308,21 +32337,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/package-hash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-4.0.0.tgz",
-      "integrity": "sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.15",
-        "hasha": "^5.0.0",
-        "lodash.flattendeep": "^4.4.0",
-        "release-zalgo": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/param-case": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
@@ -33374,15 +32388,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
@@ -33718,12 +32723,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/pend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-      "dev": true
-    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -33803,39 +32802,10 @@
         "node": ">=8"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.13.0.tgz",
-      "integrity": "sha512-GA5OyEeKx1v/pRcANmYncCT67Y7Y4N5zLRU5E690dn/Id10sooR5hQZmCDYsjXlutZb/1q0R3sITALnvhEjCjg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "commander": "^6.1.0",
-        "debug": "^4.1.1",
-        "extract-zip": "^2.0.1",
-        "https-proxy-agent": "^5.0.0",
-        "jpeg-js": "^0.4.2",
-        "mime": "^2.4.6",
-        "pngjs": "^5.0.0",
-        "progress": "^2.0.3",
-        "proper-lockfile": "^4.1.1",
-        "proxy-from-env": "^1.1.0",
-        "rimraf": "^3.0.2",
-        "stack-utils": "^2.0.3",
-        "ws": "^7.4.6",
-        "yazl": "^2.5.1"
-      },
-      "bin": {
-        "playwright": "lib/cli/cli.js"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/playwright-core": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz",
-      "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==",
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz",
+      "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -33844,42 +32814,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/playwright/node_modules/commander": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/playwright/node_modules/mime": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-      "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/playwright/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/plotly.js-cartesian-dist-min": {
       "version": "1.52.3",
       "resolved": "https://registry.npmjs.org/plotly.js-cartesian-dist-min/-/plotly.js-cartesian-dist-min-1.52.3.tgz",
@@ -33895,15 +32829,6 @@
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
     },
-    "node_modules/pngjs": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
-      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/polygon-offset": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/polygon-offset/-/polygon-offset-0.3.1.tgz",
@@ -34315,27 +33240,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
-    "node_modules/process-on-spawn": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/process-on-spawn/-/process-on-spawn-1.0.0.tgz",
-      "integrity": "sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==",
-      "dev": true,
-      "dependencies": {
-        "fromentries": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -34384,26 +33288,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/proper-lockfile": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
-      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "retry": "^0.12.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "node_modules/proper-lockfile/node_modules/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/property-information": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
@@ -34438,12 +33322,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true
-    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -35806,18 +34684,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/release-zalgo": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz",
-      "integrity": "sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==",
-      "dev": true,
-      "dependencies": {
-        "es6-error": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/remark-parse": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
@@ -36153,80 +35019,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-dir": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
-      "integrity": "sha512-QxMPqI6le2u0dCLyiGzgy92kjkkL6zO0XyvHzjdTNH3zM6e5Hz3BwG6+aEyNgiQ5Xz6PwTwgQEj3U50dByPKIA==",
-      "dev": true,
-      "dependencies": {
-        "expand-tilde": "^1.2.2",
-        "global-modules": "^0.2.3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve-dir/node_modules/expand-tilde": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
-      "integrity": "sha512-rtmc+cjLZqnu9dSYosX9EWmSJhTwpACgJQTfj4hgg2JjOD/6SIQalZrt4a3aQeh++oNxkazcaxrhPUj6+g5G/Q==",
-      "dev": true,
-      "dependencies": {
-        "os-homedir": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve-dir/node_modules/global-modules": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
-      "integrity": "sha512-JeXuCbvYzYXcwE6acL9V2bAOeSIGl4dD+iwLY9iUx2VBJJ80R18HCn+JCwHM9Oegdfya3lEkGCdaRkSyc10hDA==",
-      "dev": true,
-      "dependencies": {
-        "global-prefix": "^0.1.4",
-        "is-windows": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve-dir/node_modules/global-prefix": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
-      "integrity": "sha512-gOPiyxcD9dJGCEArAhF4Hd0BAqvAe/JzERP7tYumE4yIkmIedPUVXcJFWbV3/p/ovIIvKjkrTk+f1UVkq7vvbw==",
-      "dev": true,
-      "dependencies": {
-        "homedir-polyfill": "^1.0.0",
-        "ini": "^1.3.4",
-        "is-windows": "^0.2.0",
-        "which": "^1.2.12"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve-dir/node_modules/is-windows": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
-      "integrity": "sha512-n67eJYmXbniZB7RF4I/FTjK1s6RPOCTxhYrVYLRaCt3lF0mpWZPKr3T2LSZAqyjQsxR2qMmGYXXzK0YWwcPM1Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve-dir/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -37397,59 +36189,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/spawn-wrap": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-2.0.0.tgz",
-      "integrity": "sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^2.0.0",
-        "is-windows": "^1.0.2",
-        "make-dir": "^3.0.0",
-        "rimraf": "^3.0.0",
-        "signal-exit": "^3.0.2",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/spawn-wrap/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/spawn-wrap/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/spawnd": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/spawnd/-/spawnd-4.4.0.tgz",
-      "integrity": "sha512-jLPOfB6QOEgMOQY15Z6+lwZEhH3F5ncXxIaZ7WHPIapwNNLyjrs61okj3VJ3K6tmP5TZ6cO0VAu9rEY4MD4YQg==",
-      "dev": true,
-      "dependencies": {
-        "exit": "^0.1.2",
-        "signal-exit": "^3.0.2",
-        "tree-kill": "^1.2.2",
-        "wait-port": "^0.2.7"
-      }
-    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -38589,15 +37328,6 @@
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
-    "node_modules/tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-      "dev": true,
-      "bin": {
-        "tree-kill": "cli.js"
-      }
-    },
     "node_modules/trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
@@ -39789,29 +38519,6 @@
         "node": ">=8.9.0"
       }
     },
-    "node_modules/wait-port": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/wait-port/-/wait-port-0.2.14.tgz",
-      "integrity": "sha512-kIzjWcr6ykl7WFbZd0TMae8xovwqcqbx6FM9l+7agOgUByhzdjfzZBPK2CPufldTOMxbUivss//Sh9MFawmPRQ==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.2",
-        "commander": "^3.0.2",
-        "debug": "^4.1.1"
-      },
-      "bin": {
-        "wait-port": "bin/wait-port.js"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wait-port/node_modules/commander": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
-      "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
-      "dev": true
-    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -40951,25 +39658,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
-      "dev": true,
-      "dependencies": {
-        "buffer-crc32": "~0.2.3",
-        "fd-slicer": "~1.1.0"
-      }
-    },
-    "node_modules/yazl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yazl/-/yazl-2.5.1.tgz",
-      "integrity": "sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==",
-      "dev": true,
-      "dependencies": {
-        "buffer-crc32": "~0.2.3"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index d27273af9..d29fdebd6 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,7 @@
     "@babel/preset-env": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
+    "@playwright/test": "1.44.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -161,7 +162,6 @@
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-react-hooks": "4.6.0",
-    "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
     "fs-extra": "7.0.0",
     "html-inline-css-webpack-plugin": "1.11.2",
@@ -170,7 +170,6 @@
     "html-webpack-plugin": "5.5.3",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
-    "jest-playwright-preset": "1.5.1",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
@@ -179,7 +178,6 @@
     "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "node-fetch": "2.6.7",
-    "playwright": "1.13.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..074e7e5f5
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,53 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: 'test',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 3 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'blob' : 'html',
+  timeout: 10 * 60 * 1000,
+  use: {
+    actionTimeout: 5 * 60 * 1000,
+    trace: 'off',
+    video: 'off',
+    screenshot: 'on',
+    testIdAttribute: 'data-test',
+    contextOptions: {
+      ignoreHTTPSErrors: true,
+    },
+  },
+
+  expect: {
+    timeout: 5 * 60 * 1000,
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run start',
+    url: 'https://127.0.0.1:1234/_ready',
+    timeout: 120 * 1000,
+    ignoreHTTPSErrors: true,
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx b/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
index 80a682dda..854818138 100644
--- a/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
@@ -166,6 +166,7 @@ export class LegacyTreeNodeComponent extends React.Component<
 
     return (
       <div
+        data-test={`Tree/TreeNode:${node.label}`}
         className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""}`}
         onClick={(event: React.MouseEvent<HTMLDivElement>) => this.onNodeClick(event, node)}
         onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onNodeKeyPress(event, node)}
@@ -174,9 +175,9 @@ export class LegacyTreeNodeComponent extends React.Component<
       >
         <div
           className={`treeNodeHeader ${this.state.isMenuShowing ? "showingMenu" : ""}`}
+          data-test={`Tree/TreeNode/Header:${node.label}`}
           style={headerStyle}
           tabIndex={node.children ? -1 : 0}
-          data-test={node.label}
         >
           {this.renderCollapseExpandIcon(node)}
           {node.iconSrc && <img className="nodeIcon" src={node.iconSrc} alt="" />}
@@ -264,7 +265,7 @@ export class LegacyTreeNodeComponent extends React.Component<
             onMenuDismissed: (contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
             contextualMenuItemAs: (props: IContextualMenuItemProps) => (
               <div
-                data-test={`treeComponentMenuItemContainer`}
+                data-test={`Tree/TreeNode/MenuItem:${props.item.text}`}
                 className="treeComponentMenuItemContainer"
                 onContextMenu={(e) => e.target.dispatchEvent(LegacyTreeNodeComponent.createClickEvent())}
               >
diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
index 354046222..fb60aab2e 100644
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -147,6 +147,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
 
   const treeItem = (
     <TreeItem
+      data-test={`TreeNodeContainer:${treeNodeId}`}
       value={treeNodeId}
       itemType={isBranch ? "branch" : "leaf"}
       style={{ height: "100%" }}
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
index afa484490..ef0420f81 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
@@ -36,13 +36,14 @@ exports[`LegacyTreeComponent renders a simple tree 1`] = `
 exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
 <div
   className=" main2 nodeItem "
+  data-test="Tree/TreeNode:label"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="treeitem"
 >
   <div
     className="treeNodeHeader "
-    data-test="label"
+    data-test="Tree/TreeNode/Header:label"
     style={
       Object {
         "paddingLeft": 9,
@@ -138,6 +139,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
 exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
 <div
   className="nodeClassname main12 nodeItem "
+  data-test="Tree/TreeNode:label"
   id="id"
   onClick={[Function]}
   onKeyPress={[Function]}
@@ -145,7 +147,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
 >
   <div
     className="treeNodeHeader "
-    data-test="label"
+    data-test="Tree/TreeNode/Header:label"
     style={
       Object {
         "paddingLeft": 23,
@@ -290,13 +292,14 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
 exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
 <div
   className=" main2 nodeItem "
+  data-test="Tree/TreeNode:label"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="treeitem"
 >
   <div
     className="treeNodeHeader "
-    data-test="label"
+    data-test="Tree/TreeNode/Header:label"
     style={
       Object {
         "paddingLeft": 9,
@@ -363,6 +366,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
 exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
 <div
   className="nodeClassname main12 nodeItem "
+  data-test="Tree/TreeNode:label"
   id="id"
   onClick={[Function]}
   onKeyPress={[Function]}
@@ -370,7 +374,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
 >
   <div
     className="treeNodeHeader "
-    data-test="label"
+    data-test="Tree/TreeNode/Header:label"
     style={
       Object {
         "paddingLeft": 23,
@@ -534,13 +538,14 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
 exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
 <div
   className=" main2 nodeItem "
+  data-test="Tree/TreeNode:label"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="treeitem"
 >
   <div
     className="treeNodeHeader "
-    data-test="label"
+    data-test="Tree/TreeNode/Header:label"
     style={
       Object {
         "paddingLeft": 9,
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
index a20da1f66..bb5528418 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`TreeNodeComponent does not render children if the node is loading 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
   style={
@@ -114,6 +115,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
   treeNodeId="root"
 >
   <TreeItem
+    data-test="TreeNodeContainer:root"
     itemType="branch"
     onOpenChange={[Function]}
     style={
@@ -129,6 +131,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
       aria-selected="false"
       className="fui-TreeItem r1hiwysc"
       data-fui-tree-item-value="root"
+      data-test="TreeNodeContainer:root"
       onChange={[Function]}
       onClick={[Function]}
       onKeyDown={[Function]}
@@ -228,6 +231,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 aria-selected="false"
                 class="fui-TreeItem r1hiwysc"
                 data-fui-tree-item-value="root"
+                data-test="TreeNodeContainer:root"
                 role="treeitem"
                 style="height: 100%;"
                 tabindex="-1"
@@ -282,6 +286,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     aria-selected="false"
                     class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                     data-fui-tree-item-value="root/child1Label"
+                    data-test="TreeNodeContainer:root/child1Label"
                     role="treeitem"
                     style="height: 100%;"
                     tabindex="0"
@@ -333,6 +338,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     aria-selected="false"
                     class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                     data-fui-tree-item-value="root/child2LoadingLabel"
+                    data-test="TreeNodeContainer:root/child2LoadingLabel"
                     role="treeitem"
                     style="height: 100%;"
                     tabindex="-1"
@@ -383,6 +389,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     aria-selected="false"
                     class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                     data-fui-tree-item-value="root/child3ExpandingLabel"
+                    data-test="TreeNodeContainer:root/child3ExpandingLabel"
                     role="treeitem"
                     style="height: 100%;"
                     tabindex="-1"
@@ -637,6 +644,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   treeNodeId="root/child1Label"
                 >
                   <TreeItem
+                    data-test="TreeNodeContainer:root/child1Label"
                     itemType="branch"
                     onOpenChange={[Function]}
                     style={
@@ -652,6 +660,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       aria-selected="false"
                       className="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                       data-fui-tree-item-value="root/child1Label"
+                      data-test="TreeNodeContainer:root/child1Label"
                       onChange={[Function]}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -751,6 +760,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 aria-selected="false"
                                 class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                                 data-fui-tree-item-value="root/child1Label"
+                                data-test="TreeNodeContainer:root/child1Label"
                                 role="treeitem"
                                 style="height: 100%;"
                                 tabindex="0"
@@ -932,6 +942,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   treeNodeId="root/child2LoadingLabel"
                 >
                   <TreeItem
+                    data-test="TreeNodeContainer:root/child2LoadingLabel"
                     itemType="branch"
                     onOpenChange={[Function]}
                     style={
@@ -947,6 +958,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       aria-selected="false"
                       className="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                       data-fui-tree-item-value="root/child2LoadingLabel"
+                      data-test="TreeNodeContainer:root/child2LoadingLabel"
                       onChange={[Function]}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1046,6 +1058,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 aria-selected="false"
                                 class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                                 data-fui-tree-item-value="root/child2LoadingLabel"
+                                data-test="TreeNodeContainer:root/child2LoadingLabel"
                                 role="treeitem"
                                 style="height: 100%;"
                                 tabindex="-1"
@@ -1212,6 +1225,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   treeNodeId="root/child3ExpandingLabel"
                 >
                   <TreeItem
+                    data-test="TreeNodeContainer:root/child3ExpandingLabel"
                     itemType="leaf"
                     onOpenChange={[Function]}
                     style={
@@ -1226,6 +1240,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       aria-selected="false"
                       className="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                       data-fui-tree-item-value="root/child3ExpandingLabel"
+                      data-test="TreeNodeContainer:root/child3ExpandingLabel"
                       onChange={[Function]}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1332,6 +1347,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 aria-selected="false"
                                 class="fui-TreeItem r1hiwysc ___jer8zr0_6no3ah0 f10bgyvd"
                                 data-fui-tree-item-value="root/child3ExpandingLabel"
+                                data-test="TreeNodeContainer:root/child3ExpandingLabel"
                                 role="treeitem"
                                 style="height: 100%;"
                                 tabindex="-1"
@@ -1455,6 +1471,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
 
 exports[`TreeNodeComponent renders a loading spinner if the node is loading: loaded 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
   style={
@@ -1493,6 +1510,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 
 exports[`TreeNodeComponent renders a loading spinner if the node is loading: loading 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
   style={
@@ -1582,6 +1600,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
     disableButtonEnhancement={true}
   >
     <TreeItem
+      data-test="TreeNodeContainer:root"
       itemType="leaf"
       onOpenChange={[Function]}
       style={
@@ -1675,6 +1694,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
 
 exports[`TreeNodeComponent renders a single node 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
   style={
@@ -1713,6 +1733,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
 
 exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
   style={
@@ -1751,6 +1772,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
 
 exports[`TreeNodeComponent renders selected parent node as selected if no descendant nodes are selected 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
   style={
@@ -1839,6 +1861,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
 
 exports[`TreeNodeComponent renders selected parent node as unselected if any descendant node is selected 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
   style={
@@ -1928,6 +1951,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
 
 exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
   style={
diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
index 0c9de46ce..7378be453 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -72,11 +72,11 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           : undefined,
         key: `${btn.commandButtonLabel}${index}`,
         text: label,
-        "data-test": label,
         title: btn.tooltipText,
         name: label,
         disabled: btn.disabled,
         ariaLabel: btn.ariaLabel,
+        "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
             backgroundColor: backgroundColor,
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
index 8add09097..66d7da606 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
@@ -379,6 +379,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="OK"
@@ -386,6 +387,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           >
             <PrimaryButton
               ariaLabel="OK"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="OK"
@@ -666,6 +668,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -948,6 +951,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               >
                 <DefaultButton
                   ariaLabel="OK"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1231,6 +1235,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2105,6 +2110,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       aria-label="OK"
                       className="ms-Button ms-Button--primary root-122"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
index 8e0f6c2a1..af291bba6 100644
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -9,6 +9,7 @@ import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
+import { getDatabaseName } from "Utils/APITypeUtils";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTabs } from "hooks/useTabs";
@@ -37,11 +38,11 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
       setFormError(
-        `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`,
+        `Input ${getDatabaseName()} name "${databaseInput}" does not match the selected ${getDatabaseName()} "${selectedDatabase.id()}"`,
       );
-      logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
+      logConsoleError(`Error while deleting ${getDatabaseName()} ${selectedDatabase && selectedDatabase.id()}`);
       logConsoleError(
-        `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`,
+        `Input ${getDatabaseName()} name "${databaseInput}" does not match the selected ${getDatabaseName()} "${selectedDatabase.id()}"`,
       );
       return;
     }
@@ -123,17 +124,18 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     message:
       "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
   };
-  const confirmDatabase = "Confirm by typing the database id";
-  const reasonInfo = "Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?";
+  const confirmDatabase = `Confirm by typing the ${getDatabaseName()} id`;
+  const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${getDatabaseName()}?`;
   return (
     <RightPaneForm {...props}>
       {!formError && <PanelInfoErrorComponent {...errorProps} />}
       <div className="panelMainContent">
         <div className="confirmDeleteInput">
           <span className="mandatoryStar">* </span>
-          <Text variant="small">Confirm by typing the database id</Text>
+          <Text variant="small">Confirm by typing the {getDatabaseName()} id</Text>
           <TextField
             id="confirmDatabaseId"
+            data-test="Input:confirmDatabaseId"
             autoFocus
             styles={{ fieldGroup: { width: 300 } }}
             onChange={(event, newInput?: string) => {
@@ -149,7 +151,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               Help us improve Azure Cosmos DB!
             </Text>
             <Text variant="small" block>
-              What is the reason why you are deleting this database?
+              What is the reason why you are deleting this {getDatabaseName()}?
             </Text>
             <TextField
               id="deleteDatabaseFeedbackInput"
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
index 6c5cb5dfb..8e8b4f744 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
@@ -5312,6 +5312,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Execute"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Execute"
@@ -5319,6 +5320,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Execute"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Execute"
@@ -5599,6 +5601,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Execute"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -5881,6 +5884,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Execute"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -6164,6 +6168,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Execute"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -7038,6 +7043,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       aria-label="Execute"
                       className="ms-Button ms-Button--primary root-148"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/PanelFooterComponent.tsx b/src/Explorer/Panes/PanelFooterComponent.tsx
index 5da719318..53883a202 100644
--- a/src/Explorer/Panes/PanelFooterComponent.tsx
+++ b/src/Explorer/Panes/PanelFooterComponent.tsx
@@ -16,6 +16,7 @@ export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
     <PrimaryButton
       type="submit"
       id="sidePanelOkButton"
+      data-test="Panel/OkButton"
       text={buttonLabel}
       ariaLabel={buttonLabel}
       disabled={!!isButtonDisabled}
diff --git a/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap b/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
index 7691f6ed4..fcc8e3678 100644
--- a/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
+++ b/src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
       >
         <CustomizedPrimaryButton
           ariaLabel="Load"
+          data-test="Panel/OkButton"
           disabled={false}
           id="sidePanelOkButton"
           text="Load"
@@ -28,6 +29,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
         >
           <PrimaryButton
             ariaLabel="Load"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Load"
@@ -308,6 +310,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
           >
             <CustomizedDefaultButton
               ariaLabel="Load"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
@@ -590,6 +593,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
             >
               <DefaultButton
                 ariaLabel="Load"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -873,6 +877,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                 <BaseButton
                   ariaLabel="Load"
                   baseClassName="ms-Button"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1747,6 +1752,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
                     aria-label="Load"
                     className="ms-Button ms-Button--primary root-109"
                     data-is-focusable={true}
+                    data-test="Panel/OkButton"
                     id="sidePanelOkButton"
                     onClick={[Function]}
                     onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
index e8553fa4e..4e569f93e 100644
--- a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
+++ b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
@@ -688,6 +688,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Create"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Create"
@@ -695,6 +696,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Create"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Create"
@@ -975,6 +977,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Create"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -1257,6 +1260,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Create"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1540,6 +1544,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   <BaseButton
                     ariaLabel="Create"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2414,6 +2419,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       aria-label="Create"
                       className="ms-Button ms-Button--primary root-122"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
index 4a913958d..c1e269786 100644
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
@@ -1258,6 +1258,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="OK"
@@ -1265,6 +1266,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="OK"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="OK"
@@ -1545,6 +1547,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -1827,6 +1830,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -2110,6 +2114,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2984,6 +2989,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                       aria-label="OK"
                       className="ms-Button ms-Button--primary root-125"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
index f2ee599f7..100c5a7ae 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
@@ -369,6 +369,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Add Entity"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Add Entity"
@@ -376,6 +377,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Add Entity"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Add Entity"
@@ -656,6 +658,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Add Entity"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -938,6 +941,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Add Entity"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1221,6 +1225,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Add Entity"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2095,6 +2100,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                       aria-label="Add Entity"
                       className="ms-Button ms-Button--primary root-113"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
index 648f797f7..ffab606a2 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
@@ -375,6 +375,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="Update"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="Update"
@@ -382,6 +383,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
           >
             <PrimaryButton
               ariaLabel="Update"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="Update"
@@ -662,6 +664,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Update"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -944,6 +947,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Update"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1227,6 +1231,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Update"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2101,6 +2106,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                       aria-label="Update"
                       className="ms-Button ms-Button--primary root-113"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
index 6e32d62c0..c6a239ebf 100644
--- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
@@ -361,12 +361,15 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             <span
               className="css-113"
             >
-              Confirm by typing the database id
+              Confirm by typing the 
+              Database
+               id
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Confirm by typing the database id"
+            ariaLabel="Confirm by typing the Database id"
             autoFocus={true}
+            data-test="Input:confirmDatabaseId"
             id="confirmDatabaseId"
             onChange={[Function]}
             required={true}
@@ -379,8 +382,9 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Confirm by typing the database id"
+              ariaLabel="Confirm by typing the Database id"
               autoFocus={true}
+              data-test="Input:confirmDatabaseId"
               deferredValidationTime={200}
               id="confirmDatabaseId"
               onChange={[Function]}
@@ -673,9 +677,10 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <input
                       aria-invalid={false}
-                      aria-label="Confirm by typing the database id"
+                      aria-label="Confirm by typing the Database id"
                       autoFocus={true}
                       className="ms-TextField-field field-117"
+                      data-test="Input:confirmDatabaseId"
                       id="confirmDatabaseId"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -711,11 +716,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             <span
               className="css-126"
             >
-              What is the reason why you are deleting this database?
+              What is the reason why you are deleting this 
+              Database
+              ?
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
+            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this Database?"
             id="deleteDatabaseFeedbackInput"
             multiline={true}
             onChange={[Function]}
@@ -729,7 +736,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
+              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this Database?"
               deferredValidationTime={200}
               id="deleteDatabaseFeedbackInput"
               multiline={true}
@@ -1023,7 +1030,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <textarea
                       aria-invalid={false}
-                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
+                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this Database?"
                       className="ms-TextField-field field-128"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}
@@ -1049,6 +1056,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
+            data-test="Panel/OkButton"
             disabled={false}
             id="sidePanelOkButton"
             text="OK"
@@ -1056,6 +1064,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
           >
             <PrimaryButton
               ariaLabel="OK"
+              data-test="Panel/OkButton"
               disabled={false}
               id="sidePanelOkButton"
               text="OK"
@@ -1336,6 +1345,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
+                data-test="Panel/OkButton"
                 disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
@@ -1618,6 +1628,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
+                  data-test="Panel/OkButton"
                   disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
@@ -1901,6 +1912,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
+                    data-test="Panel/OkButton"
                     disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
@@ -2775,6 +2787,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                       aria-label="OK"
                       className="ms-Button ms-Button--primary root-130"
                       data-is-focusable={true}
+                      data-test="Panel/OkButton"
                       id="sidePanelOkButton"
                       onClick={[Function]}
                       onKeyDown={[Function]}
diff --git a/src/HostedExplorer.tsx b/src/HostedExplorer.tsx
index 6f9c62866..4dc26fb4e 100644
--- a/src/HostedExplorer.tsx
+++ b/src/HostedExplorer.tsx
@@ -128,6 +128,7 @@ const App: React.FunctionComponent = () => {
           // Setting key is needed so React will re-render this element on any account change
           key={databaseAccount?.id || encryptedTokenMetadata?.accountName || authType}
           ref={ref}
+          data-test="DataExplorerFrame"
           id="explorerMenu"
           name="explorer"
           className="iframe"
diff --git a/src/Main.tsx b/src/Main.tsx
index f79ee29f1..7217d7c96 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -93,7 +93,7 @@ const App: React.FunctionComponent = () => {
 
   return (
     <KeyboardShortcutRoot>
-      <div className="flexContainer" aria-hidden="false">
+      <div className="flexContainer" aria-hidden="false" data-test="DataExplorerRoot">
         <div id="divExplorer" className="flexContainer hideOverflows">
           <div id="freeTierTeachingBubble"> </div>
           {/* Main Command Bar - Start */}
diff --git a/src/Platform/Hosted/Components/ConnectExplorer.tsx b/src/Platform/Hosted/Components/ConnectExplorer.tsx
index 749f248ba..513247a6c 100644
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -133,7 +133,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
             <div id="connectWithAad">
               <input className="filterbtnstyle" type="button" value="Sign In" onClick={login} />
               {enableConnectionStringLogin && (
-                <p className="switchConnectTypeText" onClick={showForm}>
+                <p className="switchConnectTypeText" data-test="Link:SwitchConnectionType" onClick={showForm}>
                   Connect to your account with connection string
                 </p>
               )}
diff --git a/src/SelfServe/SelfServeComponent.tsx b/src/SelfServe/SelfServeComponent.tsx
index ab0cf65b8..207f7ffc3 100644
--- a/src/SelfServe/SelfServeComponent.tsx
+++ b/src/SelfServe/SelfServeComponent.tsx
@@ -463,7 +463,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
       );
     }
     return (
-      <div style={{ overflowX: "auto" }}>
+      <div style={{ overflowX: "auto" }} data-test="DataExplorerRoot">
         <Stack tokens={containerStackTokens}>
           <Stack.Item>
             <CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
diff --git a/src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap b/src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap
index 6ea512984..4a993ce65 100644
--- a/src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap
+++ b/src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`SelfServeComponent message bar and spinner snapshots 1`] = `
 <div
+  data-test="DataExplorerRoot"
   style={
     Object {
       "overflowX": "auto",
@@ -338,6 +339,7 @@ exports[`SelfServeComponent message bar and spinner snapshots 1`] = `
 
 exports[`SelfServeComponent message bar and spinner snapshots 2`] = `
 <div
+  data-test="DataExplorerRoot"
   style={
     Object {
       "overflowX": "auto",
@@ -732,6 +734,7 @@ exports[`SelfServeComponent message bar and spinner snapshots 2`] = `
 
 exports[`SelfServeComponent message bar and spinner snapshots 3`] = `
 <div
+  data-test="DataExplorerRoot"
   style={
     Object {
       "overflowX": "auto",
@@ -832,6 +835,7 @@ exports[`SelfServeComponent message bar and spinner snapshots 4`] = `
 
 exports[`SelfServeComponent should render and honor save, discard, refresh actions 1`] = `
 <div
+  data-test="DataExplorerRoot"
   style={
     Object {
       "overflowX": "auto",
diff --git a/test/README.md b/test/README.md
new file mode 100644
index 000000000..9a3e3e622
--- /dev/null
+++ b/test/README.md
@@ -0,0 +1,143 @@
+# End-to-End Test Suite
+
+This directory contains end-to-end tests for Cosmos Data Explorer.
+These tests **require** that you either deploy, or have access to, several Cosmos test Accounts.
+The tests run in [Playwright](https://playwright.dev/), using the official Playwright test framework.
+
+## Required Resources
+
+To run all the tests, you need:
+
+* A CosmosDB Account using the Cassandra API
+* A CosmosDB Account using the Gremlin API
+* A CosmosDB Account using the MongoDB API, API version 6.0
+* A CosmosDB Account using the MongoDB API, API version 3.2
+* A CosmosDB Account using the NoSQL API
+* A CosmosDB Account using the Tables API
+
+Each Account must have at least 1000 RU/s of throughput available for new databases/collections/etc.
+The tests create new databases/keyspaces/etc. for each test, and delete them when the test is done.
+So it should be safe to use these accounts for other testing purposes, as long as you make sure to have enough throughput available when running the tests.
+
+You can specify the resource to use using the Environment Variables configuration below.
+Or, you can deploy resources specifically for testing using the `deploy` script.
+
+### Using the deploy script
+
+> [!NOTE]
+> This script currently only works on Windows.
+
+The `resources` directory contains a `deploy.ps1` script that will deploy the required resources for testing.
+They use a Bicep template to deploy the resources.
+All you need to provide is a resource group to deploy in to.
+
+To use this script, there are a few prerequisites that must be done at least once:
+
+1. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
+2. Connect to your Azure account using `Connect-AzAccount`.
+3. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
+
+```powershell
+.\test\resources\create-resource-group.ps1 -SubscriptionName "My Subscription" -Location "West US 3"
+```
+
+Then, whenever you want to create/update the resources, you can run the `deploy.ps1` script in the `resources` directory. As long as you're using the default naming convention (`[username]-e2e-testing`), you just need to specify the Subscription. For example:
+
+```powershell
+.\test\resources\deploy.ps1 -SubscriptionName "My Subscription"
+```
+
+You'll get a confirmation prompt before anything is deployed:
+
+```
+Found a resource group with the default name (ashleyst-e2e-testing). Using that resource group. If you want to use a different resource group, specify it as a parameter.
+Deploying test resource sets: tables cassandra gremlin mongo mongo32 sql
+  in West US 3
+  to resource group ashleyst-e2e-testing
+  in subscription ... (...)
+Do you want to continue? (y/n):
+```
+
+This prompt shows:
+
+* The resources that will be deployed, in this case, all of them. You can filter to deploy only a subset by specifying the `-ResourceTypes` parameter. For example `-ResourceTypes @("cassandra", "sql")`.
+* The location the resources will be deployed to, `West US 3` in this case.
+* The resource group that will be used, `ashleyst-e2e-testing` in this case.
+* The subscription that will be used.
+
+Once you confirm, the resources will be deployed using Azure PowerShell and the Bicep templates in the `resources` directory. The script will wait for all the deployments to complete before exiting.
+
+You can re-run this script at any time to update the resources, if the Bicep templates have changed.
+
+## Preparing the test environment
+
+Before running the tests, you need to configure your environment to specify the accounts to use for testing.
+The following environment variables are used:
+
+* `DE_TEST_RESOURCE_GROUP` - The resource group to use for testing. This should be the same resource group that the resources were deployed to.
+* `DE_TEST_SUBSCRIPTION_ID` - The subscription ID to use for testing. This should be the same subscription that the resources were deployed to.
+* `DE_TEST_ACCOUNT_PREFIX` - If you used the default naming scheme provided by the `deploy.ps1` script, this should be your Windows username (or whatever value you passed in for the `-ResourcePrefix` argument when deploying). This is used to find the accounts that were deployed.
+
+In the event you didn't use the `deploy.ps1` script, you can specify the accounts directly using the following environment variables:
+
+* `DE_TEST_ACCOUNT_NAME_CASSANDRA` - The name of the CosmosDB Account using the Cassandra API.
+* `DE_TEST_ACCOUNT_NAME_GREMLIN` - The name of the CosmosDB Account using the Gremlin API.
+* `DE_TEST_ACCOUNT_NAME_MONGO` - The name of the CosmosDB Account using the MongoDB API, API version 6.0.
+* `DE_TEST_ACCOUNT_NAME_MONGO32` - The name of the CosmosDB Account using the MongoDB API, API version 3.2.
+* `DE_TEST_ACCOUNT_NAME_SQL` - The name of the CosmosDB Account using the NoSQL API.
+* `DE_TEST_ACCOUNT_NAME_TABLES` - The name of the CosmosDB Account using the Tables API.
+
+If you used all the standard deployment scripts and naming scheme, you can set these environment variables using the following command:
+
+```powershell
+.\test\scripts\set-test-accounts.ps1
+```
+
+If Azure Powershell's current subscription is not the one you want to use for testing, you can set the subscription using the following command:
+
+```powershell
+.\test\scripts\set-test-subscription.ps1 -Subscription "My Subscription"
+```
+
+That script will confirm the resource group exists and then set the necessary environment variables:
+
+```
+The currently-selected subscription is ... (...)
+Do you want to use this subscription? (y/n): y
+
+Found a resource with the default resource prefix (ashleyst-e2e-). Configuring that prefix for E2E testing.
+Configuring for E2E Testing
+  Subscription: ... (...)
+  Resource Group: ashleyst-e2e-testing
+  Resource Prefix: ashleyst-e2e-
+    Found CosmosDB Account: ashleyst-e2e-cassandra
+    Found CosmosDB Account: ashleyst-e2e-gremlin
+    Found CosmosDB Account: ashleyst-e2e-mongo
+    Found CosmosDB Account: ashleyst-e2e-mongo32
+    Found CosmosDB Account: ashleyst-e2e-sql
+    Found CosmosDB Account: ashleyst-e2e-tables
+```
+
+## Running the tests
+
+To run all tests in a headless browser, run the following command from the root of the repo:
+
+```powershell
+npx playwright test
+```
+
+> [!NOTE]
+> You may be prompted to install the Playwright browsers the first time you run the tests.
+
+The tests will use your existing server if you have one running, or start a new server if you don't.
+
+When running individual tests, you may find it most useful to use the Playwright UI to run the tests.
+You can do this by running the following command:
+
+```powershell
+npx playwright test --ui
+```
+
+The UI allows you to select a specific test to run and to see the results of the test in the browser.
+
+See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.
\ No newline at end of file
diff --git a/test/cassandra/container.spec.ts b/test/cassandra/container.spec.ts
index c9c9a663d..74417e586 100644
--- a/test/cassandra/container.spec.ts
+++ b/test/cassandra/container.spec.ts
@@ -1,57 +1,39 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import {
-  AccountType,
-  generateUniqueName,
-  getPanelSelector,
-  getTestExplorerUrl,
-  getTreeMenuItemSelector,
-  getTreeNodeSelector,
-  openContextMenu,
-} from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(120000);
+import { expect, test } from "@playwright/test";
 
-test("Cassandra keyspace and table CRUD", async () => {
-  const keyspaceId = generateUniqueName("keyspace");
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
+
+test("Cassandra keyspace and table CRUD", async ({ page }) => {
+  const keyspaceId = generateDatabaseNameWithTimestamp();
   const tableId = generateUniqueName("table");
 
-  page.setDefaultTimeout(50000);
+  const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
 
-  const url = await getTestExplorerUrl(AccountType.Cassandra);
-  await page.goto(url);
-  await page.waitForSelector("iframe");
-  const explorer = await waitForExplorer();
+  await explorer.commandBarButton("New Table").click();
+  await explorer.whilePanelOpen("Add Table", async (panel, okButton) => {
+    await panel.getByPlaceholder("Type a new keyspace id").fill(keyspaceId);
+    await panel.getByPlaceholder("Enter table Id").fill(tableId);
+    await panel.getByLabel("Table max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  await explorer.click('[data-test="New Table"]');
+  const keyspaceNode = explorer.treeNode(`DATA/${keyspaceId}`);
+  await keyspaceNode.expand();
+  const tableNode = explorer.treeNode(`DATA/${keyspaceId}/${tableId}`);
 
-  await explorer.waitForSelector(getPanelSelector("Add Table"));
-  await explorer.click('[aria-label="Keyspace id"]');
-  await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);
-  await explorer.click('[aria-label="addCollection-table Id Create table"]');
-  await explorer.fill('[aria-label="addCollection-table Id Create table"]', tableId);
-  await explorer.fill('[aria-label="Table max RU/s"]', "1000");
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("Add Table"), { state: "detached" });
+  await tableNode.openContextMenu();
+  await tableNode.contextMenuItem("Delete Table").click();
+  await explorer.whilePanelOpen("Delete Table", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
+    await okButton.click();
+  });
+  await expect(tableNode.element).not.toBeAttached();
 
-  await explorer.click(getTreeNodeSelector(`DATA/${keyspaceId}`));
-  await openContextMenu(explorer, `DATA/${keyspaceId}/${tableId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${keyspaceId}/${tableId}`, "Delete Table"));
+  await keyspaceNode.openContextMenu();
+  await keyspaceNode.contextMenuItem("Delete Keyspace").click();
+  await explorer.whilePanelOpen("Delete Keyspace", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the Keyspace id" }).fill(keyspaceId);
+    await okButton.click();
+  });
 
-  await explorer.waitForSelector(getPanelSelector("Delete Table"));
-  await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
-  await explorer.click('[aria-label="OK"]');
-  await explorer.waitForSelector(getPanelSelector("Delete Table"), { state: "detached" });
-
-  await openContextMenu(explorer, `DATA/${keyspaceId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${keyspaceId}`, "Delete Keyspace"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Keyspace"));
-  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
-  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', keyspaceId);
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("Delete Keyspace"), { state: "detached" });
-
-  await expect(explorer).not.toHaveText(".dataResourceTree", keyspaceId);
-  await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
+  await expect(keyspaceNode.element).not.toBeAttached();
 });
diff --git a/test/fx.ts b/test/fx.ts
new file mode 100644
index 000000000..23044b01a
--- /dev/null
+++ b/test/fx.ts
@@ -0,0 +1,151 @@
+import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
+import { expect, Frame, Locator, Page } from "@playwright/test";
+import crypto from "crypto";
+
+export function generateUniqueName(baseName = "", length = 4): string {
+  return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
+}
+
+export function generateDatabaseNameWithTimestamp(baseName = "db", length = 1): string {
+  // We use '_' as the separator because it's supported across all the API types.
+  return `${baseName}${crypto.randomBytes(length).toString("hex")}_${Date.now()}`;
+}
+
+export async function getAzureCLICredentials(): Promise<AzureCliCredentials> {
+  return await AzureCliCredentials.create();
+}
+
+export async function getAzureCLICredentialsToken(): Promise<string> {
+  const credentials = await getAzureCLICredentials();
+  const token = (await credentials.getToken()).accessToken;
+  return token;
+}
+
+export enum TestAccount {
+  Tables = "Tables",
+  Cassandra = "Cassandra",
+  Gremlin = "Gremlin",
+  Mongo = "Mongo",
+  Mongo32 = "Mongo32",
+  SQL = "SQL",
+}
+
+export const defaultAccounts: Record<TestAccount, string> = {
+  [TestAccount.Tables]: "portal-tables-runner",
+  [TestAccount.Cassandra]: "portal-cassandra-runner",
+  [TestAccount.Gremlin]: "portal-gremlin-runner",
+  [TestAccount.Mongo]: "portal-mongo-runner",
+  [TestAccount.Mongo32]: "portal-mongo32-runner",
+  [TestAccount.SQL]: "portal-sql-runner-west-us",
+};
+
+export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "runners";
+export const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+
+function tryGetStandardName(accountType: TestAccount) {
+  if (process.env.DE_TEST_ACCOUNT_PREFIX) {
+    const actualPrefix = process.env.DE_TEST_ACCOUNT_PREFIX.endsWith("-")
+      ? process.env.DE_TEST_ACCOUNT_PREFIX
+      : `${process.env.DE_TEST_ACCOUNT_PREFIX}-`;
+    return `${actualPrefix}${accountType.toLocaleLowerCase()}`;
+  }
+}
+
+export function getAccountName(accountType: TestAccount) {
+  return (
+    process.env[`DE_TEST_ACCOUNT_NAME_${accountType.toLocaleUpperCase()}`] ??
+    tryGetStandardName(accountType) ??
+    defaultAccounts[accountType]
+  );
+}
+
+export async function getTestExplorerUrl(accountType: TestAccount, iframeSrc?: string): Promise<string> {
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
+  const accountName = getAccountName(accountType);
+  const baseUrl = `https://localhost:1234/testExplorer.html?accountName=${accountName}&resourceGroup=${resourceGroupName}&subscriptionId=${subscriptionId}&token=${token}`;
+  if (iframeSrc) {
+    return `${baseUrl}&iframeSrc=${iframeSrc}`;
+  }
+  return baseUrl;
+}
+
+/** Helper class that provides locator methods for TreeNode elements, on top of a Locator */
+class TreeNode {
+  constructor(
+    public element: Locator,
+    public frame: Frame,
+    public id: string,
+  ) {}
+
+  async openContextMenu(): Promise<void> {
+    await this.element.click({ button: "right" });
+  }
+
+  contextMenuItem(name: string): Locator {
+    return this.frame.getByTestId(`TreeNode/ContextMenuItem:${name}`);
+  }
+
+  async expand(): Promise<void> {
+    // Sometimes, the expand button doesn't load at all, because the node didn't have children when it was initially loaded.
+    // Still, clicking the node will trigger loading and expansion. So if the node isn't expanded, we click it.
+
+    // The "aria-expanded" attribute is applied to the TreeItem. But we have the TreeItemLayout selected because the TreeItem contains the child tree as well.
+    // So, we need to find the TreeItem that contains this TreeItemLayout.
+    const treeNodeContainer = this.frame.getByTestId(`TreeNodeContainer:${this.id}`);
+
+    if ((await treeNodeContainer.getAttribute("aria-expanded")) !== "true") {
+      // Click the node, to trigger loading and expansion
+      await this.element.click();
+    }
+    await expect(treeNodeContainer).toHaveAttribute("aria-expanded", "true");
+  }
+}
+
+/** Helper class that provides locator methods for DataExplorer components, on top of a Frame */
+export class DataExplorer {
+  constructor(public frame: Frame) {}
+
+  commandBarButton(label: string): Locator {
+    return this.frame.getByTestId(`CommandBar/Button:${label}`).and(this.frame.locator("css=button"));
+  }
+
+  panel(title: string): Locator {
+    return this.frame.getByTestId(`Panel:${title}`);
+  }
+
+  treeNode(id: string): TreeNode {
+    return new TreeNode(this.frame.getByTestId(`TreeNode:${id}`), this.frame, id);
+  }
+
+  async whilePanelOpen(title: string, action: (panel: Locator, okButton: Locator) => Promise<void>): Promise<void> {
+    const panel = this.panel(title);
+    await panel.waitFor();
+    const okButton = panel.getByTestId("Panel/OkButton");
+    await action(panel, okButton);
+    await panel.waitFor({ state: "detached" });
+  }
+
+  static async waitForExplorer(page: Page) {
+    const iframeElement = await page.getByTestId("DataExplorerFrame").elementHandle();
+    if (iframeElement === null) {
+      throw new Error("Explorer iframe not found");
+    }
+
+    const explorerFrame = await iframeElement.contentFrame();
+
+    if (explorerFrame === null) {
+      throw new Error("Explorer frame not found");
+    }
+
+    await explorerFrame?.getByTestId("DataExplorerRoot").waitFor();
+
+    return new DataExplorer(explorerFrame);
+  }
+
+  static async open(page: Page, testAccount: TestAccount, iframeSrc?: string): Promise<DataExplorer> {
+    const url = await getTestExplorerUrl(testAccount, iframeSrc);
+    await page.goto(url);
+    return DataExplorer.waitForExplorer(page);
+  }
+}
diff --git a/test/graph/container.spec.ts b/test/graph/container.spec.ts
deleted file mode 100644
index e50cc01d5..000000000
--- a/test/graph/container.spec.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import {
-  generateDatabaseNameWithTimestamp,
-  generateUniqueName,
-  getAzureCLICredentialsToken,
-  getPanelSelector,
-  getTreeMenuItemSelector,
-  getTreeNodeSelector,
-  openContextMenu,
-} from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(240000);
-
-test("Graph CRUD", async () => {
-  const databaseId = generateDatabaseNameWithTimestamp();
-  const containerId = generateUniqueName("container");
-
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
-  page.setDefaultTimeout(50000);
-
-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner&token=${token}`);
-  const explorer = await waitForExplorer();
-
-  // Create new database and graph
-  await explorer.click('[data-test="New Graph"]');
-
-  await explorer.waitForSelector(getPanelSelector("New Graph"));
-  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
-  await explorer.fill('[aria-label="Graph id, Example Graph1"]', containerId);
-  await explorer.fill('[aria-label="Partition key"]', "/pk");
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("New Graph"), { state: "detached" });
-
-  // Delete database and graph
-
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
-  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Graph"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Graph"));
-  await explorer.fill('text=* Confirm by typing the graph id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="OK"]');
-  await explorer.waitForSelector(getPanelSelector("Delete Graph"), { state: "detached" });
-
-  await openContextMenu(explorer, `DATA/${databaseId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Database"));
-  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
-  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
-
-  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
-  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
-});
diff --git a/test/gremlin/container.spec.ts b/test/gremlin/container.spec.ts
new file mode 100644
index 000000000..a2f58787c
--- /dev/null
+++ b/test/gremlin/container.spec.ts
@@ -0,0 +1,41 @@
+import { expect, test } from "@playwright/test";
+
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
+
+test("Gremlin graph CRUD", async ({ page }) => {
+  const databaseId = generateDatabaseNameWithTimestamp();
+  const graphId = generateUniqueName("graph");
+
+  const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
+
+  // Create new database and graph
+  await explorer.commandBarButton("New Graph").click();
+  await explorer.whilePanelOpen("New Graph", async (panel, okButton) => {
+    await panel.getByPlaceholder("Type a new database id").fill(databaseId);
+    await panel.getByRole("textbox", { name: "Graph id, Example Graph1" }).fill(graphId);
+    await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+    await panel.getByLabel("Database max RU/s").fill("1000");
+    await okButton.click();
+  });
+
+  const databaseNode = explorer.treeNode(`DATA/${databaseId}`);
+  await databaseNode.expand();
+  const graphNode = explorer.treeNode(`DATA/${databaseId}/${graphId}`);
+
+  await graphNode.openContextMenu();
+  await graphNode.contextMenuItem("Delete Graph").click();
+  await explorer.whilePanelOpen("Delete Graph", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the graph id" }).fill(graphId);
+    await okButton.click();
+  });
+  await expect(graphNode.element).not.toBeAttached();
+
+  await databaseNode.openContextMenu();
+  await databaseNode.contextMenuItem("Delete Database").click();
+  await explorer.whilePanelOpen("Delete Database", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
+    await okButton.click();
+  });
+
+  await expect(databaseNode.element).not.toBeAttached();
+});
diff --git a/test/mongo/container.spec.ts b/test/mongo/container.spec.ts
index ce39ce0a8..6677d7d01 100644
--- a/test/mongo/container.spec.ts
+++ b/test/mongo/container.spec.ts
@@ -1,72 +1,47 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import {
-  AccountType,
-  generateDatabaseNameWithTimestamp,
-  generateUniqueName,
-  getPanelSelector,
-  getTestExplorerUrl,
-  getTreeMenuItemSelector,
-  getTreeNodeSelector,
-  openContextMenu,
-} from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(240000);
+import { expect, test } from "@playwright/test";
 
-test("Mongo CRUD", async () => {
-  const databaseId = generateDatabaseNameWithTimestamp();
-  const containerId = generateUniqueName("container");
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
 
-  page.setDefaultTimeout(50000);
+(
+  [
+    ["latest API version", TestAccount.Mongo],
+    ["3.2 API", TestAccount.Mongo32],
+  ] as [string, TestAccount][]
+).forEach(([apiVersionDescription, accountType]) => {
+  test(`Mongo CRUD using ${apiVersionDescription}`, async ({ page }) => {
+    const databaseId = generateDatabaseNameWithTimestamp();
+    const collectionId = generateUniqueName("collection");
 
-  const url = await getTestExplorerUrl(AccountType.Mongo);
-  await page.goto(url);
-  const explorer = await waitForExplorer();
+    const explorer = await DataExplorer.open(page, accountType);
 
-  // Create new database and collection
-  await explorer.click('[data-test="New Collection"]');
+    await explorer.commandBarButton("New Collection").click();
+    await explorer.whilePanelOpen("New Collection", async (panel, okButton) => {
+      await panel.getByPlaceholder("Type a new database id").fill(databaseId);
+      await panel.getByRole("textbox", { name: "Collection id, Example Collection1" }).fill(collectionId);
+      await panel.getByRole("textbox", { name: "Shard key" }).fill("pk");
+      await panel.getByLabel("Database max RU/s").fill("1000");
+      await okButton.click();
+    });
 
-  await explorer.waitForSelector(getPanelSelector("New Collection"));
-  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
-  await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
-  await explorer.fill('[aria-label="Shard key"]', "pk");
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("New Collection"), { state: "detached" });
+    const databaseNode = explorer.treeNode(`DATA/${databaseId}`);
+    await databaseNode.expand();
+    const collectionNode = explorer.treeNode(`DATA/${databaseId}/${collectionId}`);
 
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+    await collectionNode.openContextMenu();
+    await collectionNode.contextMenuItem("Delete Collection").click();
+    await explorer.whilePanelOpen("Delete Collection", async (panel, okButton) => {
+      await panel.getByRole("textbox", { name: "Confirm by typing the collection id" }).fill(collectionId);
+      await okButton.click();
+    });
+    await expect(collectionNode.element).not.toBeAttached();
 
-  // Create indexing policy
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}/Settings`));
-  await explorer.click('button[role="tab"]:has-text("Indexing Policy")');
-  await explorer.click('[aria-label="Index Field Name 0"]');
-  await explorer.fill('[aria-label="Index Field Name 0"]', "foo");
-  await explorer.click("text=Select an index type");
-  await explorer.click('button[role="option"]:has-text("Single Field")');
-  await explorer.click('[data-test="Save"]');
+    await databaseNode.openContextMenu();
+    await databaseNode.contextMenuItem("Delete Database").click();
+    await explorer.whilePanelOpen("Delete Database", async (panel, okButton) => {
+      await panel.getByRole("textbox", { name: "Confirm by typing the Database id" }).fill(databaseId);
+      await okButton.click();
+    });
 
-  // Remove indexing policy
-  await explorer.click('[aria-label="Delete index Button"]');
-  await explorer.click('[data-test="Save"]');
-
-  // Delete database and collection
-  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Collection"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Collection"));
-  await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="OK"]');
-  await explorer.waitForSelector(getPanelSelector("Delete Collection"), { state: "detached" });
-
-  await openContextMenu(explorer, `DATA/${databaseId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Database"));
-  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
-  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
-
-  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
-  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
+    await expect(databaseNode.element).not.toBeAttached();
+  });
 });
diff --git a/test/mongo/container32.spec.ts b/test/mongo/container32.spec.ts
deleted file mode 100644
index 3b0742952..000000000
--- a/test/mongo/container32.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import {
-  AccountType,
-  generateDatabaseNameWithTimestamp,
-  generateUniqueName,
-  getPanelSelector,
-  getTestExplorerUrl,
-  getTreeMenuItemSelector,
-  getTreeNodeSelector,
-  openContextMenu,
-} from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(240000);
-
-test("Mongo CRUD", async () => {
-  const databaseId = generateDatabaseNameWithTimestamp();
-  const containerId = generateUniqueName("container");
-
-  page.setDefaultTimeout(50000);
-
-  const url = await getTestExplorerUrl(AccountType.Mongo32);
-  await page.goto(url);
-  const explorer = await waitForExplorer();
-
-  // Create new database and collection
-  await explorer.click('[data-test="New Collection"]');
-
-  await explorer.waitForSelector(getPanelSelector("New Collection"));
-  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
-  await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
-  await explorer.fill('[aria-label="Shard key"]', "pk");
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("New Collection"), { state: "detached" });
-
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
-
-  // Delete database and collection
-  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Collection"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Collection"));
-  await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="OK"]');
-  await explorer.waitForSelector(getPanelSelector("Delete Collection"), { state: "detached" });
-
-  await openContextMenu(explorer, `DATA/${databaseId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Database"));
-  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
-  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
-
-  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
-  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
-});
diff --git a/test/notebooks/GettingStarted.ipynb b/test/notebooks/GettingStarted.ipynb
deleted file mode 100644
index 97cd39743..000000000
--- a/test/notebooks/GettingStarted.ipynb
+++ /dev/null
@@ -1,110 +0,0 @@
-{
-  "cells": [
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "# Getting started with Cosmos notebooks\nIn this notebook, we'll learn how to use Cosmos notebook features. We'll create a database and container, import some sample data in a container in Azure Cosmos DB and run some queries over it."
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "### Create new database and container\n\nTo connect to the service, you can use our built-in instance of ```cosmos_client```. This is a ready to use instance of [CosmosClient](https://docs.microsoft.com/python/api/azure-cosmos/azure.cosmos.cosmos_client.cosmosclient?view=azure-python) from our Python SDK. It already has the context of this account baked in. We'll use ```cosmos_client``` to create a new database called **RetailDemo** and container called **WebsiteData**.\n\nOur dataset will contain events that occurred on the website - e.g. a user viewing an item, adding it to their cart, or purchasing it. We will partition by CartId, which represents the individual cart of each user. This will give us an even distribution of throughput and storage in our container. Learn more about how to [choose a good partition key.](https://docs.microsoft.com/azure/cosmos-db/partition-data)"
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {
-        "trusted": false
-      },
-      "outputs": [],
-      "source": "import azure.cosmos\nfrom azure.cosmos.partition_key import PartitionKey\n\ndatabase = cosmos_client.create_database_if_not_exists('RetailDemo')\nprint('Database RetailDemo created')\n\ncontainer = database.create_container_if_not_exists(id='WebsiteData', partition_key=PartitionKey(path='/CartID'))\nprint('Container WebsiteData created')\n"
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "#### Set the default database and container context to the new resources\n\nWe can use the ```%database {database_id}``` and ```%container {container_id}``` syntax."
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {
-        "trusted": false
-      },
-      "outputs": [],
-      "source": "%database RetailDemo"
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {
-        "trusted": false
-      },
-      "outputs": [],
-      "source": "%container WebsiteData"
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "### Load in sample JSON data and insert into the container. \nWe'll use the **%%upload** magic function to insert items into the container"
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {
-        "collapsed": false,
-        "inputHidden": false,
-        "outputHidden": false,
-        "trusted": false
-      },
-      "outputs": [],
-      "source": "%%upload --databaseName RetailDemo --containerName WebsiteData --url https://cosmosnotebooksdata.blob.core.windows.net/notebookdata/websiteData-small.json"
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "The new database and container should show up under the **Data** section. Use the refresh icon after completing the previous cell. \n\n<img src=\"https://cosmosnotebooksdata.blob.core.windows.net/notebookdata/refreshData.png\" alt=\"Refresh Data resource tree to see newly created resources\" width=\"40%\"/>"
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "### Run a query using the built-in Azure Cosmos notebook magic\n"
-    },
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "metadata": {
-        "trusted": false
-      },
-      "outputs": [],
-      "source": "%%sql\nSELECT c.Action, c.Price as ItemRevenue, c.Country, c.Item FROM c"
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "We can get more information about the %%sql command using ```%%sql?```"
-    },
-    {
-      "cell_type": "markdown",
-      "metadata": {},
-      "source": "### Next steps\n\nNow that you've learned how to use basic notebook functionality, follow the **Visualization.ipynb** notebook to further analyze and visualize our data. You can find it under the **Sample Notebooks** section."
-    }
-  ],
-  "metadata": {
-    "kernelspec": {
-      "display_name": "Python 3",
-      "language": "python",
-      "name": "python3"
-    },
-    "language_info": {
-      "file_extension": ".py",
-      "mimetype": "text/x-python",
-      "name": "python",
-      "version": "3.6.8"
-    },
-    "nteract": {
-      "version": "dataExplorer 1.0"
-    }
-  },
-  "nbformat": 4,
-  "nbformat_minor": 2
-}
\ No newline at end of file
diff --git a/test/notebooks/upload.spec.ts b/test/notebooks/upload.spec.ts
deleted file mode 100644
index 65beeec75..000000000
--- a/test/notebooks/upload.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import fs from "fs";
-import path from "path";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(240000);
-
-const filename = "GettingStarted.ipynb";
-const fileToUpload = `GettingStarted-ignore${Math.floor(Math.random() * 100000)}.ipynb`;
-
-fs.copyFileSync(path.join(__dirname, filename), path.join(__dirname, fileToUpload));
-
-test("Notebooks", async () => {
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us");
-  const explorer = await waitForExplorer();
-  // Upload and Delete Notebook
-  await explorer.click('[data-test="My Notebooks"] [aria-label="More"]');
-  await explorer.click('button[role="menuitem"]:has-text("Upload File")');
-  await explorer.setInputFiles("#importFileInput", path.join(__dirname, fileToUpload));
-  await explorer.click('[aria-label="Upload"]');
-  await explorer.click(`[data-test="${fileToUpload}"] [aria-label="More"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete")');
-  await explorer.click('button:has-text("Delete")');
-  await expect(explorer).not.toHaveText(".notebookResourceTree", fileToUpload);
-});
diff --git a/test/playwrightEnv.js b/test/playwrightEnv.js
deleted file mode 100644
index 490022eeb..000000000
--- a/test/playwrightEnv.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const PlaywrightEnvironment = require("jest-playwright-preset/lib/PlaywrightEnvironment").default;
-
-class CustomEnvironment extends PlaywrightEnvironment {
-  async setup() {
-    await super.setup();
-    // Your setup
-  }
-
-  async teardown() {
-    // Your teardown
-    await super.teardown();
-  }
-
-  async handleTestEvent(event) {
-    if (event.name === "test_done" && event.test.errors.length > 0) {
-      const parentName = event.test.parent.name.replace(/\W/g, "-");
-      const specName = event.test.name.replace(/\W/g, "-");
-
-      await this.global.page.screenshot({
-        path: `screenshots/${parentName}_${specName}.png`,
-      });
-    }
-  }
-}
-
-module.exports = CustomEnvironment;
diff --git a/test/resources/README.md b/test/resources/README.md
new file mode 100644
index 000000000..e30e98adf
--- /dev/null
+++ b/test/resources/README.md
@@ -0,0 +1,4 @@
+# Azure Resources for E2E Testing
+
+This directory contains Bicep files for creating the necessary Azure resources for end-to-end testing.
+To deploy the resources, run the './deploy.ps1' script in this directory and follow the prompts.
\ No newline at end of file
diff --git a/test/resources/account.bicep b/test/resources/account.bicep
new file mode 100644
index 000000000..fec6094ad
--- /dev/null
+++ b/test/resources/account.bicep
@@ -0,0 +1,50 @@
+targetScope = 'resourceGroup'
+
+@description('The name of the account to create/update. If the account already exists, it will be updated.')
+param accountName string
+@description('The name of the owner of this account, usually a Microsoft alias, but can be any string.')
+param ownerName string
+@description('The Azure location in which to create the account.')
+param location string
+@description('The total throughput limit for the account. Defaults to 10000 RU/s.')
+param totalThroughputLimit int = 10000
+@allowed([
+  'tables'
+  'cassandra'
+  'gremlin'
+  'mongo'
+  'mongo32'
+  'sql'
+])
+@description('The type of account to create.')
+param testAccountType string
+
+var kind = (testAccountType == 'mongo' || testAccountType == 'mongo32') ? 'MongoDB' : 'GlobalDocumentDB'
+var capabilities = (testAccountType == 'tables') ? [{name: 'EnableTable'}] : (testAccountType == 'cassandra') ? [{name: 'EnableCassandra'}] : (testAccountType == 'gremlin') ? [{name: 'EnableGremlin'}] : []
+var serverVersion = (testAccountType == 'mongo32') ? '3.2' : (testAccountType == 'mongo') ? '6.0' : null
+
+resource testCosmosAccount 'Microsoft.DocumentDB/databaseAccounts@2024-02-15-preview' = {
+  name: accountName
+  location: location
+  tags: {
+    'DataExplorer:TestAccountType': testAccountType
+    Owner: ownerName
+  }
+  kind: kind
+  properties: {
+    databaseAccountOfferType: 'Standard'
+    locations: [
+      {
+        locationName: location
+        failoverPriority: 0
+      }
+    ]
+    apiProperties: {
+      serverVersion: serverVersion
+    }
+    capabilities: capabilities 
+    capacity: {
+      totalThroughputLimit: totalThroughputLimit
+    }
+  }
+}
diff --git a/test/resources/all-accounts.bicep b/test/resources/all-accounts.bicep
new file mode 100644
index 000000000..563684837
--- /dev/null
+++ b/test/resources/all-accounts.bicep
@@ -0,0 +1,31 @@
+@description('A prefix to apply to the name of each account.')
+param accountPrefix string
+@description('The name of the owner of this account, usually a Microsoft alias, but can be any string.')
+param ownerName string
+@description('The Azure location in which to create the account.')
+param location string
+@description('The total throughput limit for the account. Defaults to 10000 RU/s.')
+param totalThroughputLimit int = 10000
+@allowed([
+  'tables'
+  'cassandra'
+  'gremlin'
+  'mongo'
+  'mongo32'
+  'sql'
+])
+@description('The type of accounts to create.')
+param testAccountTypes string[]
+
+var actualPrefix = endsWith(accountPrefix, '-') ? accountPrefix : '${accountPrefix}-'
+
+module testAccount './account.bicep' = [for testAccountType in testAccountTypes: {
+    name: '${actualPrefix}${testAccountType}'
+    params: {
+        accountName: '${actualPrefix}${testAccountType}'
+        ownerName: ownerName
+        location: location
+        totalThroughputLimit: totalThroughputLimit
+        testAccountType: testAccountType
+    }
+}]
diff --git a/test/resources/create-resource-group.ps1 b/test/resources/create-resource-group.ps1
new file mode 100644
index 000000000..8166989b6
--- /dev/null
+++ b/test/resources/create-resource-group.ps1
@@ -0,0 +1,31 @@
+param(
+    [Parameter(Mandatory=$true)][string]$Subscription,
+    [Parameter(Mandatory=$false)][string]$ResourceGroupName,
+    [Parameter(Mandatory=$true)][string]$Location
+)
+
+Import-Module "Az.Accounts" -Scope Local
+Import-Module "Az.Resources" -Scope Local
+
+$AzSubscription = (Get-AzSubscription -SubscriptionId $Subscription -ErrorAction SilentlyContinue) ?? (Get-AzSubscription -SubscriptionName $Subscription -ErrorAction SilentlyContinue)
+if(-not $AzSubscription) {
+    throw "The subscription '$Subscription' could not be found."
+}
+
+Select-AzSubscription -SubscriptionId $Subscription
+
+if(-not $ResourceGroupName) {
+    $ResourceGroupName = $env:USERNAME + "-e2e-testing"
+}
+
+$AzResourceGroup = Get-AzResourceGroup -Name $ResourceGroupName -ErrorAction SilentlyContinue
+if($AzResourceGroup) {
+    Write-Host "The resource group '$ResourceGroupName' already exists."
+    return
+}
+
+$confirm = Read-Host "Do you want to create the resource group '$ResourceGroupName' in the location '$Location'? (y/n)"
+if($confirm -ne "y") {
+    throw "The resource group creation was cancelled."
+}
+$AzResourceGroup = New-AzResourceGroup -Name $ResourceGroupName -Location $Location
\ No newline at end of file
diff --git a/test/resources/deploy.ps1 b/test/resources/deploy.ps1
new file mode 100644
index 000000000..bdc4dd042
--- /dev/null
+++ b/test/resources/deploy.ps1
@@ -0,0 +1,113 @@
+param(
+    [Parameter(Mandatory=$false)][string]$ResourceGroup,
+    [Parameter(Mandatory=$false)][string]$Subscription,
+    [Parameter(Mandatory=$false)][string]$Location,
+    [Parameter(Mandatory=$false)][string]$ResourcePrefix,
+    [ValidateSet("tables", "cassandra", "gremlin", "mongo", "mongo32", "sql")] # This must be a constant so we can't re-use the $AllResourceTypes variable :(
+    [Parameter(Mandatory=$false)][string[]]$ResourceSets,
+    [Parameter(Mandatory=$false)][string]$OwnerName,
+    [Parameter(Mandatory=$false)][int]$TotalThroughputLimit = 10000,
+    [Parameter(Mandatory=$false)][switch]$WhatIf
+)
+
+$AllResourceTypes = @(
+  "tables",
+  "cassandra",
+  "gremlin",
+  "mongo",
+  "mongo32",
+  "sql"
+)
+
+Import-Module "Az.Accounts" -Scope Local
+Import-Module "Az.Resources" -Scope Local
+
+if (-not (Get-Command bicep -ErrorAction SilentlyContinue)) {
+    throw "The Bicep CLI is required to run this script. Please install it first."
+}
+
+if (-not (Get-AzContext)) {
+    throw "Please login to your Azure account using Connect-AzAccount before running this script."
+}
+
+if(-not $ResourcePrefix) {
+    $ResourcePrefix = $env:USERNAME + "-e2e-"
+}
+
+if(-not $OwnerName) {
+    $OwnerName = $env:USERNAME
+}
+
+if (-not $Subscription) {
+    # Show the user the currently-selected subscription and ask if that's what they want to use
+    $currentSubscription = Get-AzContext | Select-Object -ExpandProperty Subscription
+    Write-Host "The currently-selected subscription is $($currentSubscription.Name) ($($currentSubscription.Id))."
+    $useCurrentSubscription = Read-Host "Do you want to use this subscription? (y/n)"
+    if ($useCurrentSubscription -eq "n") {
+        throw "Either specify a subscription using '-Subscription' or select a subscription using 'Select-AzSubscription' before running this script."
+    }
+    $Subscription = $currentSubscription.Id
+}
+
+$AzSubscription = (Get-AzSubscription -SubscriptionId $Subscription -ErrorAction SilentlyContinue) ?? (Get-AzSubscription -SubscriptionName $Subscription -ErrorAction SilentlyContinue)
+if (-not $AzSubscription) {
+    throw "The subscription '$Subscription' could not be found."
+}
+
+Set-AzContext $AzSubscription | Out-Null
+
+if (-not $ResourceGroup) {
+    $DefaultResourceGroupName = $env:USERNAME + "-e2e-testing"
+    if (Get-AzResourceGroup -Name $DefaultResourceGroupName -ErrorAction SilentlyContinue) {
+        Write-Host "Found a resource group with the default name ($DefaultResourceGroupName). Using that resource group. If you want to use a different resource group, specify it as a parameter."
+        $ResourceGroup = $DefaultResourceGroupName
+    } else {
+        $ResourceGroup = Read-Host "Specify the name of the resource group to deploy the resources to."
+    }
+}
+
+$AzResourceGroup = Get-AzResourceGroup -Name $ResourceGroup -ErrorAction SilentlyContinue
+if (-not $AzResourceGroup) {
+    throw "The resource group '$ResourceGroup' could not be found. You have to create the resource group manually before running this script."
+}
+
+if (-not $Location) {
+    $Location = $AzResourceGroup.Location
+}
+
+$AzLocation = Get-AzLocation | Where-Object { $_.Location -eq $Location }
+if (-not $AzLocation) {
+    throw "The location '$Location' could not be found."
+}
+
+if (-not $ResourceSets) {
+    $ResourceSets = $AllResourceTypes
+} else {
+    # Normalize the resource set names to the value in AllResourceTypes
+    $ResourceSets = $ResourceSets | ForEach-Object { $_.ToLower() }
+}
+
+Write-Host "Deploying test resource sets: $ResourceSets"
+Write-Host "  in $($AzLocation.DisplayName)"
+Write-Host "  to resource group $ResourceGroup"
+Write-Host "  in subscription $($AzSubscription.Name) ($($AzSubscription.Id))."
+if($WhatIf) {
+    Write-Host "  (What-If mode enabled)"
+}
+
+$continue = Read-Host "Do you want to continue? (y/n)"
+if ($continue -ne "y") {
+    throw "Deployment cancelled."
+}
+
+$bicepFile = Join-Path $PSScriptRoot "all-accounts.bicep"
+Write-Host "Deploying resources using $bicepFile"
+New-AzResourceGroupDeployment `
+    -ResourceGroupName $AzResourceGroup.ResourceGroupName `
+    -TemplateFile $bicepFile `
+    -WhatIf:$WhatIf `
+    -accountPrefix $ResourcePrefix `
+    -testAccountTypes $ResourceSets `
+    -location $AzLocation.Location `
+    -ownerName $OwnerName `
+    -totalThroughputLimit $TotalThroughputLimit
\ No newline at end of file
diff --git a/test/scripts/check-test-accounts.ps1 b/test/scripts/check-test-accounts.ps1
new file mode 100644
index 000000000..cd63293c0
--- /dev/null
+++ b/test/scripts/check-test-accounts.ps1
@@ -0,0 +1,22 @@
+Write-Host "Your test account configuration:"
+
+Import-Module "Az.Accounts" -Scope Local
+Import-Module "Az.Resources" -Scope Local
+
+Get-ChildItem env:\DE_TEST_* | ForEach-Object {
+    if ($_.Name -eq "DE_TEST_SUBSCRIPTION_ID") {
+        $AzSubscription = Get-AzSubscription -SubscriptionId $_.Value -ErrorAction SilentlyContinue | Select-Object -First 1
+        if (-not $AzSubscription) {
+            Write-Warning "The subscription '$($_.Value)' could not be found."
+        }
+        Write-Host "* $($_.Name): $($_.Value) ($($AzSubscription.Name))"
+    } elseif ($_.Name -eq "DE_TEST_RESOURCE_GROUP") {
+        $AzResourceGroup = Get-AzResourceGroup -Name $_.Value -ErrorAction SilentlyContinue
+        if (-not $AzResourceGroup) {
+            Write-Warning "The resource group '$($_.Value)' could not be found."
+        }
+        Write-Host "* $($_.Name): $($_.Value) (Confirmed)"
+    } else {
+        Write-Host "* $($_.Name): $($_.Value)"
+    }
+}
diff --git a/test/scripts/set-test-accounts.ps1 b/test/scripts/set-test-accounts.ps1
new file mode 100644
index 000000000..745f178af
--- /dev/null
+++ b/test/scripts/set-test-accounts.ps1
@@ -0,0 +1,69 @@
+param(
+    [Parameter(Mandatory=$false)][string]$ResourceGroup,
+    [Parameter(Mandatory=$false)][string]$Subscription,
+    [Parameter(Mandatory=$false)][string]$ResourcePrefix
+)
+
+Import-Module "Az.Accounts" -Scope Local
+Import-Module "Az.Resources" -Scope Local
+
+if (-not $Subscription) {
+    # Show the user the currently-selected subscription and ask if that's what they want to use
+    $currentSubscription = Get-AzContext | Select-Object -ExpandProperty Subscription
+    Write-Host "The currently-selected subscription is $($currentSubscription.Name) ($($currentSubscription.Id))."
+    $useCurrentSubscription = Read-Host "Do you want to use this subscription? (y/n)"
+    if ($useCurrentSubscription -eq "n") {
+        throw "Either specify a subscription using '-Subscription' or select a subscription using 'Select-AzSubscription' before running this script."
+    }
+    $Subscription = $currentSubscription.Id
+}
+
+$AzSubscription = (Get-AzSubscription -SubscriptionId $Subscription -ErrorAction SilentlyContinue | Select-Object -First 1) ?? (Get-AzSubscription -SubscriptionName $Subscription -ErrorAction SilentlyContinue | Select-Object -First 1)
+if (-not $AzSubscription) {
+    throw "The subscription '$Subscription' could not be found."
+}
+
+Set-AzContext $AzSubscription.Id | Out-Null
+
+if (-not $ResourceGroup) {
+    # Check for the default resource group name
+    $DefaultResourceGroupName = $env:USERNAME + "-e2e-testing"
+    if (Get-AzResourceGroup -Name $DefaultResourceGroupName -ErrorAction SilentlyContinue) {
+        $ResourceGroup = $DefaultResourceGroupName
+    } else {
+        $ResourceGroup = Read-Host "Specify the name of the resource group to find the resources in."
+    }
+}
+
+$AzResourceGroup = Get-AzResourceGroup -Name $ResourceGroup -ErrorAction SilentlyContinue
+if (-not $AzResourceGroup) {
+    throw "The resource group '$ResourceGroup' could not be found. You have to create the resource group manually before running this script."
+}
+
+if (-not $ResourcePrefix) {
+    $defaultResourcePrefix = $env:USERNAME + "-e2e-"
+    
+    # Check for one of the default resources
+    $defaultResource = Get-AzResource -ResourceGroupName $AzResourceGroup.ResourceGroupName -ResourceName "$($defaultResourcePrefix)cassandra" -ResourceType "Microsoft.DocumentDB/databaseAccounts" -ErrorAction SilentlyContinue
+    if ($defaultResource) {
+        Write-Host "Found a resource with the default resource prefix ($defaultResourcePrefix). Configuring that prefix for E2E testing."
+        $ResourcePrefix = $defaultResourcePrefix
+    } else {
+        $ResourcePrefix = Read-Host "Specify the resource prefix used in the resource names."
+    }
+}
+
+Write-Host "Configuring for E2E Testing"
+Write-Host "  Subscription: $($AzSubscription.Name) ($($AzSubscription.Id))"
+Write-Host "  Resource Group: $($AzResourceGroup.ResourceGroupName)"
+Write-Host "  Resource Prefix: $ResourcePrefix"
+
+Get-AzResource -ResourceGroupName $AzResourceGroup.ResourceGroupName -ResourceType "Microsoft.DocumentDB/databaseAccounts" -ErrorAction SilentlyContinue | ForEach-Object {
+    if ($_.Name -like "$ResourcePrefix*") {
+        Write-Host "    Found CosmosDB Account: $($_.Name)"
+    }
+}
+
+$env:DE_TEST_RESOURCE_GROUP = $AzResourceGroup.ResourceGroupName
+$env:DE_TEST_SUBSCRIPTION_ID = $AzSubscription.Id
+$env:DE_TEST_ACCOUNT_PREFIX = $ResourcePrefix
\ No newline at end of file
diff --git a/test/selfServe/selfServeExample.spec.ts b/test/selfServe/selfServeExample.spec.ts
deleted file mode 100644
index 3678f5b35..000000000
--- a/test/selfServe/selfServeExample.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { getAzureCLICredentialsToken } from "../utils/shared";
-
-test("Self Serve", async () => {
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
-
-  await page.goto(`https://localhost:1234/testExplorer.html?iframeSrc=selfServe.html&token=${token}`);
-  const handle = await page.waitForSelector("iframe");
-  const frame = await handle.contentFrame();
-
-  // wait for refresh RP call to end
-  await page.waitForTimeout(10000);
-
-  // id of the display element is in the format {PROPERTY_NAME}-{DISPLAY_NAME}-{DISPLAY_TYPE}
-  await frame.waitForSelector("#description-text-display");
-
-  const regions = await frame.waitForSelector("#regions-dropdown-input");
-
-  const currentRegionsDescription = await frame.$$("#currentRegionText-text-display");
-  expect(currentRegionsDescription).toHaveLength(0);
-  let disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
-  expect(disabledLoggingToggle).toHaveLength(0);
-
-  await regions.click();
-  const regionsDropdownElement1 = await frame.waitForSelector("#regions-dropdown-input-list0");
-  await regionsDropdownElement1.click();
-
-  await frame.waitForSelector("#currentRegionText-text-display");
-  disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
-  expect(disabledLoggingToggle).toHaveLength(1);
-
-  await frame.waitForSelector("#accountName-textField-input");
-
-  const enableDbLevelThroughput = await frame.waitForSelector("#enableDbLevelThroughput-toggle-input");
-  const dbThroughput = await frame.$$("#dbThroughput-slider-input");
-  expect(dbThroughput).toHaveLength(0);
-  await enableDbLevelThroughput.click();
-  await frame.waitForSelector("#dbThroughput-slider-input");
-
-  await frame.waitForSelector("#collectionThroughput-spinner-input");
-});
diff --git a/test/sql/container.spec.ts b/test/sql/container.spec.ts
index a08530959..df5fa77e4 100644
--- a/test/sql/container.spec.ts
+++ b/test/sql/container.spec.ts
@@ -1,55 +1,40 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import {
-  AccountType,
-  generateUniqueName,
-  getPanelSelector,
-  getTestExplorerUrl,
-  getTreeMenuItemSelector,
-  getTreeNodeSelector,
-  openContextMenu,
-} from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(120000);
+import { expect, test } from "@playwright/test";
 
-test("SQL CRUD", async () => {
-  const databaseId = generateUniqueName("db");
+import { DataExplorer, TestAccount, generateDatabaseNameWithTimestamp, generateUniqueName } from "../fx";
+
+test("SQL database and container CRUD", async ({ page }) => {
+  const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
 
-  page.setDefaultTimeout(50000);
+  const explorer = await DataExplorer.open(page, TestAccount.SQL);
 
-  const url = await getTestExplorerUrl(AccountType.SQL);
-  await page.goto(url);
-  const explorer = await waitForExplorer();
+  await explorer.commandBarButton("New Container").click();
+  await explorer.whilePanelOpen("New Container", async (panel, okButton) => {
+    await panel.getByPlaceholder("Type a new database id").fill(databaseId);
+    await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
+    await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+    await panel.getByLabel("Database max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  await explorer.click('[data-test="New Container"]');
+  const databaseNode = explorer.treeNode(`DATA/${databaseId}`);
+  await databaseNode.expand();
+  const containerNode = explorer.treeNode(`DATA/${databaseId}/${containerId}`);
 
-  await explorer.waitForSelector(getPanelSelector("New Container"));
-  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
-  await explorer.fill('[aria-label="Container id, Example Container1"]', containerId);
-  await explorer.fill('[aria-label="Partition key"]', "/pk");
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("New Container"), { state: "detached" });
+  await containerNode.openContextMenu();
+  await containerNode.contextMenuItem("Delete Container").click();
+  await explorer.whilePanelOpen("Delete Container", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the container id" }).fill(containerId);
+    await okButton.click();
+  });
+  await expect(containerNode.element).not.toBeAttached();
 
-  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
-  await explorer.hover(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
-  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Container"));
+  await databaseNode.openContextMenu();
+  await databaseNode.contextMenuItem("Delete Database").click();
+  await explorer.whilePanelOpen("Delete Database", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the database id" }).fill(databaseId);
+    await okButton.click();
+  });
 
-  await explorer.waitForSelector(getPanelSelector("Delete Container"));
-  await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);
-  await explorer.click('[aria-label="OK"]');
-  await explorer.waitForSelector(getPanelSelector("Delete Container"), { state: "detached" });
-
-  await openContextMenu(explorer, `DATA/${databaseId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
-
-  await explorer.waitForSelector(getPanelSelector("Delete Database"));
-  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
-  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
-
-  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
-  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
+  await expect(databaseNode.element).not.toBeAttached();
 });
diff --git a/test/sql/resourceToken.spec.ts b/test/sql/resourceToken.spec.ts
index 78adf42fb..65ede8619 100644
--- a/test/sql/resourceToken.spec.ts
+++ b/test/sql/resourceToken.spec.ts
@@ -1,19 +1,23 @@
+import { expect, test } from "@playwright/test";
+
 import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentials, getTreeNodeSelector } from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
-jest.setTimeout(120000);
+import {
+  DataExplorer,
+  TestAccount,
+  generateUniqueName,
+  getAccountName,
+  getAzureCLICredentials,
+  resourceGroupName,
+  subscriptionId,
+} from "../fx";
 
-const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"] ?? "";
-const resourceGroupName = "runners";
-
-test("Resource token", async () => {
+test("SQL account using Resource token", async ({ page }) => {
   const credentials = await getAzureCLICredentials();
   const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
-  const account = await armClient.databaseAccounts.get(resourceGroupName, "portal-sql-runner-west-us");
-  const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, "portal-sql-runner-west-us");
+  const accountName = getAccountName(TestAccount.SQL);
+  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
+  const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
   const dbId = generateUniqueName("db");
   const collectionId = generateUniqueName("col");
   const client = new CosmosClient({
@@ -28,15 +32,24 @@ test("Resource token", async () => {
     permissionMode: PermissionMode.All,
     resource: container.url,
   });
-  const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${database.id};CollectionId=${container.id};${containerPermission._token}`;
+  await expect(containerPermission).toBeDefined();
+
+  const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${
+    database.id
+  };CollectionId=${container.id};${containerPermission!._token}`;
 
   await page.goto("https://localhost:1234/hostedExplorer.html");
-  await page.waitForSelector("div > p.switchConnectTypeText");
-  await page.click("div > p.switchConnectTypeText");
-  await page.fill("input[class='inputToken']", resourceTokenConnectionString);
-  await page.click("input[value='Connect']");
-  const explorer = await waitForExplorer();
+  const switchConnectionLink = page.getByTestId("Link:SwitchConnectionType");
+  await switchConnectionLink.waitFor();
+  await switchConnectionLink.click();
+  await page.getByPlaceholder("Please enter a connection string").fill(resourceTokenConnectionString);
+  await page.getByRole("button", { name: "Connect" }).click();
 
-  const collectionNodeLabel = await explorer.textContent(getTreeNodeSelector(`DATA/${collectionId}`));
-  expect(collectionNodeLabel).toBe(collectionId);
+  const explorer = await DataExplorer.waitForExplorer(page);
+
+  const collectionNode = explorer.treeNode(`DATA/${collectionId}`);
+  await collectionNode.element.waitFor();
+  await expect(collectionNode.element).toBeAttached();
+
+  await database.delete();
 });
diff --git a/test/sql/selfServeExample.spec.ts b/test/sql/selfServeExample.spec.ts
new file mode 100644
index 000000000..225863cd9
--- /dev/null
+++ b/test/sql/selfServeExample.spec.ts
@@ -0,0 +1,23 @@
+import { expect, test } from "@playwright/test";
+import { DataExplorer, TestAccount } from "../fx";
+
+test("Self Serve", async ({ page }) => {
+  const explorer = await DataExplorer.open(page, TestAccount.SQL, "selfServe.html");
+
+  const loggingToggle = explorer.frame.locator("#enableLogging-toggle-input");
+  await expect(loggingToggle).toBeEnabled();
+
+  const regionDropdown = explorer.frame.getByText("Select a region");
+  await regionDropdown.click();
+  await explorer.frame.getByRole("option").first().click();
+
+  const currentRegionLabel = explorer.frame.getByLabel("Current Region");
+  await currentRegionLabel.waitFor();
+  await expect(currentRegionLabel).toHaveText(/current region selected is .*/);
+  await expect(loggingToggle).toBeDisabled();
+
+  await explorer.frame.locator("#enableDbLevelThroughput-toggle-input").click();
+  const slider = explorer.frame.getByLabel("Database Throughput");
+  await slider.waitFor();
+  await expect(slider).toBeAttached();
+});
diff --git a/test/tables/container.spec.ts b/test/tables/container.spec.ts
index 0d3824d02..fb4a2bbae 100644
--- a/test/tables/container.spec.ts
+++ b/test/tables/container.spec.ts
@@ -1,40 +1,28 @@
-import { jest } from "@jest/globals";
-import "expect-playwright";
-import {
-  AccountType,
-  generateUniqueName,
-  getPanelSelector,
-  getTestExplorerUrl,
-  getTreeMenuItemSelector,
-  openContextMenu,
-} from "../utils/shared";
-import { waitForExplorer } from "../utils/waitForExplorer";
+import { expect, test } from "@playwright/test";
 
-jest.setTimeout(120000);
+import { DataExplorer, TestAccount, generateUniqueName } from "../fx";
 
-test("Tables CRUD", async () => {
+test("Tables CRUD", async ({ page }) => {
   const tableId = generateUniqueName("table");
-  page.setDefaultTimeout(50000);
 
-  const url = await getTestExplorerUrl(AccountType.Tables);
-  await page.goto(url);
-  const explorer = await waitForExplorer();
+  const explorer = await DataExplorer.open(page, TestAccount.Tables);
 
-  await page.waitForSelector('text="Querying databases"', { state: "detached" });
-  await explorer.click('[data-test="New Table"]');
+  await explorer.commandBarButton("New Table").click();
+  await explorer.whilePanelOpen("New Table", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Table id, Example Table1" }).fill(tableId);
+    await panel.getByLabel("Table Max RU/s").fill("1000");
+    await okButton.click();
+  });
 
-  await explorer.waitForSelector(getPanelSelector("New Table"));
-  await explorer.fill('[aria-label="Table id, Example Table1"]', tableId);
-  await explorer.click("#sidePanelOkButton");
-  await explorer.waitForSelector(getPanelSelector("New Table"), { state: "detached" });
+  const tableNode = explorer.treeNode(`DATA/TablesDB/${tableId}`);
+  await expect(tableNode.element).toBeAttached();
 
-  await openContextMenu(explorer, `DATA/TablesDB/${tableId}`);
-  await explorer.click(getTreeMenuItemSelector(`DATA/TablesDB/${tableId}`, "Delete Table"));
+  await tableNode.openContextMenu();
+  await tableNode.contextMenuItem("Delete Table").click();
+  await explorer.whilePanelOpen("Delete Table", async (panel, okButton) => {
+    await panel.getByRole("textbox", { name: "Confirm by typing the table id" }).fill(tableId);
+    await okButton.click();
+  });
 
-  await explorer.waitForSelector(getPanelSelector("Delete Table"));
-  await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
-  await explorer.click('[aria-label="OK"]');
-  await explorer.waitForSelector(getPanelSelector("Delete Table"), { state: "detached" });
-
-  await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
+  await expect(tableNode.element).not.toBeAttached();
 });
diff --git a/test/testExplorer/TestExplorer.ts b/test/testExplorer/TestExplorer.ts
index 12b83d577..cce56447b 100644
--- a/test/testExplorer/TestExplorer.ts
+++ b/test/testExplorer/TestExplorer.ts
@@ -23,6 +23,11 @@ const initTestExplorer = async (): Promise<void> => {
   const databaseAccount = await get(subscriptionId, resourceGroup, accountName);
   const keys = await listKeys(subscriptionId, resourceGroup, accountName);
 
+  // Disable the quickstart carousel.
+  if (databaseAccount?.id) {
+    localStorage.setItem(databaseAccount.id, "true");
+  }
+
   const initTestExplorerContent = {
     inputs: {
       databaseAccount: databaseAccount,
@@ -65,6 +70,10 @@ const initTestExplorer = async (): Promise<void> => {
       // This simulates the same action that happens in the portal
       console.dir(event.data);
       if (event.data?.kind === "ready") {
+        if (!iframe.contentWindow || !iframe.contentDocument) {
+          throw new Error("iframe is not loaded");
+        }
+
         iframe.contentWindow.postMessage(
           {
             signature: "pcIframe",
@@ -78,6 +87,7 @@ const initTestExplorer = async (): Promise<void> => {
   );
   iframe.id = "explorerMenu";
   iframe.name = "explorer";
+  iframe.setAttribute("data-test", "DataExplorerFrame");
   iframe.classList.add("iframe");
   iframe.title = "explorer";
   iframe.src = iframeSrc;
diff --git a/test/utils.js b/test/utils.js
deleted file mode 100644
index acd8571af..000000000
--- a/test/utils.js
+++ /dev/null
@@ -1,21 +0,0 @@
-let client;
-const appInsightsKey = process.env.PORTAL_RUNNER_APP_INSIGHTS_KEY;
-if (!appInsightsKey) {
-  console.warn(`PORTAL_RUNNER_APP_INSIGHTS_KEY env var not set. Runner telemetry will not be reported`);
-} else {
-  const appInsights = require("applicationinsights");
-  appInsights.setup(process.env.PORTAL_RUNNER_APP_INSIGHTS_KEY).start();
-  client = appInsights.defaultClient;
-}
-
-module.exports.trackEvent = (...args) => {
-  if (client) {
-    client.trackEvent(...args);
-  }
-};
-
-module.exports.trackException = exception => {
-  if (client) {
-    client.trackException({ exception });
-  }
-};
diff --git a/test/utils/shared.ts b/test/utils/shared.ts
deleted file mode 100644
index f131425af..000000000
--- a/test/utils/shared.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
-import crypto from "crypto";
-import { Frame } from "playwright";
-
-export enum AccountType {
-  Tables = "Tables",
-  Cassandra = "Cassandra",
-  Gremlin = "Gremlin",
-  Mongo = "Mongo",
-  Mongo32 = "Mongo32",
-  SQL = "SQL",
-}
-
-export const defaultAccounts: Record<AccountType, string> = {
-  [AccountType.Tables]: "portal-tables-runner",
-  [AccountType.Cassandra]: "portal-cassandra-runner",
-  [AccountType.Gremlin]: "portal-gremlin-runner",
-  [AccountType.Mongo]: "portal-mongo-runner",
-  [AccountType.Mongo32]: "portal-mongo32-runner",
-  [AccountType.SQL]: "portal-sql-runner-west-us",
-};
-
-const resourceGroup = process.env.DE_TEST_RESOURCE_GROUP ?? "runners";
-const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
-
-export async function getTestExplorerUrl(accountType: AccountType) {
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
-  const accountName =
-    process.env[`DE_TEST_ACCOUNT_NAME_${accountType.toLocaleUpperCase()}`] ?? defaultAccounts[accountType];
-  return `https://localhost:1234/testExplorer.html?accountName=${accountName}&resourceGroup=${resourceGroup}&subscriptionId=${subscriptionId}&token=${token}`;
-}
-
-export function generateUniqueName(baseName = "", length = 4): string {
-  return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
-}
-
-export function generateDatabaseNameWithTimestamp(baseName = "db", length = 1): string {
-  return `${baseName}${crypto.randomBytes(length).toString("hex")}-${Date.now()}`;
-}
-
-export async function getAzureCLICredentials(): Promise<AzureCliCredentials> {
-  return await AzureCliCredentials.create();
-}
-
-export async function getAzureCLICredentialsToken(): Promise<string> {
-  const credentials = await getAzureCLICredentials();
-  const token = (await credentials.getToken()).accessToken;
-  return token;
-}
-
-export function getPanelSelector(title: string) {
-  return `[data-test="Panel:${title}"]`;
-}
-
-export function getTreeNodeSelector(id: string) {
-  return `[data-test="TreeNode:${id}"]`;
-}
-
-export function getTreeMenuItemSelector(nodeId: string, itemLabel: string) {
-  return `[data-test="TreeNode/ContextMenu:${nodeId}"] [data-test="TreeNode/ContextMenuItem:${itemLabel}"]`;
-}
-
-export async function openContextMenu(explorer: Frame, nodeIdentifier: string) {
-  const nodeSelector = getTreeNodeSelector(nodeIdentifier);
-  await explorer.hover(nodeSelector);
-  await explorer.click(`${nodeSelector} [data-test="TreeNode/ContextMenuTrigger"]`);
-  await explorer.waitForSelector(`[data-test="TreeNode/ContextMenu:${nodeIdentifier}"]`);
-}
diff --git a/test/utils/waitForExplorer.ts b/test/utils/waitForExplorer.ts
deleted file mode 100644
index 30675a0cc..000000000
--- a/test/utils/waitForExplorer.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Frame } from "playwright";
-
-export const waitForExplorer = async (): Promise<Frame> => {
-  await page.waitForSelector("iframe");
-  await page.waitForTimeout(5000);
-  return page.frame({
-    name: "explorer",
-  });
-};
diff --git a/webpack.config.js b/webpack.config.js
index 271ee68bd..ce0f16d7c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -87,6 +87,7 @@ const typescriptRule = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+/** @type {(_env: Record<string, string>, argv: Record<string, unknown>) => import("webpack").Configuration} */
 module.exports = function (_env = {}, argv = {}) {
   const mode = argv.mode || "development";
   const rules = [fontRule, lessRule, imagesRule, cssRule, htmlRule, typescriptRule];
@@ -265,6 +266,8 @@ module.exports = function (_env = {}, argv = {}) {
     watch: false,
     // Hack since it is hard to disable watch entirely with webpack dev server https://github.com/webpack/webpack-dev-server/issues/1251#issuecomment-654240734
     watchOptions: isCI ? { poll: 24 * 60 * 60 * 1000 } : {},
+
+    /** @type {import("webpack-dev-server").Configuration}*/
     devServer: {
       hot: false,
       // disableHostCheck is removed in webpack 5, use: allowedHosts: "all",
@@ -282,6 +285,26 @@ module.exports = function (_env = {}, argv = {}) {
         "Access-Control-Allow-Headers": "*",
         "Access-Control-Allow-Methods": "*",
       },
+      setupMiddlewares: (middlewares, server) => {
+        // Provide an HTTP API that will wait for compilation of all bundles to be completed.
+        // This is used by Playwright to know when the server is ready to be tested.
+        let compilationComplete = false;
+        server.compiler.hooks.done.tap("done", () => {
+          setImmediate(() => {
+            compilationComplete = true;
+          });
+        });
+
+        server.app.get("/_ready", (_, res) => {
+          if (compilationComplete) {
+            res.status(200).send("Compilation complete.");
+          } else {
+            res.status(503).send("Compilation not complete.");
+          }
+        });
+
+        return middlewares;
+      },
       proxy: {
         "/api": {
           target: "https://main.documentdb.ext.azure.com",

From b5d4509d49f9152f0b8b476eb92cedf09428c0de Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Wed, 5 Jun 2024 13:40:51 -0700
Subject: [PATCH 57/67] fix a broken test snapshot (#1863)

---
 .../TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
index bb5528418..d6122a2f4 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
@@ -1554,6 +1554,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 
 exports[`TreeNodeComponent renders a node as expandable if it has empty, but defined, children array 1`] = `
 <TreeItem
+  data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
   style={

From 416743c548e14cfe72757063d6ce877b6e4dac96 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Thu, 6 Jun 2024 09:33:25 -0700
Subject: [PATCH 58/67] stop tree nodes from expanding to full height, causing
 overlap (#1861)

---
 .../TreeComponent/TreeNodeComponent.tsx       |  1 -
 .../TreeNodeComponent.test.tsx.snap           | 97 -------------------
 src/Explorer/Tree/ResourceTree.tsx            |  2 +-
 3 files changed, 1 insertion(+), 99 deletions(-)

diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
index fb60aab2e..9ec2c904a 100644
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -150,7 +150,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       data-test={`TreeNodeContainer:${treeNodeId}`}
       value={treeNodeId}
       itemType={isBranch ? "branch" : "leaf"}
-      style={{ height: "100%" }}
       onOpenChange={onOpenChange}
     >
       <TreeItemLayout
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
index d6122a2f4..658e01e0c 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
@@ -5,11 +5,6 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -118,11 +113,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
     data-test="TreeNodeContainer:root"
     itemType="branch"
     onOpenChange={[Function]}
-    style={
-      Object {
-        "height": "100%",
-      }
-    }
     value="root"
   >
     <div
@@ -136,11 +126,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       role="treeitem"
-      style={
-        Object {
-          "height": "100%",
-        }
-      }
       tabIndex={-1}
     >
       <ContextSelector.Provider
@@ -233,7 +218,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 data-fui-tree-item-value="root"
                 data-test="TreeNodeContainer:root"
                 role="treeitem"
-                style="height: 100%;"
                 tabindex="-1"
               >
                 <div
@@ -288,7 +272,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-fui-tree-item-value="root/child1Label"
                     data-test="TreeNodeContainer:root/child1Label"
                     role="treeitem"
-                    style="height: 100%;"
                     tabindex="0"
                   >
                     <div
@@ -340,7 +323,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-fui-tree-item-value="root/child2LoadingLabel"
                     data-test="TreeNodeContainer:root/child2LoadingLabel"
                     role="treeitem"
-                    style="height: 100%;"
                     tabindex="-1"
                   >
                     <div
@@ -391,7 +373,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-fui-tree-item-value="root/child3ExpandingLabel"
                     data-test="TreeNodeContainer:root/child3ExpandingLabel"
                     role="treeitem"
-                    style="height: 100%;"
                     tabindex="-1"
                   >
                     <div
@@ -647,11 +628,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-test="TreeNodeContainer:root/child1Label"
                     itemType="branch"
                     onOpenChange={[Function]}
-                    style={
-                      Object {
-                        "height": "100%",
-                      }
-                    }
                     value="root/child1Label"
                   >
                     <div
@@ -665,11 +641,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       onClick={[Function]}
                       onKeyDown={[Function]}
                       role="treeitem"
-                      style={
-                        Object {
-                          "height": "100%",
-                        }
-                      }
                       tabIndex={-1}
                     >
                       <ContextSelector.Provider
@@ -762,7 +733,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 data-fui-tree-item-value="root/child1Label"
                                 data-test="TreeNodeContainer:root/child1Label"
                                 role="treeitem"
-                                style="height: 100%;"
                                 tabindex="0"
                               >
                                 <div
@@ -945,11 +915,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-test="TreeNodeContainer:root/child2LoadingLabel"
                     itemType="branch"
                     onOpenChange={[Function]}
-                    style={
-                      Object {
-                        "height": "100%",
-                      }
-                    }
                     value="root/child2LoadingLabel"
                   >
                     <div
@@ -963,11 +928,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       onClick={[Function]}
                       onKeyDown={[Function]}
                       role="treeitem"
-                      style={
-                        Object {
-                          "height": "100%",
-                        }
-                      }
                       tabIndex={-1}
                     >
                       <ContextSelector.Provider
@@ -1060,7 +1020,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 data-fui-tree-item-value="root/child2LoadingLabel"
                                 data-test="TreeNodeContainer:root/child2LoadingLabel"
                                 role="treeitem"
-                                style="height: 100%;"
                                 tabindex="-1"
                               >
                                 <div
@@ -1228,11 +1187,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-test="TreeNodeContainer:root/child3ExpandingLabel"
                     itemType="leaf"
                     onOpenChange={[Function]}
-                    style={
-                      Object {
-                        "height": "100%",
-                      }
-                    }
                     value="root/child3ExpandingLabel"
                   >
                     <div
@@ -1245,11 +1199,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       onClick={[Function]}
                       onKeyDown={[Function]}
                       role="treeitem"
-                      style={
-                        Object {
-                          "height": "100%",
-                        }
-                      }
                       tabIndex={-1}
                     >
                       <ContextSelector.Provider
@@ -1349,7 +1298,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 data-fui-tree-item-value="root/child3ExpandingLabel"
                                 data-test="TreeNodeContainer:root/child3ExpandingLabel"
                                 role="treeitem"
-                                style="height: 100%;"
                                 tabindex="-1"
                               >
                                 <div
@@ -1474,11 +1422,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1513,11 +1456,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1557,11 +1495,6 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1604,11 +1537,6 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
       data-test="TreeNodeContainer:root"
       itemType="leaf"
       onOpenChange={[Function]}
-      style={
-        Object {
-          "height": "100%",
-        }
-      }
       value="root"
     >
       <TreeItemLayout
@@ -1698,11 +1626,6 @@ exports[`TreeNodeComponent renders a single node 1`] = `
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1737,11 +1660,6 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1776,11 +1694,6 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1865,11 +1778,6 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1955,11 +1863,6 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index ae4614ad9..afd0ef85b 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -166,7 +166,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
 
   return (
     <>
-      <FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}>
+      <FluentProvider theme={lightTheme} style={{ overflow: "auto" }}>
         <Tree
           aria-label="CosmosDB resources"
           openItems={openItems}

From 06d48294223223b9cde4c8d4917953591861db9c Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Fri, 7 Jun 2024 16:28:08 +0200
Subject: [PATCH 59/67] Fix click to show document issue. Table doesn't
 auto-select first document anymore. (#1864)

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 140 ++++++++++--------
 .../DocumentsTableComponent.tsx               |  17 +--
 2 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 9cfc4301d..60367cb66 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -86,6 +86,9 @@ export class DocumentsTabV2 extends TabsBase {
   }
 }
 
+// Use this value to initialize the very time the component is rendered
+const RESET_INDEX = -1;
+
 const filterButtonStyle: CSSProperties = {
   marginLeft: 8,
 };
@@ -465,7 +468,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined);
 
   // Table user clicked on this row
-  const [clickedRow, setClickedRow] = useState<TableRowId>(undefined);
+  const [clickedRowIndex, setClickedRowIndex] = useState<number>(RESET_INDEX);
   // Table multiple selection
   const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
 
@@ -490,6 +493,23 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
   }, [isFilterFocused]);
 
+  // Clicked row must be defined
+  useEffect(() => {
+    if (documentIds.length > 0) {
+      let currentClickedRowIndex = clickedRowIndex;
+      if (
+        (currentClickedRowIndex === RESET_INDEX &&
+          editorState === ViewModels.DocumentExplorerState.noDocumentSelected) ||
+        currentClickedRowIndex > documentIds.length - 1
+      ) {
+        // reset clicked row or the current clicked row is out of bounds
+        currentClickedRowIndex = 0;
+        setSelectedRows(new Set([0]));
+        onDocumentClicked(currentClickedRowIndex, documentIds);
+      }
+    }
+  }, [documentIds, clickedRowIndex, editorState]);
+
   let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
 
   const applyFilterButton = {
@@ -550,7 +570,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
     if (!documentsIterator) {
       try {
-        refreshDocumentsGrid();
+        refreshDocumentsGrid(false);
       } catch (error) {
         if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
           TelemetryProcessor.traceFailure(
@@ -657,7 +677,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     setSelectedDocumentContent(defaultDocument);
     setSelectedDocumentContentBaseline(defaultDocument);
     setSelectedRows(new Set());
-    setClickedRow(undefined);
+    setClickedRowIndex(undefined);
     setEditorState(ViewModels.DocumentExplorerState.newDocumentValid);
   };
 
@@ -673,8 +693,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     return createDocument(_collection, document)
       .then(
         (savedDocument: DataModels.DocumentId) => {
+          // TODO: Reuse initDocumentEditor() to remove code duplication
           const value: string = renderObjectForEditor(savedDocument || {}, null, 4);
           setSelectedDocumentContentBaseline(value);
+          setSelectedDocumentContent(value);
           setInitialDocumentContent(value);
           const partitionKeyValueArray: PartitionKey[] = extractPartitionKeyValues(
             savedDocument,
@@ -738,7 +760,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       partitionKey as PartitionKeyDefinition,
     );
 
-    const selectedDocumentId = documentIds[clickedRow as number];
+    const selectedDocumentId = documentIds[clickedRowIndex as number];
     selectedDocumentId.partitionKeyValue = partitionKeyValueArray;
 
     onExecutionErrorChange(false);
@@ -786,7 +808,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         },
       )
       .finally(() => setIsExecuting(false));
-  }, [onExecutionErrorChange, tabTitle, selectedDocumentContent, _collection, partitionKey, documentIds, clickedRow]);
+  }, [
+    onExecutionErrorChange,
+    tabTitle,
+    selectedDocumentContent,
+    _collection,
+    partitionKey,
+    documentIds,
+    clickedRowIndex,
+  ]);
 
   const onRevertExistingDocumentClick = useCallback((): void => {
     setSelectedDocumentContentBaseline(initialDocumentContent);
@@ -850,7 +880,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
             setDocumentIds(newDocumentIds);
 
             setSelectedDocumentContent(undefined);
-            setClickedRow(undefined);
+            setClickedRowIndex(undefined);
             setSelectedRows(new Set());
             setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
             useDialog
@@ -974,8 +1004,27 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     return true;
   };
 
+  const updateDocumentIds = (newDocumentsIds: DocumentId[]): void => {
+    setDocumentIds(newDocumentsIds);
+
+    if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
+      TelemetryProcessor.traceSuccess(
+        Action.Tab,
+        {
+          databaseName: _collection.databaseId,
+          collectionName: _collection.id(),
+
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle,
+        },
+        onLoadStartKey,
+      );
+      setOnLoadStartKey(undefined);
+    }
+  };
+
   let loadNextPage = useCallback(
-    (iterator: QueryIterator<ItemDefinition & Resource>, applyFilterButtonClicked?: boolean): Promise<unknown> => {
+    (iterator: QueryIterator<ItemDefinition & Resource>, applyFilterButtonClicked: boolean): Promise<unknown> => {
       setIsExecuting(true);
       onExecutionErrorChange(false);
       let automaticallyCancelQueryAfterTimeout: boolean;
@@ -1028,21 +1077,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
               });
 
             const merged = currentDocuments.concat(nextDocumentIds);
-            setDocumentIds(merged);
-            if (onLoadStartKey !== null && onLoadStartKey !== undefined) {
-              TelemetryProcessor.traceSuccess(
-                Action.Tab,
-                {
-                  databaseName: _collection.databaseId,
-                  collectionName: _collection.id(),
-
-                  dataExplorerArea: Constants.Areas.Tab,
-                  tabTitle,
-                },
-                onLoadStartKey,
-              );
-              setOnLoadStartKey(undefined);
-            }
+            updateDocumentIds(merged);
           },
           (error) => {
             onExecutionErrorChange(true);
@@ -1112,7 +1147,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
     if (event.key === " " || event.key === "Enter") {
       const focusElement = event.target as HTMLElement;
-      loadNextPage(documentsIterator.iterator);
+      loadNextPage(documentsIterator.iterator, false);
       focusElement && focusElement.focus();
       event.stopPropagation();
       event.preventDefault();
@@ -1158,10 +1193,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    * Document has been clicked on in table
    * @param tabRowId
    */
-  const onDocumentClicked = (tabRowId: TableRowId) => {
+  const onDocumentClicked = (tabRowId: TableRowId, currentDocumentIds: DocumentId[]) => {
     const index = tabRowId as number;
-    setClickedRow(index);
-    loadDocument(documentIds[index]);
+    setClickedRowIndex(index);
+    loadDocument(currentDocumentIds[index]);
   };
 
   let loadDocument = (documentId: DocumentId) =>
@@ -1267,13 +1302,13 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     confirmDiscardingChange(() => {
       if (selectedRows.size === 0) {
         setSelectedDocumentContent(undefined);
-        setClickedRow(undefined);
+        setClickedRowIndex(undefined);
         setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
       }
 
       // Find if clickedRow is in selectedRows.If not, clear clickedRow and content
-      if (clickedRow !== undefined && !selectedRows.has(clickedRow)) {
-        setClickedRow(undefined);
+      if (clickedRowIndex !== undefined && !selectedRows.has(clickedRowIndex)) {
+        setClickedRowIndex(undefined);
         setSelectedDocumentContent(undefined);
         setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
       }
@@ -1281,6 +1316,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       // If only one selection, we consider as a click
       if (selectedRows.size === 1) {
         setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
+        onDocumentClicked(selectedRows.values().next().value, documentIds);
       }
 
       setSelectedRows(selectedRows);
@@ -1441,6 +1477,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
             const value: string = renderObjectForEditor(savedDocument || {}, null, 4);
             setSelectedDocumentContentBaseline(value);
+            setSelectedDocumentContent(value);
+            setInitialDocumentContent(value);
 
             setDocumentIds(ids);
             setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
@@ -1491,7 +1529,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         tabTitle,
       });
 
-      const selectedDocumentId = documentIds[clickedRow as number];
+      const selectedDocumentId = documentIds[clickedRowIndex as number];
       return MongoProxyClient.updateDocument(
         _collection.databaseId,
         _collection as ViewModels.Collection,
@@ -1559,8 +1597,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         .then(
           ({ continuationToken: newContinuationToken, documents }) => {
             setContinuationToken(newContinuationToken);
-            let currentDocuments = documentIds;
-            const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+            const currentDocumentsRids = documentIds.map((currentDocument) => currentDocument.rid);
             const nextDocumentIds = documents
               .filter((d: { _rid: string }) => {
                 return currentDocumentsRids.indexOf(d._rid) < 0;
@@ -1569,34 +1606,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
               .map((rawDocument: any) => {
                 const partitionKeyValue = rawDocument._partitionKeyValue;
                 return newDocumentId(rawDocument, partitionKeyProperties, [partitionKeyValue]);
-                // return new DocumentId(this, rawDocument, [partitionKeyValue]);
               });
 
-            const merged = currentDocuments.concat(nextDocumentIds);
-
-            setDocumentIds(merged);
-            currentDocuments = merged;
-
-            if (filterContent.length > 0 && currentDocuments.length > 0) {
-              currentDocuments[0].click();
-            } else {
-              setSelectedDocumentContent("");
-              setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-            }
-            if (_onLoadStartKey !== null && _onLoadStartKey !== undefined) {
-              TelemetryProcessor.traceSuccess(
-                Action.Tab,
-                {
-                  databaseName: _collection.databaseId,
-                  collectionName: _collection.id(),
-
-                  dataExplorerArea: Constants.Areas.Tab,
-                  tabTitle,
-                },
-                _onLoadStartKey,
-              );
-              setOnLoadStartKey(undefined);
-            }
+            const merged = documentIds.concat(nextDocumentIds);
+            updateDocumentIds(merged);
           },
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (error: any) => {
@@ -1624,7 +1637,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   // ***************** Mongo ***************************
 
   const refreshDocumentsGrid = useCallback(
-    async (applyFilterButtonPressed?: boolean): Promise<void> => {
+    (applyFilterButtonPressed: boolean): void => {
       // clear documents grid
       setDocumentIds([]);
       setContinuationToken(undefined); // For mongo
@@ -1638,6 +1651,13 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         // collapse filter
         setAppliedFilter(filterContent);
         setIsFilterExpanded(false);
+
+        // If apply filter is pressed, reset current selected document
+        if (applyFilterButtonPressed) {
+          setClickedRowIndex(RESET_INDEX);
+          setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+          setSelectedDocumentContent(undefined);
+        }
       } catch (error) {
         console.error(error);
         useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
@@ -1774,7 +1794,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
               >
                 <DocumentsTableComponent
                   items={tableItems}
-                  onItemClicked={onDocumentClicked}
+                  onItemClicked={(index) => onDocumentClicked(index, documentIds)}
                   onSelectedRowsChange={onSelectedRowsChange}
                   selectedRows={selectedRows}
                   size={tableContainerSizePx}
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 58f486c3b..a04844964 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -25,7 +25,7 @@ import {
 import { NormalizedEventKey } from "Common/Constants";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
 
 export type DocumentsTableComponentItem = {
@@ -59,7 +59,6 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
 
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
-  onItemClicked,
   onSelectedRowsChange,
   selectedRows,
   style,
@@ -67,8 +66,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   columnHeaders,
   isSelectionDisabled,
 }: IDocumentsTableComponentProps) => {
-  const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
-
   const initialSizingOptions: TableColumnSizingOptions = {
     id: {
       idealWidth: 280,
@@ -250,18 +247,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     [toggleAllRows],
   );
 
-  // Load document depending on selection
-  useEffect(() => {
-    if (selectedRows.size === 1 && items.length > 0) {
-      const newActiveItemIndex = selectedRows.values().next().value;
-      if (newActiveItemIndex !== activeItemIndex) {
-        onItemClicked(newActiveItemIndex);
-        setActiveItemIndex(newActiveItemIndex);
-        setSelectionStartIndex(newActiveItemIndex);
-      }
-    }
-  }, [selectedRows, items, activeItemIndex, onItemClicked]);
-
   // Cell keyboard navigation
   const keyboardNavAttr = useArrowNavigationGroup({ axis: "grid" });
 

From c680481fe02ad734a86b5dbfa0568e731b47523e Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:37:51 -0500
Subject: [PATCH 60/67] Add form and validation for vector search (#1856)

* Add form and validation for vector search

* Add form and validation for vector search

* Add unit tests and merge forms
---
 package.json                                  |   3 +-
 .../CollapsibleSectionComponent.tsx           |  16 +-
 src/Explorer/Panes/AddCollectionPanel.tsx     | 129 +++-----
 .../AddVectorEmbeddingPolicyForm.test.tsx     |  84 +++++
 .../AddVectorEmbeddingPolicyForm.tsx          | 300 ++++++++++++++++++
 .../VectorSearchPanel/VectorSearchUtils.ts    |  16 +
 6 files changed, 460 insertions(+), 88 deletions(-)
 create mode 100644 src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx
 create mode 100644 src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx
 create mode 100644 src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts

diff --git a/package.json b/package.json
index d29fdebd6..abec04d59 100644
--- a/package.json
+++ b/package.json
@@ -209,6 +209,7 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
+    "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
@@ -244,4 +245,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
\ No newline at end of file
+}
diff --git a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
index 207642d84..80da43414 100644
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,4 +1,4 @@
-import { Icon, Label, Stack } from "@fluentui/react";
+import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -8,6 +8,7 @@ export interface CollapsibleSectionProps {
   isExpandedByDefault: boolean;
   onExpand?: () => void;
   children: JSX.Element;
+  tooltipContent?: string | JSX.Element | JSX.Element[];
 }
 
 export interface CollapsibleSectionState {
@@ -55,6 +56,19 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>
+          {this.props.tooltipContent && (
+            <TooltipHost
+              directionalHint={DirectionalHint.bottomLeftEdge}
+              content={this.props.tooltipContent}
+              styles={{
+                root: {
+                  marginLeft: "0 !important",
+                },
+              }}
+            >
+              <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+            </TooltipHost>
+          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index c4fa38ec4..f208720cf 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -21,7 +21,7 @@ import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
 import { SubscriptionType } from "Contracts/SubscriptionType";
-import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { AddVectorEmbeddingPolicyForm } from "Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -82,22 +82,6 @@ export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
   excludedPaths: [],
 };
 
-const DefaultDatabaseVectorIndex: DataModels.IndexingPolicy = {
-  indexingMode: "consistent",
-  automatic: true,
-  includedPaths: [
-    {
-      path: "/*",
-    },
-  ],
-  excludedPaths: [
-    {
-      path: '/"_etag"/?',
-    },
-  ],
-  vectorIndexes: [],
-};
-
 export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
   vectorEmbeddings: [],
 };
@@ -122,8 +106,9 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
-  vectorIndexingPolicy: string;
-  vectorEmbeddingPolicy: string;
+  vectorIndexingPolicy: DataModels.VectorIndex[];
+  vectorEmbeddingPolicy: DataModels.VectorEmbedding[];
+  vectorPolicyValidated: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -159,8 +144,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
-      vectorIndexingPolicy: JSON.stringify(DefaultDatabaseVectorIndex, null, 2),
-      vectorEmbeddingPolicy: JSON.stringify(DefaultVectorEmbeddingPolicy, null, 2),
+      vectorEmbeddingPolicy: [],
+      vectorIndexingPolicy: [],
+      vectorPolicyValidated: true,
     };
   }
 
@@ -896,60 +882,28 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
           {this.shouldShowVectorSearchParameters() && (
             <Stack>
-              <CollapsibleSectionComponent
-                title="Indexing Policy"
-                isExpandedByDefault={false}
-                onExpand={() => {
-                  this.scrollToSection("collapsibleVectorPolicySectionContent");
-                }}
-              >
-                <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
-                    Learn more
-                  </Link>
-                  <EditorReact
-                    language={"json"}
-                    content={this.state.vectorIndexingPolicy}
-                    isReadOnly={false}
-                    wordWrap={"on"}
-                    ariaLabel={"Editing indexing policy"}
-                    lineNumbers={"on"}
-                    scrollBeyondLastLine={false}
-                    spinnerClassName="panelSectionSpinner"
-                    monacoContainerStyles={{
-                      minHeight: 200,
-                    }}
-                    onContentChanged={(newIndexingPolicy: string) => this.setVectorIndexingPolicy(newIndexingPolicy)}
-                  />
-                </Stack>
-              </CollapsibleSectionComponent>
               <CollapsibleSectionComponent
                 title="Container Vector Policy"
                 isExpandedByDefault={false}
                 onExpand={() => {
                   this.scrollToSection("collapsibleVectorPolicySectionContent");
                 }}
+                tooltipContent={this.getContainerVectorPolicyTooltipContent()}
               >
                 <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
-                    Learn more
-                  </Link>
-                  <EditorReact
-                    language={"json"}
-                    content={this.state.vectorEmbeddingPolicy}
-                    isReadOnly={false}
-                    wordWrap={"on"}
-                    ariaLabel={"Editing container vector policy"}
-                    lineNumbers={"on"}
-                    scrollBeyondLastLine={false}
-                    spinnerClassName="panelSectionSpinner"
-                    monacoContainerStyles={{
-                      minHeight: 200,
-                    }}
-                    onContentChanged={(newVectorEmbeddingPolicy: string) =>
-                      this.setVectorEmbeddingPolicy(newVectorEmbeddingPolicy)
-                    }
-                  />
+                  <Stack styles={{ root: { paddingLeft: 40 } }}>
+                    <AddVectorEmbeddingPolicyForm
+                      vectorEmbedding={this.state.vectorEmbeddingPolicy}
+                      vectorIndex={this.state.vectorIndexingPolicy}
+                      onVectorEmbeddingChange={(
+                        vectorEmbeddingPolicy: DataModels.VectorEmbedding[],
+                        vectorIndexingPolicy: DataModels.VectorIndex[],
+                        vectorPolicyValidated: boolean,
+                      ) => {
+                        this.setState({ vectorEmbeddingPolicy, vectorIndexingPolicy, vectorPolicyValidated });
+                      }}
+                    />
+                  </Stack>
                 </Stack>
               </CollapsibleSectionComponent>
             </Stack>
@@ -1159,13 +1113,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
-  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: string): void {
+  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: DataModels.VectorEmbedding[]): void {
     this.setState({
       vectorEmbeddingPolicy,
     });
   }
 
-  private setVectorIndexingPolicy(vectorIndexingPolicy: string): void {
+  private setVectorIndexingPolicy(vectorIndexingPolicy: DataModels.VectorIndex[]): void {
     this.setState({
       vectorIndexingPolicy,
     });
@@ -1251,6 +1205,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
+  private getContainerVectorPolicyTooltipContent(): JSX.Element {
+    return (
+      <Text variant="small">
+        Describe any properties in your data that contain vectors, so that they can be made available for similarity
+        queries.{" "}
+        <Link target="_blank" href="https://aka.ms/CosmosDBVectorSetup">
+          Learn more
+        </Link>
+      </Text>
+    );
+  }
+
   private shouldShowCollectionThroughputInput(): boolean {
     if (isServerlessAccount()) {
       return false;
@@ -1370,20 +1336,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    if (this.shouldShowVectorSearchParameters()) {
-      try {
-        JSON.parse(this.state.vectorIndexingPolicy) as DataModels.IndexingPolicy;
-      } catch (e) {
-        this.setState({ errorMessage: "Invalid JSON format for indexingPolicy" });
-        return false;
-      }
-
-      try {
-        JSON.parse(this.state.vectorEmbeddingPolicy) as DataModels.VectorEmbeddingPolicy;
-      } catch (e) {
-        this.setState({ errorMessage: "Invalid JSON format for vectorEmbeddingPolicy" });
-        return false;
-      }
+    if (this.shouldShowVectorSearchParameters() && !this.state.vectorPolicyValidated) {
+      this.setState({ errorMessage: "Please fix errors in container vector policy" });
+      return false;
     }
 
     return true;
@@ -1461,15 +1416,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         }
       : undefined;
 
-    let indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
+    const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
       ? AllPropertiesIndexed
       : SharedDatabaseDefault;
 
     let vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
 
     if (this.shouldShowVectorSearchParameters()) {
-      indexingPolicy = JSON.parse(this.state.vectorIndexingPolicy);
-      vectorEmbeddingPolicy = JSON.parse(this.state.vectorEmbeddingPolicy);
+      indexingPolicy.vectorIndexes = this.state.vectorIndexingPolicy;
+      vectorEmbeddingPolicy = {
+        vectorEmbeddings: this.state.vectorEmbeddingPolicy,
+      };
     }
 
     const telemetryData = {
diff --git a/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx b/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx
new file mode 100644
index 000000000..400725749
--- /dev/null
+++ b/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx
@@ -0,0 +1,84 @@
+import "@testing-library/jest-dom/extend-expect";
+import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import React from "react";
+import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
+
+const mockVectorEmbedding: VectorEmbedding[] = [
+  { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
+];
+
+const mockVectorIndex: VectorIndex[] = [{ path: "/vector1", type: "flat" }];
+
+const mockOnVectorEmbeddingChange = jest.fn();
+
+describe("AddVectorEmbeddingPolicyForm", () => {
+  let component: RenderResult;
+
+  beforeEach(() => {
+    component = render(
+      <AddVectorEmbeddingPolicyForm
+        vectorEmbedding={mockVectorEmbedding}
+        vectorIndex={mockVectorIndex}
+        onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
+      />,
+    );
+  });
+
+  test("renders correctly", () => {
+    expect(screen.getByText("Vector embedding 1")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("/vector1")).toBeInTheDocument();
+  });
+
+  test("calls onVectorEmbeddingChange on adding a new vector embedding", () => {
+    fireEvent.click(screen.getByText("Add vector embedding"));
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+  });
+
+  test("calls onDelete when delete button is clicked", async () => {
+    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
+    fireEvent.click(deleteButton);
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+    expect(screen.queryByText("Vector embedding 1")).toBeNull();
+  });
+
+  test("calls onVectorEmbeddingPathChange on input change", () => {
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/newPath" } });
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+  });
+
+  test("validates input correctly", async () => {
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
+    await waitFor(() => expect(screen.getByText("Vector embedding path should not be empty")).toBeInTheDocument(), {
+      timeout: 1500,
+    });
+    await waitFor(
+      () =>
+        expect(
+          screen.getByText("Vector embedding dimension must be greater than 0 and less than or equal 4096"),
+        ).toBeInTheDocument(),
+      {
+        timeout: 1500,
+      },
+    );
+    fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
+    await waitFor(() => expect(screen.queryByText("Vector embedding path should not be empty")).toBeNull(), {
+      timeout: 1500,
+    });
+    await waitFor(
+      () => expect(screen.queryByText("Maximum allowed dimension for flat index is 505")).toBeInTheDocument(),
+      {
+        timeout: 1500,
+      },
+    );
+  });
+
+  test("duplicate vector path is not allowed", async () => {
+    fireEvent.click(screen.getByText("Add vector embedding"));
+    fireEvent.change(component.container.querySelector("#vector-policy-path-2"), { target: { value: "/vector1" } });
+    await waitFor(() => expect(screen.queryByText("Vector embedding path is already defined")).toBeNull(), {
+      timeout: 1500,
+    });
+  });
+});
diff --git a/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx b/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx
new file mode 100644
index 000000000..a5012cad5
--- /dev/null
+++ b/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx
@@ -0,0 +1,300 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  IconButton,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import {
+  getDataTypeOptions,
+  getDistanceFunctionOptions,
+  getIndexTypeOptions,
+} from "Explorer/Panes/VectorSearchPanel/VectorSearchUtils";
+import React, { FunctionComponent, useState } from "react";
+
+export interface IAddVectorEmbeddingPolicyFormProps {
+  vectorEmbedding: VectorEmbedding[];
+  vectorIndex: VectorIndex[];
+  onVectorEmbeddingChange: (
+    vectorEmbeddings: VectorEmbedding[],
+    vectorIndexingPolicies: VectorIndex[],
+    validationPassed: boolean,
+  ) => void;
+}
+
+export interface VectorEmbeddingPolicyData {
+  path: string;
+  dataType: VectorEmbedding["dataType"];
+  distanceFunction: VectorEmbedding["distanceFunction"];
+  dimensions: number;
+  indexType: VectorIndex["type"] | "none";
+  pathError: string;
+  dimensionsError: string;
+}
+
+type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const AddVectorEmbeddingPolicyForm: FunctionComponent<IAddVectorEmbeddingPolicyFormProps> = ({
+  vectorEmbedding,
+  vectorIndex,
+  onVectorEmbeddingChange,
+}): JSX.Element => {
+  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Vector embedding path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      vectorEmbeddingPolicyData?.find(
+        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+          dataIndex !== index && vectorEmbedding.path === path,
+      )
+    ) {
+      error = "Vector embedding path is already defined";
+    }
+    return error;
+  };
+
+  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+    let error = "";
+    if (dimension <= 0 || dimension > 4096) {
+      error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
+    }
+    if (indexType === "flat" && dimension > 505) {
+      error = "Maximum allowed dimension for flat index is 505";
+    }
+    return error;
+  };
+
+  const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
+    const mergedData: VectorEmbeddingPolicyData[] = [];
+    vectorEmbedding.forEach((embedding) => {
+      const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
+      mergedData.push({
+        ...embedding,
+        indexType: matchingIndex?.type || "none",
+        pathError: onVectorEmbeddingPathError(embedding.path),
+        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+      });
+    });
+    return mergedData;
+  };
+
+  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
+    initializeData(vectorEmbedding, vectorIndex),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [vectorEmbeddingPolicyData]);
+
+  const propagateData = () => {
+    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+      dataType: policy.dataType,
+      dimensions: policy.dimensions,
+      distanceFunction: policy.distanceFunction,
+      path: policy.path,
+    }));
+    const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
+      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+      .map(
+        (policy) =>
+          ({
+            path: policy.path,
+            type: policy.indexType,
+          }) as VectorIndex,
+      );
+    const validationPassed = vectorEmbeddingPolicyData.every(
+      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+    );
+    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
+  };
+
+  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
+      vectorEmbeddings[index].path = "/" + value;
+    } else {
+      vectorEmbeddings[index].path = value;
+    }
+    const error = onVectorEmbeddingPathError(value, index);
+    vectorEmbeddings[index].pathError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].dimensions = value;
+    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].indexType = option.key as never;
+    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingPolicyChange = (
+    index: number,
+    option: IDropdownOption,
+    property: VectorEmbeddingPolicyProperty,
+  ): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index][property] = option.key as never;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onAdd = () => {
+    setVectorEmbeddingPolicyData([
+      ...vectorEmbeddingPolicyData,
+      {
+        path: "",
+        dataType: "float32",
+        distanceFunction: "euclidean",
+        dimensions: 0,
+        indexType: "none",
+        pathError: onVectorEmbeddingPathError(""),
+        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      {vectorEmbeddingPolicyData.length > 0 &&
+        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+          <CollapsibleSectionComponent key={index} isExpandedByDefault={true} title={`Vector embedding ${index + 1}`}>
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Path</Label>
+                  <TextField
+                    id={`vector-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/vector1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
+                    value={vectorEmbeddingPolicy.path || ""}
+                    errorMessage={vectorEmbeddingPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Data type</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDataTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.dataType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "dataType")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Distance function</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDistanceFunctionOptions()}
+                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Dimensions</Label>
+                  <TextField
+                    id={`vector-policy-dimension-${index + 1}`}
+                    required={true}
+                    styles={textFieldStyles}
+                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      onVectorEmbeddingDimensionsChange(index, event)
+                    }
+                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Index type</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getIndexTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.indexType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingIndexTypeChange(index, option)
+                    }
+                  ></Dropdown>
+                </Stack>
+              </Stack>
+              <IconButton
+                id={`delete-vector-policy-${index + 1}`}
+                iconProps={{ iconName: "Delete" }}
+                style={{ height: 27, margin: "auto" }}
+                onClick={() => onDelete(index)}
+              />
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+        Add vector embedding
+      </DefaultButton>
+    </Stack>
+  );
+};
diff --git a/src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts b/src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts
new file mode 100644
index 000000000..0f5547aa7
--- /dev/null
+++ b/src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts
@@ -0,0 +1,16 @@
+import { IDropdownOption } from "@fluentui/react";
+
+const dataTypes = ["float32", "uint8", "int8"];
+const distanceFunctions = ["euclidean", "cosine", "dotproduct"];
+const indexTypes = ["none", "flat", "diskANN", "quantizedFlat"];
+
+export const getDataTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(dataTypes);
+export const getDistanceFunctionOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(distanceFunctions);
+export const getIndexTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(indexTypes);
+
+function createDropdownOptionsFromLiterals<T extends string>(literals: T[]): IDropdownOption[] {
+  return literals.map((value) => ({
+    key: value,
+    text: value,
+  }));
+}

From 1ba3a6c7613cce3e45109c6c455ec77ec6217fc7 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Tue, 11 Jun 2024 17:17:45 +0200
Subject: [PATCH 61/67] Tabs container now adapts its size with flex (#1867)

---
 less/documentDB.less | 118 +++++++++++++++++++++----------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/less/documentDB.less b/less/documentDB.less
index 00ffe2b0c..bf5f87e3e 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2366,9 +2366,9 @@ a:link {
 .tabsManagerContainer {
   height: 100%;
   flex-grow: 1;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   min-height: 300px;
-  overflow-y: scroll;
 }
 
 .tabs {
@@ -2671,7 +2671,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   font-weight: bolder;
   border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
@@ -2708,68 +2708,68 @@ a:link {
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
     .contentWrapper {
-        .flex-display();
-        width: @ContentWrapper;
-    
-        .statusIconContainer {
-          width: @StatusIconContainerSize;
-          height: @StatusIconContainerSize;
-          margin-left: @SmallSpace;
-          display: inline-flex;
-    
-          .errorIconContainer {
-            width: @ErrorIconContainer;
-            height: @ErrorIconContainer;
-            margin-top: 1px;
-    
-            .errorIcon {
-              width: @ErrorIconWidth;
-              height: @LoadingErrorIconSize;
-              background-image: url(../images/error_no_outline.svg);
-              background-repeat: no-repeat;
-              background-position: center;
-              background-size: 3px;
-              display: block;
-              margin: 1px 0px 0px 6px;
-            }
-          }
-    
-          .errorIconContainer.actionsEnabled {
-            &:hover {
-              .hover();
-            }
-    
-            &:focus {
-              .focus();
-            }
-    
-            &:active {
-              .active();
-            }
-          }
-    
-          .errorIconContainer[tabindex]:active {
-            outline: none;
-          }
-    
-          .loadingIcon {
-            width: @LoadingErrorIconSize;
+      .flex-display();
+      width: @ContentWrapper;
+
+      .statusIconContainer {
+        width: @StatusIconContainerSize;
+        height: @StatusIconContainerSize;
+        margin-left: @SmallSpace;
+        display: inline-flex;
+
+        .errorIconContainer {
+          width: @ErrorIconContainer;
+          height: @ErrorIconContainer;
+          margin-top: 1px;
+
+          .errorIcon {
+            width: @ErrorIconWidth;
             height: @LoadingErrorIconSize;
-            margin: 0px 0px @SmallSpace @SmallSpace;
+            background-image: url(../images/error_no_outline.svg);
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 3px;
+            display: block;
+            margin: 1px 0px 0px 6px;
           }
         }
-    
-        .tabNavText {
-          margin-left: @SmallSpace;
-          margin-right: 2px;
-          color: @BaseDark;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          flex-grow: 1;
+
+        .errorIconContainer.actionsEnabled {
+          &:hover {
+            .hover();
+          }
+
+          &:focus {
+            .focus();
+          }
+
+          &:active {
+            .active();
+          }
+        }
+
+        .errorIconContainer[tabindex]:active {
+          outline: none;
+        }
+
+        .loadingIcon {
+          width: @LoadingErrorIconSize;
+          height: @LoadingErrorIconSize;
+          margin: 0px 0px @SmallSpace @SmallSpace;
         }
       }
 
+      .tabNavText {
+        margin-left: @SmallSpace;
+        margin-right: 2px;
+        color: @BaseDark;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        flex-grow: 1;
+      }
+    }
+
     .tabIconSection {
       width: 29px;
       position: relative;

From 8c257423042d4b01788009ddce6ae7b384839f76 Mon Sep 17 00:00:00 2001
From: tarazou9 <40870773+tarazou9@users.noreply.github.com>
Date: Tue, 11 Jun 2024 16:01:46 -0400
Subject: [PATCH 62/67] Update UPAPI for Dedicated Gateway in Self Serve Portal
 (#1825)

Update UPAPI for Dedicated Gateway in Self Serve Portal
---
 src/Common/Constants.ts         |   1 +
 src/ConfigContext.ts            |   7 +++
 src/Contracts/ViewModels.ts     |   1 +
 src/SelfServe/SelfServe.tsx     |   1 +
 src/SelfServe/SqlX/SqlX.rp.ts   | 107 ++++++++++++++++++++++++++------
 src/SelfServe/SqlX/SqlX.tsx     |   6 +-
 src/SelfServe/SqlX/SqlxTypes.ts |  46 +++++++++++---
 src/Utils/arm/request.ts        |  49 +++++++++++++++
 8 files changed, 188 insertions(+), 30 deletions(-)

diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index d56f5087a..ff121f3a5 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -255,6 +255,7 @@ export class HttpHeaders {
   public static partitionKey: string = "x-ms-documentdb-partitionkey";
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+  public static xAPIKey: string = "X-API-Key";
 }
 
 export class ContentType {
diff --git a/src/ConfigContext.ts b/src/ConfigContext.ts
index 061f25286..05d859368 100644
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -42,6 +42,10 @@ export interface ConfigContext {
   ARM_API_VERSION: string;
   GRAPH_ENDPOINT: string;
   GRAPH_API_VERSION: string;
+  // This is the endpoint to get offering Ids to be used to fetch prices. Refer to this doc: https://learn.microsoft.com/en-us/rest/api/marketplacecatalog/dataplane/skus/list?view=rest-marketplacecatalog-dataplane-2023-05-01-preview&tabs=HTTP
+  CATALOG_ENDPOINT: string;
+  CATALOG_API_VERSION: string;
+  CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
@@ -93,6 +97,9 @@ let configContext: Readonly<ConfigContext> = {
   ARM_API_VERSION: "2016-06-01",
   GRAPH_ENDPOINT: "https://graph.microsoft.com",
   GRAPH_API_VERSION: "1.6",
+  CATALOG_ENDPOINT: "https://catalogapi.azure.com/",
+  CATALOG_API_VERSION: "2023-05-01-preview",
+  CATALOG_API_KEY: "",
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index af69452f1..04afc10bb 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -425,6 +425,7 @@ export interface SelfServeFrameInputs {
   authorizationToken: string;
   csmEndpoint: string;
   flights?: readonly string[];
+  catalogAPIKey: string;
 }
 
 export class MonacoEditorSettings {
diff --git a/src/SelfServe/SelfServe.tsx b/src/SelfServe/SelfServe.tsx
index f663a3ef9..932951b34 100644
--- a/src/SelfServe/SelfServe.tsx
+++ b/src/SelfServe/SelfServe.tsx
@@ -117,6 +117,7 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
   updateConfigContext({
     ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
+    CATALOG_API_KEY: inputs.catalogAPIKey,
   });
 
   updateUserContext({
diff --git a/src/SelfServe/SqlX/SqlX.rp.ts b/src/SelfServe/SqlX/SqlX.rp.ts
index 9cb430971..66675f7a6 100644
--- a/src/SelfServe/SqlX/SqlX.rp.ts
+++ b/src/SelfServe/SqlX/SqlX.rp.ts
@@ -1,11 +1,15 @@
 import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
-import { armRequestWithoutPolling } from "../../Utils/arm/request";
+import { get } from "../../Utils/arm/generatedClients/cosmos/locations";
+import { armRequestWithoutPolling, getOfferingIdsRequest } from "../../Utils/arm/request";
 import { selfServeTraceFailure, selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
 import { RefreshResult } from "../SelfServeTypes";
 import SqlX from "./SqlX";
 import {
   FetchPricesResponse,
+  GetOfferingIdsResponse,
+  OfferingIdMap,
+  OfferingIdRequest,
   PriceMapAndCurrencyCode,
   RegionItem,
   RegionsResponse,
@@ -166,11 +170,21 @@ export const getRegions = async (): Promise<Array<RegionItem>> => {
   }
 };
 
+export const getRegionShortName = async (regionDisplayName: string): Promise<string> => {
+  const locationsList = await get(userContext.subscriptionId, regionDisplayName);
+
+  if ("id" in locationsList) {
+    const locationId = locationsList.id;
+    return locationId.substring(locationId.lastIndexOf("/") + 1);
+  }
+  return undefined;
+};
+
 const getFetchPricesPathForRegion = (subscriptionId: string): string => {
   return `/subscriptions/${subscriptionId}/providers/Microsoft.CostManagement/fetchPrices`;
 };
 
-export const getPriceMapAndCurrencyCode = async (regions: Array<RegionItem>): Promise<PriceMapAndCurrencyCode> => {
+export const getPriceMapAndCurrencyCode = async (map: OfferingIdMap): Promise<PriceMapAndCurrencyCode> => {
   const telemetryData = {
     feature: "Calculate approximate cost",
     function: "getPriceMapAndCurrencyCode",
@@ -181,39 +195,94 @@ export const getPriceMapAndCurrencyCode = async (regions: Array<RegionItem>): Pr
 
   try {
     const priceMap = new Map<string, Map<string, number>>();
-    let currencyCode;
-    for (const regionItem of regions) {
+    let billingCurrency;
+    for (const region of map.keys()) {
       const regionPriceMap = new Map<string, number>();
+      const regionShortName = await getRegionShortName(region);
+      const requestBody: OfferingIdRequest = {
+        location: regionShortName,
+        ids: Array.from(map.get(region).keys()),
+      };
 
       const response = await armRequestWithoutPolling<FetchPricesResponse>({
         host: configContext.ARM_ENDPOINT,
         path: getFetchPricesPathForRegion(userContext.subscriptionId),
         method: "POST",
-        apiVersion: "2020-01-01-preview",
-        queryParams: {
-          filter:
-            "armRegionName eq '" +
-            regionItem.locationName.split(" ").join("").toLowerCase() +
-            "' and serviceFamily eq 'Databases' and productName eq 'Azure Cosmos DB Dedicated Gateway - General Purpose'",
-        },
+        apiVersion: "2023-04-01-preview",
+        body: requestBody,
       });
 
-      for (const item of response.result.Items) {
-        if (currencyCode === undefined) {
-          currencyCode = item.currencyCode;
-        } else if (item.currencyCode !== currencyCode) {
+      for (const item of response.result) {
+        if (item.error) {
+          continue;
+        }
+
+        if (billingCurrency === undefined) {
+          billingCurrency = item.billingCurrency;
+        } else if (item.billingCurrency !== billingCurrency) {
           throw Error("Currency Code Mismatch: Currency code not same for all regions / skus.");
         }
-        regionPriceMap.set(item.skuName, item.retailPrice);
+
+        const offeringId = item.id;
+        const skuName = map.get(region).get(offeringId);
+        const unitPriceinBillingCurrency = item.prices.find((x) => x.type === "Consumption")
+          ?.unitPriceinBillingCurrency;
+        regionPriceMap.set(skuName, unitPriceinBillingCurrency);
       }
-      priceMap.set(regionItem.locationName, regionPriceMap);
+      priceMap.set(region, regionPriceMap);
     }
 
     selfServeTraceSuccess(telemetryData, getPriceMapAndCurrencyCodeTimestamp);
-    return { priceMap: priceMap, currencyCode: currencyCode };
+    return { priceMap: priceMap, billingCurrency: billingCurrency };
   } catch (err) {
     const failureTelemetry = { err, selfServeClassName: SqlX.name };
     selfServeTraceFailure(failureTelemetry, getPriceMapAndCurrencyCodeTimestamp);
-    return { priceMap: undefined, currencyCode: undefined };
+    return { priceMap: undefined, billingCurrency: undefined };
+  }
+};
+
+const getOfferingIdPathForRegion = (): string => {
+  return `/skus?serviceFamily=Databases&service=Azure Cosmos DB`;
+};
+
+export const getOfferingIds = async (regions: Array<RegionItem>): Promise<OfferingIdMap> => {
+  const telemetryData = {
+    feature: "Get Offering Ids to calculate approximate cost",
+    function: "getOfferingIds",
+    description: "fetch offering ids API call",
+    selfServeClassName: SqlX.name,
+  };
+  const getOfferingIdsCodeTimestamp = selfServeTraceStart(telemetryData);
+
+  try {
+    const offeringIdMap = new Map<string, Map<string, string>>();
+    for (const regionItem of regions) {
+      const regionOfferingIdMap = new Map<string, string>();
+      const regionShortName = await getRegionShortName(regionItem.locationName);
+
+      const response = await getOfferingIdsRequest<GetOfferingIdsResponse>({
+        host: configContext.CATALOG_ENDPOINT,
+        path: getOfferingIdPathForRegion(),
+        method: "GET",
+        apiVersion: "2023-05-01-preview",
+        queryParams: {
+          filter: "armRegionName eq '" + regionShortName + "'",
+        },
+      });
+
+      for (const item of response.result.items) {
+        if (item.offeringProperties?.length > 0) {
+          regionOfferingIdMap.set(item.offeringProperties[0].offeringId, item.skuName);
+        }
+      }
+      offeringIdMap.set(regionItem.locationName, regionOfferingIdMap);
+    }
+
+    selfServeTraceSuccess(telemetryData, getOfferingIdsCodeTimestamp);
+    return offeringIdMap;
+  } catch (err) {
+    const failureTelemetry = { err, selfServeClassName: SqlX.name };
+    selfServeTraceFailure(failureTelemetry, getOfferingIdsCodeTimestamp);
+    return undefined;
   }
 };
diff --git a/src/SelfServe/SqlX/SqlX.tsx b/src/SelfServe/SqlX/SqlX.tsx
index 8f2954865..cbac4ef04 100644
--- a/src/SelfServe/SqlX/SqlX.tsx
+++ b/src/SelfServe/SqlX/SqlX.tsx
@@ -24,6 +24,7 @@ import { BladeType, generateBladeLink } from "../SelfServeUtils";
 import {
   deleteDedicatedGatewayResource,
   getCurrentProvisioningState,
+  getOfferingIds,
   getPriceMapAndCurrencyCode,
   getRegions,
   refreshDedicatedGatewayProvisioning,
@@ -370,9 +371,10 @@ export default class SqlX extends SelfServeBaseClass {
     });
 
     regions = await getRegions();
-    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(regions);
+    const offeringIdMap = await getOfferingIds(regions);
+    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(offeringIdMap);
     priceMap = priceMapAndCurrencyCode.priceMap;
-    currencyCode = priceMapAndCurrencyCode.currencyCode;
+    currencyCode = priceMapAndCurrencyCode.billingCurrency;
 
     const response = await getCurrentProvisioningState();
     if (response.status && response.status !== "Deleting") {
diff --git a/src/SelfServe/SqlX/SqlxTypes.ts b/src/SelfServe/SqlX/SqlxTypes.ts
index 3360df734..d06b1844d 100644
--- a/src/SelfServe/SqlX/SqlxTypes.ts
+++ b/src/SelfServe/SqlX/SqlxTypes.ts
@@ -30,23 +30,51 @@ export type UpdateDedicatedGatewayRequestProperties = {
   serviceType: string;
 };
 
-export type FetchPricesResponse = {
-  Items: Array<PriceItem>;
-  NextPageLink: string | undefined;
-  Count: number;
+export type FetchPricesResponse = Array<PriceItem>;
+
+export type PriceItem = {
+  prices: Array<PriceType>;
+  id: string;
+  billingCurrency: string;
+  error: PriceError;
+};
+
+export type PriceType = {
+  type: string;
+  unitPriceinBillingCurrency: number;
+};
+
+export type PriceError = {
+  type: string;
+  description: string;
 };
 
 export type PriceMapAndCurrencyCode = {
   priceMap: Map<string, Map<string, number>>;
-  currencyCode: string;
+  billingCurrency: string;
 };
 
-export type PriceItem = {
-  retailPrice: number;
-  skuName: string;
-  currencyCode: string;
+export type GetOfferingIdsResponse = {
+  items: Array<OfferingIdItem>;
+  nextPageLink: string | undefined;
 };
 
+export type OfferingIdItem = {
+  skuName: string;
+  offeringProperties: Array<OfferingProperties>;
+};
+
+export type OfferingProperties = {
+  offeringId: string;
+};
+
+export type OfferingIdRequest = {
+  ids: Array<string>;
+  location: string;
+};
+
+export type OfferingIdMap = Map<string, Map<string, string>>;
+
 export type RegionsResponse = {
   properties: RegionsProperties;
 };
diff --git a/src/Utils/arm/request.ts b/src/Utils/arm/request.ts
index 69391201b..399900ca3 100644
--- a/src/Utils/arm/request.ts
+++ b/src/Utils/arm/request.ts
@@ -160,3 +160,52 @@ async function getOperationStatus(operationStatusUrl: string) {
   }
   throw new Error(`Operation Response: ${JSON.stringify(body)}. Retrying.`);
 }
+
+export async function getOfferingIdsRequest<T>({
+  host,
+  path,
+  apiVersion,
+  method,
+  body: requestBody,
+  queryParams,
+}: Options): Promise<{ result: T; operationStatusUrl: string }> {
+  const url = new URL(path, host);
+  url.searchParams.append("api-version", configContext.armAPIVersion || apiVersion);
+  if (queryParams) {
+    queryParams.filter && url.searchParams.append("$filter", queryParams.filter);
+    queryParams.metricNames && url.searchParams.append("metricnames", queryParams.metricNames);
+  }
+
+  if (!configContext.CATALOG_API_KEY) {
+    throw new Error("No catalog API key provided");
+  }
+
+  const response = await window.fetch(url.href, {
+    method,
+    headers: {
+      [HttpHeaders.xAPIKey]: configContext.CATALOG_API_KEY,
+    },
+    body: requestBody ? JSON.stringify(requestBody) : undefined,
+  });
+  if (!response.ok) {
+    let error: ARMError;
+    try {
+      const errorResponse = (await response.json()) as ParsedErrorResponse;
+      if ("error" in errorResponse) {
+        error = new ARMError(errorResponse.error.message);
+        error.code = errorResponse.error.code;
+      } else {
+        error = new ARMError(errorResponse.message);
+        error.code = errorResponse.code;
+      }
+    } catch (error) {
+      throw new Error(await response.text());
+    }
+
+    throw error;
+  }
+
+  const operationStatusUrl = (response.headers && response.headers.get("location")) || "";
+  const responseBody = (await response.json()) as T;
+  return { result: responseBody, operationStatusUrl: operationStatusUrl };
+}

From b8d6a0188af4eae84d10d4ece196527adff0aa28 Mon Sep 17 00:00:00 2001
From: jawelton74 <103591340+jawelton74@users.noreply.github.com>
Date: Wed, 12 Jun 2024 12:32:48 -0700
Subject: [PATCH 63/67] Add more details to the E2E Test README. Configure
 dev/test to use MPAC (#1869)

instances of the new backend services.
---
 src/ConfigContext.ts |  3 +++
 test/README.md       | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/ConfigContext.ts b/src/ConfigContext.ts
index 05d859368..564e905ba 100644
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -199,6 +199,9 @@ if (process.env.NODE_ENV === "development") {
   updateConfigContext({
     PROXY_PATH: "/proxy",
     EMULATOR_ENDPOINT: "https://localhost:8081",
+    PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
+    MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
+    CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Mpac,
   });
 }
 
diff --git a/test/README.md b/test/README.md
index 9a3e3e622..4786f95de 100644
--- a/test/README.md
+++ b/test/README.md
@@ -33,9 +33,11 @@ All you need to provide is a resource group to deploy in to.
 
 To use this script, there are a few prerequisites that must be done at least once:
 
-1. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
-2. Connect to your Azure account using `Connect-AzAccount`.
-3. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
+1. This script requires Powershell 7+. Install it [here](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows).
+2. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
+3. [Install Bicep CLI](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/install#install-manually) if it is not already installed.
+4. Connect to your Azure account using `Connect-AzAccount`.
+5. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
 
 ```powershell
 .\test\resources\create-resource-group.ps1 -SubscriptionName "My Subscription" -Location "West US 3"
@@ -120,6 +122,14 @@ Configuring for E2E Testing
 
 ## Running the tests
 
+If Azure CLI is not installed, please [install it](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli).
+
+Log into Az CLI with the following command:
+
+```powershell
+az login --scope https://management.core.windows.net//.default
+```
+
 To run all tests in a headless browser, run the following command from the root of the repo:
 
 ```powershell
@@ -140,4 +150,4 @@ npx playwright test --ui
 
 The UI allows you to select a specific test to run and to see the results of the test in the browser.
 
-See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.
\ No newline at end of file
+See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.

From 7570d6b91d9da694500f0abd464540121b57f741 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Wed, 12 Jun 2024 22:46:22 -0500
Subject: [PATCH 64/67] handle sampledb error handling to load the data
 explorer (#1870)

---
 src/Explorer/Explorer.tsx                     | 32 +++++++++++--------
 .../Panes/SettingsPane/SettingsPane.tsx       |  6 +++-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index b20d1b78c..bb198e6c3 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1157,21 +1157,25 @@ export default class Explorer {
   }
 
   public async refreshSampleData(): Promise<void> {
-    if (!userContext.sampleDataConnectionInfo) {
+    try {
+      if (!userContext.sampleDataConnectionInfo) {
+        return;
+      }
+      const collection: DataModels.Collection = await readSampleCollection();
+      if (!collection) {
+        return;
+      }
+
+      const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+      if (!databaseId) {
+        return;
+      }
+
+      const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+      useDatabases.setState({ sampleDataResourceTokenCollection });
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "Explorer");
       return;
     }
-
-    const collection: DataModels.Collection = await readSampleCollection();
-    if (!collection) {
-      return;
-    }
-
-    const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
-    if (!databaseId) {
-      return;
-    }
-
-    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
-    useDatabases.setState({ sampleDataResourceTokenCollection });
   }
 }
diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index ff96d6716..320a10015 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -12,6 +12,7 @@ import * as Constants from "Common/Constants";
 import { SplitterDirection } from "Common/Splitter";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { configContext } from "ConfigContext";
+import { useDatabases } from "Explorer/useDatabases";
 import {
   DefaultRUThreshold,
   LocalStorageUtility,
@@ -107,7 +108,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
   const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  const shouldShowCopilotSampleDBOption = userContext.apiType === "SQL" && useQueryCopilot.getState().copilotEnabled;
+  const shouldShowCopilotSampleDBOption =
+    userContext.apiType === "SQL" &&
+    useQueryCopilot.getState().copilotEnabled &&
+    useDatabases.getState().sampleDataResourceTokenCollection;
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 

From dabb91e9e9ecedf9471f78570b4b17d0ab02458f Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:20:59 +0530
Subject: [PATCH 65/67] [accessibility-3101316]:[Programmatic Access - Azure
 Cosmos DB - Data Explorer]: 'Recents', 'Top 3 things you need to know' and
 'Learning Resources' text appears as a heading but is not defined
 programmatically under 'Data Explorer' pane. (#1845)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/SplashScreen/SplashScreen.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index 0ed9351ae..e3de8c503 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -355,15 +355,15 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               ) : (
                 <div className="moreStuffContainer">
                   <div className="moreStuffColumn commonTasks">
-                    <div className="title">Recents</div>
+                    <h2 className="title">Recents</h2>
                     {this.getRecentItems()}
                   </div>
                   <div className="moreStuffColumn">
-                    <div className="title">Top 3 things you need to know</div>
+                    <h2 className="title">Top 3 things you need to know</h2>
                     {this.top3Items()}
                   </div>
                   <div className="moreStuffColumn tipsContainer">
-                    <div className="title">Learning Resources</div>
+                    <h2 className="title">Learning Resources</h2>
                     {this.getLearningResourceItems()}
                   </div>
                 </div>

From 7e1a738f8e2bf5e9d1ccd36c816a1ec02fb07c06 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:21:49 +0530
Subject: [PATCH 66/67] [accessibility-2819505]:[Programmatic access - Cosmos
 DB Query Copilot - Copilot]: "Read preview terms" link does not meet minimum
 contrast ratio 3:1 with the surrounding text. (#1858)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index 6c54cd506..58a2ba0f8 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -504,7 +504,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               {!showFeedbackBar && (
                 <Text style={{ fontSize: 12 }}>
                   AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-                  <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
+                  <Link
+                    href="https://aka.ms/cdb-copilot-preview-terms"
+                    target="_blank"
+                    style={{ color: "#0072D4" }}
+                    className="underlinedLink"
+                  >
                     Read preview terms
                   </Link>
                   {showErrorMessageBar && (

From e66c8a1b5cff246213391da57fa44b5fc2fca758 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:23:19 +0530
Subject: [PATCH 67/67] [accessibility-1249101]:[Usable - Azure Cosmos DB - New
 Keyspace]: Link "capacity calculator" overlaps with the keyboard focus
 indicator boundary and not visible properly. (#1866)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/Controls/ThroughputInput/ThroughputInput.less  | 4 ++++
 src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx   | 2 +-
 .../__snapshots__/ThroughputInput.test.tsx.snap             | 6 +++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
index ae7e873fa..059b210f6 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -20,6 +20,10 @@
   outline-offset: 2px;
 }
 
+.outlineNone{
+  outline: none !important;
+}
+
 .copyQuery:focus::after,
 .deleteQuery:focus::after {
   outline: none !important;
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 527592b0e..2001700ad 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -223,7 +223,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
             <Link
-              className="underlinedLink"
+              className="underlinedLink outlineNone"
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index 110f15955..eb21939c9 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
@@ -733,13 +733,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
-              className="underlinedLink"
+              className="underlinedLink outlineNone"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
-                className="underlinedLink"
+                className="underlinedLink outlineNone"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -1019,7 +1019,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link underlinedLink root-117"
+                  className="ms-Link underlinedLink outlineNone root-117"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"