fix tab wrapping with a lil' css tweak (#2013)

* Replaced monaco editor on Container Vector Policy tab with controls same as on create container ux

* Adds vector embedding policy to container management. Adds FullTextSearch to both add container and container management.

* Fixing unit tests and formatting issues

* More fixes

* Updating full text controls based on feedback

* Minor updates

* Editing test to fix compile issue

* Minor fix

* Adding paths for jest to ignore transform due to recent changes in upstream dependencies

* Adding mock to temporarily get unit tests to pass

* Hiding FTS feature behind the new EnableNoSQLFullTextSearch capability

.github/PULL_REQUEST_TEMPLATE.md

@@ -1 +1 @@
-[Preview this branch](https://dataexplorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)
+[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)

.github/workflows/ci.yml

@@ -83,7 +83,7 @@ jobs:
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
-        uses: actions/cache@v4
+        uses: actions/cache@v2
         with:
           path: .cache
           key: ${{ runner.os }}-build-cache
@@ -92,20 +92,18 @@ jobs:
           NODE_OPTIONS: "--max-old-space-size=4096"
       - run: cp -r ./Contracts ./dist/contracts
       - run: cp -r ./configs ./dist/configs
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
         with:
           name: dist
           path: dist/
-      - name: "Az CLI login"
-        uses: azure/login@v1
-        with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.PREVIEW_SUBSCRIPTION_ID }}
       - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name ${{ secrets.PREVIEW_STORAGE_ACCOUNT_NAME }} --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --auth-mode login --overwrite true
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
       - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name ${{ secrets.PREVIEW_STORAGE_ACCOUNT_NAME }} --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --auth-mode login --overwrite true
+        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 }}
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -115,21 +113,21 @@ jobs:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
       AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
     steps:
+      - uses: nuget/setup-nuget@v1
+        with:
+          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v3
         with:
           name: dist
       - run: cp ./configs/prod.json config.json
-      - run: dotnet nuget add source "$NUGET_SOURCE" --name "ADO" --username "jawelton@microsoft.com" --password "$AZURE_DEVOPS_PAT" --store-password-in-clear-text
-      - run: dotnet pack DataExplorer.proj /p:PackageVersion="2.0.0-github-${GITHUB_SHA}"
-      - run: dotnet nuget push "bin/Release/*.nupkg" --skip-duplicate --api-key Az --source="$NUGET_SOURCE"
-      - run: dotnet nuget remove source "ADO"
-      - uses: actions/upload-artifact@v4
-        name: Upload package to Artifacts
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - uses: actions/upload-artifact@v3
+        name: packages
         with:
-          name: prod-package
-          path: "bin/Release/*.nupkg"
-
+          path: "*.nupkg"
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -139,21 +137,22 @@ jobs:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
       AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
     steps:
+      - uses: nuget/setup-nuget@v1
+        with:
+          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v3
         with:
           name: dist
       - run: cp ./configs/mpac.json config.json
       - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
-      - run: dotnet nuget add source "$NUGET_SOURCE" --name "ADO" --username "jawelton@microsoft.com" --password "$AZURE_DEVOPS_PAT" --store-password-in-clear-text
-      - run: dotnet pack DataExplorer.proj /p:PackageVersion="2.0.0-github-${GITHUB_SHA}"
-      - run: dotnet nuget push "bin/Release/*.nupkg" --skip-duplicate --api-key Az --source="$NUGET_SOURCE"
-      - run: dotnet nuget remove source "ADO"
-      - uses: actions/upload-artifact@v4
-        name: Upload package to Artifacts
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - uses: actions/upload-artifact@v3
+        name: packages
         with:
-          name: mpac-package
-          path: "bin/Release/*.nupkg"
+          path: "*.nupkg"
 
   playwright-tests:
     name: "Run Playwright Tests (Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})"
@@ -186,9 +185,9 @@ jobs:
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
-          name: blob-report-${{ matrix.shardIndex }}
-          path: blob-report
-          retention-days: 1
+            name: blob-report-${{ matrix.shardIndex }}
+            path: blob-report
+            retention-days: 1
 
   merge-playwright-reports:
     name: "Merge Playwright Reports"
@@ -198,26 +197,26 @@ jobs:
 
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install dependencies
-        run: npm ci
+    - 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: 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: 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
+    - name: Upload HTML report
+      uses: actions/upload-artifact@v4
+      with:
+        name: html-report--attempt-${{ github.run_attempt }}
+        path: playwright-report
+        retention-days: 14

.gitignore

@@ -21,5 +21,3 @@ GettingStarted-ignore*.ipynb
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-/.vs/cosmos-explorer
-/.vs/slnx.sqlite-journal

DataExplorer.proj

@@ -1,9 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk">
-  <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <NoBuild>true</NoBuild>
-    <IncludeBuildOutput>false</IncludeBuildOutput>
-    <NuspecFile>DataExplorer.nuspec</NuspecFile>
-    <NuspecProperties>version=$(PackageVersion)</NuspecProperties>
-  </PropertyGroup>
-</Project>

less/Common/Constants.less

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

less/documentDB.less

@@ -1830,14 +1830,6 @@ input::-webkit-calendar-picker-indicator::after {
   transform: rotate(90deg);
 }
 
