move nps survey open dialog call to after explorer initialization

.devcontainer/Dockerfile

@@ -1,16 +0,0 @@
-FROM mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm
-
-# Install pre-reqs for gyp, and 'canvas' npm module
-RUN apt-get update && \
-    apt-get install -y \
-        make \
-        gcc \
-        g++ \
-        python3-minimal \
-        libcairo2-dev \
-        libpango1.0-dev \
-        && \
-    rm -rf /var/lib/apt/lists/*
-
-# Install node-gyp to build native modules
-RUN npm install -g node-gyp

.devcontainer/devcontainer.json

@@ -1,32 +0,0 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
-{
-	"name": "Azure Cosmos DB Explorer",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"build": {
-		"dockerfile": "Dockerfile"
-	},
-	"onCreateCommand": ".devcontainer/oncreate",
-	"features": {
-		"ghcr.io/devcontainers/features/azure-cli:1": {
-			"version": "latest"
-		},
-		"ghcr.io/devcontainers/features/github-cli:1": {
-			"installDirectlyFromGitHubRelease": true,
-			"version": "latest"
-		},
-		"ghcr.io/devcontainers/features/sshd:1": {
-			"version": "latest"
-		}
-	}
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
-	// Configure tool-specific properties.
-	// "customizations": {},
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
-}

.devcontainer/oncreate

@@ -1,4 +0,0 @@
-#!/usr/bin/env bash
-
-# Install packages once, to prime the node_modules directory.
-npm ci

.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

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>

README.md

@@ -18,7 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)
 
 - Visit: `https://localhost:1234/hostedExplorer.html`
-- The default webpack dev server configuration will proxy requests to the production portal backend: `https://cdb-ms-mpac-pbe.cosmos.azure.com`. This will allow you to use production connection strings on your local machine.
+- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
 

docs/index.html

@@ -82,7 +82,7 @@
 				</a>
 				<ul>
 					<li>Visit: <code>https://localhost:1234/hostedExplorer.html</code></li>
-					<li>The default webpack dev server configuration will proxy requests to the production portal backend: <code>https://cdb-ms-mpac-pbe.cosmos.azure.com</code>. This will allow you to use production connection strings on your local machine.</li>
+					<li>The default webpack dev server configuration will proxy requests to the production portal backend: <code>https://main.documentdb.ext.azure.com</code>. This will allow you to use production connection strings on your local machine.</li>
 				</ul>
 				<a href="#emulator-development" id="emulator-development" style="color: inherit; text-decoration: none;">
 					<h3>Emulator Development</h3>

jest.config.js

@@ -174,11 +174,7 @@ module.exports = {
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: [
-    "/node_modules/(?!@fluentui/react-icons|(.*)/dist/browser)/",
-    "/node_modules/plotly.js-cartesian-dist-min",
-    "/externals/",
-  ],
+  transformIgnorePatterns: ["/node_modules/", "/externals/"],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

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;
@@ -1914,14 +1906,8 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  height: 32px;
+  padding-top: 5px;
   background-color: #f2f2f2;
-
-  .nav-tabs {
-    display: flex;
-    align-items: flex-end;
-    height: 100%;
-  }
 }
 
 .navTabHeight {
@@ -2366,8 +2352,8 @@ a:link {
 
 .tabsManagerContainer {
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: 36px 36px 1fr;
   min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
 }
 
@@ -2624,8 +2610,9 @@ a:link {
 }
 
 .tabPanesContainer {
+  grid-row: span 2; // Fill the remaining space
   display: flex;
-  flex-grow: 1;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -3125,7 +3112,3 @@ a:link {
   background: white;
   height: 100%;
 }
-
-.sidebarContainer {
-  height: 100%;
-}

less/documentDBFabric.less

@@ -20,10 +20,6 @@ a:focus {
   text-decoration: underline;
 }
 
-.splashLoaderContainer {
-  background-color: #f5f5f5;
-}
-
 #divExplorer {
   background-color: #f5f5f5;
 }
@@ -31,24 +27,26 @@ a:focus {
 .resourceTreeAndTabs {
   border-radius: 0px;
   box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
   margin-top: 0px;
   margin-bottom: 0px;
   background-color: #ffffff;
 }
 
 .tabsManagerContainer {
-  background-color: #ffffff;
+  background-color: #ffffff
 }
 
 .nav-tabs-margin {
   padding-top: 5px;
-  background-color: #ffffff;
+  background-color: #ffffff
 }
 
 .commandBarContainer {
   background-color: #ffffff;
   border-radius: @FabricBoxBorderRadius @FabricBoxBorderRadius 0px 0px;
   box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
   margin-top: 0px;
   margin-bottom: 0px;
   padding-top: 2px;
@@ -67,16 +65,17 @@ a:focus {
   }
 }
 
-.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
+
+.nav-tabs>li>.tabNavContentContainer>.tab_Content:hover {
   border-bottom: 2px solid #e0e0e0;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content,
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content:hover {
   border-bottom: 2px solid @FabricAccentMedium;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
   border-bottom: 0px none transparent;
 }
 
@@ -95,10 +94,10 @@ a:focus {
     padding-bottom: @SmallSpace;
 
     .contentWrapper {
-      .statusIconContainer {
-        margin-left: 0px;
+        .statusIconContainer {
+          margin-left: 0px;
+        }
       }
-    }
 
     .tabIconSection {
       .cancelButton {
@@ -120,6 +119,7 @@ a:focus {
   }
 }
 
+
 .resourceTree {
   padding: 12px;
 }
@@ -156,21 +156,25 @@ a:focus {
     }
 
     .selected {
-      & > .treeNodeHeader {
+      &>.treeNodeHeader {
         background-color: @FabricAccentExtra;
       }
     }
   }
 }
 
+
 .dataExplorerErrorConsoleContainer {
-  border-radius: 0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
+  border-radius:  0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
+  margin: @FabricBoxMargin;
   margin-top: 0px;
   width: auto;
   align-self: auto;
 }
 
+
+
 .filterbtnstyle {
   background: #fff;
   color: #000;
@@ -196,10 +200,12 @@ a:focus {
   border: solid 1px #d1d1d1;
 }
 
+
 .gridRowSelected .tabdocumentsGridElement:hover {
   background-color: @FabricAccentLight !important;
 }
 
+
 .refreshcol {
   filter: brightness(0) saturate(100%);
 }
@@ -210,4 +216,4 @@ a:focus {
 
 .fileImportImg img {
   filter: brightness(0) saturate(100%);
-}
+}

package.json

@@ -5,16 +5,17 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.2.0-beta.1",
+    "@azure/cosmos": "4.0.1-beta.3",
     "@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",
     "@fluentui/react": "8.119.0",
     "@fluentui/react-components": "9.54.2",
-    "@jupyterlab/terminal": "3.0.3",
     "@jupyterlab/services": "6.0.2",
+    "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.5.1",
     "@nteract/connected-components": "6.8.2",
@@ -46,7 +47,6 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@xmldom/xmldom": "0.7.13",
-    "@xterm/xterm": "5.5.0",
     "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -117,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",
@@ -170,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",
@@ -247,4 +247,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

playwright.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
+    actionTimeout: 5 * 60 * 1000,
     trace: "off",
     video: "off",
     screenshot: "on",
@@ -22,8 +23,7 @@ export default defineConfig({
   },
 
   expect: {
-    // Many of our expectations take a little longer than the default 5 seconds.
-    timeout: 15 * 1000,
+    timeout: 5 * 60 * 1000,
   },
 
   projects: [

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://main.documentdb.ext.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://main.documentdb.ext.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

@@ -89,7 +89,6 @@ export class CapabilityNames {
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
   public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
-  public static readonly EnableNoSQLFullTextSearch: string = "EnableNoSQLFullTextSearch";
 }
 
 export enum CapacityMode {
@@ -97,12 +96,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 +118,6 @@ export class AfecFeatures {
 
 export class TagNames {
   public static defaultExperience: string = "defaultExperience";
-  public static WorkloadType: string = "hidden-workload-type";
 }
 
 export class MongoDBAccounts {
@@ -142,9 +134,6 @@ export class BackendApi {
   public static readonly GenerateToken: string = "GenerateToken";
   public static readonly PortalSettings: string = "PortalSettings";
   public static readonly AccountRestrictions: string = "AccountRestrictions";
-  public static readonly RuntimeProxy: string = "RuntimeProxy";
-  public static readonly DisallowedLocations: string = "DisallowedLocations";
-  public static readonly SampleData: string = "SampleData";
 }
 
 export class PortalBackendEndpoints {
@@ -156,25 +145,13 @@ 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";
   public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
 }
 
-export class MongoProxyApi {
-  public static readonly ResourceList: string = "ResourceList";
-  public static readonly QueryDocuments: string = "QueryDocuments";
-  public static readonly CreateDocument: string = "CreateDocument";
-  public static readonly ReadDocument: string = "ReadDocument";
-  public static readonly UpdateDocument: string = "UpdateDocument";
-  public static readonly DeleteDocument: string = "DeleteDocument";
-  public static readonly CreateCollectionWithProxy: string = "CreateCollectionWithProxy";
-  public static readonly LegacyMongoShell: string = "LegacyMongoShell";
-  public static readonly BulkDelete: string = "BulkDelete";
-}
-
 export class CassandraProxyEndpoints {
   public static readonly Development: string = "https://localhost:7240";
   public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
@@ -206,12 +183,6 @@ export class CassandraProxyAPIs {
   public static readonly connectionStringSchemaApi: string = "api/connectionstring/cassandra/schema";
 }
 
-export class AadEndpoints {
-  public static readonly Prod: string = "https://login.microsoftonline.com/";
-  public static readonly Fairfax: string = "https://login.microsoftonline.us/";
-  public static readonly Mooncake: string = "https://login.partner.microsoftonline.cn/";
-}
-
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";
@@ -313,7 +284,6 @@ export class HttpStatusCodes {
   public static readonly Accepted: number = 202;
   public static readonly NoContent: number = 204;
   public static readonly NotModified: number = 304;
-  public static readonly BadRequest: number = 400;
   public static readonly Unauthorized: number = 401;
   public static readonly Forbidden: number = 403;
   public static readonly NotFound: number = 404;
@@ -525,12 +495,7 @@ 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 const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
+export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 
 export const QueryCopilotSampleContainerSchema = {

src/Common/CosmosClient.test.ts

@@ -1,5 +1,4 @@
-import { PortalBackendEndpoints } from "Common/Constants";
-import { configContext, Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin } from "./CosmosClient";
 
@@ -21,22 +20,22 @@ describe("getTokenFromAuthService", () => {
 
   it("builds the correct URL in production", () => {
     updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
     });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
-      `${configContext.PORTAL_BACKEND_ENDPOINT}/api/connectionstring/runtimeproxy/authorizationtokens`,
+      "https://main.documentdb.ext.azure.com/api/guest/runtimeproxy/authorizationTokens",
       expect.any(Object),
     );
   });
 
   it("builds the correct URL in dev", () => {
     updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Development,
+      BACKEND_ENDPOINT: "https://localhost:1234",
     });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
-      `${configContext.PORTAL_BACKEND_ENDPOINT}/api/connectionstring/runtimeproxy/authorizationtokens`,
+      "https://localhost:1234/api/guest/runtimeproxy/authorizationTokens",
       expect.any(Object),
     );
   });
@@ -79,7 +78,7 @@ describe("requestPlugin", () => {
       const next = jest.fn();
       updateConfigContext({
         platform: Platform.Hosted,
-        PORTAL_BACKEND_ENDPOINT: "https://localhost:1234",
+        BACKEND_ENDPOINT: "https://localhost:1234",
         PROXY_PATH: "/proxy",
       });
       const headers = {};

src/Common/CosmosClient.ts

@@ -5,13 +5,13 @@ import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil"
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
-import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
+import * as Logger from "../Common/Logger";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -26,7 +26,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     );
     if (!userContext.aadToken) {
       logConsoleError(
-        `AAD token does not exist. Please use the "Login for Entra ID" button in the Toolbar prior to performing Entra ID RBAC operations`,
+        `AAD token does not exist. Please click on "Login for Entra ID" button prior to performing Entra ID RBAC operations`,
       );
       return null;
     }
@@ -125,8 +125,8 @@ export async function getTokenFromAuthService(
   resourceId?: string,
 ): Promise<AuthorizationToken> {
   try {
-    const host: string = configContext.PORTAL_BACKEND_ENDPOINT;
-    const response: Response = await _global.fetch(host + "/api/connectionstring/runtimeproxy/authorizationtokens", {
+    const host = configContext.BACKEND_ENDPOINT;
+    const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
       method: "POST",
       headers: {
         "content-type": "application/json",
@@ -138,7 +138,8 @@ export async function getTokenFromAuthService(
         resourceId,
       }),
     });
-    const result: AuthorizationToken = await response.json();
+    //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)}`);
@@ -156,24 +157,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/DatabaseUtility.ts

@@ -1,3 +0,0 @@
-export function getNewDatabaseSharedThroughputDefault(): boolean {
-  return false;
-}

src/Common/EntityValue.tsx

@@ -10,7 +10,6 @@ export interface TableEntityProps {
   isEntityValueDisable?: boolean;
   entityTimeValue: string;
   entityValueType: string;
-  entityProperty: string;
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@@ -27,7 +26,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
   onSelectDate,
   isEntityValueDisable,
   onEntityTimeValueChange,
-  entityProperty,
 }: TableEntityProps): JSX.Element => {
   if (isEntityTypeDate) {
     return (
@@ -53,20 +51,15 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
   }
 
   return (
-    <>
-      <span id={entityProperty} className="screenReaderOnly">
-        Edit Property {entityProperty} {attributeValueLabel}
-      </span>
-      <TextField
-        label={entityValueLabel && entityValueLabel}
-        className="addEntityTextField"
-        disabled={isEntityValueDisable}
-        type={entityValueType}
-        placeholder={entityValuePlaceholder}
-        value={typeof entityValue === "string" ? entityValue : ""}
-        onChange={onEntityValueChange}
-        aria-labelledby={entityProperty}
-      />
-    </>
+    <TextField
+      label={entityValueLabel && entityValueLabel}
+      className="addEntityTextField"
+      disabled={isEntityValueDisable}
+      type={entityValueType}
+      placeholder={entityValuePlaceholder}
+      value={typeof entityValue === "string" ? entityValue : ""}
+      onChange={onEntityValueChange}
+      ariaLabel={attributeValueLabel}
+    />
   );
 };

src/Common/EnvironmentUtility.test.ts

@@ -1,5 +1,3 @@
-import { PortalBackendEndpoints } from "Common/Constants";
-import { updateConfigContext } from "ConfigContext";
 import * as EnvironmentUtility from "./EnvironmentUtility";
 
 describe("Environment Utility Test", () => {
@@ -13,18 +11,4 @@ describe("Environment Utility Test", () => {
     const expectedResult = "test/";
     expect(EnvironmentUtility.normalizeArmEndpoint(uri)).toEqual(expectedResult);
   });
-
-  it("Detect environment is Mpac", () => {
-    updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
-    });
-    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Mpac);
-  });
-
-  it("Detect environment is Development", () => {
-    updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Development,
-    });
-    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Development);
-  });
 });

src/Common/EnvironmentUtility.ts

@@ -1,29 +1,6 @@
-import { PortalBackendEndpoints } from "Common/Constants";
-import { configContext } from "ConfigContext";
-
 export function normalizeArmEndpoint(uri: string): string {
   if (uri && uri.slice(-1) !== "/") {
     return `${uri}/`;
   }
   return uri;
 }
-
-export enum Environment {
-  Development = "Development",
-  Mpac = "MPAC",
-  Prod = "Prod",
-  Fairfax = "Fairfax",
-  Mooncake = "Mooncake",
-}
-
-export const getEnvironment = (): Environment => {
-  const environmentMap: { [key: string]: Environment } = {
-    [PortalBackendEndpoints.Development]: Environment.Development,
-    [PortalBackendEndpoints.Mpac]: Environment.Mpac,
-    [PortalBackendEndpoints.Prod]: Environment.Prod,
-    [PortalBackendEndpoints.Fairfax]: Environment.Fairfax,
-    [PortalBackendEndpoints.Mooncake]: Environment.Mooncake,
-  };
-
-  return environmentMap[configContext.PORTAL_BACKEND_ENDPOINT];
-};

src/Common/ErrorHandlingUtils.ts

@@ -53,8 +53,7 @@ const replaceKnownError = (errorMessage: string): string => {
     return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
   } else if (
     errorMessage?.indexOf("The user aborted a request") >= 0 ||
-    errorMessage?.indexOf("The operation was aborted") >= 0 ||
-    errorMessage === "signal is aborted without reason"
+    errorMessage?.indexOf("The operation was aborted") >= 0
   ) {
     return "User aborted query.";
   }

src/Common/MessageHandler.ts

@@ -70,6 +70,7 @@ export function sendMessage(data: any): void {
 }
 
 export function sendReadyMessage(): void {
+  console.log("SENDING READY MESSAGE");
   _sendMessage({
     signature: "pcIframe",
     kind: "ready",

src/Common/MongoProxyClient.test.ts

@@ -1,11 +1,18 @@
-import { MongoProxyEndpoints } from "Common/Constants";
 import { AuthType } from "../AuthType";
-import { configContext, resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { resetConfigContext, updateConfigContext } from "../ConfigContext";
 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";
 
@@ -64,8 +71,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -76,19 +82,16 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       queryDocuments(databaseId, collection, true, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/resourcelist`,
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({
-        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
-        globallyEnabledMongoAPIs: [],
-      });
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       queryDocuments(databaseId, collection, true, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/resourcelist`,
+        "https://localhost:1234/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
@@ -100,8 +103,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -112,19 +114,16 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({
-        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
-        globallyEnabledMongoAPIs: [],
-      });
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
@@ -136,8 +135,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -148,19 +146,16 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({
-        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
-        globallyEnabledMongoAPIs: [],
-      });
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
@@ -172,8 +167,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -184,20 +178,28 @@ describe("MongoProxyClient", () => {
     it("builds the correct URL", () => {
       updateDocument(databaseId, collection, documentId, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`,
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object),
+      );
+    });
+
+    it("builds the correct proxy URL in development", () => {
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      updateDocument(databaseId, collection, documentId, "{}");
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
   });
-  describe("deleteDocuments", () => {
+  describe("deleteDocument", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -206,21 +208,18 @@ 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`,
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
 
     it("builds the correct proxy URL in development", () => {
-      updateConfigContext({
-        MONGO_PROXY_ENDPOINT: "https://localhost:1234",
-        globallyEnabledMongoAPIs: [],
-      });
-      deleteDocuments(databaseId, collection, [documentId]);
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
-        `${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer/bulkdelete`,
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object),
       );
     });
@@ -232,14 +231,13 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-        globallyEnabledMongoAPIs: [],
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
     });
 
     it("returns a production endpoint", () => {
-      const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
-      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/mongo/explorer`);
+      const endpoint = getEndpoint("https://main.documentdb.ext.azure.com");
+      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
     });
 
     it("returns a development endpoint", () => {
@@ -251,8 +249,35 @@ describe("MongoProxyClient", () => {
       updateUserContext({
         authType: AuthType.EncryptedToken,
       });
-      const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
-      expect(endpoint).toEqual(`${configContext.MONGO_PROXY_ENDPOINT}/api/connectionstring/mongo/explorer`);
+      const endpoint = getEndpoint("https://main.documentdb.ext.azure.com");
+      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
+    });
+  });
+  describe("getFeatureEndpointOrDefault", () => {
+    beforeEach(() => {
+      resetConfigContext();
+      updateConfigContext({
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+      });
+      const params = new URLSearchParams({
+        "feature.mongoProxyEndpoint": "https://localhost:12901",
+        "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("https://localhost:12901/api/mongo/explorer");
+    });
+
+    it("returns a production endpoint", () => {
+      const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
     });
   });
 });

src/Common/MongoProxyClient.ts

@@ -1,13 +1,20 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
+import {
+  allowedMongoProxyEndpoints,
+  allowedMongoProxyEndpoints_ToBeDeprecated,
+  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, 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("resourcelist") || !useMongoProxyEndpoint("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("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("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("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("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("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("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("updateDocument");
 
   return window
     .fetch(endpoint, {
@@ -250,35 +417,79 @@ export function updateDocument(
     });
 }
 
-export function deleteDocuments(
+export function updateDocument_ToBeDeprecated(
   databaseId: string,
   collection: Collection,
-  documentIds: DocumentId[],
-): Promise<{
-  deletedCount: number;
-  isAcknowledged: boolean;
-}> {
+  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");
 
-  const rids: string[] = documentIds.map((documentId) => {
-    const idComponents = documentId.self.split("/");
-    return idComponents[5];
-  });
+  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("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}`,
-    resourceIDs: rids,
+    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 = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
 
   return window
-    .fetch(`${endpoint}/bulkdelete`, {
+    .fetch(endpoint, {
       method: "DELETE",
       body: JSON.stringify(params),
       headers: {
@@ -289,16 +500,62 @@ export function deleteDocuments(
     })
     .then(async (response) => {
       if (response.ok) {
-        const result = await response.json();
-        return result;
+        return undefined;
       }
-      return await errorHandling(response, "deleting documents", params);
+      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 createMongoCollectionWithProxy(
   params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
+  if (!useMongoProxyEndpoint("createCollectionWithProxy")) {
+    return createMongoCollectionWithProxy_ToBeDeprecated(params);
+  }
   const { databaseAccount } = userContext;
   const shardKey: string = params.partitionKey?.paths[0];
 
@@ -319,7 +576,7 @@ export function createMongoCollectionWithProxy(
     isSharded: !!shardKey,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
 
   return window
     .fetch(`${endpoint}/createCollection`, {
@@ -339,6 +596,69 @@ 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 {
+    endpoint =
+      hasFlag(userContext.features.mongoProxyAPIs, feature) &&
+      validateEndpoint(userContext.features.mongoProxyEndpoint, [
+        ...allowedMongoProxyEndpoints,
+        ...allowedMongoProxyEndpoints_ToBeDeprecated,
+      ])
+        ? 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,10 +672,26 @@ export function getEndpoint(endpoint: string): string {
   return url;
 }
 
-export class ThrottlingError extends Error {
-  constructor(message: string) {
-    super(message);
+export function useMongoProxyEndpoint(api: string): boolean {
+  const activeMongoProxyEndpoints: string[] = [
+    MongoProxyEndpoints.Local,
+    MongoProxyEndpoints.Mpac,
+    MongoProxyEndpoints.Prod,
+    MongoProxyEndpoints.Fairfax,
+  ];
+  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
+  if (
+    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local &&
+    userContext.databaseAccount.properties.ipRules?.length > 0
+  ) {
+    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
   }
+
+  return (
+    canAccessMongoProxy &&
+    configContext.NEW_MONGO_APIS?.includes(api) &&
+    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
+  );
 }
 
 // TODO: This function throws most of the time except on Forbidden which is a bit strange
@@ -367,14 +703,6 @@ async function errorHandling(response: Response, action: string, params: unknown
   if (response.status === HttpStatusCodes.Forbidden) {
     sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;
-  } else if (
-    response.status === HttpStatusCodes.BadRequest &&
-    errorMessage.includes("Error=16500") &&
-    errorMessage.includes("RetryAfterMs=")
-  ) {
-    // If throttling is happening, Cosmos DB will return a 400 with a body of:
-    // A write operation resulted in an error. Error=16500, RetryAfterMs=4, Details='Batch write error.
-    throw new ThrottlingError(errorMessage);
   }
   throw new Error(errorMessage);
 }

src/Common/PortalNotifications.ts

@@ -0,0 +1,39 @@
+import { configContext, Platform } from "../ConfigContext";
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+import { userContext } from "../UserContext";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+
+const notificationsPath = () => {
+  switch (configContext.platform) {
+    case Platform.Hosted:
+      return "/api/guest/notifications";
+    case Platform.Portal:
+      return "/api/notifications";
+    default:
+      throw new Error(`Unknown platform: ${configContext.platform}`);
+  }
+};
+
+export const fetchPortalNotifications = async (): Promise<DataModels.Notification[]> => {
+  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.Hosted) {
+    return [];
+  }
+
+  const { databaseAccount, resourceGroup, subscriptionId } = userContext;
+  const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
+    databaseAccount.name
+  }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
+  const authorizationHeader: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
+  const headers = { [authorizationHeader.header]: authorizationHeader.token };
+
+  const response = await window.fetch(url, {
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(await response.text());
+  }
+
+  return (await response.json()) as DataModels.Notification[];
+};

src/Common/QueryError.test.ts

@@ -1,113 +0,0 @@
-import QueryError, { QueryErrorLocation, QueryErrorSeverity } from "Common/QueryError";
-
-describe("QueryError.tryParse", () => {
-  const testErrorLocationResolver = ({ start, end }: { start: number; end: number }) =>
-    new QueryErrorLocation(
-      { offset: start, lineNumber: start, column: start },
-      { offset: end, lineNumber: end, column: end },
-    );
-
-  it("handles a string error", () => {
-    const error = "error";
-    const result = QueryError.tryParse(error, testErrorLocationResolver);
-    expect(result).toEqual([new QueryError("error", QueryErrorSeverity.Error)]);
-  });
-
-  it("handles an error object", () => {
-    const error = {
-      message: "error",
-      severity: "Warning",
-      location: { start: 0, end: 1 },
-      code: "code",
-    };
-    const result = QueryError.tryParse(error, testErrorLocationResolver);
-    expect(result).toEqual([
-      new QueryError(
-        "error",
-        QueryErrorSeverity.Warning,
-        "code",
-        new QueryErrorLocation({ offset: 0, lineNumber: 0, column: 0 }, { offset: 1, lineNumber: 1, column: 1 }),
-      ),
-    ]);
-  });
-
-  it("handles a JSON message without syntax errors", () => {
-    const innerError = {
-      code: "BadRequest",
-      message: "Your query is bad, and you should feel bad",
-    };
-    const message = `Message: ${JSON.stringify(innerError)}\r\nActivity ID: 42`;
-    const outerError = {
-      code: "BadRequest",
-      message,
-    };
-
-    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
-    expect(result).toEqual([
-      new QueryError("Your query is bad, and you should feel bad", QueryErrorSeverity.Error, "BadRequest"),
-    ]);
-  });
-
-  // Imitate the value coming from the backend, which has the syntax errors serialized as JSON in the message, along with a prefix and activity id.
-  it("handles single-nested error", () => {
-    const errors = [
-      {
-        message: "error1",
-        severity: "Warning",
-        location: { start: 0, end: 1 },
-        code: "code1",
-      },
-      {
-        message: "error2",
-        severity: "Error",
-        location: { start: 2, end: 3 },
-        code: "code2",
-      },
-    ];
-    const innerError = {
-      code: "BadRequest",
-      message: "Your query is bad, and you should feel bad",
-      errors,
-    };
-    const message = `Message: ${JSON.stringify(innerError)}\r\nActivity ID: 42`;
-    const outerError = {
-      code: "BadRequest",
-      message,
-    };
-
-    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
-    expect(result).toEqual([
-      new QueryError(
-        "error1",
-        QueryErrorSeverity.Warning,
-        "code1",
-        new QueryErrorLocation({ offset: 0, lineNumber: 0, column: 0 }, { offset: 1, lineNumber: 1, column: 1 }),
-      ),
-      new QueryError(
-        "error2",
-        QueryErrorSeverity.Error,
-        "code2",
-        new QueryErrorLocation({ offset: 2, lineNumber: 2, column: 2 }, { offset: 3, lineNumber: 3, column: 3 }),
-      ),
-    ]);
-  });
-
-  // Imitate another value we've gotten from the backend, which has a doubly-nested JSON payload.
-  it("handles double-nested error", () => {
-    const outerError = {
-      code: "BadRequest",
-      message:
-        '{"code":"BadRequest","message":"{\\"errors\\":[{\\"severity\\":\\"Error\\",\\"location\\":{\\"start\\":7,\\"end\\":18},\\"code\\":\\"SC2005\\",\\"message\\":\\"\'nonexistent\' is not a recognized built-in function name.\\"}]}\\r\\nActivityId: aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa, Windows/10.0.20348 cosmos-netstandard-sdk/3.18.0"}',
-    };
-
-    const result = QueryError.tryParse(outerError, testErrorLocationResolver);
-    expect(result).toEqual([
-      new QueryError(
-        "'nonexistent' is not a recognized built-in function name.",
-        QueryErrorSeverity.Error,
-        "SC2005",
-        new QueryErrorLocation({ offset: 7, lineNumber: 7, column: 7 }, { offset: 18, lineNumber: 18, column: 18 }),
-      ),
-    ]);
-  });
-});

src/Common/QueryError.ts

@@ -1,259 +0,0 @@
-import { monaco } from "Explorer/LazyMonaco";
-import { getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
-
-export enum QueryErrorSeverity {
-  Error = "Error",
-  Warning = "Warning",
-}
-
-export class QueryErrorLocation {
-  constructor(
-    public start: ErrorPosition,
-    public end: ErrorPosition,
-  ) {}
-}
-
-export class ErrorPosition {
-  constructor(
-    public offset: number,
-    public lineNumber?: number,
-    public column?: number,
-  ) {}
-}
-
-// Maps severities to numbers for sorting.
-const severityMap: Record<QueryErrorSeverity, number> = {
-  Error: 1,
-  Warning: 0,
-};
-
-export function compareSeverity(left: QueryErrorSeverity, right: QueryErrorSeverity): number {
-  return severityMap[left] - severityMap[right];
-}
-
-export function createMonacoErrorLocationResolver(
-  editor: monaco.editor.IStandaloneCodeEditor,
-  selection?: monaco.Selection,
-): (location: { start: number; end: number }) => QueryErrorLocation {
-  return ({ start, end }) => {
-    // Start and end are absolute offsets (character index) in the document.
-    // But we need line numbers and columns for the monaco editor.
-    // To get those, we use the editor's model to convert the offsets to positions.
-    const model = editor.getModel();
-    if (!model) {
-      return new QueryErrorLocation(new ErrorPosition(start), new ErrorPosition(end));
-    }
-
-    // If the error was found in a selection, adjust the start and end positions to be relative to the document.
-    if (selection) {
-      // Get the character index of the start of the selection.
-      const selectionStartOffset = model.getOffsetAt(selection.getStartPosition());
-
-      // Adjust the start and end positions to be relative to the document.
-      start = selectionStartOffset + start;
-      end = selectionStartOffset + end;
-
-      // Now, when we resolve the positions, they will be relative to the document and appear in the correct location.
-    }
-
-    const startPos = model.getPositionAt(start);
-    const endPos = model.getPositionAt(end);
-    return new QueryErrorLocation(
-      new ErrorPosition(start, startPos.lineNumber, startPos.column),
-      new ErrorPosition(end, endPos.lineNumber, endPos.column),
-    );
-  };
-}
-
-export const createMonacoMarkersForQueryErrors = (errors: QueryError[]) => {
-  if (!errors) {
-    return [];
-  }
-
-  return errors
-    .map((error): monaco.editor.IMarkerData => {
-      // Validate that we have what we need to make a marker
-      if (
-        error.location === undefined ||
-        error.location.start === undefined ||
-        error.location.end === undefined ||
-        error.location.start.lineNumber === undefined ||
-        error.location.end.lineNumber === undefined ||
-        error.location.start.column === undefined ||
-        error.location.end.column === undefined
-      ) {
-        return null;
-      }
-
-      return {
-        message: error.message,
-        severity: error.getMonacoSeverity(),
-        startLineNumber: error.location.start.lineNumber,
-        startColumn: error.location.start.column,
-        endLineNumber: error.location.end.lineNumber,
-        endColumn: error.location.end.column,
-      };
-    })
-    .filter((marker) => !!marker);
-};
-
-export interface ErrorEnrichment {
-  title?: string;
-  message: string;
-  learnMoreUrl?: string;
-}
-
-const REPLACEMENT_MESSAGES: Record<string, (original: string) => string> = {
-  OPERATION_RU_LIMIT_EXCEEDED: (original) => {
-    if (ruThresholdEnabled()) {
-      const threshold = getRUThreshold();
-      return `Query exceeded the Request Unit (RU) limit of ${threshold} RUs. You can change this limit in Data Explorer settings.`;
-    }
-    return original;
-  },
-};
-
-const HELP_LINKS: Record<string, string> = {
-  OPERATION_RU_LIMIT_EXCEEDED:
-    "https://learn.microsoft.com/en-us/azure/cosmos-db/data-explorer#configure-request-unit-threshold",
-};
-
-export default class QueryError {
-  message: string;
-  helpLink?: string;
-
-  constructor(
-    message: string,
-    public severity: QueryErrorSeverity,
-    public code?: string,
-    public location?: QueryErrorLocation,
-    helpLink?: string,
-  ) {
-    // Automatically replace the message with a more Data Explorer-specific message if we have for this error code.
-    this.message = REPLACEMENT_MESSAGES[code] ? REPLACEMENT_MESSAGES[code](message) : message;
-
-    // Automatically set the help link if we have one for this error code.
-    this.helpLink = helpLink ?? HELP_LINKS[code];
-  }
-
-  getMonacoSeverity(): monaco.MarkerSeverity {
-    // It's very difficult to use the monaco.MarkerSeverity enum from here, so we'll just use the numbers directly.
-    // See: https://microsoft.github.io/monaco-editor/typedoc/enums/MarkerSeverity.html
-    switch (this.severity) {
-      case QueryErrorSeverity.Error:
-        return 8;
-      case QueryErrorSeverity.Warning:
-        return 4;
-      default:
-        return 2; // Info
-    }
-  }
-
-  /** Attempts to parse a query error from a string or object.
-   *
-   * @param error The error to parse.
-   * @returns An array of query errors if the error could be parsed, or null otherwise.
-   */
-  static tryParse(
-    error: unknown,
-    locationResolver?: (location: { start: number; end: number }) => QueryErrorLocation,
-  ): QueryError[] {
-    locationResolver =
-      locationResolver ||
-      (({ start, end }) => new QueryErrorLocation(new ErrorPosition(start), new ErrorPosition(end)));
-    const errors = QueryError.tryParseObject(error, locationResolver);
-    if (errors !== null) {
-      return errors;
-    }
-
-    const errorMessage = error as string;
-
-    // Map some well known messages to richer errors
-    const knownError = knownErrors[errorMessage];
-    if (knownError) {
-      return [knownError];
-    } else {
-      return [new QueryError(errorMessage, QueryErrorSeverity.Error)];
-    }
-  }
-
-  static read(
-    error: unknown,
-    locationResolver: (location: { start: number; end: number }) => QueryErrorLocation,
-  ): QueryError | null {
-    if (typeof error !== "object" || error === null) {
-      return null;
-    }
-
-    const message = "message" in error && typeof error.message === "string" ? error.message : undefined;
-    if (!message) {
-      return null; // Invalid error (no message).
-    }
-
-    const severity =
-      "severity" in error && typeof error.severity === "string"
-        ? (error.severity as QueryErrorSeverity)
-        : QueryErrorSeverity.Error;
-    const location =
-      "location" in error && typeof error.location === "object"
-        ? locationResolver(error.location as { start: number; end: number })
-        : undefined;
-    const code = "code" in error && typeof error.code === "string" ? error.code : undefined;
-    return new QueryError(message, severity, code, location);
-  }
-
-  private static tryParseObject(
-    error: unknown,
-    locationResolver: (location: { start: number; end: number }) => QueryErrorLocation,
-  ): QueryError[] | null {
-    let message: string | undefined;
-    if (typeof error === "object" && "message" in error && typeof error.message === "string") {
-      message = error.message;
-    } else {
-      // Unsupported error format.
-      return null;
-    }
-
-    // Some newer backends produce a message that contains a doubly-nested JSON payload.
-    // In this case, the message we get is a fully-complete JSON object we can parse.
-    // So let's try that first
-    if (message.startsWith("{") && message.endsWith("}")) {
-      let outer: unknown = undefined;
-      try {
-        outer = JSON.parse(message);
-        if (typeof outer === "object" && "message" in outer && typeof outer.message === "string") {
-          message = outer.message;
-        }
-      } catch (e) {
-        // Just continue if the parsing fails. We'll use the fallback logic below.
-      }
-    }
-
-    const lines = message.split("\n");
-    message = lines[0].trim();
-
-    if (message.startsWith("Message: ")) {
-      message = message.substring("Message: ".length);
-    }
-
-    let parsed: unknown;
-    try {
-      parsed = JSON.parse(message);
-    } catch (e) {
-      // The message doesn't contain a nested error.
-      return [QueryError.read(error, locationResolver)];
-    }
-
-    if (typeof parsed === "object") {
-      if ("errors" in parsed && Array.isArray(parsed.errors)) {
-        return parsed.errors.map((e) => QueryError.read(e, locationResolver)).filter((e) => e !== null);
-      }
-      return [QueryError.read(parsed, locationResolver)];
-    }
-    return null;
-  }
-}
-
-const knownErrors: Record<string, QueryError> = {
-  "User aborted query.": new QueryError("User aborted query.", QueryErrorSeverity.Warning),
-};

