Remove dev endpoint

.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

.editorconfig

@@ -1,10 +0,0 @@
-# NOTE: Prettier reads EditorConfig settings, so be careful adjusting settings here and assuming they'll only affect your editor ;).
-
-# top-most EditorConfig file
-root = true
-
-[*.yml]
-indent_size = 2
-
-[*.{js,jsx,ts,tsx}]
-indent_size = 2

.eslintignore

@@ -1,5 +1,3 @@
-playwright.config.ts
-
 **/node_modules/
 src/**/__mocks__/**/*
 dist/
@@ -23,6 +21,8 @@ src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
+src/Controls/Heatmap/Heatmap.test.ts
+src/Controls/Heatmap/Heatmap.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -89,7 +89,10 @@ src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
 src/Explorer/Tabs/ConflictsTab.ts
 src/Explorer/Tabs/DatabaseSettingsTab.ts
+src/Explorer/Tabs/DocumentsTab.test.ts
+src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
+src/Explorer/Tabs/MongoDocumentsTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
 src/Explorer/Tabs/TabComponents.ts
@@ -125,7 +128,7 @@ src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
-src/Explorer/Controls/TreeComponent/LegacyTreeComponent.tsx
+src/Explorer/Controls/TreeComponent/TreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx

.eslintrc.js

@@ -32,12 +32,6 @@ module.exports = {
       extends: ["plugin:jest/recommended"],
       plugins: ["jest"],
     },
