Fix P2 bgs

.eslintignore

@@ -145,5 +145,4 @@ src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
 __mocks__/monaco-editor.ts
 src/Explorer/Tree/ResourceTree.tsx
-src/Utils/EndpointUtils.ts
 src/Utils/PriorityBasedExecutionUtils.ts

.eslintrc.js

@@ -53,9 +53,4 @@ module.exports = {
       },
     ],
   },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
 };

.github/workflows/ci.yml

@@ -8,20 +8,17 @@ on:
   pull_request:
     branches:
       - master
-permissions:
-  id-token: write
-  contents: read
 jobs:
   codemetrics:
     runs-on: ubuntu-latest
     name: "Log Code Metrics"
     if: github.ref == 'refs/heads/master'
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: node utils/codeMetrics.js
         env:
@@ -30,11 +27,11 @@ jobs:
     runs-on: ubuntu-latest
     name: "Compile TypeScript"
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run compile
       - run: npm run compile:strict
@@ -42,44 +39,44 @@ jobs:
     runs-on: ubuntu-latest
     name: "Check Format"
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run format:check
   lint:
     runs-on: ubuntu-latest
     name: "Lint"
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run lint
   unittest:
     runs-on: ubuntu-latest
     name: "Unit Tests"
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run test
   build:
     runs-on: ubuntu-latest
     name: "Build"
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
@@ -89,10 +86,10 @@ jobs:
           key: ${{ runner.os }}-build-cache
       - run: npm run pack:prod
         env:
-          NODE_OPTIONS: "--max-old-space-size=4096"
+          NODE_OPTIONS: '--max-old-space-size=4096'
       - run: cp -r ./Contracts ./dist/contracts
       - run: cp -r ./configs ./dist/configs
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: dist
           path: dist/
@@ -110,11 +107,11 @@ jobs:
     if: false
     runs-on: windows-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-      - name: Use Node.js 18.x
+      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - uses: southpolesteve/cosmos-emulator-github-action@v1
       - name: End to End Tests
         run: |
@@ -127,7 +124,7 @@ jobs:
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
           PLATFORM: "Emulator"
           NODE_TLS_REJECT_UNAUTHORIZED: 0
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
@@ -137,7 +134,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
-      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
     strategy:
       fail-fast: false
       matrix:
@@ -148,22 +145,15 @@ jobs:
           - ./test/mongo/container.spec.ts
           - ./test/mongo/container32.spec.ts
           - ./test/selfServe/selfServeExample.spec.ts
+          # - ./test/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
-
+      - name: Use Node.js 14.x
-      - name: "Az CLI login"
+        uses: actions/setup-node@v1
-        uses: azure/login@v1
         with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          node-version: 14.x
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.x
       - run: npm ci
       - run: npm start &
       - run: npm run wait-for-server
@@ -172,7 +162,7 @@ jobs:
           # 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
+      - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
@@ -190,14 +180,14 @@ jobs:
         with:
           nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v2
         with:
           name: dist
       - run: cp ./configs/prod.json config.json
       - 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
+      - uses: actions/upload-artifact@v2
         name: packages
         with:
           path: "*.nupkg"
@@ -214,7 +204,7 @@ jobs:
         with:
           nuget-api-key: ${{ secrets.NUGET_API_KEY }}
       - name: Download Dist Folder
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v2
         with:
           name: dist
       - run: cp ./configs/mpac.json config.json
@@ -222,7 +212,7 @@ jobs:
       - 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
+      - uses: actions/upload-artifact@v2
         name: packages
         with:
           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,20 +16,13 @@ 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: Use Node.js 14.x
-      - name: "Az CLI login"
-        uses: azure/login@v1
-        with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-
-      - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 18.x
+          node-version: 14.x
       - run: npm ci
       - run: node utils/cleanupDBs.js

.vscode/settings.json

@@ -20,8 +20,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
+    "source.fixAll.eslint": true,
-    "source.organizeImports": "explicit"
+    "source.organizeImports": true
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "editor.defaultFormatter": "esbenp.prettier-vscode"

configs/mpac.json

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

images/Home_16.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.31299 1.26164C7.69849 0.897163 8.30151 0.897163 8.68701 1.26164L13.5305 5.84098C13.8302 6.12431 14 6.51853 14 6.93094V12.5002C14 13.3286 13.3284 14.0002 12.5 14.0002H10.5C9.67157 14.0002 9 13.3286 9 12.5002V10.0002C9 9.72407 8.77614 9.50021 8.5 9.50021H7.5C7.22386 9.50021 7 9.72407 7 10.0002V12.5002C7 13.3286 6.32843 14.0002 5.5 14.0002H3.5C2.67157 14.0002 2 13.3286 2 12.5002V6.93094C2 6.51853 2.1698 6.12431 2.46948 5.84098L7.31299 1.26164ZM8 1.98828L3.15649 6.56762C3.0566 6.66207 3 6.79347 3 6.93094V12.5002C3 12.7763 3.22386 13.0002 3.5 13.0002H5.5C5.77614 13.0002 6 12.7763 6 12.5002V10.0002C6 9.17179 6.67157 8.50022 7.5 8.50022H8.5C9.32843 8.50022 10 9.17179 10 10.0002V12.5002C10 12.7763 10.2239 13.0002 10.5 13.0002H12.5C12.7761 13.0002 13 12.7763 13 12.5002V6.93094C13 6.79347 12.9434 6.66207 12.8435 6.56762L8 1.98828Z" fill="#0078D4" />
-</svg>

less/Common/Constants.less

@@ -147,7 +147,6 @@
 
 // CommandBar
 @CommandBarButtonHeight: 40px;
-@FabricCommandBarButtonHeight: 34px;
 
 /**********************************************************************************
                               Portal Consts
@@ -163,10 +162,9 @@
 /**********************************************************************************/
 
 @FabricFont: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-@FabricToolbarIconColor: "brightness(0) saturate(100%) invert(50%) sepia(17%) saturate(1459%) hue-rotate(81deg) brightness(99%) contrast(94%)";
 
 @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;
+@FabricBoxBorderShadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
 @FabricBoxMargin: 4px 3px 4px 3px;
 
 @FabricAccentMediumHigh: #0c695a;

less/documentDB.less

@@ -2296,17 +2296,6 @@ a:link {
   display: none !important;
 }
 
-.monaco-editor .quick-input-list-label {
-  /* Restore some of Monaco's default styles that are clobbered by our global styles */
-  padding: 0;
-  line-height: 22px;
-}
-
-.monaco-editor .quick-input-list .highlight {
-  /* Padding in highlighted text within the quick input list breaks the flow of the text */
-  padding: 0;
-}
-
 td a {
   color: #393939;
 }
@@ -2908,21 +2897,9 @@ a:link {
     padding-left: 8px;
   }
 