src/Common/TableEntity.tsx

@@ -135,7 +135,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onEntityValueChange={onEntityValueChange}
           onSelectDate={onSelectDate}
           onEntityTimeValueChange={onEntityTimeValueChange}
-          entityProperty={entityProperty}
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">

src/Common/Tooltip/InfoTooltip.tsx

@@ -3,12 +3,11 @@ import * as React from "react";
 
 export interface TooltipProps {
   children: string;
-  className?: string;
 }
 
-export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children, className }: TooltipProps) => {
+export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }: TooltipProps) => {
   return (
-    <span className={className}>
+    <span>
       <TooltipHost content={children}>
         <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
       </TooltipHost>

src/Common/dataAccess/createCollection.ts

@@ -99,9 +99,6 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   if (params.vectorEmbeddingPolicy) {
     resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
   }
-  if (params.fullTextPolicy) {
-    resource.fullTextPolicy = params.fullTextPolicy;
-  }
 
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
@@ -273,7 +270,6 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
     analyticalStorageTtl: params.analyticalStorageTtl,
     vectorEmbeddingPolicy: params.vectorEmbeddingPolicy,
-    fullTextPolicy: params.fullTextPolicy,
   } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
   const collectionOptions: RequestOptions = {};
   const createDatabaseBody: DatabaseRequest = { id: params.databaseId };

src/Common/dataAccess/deleteDocument.ts

@@ -26,23 +26,14 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
   }
 };
 
-export interface IBulkDeleteResult {
-  documentId: DocumentId;
-  requestCharge: number;
-  statusCode: number;
-  retryAfterMilliseconds?: number;
-}
-
 /**
  * Bulk delete documents
  * @param collection
  * @param documentId
- * @returns array of results and status codes
+ * @returns array of ids that were successfully deleted
  */