-.customAccordion button:focus {
-  .focus();
-}
-
-.customAccordion {
-  margin-top: 1px;
-}
-
 .datalist-arrow:after:hover {
   content: "\276F";
   position: absolute;

package.json

@@ -7,7 +7,8 @@
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "4.2.0-beta.1",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "4.5.0",
+    "@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",
     "@babel/plugin-proposal-decorators": "7.12.12",
@@ -81,7 +82,7 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
-    "p-retry": "6.2.1",
+    "p-retry": "4.6.2",
     "patch-package": "8.0.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
@@ -116,7 +117,7 @@
     "@babel/preset-env": "7.24.7",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.44.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -169,10 +170,10 @@
     "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
     "jest-circus": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
     "jest-html-loader": "1.0.0",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "3.0.2",
+    "jest-environment-jsdom": "29.7.0",
     "less": "3.8.1",
     "less-loader": "11.1.3",
     "less-vars-loader": "1.1.0",

preview/.azure/config

@@ -1,7 +1,7 @@
 [defaults]
-group = dataexplorer-preview
-sku = P1V2
-appserviceplan = dataexplorer-preview
-location = westus2
-web = dataexplorer-preview
+group = stfaul
+sku = P1v2
+appserviceplan = stfaul_asp_Linux_centralus_0
+location = centralus
+web = cosmos-explorer-preview
 

preview/README.md

@@ -4,8 +4,8 @@ Cosmos Explorer Preview makes it possible to try a working version of any commit
 
 Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
 
-Connection string URLs: https://dataexplorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
-Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://dataexplorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
+Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
+Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
 
 In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
 

preview/config.json

@@ -1,4 +1,4 @@
 {
   "PROXY_PATH": "/proxy",
-  "msalRedirectURI": "https://dataexplorer-preview.azurewebsites.net/"
+  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
 }

preview/index.js

@@ -3,15 +3,8 @@ const { createProxyMiddleware } = require("http-proxy-middleware");
 const port = process.env.PORT || 3000;
 const fetch = require("node-fetch");
 
-const backendEndpoint = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
-const previewSiteEndpoint = "https://dataexplorer-preview.azurewebsites.net";
-const previewStorageWebsiteEndpoint = "https://dataexplorerpreview.z5.web.core.windows.net/";
-const githubApiUrl = "https://api.github.com/repos/Azure/cosmos-explorer";
-const githubPullRequestUrl = "https://github.com/Azure/cosmos-explorer/pull";
-const azurePortalMpacEndpoint = "https://ms.portal.azure.com/";
-
-const api = createProxyMiddleware({
-  target: backendEndpoint,
+const api = createProxyMiddleware("/api", {
+  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
   changeOrigin: true,
   logLevel: "debug",
   bypass: (req, res) => {
@@ -22,8 +15,8 @@ const api = createProxyMiddleware({
   },
 });
 
-const proxy = createProxyMiddleware({
-  target: backendEndpoint,
+const proxy = createProxyMiddleware("/proxy", {
+  target: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
   changeOrigin: true,
   secure: false,
   logLevel: "debug",
@@ -34,38 +27,35 @@ const proxy = createProxyMiddleware({
   },
 });
 
-const commit = createProxyMiddleware({
-  target: previewStorageWebsiteEndpoint,
+const commit = createProxyMiddleware("/commit", {
+  target: "https://cosmosexplorerpreview.blob.core.windows.net",
   changeOrigin: true,
   secure: false,
   logLevel: "debug",
-  pathRewrite: { "^/commit": "/" },
+  pathRewrite: { "^/commit": "$web/" },
 });
 
 const app = express();
 
-app.use("/api", api);
-app.use("/proxy", proxy);
-app.use("/commit", commit);
+app.use(api);
+app.use(proxy);
+app.use(commit);
 app.get("/pull/:pr(\\d+)", (req, res) => {
   const pr = req.params.pr;
-  if (!/^\d+$/.test(pr)) {
-    return res.status(400).send("Invalid pull request number");
-  }
   const [, query] = req.originalUrl.split("?");
   const search = new URLSearchParams(query);
 
-  fetch(`${githubApiUrl}/pulls/${pr}`)
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
     .then((response) => response.json())
     .then(({ head: { ref, sha } }) => {
-      const prUrl = new URL(`${githubPullRequestUrl}/${pr}`);
+      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
       prUrl.hash = ref;
       search.set("feature.pr", prUrl.href);
 
-      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/explorer.html`);
+      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
       explorer.search = search.toString();
 
-      const portal = new URL(azurePortalMpacEndpoint);
+      const portal = new URL("https://ms.portal.azure.com/");
       portal.searchParams.set("dataExplorerSource", explorer.href);
 
       return res.redirect(portal.href);
@@ -73,10 +63,12 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
     .catch(() => res.sendStatus(500));
 });
 app.get("/", (req, res) => {
-  fetch(`${githubApiUrl}/branches/master`)
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
     .then((response) => response.json())
     .then(({ commit: { sha } }) => {
-      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/hostedExplorer.html`);
+      const explorer = new URL(
+        "https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/hostedExplorer.html"
+      );
       return res.redirect(explorer.href);
     })
     .catch(() => res.sendStatus(500));

preview/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "deploy": "az webapp up --name \"dataexplorer-preview\" --subscription \"cosmosdb-portalteam-runners\" --resource-group \"dataexplorer-preview\" --runtime \"NODE:18-lts\" --sku P1V2",
+    "deploy": "az webapp up --name \"cosmos-explorer-preview\" --subscription \"cosmosdb-portalteam-generaltest-msft\" --resource-group \"stfaul\"",
     "start": "node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -12,8 +12,7 @@
   "author": "Microsoft Corporation",
   "dependencies": {
     "express": "^4.17.1",
-    "http-proxy-middleware": "^3.0.3",
-    "node": "^18.20.6",
+    "http-proxy-middleware": "^1.1.0",
     "node-fetch": "^2.6.1"
   }
-}
+}

src/Common/Constants.ts

@@ -97,12 +97,6 @@ export enum CapacityMode {
   Serverless = "Serverless",
 }
 
-export enum WorkloadType {
-  Learning = "Learning",
-  DevelopmentTesting = "Development/Testing",
-  Production = "Production",
-  None = "None",
-}
 // flight names returned from the portal are always lowercase
 export class Flights {
   public static readonly SettingsV2 = "settingsv2";
@@ -125,7 +119,6 @@ export class AfecFeatures {
 
 export class TagNames {
   public static defaultExperience: string = "defaultExperience";
-  public static WorkloadType: string = "hidden-workload-type";
 }
 
 export class MongoDBAccounts {
@@ -156,7 +149,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";
@@ -525,15 +518,6 @@ export class PriorityLevel {
   public static readonly Default = "low";
 }
 
-export class ariaLabelForLearnMoreLink {
-  public static readonly AnalyticalStore = "Learn more about analytical store.";
-  public static readonly AzureSynapseLink = "Learn more about Azure Synapse Link.";
-}
-
-export class FeedbackLabels {
-  public static readonly provideFeedback: string = "Provide feedback";
-}
-
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 

src/Common/CosmosClient.ts

@@ -1,15 +1,14 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
-import { checkDatabaseResourceTokensValidity, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
+import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { AuthType } from "../AuthType";
-import { PriorityLevel } from "../Common/Constants";
+import { BackendApi, PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { FabricArtifactInfo, updateUserContext, userContext } from "../UserContext";
-import { isDataplaneRbacSupported } from "../Utils/APITypeUtils";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -20,7 +19,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
   if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
     Logger.logInfo(
       `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
@@ -43,7 +42,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
-  if (isFabricMirroredKey()) {
+  if (configContext.platform === Platform.Fabric) {
     switch (requestInfo.resourceType) {
       case Cosmos.ResourceType.conflicts:
       case Cosmos.ResourceType.container:
@@ -55,13 +54,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // User resource tokens
         // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = (
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-        ).resourceTokenInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(
-          (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
-            .resourceTokenInfo.resourceTokensTimestamp,
-        );
+        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -72,9 +66,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // For now, these operations aren't used, so fetching the authorization token is commented out.
         // This provider must return a real token to pass validation by the client, so we return the cached resource token
         // (which is a valid token, but won't work for these operations).
-        const resourceTokens2 = (
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-        ).resourceTokenInfo.resourceTokens;
+        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
         return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
 
       /* ************** TODO: Uncomment this code if we need to support these operations **************
@@ -133,6 +125,10 @@ export async function getTokenFromAuthService(
   resourceType: string,
   resourceId?: string,
 ): Promise<AuthorizationToken> {
+  if (!useNewPortalBackendEndpoint(BackendApi.RuntimeProxy)) {
+    return getTokenFromAuthService_ToBeDeprecated(verb, resourceType, resourceId);
+  }
+
   try {
     const host: string = configContext.PORTAL_BACKEND_ENDPOINT;
     const response: Response = await _global.fetch(host + "/api/connectionstring/runtimeproxy/authorizationtokens", {
@@ -155,6 +151,34 @@ export async function getTokenFromAuthService(
   }
 }
 
+export async function getTokenFromAuthService_ToBeDeprecated(
+  verb: string,
+  resourceType: string,
+  resourceId?: string,
+): Promise<AuthorizationToken> {
+  try {
+    const host = configContext.BACKEND_ENDPOINT;
+    const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-ms-encrypted-auth-token": userContext.accessToken,
+      },
+      body: JSON.stringify({
+        verb,
+        resourceType,
+        resourceId,
+      }),
+    });
+    //TODO I am not sure why we have to parse the JSON again here. fetch should do it for us when we call .json()
+    const result = JSON.parse(await response.json());
+    return result;
+  } catch (error) {
+    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${getErrorMessage(error)}`);
+    return Promise.reject(error);
+  }
+}
+
 // The Capability is a bitmap, which cosmosdb backend decodes as per the below enum
 enum SDKSupportedCapabilities {
   None = 0,
@@ -165,24 +189,13 @@ let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
   if (_client) {
-    if (!userContext.refreshCosmosClient) {
+    if (!userContext.hasDataPlaneRbacSettingChanged) {
       return _client;
     }
-    _client.dispose();
-    _client = null;
   }
-
-  if (userContext.refreshCosmosClient) {
-    updateUserContext({
-      refreshCosmosClient: false,
-    });
-  }
-
   let _defaultHeaders: Cosmos.CosmosHeaders = {};
-
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
-  _defaultHeaders["x-ms-cosmos-throughput-bucket"] = 1;
 
   if (
     userContext.authType === AuthType.ConnectionString ||

src/Common/DatabaseAccountUtility.test.ts

@@ -1,34 +0,0 @@
-import { WorkloadType } from "Common/Constants";
-import { getWorkloadType } from "Common/DatabaseAccountUtility";
-import { DatabaseAccount, Tags } from "Contracts/DataModels";
-import { updateUserContext } from "UserContext";
-
-describe("Database Account Utility", () => {
-  describe("Workload Type", () => {
-    beforeEach(() => {
-      updateUserContext({
-        databaseAccount: {
-          tags: {} as Tags,
-        } as DatabaseAccount,
-      });
-    });
-
-    it("Workload Type should return Learning", () => {
-      updateUserContext({
-        databaseAccount: {
-          tags: {
-            "hidden-workload-type": WorkloadType.Learning,
-          } as Tags,
-        } as DatabaseAccount,
-      });
-
-      const workloadType: WorkloadType = getWorkloadType();
-      expect(workloadType).toBe(WorkloadType.Learning);
-    });
-
-    it("Workload Type should return None", () => {
-      const workloadType: WorkloadType = getWorkloadType();
-      expect(workloadType).toBe(WorkloadType.None);
-    });
-  });
-});

src/Common/DatabaseAccountUtility.ts

@@ -1,5 +1,3 @@
-import { TagNames, WorkloadType } from "Common/Constants";
-import { Tags } from "Contracts/DataModels";
 import { userContext } from "../UserContext";
 
 function isVirtualNetworkFilterEnabled() {
@@ -17,12 +15,3 @@ function isPrivateEndpointConnectionsEnabled() {
 export function isPublicInternetAccessAllowed(): boolean {
   return !isVirtualNetworkFilterEnabled() && !isIpRulesEnabled() && !isPrivateEndpointConnectionsEnabled();
 }
-
-export function getWorkloadType(): WorkloadType {
-  const tags: Tags = userContext?.databaseAccount?.tags;
-  const workloadType: WorkloadType = tags && (tags[TagNames.WorkloadType] as WorkloadType);
-  if (!workloadType) {
-    return WorkloadType.None;
-  }
-  return workloadType;
-}

src/Common/MongoProxyClient.test.ts

@@ -4,8 +4,16 @@ import { configContext, resetConfigContext, updateConfigContext } from "../Confi
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { updateUserContext } from "../UserContext";
-import { deleteDocuments, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
+import {
+  deleteDocument,
+  getEndpoint,
+  getFeatureEndpointOrDefault,
+  queryDocuments,
+  readDocument,
+  updateDocument,
+} from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -188,8 +196,20 @@ describe("MongoProxyClient", () => {
         expect.any(Object),
       );
     });
+
+    it("builds the correct proxy URL in development", () => {
+      updateConfigContext({
+        MONGO_BACKEND_ENDPOINT: "https://localhost:1234",
+        globallyEnabledMongoAPIs: [],
+      });
+      updateDocument(databaseId, collection, documentId, "{}");
+      expect(window.fetch).toHaveBeenCalledWith(
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        expect.any(Object),
+      );
+    });
   });
-  describe("deleteDocuments", () => {
+  describe("deleteDocument", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
@@ -206,9 +226,9 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct URL", () => {
-      deleteDocuments(databaseId, collection, [documentId]);
+      deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -218,9 +238,9 @@ describe("MongoProxyClient", () => {
         MONGO_PROXY_ENDPOINT: "https://localhost:1234",
         globallyEnabledMongoAPIs: [],
       });
-      deleteDocuments(databaseId, collection, [documentId]);
+      deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
+        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
         expect.any(Object),
       );
     });
@@ -255,4 +275,33 @@ describe("MongoProxyClient", () => {
       expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/connectionstring/mongo/explorer`);
     });
   });
+
+  describe("getFeatureEndpointOrDefault", () => {
+    beforeEach(() => {
+      resetConfigContext();
+      updateConfigContext({
+        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        globallyEnabledMongoAPIs: [],
+      });
+      const params = new URLSearchParams({
+        "feature.mongoProxyEndpoint": MongoProxyEndpoints.Prod,
+        "feature.mongoProxyAPIs": "readDocument|createDocument",
+      });
+      const features = extractFeatures(params);
+      updateUserContext({
+        authType: AuthType.AAD,
+        features: features,
+      });
+    });
+
+    it("returns a local endpoint", () => {
+      const endpoint = getFeatureEndpointOrDefault("readDocument");
+      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
+    });
+
+    it("returns a production endpoint", () => {
+      const endpoint = getFeatureEndpointOrDefault("DeleteDocument");
+      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
+    });
+  });
 });

src/Common/MongoProxyClient.ts

@@ -1,13 +1,20 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
+import {
+  allowedMongoProxyEndpoints_ToBeDeprecated,
+  defaultAllowedMongoProxyEndpoints,
+  validateEndpoint,
+} from "Utils/EndpointUtils";
+import queryString from "querystring";
 import { AuthType } from "../AuthType";
 import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { ApiType, ContentType, HttpHeaders, HttpStatusCodes } from "./Constants";
+import { ApiType, ContentType, HttpHeaders, HttpStatusCodes, MongoProxyApi, MongoProxyEndpoints } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
@@ -60,6 +67,10 @@ export function queryDocuments(
   query: string,
   continuationToken?: string,
 ): Promise<QueryResponse> {
+  if (!useMongoProxyEndpoint(MongoProxyApi.ResourceList) || !useMongoProxyEndpoint(MongoProxyApi.QueryDocuments)) {
+    return queryDocuments_ToBeDeprecated(databaseId, collection, isResourceList, query, continuationToken);
+  }
+
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
@@ -78,7 +89,7 @@ export function queryDocuments(
     query,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT) || "";
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ResourceList) || "";
 
   const headers = {
     ...defaultHeaders,
@@ -116,11 +127,76 @@ export function queryDocuments(
     });
 }
 
+function queryDocuments_ToBeDeprecated(
+  databaseId: string,
+  collection: Collection,
+  isResourceList: boolean,
+  query: string,
+  continuationToken?: string,
+): Promise<QueryResponse> {
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
+    rid: collection.rid,
+    rtype: "docs",
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
+    dba: databaseAccount.name,
+    pk:
+      collection && collection.partitionKey && !collection.partitionKey.systemKey
+        ? collection.partitionKeyProperties?.[0]
+        : "",
+  };
+
+  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
+
+  const headers = {
+    ...defaultHeaders,
+    ...authHeaders(),
+    [CosmosSDKConstants.HttpHeaders.IsQuery]: "true",
+    [CosmosSDKConstants.HttpHeaders.PopulateQueryMetrics]: "true",
+    [CosmosSDKConstants.HttpHeaders.EnableScanInQuery]: "true",
+    [CosmosSDKConstants.HttpHeaders.EnableCrossPartitionQuery]: "true",
+    [CosmosSDKConstants.HttpHeaders.ParallelizeCrossPartitionQuery]: "true",
+    [HttpHeaders.contentType]: "application/query+json",
+  };
+
+  if (continuationToken) {
+    headers[CosmosSDKConstants.HttpHeaders.Continuation] = continuationToken;
+  }
+
+  const path = isResourceList ? "/resourcelist" : "";
+
+  return window
+    .fetch(`${endpoint}${path}?${queryString.stringify(params)}`, {
+      method: "POST",
+      body: JSON.stringify({ query }),
+      headers,
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        return {
+          continuationToken: response.headers.get(CosmosSDKConstants.HttpHeaders.Continuation),
+          documents: (await response.json()).Documents as DataModels.DocumentId[],
+          headers: response.headers,
+        };
+      }
+      await errorHandling(response, "querying documents", params);
+      return undefined;
+    });
+}
+
 export function readDocument(
   databaseId: string,
   collection: Collection,
   documentId: DocumentId,
 ): Promise<DataModels.DocumentId> {
+  if (!useMongoProxyEndpoint(MongoProxyApi.ReadDocument)) {
+    return readDocument_ToBeDeprecated(databaseId, collection, documentId);
+  }
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
@@ -141,7 +217,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.ReadDocument);
 
   return window
     .fetch(endpoint, {
@@ -161,12 +237,61 @@ export function readDocument(
     });
 }
 
+export function readDocument_ToBeDeprecated(
+  databaseId: string,
+  collection: Collection,
+  documentId: DocumentId,
+): Promise<DataModels.DocumentId> {
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 4).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    rid,
+    rtype: "docs",
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
+    dba: databaseAccount.name,
+    pk:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperties?.[0]
+        : "",
+  };
+
+  const endpoint = getFeatureEndpointOrDefault("readDocument");
+
+  return window
+    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
+      method: "GET",
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: encodeURIComponent(
+          JSON.stringify(documentId.partitionKeyHeader()),
+        ),
+      },
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return await errorHandling(response, "reading document", params);
+    });
+}
+
 export function createDocument(
   databaseId: string,
   collection: Collection,
   partitionKeyProperty: string,
   documentContent: unknown,
 ): Promise<DataModels.DocumentId> {
+  if (!useMongoProxyEndpoint(MongoProxyApi.CreateDocument)) {
+    return createDocument_ToBeDeprecated(databaseId, collection, partitionKeyProperty, documentContent);
+  }
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
@@ -183,7 +308,7 @@ export function createDocument(
     documentContent: JSON.stringify(documentContent),
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateDocument);
 
   return window
     .fetch(`${endpoint}/createDocument`, {
@@ -203,12 +328,54 @@ export function createDocument(
     });
 }
 
+export function createDocument_ToBeDeprecated(
+  databaseId: string,
+  collection: Collection,
+  partitionKeyProperty: string,
+  documentContent: unknown,
+): Promise<DataModels.DocumentId> {
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
+    rid: collection.rid,
+    rtype: "docs",
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
+    dba: databaseAccount.name,
+    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
+  };
+
+  const endpoint = getFeatureEndpointOrDefault("createDocument");
+
+  return window
+    .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
+      method: "POST",
+      body: JSON.stringify(documentContent),
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+      },
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return await errorHandling(response, "creating document", params);
+    });
+}
+
 export function updateDocument(
   databaseId: string,
   collection: Collection,
   documentId: DocumentId,
   documentContent: string,
 ): Promise<DataModels.DocumentId> {
+  if (!useMongoProxyEndpoint(MongoProxyApi.UpdateDocument)) {
+    return updateDocument_ToBeDeprecated(databaseId, collection, documentId, documentContent);
+  }
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
@@ -229,7 +396,7 @@ export function updateDocument(
         : "",
     documentContent,
   };
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.UpdateDocument);
 
   return window
     .fetch(endpoint, {
@@ -250,6 +417,139 @@ export function updateDocument(
     });
 }
 
+export function updateDocument_ToBeDeprecated(
+  databaseId: string,
+  collection: Collection,
+  documentId: DocumentId,
+  documentContent: string,
+): Promise<DataModels.DocumentId> {
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 5).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    rid,
+    rtype: "docs",
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
+    dba: databaseAccount.name,
+    pk:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperties?.[0]
+        : "",
+  };
+  const endpoint = getFeatureEndpointOrDefault("updateDocument");
+
+  return window
+    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
+      method: "PUT",
+      body: documentContent,
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [HttpHeaders.contentType]: ContentType.applicationJson,
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
+      },
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return await errorHandling(response, "updating document", params);
+    });
+}
+
+export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
+  if (!useMongoProxyEndpoint(MongoProxyApi.DeleteDocument)) {
+    return deleteDocument_ToBeDeprecated(databaseId, collection, documentId);
+  }
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 5).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    databaseID: databaseId,
+    collectionID: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    resourceID: rid,
+    resourceType: "docs",
+    subscriptionID: userContext.subscriptionId,
+    resourceGroup: userContext.resourceGroup,
+    databaseAccountName: databaseAccount.name,
+    partitionKey:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperties?.[0]
+        : "",
+  };
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.DeleteDocument);
+
+  return window
+    .fetch(endpoint, {
+      method: "DELETE",
+      body: JSON.stringify(params),
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [HttpHeaders.contentType]: ContentType.applicationJson,
+      },
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        return undefined;
+      }
+      return await errorHandling(response, "deleting document", params);
+    });
+}
+
+export function deleteDocument_ToBeDeprecated(
+  databaseId: string,
+  collection: Collection,
+  documentId: DocumentId,
+): Promise<void> {
+  const { databaseAccount } = userContext;
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 5).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    rid,
+    rtype: "docs",
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
+    dba: databaseAccount.name,
+    pk:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperties?.[0]
+        : "",
+  };
+  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+
+  return window
+    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
+      method: "DELETE",
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [HttpHeaders.contentType]: ContentType.applicationJson,
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
+      },
+    })
+    .then(async (response) => {
+      if (response.ok) {
+        return undefined;
+      }
+      return await errorHandling(response, "deleting document", params);
+    });
+}
+
 export function deleteDocuments(
   databaseId: string,
   collection: Collection,
@@ -275,7 +575,7 @@ export function deleteDocuments(
     resourceGroup: userContext.resourceGroup,
     databaseAccountName: databaseAccount.name,
   };
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.BulkDelete);
 
   return window
     .fetch(`${endpoint}/bulkdelete`, {
@@ -299,6 +599,9 @@ export function deleteDocuments(
 export function createMongoCollectionWithProxy(
   params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
+  if (!useMongoProxyEndpoint(MongoProxyApi.CreateCollectionWithProxy)) {
+    return createMongoCollectionWithProxy_ToBeDeprecated(params);
+  }
   const { databaseAccount } = userContext;
   const shardKey: string = params.partitionKey?.paths[0];
 
@@ -319,7 +622,7 @@ export function createMongoCollectionWithProxy(
     isSharded: !!shardKey,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault(MongoProxyApi.CreateCollectionWithProxy);
 
   return window
     .fetch(`${endpoint}/createCollection`, {
@@ -339,6 +642,70 @@ export function createMongoCollectionWithProxy(
     });
 }
 
+export function createMongoCollectionWithProxy_ToBeDeprecated(
+  params: DataModels.CreateCollectionParams,
+): Promise<DataModels.Collection> {
+  const { databaseAccount } = userContext;
+  const shardKey: string = params.partitionKey?.paths[0];
+  const mongoParams: DataModels.MongoParameters = {
+    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
+    db: params.databaseId,
+    coll: params.collectionId,
+    pk: shardKey,
+    offerThroughput: params.autoPilotMaxThroughput || params.offerThroughput,
+    cd: params.createNewDatabase,
+    st: params.databaseLevelThroughput,
+    is: !!shardKey,
+    rid: "",
+    rtype: "colls",
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
+    dba: databaseAccount.name,
+    isAutoPilot: !!params.autoPilotMaxThroughput,
+  };
+
+  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
+
+  return window
+    .fetch(
+      `${endpoint}/createCollection?${queryString.stringify(
+        mongoParams as unknown as queryString.ParsedUrlQueryInput,
+      )}`,
+      {
+        method: "POST",
+        headers: {
+          ...defaultHeaders,
+          ...authHeaders(),
+          [HttpHeaders.contentType]: "application/json",
+        },
+      },
+    )
+    .then(async (response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      return await errorHandling(response, "creating collection", mongoParams);
+    });
+}
+export function getFeatureEndpointOrDefault(feature: string): string {
+  let endpoint;
+  if (useMongoProxyEndpoint(feature)) {
+    endpoint = configContext.MONGO_PROXY_ENDPOINT;
+  } else {
+    const allowedMongoProxyEndpoints = configContext.allowedMongoProxyEndpoints || [
+      ...defaultAllowedMongoProxyEndpoints,
+      ...allowedMongoProxyEndpoints_ToBeDeprecated,
+    ];
+    endpoint =
+      hasFlag(userContext.features.mongoProxyAPIs, feature) &&
+      validateEndpoint(userContext.features.mongoProxyEndpoint, allowedMongoProxyEndpoints)
+        ? userContext.features.mongoProxyEndpoint
+        : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
+  }
+
+  return getEndpoint(endpoint);
+}
+
 export function getEndpoint(endpoint: string): string {
   let url = endpoint + "/api/mongo/explorer";
 
@@ -352,6 +719,84 @@ export function getEndpoint(endpoint: string): string {
   return url;
 }
 
+export function useMongoProxyEndpoint(mongoProxyApi: string): boolean {
+  const mongoProxyEnvironmentMap: { [key: string]: string[] } = {
+    [MongoProxyApi.ResourceList]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.QueryDocuments]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.CreateDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.ReadDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.UpdateDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.DeleteDocument]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.CreateCollectionWithProxy]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.LegacyMongoShell]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+    [MongoProxyApi.BulkDelete]: [
+      MongoProxyEndpoints.Local,
+      MongoProxyEndpoints.Mpac,
+      MongoProxyEndpoints.Prod,
+      MongoProxyEndpoints.Fairfax,
+      MongoProxyEndpoints.Mooncake,
+    ],
+  };
+
+  if (!mongoProxyEnvironmentMap[mongoProxyApi] || !configContext.MONGO_PROXY_ENDPOINT) {
+    return false;
+  }
+
+  if (configContext.globallyEnabledMongoAPIs.includes(mongoProxyApi)) {
+    return true;
+  }
+
+  return mongoProxyEnvironmentMap[mongoProxyApi].includes(configContext.MONGO_PROXY_ENDPOINT);
+}
+
 export class ThrottlingError extends Error {
   constructor(message: string) {
     super(message);

src/Common/StyleConstants.ts

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

src/Common/dataAccess/createCollection.ts

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

src/Common/dataAccess/deleteCollection.ts

@@ -1,4 +1,3 @@
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
@@ -13,7 +12,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/readCollectionOffer.ts

@@ -105,8 +105,6 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         ? parseInt(resource.softAllowedMaximumThroughput)
         : resource.softAllowedMaximumThroughput;
 
-    const throughputBuckets = resource?.throughputBuckets;
-
     if (autoscaleSettings) {
       return {
         id: offerId,
@@ -116,7 +114,6 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         offerReplacePending: resource.offerReplacePending === "true",
         instantMaximumThroughput,
         softAllowedMaximumThroughput,
-        throughputBuckets,
       };
     }
 
@@ -128,7 +125,6 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
       offerReplacePending: resource.offerReplacePending === "true",
       instantMaximumThroughput,
       softAllowedMaximumThroughput,
-      throughputBuckets,
     };
   }
 

src/Common/dataAccess/readCollections.ts

@@ -1,10 +1,9 @@
 import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
-import { isFabric, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
+import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
-import { FabricArtifactInfo, userContext } from "../../UserContext";
+import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
@@ -17,13 +16,15 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
 
-  if (isFabricMirroredKey() && userContext.fabricContext?.databaseName === databaseId) {
+  if (
+    configContext.platform === Platform.Fabric &&
+    userContext.fabricContext &&
+    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
+  ) {
     const collections: DataModels.Collection[] = [];
     const promises: Promise<ContainerResponse>[] = [];
 
-    for (const collectionResourceId in (
-      userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-    ).resourceTokenInfo.resourceTokens) {
+    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
       // Dictionary key looks like this: dbs/SampleDB/colls/Container
       const resourceIdObj = collectionResourceId.split("/");
       const tokenDatabaseId = resourceIdObj[1];
@@ -55,8 +56,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.features.enableSDKoperations &&
-      userContext.apiType !== "Tables" &&
-      !isFabric()
+      userContext.apiType !== "Tables"
     ) {
       return await readCollectionsWithARM(databaseId);
     }

src/Common/dataAccess/readDatabaseOffer.ts

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

src/Common/dataAccess/readDatabases.ts

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

src/Common/dataAccess/updateCollection.ts

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

src/Common/dataAccess/updateOffer.ts

@@ -1,7 +1,6 @@
 import { OfferDefinition, RequestOptions } from "@azure/cosmos";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
-import { Offer, SDKOfferDefinition, ThroughputBucket, UpdateOfferParams } from "../../Contracts/DataModels";
+import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
 import {
   migrateCassandraKeyspaceToAutoscale,
@@ -57,7 +56,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
   const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
 
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.apiType === "Tables") {
@@ -360,13 +359,6 @@ const createUpdateOfferBody = (params: UpdateOfferParams): ThroughputSettingsUpd
     body.properties.resource.throughput = params.manualThroughput;
   }
 
-  if (params.throughputBuckets) {
-    const throughputBuckets = params.throughputBuckets.filter(
-      (bucket: ThroughputBucket) => bucket.maxThroughputPercentage !== 100,
-    );
-    body.properties.resource.throughputBuckets = throughputBuckets;
-  }
-
   return body;
 };
 

src/ConfigContext.ts

@@ -12,6 +12,7 @@ import {
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
+  allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
   defaultAllowedArmEndpoints,
   defaultAllowedBackendEndpoints,
@@ -49,8 +50,10 @@ export interface ConfigContext {
   CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
+  BACKEND_ENDPOINT?: string;
   PORTAL_BACKEND_ENDPOINT: string;
   NEW_BACKEND_APIS?: BackendApi[];
+  MONGO_BACKEND_ENDPOINT?: string;
   MONGO_PROXY_ENDPOINT: string;
   CASSANDRA_PROXY_ENDPOINT: string;
   NEW_CASSANDRA_APIS?: string[];
@@ -88,7 +91,7 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
     `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/dataexplorer-preview\\.azurewebsites\\.net$`,
+    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -106,6 +109,7 @@ let configContext: Readonly<ConfigContext> = {
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
   JUNO_ENDPOINT: JunoEndpoints.Prod,
+  BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
@@ -148,6 +152,15 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.ARCADIA_ENDPOINT;
   }
 
+  if (
+    !validateEndpoint(
+      newContext.BACKEND_ENDPOINT,
+      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints,
+    )
+  ) {
+    delete newContext.BACKEND_ENDPOINT;
+  }
+
   if (
     !validateEndpoint(
       newContext.MONGO_PROXY_ENDPOINT,
@@ -157,6 +170,10 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.MONGO_PROXY_ENDPOINT;
   }
 
+  if (!validateEndpoint(newContext.MONGO_BACKEND_ENDPOINT, allowedMongoBackendEndpoints)) {
+    delete newContext.MONGO_BACKEND_ENDPOINT;
+  }
+
   if (
     !validateEndpoint(
       newContext.CASSANDRA_PROXY_ENDPOINT,

src/Contracts/ActionContracts.ts

@@ -9,7 +9,6 @@ export enum TabKind {
   Graph,
   SQLQuery,
   ScaleSettings,
-  MongoQuery,
 }
 
 /**
@@ -52,8 +51,6 @@ export interface OpenCollectionTab extends OpenTab {
  */
 export interface OpenQueryTab extends OpenCollectionTab {
   query: QueryInfo;
-  splitterDirection?: "vertical" | "horizontal";
-  queryViewSizePercent?: number;
 }
 
 /**

src/Contracts/DataModels.ts

@@ -6,7 +6,6 @@ export interface ArmEntity {
   location: string;
   type: string;
   kind: string;
-  tags?: Tags;
 }
 
 export interface DatabaseAccount extends ArmEntity {
@@ -275,12 +274,6 @@ export interface Offer {
   offerReplacePending: boolean;
   instantMaximumThroughput?: number;
   softAllowedMaximumThroughput?: number;
-  throughputBuckets?: ThroughputBucket[];
-}
-
-export interface ThroughputBucket {
-  id: number;
-  maxThroughputPercentage: number;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -403,7 +396,6 @@ export interface UpdateOfferParams {
   collectionId?: string;
   migrateToAutoPilot?: boolean;
   migrateToManual?: boolean;
-  throughputBuckets?: ThroughputBucket[];
 }
 
 export interface Notification {
@@ -671,5 +663,3 @@ export interface FeatureRegistration {
     state: string;
   };
 }
-
-export type Tags = { [key: string]: string };

src/Contracts/FabricMessageTypes.ts

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

src/Contracts/FabricMessagesContract.ts

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

src/Contracts/MessageTypes.ts

@@ -41,7 +41,7 @@ export enum MessageTypes {
   OpenPostgreSQLPasswordReset,
   OpenPostgresNetworkingBlade,
   OpenCosmosDBNetworkingBlade,
-  DisplayNPSSurvey, // unused
+  DisplayNPSSurvey,
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
   GetAuthorizationToken, // unused. Can be removed if the portal uses the same list of enums.

src/Contracts/ViewModels.ts

@@ -115,13 +115,7 @@ export interface CollectionBase extends TreeNode {
   isSampleCollection?: boolean;
 
   onDocumentDBDocumentsClick(): void;
-  onNewQueryClick(
-    source: any,
-    event?: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ): void;
+  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
   expandCollection(): void;
   collapseCollection(): void;
   getDatabase(): Database;
@@ -157,13 +151,7 @@ export interface Collection extends CollectionBase {
   onSettingsClick: () => Promise<void>;
 
   onNewGraphClick(): void;
-  onNewMongoQueryClick(
-    source: any,
-    event?: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ): void;
+  onNewMongoQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
   onNewMongoShellClick(): void;
   onNewStoredProcedureClick(source: Collection, event?: MouseEvent): void;
   onNewUserDefinedFunctionClick(source: Collection, event?: MouseEvent): void;
@@ -323,8 +311,6 @@ export interface QueryTabOptions extends TabOptions {
   partitionKey?: DataModels.PartitionKey;
   queryText?: string;
   resourceTokenPartitionKey?: string;
-  splitterDirection?: "horizontal" | "vertical";
-  queryViewSizePercent?: number;
 }
 
 export interface ScriptTabOption extends TabOptions {
@@ -406,6 +392,7 @@ export interface DataExplorerInputsFrame {
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
+  extensionEndpoint?: string;
   portalBackendEndpoint?: string;
   mongoProxyEndpoint?: string;
   cassandraProxyEndpoint?: string;

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,7 +1,5 @@
-import { configContext, Platform } from "ConfigContext";
 import { TreeNodeMenuItem } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -21,6 +19,7 @@ import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
+import { Platform, configContext } from "./../ConfigContext";
 import Explorer from "./Explorer";
 import { useNotebook } from "./Notebook/useNotebook";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
@@ -42,7 +41,7 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
-  if (isFabric() && userContext.fabricContext?.isReadOnly) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
     return undefined;
   }
 
@@ -54,7 +53,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
-  if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
+  if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
@@ -146,7 +145,7 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (!isFabric() || (isFabric() && !userContext.fabricContext?.isReadOnly)) {
+  if (configContext.platform !== Platform.Fabric) {
     items.push({
       iconSrc: DeleteCollectionIcon,
       onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {

src/Explorer/Controls/InputDataList/InputDataList.tsx

@@ -1,314 +0,0 @@
-// This component is used to create a dropdown list of options for the user to select from.
-// The options are displayed in a dropdown list when the user clicks on the input field.
-// The user can then select an option from the list. The selected option is then displayed in the input field.
-
-import { getTheme } from "@fluentui/react";
-import {
-  Button,
-  Divider,
-  Input,
-  Link,
-  makeStyles,
-  Popover,
-  PopoverProps,
-  PopoverSurface,
-  PositioningImperativeRef,
-} from "@fluentui/react-components";
-import { ArrowDownRegular, DismissRegular } from "@fluentui/react-icons";
-import { NormalizedEventKey } from "Common/Constants";
-import { tokens } from "Explorer/Theme/ThemeUtil";
-import React, { FC, useEffect, useRef } from "react";
-
-const useStyles = makeStyles({
-  container: {
-    padding: 0,
-  },
-  input: {
-    flexGrow: 1,
-    paddingRight: 0,
-    outline: "none",
-    "& input:focus": {
-      outline: "none", // Undo body :focus dashed outline
-    },
-  },
-  inputButton: {
-    border: 0,
-  },
-  dropdownHeader: {
-    width: "100%",
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: 600,
-    padding: `${tokens.spacingVerticalM} 0 0 ${tokens.spacingVerticalM}`,
-  },
-  dropdownStack: {
-    display: "flex",
-    flexDirection: "column",
-    gap: tokens.spacingVerticalS,
-    marginTop: tokens.spacingVerticalS,
-    marginBottom: "1px",
-  },
-  dropdownOption: {
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: 400,
-    justifyContent: "left",
-    padding: `${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalL}`,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    border: 0,
-    ":hover": {
-      outline: `1px dashed ${tokens.colorNeutralForeground1Hover}`,
-      backgroundColor: tokens.colorNeutralBackground2Hover,
-      color: tokens.colorNeutralForeground1,
-    },
-  },
-  bottomSection: {
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: 400,
-    padding: `${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalXS} ${tokens.spacingHorizontalL}`,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-});
-
-export interface InputDatalistDropdownOptionSection {
-  label: string;
-  options: string[];
-}
-
-export interface InputDataListProps {
-  dropdownOptions: InputDatalistDropdownOptionSection[];
-  placeholder?: string;
-  title?: string;
-  value: string;
-  onChange: (value: string) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  autofocus?: boolean; // true: acquire focus on first render
-  bottomLink?: {
-    text: string;
-    url: string;
-  };
-}
-
-export const InputDataList: FC<InputDataListProps> = ({
-  dropdownOptions,
-  placeholder,
-  title,
-  value,
-  onChange,
-  onKeyDown,
-  autofocus,
-  bottomLink,
-}) => {
-  const styles = useStyles();
-  const [showDropdown, setShowDropdown] = React.useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const positioningRef = React.useRef<PositioningImperativeRef>(null);
-  const [isInputFocused, setIsInputFocused] = React.useState(autofocus);
-  const [autofocusFirstDropdownItem, setAutofocusFirstDropdownItem] = React.useState(false);
-
-  const theme = getTheme();
-  const itemRefs = useRef([]);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      positioningRef.current?.setTarget(inputRef.current);
-    }
-  }, [inputRef, positioningRef]);
-
-  useEffect(() => {
-    if (isInputFocused) {
-      inputRef.current?.focus();
-    }
-  }, [isInputFocused]);
-
-  useEffect(() => {
-    if (autofocusFirstDropdownItem && showDropdown) {
-      // Autofocus on first item if input isn't focused
-      itemRefs.current[0]?.focus();
-      setAutofocusFirstDropdownItem(false);
-    }
-  }, [autofocusFirstDropdownItem, showDropdown]);
-
-  const handleOpenChange: PopoverProps["onOpenChange"] = (e, data) => {
-    if (isInputFocused && !data.open) {
-      // Don't close if input is focused and we're opening the dropdown (which will steal the focus)
-      return;
-    }
-
-    setShowDropdown(data.open || false);
-    if (data.open) {
-      setIsInputFocused(true);
-    }
-  };
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === NormalizedEventKey.Escape) {
-      setShowDropdown(false);
-    } else if (e.key === NormalizedEventKey.DownArrow) {
-      setShowDropdown(true);
-      setAutofocusFirstDropdownItem(true);
-    }
-    onKeyDown(e);
-  };
-
-  const handleDownDropdownItemKeyDown = (
-    e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
-    index: number,
-  ) => {
-    if (e.key === NormalizedEventKey.Enter) {
-      e.currentTarget.click();
-    } else if (e.key === NormalizedEventKey.Escape) {
-      setShowDropdown(false);
-      inputRef.current?.focus();
-    } else if (e.key === NormalizedEventKey.DownArrow) {
-      if (index + 1 < itemRefs.current.length) {
-        itemRefs.current[index + 1].focus();
-      } else {
-        setIsInputFocused(true);
-      }
-    } else if (e.key === NormalizedEventKey.UpArrow) {
-      if (index - 1 >= 0) {
-        itemRefs.current[index - 1].focus();
-      } else {
-        // Last item, focus back to input
-        setIsInputFocused(true);
-      }
-    }
-  };
-
-  // Flatten dropdownOptions to better manage refs and focus
-  let flatIndex = 0;
-  const indexMap = new Map<string, number>();
-  for (let sectionIndex = 0; sectionIndex < dropdownOptions.length; sectionIndex++) {
-    const section = dropdownOptions[sectionIndex];
-    for (let optionIndex = 0; optionIndex < section.options.length; optionIndex++) {
-      indexMap.set(`${sectionIndex}-${optionIndex}`, flatIndex);
-      flatIndex++;
-    }
-  }
-
-  return (
-    <>
-      <Input
-        id="filterInput"
-        ref={inputRef}
-        type="text"
-        size="small"
-        autoComplete="off"
-        className={`filterInput ${styles.input}`}
-        title={title}
-        placeholder={placeholder}
-        value={value}
-        autoFocus
-        onKeyDown={handleInputKeyDown}
-        onChange={(e) => {
-          const newValue = e.target.value;
-          // Don't show dropdown if there is already a value in the input field (when user is typing)
-          setShowDropdown(!(newValue.length > 0));
-          onChange(newValue);
-        }}
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-        onFocus={() => {
-          // Don't show dropdown if there is already a value in the input field
-          // or isInputFocused is undefined which means component is mounting
-          setShowDropdown(!(value.length > 0) && isInputFocused !== undefined);
-
-          setIsInputFocused(true);
-        }}
-        onBlur={() => {
-          setIsInputFocused(false);
-        }}
-        contentAfter={
-          value.length > 0 ? (
-            <Button
-              aria-label="Clear filter"
-              className={styles.inputButton}
-              size="small"
-              icon={<DismissRegular />}
-              onClick={() => {
-                onChange("");
-                setIsInputFocused(true);
-              }}
-            />
-          ) : (
-            <Button
-              aria-label="Open dropdown"
-              className={styles.inputButton}
-              size="small"
-              icon={<ArrowDownRegular />}
-              onClick={() => {
-                setShowDropdown(true);
-                setAutofocusFirstDropdownItem(true);
-              }}
-            />
-          )
-        }
-      />
-      <Popover
-        inline
-        unstable_disableAutoFocus
-        // trapFocus
-        open={showDropdown}
-        onOpenChange={handleOpenChange}
-        positioning={{ positioningRef, position: "below", align: "start", offset: 4 }}
-      >
-        <PopoverSurface className={styles.container}>
-          {dropdownOptions.map((section, sectionIndex) => (
-            <div key={section.label}>
-              <div className={styles.dropdownHeader} style={{ color: theme.palette.themePrimary }}>
-                {section.label}
-              </div>
-              <div className={styles.dropdownStack}>
-                {section.options.map((option, index) => (
-                  <Button
-                    key={option}
-                    ref={(el) => (itemRefs.current[indexMap.get(`${sectionIndex}-${index}`)] = el)}
-                    appearance="transparent"
-                    shape="square"
-                    className={styles.dropdownOption}
-                    onClick={() => {
-                      onChange(option);
-                      setShowDropdown(false);
-                      setIsInputFocused(true);
-                    }}
-                    onBlur={() =>
-                      !bottomLink &&
-                      sectionIndex === dropdownOptions.length - 1 &&
-                      index === section.options.length - 1 &&
-                      setShowDropdown(false)
-                    }
-                    onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) =>
-                      handleDownDropdownItemKeyDown(e, indexMap.get(`${sectionIndex}-${index}`))
-                    }
-                  >
-                    {option}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          ))}
-          {bottomLink && (
-            <>
-              <Divider />
-              <div className={styles.bottomSection}>
-                <Link
-                  ref={(el) => (itemRefs.current[flatIndex] = el)}
-                  href={bottomLink.url}
-                  target="_blank"
-                  onBlur={() => setShowDropdown(false)}
-                  onKeyDown={(e: React.KeyboardEvent<HTMLAnchorElement>) => handleDownDropdownItemKeyDown(e, flatIndex)}
-                >
-                  {bottomLink.text}
-                </Link>
-              </div>
-            </>
-          )}
-        </PopoverSurface>
-      </Popover>
-    </>
-  );
-};

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

@@ -1,7 +1,5 @@
-import { AuthType } from "AuthType";
 import { shallow } from "enzyme";
 import ko from "knockout";
-import { Features } from "Platform/Hosted/extractFeatures";
 import React from "react";
 import { updateCollection } from "../../../Common/dataAccess/updateCollection";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
@@ -249,42 +247,4 @@ describe("SettingsComponent", () => {
     expect(conflictResolutionPolicy.mode).toEqual(DataModels.ConflictResolutionMode.Custom);
     expect(conflictResolutionPolicy.conflictResolutionProcedure).toEqual(expectSprocPath);
   });
-
-  it("should save throughput bucket changes when Save button is clicked", async () => {
-    updateUserContext({
-      apiType: "SQL",
-      features: { enableThroughputBuckets: true } as Features,
-      authType: AuthType.AAD,
-    });
-
-    const wrapper = shallow(<SettingsComponent {...baseProps} />);
-
-    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
-    const isEnabled = settingsComponentInstance["throughputBucketsEnabled"];
-    expect(isEnabled).toBe(true);
-
-    wrapper.setState({
-      isThroughputBucketsSaveable: true,
-      throughputBuckets: [
-        { id: 1, maxThroughputPercentage: 70 },
-        { id: 2, maxThroughputPercentage: 60 },
-      ],
-    });
-
-    await settingsComponentInstance.onSaveClick();
-
-    expect(updateOffer).toHaveBeenCalledWith({
-      databaseId: collection.databaseId,
-      collectionId: collection.id(),
-      currentOffer: expect.any(Object),
-      autopilotThroughput: collection.offer().autoscaleMaxThroughput,
-      manualThroughput: collection.offer().manualThroughput,
-      throughputBuckets: [
-        { id: 1, maxThroughputPercentage: 70 },
-        { id: 2, maxThroughputPercentage: 60 },
-      ],
-    });
-
-    expect(wrapper.state("isThroughputBucketsSaveable")).toBe(false);
-  });
 });

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -7,10 +7,6 @@ import {
   ContainerPolicyComponent,
   ContainerPolicyComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent";
-import {
-  ThroughputBucketsComponent,
-  ThroughputBucketsComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
 import { useDatabases } from "Explorer/useDatabases";
 import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
@@ -90,8 +86,6 @@ export interface SettingsComponentState {
   wasAutopilotOriginallySet: boolean;
   isScaleSaveable: boolean;
   isScaleDiscardable: boolean;
-  throughputBuckets: DataModels.ThroughputBucket[];
-  throughputBucketsBaseline: DataModels.ThroughputBucket[];
   throughputError: string;
 
   timeToLive: TtlType;
@@ -110,7 +104,6 @@ export interface SettingsComponentState {
   changeFeedPolicyBaseline: ChangeFeedPolicyState;
   isSubSettingsSaveable: boolean;
   isSubSettingsDiscardable: boolean;
-  isThroughputBucketsSaveable: boolean;
 
   vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
   vectorEmbeddingPolicyBaseline: DataModels.VectorEmbeddingPolicy;
@@ -165,7 +158,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private isVectorSearchEnabled: boolean;
   private isFullTextSearchEnabled: boolean;
   private totalThroughputUsed: number;
-  private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
   constructor(props: SettingsComponentProps) {
@@ -183,10 +175,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.isFullTextSearchEnabled = isFullTextSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
-      this.throughputBucketsEnabled =
-        userContext.apiType === "SQL" &&
-        userContext.features.enableThroughputBuckets &&
-        userContext.authType === AuthType.AAD;
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =
@@ -205,8 +193,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       wasAutopilotOriginallySet: false,
       isScaleSaveable: false,
       isScaleDiscardable: false,
-      throughputBuckets: undefined,
-      throughputBucketsBaseline: undefined,
       throughputError: undefined,
 
       timeToLive: undefined,
@@ -225,7 +211,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicyBaseline: undefined,
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
-      isThroughputBucketsSaveable: false,
 
       vectorEmbeddingPolicy: undefined,
       vectorEmbeddingPolicyBaseline: undefined,
@@ -342,8 +327,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable) ||
-      this.state.isThroughputBucketsSaveable
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable)
     );
   };
 
@@ -355,8 +339,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable) ||
-      this.state.isThroughputBucketsSaveable
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable)
     );
   };
 
@@ -436,8 +419,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     this.setState({
       throughput: this.state.throughputBaseline,
-      throughputBuckets: this.state.throughputBucketsBaseline,
-      throughputBucketsBaseline: this.state.throughputBucketsBaseline,
       timeToLive: this.state.timeToLiveBaseline,
       timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
       displayedTtlSeconds: this.state.displayedTtlSecondsBaseline,
@@ -460,7 +441,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       isScaleSaveable: false,
       isScaleDiscardable: false,
       isSubSettingsSaveable: false,
-      isThroughputBucketsSaveable: false,
       isSubSettingsDiscardable: false,
       isContainerPolicyDirty: false,
       isIndexingPolicyDirty: false,
@@ -499,10 +479,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onIndexingPolicyContentChange = (newIndexingPolicy: DataModels.IndexingPolicy): void =>
     this.setState({ indexingPolicyContent: newIndexingPolicy });
 
-  private onThroughputBucketsSaveableChange = (isSaveable: boolean): void => {
-    this.setState({ isThroughputBucketsSaveable: isSaveable });
-  };
-
   private resetShouldDiscardContainerPolicies = (): void => this.setState({ shouldDiscardContainerPolicies: false });
 
   private resetShouldDiscardIndexingPolicy = (): void => this.setState({ shouldDiscardIndexingPolicy: false });
@@ -773,13 +749,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       ] as DataModels.ComputedProperties;
     }
 
-    const throughputBuckets = this.offer?.throughputBuckets;
-
     return {
       throughput: offerThroughput,
       throughputBaseline: offerThroughput,
-      throughputBuckets,
-      throughputBucketsBaseline: throughputBuckets,
       changeFeedPolicy: changeFeedPolicy,
       changeFeedPolicyBaseline: changeFeedPolicy,
       timeToLive: timeToLive,
@@ -867,10 +839,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.setState({ throughput: newThroughput, throughputError });
   };
 
-  private onThroughputBucketChange = (throughputBuckets: DataModels.ThroughputBucket[]): void => {
-    this.setState({ throughputBuckets });
-  };
-
   private onAutoPilotSelected = (isAutoPilotSelected: boolean): void =>
     this.setState({ isAutoPilotSelected: isAutoPilotSelected });
 
@@ -1061,24 +1029,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    if (this.throughputBucketsEnabled && this.state.isThroughputBucketsSaveable) {
-      const updatedOffer: DataModels.Offer = await updateOffer({
-        databaseId: this.collection.databaseId,
-        collectionId: this.collection.id(),
-        currentOffer: this.collection.offer(),
-        autopilotThroughput: this.collection.offer().autoscaleMaxThroughput
-          ? this.collection.offer().autoscaleMaxThroughput
-          : undefined,
-        manualThroughput: this.collection.offer().manualThroughput
-          ? this.collection.offer().manualThroughput
-          : undefined,
-        throughputBuckets: this.state.throughputBuckets,
-      });
-      this.collection.offer(updatedOffer);
-      this.offer = updatedOffer;
-      this.setState({ isThroughputBucketsSaveable: false });
-    }
-
     if (this.state.isScaleSaveable) {
       const updateOfferParams: DataModels.UpdateOfferParams = {
         databaseId: this.collection.databaseId,
@@ -1259,13 +1209,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onConflictResolutionDirtyChange: this.onConflictResolutionDirtyChange,
     };
 
-    const throughputBucketsComponentProps: ThroughputBucketsComponentProps = {
-      currentBuckets: this.state.throughputBuckets,
-      throughputBucketsBaseline: this.state.throughputBucketsBaseline,
-      onBucketsChange: this.onThroughputBucketChange,
-      onSaveableChange: this.onThroughputBucketsSaveableChange,
-    };
-
     const partitionKeyComponentProps: PartitionKeyComponentProps = {
       database: useDatabases.getState().findDatabaseWithId(this.collection.databaseId),
       collection: this.collection,
@@ -1328,13 +1271,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    if (this.throughputBucketsEnabled) {
-      tabs.push({
-        tab: SettingsV2TabTypes.ThroughputBucketsTab,
-        content: <ThroughputBucketsComponent {...throughputBucketsComponentProps} />,
-      });
-    }
-
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],

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

@@ -14,7 +14,6 @@ import * as ViewModels from "../../../../Contracts/ViewModels";
 
 import { handleError } from "Common/ErrorHandlingUtils";
 import { cancelDataTransferJob, pollDataTransferJob } from "Common/dataAccess/dataTransfers";
-import { Platform, configContext } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { ChangePartitionKeyPane } from "Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane";
 import {
@@ -178,14 +177,12 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
         To change the partition key, a new destination container must be created or an existing destination container
         selected. Data will then be copied to the destination container.
       </Text>
-      {configContext.platform !== Platform.Emulator && (
-        <PrimaryButton
-          styles={{ root: { width: "fit-content" } }}
-          text="Change"
-          onClick={startPartitionkeyChangeWorkflow}
-          disabled={isCurrentJobInProgress(portalDataTransferJob)}
-        />
-      )}
+      <PrimaryButton
+        styles={{ root: { width: "fit-content" } }}
+        text="Change"
+        onClick={startPartitionkeyChangeWorkflow}
+        disabled={isCurrentJobInProgress(portalDataTransferJob)}
+      />
       {portalDataTransferJob && (
         <Stack>
           <Text styles={textHeadingStyle}>{partitionKeyName} change job</Text>

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx

@@ -1,177 +0,0 @@
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
-import { ThroughputBucketsComponent } from "./ThroughputBucketsComponent";
-
-describe("ThroughputBucketsComponent", () => {
-  const mockOnBucketsChange = jest.fn();
-  const mockOnSaveableChange = jest.fn();
-
-  const defaultProps = {
-    currentBuckets: [
-      { id: 1, maxThroughputPercentage: 50 },
-      { id: 2, maxThroughputPercentage: 60 },
-    ],
-    throughputBucketsBaseline: [
-      { id: 1, maxThroughputPercentage: 40 },
-      { id: 2, maxThroughputPercentage: 50 },
-    ],
-    onBucketsChange: mockOnBucketsChange,
-    onSaveableChange: mockOnSaveableChange,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("renders the correct number of buckets", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} />);
-    expect(screen.getAllByText(/Group \d+/)).toHaveLength(5);
-  });
-
-  it("renders buckets in the correct order even if input is unordered", () => {
-    const unorderedBuckets = [
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 1, maxThroughputPercentage: 50 },
-    ];
-    render(<ThroughputBucketsComponent {...defaultProps} currentBuckets={unorderedBuckets} />);
-
-    const bucketLabels = screen.getAllByText(/Group \d+/).map((el) => el.textContent);
-    expect(bucketLabels).toEqual(["Group 1 (Data Explorer Query Bucket)", "Group 2", "Group 3", "Group 4", "Group 5"]);
-  });
-
-  it("renders all provided buckets even if they exceed the max default bucket count", () => {
-    const oversizedBuckets = [
-      { id: 1, maxThroughputPercentage: 50 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 70 },
-      { id: 4, maxThroughputPercentage: 80 },
-      { id: 5, maxThroughputPercentage: 90 },
-      { id: 6, maxThroughputPercentage: 100 },
-      { id: 7, maxThroughputPercentage: 40 },
-    ];
-
-    render(<ThroughputBucketsComponent {...defaultProps} currentBuckets={oversizedBuckets} />);
-
-    expect(screen.getAllByText(/Group \d+/)).toHaveLength(7);
-
-    expect(screen.getByDisplayValue("50")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("60")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("70")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("80")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("90")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("100")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("40")).toBeInTheDocument();
-  });
-
-  it("calls onBucketsChange when a bucket value changes", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} />);
-    const input = screen.getByDisplayValue("50");
-    fireEvent.change(input, { target: { value: "70" } });
-
-    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 70 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
-    ]);
-  });
-
-  it("triggers onSaveableChange when values change", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} />);
-    const input = screen.getByDisplayValue("50");
-    fireEvent.change(input, { target: { value: "80" } });
-
-    expect(mockOnSaveableChange).toHaveBeenCalledWith(true);
-  });
-
-  it("updates state consistently after multiple changes to different buckets", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} />);
-
-    const input1 = screen.getByDisplayValue("50");
-    fireEvent.change(input1, { target: { value: "70" } });
-
-    const input2 = screen.getByDisplayValue("60");
-    fireEvent.change(input2, { target: { value: "80" } });
-
-    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 70 },
-      { id: 2, maxThroughputPercentage: 80 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
-    ]);
-  });
-
-  it("resets to baseline when currentBuckets are reset", () => {
-    const { rerender } = render(<ThroughputBucketsComponent {...defaultProps} />);
-    const input1 = screen.getByDisplayValue("50");
-    fireEvent.change(input1, { target: { value: "70" } });
-
-    rerender(<ThroughputBucketsComponent {...defaultProps} currentBuckets={defaultProps.throughputBucketsBaseline} />);
-
-    expect(screen.getByDisplayValue("40")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("50")).toBeInTheDocument();
-  });
-
-  it("does not call onBucketsChange when value remains unchanged", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} />);
-    const input = screen.getByDisplayValue("50");
-    fireEvent.change(input, { target: { value: "50" } });
-
-    expect(mockOnBucketsChange).not.toHaveBeenCalled();
-  });
-
-  it("disables input and slider when maxThroughputPercentage is 100", () => {
-    render(
-      <ThroughputBucketsComponent
-        {...defaultProps}
-        currentBuckets={[
-          { id: 1, maxThroughputPercentage: 100 },
-          { id: 2, maxThroughputPercentage: 50 },
-        ]}
-      />,
-    );
-
-    const disabledInputs = screen.getAllByDisplayValue("100");
-    expect(disabledInputs.length).toBeGreaterThan(0);
-    expect(disabledInputs[0]).toBeDisabled();
-
-    const sliders = screen.getAllByRole("slider");
-    expect(sliders.length).toBeGreaterThan(0);
-    expect(sliders[0]).toHaveAttribute("aria-disabled", "true");
-    expect(sliders[1]).toHaveAttribute("aria-disabled", "false");
-  });
-
-  it("toggles bucket value between 50 and 100 with switch", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} />);
-    const toggles = screen.getAllByRole("switch");
-
-    fireEvent.click(toggles[0]);
-
-    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 100 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
-    ]);
-
-    fireEvent.click(toggles[0]);
-
-    expect(mockOnBucketsChange).toHaveBeenCalledWith([
-      { id: 1, maxThroughputPercentage: 50 },
-      { id: 2, maxThroughputPercentage: 60 },
-      { id: 3, maxThroughputPercentage: 100 },
-      { id: 4, maxThroughputPercentage: 100 },
-      { id: 5, maxThroughputPercentage: 100 },
-    ]);
-  });
-
-  it("ensures default buckets are used when no buckets are provided", () => {
-    render(<ThroughputBucketsComponent {...defaultProps} currentBuckets={[]} />);
-    expect(screen.getAllByText(/Group \d+/)).toHaveLength(5);
-    expect(screen.getAllByDisplayValue("100")).toHaveLength(5);
-  });
-});

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -1,105 +0,0 @@
-import { Label, Slider, Stack, TextField, Toggle } from "@fluentui/react";
-import { ThroughputBucket } from "Contracts/DataModels";
-import React, { FC, useEffect, useState } from "react";
-import { isDirty } from "../../SettingsUtils";
-
-const MAX_BUCKET_SIZES = 5;
-
-const DEFAULT_BUCKETS = Array.from({ length: MAX_BUCKET_SIZES }, (_, i) => ({
-  id: i + 1,
-  maxThroughputPercentage: 100,
-}));
-
-export interface ThroughputBucketsComponentProps {
-  currentBuckets: ThroughputBucket[];
-  throughputBucketsBaseline: ThroughputBucket[];
-  onBucketsChange: (updatedBuckets: ThroughputBucket[]) => void;
-  onSaveableChange: (isSaveable: boolean) => void;
-}
-
-export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = ({
-  currentBuckets,
-  throughputBucketsBaseline,
-  onBucketsChange,
-  onSaveableChange,
-}) => {
-  const getThroughputBuckets = (buckets: ThroughputBucket[]): ThroughputBucket[] => {
-    if (!buckets || buckets.length === 0) {
-      return DEFAULT_BUCKETS;
-    }
-    const maxBuckets = Math.max(DEFAULT_BUCKETS.length, buckets.length);
-    const adjustedDefaultBuckets = Array.from({ length: maxBuckets }, (_, i) => ({
-      id: i + 1,
-      maxThroughputPercentage: 100,
-    }));
-
-    return adjustedDefaultBuckets.map(
-      (defaultBucket) => buckets?.find((bucket) => bucket.id === defaultBucket.id) || defaultBucket,
-    );
-  };
-
-  const [throughputBuckets, setThroughputBuckets] = useState<ThroughputBucket[]>(getThroughputBuckets(currentBuckets));
-
-  useEffect(() => {
-    setThroughputBuckets(getThroughputBuckets(currentBuckets));
-    onSaveableChange(false);
-  }, [currentBuckets]);
-
-  useEffect(() => {
-    const isChanged = isDirty(throughputBuckets, getThroughputBuckets(throughputBucketsBaseline));
-    onSaveableChange(isChanged);
-  }, [throughputBuckets]);
-
-  const handleBucketChange = (id: number, newValue: number) => {
-    const updatedBuckets = throughputBuckets.map((bucket) =>
-      bucket.id === id ? { ...bucket, maxThroughputPercentage: newValue } : bucket,
-    );
-    setThroughputBuckets(updatedBuckets);
-    const settingsChanged = isDirty(updatedBuckets, throughputBuckets);
-    settingsChanged && onBucketsChange(updatedBuckets);
-  };
-
-  const onToggle = (id: number, checked: boolean) => {
-    handleBucketChange(id, checked ? 50 : 100);
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
-      <Label>Throughput Buckets</Label>
-      <Stack>
-        {throughputBuckets?.map((bucket) => (
-          <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
-            <Slider
-              min={1}
-              max={100}
-              step={1}
-              value={bucket.maxThroughputPercentage}
-              onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
-              showValue={false}
-              label={`Group ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
-              styles={{ root: { flex: 2, maxWidth: 400 } }}
-              disabled={bucket.maxThroughputPercentage === 100}
-            />
-            <TextField
-              value={bucket.maxThroughputPercentage.toString()}
-              onChange={(event, newValue) => handleBucketChange(bucket.id, parseInt(newValue || "0", 10))}
-              type="number"
-              suffix="%"
-              styles={{
-                fieldGroup: { width: 80 },
-              }}
-              disabled={bucket.maxThroughputPercentage === 100}
-            />
-            <Toggle
-              onText="Active"
-              offText="Inactive"
-              checked={bucket.maxThroughputPercentage !== 100}
-              onChange={(event, checked) => onToggle(bucket.id, checked)}
-              styles={{ root: { marginBottom: 0 }, text: { fontSize: 12 } }}
-            ></Toggle>
-          </Stack>
-        ))}
-      </Stack>
-    </Stack>
-  );
-};

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -17,13 +17,14 @@ import {
 } from "@fluentui/react";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
+import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import * as SharedConstants from "../../../../../Shared/Constants";
 import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../../../UserContext";
 import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import { autoPilotThroughput1K } from "../../../../../Utils/AutoPilotUtils";
-import { calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
+import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
   PriceBreakdown,
@@ -365,6 +366,29 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     });
   };
 
+  private minRUperGBSurvey = (): JSX.Element => {
+    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
+    const oneTBinKB = 1000000000;
+    const minRUperGB = 10;
+    const featureFlagEnabled = userContext.features.showMinRUSurvey;
+    const collectionIsEligible =
+      userContext.subscriptionType !== SubscriptionType.Internal &&
+      this.props.usageSizeInKB > oneTBinKB &&
+      this.props.minimum >= usageInGB(this.props.usageSizeInKB) * minRUperGB;
+    if (featureFlagEnabled || collectionIsEligible) {
+      return (
+        <Text>
+          Need to scale below {this.props.minimum} RU/s? Reach out by filling{" "}
+          <a target="_blank" rel="noreferrer" href={href}>
+            this questionnaire
+          </a>
+          .
+        </Text>
+      );
+    }
+    return undefined;
+  };
+
   private renderThroughputModeChoices = (): JSX.Element => {
     const labelId = "settingsV2RadioButtonLabelId";
     return (
@@ -637,6 +661,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               </Link>
             </Text>
           )}
+          {this.minRUperGBSurvey()}
           {this.props.spendAckVisible && (
             <Checkbox
               id="spendAckCheckBox"

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -11,8 +11,7 @@ export type isDirtyTypes =
   | DataModels.IndexingPolicy
   | DataModels.ComputedProperties
   | DataModels.VectorEmbedding[]
-  | DataModels.FullTextPolicy
-  | DataModels.ThroughputBucket[];
+  | DataModels.FullTextPolicy;
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -56,7 +55,6 @@ export enum SettingsV2TabTypes {
   PartitionKeyTab,
   ComputedPropertiesTab,
   ContainerVectorPolicyTab,
-  ThroughputBucketsTab,
 }
 
 export enum ContainerPolicyTabTypes {
@@ -169,8 +167,6 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       return "Computed Properties";
     case SettingsV2TabTypes.ContainerVectorPolicyTab:
       return "Container Policies";
-    case SettingsV2TabTypes.ThroughputBucketsTab:
-      return "Throughput Buckets";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -1,5 +1,4 @@
 import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
-import { getWorkloadType } from "Common/DatabaseAccountUtility";
 import { useDatabases } from "Explorer/useDatabases";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
@@ -35,23 +34,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   setIsThroughputCapExceeded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
-  let defaultThroughput: number;
-  const workloadType: Constants.WorkloadType = getWorkloadType();
-
-  if (
-    isFreeTier ||
-    isQuickstart ||
-    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(workloadType)
-  ) {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput1K;
-  } else if (workloadType === Constants.WorkloadType.Production) {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput10K;
-  } else {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput4K;
-  }
-
   const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
-  const [throughput, setThroughput] = useState<number>(defaultThroughput);
+  const [throughput, setThroughput] = useState<number>(
+    isFreeTier || isQuickstart ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K,
+  );
   const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
   const [throughputError, setThroughputError] = useState<string>("");
   const [totalThroughputUsed, setTotalThroughputUsed] = useState<number>(0);
@@ -61,6 +47,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
   const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
   const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
+
   useEffect(() => {
     // throughput cap check for the initial state
     let totalThroughput = 0;
@@ -170,6 +157,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
   const handleOnChangeMode = (event: React.ChangeEvent<HTMLInputElement>, mode: string): void => {
     if (mode === "Autoscale") {
+      const defaultThroughput = isFreeTier
+        ? AutoPilotUtils.autoPilotThroughput1K
+        : AutoPilotUtils.autoPilotThroughput4K;
       setThroughput(defaultThroughput);
       setIsAutoScaleSelected(true);
       setThroughputValue(defaultThroughput);

src/Explorer/Explorer.tsx

@@ -8,7 +8,7 @@ import { MessageTypes } from "Contracts/ExplorerContracts";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { isFabricMirrored, isFabricMirroredKey, scheduleRefreshFabricToken } from "Platform/Fabric/FabricUtil";
+import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
@@ -35,7 +35,7 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { updateUserContext, userContext } from "../UserContext";
+import { isAccountNewerThanThresholdInMs, updateUserContext, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
@@ -43,7 +43,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../hooks/useSidePanel";
-import { ReactTabKind, useTabs } from "../hooks/useTabs";
+import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
@@ -187,10 +187,6 @@ export default class Explorer {
       useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
     }
 
-    if (isFabricMirrored()) {
-      useTabs.getState().closeReactTab(ReactTabKind.Home);
-    }
-
     this.refreshExplorer();
   }
 
@@ -282,6 +278,37 @@ export default class Explorer {
     }
   }
 
+  public openNPSSurveyDialog(): void {
+    if (!Platform.Portal || !["Postgres", "SQL", "Mongo"].includes(userContext.apiType)) {
+      return;
+    }
+
+    const ONE_DAY_IN_MS = 86400000;
+    const SEVEN_DAYS_IN_MS = 604800000;
+
+    // Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
+    if (userContext.isTryCosmosDBSubscription) {
+      if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
+        Logger.logInfo(
+          `Sending message to Portal to check if NPS Survey can be displayed in Try Cosmos DB ${userContext.apiType}`,
+          "Explorer/openNPSSurveyDialog",
+        );
+        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+      }
+    } else {
+      // Show survey when an existing account is older than 7 days
+      if (
+        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", SEVEN_DAYS_IN_MS)
+      ) {
+        Logger.logInfo(
+          `Sending message to Portal to check if NPS Survey can be displayed for existing ${userContext.apiType} account older than 7 days`,
+          "Explorer/openNPSSurveyDialog",
+        );
+        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+      }
+    }
+  }
+
   public async openCESCVAFeedbackBlade(): Promise<void> {
     sendMessage({ type: MessageTypes.OpenCESCVAFeedbackBlade });
     Logger.logInfo(
@@ -351,8 +378,8 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = async (): Promise<void> => {
-    if (isFabricMirroredKey()) {
-      scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
+    if (configContext.platform === Platform.Fabric) {
+      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
       return;
     }
 
@@ -1107,7 +1134,7 @@ export default class Explorer {
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
         ? this.refreshDatabaseForResourceToken()
-        : await this.refreshAllDatabases(); // await: we rely on the databases to be loaded before restoring the tabs further in the flow
+        : this.refreshAllDatabases();
     }
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
 
@@ -1131,7 +1158,7 @@ export default class Explorer {
       await this.initNotebooks(userContext.databaseAccount);
     }
 
-    this.refreshSampleData();
+    await this.refreshSampleData();
   }
 
   public async configureCopilot(): Promise<void> {
@@ -1156,27 +1183,26 @@ export default class Explorer {
       .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
   }
 
-  public refreshSampleData(): void {
-    if (!userContext.sampleDataConnectionInfo) {
+  public async refreshSampleData(): Promise<void> {
+    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 databaseId = userContext.sampleDataConnectionInfo?.databaseId;
-    if (!databaseId) {
-      return;
-    }
-
-    readSampleCollection()
-      .then((collection: DataModels.Collection) => {
-        if (!collection) {
-          return;
-        }
-
-        const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
-        useDatabases.setState({ sampleDataResourceTokenCollection });
-      })
-      .catch((error) => {
-        Logger.logError(getErrorMessage(error), "Explorer/refreshSampleData");
-      });
   }
 }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less

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

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

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

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

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

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

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,5 +1,4 @@
 import { KeyboardAction } from "KeyboardShortcuts";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -62,7 +61,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (isDataplaneRbacSupported(userContext.apiType)) {
+  if (userContext.apiType === "SQL") {
     const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
     const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
     const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

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

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

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

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

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

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -2,7 +2,7 @@
  * Notebook container related stuff
  */
 import { useDialog } from "Explorer/Controls/Dialog";
-import promiseRetry, { AbortError, Options } from "p-retry";
+import promiseRetry, { AbortError } from "p-retry";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
 import * as Constants from "../../Common/Constants";
 import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook, PoolIdType } from "../../Common/Constants";
@@ -19,7 +19,7 @@ export class NotebookContainerClient {
   private clearReconnectionAttemptMessage? = () => {};
   private isResettingWorkspace: boolean;
   private phoenixClient: PhoenixClient;
-  private retryOptions: Options;
+  private retryOptions: promiseRetry.Options;
   private scheduleTimerId: NodeJS.Timeout;
 
   constructor(private onConnectionLost: () => void) {

src/Explorer/Notebook/useNotebook.ts

@@ -1,5 +1,6 @@
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { cloneDeep } from "lodash";
 import create, { UseStore } from "zustand";
 import { AuthType } from "../../AuthType";
@@ -127,7 +128,9 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo"
         ? databaseAccount?.location
         : databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
-    const disallowedLocationsUri: string = `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`;
+    const disallowedLocationsUri: string = useNewPortalBackendEndpoint(Constants.BackendApi.DisallowedLocations)
+      ? `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`
+      : `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
       const response = await fetch(disallowedLocationsUri, {

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,6 +1,5 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -57,19 +56,6 @@ function openCollectionTab(
         continue;
       }
 
-      if (
-        isFabricMirrored() &&
-        !(
-          // whitelist the tab kinds that are allowed to be opened in Fabric mirrored
-          (
-            action.tabKind === ActionContracts.TabKind.SQLDocuments ||
-            action.tabKind === ActionContracts.TabKind.SQLQuery
-          )
-        )
-      ) {
-        continue;
-      }
-
       //expand database first if not expanded to load the collections
       if (!database.isDatabaseExpanded?.()) {
         database.expandDatabase?.();
@@ -135,28 +121,10 @@ function openCollectionTab(
             action.tabKind === ActionContracts.TabKind.SQLQuery ||
             action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
           ) {
-            const openQueryTabAction = action as ActionContracts.OpenQueryTab;
             collection.onNewQueryClick(
               collection,
               undefined,
-              generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
-              openQueryTabAction.splitterDirection,
-              openQueryTabAction.queryViewSizePercent,
-            );
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.MongoQuery ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoQuery]
-          ) {
-            const openQueryTabAction = action as ActionContracts.OpenQueryTab;
-            collection.onNewMongoQueryClick(
-              collection,
-              undefined,
-              generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
-              openQueryTabAction.splitterDirection,
-              openQueryTabAction.queryViewSizePercent,
+              generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
             );
             break;
           }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -28,7 +28,6 @@ import {
 import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { CollectionCreation } from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -42,7 +41,6 @@ import {
   isVectorSearchEnabled,
 } from "Utils/CapabilityUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
 import "../Controls/ThroughputInput/ThroughputInput.less";
@@ -286,152 +284,150 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         )}
 
         <div className="panelMainContent">
-          {!(isFabricNative() && this.props.databaseId !== undefined) && (
-            <Stack hidden={userContext.apiType === "Tables"}>
-              <Stack horizontal>
-                <span className="mandatoryStar">*&nbsp;</span>
-                <Text className="panelTextBold" variant="small">
-                  Database {userContext.apiType === "Mongo" ? "name" : "id"}
-                </Text>
-                <TooltipHost
-                  directionalHint={DirectionalHint.bottomLeftEdge}
-                  content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+          <Stack hidden={userContext.apiType === "Tables"}>
+            <Stack horizontal>
+              <span className="mandatoryStar">*&nbsp;</span>
+              <Text className="panelTextBold" variant="small">
+                Database {userContext.apiType === "Mongo" ? "name" : "id"}
+              </Text>
+              <TooltipHost
+                directionalHint={DirectionalHint.bottomLeftEdge}
+                content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                  true,
+                ).toLocaleLowerCase()}.`}
+              >
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
                     true,
                   ).toLocaleLowerCase()}.`}
-                >
-                  <Icon
-                    iconName="Info"
-                    className="panelInfoIcon"
-                    tabIndex={0}
-                    ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                      true,
-                    ).toLocaleLowerCase()}.`}
-                  />
-                </TooltipHost>
-              </Stack>
+                />
+              </TooltipHost>
+            </Stack>
 
-              {configContext.platform !== Platform.Fabric && (
-                <Stack horizontal verticalAlign="center">
-                  <div role="radiogroup">
-                    <input
-                      className="panelRadioBtn"
-                      checked={this.state.createNewDatabase}
-                      aria-label="Create new database"
-                      aria-checked={this.state.createNewDatabase}
-                      name="databaseType"
-                      type="radio"
-                      role="radio"
-                      id="databaseCreateNew"
-                      tabIndex={0}
-                      onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
-                    />
-                    <span className="panelRadioBtnLabel">Create new</span>
-
-                    <input
-                      className="panelRadioBtn"
-                      checked={!this.state.createNewDatabase}
-                      aria-label="Use existing database"
-                      aria-checked={!this.state.createNewDatabase}
-                      name="databaseType"
-                      type="radio"
-                      role="radio"
-                      tabIndex={0}
-                      onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
-                    />
-                    <span className="panelRadioBtnLabel">Use existing</span>
-                  </div>
-                </Stack>
-              )}
-
-              {this.state.createNewDatabase && (
-                <Stack className="panelGroupSpacing">
+            {configContext.platform !== Platform.Fabric && (
+              <Stack horizontal verticalAlign="center">
+                <div role="radiogroup">
                   <input
-                    name="newDatabaseId"
-                    id="newDatabaseId"
-                    aria-required
-                    required
-                    type="text"
-                    autoComplete="off"
-                    pattern={ValidCosmosDbIdInputPattern.source}
-                    title={ValidCosmosDbIdDescription}
-                    placeholder="Type a new database id"
-                    size={40}
-                    className="panelTextField"
-                    aria-label="New database id, Type a new database id"
-                    autoFocus
+                    className="panelRadioBtn"
+                    checked={this.state.createNewDatabase}
+                    aria-label="Create new database"
+                    aria-checked={this.state.createNewDatabase}
+                    name="databaseType"
+                    type="radio"
+                    role="radio"
+                    id="databaseCreateNew"
                     tabIndex={0}
-                    value={this.state.newDatabaseId}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      this.setState({ newDatabaseId: event.target.value })
-                    }
+                    onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
                   />
+                  <span className="panelRadioBtnLabel">Create new</span>
 
-                  {!isServerlessAccount() && (
-                    <Stack horizontal>
-                      <Checkbox
-                        label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
-                        checked={this.state.isSharedThroughputChecked}
-                        styles={{
-                          text: { fontSize: 12 },
-                          checkbox: { width: 12, height: 12 },
-                          label: { padding: 0, alignItems: "center" },
-                        }}
-                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                          this.setState({ isSharedThroughputChecked: isChecked })
-                        }
-                      />
-                      <TooltipHost
-                        directionalHint={DirectionalHint.bottomLeftEdge}
-                        content={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                  <input
+                    className="panelRadioBtn"
+                    checked={!this.state.createNewDatabase}
+                    aria-label="Use existing database"
+                    aria-checked={!this.state.createNewDatabase}
+                    name="databaseType"
+                    type="radio"
+                    role="radio"
+                    tabIndex={0}
+                    onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
+                  />
+                  <span className="panelRadioBtnLabel">Use existing</span>
+                </div>
+              </Stack>
+            )}
+
+            {this.state.createNewDatabase && (
+              <Stack className="panelGroupSpacing">
+                <input
+                  name="newDatabaseId"
+                  id="newDatabaseId"
+                  aria-required
+                  required
+                  type="text"
+                  autoComplete="off"
+                  pattern="[^/?#\\]*[^/?# \\]"
+                  title="May not end with space nor contain characters '\' '/' '#' '?'"
+                  placeholder="Type a new database id"
+                  size={40}
+                  className="panelTextField"
+                  aria-label="New database id, Type a new database id"
+                  autoFocus
+                  tabIndex={0}
+                  value={this.state.newDatabaseId}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                    this.setState({ newDatabaseId: event.target.value })
+                  }
+                />
+
+                {!isServerlessAccount() && (
+                  <Stack horizontal>
+                    <Checkbox
+                      label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
+                      checked={this.state.isSharedThroughputChecked}
+                      styles={{
+                        text: { fontSize: 12 },
+                        checkbox: { width: 12, height: 12 },
+                        label: { padding: 0, alignItems: "center" },
+                      }}
+                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                        this.setState({ isSharedThroughputChecked: isChecked })
+                      }
+                    />
+                    <TooltipHost
+                      directionalHint={DirectionalHint.bottomLeftEdge}
+                      content={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                        true,
+                      ).toLocaleLowerCase()} within the database.`}
+                    >
+                      <Icon
+                        iconName="Info"
+                        className="panelInfoIcon"
+                        tabIndex={0}
+                        ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
                           true,
                         ).toLocaleLowerCase()} within the database.`}
-                      >
-                        <Icon
-                          iconName="Info"
-                          className="panelInfoIcon"
-                          tabIndex={0}
-                          ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
-                            true,
-                          ).toLocaleLowerCase()} within the database.`}
-                        />
-                      </TooltipHost>
-                    </Stack>
-                  )}
+                      />
+                    </TooltipHost>
+                  </Stack>
+                )}
 
-                  {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
-                    <ThroughputInput
-                      showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
-                      isDatabase={true}
-                      isSharded={this.state.isSharded}
-                      isFreeTier={this.isFreeTierAccount()}
-                      isQuickstart={this.props.isQuickstart}
-                      setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
-                      setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
-                      setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
-                        this.setState({ isThroughputCapExceeded })
-                      }
-                      onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
-                    />
-                  )}
-                </Stack>
-              )}
-              {!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"
-                  options={this.getDatabaseOptions()}
-                  onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
-                    this.setState({ selectedDatabaseId: database.key as string })
-                  }
-                  defaultSelectedKey={this.props.databaseId}
-                  responsiveMode={999}
-                />
-              )}
-              <Separator className="panelSeparator" />
-            </Stack>
-          )}
+                {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
+                  <ThroughputInput
+                    showFreeTierExceedThroughputTooltip={this.isFreeTierAccount() && !isFirstResourceCreated}
+                    isDatabase={true}
+                    isSharded={this.state.isSharded}
+                    isFreeTier={this.isFreeTierAccount()}
+                    isQuickstart={this.props.isQuickstart}
+                    setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
+                    setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
+                    setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
+                      this.setState({ isThroughputCapExceeded })
+                    }
+                    onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
+                  />
+                )}
+              </Stack>
+            )}
+            {!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"
+                options={this.getDatabaseOptions()}
+                onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
+                  this.setState({ selectedDatabaseId: database.key as string })
+                }
+                defaultSelectedKey={this.props.databaseId}
+                responsiveMode={999}
+              />
+            )}
+            <Separator className="panelSeparator" />
+          </Stack>
 
           <Stack>
             <Stack horizontal>
@@ -460,8 +456,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               aria-required
               required
               autoComplete="off"
-              pattern={ValidCosmosDbIdInputPattern.source}
-              title={ValidCosmosDbIdDescription}
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
               placeholder={`e.g., ${getCollectionName()}1`}
               size={40}
               className="panelTextField"
@@ -670,7 +666,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     </Stack>
                   );
                 })}
-              {!isFabricNative() && userContext.apiType === "SQL" && (
+              {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
                     styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
@@ -751,7 +747,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {!isFabricNative() && userContext.apiType === "SQL" && (
+          {userContext.apiType === "SQL" && (
             <Stack>
               <Stack horizontal>
                 <Text className="panelTextBold" variant="small">
@@ -823,9 +819,22 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
           {this.shouldShowAnalyticalStoreOptions() && (
             <Stack className="panelGroupSpacing">
-              <Text className="panelTextBold" variant="small">
-                {this.getAnalyticalStorageContent()}
-              </Text>
+              <Stack horizontal>
+                <Text className="panelTextBold" variant="small">
+                  Analytical store
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={this.getAnalyticalStorageTooltipContent()}
+                >
+                  <Icon
+                    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."
+                  />
+                </TooltipHost>
+              </Stack>
 
               <Stack horizontal verticalAlign="center">
                 <div role="radiogroup">
@@ -869,7 +878,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     <Link
                       href="https://aka.ms/cosmosdb-synapselink"
                       target="_blank"
-                      aria-label={Constants.ariaLabelForLearnMoreLink.AzureSynapseLink}
                       className="capacitycalculator-link"
                     >
                       Learn more
@@ -941,7 +949,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {!isFabricNative() && userContext.apiType !== "Tables" && (
+          {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
               isExpandedByDefault={false}
@@ -1222,16 +1230,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return "";
   }
 
-  private getAnalyticalStorageContent(): JSX.Element {
+  private getAnalyticalStorageTooltipContent(): JSX.Element {
     return (
       <Text variant="small">
         Enable analytical store capability to perform near real-time analytics on your operational data, without
         impacting the performance of transactional workloads.{" "}
-        <Link
-          aria-label={Constants.ariaLabelForLearnMoreLink.AnalyticalStore}
-          target="_blank"
-          href="https://aka.ms/analytical-store-overview"
-        >
+        <Link target="_blank" href="https://aka.ms/analytical-store-overview">
           Learn more
         </Link>
       </Text>
@@ -1264,7 +1268,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   // }
 
   private shouldShowCollectionThroughputInput(): boolean {
-    if (isFabricNative() || isServerlessAccount()) {
+    if (isServerlessAccount()) {
       return false;
     }
 
@@ -1290,7 +1294,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowAnalyticalStoreOptions(): boolean {
-    if (isFabricNative() || configContext.platform === Platform.Emulator) {
+    if (configContext.platform === Platform.Emulator) {
       return false;
     }
 

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -1,6 +1,5 @@
 import { Checkbox, Stack, Text, TextField } from "@fluentui/react";
 import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
@@ -205,8 +204,8 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             type="text"
             aria-required="true"
             autoComplete="off"
-            pattern={ValidCosmosDbIdInputPattern.source}
-            title={ValidCosmosDbIdDescription}
+            pattern="[^/?#\\]*[^/?# \\]"
+            title="May not end with space nor contain characters '\' '/' '#' '?'"
             size={40}
             aria-label={databaseIdLabel}
             placeholder={databaseIdPlaceHolder}

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

@@ -39,7 +39,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         data-lpignore={true}
         id="database-id"
         onChange={[Function]}
-        pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
+        pattern="[^/?#\\\\]*[^/?# \\\\]"
         placeholder="Type a new database id"
         size={40}
         styles={

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -7,7 +7,6 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
@@ -203,8 +202,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
-                pattern={ValidCosmosDbIdInputPattern.source}
-                title={ValidCosmosDbIdDescription}
+                pattern="[^/?#\\-]*[^/?#- \\]"
+                title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
                 placeholder="Type a new keyspace id"
                 size={40}
                 value={newKeyspaceId}
@@ -293,8 +292,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               required={true}
               ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
-              pattern={ValidCosmosDbIdInputPattern.source}
-              title={ValidCosmosDbIdDescription}
+              pattern="[^/?#\\-]*[^/?#- \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
               placeholder="Enter table Id"
               size={20}
               value={tableId}

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -28,7 +28,6 @@ import { RightPaneForm } from "Explorer/Panes/RightPaneForm/RightPaneForm";
 import { useDatabases } from "Explorer/useDatabases";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import * as React from "react";
 
@@ -236,8 +235,8 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 aria-required
                 required
                 autoComplete="off"
-                pattern={ValidCosmosDbIdInputPattern.source}
-                title={ValidCosmosDbIdDescription}
+                pattern="[^/?#\\]*[^/?# \\]"
+                title="May not end with space nor contain characters '\' '/' '#' '?'"
                 placeholder={`e.g., ${getCollectionName()}1`}
                 size={40}
                 className="panelTextField"

src/Explorer/Panes/PanelComponent.less

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

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,7 +32,6 @@ import {
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
 import { updateUserContext, userContext } from "UserContext";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
@@ -175,26 +174,15 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
-  const isEmulator = configContext.platform === Platform.Emulator;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
-  const showRetrySettings =
-    (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&
-    !isEmulator;
-  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin" && !isEmulator;
-  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
-  const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
-  const showEnableEntraIdRbac =
-    isDataplaneRbacSupported(userContext.apiType) &&
-    userContext.authType === AuthType.AAD &&
-    configContext.platform !== Platform.Fabric &&
-    !isEmulator;
-  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled() && !isEmulator;
+  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
+  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
+  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
+  const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
   const shouldShowCopilotSampleDBOption =
     userContext.apiType === "SQL" &&
     useQueryCopilot.getState().copilotEnabled &&
-    useDatabases.getState().sampleDataResourceTokenCollection &&
-    !isEmulator;
-
+    useDatabases.getState().sampleDataResourceTokenCollection;
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 
@@ -205,17 +193,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
 
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
 
-    if (
-      enableDataPlaneRBACOption !== LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled) ||
-      retryAttempts !== LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts) ||
-      retryInterval !== LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval) ||
-      MaxWaitTimeInSeconds !== LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
-    ) {
-      updateUserContext({
-        refreshCosmosClient: true,
-      });
-    }
-
     if (configContext.platform !== Platform.Fabric) {
       LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
       if (
@@ -225,6 +202,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ) {
         updateUserContext({
           dataPlaneRbacEnabled: true,
+          hasDataPlaneRbacSettingChanged: true,
         });
         useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
         try {
@@ -248,6 +226,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       } else {
         updateUserContext({
           dataPlaneRbacEnabled: false,
+          hasDataPlaneRbacSettingChanged: true,
         });
         const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
         if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
@@ -503,7 +482,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className={`paneMainContent ${styles.container}`}>
-        <Accordion className={`customAccordion ${styles.firstItem}`}>
+        <Accordion className={styles.firstItem}>
           {shouldShowQueryPageOptions && (
             <AccordionItem value="1">
               <AccordionHeader>
@@ -553,37 +532,40 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
-          {showEnableEntraIdRbac && (
-            <AccordionItem value="2">
-              <AccordionHeader>
-                <div className={styles.header}>Enable Entra ID RBAC</div>
-              </AccordionHeader>
-              <AccordionPanel>
-                <div className={styles.settingsSectionContainer}>
-                  <div className={styles.settingsSectionDescription}>
-                    Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra ID
-                    RBAC.
-                    <a
-                      href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {" "}
-                      Learn more{" "}
-                    </a>
+          {userContext.apiType === "SQL" &&
+            userContext.authType === AuthType.AAD &&
+            configContext.platform !== Platform.Fabric && (
+              <AccordionItem value="2">
+                <AccordionHeader>
+                  <div className={styles.header}>Enable Entra ID RBAC</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
+                      ID RBAC.
+                      <a
+                        href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {" "}
+                        Learn more{" "}
+                      </a>
+                    </div>
+                    <ChoiceGroup
+                      ariaLabelledBy="enableDataPlaneRBACOptions"
+                      options={dataPlaneRBACOptionsList}
+                      styles={choiceButtonStyles}
+                      selectedKey={enableDataPlaneRBACOption}
+                      onChange={handleOnDataPlaneRBACOptionChange}
+                    />
                   </div>
-                  <ChoiceGroup
-                    ariaLabelledBy="enableDataPlaneRBACOptions"
-                    options={dataPlaneRBACOptionsList}
-                    styles={choiceButtonStyles}
-                    selectedKey={enableDataPlaneRBACOption}
-                    onChange={handleOnDataPlaneRBACOptionChange}
-                  />
-                </div>
-              </AccordionPanel>
-            </AccordionItem>
-          )}
-          {userContext.apiType === "SQL" && !isEmulator && (
+                </AccordionPanel>
+              </AccordionItem>
+            )}
+
+          {userContext.apiType === "SQL" && (
             <>
               <AccordionItem value="3">
                 <AccordionHeader>
@@ -681,103 +663,102 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionItem>
             </>
           )}
-          {showRetrySettings && (
-            <AccordionItem value="6">
-              <AccordionHeader>
-                <div className={styles.header}>Retry Settings</div>
-              </AccordionHeader>
-              <AccordionPanel>
-                <div className={styles.settingsSectionContainer}>
-                  <div className={styles.settingsSectionDescription}>
-                    Retry policy associated with throttled requests during CosmosDB queries.
-                  </div>
-                  <div>
-                    <span className={styles.subHeader}>Max retry attempts</span>
-                    <InfoTooltip className={styles.headerIcon}>
-                      Max number of retries to be performed for a request. Default value 9.
-                    </InfoTooltip>
-                  </div>
-                  <SpinButton
-                    labelPosition={Position.top}
-                    min={1}
-                    step={1}
-                    value={"" + retryAttempts}
-                    onChange={handleOnQueryRetryAttemptsSpinButtonChange}
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
-                    onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
-                    onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
-                    onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
-                    styles={spinButtonStyles}
-                  />
-                  <div>
-                    <span className={styles.subHeader}>Fixed retry interval (ms)</span>
-                    <InfoTooltip className={styles.headerIcon}>
-                      Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned
-                      as part of the response. Default value is 0 milliseconds.
-                    </InfoTooltip>
-                  </div>
-                  <SpinButton
-                    labelPosition={Position.top}
-                    min={1000}
-                    step={1000}
-                    value={"" + retryInterval}
-                    onChange={handleOnRetryIntervalSpinButtonChange}
-                    incrementButtonAriaLabel="Increase value by 1000"
-                    decrementButtonAriaLabel="Decrease value by 1000"
-                    onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
-                    onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
-                    onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
-                    styles={spinButtonStyles}
-                  />
-                  <div>
-                    <span className={styles.subHeader}>Max wait time (s)</span>
-                    <InfoTooltip className={styles.headerIcon}>
-                      Max wait time in seconds to wait for a request while the retries are happening. Default value 30
-                      seconds.
-                    </InfoTooltip>
-                  </div>
-                  <SpinButton
-                    labelPosition={Position.top}
-                    min={1}
-                    step={1}
-                    value={"" + MaxWaitTimeInSeconds}
-                    onChange={handleOnMaxWaitTimeSpinButtonChange}
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
-                    onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
-                    onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
-                    onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
-                    styles={spinButtonStyles}
-                  />
+
+          <AccordionItem value="6">
+            <AccordionHeader>
+              <div className={styles.header}>Retry Settings</div>
+            </AccordionHeader>
+            <AccordionPanel>
+              <div className={styles.settingsSectionContainer}>
+                <div className={styles.settingsSectionDescription}>
+                  Retry policy associated with throttled requests during CosmosDB queries.
                 </div>
-              </AccordionPanel>
-            </AccordionItem>
-          )}
-          {!isEmulator && (
-            <AccordionItem value="7">
-              <AccordionHeader>
-                <div className={styles.header}>Enable container pagination</div>
-              </AccordionHeader>
-              <AccordionPanel>
-                <div className={styles.settingsSectionContainer}>
-                  <div className={styles.settingsSectionDescription}>
-                    Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-                  </div>
-                  <Checkbox
-                    styles={{
-                      label: { padding: 0 },
-                    }}
-                    className="padding"
-                    ariaLabel="Enable container pagination"
-                    checked={containerPaginationEnabled}
-                    onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
-                    label="Enable container pagination"
-                  />
+                <div>
+                  <span className={styles.subHeader}>Max retry attempts</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Max number of retries to be performed for a request. Default value 9.
+                  </InfoTooltip>
                 </div>
-              </AccordionPanel>
-            </AccordionItem>
-          )}
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1}
+                  step={1}
+                  value={"" + retryAttempts}
+                  onChange={handleOnQueryRetryAttemptsSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1"
+                  decrementButtonAriaLabel="Decrease value by 1"
+                  onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
+                  onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
+                  onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
+                  styles={spinButtonStyles}
+                />
+                <div>
+                  <span className={styles.subHeader}>Fixed retry interval (ms)</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
+                    part of the response. Default value is 0 milliseconds.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1000}
+                  step={1000}
+                  value={"" + retryInterval}
+                  onChange={handleOnRetryIntervalSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1000"
+                  decrementButtonAriaLabel="Decrease value by 1000"
+                  onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
+                  onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
+                  onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
+                  styles={spinButtonStyles}
+                />
+                <div>
+                  <span className={styles.subHeader}>Max wait time (s)</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Max wait time in seconds to wait for a request while the retries are happening. Default value 30
+                    seconds.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1}
+                  step={1}
+                  value={"" + MaxWaitTimeInSeconds}
+                  onChange={handleOnMaxWaitTimeSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1"
+                  decrementButtonAriaLabel="Decrease value by 1"
+                  onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
+                  onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
+                  onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
+                  styles={spinButtonStyles}
+                />
+              </div>
+            </AccordionPanel>
+          </AccordionItem>
+
+          <AccordionItem value="7">
+            <AccordionHeader>
+              <div className={styles.header}>Enable container pagination</div>
+            </AccordionHeader>
+            <AccordionPanel>
+              <div className={styles.settingsSectionContainer}>
+                <div className={styles.settingsSectionDescription}>
+                  Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+                </div>
+                <Checkbox
+                  styles={{
+                    label: { padding: 0 },
+                  }}
+                  className="padding"
+                  ariaLabel="Enable container pagination"
+                  checked={containerPaginationEnabled}
+                  onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
+                  label="Enable container pagination"
+                />
+              </div>
+            </AccordionPanel>
+          </AccordionItem>
+
           {shouldShowCrossPartitionOption && (
             <AccordionItem value="8">
               <AccordionHeader>
@@ -803,6 +784,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowParallelismOption && (
             <AccordionItem value="9">
               <AccordionHeader>
@@ -836,6 +818,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowPriorityLevelOption && (
             <AccordionItem value="10">
               <AccordionHeader>
@@ -859,6 +842,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowGraphAutoVizOption && (
             <AccordionItem value="11">
               <AccordionHeader>
@@ -880,6 +864,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionPanel>
             </AccordionItem>
           )}
+
           {shouldShowCopilotSampleDBOption && (
             <AccordionItem value="12">
               <AccordionHeader>

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

@@ -11,7 +11,7 @@ exports[`Settings Pane should render Default properly 1`] = `
     className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
   >
     <Accordion
-      className="customAccordion ___1uf6361_0000000 fz7g6wx"
+      className="___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="1"
@@ -572,7 +572,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
     className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
   >
     <Accordion
-      className="customAccordion ___1uf6361_0000000 fz7g6wx"
+      className="___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="6"

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

@@ -93,7 +93,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           id="newDatabaseId"
           name="newDatabaseId"
           onChange={[Function]}
-          pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
+          pattern="[^/?#\\\\]*[^/?# \\\\]"
           placeholder="Type a new database id"
           required={true}
           size={40}
@@ -178,7 +178,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         id="collectionId"
         name="collectionId"
         onChange={[Function]}
-        pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
+        pattern="[^/?#\\\\]*[^/?# \\\\]"
         placeholder="e.g., Container1"
         required={true}
         size={40}
@@ -309,24 +309,40 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
     <Stack
       className="panelGroupSpacing"
     >
-      <Text
-        className="panelTextBold"
-        variant="small"
+      <Stack
+        horizontal={true}
       >
         <Text
+          className="panelTextBold"
           variant="small"
         >
-          Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
-           
-          <StyledLinkBase
-            aria-label="Learn more about analytical store."
-            href="https://aka.ms/analytical-store-overview"
-            target="_blank"
-          >
-            Learn more
-          </StyledLinkBase>
+          Analytical store
         </Text>
-      </Text>
+        <StyledTooltipHostBase
+          content={
+            <Text
+              variant="small"
+            >
+              Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
+               
+              <StyledLinkBase
+                href="https://aka.ms/analytical-store-overview"
+                target="_blank"
+              >
+                Learn more
+              </StyledLinkBase>
+            </Text>
+          }
+          directionalHint={4}
+        >
+          <Icon
+            ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+            className="panelInfoIcon"
+            iconName="Info"
+            tabIndex={0}
+          />
+        </StyledTooltipHostBase>
+      </Stack>
       <Stack
         horizontal={true}
         verticalAlign="center"
@@ -384,7 +400,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           . Enable Synapse Link for this Cosmos DB account.
            
           <StyledLinkBase
-            aria-label="Learn more about Azure Synapse Link."
             className="capacitycalculator-link"
             href="https://aka.ms/cosmosdb-synapselink"
             target="_blank"

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -75,7 +75,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   const inputEdited = useRef(false);
   const itemRefs = useRef([]);
   const searchInputRef = useRef(null);
-  const copyQueryRef = useRef(null);
   const {
     openFeedbackModal,
     hideFeedbackModalForLikedQueries,
@@ -133,7 +132,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     document.body.removeChild(queryElement);
 
     setshowCopyPopup(true);
-    copyQueryRef.current.focus();
     setTimeout(() => {
       setshowCopyPopup(false);
     }, 6000);
@@ -307,7 +305,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     if (isGeneratingQuery === null) {
       return " ";
     } else if (isGeneratingQuery) {
-      return "Thinking";
+      return "Content is loading";
     } else {
       return "Content is updated";
     }
@@ -393,7 +391,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="off"
+              autoComplete="list"
+              aria-expanded={showSamplePrompts}
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {
@@ -401,7 +400,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   <IconButton
                     iconProps={{ iconName: "Send" }}
                     disabled={isGeneratingQuery || !userPrompt.trim()}
-                    allowDisabledFocus={true}
                     style={{ background: "none" }}
                     onClick={() => startGenerateQueryProcess()}
                     aria-label="Send"
@@ -579,7 +577,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
                   {userContext.feedbackPolicies?.policyAllowFeedback && (
                     <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>{FeedbackLabels.provideFeedback}</Text>
+                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -629,9 +627,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label={FeedbackLabels.provideFeedback}
-                        role="button"
-                        title="Like"
+                        aria-label="Like"
+                        role="toggle"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -649,9 +646,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="button"
-                        aria-label={FeedbackLabels.provideFeedback}
-                        title="Dislike"
+                        role="toggle"
+                        aria-label="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";
@@ -680,7 +676,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   )}
                   <CommandBarButton
                     className="copyQuery"
-                    elementRef={copyQueryRef}
                     onClick={copyGeneratedCode}
                     iconProps={{ iconName: "Copy" }}
                     style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
@@ -711,9 +706,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               )}
             </Stack>
           )}
-          {(showFeedbackBar || isGeneratingQuery) && (
-            <span role="alert" className="screenReaderOnly" aria-label={getAriaLabel()} />
-          )}
           {isGeneratingQuery && (
             <ProgressIndicator
               label="Thinking..."

src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts

@@ -1,6 +1,7 @@
 import { FeedOptions } from "@azure/cosmos";
 import {
   Areas,
+  BackendApi,
   ConnectionStatusType,
   ContainerStatusType,
   HttpStatusCodes,
@@ -31,6 +32,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getAuthorizationHeader } from "Utils/AuthorizationUtils";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTabs } from "hooks/useTabs";
@@ -80,7 +82,9 @@ export const isCopilotFeatureRegistered = async (subscriptionId: string): Promis
 };
 
 export const getCopilotEnabled = async (): Promise<boolean> => {
-  const backendEndpoint: string = configContext.PORTAL_BACKEND_ENDPOINT;
+  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.PortalSettings)
+    ? configContext.PORTAL_BACKEND_ENDPOINT
+    : configContext.BACKEND_ENDPOINT;
 
   const url = `${backendEndpoint}/api/portalsettings/querycopilot`;
   const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();

src/Explorer/Sidebar.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  makeStyles,
   Menu,
   MenuButton,
   MenuButtonProps,
@@ -8,12 +7,13 @@ import {
   MenuList,
   MenuPopover,
   MenuTrigger,
+  SplitButton,
+  makeStyles,
   mergeClasses,
   shorthands,
-  SplitButton,
 } from "@fluentui/react-components";
 import { Add16Regular, ArrowSync12Regular, ChevronLeft12Regular, ChevronRight12Regular } from "@fluentui/react-icons";
-import { configContext, Platform } from "ConfigContext";
+import { Platform, configContext } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { AddDatabasePanel } from "Explorer/Panes/AddDatabasePanel/AddDatabasePanel";
 import { Tabs } from "Explorer/Tabs/Tabs";
@@ -21,13 +21,12 @@ import { CosmosFluentProvider, cosmosShorthands, tokens } from "Explorer/Theme/T
 import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import { useDatabases } from "Explorer/useDatabases";
 import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric, isFabricMirrored, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
 import { debounce } from "lodash";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 const useSidebarStyles = makeStyles({
   sidebar: {
@@ -110,7 +109,6 @@ interface GlobalCommand {
   icon: JSX.Element;
   onClick: () => void;
   keyboardAction?: KeyboardAction;
-  ref?: React.RefObject<HTMLButtonElement>;
 }
 
 const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
@@ -120,11 +118,10 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
   // However, that messes with the Menu positioning, so we need to get a reference to the 'div' to pass to the Menu.
   // We can't use a ref though, because it would be set after the Menu is rendered, so we use a state value to force a re-render.
   const [globalCommandButton, setGlobalCommandButton] = useState<HTMLElement | null>(null);
-  const primaryFocusableRef = useRef<HTMLButtonElement>(null);
 
   const actions = useMemo<GlobalCommand[]>(() => {
     if (
-      (isFabric() && userContext.fabricContext?.isReadOnly) ||
+      configContext.platform === Platform.Fabric ||
       userContext.apiType === "Postgres" ||
       userContext.apiType === "VCoreMongo"
     ) {
@@ -138,15 +135,12 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
         id: "new_collection",
         label: `New ${getCollectionName()}`,
         icon: <Add16Regular />,
-        onClick: () => {
-          const databaseId = isFabricNative() ? userContext.fabricContext?.databaseName : undefined;
-          explorer.onNewCollectionClicked({ databaseId });
-        },
+        onClick: () => explorer.onNewCollectionClicked(),
         keyboardAction: KeyboardAction.NEW_COLLECTION,
       },
     ];
 
-    if (configContext.platform !== Platform.Fabric && userContext.apiType !== "Tables") {
+    if (userContext.apiType !== "Tables") {
       actions.push({
         id: "new_database",
         label: `New ${getDatabaseName()}`,
@@ -183,16 +177,6 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
     );
   }, [actions, setKeyboardActions]);
 
-  useLayoutEffect(() => {
-    if (primaryFocusableRef.current) {
-      const timer = setTimeout(() => {
-        primaryFocusableRef.current.focus();
-      }, 0);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, []);
-
   if (!primaryAction) {
     return null;
   }
@@ -200,7 +184,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
   return (
     <div className={styles.globalCommandsContainer} data-test="GlobalCommands">
       {actions.length === 1 ? (
-        <Button icon={primaryAction.icon} onClick={onPrimaryActionClick} ref={primaryFocusableRef}>
+        <Button icon={primaryAction.icon} onClick={onPrimaryActionClick}>
           {primaryAction.label}
         </Button>
       ) : (
@@ -210,7 +194,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
               <div ref={setGlobalCommandButton}>
                 <SplitButton
                   menuButton={{ ...triggerProps, "aria-label": "More commands" }}
-                  primaryActionButton={{ onClick: onPrimaryActionClick, ref: primaryFocusableRef }}
+                  primaryActionButton={{ onClick: onPrimaryActionClick }}
                   className={styles.globalCommandsSplitButton}
                   icon={primaryAction.icon}
                 >
@@ -292,7 +276,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   }, [setLoading]);
 
   const hasGlobalCommands = !(
-    isFabricMirrored() ||
+    configContext.platform === Platform.Fabric ||
     userContext.apiType === "Postgres" ||
     userContext.apiType === "VCoreMongo"
   );

src/Explorer/SplashScreen/FabricHome.tsx

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

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -39,7 +39,7 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
       role="button"
     >
       <div>
-        <img src={imgSrc} alt={title} aria-hidden="true" />
+        <img src={imgSrc} />
       </div>
       <Stack style={{ marginLeft: 16 }}>
         <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>

src/Explorer/Tables/TableDataClient.ts

@@ -3,7 +3,7 @@ import * as ko from "knockout";
 import Q from "q";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { CassandraProxyAPIs } 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";
@@ -264,6 +264,9 @@ export class CassandraAPIDataClient extends TableDataClient {
     shouldNotify?: boolean,
     paginationToken?: string,
   ): Promise<Entities.IListTableEntitiesResult> {
+    if (!this.useCassandraProxyEndpoint("postQuery")) {
+      return this.queryDocuments_ToBeDeprecated(collection, query, shouldNotify, paginationToken);
+    }
     const clearMessage =
       shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
     try {
@@ -306,6 +309,55 @@ export class CassandraAPIDataClient extends TableDataClient {
     }
   }
 
+  public async queryDocuments_ToBeDeprecated(
+    collection: ViewModels.Collection,
+    query: string,
+    shouldNotify?: boolean,
+    paginationToken?: string,
+  ): Promise<Entities.IListTableEntitiesResult> {
+    const clearMessage =
+      shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
+    try {
+      const { authType, databaseAccount } = userContext;
+      const apiEndpoint: string =
+        authType === AuthType.EncryptedToken
+          ? Constants.CassandraBackend.guestQueryApi
+          : Constants.CassandraBackend.queryApi;
+      const data: any = await $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+        type: "POST",
+        data: {
+          accountName: databaseAccount?.name,
+          cassandraEndpoint: this.trimCassandraEndpoint(databaseAccount?.properties.cassandraEndpoint),
+          resourceId: databaseAccount?.id,
+          keyspaceId: collection.databaseId,
+          tableId: collection.id(),
+          query,
+          paginationToken,
+        },
+        beforeSend: this.setAuthorizationHeader as any,
+        cache: false,
+      });
+      shouldNotify &&
+        NotificationConsoleUtils.logConsoleInfo(
+          `Successfully fetched ${data.result.length} rows for table ${collection.id()}`,
+        );
+      return {
+        Results: data.result,
+        ContinuationToken: data.paginationToken,
+      };
+    } catch (error) {
+      shouldNotify &&
+        handleError(
+          error,
+          "QueryDocuments_ToBeDeprecated_Cassandra",
+          `Failed to query rows for table ${collection.id()}`,
+        );
+      throw error;
+    } finally {
+      clearMessage?.();
+    }
+  }
+
   public async deleteDocuments(
     collection: ViewModels.Collection,
     entitiesToDelete: Entities.ITableEntity[],
@@ -419,6 +471,10 @@ export class CassandraAPIDataClient extends TableDataClient {
   }
 
   public getTableKeys(collection: ViewModels.Collection): Q.Promise<CassandraTableKeys> {
+    if (!this.useCassandraProxyEndpoint("getKeys")) {
+      return this.getTableKeys_ToBeDeprecated(collection);
+    }
+
     if (!!collection.cassandraKeys) {
       return Q.resolve(collection.cassandraKeys);
     }
@@ -459,7 +515,52 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
+  public getTableKeys_ToBeDeprecated(collection: ViewModels.Collection): Q.Promise<CassandraTableKeys> {
+    if (!!collection.cassandraKeys) {
+      return Q.resolve(collection.cassandraKeys);
+    }
+    const clearInProgressMessage = logConsoleProgress(`Fetching keys for table ${collection.id()}`);
+    const { authType, databaseAccount } = userContext;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestKeysApi
+        : Constants.CassandraBackend.keysApi;
+    let endpoint = `${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`;
+    const deferred = Q.defer<CassandraTableKeys>();
+
+    $.ajax(endpoint, {
+      type: "POST",
+      data: {
+        accountName: databaseAccount?.name,
+        cassandraEndpoint: this.trimCassandraEndpoint(databaseAccount?.properties.cassandraEndpoint),
+        resourceId: databaseAccount?.id,
+        keyspaceId: collection.databaseId,
+        tableId: collection.id(),
+      },
+      beforeSend: this.setAuthorizationHeader as any,
+      cache: false,
+    })
+      .then(
+        (data: CassandraTableKeys) => {
+          collection.cassandraKeys = data;
+          logConsoleInfo(`Successfully fetched keys for table ${collection.id()}`);
+          deferred.resolve(data);
+        },
+        (error: any) => {
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          deferred.reject(errorText);
+        },
+      )
+      .done(clearInProgressMessage);
+    return deferred.promise;
+  }
+
   public getTableSchema(collection: ViewModels.Collection): Q.Promise<CassandraTableKey[]> {
+    if (!this.useCassandraProxyEndpoint("getSchema")) {
+      return this.getTableSchema_ToBeDeprecated(collection);
+    }
+
     if (!!collection.cassandraSchema) {
       return Q.resolve(collection.cassandraSchema);
     }
@@ -501,7 +602,52 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
+  public getTableSchema_ToBeDeprecated(collection: ViewModels.Collection): Q.Promise<CassandraTableKey[]> {
+    if (!!collection.cassandraSchema) {
+      return Q.resolve(collection.cassandraSchema);
+    }
+    const clearInProgressMessage = logConsoleProgress(`Fetching schema for table ${collection.id()}`);
+    const { databaseAccount, authType } = userContext;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestSchemaApi
+        : Constants.CassandraBackend.schemaApi;
+    let endpoint = `${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`;
+    const deferred = Q.defer<CassandraTableKey[]>();
+
+    $.ajax(endpoint, {
+      type: "POST",
+      data: {
+        accountName: databaseAccount?.name,
+        cassandraEndpoint: this.trimCassandraEndpoint(databaseAccount?.properties.cassandraEndpoint),
+        resourceId: databaseAccount?.id,
+        keyspaceId: collection.databaseId,
+        tableId: collection.id(),
+      },
+      beforeSend: this.setAuthorizationHeader as any,
+      cache: false,
+    })
+      .then(
+        (data: any) => {
+          collection.cassandraSchema = data.columns;
+          logConsoleInfo(`Successfully fetched schema for table ${collection.id()}`);
+          deferred.resolve(data.columns);
+        },
+        (error: any) => {
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
+          handleError(errorText, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          deferred.reject(errorText);
+        },
+      )
+      .done(clearInProgressMessage);
+    return deferred.promise;
+  }
+
   private createOrDeleteQuery(cassandraEndpoint: string, resourceId: string, query: string): Q.Promise<any> {
+    if (!this.useCassandraProxyEndpoint("createOrDelete")) {
+      return this.createOrDeleteQuery_ToBeDeprecated(cassandraEndpoint, resourceId, query);
+    }
+
     const deferred = Q.defer();
     const { authType, databaseAccount } = userContext;
     const apiEndpoint: string =
@@ -531,6 +677,38 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
+  private createOrDeleteQuery_ToBeDeprecated(
+    cassandraEndpoint: string,
+    resourceId: string,
+    query: string,
+  ): Q.Promise<any> {
+    const deferred = Q.defer();
+    const { authType, databaseAccount } = userContext;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestCreateOrDeleteApi
+        : Constants.CassandraBackend.createOrDeleteApi;
+    $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+      type: "POST",
+      data: {
+        accountName: databaseAccount?.name,
+        cassandraEndpoint: this.trimCassandraEndpoint(cassandraEndpoint),
+        resourceId: resourceId,
+        query: query,
+      },
+      beforeSend: this.setAuthorizationHeader as any,
+      cache: false,
+    }).then(
+      (data: any) => {
+        deferred.resolve();
+      },
+      (reason) => {
+        deferred.reject(reason);
+      },
+    );
+    return deferred.promise;
+  }
+
   private trimCassandraEndpoint(cassandraEndpoint: string): string {
     if (!cassandraEndpoint) {
       return cassandraEndpoint;
@@ -569,4 +747,23 @@ export class CassandraAPIDataClient extends TableDataClient {
   private getCassandraPartitionKeyProperty(collection: ViewModels.Collection): string {
     return collection.cassandraKeys.partitionKeys[0].property;
   }
+
+  private useCassandraProxyEndpoint(api: string): boolean {
+    const activeCassandraProxyEndpoints: string[] = [
+      CassandraProxyEndpoints.Development,
+      CassandraProxyEndpoints.Mpac,
+      CassandraProxyEndpoints.Prod,
+      CassandraProxyEndpoints.Fairfax,
+      CassandraProxyEndpoints.Mooncake,
+    ];
+
+    if (configContext.globallyEnabledCassandraAPIs.includes(api)) {
+      return true;
+    }
+
+    return (
+      configContext.NEW_CASSANDRA_APIS?.includes(api) &&
+      activeCassandraProxyEndpoints.includes(configContext.CASSANDRA_PROXY_ENDPOINT)
+    );
+  }
 }

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -3,11 +3,17 @@
 import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
 import {
   AppStateComponentNames,
-  deleteSubComponentState,
-  readSubComponentState,
-  saveSubComponentState,
+  deleteState,
+  loadState,
+  saveState,
+  saveStateDebounced,
 } from "Shared/AppStatePersistenceUtility";
+import { userContext } from "UserContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
+const componentName = AppStateComponentNames.DocumentsTab;
 
 export enum SubComponentName {
   ColumnSizes = "ColumnSizes",
@@ -15,7 +21,6 @@ export enum SubComponentName {
   MainTabDivider = "MainTabDivider",
   ColumnsSelection = "ColumnsSelection",
   ColumnSort = "ColumnSort",
-  CurrentFilter = "CurrentFilter",
 }
 
 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
@@ -25,22 +30,84 @@ export type TabDivider = { leftPaneWidthPercent: number };
 export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
 export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
 
-// Wrap the ...SubComponentState functions for type safety
-
-export const readDocumentsTabSubComponentState = <T>(
+/**
+ *
+ * @param subComponentName
+ * @param collection
+ * @param defaultValue Will be returned if persisted state is not found
+ * @returns
+ */
+export const readSubComponentState = <T>(
   subComponentName: SubComponentName,
   collection: ViewModels.CollectionBase,
   defaultValue: T,
-): T => readSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, defaultValue);
+): T => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.ReadPersistedTabState, { message, componentName });
+    return defaultValue;
+  }
 
-export const saveDocumentsTabSubComponentState = <T>(
+  const state = loadState({
+    componentName: componentName,
+    subComponentName,
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  }) as T;
+
+  return state || defaultValue;
+};
+
+/**
+ *
+ * @param subComponentName
+ * @param collection
+ * @param state State to save
+ * @param debounce true for high-frequency calls (e.g mouse drag events)
+ */
+export const saveSubComponentState = <T>(
   subComponentName: SubComponentName,
   collection: ViewModels.CollectionBase,
   state: T,
   debounce?: boolean,
-): void => saveSubComponentState<T>(AppStateComponentNames.DocumentsTab, subComponentName, collection, state, debounce);
+): void => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.SavePersistedTabState, { message, componentName });
+    return;
+  }
 
-export const deleteDocumentsTabSubComponentState = (
-  subComponentName: SubComponentName,
-  collection: ViewModels.CollectionBase,
-) => deleteSubComponentState(AppStateComponentNames.DocumentsTab, subComponentName, collection);
+  (debounce ? saveStateDebounced : saveState)(
+    {
+      componentName: componentName,
+      subComponentName,
+      globalAccountName,
+      databaseName: collection.databaseId,
+      containerName: collection.id(),
+    },
+    state,
+  );
+};
+
+export const deleteSubComponentState = (subComponentName: SubComponentName, collection: ViewModels.CollectionBase) => {
+  const globalAccountName = userContext.databaseAccount?.name;
+  if (!globalAccountName) {
+    const message = "Database account name not found in userContext";
+    console.error(message);
+    TelemetryProcessor.traceFailure(Action.DeletePersistedTabState, { message, componentName });
+    return;
+  }
+
+  deleteState({
+    componentName: componentName,
+    subComponentName,
+    globalAccountName,
+    databaseName: collection.databaseId,
+    containerName: collection.id(),
+  });
+};

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

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

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -1,6 +1,7 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import {
   Button,
+  Input,
   Link,
   MessageBar,
   MessageBarBody,
@@ -9,7 +10,8 @@ import {
   makeStyles,
   shorthands,
 } from "@fluentui/react-components";
-import { QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
+import { Dismiss16Filled } from "@fluentui/react-icons";
+import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import MongoUtility from "Common/MongoUtility";
 import { createDocument } from "Common/dataAccess/createDocument";
@@ -20,11 +22,10 @@ import {
 import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { readDocument } from "Common/dataAccess/readDocument";
 import { updateDocument } from "Common/dataAccess/updateDocument";
-import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
+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 { InputDataList, InputDatalistDropdownOptionSection } from "Explorer/Controls/InputDataList/InputDataList";
 import { ProgressModalDialog } from "Explorer/Controls/ProgressModalDialog";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -34,15 +35,13 @@ import {
   FilterHistory,
   SubComponentName,
   TabDivider,
-  deleteDocumentsTabSubComponentState,
-  readDocumentsTabSubComponentState,
-  saveDocumentsTabSubComponentState,
+  readSubComponentState,
+  saveSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { QueryConstants } from "Shared/Constants";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
@@ -55,7 +54,6 @@ 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 RefreshIcon from "../../../../images/refresh-cosmos.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
 import * as Constants from "../../../Common/Constants";
 import * as HeadersUtility from "../../../Common/HeadersUtility";
@@ -76,7 +74,6 @@ const MAX_FILTER_HISTORY_COUNT = 100; // Datalist will become scrollable, so we
 const NO_SQL_THROTTLING_DOC_URL =
   "https://learn.microsoft.com/azure/cosmos-db/nosql/troubleshoot-request-rate-too-large";
 const MONGO_THROTTLING_DOC_URL = "https://learn.microsoft.com/azure/cosmos-db/mongodb/prevent-rate-limiting-errors";
-const DATA_EXPLORER_DOC_URL = "https://learn.microsoft.com/en-us/azure/cosmos-db/data-explorer";
 
 const loadMoreHeight = LayoutConstants.rowHeight;
 export const useDocumentsTabStyles = makeStyles({
@@ -93,6 +90,12 @@ export const useDocumentsTabStyles = makeStyles({
     alignItems: "center",
     ...cosmosShorthands.borderBottom(),
   },
+  filterInput: {
+    flexGrow: 1,
+  },
+  appliedFilter: {
+    flexGrow: 1,
+  },
   tableContainer: {
     marginRight: tokens.spacingHorizontalXXXL,
   },
@@ -132,14 +135,6 @@ export const useDocumentsTabStyles = makeStyles({
     backgroundColor: "white",
     zIndex: 1,
   },
-  refreshBtn: {
-    position: "absolute",
-    top: "3px",
-    right: "4px",
-    float: "right",
-    zIndex: 1,
-    backgroundColor: "transparent",
-  },
   deleteProgressContent: {
     paddingTop: tokens.spacingVerticalL,
   },
@@ -151,8 +146,6 @@ export class DocumentsTabV2 extends TabsBase {
   private title: string;
   private resourceTokenPartitionKey: string;
 
-  protected persistedState: OpenCollectionTab;
-
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
 
@@ -160,13 +153,6 @@ export class DocumentsTabV2 extends TabsBase {
     this.title = options.title;
     this.partitionKey = options.partitionKey;
     this.resourceTokenPartitionKey = options.resourceTokenPartitionKey;
-
-    this.persistedState = {
-      actionType: ActionType.OpenCollectionTab,
-      tabKind: options.isPreferredApiMongoDB ? TabKind.MongoDocuments : TabKind.SQLDocuments,
-      databaseResourceId: options.collection.databaseId,
-      collectionResourceId: options.collection.id(),
-    };
   }
 
   public render(): JSX.Element {
@@ -353,7 +339,7 @@ export const getTabsButtons = ({
   onRevertExistingDocumentClick,
   onDeleteExistingDocumentsClick,
 }: ButtonsDependencies): CommandButtonComponentProps[] => {
-  if (isFabric() && userContext.fabricContext?.isReadOnly) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
     // All the following buttons require write access
     return [];
   }
@@ -570,6 +556,8 @@ export interface IDocumentsTabComponentProps {
   isTabActive: boolean;
 }
 
+const getUniqueId = (collection: ViewModels.CollectionBase): string => `${collection.databaseId}-${collection.id()}`;
+
 const getDefaultSqlFilters = (partitionKeys: string[]) =>
   ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC', "ORDER BY c._ts ASC"].concat(
     partitionKeys.map((partitionKey) => `WHERE c.${partitionKey} = "foo"`),
@@ -595,12 +583,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   onIsExecutingChange,
   isTabActive,
 }): JSX.Element => {
-  const [filterContent, setFilterContent] = useState<string>(() =>
-    readDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, ""),
-  );
-
+  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<ExtendedDocumentId[]>([]);
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  const filterInput = useRef<HTMLInputElement>(null);
   const styles = useDocumentsTabStyles();
 
   // Query
@@ -629,7 +619,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // State
   const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
+    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
       leftPaneWidthPercent: 35,
     }),
   );
@@ -644,7 +634,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // User's filter history
   const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
-    readDocumentsTabSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
+    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
   );
 
   // For progress bar for bulk delete (noSql)
@@ -667,6 +657,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
 
+  useEffect(() => {
+    if (isFilterFocused) {
+      filterInput.current?.focus();
+    }
+  }, [isFilterFocused]);
+
   /**
    * Recursively delete all documents by retrying throttled requests (429).
    * This only works for NoSQL, because the bulk response includes status for each delete document request.
@@ -760,6 +756,11 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }, timeout);
   }, [bulkDeleteOperation, bulkDeleteProcess, bulkDeleteMode]);
 
+  const applyFilterButton = {
+    enabled: true,
+    visible: true,
+  };
+
   const partitionKey: DataModels.PartitionKey = useMemo(
     () => _partitionKey || (_collection && _collection.partitionKey),
     [_collection, _partitionKey],
@@ -786,7 +787,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   };
 
   const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
-    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
       SubComponentName.ColumnsSelection,
       _collection,
       undefined,
@@ -830,8 +831,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   // This is executed in onActivate() in the original code.
   useEffect(() => {
     setKeyboardActions({
+      [KeyboardAction.SEARCH]: () => {
+        onShowFilterClick();
+        return true;
+      },
       [KeyboardAction.CLEAR_SEARCH]: () => {
-        updateFilterContent("");
+        setFilterContent("");
         refreshDocumentsGrid(true);
         return true;
       },
@@ -1159,16 +1164,27 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
           deletePromise = _bulkDeleteNoSqlDocuments(_collection, toDeleteDocumentIds);
         }
       } else {
-        deletePromise = MongoProxyClient.deleteDocuments(
-          _collection.databaseId,
-          _collection as ViewModels.Collection,
-          toDeleteDocumentIds,
-        ).then(({ deletedCount, isAcknowledged }) => {
-          if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
-            return toDeleteDocumentIds;
-          }
-          throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
-        });
+        if (isMongoBulkDeleteDisabled) {
+          // TODO: Once new mongo proxy is available for all users, remove the call for MongoProxyClient.deleteDocument().
+          // MongoProxyClient.deleteDocuments() should be called for all users.
+          deletePromise = MongoProxyClient.deleteDocument(
+            _collection.databaseId,
+            _collection as ViewModels.Collection,
+            toDeleteDocumentIds[0],
+          ).then(() => [toDeleteDocumentIds[0]]);
+          // ----------------------------------------------------------------------------------------------------
+        } else {
+          deletePromise = MongoProxyClient.deleteDocuments(
+            _collection.databaseId,
+            _collection as ViewModels.Collection,
+            toDeleteDocumentIds,
+          ).then(({ deletedCount, isAcknowledged }) => {
+            if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
+              return toDeleteDocumentIds;
+            }
+            throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
+          });
+        }
       }
 
       return deletePromise
@@ -1301,6 +1317,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     ],
   );
 
+  const onShowFilterClick = () => {
+    setIsFilterCreated(true);
+    setIsFilterExpanded(true);
+    setIsFilterFocused(true);
+  };
+
   const queryTimeoutEnabled = useCallback(
     (): boolean => !isPreferredApiMongoDB && LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
     [isPreferredApiMongoDB],
@@ -1342,6 +1364,19 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     selectedColumnIds,
   ]);
 
+  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;
+  };
+
   const updateDocumentIds = (newDocumentsIds: DocumentId[]): void => {
     setDocumentIds(newDocumentsIds);
 
@@ -1483,9 +1518,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   };
 
   const onFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (e.key === Constants.NormalizedEventKey.Enter) {
+    if (e.key === "Enter") {
       onApplyFilterClick();
 
+      // Suppress the default behavior of the key
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      onHideFilterClick();
+
       // Suppress the default behavior of the key
       e.preventDefault();
     }
@@ -1657,7 +1697,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
   const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
-    const persistedColumnsSelection = readDocumentsTabSubComponentState<ColumnsSelection>(
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
       SubComponentName.ColumnsSelection,
       _collection,
       undefined,
@@ -1968,7 +2008,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);
 
     setLastFilterContents(limitedLastFilterContents);
-    saveDocumentsTabSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
+    saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
   };
 
   const refreshDocumentsGrid = useCallback(
@@ -1983,6 +2023,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
           applyFilterButtonPressed,
         });
 
+        // collapse filter
+        setAppliedFilter(filterContent);
+        setIsFilterExpanded(false);
+
         // If apply filter is pressed, reset current selected document
         if (applyFilterButtonPressed) {
           setClickedRowIndex(RESET_INDEX);
@@ -2025,7 +2069,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
     setSelectedColumnIds(newSelectedColumnIds);
 
-    saveDocumentsTabSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
+    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
       selectedColumnIds: newSelectedColumnIds,
       columnDefinitions,
     });
@@ -2052,153 +2096,175 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
   }, [prevSelectedColumnIds, refreshDocumentsGrid, selectedColumnIds]);
 
+  // TODO: remove isMongoBulkDeleteDisabled when new mongo proxy is enabled for all users
   // TODO: remove partitionKey.systemKey when JS SDK bug is fixed
-  const isBulkDeleteDisabled = partitionKey.systemKey && !isPreferredApiMongoDB;
+  const isMongoBulkDeleteDisabled = !MongoProxyClient.useMongoProxyEndpoint(Constants.MongoProxyApi.BulkDelete);
+  const isBulkDeleteDisabled =
+    (partitionKey.systemKey && !isPreferredApiMongoDB) || (isPreferredApiMongoDB && isMongoBulkDeleteDisabled);
   //  -------------------------------------------------------
 
-  const getFilterChoices = (): InputDatalistDropdownOptionSection[] => {
-    const options: InputDatalistDropdownOptionSection[] = [];
-    const nonBlankLastFilters = lastFilterContents.filter((filter) => filter.trim() !== "");
-    if (nonBlankLastFilters.length > 0) {
-      options.push({
-        label: "Saved filters",
-        options: nonBlankLastFilters,
-      });
-    }
-    options.push({
-      label: "Default filters",
-      options: isPreferredApiMongoDB ? defaultMongoFilters : getDefaultSqlFilters(partitionKeyProperties),
-    });
-    return options;
-  };
-
-  const updateFilterContent = (filter: string): void => {
-    if (filter === "" || filter === undefined) {
-      deleteDocumentsTabSubComponentState(SubComponentName.CurrentFilter, _collection);
-    } else {
-      saveDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, filter, true);
-    }
-    setFilterContent(filter);
-  };
-
   return (
     <CosmosFluentProvider className={styles.container}>
       <div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
-        <div className={styles.filterRow}>
-          {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
-          <InputDataList
-            dropdownOptions={getFilterChoices()}
-            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."
-            }
-            title="Type a query predicate or choose one from the list."
-            value={filterContent}
-            onChange={updateFilterContent}
-            onKeyDown={onFilterKeyDown}
-            bottomLink={{ text: "Learn more", url: DATA_EXPLORER_DOC_URL }}
-          />
-          <Button
-            appearance="primary"
-            size="small"
-            onClick={() => {
-              if (isExecuting) {
-                if (!isPreferredApiMongoDB) {
-                  queryAbortController.abort();
-                }
-              } else {
-                onApplyFilterClick();
-              }
-            }}
-            disabled={isExecuting && isPreferredApiMongoDB}
-            aria-label={!isExecuting || isPreferredApiMongoDB ? "Apply filter" : "Cancel"}
-            tabIndex={0}
-          >
-            {!isExecuting || isPreferredApiMongoDB ? "Apply Filter" : "Cancel"}
-          </Button>
-        </div>
-        <Allotment
-          onDragEnd={(sizes: number[]) => {
-            tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-            saveDocumentsTabSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
-            setTabStateData(tabStateData);
-          }}
-        >
-          <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
-            <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
-              <div className={styles.tableContainer}>
-                <div
-                  style={
-                    {
-                      height: "100%",
-                      width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
-                    } /* Fix to make table not resize beyond parent's width */
+        {isFilterCreated && (
+          <>
+            {!isFilterExpanded && !isPreferredApiMongoDB && (
+              <div className={styles.filterRow}>
+                <span>SELECT * FROM c</span>
+                <span className={styles.appliedFilter}>{appliedFilter}</span>
+                <Button appearance="primary" size="small" onClick={onShowFilterClick}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {!isFilterExpanded && isPreferredApiMongoDB && (
+              <div className={styles.filterRow}>
+                {appliedFilter.length > 0 && <span>Filter :</span>}
+                {!(appliedFilter.length > 0) && <span className="noFilterApplied">No filter applied</span>}
+                <span className={styles.appliedFilter}>{appliedFilter}</span>
+                <Button appearance="primary" size="small" onClick={onShowFilterClick}>
+                  Edit Filter
+                </Button>
+              </div>
+            )}
+            {isFilterExpanded && (
+              <div className={styles.filterRow}>
+                {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
+                <Input
+                  ref={filterInput}
+                  type="text"
+                  size="small"
+                  list={`filtersList-${getUniqueId(_collection)}`}
+                  className={`filterInput ${styles.filterInput}`}
+                  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-${getUniqueId(_collection)}`}>
+                  {addStringsNoDuplicate(
+                    lastFilterContents,
+                    isPreferredApiMongoDB ? defaultMongoFilters : getDefaultSqlFilters(partitionKeyProperties),
+                  ).map((filter) => (
+                    <option key={filter} value={filter} />
+                  ))}
+                </datalist>
+
+                <Button
+                  appearance="primary"
+                  size="small"
+                  onClick={onApplyFilterClick}
+                  disabled={!applyFilterButton.enabled}
+                  aria-label="Apply filter"
+                  tabIndex={0}
                 >
-                  <DocumentsTableComponent
-                    onRefreshTable={() => refreshDocumentsGrid(false)}
-                    items={tableItems}
-                    onSelectedRowsChange={onSelectedRowsChange}
-                    selectedRows={selectedRows}
-                    size={tableContainerSizePx}
-                    selectedColumnIds={selectedColumnIds}
-                    columnDefinitions={columnDefinitions}
-                    isRowSelectionDisabled={
-                      isBulkDeleteDisabled || (isFabric() && userContext.fabricContext?.isReadOnly)
-                    }
-                    onColumnSelectionChange={onColumnSelectionChange}
-                    defaultColumnSelection={getInitialColumnSelection()}
-                    collection={_collection}
-                    isColumnSelectionDisabled={isPreferredApiMongoDB}
-                  />
-                </div>
-                {tableContainerSizePx?.width >= calculateOffset(selectedColumnIds.length) + 200 && (
-                  <div
-                    title="Refresh"
-                    className={styles.refreshBtn}
-                    role="button"
-                    onClick={() => refreshDocumentsGrid(false)}
-                    aria-label="Refresh"
+                  Apply Filter
+                </Button>
+                {!isPreferredApiMongoDB && isExecuting && (
+                  <Button
+                    appearance="primary"
+                    size="small"
+                    aria-label="Cancel Query"
+                    onClick={() => queryAbortController.abort()}
                     tabIndex={0}
                   >
-                    <img src={RefreshIcon} alt="Refresh" />
+                    Cancel Query
+                  </Button>
+                )}
+                <Button
+                  aria-label="close filter"
+                  tabIndex={0}
+                  onClick={onHideFilterClick}
+                  onKeyDown={onCloseButtonKeyDown}
+                  appearance="transparent"
+                  size="small"
+                  icon={<Dismiss16Filled />}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {/* <Split> doesn't like to be a flex child */}
+        <div style={{ overflow: "hidden", height: "100%" }}>
+          <Allotment
+            onDragEnd={(sizes: number[]) => {
+              tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
+              saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
+              setTabStateData(tabStateData);
+            }}
+          >
+            <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
+              <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
+                <div className={styles.tableContainer}>
+                  <div
+                    style={
+                      {
+                        height: "100%",
+                        width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
+                      } /* Fix to make table not resize beyond parent's width */
+                    }
+                  >
+                    <DocumentsTableComponent
+                      onRefreshTable={() => refreshDocumentsGrid(false)}
+                      items={tableItems}
+                      onSelectedRowsChange={onSelectedRowsChange}
+                      selectedRows={selectedRows}
+                      size={tableContainerSizePx}
+                      selectedColumnIds={selectedColumnIds}
+                      columnDefinitions={columnDefinitions}
+                      isRowSelectionDisabled={
+                        isBulkDeleteDisabled ||
+                        (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
+                      }
+                      onColumnSelectionChange={onColumnSelectionChange}
+                      defaultColumnSelection={getInitialColumnSelection()}
+                      collection={_collection}
+                      isColumnSelectionDisabled={isPreferredApiMongoDB}
+                    />
                   </div>
+                </div>
+                {tableItems.length > 0 && (
+                  <a
+                    className={styles.loadMore}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => loadNextPage(documentsIterator.iterator, false)}
+                    onKeyDown={onLoadMoreKeyInput}
+                  >
+                    Load more
+                  </a>
                 )}
               </div>
-              {tableItems.length > 0 && (
-                <a
-                  className={styles.loadMore}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => loadNextPage(documentsIterator.iterator, false)}
-                  onKeyDown={onLoadMoreKeyInput}
-                >
-                  Load more
-                </a>
-              )}
-            </div>
-          </Allotment.Pane>
-          <Allotment.Pane minSize={30}>
-            <div style={{ height: "100%", width: "100%" }}>
-              {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
-                <EditorReact
-                  language={"json"}
-                  content={selectedDocumentContent}
-                  isReadOnly={false}
-                  ariaLabel={"Document editor"}
-                  lineNumbers={"on"}
-                  theme={"_theme"}
-                  onContentChanged={_onEditorContentChange}
-                  enableWordWrapContextMenuItem={true}
-                />
-              )}
-              {selectedRows.size > 1 && (
-                <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
-              )}
-            </div>
-          </Allotment.Pane>
-        </Allotment>
+            </Allotment.Pane>
+            <Allotment.Pane minSize={30}>
+              <div style={{ height: "100%", width: "100%" }}>
+                {isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
+                  <EditorReact
+                    language={"json"}
+                    content={selectedDocumentContent}
+                    isReadOnly={false}
+                    ariaLabel={"Document editor"}
+                    lineNumbers={"on"}
+                    theme={"_theme"}
+                    onContentChanged={_onEditorContentChange}
+                    enableWordWrapContextMenuItem={true}
+                  />
+                )}
+                {selectedRows.size > 1 && (
+                  <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
+                )}
+              </div>
+            </Allotment.Pane>
+          </Allotment>
+        </div>
       </div>
       {bulkDeleteOperation && (
         <ProgressModalDialog

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -42,9 +42,9 @@ import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPan
 import {
   ColumnSizesMap,
   ColumnSort,
-  deleteDocumentsTabSubComponentState,
-  readDocumentsTabSubComponentState,
-  saveDocumentsTabSubComponentState,
+  deleteSubComponentState,
+  readSubComponentState,
+  saveSubComponentState,
   SubComponentName,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
@@ -118,11 +118,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   const sortedRowsRef = React.useRef(null);
 
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnSizesMap: ColumnSizesMap = readDocumentsTabSubComponentState(
-      SubComponentName.ColumnSizes,
-      collection,
-      {},
-    );
+    const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
     const columnSizesPx: TableColumnSizingOptions = {};
     selectedColumnIds.forEach((columnId) => {
       if (
@@ -146,7 +142,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     sortDirection: "ascending" | "descending";
     sortColumn: TableColumnId | undefined;
   }>(() => {
-    const sort = readDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
+    const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
 
     if (!sort) {
       return {
@@ -178,12 +174,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         return acc;
       }, {} as ColumnSizesMap);
 
-      saveDocumentsTabSubComponentState<ColumnSizesMap>(
-        SubComponentName.ColumnSizes,
-        collection,
-        persistentSizes,
-        true,
-      );
+      saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, persistentSizes, true);
 
       return newSizingOptions;
     });
@@ -195,14 +186,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     setColumnSort(event, columnId, direction);
 
     if (columnId === undefined || direction === undefined) {
-      deleteDocumentsTabSubComponentState(SubComponentName.ColumnSort, collection);
+      deleteSubComponentState(SubComponentName.ColumnSort, collection);
       return;
     }
 
-    saveDocumentsTabSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, {
-      columnId,
-      direction,
-    });
+    saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
   };
 
   // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
@@ -233,7 +221,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
                     aria-label="Select column"
                     size="small"
                     icon={<MoreHorizontalRegular />}
-                    style={{ position: "absolute", right: 10, backgroundColor: tokens.colorNeutralBackground1 }}
+                    style={{ position: "absolute", right: 0, backgroundColor: tokens.colorNeutralBackground1 }}
                   />
                 </MenuTrigger>
                 <MenuPopover>

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

@@ -17,124 +17,106 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
       className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29"
     >
       <span>
-         SELECT * FROM c 
+        SELECT * FROM c
       </span>
-      <InputDataList
-        bottomLink={
-          {
-            "text": "Learn more",
-            "url": "https://learn.microsoft.com/en-us/azure/cosmos-db/data-explorer",
-          }
-        }
-        dropdownOptions={
-          [
-            {
-              "label": "Default filters",
-              "options": [
-                "WHERE c.id = "foo"",
-                "ORDER BY c._ts DESC",
-                "WHERE c.id = "foo" ORDER BY c._ts DESC",
-                "ORDER BY c._ts ASC",
-                "WHERE c.foo = "foo"",
-              ],
-            },
-          ]
-        }
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder="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."
-        title="Type a query predicate or choose one from the list."
-        value=""
+      <span
+        className="___r7kt3y0_0000000 fqerorx"
       />
       <Button
         appearance="primary"
-        aria-label="Apply filter"
-        disabled={false}
         onClick={[Function]}
         size="small"
-        tabIndex={0}
       >
-        Apply Filter
+        Edit Filter
       </Button>
     </div>
-    <Allotment
-      onDragEnd={[Function]}
+    <div
+      style={
+        {
+          "height": "100%",
+          "overflow": "hidden",
+        }
+      }
     >
-      <Allotment.Pane
-        minSize={55}
-        preferredSize="35%"
+      <Allotment
+        onDragEnd={[Function]}
       >
-        <div
-          style={
-            {
-              "height": "100%",
-              "overflow": "hidden",
-              "width": "100%",
-            }
-          }
+        <Allotment.Pane
+          minSize={55}
+          preferredSize="35%"
         >
           <div
-            className="___9o87uj0_0000000 ffefeo0"
+            style={
+              {
+                "height": "100%",
+                "overflow": "hidden",
+                "width": "100%",
+              }
+            }
           >
             <div
-              style={
-                {
-                  "height": "100%",
-                  "width": "calc(100% + -11px)",
-                }
-              }
+              className="___9o87uj0_0000000 ffefeo0"
             >
-              <DocumentsTableComponent
-                collection={
+              <div
+                style={
                   {
-                    "databaseId": "databaseId",
-                    "id": [Function],
+                    "height": "100%",
+                    "width": "calc(100% + -11px)",
                   }
                 }
-                columnDefinitions={
-                  [
+              >
+                <DocumentsTableComponent
+                  collection={
                     {
-                      "id": "id",
-                      "isPartitionKey": false,
-                      "label": "id",
-                    },
-                  ]
-                }
-                defaultColumnSelection={
-                  [
-                    "id",
-                  ]
-                }
-                isColumnSelectionDisabled={false}
-                isRowSelectionDisabled={true}
-                items={[]}
-                onColumnSelectionChange={[Function]}
-                onRefreshTable={[Function]}
-                onSelectedRowsChange={[Function]}
-                selectedColumnIds={
-                  [
-                    "id",
-                  ]
-                }
-                selectedRows={Set {}}
-              />
+                      "databaseId": "databaseId",
+                      "id": [Function],
+                    }
+                  }
+                  columnDefinitions={
+                    [
+                      {
+                        "id": "id",
+                        "isPartitionKey": false,
+                        "label": "id",
+                      },
+                    ]
+                  }
+                  defaultColumnSelection={
+                    [
+                      "id",
+                    ]
+                  }
+                  isColumnSelectionDisabled={false}
+                  isRowSelectionDisabled={true}
+                  items={[]}
+                  onColumnSelectionChange={[Function]}
+                  onRefreshTable={[Function]}
+                  onSelectedRowsChange={[Function]}
+                  selectedColumnIds={
+                    [
+                      "id",
+                    ]
+                  }
+                  selectedRows={Set {}}
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </Allotment.Pane>
-      <Allotment.Pane
-        minSize={30}
-      >
-        <div
-          style={
-            {
-              "height": "100%",
-              "width": "100%",
+        </Allotment.Pane>
+        <Allotment.Pane
+          minSize={30}
+        >
+          <div
+            style={
+              {
+                "height": "100%",
+                "width": "100%",
+              }
             }
-          }
-        />
-      </Allotment.Pane>
-    </Allotment>
+          />
+        </Allotment.Pane>
+      </Allotment>
+    </div>
   </div>
 </CosmosFluentProvider>
 `;

src/Explorer/Tabs/MongoQueryTab/MongoQueryTab.tsx

@@ -1,4 +1,3 @@
-import { ActionType, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import MongoUtility from "../../../Common/MongoUtility";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -21,7 +20,7 @@ export class NewMongoQueryTab extends NewQueryTab {
     private mongoQueryTabProps: IMongoQueryTabProps,
   ) {
     super(options, mongoQueryTabProps);
-    this.queryText = options.queryText ?? "";
+    this.queryText = "";
     this.iMongoQueryTabComponentProps = {
       collection: options.collection,
       isExecutionError: this.isExecutionError(),
@@ -29,8 +28,6 @@ export class NewMongoQueryTab extends NewQueryTab {
       tabsBaseInstance: this,
       queryText: this.queryText,
       partitionKey: this.partitionKey,
-      splitterDirection: options.splitterDirection,
-      queryViewSizePercent: options.queryViewSizePercent,
       container: this.mongoQueryTabProps.container,
       onTabAccessor: (instance: ITabAccessor): void => {
         this.iTabAccessor = instance;
@@ -38,26 +35,6 @@ export class NewMongoQueryTab extends NewQueryTab {
       isPreferredApiMongoDB: true,
       monacoEditorSetting: "plaintext",
       viewModelcollection: this.mongoQueryTabProps.viewModelcollection,
-      onUpdatePersistedState: (state: {
-        queryText: string;
-        splitterDirection: string;
-        queryViewSizePercent: number;
-      }): void => {
-        this.persistedState = {
-          actionType: ActionType.OpenCollectionTab,
-          tabKind: TabKind.SQLQuery,
-          databaseResourceId: options.collection.databaseId,
-          collectionResourceId: options.collection.id(),
-          query: {
-            text: state.queryText,
-          },
-          splitterDirection: state.splitterDirection as "vertical" | "horizontal",
-          queryViewSizePercent: state.queryViewSizePercent,
-        };
-        if (this.triggerPersistState) {
-          this.triggerPersistState();
-        }
-      },
     };
   }
 

src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx

@@ -1,4 +1,6 @@
+import { useMongoProxyEndpoint } from "Common/MongoProxyClient";
 import React, { Component } from "react";
+import * as Constants from "../../../Common/Constants";
 import { configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
@@ -48,13 +50,15 @@ 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 = useMongoProxyEndpoint(Constants.MongoProxyApi.LegacyMongoShell);
 
     this.state = {
-      url: getMongoShellUrl(),
+      url: getMongoShellUrl(this._useMongoProxyEndpoint),
     };
 
     props.onMongoShellTabAccessor({
@@ -109,9 +113,17 @@ export default class MongoShellTabComponent extends Component<
     const resourceId = databaseAccount?.id;
     const accountName = databaseAccount?.name;
     const documentEndpoint = databaseAccount?.properties.mongoEndpoint || databaseAccount?.properties.documentEndpoint;
+    const mongoEndpoint =
+      documentEndpoint.substr(
+        Constants.MongoDBAccounts.protocol.length + 3,
+        documentEndpoint.length -
+          (Constants.MongoDBAccounts.protocol.length + 2 + Constants.MongoDBAccounts.defaultPort.length),
+      ) + Constants.MongoDBAccounts.defaultPort.toString();
     const databaseId = this.props.collection.databaseId;
     const collectionId = this.props.collection.id();
-    const apiEndpoint = configContext.MONGO_PROXY_ENDPOINT;
+    const apiEndpoint = this._useMongoProxyEndpoint
+      ? configContext.MONGO_PROXY_ENDPOINT
+      : configContext.BACKEND_ENDPOINT;
     const encryptedAuthToken: string = userContext.accessToken;
 
     shellIframe.contentWindow.postMessage(
@@ -120,7 +132,7 @@ export default class MongoShellTabComponent extends Component<
         data: {
           resourceId: resourceId,
           accountName: accountName,
-          mongoEndpoint: documentEndpoint,
+          mongoEndpoint: this._useMongoProxyEndpoint ? documentEndpoint : mongoEndpoint,
           authorization: authorization,
           databaseId: databaseId,
           collectionId: collectionId,

src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts

@@ -2,6 +2,8 @@ import { Platform, resetConfigContext, updateConfigContext } from "../../../Conf
 import { updateUserContext, userContext } from "../../../UserContext";
 import { getMongoShellUrl } from "./getMongoShellUrl";
 
+const mongoBackendEndpoint = "https://localhost:1234";
+
 describe("getMongoShellUrl", () => {
   let queryString = "";
 
@@ -9,6 +11,7 @@ describe("getMongoShellUrl", () => {
     resetConfigContext();
 
     updateConfigContext({
+      BACKEND_ENDPOINT: mongoBackendEndpoint,
       platform: Platform.Hosted,
     });
 
@@ -34,7 +37,12 @@ describe("getMongoShellUrl", () => {
     queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
   });
 
-  it("should return /index.html by default", () => {
-    expect(getMongoShellUrl().toString()).toContain(`/index.html?${queryString}`);
+  it("should return /indexv2.html by default", () => {
+    expect(getMongoShellUrl().toString()).toContain(`/indexv2.html?${queryString}`);
+  });
+
+  it("should return /index.html when useMongoProxyEndpoint is true", () => {
+    const useMongoProxyEndpoint: boolean = true;
+    expect(getMongoShellUrl(useMongoProxyEndpoint).toString()).toContain(`/index.html?${queryString}`);
   });
 });

src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts

@@ -1,11 +1,11 @@
 import { userContext } from "../../../UserContext";
 
-export function getMongoShellUrl(): string {
+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}`;
 
-  return `/mongoshell/index.html?${queryString}`;
+  return useMongoProxyEndpoint ? `/mongoshell/index.html?${queryString}` : `/mongoshell/indexv2.html?${queryString}`;
 }

src/Explorer/Tabs/QueryTab/QueryTab.tsx

@@ -1,5 +1,4 @@
 import { sendMessage } from "Common/MessageHandler";
-import { ActionType, OpenQueryTab, TabKind } from "Contracts/ActionContracts";
 import { MessageTypes } from "Contracts/MessageTypes";
 import { CopilotProvider } from "Explorer/QueryCopilot/QueryCopilotContext";
 import { userContext } from "UserContext";
@@ -27,8 +26,6 @@ export class NewQueryTab extends TabsBase {
   public iQueryTabComponentProps: IQueryTabComponentProps;
   public iTabAccessor: ITabAccessor;
 
-  protected persistedState: OpenQueryTab;
-
   constructor(
     options: QueryTabOptions,
     private props: IQueryTabProps,
@@ -42,41 +39,12 @@ export class NewQueryTab extends TabsBase {
       tabsBaseInstance: this,
       queryText: options.queryText,
       partitionKey: this.partitionKey,
-      splitterDirection: options.splitterDirection,
-      queryViewSizePercent: options.queryViewSizePercent,
       container: this.props.container,
       onTabAccessor: (instance: ITabAccessor): void => {
         this.iTabAccessor = instance;
       },
       isPreferredApiMongoDB: false,
-      onUpdatePersistedState: (state: {
-        queryText: string;
-        splitterDirection: string;
-        queryViewSizePercent: number;
-      }): void => {
-        this.persistedState = {
-          actionType: ActionType.OpenCollectionTab,
-          tabKind: TabKind.SQLQuery,
-          databaseResourceId: options.collection.databaseId,
-          collectionResourceId: options.collection.id(),
-          query: {
-            text: state.queryText,
-          },
-          splitterDirection: state.splitterDirection as "vertical" | "horizontal",
-          queryViewSizePercent: state.queryViewSizePercent,
-        };
-        if (this.triggerPersistState) {
-          this.triggerPersistState();
-        }
-      },
     };
-
-    // set initial state
-    this.iQueryTabComponentProps.onUpdatePersistedState({
-      queryText: options.queryText,
-      splitterDirection: options.splitterDirection,
-      queryViewSizePercent: options.queryViewSizePercent,
-    });
   }
 
   public render(): JSX.Element {

src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx

@@ -34,7 +34,6 @@ jest.mock("Shared/AppStatePersistenceUtility", () => ({
   AppStateComponentNames: {
     QueryCopilot: "QueryCopilot",
   },
-  readSubComponentState: jest.fn(),
 }));
 
 describe("QueryTabComponent", () => {

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -18,7 +18,13 @@ import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 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 { Allotment } from "allotment";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
@@ -93,13 +99,6 @@ export interface IQueryTabComponentProps {
   copilotEnabled?: boolean;
   isSampleCopilotActive?: boolean;
   copilotStore?: Partial<QueryCopilotState>;
-  splitterDirection?: "horizontal" | "vertical";
-  queryViewSizePercent?: number;
-  onUpdatePersistedState: (state: {
-    queryText: string;
-    splitterDirection: "vertical" | "horizontal";
-    queryViewSizePercent: number;
-  }) => void;
 }
 
 interface IQueryTabStates {
@@ -119,13 +118,11 @@ interface IQueryTabStates {
   queryResultsView: SplitterDirection;
   errors?: QueryError[];
   modelMarkers?: monaco.editor.IMarkerData[];
-  queryViewSizePercent: number;
 }
 
 export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any => {
   const styles = useQueryTabStyles();
   const copilotStore = useCopilotStore();
-
   const isSampleCopilotActive = useSelectedNode.getState().isQueryCopilotCollectionSelected();
   const queryTabProps = {
     ...props,
@@ -135,12 +132,12 @@ export const QueryTabCopilotComponent = (props: IQueryTabComponentProps): any =>
     isSampleCopilotActive: isSampleCopilotActive,
     copilotStore: copilotStore,
   };
-  return <QueryTabComponentImpl styles={styles} {...queryTabProps} />;
+  return <QueryTabComponentImpl styles={styles} {...queryTabProps}></QueryTabComponentImpl>;
 };
 
 export const QueryTabComponent = (props: IQueryTabComponentProps): any => {
   const styles = useQueryTabStyles();
-  return <QueryTabComponentImpl styles={styles} {...{ ...props }} />;
+  return <QueryTabComponentImpl styles={styles} {...props}></QueryTabComponentImpl>;
 };
 
 type QueryTabComponentImplProps = IQueryTabComponentProps & {
@@ -149,8 +146,6 @@ type QueryTabComponentImplProps = IQueryTabComponentProps & {
 
 // Inner (legacy) class component. We only use this component via one of the two functional components above (since we need to use the `useQueryTabStyles` hook).
 class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps, IQueryTabStates> {
-  private static readonly DEBOUNCE_DELAY_MS = 1000;
-
   public queryEditorId: string;
   public executeQueryButton: Button;
   public saveQueryButton: Button;
@@ -162,10 +157,10 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   private _iterator: MinimalQueryIterator;
   private queryAbortController: AbortController;
   queryEditor: React.RefObject<EditorReact>;
-  private timeoutId: NodeJS.Timeout | undefined;
 
   constructor(props: QueryTabComponentImplProps) {
     super(props);
+
     this.queryEditor = createRef<EditorReact>();
 
     this.state = {
@@ -181,9 +176,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
       cancelQueryTimeoutID: undefined,
       copilotActive: this._queryCopilotActive(),
       currentTabActive: true,
-      queryResultsView:
-        props.splitterDirection === "vertical" ? SplitterDirection.Vertical : SplitterDirection.Horizontal,
-      queryViewSizePercent: props.queryViewSizePercent,
+      queryResultsView: getDefaultQueryResultsView(),
     };
     this.isCloseClicked = false;
     this.splitterId = this.props.tabId + "_splitter";
@@ -214,23 +207,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
     });
   }
 
-  /**
-   * Helper function to save the query text in the query tab state
-   * Since it reads and writes to the same state, it is debounced
-   */
-  private saveQueryTabStateDebounced = () => {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-    this.timeoutId = setTimeout(async () => {
-      this.props.onUpdatePersistedState({
-        queryText: this.state.sqlQueryEditorContent,
-        splitterDirection: this.state.queryResultsView,
-        queryViewSizePercent: this.state.queryViewSizePercent,
-      });
-    }, QueryTabComponentImpl.DEBOUNCE_DELAY_MS);
-  };
-
   private _queryCopilotActive(): boolean {
     if (this.props.copilotEnabled) {
       return readCopilotToggleStatus(userContext.databaseAccount);
@@ -375,7 +351,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
         ruCapPerOperation: ruThreshold,
       } as QueryOperationOptions;
     }
-
     const queryDocuments = async (firstItemIndex: number) =>
       await queryDocumentsPage(
         this.props.collection && this.props.collection.id(),
@@ -592,7 +567,7 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
     };
   }
   private _setViewLayout(direction: SplitterDirection): void {
-    this.setState({ queryResultsView: direction }, () => this.saveQueryTabStateDebounced());
+    this.setState({ queryResultsView: direction });
 
     // We'll need to refresh the context buttons to update the selected state of the view buttons
     setTimeout(() => {
@@ -624,16 +599,13 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
     if (this.state.copilotActive) {
       this.props.copilotStore?.setQuery(newContent);
     }
-    this.setState(
-      {
-        sqlQueryEditorContent: newContent,
-        queryCopilotGeneratedQuery: "",
+    this.setState({
+      sqlQueryEditorContent: newContent,
+      queryCopilotGeneratedQuery: "",
 
-        // Clear the markers when the user edits the document.
-        modelMarkers: [],
-      },
-      () => this.saveQueryTabStateDebounced(),
-    );
+      // Clear the markers when the user edits the document.
+      modelMarkers: [],
+    });
     if (this.isPreferredApiMongoDB) {
       if (newContent.length > 0) {
         this.executeQueryButton = {
@@ -732,20 +704,8 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
             ></QueryCopilotPromptbar>
           )}
           {/* Set 'key' to the value of vertical to force re-rendering when vertical changes, to work around https://github.com/johnwalley/allotment/issues/457 */}
-          <Allotment
-            key={vertical.toString()}
-            vertical={vertical}
-            onDragEnd={(sizes: number[]) => {
-              const queryViewSizePercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-              this.setState({ queryViewSizePercent }, () => this.saveQueryTabStateDebounced());
-            }}
-          >
-            <Allotment.Pane
-              data-test="QueryTab/EditorPane"
-              preferredSize={
-                this.state.queryViewSizePercent !== undefined ? `${this.state.queryViewSizePercent}%` : undefined
-              }
-            >
+          <Allotment key={vertical.toString()} vertical={vertical}>
+            <Allotment.Pane data-test="QueryTab/EditorPane">
               <EditorReact
                 ref={this.queryEditor}
                 className={this.props.styles.queryEditor}

src/Explorer/Tabs/ScriptTabBase.ts

@@ -1,6 +1,5 @@
 import * as ko from "knockout";
 import Q from "q";
-import { IsValidCosmosDbResourceId } from "Utils/ValidationUtils";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
@@ -58,7 +57,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     }
 
     this.id = editable.observable<string>();
-    this.id.validations([IsValidCosmosDbResourceId]);
+    this.id.validations([ScriptTabBase._isValidId]);
 
     this.editorContent = editable.observable<string>();
     this.editorContent.validations([ScriptTabBase._isNotEmpty]);
@@ -263,6 +262,29 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     this.updateNavbarWithTabsButtons();
   }
 
+  private static _isValidId(id: string): boolean {
+    if (!id) {
+      return false;
+    }
+
+    const invalidStartCharacters = /^[/?#\\]/;
+    if (invalidStartCharacters.test(id)) {
+      return false;
+    }
+
+    const invalidMiddleCharacters = /^.+[/?#\\]/;
+    if (invalidMiddleCharacters.test(id)) {
+      return false;
+    }
+
+    const invalidEndCharacters = /.*[/?#\\ ]$/;
+    if (invalidEndCharacters.test(id)) {
+      return false;
+    }
+
+    return true;
+  }
+
   private static _isNotEmpty(value: string): boolean {
     return !!value;
   }

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -1,4 +1,3 @@
-import { ActionType, OpenCollectionTab, TabKind } from "Contracts/ActionContracts";
 import React from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { SettingsComponent } from "../Controls/Settings/SettingsComponent";
@@ -11,18 +10,6 @@ export class SettingsTabV2 extends TabsBase {
 }
 
 export class CollectionSettingsTabV2 extends SettingsTabV2 {
-  protected persistedState: OpenCollectionTab;
-
-  constructor(options: ViewModels.TabOptions) {
-    super(options);
-    this.persistedState = {
-      actionType: ActionType.OpenCollectionTab,
-      tabKind: TabKind.ScaleSettings,
-      databaseResourceId: options.collection.databaseId,
-      collectionResourceId: options.collection.id(),
-    };
-  }
-
   public onActivate(): void {
     super.onActivate();
     this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.CollectionSettingsV2);

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -1,7 +1,6 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { Pivot, PivotItem } from "@fluentui/react";
 import { KeyboardAction } from "KeyboardShortcuts";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React from "react";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -456,12 +455,11 @@ export default class StoredProcedureTabComponent extends React.Component<
   }
 
   public handleIdOnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const isValidId: boolean = event.currentTarget.reportValidity();
     if (this.state.saveButton.visible) {
       this.setState({
         id: event.target.value,
         saveButton: {
-          enabled: isValidId,
+          enabled: true,
           visible: this.props.scriptTabBaseInstance.isNew(),
         },
         discardButton: {
@@ -530,8 +528,8 @@ export default class StoredProcedureTabComponent extends React.Component<
               className="formTree"
               type="text"
               required
-              pattern={ValidCosmosDbIdInputPattern.source}
-              title={ValidCosmosDbIdDescription}
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
               aria-label="Stored procedure id"
               placeholder="Enter the new stored procedure id"
               size={40}

src/Explorer/Tabs/Tabs.tsx

@@ -1,17 +1,23 @@
+import { IMessageBarStyles, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
+import { CassandraProxyEndpoints, MongoProxyEndpoints } from "Common/Constants";
+import { sendMessage } from "Common/MessageHandler";
+import { configContext } from "ConfigContext";
+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 { FabricHomeScreen } from "Explorer/SplashScreen/FabricHome";
 import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 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 { LayoutConstants } from "Explorer/Theme/ThemeUtil";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
+import { CassandraProxyOutboundIPs, MongoProxyOutboundIPs, PortalBackendIPs } from "Utils/EndpointUtils";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
@@ -29,7 +35,11 @@ interface TabsProps {
 }
 
 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs();
+  const [
+    showMongoAndCassandraProxiesNetworkSettingsWarningState,
+    setShowMongoAndCassandraProxiesNetworkSettingsWarningState,
+  ] = useState<boolean>(showMongoAndCassandraProxiesNetworkSettingsWarning());
 
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.TABS);
   useEffect(() => {
@@ -40,8 +50,51 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
     });
   }, [setKeyboardHandlers]);
 
+  const defaultMessageBarStyles: IMessageBarStyles = {
+    root: {
+      height: `${LayoutConstants.rowHeight}px`,
+      overflow: "hidden",
+      flexDirection: "row",
+    },
+  };
+
   return (
     <div className="tabsManagerContainer">
+      {networkSettingsWarning && (
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          styles={defaultMessageBarStyles}
+          actions={
+            <MessageBarButton
+              onClick={() =>
+                sendMessage({
+                  type:
+                    userContext.apiType === "VCoreMongo"
+                      ? MessageTypes.OpenVCoreMongoNetworkingBlade
+                      : MessageTypes.OpenPostgresNetworkingBlade,
+                })
+              }
+            >
+              Change network settings
+            </MessageBarButton>
+          }
+          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+        >
+          {networkSettingsWarning}
+        </MessageBar>
+      )}
+      {showMongoAndCassandraProxiesNetworkSettingsWarningState && (
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          styles={defaultMessageBarStyles}
+          onDismiss={() => {
+            setShowMongoAndCassandraProxiesNetworkSettingsWarningState(false);
+          }}
+        >
+          {`We have migrated our middleware to new infrastructure. To avoid issues with Data Explorer access, please
+          re-enable "Allow access from Azure Portal" on the Networking blade for your account.`}
+        </MessageBar>
+      )}
       <div className="nav-tabs-margin">
         <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
           {openedReactTabs.map((tab) => (
@@ -175,7 +228,7 @@ const CloseButton = ({
     onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressClose(undefined, e) : onKeyPressReactTabClose(e, tabKind))}
   >
     <span className="tabIcon close-Icon">
-      <img src={errorIcon} title="Close" alt="Close" aria-label="hidden" />
+      <img src={errorIcon} title="Close" alt="Close" role="none" />
     </span>
   </span>
 );
@@ -273,11 +326,7 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
         <ConnectTab />
       );
     case ReactTabKind.Home:
-      if (isFabricNative()) {
-        return <FabricHomeScreen explorer={explorer} />;
-      } else {
-        return <SplashScreen explorer={explorer} />;
-      }
+      return <SplashScreen explorer={explorer} />;
     case ReactTabKind.Quickstart:
       return userContext.apiType === "VCoreMongo" ? (
         <VcoreMongoQuickstartTab explorer={explorer} />
@@ -290,3 +339,57 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
       throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
   }
 };
+
+const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
+  const ipRules: IpRule[] = userContext.databaseAccount?.properties?.ipRules;
+  if (
+    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local) ||
+      (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) =>
+      ipAddressesFromIPRules.includes(legacyPortalBackendIP),
+    );
+    if (!ipRulesIncludeLegacyPortalBackend) {
+      return false;
+    }
+
+    if (userContext.apiType === "Mongo") {
+      const isProdOrMpacMongoProxyEndpoint: boolean = [MongoProxyEndpoints.Mpac, MongoProxyEndpoints.Prod].includes(
+        configContext.MONGO_PROXY_ENDPOINT,
+      );
+
+      const mongoProxyOutboundIPs: string[] = isProdOrMpacMongoProxyEndpoint
+        ? [...MongoProxyOutboundIPs[MongoProxyEndpoints.Mpac], ...MongoProxyOutboundIPs[MongoProxyEndpoints.Prod]]
+        : MongoProxyOutboundIPs[configContext.MONGO_PROXY_ENDPOINT];
+
+      const ipRulesIncludeMongoProxy: boolean = mongoProxyOutboundIPs.every((mongoProxyOutboundIP: string) =>
+        ipAddressesFromIPRules.includes(mongoProxyOutboundIP),
+      );
+
+      return !ipRulesIncludeMongoProxy;
+    } else if (userContext.apiType === "Cassandra") {
+      const isProdOrMpacCassandraProxyEndpoint: boolean = [
+        CassandraProxyEndpoints.Mpac,
+        CassandraProxyEndpoints.Prod,
+      ].includes(configContext.CASSANDRA_PROXY_ENDPOINT);
+
+      const cassandraProxyOutboundIPs: string[] = isProdOrMpacCassandraProxyEndpoint
+        ? [
+            ...CassandraProxyOutboundIPs[CassandraProxyEndpoints.Mpac],
+            ...CassandraProxyOutboundIPs[CassandraProxyEndpoints.Prod],
+          ]
+        : CassandraProxyOutboundIPs[configContext.CASSANDRA_PROXY_ENDPOINT];
+
+      const ipRulesIncludeCassandraProxy: boolean = cassandraProxyOutboundIPs.every(
+        (cassandraProxyOutboundIP: string) => ipAddressesFromIPRules.includes(cassandraProxyOutboundIP),
+      );
+
+      return !ipRulesIncludeCassandraProxy;
+    }
+  }
+  return false;
+};

src/Explorer/Tabs/TabsBase.ts

@@ -1,4 +1,3 @@
-import { OpenTab } from "Contracts/ActionContracts";
 import { KeyboardActionGroup, clearKeyboardActionGroup } from "KeyboardShortcuts";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
@@ -31,8 +30,6 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   protected _theme: string;
   public onLoadStartKey: number;
 
-  protected persistedState: OpenTab | undefined = undefined; // Used to store state of tab for persistence
-
   constructor(options: ViewModels.TabOptions) {
     super();
     this.index = options.index;
@@ -58,10 +55,6 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     };
   }
 
-  // Called by useTabs to persist
-  public getPersistedState = (): OpenTab | null => this.persistedState;
-  public triggerPersistState: () => void = undefined;
-
   public onCloseTabButtonClick(): void {
     useTabs.getState().closeTab(this);
     TelemetryProcessor.trace(Action.Tab, ActionModifiers.Close, {

src/Explorer/Tabs/TerminalTab.tsx

@@ -5,7 +5,6 @@ import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
 import * as ko from "knockout";
 import * as React from "react";
 import FirewallRuleScreenshot from "../../../images/firewallRule.png";
-import VcoreFirewallRuleScreenshot from "../../../images/vcoreMongoFirewallRule.png";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -43,11 +42,7 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
       return (
         <QuickstartFirewallNotification
           messageType={MessageTypes.OpenPostgresNetworkingBlade}
-          screenshot={
-            this.kind === ViewModels.TerminalKind.Mongo || this.kind === ViewModels.TerminalKind.VCoreMongo
-              ? VcoreFirewallRuleScreenshot
-              : FirewallRuleScreenshot
-          }
+          screenshot={FirewallRuleScreenshot}
           shellName={this.getShellNameForDisplay(this.kind)}
         />
       );

src/Explorer/Tabs/TriggerTabContent.tsx

@@ -1,7 +1,6 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react";
 import { KeyboardAction } from "KeyboardShortcuts";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React, { Component } from "react";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
@@ -193,6 +192,29 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
     });
   }
 
+  private isValidId(id: string): boolean {
+    if (!id) {
+      return false;
+    }
+
+    const invalidStartCharacters = /^[/?#\\]/;
+    if (invalidStartCharacters.test(id)) {
+      return false;
+    }
+
+    const invalidMiddleCharacters = /^.+[/?#\\]/;
+    if (invalidMiddleCharacters.test(id)) {
+      return false;
+    }
+
+    const invalidEndCharacters = /.*[/?#\\ ]$/;
+    if (invalidEndCharacters.test(id)) {
+      return false;
+    }
+
+    return true;
+  }
+
   private isNotEmpty(value: string): boolean {
     return !!value;
   }
@@ -264,13 +286,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
     _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string,
   ): void => {
-    const inputElement = _event.currentTarget as HTMLInputElement;
-    let isValidId: boolean = true;
-    if (inputElement) {
-      isValidId = inputElement.reportValidity();
-    }
-
-    this.saveButton.enabled = this.isNotEmpty(newValue) && isValidId;
+    this.saveButton.enabled = this.isValidId(newValue) && this.isNotEmpty(newValue);
     this.setState({ triggerId: newValue });
   };
 
@@ -297,8 +313,7 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           autoFocus
           required
           type="text"
-          pattern={ValidCosmosDbIdInputPattern.source}
-          title={ValidCosmosDbIdDescription}
+          pattern="[^/?#\\]*[^/?# \\]"
           placeholder="Enter the new trigger id"
           size={40}
           value={triggerId}

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -1,7 +1,6 @@
 import { UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { Label, TextField } from "@fluentui/react";
 import { KeyboardAction } from "KeyboardShortcuts";
-import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React, { Component } from "react";
 import DiscardIcon from "../../../images/discard.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
@@ -65,13 +64,7 @@ export default class UserDefinedFunctionTabContent extends Component<
     _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string,
   ): void => {
-    const inputElement = _event.currentTarget as HTMLInputElement;
-    let isValidId: boolean = true;
-    if (inputElement) {
-      isValidId = inputElement.reportValidity();
-    }
-
-    this.saveButton.enabled = this.isNotEmpty(newValue) && isValidId;
+    this.saveButton.enabled = this.isValidId(newValue) && this.isNotEmpty(newValue);
     this.setState({ udfId: newValue });
   };
 
@@ -245,6 +238,29 @@ export default class UserDefinedFunctionTabContent extends Component<
     });
   }
 
+  private isValidId(id: string): boolean {
+    if (!id) {
+      return false;
+    }
+
+    const invalidStartCharacters = /^[/?#\\]/;
+    if (invalidStartCharacters.test(id)) {
+      return false;
+    }
+
+    const invalidMiddleCharacters = /^.+[/?#\\]/;
+    if (invalidMiddleCharacters.test(id)) {
+      return false;
+    }
+
+    const invalidEndCharacters = /.*[/?#\\ ]$/;
+    if (invalidEndCharacters.test(id)) {
+      return false;
+    }
+
+    return true;
+  }
+
   private isNotEmpty(value: string): boolean {
     return !!value;
   }
@@ -268,8 +284,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           required
           readOnly={!isUdfIdEditable}
           type="text"
-          pattern={ValidCosmosDbIdInputPattern.source}
-          title={ValidCosmosDbIdDescription}
+          pattern="[^/?#\\]*[^/?# \\]"
           placeholder="Enter the new user defined function id"
           size={40}
           value={udfId}

src/Explorer/Tree/Collection.ts

@@ -1,7 +1,6 @@
 import { Resource, StoredProcedureDefinition, TriggerDefinition, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { DocumentsTabV2 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import * as ko from "knockout";
 import * as _ from "underscore";
 import * as Constants from "../../Common/Constants";
@@ -35,6 +34,7 @@ import QueryTablesTab from "../Tabs/QueryTablesTab";
 import { CollectionSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
+import { Platform, configContext } from "./../../ConfigContext";
 import ConflictId from "./ConflictId";
 import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
@@ -210,7 +210,7 @@ export default class Collection implements ViewModels.Collection {
     });
 
     const showScriptsMenus: boolean =
-      !isFabricMirrored() && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+      configContext.platform != Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
     this.showStoredProcedures = ko.observable<boolean>(showScriptsMenus);
     this.showTriggers = ko.observable<boolean>(showScriptsMenus);
     this.showUserDefinedFunctions = ko.observable<boolean>(showScriptsMenus);
@@ -630,13 +630,7 @@ export default class Collection implements ViewModels.Collection {
     }
   };
 
-  public onNewQueryClick(
-    source: any,
-    event: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ) {
+  public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
     const collection: ViewModels.Collection = source.collection || source;
     const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;
     const title = "Query " + id;
@@ -659,21 +653,13 @@ export default class Collection implements ViewModels.Collection {
           queryText: queryText,
           partitionKey: collection.partitionKey,
           onLoadStartKey: startKey,
-          splitterDirection,
-          queryViewSizePercent,
         },
         { container: this.container },
       ),
     );
   }
 
-  public onNewMongoQueryClick(
-    source: any,
-    event: MouseEvent,
-    queryText?: string,
-    splitterDirection?: "horizontal" | "vertical",
-    queryViewSizePercent?: number,
-  ) {
+  public onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string) {
     const collection: ViewModels.Collection = source.collection || source;
     const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;
 
@@ -695,9 +681,6 @@ export default class Collection implements ViewModels.Collection {
         node: this,
         partitionKey: collection.partitionKey,
         onLoadStartKey: startKey,
-        queryText,
-        splitterDirection,
-        queryViewSizePercent,
       },
       {
         container: this.container,

src/Explorer/Tree/ResourceTree.tsx

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

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

@@ -740,7 +740,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
 ]
 `;
 
-exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric non read-only 1`] = `
+exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric 1`] = `
 [
   {
     "children": [
@@ -753,12 +753,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
         "iconSrc": <DocumentMultipleRegular
           fontSize={16}
@@ -780,12 +774,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
         "iconSrc": <DocumentMultipleRegular
           fontSize={16}
@@ -834,12 +822,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
         "iconSrc": <DocumentMultipleRegular
           fontSize={16}
@@ -888,12 +870,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "label": "New SQL Query",
             "onClick": [Function],
           },
-          {
-            "iconSrc": {},
-            "label": "Delete Container",
-            "onClick": [Function],
-            "styleClass": "deleteCollectionMenuItem",
-          },
         ],
         "iconSrc": <DocumentMultipleRegular
           fontSize={16}
@@ -939,145 +915,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
 ]
 `;
 
-exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Fabric read-only 1`] = `
-[
-  {
-    "children": [
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <DocumentMultipleRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "standardCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <DocumentMultipleRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "conflictsCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-    ],
-    "className": "databaseNode",
-    "contextMenu": undefined,
-    "iconSrc": <DatabaseRegular
-      fontSize={16}
-    />,
-    "isExpanded": true,
-    "isSelected": [Function],
-    "label": "standardDb",
-    "onCollapsed": [Function],
-    "onContextMenuOpen": [Function],
-    "onExpanded": [Function],
-  },
-  {
-    "children": [
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <DocumentMultipleRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "sampleItemsCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-    ],
-    "className": "databaseNode",
-    "contextMenu": undefined,
-    "iconSrc": <DatabaseRegular
-      fontSize={16}
-    />,
-    "isExpanded": true,
-    "isSelected": [Function],
-    "label": "sharedDatabase",
-    "onCollapsed": [Function],
-    "onContextMenuOpen": [Function],
-    "onExpanded": [Function],
-  },
-  {
-    "children": [
-      {
-        "children": undefined,
-        "className": "collectionNode",
-        "contextMenu": [
-          {
-            "iconSrc": {},
-            "label": "New SQL Query",
-            "onClick": [Function],
-          },
-        ],
-        "iconSrc": <DocumentMultipleRegular
-          fontSize={16}
-        />,
-        "isExpanded": true,
-        "isSelected": [Function],
-        "label": "schemaCollection",
-        "onClick": [Function],
-        "onCollapsed": [Function],
-        "onContextMenuOpen": [Function],
-        "onExpanded": [Function],
-      },
-      {
-        "className": "loadMoreNode",
-        "label": "load more",
-        "onClick": [Function],
-      },
-    ],
-    "className": "databaseNode",
-    "contextMenu": undefined,
-    "iconSrc": <DatabaseRegular
-      fontSize={16}
-    />,
-    "isExpanded": true,
-    "isSelected": [Function],
-    "label": "giganticDatabase",
-    "onCollapsed": [Function],
-    "onContextMenuOpen": [Function],
-    "onExpanded": [Function],
-  },
-]
-`;
-
 exports[`createDatabaseTreeNodes generates the correct tree structure for the SQL API, on Portal 1`] = `
 [
   {
@@ -1135,7 +972,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
                   },
                 ],
                 "isSelected": [Function],
-                "label": "mockSproc4",
+                "label": "mockSproc3",
                 "onClick": [Function],
               },
             ],
@@ -1153,7 +990,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
                   },
                 ],
                 "isSelected": [Function],
-                "label": "mockUdf4",
+                "label": "mockUdf3",
                 "onClick": [Function],
               },
             ],
@@ -1171,7 +1008,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
                   },
                 ],
                 "isSelected": [Function],
-                "label": "mockTrigger4",
+                "label": "mockTrigger3",
                 "onClick": [Function],
               },
             ],

src/Explorer/Tree/treeNodeUtil.test.ts

@@ -1,6 +1,5 @@
 import { CapabilityNames } from "Common/Constants";
 import { Platform, updateConfigContext } from "ConfigContext";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
 import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@@ -17,7 +16,7 @@ import {
 } from "Explorer/Tree/treeNodeUtil";
 import { useDatabases } from "Explorer/useDatabases";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import { FabricContext, updateUserContext, UserContext } from "UserContext";
+import { updateUserContext } from "UserContext";
 import PromiseSource from "Utils/PromiseSource";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTabs } from "hooks/useTabs";
@@ -361,30 +360,9 @@ describe("createDatabaseTreeNodes", () => {
     });
   });
 
-  it.each<[string, Platform, boolean, Partial<DataModels.DatabaseAccountExtendedProperties>, Partial<UserContext>]>([
-    [
-      "the SQL API, on Fabric read-only",
-      Platform.Fabric,
-      false,
-      { capabilities: [], enableMultipleWriteLocations: true },
-      { fabricContext: { isReadOnly: true } as FabricContext<CosmosDbArtifactType> },
-    ],
-    [
-      "the SQL API, on Fabric non read-only",
-      Platform.Fabric,
-      false,
-      { capabilities: [], enableMultipleWriteLocations: true },
-      { fabricContext: { isReadOnly: false } as FabricContext<CosmosDbArtifactType> },
-    ],
-    [
-      "the SQL API, on Portal",
-      Platform.Portal,
-      false,
-      { capabilities: [], enableMultipleWriteLocations: true },
-      {
-        fabricContext: undefined,
-      },
-    ],
+  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,
@@ -395,7 +373,6 @@ describe("createDatabaseTreeNodes", () => {
           { name: CapabilityNames.EnableServerless, description: "" },
         ],
       },
-      { fabricContext: undefined },
     ],
     [
       "the Mongo API, with Notebooks and Phoenix features, on Emulator",
@@ -404,31 +381,26 @@ describe("createDatabaseTreeNodes", () => {
       {
         capabilities: [{ name: CapabilityNames.EnableMongo, description: "" }],
       },
-      { fabricContext: undefined },
     ],
-  ])(
-    "generates the correct tree structure for %s",
-    (_, platform, isNotebookEnabled, dbAccountProperties, userContext) => {
-      useNotebook.setState({ isPhoenixFeatures: isNotebookEnabled });
-      updateConfigContext({ platform });
-      updateUserContext({
-        ...userContext,
-        databaseAccount: {
-          properties: {
-            enableMultipleWriteLocations: true,
-            ...dbAccountProperties,
-          },
-        } as unknown as DataModels.DatabaseAccount,
-      });
-      const nodes = createDatabaseTreeNodes(
-        explorer,
-        isNotebookEnabled,
-        useDatabases.getState().databases,
-        refreshActiveTab,
-      );
-      expect(nodes).toMatchSnapshot();
-    },
-  );
+  ])("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.
@@ -579,18 +551,7 @@ describe("createDatabaseTreeNodes", () => {
       });
 
       it.each([
-        [
-          "in Fabric",
-          () => {
-            updateConfigContext({ platform: Platform.Fabric });
-            updateUserContext({
-              fabricContext: {
-                artifactType: CosmosDbArtifactType.MIRRORED_KEY,
-                isReadOnly: true,
-              } as FabricContext<CosmosDbArtifactType>,
-            });
-          },
-        ],
+        ["in Fabric", () => updateConfigContext({ platform: Platform.Fabric })],
         [
           "for Cassandra API",
           () =>

src/Explorer/Tree/treeNodeUtil.tsx

@@ -6,7 +6,6 @@ import StoredProcedure from "Explorer/Tree/StoredProcedure";
 import Trigger from "Explorer/Tree/Trigger";
 import UserDefinedFunction from "Explorer/Tree/UserDefinedFunction";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
 import { getItemName } from "Utils/APITypeUtils";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
 import { useTabs } from "hooks/useTabs";
@@ -23,7 +22,9 @@ import { useNotebook } from "../Notebook/useNotebook";
 import { useSelectedNode } from "../useSelectedNode";
 
 export const shouldShowScriptNodes = (): boolean => {
-  return !isFabricMirrored() && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+  return (
+    configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+  );
 };
 
 const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;

src/Localization/en/MaterializedViewsBuilder.json

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