-    {
-      files: ["src/Explorer/ContainerCopy/**/*.{test,spec}.{ts,tsx}"],
-      rules: {
-        "@typescript-eslint/no-explicit-any": "off",
-      },
-    },
   ],
   rules: {
     "no-console": ["error", { allow: ["error", "warn", "dir"] }],

.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

@@ -8,9 +8,6 @@ on:
   pull_request:
     branches:
       - master
-permissions:
-  id-token: write
-  contents: read
 jobs:
   codemetrics:
     runs-on: ubuntu-latest
@@ -83,7 +80,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 +89,84 @@ 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 }}
+  endtoendemulator:
+    name: "End To End Emulator Tests"
+    # Temporarily disabled. This test needs to be rewritten in playwright
+    if: false
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - uses: southpolesteve/cosmos-emulator-github-action@v1
+      - name: End to End Tests
+        run: |
+          npm ci
+          npm start &
+          npm run wait-for-server
+          npx jest -c ./jest.config.e2e.js --detectOpenHandles test/sql/container.spec.ts
+        shell: bash
+        env:
+          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
+          PLATFORM: "Emulator"
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: screenshots
+          path: failed-*
+  endtoend:
+    name: "E2E"
+    runs-on: ubuntu-latest
+    env:
+      NODE_TLS_REJECT_UNAUTHORIZED: 0
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    strategy:
+      fail-fast: false
+      matrix:
+        test-file:
+          - ./test/cassandra/container.spec.ts
+          - ./test/graph/container.spec.ts
+          - ./test/sql/container.spec.ts
+          - ./test/mongo/container.spec.ts
+          - ./test/mongo/container32.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          # - ./test/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
+          - ./test/sql/resourceToken.spec.ts
+          - ./test/tables/container.spec.ts
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - run: npm ci
+      - run: npm start &
+      - run: npm run wait-for-server
+      - name: ${{ matrix['test-file'] }}
+        run: |
+          # Run tests up to three times
+          for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
+        shell: bash
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: screenshots
+          path: screenshots/
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
@@ -115,21 +176,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,115 +200,19 @@ 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"
-
-  playwright-tests:
-    name: "Run Playwright Tests (Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }})"
-    runs-on: ubuntu-latest
-    env:
-      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-    strategy:
-      fail-fast: false
-      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
-        shardTotal: [16]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
-      - run: npm ci
-      - run: npx playwright install --with-deps
-      - name: "Az CLI login"
-        uses: Azure/login@v2
-        with:
-          client-id: ${{ secrets.E2E_TESTS_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-      # We can't use MSAL within playwright so we acquire tokens prior to running the tests
-      - name: "Acquire RBAC tokens for test accounts"
-        uses: azure/cli@v2
-        with:
-          azcliversion: latest
-          inlineScript: |
-            NOSQL_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$NOSQL_TESTACCOUNT_TOKEN"
-            echo NOSQL_TESTACCOUNT_TOKEN=$NOSQL_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            NOSQL_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-sql-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$NOSQL_READONLY_TESTACCOUNT_TOKEN"
-            echo NOSQL_READONLY_TESTACCOUNT_TOKEN=$NOSQL_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            TABLE_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-tables.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$TABLE_TESTACCOUNT_TOKEN"
-            echo TABLE_TESTACCOUNT_TOKEN=$TABLE_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
-            echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-      - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
-      - name: Upload blob report to GitHub Actions Artifacts
-        if: ${{ !cancelled() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: blob-report-${{ matrix.shardIndex }}
-          path: blob-report
-          retention-days: 1
-
-  merge-playwright-reports:
-    name: "Merge Playwright Reports"
-    # Merge reports after playwright-tests, even if some shards have failed
-    if: ${{ !cancelled() }}
-    needs: [playwright-tests]
-
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: all-blob-reports
-          pattern: blob-report-*
-          merge-multiple: true
-
-      - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
-
-      - name: Upload HTML report
-        uses: actions/upload-artifact@v4
-        with:
-          name: html-report--attempt-${{ github.run_attempt }}
-          path: playwright-report
-          retention-days: 14
+          path: "*.nupkg"

.github/workflows/cleanup.yml

@@ -9,10 +9,6 @@ on:
     # Once every hour
     - cron: "0 15 * * *"
 
-permissions:
-  id-token: write
-  contents: read
-
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   # This workflow contains a single job called "build"
@@ -20,17 +16,10 @@ jobs:
     name: "Cleanup Test Database Accounts"
     runs-on: ubuntu-latest
     env:
-      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
     steps:
       - uses: actions/checkout@v2
-
-      - name: "Az CLI login"
-        uses: azure/login@v1
-        with:
-          client-id: ${{ secrets.E2E_TESTS_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-
       - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:

.gitignore

@@ -16,8 +16,4 @@ Contracts/*
 .env
 failure.png
 screenshots/*
-GettingStarted-ignore*.ipynb
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
+GettingStarted-ignore*.ipynb

.npmrc

@@ -1,4 +1 @@
-save-exact=true
-
-# Ignore peer dependency conflicts
-force=true # TODO: Remove this when we update to React 17 or higher!
+save-exact=true

DataExplorer.nuspec

@@ -19,6 +19,6 @@
     </frameworkAssemblies>
   </metadata>
   <files>
-    <file src="**\*" exclude="obj\**\*" target="content"/>
+    <file src="**\*" target="content"/>
   </files>
 </package>

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
 

canvas/README.md

@@ -0,0 +1,7 @@
+# Why?
+
+This adds a mock module for `canvas`. Nteract has a ignored require and undeclared dependency on this module. `cavnas` is a server side node module and is not used in browser side code for nteract.
+
+Installing it locally (`npm install canvas`) will resolve the problem, but it is a native module so it is flaky depending on the system, node version, processor arch, etc. This module provides a simpler, more robust solution.
+
+Remove this workaround if [this bug](https://github.com/nteract/any-vega/issues/2) ever gets resolved 

canvas/index.js

@@ -0,0 +1 @@
+module.exports = {}

canvas/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "canvas",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

configs/mpac.json

@@ -1,4 +1,5 @@
 {
   "JUNO_ENDPOINT": "https://tools.cosmos.azure.com",
+  "isTerminalEnabled": true,
   "isPhoenixEnabled": true
-}
+}

configs/prod.json

@@ -1,4 +1,5 @@
 {
-    "JUNO_ENDPOINT": "https://tools.cosmos.azure.com",
-    "isPhoenixEnabled": false
-}
+ "JUNO_ENDPOINT": "https://tools.cosmos.azure.com",
+ "isTerminalEnabled" : false,
+ "isPhoenixEnabled" : false
+}

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>

images/AzureOpenAi.svg

@@ -1 +0,0 @@
-<svg id="uuid-adbdae8e-5a41-46d1-8c18-aa73cdbfee32" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="m0,2.7v12.6c0,1.491,1.209,2.7,2.7,2.7h12.6c1.491,0,2.7-1.209,2.7-2.7V2.7c0-1.491-1.209-2.7-2.7-2.7H2.7C1.209,0,0,1.209,0,2.7ZM10.8,0v3.6c0,3.976,3.224,7.2,7.2,7.2h-3.6c-3.976,0-7.199,3.222-7.2,7.198v-3.598c0-3.976-3.224-7.2-7.2-7.2h3.6c3.976,0,7.2-3.224,7.2-7.2Z" fill="#000000" stroke-width="0" /></svg>

images/ContainerCopy/copy-jobs.svg

@@ -1,17 +0,0 @@
-<svg width="96" height="104" viewBox="0 0 96 104" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.2" d="M80.5008 81.2203L41.2637 58.2012L35.7705 61.9941L74.6152 84.6208L80.5008 81.2203Z" fill="#AAAAAA"/>
-<path opacity="0.2" d="M60.2283 92.5992L20.9912 69.5801L15.498 73.373L54.3428 95.9997L60.2283 92.5992Z" fill="#AAAAAA"/>
-<path d="M63.7596 30.9969L74.8768 37.4057L74.746 82.1359L35.7705 59.7708L35.9013 3.00781L63.7596 19.095V30.9969Z" fill="#C9C9C9"/>
-<path d="M35.9014 3.00818L41.0022 0L68.8605 16.0872L63.7597 19.0954L35.9014 3.00818Z" fill="#AAAAAA"/>
-<path d="M74.8769 37.4067L79.9777 34.5293L79.8469 79.2596L74.7461 82.2677L74.8769 37.4067Z" fill="#AAAAAA"/>
-<path d="M43.4872 42.245L54.6043 48.6537L54.4735 93.384L15.498 71.0188L15.6288 14.2559L43.4872 30.3431V42.245Z" fill="#F4F4F4"/>
-<path d="M15.6289 14.2562L20.7297 11.248L48.5881 27.3352L43.4872 30.3434L15.6289 14.2562Z" fill="#DCDCDC"/>
-<path d="M54.6044 48.6547L59.7052 45.7773L59.5745 90.5076L54.4736 93.5158L54.6044 48.6547Z" fill="#DCDCDC"/>
-<path d="M63.7598 19.0961L68.8606 16.0879L79.9778 34.5293L74.8769 37.4067L63.7598 19.0961Z" fill="#C9C9C9"/>
-<path d="M63.7598 19.0957L74.8769 37.4063L63.7598 30.9976V19.0957Z" fill="#DCDCDC"/>
-<path d="M43.4873 30.3441L48.5881 27.3359L59.7053 45.7774L54.6045 48.6548L43.4873 30.3441Z" fill="#F4F4F4"/>
-<path d="M43.4873 30.3438L54.6045 48.6544L43.4873 42.2457V30.3438Z" fill="#C9C9C9"/>
-<path d="M46.8751 52.4595V55.9693L23.2275 42.1367V38.627L46.8751 52.4595Z" fill="#C9C9C9"/>
-<path d="M46.8751 59.0658V62.5756L23.2275 48.6914V45.1816L46.8751 59.0658Z" fill="#C9C9C9"/>
-<path d="M46.8751 65.3621V68.8719L23.2275 54.9877V51.6328L46.8751 65.3621Z" fill="#C9C9C9"/>
-</svg>

images/DocumentIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-  <path d="M4 4c0-1.1.9-2 2-2h3.59c.4 0 .78.16 1.06.44l3.91 3.91c.28.28.44.67.44 1.06V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6Zm4 .2v3.3c0 .28.22.5.5.5h3.3L10 3.2ZM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9Z" />
-</svg>

images/EntraID.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="uuid-f8d4d392-7c12-4bd9-baff-66fbf7814b91" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path d="m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z" fill="#225086"/>
-  <path d="m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z" fill="#6df"/>
-  <polygon points="4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199" fill="#cbf8ff"/>
-  <path d="m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z" fill="#074793"/>
-  <path d="m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z" fill="#0294e4"/>
-  <polygon points="13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199" fill="#96bcc2"/>
-</svg>

images/MoonIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7.85032 3.0153C10.4276 3.21621 12.4563 5.37119 12.4563 8C12.4563 10.7614 10.2177 13 7.45629 13C5.70158 13 4.15722 12.0961 3.26465 10.7271C4.66791 10.3479 6.58077 9.42526 7.42438 7.17555C7.97709 5.70162 8.00857 4.23763 7.85032 3.0153ZM13.4563 8C13.4563 4.68629 10.77 2 7.45629 2C7.38577 2 7.31552 2.00122 7.24555 2.00364C7.09984 2.00867 6.96358 2.07706 6.87247 2.19089C6.78136 2.30471 6.74447 2.45263 6.77147 2.59591C7.00024 3.81021 7.05064 5.32413 6.48805 6.82444C5.68804 8.95787 3.68609 9.66359 2.41062 9.89533C2.25698 9.92325 2.1252 10.0213 2.05438 10.1605C1.98356 10.2997 1.98182 10.4639 2.04969 10.6046C3.01873 12.6128 5.07502 14 7.45629 14C10.77 14 13.4563 11.3137 13.4563 8Z" fill="#0078d4" />
-</svg>

images/SunIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 1.33C8.276 1.33 8.5 1.554 8.5 1.83V2.83C8.5 3.106 8.276 3.33 8 3.33C7.724 3.33 7.5 3.106 7.5 2.83V1.83C7.5 1.554 7.724 1.33 8 1.33ZM8 11.33C9.841 11.33 11.33 9.841 11.33 8C11.33 6.159 9.841 4.67 8 4.67C6.159 4.67 4.67 6.159 4.67 8C4.67 9.841 6.159 11.33 8 11.33ZM8 10.33C6.711 10.33 5.67 9.289 5.67 8C5.67 6.711 6.711 5.67 8 5.67C9.289 5.67 10.33 6.711 10.33 8C10.33 9.289 9.289 10.33 8 10.33ZM14.17 8.5C14.446 8.5 14.67 8.276 14.67 8C14.67 7.724 14.446 7.5 14.17 7.5H13.17C12.894 7.5 12.67 7.724 12.67 8C12.67 8.276 12.894 8.5 13.17 8.5H14.17ZM8 12.67C8.276 12.67 8.5 12.894 8.5 13.17V14.17C8.5 14.446 8.276 14.67 8 14.67C7.724 14.67 7.5 14.446 7.5 14.17V13.17C7.5 12.894 7.724 12.67 8 12.67ZM2.83 8.5C3.106 8.5 3.33 8.276 3.33 8C3.33 7.724 3.106 7.5 2.83 7.5H1.83C1.554 7.5 1.33 7.724 1.33 8C1.33 8.276 1.554 8.5 1.83 8.5H2.83ZM2.813 2.813C3.009 2.617 3.325 2.617 3.521 2.813L4.521 3.813C4.717 4.009 4.717 4.325 4.521 4.521C4.325 4.717 4.009 4.717 3.813 4.521L2.813 3.521C2.617 3.325 2.617 3.009 2.813 2.813ZM3.521 13.187C3.325 13.383 3.009 13.383 2.813 13.187C2.617 12.991 2.617 12.675 2.813 12.479L3.813 11.479C4.009 11.283 4.325 11.283 4.521 11.479C4.717 11.675 4.717 11.991 4.521 12.187L3.521 13.187ZM13.187 2.813C12.991 2.617 12.675 2.617 12.479 2.813L11.479 3.813C11.283 4.009 11.283 4.325 11.479 4.521C11.675 4.717 11.991 4.717 12.187 4.521L13.187 3.521C13.383 3.325 13.383 3.009 13.187 2.813ZM12.479 13.187C12.675 13.383 12.991 13.383 13.187 13.187C13.383 12.991 13.383 12.675 13.187 12.479L12.187 11.479C11.991 11.283 11.675 11.283 11.479 11.479C11.283 11.675 11.283 11.991 11.479 12.187L12.479 13.187Z" fill="#0078d4" />
-</svg>

images/github-black-and-white.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C8.73438 0 9.44271 0.0960961 10.125 0.288288C10.8073 0.48048 11.4427 0.758091 12.0312 1.12112C12.6198 1.48415 13.1589 1.91124 13.6484 2.4024C14.138 2.89356 14.5573 3.44611 14.9062 4.06006C15.2552 4.67401 15.5234 5.32799 15.7109 6.02202C15.8984 6.71605 15.9948 7.44211 16 8.2002C16 9.08108 15.8698 9.92993 15.6094 10.7467C15.349 11.5636 14.9766 12.3136 14.4922 12.997C14.0078 13.6803 13.4323 14.2783 12.7656 14.7908C12.099 15.3033 11.3542 15.701 10.5312 15.984C10.5156 15.9893 10.4922 15.992 10.4609 15.992C10.4297 15.992 10.4062 15.9947 10.3906 16C10.2656 16 10.1667 15.9626 10.0938 15.8879C10.0208 15.8131 9.98438 15.7144 9.98438 15.5916V14.4705C9.98438 14.1021 9.98698 13.7257 9.99219 13.3413C9.99219 13.0691 9.95312 12.7941 9.875 12.5165C9.79688 12.2389 9.65625 12.0067 9.45312 11.8198C10.0573 11.7504 10.5859 11.625 11.0391 11.4434C11.4922 11.2619 11.8724 11.0057 12.1797 10.6747C12.487 10.3437 12.7161 9.94328 12.8672 9.47347C13.0182 9.00367 13.0964 8.43777 13.1016 7.77578C13.1016 7.35936 13.0339 6.96697 12.8984 6.5986C12.763 6.23023 12.5573 5.88856 12.2812 5.57357C12.3385 5.42409 12.3802 5.26927 12.4062 5.10911C12.4323 4.94895 12.4453 4.78879 12.4453 4.62863C12.4453 4.42042 12.4245 4.21488 12.3828 4.01201C12.3411 3.80914 12.2812 3.60627 12.2031 3.4034C12.1771 3.39273 12.1484 3.38739 12.1172 3.38739C12.0859 3.38739 12.0573 3.38739 12.0312 3.38739C11.8646 3.38739 11.6901 3.41408 11.5078 3.46747C11.3255 3.52085 11.1458 3.59026 10.9688 3.67568C10.7917 3.76109 10.6172 3.85452 10.4453 3.95596C10.2734 4.05739 10.125 4.15349 10 4.24424C9.34896 4.05739 8.68229 3.96396 8 3.96396C7.31771 3.96396 6.65104 4.05739 6 4.24424C5.86979 4.15349 5.72135 4.05739 5.55469 3.95596C5.38802 3.85452 5.21615 3.76376 5.03906 3.68368C4.86198 3.6036 4.67969 3.5342 4.49219 3.47548C4.30469 3.41675 4.13021 3.38739 3.96875 3.38739H3.88281C3.85156 3.38739 3.82292 3.39273 3.79688 3.4034C3.72396 3.60093 3.66667 3.80113 3.625 4.004C3.58333 4.20687 3.5599 4.41508 3.55469 4.62863C3.55469 4.78879 3.56771 4.94895 3.59375 5.10911C3.61979 5.26927 3.66146 5.42409 3.71875 5.57357C3.44271 5.88322 3.23698 6.22222 3.10156 6.59059C2.96615 6.95896 2.89844 7.35402 2.89844 7.77578C2.89844 8.42709 2.97396 8.99032 3.125 9.46547C3.27604 9.94061 3.50521 10.341 3.8125 10.6667C4.11979 10.9923 4.5 11.2513 4.95312 11.4434C5.40625 11.6356 5.9349 11.7638 6.53906 11.8278C6.38802 11.9666 6.27344 12.1321 6.19531 12.3243C6.11719 12.5165 6.0625 12.7167 6.03125 12.9249C5.89062 12.9943 5.74219 13.0477 5.58594 13.0851C5.42969 13.1225 5.27344 13.1411 5.11719 13.1411C4.78385 13.1411 4.50781 13.0611 4.28906 12.9009C4.07031 12.7407 3.875 12.5219 3.70312 12.2442C3.64062 12.1428 3.5651 12.0414 3.47656 11.9399C3.38802 11.8385 3.29167 11.7477 3.1875 11.6677C3.08333 11.5876 2.97135 11.5235 2.85156 11.4755C2.73177 11.4274 2.60677 11.4007 2.47656 11.3954H2.38281C2.34115 11.3954 2.30208 11.4034 2.26562 11.4194C2.22917 11.4354 2.19271 11.4515 2.15625 11.4675C2.11979 11.4835 2.10417 11.5102 2.10938 11.5475C2.10938 11.6116 2.14583 11.673 2.21875 11.7317C2.29167 11.7905 2.35156 11.8385 2.39844 11.8759L2.42188 11.8919C2.53646 11.9826 2.63542 12.0681 2.71875 12.1481C2.80208 12.2282 2.88021 12.3163 2.95312 12.4124C3.02604 12.5085 3.08594 12.6099 3.13281 12.7167C3.17969 12.8235 3.23958 12.9489 3.3125 13.0931C3.48958 13.5095 3.73698 13.8111 4.05469 13.998C4.3724 14.1849 4.75521 14.2809 5.20312 14.2863C5.33854 14.2863 5.47396 14.2783 5.60938 14.2623C5.74479 14.2462 5.88021 14.2222 6.01562 14.1902V15.5836C6.01562 15.7117 5.97917 15.8131 5.90625 15.8879C5.83333 15.9626 5.73177 16 5.60156 16H5.53906C5.51302 16 5.48958 15.9947 5.46875 15.984C4.65104 15.7117 3.90625 15.3193 3.23438 14.8068C2.5625 14.2943 1.98698 13.6937 1.50781 13.005C1.02865 12.3163 0.658854 11.5636 0.398438 10.7467C0.138021 9.92993 0.00520833 9.08108 0 8.2002C0 7.44745 0.09375 6.72139 0.28125 6.02202C0.46875 5.32266 0.739583 4.67134 1.09375 4.06807C1.44792 3.4648 1.86458 2.91225 2.34375 2.41041C2.82292 1.90858 3.36198 1.47881 3.96094 1.12112C4.5599 0.76343 5.19792 0.488488 5.875 0.296296C6.55208 0.104104 7.26042 0.00533867 8 0Z" fill="#000000"/>
-</svg>

images/golang.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none">
-    <path fill="#8CC5E7" d="M21.4679537,3.20617761 C22.1814672,4.67953668 20.0131274,4.83706564 20.1243243,5.49498069 C20.3281853,6.68108108 20.1891892,8.44169884 20.0316602,10.1745174 C19.7629344,13.1119691 21.9590734,20.1451737 17.3814672,22.9714286 C16.5196911,23.5088803 14.4718147,23.8054054 12.4517375,23.8517375 C12.4517375,23.8517375 12.442471,23.8517375 12.442471,23.8517375 C12.442471,23.8517375 12.4332046,23.8517375 12.4332046,23.8517375 C10.4131274,23.8054054 8.08725869,23.5088803 7.22548263,22.9714286 C2.65714286,20.1451737 4.85328185,13.1119691 4.59382239,10.1745174 C4.42702703,8.44169884 4.28803089,6.68108108 4.5011583,5.49498069 C4.61235521,4.83706564 2.44401544,4.68880309 3.15752896,3.20617761 C3.76911197,1.93667954 5.27953668,3.05791506 5.65945946,2.65945946 C7.596139,0.648648649 9.94980695,0.111196911 11.8030888,0.0648648649 C11.988417,0.0648648649 12.8223938,0.0648648649 12.8223938,0.0648648649 C14.6664093,0.157528958 17.0200772,0.657915058 18.9660232,2.65945946 C19.3459459,3.05791506 20.8471042,1.93667954 21.4679537,3.20617761 Z M11.4324324,10.9065637 C11.3490347,10.9436293 11.2100386,11.8517375 11.6362934,11.8980695 C11.9235521,11.9258687 12.7111969,12.0185328 12.8965251,11.8980695 C13.2579151,11.6664093 13.2208494,11.1104247 13.0169884,10.9714286 C12.6741313,10.7490347 11.5250965,10.8602317 11.4324324,10.9065637 Z M9.07876448,4.10501931 C8.12432432,3.99382239 6.52123552,4.88339768 6.28030888,6.77374517 C6.02084942,8.73822394 8.33745174,10.6841699 10.56139,8.73822394 C11.7567568,7.69111969 12.1737452,4.46640927 9.07876448,4.10501931 Z M15.5281853,4.10501931 C12.4332046,4.46640927 12.8501931,7.69111969 14.0455598,8.73822394 C16.2694981,10.6841699 18.5861004,8.73822394 18.3266409,6.77374517 C18.0949807,4.88339768 16.4918919,3.99382239 15.5281853,4.10501931 Z"/>
-    <path fill="#B8937F" d="M12.3127413,8.98841699 C12.8965251,8.90501931 14.2957529,9.57220077 14.2030888,10.3598456 C14.0918919,11.2772201 10.5984556,11.3976834 10.4131274,10.3042471 C10.3019305,9.63706564 10.8301158,9.21081081 12.3127413,8.98841699 Z M20.1984556,16.3737452 C19.9111969,16.3644788 19.7258687,15.984556 19.7258687,15.7528958 C19.7258687,15.3359073 19.7814672,14.8447876 20.0872587,14.6316602 C20.7173745,14.196139 21.2177606,16.3830116 20.1984556,16.3737452 Z M4.41776062,16.3737452 C3.3984556,16.3830116 3.8988417,14.196139 4.52895753,14.6316602 C4.83474903,14.8447876 4.89034749,15.3359073 4.89034749,15.7528958 C4.89034749,15.984556 4.70501931,16.3644788 4.41776062,16.3737452 Z M18.2617761,23.0918919 C18.4471042,23.3606178 18.4563707,23.5459459 18.1598456,23.6849421 C17.0293436,24.203861 16.019305,23.5088803 16.3992278,23.3142857 C17.2054054,22.9065637 17.7057915,22.2671815 18.2617761,23.0918919 Z M6.35444015,23.184556 C6.91042471,22.3598456 7.41081081,22.9992278 8.21698842,23.4069498 C8.5969112,23.6015444 7.58687259,24.2965251 6.45637066,23.7776062 C6.15984556,23.63861 6.16911197,23.4532819 6.35444015,23.184556 Z"/>
-    <path fill="#000000" d="M19.7351351,3.42857143 C19.7814672,3.23397683 20.2633205,3.14131274 20.5320463,3.47490347 C20.8563707,3.87335907 20.0594595,4.42007722 20.0223938,4.1976834 C19.9297297,3.5953668 19.6795367,3.62316602 19.7351351,3.42857143 Z M4.88108108,3.42857143 C4.93667954,3.62316602 4.68648649,3.5953668 4.59382239,4.1976834 C4.55675676,4.42007722 3.75984556,3.87335907 4.08416988,3.47490347 C4.34362934,3.14131274 4.82548263,3.23397683 4.88108108,3.42857143 Z M15.7413127,7.94131274 C15.1578953,7.94131274 14.6849421,7.46835949 14.6849421,6.88494208 C14.6849421,6.30152468 15.1578953,5.82857143 15.7413127,5.82857143 C16.3247301,5.82857143 16.7976834,6.30152468 16.7976834,6.88494208 C16.7976834,7.46835949 16.3247301,7.94131274 15.7413127,7.94131274 Z M15.4633205,6.76447876 C15.6475575,6.76447876 15.7969112,6.61512511 15.7969112,6.43088803 C15.7969112,6.24665096 15.6475575,6.0972973 15.4633205,6.0972973 C15.2790834,6.0972973 15.1297297,6.24665096 15.1297297,6.43088803 C15.1297297,6.61512511 15.2790834,6.76447876 15.4633205,6.76447876 Z M11.3583012,9.43320463 C11.4694981,9.00694981 11.8586873,8.86795367 12.1737452,8.85868726 C12.9799228,8.84015444 13.2857143,9.27567568 13.3135135,9.61853282 C13.369112,10.2023166 11.1081081,10.3413127 11.3583012,9.43320463 Z M8.87490347,7.94131274 C8.29148607,7.94131274 7.81853282,7.46835949 7.81853282,6.88494208 C7.81853282,6.30152468 8.29148607,5.82857143 8.87490347,5.82857143 C9.45832088,5.82857143 9.93127413,6.30152468 9.93127413,6.88494208 C9.93127413,7.46835949 9.45832088,7.94131274 8.87490347,7.94131274 Z M9.15289575,6.76447876 C9.33713283,6.76447876 9.48648649,6.61512511 9.48648649,6.43088803 C9.48648649,6.24665096 9.33713283,6.0972973 9.15289575,6.0972973 C8.96865868,6.0972973 8.81930502,6.24665096 8.81930502,6.43088803 C8.81930502,6.61512511 8.96865868,6.76447876 9.15289575,6.76447876 Z"/>
-  </g>
-</svg>

images/moon-blue.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 7.5C4 5.567 5.567 4 7.5 4C8.5 4 9.4 4.4 10 5.1C9.5 4.8 8.9 4.6 8.3 4.6C6.8 4.6 5.6 5.8 5.6 7.3C5.6 8.8 6.8 10 8.3 10C8.9 10 9.5 9.8 10 9.5C9.4 10.2 8.5 10.6 7.5 10.6C5.567 10.6 4 9.033 4 7.1V7.5Z" fill="#0078D4"/>
-</svg>

images/springboot.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
-    <g>
-        <path d="M38.9437824,35.879008 C89.5234256,-13.1200214 170.398168,-11.8028432 219.397197,39.0402357 C224.929346,31.6640377 229.671187,23.4975328 233.095851,15.0675923 C249.165425,64.0666217 258.912543,105.162582 255.224444,137.038295 C253.380395,163.90873 242.842969,189.725423 225.456217,210.273403 C180.145286,264.014274 99.53398,270.863601 45.7931091,225.55267 L45.7931091,225.55267 L44.765,224.638 L44.7103323,224.601984 C44.5420247,224.484832 44.376007,224.362668 44.2124952,224.235492 C43.7219599,223.853965 43.2765312,223.438607 42.8762093,222.995252 L42.732,222.831 L41.0512675,221.3377 C39.4121124,219.93271 37.7729573,218.52772 36.3188215,216.93771 L35.7825547,216.332423 C-13.2164747,165.752779 -11.6358609,84.8780374 38.9437824,35.879008 Z M57.9111486,207.375611 C53.169307,203.687512 46.3199803,204.214383 42.6318814,208.956225 C39.3888978,213.125775 39.4048731,218.924805 42.6798072,222.771269 L42.732,222.831 L44.765,224.638 L44.9644841,224.773953 C49.5691585,227.80174 55.7644273,227.175885 59.2982065,222.896387 L59.4917624,222.654878 C63.1798614,217.913037 62.3895545,211.06371 57.9111486,207.375611 Z M231.778672,28.2393744 C218.60689,55.9001168 185.940871,76.9749681 157.753257,83.5608592 C131.146257,89.8833146 107.963921,84.6146018 83.4644059,94.0982849 C27.6160498,115.436572 28.6697923,181.822354 59.2283268,196.838185 L59.2283268,196.838185 L61.0723763,197.891928 C61.0723763,197.891928 83.1456487,193.50309 104.973663,187.707242 L106.843514,187.207079 C115.561826,184.857554 124.138869,182.296538 131.146257,179.714869 C167.500376,166.279651 207.542593,133.08676 220.714375,94.6251562 C213.865049,134.667374 179.35498,173.392413 144.84491,191.042601 C126.404416,200.526284 112.178891,202.633769 81.883792,213.171195 C78.195693,214.488373 75.297901,215.805551 75.297901,215.805551 C75.6675607,215.754564 76.0372203,215.70481 76.4060145,215.65629 L77.1421925,215.560893 L77.1421925,215.560893 L77.8745239,215.468787 C84.5652297,214.639554 90.5771682,214.224938 90.5771682,214.224938 C133.517178,212.117452 200.956702,226.342977 232.305544,184.45671 C264.444692,141.780136 246.531068,72.7599979 231.778672,28.2393744 Z" fill="#6DB33F">
-
-</path>
-        <path d="M57.9111486,207.375611 C62.3895545,211.06371 63.1798614,217.913037 59.4917624,222.654878 C55.8036635,227.39672 48.9543368,227.923591 44.2124952,224.235492 C39.4706537,220.547393 38.9437824,213.698066 42.6318814,208.956225 C46.3199803,204.214383 53.169307,203.687512 57.9111486,207.375611 Z M231.778672,28.2393744 C246.531068,72.7599979 264.444692,141.780136 232.305544,184.45671 C200.956702,226.342977 133.517178,212.117452 90.5771682,214.224938 C90.5771682,214.224938 84.5652297,214.639554 77.8745239,215.468787 L77.1421925,215.560893 C76.5300999,215.63902 75.9140004,215.720572 75.297901,215.805551 C75.297901,215.805551 78.195693,214.488373 81.883792,213.171195 C112.178891,202.633769 126.404416,200.526284 144.84491,191.042601 C179.35498,173.392413 213.865049,134.667374 220.714375,94.6251562 C207.542593,133.08676 167.500376,166.279651 131.146257,179.714869 C106.119871,188.935116 61.0723763,197.891928 61.0723763,197.891928 L59.2283268,196.838185 C28.6697923,181.822354 27.6160498,115.436572 83.4644059,94.0982849 C107.963921,84.6146018 131.146257,89.8833146 157.753257,83.5608592 C185.940871,76.9749681 218.60689,55.9001168 231.778672,28.2393744 Z" fill="#FFFFFF">
-
-</path>

images/sun-blue.svg

@@ -1,11 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 2C6 1.44772 6.44772 1 7 1C7.55228 1 8 1.44772 8 2C8 2.55228 7.55228 3 7 3C6.44772 3 6 2.55228 6 2Z" fill="#0078D4"/>
-<path d="M6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13Z" fill="#0078D4"/>
-<path d="M1 7C1 6.44772 1.44772 6 2 6C2.55228 6 3 6.44772 3 7C3 7.55228 2.55228 8 2 8C1.44772 8 1 7.55228 1 7Z" fill="#0078D4"/>
-<path d="M12 7C12 6.44772 12.4477 6 13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8C12.4477 8 12 7.55228 12 7Z" fill="#0078D4"/>
-<path d="M2.63604 3.63604C3.02656 3.24551 3.65973 3.24551 4.05025 3.63604C4.44078 4.02656 4.44078 4.65973 4.05025 5.05025C3.65973 5.44078 3.02656 5.44078 2.63604 5.05025C2.24551 4.65973 2.24551 4.02656 2.63604 3.63604Z" fill="#0078D4"/>
-<path d="M10.9497 9.94975C11.3403 9.55922 11.9734 9.55922 12.364 9.94975C12.7545 10.3403 12.7545 10.9734 12.364 11.364C11.9734 11.7545 11.3403 11.7545 10.9497 11.364C10.5592 10.9734 10.5592 10.3403 10.9497 9.94975Z" fill="#0078D4"/>
-<path d="M10.9497 5.05025C10.5592 4.65973 10.5592 4.02656 10.9497 3.63604C11.3403 3.24551 11.9734 3.24551 12.364 3.63604C12.7545 4.02656 12.7545 4.65973 12.364 5.05025C11.9734 5.44078 11.3403 5.44078 10.9497 5.05025Z" fill="#0078D4"/>
-<path d="M2.63604 11.364C2.24551 10.9734 2.24551 10.3403 2.63604 9.94975C3.02656 9.55922 3.65973 9.55922 4.05025 9.94975C4.44078 10.3403 4.44078 10.9734 4.05025 11.364C3.65973 11.7545 3.02656 11.7545 2.63604 11.364Z" fill="#0078D4"/>
-<circle cx="7.5" cy="7.5" r="2.5" fill="#0078D4"/>
-</svg>

images/vscode.svg

@@ -1 +0,0 @@
-<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="479" y="279" width="15" height="15"/></clipPath><clipPath id="clip1"><rect x="-0.287396" y="-0.171573" width="152381" height="152381"/></clipPath><image width="35" height="35" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH4UExURQAAAASExCGs7CC//wB9vQB5uxSU1yaz8ySy9AB8uwB8vAB5uxOR1Say8yax8iaw8gB6vAB6uwB7uwB4uROQ1Cax8ySy8QCAvwB3ugB5ugB2uROP1CWw8yav8wCT2QCQ1QCP1wB2uQB1uBOO0yWv8yat8wCP1QCP1QCP1QCO1QCQ1wB1tQB2uAB3uAB1tx+k6SSt8ySt8QCN0wCO1ACM0wBzuQBztAB1twB0tgB0tiSr8SSs8gCM1ACM1ACEywBwtQBxtAB0tgBztQB0sySp8SSr8gCL0wCK0gCL0wCHzwByuABusgBztQBttiOq8gB6wQCI0QCJ0gB7wySn8SOo8gBxtABtsABwtgCFzwCI0gCG0QCJ0SKn8SKn8iKl8QBvsABvsgBvsQBtsABssgCCzACG0QCF0ACDzyKm8QBtrwBusABsrgCAzQCE0ACF0ACF0ACE0CKj8SKl8QBssQBtrwBtrwBsrgBsrwCK1QCBzwCD0ACA0B2d7CGj8QBsrABrrQBwrwCA3wCC0ACCzwCBzwB+zhGM3iGi8SKh8QCAzQCAzgCAzwB9zRCK3iCh8SGh8SCf8QB+zAB/zgB8zRCJ3SCg8SCf7wB+zQB6zBCI3CCe8CCf8CCe8CCf8SCf/wB7zAB4yxGJ3h6c8CCd7yCf7wmA0RqX60C//5CaUeMAAACodFJOUwA8XAho+//ncID/////53iM//////9wCKv/////gCiYILf///+AMPP/70wYw/+3lP+AXP+MKNv/+3uA/3z/+////+NAgP9c9/////+7HP+A///MgP9Y+////7scgP+AeP/////7/+NA/2D/iyTb//t4gP808//vUBjD/7eU/yifIAi3//////+Ar////////4CI/////3B//////+9/CGj7/+dwEDhYBCm1XqwAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAFpSURBVDhPY2AYBaiAkYkZXQgdsLCysXPgV8XJxc3Dy8vHj0eVgKCQsIioqKioGLoMDIhLSEpKSknLyMjIyKLLyckrgJUoCgsLCyspq6ioqKiiKVFT19DUYmDQ1tEFAT19AwMDA0M0NUbGxsbGJqZm5ubm5haWDFbW1tbWVmhqGGxsbW1t7ewdHB2dnBkYXFxdXV1d0NUwuLl7eHh4enn7+DIwMLj4+fn5Yaph8A8IDAwMDBIHsYNDQkJCgtFVMISGhUdERkZGRkUzMDDExMbGxsahK4lPSExKTklNTU1NS2dgiMvIyMhAV5OZlZWVlZ2Tm5eXl5dfwFBYVFRUVIimpriktKycgaGisgoEqmtqa2tr0dUw1NU3gKjGpuaWlpbWtvb29vYOdDUw0NjZ1dXd09vX39c3AV0OASZOmjR5ytSpU6dOQ5dBAtN7ZsycNXvO3HnoEshg/oKFixYvQRdFA0uXLUcXGqEAAH4FV0z+qQbjAAAAAElFTkSuQmCC" preserveAspectRatio="none" id="img2"></image><clipPath id="clip3"><path d="M44291.4 46947.4 187148 46947.4 187148 188823 44291.4 188823Z" fill-rule="evenodd" clip-rule="evenodd"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-479 -279)"><g clip-path="url(#clip1)" transform="matrix(0.000105 0 0 0.000105 479 279)"><g clip-path="url(#clip3)" transform="matrix(1 0 0 1.00692 -44291.4 -47272.4)"><use width="100%" height="100%" xlink:href="#img2" transform="scale(6709.45 6709.45)"></use></g></g></g></svg>

jest-playwright.config.js

@@ -0,0 +1,13 @@
+const isCI = require("is-ci");
+
+module.exports = {
+  exitOnPageError: false,
+  launchOptions: {
+    headless: isCI,
+    slowMo: 10,
+    timeout: 60000,
+  },
+  contextOptions: {
+    ignoreHTTPSErrors: true,
+  },
+};

jest.config.js

@@ -31,7 +31,7 @@ module.exports = {
   coveragePathIgnorePatterns: ["/node_modules/"],
 
   // A list of reporter names that Jest uses when writing coverage reports
-  coverageReporters: ["json", "text", "cobertura", "lcov"],
+  coverageReporters: ["json", "text", "cobertura"],
 
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
@@ -76,11 +76,6 @@ module.exports = {
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
     "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
-    "d3-force": "<rootDir>/node_modules/d3-force/dist/d3-force.min.js",
-    "d3-quadtree": "<rootDir>/node_modules/d3-quadtree/dist/d3-quadtree.min.js",
-    "d3-scale-chromatic": "<rootDir>/node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.min.js",
-    "d3-zoom": "<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js",
-    uuid: require.resolve("uuid"), // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -134,7 +129,8 @@ module.exports = {
   snapshotSerializers: ["enzyme-to-json/serializer"],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  // testEnvironment: "jest-environment-jsdom",
+
   modulePaths: ["node_modules", "<rootDir>/src"],
 
   // Options that will be passed to the testEnvironment
@@ -158,7 +154,7 @@ module.exports = {
   // testResultsProcessor: "./trxProcessor.js",
 
   // This option allows use of a custom test runner
-  testRunner: "jest-circus/runner",
+  // testRunner: "jasmine2",
 
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
   // testURL: "http://localhost",
@@ -168,17 +164,13 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    "^.+\\.html?$": "jest-html-loader",
+    "^.+\\.html?$": "html-loader-jest",
     "^.+\\.[t|j]sx?$": "babel-jest",
-    "^.+\\.svg$": "<rootDir>/jest/svgTransform.js",
+    "^.+\\.svg$": "<rootDir>/svgTransform.js",
   },
 
   // 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,
@@ -191,7 +183,4 @@ module.exports = {
 
   // Whether to use watchman for file crawling
   // watchman: true,
-
-  // TODO: toMatchInlineSnapshot() does not work with prettier 3. Remove when fixed: https://github.com/jestjs/jest/issues/14305
-  prettierPath: null,
 };

jest.config.playwright.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: "jest-playwright-preset",
+  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
+  setupFiles: ["dotenv/config"],
+  testEnvironment: "./test/playwrightEnv.js",
+  setupFilesAfterEnv: ["expect-playwright"],
+};

less/Common/Constants.less

@@ -61,8 +61,6 @@
 
 @GalleryBackgroundColor: #fdfdfd;
 
-@LinkColor: #2d6da4;
-
 //Icons
 @InfoIconColor: #0072c6;
 @WarningIconColor: #db7500;
@@ -128,11 +126,10 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 32px;
+@ActiveTabHeight: 31px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
-@ContentWrapper: 111px;
 @StatusIconContainerSize: 18px;
 @LoadingErrorIconSize: 14px;
 @ErrorIconContainer: 16px;
@@ -170,7 +167,7 @@
 
 @FabricBoxBorderRadius: 8px;
 @FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
-@FabricBoxMargin: 4px 8px 4px 8px;
+@FabricBoxMargin: 4px 3px 4px 3px;
 
 @FabricAccentMediumHigh: #0c695a;
 @FabricAccentMedium: #117865;
@@ -237,21 +234,17 @@
 *********************************************************************************************/
 
 .hover() {
-  background-color: var(--colorNeutralBackground1Hover);
+  background-color: @AccentLight;
 }
 
 .active() {
-  background-color: var(--colorNeutralBackground1Hover);
+  background-color: @AccentExtra;
 }
 
 .focus() {
   outline: 1px dashed @FocusColor;
 }
 
-.focusedBorder() {
-  border: 1px dashed @FocusColor;
-}
-
 /************************************************************************************************
                                Common Toggle Switch
 *************************************************************************************************/
@@ -342,11 +335,4 @@
   width: 0;
   height: 0;
   border-color: @InfoPointerColor transparent;
-}
-/*********************************************************************************************************
-                           Screen Reader Only
-**********************************************************************************************************/
-.screenReaderOnly {
-  position: absolute;
-  left: -9999px;
 }

less/documentDB.less

@@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;
-  color: var(--colorNeutralForeground1);
+  color: @BaseDark;
   overflow-y: auto;
   overflow-x: auto;
   margin: (2 * @MediumSpace) 0px;
@@ -1749,6 +1749,7 @@ input::-webkit-calendar-picker-indicator {
 .contextual-pane .panelMainContent {
   padding-left: 34px;
   padding-right: 34px;
+  color: @BaseDark;
   margin: (2 * @MediumSpace) 0px;
 }
 
@@ -1829,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;
@@ -1913,30 +1906,8 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
-
-  .nav-tabs {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    height: 100%;
-    margin-bottom: -0.5px;
-    background-color: var(--colorNeutralBackground1Selected);
-
-    li {
-      margin-bottom: 0px;
-      height: 32px;
-
-      &:hover {
-        background-color: var(--colorNeutralBackground1Hover);
-      }
-
-      &:active {
-        background-color: var(--colorNeutralBackground1Pressed);
-      }
-    }
-  }
+  padding-top: 8px;
+  background-color: #f2f2f2;
 }
 
 .navTabHeight {
@@ -1948,9 +1919,8 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: var(--colorNeutralBackground1Selected);
+  background-color: transparent !important;
   border-color: transparent;
-  color: var(--colorNeutralForeground1);
 }
 
 .numbersize {
@@ -2104,6 +2074,14 @@ a:link {
   display: inline;
 }
 
+.resourceTreeAndTabs {
+  display: flex;
+  flex: 1 1 auto;
+  overflow-x: clip;
+  overflow-y: auto;
+  height: 100%;
+}
+
 .collectiontitle {
   font-size: 14px;
   text-transform: uppercase;
@@ -2286,33 +2264,33 @@ a:link {
   width: 82px;
 }
 
-// .tabdocuments .scrollable {
-//   height: 100%;
-//   overflow-y: auto;
-//   overflow-x: hidden;
-//   padding-left: 5px;
-//   padding-right: 5px;
-//   width: 100%;
-// }
+.tabdocuments .scrollable {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-left: 5px;
+  padding-right: 5px;
+  width: 100%;
+}
 
-// .tabdocuments > .tabdocumentsGridElement {
-//   width: 50%;
-// }
+.tabdocuments > .tabdocumentsGridElement {
+  width: 50%;
+}
 
-// .tabdocuments > .evenlySpacedHeader {
-//   width: 30%;
-// }
+.tabdocuments > .evenlySpacedHeader {
+  width: 30%;
+}
 
-// .tabdocuments.scrollable:focus,
-// .tabdocuments.scrollable:active {
-//   outline: 1px dotted;
-// }
+.tabdocuments.scrollable:focus,
+.tabdocuments.scrollable:active {
+  outline: 1px dotted;
+}
 
-// .tabdocuments .scrollable table td {
-//   white-space: nowrap;
-//   overflow: hidden;
-//   text-overflow: ellipsis;
-// }
+.tabdocuments .scrollable table td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .mongoDocumentEditor .monaco-editor.vs .redsquiggly {
   display: none !important;
@@ -2338,15 +2316,21 @@ td a:hover {
 }
 
 .loadMore {
-  display: block;
   width: 100%;
-  text-align: center;
+  padding-left: 30%;
+  padding-top: 2px;
+  cursor: pointer;
 }
 
 .loadMore > a:focus {
   outline: 1px dotted;
 }
 
+#content.active .tabdocuments .scrollable {
+  height: 100%;
+  overflow-y: auto;
+}
+
 .table-fixed thead {
   width: 97%;
   padding-left: 18px;
@@ -2382,11 +2366,10 @@ a:link {
 
 .tabsManagerContainer {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
+  flex-grow: 1;
+  overflow: hidden;
+  min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2575,12 +2558,10 @@ a:link {
 }
 
 .filterdivs {
-  margin: 10px 0px;
+  padding-top: 15px;
+  height: 45px;
+  margin-bottom: 8px;
   white-space: nowrap;
-  input {
-    line-height: 14px; // To correct vertical position of the down arrow of the input
-    outline: none; // Remove the dotted border on focus, because fluent has its own focus style (underlined)
-  }
 }
 
 .editFilterContainer {
@@ -2642,16 +2623,14 @@ a:link {
 }
 
 .tabPanesContainer {
-  flex-grow: 1;
+  display: flex;
+  height: 100%;
   overflow: hidden;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
   height: 100%;
   width: 100%;
-  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2668,18 +2647,24 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: var(--colorNeutralForeground1);
+  color: #555;
   cursor: default;
-  background-color: var(--colorNeutralBackground1);
-  border-color: var(--colorNeutralStroke1);
+  background-color: @BaseLight;
+  border-color: @BaseMedium;
+  border-bottom-color: @BaseLight;
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active .contentWrapper .tabNavText  {
-  border-bottom: 2px solid var(--colorCompoundBrandBackground);
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
+  font-weight: bolder;
+  border-bottom: 2px solid rgba(0, 120, 212, 1);
+}
+
+.nav-tabs > li.active:focus > .tabNavContentContainer {
+  .focus();
 }
 
 .tabNavContentContainer {
@@ -2688,7 +2673,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: var(--colorNeutralForeground1);
+  color: @BaseHigh;
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2696,122 +2681,96 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: var(--colorNeutralBackground1Hover);
-    border-color: transparent;
+    background-color: @BaseMediumLow;
+    border-color: @BaseMediumLow;
   }
 
   &:active {
-    background-color: var(--colorNeutralBackground1Pressed);
+    background-color: @BaseMediumLow;
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+    border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
-    color: var(--colorNeutralForeground1);
 
-    .contentWrapper {
-      .flex-display();
-      width: @ContentWrapper;
+    .statusIconContainer {
+      width: @StatusIconContainerSize;
+      height: @StatusIconContainerSize;
+      margin-left: @SmallSpace;
+      display: inline-flex;
 
-      .statusIconContainer {
-        width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
-        display: inline-flex;
+      .errorIconContainer {
+        width: @ErrorIconContainer;
+        height: @ErrorIconContainer;
+        margin-top: 1px;
 
-        .errorIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
-
-          .errorIcon {
-            width: @ErrorIconWidth;
-            height: @LoadingErrorIconSize;
-            background-image: url(../images/error_no_outline.svg);
-            background-repeat: no-repeat;
-            background-position: center;
-            display: block;
-            margin: 4px 0px 0px 6px;
-          }
-        }
-
-        .errorIconContainer.actionsEnabled {
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .focus();
-          }
-
-          &:active {
-            .active();
-          }
-        }
-
-        .errorIconContainer[tabindex]:active {
-          outline: none;
-        }
-
-        .loadingIcon {
-          width: @LoadingErrorIconSize;
+        .errorIcon {
+          width: @ErrorIconWidth;
           height: @LoadingErrorIconSize;
-          margin-top: 1px;
-        }
-
-        .warningIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
+          background-image: url(../images/error_no_outline.svg);
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: 3px;
+          display: block;
+          margin: 1px 0px 0px 6px;
         }
       }
 
-      .tabNavText {
-        margin-left: @SmallSpace;
-        margin-right: 2px;
-        color: var(--colorNeutralForeground1);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        flex-grow: 1;
-        font-size: 12px;
-      }
-    }
-
-    .tabIconSection {
-      position: relative;
-
-      .cancelButton {
-        padding: 0px @SmallSpace 0px @SmallSpace;
-        color: var(--colorNeutralForeground1);
-        width: 16px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-
+      .errorIconContainer.actionsEnabled {
         &:hover {
-          background-color: var(--colorNeutralBackground1Hover);
-          color: var(--colorNeutralForeground1);
+          .hover();
         }
 
         &:focus {
-          background-color: var(--colorNeutralBackground1Pressed);
-          color: var(--colorNeutralForeground1);
+          .focus();
         }
 
         &:active {
-          background-color: var(--colorNeutralBackground1Pressed);
-          color: var(--colorNeutralForeground1);
+          .active();
+        }
+      }
+
+      .errorIconContainer[tabindex]:active {
+        outline: none;
+      }
+
+      .loadingIcon {
+        width: @LoadingErrorIconSize;
+        height: @LoadingErrorIconSize;
+        margin: 0px 0px @SmallSpace @SmallSpace;
+      }
+    }
+
+    .tabNavText {
+      margin-left: @SmallSpace;
+      margin-right: 2px;
+      color: @BaseDark;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-grow: 1;
+    }
+
+    .tabIconSection {
+      width: 30px;
+      position: relative;
+      padding-top: 2px;
+
+      .cancelButton {
+        padding: 0px @SmallSpace 0px @SmallSpace;
+
+        &:hover {
+          .hover();
         }
 
-        &::before {
-          content: "×";
-          font-size: 16px;
-          line-height: 1;
+        &:focus {
+          .focus();
+        }
+
+        &:active {
+          .active();
         }
       }
     }
@@ -2898,7 +2857,6 @@ a:link {
   z-index: 1000;
   overflow-y: auto;
   overflow-x: clip;
-  min-height: fit-content;
 }
 
 .uniqueIndexesContainer {
@@ -3162,16 +3120,3 @@ a:link {
   background: white;
   height: 100%;
 }
-
-.sidebarContainer {
-  height: 100%;
-}
-
-.close-Icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}

less/documentDBFabric.less

@@ -7,7 +7,6 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
-  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -21,10 +20,6 @@ a:focus {
   text-decoration: underline;
 }
 
-.splashLoaderContainer {
-  background-color: #f5f5f5;
-}
-
 #divExplorer {
   background-color: #f5f5f5;
 }
@@ -32,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: 0px;
-  background-color: #ffffff;
+  padding-top: 8px;
+  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;
@@ -68,22 +65,20 @@ a:focus {
   }
 }
 
-.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: none;
+
+.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 {
-  border-bottom: none;
-}
-
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
-  border-bottom: 0px none transparent;
-}
-.nav-tabs > li.active .contentWrapper .tabNavText  {
+.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>.tabNavText {
+  border-bottom: 0px none transparent;
+}
+
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
 
@@ -98,10 +93,8 @@ a:focus {
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
 
-    .contentWrapper {
-      .statusIconContainer {
-        margin-left: 0px;
-      }
+    .statusIconContainer {
+      margin-left: 0px;
     }
 
     .tabIconSection {
@@ -124,6 +117,7 @@ a:focus {
   }
 }
 
+
 .resourceTree {
   padding: 12px;
 }
@@ -160,21 +154,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;
@@ -200,10 +198,12 @@ a:focus {
   border: solid 1px #d1d1d1;
 }
 
+
 .gridRowSelected .tabdocumentsGridElement:hover {
   background-color: @FabricAccentLight !important;
 }
 
+
 .refreshcol {
   filter: brightness(0) saturate(100%);
 }
@@ -214,13 +214,4 @@ a:focus {
 
 .fileImportImg img {
   filter: brightness(0) saturate(100%);
-}
-
-.tabPanesContainer {
-  overflow: auto !important;
-}
-
-.tabs-container {
-  min-height: 500px;
-  min-width: 500px;
-}
+}

less/forms.less

@@ -1,227 +1,211 @@
 @import "./Common/Constants";
 
 .dirty {
-  border: 1px solid #9b4f96;
+    border: 1px solid #9b4f96;
 }
 
 .dirty:focus {
-  outline: 1px solid #9b4f96;
+    outline: 1px solid #9b4f96;
 }
 
 .tabForm {
-  padding: 12px 20px 20px 20px;
-  margin-left: 3px;
+    padding: 12px 20px 20px 20px;
+    margin-left: 3px;
 }
 
 .storedTabForm {
-  padding-top: @LargeSpace;
+    padding-top: @LargeSpace;
 }
 
 .scaleSettingScrollable {
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height:100%;
 }
 
 .disableFocusDefaults[tabindex] {
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+        outline: none;
+    }
 
-  &:active {
-    outline: none;
-  }
+    &:active {
+        outline: none;
+    }
 }
 
 .indexingPolicyEditor {
-  width: 100%;
-  height: calc(~"100vh - 400px");
+    width: 100%;
+    height: calc(~"100vh - 400px");
 }
 
 .scaleDivison {
-  padding: @MediumSpace 0px @DefaultSpace 0px;
+    padding: @MediumSpace 0px @DefaultSpace 0px;
 }
 
 .scaleSettingTitle {
-  font-size: 14px;
-  cursor: pointer;
+    font-size: 14px;
+    cursor: pointer;
 }
 
 .autoScaleThroughputTitle {
-  margin-bottom: @SmallSpace;
+    margin-bottom: @SmallSpace;
 }
 
 .autoScaleDescription {
-  margin-top: 6px;
-  margin-bottom: @SmallSpace;
+    margin-top: 6px;
+    margin-bottom: @SmallSpace;
 }
 
 .ssExpandCollapseIcon {
-  width: 10px;
-  height: 10px;
+    width: 10px;
+    height: 10px;
 }
 
 .ssCollapseIcon {
-  margin-bottom: 5px;
+    margin-bottom: 5px;
 }
 
 .ssTextAllignment {
-  padding-left: 19px;
+    padding-left: 19px;
 }
 
 .throughputStorageBlock {
-  border-top: 1px solid #bbb;
-  border-bottom: 1px solid #bbb;
-  background-color: #ccc;
-  padding-left: 10px;
-  width: 315px;
+    border-top: 1px solid #bbb;
+    border-bottom: 1px solid #bbb;
+    background-color: #ccc;
+    padding-left: 10px;
+    width: 315px;
 }
 
 .storageCapacityTitle {
-  padding: @LargeSpace 0px;
+    padding: @LargeSpace 0px;
+
 }
 .throughputStorageValue {
-  font-size: 12px;
+    font-size: 12px;
 }
 
-.estimatedCost,
-.largePartitionKeyEnabled {
-  padding: @SmallSpace 0px @LargeSpace;
+.estimatedCost, .largePartitionKeyEnabled {
+    padding: @SmallSpace 0px @LargeSpace;
 }
 
 .storagePadding {
-  padding-top: 6px;
-  padding-bottom: 14px;
+    padding-top: 6px;
+    padding-bottom: 14px;
 }
 
 .dirtyTextbox {
-  width: 176px;
-  margin-top: 7px;
-  padding-left: 5px;
+    width: 176px;
+    margin-top: 7px;
+    padding-left: 5px;
 }
 
 .formTitleFirst {
-  padding: @DefaultSpace (2 * @MediumSpace);
+    padding: @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTitleTextbox {
-  padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
+    padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTree {
-  border: 1px solid var(--colorNeutralStroke1);
-  color: var(--colorNeutralForeground1);
-  background-color: var(--colorNeutralBackground1);
-  padding: 0px 12px 1px 8px;
+    border: 1px solid #969696;
+    color: #393939;
+    padding: 0px 12px 1px 8px;
 }
 
 .formTree:hover {
-  border: 1px solid var(--colorNeutralStroke1Hover);
-  background-color: var(--colorNeutralBackground1Hover);
-}
-
-.formTree::placeholder {
-  color: var(--colorNeutralForeground2);
-  opacity: 1;
+    border: 1px solid #969696;
+    background-color: #e6f8fe;
 }
 
 .formTree:active {
-  border: 1px solid var(--colorNeutralStroke1Pressed);
-  background-color: var(--colorNeutralBackground1Pressed);
+    border: 1px solid #1ebbee;
 }
 
 .scaleForm {
-  padding-left: 8px;
-  color: @BaseDark;
-  border: 1px solid #969696;
-  min-width: @ScaleFormWidth;
+    padding-left: 8px;
+    color: @BaseDark;
+    border: 1px solid #969696;
+    min-width: @ScaleFormWidth;
 
-  &:hover {
-    background-color: #e6f8fe;
-  }
+    &:hover {
+        background-color: #e6f8fe;
+    }    
 }
 
 .formTitle {
-  margin-top: 16px;
-  margin-bottom: 4px;
+    margin-top: 16px;
+    margin-bottom: 4px; 
 }
 
+
 .spUdfTriggerHeader {
-  padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
+    padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); 
 }
 
 .storedUdfTriggerEditor {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .unselectedRadio {
-  background-color: white;
-  border-color: #eee !important;
-  color: black !important;
+    background-color: white;
+    border-color: #EEE!important;
+    color: black!important;
 }
 
 .disabledRadio {
-  background-color: #a19f9d;
-  border-color: #eee !important;
-  color: white !important;
+    background-color: #A19F9D;
+    border-color: #EEE!important;
+    color: white!important;
 }
 
 .selectedRadio {
-  background-color: @AccentMediumHigh;
-  border-color: #eee !important;
-  color: white !important;
-  cursor: pointer;
+    background-color: @AccentMediumHigh;
+    border-color: #EEE!important;
+    color: white!important;
+    cursor: pointer;
 }
 
 .selectedRadio:hover {
-  background-color: @AccentMediumHigh;
-  border-color: #eee !important;
-  color: white !important;
-  cursor: pointer;
+    background-color: @AccentMediumHigh;
+    border-color: #EEE!important;
+    color: white!important;
+    cursor: pointer;
 }
 
 .selectedRadio:active {
-  background-color: #0072c6;
-  border-color: #eee !important;
-  color: white !important;
-  cursor: pointer;
-  border: 1px solid #0072c6;
+    background-color: #0072c6;
+    border-color: #EEE!important;
+    color: white!important;
+    cursor: pointer;
+    border: 1px solid #0072c6;
 }
 
 .selectedRadio.dirty {
-  background-color: #9b4f96;
+    background-color: #9b4f96;
 }
 
 .tabs {
-  margin: 0;
+    margin: 0;
 }
 
 .formReadOnly {
-  background-color: #ddd;
-  border: 1px solid #969696;
-  min-width: 184px;
-  padding-left: 8px;
+    background-color: #ddd;
+    border: 1px solid #969696;
+    min-width: 184px;
+    padding-left: 8px;
 }
 
 .migration:disabled {
-  background-color: #ccc;
+    background-color: #ccc;
 }
 
 .trigger-field {
-  width: 40%;
-  margin-top: 10px;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
+    width: 40%;
+    margin-top: 10px
 }
-
-.trigger-field input::placeholder {
-  color: var(--colorNeutralForeground3);
-  opacity: 1;
-}
-
 .trigger-form {
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
-  padding: 10px 30px;
-}
+    padding: 10px 30px 10px 30px;
+}

less/hostedexplorer.less

@@ -255,7 +255,7 @@ body {
                 flex: 1;
                 padding-left: 34px;
                 padding-right: 34px;
-                color: var(--colorNeutralForeground1);
+                color: @BaseDark;
                 overflow-y: auto;
                 overflow-x: hidden;
                 margin: (2 * @MediumSpace) 0px;

less/resourceTree.less

@@ -3,6 +3,19 @@
 .dataResourceTree {
   margin-left: @MediumSpace;
   overflow: auto;
+
+  .databaseHeader {
+    padding: 1px;
+    font-size: 14px;
+  }
+
+  .collectionHeader {
+    font-size: 12px;
+  }
+
+  .loadMoreHeader {
+    color: RGB(5, 99, 193);
+  }
 }
 
 .notebookResourceTree {

less/tree.less

@@ -0,0 +1,270 @@
+@import "./Common/Constants";
+
+.resourceTree {
+  height: 100%;
+  flex: 0 0 auto;
+  .main {
+    height: 100%;
+  }
+}
+
+.resourceTreeScroll {
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
+}
+
+.userSelectNone {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.treeHovermargin {
+  margin-left: 16px;
+}
+
+.highlight {
+  padding: @SmallSpace 2px;
+  outline: 0;
+
+  &:hover {
+    .hover();
+  }
+
+  &:active {
+    .active();
+  }
+
+  &:focus {
+    .focus();
+  }
+}
+
+.contextmenushowing {
+  background-color: #eee;
+}
+
+.collectionstree {
+  width: 100%;
+  margin-top: @DefaultSpace;
+
+  .databaseList {
+    list-style-type: none;
+    padding-left: 0px;
+
+    .collectionList {
+      padding-left: (2 * @MediumSpace);
+    }
+
+    .collectionChildList {
+      padding-left: @LargeSpace;
+    }
+
+    .databaseDocuments {
+      padding-left: (5 * @MediumSpace);
+    }
+  }
+}
+
+.pointerCursor {
+  cursor: pointer;
+}
+
+.menuEllipsis {
+  padding-right: 6px;
+  font-weight: bold;
+  font-size: 18px;
+  position: relative;
+  top: -5px;
+  left: 0px;
+  float: right;
+  display: none;
+  padding-left: 6px !important;
+  line-height: @TreeLineHeight;
+}
+
+.databaseMenu {
+  .flex-display();
+}
+
+.databaseMenu:hover .menuEllipsis,
+.databaseMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.databaseCollChildTextOverflow {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
+}
+
+.collectionMenu {
+  .flex-display();
+}
+
+.collectionMenu:hover .menuEllipsis,
+.collectionMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.documentsMenu:hover .menuEllipsis,
+.documentsMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.treeChildMenu {
+  display: flex;
+}
+
+.storedProcedureMenu:hover .menuEllipsis,
+.storedProcedureMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.childMenu {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: (6 * @MediumSpace);
+  width: 100%;
+}
+
+.storedChildMenu:hover .menuEllipsis,
+.storedChildMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.contextmenu6 {
+  top: -29px;
+}
+
+.userDefinedMenu:hover .contextmenu6 {
+  display: block;
+}
+
+.userDefinedchildMenu:hover .menuEllipsis,
+.userDefinedchildMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.triggersMenu:hover .menuEllipsis,
+.triggersMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.triggersChildMenu:hover .menuEllipsis,
+.triggersChildMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.databaseId {
+  font-size: 14px;
+}
+
+.storedUdfTriggerMenu {
+  padding-left: 0px;
+}
+
+.collectionstree img {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
+}
+
+img.collectionsTreeCollapseExpand {
+  width: 10px;
+  height: 10px;
+  vertical-align: middle;
+  margin-bottom: 5px;
+}
+
+.collapsed::before {
+  content: "\23F5";
+  margin-left: 0px;
+  font-size: 15px;
+}
+
+.expanded::before {
+  content: "\23F7";
+  margin-left: 0px;
+  font-size: 15px;
+}
+
+.collectionMenuChildren {
+  padding-left: 42px;
+}
+
+.main-nav {
+  width: 100vh;
+  height: 40px;
+  background: white;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+  border-bottom: 1px solid #ccc;
+}
+
+.main-nav-img {
+  width: 16px;
+  height: 16px;
+  margin: -32px 0 0 0;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+}
+
+.main-nav-img.main-nav-sub-img {
+  width: 16px;
+  height: 16px;
+  margin: 0px 0px 0 0;
+  transform: rotate(180deg) translateX(0%);
+  -webkit-transform: rotate(180deg) translateX(0%);
+  -ms-transform: rotate(180deg) translateX(0%);
+  position: absolute;
+  right: -8px;
+  top: 16px;
+}
+
+ul.nav {
+  margin: 0 auto;
+  margin-top: 0px;
+  margin-left: 0px;
+}
+
+.mini ul.nav li {
+  float: right;
+  line-height: 25px;
+  height: auto;
+  margin-top: 3px;
+}
+
+.spancolchildstyle {
+  padding: 4px;
+}
+
+.contextmenubutton {
+  float: right;
+  display: none;
+}
+
+.highlight:hover > .contextmenubutton {
+  display: unset;
+}
+
+.highlight:hover > .contextmenubutton::after {
+  content: "\2026";
+  font-size: 12px;
+}
+
+.showEllipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

package.json

@@ -5,20 +5,21 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.7.0",
+    "@azure/cosmos": "4.0.1-beta.2",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "4.5.0",
+    "@azure/identity": "1.2.1",
+    "@azure/ms-rest-nodeauth": "3.0.7",
     "@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",
+    "@fluentui/react": "8.112.1",
+    "@fluentui/react-components": "9.34.0",
     "@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",
-    "@nteract/core": "15.1.9",
+    "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
     "@nteract/directory-listing": "2.0.6",
     "@nteract/dropdown-menu": "1.0.1",
@@ -41,23 +42,19 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
-    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/jest-dom": "5.11.9",
     "@types/lodash": "4.14.171",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
-    "@xmldom/xmldom": "0.7.13",
-    "@xterm/addon-fit": "0.10.0",
-    "@xterm/xterm": "5.5.0",
-    "allotment": "1.20.2",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.11.2",
+    "canvas": "file:./canvas",
     "clean-webpack-plugin": "4.0.0",
     "clipboard-copy": "4.0.1",
     "copy-webpack-plugin": "11.0.0",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
-    "d3": "7.8.5",
+    "d3": "6.1.1",
     "datatables.net-colreorder-dt": "1.7.0",
     "datatables.net-dt": "1.13.8",
     "date-fns": "1.29.0",
@@ -68,22 +65,20 @@
     "eslint-plugin-react": "7.33.2",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
-    "i18next": "23.11.5",
+    "i18next": "19.8.4",
     "i18next-browser-languagedetector": "6.0.1",
     "i18next-http-backend": "1.0.23",
     "iframe-resizer-react": "1.1.0",
-    "immer": "9.0.6",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.7.1",
     "jquery-typeahead": "2.11.1",
     "jquery-ui-dist": "1.13.2",
     "knockout": "3.5.1",
-    "loader-utils": "2.0.3",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.44.0",
     "ms": "2.1.3",
-    "p-retry": "6.2.1",
+    "p-retry": "4.6.2",
     "patch-package": "8.0.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
@@ -94,33 +89,27 @@
     "react-dnd-html5-backend": "14.0.0",
     "react-dom": "16.14.0",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "14.1.2",
+    "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
-    "react-window": "1.8.10",
     "react-youtube": "9.0.1",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "sanitize-html": "2.3.3",
-    "shell-quote": "1.7.3",
     "styled-components": "5.0.1",
     "swr": "0.4.0",
     "terser-webpack-plugin": "5.3.9",
-    "tinykeys": "2.1.0",
-    "underscore": "1.12.1",
+    "underscore": "1.9.1",
     "utility-types": "3.10.0",
-    "web-vitals": "4.2.4",
-    "uuid": "9.0.0",
     "zustand": "3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
-    "@babel/preset-env": "7.24.7",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@playwright/test": "1.49.1",
+    "@babel/core": "7.9.0",
+    "@babel/preset-env": "7.9.0",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.9.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -129,20 +118,19 @@
     "@types/datatables.net": "1.10.28",
     "@types/datatables.net-colreorder": "1.4.5",
     "@types/dom-to-image": "2.6.2",
-    "@types/enzyme": "3.10.12",
-    "@types/enzyme-adapter-react-16": "1.0.9",
+    "@types/enzyme": "3.10.7",
+    "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/hasher": "0.0.31",
-    "@types/jest": "29.5.12",
+    "@types/jest": "26.0.20",
     "@types/jquery": "3.5.29",
     "@types/node": "12.11.1",
     "@types/post-robot": "10.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "17.0.15",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/react-splitter-layout": "3.0.1",
-    "@types/react-window": "1.8.8",
     "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
@@ -151,55 +139,56 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "@webpack-cli/serve": "2.0.5",
-    "babel-jest": "29.7.0",
+    "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "create-file-webpack": "1.0.2",
     "css-loader": "6.8.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
-    "enzyme-to-json": "3.6.2",
+    "enzyme-adapter-react-16": "1.15.5",
+    "enzyme-to-json": "3.6.1",
     "eslint": "8.50.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-react-hooks": "4.6.0",
+    "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
     "fs-extra": "7.0.0",
     "html-inline-css-webpack-plugin": "1.11.2",
-    "html-loader": "5.0.0",
+    "html-loader": "0.5.5",
+    "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "5.5.3",
-    "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": "26.6.3",
+    "jest-canvas-mock": "2.3.1",
+    "jest-playwright-preset": "1.5.1",
     "jest-react-hooks-shallow": "1.5.1",
-    "jest-trx-results-processor": "3.0.2",
+    "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
     "less-loader": "11.1.3",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "7.1.0",
-    "node-fetch": "2.6.7",
+    "node-fetch": "2.6.1",
+    "playwright": "1.13.0",
     "prettier": "3.0.3",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
     "raw-loader": "0.5.1",
-    "react-dev-utils": "12.0.1",
+    "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.26.2",
-    "typescript": "4.9.5",
+    "typedoc": "0.21.5",
+    "typescript": "4.3.5",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.9.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.2"
+    "webpack-dev-server": "4.15.1"
   },
   "scripts": {
     "postinstall": "patch-package",
@@ -214,7 +203,6 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
-    "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",

patches/@phosphor+virtualdom+1.2.0.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/@phosphor/virtualdom/lib/index.d.ts b/node_modules/@phosphor/virtualdom/lib/index.d.ts
-index 95682b9..73e2daa 100644
---- a/node_modules/@phosphor/virtualdom/lib/index.d.ts
-+++ b/node_modules/@phosphor/virtualdom/lib/index.d.ts
-@@ -58,7 +58,7 @@ export declare type ElementEventMap = {
-     ondrop: DragEvent;
-     ondurationchange: Event;
-     onemptied: Event;
--    onended: MediaStreamErrorEvent;
-+    onended: ErrorEvent;
-     onerror: ErrorEvent;
-     onfocus: FocusEvent;
-     oninput: Event;

playwright.config.ts

@@ -1,95 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: "test",
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 3 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: process.env.CI ? "blob" : "html",
-  timeout: 10 * 60 * 1000,
-  use: {
-    trace: "off",
-    video: "off",
-    screenshot: "on",
-    testIdAttribute: "data-test",
-    contextOptions: {
-      ignoreHTTPSErrors: true,
-    },
-  },
-
-  expect: {
-    // Many of our expectations take a little longer than the default 5 seconds.
-    timeout: 15 * 1000,
-  },
-
-  projects: [
-    {
-      name: "chromium",
-      use: {
-        ...devices["Desktop Chrome"],
-        launchOptions: {
-          args: ["--disable-web-security", "--disable-features=IsolateOrigins,site-per-process"],
-        },
-      },
-    },
-    {
-      name: "firefox",
-      use: {
-        ...devices["Desktop Firefox"],
-        launchOptions: {
-          firefoxUserPrefs: {
-            "security.fileuri.strict_origin_policy": false,
-            "network.http.referer.XOriginPolicy": 0,
-            "network.http.referer.trimmingPolicy": 0,
-            "privacy.file_unique_origin": false,
-            "security.csp.enable": false,
-            "network.cors_preflight.allow_client_cert": true,
-            "dom.security.https_first": false,
-            "network.http.cross-origin-embedder-policy": false,
-            "network.http.cross-origin-opener-policy": false,
-            "browser.tabs.remote.useCrossOriginPolicy": false,
-            "browser.tabs.remote.useCORP": false,
-          },
-          args: ["--disable-web-security"],
-        },
-      },
-    },
-    {
-      name: "webkit",
-      use: {
-        ...devices["Desktop Safari"],
-      },
-    },
-    {
-      name: "Google Chrome",
-      use: {
-        ...devices["Desktop Chrome"],
-        channel: "chrome",
-        launchOptions: {
-          args: ["--disable-web-security", "--disable-features=IsolateOrigins,site-per-process"],
-        },
-      },
-    },
-    {
-      name: "Microsoft Edge",
-      use: {
-        ...devices["Desktop Edge"],
-        channel: "msedge",
-        launchOptions: {
-          args: ["--disable-web-security", "--disable-features=IsolateOrigins,site-per-process"],
-        },
-      },
-    },
-  ],
-
-  webServer: {
-    command: "npm run start",
-    url: "https://127.0.0.1:1234/_ready",
-    timeout: 120 * 1000,
-    ignoreHTTPSErrors: true,
-    reuseExistingServer: !process.env.CI,
-  },
-});

preview/.azure/config

@@ -1,7 +1,7 @@
 [defaults]
-group = dataexplorer-preview
+group = stfaul
 sku = P1v2
-appserviceplan = dataexplorer-preview
-location = westus2
-web = dataexplorer-preview
+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,14 +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 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) => {
@@ -21,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",
@@ -33,34 +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: { sha } }) => {
-      const explorer = new URL(`${previewSiteEndpoint}/commit/${sha}/explorer.html`);
+    .then(({ head: { ref, sha } }) => {
+      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("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);
@@ -68,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,18 +4,15 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "deploy": "az webapp up --name \"dataexplorer-preview\" --subscription \"cosmosdb-portalteam-runners\" --resource-group \"dataexplorer-preview\" --runtime \"NODE:20-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"
   },
   "keywords": [],
   "author": "Microsoft Corporation",
   "dependencies": {
-    "body-parser": "^1.20.3",
-    "express": "^4.21.2",
-    "http-proxy-middleware": "^3.0.3",
-    "node": "^20.19.5",
-    "node-fetch": "^2.6.1",
-    "path-to-regexp": "^0.1.12"
+    "express": "^4.17.1",
+    "http-proxy-middleware": "^1.1.0",
+    "node-fetch": "^2.6.1"
   }
-}
+}

src/Common/CollapsedResourceTree.tsx

@@ -0,0 +1,55 @@
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
+import { NormalizedEventKey } from "./Constants";
+
+export interface CollapsedResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: CollapsedResourceTreeProps): JSX.Element => {
+  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+
+  useEffect(() => {
+    if (focusButton.current) {
+      focusButton.current.focus();
+    }
+  });
+
+  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      toggleLeftPaneExpanded();
+      event.stopPropagation();
+    }
+  };
+
+  return (
+    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
+      <div className="main-nav nav">
+        <ul className="nav">
+          <li
+            className="resourceTreeCollapse"
+            id="collapseToggleLeftPaneButton"
+            role="button"
+            tabIndex={0}
+            aria-label={getApiShortDisplayName() + `Expand tree`}
+            onClick={toggleLeftPaneExpanded}
+            onKeyPress={onKeyPressToggleLeftPaneExpanded}
+            ref={focusButton}
+          >
+            <span className="leftarrowCollapsed">
+              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
+            </span>
+            <span className="collectionCollapsed">
+              <span>{getApiShortDisplayName()}</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

src/Common/Constants.ts

@@ -88,25 +88,8 @@ export class CapabilityNames {
   public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
   public static readonly EnableMongo: string = "EnableMongo";
   public static readonly EnableServerless: string = "EnableServerless";
-  public static readonly EnableNoSQLVectorSearch: string = "EnableNoSQLVectorSearch";
-  public static readonly EnableNoSQLFullTextSearch: string = "EnableNoSQLFullTextSearch";
-  public static readonly EnableDataMasking: string = "EnableDataMasking";
-  public static readonly EnableDynamicDataMasking: string = "EnableDynamicDataMasking";
-  public static readonly EnableNoSQLFullTextSearchPreviewFeatures: string = "EnableNoSQLFullTextSearchPreviewFeatures";
-  public static readonly EnableOnlineCopyFeature: string = "EnableOnlineContainerCopy";
 }
 
-export enum CapacityMode {
-  Provisioned = "Provisioned",
-  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";
@@ -129,7 +112,6 @@ export class AfecFeatures {
 
 export class TagNames {
   public static defaultExperience: string = "defaultExperience";
-  public static WorkloadType: string = "hidden-workload-type";
 }
 
 export class MongoDBAccounts {
@@ -142,12 +124,9 @@ export enum MongoBackendEndpointType {
   remote,
 }
 
-export class AadScopeEndpoints {
-  public static readonly Development: string = "https://cosmos.azure.com";
-  public static readonly MPAC: string = "https://cosmos.azure.com";
-  public static readonly Prod: string = "https://cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cosmos.azure.cn";
+export class BackendApi {
+  public static readonly GenerateToken: string = "GenerateToken";
+  public static readonly PortalSettings: string = "PortalSettings";
 }
 
 export class PortalBackendEndpoints {
@@ -166,18 +145,6 @@ export class MongoProxyEndpoints {
   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";
@@ -209,12 +176,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";
@@ -229,12 +190,6 @@ export class Queries {
   public static readonly DefaultMaxWaitTimeInSeconds = 30;
 }
 
-export class RBACOptions {
-  public static setAutomaticRBACOption: string = "Automatic";
-  public static setTrueRBACOption: string = "True";
-  public static setFalseRBACOption: string = "False";
-}
-
 export class SavedQueries {
   public static readonly CollectionName: string = "___Query";
   public static readonly DatabaseName: string = "___Cosmos";
@@ -260,14 +215,12 @@ export class Areas {
   public static ShareDialog: string = "Share Access Dialog";
   public static Notebook: string = "Notebook";
   public static Copilot: string = "Copilot";
-  public static CloudShell: string = "Cloud Shell";
 }
 
 export class HttpHeaders {
   public static activityId: string = "x-ms-activity-id";
   public static apiType: string = "x-ms-cosmos-apitype";
   public static authorization: string = "authorization";
-  public static entraIdToken: string = "x-ms-entraid-token";
   public static collectionIndexTransformationProgress: string =
     "x-ms-documentdb-collection-index-transformation-progress";
   public static continuation: string = "x-ms-continuation";
@@ -296,8 +249,6 @@ export class HttpHeaders {
   public static partitionKey: string = "x-ms-documentdb-partitionkey";
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-  public static xAPIKey: string = "X-API-Key";
-  public static sessionId: string = "x-ms-client-session-id";
 }
 
 export class ContentType {
@@ -319,7 +270,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;
@@ -531,19 +481,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 class GlobalSecondaryIndexLabels {
-  public static readonly NewGlobalSecondaryIndex: string = "New Global Secondary Index";
-}
-export class FeedbackLabels {
-  public static readonly provideFeedback: string = "Provide feedback";
-}
-
-export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
+export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 
 export const QueryCopilotSampleContainerSchema = {
@@ -779,10 +717,3 @@ export const ShortenedQueryCopilotSampleContainerSchema = {
 
   userPrompt: "find all products",
 };
-
-export enum MongoGuidRepresentation {
-  Standard = "Standard",
-  CSharpLegacy = "CSharpLegacy",
-  JavaLegacy = "JavaLegacy",
-  PythonLegacy = "PythonLegacy",
-}

src/Common/CosmosClient.test.ts

@@ -1,7 +1,47 @@
-import { PortalBackendEndpoints } from "Common/Constants";
-import { configContext, Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { ResourceType } from "@azure/cosmos";
+import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
-import { endpoint, getTokenFromAuthService, requestPlugin } from "./CosmosClient";
+import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
+
+describe("tokenProvider", () => {
+  const options = {
+    verb: "GET" as any,
+    path: "/",
+    resourceId: "",
+    resourceType: "dbs" as ResourceType,
+    headers: {},
+    getAuthorizationTokenUsingMasterKey: () => "",
+  };
+
+  beforeEach(() => {
+    updateConfigContext({
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+    });
+    window.fetch = jest.fn().mockImplementation(() => {
+      return {
+        json: () => "{}",
+        headers: new Map(),
+      };
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("calls the auth token service if no master key is set", async () => {
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(1);
+  });
+
+  it("does not call the auth service if a master key is set", async () => {
+    updateUserContext({
+      masterKey: "foo",
+    });
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(0);
+  });
+});
 
 describe("getTokenFromAuthService", () => {
   beforeEach(() => {
@@ -21,22 +61,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 +119,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

@@ -1,15 +1,12 @@
 import * as Cosmos from "@azure/cosmos";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { CosmosDbArtifactType } from "Contracts/FabricMessagesContract";
-import { AuthorizationToken } from "Contracts/FabricMessageTypes";
-import { checkDatabaseResourceTokensValidity, isFabricMirroredKey } from "Platform/Fabric/FabricUtil";
+import { AuthorizationToken } from "Contracts/MessageTypes";
+import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { useDataplaneRbacAuthorization } from "Utils/AuthorizationUtils";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
-import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
-import { FabricArtifactInfo, updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -20,17 +17,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  if (useDataplaneRbacAuthorization(userContext)) {
-    Logger.logInfo(
-      `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
-      "Explorer/tokenProvider",
-    );
-    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`,
-      );
-      return null;
-    }
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
     return authorizationToken;
@@ -42,7 +29,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return decodeURIComponent(headers.authorization);
   }
 
-  if (isFabricMirroredKey()) {
+  if (configContext.platform === Platform.Fabric) {
     switch (requestInfo.resourceType) {
       case Cosmos.ResourceType.conflicts:
       case Cosmos.ResourceType.container:
@@ -54,13 +41,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // User resource tokens
         // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = (
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-        ).resourceTokenInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(
-          (userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY])
-            .resourceTokenInfo.resourceTokensTimestamp,
-        );
+        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -71,15 +53,13 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
         // For now, these operations aren't used, so fetching the authorization token is commented out.
         // This provider must return a real token to pass validation by the client, so we return the cached resource token
         // (which is a valid token, but won't work for these operations).
-        const resourceTokens2 = (
-          userContext.fabricContext.artifactInfo as FabricArtifactInfo[CosmosDbArtifactType.MIRRORED_KEY]
-        ).resourceTokenInfo.resourceTokens;
+        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
         return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
 
       /* ************** TODO: Uncomment this code if we need to support these operations **************
       // User master tokens
       const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-        FabricMessageTypes.GetAuthorizationToken,
+        MessageTypes.GetAuthorizationToken,
         [requestInfo],
         userContext.fabricContext.connectionId,
       );
@@ -91,15 +71,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   }
 
   if (userContext.masterKey) {
-    Logger.logInfo(`Master Key exists`, "Explorer/tokenProvider");
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
-      verb,
-      resourceId,
-      resourceType,
-      headers,
-      userContext.masterKey,
-    );
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
   }
 
@@ -124,11 +97,7 @@ export const endpoint = () => {
     const location = _global.parent ? _global.parent.location : _global.location;
     return configContext.EMULATOR_ENDPOINT || location.origin;
   }
-  return (
-    userContext.selectedRegionalEndpoint ||
-    userContext.endpoint ||
-    userContext?.databaseAccount?.properties?.documentEndpoint
-  );
+  return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
 };
 
 export async function getTokenFromAuthService(
@@ -137,8 +106,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",
@@ -150,7 +119,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)}`);
@@ -167,25 +137,11 @@ enum SDKSupportedCapabilities {
 let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
-  if (_client) {
-    if (!userContext.refreshCosmosClient) {
-      return _client;
-    }
-    _client.dispose();
-    _client = null;
-  }
-
-  if (userContext.refreshCosmosClient) {
-    updateUserContext({
-      refreshCosmosClient: false,
-    });
-  }
+  if (_client) return _client;
 
   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 ||
@@ -201,12 +157,11 @@ export function client(): Cosmos.CosmosClient {
 
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
-    key: userContext.dataPlaneRbacEnabled ? "" : userContext.masterKey,
+    key: userContext.masterKey,
     tokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,
     connectionPolicy: {
-      enableEndpointDiscovery: !userContext.selectedRegionalEndpoint,
       retryOptions: {
         maxRetryAttemptCount: LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts),
         fixedRetryIntervalInMilliseconds: LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval),

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,7 +1,4 @@
-import { TagNames, WorkloadType } from "Common/Constants";
-import { Tags } from "Contracts/DataModels";
-import { isFabric } from "Platform/Fabric/FabricUtil";
-import { ApiType, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 
 function isVirtualNetworkFilterEnabled() {
   return userContext.databaseAccount?.properties?.isVirtualNetworkFilterEnabled;
@@ -18,48 +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;
-}
-
-export function isGlobalSecondaryIndexEnabled(): boolean {
-  return (
-    !isFabric() && userContext.apiType === "SQL" && userContext.databaseAccount?.properties?.enableMaterializedViews
-  );
-}
-
-export const getDatabaseEndpoint = (apiType: ApiType): string => {
-  switch (apiType) {
-    case "Mongo":
-      return "mongodbDatabases";
-    case "Cassandra":
-      return "cassandraKeyspaces";
-    case "Gremlin":
-      return "gremlinDatabases";
-    case "Tables":
-      return "tables";
-    case "SQL":
-    default:
-      return "sqlDatabases";
-  }
-};
-
-export const getCollectionEndpoint = (apiType: ApiType): string => {
-  switch (apiType) {
-    case "Mongo":
-      return "collections";
-    case "Cassandra":
-      return "tables";
-    case "Gremlin":
-      return "graphs";
-    case "SQL":
-    default:
-      return "containers";
-  }
-};

src/Common/DatabaseUtility.ts

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

src/Common/DocumentUtility.ts

@@ -1,9 +1,9 @@
 import { userContext } from "../UserContext";
 
-export const getEntityName = (multiple?: boolean): string => {
+export const getEntityName = (): string => {
   if (userContext.apiType === "Mongo") {
-    return multiple ? "documents" : "document";
+    return "document";
   }
 
-  return multiple ? "items" : "item";
+  return "item";
 };

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,54 +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);
-  });
-});
-describe("normalizeArmEndpoint", () => {
-  it("should append '/' if not present", () => {
-    expect(EnvironmentUtility.normalizeArmEndpoint("https://example.com")).toBe("https://example.com/");
-  });
-
-  it("should return the same uri if '/' is present at the end", () => {
-    expect(EnvironmentUtility.normalizeArmEndpoint("https://example.com/")).toBe("https://example.com/");
-  });
-
-  it("should handle empty string", () => {
-    expect(EnvironmentUtility.normalizeArmEndpoint("")).toBe("");
-  });
-});
-
-describe("getEnvironment", () => {
-  it("should return Prod environment", () => {
-    updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
-    });
-    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Prod);
-  });
-
-  it("should return Fairfax environment", () => {
-    updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Fairfax,
-    });
-    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Fairfax);
-  });
-
-  it("should return Mooncake environment", () => {
-    updateConfigContext({
-      PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mooncake,
-    });
-    expect(EnvironmentUtility.getEnvironment()).toBe(EnvironmentUtility.Environment.Mooncake);
-  });
 });

src/Common/EnvironmentUtility.ts

@@ -1,44 +1,6 @@
-import { AadScopeEndpoints, PortalBackendEndpoints } from "Common/Constants";
-import * as Logger from "Common/Logger";
-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];
-};
-
-export const getEnvironmentScopeEndpoint = (): string => {
-  const environment = getEnvironment();
-  const endpoint = AadScopeEndpoints[environment];
-  if (!endpoint) {
-    throw new Error("Cannot determine AAD scope endpoint");
-  }
-  const hrefEndpoint = new URL(endpoint).href.replace(/\/+$/, "/.default");
-  Logger.logInfo(
-    `Using AAD scope endpoint: ${hrefEndpoint}, Environment: ${environment}`,
-    "EnvironmentUtility/getEnvironmentScopeEndpoint",
-  );
-  return hrefEndpoint;
-};

src/Common/ErrorHandlingUtils.ts

@@ -23,10 +23,7 @@ export const handleError = (error: string | ARMError | Error, area: string, cons
 };
 
 export const getErrorMessage = (error: string | Error = ""): string => {
-  let errorMessage = typeof error === "string" ? error : error.message;
-  if (!errorMessage) {
-    errorMessage = JSON.stringify(error);
-  }
+  const errorMessage = typeof error === "string" ? error : error.message;
   return replaceKnownError(errorMessage);
 };
 
@@ -56,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/IteratorUtilities.ts

@@ -1,7 +1,5 @@
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import * as Constants from "../Common/Constants";
+import { QueryOperationOptions } from "@azure/cosmos";
 import { QueryResults } from "../Contracts/ViewModels";
-import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 
 interface QueryResponse {
   // [Todo] remove any
@@ -13,15 +11,17 @@ interface QueryResponse {
 }
 
 export interface MinimalQueryIterator {
-  fetchNext: () => Promise<QueryResponse>;
+  fetchNext: (queryOperationOptions?: QueryOperationOptions) => Promise<QueryResponse>;
 }
 
 // Pick<QueryIterator<any>, "fetchNext">;
 
-export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
-  TelemetryProcessor.traceStart(Action.ExecuteQuery);
-  return documentsIterator.fetchNext().then((response) => {
-    TelemetryProcessor.traceSuccess(Action.ExecuteQuery, { dataExplorerArea: Constants.Areas.Tab });
+export function nextPage(
+  documentsIterator: MinimalQueryIterator,
+  firstItemIndex: number,
+  queryOperationOptions?: QueryOperationOptions,
+): Promise<QueryResults> {
+  return documentsIterator.fetchNext(queryOperationOptions).then((response) => {
     const documents = response.resources;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const headers = (response as any).headers || {}; // TODO this is a private key. Remove any

src/Common/LoadingOverlay.test.tsx

@@ -1,52 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import LoadingOverlay from "./LoadingOverlay";
-
-describe("LoadingOverlay", () => {
-  const defaultProps = {
-    isLoading: true,
-    label: "Loading...",
-  };
-
-  it("should render loading overlay when isLoading is true", () => {
-    const { container } = render(<LoadingOverlay {...defaultProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("should render loading overlay with custom label", () => {
-    const customProps = {
-      isLoading: true,
-      label: "Processing your request...",
-    };
-    const { container } = render(<LoadingOverlay {...customProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("should render loading overlay with empty label", () => {
-    const emptyLabelProps = {
-      isLoading: true,
-      label: "",
-    };
-    const { container } = render(<LoadingOverlay {...emptyLabelProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("should return null when isLoading is false", () => {
-    const notLoadingProps = {
-      isLoading: false,
-      label: "Loading...",
-    };
-    const { container } = render(<LoadingOverlay {...notLoadingProps} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it("should handle long labels properly", () => {
-    const longLabelProps = {
-      isLoading: true,
-      label:
-        "This is a very long loading message that might span multiple lines and should still render correctly in the loading overlay component",
-    };
-    const { container } = render(<LoadingOverlay {...longLabelProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

src/Common/LoadingOverlay.tsx

@@ -1,31 +0,0 @@
-import { Overlay, Spinner, SpinnerSize } from "@fluentui/react";
-import React from "react";
-
-interface LoadingOverlayProps {
-  isLoading: boolean;
-  label: string;
-}
-
-const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading, label }) => {
-  if (!isLoading) {
-    return null;
-  }
-
-  return (
-    <Overlay
-      styles={{
-        root: {
-          backgroundColor: "rgba(255,255,255,0.9)",
-          zIndex: 9999,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        },
-      }}
-    >
-      <Spinner size={SpinnerSize.large} label={label} styles={{ label: { fontWeight: 600 } }} />
-    </Overlay>
-  );
-};
-
-export default LoadingOverlay;

src/Common/MessageHandler.ts

@@ -1,7 +1,5 @@
-import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import Q from "q";
 import * as _ from "underscore";
-import * as Logger from "../Common/Logger";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
 import * as Constants from "./Constants";
@@ -38,7 +36,7 @@ export function handleCachedDataMessage(message: any): void {
  * @returns
  */
 export function sendCachedDataMessage<TResponseDataModel>(
-  messageType: MessageTypes | FabricMessageTypes,
+  messageType: MessageTypes,
   params: Object[],
   scope?: string,
   timeoutInMs?: number,
@@ -97,18 +95,10 @@ const _sendMessage = (message: any): void => {
     const portalChildWindow = getDataExplorerWindow(window) || window;
     if (portalChildWindow === window) {
       // Current window is a child of portal, send message to portal window
-      if (portalChildWindow.document.referrer) {
-        portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer);
-      } else {
-        Logger.logError("Iframe failed to send message to portal", "MessageHandler");
-      }
+      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
     } else {
       // Current window is not a child of portal, send message to the child window instead (which is data explorer)
-      if (portalChildWindow.location.origin) {
-        portalChildWindow.postMessage(message, portalChildWindow.location.origin);
-      } else {
-        Logger.logError("Iframe failed to send message to data explorer", "MessageHandler");
-      }
+      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
     }
   }
 };

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,7 +71,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -75,18 +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",
-      });
+      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),
       );
     });
@@ -98,7 +103,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -109,18 +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",
-      });
+      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),
       );
     });
@@ -132,7 +135,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -143,18 +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",
-      });
+      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),
       );
     });
@@ -166,7 +167,7 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -177,19 +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,
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -198,20 +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",
-      });
-      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),
       );
     });
@@ -223,13 +231,13 @@ describe("MongoProxyClient", () => {
         databaseAccount,
       });
       updateConfigContext({
-        MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
+        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", () => {
@@ -241,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,15 +1,20 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
-import { getMongoGuidRepresentation } from "Shared/StorageUtility";
+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 { isDataplaneRbacEnabledForProxyApi } from "../Utils/AuthorizationUtils";
 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";
 
@@ -17,20 +22,13 @@ const defaultHeaders = {
   [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
   [CosmosSDKConstants.HttpHeaders.MaxEntityCount]: "100",
   [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15",
-  [HttpHeaders.sessionId]: userContext.sessionId,
 };
 
 function authHeaders() {
   if (userContext.authType === AuthType.EncryptedToken) {
     return { [HttpHeaders.guestAccessToken]: userContext.accessToken };
   } else {
-    const headers: { [key: string]: string } = {
-      [HttpHeaders.authorization]: userContext.authorizationToken,
-    };
-    if (isDataplaneRbacEnabledForProxyApi(userContext)) {
-      headers[HttpHeaders.entraIdToken] = userContext.aadToken;
-    }
-    return headers;
+    return { [HttpHeaders.authorization]: userContext.authorizationToken };
   }
 }
 
@@ -69,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 = {
@@ -87,7 +89,7 @@ export function queryDocuments(
     query,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT) || "";
+  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
 
   const headers = {
     ...defaultHeaders,
@@ -125,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("/");
@@ -148,12 +215,9 @@ export function readDocument(
       documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
         ? documentId.partitionKeyProperties?.[0]
         : "",
-    clientSettings: {
-      guidRepresentation: getMongoGuidRepresentation(),
-    },
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault("readDocument");
 
   return window
     .fetch(endpoint, {
@@ -173,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 = {
@@ -193,12 +306,9 @@ export function createDocument(
     partitionKey:
       collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
     documentContent: JSON.stringify(documentContent),
-    clientSettings: {
-      guidRepresentation: getMongoGuidRepresentation(),
-    },
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault("createDocument");
 
   return window
     .fetch(`${endpoint}/createDocument`, {
@@ -218,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("/");
@@ -243,11 +395,8 @@ export function updateDocument(
         ? documentId.partitionKeyProperties?.[0]
         : "",
     documentContent,
-    clientSettings: {
-      guidRepresentation: getMongoGuidRepresentation(),
-    },
   };
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault("updateDocument");
 
   return window
     .fetch(endpoint, {
@@ -268,38 +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,
-    clientSettings: {
-      guidRepresentation: getMongoGuidRepresentation(),
-    },
+    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: {
@@ -310,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];
 
@@ -340,7 +576,7 @@ export function createMongoCollectionWithProxy(
     isSharded: !!shardKey,
   };
 
-  const endpoint = getEndpoint(configContext.MONGO_PROXY_ENDPOINT);
+  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
 
   return window
     .fetch(`${endpoint}/createCollection`, {
@@ -360,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";
 
@@ -373,12 +672,6 @@ export function getEndpoint(endpoint: string): string {
   return url;
 }
 
-export class ThrottlingError extends Error {
-  constructor(message: string) {
-    super(message);
-  }
-}
-
 // TODO: This function throws most of the time except on Forbidden which is a bit strange
 // It causes problems for TypeScript understanding the types
 async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
@@ -388,14 +681,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);
 }
@@ -403,3 +688,24 @@ async function errorHandling(response: Response, action: string, params: unknown
 export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
   return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}/collections/${params.coll}`;
 }
+
+function useMongoProxyEndpoint(api: string): boolean {
+  const activeMongoProxyEndpoints: string[] = [
+    MongoProxyEndpoints.Development,
+    MongoProxyEndpoints.Mpac,
+    MongoProxyEndpoints.Prod,
+  ];
+  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
+  if (
+    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development &&
+    userContext.databaseAccount.properties.ipRules?.length > 0
+  ) {
+    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
+  }
+
+  return (
+    canAccessMongoProxy &&
+    configContext.NEW_MONGO_APIS?.includes(api) &&
+    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
+  );
+}

src/Common/Pager/Pager.css

@@ -1,13 +0,0 @@
-.pager-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  gap: 16px;
-}
-
-.pager-container > div {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}

src/Common/Pager/index.tsx

@@ -1,111 +0,0 @@
-import { IconButton, Text } from "@fluentui/react";
-import * as React from "react";
-import "./Pager.css";
-
-export interface PagerProps {
-  startIndex: number;
-  totalCount: number;
-  pageSize: number;
-  onLoadPage: (startIndex: number, pageSize: number) => void;
-  disabled?: boolean;
-  showFirstLast?: boolean;
-  showItemCount?: boolean;
-  className?: string;
-}
-
-const iconButtonStyles = {
-  root: {
-    backgroundColor: "transparent",
-  },
-  rootHovered: {
-    backgroundColor: "transparent",
-  },
-  rootPressed: {
-    backgroundColor: "transparent",
-  },
-  rootDisabled: {
-    backgroundColor: "transparent",
-  },
-  rootFocused: {
-    backgroundColor: "transparent",
-    outline: "none",
-  },
-};
-
-const Pager: React.FC<PagerProps> = ({
-  startIndex,
-  totalCount,
-  pageSize,
-  onLoadPage,
-  disabled = false,
-  showFirstLast = true,
-  showItemCount = true,
-  className,
-}) => {
-  // Calculate current page and total pages from startIndex
-  const currentPage = Math.floor(startIndex / pageSize) + 1;
-  const totalPages = Math.ceil(totalCount / pageSize);
-  const endIndex = Math.min(startIndex + pageSize, totalCount);
-
-  const handleFirstPage = () => onLoadPage(0, pageSize);
-  const handlePreviousPage = () => onLoadPage(startIndex - pageSize, pageSize);
-  const handleNextPage = () => onLoadPage(startIndex + pageSize, pageSize);
-  const handleLastPage = () => onLoadPage((totalPages - 1) * pageSize, pageSize);
-
-  if (totalCount === 0) {
-    return null;
-  }
-
-  return (
-    <div className={className || "pager-container"}>
-      {showItemCount && (
-        <Text>
-          Showing {startIndex + 1} - {endIndex} of {totalCount} items
-        </Text>
-      )}
-      <div>
-        {showFirstLast && (
-          <IconButton
-            iconProps={{ iconName: "DoubleChevronLeft" }}
-            title="First page"
-            ariaLabel="Go to first page"
-            onClick={handleFirstPage}
-            disabled={disabled || currentPage === 1}
-            styles={iconButtonStyles}
-          />
-        )}
-        <IconButton
-          iconProps={{ iconName: "ChevronLeft" }}
-          title="Previous page"
-          ariaLabel="Go to previous page"
-          onClick={handlePreviousPage}
-          disabled={disabled || currentPage === 1}
-          styles={iconButtonStyles}
-        />
-        <Text>
-          Page {currentPage} of {totalPages}
-        </Text>
-        <IconButton
-          iconProps={{ iconName: "ChevronRight" }}
-          title="Next page"
-          ariaLabel="Go to next page"
-          onClick={handleNextPage}
-          disabled={disabled || currentPage === totalPages}
-          styles={iconButtonStyles}
-        />
-        {showFirstLast && (
-          <IconButton
-            iconProps={{ iconName: "DoubleChevronRight" }}
-            title="Last page"
-            ariaLabel="Go to last page"
-            onClick={handleLastPage}
-            disabled={disabled || currentPage === totalPages}
-            styles={iconButtonStyles}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Pager;

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

@@ -3,7 +3,8 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import DocumentId, { IDocumentIdContainer } from "../Explorer/Tree/DocumentId";
+import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
+import DocumentId from "../Explorer/Tree/DocumentId";
 import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
@@ -161,10 +162,10 @@ export class QueriesClient {
       {
         partitionKey: QueriesClient.PartitionKey,
         partitionKeyProperties: ["id"],
-      } as IDocumentIdContainer,
+      } as DocumentsTab,
       query,
       [query.queryName],
-    );
+    ); // TODO: Remove DocumentId's dependency on DocumentsTab
     const options: any = { partitionKey: query.resourceId };
     return deleteDocument(queriesCollection, documentId)
       .then(

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,247 +0,0 @@
-import { monaco } from "Explorer/LazyMonaco";
-
-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> = {};
-
-const HELP_LINKS: Record<string, string> = {};
-
-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/ResourceTreeContainer.tsx

@@ -0,0 +1,90 @@
+import { ResourceTree } from "Explorer/Tree/ResourceTree";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import refreshImg from "../../images/refresh-cosmos.svg";
+import { AuthType } from "../AuthType";
+import Explorer from "../Explorer/Explorer";
+import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
+import { ResourceTree2 } from "../Explorer/Tree2/ResourceTree";
+import { userContext } from "../UserContext";
+import { getApiShortDisplayName } from "../Utils/APITypeUtils";
+import { Platform, configContext } from "./../ConfigContext";
+import { NormalizedEventKey } from "./Constants";
+
+export interface ResourceTreeContainerProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+  container: Explorer;
+}
+
+export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+  container,
+}: ResourceTreeContainerProps): JSX.Element => {
+  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+
+  useEffect(() => {
+    if (isLeftPaneExpanded) {
+      if (focusButton.current) {
+        focusButton.current.focus();
+      }
+    }
+  });
+
+  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      toggleLeftPaneExpanded();
+      event.stopPropagation();
+    }
+  };
+  return (
+    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
+      {/* Collections Window - - Start */}
+      <div id="mainslide" className="flexContainer">
+        {/* Collections Window Title/Command Bar - Start */}
+        <div className="collectiontitle">
+          <div className="coltitle">
+            <span className="titlepadcol">{getApiShortDisplayName()}</span>
+            <div className="float-right">
+              <span
+                className="padimgcolrefresh"
+                data-test="refreshTree"
+                role="button"
+                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
+                tabIndex={0}
+                aria-label={getApiShortDisplayName() + `Refresh tree`}
+                title="Refresh tree"
+              >
+                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
+              </span>
+              <span
+                className="padimgcolrefresh1"
+                id="expandToggleLeftPaneButton"
+                role="button"
+                onClick={toggleLeftPaneExpanded}
+                onKeyPress={onKeyPressToggleLeftPaneExpanded}
+                tabIndex={0}
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
+                title="Collapse Tree"
+                ref={focusButton}
+              >
+                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
+              </span>
+            </div>
+          </div>
+        </div>
+        {userContext.authType === AuthType.ResourceToken ? (
+          <ResourceTokenTree />
+        ) : userContext.features.enableKoResourceTree ? (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        ) : configContext.platform === Platform.Fabric ? (
+          <ResourceTree2 container={container} />
+        ) : (
+          <ResourceTree container={container} />
+        )}
+      </div>
+      {/*  Collections Window - End */}
+    </div>
+  );
+};

src/Common/ShimmerTree/ShimmerTree.tsx

@@ -1,32 +0,0 @@
-import { Shimmer, ShimmerElementType, Stack } from "@fluentui/react";
-import * as React from "react";
-
-export interface IndentLevel {
-  level: number;
-  width?: string;
-}
-interface ShimmerTreeProps {
-  indentLevels: IndentLevel[];
-  style?: React.CSSProperties;
-}
-
-const ShimmerTree = ({ indentLevels, style = {} }: ShimmerTreeProps) => {
-  const renderShimmers = (indent: IndentLevel) => (
-    <Shimmer
-      key={Math.random()}
-      shimmerElements={[
-        { type: ShimmerElementType.gap, width: `${indent.level * 20}px` },
-        { type: ShimmerElementType.line, height: 16, width: indent.width || "100%" },
-      ]}
-      style={{ marginBottom: 8 }}
-    />
-  );
-
-  return (
-    <Stack tokens={{ childrenGap: 8 }} style={{ width: "50%", ...style }} data-testid="shimmer-stack">
-      {indentLevels.map((indentLevel: IndentLevel) => renderShimmers(indentLevel))}
-    </Stack>
-  );
-};
-
-export default ShimmerTree;

src/Common/StyleConstants.ts

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

src/Common/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">
@@ -143,7 +142,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
               <Image
                 {...imageProps}
                 src={EditIcon}
-                alt={`Edit ${entityProperty} entity`}
+                alt="editEntity"
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
@@ -157,7 +156,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
             <Image
               {...imageProps}
               src={DeleteIcon}
-              alt={`Delete ${entityProperty} entity`}
+              alt="delete entity"
               id="deleteEntity"
               onClick={onDeleteEntity}
               tabIndex={0}

src/Common/Tooltip/InfoTooltip.tsx

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

src/Common/Upload/Upload.tsx

@@ -50,33 +50,10 @@ export const Upload: FunctionComponent<UploadProps> = ({
   const title = label + " to upload";
   return (
     <div>
-      <span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>
-        {label}
-      </span>
+      <span className="renewUploadItemsHeader">{label}</span>
       {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
       <Stack horizontal>
-        <TextField
-          styles={{
-            fieldGroup: {
-              width: 300,
-              backgroundColor: "var(--colorNeutralBackground3)",
-              borderColor: "var(--colorNeutralStroke1)",
-            },
-            field: {
-              backgroundColor: "var(--colorNeutralBackground3)",
-              color: "var(--colorNeutralForeground1)",
-            },
-            subComponentStyles: {
-              label: {
-                root: {
-                  color: "var(--colorNeutralForeground1)",
-                },
-              },
-            },
-          }}
-          readOnly
-          value={selectedFilesTitle.toString()}
-        />
+        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
         <input
           type="file"
           id="importFileInput"

src/Common/__snapshots__/CosmosClient.test.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
-{
+Object {
   "endpoint": "http://localhost/proxy",
-  "headers": {
+  "headers": Object {
     "x-ms-proxy-target": "http://localhost",
   },
   "path": "/dbs/foo",
@@ -11,9 +11,9 @@ exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`]
 `;
 
 exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
-{
+Object {
   "endpoint": "http://localhost/proxy",
-  "headers": {
+  "headers": Object {
     "x-ms-proxy-target": "baz",
   },
   "path": "/dbs/foo",

src/Common/__snapshots__/IteratorUtilities.test.ts.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`nextPage returns results for the next page 1`] = `
-{
+Object {
   "activityId": "foo",
-  "documents": [],
+  "documents": Array [],
   "firstItemIndex": 11,
   "hasMoreResults": false,
-  "headers": {},
+  "headers": Object {},
   "itemCount": 0,
   "lastItemIndex": 10,
   "requestCharge": 1,

src/Common/__snapshots__/LoadingOverlay.test.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingOverlay should handle long labels properly 1`] = `
-<div
-  class="ms-Overlay root-109"
->
-  <div
-    class="ms-Spinner root-111"
-  >
-    <div
-      class="ms-Spinner-circle ms-Spinner--large circle-112"
-    />
-    <div
-      class="ms-Spinner-label label-113"
-    >
-      This is a very long loading message that might span multiple lines and should still render correctly in the loading overlay component
-    </div>
-  </div>
-</div>
-`;
-
-exports[`LoadingOverlay should render loading overlay when isLoading is true 1`] = `
-<div
-  class="ms-Overlay root-109"
->
-  <div
-    class="ms-Spinner root-111"
-  >
-    <div
-      class="ms-Spinner-circle ms-Spinner--large circle-112"
-    />
-    <div
-      class="ms-Spinner-label label-113"
-    >
-      Loading...
-    </div>
-  </div>
-</div>
-`;
-
-exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
-<div
-  class="ms-Overlay root-109"
->
-  <div
-    class="ms-Spinner root-111"
-  >
-    <div
-      class="ms-Spinner-circle ms-Spinner--large circle-112"
-    />
-    <div
-      class="ms-Spinner-label label-113"
-    >
-      Processing your request...
-    </div>
-  </div>
-</div>
-`;
-
-exports[`LoadingOverlay should render loading overlay with empty label 1`] = `
-<div
-  class="ms-Overlay root-109"
->
-  <div
-    class="ms-Spinner root-111"
-  >
-    <div
-      class="ms-Spinner-circle ms-Spinner--large circle-112"
-    />
-    
-  </div>
-</div>
-`;

src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getCommonQueryOptions builds the correct default options objects 1`] = `
-{
-  "enableQueryControl": false,
+Object {
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 0,
@@ -12,8 +11,7 @@ exports[`getCommonQueryOptions builds the correct default options objects 1`] =
 `;
 
 exports[`getCommonQueryOptions reads from localStorage 1`] = `
-{
-  "enableQueryControl": false,
+Object {
   "enableScanInQuery": true,
   "forceQueryPlan": true,
   "maxDegreeOfParallelism": 17,

src/Common/dataAccess/createCollection.ts

@@ -1,7 +1,4 @@
 import { ContainerRequest, ContainerResponse, DatabaseRequest, DatabaseResponse, RequestOptions } from "@azure/cosmos";
-import { sendMessage } from "Common/MessageHandler";
-import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
@@ -9,13 +6,13 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { createUpdateSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { createUpdateTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { createMongoCollectionWithProxy } from "../MongoProxyClient";
@@ -27,7 +24,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (!isFabricNative() && userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,
@@ -45,14 +42,6 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
     }
 
     logConsoleInfo(`Successfully created container ${params.collectionId}`);
-
-    if (isFabricNative()) {
-      sendMessage({
-        type: FabricMessageTypes.ContainerUpdated,
-        params: { updateType: "created" },
-      });
-    }
-
     return collection;
   } catch (error) {
     handleError(error, "CreateCollection", `Error while creating container ${params.collectionId}`);
@@ -107,12 +96,6 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   if (params.uniqueKeyPolicy) {
     resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
   }
-  if (params.vectorEmbeddingPolicy) {
-    resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
-  }
-  if (params.fullTextPolicy) {
-    resource.fullTextPolicy = params.fullTextPolicy;
-  }
 
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
@@ -283,8 +266,6 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     indexingPolicy: params.indexingPolicy || undefined,
     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/createDatabase.ts

@@ -4,7 +4,6 @@ import * as DataModels from "../../Contracts/DataModels";
 import { useDatabases } from "../../Explorer/useDatabases";
 import { userContext } from "../../UserContext";
 import { getDatabaseName } from "../../Utils/APITypeUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { createUpdateCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { createUpdateGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { createUpdateMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
@@ -16,6 +15,7 @@ import {
   MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
 } from "../../Utils/arm/generatedClients/cosmos/types";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -152,18 +152,8 @@ async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): P
       createBody.throughput = params.offerThroughput;
     }
   }
-  let response: DatabaseResponse;
-  try {
-    response = await client().databases.create(createBody);
-  } catch (error) {
-    if (error.message.includes("Shared throughput database creation is not supported for serverless accounts")) {
-      createBody.maxThroughput = undefined;
-      createBody.throughput = undefined;
-      response = await client().databases.create(createBody);
-    } else {
-      throw error;
-    }
-  }
+
+  const response: DatabaseResponse = await client().databases.create(createBody);
   return response.resource;
 }
 

src/Common/dataAccess/createMaterializedView.ts

@@ -1,74 +0,0 @@
-import { constructRpOptions } from "Common/dataAccess/createCollection";
-import { handleError } from "Common/ErrorHandlingUtils";
-import { Collection, CreateMaterializedViewsParams as CreateGlobalSecondaryIndexParams } from "Contracts/DataModels";
-import { userContext } from "UserContext";
-import { createUpdateSqlContainer } from "Utils/arm/generatedClients/cosmos/sqlResources";
-import {
-  CreateUpdateOptions,
-  SqlContainerResource,
-  SqlDatabaseCreateUpdateParameters,
-} from "Utils/arm/generatedClients/cosmos/types";
-import { logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
-
-export const createGlobalSecondaryIndex = async (params: CreateGlobalSecondaryIndexParams): Promise<Collection> => {
-  const clearMessage = logConsoleProgress(
-    `Creating a new global secondary index ${params.materializedViewId} for database ${params.databaseId}`,
-  );
-
-  const options: CreateUpdateOptions = constructRpOptions(params);
-
-  const resource: SqlContainerResource = {
-    id: params.materializedViewId,
-  };
-  if (params.materializedViewDefinition) {
-    resource.materializedViewDefinition = params.materializedViewDefinition;
-  }
-  if (params.analyticalStorageTtl) {
-    resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
-  if (params.indexingPolicy) {
-    resource.indexingPolicy = params.indexingPolicy;
-  }
-  if (params.partitionKey) {
-    resource.partitionKey = params.partitionKey;
-  }
-  if (params.uniqueKeyPolicy) {
-    resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
-  }
-  if (params.vectorEmbeddingPolicy) {
-    resource.vectorEmbeddingPolicy = params.vectorEmbeddingPolicy;
-  }
-  if (params.fullTextPolicy) {
-    resource.fullTextPolicy = params.fullTextPolicy;
-  }
-
-  const rpPayload: SqlDatabaseCreateUpdateParameters = {
-    properties: {
-      resource,
-      options,
-    },
-  };
-
-  try {
-    const createResponse = await createUpdateSqlContainer(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.materializedViewId,
-      rpPayload,
-    );
-    logConsoleInfo(`Successfully created global secondary index ${params.materializedViewId}`);
-
-    return createResponse && (createResponse.properties.resource as Collection);
-  } catch (error) {
-    handleError(
-      error,
-      "CreateGlobalSecondaryIndex",
-      `Error while creating global secondary index ${params.materializedViewId}`,
-    );
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};

src/Common/dataAccess/deleteCollection.ts

@@ -1,6 +1,3 @@
-import { sendMessage } from "Common/MessageHandler";
-import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
-import { isFabric } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
@@ -15,17 +12,12 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations && !isFabric()) {
+    if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();
     }
     logConsoleInfo(`Successfully deleted container ${collectionId}`);
-
-    sendMessage({
-      type: FabricMessageTypes.ContainerUpdated,
-      params: { updateType: "deleted" },
-    });
   } catch (error) {
     handleError(error, "DeleteCollection", `Error while deleting container ${collectionId}`);
     throw error;

src/Common/dataAccess/deleteDocument.ts

@@ -1,4 +1,3 @@
-import { BulkOperationType, OperationInput } from "@azure/cosmos";
 import { CollectionBase } from "../../Contracts/ViewModels";
 import DocumentId from "../../Explorer/Tree/DocumentId";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -25,71 +24,3 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
     clearMessage();
   }
 };
-
-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
- */
-export const deleteDocuments = async (
-  collection: CollectionBase,
-  documentIds: DocumentId[],
-  abortSignal: AbortSignal,
-): Promise<IBulkDeleteResult[]> => {
-  const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
-  try {
-    const v2Container = await client().database(collection.databaseId).container(collection.id());
-
-    // Bulk can only delete 100 documents at a time
-    const BULK_DELETE_LIMIT = 100;
-    const promiseArray = [];
-
-    while (documentIds.length > 0) {
-      const documentIdsChunk = documentIds.splice(0, BULK_DELETE_LIMIT);
-      const operations: OperationInput[] = documentIdsChunk.map((documentId) => ({
-        id: documentId.id(),
-        // bulk delete: if not partition key is specified, do not pass empty array, but undefined
-        partitionKey:
-          documentId.partitionKeyValue &&
-          Array.isArray(documentId.partitionKeyValue) &&
-          documentId.partitionKeyValue.length === 0
-            ? undefined
-            : documentId.partitionKeyValue,
-        operationType: BulkOperationType.Delete,
-      }));
-
-      const promise = v2Container.items
-        .bulk(operations, undefined, {
-          abortSignal,
-        })
-        .then((bulkResults) => {
-          return bulkResults.map((bulkResult, index) => {
-            const documentId = documentIdsChunk[index];
-            return { ...bulkResult, documentId };
-          });
-        });
-      promiseArray.push(promise);
-    }
-
-    const allResult = await Promise.all(promiseArray);
-    const flatAllResult = Array.prototype.concat.apply([], allResult);
-    return flatAllResult;
-  } catch (error) {
-    handleError(
-      error,
-      "DeleteDocuments",
-      `Error while deleting ${documentIds.length} ${getEntityName(documentIds.length > 1)}`,
-    );
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -1,4 +1,3 @@
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { AuthType } from "../../AuthType";
 import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
@@ -42,7 +41,7 @@ interface MetricsResponse {
 }
 
 export const getCollectionUsageSizeInKB = async (databaseName: string, containerName: string): Promise<number> => {
-  if (userContext.authType !== AuthType.AAD || isFabricNative()) {
+  if (userContext.authType !== AuthType.AAD) {
     return undefined;
   }
 

src/Common/dataAccess/queryDocuments.ts

@@ -25,7 +25,6 @@ export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
     options.maxItemCount ||
     (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
     Queries.itemsPerPage;
-  options.enableQueryControl = LocalStorageUtility.getEntryBoolean(StorageKey.QueryControlEnabled);
   options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
   return options;
 };

src/Common/dataAccess/queryDocumentsPage.ts

@@ -1,3 +1,4 @@
+import { QueryOperationOptions } from "@azure/cosmos";
 import { QueryResults } from "../../Contracts/ViewModels";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { getEntityName } from "../DocumentUtility";
@@ -8,12 +9,13 @@ export const queryDocumentsPage = async (
   resourceName: string,
   documentsIterator: MinimalQueryIterator,
   firstItemIndex: number,
+  queryOperationOptions?: QueryOperationOptions,
 ): Promise<QueryResults> => {
   const entityName = getEntityName();
   const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
 
   try {
-    const result: QueryResults = await nextPage(documentsIterator, firstItemIndex);
+    const result: QueryResults = await nextPage(documentsIterator, firstItemIndex, queryOperationOptions);
     const itemCount = (result.documents && result.documents.length) || 0;
     logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
     return result;

src/Common/dataAccess/readCollection.ts

@@ -2,6 +2,7 @@ import { CosmosClient } from "@azure/cosmos";
 import { sampleDataClient } from "Common/SampleDataClient";
 import { userContext } from "UserContext";
 import * as DataModels from "../../Contracts/DataModels";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -30,6 +31,7 @@ export async function readCollectionInternal(
   collectionId: string,
 ): Promise<DataModels.Collection> {
   let collection: DataModels.Collection;
+  const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
   try {
     const response = await cosmosClient.database(databaseId).container(collectionId).read();
     collection = response.resource as DataModels.Collection;
@@ -37,5 +39,6 @@ export async function readCollectionInternal(
     handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
     throw error;
   }
+  clearMessage();
   return collection;
 }