-  .settingsSectionInlineCheckbox {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 5px;
-  }
-
   .settingsSectionLabel {
     margin-bottom: @DefaultSpace;
     margin-right: 5px;
-
-    .panelInfoIcon {
-      margin-left: 5px;
-    }
   }
 
   .pageOptionsPart {

less/documentDBFabric.less

@@ -25,38 +25,33 @@ a:focus {
 }
 
 .resourceTreeAndTabs {
-  border-radius: 0px;
+  border-radius: @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
   margin: @FabricBoxMargin;
-  margin-top: 0px;
+  margin-top: 4px;
-  margin-bottom: 0px;
   background-color: #ffffff;
 }
 
 .tabsManagerContainer {
-  background-color: #ffffff
+  background-color: #fafafa
 }
 
 .nav-tabs-margin {
   padding-top: 8px;
-  background-color: #ffffff
+  background-color: #fafafa
 }
 
 .commandBarContainer {
   background-color: #ffffff;
-  border-radius: @FabricBoxBorderRadius @FabricBoxBorderRadius 0px 0px;
+  border-bottom: none;
+  border-radius: @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
   margin: @FabricBoxMargin;
-  margin-top: 0px;
-  margin-bottom: 0px;
   padding-top: 2px;
-  padding: 0px;
-  height: 40px;
 }
 
 .dividerContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
-  height: @FabricCommandBarButtonHeight;
   .flex-display();
 
   span {
@@ -163,10 +158,9 @@ a:focus {
 
 
 .dataExplorerErrorConsoleContainer {
-  border-radius:  0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
+  border-radius: @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
   margin: @FabricBoxMargin;
-  margin-top: 0px;
   width: auto;
   align-self: auto;
 }

package.json

@@ -5,19 +5,19 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "4.0.1-beta.2",
+    "@azure/cosmos": "4.0.0",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
     "@azure/ms-rest-nodeauth": "3.0.7",
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.112.1",
+    "@fluentui/react": "8.14.3",
-    "@fluentui/react-components": "9.34.0",
+    "@fluentui/react-components": "9.32.1",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
-    "@nteract/commutable": "7.5.1",
+    "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -49,20 +49,20 @@
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
-    "clean-webpack-plugin": "4.0.0",
+    "clean-webpack-plugin": "3.0.0",
     "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "9.0.1",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
     "d3": "6.1.1",
-    "datatables.net-colreorder-dt": "1.7.0",
+    "datatables.net-colreorder-dt": "1.5.1",
-    "datatables.net-dt": "1.13.8",
+    "datatables.net-dt": "1.10.19",
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
     "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
-    "eslint-plugin-jest": "27.4.2",
+    "eslint-plugin-jest": "23.13.2",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
     "i18next": "19.8.4",
@@ -71,15 +71,14 @@
     "iframe-resizer-react": "1.1.0",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
-    "jquery": "3.7.1",
+    "jquery": "3.5.1",
-    "jquery-typeahead": "2.11.1",
+    "jquery-typeahead": "2.10.6",
-    "jquery-ui-dist": "1.13.2",
+    "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
-    "monaco-editor": "0.44.0",
+    "monaco-editor": "0.18.1",
     "ms": "2.1.3",
-    "p-retry": "4.6.2",
+    "p-retry": "4.2.0",
-    "patch-package": "8.0.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
     "q": "1.5.1",
@@ -87,7 +86,7 @@
     "react-animate-height": "2.0.8",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
-    "react-dom": "16.14.0",
+    "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
@@ -95,12 +94,14 @@
     "react-splitter-layout": "4.0.0",
     "react-string-format": "1.0.1",
     "react-youtube": "9.0.1",
+    "redux": "4.0.4",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
+    "rxjs": "6.6.3",
     "sanitize-html": "2.3.3",
-    "styled-components": "5.0.1",
+    "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "5.3.9",
+    "terser-webpack-plugin": "5.1.4",
     "underscore": "1.9.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
@@ -115,14 +116,11 @@
     "@types/codemirror": "0.0.56",
     "@types/crossroads": "0.0.30",
     "@types/d3": "5.9.2",
-    "@types/datatables.net": "1.10.28",
-    "@types/datatables.net-colreorder": "1.4.5",
     "@types/dom-to-image": "2.6.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/hasher": "0.0.31",
     "@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",
@@ -136,62 +134,61 @@
     "@types/styled-components": "5.1.1",
     "@types/underscore": "1.7.36",
     "@types/youtube-player": "5.5.6",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/parser": "6.7.4",
+    "@typescript-eslint/parser": "4.22.0",
-    "@webpack-cli/serve": "2.0.5",
+    "@webpack-cli/serve": "1.5.2",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
-    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
     "create-file-webpack": "1.0.2",
-    "css-loader": "6.8.1",
+    "css-loader": "1.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.5",
     "enzyme-to-json": "3.6.1",
-    "eslint": "8.50.0",
+    "eslint": "7.8.1",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
-    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-plugin-prefer-arrow": "1.2.2",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
+    "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
-    "html-inline-css-webpack-plugin": "1.11.2",
+    "html-inline-css-webpack-plugin": "1.11.0",
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "5.5.3",
+    "html-webpack-plugin": "5.3.2",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "jest-playwright-preset": "1.5.1",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
-    "less-loader": "11.1.3",
+    "less-loader": "4.1.0",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "2.1.0",
-    "monaco-editor-webpack-plugin": "7.1.0",
+    "monaco-editor-webpack-plugin": "1.7.0",
     "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": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.21.5",
+    "typedoc": "0.20.36",
-    "typescript": "4.3.5",
+    "typescript": "4.3.4",
-    "url-loader": "4.1.1",
+    "url-loader": "1.1.1",
     "wait-on": "4.0.2",
-    "webpack": "5.88.2",
+    "webpack": "5.47.0",
-    "webpack-bundle-analyzer": "4.9.1",
+    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "5.1.4",
+    "webpack-cli": "4.7.2",
-    "webpack-dev-server": "4.15.1"
+    "webpack-dev-server": "3.11.2"
   },
   "scripts": {
-    "postinstall": "patch-package",
     "start": "webpack serve --mode development",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",

patches/datatables.net-colreorder+1.7.0.patch

@@ -1,22 +0,0 @@
-diff --git a/node_modules/datatables.net-colreorder/types/types.d.ts b/node_modules/datatables.net-colreorder/types/types.d.ts
-index e5dc283..1930c2b 100644
---- a/node_modules/datatables.net-colreorder/types/types.d.ts
-+++ b/node_modules/datatables.net-colreorder/types/types.d.ts
-@@ -7,7 +7,7 @@
- 
- /// <reference types="jquery" />
- 
--import DataTables, {Api} from 'datatables.net';
-+import DataTables, { Api } from 'datatables.net';
- 
- export default DataTables;
- 
-@@ -40,6 +40,8 @@ declare module 'datatables.net' {
- 			/**
- 			 * Create a new ColReorder instance for the target DataTable
- 			 */
-+      // Ignore this error: error TS7013: Construct signature, which lacks return-type annotation, implicitly has an 'any' return type.
-+      // @ts-ignore
- 			new (dt: Api<any>, settings: boolean | ConfigColReorder);
- 
- 			/**

src/Common/Constants.ts

@@ -124,36 +124,7 @@ export enum MongoBackendEndpointType {
   remote,
 }
 
-export class BackendApi {
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
-  public static readonly GenerateToken: string = "GenerateToken";
-  public static readonly PortalSettings: string = "PortalSettings";
-}
-
-export class PortalBackendEndpoints {
-  public static readonly Development: string = "https://localhost:7235";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-pbe.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-pbe.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-pbe.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-pbe.cosmos.azure.cn";
-}
-
-export class MongoProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7238";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-mp.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-mp.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-mp.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-mp.cosmos.azure.cn";
-}
-
-export class CassandraProxyEndpoints {
-  public static readonly Development: string = "https://localhost:7240";
-  public static readonly Mpac: string = "https://cdb-ms-mpac-cp.cosmos.azure.com";
-  public static readonly Prod: string = "https://cdb-ms-prod-cp.cosmos.azure.com";
-  public static readonly Fairfax: string = "https://cdb-ff-prod-cp.cosmos.azure.us";
-  public static readonly Mooncake: string = "https://cdb-mc-prod-cp.cosmos.azure.cn";
-}
-
-//TODO: Remove this when new backend is migrated over
 export class CassandraBackend {
   public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
   public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
@@ -165,17 +136,6 @@ export class CassandraBackend {
   public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
 }
 
-export class CassandraProxyAPIs {
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
-  public static readonly connectionStringCreateOrDeleteApi: string = "api/connectionstring/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra";
-  public static readonly connectionStringQueryApi: string = "api/connectionstring/cassandra";
-  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly connectionStringKeysApi: string = "api/connectionstring/cassandra/keys";
-  public static readonly schemaApi: string = "api/cassandra/schema";
-  public static readonly connectionStringSchemaApi: string = "api/connectionstring/cassandra/schema";
-}
-
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";
@@ -185,9 +145,6 @@ export class Queries {
   public static QueryEditorMinHeightRatio: number = 0.1;
   public static QueryEditorMaxHeightRatio: number = 0.4;
   public static readonly DefaultMaxDegreeOfParallelism = 6;
-  public static readonly DefaultRetryAttempts = 9;
-  public static readonly DefaultRetryIntervalInMs = 0;
-  public static readonly DefaultMaxWaitTimeInSeconds = 30;
 }
 
 export class SavedQueries {
@@ -251,10 +208,6 @@ export class HttpHeaders {
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
 }
 
-export class ContentType {
-  public static applicationJson: string = "application/json";
-}
-
 export class ApiType {
   // Mapped to hexadecimal values in the backend
   public static readonly MongoDB: number = 1;

src/Common/CosmosClient.ts

@@ -1,8 +1,8 @@
 import * as Cosmos from "@azure/cosmos";
+import { sendCachedDataMessage } from "Common/MessageHandler";
 import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
-import { AuthorizationToken } from "Contracts/MessageTypes";
+import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
 import { Platform, configContext } from "../ConfigContext";
@@ -39,10 +39,9 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       case Cosmos.ResourceType.item:
       case Cosmos.ResourceType.pkranges:
         // User resource tokens
-        // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        const resourceTokens = userContext.fabricDatabaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
+        checkDatabaseResourceTokensValidity(userContext.fabricDatabaseConnectionInfo.resourceTokensTimestamp);
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -50,23 +49,13 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       case Cosmos.ResourceType.offer:
       case Cosmos.ResourceType.user:
       case Cosmos.ResourceType.permission:
-        // For now, these operations aren't used, so fetching the authorization token is commented out.
+        // User master tokens
-        // This provider must return a real token to pass validation by the client, so we return the cached resource token
+        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
-        // (which is a valid token, but won't work for these operations).
+          requestInfo,
-        const resourceTokens2 = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
+        ]);
-        return getAuthorizationTokenUsingResourceTokens(resourceTokens2, requestInfo.path, requestInfo.resourceId);
+        console.log("Response from Fabric: ", authorizationToken);
-
+        headers[HttpHeaders.msDate] = authorizationToken.XDate;
-      /* ************** TODO: Uncomment this code if we need to support these operations **************
+        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
-      // User master tokens
-      const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-        MessageTypes.GetAuthorizationToken,
-        [requestInfo],
-        userContext.fabricContext.connectionId,
-      );
-      console.log("Response from Fabric: ", authorizationToken);
-      headers[HttpHeaders.msDate] = authorizationToken.XDate;
-      return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
-       ***********************************************************************************************/
     }
   }
 
@@ -161,13 +150,6 @@ export function client(): Cosmos.CosmosClient {
     tokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,
-    connectionPolicy: {
-      retryOptions: {
-        maxRetryAttemptCount: LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts),
-        fixedRetryIntervalInMilliseconds: LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval),
-        maxWaitTimeInSeconds: LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds),
-      },
-    },
   };
 
   if (configContext.PROXY_PATH !== undefined) {

src/Common/IteratorUtilities.ts

@@ -1,4 +1,3 @@
-import { QueryOperationOptions } from "@azure/cosmos";
 import { QueryResults } from "../Contracts/ViewModels";
 
 interface QueryResponse {
@@ -11,17 +10,13 @@ interface QueryResponse {
 }
 
 export interface MinimalQueryIterator {
-  fetchNext: (queryOperationOptions?: QueryOperationOptions) => Promise<QueryResponse>;
+  fetchNext: () => Promise<QueryResponse>;
 }
 
 // Pick<QueryIterator<any>, "fetchNext">;
 
-export function nextPage(
+export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
-  documentsIterator: MinimalQueryIterator,
+  return documentsIterator.fetchNext().then((response) => {
-  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/Logger.test.ts

@@ -1,5 +1,7 @@
 jest.mock("./MessageHandler");
+import { LogEntryLevel } from "../Contracts/Diagnostics";
 import * as Logger from "./Logger";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { sendMessage } from "./MessageHandler";
 
 describe("Logger", () => {
@@ -9,16 +11,16 @@ describe("Logger", () => {
 
   it("should log info messages", () => {
     Logger.logInfo("Test info", "DocDB");
-    expect(sendMessage).toHaveBeenCalled();
+    expect(sendMessage).toBeCalled();
   });
 
   it("should log error messages", () => {
     Logger.logError("Test error", "DocDB");
-    expect(sendMessage).toHaveBeenCalled();
+    expect(sendMessage).toBeCalled();
   });
 
   it("should log warnings", () => {
     Logger.logWarning("Test warning", "DocDB");
-    expect(sendMessage).toHaveBeenCalled();
+    expect(sendMessage).toBeCalled();
   });
 });

src/Common/MessageHandler.ts

@@ -27,24 +27,15 @@ export function handleCachedDataMessage(message: any): void {
   runGarbageCollector();
 }
 
-/**
- *
- * @param messageType
- * @param params
- * @param scope Use this string to identify request Useful to distinguish response from different senders
- * @param timeoutInMs
- * @returns
- */
 export function sendCachedDataMessage<TResponseDataModel>(
   messageType: MessageTypes,
   params: Object[],
-  scope?: string,
   timeoutInMs?: number,
 ): Q.Promise<TResponseDataModel> {
   let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
     deferred: Q.defer<TResponseDataModel>(),
     startTime: new Date(),
-    id: _.uniqueId(scope),
+    id: _.uniqueId(),
   };
   RequestMap[cachedDataPromise.id] = cachedDataPromise;
   sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
@@ -56,10 +47,6 @@ export function sendCachedDataMessage<TResponseDataModel>(
   );
 }
 
-/**
- *
- * @param data Overwrite the data property of the message
- */
 export function sendMessage(data: any): void {
   _sendMessage({
     signature: "pcIframe",

src/Common/MongoProxyClient.ts

@@ -1,10 +1,6 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
-import {
-  allowedMongoProxyEndpoints,
-  allowedMongoProxyEndpoints_ToBeDeprecated,
-  validateEndpoint,
-} from "Utils/EndpointUtils";
 import queryString from "querystring";
+import { allowedMongoProxyEndpoints, validateEndpoint } from "Utils/EndpointValidation";
 import { AuthType } from "../AuthType";
 import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
@@ -14,7 +10,7 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { ApiType, ContentType, HttpHeaders, HttpStatusCodes, MongoProxyEndpoints } from "./Constants";
+import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
@@ -66,73 +62,6 @@ export function queryDocuments(
   isResourceList: boolean,
   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 = {
-    databaseID: databaseId,
-    collectionID: collection.id(),
-    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
-    resourceID: collection.rid,
-    resourceType: "docs",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey:
-      collection && collection.partitionKey && !collection.partitionKey.systemKey
-        ? collection.partitionKeyProperties?.[0]
-        : "",
-    query,
-  };
-
-  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" : "/queryDocuments";
-
-  return window
-    .fetch(`${endpoint}${path}`, {
-      method: "POST",
-      body: JSON.stringify(params),
-      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;
-    });
-}
-
-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;
@@ -193,54 +122,6 @@ 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("/");
-  const path = idComponents.slice(0, 4).join("/");
-  const rid = encodeURIComponent(idComponents[5]);
-  const params = {
-    databaseID: databaseId,
-    collectionID: collection.id(),
-    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
-    resourceID: rid,
-    resourceType: "docs",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("readDocument");
-
-  return window
-    .fetch(endpoint, {
-      method: "POST",
-      body: JSON.stringify(params),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "reading document", params);
-    });
-}
-
-export function readDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  documentId: DocumentId,
 ): Promise<DataModels.DocumentId> {
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -288,51 +169,6 @@ export function createDocument(
   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 = {
-    databaseID: databaseId,
-    collectionID: collection.id(),
-    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
-    resourceID: collection.rid,
-    resourceType: "docs",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey:
-      collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
-    documentContent: JSON.stringify(documentContent),
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("createDocument");
-
-  return window
-    .fetch(`${endpoint}/createDocument`, {
-      method: "POST",
-      body: JSON.stringify(params),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "creating document", params);
-    });
-}
-
-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;
@@ -372,56 +208,6 @@ export function updateDocument(
   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("/");
-  const path = idComponents.slice(0, 5).join("/");
-  const rid = encodeURIComponent(idComponents[5]);
-  const params = {
-    databaseID: databaseId,
-    collectionID: collection.id(),
-    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
-    resourceID: rid,
-    resourceType: "docs",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-    documentContent,
-  };
-  const endpoint = getFeatureEndpointOrDefault("updateDocument");
-
-  return window
-    .fetch(endpoint, {
-      method: "PUT",
-      body: JSON.stringify(params),
-      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 updateDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  documentId: DocumentId,
-  documentContent: string,
 ): Promise<DataModels.DocumentId> {
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -451,7 +237,7 @@ export function updateDocument_ToBeDeprecated(
       headers: {
         ...defaultHeaders,
         ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
+        [HttpHeaders.contentType]: "application/json",
         [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
       },
     })
@@ -464,53 +250,6 @@ export function updateDocument_ToBeDeprecated(
 }
 
 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}${path}/${rid}`,
-    resourceID: rid,
-    resourceType: "docs",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperties?.[0]
-        : "",
-  };
-  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
-
-  return window
-    .fetch(endpoint, {
-      method: "DELETE",
-      body: JSON.stringify(params),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return undefined;
-      }
-      return await errorHandling(response, "deleting document", params);
-    });
-}
-
-export function deleteDocument_ToBeDeprecated(
-  databaseId: string,
-  collection: Collection,
-  documentId: DocumentId,
-): Promise<void> {
   const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
@@ -538,7 +277,7 @@ export function deleteDocument_ToBeDeprecated(
       headers: {
         ...defaultHeaders,
         ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
+        [HttpHeaders.contentType]: "application/json",
         [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
       },
     })
@@ -552,52 +291,6 @@ export function deleteDocument_ToBeDeprecated(
 
 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];
-
-  const createCollectionParams = {
-    databaseID: params.databaseId,
-    collectionID: params.collectionId,
-    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
-    resourceID: "",
-    resourceType: "colls",
-    subscriptionID: userContext.subscriptionId,
-    resourceGroup: userContext.resourceGroup,
-    databaseAccountName: databaseAccount.name,
-    partitionKey: shardKey,
-    isAutoscale: !!params.autoPilotMaxThroughput,
-    hasSharedThroughput: params.databaseLevelThroughput,
-    offerThroughput: params.autoPilotMaxThroughput || params.offerThroughput,
-    createDatabase: params.createNewDatabase,
-    isSharded: !!shardKey,
-  };
-
-  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
-
-  return window
-    .fetch(`${endpoint}/createCollection`, {
-      method: "POST",
-      body: JSON.stringify(createCollectionParams),
-      headers: {
-        ...defaultHeaders,
-        ...authHeaders(),
-        [HttpHeaders.contentType]: ContentType.applicationJson,
-      },
-    })
-    .then(async (response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      return await errorHandling(response, "creating collection", createCollectionParams);
-    });
-}
-
-export function createMongoCollectionWithProxy_ToBeDeprecated(
-  params: DataModels.CreateCollectionParams,
 ): Promise<DataModels.Collection> {
   const { databaseAccount } = userContext;
   const shardKey: string = params.partitionKey?.paths[0];
@@ -641,20 +334,13 @@ export function createMongoCollectionWithProxy_ToBeDeprecated(
       return await errorHandling(response, "creating collection", mongoParams);
     });
 }
+
 export function getFeatureEndpointOrDefault(feature: string): string {
-  let endpoint;
+  const endpoint =
-  if (useMongoProxyEndpoint(feature)) {
+    hasFlag(userContext.features.mongoProxyAPIs, feature) &&
-    endpoint = configContext.MONGO_PROXY_ENDPOINT;
+    validateEndpoint(userContext.features.mongoProxyEndpoint, allowedMongoProxyEndpoints)
-  } else {
+      ? userContext.features.mongoProxyEndpoint
-    endpoint =
+      : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_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);
 }
@@ -663,11 +349,7 @@ export function getEndpoint(endpoint: string): string {
   let url = endpoint + "/api/mongo/explorer";
 
   if (userContext.authType === AuthType.EncryptedToken) {
-    if (endpoint === configContext.MONGO_PROXY_ENDPOINT) {
+    url = url.replace("api/mongo", "api/guest/mongo");
-      url = url.replace("api/mongo", "api/connectionstring/mongo");
-    } else {
-      url = url.replace("api/mongo", "api/guest/mongo");
-    }
   }
   return url;
 }
@@ -688,24 +370,3 @@ async function errorHandling(response: Response, action: string, params: unknown
 export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
   return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}/collections/${params.coll}`;
 }
-
-function useMongoProxyEndpoint(api: string): boolean {
-  const activeMongoProxyEndpoints: string[] = [
-    MongoProxyEndpoints.Development,
-    MongoProxyEndpoints.Mpac,
-    MongoProxyEndpoints.Prod,
-  ];
-  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-  if (
-    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development &&
-    userContext.databaseAccount.properties.ipRules?.length > 0
-  ) {
-    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
-  }
-
-  return (
-    canAccessMongoProxy &&
-    configContext.NEW_MONGO_APIS?.includes(api) &&
-    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
-  );
-}

src/Common/QueriesClient.ts

@@ -1,4 +1,3 @@
-import { isServerlessAccount } from "Utils/CapabilityUtils";
 import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
@@ -9,11 +8,12 @@ import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
-import { handleError } from "./ErrorHandlingUtils";
 import { createCollection } from "./dataAccess/createCollection";
 import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
+import { handleError } from "./ErrorHandlingUtils";
+import { isServerlessAccount } from "Utils/CapabilityUtils";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {

src/Common/TableEntity.tsx

@@ -146,7 +146,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
-                role="button"
               />
             </div>
           </TooltipHost>
@@ -161,7 +160,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
               onClick={onDeleteEntity}
               tabIndex={0}
               onKeyPress={handleKeyPressdelete}
-              role="button"
             />
           </TooltipHost>
         )}

src/Common/dataAccess/dataTransfers.ts

@@ -1,195 +0,0 @@
-import { ApiType, userContext } from "UserContext";
-import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
-import {
-  cancel,
-  create,
-  get,
-  listByDatabaseAccount,
-} from "Utils/arm/generatedClients/dataTransferService/dataTransferJobs";
-import {
-  CosmosCassandraDataTransferDataSourceSink,
-  CosmosMongoDataTransferDataSourceSink,
-  CosmosSqlDataTransferDataSourceSink,
-  CreateJobRequest,
-  DataTransferJobFeedResults,
-  DataTransferJobGetResults,
-} from "Utils/arm/generatedClients/dataTransferService/types";
-import { addToPolling, removeFromPolling, updateDataTransferJob, useDataTransferJobs } from "hooks/useDataTransferJobs";
-import promiseRetry, { AbortError, FailedAttemptError } from "p-retry";
-
-export interface DataTransferParams {
-  jobName: string;
-  apiType: ApiType;
-  subscriptionId: string;
-  resourceGroupName: string;
-  accountName: string;
-  sourceDatabaseName: string;
-  sourceCollectionName: string;
-  targetDatabaseName: string;
-  targetCollectionName: string;
-}
-
-export const getDataTransferJobs = async (
-  subscriptionId: string,
-  resourceGroup: string,
-  accountName: string,
-): Promise<DataTransferJobGetResults[]> => {
-  let dataTransferJobs: DataTransferJobGetResults[] = [];
-  let dataTransferFeeds: DataTransferJobFeedResults = await listByDatabaseAccount(
-    subscriptionId,
-    resourceGroup,
-    accountName,
-  );
-  dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
-  while (dataTransferFeeds?.nextLink) {
-    const nextResponse = await window.fetch(dataTransferFeeds.nextLink, {
-      headers: {
-        Authorization: userContext.authorizationToken,
-      },
-    });
-    if (nextResponse.ok) {
-      dataTransferFeeds = await nextResponse.json();
-      dataTransferJobs = [...dataTransferJobs, ...(dataTransferFeeds?.value || [])];
-    } else {
-      break;
-    }
-  }
-  return dataTransferJobs;
-};
-
-export const initiateDataTransfer = async (params: DataTransferParams): Promise<DataTransferJobGetResults> => {
-  const {
-    jobName,
-    apiType,
-    subscriptionId,
-    resourceGroupName,
-    accountName,
-    sourceDatabaseName,
-    sourceCollectionName,
-    targetDatabaseName,
-    targetCollectionName,
-  } = params;
-  const sourcePayload = createPayload(apiType, sourceDatabaseName, sourceCollectionName);
-  const targetPayload = createPayload(apiType, targetDatabaseName, targetCollectionName);
-  const body: CreateJobRequest = {
-    properties: {
-      source: sourcePayload,
-      destination: targetPayload,
-    },
-  };
-  return create(subscriptionId, resourceGroupName, accountName, jobName, body);
-};
-
-export const pollDataTransferJob = async (
-  jobName: string,
-  subscriptionId: string,
-  resourceGroupName: string,
-  accountName: string,
-): Promise<unknown> => {
-  const currentPollingJobs = useDataTransferJobs.getState().pollingDataTransferJobs;
-  if (currentPollingJobs.has(jobName)) {
-    return;
-  }
-  let clearMessage = NotificationConsoleUtils.logConsoleProgress(`Data transfer job ${jobName} in progress`);
-  return await promiseRetry(
-    () => pollDataTransferJobOperation(jobName, subscriptionId, resourceGroupName, accountName, clearMessage),
-    {
-      retries: 500,
-      maxTimeout: 5000,
-      onFailedAttempt: (error: FailedAttemptError) => {
-        clearMessage();
-        clearMessage = NotificationConsoleUtils.logConsoleProgress(error.message);
-      },
-    },
-  );
-};
-
-const pollDataTransferJobOperation = async (
-  jobName: string,
-  subscriptionId: string,
-  resourceGroupName: string,
-  accountName: string,
-  clearMessage?: () => void,
-): Promise<DataTransferJobGetResults> => {
-  if (!userContext.authorizationToken) {
-    throw new Error("No authority token provided");
-  }
-
-  addToPolling(jobName);
-
-  const body: DataTransferJobGetResults = await get(subscriptionId, resourceGroupName, accountName, jobName);
-  const status = body?.properties?.status;
-
-  updateDataTransferJob(body);
-
-  if (status === "Cancelled") {
-    removeFromPolling(jobName);
-    clearMessage && clearMessage();
-    const cancelMessage = `Data transfer job ${jobName} cancelled`;
-    NotificationConsoleUtils.logConsoleError(cancelMessage);
-    throw new AbortError(cancelMessage);
-  }
-  if (status === "Failed" || status === "Faulted") {
-    removeFromPolling(jobName);
-    const errorMessage = body?.properties?.error
-      ? JSON.stringify(body?.properties?.error)
-      : "Operation could not be completed";
-    const error = new Error(errorMessage);
-    clearMessage && clearMessage();
-    NotificationConsoleUtils.logConsoleError(`Data transfer job ${jobName} failed: ${errorMessage}`);
-    throw new AbortError(error);
-  }
-  if (status === "Completed") {
-    removeFromPolling(jobName);
-    clearMessage && clearMessage();
-    NotificationConsoleUtils.logConsoleInfo(`Data transfer job ${jobName} completed`);
-    return body;
-  }
-  const processedCount = body.properties.processedCount;
-  const totalCount = body.properties.totalCount;
-  const retryMessage = `Data transfer job ${jobName} in progress, total count: ${totalCount}, processed count: ${processedCount}`;
-  throw new Error(retryMessage);
-};
-
-export const cancelDataTransferJob = async (
-  subscriptionId: string,
-  resourceGroupName: string,
-  accountName: string,
-  jobName: string,
-): Promise<void> => {
-  const cancelResult: DataTransferJobGetResults = await cancel(subscriptionId, resourceGroupName, accountName, jobName);
-  updateDataTransferJob(cancelResult);
-  removeFromPolling(cancelResult?.properties?.jobName);
-};
-
-const createPayload = (
-  apiType: ApiType,
-  databaseName: string,
-  containerName: string,
-):
-  | CosmosSqlDataTransferDataSourceSink
-  | CosmosMongoDataTransferDataSourceSink
-  | CosmosCassandraDataTransferDataSourceSink => {
-  switch (apiType) {
-    case "SQL":
-      return {
-        component: "CosmosDBSql",
-        databaseName: databaseName,
-        containerName: containerName,
-      } as CosmosSqlDataTransferDataSourceSink;
-    case "Mongo":
-      return {
-        component: "CosmosDBMongo",
-        databaseName: databaseName,
-        collectionName: containerName,
-      } as CosmosMongoDataTransferDataSourceSink;
-    case "Cassandra":
-      return {
-        component: "CosmosDBCassandra",
-        keyspaceName: databaseName,
-        tableName: containerName,
-      };
-    default:
-      throw new Error(`Unsupported API type for data transfer: ${apiType}`);
-  }
-};

src/Common/dataAccess/queryDocuments.test.ts

@@ -1,5 +1,5 @@
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { getCommonQueryOptions } from "./queryDocuments";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 
 describe("getCommonQueryOptions", () => {
   it("builds the correct default options objects", () => {

src/Common/dataAccess/queryDocuments.ts

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

src/Common/dataAccess/queryDocumentsPage.ts

@@ -1,4 +1,3 @@
-import { QueryOperationOptions } from "@azure/cosmos";
 import { QueryResults } from "../../Contracts/ViewModels";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { getEntityName } from "../DocumentUtility";
@@ -9,13 +8,12 @@ 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, queryOperationOptions);
+    const result: QueryResults = await nextPage(documentsIterator, firstItemIndex);
     const itemCount = (result.documents && result.documents.length) || 0;
     logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
     return result;

src/Common/dataAccess/readCollections.ts

@@ -18,13 +18,13 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
 
   if (
     configContext.platform === Platform.Fabric &&
-    userContext.fabricContext &&
+    userContext.fabricDatabaseConnectionInfo &&
-    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
+    userContext.fabricDatabaseConnectionInfo.databaseId === databaseId
   ) {
     const collections: DataModels.Collection[] = [];
     const promises: Promise<ContainerResponse>[] = [];
 
-    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
+    for (const collectionResourceId in userContext.fabricDatabaseConnectionInfo.resourceTokens) {
       // Dictionary key looks like this: dbs/SampleDB/colls/Container
       const resourceIdObj = collectionResourceId.split("/");
       const tokenDatabaseId = resourceIdObj[1];

src/Common/dataAccess/readDatabases.ts

@@ -14,8 +14,8 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
 
-  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.databaseConnectionInfo.resourceTokens) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricDatabaseConnectionInfo?.resourceTokens) {
-    const tokensData = userContext.fabricContext.databaseConnectionInfo;
+    const tokensData = userContext.fabricDatabaseConnectionInfo;
 
     const databaseIdsSet = new Set<string>(); // databaseId
 

src/ConfigContext.ts

@@ -1,25 +1,17 @@
-import {
+import { JunoEndpoints } from "Common/Constants";
-  BackendApi,
-  CassandraProxyEndpoints,
-  JunoEndpoints,
-  MongoProxyEndpoints,
-  PortalBackendEndpoints,
-} from "Common/Constants";
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
-  allowedCassandraProxyEndpoints,
   allowedEmulatorEndpoints,
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
   allowedMongoBackendEndpoints,
-  allowedMongoProxyEndpoints,
   allowedMsalRedirectEndpoints,
   defaultAllowedArmEndpoints,
   defaultAllowedBackendEndpoints,
   validateEndpoint,
-} from "Utils/EndpointUtils";
+} from "Utils/EndpointValidation";
 
 export enum Platform {
   Portal = "Portal",
@@ -45,15 +37,7 @@ export interface ConfigContext {
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
-  PORTAL_BACKEND_ENDPOINT?: string;
-  NEW_BACKEND_APIS?: BackendApi[];
   MONGO_BACKEND_ENDPOINT?: string;
-  MONGO_PROXY_ENDPOINT?: string;
-  MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED?: boolean;
-  NEW_MONGO_APIS?: string[];
-  CASSANDRA_PROXY_ENDPOINT?: string;
-  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: boolean;
-  NEW_CASSANDRA_APIS?: string[];
   PROXY_PATH?: string;
   JUNO_ENDPOINT: string;
   GITHUB_CLIENT_ID: string;
@@ -82,7 +66,6 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.powerbi\\.com$`,
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
     `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
-    `^https:\\/\\/.*\\.azure-test\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -98,21 +81,6 @@ let configContext: Readonly<ConfigContext> = {
   GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
   JUNO_ENDPOINT: JunoEndpoints.Prod,
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-  PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
-  MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
-  NEW_MONGO_APIS: [
-    "resourcelist",
-    "queryDocuments",
-    "createDocument",
-    "readDocument",
-    "updateDocument",
-    "deleteDocument",
-    "createCollectionWithProxy",
-  ],
-  MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
-  CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
-  NEW_CASSANDRA_APIS: ["postQuery", "createOrDelete", "getKeys", "getSchema"],
-  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   isTerminalEnabled: false,
   isPhoenixEnabled: false,
 };
@@ -158,18 +126,10 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.BACKEND_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.MONGO_PROXY_ENDPOINT, allowedMongoProxyEndpoints)) {
-    delete newContext.MONGO_PROXY_ENDPOINT;
-  }
-
   if (!validateEndpoint(newContext.MONGO_BACKEND_ENDPOINT, allowedMongoBackendEndpoints)) {
     delete newContext.MONGO_BACKEND_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.CASSANDRA_PROXY_ENDPOINT, allowedCassandraProxyEndpoints)) {
-    delete newContext.CASSANDRA_PROXY_ENDPOINT;
-  }
-
   if (!validateEndpoint(newContext.JUNO_ENDPOINT, allowedJunoOrigins)) {
     delete newContext.JUNO_ENDPOINT;
   }
@@ -187,7 +147,10 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
 
 // Injected for local development. These will be removed in the production bundle by webpack
 if (process.env.NODE_ENV === "development") {
+  const port: string = process.env.PORT || "1234";
   updateConfigContext({
+    BACKEND_ENDPOINT: "https://localhost:" + port,
+    MONGO_BACKEND_ENDPOINT: "https://localhost:" + port,
     PROXY_PATH: "/proxy",
     EMULATOR_ENDPOINT: "https://localhost:8081",
   });

src/Contracts/DataExplorerMessagesContract.ts

@@ -1,42 +0,0 @@
-import { MessageTypes } from "./MessageTypes";
-
-// This is the current version of these messages
-export const DATA_EXPLORER_RPC_VERSION = "2";
-
-// Data Explorer to Fabric
-
-// TODO Remove when upgrading to Fabric v2
-export type DataExploreMessageV1 =
-  | "ready"
-  | {
-      type: MessageTypes.GetAuthorizationToken;
-      id: string;
-      params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
-      id: string;
-    };
-// -----------------------------
-
-export type DataExploreMessageV2 =
-  | {
-      type: MessageTypes.Ready;
-      id: string;
-      params: [string]; // version
-    }
-  | {
-      type: MessageTypes.GetAuthorizationToken;
-      id: string;
-      params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
-      id: string;
-    };
-
-export type GetCosmosTokenMessageOptions = {
-  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
-  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
-  resourceId: string;
-};

src/Contracts/DataModels.ts

@@ -159,7 +159,6 @@ export interface Collection extends Resource {
   geospatialConfig?: GeospatialConfig;
   schema?: ISchema;
   requestSchema?: () => void;
-  computedProperties?: ComputedProperties;
 }
 
 export interface CollectionsWithPagination {
@@ -198,13 +197,6 @@ export interface IndexingPolicy {
   spatialIndexes?: any;
 }
 
-export interface ComputedProperty {
-  name: string;
-  query: string;
-}
-
-export type ComputedProperties = ComputedProperty[];
-
 export interface PartitionKey {
   paths: string[];
   kind: "Hash" | "Range" | "MultiHash";

src/Contracts/ExplorerContracts.ts

@@ -1,6 +1,6 @@
+import { MessageTypes } from "Contracts/MessageTypes";
 import * as ActionContracts from "./ActionContracts";
 import * as Diagnostics from "./Diagnostics";
-import { MessageTypes } from "./MessageTypes";
 import * as Versions from "./Versions";
 
 export { ActionContracts, Diagnostics, MessageTypes, Versions };

src/Contracts/FabricContract.ts

@@ -1,12 +1,6 @@
-import { AuthorizationToken } from "./MessageTypes";
+import { AuthorizationToken, MessageTypes } from "./MessageTypes";
 
-// This is the version of these messages
+export type FabricMessage =
-export const FABRIC_RPC_VERSION = "2";
-
-// Fabric to Data Explorer
-
-// TODO Deprecated. Remove this section once DE is updated
-export type FabricMessageV1 =
   | {
       type: "newContainer";
       databaseName: string;
@@ -32,53 +26,38 @@ export type FabricMessageV1 =
   | {
       type: "allResourceTokens";
       message: {
-        id: string;
-        error: string | undefined;
         endpoint: string | undefined;
         databaseId: string | undefined;
         resourceTokens: unknown | undefined;
         resourceTokensTimestamp: number | undefined;
       };
     };
-// -----------------------------
 
-export type FabricMessageV2 =
+export type DataExploreMessage =
+  | "ready"
   | {
-      type: "newContainer";
+      type: MessageTypes.TelemetryInfo;
-      databaseName: string;
+      data: {
+        action: "LoadDatabases";
+        actionModifier: "success" | "start";
+        defaultExperience: "SQL";
+      };
     }
   | {
-      type: "initialize";
+      type: MessageTypes.GetAuthorizationToken;
-      version: string;
       id: string;
-      message: {
+      params: GetCosmosTokenMessageOptions[];
-        connectionId: string;
-        isVisible: boolean;
-      };
     }
   | {
-      type: "authorizationToken";
+      type: MessageTypes.GetAllResourceTokens;
-      message: {
-        id: string;
-        error: string | undefined;
-        data: AuthorizationToken | undefined;
-      };
-    }
-  | {
-      type: "allResourceTokens_v2";
-      message: {
-        id: string;
-        error: string | undefined;
-        data: FabricDatabaseConnectionInfo | undefined;
-      };
-    }
-  | {
-      type: "explorerVisible";
-      message: {
-        visible: boolean;
-      };
     };
 
+export type GetCosmosTokenMessageOptions = {
+  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
+  resourceId: string;
+};
+
 export type CosmosDBTokenResponse = {
   token: string;
   date: string;
@@ -87,9 +66,12 @@ export type CosmosDBTokenResponse = {
 export type CosmosDBConnectionInfoResponse = {
   endpoint: string;
   databaseId: string;
-  resourceTokens: { [resourceId: string]: string };
+  resourceTokens: unknown;
 };
 
-export interface FabricDatabaseConnectionInfo extends CosmosDBConnectionInfoResponse {
+export interface FabricDatabaseConnectionInfo {
+  endpoint: string;
+  databaseId: string;
+  resourceTokens: { [resourceId: string]: string };
   resourceTokensTimestamp: number;
 }

src/Contracts/MessageTypes.ts

@@ -1,12 +1,6 @@
 /**
  * Messaging types used with Data Explorer <-> Portal communication,
  * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
- *
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- * WARNING: !!!!!!! YOU CAN ONLY ADD NEW TYPES TO THE END OF THIS ENUM !!!!!!!
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- *
- * Enum are integers, so inserting or deleting a type will break the communication.
  */
 export enum MessageTypes {
   TelemetryInfo,
@@ -43,11 +37,10 @@ export enum MessageTypes {
   DisplayNPSSurvey,
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
-  GetAuthorizationToken, // Data Explorer -> Fabric
+
-  GetAllResourceTokens, // Data Explorer -> Fabric
+  // Data Explorer -> Fabric communication
-  Ready, // Data Explorer -> Fabric
+  GetAuthorizationToken,
-  OpenCESCVAFeedbackBlade,
+  GetAllResourceTokens,
-  ActivateTab,
 }
 
 export interface AuthorizationToken {

src/Contracts/ViewModels.ts

@@ -135,7 +135,6 @@ export interface Collection extends CollectionBase {
   changeFeedPolicy: ko.Observable<DataModels.ChangeFeedPolicy>;
   geospatialConfig: ko.Observable<DataModels.GeospatialConfig>;
   documentIds: ko.ObservableArray<DocumentId>;
-  computedProperties: ko.Observable<DataModels.ComputedProperties>;
 
   cassandraKeys: CassandraTableKeys;
   cassandraSchema: CassandraTableKey[];
@@ -387,11 +386,9 @@ export interface DataExplorerInputsFrame {
   dnsSuffix?: string;
   serverId?: string;
   extensionEndpoint?: string;
-  portalBackendEndpoint?: string;
-  mongoProxyEndpoint?: string;
-  cassandraProxyEndpoint?: string;
   subscriptionType?: SubscriptionType;
   quotaId?: string;
+  addCollectionDefaultFlight?: string;
   isTryCosmosDBSubscription?: boolean;
   loadDatabaseAccountTimestamp?: number;
   sharedThroughputMinimum?: number;
@@ -409,7 +406,6 @@ export interface DataExplorerInputsFrame {
   features?: {
     [key: string]: string;
   };
-  feedbackPolicies?: any;
 }
 
 export interface SelfServeFrameInputs {

src/Controls/Heatmap/Heatmap.test.ts

@@ -109,7 +109,6 @@ describe("iframe rendering when there is no data", () => {
           theme: 4,
         },
       },
-      origin: "http://localhost",
     };
 
     const divElement = `<div id="${Heatmap.elementId}"></div>`;
@@ -130,7 +129,6 @@ describe("iframe rendering when there is no data", () => {
           theme: 2,
         },
       },
-      origin: "http://localhost",
     };
 
     const divElement = `<div id="${Heatmap.elementId}"></div>`;

src/Definitions/jquery-typescript.d.ts

@@ -5,7 +5,7 @@
  * https://github.com/running-coder/jquery-typeahead/issues/156
  * TODO: Replace this minimum definition by the official one when it comes out.
  */
-/// <reference types="jquery" />
+/// <reference path="jquery.d.ts" />
 
 interface JQueryTypeaheadParam {
   input: string;

src/Definitions/jquery-ui.d.ts

@@ -3,7 +3,7 @@
 // Definitions by: Boris Yankov <https://github.com/borisyankov/>, John Reilly <https://github.com/johnnyreilly>
 // Definitions: https://github.com/borisyankov/DefinitelyTyped
 
-/// <reference types="jquery"/>
+/// <reference path="jquery.d.ts"/>
 
 declare namespace JQueryUI {
   // Accordion //////////////////////////////////////////////////

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -27,7 +27,6 @@ export interface AccordionItemComponentProps {
   isExpanded?: boolean;
   containerStyles?: React.CSSProperties;
   styles?: React.CSSProperties;
-  children: JSX.Element;
 }
 
 interface AccordionItemComponentState {

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx

@@ -16,7 +16,6 @@ export interface CollapsiblePanelProps {
   isCollapsed: boolean;
   onCollapsedChanged: (newValue: boolean) => void;
   collapseToLeft?: boolean;
-  children: JSX.Element | JSX.Element[];
 }
 
 export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> {

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx

@@ -7,7 +7,6 @@ describe("CollapsibleSectionComponent", () => {
     const props: CollapsibleSectionProps = {
       title: "Sample title",
       isExpandedByDefault: true,
-      children: <></>,
     };
 
     const wrapper = shallow(<CollapsibleSectionComponent {...props} />);

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -7,7 +7,6 @@ export interface CollapsibleSectionProps {
   title: string;
   isExpandedByDefault: boolean;
   onExpand?: () => void;
-  children: JSX.Element;
 }
 
 export interface CollapsibleSectionState {

src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts

@@ -99,7 +99,7 @@ export class DiffEditorViewModel {
   ) {
     this.editorContainer = document.getElementById(this.getEditorId());
     this.editorContainer.innerHTML = "";
-    const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {
+    const options: monaco.editor.IDiffEditorConstructionOptions = {
       lineNumbers: this.params.lineNumbers || "off",
       fontSize: 12,
       ariaLabel: this.params.ariaLabel,

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -52,11 +52,7 @@ class EditorViewModel extends JsonEditorViewModel {
     if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
       const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
       const monaco = await loadMonaco();
-      monaco.languages.registerCompletionItemProvider(
+      monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider());
-        "sql",
-        // TODO cosmos-language-service could be outdated
-        new SqlCompletionItemProvider() as unknown as monaco.languages.CompletionItemProvider,
-      );
       EditorViewModel.providerRegistered.push("sql");
     }
   }

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -46,25 +46,9 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     }, 100);
   }
 
-  public componentDidUpdate() {
+  public componentDidUpdate(previous: EditorReactProps) {
-    if (!this.editor) {
+    if (this.props.content !== previous.content) {
-      return;
+      this.editor?.setValue(this.props.content);
-    }
-
-    const existingContent = this.editor.getModel().getValue();
-
-    if (this.props.content !== existingContent) {
-      if (this.props.isReadOnly) {
-        this.editor.setValue(this.props.content);
-      } else {
-        this.editor.pushUndoStop();
-        this.editor.executeEdits("", [
-          {
-            range: this.editor.getModel().getFullModelRange(),
-            text: this.props.content,
-          },
-        ]);
-      }
     }
   }
 
@@ -87,14 +71,9 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
     this.editor = editor;
+    const queryEditorModel = this.editor.getModel();
     if (!this.props.isReadOnly && this.props.onContentChanged) {
-      // Hooking the model's onDidChangeContent event because of some event ordering issues.
+      queryEditorModel.onDidChangeContent(() => {
-      // If a single user input causes BOTH the editor content to change AND the cursor selection to change (which is likely),
-      // then there are some inconsistencies as to which event fires first.
-      // But the editor.onDidChangeModelContent event seems to always fire before the cursor selection event.
-      // (This is NOT true for the model's onDidChangeContent event, which sometimes fires after the cursor selection event.)
-      // If the cursor selection event fires first, then the calling component may re-render the component with old content, so we want to ensure the model content changed event always fires first.
-      this.editor.onDidChangeModelContent(() => {
         const queryEditorModel = this.editor.getModel();
         this.props.onContentChanged(queryEditorModel.getValue());
       });
@@ -114,7 +93,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
    * Create the monaco editor and attach to DOM
    */
   private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
-    const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+    const options: monaco.editor.IEditorConstructionOptions = {
       language: this.props.language,
       value: this.props.content,
       readOnly: this.props.isReadOnly,

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

@@ -90,7 +90,7 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
   protected async createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
     this.registerCompletionItemProvider();
     this.editorContainer = document.getElementById(this.getEditorId());
-    const options: monaco.editor.IStandaloneEditorConstructionOptions = {
+    const options: monaco.editor.IEditorConstructionOptions = {
       value: content,
       language: this.getEditorLanguage(),
       readOnly: this.params.isReadOnly,

src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx

@@ -29,6 +29,6 @@ describe("CodeOfConduct", () => {
     const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
     await Promise.resolve();
-    expect(codeOfConductProps.onAcceptCodeOfConduct).toHaveBeenCalled();
+    expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();
   });
 });

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

@@ -9,7 +9,7 @@ import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
-import { TtlType, isDirty } from "./SettingsUtils";
+import { isDirty, TtlType } from "./SettingsUtils";
 import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
@@ -190,8 +190,8 @@ describe("SettingsComponent", () => {
       id: "id",
     };
     await settingsComponentInstance.onSaveClick();
-    expect(updateCollection).toHaveBeenCalled();
+    expect(updateCollection).toBeCalled();
-    expect(updateOffer).toHaveBeenCalled();
+    expect(updateOffer).toBeCalled();
   });
 
   it("revert resets state values", async () => {

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,10 +1,5 @@
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
-import {
-  ComputedPropertiesComponent,
-  ComputedPropertiesComponentProps,
-} from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
 import { useDatabases } from "Explorer/useDatabases";
-import { isRunningOnPublicCloud } from "Utils/CloudUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
@@ -23,10 +18,6 @@ import { userContext } from "../../../UserContext";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import {
-  PartitionKeyComponent,
-  PartitionKeyComponentProps,
-} from "../../Controls/Settings/SettingsSubComponents/PartitionKeyComponent";
 import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import "./SettingsComponent.less";
@@ -112,11 +103,6 @@ export interface SettingsComponentState {
   indexesToAdd: AddMongoIndexProps[];
   indexTransformationProgress: number;
 
-  computedPropertiesContent: DataModels.ComputedProperties;
-  computedPropertiesContentBaseline: DataModels.ComputedProperties;
-  shouldDiscardComputedProperties: boolean;
-  isComputedPropertiesDirty: boolean;
-
   conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyPath: string;
@@ -141,9 +127,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private offer: DataModels.Offer;
   private changeFeedPolicyVisible: boolean;
   private isFixedContainer: boolean;
-  private shouldShowComputedPropertiesEditor: boolean;
   private shouldShowIndexingPolicyEditor: boolean;
-  private shouldShowPartitionKeyEditor: boolean;
   private totalThroughputUsed: number;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
@@ -155,9 +139,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.collection = this.props.settingsTab.collection as ViewModels.Collection;
       this.offer = this.collection?.offer();
       this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
-      this.shouldShowComputedPropertiesEditor = userContext.apiType === "SQL";
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
-      this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
@@ -209,11 +191,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       isMongoIndexingPolicyDiscardable: false,
       indexTransformationProgress: undefined,
 
-      computedPropertiesContent: undefined,
-      computedPropertiesContentBaseline: undefined,
-      shouldDiscardComputedProperties: false,
-      isComputedPropertiesDirty: false,
-
       conflictResolutionPolicyMode: undefined,
       conflictResolutionPolicyModeBaseline: undefined,
       conflictResolutionPolicyPath: undefined,
@@ -304,7 +281,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isSubSettingsSaveable ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
-      this.state.isComputedPropertiesDirty ||
       (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable)
     );
   };
@@ -315,7 +291,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isSubSettingsDiscardable ||
       this.state.isIndexingPolicyDirty ||
       this.state.isConflictResolutionDirty ||
-      this.state.isComputedPropertiesDirty ||
       (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable)
     );
   };
@@ -420,9 +395,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       isMongoIndexingPolicySaveable: false,
       isMongoIndexingPolicyDiscardable: false,
       isConflictResolutionDirty: false,
-      computedPropertiesContent: this.state.computedPropertiesContentBaseline,
-      shouldDiscardComputedProperties: true,
-      isComputedPropertiesDirty: false,
     });
   };
 
@@ -542,31 +514,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onMongoIndexingPolicyDiscardableChange = (isMongoIndexingPolicyDiscardable: boolean): void =>
     this.setState({ isMongoIndexingPolicyDiscardable });
 
-  private onComputedPropertiesContentChange = (newComputedProperties: DataModels.ComputedProperties): void =>
-    this.setState({ computedPropertiesContent: newComputedProperties });
-
-  private resetShouldDiscardComputedProperties = (): void => this.setState({ shouldDiscardComputedProperties: false });
-
-  private logComputedPropertiesSuccessMessage = (): void => {
-    if (this.props.settingsTab.onLoadStartKey) {
-      traceSuccess(
-        Action.Tab,
-        {
-          databaseName: this.collection.databaseId,
-          collectionName: this.collection.id(),
-
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.props.settingsTab.tabTitle(),
-        },
-        this.props.settingsTab.onLoadStartKey,
-      );
-      this.props.settingsTab.onLoadStartKey = undefined;
-    }
-  };
-
-  private onComputedPropertiesDirtyChange = (isComputedPropertiesDirty: boolean): void =>
-    this.setState({ isComputedPropertiesDirty: isComputedPropertiesDirty });
-
   private calculateTotalThroughputUsed = (): void => {
     this.totalThroughputUsed = 0;
     (useDatabases.getState().databases || []).forEach(async (database) => {
@@ -689,6 +636,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const indexingPolicyContent = this.collection.indexingPolicy();
     const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
       this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
+
     const conflictResolutionPolicyMode = parseConflictResolutionMode(conflictResolutionPolicy?.mode);
     const conflictResolutionPolicyPath = conflictResolutionPolicy?.conflictResolutionPath;
     const conflictResolutionPolicyProcedure = parseConflictResolutionProcedure(
@@ -697,12 +645,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const geospatialConfigTypeString: string =
       (this.collection.geospatialConfig && this.collection.geospatialConfig()?.type) || GeospatialConfigType.Geometry;
     const geoSpatialConfigType = GeospatialConfigType[geospatialConfigTypeString as keyof typeof GeospatialConfigType];
-    let computedPropertiesContent = this.collection.computedProperties();
-    if (!computedPropertiesContent || computedPropertiesContent.length === 0) {
-      computedPropertiesContent = [
-        { name: "name_of_property", query: "query_to_compute_property" },
-      ] as DataModels.ComputedProperties;
-    }
 
     return {
       throughput: offerThroughput,
@@ -729,8 +671,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       conflictResolutionPolicyProcedureBaseline: conflictResolutionPolicyProcedure,
       geospatialConfigType: geoSpatialConfigType,
       geospatialConfigTypeBaseline: geoSpatialConfigType,
-      computedPropertiesContent: computedPropertiesContent,
-      computedPropertiesContentBaseline: computedPropertiesContent,
     };
   };
 
@@ -847,12 +787,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private saveCollectionSettings = async (startKey: number): Promise<void> => {
     const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
 
-    if (
+    if (this.state.isSubSettingsSaveable || this.state.isIndexingPolicyDirty || this.state.isConflictResolutionDirty) {
-      this.state.isSubSettingsSaveable ||
-      this.state.isIndexingPolicyDirty ||
-      this.state.isConflictResolutionDirty ||
-      this.state.isComputedPropertiesDirty
-    ) {
       let defaultTtl: number;
       switch (this.state.timeToLive) {
         case TtlType.On:
@@ -890,10 +825,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         newCollection.conflictResolutionPolicy = conflictResolutionChanges;
       }
 
-      if (this.state.isComputedPropertiesDirty) {
-        newCollection.computedProperties = this.state.computedPropertiesContent;
-      }
-
       const updatedCollection: DataModels.Collection = await updateCollection(
         this.collection.databaseId,
         this.collection.id(),
@@ -907,7 +838,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
       this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
       this.collection.geospatialConfig(updatedCollection.geospatialConfig);
-      this.collection.computedProperties(updatedCollection.computedProperties);
 
       if (wasIndexingPolicyModified) {
         await this.refreshIndexTransformationProgress();
@@ -918,7 +848,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         isSubSettingsDiscardable: false,
         isIndexingPolicyDirty: false,
         isConflictResolutionDirty: false,
-        isComputedPropertiesDirty: false,
       });
     }
 
@@ -1113,16 +1042,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onMongoIndexingPolicyDiscardableChange: this.onMongoIndexingPolicyDiscardableChange,
     };
 
-    const computedPropertiesComponentProps: ComputedPropertiesComponentProps = {
-      computedPropertiesContent: this.state.computedPropertiesContent,
-      computedPropertiesContentBaseline: this.state.computedPropertiesContentBaseline,
-      logComputedPropertiesSuccessMessage: this.logComputedPropertiesSuccessMessage,
-      onComputedPropertiesContentChange: this.onComputedPropertiesContentChange,
-      onComputedPropertiesDirtyChange: this.onComputedPropertiesDirtyChange,
-      resetShouldDiscardComputedProperties: this.resetShouldDiscardComputedProperties,
-      shouldDiscardComputedProperties: this.state.shouldDiscardComputedProperties,
-    };
-
     const conflictResolutionPolicyComponentProps: ConflictResolutionComponentProps = {
       collection: this.collection,
       conflictResolutionPolicyMode: this.state.conflictResolutionPolicyMode,
@@ -1137,12 +1056,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onConflictResolutionDirtyChange: this.onConflictResolutionDirtyChange,
     };
 
-    const partitionKeyComponentProps: PartitionKeyComponentProps = {
-      database: useDatabases.getState().findDatabaseWithId(this.collection.databaseId),
-      collection: this.collection,
-      explorer: this.props.settingsTab.getContainer(),
-    };
-
     const tabs: SettingsV2TabInfo[] = [];
     if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
@@ -1178,20 +1091,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    if (this.shouldShowPartitionKeyEditor) {
-      tabs.push({
-        tab: SettingsV2TabTypes.PartitionKeyTab,
-        content: <PartitionKeyComponent {...partitionKeyComponentProps} />,
-      });
-    }
-
-    if (this.shouldShowComputedPropertiesEditor) {
-      tabs.push({
-        tab: SettingsV2TabTypes.ComputedPropertiesTab,
-        content: <ComputedPropertiesComponent {...computedPropertiesComponentProps} />,
-      });
-    }
-
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],

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

@@ -11,6 +11,7 @@ import {
   getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
   getToolTipContainer,
+  indexingPolicynUnsavedWarningMessage,
   manualToAutoscaleDisclaimerElement,
   mongoIndexTransformationRefreshingMessage,
   mongoIndexingPolicyAADError,
@@ -38,6 +39,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
 
         {manualToAutoscaleDisclaimerElement}
         {ttlWarning}
+        {indexingPolicynUnsavedWarningMessage}
         {updateThroughputDelayedApplyWarningMessage}
 
         {getThroughputApplyDelayedMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -61,8 +61,6 @@ export interface PriceBreakdown {
   currencySign: string;
 }
 
-export type editorType = "indexPolicy" | "computedProperties";
-
 export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
@@ -256,10 +254,9 @@ export const ttlWarning: JSX.Element = (
   </Text>
 );
 
-export const unsavedEditorWarningMessage = (editor: editorType): JSX.Element => (
+export const indexingPolicynUnsavedWarningMessage: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle}>
-    You have not saved the latest changes made to your{" "}
+    You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.
-    {editor === "indexPolicy" ? "indexing policy" : "computed properties"}. Please click save to confirm the changes.
   </Text>
 );
 

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.test.tsx

@@ -1,56 +0,0 @@
-import * as DataModels from "Contracts/DataModels";
-import { shallow } from "enzyme";
-import React from "react";
-import { ComputedPropertiesComponent, ComputedPropertiesComponentProps } from "./ComputedPropertiesComponent";
-
-describe("ComputedPropertiesComponent", () => {
-  const initialComputedPropertiesContent: DataModels.ComputedProperties = [
-    {
-      name: "prop1",
-      query: "query1",
-    },
-  ];
-  const baseProps: ComputedPropertiesComponentProps = {
-    computedPropertiesContent: initialComputedPropertiesContent,
-    computedPropertiesContentBaseline: initialComputedPropertiesContent,
-    logComputedPropertiesSuccessMessage: () => {
-      return;
-    },
-    onComputedPropertiesContentChange: () => {
-      return;
-    },
-    onComputedPropertiesDirtyChange: () => {
-      return;
-    },
-    resetShouldDiscardComputedProperties: () => {
-      return;
-    },
-    shouldDiscardComputedProperties: false,
-  };
-
-  it("renders", () => {
-    const wrapper = shallow(<ComputedPropertiesComponent {...baseProps} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("computed properties are reset", () => {
-    const wrapper = shallow(<ComputedPropertiesComponent {...baseProps} />);
-
-    const computedPropertiesComponentInstance = wrapper.instance() as ComputedPropertiesComponent;
-    const resetComputedPropertiesEditorMockFn = jest.fn();
-    computedPropertiesComponentInstance.resetComputedPropertiesEditor = resetComputedPropertiesEditorMockFn;
-
-    wrapper.setProps({ shouldDiscardComputedProperties: true });
-    wrapper.update();
-    expect(resetComputedPropertiesEditorMockFn.mock.calls.length).toEqual(1);
-  });
-
-  it("dirty is set", () => {
-    let computedPropertiesComponent = new ComputedPropertiesComponent(baseProps);
-    expect(computedPropertiesComponent.IsComponentDirty()).toEqual(false);
-
-    const newProps = { ...baseProps, computedPropertiesContent: undefined as DataModels.ComputedProperties };
-    computedPropertiesComponent = new ComputedPropertiesComponent(newProps);
-    expect(computedPropertiesComponent.IsComponentDirty()).toEqual(true);
-  });
-});

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

@@ -1,128 +0,0 @@
-import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
-import * as DataModels from "Contracts/DataModels";
-import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
-import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
-import { loadMonaco } from "Explorer/LazyMonaco";
-import * as monaco from "monaco-editor";
-import * as React from "react";
-
-export interface ComputedPropertiesComponentProps {
-  computedPropertiesContent: DataModels.ComputedProperties;
-  computedPropertiesContentBaseline: DataModels.ComputedProperties;
-  logComputedPropertiesSuccessMessage: () => void;
-  onComputedPropertiesContentChange: (newComputedProperties: DataModels.ComputedProperties) => void;
-  onComputedPropertiesDirtyChange: (isComputedPropertiesDirty: boolean) => void;
-  resetShouldDiscardComputedProperties: () => void;
-  shouldDiscardComputedProperties: boolean;
-}
-
-interface ComputedPropertiesComponentState {
-  computedPropertiesContentIsValid: boolean;
-}
-
-export class ComputedPropertiesComponent extends React.Component<
-  ComputedPropertiesComponentProps,
-  ComputedPropertiesComponentState
-> {
-  private shouldCheckComponentIsDirty = true;
-  private computedPropertiesDiv = React.createRef<HTMLDivElement>();
-  private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor;
-
-  constructor(props: ComputedPropertiesComponentProps) {
-    super(props);
-    this.state = {
-      computedPropertiesContentIsValid: true,
-    };
-  }
-
-  componentDidUpdate(): void {
-    if (this.props.shouldDiscardComputedProperties) {
-      this.resetComputedPropertiesEditor();
-      this.props.resetShouldDiscardComputedProperties();
-    }
-    this.onComponentUpdate();
-  }
-
-  componentDidMount(): void {
-    this.resetComputedPropertiesEditor();
-    this.onComponentUpdate();
-  }
-
-  public resetComputedPropertiesEditor = (): void => {
-    if (!this.computedPropertiesEditor) {
-      this.createComputedPropertiesEditor();
-    } else {
-      const indexingPolicyEditorModel = this.computedPropertiesEditor.getModel();
-      const value: string = JSON.stringify(this.props.computedPropertiesContent, undefined, 4);
-      indexingPolicyEditorModel.setValue(value);
-    }
-    this.onComponentUpdate();
-  };
-
-  private onComponentUpdate = (): void => {
-    if (!this.shouldCheckComponentIsDirty) {
-      this.shouldCheckComponentIsDirty = true;
-      return;
-    }
-    this.props.onComputedPropertiesDirtyChange(this.IsComponentDirty());
-    this.shouldCheckComponentIsDirty = false;
-  };
-
-  public IsComponentDirty = (): boolean => {
-    if (
-      isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) &&
-      this.state.computedPropertiesContentIsValid
-    ) {
-      return true;
-    }
-
-    return false;
-  };
-
-  private async createComputedPropertiesEditor(): Promise<void> {
-    const value: string = JSON.stringify(this.props.computedPropertiesContent, undefined, 4);
-    const monaco = await loadMonaco();
-    this.computedPropertiesEditor = monaco.editor.create(this.computedPropertiesDiv.current, {
-      value: value,
-      language: "json",
-      ariaLabel: "Computed properties",
-    });
-    if (this.computedPropertiesEditor) {
-      const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
-      computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-      this.props.logComputedPropertiesSuccessMessage();
-    }
-  }
-
-  private onEditorContentChange = (): void => {
-    const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
-    try {
-      const newComputedPropertiesContent = JSON.parse(
-        computedPropertiesEditorModel.getValue(),
-      ) as DataModels.ComputedProperties;
-      this.props.onComputedPropertiesContentChange(newComputedPropertiesContent);
-      this.setState({ computedPropertiesContentIsValid: true });
-    } catch (e) {
-      this.setState({ computedPropertiesContentIsValid: false });
-    }
-  };
-
-  public render(): JSX.Element {
-    return (
-      <Stack {...titleAndInputStackProps}>
-        {isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>
-            {unsavedEditorWarningMessage("computedProperties")}
-          </MessageBar>
-        )}
-        <Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
-          <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
-            {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
-          </Link>
-          &#160; about how to define computed properties and how to use them.
-        </Text>
-        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
-      </Stack>
-    );
-  }
-}

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

@@ -3,7 +3,7 @@ import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
 import { loadMonaco } from "../../../LazyMonaco";
-import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
+import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 
@@ -120,7 +120,7 @@ export class IndexingPolicyComponent extends React.Component<
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
+          <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicynUnsavedWarningMessage}</MessageBar>
         )}
         <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx

@@ -1,8 +1,8 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { renderToString } from "react-dom/server";
 import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
 import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
+import { renderToString } from "react-dom/server";
 
 describe("MongoIndexingPolicyComponent", () => {
   const baseProps: MongoIndexingPolicyComponentProps = {
@@ -84,7 +84,7 @@ describe("MongoIndexingPolicyComponent", () => {
     ];
 
     test.each(cases)(
-      "mongo indexing policy saveable and discardable",
+      "",
       (
         notification: MongoNotificationMessage,
         indexToDropIsPresent: boolean,
@@ -111,10 +111,8 @@ describe("MongoIndexingPolicyComponent", () => {
         );
         if (mongoWarningNotificationMessage) {
           const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
-          // eslint-disable-next-line jest/no-conditional-expect
           expect(elementAsString).toContain(mongoWarningNotificationMessage);
         } else {
-          // eslint-disable-next-line jest/no-conditional-expect
           expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
         }
       },

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -19,6 +19,7 @@ import {
   addMongoIndexStackProps,
   createAndAddMongoIndexStackProps,
   customDetailsListStyles,
+  indexingPolicynUnsavedWarningMessage,
   infoAndToolTipTextStyle,
   mediumWidthStackStyles,
   mongoCompoundIndexNotSupportedMessage,
@@ -26,16 +27,15 @@ import {
   onRenderRow,
   separatorStyles,
   subComponentStackProps,
-  unsavedEditorWarningMessage,
 } from "../../SettingsRenderUtils";
 import {
   AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoIndexTypes,
-  MongoNotificationType,
   getMongoIndexType,
   getMongoIndexTypeText,
   isIndexTransforming,
+  MongoIndexIdField,
+  MongoIndexTypes,
+  MongoNotificationType,
 } from "../../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -297,7 +297,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     if (this.getMongoWarningNotificationMessage()) {
       warningMessage = this.getMongoWarningNotificationMessage();
     } else if (this.isMongoIndexingPolicySaveable()) {
-      warningMessage = unsavedEditorWarningMessage("indexPolicy");
+      warningMessage = indexingPolicynUnsavedWarningMessage;
     }
 
     return (

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

@@ -1,216 +0,0 @@
-import {
-  DefaultButton,
-  FontWeights,
-  Link,
-  MessageBar,
-  MessageBarType,
-  PrimaryButton,
-  ProgressIndicator,
-  Stack,
-  Text,
-} from "@fluentui/react";
-import * as React from "react";
-import * as ViewModels from "../../../../Contracts/ViewModels";
-
-import { handleError } from "Common/ErrorHandlingUtils";
-import { cancelDataTransferJob, pollDataTransferJob } from "Common/dataAccess/dataTransfers";
-import Explorer from "Explorer/Explorer";
-import { ChangePartitionKeyPane } from "Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane";
-import {
-  CosmosSqlDataTransferDataSourceSink,
-  DataTransferJobGetResults,
-} from "Utils/arm/generatedClients/dataTransferService/types";
-import { refreshDataTransferJobs, useDataTransferJobs } from "hooks/useDataTransferJobs";
-import { useSidePanel } from "hooks/useSidePanel";
-import { userContext } from "../../../../UserContext";
-
-export interface PartitionKeyComponentProps {
-  database: ViewModels.Database;
-  collection: ViewModels.Collection;
-  explorer: Explorer;
-}
-
-export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ database, collection, explorer }) => {
-  const { dataTransferJobs } = useDataTransferJobs();
-  const [portalDataTransferJob, setPortalDataTransferJob] = React.useState<DataTransferJobGetResults>(null);
-
-  React.useEffect(() => {
-    const loadDataTransferJobs = refreshDataTransferOperations;
-    loadDataTransferJobs();
-  }, []);
-
-  React.useEffect(() => {
-    const currentJob = findPortalDataTransferJob();
-    setPortalDataTransferJob(currentJob);
-    startPollingforUpdate(currentJob);
-  }, [dataTransferJobs]);
-
-  const isHierarchicalPartitionedContainer = (): boolean => collection.partitionKey?.kind === "MultiHash";
-
-  const getPartitionKeyValue = (): string => {
-    return (collection.partitionKeyProperties || []).map((property) => "/" + property).join(", ");
-  };
-
-  const partitionKeyName = "Partition key";
-  const partitionKeyValue = getPartitionKeyValue();
-
-  const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
-  };
-
-  const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold },
-  };
-
-  const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
-    if (isCurrentJobInProgress(currentJob)) {
-      const jobName = currentJob?.properties?.jobName;
-      try {
-        pollDataTransferJob(
-          jobName,
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-        );
-      } catch (error) {
-        handleError(error, "ChangePartitionKey", `Failed to complete data transfer job ${jobName}`);
-      }
-    }
-  };
-
-  const cancelRunningDataTransferJob = async (currentJob: DataTransferJobGetResults) => {
-    await cancelDataTransferJob(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      currentJob?.properties?.jobName,
-    );
-  };
-
-  const isCurrentJobInProgress = (currentJob: DataTransferJobGetResults) => {
-    const jobStatus = currentJob?.properties?.status;
-    return (
-      jobStatus &&
-      jobStatus !== "Completed" &&
-      jobStatus !== "Cancelled" &&
-      jobStatus !== "Failed" &&
-      jobStatus !== "Faulted"
-    );
-  };
-
-  const refreshDataTransferOperations = async () => {
-    await refreshDataTransferJobs(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-    );
-  };
-
-  const findPortalDataTransferJob = (): DataTransferJobGetResults => {
-    return dataTransferJobs.find((feed: DataTransferJobGetResults) => {
-      const sourceSink: CosmosSqlDataTransferDataSourceSink = feed?.properties
-        ?.source as CosmosSqlDataTransferDataSourceSink;
-      return sourceSink.databaseName === collection.databaseId && sourceSink.containerName === collection.id();
-    });
-  };
-
-  const getProgressDescription = (): string => {
-    const processedCount = portalDataTransferJob?.properties?.processedCount;
-    const totalCount = portalDataTransferJob?.properties?.totalCount;
-    const processedCountString = totalCount > 0 ? `(${processedCount} of ${totalCount} documents processed)` : "";
-    return `${portalDataTransferJob?.properties?.status} ${processedCountString}`;
-  };
-
-  const startPartitionkeyChangeWorkflow = () => {
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Change partition key",
-        <ChangePartitionKeyPane
-          sourceDatabase={database}
-          sourceCollection={collection}
-          explorer={explorer}
-          onClose={refreshDataTransferOperations}
-        />,
-      );
-  };
-
-  const getPercentageComplete = () => {
-    const jobStatus = portalDataTransferJob?.properties?.status;
-    const isCompleted = jobStatus === "Completed";
-    if (isCompleted) {
-      return 1;
-    }
-    const processedCount = portalDataTransferJob?.properties?.processedCount;
-    const totalCount = portalDataTransferJob?.properties?.totalCount;
-    const isJobInProgress = isCurrentJobInProgress(portalDataTransferJob);
-    return isJobInProgress ? (totalCount > 0 ? processedCount / totalCount : null) : 0;
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 20 }} styles={{ root: { maxWidth: 600 } }}>
-      <Stack tokens={{ childrenGap: 10 }}>
-        <Text styles={textHeadingStyle}>Change {partitionKeyName.toLowerCase()}</Text>
-        <Stack horizontal tokens={{ childrenGap: 20 }}>
-          <Stack tokens={{ childrenGap: 5 }}>
-            <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
-            <Text styles={textSubHeadingStyle}>Partitioning</Text>
-          </Stack>
-          <Stack tokens={{ childrenGap: 5 }}>
-            <Text>{partitionKeyValue}</Text>
-            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
-          </Stack>
-        </Stack>
-      </Stack>
-      <MessageBar messageBarType={MessageBarType.warning}>
-        To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the
-        source container for the entire duration of the partition key change process.
-        <Link
-          href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
-          target="_blank"
-          underline
-        >
-          Learn more
-        </Link>
-      </MessageBar>
-      <Text>
-        To change the partition key, a new destination container must be created or an existing destination container
-        selected. Data will then be copied to the destination container.
-      </Text>
-      <PrimaryButton
-        styles={{ root: { width: "fit-content" } }}
-        text="Change"
-        onClick={startPartitionkeyChangeWorkflow}
-        disabled={isCurrentJobInProgress(portalDataTransferJob)}
-      />
-      {portalDataTransferJob && (
-        <Stack>
-          <Text styles={textHeadingStyle}>{partitionKeyName} change job</Text>
-          <Stack
-            horizontal
-            tokens={{ childrenGap: 20 }}
-            styles={{
-              root: {
-                alignItems: "center",
-              },
-            }}
-          >
-            <ProgressIndicator
-              label={portalDataTransferJob?.properties?.jobName}
-              description={getProgressDescription()}
-              percentComplete={getPercentageComplete()}
-              styles={{
-                root: {
-                  width: "85%",
-                },
-              }}
-            ></ProgressIndicator>
-            {isCurrentJobInProgress(portalDataTransferJob) && (
-              <DefaultButton text="Cancel" onClick={() => cancelRunningDataTransferJob(portalDataTransferJob)} />
-            )}
-          </Stack>
-        </Stack>
-      )}
-    </Stack>
-  );
-};

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

@@ -306,7 +306,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     };
 
     const costElement = (): JSX.Element => {
-      const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
+      const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -917,7 +917,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             >
               $
                
-              0.0080
+              0.012
               /hr
             </Text>
             <Text
@@ -929,7 +929,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             >
               $
                
-              0.19
+              0.29
               /day
             </Text>
             <Text
@@ -941,7 +941,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             >
               $
                
-              5.84
+              8.76
               /mo
             </Text>
           </Stack>
@@ -1354,7 +1354,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             >
               $
                
-              0.0080
+              0.012
               /hr
             </Text>
             <Text
@@ -1366,7 +1366,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             >
               $
                
-              0.19
+              0.29
               /day
             </Text>
             <Text
@@ -1378,7 +1378,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             >
               $
                
-              5.84
+              8.76
               /mo
             </Text>
           </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ComputedPropertiesComponent renders 1`] = `
-<Stack
-  tokens={
-    Object {
-      "childrenGap": 5,
-    }
-  }
->
-  <Text
-    style={
-      Object {
-        "marginBottom": "10px",
-        "marginLeft": "30px",
-      }
-    }
-  >
-    <StyledLinkBase
-      href="https://aka.ms/computed-properties-preview/"
-      target="_blank"
-    >
-      Learn more
-       
-      <FontIcon
-        iconName="NavigateExternalInline"
-      />
-    </StyledLinkBase>
-      about how to define computed properties and how to use them.
-  </Text>
-  <div
-    className="settingsV2IndexingPolicyEditor"
-    tabIndex={0}
-  />
-</Stack>
-`;

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -4,7 +4,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
-export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy | DataModels.ComputedProperties;
+export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy;
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
@@ -45,8 +45,6 @@ export enum SettingsV2TabTypes {
   ConflictResolutionTab,
   SubSettingsTab,
   IndexingPolicyTab,
-  PartitionKeyTab,
-  ComputedPropertiesTab,
 }
 
 export interface IsComponentDirtyResult {
@@ -66,7 +64,6 @@ export interface MongoNotificationMessage {
 
 export const hasDatabaseSharedThroughput = (collection: ViewModels.Collection): boolean => {
   const database: ViewModels.Database = collection.getDatabase();
-  console.log(database?.isDatabaseShared(), collection.offer());
   return database?.isDatabaseShared() && !collection.offer();
 };
 
@@ -149,10 +146,6 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       return "Settings";
     case SettingsV2TabTypes.IndexingPolicyTab:
       return "Indexing Policy";
-    case SettingsV2TabTypes.PartitionKeyTab:
-      return "Partition Keys (preview)";
-    case SettingsV2TabTypes.ComputedPropertiesTab:
-      return "Computed Properties (preview)";
     default:
       throw new Error(`Unknown tab ${tab}`);
   }
@@ -206,49 +199,3 @@ export const getMongoIndexTypeText = (index: MongoIndexTypes): string => {
 export const isIndexTransforming = (indexTransformationProgress: number): boolean =>
   // index transformation progress can be 0
   indexTransformationProgress !== undefined && indexTransformationProgress !== 100;
-
-export const getPartitionKeyName = (apiType: string, isLowerCase?: boolean): string => {
-  const partitionKeyName = apiType === "Mongo" ? "Shard key" : "Partition key";
-  return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
-};
-
-export const getPartitionKeyTooltipText = (apiType: string): string => {
-  if (apiType === "Mongo") {
-    return "The shard key (field) is used to split your data across many replica sets (shards) to achieve unlimited scalability. It’s critical to choose a field that will evenly distribute your data.";
-  }
-  let tooltipText = `The ${getPartitionKeyName(
-    apiType,
-    true,
-  )} is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume.`;
-  if (apiType === "SQL") {
-    tooltipText += " For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice.";
-  }
-  return tooltipText;
-};
-
-export const getPartitionKeySubtext = (partitionKeyDefault: boolean, apiType: string): string => {
-  if (partitionKeyDefault && (apiType === "SQL" || apiType === "Mongo")) {
-    const subtext = "For small workloads, the item ID is a suitable choice for the partition key.";
-    return subtext;
-  }
-  return "";
-};
-
-export const getPartitionKeyPlaceHolder = (apiType: string, index?: number): string => {
-  switch (apiType) {
-    case "Mongo":
-      return "e.g., categoryId";
-    case "Gremlin":
-      return "e.g., /address";
-    case "SQL":
-      return `${
-        index === undefined
-          ? "Required - first partition key e.g., /TenantId"
-          : index === 0
-          ? "second partition key e.g., /UserId"
-          : "third partition key e.g., /SessionId"
-      }`;
-    default:
-      return "e.g., /address/zipCode";
-  }
-};

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -40,12 +40,6 @@ export const collection = {
     version: 2,
   },
   partitionKeyProperties: ["partitionKey"],
-  computedProperties: ko.observable<DataModels.ComputedProperties>([
-    {
-      name: "queryName",
-      query: "query",
-    },
-  ]),
   readSettings: () => {
     return;
   },

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

@@ -26,7 +26,6 @@ exports[`SettingsComponent renders 1`] = `
             Object {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
-              "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
@@ -104,7 +103,6 @@ exports[`SettingsComponent renders 1`] = `
             Object {
               "analyticalStorageTtl": [Function],
               "changeFeedPolicy": [Function],
-              "computedProperties": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
                 "_isInitializingNotebooks": false,
@@ -206,133 +204,6 @@ exports[`SettingsComponent renders 1`] = `
           shouldDiscardIndexingPolicy={false}
         />
       </PivotItem>
-      <PivotItem
-        headerText="Partition Keys (preview)"
-        itemKey="PartitionKeyTab"
-        key="PartitionKeyTab"
-        style={
-          Object {
-            "marginTop": 20,
-          }
-        }
-      >
-        <PartitionKeyComponent
-          collection={
-            Object {
-              "analyticalStorageTtl": [Function],
-              "changeFeedPolicy": [Function],
-              "computedProperties": [Function],
-              "conflictResolutionPolicy": [Function],
-              "container": Explorer {
-                "_isInitializingNotebooks": false,
-                "_resetNotebookWorkspace": [Function],
-                "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isTabsContentExpanded": [Function],
-                "onRefreshDatabasesKeyPress": [Function],
-                "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {
-                  "armResourceId": undefined,
-                  "retryOptions": Object {
-                    "maxTimeout": 5000,
-                    "minTimeout": 5000,
-                    "retries": 3,
-                  },
-                },
-                "provideFeedbackEmail": [Function],
-                "queriesClient": QueriesClient {
-                  "container": [Circular],
-                },
-                "refreshNotebookList": [Function],
-                "resourceTree": ResourceTreeAdapter {
-                  "container": [Circular],
-                  "copyNotebook": [Function],
-                  "parameters": [Function],
-                },
-              },
-              "databaseId": "test",
-              "defaultTtl": [Function],
-              "geospatialConfig": [Function],
-              "getDatabase": [Function],
-              "id": [Function],
-              "indexingPolicy": [Function],
-              "offer": [Function],
-              "partitionKey": Object {
-                "kind": "hash",
-                "paths": Array [],
-                "version": 2,
-              },
-              "partitionKeyProperties": Array [
-                "partitionKey",
-              ],
-              "readSettings": [Function],
-              "uniqueKeyPolicy": Object {},
-              "usageSizeInKB": [Function],
-            }
-          }
-          explorer={
-            Explorer {
-              "_isInitializingNotebooks": false,
-              "_resetNotebookWorkspace": [Function],
-              "isFixedCollectionWithSharedThroughputSupported": [Function],
-              "isTabsContentExpanded": [Function],
-              "onRefreshDatabasesKeyPress": [Function],
-              "onRefreshResourcesClick": [Function],
-              "phoenixClient": PhoenixClient {
-                "armResourceId": undefined,
-                "retryOptions": Object {
-                  "maxTimeout": 5000,
-                  "minTimeout": 5000,
-                  "retries": 3,
-                },
-              },
-              "provideFeedbackEmail": [Function],
-              "queriesClient": QueriesClient {
-                "container": [Circular],
-              },
-              "refreshNotebookList": [Function],
-              "resourceTree": ResourceTreeAdapter {
-                "container": [Circular],
-                "copyNotebook": [Function],
-                "parameters": [Function],
-              },
-            }
-          }
-        />
-      </PivotItem>
-      <PivotItem
-        headerText="Computed Properties (preview)"
-        itemKey="ComputedPropertiesTab"
-        key="ComputedPropertiesTab"
-        style={
-          Object {
-            "marginTop": 20,
-          }
-        }
-      >
-        <ComputedPropertiesComponent
-          computedPropertiesContent={
-            Array [
-              Object {
-                "name": "queryName",
-                "query": "query",
-              },
-            ]
-          }
-          computedPropertiesContentBaseline={
-            Array [
-              Object {
-                "name": "queryName",
-                "query": "query",
-              },
-            ]
-          }
-          logComputedPropertiesSuccessMessage={[Function]}
-          onComputedPropertiesContentChange={[Function]}
-          onComputedPropertiesDirtyChange={[Function]}
-          resetShouldDiscardComputedProperties={[Function]}
-          shouldDiscardComputedProperties={false}
-        />
-      </PivotItem>
     </StyledPivot>
   </div>
 </div>

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

@@ -99,6 +99,18 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     .
   </Text>
+  <Text
+    styles={
+      Object {
+        "root": Object {
+          "color": "windowtext",
+          "fontSize": 14,
+        },
+      }
+    }
+  >
+    You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.
+  </Text>
   <Text
     id="updateThroughputDelayedApplyWarningMessage"
     styles={

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -14,13 +14,7 @@
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
-
+.capacitycalculator-link:focus{
-.capacitycalculator-link:focus {
   text-decoration: underline;
   outline-offset: 2px;
-}
+}
-
-.copyQuery:focus::after,
-.deleteQuery:focus::after {
-  outline: none !important;
-}

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
   });
 
   it("should switch mode properly", () => {
-    wrapper.find('[id="Manual-input"]').simulate("change");
+    wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
       "Container throughput (400 - unlimited RU/s)",
     );
 
-    wrapper.find('[id="Autoscale-input"]').simulate("change");
+    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
   });
 });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <input
             id="Autoscale-input"
             className="throughputInputRadioBtn"
-            aria-label={`${getThroughputLabelText()} Autoscale`}
+            aria-label="Autoscale database throughput"
             aria-required={true}
             checked={isAutoscaleSelected}
             type="radio"
@@ -204,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <input
             id="Manual-input"
             className="throughputInputRadioBtn"
-            aria-label={`${getThroughputLabelText()} Manual`}
+            aria-label="Manual database throughput"
             checked={!isAutoscaleSelected}
             type="radio"
             aria-required={true}
@@ -271,17 +271,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <Stack className="throughputInputSpacing">
           <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with&nbsp;
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="Capacity calculator">
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
               capacity calculator
             </Link>
             .
           </Text>
-          <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
-              {isDatabase ? "Database" : getCollectionName()} Required RU/s
-            </Text>
-            <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
-          </Stack>
 
           <TooltipHost
             directionalHint={DirectionalHint.topLeftEdge}
@@ -302,7 +296,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
               max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
               value={throughput.toString()}
-              ariaLabel={`${isDatabase ? "Database" : getCollectionName()} Required RU/s`}
+              aria-label="Max request units per second"
               required={true}
               errorMessage={throughputError}
             />

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -18,17 +18,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       horizontal={true}
     >
       <div
-        className="ms-Stack css-109"
+        className="ms-Stack css-53"
       >
         <span
           className="mandatoryStar"
-          key=".0:$.$.0"
+          key=".0:$.0"
         >
           * 
         </span>
         <Text
           aria-label="Throughput header"
-          key=".0:$.$.1"
+          key=".0:$.1"
           style={
             Object {
               "fontWeight": 600,
@@ -39,7 +39,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         >
           <span
             aria-label="Throughput header"
-            className="css-110"
+            className="css-54"
             style={
               Object {
                 "fontWeight": 600,
@@ -51,7 +51,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           </span>
         </Text>
         <InfoTooltip
-          key=".0:$.$.2"
+          key=".0:$.2"
         >
           <span>
             <StyledTooltipHostBase
@@ -336,13 +336,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <div
-                  className="ms-TooltipHost root-111"
+                  className="ms-TooltipHost root-55"
                   onBlurCapture={[Function]}
                   onFocusCapture={[Function]}
                   onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
-                  role="none"
                 >
                   <StyledIconBase
                     ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
@@ -632,7 +631,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     >
                       <i
                         aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
-                        className="panelInfoIcon root-114"
+                        className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
                         tabIndex={0}
@@ -641,24 +640,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       </i>
                     </IconBase>
                   </StyledIconBase>
-                  <div
-                    hidden={true}
-                    id="tooltip0"
-                    style={
-                      Object {
-                        "border": 0,
-                        "height": 1,
-                        "margin": -1,
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "absolute",
-                        "whiteSpace": "nowrap",
-                        "width": 1,
-                      }
-                    }
-                  >
-                    Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage.
-                  </div>
                 </div>
               </TooltipHostBase>
             </StyledTooltipHostBase>
@@ -671,14 +652,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       verticalAlign="center"
     >
       <div
-        className="ms-Stack css-115"
+        className="ms-Stack css-58"
       >
         <div
-          key=".0:$.$.0"
+          key=".0:$.0"
           role="radiogroup"
         >
           <input
-            aria-label="Container throughput (autoscale) Autoscale"
+            aria-label="Autoscale database throughput"
             aria-required={true}
             checked={true}
             className="throughputInputRadioBtn"
@@ -695,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             Autoscale
           </label>
           <input
-            aria-label="Container throughput (autoscale) Manual"
+            aria-label="Manual database throughput"
             aria-required={true}
             checked={false}
             className="throughputInputRadioBtn"
@@ -718,16 +699,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       className="throughputInputSpacing"
     >
       <div
-        className="ms-Stack throughputInputSpacing css-116"
+        className="ms-Stack throughputInputSpacing css-59"
       >
         <Text
           aria-label="capacity calculator of azure cosmos db"
-          key=".0:$.$.0"
+          key=".0:$.0"
           variant="small"
         >
           <span
             aria-label="capacity calculator of azure cosmos db"
-            className="css-110"
+            className="css-54"
           >
             Estimate your required RU/s with
              
@@ -1017,7 +998,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link root-117"
+                  className="ms-Link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"
@@ -1031,14 +1012,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </Text>
         <Stack
           horizontal={true}
-          key=".0:$.$.1"
+          key=".0:$.1"
         >
           <div
-            className="ms-Stack css-109"
+            className="ms-Stack css-53"
           >
             <Text
               aria-label="maxRUDescription"
-              key=".0:$.$.0"
+              key=".0:$.0"
               style={
                 Object {
                   "fontWeight": 600,
@@ -1049,7 +1030,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             >
               <span
                 aria-label="maxRUDescription"
-                className="css-110"
+                className="css-54"
                 style={
                   Object {
                     "fontWeight": 600,
@@ -1062,7 +1043,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               </span>
             </Text>
             <InfoTooltip
-              key=".0:$.$.1"
+              key=".0:$.1"
             >
               <span>
                 <StyledTooltipHostBase
@@ -1347,13 +1328,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     }
                   >
                     <div
-                      className="ms-TooltipHost root-111"
+                      className="ms-TooltipHost root-55"
                       onBlurCapture={[Function]}
                       onFocusCapture={[Function]}
                       onKeyDown={[Function]}
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
-                      role="none"
                     >
                       <StyledIconBase
                         ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
@@ -1643,7 +1623,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         >
                           <i
                             aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
-                            className="panelInfoIcon root-114"
+                            className="panelInfoIcon root-57"
                             data-icon-name="Info"
                             role="img"
                             tabIndex={0}
@@ -1652,24 +1632,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           </i>
                         </IconBase>
                       </StyledIconBase>
-                      <div
-                        hidden={true}
-                        id="tooltip1"
-                        style={
-                          Object {
-                            "border": 0,
-                            "height": 1,
-                            "margin": -1,
-                            "overflow": "hidden",
-                            "padding": 0,
-                            "position": "absolute",
-                            "whiteSpace": "nowrap",
-                            "width": 1,
-                          }
-                        }
-                      >
-                        Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage.
-                      </div>
                     </div>
                   </TooltipHostBase>
                 </StyledTooltipHostBase>
@@ -1681,7 +1643,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           ariaLabel="Container max RU/s"
           errorMessage=""
           id="autoscaleRUValueField"
-          key=".0:$.$.2"
+          key=".0:$.2"
           max="9007199254740991"
           min={1000}
           onChange={[Function]}
@@ -1991,18 +1953,18 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             value="4000"
           >
             <div
-              className="ms-TextField is-required root-119"
+              className="ms-TextField is-required root-62"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-120"
+                  className="ms-TextField-fieldGroup fieldGroup-63"
                 >
                   <input
                     aria-invalid={false}
                     aria-label="Container max RU/s"
-                    className="ms-TextField-field field-121"
+                    className="ms-TextField-field field-64"
                     id="autoscaleRUValueField"
                     max="9007199254740991"
                     min={1000}
@@ -2021,11 +1983,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           </TextFieldBase>
         </StyledTextFieldBase>
         <Text
-          key=".0:$.$.3"
+          key=".0:$.3"
           variant="small"
         >
           <span
-            className="css-110"
+            className="css-54"
           >
             Your 
             container

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -98,11 +98,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     // Only call when expand has actually changed
     if (this.state.isExpanded !== prevState.isExpanded) {
       if (this.state.isExpanded) {
-        console.log("IN HERE");
+        this.props.node.onExpanded && setTimeout(this.props.node.onExpanded, TreeNodeComponent.callbackDelayMS);
-        this.props.node.onExpanded &&
-          setTimeout(async () => {
-            await this.props.node.onExpanded();
-          }, TreeNodeComponent.callbackDelayMS);
       } else {
         this.props.node.onCollapsed && setTimeout(this.props.node.onCollapsed, TreeNodeComponent.callbackDelayMS);
       }
@@ -251,7 +247,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
           name="More"
           title="More"
           className="treeMenuEllipsis"
-          ariaLabel={`${menuItemLabel} options`}
+          ariaLabel={menuItemLabel}
           menuIconProps={{
             iconName: menuItemLabel,
             styles: { root: { fontSize: "18px", fontWeight: "bold" } },

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

@@ -172,7 +172,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
       onKeyPress={[Function]}
     >
       <CustomizedIconButton
-        ariaLabel="More options"
+        ariaLabel="More"
         className="treeMenuEllipsis"
         menuIconProps={
           Object {
@@ -397,7 +397,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
       onKeyPress={[Function]}
     >
       <CustomizedIconButton
-        ariaLabel="More options"
+        ariaLabel="More"
         className="treeMenuEllipsis"
         menuIconProps={
           Object {

src/Explorer/Controls/TreeComponent/treeComponent.less

@@ -59,10 +59,6 @@
       }
     }
 
-    [data-test="Gallery"]{
-      outline-offset: -1px;
-    }
-
     .selected {
       & > .treeNodeHeader {
         background-color: @AccentExtra;

src/Explorer/Explorer.tsx

@@ -5,9 +5,8 @@ import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
+import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
-import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
@@ -265,43 +264,61 @@ export default class Explorer {
     // TODO: return result
   }
 
+  private getRandomInt(max: number) {
+    return Math.floor(Math.random() * max);
+  }
+
   public openNPSSurveyDialog(): void {
     if (!Platform.Portal) {
       return;
     }
 
+    const NINETY_DAYS_IN_MS = 7776000000;
     const ONE_DAY_IN_MS = 86400000;
-    const SEVEN_DAYS_IN_MS = 604800000;
+    const THREE_DAYS_IN_MS = 259200000;
+    const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
+      userContext.databaseAccount?.systemData?.createdAt || "",
+      NINETY_DAYS_IN_MS,
+    );
+    const lastSubmitted: string = localStorage.getItem("lastSubmitted");
+
+    if (lastSubmitted !== null) {
+      let lastSubmittedDate: number = parseInt(lastSubmitted);
+      if (isNaN(lastSubmittedDate)) {
+        lastSubmittedDate = 0;
+      }
+
+      const nowMs: number = Date.now();
+      const millisecsSinceLastSubmitted = nowMs - lastSubmittedDate;
+      if (millisecsSinceLastSubmitted < NINETY_DAYS_IN_MS) {
+        return;
+      }
+    }
 
     // Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
     if (userContext.isTryCosmosDBSubscription) {
       if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
-        Logger.logInfo(
+        this.sendNPSMessage();
-          `Sending message to Portal to check if NPS Survey can be displayed in Try Cosmos DB ${userContext.apiType}`,
-          "Explorer/openNPSSurveyDialog",
-        );
-        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
       }
     } else {
-      // Show survey when an existing account is older than 7 days
+      // An existing account is older than 3 days but less than 90 days old. For existing account show to 100% of users in Data Explorer.
       if (
-        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", SEVEN_DAYS_IN_MS)
+        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS) &&
+        isAccountNewerThanNinetyDays
       ) {
-        Logger.logInfo(
+        this.sendNPSMessage();
-          `Sending message to Portal to check if NPS Survey can be displayed for existing ${userContext.apiType} account older than 7 days`,
+      } else {
-          "Explorer/openNPSSurveyDialog",
+        // An existing account is greater than 90 days. For existing account show to random 33% of users in Data Explorer.
-        );
+        if (this.getRandomInt(100) < 33) {
-        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+          this.sendNPSMessage();
+        }
       }
     }
   }
 
-  public async openCESCVAFeedbackBlade(): Promise<void> {
+  private sendNPSMessage() {
-    sendMessage({ type: MessageTypes.OpenCESCVAFeedbackBlade });
+    sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-    Logger.logInfo(
+    localStorage.setItem("lastSubmitted", Date.now().toString());
-      `CES CVA Feedback logging current date when survey is shown ${Date.now().toString()}`,
-      "Explorer/openCESCVAFeedbackBlade",
-    );
   }
 
   public async refreshDatabaseForResourceToken(): Promise<void> {
@@ -366,7 +383,9 @@ export default class Explorer {
 
   public onRefreshResourcesClick = (): void => {
     if (configContext.platform === Platform.Fabric) {
-      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
+      // Requesting the tokens will trigger a refresh of the databases
+      // TODO: Once the id is returned from Fabric, we can await this call and then refresh the databases here
+      requestDatabaseResourceTokens();
       return;
     }
 
@@ -1376,12 +1395,9 @@ export default class Explorer {
       copilotEnabledPromise,
       copilotUserDBEnabledPromise,
     ]);
-    const copilotSampleDBEnabled = LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true";
+    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled);
-    useQueryCopilot.getState().setCopilotEnabled(copilotEnabled && copilotUserDBEnabled);
     useQueryCopilot.getState().setCopilotUserDBEnabled(copilotUserDBEnabled);
-    useQueryCopilot
+    useQueryCopilot.getState().setShowWelcomeModal(window.localStorage.getItem("hideWelcomeModal") !== "true");
-      .getState()
-      .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
   }
 
   public async refreshSampleData(): Promise<void> {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -367,7 +367,7 @@ describe("GraphExplorer", () => {
       });
 
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(queryDocuments).toHaveBeenCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
           maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
           enableCrossPartitionQuery: true,
         });
@@ -404,7 +404,7 @@ describe("GraphExplorer", () => {
       });
 
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(queryDocuments).toHaveBeenCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
           maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
           enableCrossPartitionQuery: true,
         });

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1163,12 +1163,15 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       )}"`,
     ).then(
       (documents: DataModels.DocumentId[]) => {
-        $.each(documents, (index: number, doc: any) => {
+        $.each(
-          newIconsMap[doc["_graph_icon_property_value"]] = {
+          documents,
-            data: doc["icon"],
+          (index: number, doc: { _graph_icon_property_value: string; icon: string; format: string }) => {
-            format: doc["format"],
+            newIconsMap[doc["_graph_icon_property_value"]] = {
-          };
+              data: doc["icon"],
-        });
+              format: doc["format"],
+            };
+          },
+        );
 
         // Update graph configuration
         this.setState({

src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx

@@ -43,7 +43,7 @@ describe("Graph Style Component", () => {
     expect(asFragment).toMatchSnapshot();
   });
 
-  it("should render node properties dropdown list", () => {
+  it("should render node properties dropdown list ", () => {
     const dropDownList = screen.getByText("Show vertex (node) as");
     expect(dropDownList).toBeDefined();
   });

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -24,21 +24,16 @@ interface Props {
 export interface CommandBarStore {
   contextButtons: CommandButtonComponentProps[];
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
-  isHidden: boolean;
-  setIsHidden: (isHidden: boolean) => void;
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
   contextButtons: [],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
-  isHidden: false,
-  setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
-  const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
@@ -47,7 +42,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className="commandBarContainer">
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
           items={CommandBarUtil.convertButton(buttons, backgroundColor)}
@@ -96,7 +91,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
       ? {
           root: {
             backgroundColor: "transparent",
-            padding: "2px 8px 0px 8px",
+            padding: "0px 14px 0px 14px",
           },
         }
       : {
@@ -106,7 +101,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         };
 
   return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className="commandBarContainer">
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

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

@@ -2,8 +2,10 @@ import * as ko from "knockout";
 import { AuthType } from "../../../AuthType";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 import { CollectionBase } from "../../../Contracts/ViewModels";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
+import NotebookManager from "../../Notebook/NotebookManager";
 import { useNotebook } from "../../Notebook/useNotebook";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -70,6 +72,181 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
   });
 
+  describe("Enable notebook button", () => {
+    const enableNotebookBtnLabel = "Enable Notebooks (Preview)";
+    const selectedNodeState = useSelectedNode.getState();
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      updateUserContext({
+        portalEnv: "prod",
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+    });
+
+    afterEach(() => {
+      updateUserContext({
+        portalEnv: "prod",
+      });
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
+    });
+
+    it("Notebooks is already enabled - button should be hidden", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+      expect(enableNotebookBtn).toBeUndefined();
+    });
+
+    it("Account is running on one of the national clouds - button should be hidden", () => {
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+      expect(enableNotebookBtn).toBeUndefined();
+    });
+
+    it("Notebooks is not enabled but is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+
+      //TODO: modify once notebooks are available
+      expect(enableNotebookBtn).toBeUndefined();
+      //expect(enableNotebookBtn).toBeDefined();
+      //expect(enableNotebookBtn.disabled).toBe(false);
+      //expect(enableNotebookBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
+
+      //TODO: modify once notebooks are available
+      expect(enableNotebookBtn).toBeUndefined();
+      //expect(enableNotebookBtn).toBeDefined();
+      //expect(enableNotebookBtn.disabled).toBe(true);
+      //expect(enableNotebookBtn.tooltipText).toBe(
+      //  "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
+      //);
+    });
+  });
+
+  describe("Open Mongo shell button", () => {
+    const openMongoShellBtnLabel = "Open Mongo shell";
+    const selectedNodeState = useSelectedNode.getState();
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+    });
+
+    afterAll(() => {
+      updateUserContext({
+        apiType: "SQL",
+      });
+      useNotebook.getState().setIsShellEnabled(false);
+    });
+
+    beforeEach(() => {
+      updateUserContext({
+        apiType: "Mongo",
+      });
+      useNotebook.getState().setIsShellEnabled(true);
+    });
+
+    afterEach(() => {
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
+    });
+
+    it("Mongo Api not available - button should be hidden", () => {
+      updateUserContext({
+        apiType: "SQL",
+      });
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Running on a national cloud - button should be hidden", () => {
+      updateUserContext({
+        portalEnv: "mooncake",
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is not enabled and is unavailable - button should be hidden", () => {
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is not enabled and is available - button should be hidden", () => {
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is enabled and is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+      useNotebook.getState().setIsShellEnabled(false);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
+  });
+
   describe("Open Cassandra shell button", () => {
     const openCassandraShellBtnLabel = "Open Cassandra shell";
     const selectedNodeState = useSelectedNode.getState();
@@ -128,6 +305,42 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
     });
+
+    it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+      expect(openCassandraShellBtn).toBeUndefined();
+    });
+
+    it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+
+      expect(openCassandraShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
+    });
+
+    it("Notebooks is enabled and is available - button should be shown and enabled", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+      expect(openCassandraShellBtn).toBeDefined();
+
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
+    });
   });
 
   describe("Open Postgres and vCore Mongo buttons", () => {
@@ -155,6 +368,62 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
   });
 
+  describe("GitHub buttons", () => {
+    const connectToGitHubBtnLabel = "Connect to GitHub";
+    const manageGitHubSettingsBtnLabel = "Manage GitHub settings";
+    const selectedNodeState = useSelectedNode.getState();
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      mockExplorer.notebookManager = new NotebookManager();
+      mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+      useNotebook.getState().setIsNotebookEnabled(false);
+    });
+
+    it("Notebooks is enabled and GitHubOAuthService is not logged in - connect to github button should be visible", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
+      expect(connectToGitHubBtn).toBeDefined();
+    });
+
+    it("Notebooks is enabled and GitHubOAuthService is logged in - manage github settings button should be visible", () => {
+      useNotebook.getState().setIsNotebookEnabled(true);
+      mockExplorer.notebookManager.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const manageGitHubSettingsBtn = buttons.find(
+        (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel,
+      );
+      expect(manageGitHubSettingsBtn).toBeDefined();
+    });
+
+    it("Notebooks is not enabled - connect to github and manage github settings buttons should be hidden", () => {
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+
+      const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
+      expect(connectToGitHubBtn).toBeUndefined();
+
+      const manageGitHubSettingsBtn = buttons.find(
+        (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel,
+      );
+      expect(manageGitHubSettingsBtn).toBeUndefined();
+    });
+  });
+
   describe("Resource token", () => {
     const mockCollection = { id: ko.observable("test") } as CollectionBase;
     useSelectedNode.getState().setSelectedNode(mockCollection);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,4 +1,3 @@
-import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
@@ -7,10 +6,13 @@ import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
 import AddTriggerIcon from "../../../../images/AddTrigger.svg";
 import AddUdfIcon from "../../../../images/AddUdf.svg";
 import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
+import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import HomeIcon from "../../../../images/Home_16.svg";
 import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
 import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
+import GitHubIcon from "../../../../images/github.svg";
+import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
+import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
 import OpenInTabIcon from "../../../../images/open-in-tab.svg";
 import SettingsIcon from "../../../../images/settings_15x15.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
@@ -18,6 +20,7 @@ import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { Platform, configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { JunoClient } from "../../../Juno/JunoClient";
 import { userContext } from "../../../UserContext";
 import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
@@ -28,6 +31,7 @@ import { useNotebook } from "../../Notebook/useNotebook";
 import { OpenFullScreen } from "../../OpenFullScreen";
 import { AddDatabasePanel } from "../../Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
+import { GitHubReposPanel } from "../../Panes/GitHubReposPanel/GitHubReposPanel";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
 import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
@@ -53,9 +57,6 @@ export function createStaticCommandBarButtons(
   };
 
   if (configContext.platform !== Platform.Fabric) {
-    const homeBtn = createHomeButton();
-    buttons.push(homeBtn);
-
     const newCollectionBtn = createNewCollectionGroup(container);
     buttons.push(newCollectionBtn);
     if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
@@ -74,6 +75,57 @@ export function createStaticCommandBarButtons(
     }
   }
 
+  if (useNotebook.getState().isNotebookEnabled) {
+    addDivider();
+    const notebookButtons: CommandButtonComponentProps[] = [];
+
+    const newNotebookButton = createNewNotebookButton(container);
+    newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
+    notebookButtons.push(newNotebookButton);
+
+    if (container.notebookManager?.gitHubOAuthService) {
+      notebookButtons.push(createManageGitHubAccountButton(container));
+    }
+    if (useNotebook.getState().isPhoenixFeatures && configContext.isTerminalEnabled) {
+      notebookButtons.push(createOpenTerminalButton(container));
+    }
+    if (useNotebook.getState().isPhoenixNotebooks && selectedNodeState.isConnectedToContainer()) {
+      notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    }
+    if (
+      (userContext.apiType === "Mongo" &&
+        useNotebook.getState().isShellEnabled &&
+        selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
+      userContext.apiType === "Cassandra"
+    ) {
+      notebookButtons.push(createDivider());
+      if (userContext.apiType === "Cassandra") {
+        notebookButtons.push(createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.Cassandra));
+      } else {
+        notebookButtons.push(createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.Mongo));
+      }
+    }
+
+    notebookButtons.forEach((btn) => {
+      if (btn.commandButtonLabel.indexOf("Cassandra") !== -1) {
+        if (!useNotebook.getState().isPhoenixFeatures) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
+        }
+      } else if (btn.commandButtonLabel.indexOf("Mongo") !== -1) {
+        if (!useNotebook.getState().isPhoenixFeatures) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
+        }
+      } else if (btn.commandButtonLabel.indexOf("Open Terminal") !== -1) {
+        if (!useNotebook.getState().isPhoenixFeatures) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
+        }
+      } else if (!useNotebook.getState().isPhoenixNotebooks) {
+        applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
+      }
+      buttons.push(btn);
+    });
+  }
+
   if (!selectedNodeState.isDatabaseNodeOrNoneSelected()) {
     const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
@@ -83,7 +135,7 @@ export function createStaticCommandBarButtons(
       buttons.push(newSqlQueryBtn);
     }
 
-    if (isQuerySupported && selectedNodeState.findSelectedCollection() && configContext.platform !== Platform.Fabric) {
+    if (isQuerySupported && selectedNodeState.findSelectedCollection()) {
       const openQueryBtn = createOpenQueryButton(container);
       openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton()];
       buttons.push(openQueryBtn);
@@ -144,22 +196,18 @@ export function createContextCommandBarButtons(
 }
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  const buttons: CommandButtonComponentProps[] =
+  const buttons: CommandButtonComponentProps[] = [
-    configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
+    {
-      ? []
+      iconSrc: SettingsIcon,
-      : [
+      iconAlt: "Settings",
-          {
+      onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", <SettingsPane />),
-            iconSrc: SettingsIcon,
+      commandButtonLabel: undefined,
-            iconAlt: "Settings",
+      ariaLabel: "Settings",
-            onCommandClick: () =>
+      tooltipText: "Settings",
-              useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={container} />),
+      hasPopup: true,
-            commandButtonLabel: undefined,
+      disabled: false,
-            ariaLabel: "Settings",
+    },
-            tooltipText: "Settings",
+  ];
-            hasPopup: true,
-            disabled: false,
-          },
-        ];
 
   const showOpenFullScreen =
     configContext.platform === Platform.Portal && !isRunningOnNationalCloud() && userContext.apiType !== "Gremlin";
@@ -183,12 +231,12 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     buttons.push(fullScreenButton);
   }
 
-  if (configContext.platform === Platform.Portal) {
+  if (configContext.platform !== Platform.Emulator) {
     const label = "Feedback";
     const feedbackButtonOptions: CommandButtonComponentProps = {
       iconSrc: FeedbackIcon,
       iconAlt: label,
-      onCommandClick: () => container.openCESCVAFeedbackBlade(),
+      onCommandClick: () => container.provideFeedbackEmail(),
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
@@ -233,18 +281,6 @@ function createNewCollectionGroup(container: Explorer): CommandButtonComponentPr
   };
 }
 
-function createHomeButton(): CommandButtonComponentProps {
-  const label = "Home";
-  return {
-    iconSrc: HomeIcon,
-    iconAlt: label,
-    onCommandClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Home),
-    commandButtonLabel: label,
-    hasPopup: false,
-    ariaLabel: label,
-  };
-}
-
 function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
   if (configContext.platform === Platform.Emulator) {
     return undefined;
@@ -392,6 +428,40 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
   return buttons;
 }
 
+function applyNotebooksTemporarilyDownStyle(buttonProps: CommandButtonComponentProps, tooltip: string): void {
+  if (!buttonProps.isDivider) {
+    buttonProps.disabled = true;
+    buttonProps.tooltipText = tooltip;
+  }
+}
+
+function createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
+  const label = "New Notebook";
+  return {
+    id: "newNotebookBtn",
+    iconSrc: NewNotebookIcon,
+    iconAlt: label,
+    onCommandClick: () => container.onNewNotebookClicked(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
+function createuploadNotebookButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Upload to Notebook Server";
+  return {
+    iconSrc: NewNotebookIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openUploadFilePanel(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
 function createOpenQueryButton(container: Explorer): CommandButtonComponentProps {
   const label = "Open Query";
   return {
@@ -419,6 +489,19 @@ function createOpenQueryFromDiskButton(): CommandButtonComponentProps {
   };
 }
 
+function createOpenTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Terminal";
+  return {
+    iconSrc: CosmosTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Default),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
 function createOpenTerminalButtonByKind(
   container: Explorer,
   terminalKind: ViewModels.TerminalKind,
@@ -458,6 +541,45 @@ function createOpenTerminalButtonByKind(
   };
 }
 
+function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Reset Workspace";
+  return {
+    iconSrc: ResetWorkspaceIcon,
+    iconAlt: label,
+    onCommandClick: () => container.resetNotebookWorkspace(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
+function createManageGitHubAccountButton(container: Explorer): CommandButtonComponentProps {
+  const connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
+  const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
+  const junoClient = new JunoClient();
+  return {
+    iconSrc: GitHubIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          label,
+          <GitHubReposPanel
+            explorer={container}
+            gitHubClientProp={container.notebookManager.gitHubClient}
+            junoClientProp={junoClient}
+          />,
+        );
+    },
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    ariaLabel: label,
+  };
+}
+
 function createStaticCommandBarButtonsForResourceToken(
   container: Explorer,
   selectedNodeState: SelectedNodeState,

src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx

@@ -35,7 +35,7 @@ describe("CommandBarUtil tests", () => {
 
     // Click gets called
     converted.onClick();
-    expect(btn.onCommandClick).toHaveBeenCalled();
+    expect(btn.onCommandClick).toBeCalled();
   });
 
   it("should convert NavbarButtonConfig to split button", () => {

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -25,10 +25,7 @@ import { MemoryTracker } from "./MemoryTrackerComponent";
  * @param btns
  */
 export const convertButton = (btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] => {
-  const buttonHeightPx =
+  const buttonHeightPx = StyleConstants.CommandBarButtonHeight;
-    configContext.platform == Platform.Fabric
-      ? StyleConstants.FabricCommandBarButtonHeight
-      : StyleConstants.CommandBarButtonHeight;
 
   const hoverColor =
     configContext.platform == Platform.Fabric ? StyleConstants.FabricAccentLight : StyleConstants.AccentLight;
@@ -37,7 +34,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
     if (isDisabled) {
       return StyleConstants.GrayScale;
     }
-    return configContext.platform == Platform.Fabric ? StyleConstants.FabricToolbarIconColor : undefined;
+    return configContext.platform == Platform.Fabric ? StyleConstants.NoColor : undefined;
   };
 
   return btns
@@ -96,12 +93,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             },
             width: 16,
           },
-          label: {
+          label: { fontSize: StyleConstants.mediumFontSize },
-            fontSize:
-              configContext.platform == Platform.Fabric
-                ? StyleConstants.DefaultFontSize
-                : StyleConstants.mediumFontSize,
-          },
           rootHovered: { backgroundColor: hoverColor },
           rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
@@ -120,7 +112,6 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           splitButtonContainer: {
             marginLeft: 5,
             marginRight: 5,
-            height: buttonHeightPx,
           },
         },
         className: btn.className,
@@ -138,12 +129,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               // TODO Figure out how to do it the proper way with subComponentStyles.
               // TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
               selectors: {
-                ".ms-ContextualMenu-itemText": {
+                ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
-                  fontSize:
-                    configContext.platform == Platform.Fabric
-                      ? StyleConstants.DefaultFontSize
-                      : StyleConstants.mediumFontSize,
-                },
                 ".ms-ContextualMenu-link:hover": { backgroundColor: hoverColor },
                 ".ms-ContextualMenu-icon": { width: 16, height: 16 },
               },

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -162,7 +162,6 @@ export class NotificationConsoleComponent extends React.Component<
                 role="button"
                 onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
                 tabIndex={0}
-                style={{ border: "1px solid black", borderRadius: "2px" }}
               >
                 <img src={ClearIcon} alt="clear notifications image" />
                 Clear Notifications

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

@@ -146,12 +146,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           onClick={[Function]}
           onKeyDown={[Function]}
           role="button"
-          style={
-            Object {
-              "border": "1px solid black",
-              "borderRadius": "2px",
-            }
-          }
           tabIndex={0}
         >
           <img
@@ -317,12 +311,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           onClick={[Function]}
           onKeyDown={[Function]}
           role="button"
-          style={
-            Object {
-              "border": "1px solid black",
-              "borderRadius": "2px",
-            }
-          }
           tabIndex={0}
         >
           <img

src/Explorer/Notebook/NotebookComponent/epics.test.ts

@@ -1,14 +1,14 @@
-import { makeNotebookRecord } from "@nteract/commutable";
-import { actions, state } from "@nteract/core";
 import * as Immutable from "immutable";
 import { StateObservable } from "redux-observable";
 import { Subject, of } from "rxjs";
 import { toArray } from "rxjs/operators";
+import { makeNotebookRecord } from "@nteract/commutable";
+import { actions, state, epics } from "@nteract/core";
 import * as sinon from "sinon";
 
-import { NotebookUtil } from "../NotebookUtil";
-import { launchWebSocketKernelEpic } from "./epics";
 import { CdbAppState, makeCdbRecord } from "./types";
+import { launchWebSocketKernelEpic } from "./epics";
+import { NotebookUtil } from "../NotebookUtil";
 
 import { sessions } from "rx-jupyter";
 
@@ -117,7 +117,7 @@ describe("launchWebSocketKernelEpic", () => {
   const kernelRef = "fake";
 
   it("launches remote kernels", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const kernelId = "123";
@@ -183,7 +183,7 @@ describe("launchWebSocketKernelEpic", () => {
   });
 
   it("launches any kernel with no kernelspecs in the state", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const kernelId = "123";
@@ -236,7 +236,7 @@ describe("launchWebSocketKernelEpic", () => {
   });
 
   it("launches no kernel if no kernel is specified and state has no kernelspecs", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const kernelId = "123";
@@ -289,7 +289,7 @@ describe("launchWebSocketKernelEpic", () => {
   });
 
   it("emits an error if backend returns an error", async () => {
-    const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+    const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
     const action$ = of(
@@ -388,7 +388,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches supported kernel in kernelspecs", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({
@@ -409,7 +409,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches undefined kernel uses default kernel from kernelspecs", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({
@@ -431,7 +431,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches unsupported kernel uses default kernel from kernelspecs", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({
@@ -453,7 +453,7 @@ describe("launchWebSocketKernelEpic", () => {
     });
 
     it("launches unsupported kernel uses kernelspecs with similar name", async () => {
-      const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
+      const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
       const action$ = of(
         actions.launchKernelByName({

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -69,8 +69,8 @@ const addInitialCodeCellEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | actions.CreateCellBelow> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FULFILLED) as any,
+    ofType(actions.FETCH_CONTENT_FULFILLED),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const state = state$.value;
       const contentRef = action.payload.contentRef;
       const model = selectors.model(state, { contentRef });
@@ -116,7 +116,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
  */
 export const acquireKernelInfoEpic = (action$: Observable<actions.NewKernelAction>) => {
   return action$.pipe(
-    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
+    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
     switchMap((action: actions.NewKernelAction) => {
       const {
         payload: {
@@ -271,9 +271,9 @@ export const launchWebSocketKernelEpic = (
   state$: StateObservable<CdbAppState>,
 ) => {
   return action$.pipe(
-    ofType(actions.LAUNCH_KERNEL_BY_NAME) as any,
+    ofType(actions.LAUNCH_KERNEL_BY_NAME),
     // Only accept jupyter servers for the host with this epic
-    filter(() => selectors.isCurrentHostJupyter(state$.value as never)),
+    filter(() => selectors.isCurrentHostJupyter(state$.value)),
     switchMap((action: actions.LaunchKernelByNameAction) => {
       const state = state$.value;
       const host = selectors.currentHost(state);
@@ -382,7 +382,7 @@ export const restartWebSocketKernelEpic = (
   state$: StateObservable<AppState>,
 ) =>
   action$.pipe(
-    ofType(actions.RESTART_KERNEL) as any,
+    ofType(actions.RESTART_KERNEL),
     concatMap((action: actions.RestartKernel) => {
       const state = state$.value;
 
@@ -449,7 +449,7 @@ export const restartWebSocketKernelEpic = (
       });
 
       const awaitKernelReady = action$.pipe(
-        ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
+        ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
         filter((action: actions.NewKernelAction | actions.RestartKernel) => action.payload.kernelRef === newKernelRef),
         take(1),
         timeout(60000), // If kernel doesn't come up within this interval we will abort follow-on actions.
@@ -492,9 +492,9 @@ const changeWebSocketKernelEpic = (
   state$: StateObservable<AppState>,
 ) => {
   return action$.pipe(
-    ofType(actions.CHANGE_KERNEL_BY_NAME) as any,
+    ofType(actions.CHANGE_KERNEL_BY_NAME),
     // Only accept jupyter servers for the host with this epic
-    filter(() => selectors.isCurrentHostJupyter(state$.value as never)),
+    filter(() => selectors.isCurrentHostJupyter(state$.value)),
     switchMap((action: actions.ChangeKernelByName) => {
       const {
         payload: { contentRef, oldKernelRef, kernelSpecName },
@@ -574,8 +574,8 @@ const focusInitialCodeCellEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | actions.FocusCell> => {
   return action$.pipe(
-    ofType(actions.CREATE_CELL_APPEND) as any,
+    ofType(actions.CREATE_CELL_APPEND),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const state = state$.value;
       const contentRef = action.payload.contentRef;
       const model = selectors.model(state, { contentRef });
@@ -616,8 +616,8 @@ const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservab
       actions.SAVE_FULFILLED,
       actions.SAVE_FAILED,
       actions.FETCH_CONTENT_FAILED,
-    ) as any,
+    ),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       switch (action.type) {
         case actions.RESTART_KERNEL_SUCCESSFUL: {
           const title = "Kernel restart";
@@ -662,8 +662,8 @@ const handleKernelConnectionLostEpic = (
   state$: StateObservable<CdbAppState>,
 ): Observable<CdbActions.UpdateKernelRestartDelayAction | actions.RestartKernel | {}> => {
   return action$.pipe(
-    ofType(actions.UPDATE_DISPLAY_FAILED) as any,
+    ofType(actions.UPDATE_DISPLAY_FAILED),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const state = state$.value;
 
       const msg = "Notebook was disconnected from kernel";
@@ -721,8 +721,8 @@ export const cleanKernelOnConnectionLostEpic = (
   state$: StateObservable<AppState>,
 ): Observable<actions.KillKernelSuccessful> => {
   return action$.pipe(
-    ofType(actions.UPDATE_DISPLAY_FAILED) as any,
+    ofType(actions.UPDATE_DISPLAY_FAILED),
-    switchMap((action: any) => {
+    switchMap((action) => {
       const contentRef = action.payload.contentRef;
       const kernelRef = selectors.kernelRefByContentRef(state$.value, { contentRef });
       return of(
@@ -744,8 +744,8 @@ const executeFocusedCellAndFocusNextEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | actions.FocusNextCellEditor> => {
   return action$.pipe(
-    ofType(CdbActions.EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT) as any,
+    ofType(CdbActions.EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const contentRef = action.payload.contentRef;
       return concat(
         of(actions.executeFocusedCell({ contentRef })),
@@ -765,8 +765,8 @@ const closeUnsupportedMimetypesEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{}> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FULFILLED) as any,
+    ofType(actions.FETCH_CONTENT_FULFILLED),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const mimetype = action.payload.model.mimetype;
       if (!TextFile.handles(mimetype)) {
         const filepath = action.payload.filepath;
@@ -796,8 +796,8 @@ const closeContentFailedToFetchEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{}> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FAILED) as any,
+    ofType(actions.FETCH_CONTENT_FAILED),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const filepath = action.payload.filepath;
       // Close tab and show error message
       useTabs
@@ -818,7 +818,7 @@ const traceNotebookTelemetryEpic = (
   state$: StateObservable<CdbAppState>,
 ): Observable<{}> => {
   return action$.pipe(
-    ofType(cdbActions.TRACE_NOTEBOOK_TELEMETRY) as any,
+    ofType(cdbActions.TRACE_NOTEBOOK_TELEMETRY),
     mergeMap((action: cdbActions.TraceNotebookTelemetryAction) => {
       const state = state$.value;
 
@@ -844,7 +844,7 @@ const traceNotebookInfoEpic = (
   state$: StateObservable<AppState>,
 ): Observable<{} | cdbActions.TraceNotebookTelemetryAction> => {
   return action$.pipe(
-    ofType(actions.FETCH_CONTENT_FULFILLED) as any,
+    ofType(actions.FETCH_CONTENT_FULFILLED),
     mergeMap((action: { payload: any }) => {
       const state = state$.value;
       const contentRef = action.payload.contentRef;
@@ -897,7 +897,7 @@ const traceNotebookKernelEpic = (
   state$: StateObservable<AppState>,
 ): Observable<cdbActions.TraceNotebookTelemetryAction> => {
   return action$.pipe(
-    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
+    ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
     mergeMap((action: { payload: any; type: string }) => {
       return of(
         cdbActions.traceNotebookTelemetry({
@@ -917,8 +917,8 @@ const resetCellStatusOnExecuteCanceledEpic = (
   state$: StateObservable<AppState>,
 ): Observable<actions.UpdateCellStatus> => {
   return action$.pipe(
-    ofType(actions.EXECUTE_CANCELED) as any,
+    ofType(actions.EXECUTE_CANCELED),
-    mergeMap((action: any) => {
+    mergeMap((action) => {
       const contentRef = action.payload.contentRef;
       const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
       let busyCellIds: string[] = [];
@@ -960,8 +960,8 @@ export function autoSaveCurrentContentEpic(
   state$: StateObservable<AppState>,
 ): Observable<actions.Save> {
   return state$.pipe(
-    map((state) => autoSaveInterval(state)) as any,
+    map((state) => autoSaveInterval(state)),
-    switchMap((time) => interval(time as number)) as any,
+    switchMap((time) => interval(time)),
     mergeMap(() => {
       const state = state$.value;
       return from(
@@ -976,7 +976,7 @@ export function autoSaveCurrentContentEpic(
           )
           .keys(),
       );
-    }) as any,
+    }),
     filter((contentRef: ContentRef) => {
       const model = selectors.model(state$.value, { contentRef });
       const content = selectors.content(state$.value, { contentRef });
@@ -985,12 +985,12 @@ export function autoSaveCurrentContentEpic(
         model.type === "notebook" &&
         NotebookUtil.getContentProviderType(content.filepath) !== NotebookContentProviderType.JupyterContentProviderType
       ) {
-        return selectors.notebook.isDirty(model as never);
+        return selectors.notebook.isDirty(model);
       }
       return false;
-    }) as any,
+    }),
-    map((contentRef: ContentRef) => actions.save({ contentRef })) as any,
+    map((contentRef: ContentRef) => actions.save({ contentRef })),
-  ) as any;
+  );
 }
 
 export const allEpics = [

src/Explorer/Notebook/NotebookComponent/store.ts

@@ -34,11 +34,11 @@ export default function configureStore(
 
   const protect = (epic: Epic) => {
     return (action$: Observable<any>, state$: any, dependencies: any) =>
-      epic(action$ as any, state$, dependencies).pipe(
+      epic(action$, state$, dependencies).pipe(
         catchError((error, caught) => {
           traceFailure("Epic failure", error);
           return caught;
-        }) as any,
+        }),
       );
   };
 
@@ -52,7 +52,7 @@ export default function configureStore(
   };
 
   const protectEpics = (epics: Epic[]): Epic[] => {
-    return epics.map((epic) => protect(epic)) as any;
+    return epics.map((epic) => protect(epic));
   };
 
   const filteredCoreEpics = getCoreEpics(autoStartKernelOnNotebookOpen);
@@ -64,7 +64,7 @@ export default function configureStore(
       core: coreReducer as any,
       cdb: cdbReducer,
     },
-    epics: protectEpics([...filteredCoreEpics, ...allEpics] as any),
+    epics: protectEpics([...filteredCoreEpics, ...allEpics]),
     epicDependencies: { contentProvider },
     epicMiddleware: customMiddlewares.concat(catchErrorMiddleware),
     enhancer: composeEnhancers,
@@ -106,5 +106,5 @@ export const getCoreEpics = (autoStartKernelOnNotebookOpen: boolean): Epic[] =>
     filteredCoreEpics.push(coreEpics.launchKernelWhenNotebookSetEpic);
   }
 
-  return filteredCoreEpics as any;
+  return filteredCoreEpics;
 };

src/Explorer/OpenActions/OpenActions.tsx

@@ -1,5 +1,4 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
-import { useDatabases } from "Explorer/useDatabases";
 import React from "react";
 import { ActionContracts } from "../../Contracts/ExplorerContracts";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -41,112 +40,97 @@ function openCollectionTab(
   databases: ViewModels.Database[],
   initialDatabaseIndex = 0,
 ) {
-  //if databases are not yet loaded, wait until loaded
+  for (let i = initialDatabaseIndex; i < databases.length; i++) {
-  if (!databases || databases.length === 0) {
+    const database: ViewModels.Database = databases[i];
-    const databaseActionHandler = (databases: ViewModels.Database[]) => {
+    if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
-      databasesUnsubscription();
+      continue;
-      openCollectionTab(action, databases, 0);
-      return;
-    };
-    const databasesUnsubscription = useDatabases.subscribe(databaseActionHandler, (state) => state.databases);
-  } else {
-    for (let i = initialDatabaseIndex; i < databases.length; i++) {
-      const database: ViewModels.Database = databases[i];
-      if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
-        continue;
-      }
-
-      //expand database first if not expanded to load the collections
-      if (!database.isDatabaseExpanded?.()) {
-        database.expandDatabase?.();
-      }
-
-      const collectionActionHandler = (collections: ViewModels.Collection[]) => {
-        if (!action.collectionResourceId && collections.length === 0) {
-          subscription.dispose();
-          openCollectionTab(action, databases, ++i);
-          return;
-        }
-
-        for (let j = 0; j < collections.length; j++) {
-          const collection: ViewModels.Collection = collections[j];
-          if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
-            continue;
-          }
-
-          // select the collection
-          collection.expandCollection();
-
-          if (
-            action.tabKind === ActionContracts.TabKind.SQLDocuments ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
-          ) {
-            collection.onDocumentDBDocumentsClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.MongoDocuments ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
-          ) {
-            collection.onMongoDBDocumentsClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
-          ) {
-            collection.onSchemaAnalyzerClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.TableEntities ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
-          ) {
-            collection.onTableEntitiesClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.Graph ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
-          ) {
-            collection.onGraphDocumentsClick();
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.SQLQuery ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
-          ) {
-            collection.onNewQueryClick(
-              collection,
-              undefined,
-              generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
-            );
-            break;
-          }
-
-          if (
-            action.tabKind === ActionContracts.TabKind.ScaleSettings ||
-            action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
-          ) {
-            collection.onSettingsClick();
-            break;
-          }
-        }
-        subscription.dispose();
-      };
-
-      const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
-      if (database.collections && database.collections() && database.collections().length) {
-        collectionActionHandler(database.collections());
-      }
-
-      break;
     }
+
+    const collectionActionHandler = (collections: ViewModels.Collection[]) => {
+      if (!action.collectionResourceId && collections.length === 0) {
+        subscription.dispose();
+        openCollectionTab(action, databases, ++i);
+        return;
+      }
+
+      for (let j = 0; j < collections.length; j++) {
+        const collection: ViewModels.Collection = collections[j];
+        if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
+          continue;
+        }
+
+        // select the collection
+        collection.expandCollection();
+
+        if (
+          action.tabKind === ActionContracts.TabKind.SQLDocuments ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
+        ) {
+          collection.onDocumentDBDocumentsClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.MongoDocuments ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
+        ) {
+          collection.onMongoDBDocumentsClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
+        ) {
+          collection.onSchemaAnalyzerClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.TableEntities ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
+        ) {
+          collection.onTableEntitiesClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.Graph ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
+        ) {
+          collection.onGraphDocumentsClick();
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.SQLQuery ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
+        ) {
+          collection.onNewQueryClick(
+            collection,
+            undefined,
+            generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
+          );
+          break;
+        }
+
+        if (
+          action.tabKind === ActionContracts.TabKind.ScaleSettings ||
+          action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
+        ) {
+          collection.onSettingsClick();
+          break;
+        }
+      }
+      subscription.dispose();
+    };
+
+    const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
+    if (database.collections && database.collections() && database.collections().length) {
+      collectionActionHandler(database.collections());
+    }
+
+    break;
   }
 }
 
@@ -170,7 +154,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
     action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
-    useSidePanel.getState().openSidePanel("Settings", <SettingsPane explorer={explorer} />);
+    useSidePanel.getState().openSidePanel("Settings", <SettingsPane />);
   }
 }
 

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -1,11 +1,12 @@
 import { Checkbox, Stack, Text, TextField } from "@fluentui/react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
+import { createDatabase } from "../../../Common/dataAccess/createDatabase";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
-import { createDatabase } from "../../../Common/dataAccess/createDatabase";
 import * as DataModels from "../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../Contracts/SubscriptionType";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import * as SharedConstants from "../../../Shared/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -13,7 +14,6 @@ import { userContext } from "../../../UserContext";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
 import { getUpsellMessage } from "../../../Utils/PricingUtils";
-import { useSidePanel } from "../../../hooks/useSidePanel";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { useDatabases } from "../../useDatabases";
@@ -63,6 +63,9 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     },
     subscriptionType: SubscriptionType[subscriptionType],
     subscriptionQuotaId: userContext.quotaId,
+    defaultsCheck: {
+      flight: userContext.addCollectionFlight,
+    },
     dataExplorerArea: Constants.Areas.ContextualPane,
   };
 
@@ -72,6 +75,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         throughput,
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx

@@ -23,7 +23,7 @@ describe("Cassandra add collection pane test", () => {
     expect(screen.getByRole("combobox", { name: "Choose existing keyspace id" })).toBeDefined();
   });
 
-  it("enter Keyspace name", () => {
+  it("enter Keyspace name ", () => {
     fireEvent.change(screen.getByRole("textbox", { name: "Keyspace id" }), { target: { value: "table1" } });
     expect(screen.getByText("CREATE TABLE table1.")).toBeDefined();
   });

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -59,6 +59,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
     defaultsCheck: {
       storage: "u",
       throughput: newKeySpaceThroughput || tableThroughput,
+      flight: userContext.addCollectionFlight,
     },
     dataExplorerArea: Constants.Areas.ContextualPane,
   };
@@ -313,7 +314,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
         </Stack>
 
         {!isServerlessAccount() && isKeyspaceShared && !keyspaceCreateNew && (
-          <Stack horizontal verticalAlign="center">
+          <Stack>
             <input
               type="checkbox"
               id="tableSharedThroughput"

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -1,398 +0,0 @@
-import {
-  DefaultButton,
-  DirectionalHint,
-  Dropdown,
-  IDropdownOption,
-  Icon,
-  IconButton,
-  Link,
-  MessageBar,
-  Stack,
-  Text,
-  TooltipHost,
-} from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { handleError } from "Common/ErrorHandlingUtils";
-import { createCollection } from "Common/dataAccess/createCollection";
-import { DataTransferParams, initiateDataTransfer } from "Common/dataAccess/dataTransfers";
-import * as DataModels from "Contracts/DataModels";
-import * as ViewModels from "Contracts/ViewModels";
-import {
-  getPartitionKeyName,
-  getPartitionKeyPlaceHolder,
-  getPartitionKeySubtext,
-  getPartitionKeyTooltipText,
-} from "Explorer/Controls/Settings/SettingsUtils";
-import Explorer from "Explorer/Explorer";
-import { RightPaneForm } from "Explorer/Panes/RightPaneForm/RightPaneForm";
-import { useDatabases } from "Explorer/useDatabases";
-import { userContext } from "UserContext";
-import { getCollectionName } from "Utils/APITypeUtils";
-import { useSidePanel } from "hooks/useSidePanel";
-import * as React from "react";
-
-export interface ChangePartitionKeyPaneProps {
-  sourceDatabase: ViewModels.Database;
-  sourceCollection: ViewModels.Collection;
-  explorer: Explorer;
-  onClose: () => Promise<void>;
-}
-
-export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
-  sourceDatabase,
-  sourceCollection,
-  explorer,
-  onClose,
-}) => {
-  const [targetCollectionId, setTargetCollectionId] = React.useState<string>();
-  const [createNewContainer, setCreateNewContainer] = React.useState<boolean>(true);
-  const [formError, setFormError] = React.useState<string>();
-  const [isExecuting, setIsExecuting] = React.useState<boolean>(false);
-  const [subPartitionKeys, setSubPartitionKeys] = React.useState<string[]>([]);
-  const [partitionKey, setPartitionKey] = React.useState<string>();
-
-  const getCollectionOptions = (): IDropdownOption[] => {
-    return sourceDatabase
-      .collections()
-      .filter((collection) => collection.id !== sourceCollection.id)
-      .map((collection) => ({
-        key: collection.id(),
-        text: collection.id(),
-      }));
-  };
-
-  const submit = async () => {
-    if (!validateInputs()) {
-      return;
-    }
-    setIsExecuting(true);
-    try {
-      createNewContainer && (await createContainer());
-      await createDataTransferJob();
-      await onClose();
-    } catch (error) {
-      handleError(error, "ChangePartitionKey", "Failed to start data transfer job");
-    }
-    setIsExecuting(false);
-    useSidePanel.getState().closeSidePanel();
-  };
-
-  const validateInputs = (): boolean => {
-    if (!createNewContainer && !targetCollectionId) {
-      setFormError("Choose an existing container");
-      return false;
-    }
-    return true;
-  };
-
-  const createDataTransferJob = async () => {
-    const jobName = `Portal_${targetCollectionId}_${Math.floor(Date.now() / 1000)}`;
-    const dataTransferParams: DataTransferParams = {
-      jobName,
-      apiType: userContext.apiType,
-      subscriptionId: userContext.subscriptionId,
-      resourceGroupName: userContext.resourceGroup,
-      accountName: userContext.databaseAccount.name,
-      sourceDatabaseName: sourceDatabase.id(),
-      sourceCollectionName: sourceCollection.id(),
-      targetDatabaseName: sourceDatabase.id(),
-      targetCollectionName: targetCollectionId,
-    };
-    await initiateDataTransfer(dataTransferParams);
-  };
-
-  const createContainer = async () => {
-    const partitionKeyString = partitionKey.trim();
-    const partitionKeyData: DataModels.PartitionKey = partitionKeyString
-      ? {
-          paths: [partitionKeyString, ...(subPartitionKeys.length > 0 ? subPartitionKeys : [])],
-          kind: subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
-          version: 2,
-        }
-      : undefined;
-
-    const createCollectionParams: DataModels.CreateCollectionParams = {
-      createNewDatabase: false,
-      collectionId: targetCollectionId,
-      databaseId: sourceDatabase.id(),
-      databaseLevelThroughput: isSelectedDatabaseSharedThroughput(),
-      offerThroughput: sourceCollection.offer()?.manualThroughput,
-      autoPilotMaxThroughput: sourceCollection.offer()?.autoscaleMaxThroughput,
-      partitionKey: partitionKeyData,
-    };
-    await createCollection(createCollectionParams);
-    await explorer.refreshAllDatabases();
-  };
-
-  const isSelectedDatabaseSharedThroughput = (): boolean => {
-    const selectedDatabase = useDatabases
-      .getState()
-      .databases?.find((database) => database.id() === sourceDatabase.id());
-    return !!selectedDatabase?.offer();
-  };
-
-  return (
-    <RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK">
-      <Stack tokens={{ childrenGap: 10 }} className="panelMainContent">
-        <Text variant="small">
-          When changing a container’s partition key, you will need to create a destination container with the correct
-          partition key. You may also select an existing destination container.&nbsp;
-          <Link
-            href="https://learn.microsoft.com/en-us/azure/cosmos-db/container-copy#container-copy-within-an-azure-cosmos-db-account"
-            target="_blank"
-            underline
-          >
-            Learn more
-          </Link>
-        </Text>
-        <Stack>
-          <Stack horizontal>
-            <span className="mandatoryStar">*&nbsp;</span>
-            <Text className="panelTextBold" variant="small">
-              Database id
-            </Text>
-            <TooltipHost
-              directionalHint={DirectionalHint.bottomLeftEdge}
-              content={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                true,
-              ).toLocaleLowerCase()}.`}
-            >
-              <Icon
-                iconName="Info"
-                className="panelInfoIcon"
-                tabIndex={0}
-                aria-label={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
-                  true,
-                ).toLocaleLowerCase()}.`}
-              />
-            </TooltipHost>
-          </Stack>
-          <Dropdown
-            styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
-            style={{ width: 300, fontSize: 12 }}
-            options={[]}
-            placeholder={sourceDatabase.id()}
-            responsiveMode={999}
-            disabled={true}
-          />
-        </Stack>
-        <Stack className="panelGroupSpacing" horizontal verticalAlign="center">
-          <div role="radiogroup">
-            <input
-              className="panelRadioBtn"
-              checked={createNewContainer}
-              aria-label="Create new container"
-              aria-checked={createNewContainer}
-              name="containerType"
-              type="radio"
-              role="radio"
-              id="containerCreateNew"
-              tabIndex={0}
-              onChange={() => setCreateNewContainer(true)}
-            />
-            <span className="panelRadioBtnLabel">New container</span>
-
-            <input
-              className="panelRadioBtn"
-              checked={!createNewContainer}
-              aria-label="Use existing container"
-              aria-checked={!createNewContainer}
-              name="containerType"
-              type="radio"
-              role="radio"
-              tabIndex={0}
-              onChange={() => setCreateNewContainer(false)}
-            />
-            <span className="panelRadioBtnLabel">Existing container</span>
-          </div>
-        </Stack>
-        {createNewContainer ? (
-          <Stack>
-            <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
-            <Stack className="panelGroupSpacing">
-              <Stack horizontal>
-                <span className="mandatoryStar">*&nbsp;</span>
-                <Text className="panelTextBold" variant="small">
-                  {`${getCollectionName()} id`}
-                </Text>
-                <TooltipHost
-                  directionalHint={DirectionalHint.bottomLeftEdge}
-                  content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
-                >
-                  <Icon
-                    role="button"
-                    iconName="Info"
-                    className="panelInfoIcon"
-                    tabIndex={0}
-                    ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
-                  />
-                </TooltipHost>
-              </Stack>
-              <input
-                name="collectionId"
-                id="collectionId"
-                type="text"
-                aria-required
-                required
-                autoComplete="off"
-                pattern="[^/?#\\]*[^/?# \\]"
-                title="May not end with space nor contain characters '\' '/' '#' '?'"
-                placeholder={`e.g., ${getCollectionName()}1`}
-                size={40}
-                className="panelTextField"
-                aria-label={`${getCollectionName()} id, Example ${getCollectionName()}1`}
-                value={targetCollectionId}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setTargetCollectionId(event.target.value)}
-              />
-            </Stack>
-            <Stack tokens={{ childrenGap: 10 }}>
-              <Stack horizontal>
-                <span className="mandatoryStar">*&nbsp;</span>
-                <Text className="panelTextBold" variant="small">
-                  {getPartitionKeyName(userContext.apiType)}
-                </Text>
-                <TooltipHost
-                  directionalHint={DirectionalHint.bottomLeftEdge}
-                  content={getPartitionKeyTooltipText(userContext.apiType)}
-                >
-                  <Icon
-                    iconName="Info"
-                    className="panelInfoIcon"
-                    tabIndex={0}
-                    aria-label={getPartitionKeyTooltipText(userContext.apiType)}
-                  />
-                </TooltipHost>
-              </Stack>
-
-              <Text variant="small" aria-label="pkDescription">
-                {getPartitionKeySubtext(userContext.features.partitionKeyDefault, userContext.apiType)}
-              </Text>
-
-              <input
-                type="text"
-                id="addCollection-partitionKeyValue"
-                aria-required
-                required
-                size={40}
-                className="panelTextField"
-                placeholder={getPartitionKeyPlaceHolder(userContext.apiType)}
-                aria-label={getPartitionKeyName(userContext.apiType)}
-                pattern={".*"}
-                title={""}
-                value={partitionKey}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  if (!partitionKey && !event.target.value.startsWith("/")) {
-                    setPartitionKey("/" + event.target.value);
-                  } else {
-                    setPartitionKey(event.target.value);
-                  }
-                }}
-              />
-              {subPartitionKeys.map((subPartitionKey: string, index: number) => {
-                return (
-                  <Stack style={{ marginBottom: 8 }} key={`uniqueKey${index}`} horizontal>
-                    <div
-                      style={{
-                        width: "20px",
-                        border: "solid",
-                        borderWidth: "0px 0px 1px 1px",
-                        marginRight: "5px",
-                      }}
-                    ></div>
-                    <input
-                      type="text"
-                      id="addCollection-partitionKeyValue"
-                      key={`addCollection-partitionKeyValue_${index}`}
-                      aria-required
-                      required
-                      size={40}
-                      tabIndex={index > 0 ? 1 : 0}
-                      className="panelTextField"
-                      autoComplete="off"
-                      placeholder={getPartitionKeyPlaceHolder(userContext.apiType, index)}
-                      aria-label={getPartitionKeyName(userContext.apiType)}
-                      pattern={".*"}
-                      title={""}
-                      value={subPartitionKey}
-                      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                        const keys = [...subPartitionKeys];
-                        if (!keys[index] && !event.target.value.startsWith("/")) {
-                          keys[index] = "/" + event.target.value.trim();
-                          setSubPartitionKeys(keys);
-                        } else {
-                          keys[index] = event.target.value.trim();
-                          setSubPartitionKeys(keys);
-                        }
-                      }}
-                    />
-                    <IconButton
-                      iconProps={{ iconName: "Delete" }}
-                      style={{ height: 27 }}
-                      onClick={() => {
-                        const keys = subPartitionKeys.filter((uniqueKey, j) => index !== j);
-                        setSubPartitionKeys(keys);
-                      }}
-                    />
-                  </Stack>
-                );
-              })}
-              <Stack className="panelGroupSpacing">
-                <DefaultButton
-                  styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
-                  disabled={subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
-                  onClick={() => setSubPartitionKeys([...subPartitionKeys, ""])}
-                >
-                  Add hierarchical partition key
-                </DefaultButton>
-                {subPartitionKeys.length > 0 && (
-                  <Text variant="small">
-                    <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
-                    partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
-                    Java V4 SDK, or preview JavaScript V3 SDK.{" "}
-                    <Link href="https://aka.ms/cosmos-hierarchical-partitioning" target="_blank">
-                      Learn more
-                    </Link>
-                  </Text>
-                )}
-              </Stack>
-            </Stack>
-          </Stack>
-        ) : (
-          <Stack>
-            <Stack horizontal>
-              <span className="mandatoryStar">*&nbsp;</span>
-              <Text className="panelTextBold" variant="small">
-                {`${getCollectionName()}`}
-              </Text>
-              <TooltipHost
-                directionalHint={DirectionalHint.bottomLeftEdge}
-                content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
-              >
-                <Icon
-                  role="button"
-                  iconName="Info"
-                  className="panelInfoIcon"
-                  tabIndex={0}
-                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
-                />
-              </TooltipHost>
-            </Stack>
-
-            <Dropdown
-              styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
-              style={{ width: 300, fontSize: 12 }}
-              placeholder="Choose an existing container"
-              options={getCollectionOptions()}
-              onChange={(event: React.FormEvent<HTMLDivElement>, collection: IDropdownOption) => {
-                setTargetCollectionId(collection.key as string);
-                setFormError("");
-              }}
-              defaultSelectedKey={targetCollectionId}
-              responsiveMode={999}
-            />
-          </Stack>
-        )}
-      </Stack>
-    </RightPaneForm>
-  );
-};

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -35,11 +35,10 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
 
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
-
   const onSubmit = async (): Promise<void> => {
     const collection = useSelectedNode.getState().findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
-      const errorMessage = "Input id " + inputCollectionName + " does not match the selected " + collection.id();
+      const errorMessage = "Input " + collectionName + " id does not match the selected " + collectionName;
       setFormError(errorMessage);
       NotificationConsoleUtils.logConsoleError(
         `Error while deleting ${collectionName} ${collection.id()}: ${errorMessage}`,

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

@@ -32,7 +32,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="css-109"
+                className="css-53"
               >
                 Confirm by typing the 
                 container
@@ -340,19 +340,19 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 value=""
               >
                 <div
-                  className="ms-TextField is-required root-111"
+                  className="ms-TextField is-required root-55"
                 >
                   <div
                     className="ms-TextField-wrapper"
                   >
                     <div
-                      className="ms-TextField-fieldGroup fieldGroup-112"
+                      className="ms-TextField-fieldGroup fieldGroup-56"
                     >
                       <input
                         aria-invalid={false}
                         aria-label="Confirm by typing the container id"
                         autoFocus={true}
-                        className="ms-TextField-field field-113"
+                        className="ms-TextField-field field-57"
                         id="confirmCollectionId"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -1259,7 +1259,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1285,7 +1285,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -1297,16 +1297,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1337,7 +1335,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -1364,7 +1362,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -1389,16 +1387,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -1432,7 +1428,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -1449,7 +1445,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -1461,7 +1457,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -1477,13 +1473,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -1494,16 +1489,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -1526,21 +1519,13 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -1553,7 +1538,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -1566,7 +1551,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1580,7 +1565,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -1594,7 +1579,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -1610,7 +1595,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -1619,7 +1604,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -1635,7 +1620,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -1647,7 +1632,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -1660,7 +1645,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -1682,18 +1667,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -1743,7 +1728,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -1752,7 +1737,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1760,7 +1745,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -1782,16 +1767,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -1813,7 +1796,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -2103,7 +2086,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-122"
+                      className="ms-Button ms-Button--primary root-66"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2115,16 +2098,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-123"
+                        className="ms-Button-flexContainer flexContainer-67"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-124"
+                          className="ms-Button-textContainer textContainer-68"
                         >
                           <span
-                            className="ms-Button-label label-126"
+                            className="ms-Button-label label-70"
-                            id="id__5"
+                            id="id__3"
-                            key="id__5"
+                            key="id__3"
                           >
                             OK
                           </span>

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

@@ -306,7 +306,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               }
             >
               <label
-                className="ms-Label root-109"
+                className="ms-Label root-53"
               >
                 Partition key value
               </label>
@@ -316,11 +316,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             horizontal={true}
           >
             <div
-              className="ms-Stack css-110"
+              className="ms-Stack css-54"
             >
               <Dropdown
                 defaultSelectedKey="string"
-                key=".0:$.$.0"
+                key=".0:$.0"
                 label="Key"
                 onChange={[Function]}
                 options={
@@ -661,7 +661,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         },
                       ]
                     }
-                    responsiveMode={0}
+                    responsiveMode={3}
                     styles={[Function]}
                     tabIndex={0}
                     theme={
@@ -1225,7 +1225,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label ms-Dropdown-label root-129"
+                            className="ms-Label ms-Dropdown-label root-71"
                             id="Dropdown0-label"
                           >
                             Key
@@ -1236,7 +1236,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         aria-expanded="false"
                         aria-haspopup="listbox"
                         aria-labelledby="Dropdown0-label Dropdown0-option"
-                        className="ms-Dropdown dropdown-111"
+                        className="ms-Dropdown dropdown-55"
                         data-is-focusable={true}
                         data-ktp-target={true}
                         id="Dropdown0"
@@ -1251,23 +1251,25 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         tabIndex={0}
                       >
                         <span
+                          aria-atomic={true}
                           aria-invalid={false}
-                          className="ms-Dropdown-title title-156"
+                          aria-live="polite"
+                          className="ms-Dropdown-title title-97"
                           id="Dropdown0-option"
                         >
                           String
                         </span>
                         <span
-                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-57"
                         >
                           <StyledIconBase
                             aria-hidden={true}
-                            className="ms-Dropdown-caretDown caretDown-114"
+                            className="ms-Dropdown-caretDown caretDown-58"
                             iconName="ChevronDown"
                           >
                             <IconBase
                               aria-hidden={true}
-                              className="ms-Dropdown-caretDown caretDown-114"
+                              className="ms-Dropdown-caretDown caretDown-58"
                               iconName="ChevronDown"
                               styles={[Function]}
                               theme={
@@ -1546,7 +1548,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Dropdown-caretDown caretDown-132"
+                                className="ms-Dropdown-caretDown caretDown-73"
                                 data-icon-name="ChevronDown"
                               >
                                 
@@ -1561,7 +1563,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               </Dropdown>
               <StyledTextFieldBase
                 id="confirmCollectionId"
-                key=".0:$.$.1"
+                key=".0:$.1"
                 label="Value"
                 onChange={[Function]}
                 tabIndex={0}
@@ -1850,7 +1852,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   validateOnLoad={true}
                 >
                   <div
-                    className="ms-TextField root-134"
+                    className="ms-TextField root-75"
                   >
                     <div
                       className="ms-TextField-wrapper"
@@ -2139,7 +2141,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label root-109"
+                            className="ms-Label root-53"
                             htmlFor="confirmCollectionId"
                             id="TextFieldLabel3"
                           >
@@ -2148,12 +2150,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         </LabelBase>
                       </StyledLabelBase>
                       <div
-                        className="ms-TextField-fieldGroup fieldGroup-135"
+                        className="ms-TextField-fieldGroup fieldGroup-76"
                       >
                         <input
                           aria-invalid={false}
                           aria-labelledby="TextFieldLabel3"
-                          className="ms-TextField-field field-136"
+                          className="ms-TextField-field field-77"
                           id="confirmCollectionId"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -2462,7 +2464,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               }
             >
               <label
-                className="ms-Label root-109"
+                className="ms-Label root-53"
               >
                 Enter input parameters (if any)
               </label>
@@ -2472,11 +2474,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             horizontal={true}
           >
             <div
-              className="ms-Stack css-110"
+              className="ms-Stack css-54"
             >
               <Dropdown
                 defaultSelectedKey="string"
-                key=".0:$.$.0"
+                key=".0:$.0"
                 label="Key"
                 onChange={[Function]}
                 options={
@@ -2817,7 +2819,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         },
                       ]
                     }
-                    responsiveMode={0}
+                    responsiveMode={3}
                     styles={[Function]}
                     tabIndex={0}
                     theme={
@@ -3099,12 +3101,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     >
                       <StyledLabelBase
                         className="ms-Dropdown-label"
-                        id="Dropdown6-label"
+                        id="Dropdown4-label"
                         styles={[Function]}
                       >
                         <LabelBase
                           className="ms-Dropdown-label"
-                          id="Dropdown6-label"
+                          id="Dropdown4-label"
                           styles={[Function]}
                           theme={
                             Object {
@@ -3381,8 +3383,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label ms-Dropdown-label root-129"
+                            className="ms-Label ms-Dropdown-label root-71"
-                            id="Dropdown6-label"
+                            id="Dropdown4-label"
                           >
                             Key
                           </label>
@@ -3391,11 +3393,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       <div
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="Dropdown6-label Dropdown6-option"
+                        aria-labelledby="Dropdown4-label Dropdown4-option"
-                        className="ms-Dropdown dropdown-111"
+                        className="ms-Dropdown dropdown-55"
                         data-is-focusable={true}
                         data-ktp-target={true}
-                        id="Dropdown6"
+                        id="Dropdown4"
                         onBlur={[Function]}
                         onChange={[Function]}
                         onClick={[Function]}
@@ -3407,23 +3409,25 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         tabIndex={0}
                       >
                         <span
+                          aria-atomic={true}
                           aria-invalid={false}
-                          className="ms-Dropdown-title title-156"
+                          aria-live="polite"
-                          id="Dropdown6-option"
+                          className="ms-Dropdown-title title-97"
+                          id="Dropdown4-option"
                         >
                           String
                         </span>
                         <span
-                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+                          className="ms-Dropdown-caretDownWrapper caretDownWrapper-57"
                         >
                           <StyledIconBase
                             aria-hidden={true}
-                            className="ms-Dropdown-caretDown caretDown-114"
+                            className="ms-Dropdown-caretDown caretDown-58"
                             iconName="ChevronDown"
                           >
                             <IconBase
                               aria-hidden={true}
-                              className="ms-Dropdown-caretDown caretDown-114"
+                              className="ms-Dropdown-caretDown caretDown-58"
                               iconName="ChevronDown"
                               styles={[Function]}
                               theme={
@@ -3702,7 +3706,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Dropdown-caretDown caretDown-132"
+                                className="ms-Dropdown-caretDown caretDown-73"
                                 data-icon-name="ChevronDown"
                               >
                                 
@@ -3718,7 +3722,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
               <StyledTextFieldBase
                 defaultValue=""
                 id="confirmCollectionId"
-                key=".0:$.$.1"
+                key=".0:$.1"
                 label="Param"
                 onChange={[Function]}
                 tabIndex={0}
@@ -4008,19 +4012,19 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   validateOnLoad={true}
                 >
                   <div
-                    className="ms-TextField root-134"
+                    className="ms-TextField root-75"
                   >
                     <div
                       className="ms-TextField-wrapper"
                     >
                       <StyledLabelBase
                         htmlFor="confirmCollectionId"
-                        id="TextFieldLabel9"
+                        id="TextFieldLabel7"
                         styles={[Function]}
                       >
                         <LabelBase
                           htmlFor="confirmCollectionId"
-                          id="TextFieldLabel9"
+                          id="TextFieldLabel7"
                           styles={[Function]}
                           theme={
                             Object {
@@ -4297,21 +4301,21 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           }
                         >
                           <label
-                            className="ms-Label root-109"
+                            className="ms-Label root-53"
                             htmlFor="confirmCollectionId"
-                            id="TextFieldLabel9"
+                            id="TextFieldLabel7"
                           >
                             Param
                           </label>
                         </LabelBase>
                       </StyledLabelBase>
                       <div
-                        className="ms-TextField-fieldGroup fieldGroup-135"
+                        className="ms-TextField-fieldGroup fieldGroup-76"
                       >
                         <input
                           aria-invalid={false}
-                          aria-labelledby="TextFieldLabel9"
+                          aria-labelledby="TextFieldLabel7"
-                          className="ms-TextField-field field-136"
+                          className="ms-TextField-field field-77"
                           id="confirmCollectionId"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -4327,7 +4331,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 </TextFieldBase>
               </StyledTextFieldBase>
               <div
-                key=".0:$.$.2/.$.$.0"
                 tabIndex={0}
               >
                 <StyledImageBase
@@ -4625,7 +4628,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     width={20}
                   >
                     <div
-                      className="ms-Image addRemoveIconLabel root-145"
+                      className="ms-Image addRemoveIconLabel root-86"
                       style={
                         Object {
                           "height": 30,
@@ -4635,7 +4638,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     >
                       <img
                         alt="Delete param"
-                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
+                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                         id="deleteparam"
                         key="fabricImage[object Object]"
                         onClick={[Function]}
@@ -4649,7 +4652,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 </StyledImageBase>
               </div>
               <div
-                key=".0:$.$.2/.$.$.1"
                 tabIndex={0}
               >
                 <StyledImageBase
@@ -4947,7 +4949,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     width={20}
                   >
                     <div
-                      className="ms-Image addRemoveIconLabel root-145"
+                      className="ms-Image addRemoveIconLabel root-86"
                       style={
                         Object {
                           "height": 30,
@@ -4957,7 +4959,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     >
                       <img
                         alt="Add param"
-                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
+                        className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                         id="addparam"
                         key="fabricImage[object Object]"
                         onClick={[Function]}
@@ -4979,14 +4981,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
           tabIndex={0}
         >
           <div
-            className="ms-Stack css-110"
+            className="ms-Stack css-54"
             onClick={[Function]}
             tabIndex={0}
           >
             <StyledImageBase
               alt="Add param"
               height={30}
-              key=".0:$.$.0"
+              key=".0:$.0"
               src={Object {}}
               width={20}
             >
@@ -5271,7 +5273,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 width={20}
               >
                 <div
-                  className="ms-Image root-145"
+                  className="ms-Image root-86"
                   style={
                     Object {
                       "height": 30,
@@ -5281,7 +5283,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 >
                   <img
                     alt="Add param"
-                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
+                    className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                     key="fabricImage[object Object]"
                     onError={[Function]}
                     onLoad={[Function]}
@@ -5292,10 +5294,10 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
             </StyledImageBase>
             <Text
               className="addNewParamStyle"
-              key=".0:$.$.1"
+              key=".0:$.1"
             >
               <span
-                className="addNewParamStyle css-147"
+                className="addNewParamStyle css-88"
               >
                 Add New Param
               </span>
@@ -6192,7 +6194,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         "iconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -6218,7 +6220,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         "menuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -6230,16 +6232,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -6270,7 +6270,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "display": "inline-block",
                             "padding": "0 16px",
                             "selectors": Object {
-                              ":active > span": Object {
+                              ":active > *": Object {
                                 "left": 0,
                                 "position": "relative",
                                 "top": 0,
@@ -6297,7 +6297,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "borderColor": "WindowText",
@@ -6322,16 +6322,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid transparent",
-                                "borderRadius": undefined,
                                 "bottom": 2,
                                 "content": "\\"\\"",
                                 "left": 2,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": undefined,
                                 "position": "absolute",
                                 "right": 2,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "bottom": -2,
                                     "left": -2,
                                     "outlineColor": "ButtonText",
@@ -6365,7 +6363,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "backgroundColor": "#f3f2f1",
                             "color": "#d2d0ce",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -6382,7 +6380,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "border": "1px solid #106ebe",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Highlight",
                               "borderColor": "Highlight",
                               "color": "Window",
@@ -6394,7 +6392,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "border": "1px solid #005a9e",
                           "color": "#ffffff",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
@@ -6410,13 +6408,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "overflow": "hidden",
                           "padding": 0,
                           "position": "absolute",
-                          "whiteSpace": "nowrap",
                           "width": 1,
                         },
                         "splitButtonContainer": Array [
                           Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "border": "none",
                               },
                             },
@@ -6427,16 +6424,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Fabric--isFocusVisible &:focus:after": Object {
                                 "border": "1px solid #ffffff",
-                                "borderRadius": undefined,
                                 "bottom": 3,
                                 "content": "\\"\\"",
                                 "left": 3,
                                 "outline": "1px solid #605e5c",
-                                "pointerEvents": "none",
                                 "position": "absolute",
                                 "right": 3,
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "none",
                                     "bottom": -2,
                                     "left": -2,
@@ -6459,21 +6454,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 "borderBottomRightRadius": "0",
                                 "borderRight": "none",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                               },
                               ".ms-Button--primary": Object {
                                 "border": "none",
                                 "borderBottomRightRadius": "0",
                                 "borderTopRightRadius": "0",
-                                "flexGrow": "1",
                                 "selectors": Object {
-                                  ":active": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "border": "none",
-                                  },
-                                  ":hover": Object {
-                                    "border": "none",
-                                  },
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
                                     "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "border": "1px solid WindowText",
@@ -6486,7 +6473,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               ".ms-Button--primary + .ms-Button": Object {
                                 "border": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "border": "1px solid WindowText",
                                     "borderLeftWidth": "0",
                                   },
@@ -6499,7 +6486,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -6513,7 +6500,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "WindowText",
                                   "color": "Window",
@@ -6527,7 +6514,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "border": "none",
                           "outline": "none",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
@@ -6543,7 +6530,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Highlight",
                                   "color": "Window",
                                 },
@@ -6552,7 +6539,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             ".ms-Button.is-disabled": Object {
                               "color": "#a19f9d",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -6568,7 +6555,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                               },
                             },
@@ -6580,7 +6567,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "position": "absolute",
                             "right": 31,
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "WindowText",
                               },
                             },
@@ -6593,7 +6580,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "GrayText",
                             },
                           },
@@ -6615,18 +6602,18 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "backgroundColor": "#106ebe",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "Highlight",
                                   },
                                 },
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                "backgroundColor": "Canvas",
+                                "backgroundColor": "WindowText",
                               },
                             },
                           },
                           Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               ".ms-Button-menuIcon": Object {
                                 "color": "WindowText",
                               },
@@ -6676,7 +6663,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                             "selectors": Object {
                               ".ms-Button--primary": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
@@ -6685,7 +6672,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               },
                               ".ms-Button-menuIcon": Object {
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -6693,7 +6680,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               ":hover": Object {
                                 "cursor": "default",
                               },
-                              "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "border": "1px solid GrayText",
                                 "color": "GrayText",
@@ -6715,16 +6702,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           "selectors": Object {
                             ".ms-Fabric--isFocusVisible &:focus:after": Object {
                               "border": "1px solid #ffffff",
-                              "borderRadius": undefined,
                               "bottom": 3,
                               "content": "\\"\\"",
                               "left": 3,
                               "outline": "1px solid #605e5c",
-                              "pointerEvents": undefined,
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -6746,7 +6731,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         "splitButtonMenuIconDisabled": Object {
                           "color": "#a19f9d",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "color": "GrayText",
                             },
                           },
@@ -7036,7 +7021,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   >
                     <button
                       aria-label="Execute"
-                      className="ms-Button ms-Button--primary root-148"
+                      className="ms-Button ms-Button--primary root-89"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -7048,16 +7033,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-149"
+                        className="ms-Button-flexContainer flexContainer-90"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-150"
+                          className="ms-Button-textContainer textContainer-91"
                         >
                           <span
-                            className="ms-Button-label label-152"
+                            className="ms-Button-label label-93"
-                            id="id__12"
+                            id="id__8"
-                            key="id__12"
+                            key="id__8"
                           >
                             Execute
                           </span>

src/Explorer/Panes/PanelComponent.less

@@ -112,9 +112,8 @@
   margin-top: 28px;
   margin-left: 4px !important;
 }
-.addRemoveIcon [alt="editEntity"]:focus,
+.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
-.addRemoveIconLabel [alt="editEntity"]:focus {
+  border:1px dashed #605E5C
-  border: 1px dashed #605e5c;
 }
 .addNewParamStyle {
   margin-top: 5px;
@@ -154,9 +153,6 @@
 .backImageIcon {
   margin-top: 8px;
 }
-[alt="back"]:focus {
-  border: 1px solid #605e5c;
-}
 .addEntityDatePicker {
   max-width: 145px;
 }