-export const deleteDocuments = async (
-  collection: CollectionBase,
-  documentIds: DocumentId[],
-): Promise<IBulkDeleteResult[]> => {
+export const deleteDocuments = async (collection: CollectionBase, documentIds: DocumentId[]): Promise<DocumentId[]> => {
+  const nbDocuments = documentIds.length;
   const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
   try {
     const v2Container = await client().database(collection.databaseId).container(collection.id());
@@ -65,17 +56,18 @@ export const deleteDocuments = async (
         operationType: BulkOperationType.Delete,
       }));
 
-      const promise = v2Container.items.bulk(operations).then((bulkResults) => {
-        return bulkResults.map((bulkResult, index) => {
-          const documentId = documentIdsChunk[index];
-          return { ...bulkResult, documentId };
-        });
+      const promise = v2Container.items.bulk(operations).then((bulkResult) => {
+        return documentIdsChunk.filter((_, index) => bulkResult[index].statusCode === 204);
       });
       promiseArray.push(promise);
     }
 
     const allResult = await Promise.all(promiseArray);
     const flatAllResult = Array.prototype.concat.apply([], allResult);
+    logConsoleInfo(
+      `Successfully deleted ${getEntityName(flatAllResult.length > 1)}: ${flatAllResult.length} out of ${nbDocuments}`,
+    );
+    // TODO: handle case result.length != nbDocuments
     return flatAllResult;
   } catch (error) {
     handleError(

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/updateOffer.ts

@@ -1,6 +1,6 @@
 import { OfferDefinition, RequestOptions } from "@azure/cosmos";
 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,
@@ -359,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

@@ -8,15 +8,16 @@ import {
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
+  allowedCassandraProxyEndpoints,
   allowedEmulatorEndpoints,
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
+  allowedMongoBackendEndpoints,
+  allowedMongoProxyEndpoints,
   allowedMsalRedirectEndpoints,
   defaultAllowedArmEndpoints,
   defaultAllowedBackendEndpoints,
-  defaultAllowedCassandraProxyEndpoints,
-  defaultAllowedMongoProxyEndpoints,
   validateEndpoint,
 } from "Utils/EndpointUtils";
 
@@ -31,8 +32,6 @@ export interface ConfigContext {
   platform: Platform;
   allowedArmEndpoints: ReadonlyArray<string>;
   allowedBackendEndpoints: ReadonlyArray<string>;
-  allowedCassandraProxyEndpoints: ReadonlyArray<string>;
-  allowedMongoProxyEndpoints: ReadonlyArray<string>;
   allowedParentFrameOrigins: ReadonlyArray<string>;
   gitSha?: string;
   proxyPath?: string;
@@ -49,10 +48,15 @@ export interface ConfigContext {
   CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
-  PORTAL_BACKEND_ENDPOINT: string;
+  BACKEND_ENDPOINT?: string;
+  PORTAL_BACKEND_ENDPOINT?: string;
   NEW_BACKEND_APIS?: BackendApi[];
-  MONGO_PROXY_ENDPOINT: string;
-  CASSANDRA_PROXY_ENDPOINT: string;
+  MONGO_BACKEND_ENDPOINT?: string;
+  MONGO_PROXY_ENDPOINT?: string;
+  MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED?: boolean;
+  NEW_MONGO_APIS?: string[];
+  CASSANDRA_PROXY_ENDPOINT?: string;
+  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: boolean;
   NEW_CASSANDRA_APIS?: string[];
   PROXY_PATH?: string;
   JUNO_ENDPOINT: string;
@@ -64,8 +68,6 @@ export interface ConfigContext {
   hostedExplorerURL: string;
   armAPIVersion?: string;
   msalRedirectURI?: string;
-  globallyEnabledCassandraAPIs?: string[];
-  globallyEnabledMongoAPIs?: string[];
 }
 
 // Default configuration
@@ -73,12 +75,9 @@ let configContext: Readonly<ConfigContext> = {
   platform: Platform.Portal,
   allowedArmEndpoints: defaultAllowedArmEndpoints,
   allowedBackendEndpoints: defaultAllowedBackendEndpoints,
-  allowedCassandraProxyEndpoints: defaultAllowedCassandraProxyEndpoints,
-  allowedMongoProxyEndpoints: defaultAllowedMongoProxyEndpoints,
   allowedParentFrameOrigins: [
     `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
-    `^https:\\/\\/cdb-(ms|ff|mc)-prod-pbe\\.cosmos\\.azure\\.(com|us|cn)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.microsoftazure\\.de$`,
     `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
@@ -88,7 +87,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,14 +105,25 @@ 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,
+  NEW_MONGO_APIS: [
+    // "resourcelist",
+    // "queryDocuments",
+    // "createDocument",
+    // "readDocument",
+    // "updateDocument",
+    // "deleteDocument",
+    // "createCollectionWithProxy",
+    // "legacyMongoShell",
+  ],
+  MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
   NEW_CASSANDRA_APIS: ["postQuery", "createOrDelete", "getKeys", "getSchema"],
+  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   isTerminalEnabled: false,
   isPhoenixEnabled: false,
-  globallyEnabledCassandraAPIs: [],
-  globallyEnabledMongoAPIs: [],
 };
 
 export function resetConfigContext(): void {
@@ -150,19 +160,22 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
 
   if (
     !validateEndpoint(
-      newContext.MONGO_PROXY_ENDPOINT,
-      configContext.allowedMongoProxyEndpoints || defaultAllowedMongoProxyEndpoints,
+      newContext.BACKEND_ENDPOINT,
+      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints,
     )
   ) {
+    delete newContext.BACKEND_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.MONGO_PROXY_ENDPOINT, allowedMongoProxyEndpoints)) {
     delete newContext.MONGO_PROXY_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(
-      newContext.CASSANDRA_PROXY_ENDPOINT,
-      configContext.allowedCassandraProxyEndpoints || defaultAllowedCassandraProxyEndpoints,
-    )
-  ) {
+  if (!validateEndpoint(newContext.MONGO_BACKEND_ENDPOINT, allowedMongoBackendEndpoints)) {
+    delete newContext.MONGO_BACKEND_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.CASSANDRA_PROXY_ENDPOINT, allowedCassandraProxyEndpoints)) {
     delete 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 {
@@ -42,11 +41,6 @@ export interface DatabaseAccountExtendedProperties {
   publicNetworkAccess?: string;
   enablePriorityBasedExecution?: boolean;
   vcoreMongoEndpoint?: string;
-  virtualNetworkRules?: VNetRule[];
-}
-
-export interface VNetRule {
-  id: string;
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -165,7 +159,6 @@ export interface Collection extends Resource {
   analyticalStorageTtl?: number;
   geospatialConfig?: GeospatialConfig;
   vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
-  fullTextPolicy?: FullTextPolicy;
   schema?: ISchema;
   requestSchema?: () => void;
   computedProperties?: ComputedProperties;
@@ -206,19 +199,11 @@ export interface IndexingPolicy {
   compositeIndexes?: any[];
   spatialIndexes?: any[];
   vectorIndexes?: VectorIndex[];
-  fullTextIndexes?: FullTextIndex[];
 }
 
 export interface VectorIndex {
   path: string;
   type: "flat" | "diskANN" | "quantizedFlat";
-  diskANNShardKey?: string;
-  indexingSearchListSize?: number;
-  quantizationByteSize?: number;
-}
-
-export interface FullTextIndex {
-  path: string;
 }
 
 export interface ComputedProperty {
@@ -280,12 +265,6 @@ export interface Offer {
   offerReplacePending: boolean;
   instantMaximumThroughput?: number;
   softAllowedMaximumThroughput?: number;
-  throughputBuckets?: ThroughputBucket[];
-}
-
-export interface ThroughputBucket {
-  id: number;
-  maxThroughputPercentage: number;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -363,7 +342,6 @@ export interface CreateCollectionParams {
   uniqueKeyPolicy?: UniqueKeyPolicy;
   createMongoWildcardIndex?: boolean;
   vectorEmbeddingPolicy?: VectorEmbeddingPolicy;
-  fullTextPolicy?: FullTextPolicy;
 }
 
 export interface VectorEmbeddingPolicy {
@@ -377,16 +355,6 @@ export interface VectorEmbedding {
   path: string;
 }
 
-export interface FullTextPolicy {
-  defaultLanguage: string;
-  fullTextPaths: FullTextPath[];
-}
-
-export interface FullTextPath {
-  path: string;
-  language: string;
-}
-
 export interface ReadDatabaseOfferParams {
   databaseId: string;
   databaseResourceId?: string;
@@ -408,7 +376,6 @@ export interface UpdateOfferParams {
   collectionId?: string;
   migrateToAutoPilot?: boolean;
   migrateToManual?: boolean;
-  throughputBuckets?: ThroughputBucket[];
 }
 
 export interface Notification {
@@ -676,5 +643,3 @@ export interface FeatureRegistration {
     state: string;
   };
 }
-
-export type Tags = { [key: string]: string };

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

@@ -98,6 +98,7 @@ export interface Database extends TreeNode {
   openAddCollection(database: Database, event: MouseEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 export interface CollectionBase extends TreeNode {
@@ -115,13 +116,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;
@@ -132,8 +127,6 @@ export interface Collection extends CollectionBase {
   analyticalStorageTtl: ko.Observable<number>;
   schema?: DataModels.ISchema;
   requestSchema?: () => void;
-  vectorEmbeddingPolicy: ko.Observable<DataModels.VectorEmbeddingPolicy>;
-  fullTextPolicy: ko.Observable<DataModels.FullTextPolicy>;
   indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
   usageSizeInKB: ko.Observable<number>;
@@ -157,13 +150,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;
@@ -204,6 +191,8 @@ export interface Collection extends CollectionBase {
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
   uploadFiles(fileList: FileList): Promise<{ data: UploadDetailsRecord[] }>;
+
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 /**
@@ -323,8 +312,6 @@ export interface QueryTabOptions extends TabOptions {
   partitionKey?: DataModels.PartitionKey;
   queryText?: string;
   resourceTokenPartitionKey?: string;
-  splitterDirection?: "horizontal" | "vertical";
-  queryViewSizePercent?: number;
 }
 
 export interface ScriptTabOption extends TabOptions {
@@ -398,14 +385,13 @@ export interface DataExplorerInputsFrame {
   databaseAccount: any;
   subscriptionId?: string;
   resourceGroup?: string;
-  tenantId?: string;
-  userName?: string;
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
+  extensionEndpoint?: string;
   portalBackendEndpoint?: string;
   mongoProxyEndpoint?: string;
   cassandraProxyEndpoint?: string;

src/Explorer/ContextMenuButtonFactory.tsx

@@ -41,10 +41,6 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly) {
-    return undefined;
-  }
-
   const items: TreeNodeMenuItem[] = [
     {
       iconSrc: AddCollectionIcon,
@@ -56,15 +52,13 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
   if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
     items.push({
       iconSrc: DeleteDatabaseIcon,
-      onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
-        (useSidePanel.getState().getRef = lastFocusedElement),
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Delete " + getDatabaseName(),
-              <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />,
-            );
-      },
+      onClick: () =>
+        useSidePanel
+          .getState()
+          .openSidePanel(
+            "Delete " + getDatabaseName(),
+            <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />,
+          ),
       label: `Delete ${getDatabaseName()}`,
       styleClass: "deleteDatabaseMenuItem",
     });
@@ -96,17 +90,17 @@ export const createCollectionContextMenuButton = (
       iconSrc: HostedTerminalIcon,
       onClick: () => {
         const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        if (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) {
+        if (useNotebook.getState().isShellEnabled) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
       },
-      label: (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) ? "Open Mongo Shell" : "New Shell",
+      label: useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell",
     });
   }
 
-  if ((useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) && userContext.apiType === "Cassandra") {
+  if (useNotebook.getState().isShellEnabled && userContext.apiType === "Cassandra") {
     items.push({
       iconSrc: HostedTerminalIcon,
       onClick: () => {
@@ -148,15 +142,14 @@ export const createCollectionContextMenuButton = (
   if (configContext.platform !== Platform.Fabric) {
     items.push({
       iconSrc: DeleteCollectionIcon,
-      onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
+      onClick: () => {
         useSelectedNode.getState().setSelectedNode(selectedCollection);
-        (useSidePanel.getState().getRef = lastFocusedElement),
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Delete " + getCollectionName(),
-              <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
-            );
+        useSidePanel
+          .getState()
+          .openSidePanel(
+            "Delete " + getCollectionName(),
+            <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
+          );
       },
       label: `Delete ${getCollectionName()}`,
       styleClass: "deleteCollectionMenuItem",

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { DirectionalHint, Icon, IconButton, Label, Stack, TooltipHost } from "@fluentui/react";
+import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -9,9 +9,6 @@ export interface CollapsibleSectionProps {
   onExpand?: () => void;
   children: JSX.Element;
   tooltipContent?: string | JSX.Element | JSX.Element[];
-  showDelete?: boolean;
-  onDelete?: () => void;
-  disabled?: boolean;
 }
 
 export interface CollapsibleSectionState {
@@ -72,20 +69,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
               <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
             </TooltipHost>
           )}
-          {this.props.showDelete && (
-            <Stack.Item style={{ marginLeft: "auto" }}>
-              <IconButton
-                disabled={this.props.disabled}
-                id={`delete-${this.props.title.split(" ").join("-")}`}
-                iconProps={{ iconName: "Delete" }}
-                style={{ height: 27, marginRight: "20px" }}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  this.props.onDelete();
-                }}
-              />
-            </Stack.Item>
-          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>

src/Explorer/Controls/Dialog.tsx

@@ -35,7 +35,7 @@ export interface DialogState {
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean,
   ) => void;
-  showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps) => void;
+  showOkModalDialog: (title: string, subText: string) => void;
 }
 
 export const useDialog: UseStore<DialogState> = create((set, get) => ({
@@ -83,7 +83,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
       textFieldProps,
       primaryButtonDisabled,
     }),
-  showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps): void =>
+  showOkModalDialog: (title: string, subText: string): void =>
     get().openDialog({
       isModal: true,
       title,
@@ -94,7 +94,6 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
         get().closeDialog();
       },
       onSecondaryButtonClick: undefined,
-      linkProps,
     }),
 }));
 

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -3,37 +3,6 @@ import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
 
-// In development, add a function to window to allow us to get the editor instance for a given element
-if (process.env.NODE_ENV === "development") {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const win = window as any;
-  win._monaco_getEditorForElement =
-    win._monaco_getEditorForElement ||
-    ((element: HTMLElement) => {
-      const editorId = element.dataset["monacoEditorId"];
-      if (!editorId || !win.__monaco_editors || typeof win.__monaco_editors !== "object") {
-        return null;
-      }
-      return win.__monaco_editors[editorId];
-    });
-
-  win._monaco_getEditorContentForElement =
-    win._monaco_getEditorContentForElement ||
-    ((element: HTMLElement) => {
-      const editor = win._monaco_getEditorForElement(element);
-      return editor ? editor.getValue() : null;
-    });
-
-  win._monaco_setEditorContentForElement =
-    win._monaco_setEditorContentForElement ||
-    ((element: HTMLElement, text: string) => {
-      const editor = win._monaco_getEditorForElement(element);
-      if (editor) {
-        editor.setValue(text);
-      }
-    });
-}
-
 interface EditorReactStates {
   showEditor: boolean;
 }
@@ -42,7 +11,7 @@ export interface EditorReactProps {
   content: string;
   isReadOnly: boolean;
   ariaLabel: string; // Sets what will be read to the user to define the control
-  onContentSelected?: (selectedContent: string, selection: monaco.Selection) => void; // Called when text is selected
+  onContentSelected?: (selectedContent: string) => void; // Called when text is selected
   onContentChanged?: (newContent: string) => void; // Called when text is changed
   theme?: string; // Monaco editor theme
   wordWrap?: monaco.editor.IEditorOptions["wordWrap"];
@@ -56,7 +25,6 @@ export interface EditorReactProps {
   className?: string;
   spinnerClassName?: string;
 
-  modelMarkers?: monaco.editor.IMarkerData[];
   enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
   onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
 }
@@ -64,25 +32,10 @@ export interface EditorReactProps {
 export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
   private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
   private rootNode: HTMLElement;
-  public editor: monaco.editor.IStandaloneCodeEditor;
+  private editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
-  monacoApi: {
-    default: typeof monaco;
-    Emitter: typeof monaco.Emitter;
-    MarkerTag: typeof monaco.MarkerTag;
-    MarkerSeverity: typeof monaco.MarkerSeverity;
-    CancellationTokenSource: typeof monaco.CancellationTokenSource;
-    Uri: typeof monaco.Uri;
-    KeyCode: typeof monaco.KeyCode;
-    KeyMod: typeof monaco.KeyMod;
-    Position: typeof monaco.Position;
-    Range: typeof monaco.Range;
-    Selection: typeof monaco.Selection;
-    SelectionDirection: typeof monaco.SelectionDirection;
-    Token: typeof monaco.Token;
-    editor: typeof monaco.editor;
-    languages: typeof monaco.languages;
-  };
+
+  private monacoEditorOptionsWordWrap: monaco.editor.EditorOption;
 
   public constructor(props: EditorReactProps) {
     super(props);
@@ -111,7 +64,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
     if (this.props.content !== existingContent) {
       if (this.props.isReadOnly) {
-        this.editor.setValue(this.props.content || ""); // Monaco throws an error if you set the value to undefined.
+        this.editor.setValue(this.props.content);
       } else {
         this.editor.pushUndoStop();
         this.editor.executeEdits("", [
@@ -122,8 +75,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         ]);
       }
     }
-
-    this.monacoApi.editor.setModelMarkers(this.editor.getModel(), "owner", this.props.modelMarkers || []);
   }
 
   public componentWillUnmount(): void {
@@ -137,7 +88,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
           <Spinner size={SpinnerSize.large} className={this.props.spinnerClassName || "spinner"} />
         )}
         <div
-          data-test="EditorReact/Host/Unloaded"
           className={this.props.className || "jsonEditor"}
           style={this.props.monacoContainerStyles}
           ref={(elt: HTMLElement) => this.setRef(elt)}
@@ -148,18 +98,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
     this.editor = editor;
-    this.rootNode.dataset["test"] = "EditorReact/Host/Loaded";
-
-    // In development, we want to be able to access the editor instance from the console
-    if (process.env.NODE_ENV === "development") {
-      this.rootNode.dataset["monacoEditorId"] = this.editor.getId();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const win = window as any;
-
-      win["__monaco_editors"] = win["__monaco_editors"] || {};
-      win["__monaco_editors"][this.editor.getId()] = this.editor;
-    }
-
     if (!this.props.isReadOnly && this.props.onContentChanged) {
       // Hooking the model's onDidChangeContent event because of some event ordering issues.
       // If a single user input causes BOTH the editor content to change AND the cursor selection to change (which is likely),
@@ -177,7 +115,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       this.selectionListener = this.editor.onDidChangeCursorSelection(
         (event: monaco.editor.ICursorSelectionChangedEvent) => {
           const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
-          this.props.onContentSelected(selectedContent, event.selection);
+          this.props.onContentSelected(selectedContent);
         },
       );
     }
@@ -192,7 +130,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
         // Method that will be executed when the action is triggered.
         // @param editor The editor instance is passed in as a convenience
         run: (ed) => {
-          const newOption = ed.getOption(this.monacoApi.editor.EditorOption.wordWrap) === "on" ? "off" : "on";
+          const newOption = ed.getOption(this.monacoEditorOptionsWordWrap) === "on" ? "off" : "on";
           ed.updateOptions({ wordWrap: newOption });
           this.props.onWordWrapChanged(newOption);
         },
@@ -218,14 +156,16 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       lineDecorationsWidth: this.props.lineDecorationsWidth,
       minimap: this.props.minimap,
       scrollBeyondLastLine: this.props.scrollBeyondLastLine,
-      fixedOverflowWidgets: true,
     };
 
     this.rootNode.innerHTML = "";
-    this.monacoApi = await loadMonaco();
+    const lazymonaco = await loadMonaco();
+
+    // We can only get this constant after loading monaco lazily
+    this.monacoEditorOptionsWordWrap = lazymonaco.editor.EditorOption.wordWrap;
 
     try {
-      createCallback(this.monacoApi.editor.create(this.rootNode, options));
+      createCallback(lazymonaco?.editor?.create(this.rootNode, options));
     } catch (error) {
       // This could happen if the parent node suddenly disappears during create()
       console.error("Unable to create EditorReact", error);

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.test.tsx

@@ -1,6 +0,0 @@
-import "@testing-library/jest-dom";
-
-describe("AddFullTextPolicyForm", () => {
-  //CTODO: add tests
-  it.skip("should render correctly", () => {});
-});

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -1,239 +0,0 @@
-import {
-  DefaultButton,
-  Dropdown,
-  IDropdownOption,
-  IStyleFunctionOrObject,
-  ITextFieldStyleProps,
-  ITextFieldStyles,
-  Label,
-  Stack,
-  TextField,
-} from "@fluentui/react";
-import { FullTextIndex, FullTextPath, FullTextPolicy } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import * as React from "react";
-
-export interface FullTextPoliciesComponentProps {
-  fullTextPolicy: FullTextPolicy;
-  onFullTextPathChange: (
-    fullTextPolicy: FullTextPolicy,
-    fullTextIndexes: FullTextIndex[],
-    validationPassed: boolean,
-  ) => void;
-  discardChanges?: boolean;
-  onChangesDiscarded?: () => void;
-}
-
-export interface FullTextPolicyData {
-  path: string;
-  language: string;
-  pathError: string;
-}
-
-const labelStyles = {
-  root: {
-    fontSize: 12,
-  },
-};
-
-const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
-  fieldGroup: {
-    height: 27,
-  },
-  field: {
-    fontSize: 12,
-    padding: "0 8px",
-  },
-};
-
-const dropdownStyles = {
-  title: {
-    height: 27,
-    lineHeight: "24px",
-    fontSize: 12,
-  },
-  dropdown: {
-    height: 27,
-    lineHeight: "24px",
-  },
-  dropdownItem: {
-    fontSize: 12,
-  },
-};
-
-export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPoliciesComponentProps> = ({
-  fullTextPolicy,
-  onFullTextPathChange,
-  discardChanges,
-  onChangesDiscarded,
-}): JSX.Element => {
-  const getFullTextPathError = (path: string, index?: number): string => {
-    let error = "";
-    if (!path) {
-      error = "Full text path should not be empty";
-    }
-    if (
-      index >= 0 &&
-      fullTextPathData?.find(
-        (fullTextPath: FullTextPolicyData, dataIndex: number) => dataIndex !== index && fullTextPath.path === path,
-      )
-    ) {
-      error = "Full text path is already defined";
-    }
-    return error;
-  };
-
-  const initializeData = (fullTextPolicy: FullTextPolicy): FullTextPolicyData[] => {
-    if (!fullTextPolicy) {
-      fullTextPolicy = { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] };
-    }
-    return fullTextPolicy.fullTextPaths.map((fullTextPath: FullTextPath) => ({
-      ...fullTextPath,
-      pathError: getFullTextPathError(fullTextPath.path),
-    }));
-  };
-
-  const [fullTextPathData, setFullTextPathData] = React.useState<FullTextPolicyData[]>(initializeData(fullTextPolicy));
-  const [defaultLanguage, setDefaultLanguage] = React.useState<string>(
-    fullTextPolicy ? fullTextPolicy.defaultLanguage : (getFullTextLanguageOptions()[0].key as never),
-  );
-
-  React.useEffect(() => {
-    propagateData();
-  }, [fullTextPathData, defaultLanguage]);
-
-  React.useEffect(() => {
-    if (discardChanges) {
-      setFullTextPathData(initializeData(fullTextPolicy));
-      setDefaultLanguage(fullTextPolicy.defaultLanguage);
-      onChangesDiscarded();
-    }
-  }, [discardChanges]);
-
-  const propagateData = () => {
-    const newFullTextPolicy: FullTextPolicy = {
-      defaultLanguage: defaultLanguage,
-      fullTextPaths: fullTextPathData.map((policy: FullTextPolicyData) => ({
-        path: policy.path,
-        language: policy.language,
-      })),
-    };
-    const fullTextIndexes: FullTextIndex[] = fullTextPathData.map((policy) => ({
-      path: policy.path,
-    }));
-    const validationPassed = fullTextPathData.every((policy: FullTextPolicyData) => policy.pathError === "");
-    onFullTextPathChange(newFullTextPolicy, fullTextIndexes, validationPassed);
-  };
-
-  const onFullTextPathValueChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value.trim();
-    const fullTextPaths = [...fullTextPathData];
-    if (!fullTextPaths[index]?.path && !value.startsWith("/")) {
-      fullTextPaths[index].path = "/" + value;
-    } else {
-      fullTextPaths[index].path = value;
-    }
-    fullTextPaths[index].pathError = getFullTextPathError(value, index);
-    setFullTextPathData(fullTextPaths);
-  };
-
-  const onFullTextPathPolicyChange = (index: number, option: IDropdownOption): void => {
-    const policies = [...fullTextPathData];
-    policies[index].language = option.key as never;
-    setFullTextPathData(policies);
-  };
-
-  const onAdd = () => {
-    setFullTextPathData([
-      ...fullTextPathData,
-      {
-        path: "",
-        language: defaultLanguage,
-        pathError: getFullTextPathError(""),
-      },
-    ]);
-  };
-
-  const onDelete = (index: number) => {
-    const policies = fullTextPathData.filter((_uniqueKey, j) => index !== j);
-    setFullTextPathData(policies);
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 4 }}>
-      <Stack style={{ marginBottom: 10 }}>
-        <Label styles={labelStyles}>Default language</Label>
-        <Dropdown
-          required={true}
-          styles={dropdownStyles}
-          options={getFullTextLanguageOptions()}
-          selectedKey={defaultLanguage}
-          onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-            setDefaultLanguage(option.key as never)
-          }
-        ></Dropdown>
-      </Stack>
-      {fullTextPathData &&
-        fullTextPathData.length > 0 &&
-        fullTextPathData.map((fullTextPolicy: FullTextPolicyData, index: number) => (
-          <CollapsibleSectionComponent
-            key={index}
-            isExpandedByDefault={true}
-            title={`Full text path ${index + 1}`}
-            showDelete={true}
-            onDelete={() => onDelete(index)}
-          >
-            <Stack horizontal tokens={{ childrenGap: 4 }}>
-              <Stack
-                styles={{
-                  root: {
-                    margin: "0 0 6px 20px !important",
-                    paddingLeft: 20,
-                    width: "80%",
-                    borderLeft: "1px solid",
-                  },
-                }}
-              >
-                <Stack>
-                  <Label styles={labelStyles}>Path</Label>
-                  <TextField
-                    id={`full-text-policy-path-${index + 1}`}
-                    required={true}
-                    placeholder="/fullTextPath1"
-                    styles={textFieldStyles}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onFullTextPathValueChange(index, event)}
-                    value={fullTextPolicy.path || ""}
-                    errorMessage={fullTextPolicy.pathError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={labelStyles}>Language</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getFullTextLanguageOptions()}
-                    selectedKey={fullTextPolicy.language}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onFullTextPathPolicyChange(index, option)
-                    }
-                  ></Dropdown>
-                </Stack>
-              </Stack>
-            </Stack>
-          </CollapsibleSectionComponent>
-        ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
-        Add full text path
-      </DefaultButton>
-    </Stack>
-  );
-};
-
-export const getFullTextLanguageOptions = (): IDropdownOption[] => {
-  return [
-    {
-      key: "en-US",
-      text: "English (US)",
-    },
-  ];
-};

src/Explorer/Controls/IndeterminateProgressBar.tsx

@@ -1,37 +0,0 @@
-import { ProgressBar, makeStyles } from "@fluentui/react-components";
-import React from "react";
-
-const useStyles = makeStyles({
-  indeterminateProgressBarRoot: {
-    "@media screen and (prefers-reduced-motion: reduce)": {
-      animationIterationCount: "infinite",
-      animationDuration: "3s",
-      animationName: {
-        "0%": {
-          opacity: ".2", // matches indeterminate bar width
-        },
-        "50%": {
-          opacity: "1",
-        },
-        "100%": {
-          opacity: ".2",
-        },
-      },
-    },
-  },
-  indeterminateProgressBarBar: {
-    "@media screen and (prefers-reduced-motion: reduce)": {
-      maxWidth: "100%",
-    },
-  },
-});
-
-export const IndeterminateProgressBar: React.FC = () => {
-  const styles = useStyles();
-  return (
-    <ProgressBar
-      bar={{ className: styles.indeterminateProgressBarBar }}
-      className={styles.indeterminateProgressBarRoot}
-    />
-  );
-};

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/MessageBanner.tsx

@@ -1,68 +0,0 @@
-import { Button, MessageBar, MessageBarActions, MessageBarBody } from "@fluentui/react-components";
-import { DismissRegular } from "@fluentui/react-icons";
-import React, { useState } from "react";
-
-export enum MessageBannerState {
-  /** The banner should be visible if the triggering conditions are met. */
-  Allowed = "allowed",
-
-  /** The banner has been dismissed by the user and will not be shown until the component is recreated, even if the visibility condition is true. */
-  Dismissed = "dismissed",
-
-  /** The banner has been supressed by the user and will not be shown at all, even if the visibility condition is true. */
-  Suppressed = "suppressed",
-}
-
-export type MessageBannerProps = {
-  /** A CSS class for the root MessageBar component */
-  className: string;
-
-  /** A unique ID for the message that will be used to store it's dismiss/suppress state across sessions. */
-  messageId: string;
-
-  /** The current visibility state for the banner IGNORING the user's dimiss/suppress preference
-   *
-   * If this value is true but the user has dismissed the banner, the banner will NOT be shown.
-   */
-  visible: boolean;
-};
-
-/** A component that shows a message banner which can be dismissed by the user.
- *
- * In the future, this can also support persisting the dismissed state in local storage without requiring changes to all the components that use it.
- *
- * A message banner can be in three "states":
- * - Allowed: The banner should be visible if the triggering conditions are met.
- * - Dismissed: The banner has been dismissed by the user and will not be shown until the component is recreated, even if the visibility condition is true.
- * - Suppressed: The banner has been supressed by the user and will not be shown at all, even if the visibility condition is true.
- *
- * The "Dismissed" state represents the user clicking the "x" in the banner to dismiss it.
- * The "Suppressed" state represents the user clicking "Don't show this again".
- */
-export const MessageBanner: React.FC<MessageBannerProps> = ({ visible, className, children }) => {
-  const [state, setState] = useState<MessageBannerState>(MessageBannerState.Allowed);
-
-  if (state !== MessageBannerState.Allowed) {
-    return null;
-  }
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <MessageBar className={className}>
-      <MessageBarBody>{children}</MessageBarBody>
-      <MessageBarActions
-        containerAction={
-          <Button
-            aria-label="dismiss"
-            appearance="transparent"
-            icon={<DismissRegular />}
-            onClick={() => setState(MessageBannerState.Dismissed)}
-          />
-        }
-      ></MessageBarActions>
-    </MessageBar>
-  );
-};

src/Explorer/Controls/ProgressModalDialog.tsx

@@ -1,79 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogBody,
-  DialogContent,
-  DialogSurface,
-  DialogTitle,
-  DialogTrigger,
-  Field,
-  ProgressBar,
-} from "@fluentui/react-components";
-import * as React from "react";
-
-interface ProgressModalDialogProps {
-  isOpen: boolean;
-  title: string;
-  message: string;
-  maxValue: number;
-  value: number;
-  dismissText: string;
-  onDismiss: () => void;
-  onCancel?: () => void;
-  /* mode drives the state of the action buttons
-   * inProgress: Show cancel button
-   * completed: Show close button
-   * aborting: Show cancel button, but disabled
-   * aborted: Show close button
-   */
-  mode?: "inProgress" | "completed" | "aborting" | "aborted";
-}
-
-/**
- * React component that renders a modal dialog with a progress bar.
- */
-export const ProgressModalDialog: React.FC<ProgressModalDialogProps> = ({
-  isOpen,
-  title,
-  message,
-  maxValue,
-  value,
-  dismissText,
-  onCancel,
-  onDismiss,
-  children,
-  mode = "completed",
-}) => (
-  <Dialog
-    open={isOpen}
-    onOpenChange={(event, data) => {
-      if (!data.open) {
-        onDismiss();
-      }
-    }}
-  >
-    <DialogSurface>
-      <DialogBody>
-        <DialogTitle>{title}</DialogTitle>
-        <DialogContent>
-          <Field validationMessage={message} validationState="none">
-            <ProgressBar max={maxValue} value={value} />
-          </Field>
-          {children}
-        </DialogContent>
-        <DialogActions>
-          {mode === "inProgress" || mode === "aborting" ? (
-            <Button appearance="secondary" onClick={onCancel} disabled={mode === "aborting"}>
-              {dismissText}
-            </Button>
-          ) : (
-            <DialogTrigger disableButtonEnhancement>
-              <Button appearance="primary">Close</Button>
-            </DialogTrigger>
-          )}
-        </DialogActions>
-      </DialogBody>
-    </DialogSurface>
-  </Dialog>
-);

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";
@@ -136,6 +134,7 @@ describe("SettingsComponent", () => {
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
+      getPendingThroughputSplitNotification: undefined,
     } as ViewModels.Database;
     newCollection.getDatabase = () => newDatabase;
     newCollection.offer = ko.observable(undefined);
@@ -249,42 +248,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

@@ -4,15 +4,11 @@ import {
   ComputedPropertiesComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
 import {
-  ContainerPolicyComponent,
-  ContainerPolicyComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent";
-import {
-  ThroughputBucketsComponent,
-  ThroughputBucketsComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
+  ContainerVectorPolicyComponent,
+  ContainerVectorPolicyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
@@ -90,8 +86,6 @@ export interface SettingsComponentState {
   wasAutopilotOriginallySet: boolean;
   isScaleSaveable: boolean;
   isScaleDiscardable: boolean;
-  throughputBuckets: DataModels.ThroughputBucket[];
-  throughputBucketsBaseline: DataModels.ThroughputBucket[];
   throughputError: string;
 
   timeToLive: TtlType;
@@ -110,14 +104,6 @@ export interface SettingsComponentState {
   changeFeedPolicyBaseline: ChangeFeedPolicyState;
   isSubSettingsSaveable: boolean;
   isSubSettingsDiscardable: boolean;
-  isThroughputBucketsSaveable: boolean;
-
-  vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
-  vectorEmbeddingPolicyBaseline: DataModels.VectorEmbeddingPolicy;
-  fullTextPolicy: DataModels.FullTextPolicy;
-  fullTextPolicyBaseline: DataModels.FullTextPolicy;
-  shouldDiscardContainerPolicies: boolean;
-  isContainerPolicyDirty: boolean;
 
   indexingPolicyContent: DataModels.IndexingPolicy;
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
@@ -144,6 +130,7 @@ export interface SettingsComponentState {
   conflictResolutionPolicyProcedureBaseline: string;
   isConflictResolutionDirty: boolean;
 
+  initialNotification: DataModels.Notification;
   selectedTab: SettingsV2TabTypes;
 }
 
@@ -163,9 +150,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private shouldShowIndexingPolicyEditor: boolean;
   private shouldShowPartitionKeyEditor: boolean;
   private isVectorSearchEnabled: boolean;
-  private isFullTextSearchEnabled: boolean;
   private totalThroughputUsed: number;
-  private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
   constructor(props: SettingsComponentProps) {
@@ -180,13 +165,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
       this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
-      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 +185,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       wasAutopilotOriginallySet: false,
       isScaleSaveable: false,
       isScaleDiscardable: false,
-      throughputBuckets: undefined,
-      throughputBucketsBaseline: undefined,
       throughputError: undefined,
 
       timeToLive: undefined,
@@ -225,14 +203,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicyBaseline: undefined,
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
-      isThroughputBucketsSaveable: false,
-
-      vectorEmbeddingPolicy: undefined,
-      vectorEmbeddingPolicyBaseline: undefined,
-      fullTextPolicy: undefined,
-      fullTextPolicyBaseline: undefined,
-      shouldDiscardContainerPolicies: false,
-      isContainerPolicyDirty: false,
 
       indexingPolicyContent: undefined,
       indexingPolicyContentBaseline: undefined,
@@ -259,6 +229,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       conflictResolutionPolicyProcedureBaseline: undefined,
       isConflictResolutionDirty: false,
 
+      initialNotification: undefined,
       selectedTab: SettingsV2TabTypes.ScaleTab,
     };
 
@@ -338,12 +309,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return (
       this.state.isScaleSaveable ||
       this.state.isSubSettingsSaveable ||
-      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty ||
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable) ||
-      this.state.isThroughputBucketsSaveable
+      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable)
     );
   };
 
@@ -351,12 +320,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return (
       this.state.isScaleDiscardable ||
       this.state.isSubSettingsDiscardable ||
-      this.state.isContainerPolicyDirty ||
       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,14 +403,10 @@ 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,
       geospatialConfigType: this.state.geospatialConfigTypeBaseline,
-      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicyBaseline,
-      fullTextPolicy: this.state.fullTextPolicyBaseline,
       indexingPolicyContent: this.state.indexingPolicyContentBaseline,
       indexesToAdd: [],
       indexesToDrop: [],
@@ -455,14 +418,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       changeFeedPolicy: this.state.changeFeedPolicyBaseline,
       autoPilotThroughput: this.state.autoPilotThroughputBaseline,
       isAutoPilotSelected: this.state.wasAutopilotOriginallySet,
-      shouldDiscardContainerPolicies: true,
       shouldDiscardIndexingPolicy: true,
       isScaleSaveable: false,
       isScaleDiscardable: false,
       isSubSettingsSaveable: false,
-      isThroughputBucketsSaveable: false,
       isSubSettingsDiscardable: false,
-      isContainerPolicyDirty: false,
       isIndexingPolicyDirty: false,
       isMongoIndexingPolicySaveable: false,
       isMongoIndexingPolicyDiscardable: false,
@@ -490,21 +450,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onScaleDiscardableChange = (isScaleDiscardable: boolean): void =>
     this.setState({ isScaleDiscardable: isScaleDiscardable });
 
-  private onVectorEmbeddingPolicyChange = (newVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy): void =>
-    this.setState({ vectorEmbeddingPolicy: newVectorEmbeddingPolicy });
-
-  private onFullTextPolicyChange = (newFullTextPolicy: DataModels.FullTextPolicy): void =>
-    this.setState({ fullTextPolicy: newFullTextPolicy });
-
   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 });
 
   private logIndexingPolicySuccessMessage = (): void => {
@@ -592,12 +540,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onSubSettingsDiscardableChange = (isSubSettingsDiscardable: boolean): void =>
     this.setState({ isSubSettingsDiscardable: isSubSettingsDiscardable });
 
-  private onVectorEmbeddingPolicyDirtyChange = (isVectorEmbeddingPolicyDirty: boolean): void =>
-    this.setState({ isContainerPolicyDirty: isVectorEmbeddingPolicyDirty });
-
-  private onFullTextPolicyDirtyChange = (isFullTextPolicyDirty: boolean): void =>
-    this.setState({ isContainerPolicyDirty: isFullTextPolicyDirty });
-
   private onIndexingPolicyDirtyChange = (isIndexingPolicyDirty: boolean): void =>
     this.setState({ isIndexingPolicyDirty: isIndexingPolicyDirty });
 
@@ -751,10 +693,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
-    const vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy =
-      this.collection.vectorEmbeddingPolicy && this.collection.vectorEmbeddingPolicy();
-    const fullTextPolicy: DataModels.FullTextPolicy =
-      this.collection.fullTextPolicy && this.collection.fullTextPolicy();
     const indexingPolicyContent = this.collection.indexingPolicy();
     const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
       this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
@@ -773,13 +711,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,
@@ -792,10 +726,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
       analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
       analyticalStorageTtlSecondsBaseline: analyticalStorageTtlSeconds,
-      vectorEmbeddingPolicy: vectorEmbeddingPolicy,
-      vectorEmbeddingPolicyBaseline: vectorEmbeddingPolicy,
-      fullTextPolicy: fullTextPolicy,
-      fullTextPolicyBaseline: fullTextPolicy,
       indexingPolicyContent: indexingPolicyContent,
       indexingPolicyContentBaseline: indexingPolicyContent,
       conflictResolutionPolicyMode: conflictResolutionPolicyMode,
@@ -867,10 +797,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 });
 
@@ -930,7 +856,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     if (
       this.state.isSubSettingsSaveable ||
-      this.state.isContainerPolicyDirty ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
       this.state.isComputedPropertiesDirty
@@ -952,10 +877,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
       newCollection.defaultTtl = defaultTtl;
 
-      newCollection.vectorEmbeddingPolicy = this.state.vectorEmbeddingPolicy;
-
-      newCollection.fullTextPolicy = this.state.fullTextPolicy;
-
       newCollection.indexingPolicy = this.state.indexingPolicyContent;
 
       newCollection.changeFeedPolicy =
@@ -994,8 +915,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
       this.collection.geospatialConfig(updatedCollection.geospatialConfig);
       this.collection.computedProperties(updatedCollection.computedProperties);
-      this.collection.vectorEmbeddingPolicy(updatedCollection.vectorEmbeddingPolicy);
-      this.collection.fullTextPolicy(updatedCollection.fullTextPolicy);
 
       if (wasIndexingPolicyModified) {
         await this.refreshIndexTransformationProgress();
@@ -1004,7 +923,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.setState({
         isSubSettingsSaveable: false,
         isSubSettingsDiscardable: false,
-        isContainerPolicyDirty: false,
         isIndexingPolicyDirty: false,
         isConflictResolutionDirty: false,
         isComputedPropertiesDirty: false,
@@ -1061,24 +979,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,
@@ -1152,6 +1052,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onMaxAutoPilotThroughputChange: this.onMaxAutoPilotThroughputChange,
       onScaleSaveableChange: this.onScaleSaveableChange,
       onScaleDiscardableChange: this.onScaleDiscardableChange,
+      initialNotification: this.props.settingsTab.pendingNotification(),
       throughputError: this.state.throughputError,
     };
 
@@ -1193,21 +1094,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onSubSettingsDiscardableChange: this.onSubSettingsDiscardableChange,
     };
 
-    const containerPolicyComponentProps: ContainerPolicyComponentProps = {
-      vectorEmbeddingPolicy: this.state.vectorEmbeddingPolicy,
-      vectorEmbeddingPolicyBaseline: this.state.vectorEmbeddingPolicyBaseline,
-      onVectorEmbeddingPolicyChange: this.onVectorEmbeddingPolicyChange,
-      onVectorEmbeddingPolicyDirtyChange: this.onVectorEmbeddingPolicyDirtyChange,
-      isVectorSearchEnabled: this.isVectorSearchEnabled,
-      fullTextPolicy: this.state.fullTextPolicy,
-      fullTextPolicyBaseline: this.state.fullTextPolicyBaseline,
-      onFullTextPolicyChange: this.onFullTextPolicyChange,
-      onFullTextPolicyDirtyChange: this.onFullTextPolicyDirtyChange,
-      isFullTextSearchEnabled: this.isFullTextSearchEnabled,
-      shouldDiscardContainerPolicies: this.state.shouldDiscardContainerPolicies,
-      resetShouldDiscardContainerPolicyChange: this.resetShouldDiscardContainerPolicies,
-    };
-
     const indexingPolicyComponentProps: IndexingPolicyComponentProps = {
       shouldDiscardIndexingPolicy: this.state.shouldDiscardIndexingPolicy,
       resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
@@ -1259,19 +1145,16 @@ 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,
       explorer: this.props.settingsTab.getContainer(),
     };
 
+    const containerVectorPolicyProps: ContainerVectorPolicyComponentProps = {
+      vectorEmbeddingPolicy: this.collection.rawDataModel?.vectorEmbeddingPolicy,
+    };
+
     const tabs: SettingsV2TabInfo[] = [];
     if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
@@ -1285,10 +1168,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       content: <SubSettingsComponent {...subSettingsComponentProps} />,
     });
 
-    if (this.isVectorSearchEnabled || this.isFullTextSearchEnabled) {
+    if (this.isVectorSearchEnabled) {
       tabs.push({
         tab: SettingsV2TabTypes.ContainerVectorPolicyTab,
-        content: <ContainerPolicyComponent {...containerPolicyComponentProps} />,
+        content: <ContainerVectorPolicyComponent {...containerVectorPolicyProps} />,
       });
     }
 
@@ -1328,13 +1211,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/ContainerPolicyComponent.text.tsx

@@ -1,6 +0,0 @@
-import "@testing-library/jest-dom";
-
-describe("ContainerPolicyComponent", () => {
-  //CTODO: add tests
-  it.skip("should render correctly", () => {});
-});

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

@@ -1,163 +0,0 @@
-import { DefaultButton, Pivot, PivotItem, Stack } from "@fluentui/react";
-import { FullTextPolicy, VectorEmbedding, VectorEmbeddingPolicy } from "Contracts/DataModels";
-import {
-  FullTextPoliciesComponent,
-  getFullTextLanguageOptions,
-} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
-import { ContainerPolicyTabTypes, isDirty } from "Explorer/Controls/Settings/SettingsUtils";
-import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
-import React from "react";
-
-export interface ContainerPolicyComponentProps {
-  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
-  vectorEmbeddingPolicyBaseline: VectorEmbeddingPolicy;
-  onVectorEmbeddingPolicyChange: (newVectorEmbeddingPolicy: VectorEmbeddingPolicy) => void;
-  onVectorEmbeddingPolicyDirtyChange: (isVectorEmbeddingPolicyDirty: boolean) => void;
-  isVectorSearchEnabled: boolean;
-  fullTextPolicy: FullTextPolicy;
-  fullTextPolicyBaseline: FullTextPolicy;
-  onFullTextPolicyChange: (newFullTextPolicy: FullTextPolicy) => void;
-  onFullTextPolicyDirtyChange: (isFullTextPolicyDirty: boolean) => void;
-  isFullTextSearchEnabled: boolean;
-  shouldDiscardContainerPolicies: boolean;
-  resetShouldDiscardContainerPolicyChange: () => void;
-}
-
-export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> = ({
-  vectorEmbeddingPolicy,
-  vectorEmbeddingPolicyBaseline,
-  onVectorEmbeddingPolicyChange,
-  onVectorEmbeddingPolicyDirtyChange,
-  isVectorSearchEnabled,
-  fullTextPolicy,
-  fullTextPolicyBaseline,
-  onFullTextPolicyChange,
-  onFullTextPolicyDirtyChange,
-  isFullTextSearchEnabled,
-  shouldDiscardContainerPolicies,
-  resetShouldDiscardContainerPolicyChange,
-}) => {
-  const [selectedTab, setSelectedTab] = React.useState<ContainerPolicyTabTypes>(
-    ContainerPolicyTabTypes.VectorPolicyTab,
-  );
-  const [vectorEmbeddings, setVectorEmbeddings] = React.useState<VectorEmbedding[]>();
-  const [vectorEmbeddingsBaseline, setVectorEmbeddingsBaseline] = React.useState<VectorEmbedding[]>();
-  const [discardVectorChanges, setDiscardVectorChanges] = React.useState<boolean>(false);
-  const [fullTextSearchPolicy, setFullTextSearchPolicy] = React.useState<FullTextPolicy>();
-  const [fullTextSearchPolicyBaseline, setFullTextSearchPolicyBaseline] = React.useState<FullTextPolicy>();
-  const [discardFullTextChanges, setDiscardFullTextChanges] = React.useState<boolean>(false);
-
-  React.useEffect(() => {
-    setVectorEmbeddings(vectorEmbeddingPolicy?.vectorEmbeddings);
-    setVectorEmbeddingsBaseline(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
-  }, [vectorEmbeddingPolicy]);
-
-  React.useEffect(() => {
-    setFullTextSearchPolicy(fullTextPolicy);
-    setFullTextSearchPolicyBaseline(fullTextPolicyBaseline);
-  }, [fullTextPolicy, fullTextPolicyBaseline]);
-
-  React.useEffect(() => {
-    if (shouldDiscardContainerPolicies) {
-      setVectorEmbeddings(vectorEmbeddingPolicyBaseline?.vectorEmbeddings);
-      setDiscardVectorChanges(true);
-      setFullTextSearchPolicy(fullTextPolicyBaseline);
-      setDiscardFullTextChanges(true);
-      resetShouldDiscardContainerPolicyChange();
-    }
-  });
-
-  const checkAndSendVectorEmbeddingPoliciesToSettings = (newVectorEmbeddings: VectorEmbedding[]): void => {
-    if (isDirty(newVectorEmbeddings, vectorEmbeddingsBaseline)) {
-      onVectorEmbeddingPolicyDirtyChange(true);
-      onVectorEmbeddingPolicyChange({ vectorEmbeddings: newVectorEmbeddings });
-    } else {
-      resetShouldDiscardContainerPolicyChange();
-    }
-  };
-
-  const checkAndSendFullTextPolicyToSettings = (newFullTextPolicy: FullTextPolicy): void => {
-    if (isDirty(newFullTextPolicy, fullTextSearchPolicyBaseline)) {
-      onFullTextPolicyDirtyChange(true);
-      onFullTextPolicyChange(newFullTextPolicy);
-    } else {
-      resetShouldDiscardContainerPolicyChange();
-    }
-  };
-
-  const onVectorChangesDiscarded = (): void => {
-    setDiscardVectorChanges(false);
-  };
-
-  const onFullTextChangesDiscarded = (): void => {
-    setDiscardFullTextChanges(false);
-  };
-
-  const onPivotChange = (item: PivotItem): void => {
-    const selectedTab = ContainerPolicyTabTypes[item.props.itemKey as keyof typeof ContainerPolicyTabTypes];
-    setSelectedTab(selectedTab);
-  };
-
-  return (
-    <div>
-      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
-        {isVectorSearchEnabled && (
-          <PivotItem
-            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
-            style={{ marginTop: 20 }}
-            headerText="Vector Policy"
-          >
-            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
-              {vectorEmbeddings && (
-                <VectorEmbeddingPoliciesComponent
-                  disabled={true}
-                  vectorEmbeddings={vectorEmbeddings}
-                  vectorIndexes={undefined}
-                  onVectorEmbeddingChange={(vectorEmbeddings: VectorEmbedding[]) =>
-                    checkAndSendVectorEmbeddingPoliciesToSettings(vectorEmbeddings)
-                  }
-                  discardChanges={discardVectorChanges}
-                  onChangesDiscarded={onVectorChangesDiscarded}
-                />
-              )}
-            </Stack>
-          </PivotItem>
-        )}
-        {isFullTextSearchEnabled && (
-          <PivotItem
-            itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
-            style={{ marginTop: 20 }}
-            headerText="Full Text Policy"
-          >
-            <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
-              {fullTextSearchPolicy ? (
-                <FullTextPoliciesComponent
-                  fullTextPolicy={fullTextSearchPolicy}
-                  onFullTextPathChange={(newFullTextPolicy: FullTextPolicy) =>
-                    checkAndSendFullTextPolicyToSettings(newFullTextPolicy)
-                  }
-                  discardChanges={discardFullTextChanges}
-                  onChangesDiscarded={onFullTextChangesDiscarded}
-                />
-              ) : (
-                <DefaultButton
-                  id={"create-full-text-policy"}
-                  styles={{ root: { fontSize: 12 } }}
-                  onClick={() => {
-                    checkAndSendFullTextPolicyToSettings({
-                      defaultLanguage: getFullTextLanguageOptions()[0].key as never,
-                      fullTextPaths: [],
-                    });
-                  }}
-                >
-                  Create new full text search policy
-                </DefaultButton>
-              )}
-            </Stack>
-          </PivotItem>
-        )}
-      </Pivot>
-    </div>
-  );
-};

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

@@ -0,0 +1,30 @@
+import { Stack } from "@fluentui/react";
+import { VectorEmbeddingPolicy } from "Contracts/DataModels";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
+import React from "react";
+
+export interface ContainerVectorPolicyComponentProps {
+  vectorEmbeddingPolicy: VectorEmbeddingPolicy;
+}
+
+export const ContainerVectorPolicyComponent: React.FC<ContainerVectorPolicyComponentProps> = ({
+  vectorEmbeddingPolicy,
+}) => {
+  return (
+    <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative" } }}>
+      <EditorReact
+        language={"json"}
+        content={JSON.stringify(vectorEmbeddingPolicy || {}, null, 4)}
+        isReadOnly={true}
+        wordWrap={"on"}
+        ariaLabel={"Container vector policy"}
+        lineNumbers={"on"}
+        scrollBeyondLastLine={false}
+        className={"settingsV2Editor"}
+        spinnerClassName={"settingsV2EditorSpinner"}
+        fontSize={14}
+      />
+    </Stack>
+  );
+};

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

@@ -120,6 +120,11 @@ export class IndexingPolicyComponent extends React.Component<
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
+        {this.props.isVectorSearchEnabled && (
+          <MessageBar messageBarType={MessageBarType.severeWarning}>
+            Container vector policies and vector indexes are not modifiable after container creation
+          </MessageBar>
+        )}
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
           <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
         )}

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/ScaleComponent.test.tsx

@@ -1,10 +1,18 @@
+import { shallow } from "enzyme";
+import ko from "knockout";
+import React from "react";
 import * as Constants from "../../../../Common/Constants";
+import * as DataModels from "../../../../Contracts/DataModels";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
+import { throughputUnit } from "../SettingsRenderUtils";
 import { collection } from "../TestUtils";
 import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 
 describe("ScaleComponent", () => {
+  const targetThroughput = 6000;
+
   const baseProps: ScaleComponentProps = {
     collection: collection,
     database: undefined,
@@ -28,8 +36,39 @@ describe("ScaleComponent", () => {
     onScaleDiscardableChange: () => {
       return;
     },
+    initialNotification: {
+      description: `Throughput update for ${targetThroughput} ${throughputUnit}`,
+    } as DataModels.Notification,
   };
 
+  it("renders with correct initial notification", () => {
+    let wrapper = shallow(<ScaleComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
+    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(true);
+    expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(false);
+    expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(`${targetThroughput}`);
+
+    const newCollection = { ...collection };
+    const maxThroughput = 5000;
+    newCollection.offer = ko.observable({
+      manualThroughput: undefined,
+      autoscaleMaxThroughput: maxThroughput,
+      minimumThroughput: 400,
+      id: "offer",
+      offerReplacePending: true,
+    });
+    const newProps = {
+      ...baseProps,
+      initialNotification: undefined as DataModels.Notification,
+      collection: newCollection,
+    };
+    wrapper = shallow(<ScaleComponent {...newProps} />);
+    expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
+    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
+    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(`${maxThroughput}`);
+  });
+
   it("autoScale disabled", () => {
     const scaleComponent = new ScaleComponent(baseProps);
     expect(scaleComponent.isAutoScaleEnabled()).toEqual(false);

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

@@ -10,6 +10,7 @@ import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import { isRunningOnNationalCloud } from "../../../../Utils/CloudUtils";
 import {
   getTextFieldStyles,
+  getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
   subComponentStackProps,
   throughputUnit,
@@ -33,6 +34,7 @@ export interface ScaleComponentProps {
   onMaxAutoPilotThroughputChange: (newThroughput: number) => void;
   onScaleSaveableChange: (isScaleSaveable: boolean) => void;
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
+  initialNotification: DataModels.Notification;
   throughputError?: string;
 }
 
@@ -100,6 +102,10 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getInitialNotificationElement = (): JSX.Element => {
+    if (this.props.initialNotification) {
+      return this.getLongDelayMessage();
+    }
+
     if (this.offer?.offerReplacePending) {
       const throughput = this.offer.manualThroughput || this.offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
@@ -114,6 +120,26 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     return undefined;
   };
 
+  public getLongDelayMessage = (): JSX.Element => {
+    const matches: string[] = this.props.initialNotification?.description.match(
+      `Throughput update for (.*) ${throughputUnit}`,
+    );
+
+    const throughput = this.props.throughputBaseline;
+    const targetThroughput: number = matches.length > 1 && Number(matches[1]);
+    if (targetThroughput) {
+      return getThroughputApplyLongDelayMessage(
+        this.props.wasAutopilotOriginallySet,
+        throughput,
+        throughputUnit,
+        this.databaseId,
+        this.collectionId,
+        targetThroughput,
+      );
+    }
+    return <></>;
+  };
+
   private getThroughputInputComponent = (): JSX.Element => (
     <ThroughputInputAutoPilotV3Component
       databaseAccount={userContext?.databaseAccount}

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/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScaleComponent renders with correct initial notification 1`] = `
+<Stack
+  tokens={
+    {
+      "childrenGap": 20,
+    }
+  }
+>
+  <StyledMessageBar
+    messageBarType={5}
+  >
+    <Text
+      id="throughputApplyLongDelayMessage"
+      styles={
+        {
+          "root": {
+            "color": "windowtext",
+            "fontSize": 14,
+          },
+        }
+      }
+    >
+      A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
+      <br />
+      Database: test, Container: test 
+      , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
+    </Text>
+  </StyledMessageBar>
+  <Stack
+    tokens={
+      {
+        "childrenGap": 20,
+      }
+    }
+  >
+    <ThroughputInputAutoPilotV3Component
+      canExceedMaximumValue={true}
+      collectionName="test"
+      databaseName="test"
+      isAutoPilotSelected={false}
+      isEmulator={false}
+      isEnabled={true}
+      isFixed={false}
+      label="Throughput (6,000 - unlimited RU/s)"
+      maxAutoPilotThroughput={4000}
+      maxAutoPilotThroughputBaseline={4000}
+      maximum={1000000}
+      minimum={6000}
+      onAutoPilotSelected={[Function]}
+      onMaxAutoPilotThroughputChange={[Function]}
+      onScaleDiscardableChange={[Function]}
+      onScaleSaveableChange={[Function]}
+      onThroughputChange={[Function]}
+      spendAckChecked={false}
+      throughput={1000}
+      throughputBaseline={1000}
+      usageSizeInKB={100}
+      wasAutopilotOriginallySet={true}
+    />
+  </Stack>
+</Stack>
+`;

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

@@ -44,6 +44,7 @@ describe("SettingsUtils", () => {
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,
+        getPendingThroughputSplitNotification: undefined,
       } as ViewModels.Database;
     };
     newCollection.offer(undefined);

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -4,15 +4,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
-export type isDirtyTypes =
-  | boolean
-  | string
-  | number
-  | DataModels.IndexingPolicy
-  | DataModels.ComputedProperties
-  | DataModels.VectorEmbedding[]
-  | DataModels.FullTextPolicy
-  | DataModels.ThroughputBucket[];
+export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy | DataModels.ComputedProperties;
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -56,12 +48,6 @@ export enum SettingsV2TabTypes {
   PartitionKeyTab,
   ComputedPropertiesTab,
   ContainerVectorPolicyTab,
-  ThroughputBucketsTab,
-}
-
-export enum ContainerPolicyTabTypes {
-  VectorPolicyTab,
-  FullTextPolicyTab,
 }
 
 export interface IsComponentDirtyResult {
@@ -168,9 +154,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.ComputedPropertiesTab:
       return "Computed Properties";
     case SettingsV2TabTypes.ContainerVectorPolicyTab:
-      return "Container Policies";
-    case SettingsV2TabTypes.ThroughputBucketsTab:
-      return "Throughput Buckets";
+      return "Container Vector Policy (preview)";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -46,8 +46,6 @@ export const collection = {
       query: "query",
     },
   ]),
-  vectorEmbeddingPolicy: ko.observable<DataModels.VectorEmbeddingPolicy>({} as DataModels.VectorEmbeddingPolicy),
-  fullTextPolicy: ko.observable<DataModels.FullTextPolicy>({} as DataModels.FullTextPolicy),
   readSettings: () => {
     return;
   },

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

@@ -55,7 +55,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
-              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
@@ -72,7 +71,6 @@ exports[`SettingsComponent renders 1`] = `
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
-              "vectorEmbeddingPolicy": [Function],
             }
           }
           isAutoPilotSelected={false}
@@ -134,7 +132,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
-              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
@@ -151,7 +148,6 @@ exports[`SettingsComponent renders 1`] = `
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
-              "vectorEmbeddingPolicy": [Function],
             }
           }
           displayedTtlSeconds="5"
@@ -253,7 +249,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "databaseId": "test",
               "defaultTtl": [Function],
-              "fullTextPolicy": [Function],
               "geospatialConfig": [Function],
               "getDatabase": [Function],
               "id": [Function],
@@ -270,7 +265,6 @@ exports[`SettingsComponent renders 1`] = `
               "readSettings": [Function],
               "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
-              "vectorEmbeddingPolicy": [Function],
             }
           }
           explorer={

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,15 +34,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   setIsThroughputCapExceeded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
-  const defaultThroughput: number =
-    isFreeTier ||
-    isQuickstart ||
-    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(getWorkloadType())
-      ? AutoPilotUtils.autoPilotThroughput1K
-      : 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);
@@ -53,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;
@@ -162,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/Controls/TreeComponent/Styles.ts

@@ -17,7 +17,7 @@ export const useTreeStyles = makeStyles({
     minWidth: "100%",
     rowGap: "0px",
     paddingTop: "0px",
-    [treeIconWidth]: "16px",
+    [treeIconWidth]: "20px",
     [leafNodeSpacing]: "24px",
   },
   nodeIcon: {
@@ -25,13 +25,12 @@ export const useTreeStyles = makeStyles({
     height: `var(${treeIconWidth})`,
   },
   treeItem: {},
-  nodeLabel: {
-    whiteSpace: "nowrap", // Don't wrap text, there will be a scrollbar.
-  },
+  nodeLabel: {},
   treeItemLayout: {
     fontSize: tokens.fontSizeBase300,
     height: tokens.layoutRowHeight,
     ...cosmosShorthands.borderBottom(),
+    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
 
     // Some sneaky CSS variables stuff to change the background color of the action button on hover.
     [actionButtonBackground]: tokens.colorNeutralBackground1,

src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx

@@ -23,7 +23,7 @@ import { useCallback } from "react";
 
 export interface TreeNodeMenuItem {
   label: string;
-  onClick: (value?: React.RefObject<HTMLElement>) => void;
+  onClick: () => void;
   iconSrc?: string;
   isDisabled?: boolean;
   styleClass?: string;
@@ -74,7 +74,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
   openItems,
 }: TreeNodeComponentProps): JSX.Element => {
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
-  const contextMenuRef = React.useRef<HTMLButtonElement>(null);
   const treeStyles = useTreeStyles();
 
   const getSortedChildren = (treeNode: TreeNode): TreeNode[] => {
@@ -142,7 +141,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       data-test={`TreeNode/ContextMenuItem:${menuItem.label}`}
       disabled={menuItem.isDisabled}
       key={menuItem.label}
-      onClick={() => menuItem.onClick(contextMenuRef)}
+      onClick={menuItem.onClick}
     >
       {menuItem.label}
     </MenuItem>
@@ -150,19 +149,18 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
 
   // We use the expandIcon slot to hold the node icon too.
   // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
-  const treeIcon =
-    node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? (
+  const expandIcon = isLoading ? (
+    <Spinner size="extra-tiny" />
+  ) : !isBranch ? (
+    typeof node.iconSrc === "string" ? (
       <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
     ) : (
       node.iconSrc
-    );
-
-  const expandIcon = isLoading ? (
-    <Spinner size="extra-tiny" />
-  ) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
-    <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
+    )
+  ) : openItems.includes(treeNodeId) ? (
+    <ChevronDown20Regular />
   ) : (
-    <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
+    <ChevronRight20Regular />
   );
 
   const treeItem = (
@@ -176,6 +174,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       <TreeItemLayout
         className={mergeClasses(
           treeStyles.treeItemLayout,
+          expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
           shouldShowAsSelected && treeStyles.selectedItem,
           node.className && treeStyles[node.className],
         )}
@@ -191,7 +190,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
                     className={mergeClasses(treeStyles.actionsButton, shouldShowAsSelected && treeStyles.selectedItem)}
                     data-test="TreeNode/ContextMenuTrigger"
                     appearance="subtle"
-                    ref={contextMenuRef}
                     icon={<MoreHorizontal20Regular />}
                   />
                 </MenuTrigger>
@@ -202,13 +200,12 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
             ),
           }
         }
-        iconBefore={treeIcon}
         expandIcon={expandIcon}
       >
         <span className={treeStyles.nodeLabel}>{node.label}</span>
       </TreeItemLayout>
       {!node.isLoading && node.children?.length > 0 && (
-        <Tree data-test={`Tree:${treeNodeId}`} className={treeStyles.tree}>
+        <Tree className={treeStyles.tree}>
           {getSortedChildren(node).map((childNode: TreeNode) => (
             <TreeNodeComponent
               openItems={openItems}

src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap

@@ -10,23 +10,12 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
-    iconBefore={
-      <img
-        alt=""
-        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-        src="rootIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -144,7 +133,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 <svg
                   aria-hidden="true"
                   class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                  data-text="TreeNode/ExpandIcon"
                   fill="currentColor"
                   height="20"
                   viewBox="0 0 20 20"
@@ -163,7 +151,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
             "itemType": "branch",
             "layoutRef": {
               "current": <div
-                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                 data-test="TreeNode:root"
               >
                 <div
@@ -173,7 +161,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   <svg
                     aria-hidden="true"
                     class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                    data-text="TreeNode/ExpandIcon"
                     fill="currentColor"
                     height="20"
                     viewBox="0 0 20 20"
@@ -186,21 +173,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     />
                   </svg>
                 </div>
-                <div
-                  aria-hidden="true"
-                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                >
-                  <img
-                    alt=""
-                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                    src="rootIcon"
-                  />
-                </div>
                 <div
                   class="fui-TreeItemLayout__main rklbe47"
                 >
                   <span
-                    class="___1h29e9h_0000000 fz5stix"
+                    class=""
                   >
                     rootLabel
                   </span>
@@ -225,7 +202,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                   data-test="TreeNode:root"
                 >
                   <div
@@ -235,7 +212,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     <svg
                       aria-hidden="true"
                       class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                      data-text="TreeNode/ExpandIcon"
                       fill="currentColor"
                       height="20"
                       viewBox="0 0 20 20"
@@ -248,29 +224,18 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       />
                     </svg>
                   </div>
-                  <div
-                    aria-hidden="true"
-                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                  >
-                    <img
-                      alt=""
-                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                      src="rootIcon"
-                    />
-                  </div>
                   <div
                     class="fui-TreeItemLayout__main rklbe47"
                   >
                     <span
-                      class="___1h29e9h_0000000 fz5stix"
+                      class=""
                     >
                       rootLabel
                     </span>
                   </div>
                 </div>
                 <div
-                  class="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
-                  data-test="Tree:root"
+                  class="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
                   role="tree"
                 >
                   <div
@@ -283,7 +248,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                       data-test="TreeNode:root/child1Label"
                     >
                       <div
@@ -293,7 +258,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         <svg
                           aria-hidden="true"
                           class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                          data-text="TreeNode/ExpandIcon"
                           fill="currentColor"
                           height="20"
                           viewBox="0 0 20 20"
@@ -306,21 +270,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           />
                         </svg>
                       </div>
-                      <div
-                        aria-hidden="true"
-                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                      >
-                        <img
-                          alt=""
-                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                          src="child1Icon"
-                        />
-                      </div>
                       <div
                         class="fui-TreeItemLayout__main rklbe47"
                       >
                         <span
-                          class="___1h29e9h_0000000 fz5stix"
+                          class=""
                         >
                           child1Label
                         </span>
@@ -337,7 +291,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                       data-test="TreeNode:root/child2LoadingLabel"
                     >
                       <div
@@ -347,7 +301,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                         <svg
                           aria-hidden="true"
                           class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                          data-text="TreeNode/ExpandIcon"
                           fill="currentColor"
                           height="20"
                           viewBox="0 0 20 20"
@@ -360,21 +313,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           />
                         </svg>
                       </div>
-                      <div
-                        aria-hidden="true"
-                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                      >
-                        <img
-                          alt=""
-                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                          src="child2LoadingIcon"
-                        />
-                      </div>
                       <div
                         class="fui-TreeItemLayout__main rklbe47"
                       >
                         <span
-                          class="___1h29e9h_0000000 fz5stix"
+                          class=""
                         >
                           child2LoadingLabel
                         </span>
@@ -390,7 +333,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                       data-test="TreeNode:root/child3ExpandingLabel"
                     >
                       <div
@@ -410,21 +353,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           </span>
                         </div>
                       </div>
-                      <div
-                        aria-hidden="true"
-                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                      >
-                        <img
-                          alt=""
-                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                          src="child3ExpandingIcon"
-                        />
-                      </div>
                       <div
                         class="fui-TreeItemLayout__main rklbe47"
                       >
                         <span
-                          class="___1h29e9h_0000000 fz5stix"
+                          class=""
                         >
                           child3ExpandingLabel
                         </span>
@@ -440,36 +373,22 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
       >
         <TreeItemLayout
           actions={false}
-          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
           data-test="TreeNode:root"
-          expandIcon={
-            <ChevronRight20Regular
-              data-text="TreeNode/ExpandIcon"
-            />
-          }
-          iconBefore={
-            <img
-              alt=""
-              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-              src="rootIcon"
-            />
-          }
+          expandIcon={<ChevronRight20Regular />}
         >
           <div
-            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
             data-test="TreeNode:root"
           >
             <div
               aria-hidden={true}
               className="fui-TreeItemLayout__expandIcon rh4pu5o"
             >
-              <ChevronRight20Regular
-                data-text="TreeNode/ExpandIcon"
-              >
+              <ChevronRight20Regular>
                 <svg
                   aria-hidden={true}
                   className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                  data-text="TreeNode/ExpandIcon"
                   fill="currentColor"
                   height="20"
                   viewBox="0 0 20 20"
@@ -483,21 +402,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 </svg>
               </ChevronRight20Regular>
             </div>
-            <div
-              aria-hidden={true}
-              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-            >
-              <img
-                alt=""
-                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                src="rootIcon"
-              />
-            </div>
             <div
               className="fui-TreeItemLayout__main rklbe47"
             >
               <span
-                className="___1h29e9h_0000000 fz5stix"
+                className=""
               >
                 rootLabel
               </span>
@@ -505,8 +414,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
           </div>
         </TreeItemLayout>
         <Tree
-          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
-          data-test="Tree:root"
+          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
         >
           <TreeProvider
             value={
@@ -573,8 +481,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
               }
             >
               <div
-                className="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
-                data-test="Tree:root"
+                className="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
                 role="tree"
               >
                 <TreeNodeComponent
@@ -642,7 +549,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 <svg
                                   aria-hidden="true"
                                   class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -661,7 +567,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                             "itemType": "branch",
                             "layoutRef": {
                               "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                 data-test="TreeNode:root/child1Label"
                               >
                                 <div
@@ -671,7 +577,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   <svg
                                     aria-hidden="true"
                                     class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                    data-text="TreeNode/ExpandIcon"
                                     fill="currentColor"
                                     height="20"
                                     viewBox="0 0 20 20"
@@ -684,21 +589,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     />
                                   </svg>
                                 </div>
-                                <div
-                                  aria-hidden="true"
-                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                                >
-                                  <img
-                                    alt=""
-                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                    src="child1Icon"
-                                  />
-                                </div>
                                 <div
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
                                   <span
-                                    class="___1h29e9h_0000000 fz5stix"
+                                    class=""
                                   >
                                     child1Label
                                   </span>
@@ -723,7 +618,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 tabindex="0"
                               >
                                 <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                   data-test="TreeNode:root/child1Label"
                                 >
                                   <div
@@ -733,7 +628,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     <svg
                                       aria-hidden="true"
                                       class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                      data-text="TreeNode/ExpandIcon"
                                       fill="currentColor"
                                       height="20"
                                       viewBox="0 0 20 20"
@@ -746,21 +640,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                       />
                                     </svg>
                                   </div>
-                                  <div
-                                    aria-hidden="true"
-                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                                  >
-                                    <img
-                                      alt=""
-                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                      src="child1Icon"
-                                    />
-                                  </div>
                                   <div
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
                                     <span
-                                      class="___1h29e9h_0000000 fz5stix"
+                                      class=""
                                     >
                                       child1Label
                                     </span>
@@ -774,36 +658,22 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       >
                         <TreeItemLayout
                           actions={false}
-                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child1Label"
-                          expandIcon={
-                            <ChevronRight20Regular
-                              data-text="TreeNode/ExpandIcon"
-                            />
-                          }
-                          iconBefore={
-                            <img
-                              alt=""
-                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                              src="child1Icon"
-                            />
-                          }
+                          expandIcon={<ChevronRight20Regular />}
                         >
                           <div
-                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                             data-test="TreeNode:root/child1Label"
                           >
                             <div
                               aria-hidden={true}
                               className="fui-TreeItemLayout__expandIcon rh4pu5o"
                             >
-                              <ChevronRight20Regular
-                                data-text="TreeNode/ExpandIcon"
-                              >
+                              <ChevronRight20Regular>
                                 <svg
                                   aria-hidden={true}
                                   className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -817,21 +687,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 </svg>
                               </ChevronRight20Regular>
                             </div>
-                            <div
-                              aria-hidden={true}
-                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                            >
-                              <img
-                                alt=""
-                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                src="child1Icon"
-                              />
-                            </div>
                             <div
                               className="fui-TreeItemLayout__main rklbe47"
                             >
                               <span
-                                className="___1h29e9h_0000000 fz5stix"
+                                className=""
                               >
                                 child1Label
                               </span>
@@ -839,8 +699,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           </div>
                         </TreeItemLayout>
                         <Tree
-                          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
-                          data-test="Tree:root/child1Label"
+                          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
                         >
                           <TreeProvider
                             value={
@@ -913,7 +772,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 <svg
                                   aria-hidden="true"
                                   class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -932,7 +790,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                             "itemType": "branch",
                             "layoutRef": {
                               "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                 data-test="TreeNode:root/child2LoadingLabel"
                               >
                                 <div
@@ -942,7 +800,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                   <svg
                                     aria-hidden="true"
                                     class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                    data-text="TreeNode/ExpandIcon"
                                     fill="currentColor"
                                     height="20"
                                     viewBox="0 0 20 20"
@@ -955,21 +812,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     />
                                   </svg>
                                 </div>
-                                <div
-                                  aria-hidden="true"
-                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                                >
-                                  <img
-                                    alt=""
-                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                    src="child2LoadingIcon"
-                                  />
-                                </div>
                                 <div
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
                                   <span
-                                    class="___1h29e9h_0000000 fz5stix"
+                                    class=""
                                   >
                                     child2LoadingLabel
                                   </span>
@@ -994,7 +841,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 tabindex="-1"
                               >
                                 <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                   data-test="TreeNode:root/child2LoadingLabel"
                                 >
                                   <div
@@ -1004,7 +851,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     <svg
                                       aria-hidden="true"
                                       class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                      data-text="TreeNode/ExpandIcon"
                                       fill="currentColor"
                                       height="20"
                                       viewBox="0 0 20 20"
@@ -1017,21 +863,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                       />
                                     </svg>
                                   </div>
-                                  <div
-                                    aria-hidden="true"
-                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                                  >
-                                    <img
-                                      alt=""
-                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                      src="child2LoadingIcon"
-                                    />
-                                  </div>
                                   <div
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
                                     <span
-                                      class="___1h29e9h_0000000 fz5stix"
+                                      class=""
                                     >
                                       child2LoadingLabel
                                     </span>
@@ -1045,36 +881,22 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       >
                         <TreeItemLayout
                           actions={false}
-                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child2LoadingLabel"
-                          expandIcon={
-                            <ChevronRight20Regular
-                              data-text="TreeNode/ExpandIcon"
-                            />
-                          }
-                          iconBefore={
-                            <img
-                              alt=""
-                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                              src="child2LoadingIcon"
-                            />
-                          }
+                          expandIcon={<ChevronRight20Regular />}
                         >
                           <div
-                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                             data-test="TreeNode:root/child2LoadingLabel"
                           >
                             <div
                               aria-hidden={true}
                               className="fui-TreeItemLayout__expandIcon rh4pu5o"
                             >
-                              <ChevronRight20Regular
-                                data-text="TreeNode/ExpandIcon"
-                              >
+                              <ChevronRight20Regular>
                                 <svg
                                   aria-hidden={true}
                                   className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
-                                  data-text="TreeNode/ExpandIcon"
                                   fill="currentColor"
                                   height="20"
                                   viewBox="0 0 20 20"
@@ -1088,21 +910,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 </svg>
                               </ChevronRight20Regular>
                             </div>
-                            <div
-                              aria-hidden={true}
-                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                            >
-                              <img
-                                alt=""
-                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                src="child2LoadingIcon"
-                              />
-                            </div>
                             <div
                               className="fui-TreeItemLayout__main rklbe47"
                             >
                               <span
-                                className="___1h29e9h_0000000 fz5stix"
+                                className=""
                               >
                                 child2LoadingLabel
                               </span>
@@ -1187,7 +999,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                             "itemType": "leaf",
                             "layoutRef": {
                               "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                 data-test="TreeNode:root/child3ExpandingLabel"
                               >
                                 <div
@@ -1207,21 +1019,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     </span>
                                   </div>
                                 </div>
-                                <div
-                                  aria-hidden="true"
-                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                                >
-                                  <img
-                                    alt=""
-                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                    src="child3ExpandingIcon"
-                                  />
-                                </div>
                                 <div
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
                                   <span
-                                    class="___1h29e9h_0000000 fz5stix"
+                                    class=""
                                   >
                                     child3ExpandingLabel
                                   </span>
@@ -1245,7 +1047,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 tabindex="-1"
                               >
                                 <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                   data-test="TreeNode:root/child3ExpandingLabel"
                                 >
                                   <div
@@ -1265,21 +1067,11 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                       </span>
                                     </div>
                                   </div>
-                                  <div
-                                    aria-hidden="true"
-                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
-                                  >
-                                    <img
-                                      alt=""
-                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-                                      src="child3ExpandingIcon"
-                                    />
-                                  </div>
                                   <div
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
                                     <span
-                                      class="___1h29e9h_0000000 fz5stix"
+                                      class=""
                                     >
                                       child3ExpandingLabel
                                     </span>
@@ -1293,9 +1085,9 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       >
                         <TreeItemLayout
                           actions={false}
-                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child3ExpandingLabel"
-                          iconBefore={
+                          expandIcon={
                             <img
                               alt=""
                               className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1304,12 +1096,12 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           }
                         >
                           <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                             data-test="TreeNode:root/child3ExpandingLabel"
                           >
                             <div
                               aria-hidden={true}
-                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                              className="fui-TreeItemLayout__expandIcon rh4pu5o"
                             >
                               <img
                                 alt=""
@@ -1321,7 +1113,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                               className="fui-TreeItemLayout__main rklbe47"
                             >
                               <span
-                                className="___1h29e9h_0000000 fz5stix"
+                                className=""
                               >
                                 child3ExpandingLabel
                               </span>
@@ -1352,9 +1144,9 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    iconBefore={
+    expandIcon={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1363,7 +1155,7 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1381,23 +1173,16 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
     expandIcon={
       <Spinner
         size="extra-tiny"
       />
     }
-    iconBefore={
-      <img
-        alt=""
-        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-        src="rootIcon"
-      />
-    }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1415,23 +1200,12 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
-    iconBefore={
-      <img
-        alt=""
-        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-        src="rootIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1478,14 +1252,14 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
                 <MenuList>
                   <MenuItem
                     data-test="TreeNode/ContextMenuItem:enabledItem"
-                    onClick={[Function]}
+                    onClick={[MockFunction enabledItemClick]}
                   >
                     enabledItem
                   </MenuItem>
                   <MenuItem
                     data-test="TreeNode/ContextMenuItem:disabledItem"
                     disabled={true}
-                    onClick={[Function]}
+                    onClick={[MockFunction disabledItemClick]}
                   >
                     disabledItem
                   </MenuItem>
@@ -1495,9 +1269,9 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
             "className": "___1r8p62d_0000000 f1xg1ack f1e31b4d",
           }
         }
-        className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+        className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
         data-test="TreeNode:root"
-        iconBefore={
+        expandIcon={
           <img
             alt=""
             className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1506,7 +1280,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
         }
       >
         <span
-          className="___1h29e9h_0000000 fz5stix"
+          className=""
         >
           rootLabel
         </span>
@@ -1518,7 +1292,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
       <MenuItem
         data-test="TreeNode/ContextMenuItem:enabledItem"
         key="enabledItem"
-        onClick={[Function]}
+        onClick={[MockFunction enabledItemClick]}
       >
         enabledItem
       </MenuItem>
@@ -1526,7 +1300,7 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
         data-test="TreeNode/ContextMenuItem:disabledItem"
         disabled={true}
         key="disabledItem"
-        onClick={[Function]}
+        onClick={[MockFunction disabledItemClick]}
       >
         disabledItem
       </MenuItem>
@@ -1545,9 +1319,9 @@ exports[`TreeNodeComponent renders a single node 1`] = `
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    iconBefore={
+    expandIcon={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1556,7 +1330,7 @@ exports[`TreeNodeComponent renders a single node 1`] = `
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1574,9 +1348,9 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    iconBefore={
+    expandIcon={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1585,7 +1359,7 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
@@ -1603,30 +1377,18 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
 >
   <TreeItemLayout
     actions={false}
-    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
-    iconBefore={
-      <img
-        alt=""
-        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-        src="rootIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
   </TreeItemLayout>
   <Tree
-    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
-    data-test="Tree:root"
+    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
   >
     <TreeNodeComponent
       key="child1Label"
@@ -1686,30 +1448,18 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
 >
   <TreeItemLayout
     actions={false}
-    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
-      <ChevronRight20Regular
-        data-text="TreeNode/ExpandIcon"
-      />
-    }
-    iconBefore={
-      <img
-        alt=""
-        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
-        src="rootIcon"
-      />
-    }
+    expandIcon={<ChevronRight20Regular />}
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>
   </TreeItemLayout>
   <Tree
-    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
-    data-test="Tree:root"
+    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
   >
     <TreeNodeComponent
       key="child1Label"
@@ -1770,9 +1520,9 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
 >
   <TreeItemLayout
     actions={false}
-    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
     data-test="TreeNode:root"
-    iconBefore={
+    expandIcon={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1781,7 +1531,7 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
     }
   >
     <span
-      className="___1h29e9h_0000000 fz5stix"
+      className=""
     >
       rootLabel
     </span>

src/Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent.tsx

@@ -1,470 +0,0 @@
-import {
-  DefaultButton,
-  Dropdown,
-  IDropdownOption,
-  IStyleFunctionOrObject,
-  ITextFieldStyleProps,
-  ITextFieldStyles,
-  Label,
-  Stack,
-  TextField,
-} from "@fluentui/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import {
-  getDataTypeOptions,
-  getDistanceFunctionOptions,
-  getIndexTypeOptions,
-} from "Explorer/Controls/VectorSearch/VectorSearchUtils";
-import React, { FunctionComponent, useState } from "react";
-
-export interface IVectorEmbeddingPoliciesComponentProps {
-  vectorEmbeddings: VectorEmbedding[];
-  onVectorEmbeddingChange: (
-    vectorEmbeddings: VectorEmbedding[],
-    vectorIndexingPolicies: VectorIndex[],
-    validationPassed: boolean,
-  ) => void;
-  vectorIndexes?: VectorIndex[];
-  discardChanges?: boolean;
-  onChangesDiscarded?: () => void;
-  disabled?: boolean;
-}
-
-export interface VectorEmbeddingPolicyData {
-  path: string;
-  dataType: VectorEmbedding["dataType"];
-  distanceFunction: VectorEmbedding["distanceFunction"];
-  dimensions: number;
-  indexType: VectorIndex["type"] | "none";
-  pathError: string;
-  dimensionsError: string;
-  diskANNShardKey?: string;
-  diskANNShardKeyError?: string;
-  indexingSearchListSize?: number;
-  indexingSearchListSizeError?: string;
-  quantizationByteSize?: number;
-  quantizationByteSizeError?: string;
-}
-
-type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
-
-const labelStyles = {
-  root: {
-    fontSize: 12,
-  },
-};
-
-const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
-  fieldGroup: {
-    height: 27,
-  },
-  field: {
-    fontSize: 12,
-    padding: "0 8px",
-  },
-};
-
-const dropdownStyles = {
-  title: {
-    height: 27,
-    lineHeight: "24px",
-    fontSize: 12,
-  },
-  dropdown: {
-    height: 27,
-    lineHeight: "24px",
-  },
-  dropdownItem: {
-    fontSize: 12,
-  },
-};
-
-export const VectorEmbeddingPoliciesComponent: FunctionComponent<IVectorEmbeddingPoliciesComponentProps> = ({
-  vectorEmbeddings,
-  vectorIndexes,
-  onVectorEmbeddingChange,
-  discardChanges,
-  onChangesDiscarded,
-  disabled,
-}): JSX.Element => {
-  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
-    let error = "";
-    if (!path) {
-      error = "Path should not be empty";
-    }
-    if (
-      index >= 0 &&
-      vectorEmbeddingPolicyData?.find(
-        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
-          dataIndex !== index && vectorEmbedding.path === path,
-      )
-    ) {
-      error = "Path is already defined";
-    }
-    return error;
-  };
-
-  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
-    let error = "";
-    if (dimension <= 0 || dimension > 4096) {
-      error = "Dimension must be greater than 0 and less than or equal 4096";
-    }
-    if (indexType === "flat" && dimension > 505) {
-      error = "Maximum allowed dimension for flat index is 505";
-    }
-    return error;
-  };
-
-  const onQuantizationByteSizeError = (size: number): string => {
-    let error = "";
-    if (size < 1 || size > 512) {
-      error = "Quantization byte size must be greater than 0 and less than or equal to 512";
-    }
-    return error;
-  };
-
-  const onIndexingSearchListSizeError = (size: number): string => {
-    let error = "";
-    if (size < 25 || size > 500) {
-      error = "Indexing search list size must be greater than or equal to 25 and less than or equal to 500";
-    }
-    return error;
-  };
-
-  //TODO: no restrictions yet due to this field being removed for now.
-  // Uncomment and replace with validation code when field is reinstated
-  // const onDiskANNShardKeyError = (shardKey: string): string => {
-  //   return "";
-  // };
-
-  const initializeData = (vectorEmbeddings: VectorEmbedding[], vectorIndexes: VectorIndex[]) => {
-    const mergedData: VectorEmbeddingPolicyData[] = [];
-    vectorEmbeddings.forEach((embedding) => {
-      const matchingIndex = displayIndexes ? vectorIndexes.find((index) => index.path === embedding.path) : undefined;
-      mergedData.push({
-        ...embedding,
-        indexType: matchingIndex?.type || "none",
-        indexingSearchListSize: matchingIndex?.indexingSearchListSize || undefined,
-        quantizationByteSize: matchingIndex?.quantizationByteSize || undefined,
-        pathError: onVectorEmbeddingPathError(embedding.path),
-        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
-      });
-    });
-    return mergedData;
-  };
-
-  const [displayIndexes] = useState<boolean>(!!vectorIndexes);
-  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
-    initializeData(vectorEmbeddings, vectorIndexes),
-  );
-
-  React.useEffect(() => {
-    propagateData();
-  }, [vectorEmbeddingPolicyData]);
-
-  React.useEffect(() => {
-    if (discardChanges) {
-      setVectorEmbeddingPolicyData(initializeData(vectorEmbeddings, vectorIndexes));
-      onChangesDiscarded();
-    }
-  }, [discardChanges]);
-
-  const propagateData = () => {
-    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
-      path: policy.path,
-      dataType: policy.dataType,
-      dimensions: policy.dimensions,
-      distanceFunction: policy.distanceFunction,
-    }));
-    const vectorIndexes: VectorIndex[] = vectorEmbeddingPolicyData
-      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
-      .map(
-        (policy) =>
-          ({
-            path: policy.path,
-            type: policy.indexType,
-            indexingSearchListSize: policy.indexingSearchListSize,
-            quantizationByteSize: policy.quantizationByteSize,
-          }) as VectorIndex,
-      );
-    const validationPassed = vectorEmbeddingPolicyData.every(
-      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
-    );
-    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexes, validationPassed);
-  };
-
-  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value.trim();
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
-      vectorEmbeddings[index].path = "/" + value;
-    } else {
-      vectorEmbeddings[index].path = value;
-    }
-    const error = onVectorEmbeddingPathError(value, index);
-    vectorEmbeddings[index].pathError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value.trim()) || 0;
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].dimensions = value;
-    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].indexType = option.key as never;
-    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    if (vectorEmbedding.indexType === "diskANN") {
-      vectorEmbedding.indexingSearchListSize = 100;
-    } else {
-      vectorEmbedding.indexingSearchListSize = undefined;
-    }
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onQuantizationByteSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value.trim()) || 0;
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index].quantizationByteSize = value;
-    vectorEmbeddings[index].quantizationByteSizeError = onQuantizationByteSizeError(value);
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onIndexingSearchListSizeChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value.trim()) || 0;
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index].indexingSearchListSize = value;
-    vectorEmbeddings[index].indexingSearchListSizeError = onIndexingSearchListSizeError(value);
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  // TODO: uncomment after Ignite
-  // DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
-  // const onDiskANNShardKeyChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-  //   const value = event.target.value.trim();
-  //   const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-  //   if (!vectorEmbeddings[index]?.diskANNShardKey && !value.startsWith("/")) {
-  //     vectorEmbeddings[index].diskANNShardKey = "/" + value;
-  //   } else {
-  //     vectorEmbeddings[index].diskANNShardKey = value;
-  //   }
-  //   const error = onDiskANNShardKeyError(value);
-  //   vectorEmbeddings[index].diskANNShardKeyError = error;
-  //   setVectorEmbeddingPolicyData(vectorEmbeddings);
-  // }
-
-  const onVectorEmbeddingPolicyChange = (
-    index: number,
-    option: IDropdownOption,
-    property: VectorEmbeddingPolicyProperty,
-  ): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index][property] = option.key as never;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onAdd = () => {
-    setVectorEmbeddingPolicyData([
-      ...vectorEmbeddingPolicyData,
-      {
-        path: "",
-        dataType: "float32",
-        distanceFunction: "euclidean",
-        dimensions: 0,
-        indexType: "none",
-        pathError: onVectorEmbeddingPathError(""),
-        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
-      },
-    ]);
-  };
-
-  const onDelete = (index: number) => {
-    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 4 }}>
-      {vectorEmbeddingPolicyData &&
-        vectorEmbeddingPolicyData.length > 0 &&
-        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
-          <CollapsibleSectionComponent
-            disabled={disabled}
-            key={index}
-            isExpandedByDefault={true}
-            title={`Vector embedding ${index + 1}`}
-            showDelete={true}
-            onDelete={() => onDelete(index)}
-          >
-            <Stack horizontal tokens={{ childrenGap: 4 }}>
-              <Stack
-                styles={{
-                  root: {
-                    margin: "0 0 6px 20px !important",
-                    paddingLeft: 20,
-                    width: "80%",
-                    borderLeft: "1px solid",
-                  },
-                }}
-              >
-                <Stack>
-                  <Label disabled={disabled} styles={labelStyles}>
-                    Path
-                  </Label>
-                  <TextField
-                    disabled={disabled}
-                    id={`vector-policy-path-${index + 1}`}
-                    required={true}
-                    placeholder="/vector1"
-                    styles={textFieldStyles}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
-                    value={vectorEmbeddingPolicy.path || ""}
-                    errorMessage={vectorEmbeddingPolicy.pathError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label disabled={disabled} styles={labelStyles}>
-                    Data type
-                  </Label>
-                  <Dropdown
-                    disabled={disabled}
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDataTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.dataType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "dataType")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label disabled={disabled} styles={labelStyles}>
-                    Distance function
-                  </Label>
-                  <Dropdown
-                    disabled={disabled}
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDistanceFunctionOptions()}
-                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label disabled={disabled} styles={labelStyles}>
-                    Dimensions
-                  </Label>
-                  <TextField
-                    disabled={disabled}
-                    id={`vector-policy-dimension-${index + 1}`}
-                    required={true}
-                    styles={textFieldStyles}
-                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      onVectorEmbeddingDimensionsChange(index, event)
-                    }
-                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
-                  />
-                </Stack>
-                {displayIndexes && (
-                  <Stack>
-                    <Label disabled={disabled} styles={labelStyles}>
-                      Index type
-                    </Label>
-                    <Dropdown
-                      disabled={disabled}
-                      required={true}
-                      styles={dropdownStyles}
-                      options={getIndexTypeOptions()}
-                      selectedKey={vectorEmbeddingPolicy.indexType}
-                      onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                        onVectorEmbeddingIndexTypeChange(index, option)
-                      }
-                    ></Dropdown>
-                    <Stack style={{ marginLeft: "10px" }}>
-                      <Label
-                        disabled={
-                          disabled ||
-                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
-                            vectorEmbeddingPolicy.indexType !== "diskANN")
-                        }
-                        styles={labelStyles}
-                      >
-                        Quantization byte size
-                      </Label>
-                      <TextField
-                        disabled={
-                          disabled ||
-                          (vectorEmbeddingPolicy.indexType !== "quantizedFlat" &&
-                            vectorEmbeddingPolicy.indexType !== "diskANN")
-                        }
-                        id={`vector-policy-quantizationByteSize-${index + 1}`}
-                        styles={textFieldStyles}
-                        value={String(vectorEmbeddingPolicy.quantizationByteSize || "")}
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                          onQuantizationByteSizeChange(index, event)
-                        }
-                      />
-                    </Stack>
-                    <Stack style={{ marginLeft: "10px" }}>
-                      <Label disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"} styles={labelStyles}>
-                        Indexing search list size
-                      </Label>
-                      <TextField
-                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
-                        id={`vector-policy-indexingSearchListSize-${index + 1}`}
-                        styles={textFieldStyles}
-                        value={String(vectorEmbeddingPolicy.indexingSearchListSize || "")}
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                          onIndexingSearchListSizeChange(index, event)
-                        }
-                      />
-                    </Stack>
-                    {/*TODO: uncomment after Ignite */}
-                    {/* DiskANNShardKey was removed for Ignite due to backend problems. Leaving this here as it will be reinstated immediately after Ignite
-                    <Stack
-                      style={{ marginLeft: "10px" }}
-                    >
-                      <Label
-                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
-                        styles={labelStyles}
-                      >DiskANN shard key</Label>
-                      <TextField
-                        disabled={disabled || vectorEmbeddingPolicy.indexType !== "diskANN"}
-                        id={`vector-policy-diskANNShardKey-${index + 1}`}
-                        styles={textFieldStyles}
-                        value={String(vectorEmbeddingPolicy.diskANNShardKey || "")}
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                          onDiskANNShardKeyChange(index, event)
-                        }
-                      />
-                    </Stack>
-                    */}
-                  </Stack>
-                )}
-              </Stack>
-            </Stack>
-          </CollapsibleSectionComponent>
-        ))}
-      <DefaultButton
-        disabled={disabled}
-        id={`add-vector-policy`}
-        styles={{ root: { maxWidth: 170, fontSize: 12 } }}
-        onClick={onAdd}
-      >
-        Add vector embedding
-      </DefaultButton>
-    </Stack>
-  );
-};

src/Explorer/Explorer.tsx

@@ -1,7 +1,6 @@
 import * as msal from "@azure/msal-browser";
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
-import { Environment, getEnvironment } from "Common/EnvironmentUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
@@ -10,7 +9,7 @@ import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCop
 import { IGalleryItem } from "Juno/JunoClient";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
+import { acquireTokenWithMsal, getMsalInstance } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
 import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -35,7 +34,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";
@@ -259,8 +258,25 @@ export default class Explorer {
 
   public async openLoginForEntraIDPopUp(): Promise<void> {
     if (userContext.databaseAccount.properties?.documentEndpoint) {
+      const hrefEndpoint = new URL(userContext.databaseAccount.properties.documentEndpoint).href.replace(
+        /\/$/,
+        "/.default",
+      );
+      const msalInstance = await getMsalInstance();
+
       try {
-        const aadToken = await acquireMsalTokenForAccount(userContext.databaseAccount, false);
+        const response = await msalInstance.loginPopup({
+          redirectUri: configContext.msalRedirectURI,
+          scopes: [],
+        });
+        localStorage.setItem("cachedTenantId", response.tenantId);
+        const cachedAccount = msalInstance.getAllAccounts()?.[0];
+        msalInstance.setActiveAccount(cachedAccount);
+        const aadToken = await acquireTokenWithMsal(msalInstance, {
+          forceRefresh: true,
+          scopes: [hrefEndpoint],
+          authority: `${configContext.AAD_ENDPOINT}${localStorage.getItem("cachedTenantId")}`,
+        });
         updateUserContext({ aadToken: aadToken });
         useDataPlaneRbac.setState({ aadTokenUpdated: true });
       } catch (error) {
@@ -278,6 +294,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(
@@ -906,28 +953,25 @@ export default class Explorer {
   }
 
   public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
-  
-    if (userContext.features.enableCloudShell || !useNotebook.getState().isPhoenixFeatures) {
-      this.connectToTerminal(kind);
-      return;
-    }
-  
-    await this.allocateContainer(PoolIdType.DefaultPoolId);
-    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-  
-    if (notebookServerInfo?.notebookServerEndpoint) {
-      this.connectToTerminal(kind);
+    if (useNotebook.getState().isPhoenixFeatures) {
+      await this.allocateContainer(PoolIdType.DefaultPoolId);
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
+        this.connectToNotebookTerminal(kind);
+      } else {
+        useDialog
+          .getState()
+          .showOkModalDialog(
+            "Failed to connect",
+            "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again.",
+          );
+      }
     } else {
-      useDialog
-        .getState()
-        .showOkModalDialog(
-          "Failed to connect",
-          "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again."
-        );
+      this.connectToNotebookTerminal(kind);
     }
   }
 
-  private connectToTerminal(kind: ViewModels.TerminalKind): void {
+  private connectToNotebookTerminal(kind: ViewModels.TerminalKind): void {
     let title: string;
 
     switch (kind) {
@@ -1075,7 +1119,7 @@ export default class Explorer {
     }
   }
 
-  public openUploadItemsPane(): void {
+  public openUploadItemsPanePane(): void {
     useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
   }
   public openExecuteSprocParamsPanel(storedProcedure: StoredProcedure): void {
@@ -1106,7 +1150,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();
 
@@ -1130,15 +1174,11 @@ export default class Explorer {
       await this.initNotebooks(userContext.databaseAccount);
     }
 
-    this.refreshSampleData();
+    await this.refreshSampleData();
   }
 
   public async configureCopilot(): Promise<void> {
-    if (
-      userContext.apiType !== "SQL" ||
-      !userContext.subscriptionId ||
-      ![Environment.Development, Environment.Mpac, Environment.Prod].includes(getEnvironment())
-    ) {
+    if (userContext.apiType !== "SQL" || !userContext.subscriptionId) {
       return;
     }
     const copilotEnabledPromise = getCopilotEnabled();
@@ -1155,27 +1195,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/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -125,13 +125,13 @@ export function createContextCommandBarButtons(
   const buttons: CommandButtonComponentProps[] = [];
 
   if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
-    const label = (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) ? "Open Mongo Shell" : "New Shell";
+    const label = useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        if (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) {
+        if (useNotebook.getState().isShellEnabled) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
@@ -145,7 +145,7 @@ export function createContextCommandBarButtons(
   }
 
   if (
-    (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) &&
+    useNotebook.getState().isShellEnabled &&
     !selectedNodeState.isDatabaseNodeOrNoneSelected() &&
     userContext.apiType === "Cassandra"
   ) {
@@ -167,18 +167,22 @@ export function createContextCommandBarButtons(
 }
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  const buttons: CommandButtonComponentProps[] = [
-    {
-      iconSrc: SettingsIcon,
-      iconAlt: "Settings",
-      onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={container} />),
-      commandButtonLabel: undefined,
-      ariaLabel: "Settings",
-      tooltipText: "Settings",
-      hasPopup: true,
-      disabled: false,
-    },
-  ];
+  const buttons: CommandButtonComponentProps[] =
+    configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
+      ? []
+      : [
+          {
+            iconSrc: SettingsIcon,
+            iconAlt: "Settings",
+            onCommandClick: () =>
+              useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={container} />),
+            commandButtonLabel: undefined,
+            ariaLabel: "Settings",
+            tooltipText: "Settings",
+            hasPopup: true,
+            disabled: false,
+          },
+        ];
 
   const showOpenFullScreen =
     configContext.platform === Platform.Portal && !isRunningOnNationalCloud() && userContext.apiType !== "Gremlin";

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -131,7 +131,6 @@ export class NotificationConsoleComponent extends React.Component<
           </div>
           <div
             className="expandCollapseButton"
-            data-test="NotificationConsole/ExpandCollapseButton"
             role="button"
             tabIndex={0}
             aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
@@ -148,7 +147,7 @@ export class NotificationConsoleComponent extends React.Component<
           height={this.props.isConsoleExpanded ? "auto" : 0}
           onAnimationEnd={this.onConsoleWasExpanded}
         >
-          <div data-test="NotificationConsole/Contents" className="notificationConsoleContents">
+          <div className="notificationConsoleContents">
             <div className="notificationConsoleControls">
               <Dropdown
                 label="Filter:"

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

@@ -74,7 +74,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       aria-expanded={true}
       aria-label="console button collapsed"
       className="expandCollapseButton"
-      data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
@@ -110,7 +109,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   >
     <div
       className="notificationConsoleContents"
-      data-test="NotificationConsole/Contents"
     >
       <div
         className="notificationConsoleControls"
@@ -247,7 +245,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       aria-expanded={true}
       aria-label="console button collapsed"
       className="expandCollapseButton"
-      data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
@@ -283,7 +280,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   >
     <div
       className="notificationConsoleContents"
-      data-test="NotificationConsole/Contents"
     >
       <div
         className="notificationConsoleControls"

src/Explorer/MostRecentActivity/MostRecentActivity.test.ts

@@ -1,13 +1,13 @@
-import { clear, collectionWasOpened, getItems, Type } from "Explorer/MostRecentActivity/MostRecentActivity";
 import { observable } from "knockout";
+import { mostRecentActivity } from "./MostRecentActivity";
 
 describe("MostRecentActivity", () => {
-  const accountName = "some account";
+  const accountId = "some account";
 
-  beforeEach(() => clear(accountName));
+  beforeEach(() => mostRecentActivity.clear(accountId));
 
   it("Has no items at first", () => {
-    expect(getItems(accountName)).toStrictEqual([]);
+    expect(mostRecentActivity.getItems(accountId)).toStrictEqual([]);
   });
 
   it("Can record collections being opened", () => {
@@ -18,9 +18,9 @@ describe("MostRecentActivity", () => {
       databaseId,
     };
 
-    collectionWasOpened(accountName, collection);
+    mostRecentActivity.collectionWasOpened(accountId, collection);
 
-    const activity = getItems(accountName);
+    const activity = mostRecentActivity.getItems(accountId);
     expect(activity).toEqual([
       expect.objectContaining({
         collectionId,
@@ -29,24 +29,58 @@ describe("MostRecentActivity", () => {
     ]);
   });
 
-  it("Does not store duplicate entries", () => {
-    const collectionId = "some collection";
-    const databaseId = "some database";
-    const collection = {
-      id: observable(collectionId),
-      databaseId,
-    };
+  it("Can record notebooks being opened", () => {
+    const name = "some notebook";
+    const path = "some path";
+    const notebook = { name, path };
 
-    collectionWasOpened(accountName, collection);
-    collectionWasOpened(accountName, collection);
+    mostRecentActivity.notebookWasItemOpened(accountId, notebook);
 
-    const activity = getItems(accountName);
-    expect(activity).toEqual([
-      expect.objectContaining({
-        type: Type.OpenCollection,
-        collectionId,
-        databaseId,
-      }),
-    ]);
+    const activity = mostRecentActivity.getItems(accountId);
+    expect(activity).toEqual([expect.objectContaining(notebook)]);
+  });
+
+  it("Filters out duplicates", () => {
+    const name = "some notebook";
+    const path = "some path";
+    const notebook = { name, path };
+    const sameNotebook = { name, path };
+
+    mostRecentActivity.notebookWasItemOpened(accountId, notebook);
+    mostRecentActivity.notebookWasItemOpened(accountId, sameNotebook);
+
+    const activity = mostRecentActivity.getItems(accountId);
+    expect(activity.length).toEqual(1);
+    expect(activity).toEqual([expect.objectContaining(notebook)]);
+  });
+
+  it("Allows for multiple accounts", () => {
+    const name = "some notebook";
+    const path = "some path";
+    const notebook = { name, path };
+
+    const anotherNotebook = { name: "Another " + name, path };
+    const anotherAccountId = "Another " + accountId;
+
+    mostRecentActivity.notebookWasItemOpened(accountId, notebook);
+    mostRecentActivity.notebookWasItemOpened(anotherAccountId, anotherNotebook);
+
+    expect(mostRecentActivity.getItems(accountId)).toEqual([expect.objectContaining(notebook)]);
+    expect(mostRecentActivity.getItems(anotherAccountId)).toEqual([expect.objectContaining(anotherNotebook)]);
+  });
+
+  it("Can store multiple distinct elements, in FIFO order", () => {
+    const name = "some notebook";
+    const path = "some path";
+    const first = { name, path };
+    const second = { name: "Another " + name, path };
+    const third = { name, path: "Another " + path };
+
+    mostRecentActivity.notebookWasItemOpened(accountId, first);
+    mostRecentActivity.notebookWasItemOpened(accountId, second);
+    mostRecentActivity.notebookWasItemOpened(accountId, third);
+
+    const activity = mostRecentActivity.getItems(accountId);
+    expect(activity).toEqual([third, second, first].map(expect.objectContaining));
   });
 });

src/Explorer/MostRecentActivity/MostRecentActivity.ts

@@ -1,10 +1,10 @@
-import { AppStateComponentNames, deleteState, loadState, saveState } from "Shared/AppStatePersistenceUtility";
 import { CollectionBase } from "../../Contracts/ViewModels";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { StorageKey, LocalStorageUtility } from "../../Shared/StorageUtility";
+import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 
 export enum Type {
-  OpenCollection = "OpenCollection",
-  OpenNotebook = "OpenNotebook",
+  OpenCollection,
+  OpenNotebook,
 }
 
 export interface OpenNotebookItem {
@@ -21,174 +21,158 @@ export interface OpenCollectionItem {
 
 type Item = OpenNotebookItem | OpenCollectionItem;
 
-const itemsMaxNumber: number = 5;
+// Update schemaVersion if you are going to change this interface
+interface StoredData {
+  schemaVersion: string;
+  itemsMap: { [accountId: string]: Item[] }; // FIFO
+}
 
 /**
- * Migrate old data to new AppState
+ * Stores most recent activity
  */
-const migrateOldData = () => {
-  if (LocalStorageUtility.hasItem(StorageKey.MostRecentActivity)) {
-    const oldDataSchemaVersion: string = "2";
-    const rawData = LocalStorageUtility.getEntryString(StorageKey.MostRecentActivity);
-    if (rawData) {
-      const oldData = JSON.parse(rawData);
-      if (oldData.schemaVersion === oldDataSchemaVersion) {
-        const itemsMap: Record<string, Item[]> = oldData.itemsMap;
-        Object.keys(itemsMap).forEach((accountId: string) => {
-          const accountName = accountId.split("/").pop();
-          if (accountName) {
-            saveState(
-              {
-                componentName: AppStateComponentNames.MostRecentActivity,
-                globalAccountName: accountName,
-              },
-              itemsMap[accountId].map((item) => {
-                if ((item.type as unknown as number) === 0) {
-                  item.type = Type.OpenCollection;
-                } else if ((item.type as unknown as number) === 1) {
-                  item.type = Type.OpenNotebook;
-                }
-                return item;
-              }),
-            );
-          }
-        });
+class MostRecentActivity {
+  private static readonly schemaVersion: string = "2";
+  private static itemsMaxNumber: number = 5;
+  private storedData: StoredData;
+  constructor() {
+    // Retrieve from local storage
+    if (LocalStorageUtility.hasItem(StorageKey.MostRecentActivity)) {
+      const rawData = LocalStorageUtility.getEntryString(StorageKey.MostRecentActivity);
+
+      if (!rawData) {
+        this.storedData = MostRecentActivity.createEmptyData();
+      } else {
+        try {
+          this.storedData = JSON.parse(rawData);
+        } catch (e) {
+          console.error("Unable to parse stored most recent activity. Use empty data:", rawData);
+          this.storedData = MostRecentActivity.createEmptyData();
+        }
+
+        // If version doesn't match or schema broke, nuke it!
+        if (
+          !this.storedData.hasOwnProperty("schemaVersion") ||
+          this.storedData["schemaVersion"] !== MostRecentActivity.schemaVersion
+        ) {
+          LocalStorageUtility.removeEntry(StorageKey.MostRecentActivity);
+          this.storedData = MostRecentActivity.createEmptyData();
+        }
+      }
+    } else {
+      this.storedData = MostRecentActivity.createEmptyData();
+    }
+
+    for (let p in this.storedData.itemsMap) {
+      this.cleanupItems(p);
+    }
+    this.saveToLocalStorage();
+  }
+
+  private static createEmptyData(): StoredData {
+    return {
+      schemaVersion: MostRecentActivity.schemaVersion,
+      itemsMap: {},
+    };
+  }
+
+  private static isEmpty(object: any) {
+    return Object.keys(object).length === 0 && object.constructor === Object;
+  }
+
+  private saveToLocalStorage() {
+    if (MostRecentActivity.isEmpty(this.storedData.itemsMap)) {
+      if (LocalStorageUtility.hasItem(StorageKey.MostRecentActivity)) {
+        LocalStorageUtility.removeEntry(StorageKey.MostRecentActivity);
+      }
+      // Don't save if empty
+      return;
+    }
+
+    LocalStorageUtility.setEntryString(StorageKey.MostRecentActivity, JSON.stringify(this.storedData));
+  }
+
+  private addItem(accountId: string, newItem: Item): void {
+    // When debugging, accountId is "undefined": most recent activity cannot be saved by account. Uncomment to disable.
+    // if (!accountId) {
+    //   return;
+    // }
+
+    // Remove duplicate
+    MostRecentActivity.removeDuplicate(newItem, this.storedData.itemsMap[accountId]);
+
+    this.storedData.itemsMap[accountId] = this.storedData.itemsMap[accountId] || [];
+    this.storedData.itemsMap[accountId].unshift(newItem);
+    this.cleanupItems(accountId);
+    this.saveToLocalStorage();
+  }
+
+  public getItems(accountId: string): Item[] {
+    return this.storedData.itemsMap[accountId] || [];
+  }
+
+  public collectionWasOpened(accountId: string, { id, databaseId }: Pick<CollectionBase, "id" | "databaseId">) {
+    const collectionId = id();
+    this.addItem(accountId, {
+      type: Type.OpenCollection,
+      databaseId,
+      collectionId,
+    });
+  }
+
+  public notebookWasItemOpened(accountId: string, { name, path }: Pick<NotebookContentItem, "name" | "path">) {
+    this.addItem(accountId, {
+      type: Type.OpenNotebook,
+      name,
+      path,
+    });
+  }
+
+  public clear(accountId: string): void {
+    delete this.storedData.itemsMap[accountId];
+    this.saveToLocalStorage();
+  }
+
+  /**
+   * Find items by doing strict comparison and remove from array if duplicate is found
+   * @param item
+   */
+  private static removeDuplicate(item: Item, itemsArray: Item[]): void {
+    if (!itemsArray) {
+      return;
+    }
+
+    let index = -1;
+    for (let i = 0; i < itemsArray.length; i++) {
+      const currentItem = itemsArray[i];
+      if (JSON.stringify(currentItem) === JSON.stringify(item)) {
+        index = i;
+        break;
       }
     }
 
-    // Remove old data
-    LocalStorageUtility.removeEntry(StorageKey.MostRecentActivity);
-  }
-};
-
-const addItem = (accountName: string, newItem: Item): void => {
-  // When debugging, accountId is "undefined": most recent activity cannot be saved by account. Uncomment to disable.
-  // if (!accountId) {
-  //   return;
-  // }
-
-  let items =
-    (loadState({
-      componentName: AppStateComponentNames.MostRecentActivity,
-      globalAccountName: accountName,
-    }) as Item[]) || [];
-
-  // Remove duplicate
-  items = removeDuplicate(newItem, items);
-
-  items.unshift(newItem);
-  items = cleanupItems(items, accountName);
-  saveState(
-    {
-      componentName: AppStateComponentNames.MostRecentActivity,
-      globalAccountName: accountName,
-    },
-    items,
-  );
-};
-
-export const getItems = (accountName: string): Item[] => {
-  if (!accountName) {
-    return [];
-  }
-
-  return (
-    (loadState({
-      componentName: AppStateComponentNames.MostRecentActivity,
-      globalAccountName: accountName,
-    }) as Item[]) || []
-  );
-};
-
-export const collectionWasOpened = (
-  accountName: string,
-  { id, databaseId }: Pick<CollectionBase, "id" | "databaseId">,
-) => {
-  if (accountName === undefined) {
-    return;
-  }
-
-  const collectionId = id();
-  addItem(accountName, {
-    type: Type.OpenCollection,
-    databaseId,
-    collectionId,
-  });
-};
-
-export const clear = (accountName: string): void => {
-  if (!accountName) {
-    return;
-  }
-
-  deleteState({
-    componentName: AppStateComponentNames.MostRecentActivity,
-    globalAccountName: accountName,
-  });
-};
-
-// Sort object by key
-const sortObjectKeys = (unordered: Record<string, unknown>): Record<string, unknown> => {
-  return Object.keys(unordered)
-    .sort()
-    .reduce((obj: Record<string, unknown>, key: string) => {
-      obj[key] = unordered[key];
-      return obj;
-    }, {});
-};
-
-/**
- * Find items by doing strict comparison and remove from array if duplicate is found.
- * Modifies the array.
- * @param item
- * @param itemsArray
- * @returns new array
- */
-const removeDuplicate = (item: Item, itemsArray: Item[]): Item[] => {
-  if (!itemsArray) {
-    return itemsArray;
-  }
-
-  const result: Item[] = [...itemsArray];
-
-  let index = -1;
-  for (let i = 0; i < result.length; i++) {
-    const currentItem = result[i];
-
-    if (
-      JSON.stringify(sortObjectKeys(currentItem as unknown as Record<string, unknown>)) ===
-      JSON.stringify(sortObjectKeys(item as unknown as Record<string, unknown>))
-    ) {
-      index = i;
-      break;
+    if (index !== -1) {
+      itemsArray.splice(index, 1);
     }
   }
 
-  if (index !== -1) {
-    result.splice(index, 1);
+  /**
+   * Remove unknown types
+   * Limit items to max number
+   */
+  private cleanupItems(accountId: string): void {
+    if (!this.storedData.itemsMap.hasOwnProperty(accountId)) {
+      return;
+    }
+
+    const itemsArray = this.storedData.itemsMap[accountId]
+      .filter((item) => item.type in Type)
+      .slice(0, MostRecentActivity.itemsMaxNumber);
+    if (itemsArray.length === 0) {
+      delete this.storedData.itemsMap[accountId];
+    } else {
+      this.storedData.itemsMap[accountId] = itemsArray;
+    }
   }
+}
 
-  return result;
-};
-
-/**
- * Remove unknown types
- * Limit items to max number
- * Modifies the array.
- */
-const cleanupItems = (items: Item[], accountName: string): Item[] => {
-  if (accountName === undefined) {
-    return [];
-  }
-
-  const itemsArray = items.filter((item) => item.type in Type).slice(0, itemsMaxNumber);
-  if (itemsArray.length === 0) {
-    deleteState({
-      componentName: AppStateComponentNames.MostRecentActivity,
-      globalAccountName: accountName,
-    });
-  }
-  return itemsArray;
-};
-
-migrateOldData();
+export const mostRecentActivity = new MostRecentActivity();

src/Explorer/Notebook/useNotebook.ts

@@ -127,7 +127,7 @@ 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 = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
       const response = await fetch(disallowedLocationsUri, {

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,5 +1,4 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
-import { configContext, Platform } from "ConfigContext";
 import { useDatabases } from "Explorer/useDatabases";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
@@ -57,19 +56,6 @@ function openCollectionTab(
         continue;
       }
 
-      if (
-        configContext.platform === Platform.Fabric &&
-        !(
-          // whitelist the tab kinds that are allowed to be opened in Fabric
-          (
-            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

@@ -17,15 +17,11 @@ import {
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
-import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
-import {
-  FullTextPoliciesComponent,
-  getFullTextLanguageOptions,
-} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
-import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
+import { SubscriptionType } from "Contracts/SubscriptionType";
+import { AddVectorEmbeddingPolicyForm } from "Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -34,12 +30,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
-import {
-  isCapabilityEnabled,
-  isFullTextSearchEnabled,
-  isServerlessAccount,
-  isVectorSearchEnabled,
-} from "Utils/CapabilityUtils";
+import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
@@ -118,9 +109,6 @@ export interface AddCollectionPanelState {
   vectorIndexingPolicy: DataModels.VectorIndex[];
   vectorEmbeddingPolicy: DataModels.VectorEmbedding[];
   vectorPolicyValidated: boolean;
-  fullTextPolicy: DataModels.FullTextPolicy;
-  fullTextIndexes: DataModels.FullTextIndex[];
-  fullTextPolicyValidated: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -137,7 +125,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       createNewDatabase:
         userContext.apiType !== "Tables" && configContext.platform !== Platform.Fabric && !this.props.databaseId,
       newDatabaseId: props.isQuickstart ? this.getSampleDBName() : "",
-      isSharedThroughputChecked: getNewDatabaseSharedThroughputDefault(),
+      isSharedThroughputChecked: this.getSharedThroughputDefault(),
       selectedDatabaseId:
         userContext.apiType === "Tables" ? CollectionCreation.TablesAPIDefaultDatabase : this.props.databaseId,
       collectionId: props.isQuickstart ? `Sample${getCollectionName()}` : "",
@@ -159,9 +147,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       vectorEmbeddingPolicy: [],
       vectorIndexingPolicy: [],
       vectorPolicyValidated: true,
-      fullTextPolicy: { defaultLanguage: getFullTextLanguageOptions()[0].key as never, fullTextPaths: [] },
-      fullTextIndexes: [],
-      fullTextPolicyValidated: true,
     };
   }
 
@@ -819,9 +804,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">
@@ -865,7 +863,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
@@ -893,9 +890,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               >
                 <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
                   <Stack styles={{ root: { paddingLeft: 40 } }}>
-                    <VectorEmbeddingPoliciesComponent
-                      vectorEmbeddings={this.state.vectorEmbeddingPolicy}
-                      vectorIndexes={this.state.vectorIndexingPolicy}
+                    <AddVectorEmbeddingPolicyForm
+                      vectorEmbedding={this.state.vectorEmbeddingPolicy}
+                      vectorIndex={this.state.vectorIndexingPolicy}
                       onVectorEmbeddingChange={(
                         vectorEmbeddingPolicy: DataModels.VectorEmbedding[],
                         vectorIndexingPolicy: DataModels.VectorIndex[],
@@ -909,34 +906,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {this.shouldShowFullTextSearchParameters() && (
-            <Stack>
-              <CollapsibleSectionComponent
-                title="Container Full Text Search Policy"
-                isExpandedByDefault={false}
-                onExpand={() => {
-                  this.scrollToSection("collapsibleFullTextPolicySectionContent");
-                }}
-                //TODO: uncomment when learn more text becomes available
-                // tooltipContent={this.getContainerFullTextPolicyTooltipContent()}
-              >
-                <Stack id="collapsibleFullTextPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Stack styles={{ root: { paddingLeft: 40 } }}>
-                    <FullTextPoliciesComponent
-                      fullTextPolicy={this.state.fullTextPolicy}
-                      onFullTextPathChange={(
-                        fullTextPolicy: DataModels.FullTextPolicy,
-                        fullTextIndexes: DataModels.FullTextIndex[],
-                        fullTextPolicyValidated: boolean,
-                      ) => {
-                        this.setState({ fullTextPolicy, fullTextIndexes, fullTextPolicyValidated });
-                      }}
-                    />
-                  </Stack>
-                </Stack>
-              </CollapsibleSectionComponent>
-            </Stack>
-          )}
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
@@ -1169,6 +1138,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return userContext.databaseAccount?.properties?.enableFreeTier;
   }
 
+  private getSharedThroughputDefault(): boolean {
+    return userContext.subscriptionType !== SubscriptionType.EA && !isServerlessAccount();
+  }
+
   private getFreeTierIndexingText(): string {
     return this.state.enableIndexing
       ? "All properties in your documents will be indexed by default for flexible and efficient queries."
@@ -1218,16 +1191,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>
@@ -1246,19 +1215,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
-  //TODO: uncomment when learn more text becomes available
-  // private getContainerFullTextPolicyTooltipContent(): JSX.Element {
-  //   return (
-  //     <Text variant="small">
-  //       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-  //       magna aliqua.{" "}
-  //       <Link target="_blank" href="https://aka.ms/CosmosFullTextSearch">
-  //         Learn more
-  //       </Link>
-  //     </Text>
-  //   );
-  // }
-
   private shouldShowCollectionThroughputInput(): boolean {
     if (isServerlessAccount()) {
       return false;
@@ -1322,10 +1278,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
   }
 
-  private shouldShowFullTextSearchParameters() {
-    return isFullTextSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
-  }
-
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {
     if (this.state.uniqueKeys?.length === 0) {
       return undefined;
@@ -1382,16 +1334,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    if (this.shouldShowVectorSearchParameters()) {
-      if (!this.state.vectorPolicyValidated) {
-        this.setState({ errorMessage: "Please fix errors in container vector policy" });
-        return false;
-      }
-
-      if (!this.state.fullTextPolicyValidated) {
-        this.setState({ errorMessage: "Please fix errors in container full text search polilcy" });
-        return false;
-      }
+    if (this.shouldShowVectorSearchParameters() && !this.state.vectorPolicyValidated) {
+      this.setState({ errorMessage: "Please fix errors in container vector policy" });
+      return false;
     }
 
     return true;
@@ -1482,10 +1427,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       };
     }
 
-    if (this.shouldShowFullTextSearchParameters()) {
-      indexingPolicy.fullTextIndexes = this.state.fullTextIndexes;
-    }
-
     const telemetryData = {
       database: {
         id: databaseId,
@@ -1545,7 +1486,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       uniqueKeyPolicy,
       createMongoWildcardIndex: this.state.createMongoWildCardIndex,
       vectorEmbeddingPolicy,
-      fullTextPolicy: this.state.fullTextPolicy,
     };
 
     this.setState({ isExecuting: true });

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -1,5 +1,4 @@
 import { Checkbox, Stack, Text, TextField } from "@fluentui/react";
-import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
@@ -49,7 +48,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
 
   const databaseLevelThroughputTooltipText = `Provisioned throughput at the ${databaseLabel} level will be shared across all ${collectionsLabel} within the ${databaseLabel}.`;
   const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState<boolean>(
-    getNewDatabaseSharedThroughputDefault(),
+    subscriptionType !== SubscriptionType.EA && !isServerlessAccount(),
   );
   const [formErrors, setFormErrors] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);

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

@@ -65,7 +65,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         horizontal={true}
       >
         <StyledCheckboxBase
-          checked={false}
+          checked={true}
           label="Provision throughput"
           onChange={[Function]}
           styles={
@@ -90,6 +90,14 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         </InfoTooltip>
       </Stack>
     </Stack>
+    <ThroughputInput
+      isDatabase={true}
+      isSharded={true}
+      onCostAcknowledgeChange={[Function]}
+      setIsAutoscale={[Function]}
+      setIsThroughputCapExceeded={[Function]}
+      setThroughputValue={[Function]}
+    />
   </div>
 </RightPaneForm>
 `;

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -124,7 +124,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     message:
       "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
   };
-  const confirmDatabase = `Confirm by typing the ${getDatabaseName()} id (name)`;
+  const confirmDatabase = `Confirm by typing the ${getDatabaseName()} id`;
   const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${getDatabaseName()}?`;
   return (
     <RightPaneForm {...props}>
@@ -132,7 +132,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
       <div className="panelMainContent">
         <div className="confirmDeleteInput">
           <span className="mandatoryStar">* </span>
-          <Text variant="small">{confirmDatabase}</Text>
+          <Text variant="small">Confirm by typing the {getDatabaseName()} id</Text>
           <TextField
             id="confirmDatabaseId"
             data-test="Input:confirmDatabaseId"

src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx

@@ -1,156 +0,0 @@
-import {
-  Button,
-  Checkbox,
-  CheckboxOnChangeData,
-  InputOnChangeData,
-  makeStyles,
-  SearchBox,
-  SearchBoxChangeEvent,
-  Text,
-} from "@fluentui/react-components";
-import { configContext } from "ConfigContext";
-import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
-import { CosmosFluentProvider, getPlatformTheme } from "Explorer/Theme/ThemeUtil";
-import React from "react";
-import { useSidePanel } from "../../../hooks/useSidePanel";
-
-const useColumnSelectionStyles = makeStyles({
-  paneContainer: {
-    height: "100%",
-    display: "flex",
-  },
-  searchBox: {
-    width: "100%",
-  },
-  checkboxContainer: {
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-  },
-  checkboxLabel: {
-    padding: "4px 8px",
-    marginBottom: "0px",
-  },
-});
-export interface TableColumnSelectionPaneProps {
-  columnDefinitions: ColumnDefinition[];
-  selectedColumnIds: string[];
-  onSelectionChange: (newSelectedColumnIds: string[]) => void;
-  defaultSelection: string[];
-}
-
-export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> = ({
-  columnDefinitions,
-  selectedColumnIds,
-  onSelectionChange,
-  defaultSelection,
-}: TableColumnSelectionPaneProps): JSX.Element => {
-  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
-  const originalSelectedColumnIds = React.useMemo(() => selectedColumnIds, []);
-  const [columnSearchText, setColumnSearchText] = React.useState<string>("");
-  const [newSelectedColumnIds, setNewSelectedColumnIds] = React.useState<string[]>(originalSelectedColumnIds);
-  const styles = useColumnSelectionStyles();
-
-  const selectedColumnIdsSet = new Set(newSelectedColumnIds);
-  const onCheckedValueChange = (id: string, checkedData?: CheckboxOnChangeData): void => {
-    const checked = checkedData?.checked;
-    if (checked === "mixed" || checked === undefined) {
-      return;
-    }
-
-    if (checked) {
-      selectedColumnIdsSet.add(id);
-    } else {
-      /* selectedColumnIds may contain ids that are not in columnDefinitions, because the selected
-       * ids may have been loaded from persistence, but don't exist in the current retrieved documents.
-       */
-
-      if (
-        Array.from(selectedColumnIdsSet).filter((id) => columnDefinitions.find((def) => def.id === id) !== undefined)
-          .length === 1 &&
-        selectedColumnIdsSet.has(id)
-      ) {
-        // Don't allow unchecking the last column
-        return;
-      }
-      selectedColumnIdsSet.delete(id);
-    }
-    setNewSelectedColumnIds([...selectedColumnIdsSet]);
-  };
-
-  const onSave = (): void => {
-    onSelectionChange(newSelectedColumnIds);
-    closeSidePanel();
-  };
-
-  const onSearchChange: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) =>
-    // eslint-disable-next-line react/prop-types
-    setColumnSearchText(data.value);
-
-  const theme = getPlatformTheme(configContext.platform);
-
-  // Filter and move partition keys to the top
-  const columnDefinitionList = columnDefinitions
-    .filter((def) => !columnSearchText || def.label.toLowerCase().includes(columnSearchText.toLowerCase()))
-    .sort((a, b) => {
-      const ID = "id";
-      // "id" always at the top, then partition keys, then everything else sorted
-      if (a.id === ID) {
-        return b.id === ID ? 0 : -1;
-      } else if (b.id === ID) {
-        return a.id === ID ? 0 : 1;
-      } else if (a.isPartitionKey && !b.isPartitionKey) {
-        return -1;
-      } else if (b.isPartitionKey && !a.isPartitionKey) {
-        return 1;
-      } else {
-        return a.label.localeCompare(b.label);
-      }
-    });
-
-  return (
-    <div className={styles.paneContainer}>
-      <CosmosFluentProvider>
-        <div className="panelFormWrapper">
-          <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
-            <Text>Select which columns to display in your view of items in your container.</Text>
-            <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
-              <SearchBox
-                className={styles.searchBox}
-                value={columnSearchText}
-                onChange={onSearchChange}
-                placeholder="Search fields"
-              />
-            </div>
-
-            <div className={styles.checkboxContainer}>
-              {columnDefinitionList.map((columnDefinition) => (
-                <Checkbox
-                  style={{ marginBottom: 0 }}
-                  key={columnDefinition.id}
-                  label={{
-                    className: styles.checkboxLabel,
-                    children: `${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`,
-                  }}
-                  checked={selectedColumnIdsSet.has(columnDefinition.id)}
-                  onChange={(_, data) => onCheckedValueChange(columnDefinition.id, data)}
-                />
-              ))}
-            </div>
-            <Button appearance="secondary" size="small" onClick={() => setNewSelectedColumnIds(defaultSelection)}>
-              Reset
-            </Button>
-          </div>
-          <div className="panelFooter" style={{ display: "flex", gap: theme.spacingHorizontalS }}>
-            <Button appearance="primary" onClick={onSave}>
-              Save
-            </Button>
-            <Button appearance="secondary" onClick={closeSidePanel}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </CosmosFluentProvider>
-    </div>
-  );
-};

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
 import React from "react";
-import { VectorEmbeddingPoliciesComponent } from "./VectorEmbeddingPoliciesComponent";
+import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
 
 const mockVectorEmbedding: VectorEmbedding[] = [
   { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
@@ -17,9 +17,9 @@ describe("AddVectorEmbeddingPolicyForm", () => {
 
   beforeEach(() => {
     component = render(
-      <VectorEmbeddingPoliciesComponent
-        vectorEmbeddings={mockVectorEmbedding}
-        vectorIndexes={mockVectorIndex}
+      <AddVectorEmbeddingPolicyForm
+        vectorEmbedding={mockVectorEmbedding}
+        vectorIndex={mockVectorIndex}
         onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
       />,
     );
@@ -36,7 +36,7 @@ describe("AddVectorEmbeddingPolicyForm", () => {
   });
 
   test("calls onDelete when delete button is clicked", async () => {
-    const deleteButton = component.container.querySelector("#delete-Vector-embedding-1");
+    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
     fireEvent.click(deleteButton);
     expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
     expect(screen.queryByText("Vector embedding 1")).toBeNull();
@@ -49,19 +49,21 @@ describe("AddVectorEmbeddingPolicyForm", () => {
 
   test("validates input correctly", async () => {
     fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
-    await waitFor(() => expect(screen.getByText("Path should not be empty")).toBeInTheDocument(), {
+    await waitFor(() => expect(screen.getByText("Vector embedding path should not be empty")).toBeInTheDocument(), {
       timeout: 1500,
     });
     await waitFor(
       () =>
-        expect(screen.getByText("Dimension must be greater than 0 and less than or equal 4096")).toBeInTheDocument(),
+        expect(
+          screen.getByText("Vector embedding dimension must be greater than 0 and less than or equal 4096"),
+        ).toBeInTheDocument(),
       {
         timeout: 1500,
       },
     );
     fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
     fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
-    await waitFor(() => expect(screen.queryByText("Path should not be empty")).toBeNull(), {
+    await waitFor(() => expect(screen.queryByText("Vector embedding path should not be empty")).toBeNull(), {
       timeout: 1500,
     });
     await waitFor(

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx

@@ -0,0 +1,300 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  IconButton,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import {
+  getDataTypeOptions,
+  getDistanceFunctionOptions,
+  getIndexTypeOptions,
+} from "Explorer/Panes/VectorSearchPanel/VectorSearchUtils";
+import React, { FunctionComponent, useState } from "react";
+
+export interface IAddVectorEmbeddingPolicyFormProps {
+  vectorEmbedding: VectorEmbedding[];
+  vectorIndex: VectorIndex[];
+  onVectorEmbeddingChange: (
+    vectorEmbeddings: VectorEmbedding[],
+    vectorIndexingPolicies: VectorIndex[],
+    validationPassed: boolean,
+  ) => void;
+}
+
+export interface VectorEmbeddingPolicyData {
+  path: string;
+  dataType: VectorEmbedding["dataType"];
+  distanceFunction: VectorEmbedding["distanceFunction"];
+  dimensions: number;
+  indexType: VectorIndex["type"] | "none";
+  pathError: string;
+  dimensionsError: string;
+}
+
+type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const AddVectorEmbeddingPolicyForm: FunctionComponent<IAddVectorEmbeddingPolicyFormProps> = ({
+  vectorEmbedding,
+  vectorIndex,
+  onVectorEmbeddingChange,
+}): JSX.Element => {
+  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Vector embedding path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      vectorEmbeddingPolicyData?.find(
+        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+          dataIndex !== index && vectorEmbedding.path === path,
+      )
+    ) {
+      error = "Vector embedding path is already defined";
+    }
+    return error;
+  };
+
+  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+    let error = "";
+    if (dimension <= 0 || dimension > 4096) {
+      error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
+    }
+    if (indexType === "flat" && dimension > 505) {
+      error = "Maximum allowed dimension for flat index is 505";
+    }
+    return error;
+  };
+
+  const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
+    const mergedData: VectorEmbeddingPolicyData[] = [];
+    vectorEmbedding.forEach((embedding) => {
+      const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
+      mergedData.push({
+        ...embedding,
+        indexType: matchingIndex?.type || "none",
+        pathError: onVectorEmbeddingPathError(embedding.path),
+        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+      });
+    });
+    return mergedData;
+  };
+
+  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
+    initializeData(vectorEmbedding, vectorIndex),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [vectorEmbeddingPolicyData]);
+
+  const propagateData = () => {
+    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+      dataType: policy.dataType,
+      dimensions: policy.dimensions,
+      distanceFunction: policy.distanceFunction,
+      path: policy.path,
+    }));
+    const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
+      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+      .map(
+        (policy) =>
+          ({
+            path: policy.path,
+            type: policy.indexType,
+          }) as VectorIndex,
+      );
+    const validationPassed = vectorEmbeddingPolicyData.every(
+      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+    );
+    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
+  };
+
+  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
+      vectorEmbeddings[index].path = "/" + value;
+    } else {
+      vectorEmbeddings[index].path = value;
+    }
+    const error = onVectorEmbeddingPathError(value, index);
+    vectorEmbeddings[index].pathError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].dimensions = value;
+    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].indexType = option.key as never;
+    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingPolicyChange = (
+    index: number,
+    option: IDropdownOption,
+    property: VectorEmbeddingPolicyProperty,
+  ): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index][property] = option.key as never;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onAdd = () => {
+    setVectorEmbeddingPolicyData([
+      ...vectorEmbeddingPolicyData,
+      {
+        path: "",
+        dataType: "float32",
+        distanceFunction: "euclidean",
+        dimensions: 0,
+        indexType: "none",
+        pathError: onVectorEmbeddingPathError(""),
+        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      {vectorEmbeddingPolicyData.length > 0 &&
+        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+          <CollapsibleSectionComponent key={index} isExpandedByDefault={true} title={`Vector embedding ${index + 1}`}>
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Path</Label>
+                  <TextField
+                    id={`vector-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/vector1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
+                    value={vectorEmbeddingPolicy.path || ""}
+                    errorMessage={vectorEmbeddingPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Data type</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDataTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.dataType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "dataType")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Distance function</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDistanceFunctionOptions()}
+                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Dimensions</Label>
+                  <TextField
+                    id={`vector-policy-dimension-${index + 1}`}
+                    required={true}
+                    styles={textFieldStyles}
+                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      onVectorEmbeddingDimensionsChange(index, event)
+                    }
+                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Index type</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getIndexTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.indexType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingIndexTypeChange(index, option)
+                    }
+                  ></Dropdown>
+                </Stack>
+              </Stack>
+              <IconButton
+                id={`delete-vector-policy-${index + 1}`}
+                iconProps={{ iconName: "Delete" }}
+                style={{ height: 27, margin: "auto" }}
+                onClick={() => onDelete(index)}
+              />
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+        Add vector embedding
+      </DefaultButton>
+    </Stack>
+  );
+};

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

@@ -106,7 +106,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           horizontal={true}
         >
           <StyledCheckboxBase
-            checked={false}
+            checked={true}
             label="Share throughput across containers"
             onChange={[Function]}
             styles={
@@ -137,6 +137,14 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             />
           </StyledTooltipHostBase>
         </Stack>
+        <ThroughputInput
+          isDatabase={true}
+          isSharded={true}
+          onCostAcknowledgeChange={[Function]}
+          setIsAutoscale={[Function]}
+          setIsThroughputCapExceeded={[Function]}
+          setThroughputValue={[Function]}
+        />
       </Stack>
       <Separator
         className="panelSeparator"
@@ -255,14 +263,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         </CustomizedDefaultButton>
       </Stack>
     </Stack>
-    <ThroughputInput
-      isDatabase={false}
-      isSharded={true}
-      onCostAcknowledgeChange={[Function]}
-      setIsAutoscale={[Function]}
-      setIsThroughputCapExceeded={[Function]}
-      setThroughputValue={[Function]}
-    />
     <Stack>
       <Stack
         horizontal={true}
@@ -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/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -361,11 +361,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             <span
               className="css-113"
             >
-              Confirm by typing the Database id (name)
+              Confirm by typing the 
+              Database
+               id
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Confirm by typing the Database id (name)"
+            ariaLabel="Confirm by typing the Database id"
             autoFocus={true}
             data-test="Input:confirmDatabaseId"
             id="confirmDatabaseId"
@@ -380,7 +382,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Confirm by typing the Database id (name)"
+              ariaLabel="Confirm by typing the Database id"
               autoFocus={true}
               data-test="Input:confirmDatabaseId"
               deferredValidationTime={200}
@@ -675,7 +677,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <input
                       aria-invalid={false}
-                      aria-label="Confirm by typing the Database id (name)"
+                      aria-label="Confirm by typing the Database id"
                       autoFocus={true}
                       className="ms-TextField-field field-117"
                       data-test="Input:confirmDatabaseId"

src/Explorer/QueryCopilot/CopilotCarousel.tsx

@@ -171,7 +171,7 @@ export const QueryCopilotCarousel: React.FC<QueryCopilotCarouselProps> = ({
               the query builder.
             </Text>
             <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 24 }}>Database Id</Text>
-            <Text style={{ fontSize: 13 }}>CopilotSampleDB</Text>
+            <Text style={{ fontSize: 13 }}>CopilotSampleDb</Text>
             <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 16 }}>Database throughput (autoscale)</Text>
             <Text style={{ fontSize: 13 }}>Autoscale</Text>
             <Text style={{ fontSize: 13, fontWeight: 600, marginTop: 16 }}>Database Max RU/s</Text>