Initial move of command bar to react

2025-12-24 03:11:32 +00:00 · 2021-04-14 11:44:22 +02:00
224 changed files with 10181 additions and 23938 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -24,6 +24,7 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
+src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts
@@ -97,6 +98,7 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
+src/Explorer/Notebook/FileSystemUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -125,10 +127,15 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
+src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
+src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
+src/Explorer/Panes/SaveQueryPane.ts
+src/Explorer/Panes/SettingsPane.test.ts
+src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
@@ -136,10 +143,13 @@ src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
 src/Explorer/Panes/Tables/QuerySelectPane.ts
+src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
+src/Explorer/Panes/UploadFilePane.ts
+src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -246,8 +256,11 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
+src/Utils/DatabaseAccountUtils.test.ts
+src/Utils/DatabaseAccountUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
+src/Utils/QueryUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,9 +0,0 @@
-# Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -70,6 +70,7 @@ jobs:
      - run: npm run test
  build:
    runs-on: ubuntu-latest
+    needs: [lint, format, compile, unittest]
    name: "Build"
    steps:
      - uses: actions/checkout@v2
@@ -91,14 +92,6 @@ jobs:
        with:
          name: dist
          path: dist/
-      - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
-        env:
-          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
-      - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
-        env:
-          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
  endtoendemulator:
    name: "End To End Emulator Tests"
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)

 - Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.

 ### Emulator Development
@@ -68,7 +69,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained

 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.

-### Architecture
+### Architechture

 [![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

--- a/config.json
+++ b/config.json
@@ -0,0 +1,4 @@
+{
+  "GITHUB_CLIENT_ID": "167ea4b09801db1de03d",
+  "GITHUB_CLIENT_SECRET": "e7bb10a3a8da428815805c6fc483560a035a73c1"
+}
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@@ -7,6 +7,5 @@ module.exports = {
    defaultViewport: null,
    ignoreHTTPSErrors: true,
    args: ["--disable-web-security"],
-    exitOnPageError: false,
  },
 };
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,13 +21,17 @@ module.exports = {
  collectCoverage: true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  // collectCoverageFrom: [
+  //   "src/Common/Headers*"
+  // ],

  // The directory where Jest should output its coverage files
  coverageDirectory: "coverage",

  // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ["/node_modules/"],
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],

  // A list of reporter names that Jest uses when writing coverage reports
  coverageReporters: ["json", "text", "cobertura"],
@@ -35,10 +39,10 @@ module.exports = {
  // An object that configures minimum threshold enforcement for coverage results
  coverageThreshold: {
    global: {
-      branches: 25,
-      functions: 25,
-      lines: 30,
-      statements: 30,
+      branches: 22,
+      functions: 28,
+      lines: 33,
+      statements: 31,
    },
  },

@@ -67,8 +71,7 @@ module.exports = {

  // A map from regular expressions to module names that allow to stub out resources with a single module
  moduleNameMapper: {
-    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
-    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
    "worker-loader": "<rootDir>/mockModule",
    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
    "^dnd-core$": "dnd-core/dist/cjs",
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -718,7 +718,7 @@ execute-sproc-params-pane {
  }
 }

-.stored-procedure-tab {
+stored-procedure-tab {
  @ToggleHeight: 30px;
  @ToggleWidth: 180px;

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
    "@babel/plugin-proposal-decorators": "7.12.12",
    "@jupyterlab/services": "6.0.2",
    "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.6.1",
+    "@microsoft/applicationinsights-web": "2.5.9",
    "@nteract/commutable": "7.4.2",
    "@nteract/connected-components": "6.8.2",
    "@nteract/core": "15.1.0",
@@ -44,7 +44,9 @@
    "@types/node-fetch": "2.5.7",
    "@uifabric/react-cards": "0.109.110",
    "@uifabric/styling": "7.13.7",
+    "abort-controller": "3.0.0",
    "applicationinsights": "1.8.0",
+    "babel-polyfill": "6.26.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
    "clean-webpack-plugin": "0.1.19",
@@ -58,6 +60,8 @@
    "date-fns": "1.29.0",
    "dayjs": "1.8.19",
    "dotenv": "8.2.0",
+    "es6-object-assign": "1.1.0",
+    "es6-symbol": "3.1.3",
    "eslint-plugin-jest": "23.13.2",
    "eslint-plugin-react": "7.20.0",
    "hasher": "1.2.0",
@@ -75,9 +79,12 @@
    "monaco-editor": "0.18.1",
    "ms": "2.1.3",
    "msal": "1.4.4",
-    "office-ui-fabric-react": "7.164.2",
+    "object.entries": "1.1.0",
+    "office-ui-fabric-react": "7.134.1",
    "p-retry": "4.2.0",
    "plotly.js-cartesian-dist-min": "1.52.3",
+    "promise-polyfill": "8.1.0",
+    "promise.prototype.finally": "3.1.0",
    "q": "1.5.1",
    "react": "16.13.1",
    "react-animate-height": "2.0.8",
@@ -94,9 +101,13 @@
    "rxjs": "6.6.3",
    "styled-components": "4.3.2",
    "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "text-encoding": "0.7.0",
    "underscore": "1.9.1",
-    "utility-types": "3.10.0"
+    "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
+    "webcrypto-liner": "1.1.4",
+    "webfontloader": "1.6.28",
+    "whatwg-fetch": "3.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
@@ -110,15 +121,15 @@
    "@types/d3": "5.9.2",
    "@types/enzyme": "3.10.7",
    "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.5",
+    "@types/expect-puppeteer": "4.4.3",
    "@types/hasher": "0.0.31",
    "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.4.1",
+    "@types/jest-environment-puppeteer": "4.3.2",
    "@types/memoize-one": "4.1.1",
    "@types/node": "12.11.1",
    "@types/promise.prototype.finally": "2.0.3",
    "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "5.4.3",
+    "@types/puppeteer": "3.0.1",
    "@types/q": "1.5.1",
    "@types/react": "17.0.0",
    "@types/react-dom": "17.0.0",
@@ -126,7 +137,9 @@
    "@types/react-redux": "7.1.7",
    "@types/sinon": "2.3.3",
    "@types/styled-components": "5.1.1",
+    "@types/text-encoding": "0.0.33",
    "@types/underscore": "1.7.36",
+    "@types/webfontloader": "1.6.29",
    "@typescript-eslint/eslint-plugin": "4.0.1",
    "@typescript-eslint/parser": "4.0.1",
    "axe-puppeteer": "1.1.0",
@@ -151,6 +164,7 @@
    "html-loader": "0.5.5",
    "html-loader-jest": "0.2.1",
    "html-webpack-plugin": "3.2.0",
+    "inline-css": "2.2.5",
    "jest": "25.5.4",
    "jest-canvas-mock": "2.1.0",
    "jest-puppeteer": "4.4.0",
@@ -162,15 +176,16 @@
    "monaco-editor-webpack-plugin": "1.7.0",
    "node-fetch": "2.6.1",
    "prettier": "2.2.1",
-    "puppeteer": "8.0.0",
+    "puppeteer": "4.0.0",
    "raw-loader": "0.5.1",
    "rimraf": "3.0.0",
    "sinon": "3.2.1",
    "style-loader": "0.23.0",
+    "terser-webpack-plugin": "3.0.5",
    "ts-loader": "6.2.2",
    "tslint": "5.11.0",
    "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.2.3",
+    "typescript": "4.0.2",
    "url-loader": "1.1.1",
    "wait-on": "4.0.2",
    "webpack": "4.43.0",
--- a/preview/.azure/config
+++ b/preview/.azure/config
@@ -1,7 +0,0 @@
-[defaults]
-group = stfaul
-sku = P1v2
-appserviceplan = stfaul_asp_Linux_centralus_0
-location = centralus
-web = cosmos-explorer-preview
-
--- a/preview/README.md
+++ b/preview/README.md
@@ -1,20 +0,0 @@
-# Cosmos Explorer Preview
-
-Cosmos Explorer Preview makes it possible to try a working version of any commit on master or in a PR. No need to run the app locally or deploy to staging.
-
-Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
-
-Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
-Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
-
-In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
-
-### Architechture
-
- This folder contains a NodeJS app deployed to Azure App Service that powers preview URLs:
-  - Paths starting with `/commit/` are proxied to an Azure Storage account containing build artifacts
-  - Paths starting with `/proxy/` are proxied dynamically to Cosmos account endpoints. Required otherwise CORS would need to be configured for every account accessed.
-  - Paths starting with `/api/` are proxied to Portal APIs that do not support CORS.
- On GitHub Actions build completion:
-  - All files in dist are uploaded to an Azure Storage account namespaced by the SHA of the commit
-  - `/preview/config.json` is uploaded to the same folder with preview specific configuration
--- a/preview/config.json
+++ b/preview/config.json
@@ -1,3 +0,0 @@
-{
-  "PROXY_PATH": "/proxy"
-}
--- a/preview/index.js
+++ b/preview/index.js
@@ -1,44 +0,0 @@
-const express = require("express");
-const { createProxyMiddleware } = require("http-proxy-middleware");
-const port = process.env.PORT || 3000;
-
-const api = createProxyMiddleware("/api", {
-  target: "https://main.documentdb.ext.azure.com",
-  changeOrigin: true,
-  logLevel: "debug",
-  bypass: (req, res) => {
-    if (req.method === "OPTIONS") {
-      res.statusCode = 200;
-      res.send();
-    }
-  },
-});
-
-const proxy = createProxyMiddleware("/proxy", {
-  target: "https://main.documentdb.ext.azure.com",
-  changeOrigin: true,
-  secure: false,
-  logLevel: "debug",
-  pathRewrite: { "^/proxy": "" },
-  router: (req) => {
-    let newTarget = req.headers["x-ms-proxy-target"];
-    return newTarget;
-  },
-});
-
-const commit = createProxyMiddleware("/commit", {
-  target: "https://cosmosexplorerpreview.blob.core.windows.net",
-  changeOrigin: true,
-  secure: false,
-  logLevel: "debug",
-  pathRewrite: { "^/commit": "$web/" },
-});
-
-const app = express();
-
-app.use(api);
-app.use(proxy);
-app.use(commit);
-app.listen(port, () => {
-  console.log(`Example app listening on port: ${port}`);
-});
--- a/preview/package-lock.json
+++ b/preview/package-lock.json
@@ -1,491 +0,0 @@
-{
-  "name": "preview",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@types/http-proxy": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.5.tgz",
-      "integrity": "sha512-GNkDE7bTv6Sf8JbV2GksknKOsk7OznNYHSdrtvPJXO0qJ9odZig6IZKUi5RFGi6d1bf6dgIAe4uXi3DBc7069Q==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/node": {
-      "version": "14.14.37",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
-      "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
-    },
-    "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
-      }
-    },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
-    },
-    "body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-      "requires": {
-        "bytes": "3.1.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
-      }
-    },
-    "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "requires": {
-        "fill-range": "^7.0.1"
-      }
-    },
-    "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
-    },
-    "camelcase": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
-      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
-    },
-    "content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-    },
-    "cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
-    },
-    "debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "requires": {
-        "ms": "2.0.0"
-      }
-    },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-    },
-    "eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-    },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      }
-    },
-    "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "requires": {
-        "to-regex-range": "^5.0.1"
-      }
-    },
-    "finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
-      }
-    },
-    "follow-redirects": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
-    },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-    },
-    "http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-      "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      }
-    },
-    "http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "requires": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "http-proxy-middleware": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.1.0.tgz",
-      "integrity": "sha512-OnjU5vyVgcZVe2AjLJyMrk8YLNOC2lspCHirB5ldM+B/dwEfZ5bgVTrFyzE9R7xRWAP/i/FXtvIqKjTNEZBhBg==",
-      "requires": {
-        "@types/http-proxy": "^1.17.5",
-        "camelcase": "^6.2.0",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-    },
-    "ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
-    },
-    "is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
-    },
-    "is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-      "requires": {
-        "is-extglob": "^2.1.1"
-      }
-    },
-    "is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-    },
-    "is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
-    },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
-    },
-    "micromatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-      "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-      "requires": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.0.5"
-      }
-    },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-    },
-    "mime-db": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
-      "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ=="
-    },
-    "mime-types": {
-      "version": "2.1.29",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
-      "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
-      "requires": {
-        "mime-db": "1.46.0"
-      }
-    },
-    "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
-    "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-    },
-    "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
-    },
-    "picomatch": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
-    },
-    "proxy-addr": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
-      "requires": {
-        "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.1"
-      }
-    },
-    "qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-    },
-    "raw-body": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-      "requires": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      }
-    },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
-    },
-    "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
-        "mime": "1.6.0",
-        "ms": "2.1.1",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-      "requires": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.17.1"
-      }
-    },
-    "setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
-    },
-    "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
-    },
-    "to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "requires": {
-        "is-number": "^7.0.0"
-      }
-    },
-    "toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
-    }
-  }
-}
--- a/preview/package.json
+++ b/preview/package.json
@@ -1,17 +0,0 @@
-{
-  "name": "cosmos-explorer-preview",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "deploy": "az webapp up -n cosmos-explorer-preview --subscription cosmosdb-portalteam-generaldemo -g stfaul",
-    "start": "node index.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "Microsoft Corporation",
-  "dependencies": {
-    "express": "^4.17.1",
-    "http-proxy-middleware": "^1.1.0"
-  }
-}
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -98,6 +98,30 @@ export class CapabilityNames {
  public static readonly EnableServerless: string = "EnableServerless";
 }

+export class Features {
+  public static readonly cosmosdb = "cosmosdb";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly enableTtl = "enablettl";
+  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableSpark = "enablespark";
+  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly ttl90Days = "ttl90days";
+  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableSchema = "enableschema";
+  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
+  public static readonly selfServeType = "selfservetype";
+  public static readonly enableKOPanel = "enablekopanel";
+}
+
 // flight names returned from the portal are always lowercase
 export class Flights {
  public static readonly SettingsV2 = "settingsv2";
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -32,7 +32,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };

 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
+  requestContext.endpoint = configContext.PROXY_PATH;
  requestContext.headers["x-ms-proxy-target"] = endpoint();
  return next(requestContext);
 };
--- a/src/Common/Logger.ts
+++ b/src/Common/Logger.ts
@@ -1,7 +1,7 @@
-import { SeverityLevel } from "@microsoft/applicationinsights-web";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { trackTrace } from "../Shared/appInsights";
 import { sendMessage } from "./MessageHandler";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { appInsights } from "../Shared/appInsights";
+import { SeverityLevel } from "@microsoft/applicationinsights-web";

 // TODO: Move to a separate Diagnostics folder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +46,7 @@ function _logEntry(entry: Diagnostics.LogEntry): void {
        return SeverityLevel.Information;
    }
  })(entry.level);
-  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }

 function _generateLogEntry(
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -1,8 +1,8 @@
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { getDataExplorerWindow } from "../Utils/WindowUtils";
 import * as Constants from "./Constants";
+import { getDataExplorerWindow } from "../Utils/WindowUtils";

 export interface CachedDataPromise<T> {
  deferred: Q.Deferred<T>;
@@ -56,22 +56,7 @@ export function sendMessage(data: any): void {
        signature: "pcIframe",
        data: data,
      },
-      portalChildWindow.document.referrer || "*"
-    );
-  }
-}
-
-export function sendReadyMessage(): void {
-  if (canSendMessage()) {
-    // We try to find data explorer window first, then fallback to current window
-    const portalChildWindow = getDataExplorerWindow(window) || window;
-    portalChildWindow.parent.postMessage(
-      {
-        signature: "pcIframe",
-        kind: "ready",
-        data: "ready",
-      },
-      portalChildWindow.document.referrer || "*"
+      portalChildWindow.document.referrer
    );
  }
 }
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -6,7 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../Utils/QueryUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
--- a/src/Common/Tooltip/index.tsx
+++ b/src/Common/Tooltip/index.tsx
@@ -1,24 +0,0 @@
-import { useId } from "@uifabric/react-hooks";
-import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
-import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  return children ? (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
-      </TooltipHost>
-    </span>
-  ) : (
-    <></>
-  );
-};
--- a/src/Common/Upload/index.tsx
+++ b/src/Common/Upload/index.tsx
@@ -1,75 +0,0 @@
-import { Image, Stack, TextField } from "office-ui-fabric-react";
-import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
-import FolderIcon from "../../../images/folder_16x16.svg";
-import * as Constants from "../../Common/Constants";
-import { Tooltip } from "../Tooltip";
-
-interface UploadProps {
-  label: string;
-  accept?: string;
-  tooltip?: string;
-  multiple?: boolean;
-  tabIndex?: number;
-  onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const Upload: FunctionComponent<UploadProps> = ({
-  label,
-  accept,
-  tooltip,
-  multiple,
-  tabIndex,
-  ...props
-}: UploadProps) => {
-  const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
-
-  const fileRef = useRef<HTMLInputElement>();
-
-  const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      onImportLinkClick();
-    }
-  };
-
-  const onImportLinkClick = (): void => {
-    fileRef?.current?.click();
-  };
-
-  const onUpload = (event: ChangeEvent<HTMLInputElement>): void => {
-    const { files } = event.target;
-
-    const newFileList = [];
-    for (let i = 0; i < files.length; i++) {
-      newFileList.push(files.item(i).name);
-    }
-    if (newFileList) {
-      setSelectedFilesTitle(newFileList);
-      props.onUpload(event);
-    }
-  };
-  const title = label + " to upload";
-  return (
-    <div>
-      <span className="renewUploadItemsHeader">{label}</span>
-      <Tooltip>{tooltip}</Tooltip>
-      <Stack horizontal>
-        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
-        <input
-          type="file"
-          id="importFileInput"
-          style={{ display: "none" }}
-          ref={fileRef}
-          accept={accept}
-          tabIndex={tabIndex}
-          multiple={multiple}
-          title="Upload Icon"
-          onChange={onUpload}
-          role="button"
-        />
-        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
-          <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
-        </a>
-      </Stack>
-    </div>
-  );
-};
--- a/src/Common/UrlUtility.ts
+++ b/src/Common/UrlUtility.ts
@@ -1,61 +1,55 @@
-interface Result {
-  type?: string;
-  objectBody?: {
-    id: string;
-    self: string;
-  };
-}
-
-export function parseDocumentsPath(resourcePath: string): Result {
-  if (typeof resourcePath !== "string") {
-    return {};
-  }
-
-  if (resourcePath.length === 0) {
-    return {};
-  }
-
-  if (resourcePath[resourcePath.length - 1] !== "/") {
-    resourcePath = resourcePath + "/";
-  }
-
-  if (resourcePath[0] !== "/") {
-    resourcePath = "/" + resourcePath;
-  }
-
-  let id: string;
-  let type: string;
-  const pathParts = resourcePath.split("/");
-
-  if (pathParts.length % 2 === 0) {
-    id = pathParts[pathParts.length - 2];
-    type = pathParts[pathParts.length - 3];
-  } else {
-    id = pathParts[pathParts.length - 3];
-    type = pathParts[pathParts.length - 2];
-  }
-
-  const result = {
-    type: type,
-    objectBody: {
-      id: id,
-      self: resourcePath,
-    },
-  };
-
-  return result;
-}
-
-export function createUri(baseUri: string, relativeUri: string): string {
-  if (!baseUri) {
-    throw new Error("baseUri is null or empty");
-  }
-
-  const slashAtEndOfUriRegex = /\/$/,
-    slashAtStartOfUriRegEx = /^\//;
-
-  const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
-    normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
-
-  return normalizedBaseUri + normalizedRelativeUri;
+export default class UrlUtility {
+  public static parseDocumentsPath(resourcePath: string): any {
+    if (typeof resourcePath !== "string") {
+      return {};
+    }
+
+    if (resourcePath.length === 0) {
+      return {};
+    }
+
+    if (resourcePath[resourcePath.length - 1] !== "/") {
+      resourcePath = resourcePath + "/";
+    }
+
+    if (resourcePath[0] !== "/") {
+      resourcePath = "/" + resourcePath;
+    }
+
+    var id: string;
+    var type: string;
+    var pathParts = resourcePath.split("/");
+
+    if (pathParts.length % 2 === 0) {
+      id = pathParts[pathParts.length - 2];
+      type = pathParts[pathParts.length - 3];
+    } else {
+      id = pathParts[pathParts.length - 3];
+      type = pathParts[pathParts.length - 2];
+    }
+
+    var result = {
+      type: type,
+      objectBody: {
+        id: id,
+        self: resourcePath,
+      },
+    };
+
+    return result;
+  }
+
+  public static createUri(baseUri: string, relativeUri: string): string {
+    if (!baseUri) {
+      throw new Error("baseUri is null or empty");
+    }
+
+    var slashAtEndOfUriRegex = /\/$/,
+      slashAtStartOfUriRegEx = /^\//;
+
+    var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+      normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
+
+    return normalizedBaseUri + normalizedRelativeUri;
+  }
 }
--- a/src/Common/snapshots/CosmosClient.test.ts.snap
+++ b/src/Common/snapshots/CosmosClient.test.ts.snap
@@ -2,7 +2,7 @@

 exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
 Object {
-  "endpoint": "http://localhost/proxy",
+  "endpoint": "/proxy",
  "headers": Object {
    "x-ms-proxy-target": "http://localhost",
  },
@@ -12,7 +12,7 @@ Object {

 exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
 Object {
-  "endpoint": "http://localhost/proxy",
+  "endpoint": "/proxy",
  "headers": Object {
    "x-ms-proxy-target": "baz",
  },
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -88,6 +88,7 @@ export interface Database extends TreeNode {
  loadCollections(): Promise<void>;
  findCollectionWithId(collectionId: string): Collection;
  openAddCollection(database: Database, event: MouseEvent): void;
+  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
  onSettingsClick: () => void;
  loadOffer(): Promise<void>;
  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -375,6 +376,7 @@ export interface DataExplorerInputsFrame {
  masterKey?: string;
  hasWriteAccess?: boolean;
  authorizationToken?: string;
+  features: { [key: string]: string };
  csmEndpoint?: string;
  dnsSuffix?: string;
  serverId?: string;
@@ -388,6 +390,7 @@ export interface DataExplorerInputsFrame {
  sharedThroughputMaximum?: number;
  sharedThroughputDefault?: number;
  dataExplorerVersion?: string;
+  isAuthWithresourceToken?: boolean;
  defaultCollectionThroughput?: CollectionCreationDefaults;
  flights?: readonly string[];
 }
--- a/src/Controls/Heatmap/Heatmap.ts
+++ b/src/Controls/Heatmap/Heatmap.ts
@@ -1,10 +1,5 @@
-import dayjs from "dayjs";
 import * as Plotly from "plotly.js-cartesian-dist-min";
-import { StyleConstants } from "../../Common/Constants";
-import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import "./Heatmap.less";
+import dayjs from "dayjs";
 import {
  ChartSettings,
  DataPayload,
@@ -16,6 +11,11 @@ import {
  PartitionTimeStampToData,
  PortalTheme,
 } from "./HeatmapDatatypes";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { StyleConstants } from "../../Common/Constants";
+import "./Heatmap.less";

 export class Heatmap {
  public static readonly elementId: string = "heatmap";
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }

 window.addEventListener("message", handleMessage, false);
-sendReadyMessage();
+sendMessage("ready");
--- a/src/Explorer/ComponentRegisterer.test.ts
+++ b/src/Explorer/ComponentRegisterer.test.ts
@@ -77,6 +77,18 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
  });

+  it("should register delete-database-confirmation-pane component", () => {
+    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
+  });
+
+  it("should register save-query-pane component", () => {
+    expect(ko.components.isRegistered("save-query-pane")).toBe(true);
+  });
+
+  it("should register browse-queries-pane component", () => {
+    expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
+  });
+
  it("should register graph-new-vertex-pane component", () => {
    expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true);
  });
@@ -85,6 +97,10 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
  });

+  it("should register upload-file-pane component", () => {
+    expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
+  });
+
  it("should register string-input-pane component", () => {
    expect(ko.components.isRegistered("string-input-pane")).toBe(true);
  });
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -1,29 +1,16 @@
 import * as ko from "knockout";
+import * as PaneComponents from "./Panes/PaneComponents";
+import * as TabComponents from "./Tabs/TabComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent";
+import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
-import * as PaneComponents from "./Panes/PaneComponents";
-import ConflictsTab from "./Tabs/ConflictsTab";
-import DocumentsTab from "./Tabs/DocumentsTab";
-import GalleryTab from "./Tabs/GalleryTab";
-import GraphTab from "./Tabs/GraphTab";
-import MongoShellTab from "./Tabs/MongoShellTab";
-import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
-import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TabsManagerTemplate from "./Tabs/TabsManager.html";
-import TerminalTab from "./Tabs/TerminalTab";
-import TriggerTab from "./Tabs/TriggerTab";
-import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
+import { TabsManagerKOComponent } from "./Tabs/TabsManager";
+import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";

 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
@@ -34,26 +21,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", { template: TabsManagerTemplate });
+ko.components.register("tabs-manager", TabsManagerKOComponent());

 // Collection Tabs
-[
-  DocumentsTab,
-  StoredProcedureTab,
-  TriggerTab,
-  UserDefinedFunctionTab,
-  SettingsTabV2,
-  QueryTab,
-  QueryTablesTab,
-  GraphTab,
-  MongoShellTab,
-  ConflictsTab,
-  NotebookTabV2,
-  TerminalTab,
-  GalleryTab,
-  NotebookViewerTab,
-  DatabaseSettingsTabV2,
-].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
+ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
+ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
+ko.components.register("trigger-tab", new TabComponents.TriggerTab());
+ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
+ko.components.register("query-tab", new TabComponents.QueryTab());
+ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
+ko.components.register("graph-tab", new TabComponents.GraphTab());
+ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
+ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
+ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
+ko.components.register("terminal-tab", new TabComponents.TerminalTab());
+ko.components.register("gallery-tab", new TabComponents.GalleryTab());
+ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
+
+// Database Tabs
+ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());

 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
@@ -62,13 +51,24 @@ ko.components.register(
  "delete-collection-confirmation-pane",
  new PaneComponents.DeleteCollectionConfirmationPaneComponent()
 );
-
+ko.components.register(
+  "delete-database-confirmation-pane",
+  new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
+);
 ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
 ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEntityPaneComponent());
+ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
 ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
+ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
+ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
+ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
+ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
+ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
+ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
+ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
 ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());
--- a/src/Explorer/ContextMenuButtonFactory.ts
+++ b/src/Explorer/ContextMenuButtonFactory.ts
@@ -1,22 +1,23 @@
+import * as ko from "knockout";
+import * as ViewModels from "../Contracts/ViewModels";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
 import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
 import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
-import * as ViewModels from "../Contracts/ViewModels";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
-import { userContext } from "../UserContext";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import Explorer from "./Explorer";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { userContext } from "../UserContext";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";

 export interface CollectionContextMenuButtonParams {
  databaseId: string;
@@ -42,7 +43,7 @@ export class ResourceTreeContextMenuButtonFactory {
    if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
      items.push({
        iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
+        onClick: () => container.deleteDatabaseConfirmationPane.open(),
        label: container.deleteDatabaseText(),
        styleClass: "deleteDatabaseMenuItem",
      });
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
@@ -6,7 +6,6 @@ describe("CollapsibleSectionComponent", () => {
  it("renders", () => {
    const props: CollapsibleSectionProps = {
      title: "Sample title",
-      isExpandedByDefault: true,
    };

    const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,10 +1,9 @@
 import { Icon, Label, Stack } from "office-ui-fabric-react";
 import * as React from "react";
-import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
+import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";

 export interface CollapsibleSectionProps {
  title: string;
-  isExpandedByDefault: boolean;
 }

 export interface CollapsibleSectionState {
@@ -15,7 +14,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
  constructor(props: CollapsibleSectionProps) {
    super(props);
    this.state = {
-      isExpanded: this.props.isExpandedByDefault,
+      isExpanded: true,
    };
  }

@@ -26,14 +25,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
  public render(): JSX.Element {
    return (
      <>
-        <Stack
-          className="collapsibleSection"
-          horizontal
-          verticalAlign="center"
-          tokens={accordionStackTokens}
-          onClick={this.toggleCollapsed}
-        >
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
+        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
          <Label>{this.props.title}</Label>
        </Stack>
        {this.state.isExpanded && this.props.children}
--- a/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
+++ b/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
@@ -11,10 +11,16 @@ exports[`CollapsibleSectionComponent renders 1`] = `
        "childrenGap": 10,
      }
    }
-    verticalAlign="center"
  >
-    <Icon
+    <StyledIconBase
      iconName="ChevronDown"
+      styles={
+        Object {
+          "root": Object {
+            "paddingTop": 7,
+          },
+        }
+      }
    />
    <StyledLabelBase>
      Sample title
--- a/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
@@ -354,6 +354,7 @@ exports[`test render renders with filters 1`] = `
        data-is-scrollable="true"
      >
        <div
+          aria-hidden="true"
          className="stickyAbove-42"
          style={
            Object {
@@ -374,6 +375,7 @@ exports[`test render renders with filters 1`] = `
          >
            <div>
              <div
+                aria-hidden={true}
                style={
                  Object {
                    "pointerEvents": "none",
@@ -393,6 +395,7 @@ exports[`test render renders with filters 1`] = `
                style={Object {}}
              >
                <div
+                  aria-hidden={false}
                  style={
                    Object {
                      "backgroundColor": "",
@@ -408,7 +411,6 @@ exports[`test render renders with filters 1`] = `
                  >
                    <TextFieldBase
                      ariaLabel="Directory filter text box"
-                      canRevealPassword={false}
                      className="directoryListFilterTextBox"
                      deferredValidationTime={200}
                      onChange={[Function]}
@@ -1121,7 +1123,7 @@ exports[`test render renders with filters 1`] = `
                              "iconDisabled": Object {
                                "color": "#a19f9d",
                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                    "color": "GrayText",
                                  },
                                },
@@ -1147,7 +1149,7 @@ exports[`test render renders with filters 1`] = `
                              "menuIconDisabled": Object {
                                "color": "#a19f9d",
                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                    "color": "GrayText",
                                  },
                                },
@@ -1166,7 +1168,7 @@ exports[`test render renders with filters 1`] = `
                                      "position": "absolute",
                                      "right": 2,
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "bottom": -2,
                                          "left": -2,
                                          "outlineColor": "ButtonText",
@@ -1245,7 +1247,7 @@ exports[`test render renders with filters 1`] = `
                                      "position": "absolute",
                                      "right": 2,
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "bottom": -2,
                                          "left": -2,
                                          "outlineColor": "ButtonText",
@@ -1277,10 +1279,8 @@ exports[`test render renders with filters 1`] = `
                                  },
                                },
                                Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "color": "#a19f9d",
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "Window",
                                      "borderColor": "GrayText",
                                      "color": "GrayText",
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
                                  "backgroundColor": "#f3f2f1",
                                  "color": "#201f1e",
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "borderColor": "Highlight",
                                      "color": "Highlight",
                                    },
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
                              "splitButtonContainer": Array [
                                Object {
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "border": "none",
                                    },
                                  },
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
                                      "position": "absolute",
                                      "right": 3,
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "border": "none",
                                          "bottom": -2,
                                          "left": -2,
@@ -1373,20 +1373,19 @@ exports[`test render renders with filters 1`] = `
                                      "borderBottomRightRadius": "0",
                                      "borderTopRightRadius": "0",
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "MsHighContrastAdjust": "none",
                                          "backgroundColor": "Window",
                                          "border": "1px solid WindowText",
                                          "borderRightWidth": "0",
                                          "color": "WindowText",
-                                          "forcedColorAdjust": "none",
                                        },
                                      },
                                    },
                                    ".ms-Button--primary + .ms-Button": Object {
                                      "border": "none",
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "border": "1px solid WindowText",
                                          "borderLeftWidth": "0",
                                        },
@@ -1399,11 +1398,10 @@ exports[`test render renders with filters 1`] = `
                                "selectors": Object {
                                  ".ms-Button--primary": Object {
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "MsHighContrastAdjust": "none",
                                        "backgroundColor": "WindowText",
                                        "color": "Window",
-                                        "forcedColorAdjust": "none",
                                      },
                                    },
                                  },
@@ -1413,11 +1411,10 @@ exports[`test render renders with filters 1`] = `
                                "selectors": Object {
                                  ".ms-Button--primary": Object {
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "MsHighContrastAdjust": "none",
                                        "backgroundColor": "WindowText",
                                        "color": "Window",
-                                        "forcedColorAdjust": "none",
                                      },
                                    },
                                  },
@@ -1427,11 +1424,12 @@ exports[`test render renders with filters 1`] = `
                                "border": "none",
                                "outline": "none",
                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                    "backgroundColor": "Window",
                                    "borderColor": "GrayText",
                                    "color": "GrayText",
+                                  },
+                                  "@media screen and (forced-colors: active)": Object {
                                    "forcedColorAdjust": "none",
                                  },
                                },
@@ -1443,7 +1441,7 @@ exports[`test render renders with filters 1`] = `
                                "selectors": Object {
                                  ".ms-Button--primary": Object {
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "backgroundColor": "Highlight",
                                        "color": "Window",
                                      },
@@ -1452,7 +1450,7 @@ exports[`test render renders with filters 1`] = `
                                  ".ms-Button.is-disabled": Object {
                                    "color": "#a19f9d",
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "backgroundColor": "Window",
                                        "borderColor": "GrayText",
                                        "color": "GrayText",
@@ -1468,7 +1466,7 @@ exports[`test render renders with filters 1`] = `
                                  "position": "absolute",
                                  "right": 31,
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "WindowText",
                                    },
                                  },
@@ -1480,7 +1478,7 @@ exports[`test render renders with filters 1`] = `
                                  "position": "absolute",
                                  "right": 31,
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "WindowText",
                                    },
                                  },
@@ -1497,7 +1495,7 @@ exports[`test render renders with filters 1`] = `
                                  "position": "absolute",
                                  "right": 31,
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "GrayText",
                                    },
                                  },
@@ -1520,7 +1518,7 @@ exports[`test render renders with filters 1`] = `
                                    ":hover": Object {
                                      "backgroundColor": "#edebe9",
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "color": "Highlight",
                                        },
                                      },
@@ -1528,11 +1526,6 @@ exports[`test render renders with filters 1`] = `
                                  },
                                },
                                Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    ".ms-Button-menuIcon": Object {
-                                      "color": "WindowText",
-                                    },
-                                  },
                                  "border": "1px solid #8a8886",
                                  "borderBottomRightRadius": "2px",
                                  "borderLeft": "none",
@@ -1578,7 +1571,7 @@ exports[`test render renders with filters 1`] = `
                                  "selectors": Object {
                                    ".ms-Button--primary": Object {
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "backgroundColor": "Window",
                                          "borderColor": "GrayText",
                                          "color": "GrayText",
@@ -1587,7 +1580,7 @@ exports[`test render renders with filters 1`] = `
                                    },
                                    ".ms-Button-menuIcon": Object {
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "color": "GrayText",
                                        },
                                      },
@@ -1595,7 +1588,7 @@ exports[`test render renders with filters 1`] = `
                                    ":hover": Object {
                                      "cursor": "default",
                                    },
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "Window",
                                      "border": "1px solid GrayText",
                                      "color": "GrayText",
@@ -1900,7 +1893,7 @@ exports[`test render renders with filters 1`] = `
                        >
                          <button
                            aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
                            data-is-focusable={false}
                            disabled={true}
                            onClick={[Function]}
@@ -1912,7 +1905,7 @@ exports[`test render renders with filters 1`] = `
                            type="button"
                          >
                            <span
-                              className="ms-Button-flexContainer flexContainer-58"
+                              className="ms-Button-flexContainer flexContainer-55"
                              data-automationid="splitbuttonprimary"
                            >
                              <div
@@ -1943,6 +1936,7 @@ exports[`test render renders with filters 1`] = `
          </List>
        </div>
        <div
+          aria-hidden="true"
          className="stickyBelow-43"
          style={
            Object {
--- a/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
@@ -7,7 +7,7 @@ import { ChildrenMargin } from "./GitHubStyleConstants";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as UrlUtility from "../../../Common/UrlUtility";
+import UrlUtility from "../../../Common/UrlUtility";
 import Explorer from "../../Explorer";

 export interface AddRepoComponentProps {
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -18,7 +18,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";

 export interface GalleryCardComponentProps {
@@ -47,7 +47,6 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
  private static readonly cardItemGapBig = 10;
  private static readonly cardItemGapSmall = 8;
  private static readonly cardDeleteSpinnerHeight = 360;
-  private static readonly smallTextLineHeight = 18;

  constructor(props: GalleryCardComponentProps) {
    super(props);
@@ -104,7 +103,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
            </Card.Item>

            <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
+              <Text variant="small" nowrap>
                {this.props.data.tags ? (
                  this.props.data.tags.map((tag, index, array) => (
                    <span key={tag}>
@@ -130,7 +129,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
                {cardTitle}
              </Text>

-              <Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
+              <Text variant="small" styles={{ root: { height: 36 } }}>
                {this.renderTruncatedDescription()}
              </Text>

--- a/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
@@ -50,13 +50,6 @@ exports[`GalleryCardComponent renders 1`] = `
  >
    <Text
      nowrap={true}
-      styles={
-        Object {
-          "root": Object {
-            "height": 18,
-          },
-        }
-      }
      variant="small"
    >
      <span
@@ -107,7 +100,7 @@ exports[`GalleryCardComponent renders 1`] = `
        }
        variant="tiny"
      >
-        <Icon
+        <StyledIconBase
          iconName="RedEye"
          styles={
            Object {
@@ -131,7 +124,7 @@ exports[`GalleryCardComponent renders 1`] = `
        }
        variant="tiny"
      >
-        <Icon
+        <StyledIconBase
          iconName="Download"
          styles={
            Object {
@@ -155,7 +148,7 @@ exports[`GalleryCardComponent renders 1`] = `
        }
        variant="tiny"
      >
-        <Icon
+        <StyledIconBase
          iconName="Heart"
          styles={
            Object {
@@ -180,7 +173,7 @@ exports[`GalleryCardComponent renders 1`] = `
      }
    }
  >
-    <Separator
+    <Styled
      styles={
        Object {
          "root": Object {
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
  <div
    className="infoPanelMain"
  >
-    <Icon
+    <StyledIconBase
      className="infoIconMain"
      iconName="Help"
      styles={
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -14,7 +14,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";
--- a/src/Explorer/Controls/NotebookViewer/snapshots/NotebookMetadataComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookViewer/snapshots/NotebookMetadataComponent.test.tsx.snap
@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
      Invalid Date
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="RedEye"
      />
       
      0
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="Download"
      />
      0
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
      Invalid Date
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="RedEye"
      />
       
      0
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="Download"
      />
      0
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
@@ -1,15 +1,20 @@
-import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
-import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
+import * as _ from "underscore";
+import * as React from "react";
+import * as Constants from "../../../Common/Constants";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import {
  DetailsList,
  DetailsListLayoutMode,
-  DetailsRow,
-  IColumn,
  IDetailsListProps,
  IDetailsRowProps,
+  DetailsRow,
 } from "office-ui-fabric-react/lib/DetailsList";
 import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
+import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
+import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
  IObjectWithKey,
  ISelectionZoneProps,
@@ -17,18 +22,13 @@ import {
  SelectionMode,
  SelectionZone,
 } from "office-ui-fabric-react/lib/utilities/selection/index";
-import * as React from "react";
-import * as _ from "underscore";
-import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
-import * as Constants from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { QueriesClient } from "../../../Common/QueriesClient";
-import * as DataModels from "../../../Contracts/DataModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";

-const title: string = "Open Saved Queries";
+import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
+import { QueriesClient } from "../../../Common/QueriesClient";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

 export interface QueriesGridComponentProps {
  queriesClient: QueriesClient;
@@ -76,11 +76,6 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
    }
  }

-  // fetched saved queries when panel open
-  public componentDidMount() {
-    this.fetchSavedQueries();
-  }
-
  public render(): JSX.Element {
    if (this.state.queries.length === 0) {
      return this.renderBannerComponent();
@@ -141,7 +136,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
      },
    };
    return (
-      <div id="emptyQueryBanner">
+      <div>
        <div>
          You have not saved any queries yet. <br /> <br />
          To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
@@ -227,7 +222,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                      const container = window.dataExplorer;
                      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                        dataExplorerArea: Constants.Areas.ContextualPane,
-                        paneTitle: title,
+                        paneTitle: container && container.browseQueriesPane.title(),
                      });
                      try {
                        await this.props.queriesClient.deleteQuery(query);
@@ -235,7 +230,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                          Action.DeleteSavedQuery,
                          {
                            dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
+                            paneTitle: container && container.browseQueriesPane.title(),
                          },
                          startKey
                        );
@@ -244,7 +239,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                          Action.DeleteSavedQuery,
                          {
                            dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
+                            paneTitle: container && container.browseQueriesPane.title(),
                            error: getErrorMessage(error),
                            errorStack: getErrorStack(error),
                          },
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
@@ -0,0 +1,33 @@
+/**
+ * This adapter is responsible to render the QueriesGrid React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import Explorer from "../../Explorer";
+
+export class QueriesGridComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(private container: Explorer) {
+    this.parameters = ko.observable<number>(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    const props: QueriesGridComponentProps = {
+      queriesClient: this.container.queriesClient,
+      onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
+      containerVisible: this.container.browseQueriesPane.visible(),
+      saveQueryEnabled: this.container.canSaveQueries(),
+    };
+    return <QueriesGridComponent {...props} />;
+  }
+
+  public forceRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}
--- a/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
@@ -1,19 +1,17 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import * as DataModels from "../../../Contracts/DataModels";
+import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import Explorer from "../../Explorer";
 import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
-import { isDirty, TtlType } from "./SettingsUtils";
 import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import ko from "knockout";
+import { TtlType, isDirty } from "./SettingsUtils";
+import Explorer from "../../Explorer";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
  getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
  updateCollection: jest.fn().mockReturnValue({
    id: undefined,
@@ -31,6 +29,8 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
    analyticalStorageTtl: undefined,
  } as MongoDBCollectionResource),
 }));
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
  updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,6 +134,7 @@ describe("SettingsComponent", () => {
      loadCollections: undefined,
      findCollectionWithId: undefined,
      openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
      readSettings: undefined,
      onSettingsClick: undefined,
      loadOffer: undefined,
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1,51 +1,49 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
-import DiscardIcon from "../../../../images/discard.svg";
-import SaveIcon from "../../../../images/save-cosmos.svg";
-import { AuthType } from "../../../AuthType";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import * as Constants from "../../../Common/Constants";
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
-import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import DiscardIcon from "../../../../images/discard.svg";
+import SaveIcon from "../../../../images/save-cosmos.svg";
+import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
-import {
-  ConflictResolutionComponent,
-  ConflictResolutionComponentProps,
-} from "./SettingsSubComponents/ConflictResolutionComponent";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
  MongoIndexingPolicyComponent,
  MongoIndexingPolicyComponentProps,
 } from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
-import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
 import {
-  AddMongoIndexProps,
-  ChangeFeedPolicyState,
-  GeospatialConfigType,
-  getMongoNotification,
-  getTabTitle,
  hasDatabaseSharedThroughput,
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  SettingsV2TabTypes,
+  getTabTitle,
  isDirty,
+  AddMongoIndexProps,
  MongoIndexTypes,
  parseConflictResolutionMode,
  parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
-  TtlType,
+  getMongoNotification,
 } from "./SettingsUtils";
+import {
+  ConflictResolutionComponent,
+  ConflictResolutionComponentProps,
+} from "./SettingsSubComponents/ConflictResolutionComponent";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
+import "./SettingsComponent.less";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
+import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

 interface SettingsV2TabInfo {
  tab: SettingsV2TabTypes;
@@ -139,7 +137,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.shouldShowIndexingPolicyEditor =
        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();

-      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );

      // Mongo container with system partition key still treat as "Fixed"
      this.isFixedContainer =
@@ -325,6 +325,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        ? this.saveCollectionSettings(startKey)
        : this.saveDatabaseSettings(startKey));
    } catch (error) {
+      this.container.isRefreshingExplorer(false);
      this.props.settingsTab.isExecutionError(true);
      console.error(error);
      traceFailure(
@@ -698,6 +699,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      }
    }

+    this.container.isRefreshingExplorer(false);
    this.setBaseline();
    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
    traceSuccess(
@@ -860,6 +862,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        });
      }
    }
+    this.container.isRefreshingExplorer(false);
    this.setBaseline();
    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
    traceSuccess(
@@ -874,18 +877,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    );
  };

-  public getMongoIndexTabContent = (
-    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
-  ): JSX.Element => {
-    if (userContext.authType === AuthType.AAD) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
-        return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
-      }
-      return undefined;
-    }
-    return mongoIndexingPolicyAADError;
-  };
-
  public render(): JSX.Element {
    const scaleComponentProps: ScaleComponentProps = {
      collection: this.collection,
@@ -1003,11 +994,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
      });
    } else if (this.container.isPreferredApiMongoDB()) {
-      const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
-      if (mongoIndexTabContext) {
+      if (this.container.isEnableMongoCapabilityPresent()) {
        tabs.push({
          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexTabContext,
+          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
+        });
+      } else {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: mongoIndexingPolicyAADError,
        });
      }
    }
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -23,6 +23,7 @@ import {
  ITextStyles,
  IDetailsRowStyles,
  IStackStyles,
+  IIconStyles,
  IDetailsListStyles,
  IDropdownStyles,
  ISeparatorStyles,
@@ -115,6 +116,8 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
  childrenGap: 20,
 };

+export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
+
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };

 export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

    return (
      <Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
+        <CollapsibleSectionComponent title="Current index(es)">
          {
            <>
              <DetailsList
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

    return (
      <Stack styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
+        <CollapsibleSectionComponent title="Index(es) to be dropped">
          {indexesToBeDropped.length > 0 && (
            <DetailsList
              styles={customDetailsListStyles}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/MongoIndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/MongoIndexingPolicyComponent.test.tsx.snap
@@ -42,7 +42,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
    }
  >
    <CollapsibleSectionComponent
-      isExpandedByDefault={true}
      title="Current index(es)"
    >
      <StyledWithViewportComponent
@@ -115,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
      </Stack>
    </CollapsibleSectionComponent>
  </Stack>
-  <Separator
+  <Styled
    styles={
      Object {
        "root": Array [
@@ -140,7 +139,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
    }
  >
    <CollapsibleSectionComponent
-      isExpandedByDefault={true}
      title="Index(es) to be dropped"
    />
  </Stack>
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -1,24 +1,23 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
-import { configContext, Platform } from "../../../../ConfigContext";
-import * as DataModels from "../../../../Contracts/DataModels";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 import * as ViewModels from "../../../../Contracts/ViewModels";
+import * as DataModels from "../../../../Contracts/DataModels";
 import * as SharedConstants from "../../../../Shared/Constants";
-import { userContext } from "../../../../UserContext";
-import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import Explorer from "../../../Explorer";
 import {
  getTextFieldStyles,
+  subComponentStackProps,
+  titleAndInputStackProps,
+  throughputUnit,
  getThroughputApplyLongDelayMessage,
  getThroughputApplyShortDelayMessage,
-  subComponentStackProps,
-  throughputUnit,
-  titleAndInputStackProps,
  updateThroughputBeyondLimitWarningMessage,
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
+import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { configContext, Platform } from "../../../../ConfigContext";

 export interface ScaleComponentProps {
  collection: ViewModels.Collection;
@@ -80,7 +79,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  };

  public getMaxRUs = (): number => {
-    if (userContext.isTryCosmosDBSubscription) {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
      return Constants.TryCosmosExperience.maxRU;
    }

@@ -92,7 +91,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  };

  public getMinRUs = (): number => {
-    if (userContext.isTryCosmosDBSubscription) {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
      return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
    }

@@ -173,6 +172,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      databaseAccount={this.props.container.databaseAccount()}
      databaseName={this.databaseId}
      collectionName={this.collectionId}
+      serverId={this.props.container.serverId()}
      throughput={this.props.throughput}
      throughputBaseline={this.props.throughputBaseline}
      onThroughputChange={this.props.onThroughputChange}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
@@ -1,16 +1,17 @@
 import { shallow } from "enzyme";
 import React from "react";
-import * as DataModels from "../../../../../Contracts/DataModels";
 import {
  ThroughputInputAutoPilotV3Component,
  ThroughputInputAutoPilotV3Props,
 } from "./ThroughputInputAutoPilotV3Component";
+import * as DataModels from "../../../../../Contracts/DataModels";

 describe("ThroughputInputAutoPilotV3Component", () => {
  const baseProps: ThroughputInputAutoPilotV3Props = {
    databaseAccount: {} as DataModels.DatabaseAccount,
    databaseName: "test",
    collectionName: "test",
+    serverId: undefined,
    wasAutopilotOriginallySet: false,
    throughput: 100,
    throughputBaseline: 100,
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -1,52 +1,55 @@
+import React from "react";
+import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import {
-  Checkbox,
+  getTextFieldStyles,
+  getToolTipContainer,
+  noLeftPaddingCheckBoxStyle,
+  titleAndInputStackProps,
+  checkBoxAndInputStackProps,
+  getChoiceGroupStyles,
+  messageBarStyles,
+  getEstimatedSpendingElement,
+  getAutoPilotV3SpendElement,
+  manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle,
+} from "../../SettingsRenderUtils";
+import {
+  Text,
+  TextField,
  ChoiceGroup,
-  FontIcon,
  IChoiceGroupOption,
-  IColumn,
+  Checkbox,
+  Stack,
  Label,
  Link,
  MessageBar,
-  Stack,
-  Text,
-  TextField,
+  FontIcon,
+  IColumn,
 } from "office-ui-fabric-react";
-import React from "react";
-import * as DataModels from "../../../../../Contracts/DataModels";
-import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import * as SharedConstants from "../../../../../Shared/Constants";
-import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../../../UserContext";
-import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
-import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
-import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
-import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import {
-  AutoscaleEstimatedSpendingDisplayProps,
-  checkBoxAndInputStackProps,
-  getAutoPilotV3SpendElement,
-  getChoiceGroupStyles,
-  getEstimatedSpendingElement,
-  getRuPriceBreakdown,
-  getTextFieldStyles,
-  getToolTipContainer,
-  ManualEstimatedSpendingDisplayProps,
-  manualToAutoscaleDisclaimerElement,
-  messageBarStyles,
-  noLeftPaddingCheckBoxStyle,
-  PriceBreakdown,
-  saveThroughputWarningMessage,
-  titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
-} from "../../SettingsRenderUtils";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import * as SharedConstants from "../../../../../Shared/Constants";
+import * as DataModels from "../../../../../Contracts/DataModels";
+import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
+import { userContext } from "../../../../../UserContext";
+import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
+import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
+import { Features } from "../../../../../Common/Constants";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+
+import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";

 export interface ThroughputInputAutoPilotV3Props {
  databaseAccount: DataModels.DatabaseAccount;
  databaseName: string;
  collectionName: string;
+  serverId: string;
  throughput: number;
  throughputBaseline: number;
  onThroughputChange: (newThroughput: number) => void;
@@ -179,6 +182,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    }

    const isDirty: boolean = this.IsComponentDirty().isDiscardable;
+    const serverId: string = this.props.serverId;
    const regions = account?.properties?.readLocations?.length || 1;
    const multimaster = account?.properties?.enableMultipleWriteLocations || false;

@@ -188,7 +192,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
      estimatedSpend = this.getEstimatedManualSpendElement(
        // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
-        userContext.portalEnv,
+        serverId,
        regions,
        multimaster,
        isDirty ? this.props.throughput : undefined
@@ -196,7 +200,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    } else {
      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
        this.props.maxAutoPilotThroughputBaseline,
-        userContext.portalEnv,
+        serverId,
        regions,
        multimaster,
        isDirty ? this.props.maxAutoPilotThroughput : undefined
@@ -464,7 +468,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
    const oneTBinKB = 1000000000;
    const minRUperGB = 10;
-    const featureFlagEnabled = userContext.features.showMinRUSurvey;
+    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
    const collectionIsEligible =
      userContext.subscriptionType !== SubscriptionType.Internal &&
      this.props.usageSizeInKB > oneTBinKB &&
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ToolTipLabelComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ToolTipLabelComponent.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
        }
      }
    >
-      <Icon
+      <StyledIconBase
        ariaLabel="Info"
        iconName="Info"
        styles={
--- a/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
@@ -1,23 +1,23 @@
-import ko from "knockout";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
+import { collection } from "./TestUtils";
 import {
  getMongoIndexType,
-  getMongoIndexTypeText,
  getMongoNotification,
  getSanitizedInputValue,
  hasDatabaseSharedThroughput,
  isDirty,
-  isIndexTransforming,
  MongoIndexTypes,
  MongoNotificationType,
-  MongoWildcardPlaceHolder,
  parseConflictResolutionMode,
  parseConflictResolutionProcedure,
+  MongoWildcardPlaceHolder,
+  getMongoIndexTypeText,
  SingleFieldText,
  WildcardText,
+  isIndexTransforming,
 } from "./SettingsUtils";
-import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ko from "knockout";

 describe("SettingsUtils", () => {
  it("hasDatabaseSharedThroughput", () => {
@@ -42,6 +42,7 @@ describe("SettingsUtils", () => {
        loadCollections: undefined,
        findCollectionWithId: undefined,
        openAddCollection: undefined,
+        onDeleteDatabaseContextMenuClick: undefined,
        readSettings: undefined,
        onSettingsClick: undefined,
        loadOffer: undefined,
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
@@ -1,7 +1,7 @@
-import { shallow } from "enzyme";
 import React from "react";
-import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
+import { shallow } from "enzyme";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
+import { NumberUiType, SmartUiInput, DescriptionType } from "../../../SelfServe/SelfServeTypes";

 describe("SmartUiComponent", () => {
  const exampleData: SmartUiDescriptor = {
@@ -97,9 +97,9 @@ describe("SmartUiComponent", () => {
            dataFieldName: "database",
            type: "object",
            choices: [
-              { labelTKey: "Database 1", key: "db1" },
-              { labelTKey: "Database 2", key: "db2" },
-              { labelTKey: "Database 3", key: "db3" },
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" },
            ],
            defaultKey: "db2",
          },
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
@@ -1,13 +1,14 @@
-import { TFunction } from "i18next";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
+import * as React from "react";
+import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
 import { Slider } from "office-ui-fabric-react/lib/Slider";
 import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
-import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
-import { Text } from "office-ui-fabric-react/lib/Text";
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
-import * as React from "react";
+import { Text } from "office-ui-fabric-react/lib/Text";
+import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
+import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import * as InputUtils from "./InputUtils";
+import "./SmartUiComponent.less";
 import {
  ChoiceItem,
  Description,
@@ -18,9 +19,8 @@ import {
  NumberUiType,
  SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
+import { TFunction } from "i18next";
 import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
-import * as InputUtils from "./InputUtils";
-import "./SmartUiComponent.less";

 /**
 * Generic UX renderer
@@ -138,12 +138,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    );
  }

-  private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderTextInput(input: StringInput, labelId: string): JSX.Element {
    const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
    const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
    return (
-      <Stack>
-        {labelElement}
+      <div className="stringInputContainer">
        <TextField
          id={`${input.dataFieldName}-textField-input`}
          aria-labelledby={labelId}
@@ -156,32 +155,25 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
            root: { width: 400 },
          }}
        />
-      </Stack>
+      </div>
    );
  }

-  private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
    const dataFieldName = input.dataFieldName;
    const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
    if (!description) {
-      if (!input.isDynamicDescription) {
-        return this.renderError("Description is not provided.");
-      }
-      // If input is a dynamic description and description is not available, empty element is rendered
-      return <></>;
+      return this.renderError("Description is not provided.");
    }
    const descriptionElement = (
-      <Stack>
-        {labelElement}
-        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
-          {this.props.getTranslation(description.textTKey)}{" "}
-          {description.link && (
-            <Link target="_blank" href={description.link.href}>
-              {this.props.getTranslation(description.link.textTKey)}
-            </Link>
-          )}
-        </Text>
-      </Stack>
+      <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
+        {this.props.getTranslation(description.textTKey)}{" "}
+        {description.link && (
+          <Link target="_blank" href={description.link.href}>
+            {this.props.getTranslation(description.link.textTKey)}
+          </Link>
+        )}
+      </Text>
    );

    if (description.type === DescriptionType.Text) {
@@ -235,7 +227,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    return undefined;
  };

-  private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
    const { labelTKey, min, max, dataFieldName, step } = input;
    const props = {
      min: min,
@@ -248,72 +240,61 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
    if (input.uiType === NumberUiType.Spinner) {
      return (
-        <Stack>
-          {labelElement}
-          <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
-            <SpinButton
-              {...props}
-              id={`${input.dataFieldName}-spinner-input`}
-              value={value?.toString()}
-              onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
-              onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
-              onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
-              labelPosition={Position.top}
-              aria-labelledby={labelId}
-              disabled={disabled}
-            />
-            {this.state.errors.has(dataFieldName) && (
-              <MessageBar messageBarType={MessageBarType.error}>
-                Error: {this.state.errors.get(dataFieldName)}
-              </MessageBar>
-            )}
-          </Stack>
+        <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
+          <SpinButton
+            {...props}
+            id={`${input.dataFieldName}-spinner-input`}
+            value={value?.toString()}
+            onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
+            onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
+            onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
+            labelPosition={Position.top}
+            aria-labelledby={labelId}
+            disabled={disabled}
+          />
+          {this.state.errors.has(dataFieldName) && (
+            <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
+          )}
        </Stack>
      );
    } else if (input.uiType === NumberUiType.Slider) {
      return (
-        <Stack>
-          {labelElement}
-          <div id={`${input.dataFieldName}-slider-input`}>
-            <Slider
-              {...props}
-              value={value}
-              disabled={disabled}
-              onChange={(newValue) => this.props.onInputChange(input, newValue)}
-              styles={{
-                root: { width: 400 },
-                valueLabel: SmartUiComponent.labelStyle,
-              }}
-            />
-          </div>
-        </Stack>
+        <div id={`${input.dataFieldName}-slider-input`}>
+          <Slider
+            {...props}
+            value={value}
+            disabled={disabled}
+            onChange={(newValue) => this.props.onInputChange(input, newValue)}
+            styles={{
+              root: { width: 400 },
+              valueLabel: SmartUiComponent.labelStyle,
+            }}
+          />
+        </div>
      );
    } else {
      return <>Unsupported number UI type {input.uiType}</>;
    }
  }

-  private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
    const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
    const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
    return (
-      <Stack>
-        {labelElement}
-        <Toggle
-          id={`${input.dataFieldName}-toggle-input`}
-          aria-labelledby={labelId}
-          checked={value || false}
-          onText={this.props.getTranslation(input.trueLabelTKey)}
-          offText={this.props.getTranslation(input.falseLabelTKey)}
-          disabled={disabled}
-          onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
-          styles={{ root: { width: 400 } }}
-        />
-      </Stack>
+      <Toggle
+        id={`${input.dataFieldName}-toggle-input`}
+        aria-labelledby={labelId}
+        checked={value || false}
+        onText={this.props.getTranslation(input.trueLabelTKey)}
+        offText={this.props.getTranslation(input.falseLabelTKey)}
+        disabled={disabled}
+        onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
+        styles={{ root: { width: 400 } }}
+      />
    );
  }

-  private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
    const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
    const value = this.props.currentValues.get(dataFieldName)?.value as string;
    const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
@@ -322,26 +303,22 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
      selectedKey = "";
    }
    return (
-      <Stack>
-        {labelElement}
-        <Dropdown
-          id={`${input.dataFieldName}-dropdown-input`}
-          aria-labelledby={labelId}
-          selectedKey={selectedKey}
-          onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
-          placeholder={this.props.getTranslation(placeholderTKey)}
-          disabled={disabled}
-          // Removed dropdownWidth="auto" as dropdown accept only number
-          options={choices.map((c) => ({
-            key: c.key,
-            text: this.props.getTranslation(c.labelTKey),
-          }))}
-          styles={{
-            root: { width: 400 },
-            dropdown: SmartUiComponent.labelStyle,
-          }}
-        />
-      </Stack>
+      <Dropdown
+        id={`${input.dataFieldName}-dropdown-input`}
+        aria-labelledby={labelId}
+        selectedKey={selectedKey}
+        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
+        placeholder={this.props.getTranslation(placeholderTKey)}
+        disabled={disabled}
+        options={choices.map((c) => ({
+          key: c.key,
+          text: this.props.getTranslation(c.label),
+        }))}
+        styles={{
+          root: { width: 400 },
+          dropdown: SmartUiComponent.labelStyle,
+        }}
+      />
    );
  }

@@ -349,7 +326,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
  }

-  private renderElement(input: AnyDisplay, info: Info): JSX.Element {
+  private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
    if (input.errorMessage) {
      return this.renderError(input.errorMessage);
    }
@@ -358,31 +335,34 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
      return <></>;
    }
    const labelId = `${input.dataFieldName}-label`;
-    const labelElement: JSX.Element = input.labelTKey && (
-      <Label id={labelId}>
-        <ToolTipLabelComponent
-          label={this.props.getTranslation(input.labelTKey)}
-          toolTipElement={this.renderInfo(info)}
-        />
-      </Label>
+    return (
+      <Stack>
+        {input.labelTKey && (
+          <Label id={labelId}>
+            <ToolTipLabelComponent
+              label={this.props.getTranslation(input.labelTKey)}
+              toolTipElement={this.renderInfo(info)}
+            />
+          </Label>
+        )}
+        {this.renderDisplay(input, labelId)}
+      </Stack>
    );
-
-    return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
  }

-  private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
    switch (input.type) {
      case "string":
        if ("description" in input || "isDynamicDescription" in input) {
-          return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
+          return this.renderDescription(input as DescriptionDisplay, labelId);
        }
-        return this.renderTextInput(input as StringInput, labelId, labelElement);
+        return this.renderTextInput(input as StringInput, labelId);
      case "number":
-        return this.renderNumberInput(input as NumberInput, labelId, labelElement);
+        return this.renderNumberInput(input as NumberInput, labelId);
      case "boolean":
-        return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
+        return this.renderBooleanInput(input as BooleanInput, labelId);
      case "object":
-        return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
+        return this.renderChoiceInput(input as ChoiceInput, labelId);
      default:
        throw new Error(`Unknown input type: ${input.type}`);
    }
@@ -393,7 +373,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma

    return (
      <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
+        <Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
        {node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
      </Stack>
    );
--- a/src/Explorer/Controls/SmartUi/snapshots/SmartUiComponent.test.tsx.snap
+++ b/src/Explorer/Controls/SmartUi/snapshots/SmartUiComponent.test.tsx.snap
@@ -23,21 +23,19 @@ exports[`SmartUiComponent disable all inputs 1`] = `
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <Text
-              aria-labelledby="description-label"
-              id="description-text-display"
+          <Text
+            aria-labelledby="description-label"
+            id="description-text-display"
+          >
+            this is an example description text.
+             
+            <StyledLinkBase
+              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+              target="_blank"
            >
-              this is an example description text.
-               
-              <StyledLinkBase
-                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-                target="_blank"
-              >
-                Click here for more information.
-              </StyledLinkBase>
-            </Text>
-          </Stack>
+              Click here for more information.
+            </StyledLinkBase>
+          </Text>
        </Stack>
      </StackItem>
    </Stack>
@@ -55,53 +53,51 @@ exports[`SmartUiComponent disable all inputs 1`] = `
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (input)"
-              />
-            </StyledLabelBase>
-            <Stack
-              styles={
+          <StyledLabelBase
+            id="throughput-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (input)"
+            />
+          </StyledLabelBase>
+          <Stack
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+            tokens={
+              Object {
+                "childrenGap": 2,
+              }
+            }
+          >
+            <CustomizedSpinButton
+              aria-labelledby="throughput-label"
+              ariaLabel="Throughput (input)"
+              decrementButtonIcon={
                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
+                  "iconName": "ChevronDownSmall",
                }
              }
-              tokens={
+              disabled={true}
+              id="throughput-spinner-input"
+              incrementButtonIcon={
                Object {
-                  "childrenGap": 2,
+                  "iconName": "ChevronUpSmall",
                }
              }
-            >
-              <CustomizedSpinButton
-                aria-labelledby="throughput-label"
-                ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
-                disabled={true}
-                id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
-                labelPosition={0}
-                max={500}
-                min={400}
-                onDecrement={[Function]}
-                onIncrement={[Function]}
-                onValidate={[Function]}
-                step={10}
-              />
-            </Stack>
+              label=""
+              labelPosition={0}
+              max={500}
+              min={400}
+              onDecrement={[Function]}
+              onIncrement={[Function]}
+              onValidate={[Function]}
+              step={10}
+            />
          </Stack>
        </Stack>
      </StackItem>
@@ -120,39 +116,37 @@ exports[`SmartUiComponent disable all inputs 1`] = `
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput2-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (Slider)"
-              />
-            </StyledLabelBase>
-            <div
-              id="throughput2-slider-input"
-            >
-              <StyledSliderBase
-                ariaLabel="Throughput (Slider)"
-                disabled={true}
-                max={500}
-                min={400}
-                onChange={[Function]}
-                step={10}
-                styles={
-                  Object {
-                    "root": Object {
-                      "width": 400,
-                    },
-                    "valueLabel": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                    },
-                  }
+          <StyledLabelBase
+            id="throughput2-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (Slider)"
+            />
+          </StyledLabelBase>
+          <div
+            id="throughput2-slider-input"
+          >
+            <StyledSliderBase
+              ariaLabel="Throughput (Slider)"
+              disabled={true}
+              max={500}
+              min={400}
+              onChange={[Function]}
+              step={10}
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                  "valueLabel": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
                }
-              />
-            </div>
-          </Stack>
+              }
+            />
+          </div>
        </Stack>
      </StackItem>
    </Stack>
@@ -191,14 +185,16 @@ exports[`SmartUiComponent disable all inputs 1`] = `
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="containerId-label"
-            >
-              <ToolTipLabelComponent
-                label="Container id"
-              />
-            </StyledLabelBase>
+          <StyledLabelBase
+            id="containerId-label"
+          >
+            <ToolTipLabelComponent
+              label="Container id"
+            />
+          </StyledLabelBase>
+          <div
+            className="stringInputContainer"
+          >
            <StyledTextFieldBase
              aria-labelledby="containerId-label"
              disabled={true}
@@ -214,7 +210,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
              type="text"
              value=""
            />
-          </Stack>
+          </div>
        </Stack>
      </StackItem>
    </Stack>
@@ -232,31 +228,29 @@ exports[`SmartUiComponent disable all inputs 1`] = `
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="analyticalStore-label"
-            >
-              <ToolTipLabelComponent
-                label="Analytical Store"
-              />
-            </StyledLabelBase>
-            <StyledToggleBase
-              aria-labelledby="analyticalStore-label"
-              checked={false}
-              disabled={true}
-              id="analyticalStore-toggle-input"
-              offText="Disabled"
-              onChange={[Function]}
-              onText="Enabled"
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="analyticalStore-label"
+          >
+            <ToolTipLabelComponent
+              label="Analytical Store"
            />
-          </Stack>
+          </StyledLabelBase>
+          <StyledToggleBase
+            aria-labelledby="analyticalStore-label"
+            checked={false}
+            disabled={true}
+            id="analyticalStore-toggle-input"
+            offText="Disabled"
+            onChange={[Function]}
+            onText="Enabled"
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
        </Stack>
      </StackItem>
    </Stack>
@@ -274,50 +268,48 @@ exports[`SmartUiComponent disable all inputs 1`] = `
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="database-label"
-            >
-              <ToolTipLabelComponent
-                label="Database"
-              />
-            </StyledLabelBase>
-            <StyledWithResponsiveMode
-              aria-labelledby="database-label"
-              disabled={true}
-              id="database-dropdown-input"
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": "db1",
-                    "text": "Database 1",
-                  },
-                  Object {
-                    "key": "db2",
-                    "text": "Database 2",
-                  },
-                  Object {
-                    "key": "db3",
-                    "text": "Database 3",
-                  },
-                ]
-              }
-              selectedKey="db2"
-              styles={
-                Object {
-                  "dropdown": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="database-label"
+          >
+            <ToolTipLabelComponent
+              label="Database"
            />
-          </Stack>
+          </StyledLabelBase>
+          <StyledWithResponsiveMode
+            aria-labelledby="database-label"
+            disabled={true}
+            id="database-dropdown-input"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "key": "db1",
+                  "text": "Database 1",
+                },
+                Object {
+                  "key": "db2",
+                  "text": "Database 2",
+                },
+                Object {
+                  "key": "db3",
+                  "text": "Database 3",
+                },
+              ]
+            }
+            selectedKey="db2"
+            styles={
+              Object {
+                "dropdown": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                },
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
        </Stack>
      </StackItem>
    </Stack>
@@ -348,21 +340,19 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <Text
-              aria-labelledby="description-label"
-              id="description-text-display"
+          <Text
+            aria-labelledby="description-label"
+            id="description-text-display"
+          >
+            this is an example description text.
+             
+            <StyledLinkBase
+              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+              target="_blank"
            >
-              this is an example description text.
-               
-              <StyledLinkBase
-                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-                target="_blank"
-              >
-                Click here for more information.
-              </StyledLinkBase>
-            </Text>
-          </Stack>
+              Click here for more information.
+            </StyledLinkBase>
+          </Text>
        </Stack>
      </StackItem>
    </Stack>
@@ -380,53 +370,51 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (input)"
-              />
-            </StyledLabelBase>
-            <Stack
-              styles={
+          <StyledLabelBase
+            id="throughput-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (input)"
+            />
+          </StyledLabelBase>
+          <Stack
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+            tokens={
+              Object {
+                "childrenGap": 2,
+              }
+            }
+          >
+            <CustomizedSpinButton
+              aria-labelledby="throughput-label"
+              ariaLabel="Throughput (input)"
+              decrementButtonIcon={
                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
+                  "iconName": "ChevronDownSmall",
                }
              }
-              tokens={
+              disabled={false}
+              id="throughput-spinner-input"
+              incrementButtonIcon={
                Object {
-                  "childrenGap": 2,
+                  "iconName": "ChevronUpSmall",
                }
              }
-            >
-              <CustomizedSpinButton
-                aria-labelledby="throughput-label"
-                ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
-                disabled={false}
-                id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
-                labelPosition={0}
-                max={500}
-                min={400}
-                onDecrement={[Function]}
-                onIncrement={[Function]}
-                onValidate={[Function]}
-                step={10}
-              />
-            </Stack>
+              label=""
+              labelPosition={0}
+              max={500}
+              min={400}
+              onDecrement={[Function]}
+              onIncrement={[Function]}
+              onValidate={[Function]}
+              step={10}
+            />
          </Stack>
        </Stack>
      </StackItem>
@@ -445,38 +433,36 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput2-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (Slider)"
-              />
-            </StyledLabelBase>
-            <div
-              id="throughput2-slider-input"
-            >
-              <StyledSliderBase
-                ariaLabel="Throughput (Slider)"
-                max={500}
-                min={400}
-                onChange={[Function]}
-                step={10}
-                styles={
-                  Object {
-                    "root": Object {
-                      "width": 400,
-                    },
-                    "valueLabel": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                    },
-                  }
+          <StyledLabelBase
+            id="throughput2-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (Slider)"
+            />
+          </StyledLabelBase>
+          <div
+            id="throughput2-slider-input"
+          >
+            <StyledSliderBase
+              ariaLabel="Throughput (Slider)"
+              max={500}
+              min={400}
+              onChange={[Function]}
+              step={10}
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                  "valueLabel": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
                }
-              />
-            </div>
-          </Stack>
+              }
+            />
+          </div>
        </Stack>
      </StackItem>
    </Stack>
@@ -515,14 +501,16 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="containerId-label"
-            >
-              <ToolTipLabelComponent
-                label="Container id"
-              />
-            </StyledLabelBase>
+          <StyledLabelBase
+            id="containerId-label"
+          >
+            <ToolTipLabelComponent
+              label="Container id"
+            />
+          </StyledLabelBase>
+          <div
+            className="stringInputContainer"
+          >
            <StyledTextFieldBase
              aria-labelledby="containerId-label"
              id="containerId-textField-input"
@@ -537,7 +525,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
              type="text"
              value=""
            />
-          </Stack>
+          </div>
        </Stack>
      </StackItem>
    </Stack>
@@ -555,30 +543,28 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="analyticalStore-label"
-            >
-              <ToolTipLabelComponent
-                label="Analytical Store"
-              />
-            </StyledLabelBase>
-            <StyledToggleBase
-              aria-labelledby="analyticalStore-label"
-              checked={false}
-              id="analyticalStore-toggle-input"
-              offText="Disabled"
-              onChange={[Function]}
-              onText="Enabled"
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="analyticalStore-label"
+          >
+            <ToolTipLabelComponent
+              label="Analytical Store"
            />
-          </Stack>
+          </StyledLabelBase>
+          <StyledToggleBase
+            aria-labelledby="analyticalStore-label"
+            checked={false}
+            id="analyticalStore-toggle-input"
+            offText="Disabled"
+            onChange={[Function]}
+            onText="Enabled"
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
        </Stack>
      </StackItem>
    </Stack>
@@ -596,49 +582,47 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
    >
      <StackItem>
        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="database-label"
-            >
-              <ToolTipLabelComponent
-                label="Database"
-              />
-            </StyledLabelBase>
-            <StyledWithResponsiveMode
-              aria-labelledby="database-label"
-              id="database-dropdown-input"
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": "db1",
-                    "text": "Database 1",
-                  },
-                  Object {
-                    "key": "db2",
-                    "text": "Database 2",
-                  },
-                  Object {
-                    "key": "db3",
-                    "text": "Database 3",
-                  },
-                ]
-              }
-              selectedKey="db2"
-              styles={
-                Object {
-                  "dropdown": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="database-label"
+          >
+            <ToolTipLabelComponent
+              label="Database"
            />
-          </Stack>
+          </StyledLabelBase>
+          <StyledWithResponsiveMode
+            aria-labelledby="database-label"
+            id="database-dropdown-input"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "key": "db1",
+                  "text": "Database 1",
+                },
+                Object {
+                  "key": "db2",
+                  "text": "Database 2",
+                },
+                Object {
+                  "key": "db3",
+                  "text": "Database 3",
+                },
+              ]
+            }
+            selectedKey="db2"
+            styles={
+              Object {
+                "dropdown": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                },
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
        </Stack>
      </StackItem>
    </Stack>
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -1,20 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.throughputInputContainer {
-  .throughputInputRadioBtn {
-    margin: 0;
-  }
-}
-
-.throughputInputRadioBtnLabel {
-  font-size: @mediumFontSize;
-  padding: 0 @LargeSpace 0 @SmallSpace;
-}
-
-.throughputInputSpacing {
-  margin-bottom: @SmallSpace;
-
-  & > * {
-    margin-bottom: @SmallSpace;
-  }
-}
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -1,302 +0,0 @@
-import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
-import React from "react";
-import * as Constants from "../../../Common/Constants";
-import * as SharedConstants from "../../../Shared/Constants";
-import { userContext } from "../../../UserContext";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import * as PricingUtils from "../../../Utils/PricingUtils";
-
-export interface ThroughputInputProps {
-  isDatabase: boolean;
-  showFreeTierExceedThroughputTooltip: boolean;
-  setThroughputValue: (throughput: number) => void;
-  setIsAutoscale: (isAutoscale: boolean) => void;
-  onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
-}
-
-export interface ThroughputInputState {
-  isAutoscaleSelected: boolean;
-  throughput: number;
-  isCostAcknowledged: boolean;
-}
-
-export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
-  constructor(props: ThroughputInputProps) {
-    super(props);
-
-    this.state = {
-      isAutoscaleSelected: true,
-      throughput: AutoPilotUtils.minAutoPilotThroughput,
-      isCostAcknowledged: false,
-    };
-
-    this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
-    this.props.setIsAutoscale(true);
-  }
-
-  render(): JSX.Element {
-    return (
-      <div className="throughputInputContainer throughputInputSpacing">
-        <Stack horizontal>
-          <span className="mandatoryStar">*&nbsp;</span>
-          <Text variant="small" style={{ lineHeight: "20px" }}>
-            {this.getThroughputLabelText()}
-          </Text>
-          <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
-            <Icon iconName="InfoSolid" className="panelInfoIcon" />
-          </TooltipHost>
-        </Stack>
-
-        <Stack horizontal verticalAlign="center">
-          <input
-            className="throughputInputRadioBtn"
-            aria-label="Autoscale mode"
-            checked={this.state.isAutoscaleSelected}
-            type="radio"
-            role="radio"
-            tabIndex={0}
-            onChange={this.onAutoscaleRadioBtnChange.bind(this)}
-          />
-          <span className="throughputInputRadioBtnLabel">Autoscale</span>
-
-          <input
-            className="throughputInputRadioBtn"
-            aria-label="Manual mode"
-            checked={!this.state.isAutoscaleSelected}
-            type="radio"
-            role="radio"
-            tabIndex={0}
-            onChange={this.onManualRadioBtnChange.bind(this)}
-          />
-          <span className="throughputInputRadioBtnLabel">Manual</span>
-        </Stack>
-
-        {this.state.isAutoscaleSelected && (
-          <Stack className="throughputInputSpacing">
-            <Text variant="small">
-              Provision maximum RU/s required by this resource. Estimate your required RU/s with&nbsp;
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-                capacity calculator
-              </Link>
-              .
-            </Text>
-
-            <Stack horizontal>
-              <Text variant="small" style={{ lineHeight: "20px" }}>
-                Max RU/s
-              </Text>
-              <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
-                <Icon iconName="InfoSolid" className="panelInfoIcon" />
-              </TooltipHost>
-            </Stack>
-
-            <TextField
-              type="number"
-              styles={{
-                fieldGroup: { width: 300, height: 27 },
-                field: { fontSize: 12 },
-              }}
-              onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
-              step={AutoPilotUtils.autoPilotIncrementStep}
-              min={AutoPilotUtils.minAutoPilotThroughput}
-              value={this.state.throughput.toString()}
-              aria-label="Max request units per second"
-              required={true}
-            />
-
-            <Text variant="small">
-              Your {this.props.isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
-              <b>
-                {AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
-                {this.state.throughput} RU/s
-              </b>{" "}
-              based on usage.
-            </Text>
-          </Stack>
-        )}
-
-        {!this.state.isAutoscaleSelected && (
-          <Stack className="throughputInputSpacing">
-            <Text variant="small">
-              Estimate your required RU/s with&nbsp;
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-                capacity calculator
-              </Link>
-              .
-            </Text>
-
-            <TooltipHost
-              directionalHint={DirectionalHint.topLeftEdge}
-              content={
-                this.props.showFreeTierExceedThroughputTooltip &&
-                this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
-                  ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
-                  : undefined
-              }
-            >
-              <TextField
-                type="number"
-                styles={{
-                  fieldGroup: { width: 300, height: 27 },
-                  field: { fontSize: 12 },
-                }}
-                onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
-                step={100}
-                min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
-                max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
-                value={this.state.throughput.toString()}
-                aria-label="Max request units per second"
-                required={true}
-              />
-            </TooltipHost>
-          </Stack>
-        )}
-
-        <CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
-
-        {this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
-          <Stack horizontal verticalAlign="start">
-            <Checkbox
-              checked={this.state.isCostAcknowledged}
-              styles={{
-                checkbox: { width: 12, height: 12 },
-                label: { padding: 0, margin: "4px 4px 0 0" },
-              }}
-              onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
-                this.setState({ isCostAcknowledged: isChecked });
-                this.props.onCostAcknowledgeChange(isChecked);
-              }}
-            />
-            <Text variant="small" style={{ lineHeight: "20px" }}>
-              {this.getCostAcknowledgeText()}
-            </Text>
-          </Stack>
-        )}
-      </div>
-    );
-  }
-
-  private getThroughputLabelText(): string {
-    if (this.state.isAutoscaleSelected) {
-      return AutoPilotUtils.getAutoPilotHeaderText();
-    }
-
-    const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
-    const maxRU: string = userContext.isTryCosmosDBSubscription
-      ? Constants.TryCosmosExperience.maxRU.toLocaleString()
-      : "unlimited";
-    return this.state.isAutoscaleSelected
-      ? AutoPilotUtils.getAutoPilotHeaderText()
-      : `Throughput (${minRU} - ${maxRU} RU/s)`;
-  }
-
-  private onThroughputValueChange(newInput: string): void {
-    const newThroughput = parseInt(newInput);
-    this.setState({ throughput: newThroughput });
-    this.props.setThroughputValue(newThroughput);
-  }
-
-  private getAutoScaleTooltip(): string {
-    return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
-      this.state.throughput
-    )} GB of data stored, the max
-    RU/s will be automatically upgraded based on the new storage value.`;
-  }
-
-  private getCostAcknowledgeText(): string {
-    const databaseAccount = userContext.databaseAccount;
-    if (!databaseAccount || !databaseAccount.properties) {
-      return "";
-    }
-
-    const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
-    const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
-
-    return PricingUtils.getEstimatedSpendAcknowledgeString(
-      this.state.throughput,
-      userContext.portalEnv,
-      numberOfRegions,
-      multimasterEnabled,
-      this.state.isAutoscaleSelected
-    );
-  }
-
-  private onAutoscaleRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && !this.state.isAutoscaleSelected) {
-      this.setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
-      this.props.setIsAutoscale(true);
-    }
-  }
-
-  private onManualRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && this.state.isAutoscaleSelected) {
-      this.setState({
-        isAutoscaleSelected: false,
-        throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
-      });
-      this.props.setIsAutoscale(false);
-      this.props.setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
-    }
-  }
-}
-
-interface CostEstimateTextProps {
-  requestUnits: number;
-  isAutoscale: boolean;
-}
-
-const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
-  const { requestUnits, isAutoscale } = props;
-  const databaseAccount = userContext.databaseAccount;
-  if (!databaseAccount || !databaseAccount.properties) {
-    return <></>;
-  }
-
-  const serverId: string = userContext.portalEnv;
-  const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
-  const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
-  const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
-    serverId,
-    requestUnits,
-    numberOfRegions,
-    multimasterEnabled,
-    isAutoscale,
-  });
-  const dailyPrice: number = hourlyPrice * 24;
-  const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
-  const currency: string = PricingUtils.getPriceCurrency(serverId);
-  const currencySign: string = PricingUtils.getCurrencySign(serverId);
-  const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale
-    ? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
-    : PricingUtils.getPricePerRu(serverId) * multiplier;
-
-  if (isAutoscale) {
-    return (
-      <Text variant="small">
-        Estimated monthly cost ({currency}):{" "}
-        <b>
-          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
-          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
-        </b>
-        ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
-        RU/s, {currencySign + pricePerRu}/RU)
-      </Text>
-    );
-  }
-
-  return (
-    <Text variant="small">
-      Cost ({currency}):{" "}
-      <b>
-        {currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
-        {currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
-        {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      </b>
-      ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
-      {currencySign + pricePerRu}/RU)
-      <br />
-      <em>{PricingUtils.estimatedCostDisclaimer}</em>
-    </Text>
-  );
-};
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -2,17 +2,17 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
 jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
-import Q from "q";
-import { createDocument } from "../../Common/dataAccess/createDocument";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
+import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import Explorer from "../Explorer";
+import { updateUserContext } from "../../UserContext";

 describe("ContainerSampleGenerator", () => {
  const createExplorerStub = (database: ViewModels.Database): Explorer => {
    const explorerStub = {} as Explorer;
-    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
+    explorerStub.nonSystemDatabases = ko.computed(() => [database]);
    explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
    explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
    explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => false);
--- a/src/Explorer/DataSamples/DataSamplesUtil.test.ts
+++ b/src/Explorer/DataSamples/DataSamplesUtil.test.ts
@@ -1,9 +1,9 @@
-import * as ko from "knockout";
-import * as sinon from "sinon";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import Explorer from "../Explorer";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { DataSamplesUtil } from "./DataSamplesUtil";
+import * as sinon from "sinon";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as ko from "knockout";
+import Explorer from "../Explorer";
+import { Database, Collection } from "../../Contracts/ViewModels";

 describe("DataSampleUtils", () => {
  const sampleCollectionId = "sampleCollectionId";
@@ -16,7 +16,7 @@ describe("DataSampleUtils", () => {
      collections: ko.observableArray<Collection>([collection]),
    } as Database;
    const explorer = {} as Explorer;
-    explorer.databases = ko.observableArray<Database>([database]);
+    explorer.nonSystemDatabases = ko.computed(() => [database]);
    explorer.showOkModalDialog = () => {};
    const dataSamplesUtil = new DataSamplesUtil(explorer);

--- a/src/Explorer/DataSamples/DataSamplesUtil.ts
+++ b/src/Explorer/DataSamples/DataSamplesUtil.ts
@@ -1,8 +1,8 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import Explorer from "../Explorer";

 export class DataSamplesUtil {
  private static readonly DialogTitle = "Create Sample Container";
@@ -17,7 +17,7 @@ export class DataSamplesUtil {

    const databaseName = generator.getDatabaseId();
    const containerName = generator.getCollectionId();
-    if (this.hasContainer(databaseName, containerName, this.container.databases())) {
+    if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
      const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
      this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
--- a/src/Explorer/Explorer.test.tsx
+++ b/src/Explorer/Explorer.test.tsx
@@ -1,43 +0,0 @@
-jest.mock("./../Common/dataAccess/deleteDatabase");
-jest.mock("./../Shared/Telemetry/TelemetryProcessor");
-import * as ko from "knockout";
-import { deleteDatabase } from "./../Common/dataAccess/deleteDatabase";
-import * as ViewModels from "./../Contracts/ViewModels";
-import Explorer from "./Explorer";
-
-describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
-  let explorer: Explorer;
-  beforeAll(() => {
-    (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-  });
-
-  beforeEach(() => {
-    explorer = new Explorer();
-  });
-
-  it("should be true if only 1 database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastDatabase()).toBe(true);
-  });
-
-  it("should be false if only 2 databases", () => {
-    const database = {} as ViewModels.Database;
-    const database2 = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-    expect(explorer.isLastDatabase()).toBe(false);
-  });
-
-  it("should be false if not last empty database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(false);
-  });
-
-  it("should be true if last non empty database", () => {
-    const database = {} as ViewModels.Database;
-    database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(true);
-  });
-});
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -19,12 +19,13 @@ import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter"
 import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
+import { SubscriptionType } from "../Contracts/SubscriptionType";
 import * as ViewModels from "../Contracts/ViewModels";
 import { IGalleryItem } from "../Juno/JunoClient";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
 import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { trackEvent } from "../Shared/appInsights";
+import { appInsights } from "../Shared/appInsights";
 import * as SharedConstants from "../Shared/Constants";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
@@ -43,31 +44,32 @@ import { DialogProps, TextFieldProps } from "./Controls/Dialog";
 import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import * as FileSystemUtil from "./Notebook/FileSystemUtil";
+import { FileSystemUtil } from "./Notebook/FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
-import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
-import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
+import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
-import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
+import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
+import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPanel } from "./Panes/LoadQueryPanel";
+import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
-import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
+import { SaveQueryPane } from "./Panes/SaveQueryPane";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
 import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
 import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
+import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
+import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
@@ -93,10 +95,13 @@ export interface ExplorerParams {
  closeSidePanel: () => void;
  closeDialog: () => void;
  openDialog: (props: DialogProps) => void;
-  tabsManager: TabsManager;
 }

 export default class Explorer {
+  public flight: ko.Observable<string> = ko.observable<string>(
+    SharedConstants.CollectionCreation.DefaultAddCollectionDefaultFlight
+  );
+
  public addCollectionText: ko.Observable<string>;
  public addDatabaseText: ko.Observable<string>;
  public collectionTitle: ko.Observable<string>;
@@ -104,6 +109,7 @@ export default class Explorer {
  public deleteDatabaseText: ko.Observable<string>;
  public collectionTreeNodeAltText: ko.Observable<string>;
  public refreshTreeTitle: ko.Observable<string>;
+  public hasWriteAccess: ko.Observable<boolean>;
  public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;

  /**
@@ -112,6 +118,11 @@ export default class Explorer {
   * */
  public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
  public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
+  /**
+   * @deprecated
+   * Use userContext.subscriptionType instead
+   * */
+  public subscriptionType: ko.Observable<SubscriptionType>;
  /**
   * @deprecated
   * Use userContext.apiType instead
@@ -152,6 +163,8 @@ export default class Explorer {
  public isAccountReady: ko.Observable<boolean>;
  public canSaveQueries: ko.Computed<boolean>;
  public features: ko.Observable<any>;
+  public serverId: ko.Observable<string>;
+  public isTryCosmosDBSubscription: ko.Observable<boolean>;
  public queriesClient: QueriesClient;
  public tableDataClient: TableDataClient;
  public splitter: Splitter;
@@ -168,10 +181,16 @@ export default class Explorer {

  // Resource Tree
  public databases: ko.ObservableArray<ViewModels.Database>;
+  public nonSystemDatabases: ko.Computed<ViewModels.Database[]>;
  public selectedDatabaseId: ko.Computed<string>;
  public selectedCollectionId: ko.Computed<string>;
  public isLeftPaneExpanded: ko.Observable<boolean>;
  public selectedNode: ko.Observable<ViewModels.TreeNode>;
+  /**
+   * @deprecated
+   * Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
+   * */
+  public isRefreshingExplorer: ko.Observable<boolean>;
  private resourceTree: ResourceTreeAdapter;

  // Resource Token
@@ -179,8 +198,9 @@ export default class Explorer {
  public resourceTokenCollectionId: ko.Observable<string>;
  public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
  public resourceTokenPartitionKey: ko.Observable<string>;
+  public isAuthWithResourceToken: ko.Observable<boolean>;
  public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
-  public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
+  private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;

  // Tabs
  public isTabsContentExpanded: ko.Observable<boolean>;
@@ -192,12 +212,22 @@ export default class Explorer {
  public addDatabasePane: AddDatabasePane;
  public addCollectionPane: AddCollectionPane;
  public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
+  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
  public graphStylingPane: GraphStylingPane;
  public addTableEntityPane: AddTableEntityPane;
  public editTableEntityPane: EditTableEntityPane;
+  public tableColumnOptionsPane: TableColumnOptionsPane;
  public querySelectPane: QuerySelectPane;
  public newVertexPane: NewVertexPane;
  public cassandraAddCollectionPane: CassandraAddCollectionPane;
+  public settingsPane: SettingsPane;
+  public executeSprocParamsPane: ExecuteSprocParamsPane;
+  public uploadItemsPane: UploadItemsPane;
+  public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
+  public loadQueryPane: LoadQueryPane;
+  public saveQueryPane: ContextualPaneBase;
+  public browseQueriesPane: BrowseQueriesPane;
+  public uploadFilePane: UploadFilePane;
  public stringInputPane: StringInputPane;
  public setupNotebooksPane: SetupNotebooksPane;
  public gitHubReposPane: ContextualPaneBase;
@@ -234,6 +264,7 @@ export default class Explorer {
  public closeDialog: ExplorerParams["closeDialog"];

  private _panes: ContextualPaneBase[] = [];
+  private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false;
  private _isInitializingNotebooks: boolean;
  private notebookBasePath: ko.Observable<string>;
  private _arcadiaManager: ArcadiaResourceManager;
@@ -261,6 +292,7 @@ export default class Explorer {
    });
    this.addCollectionText = ko.observable<string>("New Collection");
    this.addDatabaseText = ko.observable<string>("New Database");
+    this.hasWriteAccess = ko.observable<boolean>(true);
    this.collectionTitle = ko.observable<string>("Collections");
    this.collectionTreeNodeAltText = ko.observable<string>("Collection");
    this.deleteCollectionText = ko.observable<string>("Delete Collection");
@@ -268,6 +300,23 @@ export default class Explorer {
    this.refreshTreeTitle = ko.observable<string>("Refresh collections");

    this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
+    this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
+    let firstInitialization = true;
+    this.isRefreshingExplorer = ko.observable<boolean>(true);
+    this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
+      if (!isRefreshing && firstInitialization) {
+        // set focus on first element
+        firstInitialization = false;
+        try {
+          document.getElementById("createNewContainerCommandButton").parentElement.parentElement.focus();
+        } catch (e) {
+          Logger.logWarning(
+            "getElementById('createNewContainerCommandButton') failed to find element",
+            "Explorer/this.isRefreshingExplorer.subscribe"
+          );
+        }
+      }
+    });
    this.isAccountReady = ko.observable<boolean>(false);
    this._isInitializingNotebooks = false;
    this.arcadiaToken = ko.observable<string>();
@@ -288,9 +337,7 @@ export default class Explorer {
    this.isSynapseLinkUpdating = ko.observable<boolean>(false);
    this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
      if (isAccountReady) {
-        userContext.authType === AuthType.ResourceToken
-          ? this.refreshDatabaseForResourceToken()
-          : this.refreshAllDatabases(true);
+        this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
        RouteHandler.getInstance().initHandler();
        this.notebookWorkspaceManager = new NotebookWorkspaceManager();
        this.arcadiaWorkspaces = ko.observableArray();
@@ -300,7 +347,11 @@ export default class Explorer {
        );
        Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
          async () => {
-            this.isNotebookEnabled(false);
+            this.isNotebookEnabled(
+              !this.isAuthWithResourceToken() &&
+                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
+            );

            TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
              isNotebookEnabled: this.isNotebookEnabled(),
@@ -321,10 +372,10 @@ export default class Explorer {
                this.isSparkEnabledForAccount() &&
                this.arcadiaWorkspaces() &&
                this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
+                this.isFeatureEnabled(Constants.Features.enableSpark)
            );
            if (this.isSparkEnabled()) {
-              trackEvent(
+              appInsights.trackEvent(
                { name: "LoadedWithSparkEnabled" },
                {
                  subscriptionId: userContext.subscriptionId,
@@ -345,20 +396,26 @@ export default class Explorer {
    });
    this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();

+    this.features = ko.observable();
+    this.serverId = ko.observable<string>();
    this.queriesClient = new QueriesClient(this);
+    this.isTryCosmosDBSubscription = ko.observable<boolean>(false);

    this.resourceTokenDatabaseId = ko.observable<string>();
    this.resourceTokenCollectionId = ko.observable<string>();
    this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
    this.resourceTokenPartitionKey = ko.observable<string>();
+    this.isAuthWithResourceToken = ko.observable<boolean>(false);
    this.isGitHubPaneEnabled = ko.observable<boolean>(false);
    this.isMongoIndexingEnabled = ko.observable<boolean>(false);
    this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
    this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);

-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
+    this.canExceedMaximumValue = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
+    );

-    this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
+    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));

    this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);

@@ -438,7 +495,7 @@ export default class Explorer {
    });

    this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
-      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
+      if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
        return true;
      }

@@ -497,7 +554,20 @@ export default class Explorer {
      () =>
        configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
    );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
+    this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
+    );
+    this.defaultExperience.subscribe((defaultExperience: string) => {
+      if (
+        defaultExperience &&
+        defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
+      ) {
+        this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
+          return database.id() === "system";
+        };
+      }
+    });
+
    this.selectedDatabaseId = ko.computed<string>(() => {
      const selectedNode = this.selectedNode();
      if (!selectedNode) {
@@ -519,6 +589,10 @@ export default class Explorer {
      }
    });

+    this.nonSystemDatabases = ko.computed(() => {
+      return this.databases().filter((database: ViewModels.Database) => !this._isSystemDatabasePredicate(database));
+    });
+
    this.addDatabasePane = new AddDatabasePane({
      id: "adddatabasepane",
      visible: ko.observable<boolean>(false),
@@ -541,6 +615,13 @@ export default class Explorer {
      container: this,
    });

+    this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
+      id: "deletedatabaseconfirmationpane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
    this.graphStylingPane = new GraphStylingPane({
      id: "graphstylingpane",
      visible: ko.observable<boolean>(false),
@@ -562,6 +643,13 @@ export default class Explorer {
      container: this,
    });

+    this.tableColumnOptionsPane = new TableColumnOptionsPane({
+      id: "tablecolumnoptionspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
    this.querySelectPane = new QuerySelectPane({
      id: "queryselectpane",
      visible: ko.observable<boolean>(false),
@@ -583,6 +671,57 @@ export default class Explorer {
      container: this,
    });

+    this.settingsPane = new SettingsPane({
+      id: "settingspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.executeSprocParamsPane = new ExecuteSprocParamsPane({
+      id: "executesprocparamspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadItemsPane = new UploadItemsPane({
+      id: "uploaditemspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+
+    this.loadQueryPane = new LoadQueryPane({
+      id: "loadquerypane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.saveQueryPane = new SaveQueryPane({
+      id: "savequerypane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.browseQueriesPane = new BrowseQueriesPane({
+      id: "browsequeriespane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadFilePane = new UploadFilePane({
+      id: "uploadfilepane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
    this.stringInputPane = new StringInputPane({
      id: "stringinputpane",
      visible: ko.observable<boolean>(false),
@@ -597,18 +736,27 @@ export default class Explorer {
      container: this,
    });

-    this.tabsManager = params?.tabsManager ?? new TabsManager();
+    this.tabsManager = new TabsManager();

    this._panes = [
      this.addDatabasePane,
      this.addCollectionPane,
      this.deleteCollectionConfirmationPane,
+      this.deleteDatabaseConfirmationPane,
      this.graphStylingPane,
      this.addTableEntityPane,
      this.editTableEntityPane,
+      this.tableColumnOptionsPane,
      this.querySelectPane,
      this.newVertexPane,
      this.cassandraAddCollectionPane,
+      this.settingsPane,
+      this.executeSprocParamsPane,
+      this.uploadItemsPane,
+      this.loadQueryPane,
+      this.saveQueryPane,
+      this.browseQueriesPane,
+      this.uploadFilePane,
      this.stringInputPane,
      this.setupNotebooksPane,
    ];
@@ -704,6 +852,8 @@ export default class Explorer {
        this.editTableEntityPane.title("Edit Table Row");
        this.deleteCollectionConfirmationPane.title("Delete Table");
        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
+        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
        this.tableDataClient = new CassandraAPIDataClient();
        break;
    }
@@ -757,29 +907,42 @@ export default class Explorer {
    });

    // Override notebook server parameters from URL parameters
-    if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
-      this.notebookServerInfo({
-        notebookServerEndpoint: userContext.features.notebookServerUrl,
-        authToken: userContext.features.notebookServerToken,
-      });
-    }
+    const featureSubcription = this.features.subscribe((features) => {
+      const serverInfo = this.notebookServerInfo();
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
+      }

-    if (userContext.features.notebookBasePath) {
-      this.notebookBasePath(userContext.features.notebookBasePath);
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        serverInfo.authToken = features[Constants.Features.notebookServerToken];
+      }
+      this.notebookServerInfo(serverInfo);
+      this.notebookServerInfo.valueHasMutated();

-    if (userContext.features.livyEndpoint) {
-      this.sparkClusterConnectionInfo({
-        userName: undefined,
-        password: undefined,
-        endpoints: [
-          {
-            endpoint: userContext.features.livyEndpoint,
-            kind: DataModels.SparkClusterEndpointKind.Livy,
-          },
-        ],
-      });
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
+        this.notebookBasePath(features[Constants.Features.notebookBasePath]);
+      }
+
+      if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
+        this.sparkClusterConnectionInfo({
+          userName: undefined,
+          password: undefined,
+          endpoints: [
+            {
+              endpoint: features[Constants.Features.livyEndpoint],
+              kind: DataModels.SparkClusterEndpointKind.Livy,
+            },
+          ],
+        });
+        this.sparkClusterConnectionInfo.valueHasMutated();
+      }
+
+      if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
+        updateUserContext({ useSDKOperations: true });
+      }
+
+      featureSubcription.dispose();
+    });
  }

  public openEnableSynapseLinkDialog(): void {
@@ -863,6 +1026,20 @@ export default class Explorer {
    return this.selectedNode() == null;
  }

+  public isFeatureEnabled(feature: string): boolean {
+    const features = this.features();
+
+    if (!features) {
+      return false;
+    }
+
+    if (feature in features && features[feature]) {
+      return true;
+    }
+
+    return false;
+  }
+
  public logConsoleData(consoleData: ConsoleData): void {
    this.setNotificationConsoleData(consoleData);
  }
@@ -909,6 +1086,7 @@ export default class Explorer {
  }

  public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
+    this.isRefreshingExplorer(true);
    const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
      dataExplorerArea: Constants.Areas.ResourceTree,
    });
@@ -921,8 +1099,10 @@ export default class Explorer {

    // TODO: Refactor
    const deferred: Q.Deferred<any> = Q.defer();
+    this._setLoadingStatusText("Fetching databases...");
    readDatabases().then(
      (databases: DataModels.Database[]) => {
+        this._setLoadingStatusText("Successfully fetched databases.");
        TelemetryProcessor.traceSuccess(
          Action.LoadDatabases,
          {
@@ -935,16 +1115,23 @@ export default class Explorer {
        this.addDatabasesToList(deltaDatabases.toAdd);
        this.deleteDatabasesFromList(deltaDatabases.toDelete);
        this.selectedNode(currentlySelectedNode);
-        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
-          () => {
-            deferred.resolve();
-          },
-          (reason) => {
-            deferred.reject(reason);
-          }
-        );
+        this._setLoadingStatusText("Fetching containers...");
+        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
+          .then(
+            () => {
+              this._setLoadingStatusText("Successfully fetched containers.");
+              deferred.resolve();
+            },
+            (reason) => {
+              this._setLoadingStatusText("Failed to fetch containers.");
+              deferred.reject(reason);
+            }
+          )
+          .finally(() => this.isRefreshingExplorer(false));
      },
      (error) => {
+        this._setLoadingStatusText("Failed to fetch databases.");
+        this.isRefreshingExplorer(false);
        deferred.reject(error);
        const errorMessage = getErrorMessage(error);
        TelemetryProcessor.traceFailure(
@@ -1004,9 +1191,8 @@ export default class Explorer {
      description: "Refresh button clicked",
      dataExplorerArea: Constants.Areas.ResourceTree,
    });
-    userContext.authType === AuthType.ResourceToken
-      ? this.refreshDatabaseForResourceToken()
-      : this.refreshAllDatabases();
+    this.isRefreshingExplorer(true);
+    this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
    this.refreshNotebookList();
  };

@@ -1099,12 +1285,12 @@ export default class Explorer {
      throw error;
    } finally {
      // Overwrite with feature flags
-      if (userContext.features.notebookServerUrl) {
-        connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
      }

-      if (userContext.features.notebookServerToken) {
-        connectionInfo.authToken = userContext.features.notebookServerToken;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
      }

      this.notebookServerInfo(connectionInfo);
@@ -1220,12 +1406,7 @@ export default class Explorer {
  }

  public isLastNonEmptyDatabase(): boolean {
-    if (
-      this.isLastDatabase() &&
-      this.databases()[0] &&
-      this.databases()[0].collections &&
-      this.databases()[0].collections().length > 0
-    ) {
+    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
      return true;
    }
    return false;
@@ -1259,7 +1440,16 @@ export default class Explorer {
      if (inputs.defaultCollectionThroughput) {
        this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
      }
+      this.features(inputs.features);
+      this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
      this.databaseAccount(databaseAccount);
+      this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
+      this.hasWriteAccess(inputs.hasWriteAccess ?? true);
+      if (inputs.addCollectionDefaultFlight) {
+        this.flight(inputs.addCollectionDefaultFlight);
+      }
+      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
+      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
      this.setFeatureFlagsFromFlights(inputs.flights);
      TelemetryProcessor.traceSuccess(
        Action.LoadDatabaseAccount,
@@ -1340,9 +1530,9 @@ export default class Explorer {

  public isRunningOnNationalCloud(): boolean {
    return (
-      userContext.portalEnv === "blackforest" ||
-      userContext.portalEnv === "fairfax" ||
-      userContext.portalEnv === "mooncake"
+      this.serverId() === Constants.ServerIds.blackforest ||
+      this.serverId() === Constants.ServerIds.fairfax ||
+      this.serverId() === Constants.ServerIds.mooncake
    );
  }

@@ -1806,7 +1996,11 @@ export default class Explorer {

  private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
    const authType = userContext.authType;
-    if (true) {
+    if (
+      authType === AuthType.EncryptedToken ||
+      authType === AuthType.ResourceToken ||
+      authType === AuthType.MasterKey
+    ) {
      this.isNotebooksEnabledForAccount(false);
      return;
    }
@@ -2009,6 +2203,38 @@ export default class Explorer {
      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
  }

+  public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
+
+    this.uploadFilePane.openWithOptions({
+      paneTitle: "Upload file to notebook server",
+      selectFileInputLabel: "Select file to upload",
+      errorMessage: "Could not upload file",
+      inProgressMessage: "Uploading file to notebook server",
+      successMessage: "Successfully uploaded file to notebook server",
+      onSubmit: async (file: File): Promise<NotebookContentItem> => {
+        const readFileAsText = (inputFile: File): Promise<string> => {
+          const reader = new FileReader();
+          return new Promise((resolve, reject) => {
+            reader.onerror = () => {
+              reader.abort();
+              reject(`Problem parsing file: ${inputFile}`);
+            };
+            reader.onload = () => {
+              resolve(reader.result as string);
+            };
+            reader.readAsText(inputFile);
+          });
+        };
+
+        const fileContent = await readFileAsText(file);
+        return this.uploadFile(file.name, fileContent, parent);
+      },
+      extensions: undefined,
+      submitButtonLabel: "Upload",
+    });
+  }
+
  public refreshContentItem(item: NotebookContentItem): Promise<void> {
    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
      const error = "Attempt to refresh notebook list, but notebook is not enabled";
@@ -2171,12 +2397,10 @@ export default class Explorer {
  public onNewCollectionClicked(): void {
    if (this.isPreferredApiCassandra()) {
      this.cassandraAddCollectionPane.open();
-    } else if (userContext.features.enableReactPane) {
-      this.openAddCollectionPanel();
    } else {
      this.addCollectionPane.open(this.selectedDatabaseId());
-      document.getElementById("linkAddCollection").focus();
    }
+    document.getElementById("linkAddCollection").focus();
  }

  private refreshCommandBarButtons(): void {
@@ -2212,6 +2436,32 @@ export default class Explorer {
    }
  }

+  private _setLoadingStatusText(text: string, title: string = "Welcome to Azure Cosmos DB") {
+    if (!text) {
+      return;
+    }
+
+    const loadingText = document.getElementById("explorerLoadingStatusText");
+    if (!loadingText) {
+      Logger.logError(
+        "getElementById('explorerLoadingStatusText') failed to find element",
+        "Explorer/_setLoadingStatusText"
+      );
+      return;
+    }
+    loadingText.innerHTML = text;
+
+    const loadingTitle = document.getElementById("explorerLoadingStatusTitle");
+    if (!loadingTitle) {
+      Logger.logError(
+        "getElementById('explorerLoadingStatusTitle') failed to find element",
+        "Explorer/_setLoadingStatusText"
+      );
+    } else {
+      loadingTitle.innerHTML = title;
+    }
+  }
+
  private _openSetupNotebooksPaneForQuickstart(): void {
    const title = "Enable Notebooks (Preview)";
    const description =
@@ -2279,7 +2529,7 @@ export default class Explorer {
  }

  public openDeleteCollectionConfirmationPane(): void {
-    userContext.features.enableKOPanel
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
      ? this.deleteCollectionConfirmationPane.open()
      : this.openSidePanel(
          "Delete Collection",
@@ -2290,67 +2540,4 @@ export default class Explorer {
          />
        );
  }
-
-  public openDeleteDatabaseConfirmationPane(): void {
-    this.openSidePanel(
-      "Delete Database",
-      <DeleteDatabaseConfirmationPanel
-        explorer={this}
-        openNotificationConsole={this.expandConsole}
-        closePanel={this.closeSidePanel}
-        selectedDatabase={this.findSelectedDatabase()}
-      />
-    );
-  }
-
-  public openUploadItemsPanePane(): void {
-    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openSettingPane(): void {
-    this.openSidePanel("Settings", <SettingsPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openExecuteSprocParamsPanel(): void {
-    this.openSidePanel(
-      "Input parameters",
-      <ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
-    );
-  }
-
-  public async openAddCollectionPanel(): Promise<void> {
-    await this.loadDatabaseOffers();
-    this.openSidePanel(
-      "New Collection",
-      <AddCollectionPanel
-        explorer={this}
-        closePanel={() => this.closeSidePanel()}
-        openNotificationConsole={() => this.expandConsole()}
-      />
-    );
-  }
-
-  public openBrowseQueriesPanel(): void {
-    this.openSidePanel("Open Saved Queries", <BrowseQueriesPanel explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openLoadQueryPanel(): void {
-    this.openSidePanel("Load Query", <LoadQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
-  }
-
-  public openSaveQueryPanel(): void {
-    this.openSidePanel("Save Query", <SaveQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
-  }
-
-  public openUploadFilePanel(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
-    this.openSidePanel(
-      "Upload File",
-      <UploadFilePane
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
-      />
-    );
-  }
 }
--- a/src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
@@ -4,8 +4,11 @@
 * - inspired from gremlin-javascript for nodejs: https://github.com/jbmusso/gremlin-javascript
 * - tested on cosmosdb gremlin server
 * - only supports sessionless gremlin requests
+ * - Relies on text-encoding polyfill (github.com/inexorabletash/text-encoding) for TextEncoder/TextDecoder on IE, Edge.
 */

+import { TextEncoder, TextDecoder } from "text-encoding";
+
 export interface GremlinSimpleClientParameters {
  endpoint: string; // The websocket endpoint
  user: string;
--- a/src/Explorer/Menus/CommandBar/CommandBarComponent.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponent.tsx
@@ -0,0 +1,107 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import * as React from "react";
+import { StyleConstants } from "../../../Common/Constants";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import * as CommandBarUtil from "./CommandBarUtil";
+
+export interface CommandBarComponentProps {
+  isNotebookTabActive: boolean;
+  tabsButtons: CommandButtonComponentProps[];
+}
+
+export const CommandBarComponent: React.FunctionComponent = ({ isNotebookTabActive, tabsButtons }: CommandBarComponentProps) {
+
+  constructor(props: CommandBarComponentProps) {
+    super(props);
+    this.state = {
+      isNotebookTabActive: false
+    }
+
+    this.container = container;
+    this.tabsButtons = [];
+    // this.isNotebookTabActive = ko.computed(() =>
+    //   container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
+    // );
+
+    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
+    const toWatch = [
+      container.isPreferredApiTable,
+      container.isPreferredApiMongoDB,
+      container.isPreferredApiDocumentDB,
+      container.isPreferredApiCassandra,
+      container.isPreferredApiGraph,
+      container.deleteCollectionText,
+      container.deleteDatabaseText,
+      container.addCollectionText,
+      container.addDatabaseText,
+      container.isDatabaseNodeOrNoneSelected,
+      container.isDatabaseNodeSelected,
+      container.isNoneSelected,
+      container.isResourceTokenCollectionNodeSelected,
+      container.isHostedDataExplorerEnabled,
+      container.isSynapseLinkUpdating,
+      container.databaseAccount,
+      this.isNotebookTabActive,
+      container.isServerlessEnabled,
+    ];
+
+    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
+    this.parameters = ko.observable(Date.now());
+  }
+
+  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
+  this.tabsButtons = buttons;
+  this.triggerRender();
+}
+
+const backgroundColor = StyleConstants.BaseLight;
+
+const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
+const contextButtons = (this.tabsButtons || []).concat(
+  CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
+);
+const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
+
+const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+if (this.tabsButtons && this.tabsButtons.length > 0) {
+  uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+}
+
+const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+
+if (uiFabricTabsButtons.length > 0) {
+  uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
+}
+
+const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+
+if (props.isNotebookTabActive) {
+  uiFabricControlButtons.unshift(
+    CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
+  );
+}
+
+return (
+  <React.Fragment>
+    <div className="commandBarContainer">
+      <CommandBar
+        ariaLabel="Use left and right arrow keys to navigate between commands"
+        items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
+        farItems={uiFabricControlButtons}
+        styles={{
+          root: { backgroundColor: backgroundColor },
+        }}
+        overflowButtonProps={{ ariaLabel: "More commands" }}
+      />
+    </div>
+  </React.Fragment>
+);
+}
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -1,110 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import { StyleConstants } from "../../../Common/Constants";
-import * as CommandBarUtil from "./CommandBarUtil";
-import Explorer from "../../Explorer";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-
-export class CommandBarComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-  public container: Explorer;
-  private tabsButtons: CommandButtonComponentProps[];
-  private isNotebookTabActive: ko.Computed<boolean>;
-
-  constructor(container: Explorer) {
-    this.container = container;
-    this.tabsButtons = [];
-    this.isNotebookTabActive = ko.computed(() =>
-      container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
-    );
-
-    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
-    const toWatch = [
-      container.isPreferredApiTable,
-      container.isPreferredApiMongoDB,
-      container.isPreferredApiDocumentDB,
-      container.isPreferredApiCassandra,
-      container.isPreferredApiGraph,
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
-      container.addDatabaseText,
-      container.isDatabaseNodeOrNoneSelected,
-      container.isDatabaseNodeSelected,
-      container.isNoneSelected,
-      container.isResourceTokenCollectionNodeSelected,
-      container.isHostedDataExplorerEnabled,
-      container.isSynapseLinkUpdating,
-      container.databaseAccount,
-      this.isNotebookTabActive,
-      container.isServerlessEnabled,
-    ];
-
-    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
-    this.parameters = ko.observable(Date.now());
-  }
-
-  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
-    this.tabsButtons = buttons;
-    this.triggerRender();
-  }
-
-  public renderComponent(): JSX.Element {
-    const backgroundColor = StyleConstants.BaseLight;
-
-    const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
-    const contextButtons = (this.tabsButtons || []).concat(
-      CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
-    );
-    const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
-
-    const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
-    if (this.tabsButtons && this.tabsButtons.length > 0) {
-      uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-    }
-
-    const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
-
-    if (uiFabricTabsButtons.length > 0) {
-      uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
-    }
-
-    const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
-    uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-
-    if (this.isNotebookTabActive()) {
-      uiFabricControlButtons.unshift(
-        CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
-      );
-    }
-
-    return (
-      <React.Fragment>
-        <div className="commandBarContainer">
-          <CommandBar
-            ariaLabel="Use left and right arrow keys to navigate between commands"
-            items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
-            farItems={uiFabricControlButtons}
-            styles={{
-              root: { backgroundColor: backgroundColor },
-            }}
-            overflowButtonProps={{ ariaLabel: "More commands" }}
-          />
-        </div>
-      </React.Fragment>
-    );
-  }
-
-  private triggerRender() {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -1,10 +1,8 @@
 import * as ko from "knockout";
-import { AuthType } from "../../../AuthType";
-import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
-import { updateUserContext } from "../../../UserContext";
-import Explorer from "../../Explorer";
-import NotebookManager from "../../Notebook/NotebookManager";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import NotebookManager from "../../Notebook/NotebookManager";
+import Explorer from "../../Explorer";

 describe("CommandBarComponentButtonFactory tests", () => {
  let mockExplorer: Explorer;
@@ -15,6 +13,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
    beforeAll(() => {
      mockExplorer = {} as Explorer;
      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
      mockExplorer.isPreferredApiTable = ko.computed(() => true);
      mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -54,6 +53,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
    beforeAll(() => {
      mockExplorer = {} as Explorer;
      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
      mockExplorer.isPreferredApiTable = ko.computed(() => true);
      mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -118,6 +118,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
    beforeAll(() => {
      mockExplorer = {} as Explorer;
      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
      mockExplorer.isPreferredApiTable = ko.computed(() => true);
      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
      mockExplorer.isSparkEnabled = ko.observable(true);
@@ -198,6 +199,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
    beforeAll(() => {
      mockExplorer = {} as Explorer;
      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
      mockExplorer.isPreferredApiTable = ko.computed(() => true);
      mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
@@ -279,6 +281,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
    beforeAll(() => {
      mockExplorer = {} as Explorer;
      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
      mockExplorer.isPreferredApiTable = ko.computed(() => true);
      mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -337,13 +340,12 @@ describe("CommandBarComponentButtonFactory tests", () => {
    beforeAll(() => {
      mockExplorer = {} as Explorer;
      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(true);
      mockExplorer.isPreferredApiDocumentDB = ko.computed(() => true);
      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
+
      mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
-      updateUserContext({
-        authType: AuthType.ResourceToken,
-      });
    });

    it("should only show New SQL Query and Open Query buttons", () => {
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -1,38 +1,37 @@
-import * as React from "react";
-import AddCollectionIcon from "../../../../images/AddCollection.svg";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../../Common/Constants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
+import AddCollectionIcon from "../../../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
-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 * as Constants from "../../../Common/Constants";
+import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
 import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
-import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import GitHubIcon from "../../../../images/github.svg";
 import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
+import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
+import SettingsIcon from "../../../../images/settings_15x15.svg";
+import AddUdfIcon from "../../../../images/AddUdf.svg";
+import AddTriggerIcon from "../../../../images/AddTrigger.svg";
+import FeedbackIcon from "../../../../images/Feedback-Command.svg";
 import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.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 OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import SettingsIcon from "../../../../images/settings_15x15.svg";
+import GitHubIcon from "../../../../images/github.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
-import { AuthType } from "../../../AuthType";
-import * as Constants from "../../../Common/Constants";
-import { Areas } from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as React from "react";
 import { OpenFullScreen } from "../../OpenFullScreen";

 let counter = 0;

 export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  if (userContext.authType === AuthType.ResourceToken) {
+  if (container.isAuthWithResourceToken()) {
    return createStaticCommandBarButtonsForResourceToken(container);
  }

@@ -164,7 +163,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
    const settingsPaneButton: CommandButtonComponentProps = {
      iconSrc: SettingsIcon,
      iconAlt: label,
-      onCommandClick: () => container.openSettingPane(),
+      onCommandClick: () => container.settingsPane.open(),
      commandButtonLabel: undefined,
      ariaLabel: label,
      tooltipText: label,
@@ -407,7 +406,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
  return {
    iconSrc: NewNotebookIcon,
    iconAlt: label,
-    onCommandClick: () => container.openUploadFilePanel(),
+    onCommandClick: () => container.onUploadToNotebookServerClicked(),
    commandButtonLabel: label,
    hasPopup: false,
    disabled: false,
@@ -420,7 +419,7 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
  return {
    iconSrc: BrowseQueriesIcon,
    iconAlt: label,
-    onCommandClick: () => container.openBrowseQueriesPanel(),
+    onCommandClick: () => container.browseQueriesPane.open(),
    commandButtonLabel: label,
    ariaLabel: label,
    hasPopup: true,
@@ -433,7 +432,7 @@ function createOpenQueryFromDiskButton(container: Explorer): CommandButtonCompon
  return {
    iconSrc: OpenQueryFromDiskIcon,
    iconAlt: label,
-    onCommandClick: () => container.openLoadQueryPanel(),
+    onCommandClick: () => container.loadQueryPane.open(),
    commandButtonLabel: label,
    ariaLabel: label,
    hasPopup: true,
@@ -456,7 +455,7 @@ function createEnableNotebooksButton(container: Explorer): CommandButtonComponen
    onCommandClick: () => container.setupNotebooksPane.openWithTitleAndDescription(label, description),
    commandButtonLabel: label,
    hasPopup: false,
-    disabled: false,
+    disabled: !container.isNotebooksEnabledForAccount(),
    ariaLabel: label,
    tooltipText: container.isNotebooksEnabledForAccount() ? "" : tooltip,
  };
--- a/src/Explorer/Notebook/FileSystemUtil.ts
+++ b/src/Explorer/Notebook/FileSystemUtil.ts
@@ -1,33 +1,37 @@
-/**
- * file list returns path starting with ./blah
- * rename returns simply blah.
- * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
- * ./ inside the path.
- * TODO: this should go away when not using jupyter for file operations and use normalized paths.
- * @param path1
- * @param path2
- */
-export function isPathEqual(path1: string, path2: string): boolean {
-  const normalize = (path: string): string => {
-    const dotSlash = "./";
-    if (path.indexOf(dotSlash) === 0) {
-      path = path.substring(dotSlash.length);
-    }
-    return path;
-  };
+// Utilities for file system

-  return normalize(path1) === normalize(path2);
-}
+export class FileSystemUtil {
+  /**
+   * file list returns path starting with ./blah
+   * rename returns simply blah.
+   * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
+   * ./ inside the path.
+   * TODO: this should go away when not using jupyter for file operations and use normalized paths.
+   * @param path1
+   * @param path2
+   */
+  public static isPathEqual(path1: string, path2: string): boolean {
+    const normalize = (path: string): string => {
+      const dotSlash = "./";
+      if (path.indexOf(dotSlash) === 0) {
+        path = path.substring(dotSlash.length);
+      }
+      return path;
+    };

-/**
- * Remove extension
- * @param path
- * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
- */
-export function stripExtension(path: string, extension: string): string {
-  const splitted = path.split(".");
-  if (splitted[splitted.length - 1] === extension) {
-    splitted.pop();
+    return normalize(path1) === normalize(path2);
+  }
+
+  /**
+   * Remove extension
+   * @param path
+   * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
+   */
+  public static stripExtension(path: string, extension: string): string {
+    const splitted = path.split(".");
+    if (splitted[splitted.length - 1] === extension) {
+      splitted.pop();
+    }
+    return splitted.join(".");
  }
-  return splitted.join(".");
 }
--- a/src/Explorer/Notebook/NotebookComponent/epics.ts
+++ b/src/Explorer/Notebook/NotebookComponent/epics.ts
@@ -1,4 +1,4 @@
-import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
+import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
 import { webSocket } from "rxjs/webSocket";
 import { StateObservable } from "redux-observable";
 import { ofType } from "redux-observable";
@@ -44,7 +44,7 @@ import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import * as TextFile from "./contents/file/text-file";
 import { NotebookUtil } from "../NotebookUtil";
-import * as FileSystemUtil from "../FileSystemUtil";
+import { FileSystemUtil } from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";

@@ -944,39 +944,6 @@ const traceNotebookKernelEpic = (
  );
 };

-const resetCellStatusOnExecuteCanceledEpic = (
-  action$: Observable<actions.ExecuteCanceled>,
-  state$: StateObservable<AppState>
-): Observable<actions.UpdateCellStatus> => {
-  return action$.pipe(
-    ofType(actions.EXECUTE_CANCELED),
-    mergeMap((action) => {
-      const contentRef = action.payload.contentRef;
-      const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
-      let busyCellIds: string[] = [];
-
-      if (model.type === "notebook") {
-        const cellMap = model.transient.get("cellMap");
-        if (cellMap) {
-          for (const entry of cellMap.toArray()) {
-            const cellId = entry[0];
-            const status = model.transient.getIn(["cellMap", cellId, "status"]);
-            if (status === "busy") {
-              busyCellIds.push(cellId);
-            }
-          }
-        }
-      }
-
-      return from(busyCellIds).pipe(
-        map((busyCellId) => {
-          return actions.updateCellStatus({ id: busyCellId, contentRef, status: undefined });
-        })
-      );
-    })
-  );
-};
-
 export const allEpics = [
  addInitialCodeCellEpic,
  focusInitialCodeCellEpic,
@@ -993,5 +960,4 @@ export const allEpics = [
  traceNotebookTelemetryEpic,
  traceNotebookInfoEpic,
  traceNotebookKernelEpic,
-  resetCellStatusOnExecuteCanceledEpic,
 ];
--- a/src/Explorer/Notebook/NotebookContentClient.ts
+++ b/src/Explorer/Notebook/NotebookContentClient.ts
@@ -1,12 +1,13 @@
-import { stringifyNotebook } from "@nteract/commutable";
-import { FileType, IContent, IContentProvider, IEmptyContent, ServerConfig } from "@nteract/core";
-import { AjaxResponse } from "rxjs/ajax";
 import * as DataModels from "../../Contracts/DataModels";
-import * as StringUtils from "../../Utils/StringUtils";
-import * as FileSystemUtil from "./FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
+import * as StringUtils from "../../Utils/StringUtils";
+import { FileSystemUtil } from "./FileSystemUtil";
 import { NotebookUtil } from "./NotebookUtil";

+import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
+import { AjaxResponse } from "rxjs/ajax";
+import { stringifyNotebook } from "@nteract/commutable";
+
 export class NotebookContentClient {
  constructor(
    private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
--- a/src/Explorer/OpenActions.ts
+++ b/src/Explorer/OpenActions.ts
@@ -1,7 +1,7 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.

-import { ActionContracts } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
+import { ActionContracts } from "../Contracts/ExplorerContracts";
 import Explorer from "./Explorer";

 export function handleOpenAction(
@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
    (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
  ) {
    explorer.closeAllPanes();
-    explorer.openSettingPane();
+    explorer.settingsPane.open();
  }
 }

--- a/src/Explorer/Panes/AddCollectionPane.ts
+++ b/src/Explorer/Panes/AddCollectionPane.ts
@@ -1,22 +1,22 @@
-import * as ko from "knockout";
 import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { createCollection } from "../../Common/dataAccess/createCollection";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
 import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
-import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import editable from "../../Common/EditableUtility";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { configContext, Platform } from "../../ConfigContext";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import { createCollection } from "../../Common/dataAccess/createCollection";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { userContext } from "../../UserContext";

 export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
  isPreferredApiTable: ko.Computed<boolean>;
@@ -49,7 +49,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
  public throughputDatabase: ViewModels.Editable<number>;
  public isPreferredApiTable: ko.Computed<boolean>;
  public partitionKeyPlaceholder: ko.Computed<string>;
-  public isTryCosmosDBSubscription: ko.Observable<boolean>;
+  public isTryCosmosDBSubscription: ko.Computed<boolean>;
  public maxThroughputRU: ko.Observable<number>;
  public minThroughputRU: ko.Observable<number>;
  public throughputRangeText: ko.Computed<string>;
@@ -105,6 +105,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
    this.databaseId = ko.observable<string>();
    this.databaseCreateNew = ko.observable<boolean>(true);
    this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());
+    this.container.subscriptionType &&
+      this.container.subscriptionType.subscribe((subscriptionType) => {
+        this.databaseCreateNewShared(this.getSharedThroughputDefault());
+      });
    this.collectionWithThroughputInShared = ko.observable<boolean>(false);
    this.databaseIds = ko.observableArray<string>();
    this.uniqueKeys = ko.observableArray<DynamicListItem>();
@@ -182,6 +186,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
        return "";
      }

+      const serverId: string = this.container.serverId();
      const regions =
        (account &&
          account.properties &&
@@ -195,28 +200,23 @@ export default class AddCollectionPane extends ContextualPaneBase {
      if (!this.isSharedAutoPilotSelected()) {
        throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
          offerThroughput,
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isSharedAutoPilotSelected()
        );
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
      } else {
        throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isSharedAutoPilotSelected()
        );
        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster
        );
@@ -240,6 +240,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
        return "";
      }

+      const serverId: string = this.container.serverId();
      const regions =
        (account &&
          account.properties &&
@@ -253,28 +254,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
      if (!this.isAutoPilotSelected()) {
        throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.throughputMultiPartition(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isAutoPilotSelected()
        );
        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
          this.throughputMultiPartition(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster
        );
      } else {
        throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isAutoPilotSelected()
        );
        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
          this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster
        );
@@ -284,7 +285,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
      return estimatedSpend;
    });

-    this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
+    this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
+      return (this.container && this.container.isTryCosmosDBSubscription()) || false;
+    });

    this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
      if (!!isTryCosmosDB) {
@@ -295,7 +298,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
    this.canRequestSupport = ko.pureComputed(() => {
      if (
        configContext.platform !== Platform.Emulator &&
-        !userContext.isTryCosmosDBSubscription &&
+        !this.container.isTryCosmosDBSubscription() &&
        configContext.platform !== Platform.Portal
      ) {
        const offerThroughput: number = this._getThroughput();
@@ -474,6 +477,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
    });

    this.resetData();
+    this.container.flight.subscribe(() => {
+      this.resetData();
+    });

    this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
      this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -483,7 +489,7 @@ export default class AddCollectionPane extends ContextualPaneBase {

    this.upsellMessage = ko.pureComputed<string>(() => {
      return PricingUtils.getUpsellMessage(
-        userContext.portalEnv,
+        this.container.serverId(),
        this.isFreeTierAccount(),
        this.container.isFirstResourceCreated(),
        this.container.defaultExperience(),
@@ -652,7 +658,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
  }

  public getSharedThroughputDefault(): boolean {
-    const subscriptionType = userContext.subscriptionType;
+    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();
    if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
      return false;
    }
@@ -694,12 +700,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
        partitionKey: this.partitionKey(),
        databaseId: this.databaseId(),
      }),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
        storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
        throughput: this._getThroughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
    };
@@ -798,12 +804,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
        uniqueKeyPolicy,
        collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
      }),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
        storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
        throughput: offerThroughput,
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
      useIndexingForSharedThroughput: this.useIndexingForSharedThroughput(),
@@ -870,12 +876,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
            uniqueKeyPolicy,
            collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
          }),
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
          subscriptionQuotaId: userContext.quotaId,
          defaultsCheck: {
            storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
            throughput: offerThroughput,
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
          },
          dataExplorerArea: Constants.Areas.ContextualPane,
        };
@@ -902,12 +908,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
            uniqueKeyPolicy,
            collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
          },
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
          subscriptionQuotaId: userContext.quotaId,
          defaultsCheck: {
            storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
            throughput: offerThroughput,
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
          },
          dataExplorerArea: Constants.Areas.ContextualPane,
          error: errorMessage,
@@ -987,7 +993,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
    this.container.openEnableSynapseLinkDialog();
  }

-  public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
+  public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);

  public isValid(): boolean {
    // TODO add feature flag that disables validation for customers with custom accounts
@@ -1195,7 +1201,7 @@ export default class AddCollectionPane extends ContextualPaneBase {

    if (this.isAnalyticalStorageOn()) {
      // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
        ? Constants.AnalyticalStorageTtl.Days90
        : Constants.AnalyticalStorageTtl.Infinite;
    }
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
--- a/src/Explorer/Panes/AddDatabasePane.test.ts
+++ b/src/Explorer/Panes/AddDatabasePane.test.ts
@@ -1,9 +1,8 @@
 import * as Constants from "../../Common/Constants";
-import { DatabaseAccount } from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import { updateUserContext } from "../../UserContext";
 import Explorer from "../Explorer";
 import AddDatabasePane from "./AddDatabasePane";
+import { DatabaseAccount } from "../../Contracts/DataModels";

 describe("Add Database Pane", () => {
  describe("getSharedThroughputDefault()", () => {
@@ -45,41 +44,31 @@ describe("Add Database Pane", () => {
    });

    it("should be true if subscription type is Benefits", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Benefits,
-      });
+      explorer.subscriptionType(SubscriptionType.Benefits);
      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
      expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
    });

    it("should be false if subscription type is EA", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.EA,
-      });
+      explorer.subscriptionType(SubscriptionType.EA);
      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
      expect(addDatabasePane.getSharedThroughputDefault()).toBe(false);
    });

    it("should be true if subscription type is Free", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Free,
-      });
+      explorer.subscriptionType(SubscriptionType.Free);
      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
      expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
    });

    it("should be true if subscription type is Internal", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Internal,
-      });
+      explorer.subscriptionType(SubscriptionType.Internal);
      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
      expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
    });

    it("should be true if subscription type is PAYG", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.PAYG,
-      });
+      explorer.subscriptionType(SubscriptionType.PAYG);
      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
      expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
    });
--- a/src/Explorer/Panes/AddDatabasePane.ts
+++ b/src/Explorer/Panes/AddDatabasePane.ts
@@ -1,19 +1,19 @@
-import * as ko from "knockout";
-import * as Constants from "../../Common/Constants";
-import { createDatabase } from "../../Common/dataAccess/createDatabase";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import editable from "../../Common/EditableUtility";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { createDatabase } from "../../Common/dataAccess/createDatabase";
+import { configContext, Platform } from "../../ConfigContext";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { userContext } from "../../UserContext";

 export default class AddDatabasePane extends ContextualPaneBase {
  public defaultExperience: ko.Computed<string>;
@@ -61,6 +61,11 @@ export default class AddDatabasePane extends ContextualPaneBase {
    // TODO 388844: get defaults from parent frame
    this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());

+    this.container.subscriptionType &&
+      this.container.subscriptionType.subscribe((subscriptionType) => {
+        this.databaseCreateNewShared(this.getSharedThroughputDefault());
+      });
+
    this.databaseIdLabel = ko.computed<string>(() =>
      this.container.isPreferredApiCassandra() ? "Keyspace id" : "Database id"
    );
@@ -117,6 +122,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
        return "";
      }

+      const serverId = this.container.serverId();
      const regions =
        (account &&
          account.properties &&
@@ -128,15 +134,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
      let estimatedSpendAcknowledge: string;
      let estimatedSpend: string;
      if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
        estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
          offerThroughput,
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isAutoPilotSelected()
@@ -144,13 +145,13 @@ export default class AddDatabasePane extends ContextualPaneBase {
      } else {
        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
          this.maxAutoPilotThroughputSet(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster
        );
        estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.maxAutoPilotThroughputSet(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isAutoPilotSelected()
@@ -164,7 +165,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
    this.canRequestSupport = ko.pureComputed(() => {
      if (
        configContext.platform !== Platform.Emulator &&
-        !userContext.isTryCosmosDBSubscription &&
+        !this.container.isTryCosmosDBSubscription() &&
        configContext.platform !== Platform.Portal
      ) {
        const offerThroughput: number = this.throughput();
@@ -226,6 +227,9 @@ export default class AddDatabasePane extends ContextualPaneBase {
    });

    this.resetData();
+    this.container.flight.subscribe(() => {
+      this.resetData();
+    });

    this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
      this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -235,7 +239,7 @@ export default class AddDatabasePane extends ContextualPaneBase {

    this.upsellMessage = ko.pureComputed<string>(() => {
      return PricingUtils.getUpsellMessage(
-        userContext.portalEnv,
+        this.container.serverId(),
        this.isFreeTierAccount(),
        this.container.isFirstResourceCreated(),
        this.container.defaultExperience(),
@@ -268,11 +272,11 @@ export default class AddDatabasePane extends ContextualPaneBase {
    super.open();
    this.resetData();
    const addDatabasePaneOpenMessage = {
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
    };
@@ -294,10 +298,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
        shared: this.databaseCreateNewShared(),
      }),
      offerThroughput,
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
    };
@@ -337,7 +341,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
  }

  public getSharedThroughputDefault(): boolean {
-    const subscriptionType = userContext.subscriptionType;
+    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();

    if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
      return false;
@@ -356,10 +360,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
        shared: this.databaseCreateNewShared(),
      }),
      offerThroughput: offerThroughput,
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
    };
@@ -378,10 +382,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
        shared: this.databaseCreateNewShared(),
      }),
      offerThroughput: offerThroughput,
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
      error: errorMessage,
--- a/src/Explorer/Panes/BrowseQueriesPane.html
+++ b/src/Explorer/Panes/BrowseQueriesPane.html
@@ -0,0 +1,33 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
+  <div class="contextual-pane" id="browsequeriespane">
+    <!-- Save Query form -- Start -->
+    <div class="contextual-pane-in">
+      <div class="paneContentContainer">
+        <!-- Save Query header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Save Query header - End -->
+
+        <!-- Save Query inputs - Start -->
+        <div class="paneMainContent"><div class="pkPadding" data-bind="react: queriesGridComponentAdapter"></div></div>
+      </div>
+    </div>
+    <!-- Save Query form  - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>
--- a/src/Explorer/Panes/BrowseQueriesPane.ts
+++ b/src/Explorer/Panes/BrowseQueriesPane.ts
@@ -0,0 +1,100 @@
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../Common/Constants";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import * as Logger from "../../Common/Logger";
+import { QueriesGridComponentAdapter } from "../Controls/QueriesGridReactComponent/QueriesGridComponentAdapter";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import QueryTab from "../Tabs/QueryTab";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+
+export class BrowseQueriesPane extends ContextualPaneBase {
+  public queriesGridComponentAdapter: QueriesGridComponentAdapter;
+  public canSaveQueries: ko.Computed<boolean>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Open Saved Queries");
+    this.resetData();
+    this.canSaveQueries = this.container && this.container.canSaveQueries;
+    this.queriesGridComponentAdapter = new QueriesGridComponentAdapter(this.container);
+  }
+
+  public open() {
+    super.open();
+    this.queriesGridComponentAdapter.forceRender();
+  }
+
+  public close() {
+    super.close();
+    this.queriesGridComponentAdapter.forceRender();
+  }
+
+  public submit() {
+    // override default behavior because this is not a form
+  }
+
+  public setupQueries = async (src: any, event: MouseEvent): Promise<void> => {
+    if (!this.container) {
+      return;
+    }
+
+    const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
+      dataExplorerArea: Areas.ContextualPane,
+      paneTitle: this.title(),
+    });
+    try {
+      this.isExecuting(true);
+      await this.container.queriesClient.setupQueriesCollection();
+      this.container.refreshAllDatabases().done(() => this.queriesGridComponentAdapter.forceRender());
+      TelemetryProcessor.traceSuccess(
+        Action.SetupSavedQueries,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: this.title(),
+        },
+        startKey
+      );
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      TelemetryProcessor.traceFailure(
+        Action.SetupSavedQueries,
+        {
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: this.title(),
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+      this.formErrors(`Failed to setup a collection for saved queries: ${errorMessage}`);
+    } finally {
+      this.isExecuting(false);
+    }
+  };
+
+  public loadSavedQuery = (savedQuery: DataModels.Query): void => {
+    const selectedCollection: ViewModels.Collection = this.container && this.container.findSelectedCollection();
+    if (!selectedCollection) {
+      // should never get into this state because this pane is only accessible through the query tab
+      Logger.logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
+      return;
+    } else if (this.container.isPreferredApiMongoDB()) {
+      selectedCollection.onNewMongoQueryClick(selectedCollection, null);
+    } else {
+      selectedCollection.onNewQueryClick(selectedCollection, null);
+    }
+    const queryTab = this.container.tabsManager.activeTab() as QueryTab;
+    queryTab.tabTitle(savedQuery.queryName);
+    queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
+    queryTab.initialEditorContent(savedQuery.query);
+    queryTab.sqlQueryEditorContent(savedQuery.query);
+    TelemetryProcessor.trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
+      dataExplorerArea: Areas.ContextualPane,
+      queryName: savedQuery.queryName,
+      paneTitle: this.title(),
+    });
+    this.close();
+  };
+}
--- a/src/Explorer/Panes/BrowseQueriesPanel/snapshots/index.test.tsx.snap
+++ b/src/Explorer/Panes/BrowseQueriesPanel/snapshots/index.test.tsx.snap
@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Browse queries panel Should render Default properly 1`] = `
-<BrowseQueriesPanel
-  closePanel={[Function]}
-  explorer={
-    Object {
-      "canSaveQueries": [Function],
-      "queriesClient": Object {
-        "getQueries": [Function],
-      },
-    }
-  }
->
-  <div
-    className="panelFormWrapper"
-  >
-    <div
-      className="panelMainContent"
-    >
-      <QueriesGridComponent
-        containerVisible={true}
-        onQuerySelect={[Function]}
-        queriesClient={
-          Object {
-            "getQueries": [Function],
-          }
-        }
-        saveQueryEnabled={true}
-      >
-        <div
-          id="emptyQueryBanner"
-        >
-          <div>
-            You have not saved any queries yet. 
-            <br />
-             
-            <br />
-            To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save Query and follow the prompt in order to save the query.
-          </div>
-          <img
-            alt="Save query helper banner"
-            src=""
-            style={
-              Object {
-                "border": "1px solid undefined",
-                "height": "150px",
-                "marginTop": "20px",
-                "width": "310px",
-              }
-            }
-          />
-        </div>
-      </QueriesGridComponent>
-    </div>
-  </div>
-</BrowseQueriesPanel>
-`;
--- a/src/Explorer/Panes/BrowseQueriesPanel/index.test.tsx
+++ b/src/Explorer/Panes/BrowseQueriesPanel/index.test.tsx
@@ -1,30 +0,0 @@
-import { mount } from "enzyme";
-import * as ko from "knockout";
-import React from "react";
-import { QueriesClient } from "../../../Common/QueriesClient";
-import { Query } from "../../../Contracts/DataModels";
-import Explorer from "../../Explorer";
-import { BrowseQueriesPanel } from "./index";
-
-describe("Browse queries panel", () => {
-  const fakeExplorer = {} as Explorer;
-  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
-  const fakeClientQuery = {} as QueriesClient;
-  const fakeQueryData = {} as Query[];
-  fakeClientQuery.getQueries = async () => fakeQueryData;
-  fakeExplorer.queriesClient = fakeClientQuery;
-  const props = {
-    explorer: fakeExplorer,
-    closePanel: (): void => undefined,
-  };
-
-  it("Should render Default properly", () => {
-    const wrapper = mount(<BrowseQueriesPanel {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("Should show empty view when query is empty []", () => {
-    const wrapper = mount(<BrowseQueriesPanel {...props} />);
-    expect(wrapper.exists("#emptyQueryBanner")).toBe(true);
-  });
-});
--- a/src/Explorer/Panes/BrowseQueriesPanel/index.tsx
+++ b/src/Explorer/Panes/BrowseQueriesPanel/index.tsx
@@ -1,63 +0,0 @@
-import React, { FunctionComponent } from "react";
-import { Areas } from "../../../Common/Constants";
-import { logError } from "../../../Common/Logger";
-import { Query } from "../../../Contracts/DataModels";
-import { Collection } from "../../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import {
-  QueriesGridComponent,
-  QueriesGridComponentProps,
-} from "../../Controls/QueriesGridReactComponent/QueriesGridComponent";
-import Explorer from "../../Explorer";
-import QueryTab from "../../Tabs/QueryTab";
-
-interface BrowseQueriesPanelProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-export const BrowseQueriesPanel: FunctionComponent<BrowseQueriesPanelProps> = ({
-  explorer,
-  closePanel,
-}: BrowseQueriesPanelProps): JSX.Element => {
-  const loadSavedQuery = (savedQuery: Query): void => {
-    const selectedCollection: Collection = explorer && explorer.findSelectedCollection();
-    if (!selectedCollection) {
-      // should never get into this state because this pane is only accessible through the query tab
-      logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
-      return;
-    } else if (userContext.apiType === "Mongo") {
-      selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
-    } else {
-      selectedCollection.onNewQueryClick(selectedCollection, undefined);
-    }
-    const queryTab = explorer.tabsManager.activeTab() as QueryTab;
-    queryTab.tabTitle(savedQuery.queryName);
-    queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
-    queryTab.initialEditorContent(savedQuery.query);
-    queryTab.sqlQueryEditorContent(savedQuery.query);
-    trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
-      dataExplorerArea: Areas.ContextualPane,
-      queryName: savedQuery.queryName,
-      paneTitle: "Open Saved Queries",
-    });
-    closePanel();
-  };
-
-  const props: QueriesGridComponentProps = {
-    queriesClient: explorer.queriesClient,
-    onQuerySelect: loadSavedQuery,
-    containerVisible: true,
-    saveQueryEnabled: explorer.canSaveQueries(),
-  };
-
-  return (
-    <div className="panelFormWrapper">
-      <div className="panelMainContent">
-        <QueriesGridComponent {...props} />
-      </div>
-    </div>
-  );
-};
--- a/src/Explorer/Panes/CassandraAddCollectionPane.html
+++ b/src/Explorer/Panes/CassandraAddCollectionPane.html
@@ -114,7 +114,7 @@
              aria-label="Keyspace id"
            />

-            <datalist id="keyspacesList" data-bind="foreach: container.databases">
+            <datalist id="keyspacesList" data-bind="foreach: container.nonSystemDatabases">
              <option data-bind="value: $data.id"></option>
            </datalist>

--- a/src/Explorer/Panes/CassandraAddCollectionPane.ts
+++ b/src/Explorer/Panes/CassandraAddCollectionPane.ts
@@ -1,20 +1,21 @@
-import * as ko from "knockout";
 import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { HashMap } from "../../Common/HashMap";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
 import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { HashMap } from "../../Common/HashMap";
+import { configContext, Platform } from "../../ConfigContext";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { userContext } from "../../UserContext";

 export default class CassandraAddCollectionPane extends ContextualPaneBase {
  public createTableQuery: ko.Observable<string>;
@@ -116,12 +117,17 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {

    this.resetData();

+    this.container.flight.subscribe(() => {
+      this.resetData();
+    });
+
    this.requestUnitsUsageCostDedicated = ko.computed(() => {
      const account = this.container.databaseAccount();
      if (!account) {
        return "";
      }

+      const serverId = this.container.serverId();
      const regions =
        (account &&
          account.properties &&
@@ -133,15 +139,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
      let estimatedSpend: string;
      let estimatedDedicatedSpendAcknowledge: string;
      if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
        estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
          offerThroughput,
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isAutoPilotSelected()
@@ -149,13 +150,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
      } else {
        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
          this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster
        );
        estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isAutoPilotSelected()
@@ -171,6 +172,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
        return "";
      }

+      const serverId = this.container.serverId();
      const regions =
        (account &&
          account.properties &&
@@ -181,15 +183,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
      let estimatedSpend: string;
      let estimatedSharedSpendAcknowledge: string;
      if (!this.isSharedAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
        estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.keyspaceThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isSharedAutoPilotSelected()
@@ -197,13 +194,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
      } else {
        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster
        );
        estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
          regions,
          multimaster,
          this.isSharedAutoPilotSelected()
@@ -218,7 +215,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
    });

    this.canRequestSupport = ko.pureComputed(() => {
-      if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
+      if (configContext.platform !== Platform.Emulator && !this.container.isTryCosmosDBSubscription()) {
        const offerThroughput: number = this.throughput();
        return offerThroughput <= 100000;
      }
@@ -256,8 +253,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
        });
        this.keyspaceIds(cachedKeyspaceIdsList);
      };
-      this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
-      updateKeyspaceIds(this.container.databases());
+      this.container.nonSystemDatabases.subscribe((newDatabases: ViewModels.Database[]) =>
+        updateKeyspaceIds(newDatabases)
+      );
+      updateKeyspaceIds(this.container.nonSystemDatabases());
    }

    this.autoPilotUsageCost = ko.pureComputed<string>(() => {
@@ -301,12 +300,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
        partitionKey: "",
        databaseId: this.keyspaceId(),
      }),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
        storage: "u",
        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
    };
@@ -353,12 +352,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
        hasDedicatedThroughput: this.dedicateTableThroughput(),
      }),
      keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
      subscriptionQuotaId: userContext.quotaId,
      defaultsCheck: {
        storage: "u",
        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
      },
      dataExplorerArea: Constants.Areas.ContextualPane,
      toCreateKeyspace: toCreateKeyspace,
@@ -397,12 +396,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
            hasDedicatedThroughput: this.dedicateTableThroughput(),
          }),
          keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
          subscriptionQuotaId: userContext.quotaId,
          defaultsCheck: {
            storage: "u",
            throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
          },
          dataExplorerArea: Constants.Areas.ContextualPane,
          toCreateKeyspace: toCreateKeyspace,
@@ -425,12 +424,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
            hasDedicatedThroughput: this.dedicateTableThroughput(),
          },
          keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
          subscriptionQuotaId: userContext.quotaId,
          defaultsCheck: {
            storage: "u",
            throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
          },
          dataExplorerArea: Constants.Areas.ContextualPane,
          toCreateKeyspace: toCreateKeyspace,
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx
@@ -133,7 +133,7 @@ describe("Delete Collection Confirmation Pane", () => {
        .simulate("change", { target: { value: selectedCollectionId } });

      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
      expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);

      wrapper.unmount();
@@ -154,7 +154,7 @@ describe("Delete Collection Confirmation Pane", () => {
        .simulate("change", { target: { value: feedbackText } });

      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
      expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);

      const deleteFeedback = new DeleteFeedback(
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx
@@ -1,19 +1,20 @@
-import { Text, TextField } from "office-ui-fabric-react";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as React from "react";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { PanelFooterComponent } from "./PanelFooterComponent";
+import { Collection } from "../../Contracts/ViewModels";
+import { Text, TextField } from "office-ui-fabric-react";
+import { userContext } from "../../UserContext";
 import { Areas } from "../../Common/Constants";
 import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
-import DeleteFeedback from "../../Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { Collection } from "../../Contracts/ViewModels";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
+import DeleteFeedback from "../../Common/DeleteFeedback";
 import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
+import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
+
 export interface DeleteCollectionConfirmationPanelProps {
  explorer: Explorer;
  closePanel: () => void;
@@ -43,8 +44,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<

  render(): JSX.Element {
    return (
-      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
-        <PanelInfoErrorComponent {...this.getPanelErrorProps()} />
+      <div className="panelContentContainer">
+        <PanelErrorComponent {...this.getPanelErrorProps()} />
        <div className="panelMainContent">
          <div className="confirmDeleteInput">
            <span className="mandatoryStar">* </span>
@@ -78,16 +79,18 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
            </div>
          )}
        </div>
-        <PanelFooterComponent buttonLabel="OK" />
-        {this.state.isExecuting && <PanelLoadingScreen />}
-      </form>
+        <PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
+        <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
+          <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
+        </div>
+      </div>
    );
  }

-  private getPanelErrorProps(): PanelInfoErrorProps {
+  private getPanelErrorProps(): PanelErrorProps {
    if (this.state.formError) {
      return {
-        messageType: "error",
+        isWarning: false,
        message: this.state.formError,
        showErrorDetails: true,
        openNotificationConsole: this.props.openNotificationConsole,
@@ -95,7 +98,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
    }

    return {
-      messageType: "warning",
+      isWarning: true,
      showErrorDetails: false,
      message:
        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
@@ -106,10 +109,9 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
    return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
  }

-  public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
-    event.preventDefault();
-
+  public async submit(): Promise<void> {
    const collection = this.props.explorer.findSelectedCollection();
+
    if (!collection || this.inputCollectionName !== collection.id()) {
      const errorMessage = "Input collection name does not match the selected collection";
      this.setState({ formError: errorMessage });
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
@@ -0,0 +1,109 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+            click: cancel,
+            clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="deletedatabaseconfirmationpane">
+    <!-- Delete Databaes Confirmation form - Start -->
+    <div class="contextual-pane-in">
+      <form
+        class="paneContentContainer"
+        data-bind="
+                    submit: submit"
+      >
+        <!-- Delete Database Confirmation header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                            click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Delete Database Confirmation header - End -->
+
+        <div class="warningErrorContainer" data-bind="visible: !formErrors()">
+          <div class="warningErrorContent">
+            <span><img class="paneWarningIcon" src="/warning.svg" alt="Warning" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              Warning! The action you are about to take cannot be undone. Continuing will permanently delete this
+              resource and all of its children resources.
+            </span>
+          </div>
+        </div>
+
+        <!-- Delete Database Confirmation errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="
+                        visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a class="errorLink" role="link" data-bind="click: showErrorDetails">More details</a>
+            </span>
+          </div>
+        </div>
+        <!-- Delete Database Confirmation errors - End -->
+
+        <!-- Delete Database Confirmation inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <span class="mandatoryStar">*</span> <span data-bind="text: databaseIdConfirmationText"></span>
+            <p>
+              <input
+                type="text"
+                name="databaseIdConfirmation"
+                data-test="confirmDatabaseId"
+                required
+                class="collid"
+                data-bind="value: databaseIdConfirmation, hasFocus: firstFieldHasFocus"
+                aria-label="Confirm by typing the database id"
+              />
+            </p>
+          </div>
+          <div data-bind="visible: recordDeleteFeedback">
+            <div>Help us improve Azure Cosmos DB!</div>
+            <div>What is the reason why you are deleting this database?</div>
+            <p>
+              <textarea
+                type="text"
+                data-test="databaseDeleteFeedback"
+                name="databaseDeleteFeedback"
+                rows="3"
+                cols="53"
+                maxlength="512"
+                class="collid"
+                data-bind="value: databaseDeleteFeedback"
+                aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
+              >
+              </textarea>
+            </p>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input type="submit" data-test="deleteDatabase" value="OK" class="btncreatecoll1" />
+          </div>
+        </div>
+        <!-- Delete Database Confirmation inputs - End -->
+      </form>
+    </div>
+    <!-- Delete Database Confirmation form - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
@@ -0,0 +1,127 @@
+jest.mock("../../Common/dataAccess/deleteDatabase");
+jest.mock("../../Shared/Telemetry/TelemetryProcessor");
+import * as ko from "knockout";
+import Q from "q";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import DeleteDatabaseConfirmationPane from "./DeleteDatabaseConfirmationPane";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+import Explorer from "../Explorer";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { TreeNode } from "../../Contracts/ViewModels";
+import { TabsManager } from "../Tabs/TabsManager";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+
+describe("Delete Database Confirmation Pane", () => {
+  describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
+    let explorer: Explorer;
+
+    beforeAll(() => {
+      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
+    });
+
+    beforeEach(() => {
+      explorer = new Explorer();
+    });
+
+    it("should be true if only 1 database", () => {
+      let database = {} as ViewModels.Database;
+      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+      expect(explorer.isLastDatabase()).toBe(true);
+    });
+
+    it("should be false if only 2 databases", () => {
+      let database = {} as ViewModels.Database;
+      let database2 = {} as ViewModels.Database;
+      explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
+      expect(explorer.isLastDatabase()).toBe(false);
+    });
+
+    it("should be false if not last empty database", () => {
+      let database = {} as ViewModels.Database;
+      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+      expect(explorer.isLastNonEmptyDatabase()).toBe(false);
+    });
+
+    it("should be true if last non empty database", () => {
+      let database = {} as ViewModels.Database;
+      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
+      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+      expect(explorer.isLastNonEmptyDatabase()).toBe(true);
+    });
+  });
+
+  describe("shouldRecordFeedback()", () => {
+    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
+      let fakeExplorer = {} as Explorer;
+
+      let pane = new DeleteDatabaseConfirmationPane({
+        id: "deletedatabaseconfirmationpane",
+        visible: ko.observable<boolean>(false),
+        container: fakeExplorer as any,
+      });
+
+      fakeExplorer.isLastNonEmptyDatabase = () => true;
+      pane.container = fakeExplorer as any;
+      expect(pane.shouldRecordFeedback()).toBe(true);
+
+      fakeExplorer.isLastDatabase = () => true;
+      fakeExplorer.isSelectedDatabaseShared = () => true;
+      pane.container = fakeExplorer as any;
+      expect(pane.shouldRecordFeedback()).toBe(true);
+
+      fakeExplorer.isLastNonEmptyDatabase = () => false;
+      fakeExplorer.isLastDatabase = () => true;
+      fakeExplorer.isSelectedDatabaseShared = () => false;
+      pane.container = fakeExplorer as any;
+      expect(pane.shouldRecordFeedback()).toBe(false);
+    });
+  });
+
+  describe("submit()", () => {
+    it("on submit() it should log feedback if last non empty database or is last database that has shared throughput", () => {
+      let selectedDatabaseId = "testDB";
+      let fakeExplorer = {} as Explorer;
+      fakeExplorer.findSelectedDatabase = () => {
+        return {
+          id: ko.observable<string>(selectedDatabaseId),
+          rid: "test",
+          collections: ko.observableArray<ViewModels.Collection>(),
+        } as ViewModels.Database;
+      };
+      fakeExplorer.refreshAllDatabases = () => Q.resolve();
+      fakeExplorer.selectedDatabaseId = ko.computed<string>(() => selectedDatabaseId);
+      fakeExplorer.isSelectedDatabaseShared = () => false;
+      const SubscriptionId = "testId";
+      const AccountName = "testAccount";
+      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
+        id: SubscriptionId,
+        name: AccountName,
+      } as DataModels.DatabaseAccount);
+      fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
+      fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
+        return false;
+      });
+      fakeExplorer.selectedNode = ko.observable<TreeNode>();
+      fakeExplorer.tabsManager = new TabsManager();
+      fakeExplorer.isLastNonEmptyDatabase = () => true;
+
+      let pane = new DeleteDatabaseConfirmationPane({
+        id: "deletedatabaseconfirmationpane",
+        visible: ko.observable<boolean>(false),
+        container: fakeExplorer as any,
+      });
+      pane.databaseIdConfirmation = ko.observable<string>(selectedDatabaseId);
+      const Feedback = "my feedback";
+      pane.databaseDeleteFeedback(Feedback);
+
+      return pane.submit().then(() => {
+        let deleteFeedback = new DeleteFeedback(SubscriptionId, AccountName, DataModels.ApiKind.SQL, Feedback);
+        expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
+          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+        });
+      });
+    });
+  });
+});
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
@@ -0,0 +1,143 @@
+import * as ko from "knockout";
+import Q from "q";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { CassandraAPIDataClient } from "../Tables/TableDataClient";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+import { ARMError } from "../../Utils/arm/request";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+
+export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
+  public databaseIdConfirmationText: ko.Observable<string>;
+  public databaseIdConfirmation: ko.Observable<string>;
+  public databaseDeleteFeedback: ko.Observable<string>;
+  public recordDeleteFeedback: ko.Observable<boolean>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.databaseIdConfirmationText = ko.observable<string>("Confirm by typing the database id");
+    this.databaseIdConfirmation = ko.observable<string>();
+    this.databaseDeleteFeedback = ko.observable<string>();
+    this.recordDeleteFeedback = ko.observable<boolean>(false);
+    this.title("Delete Database");
+    this.resetData();
+  }
+
+  public submit(): Q.Promise<any> {
+    if (!this._isValid()) {
+      const selectedDatabase: ViewModels.Database = this.container.findSelectedDatabase();
+      this.formErrors("Input database name does not match the selected database");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Error while deleting collection ${selectedDatabase && selectedDatabase.id()}: ${this.formErrors()}`
+      );
+      return Q.resolve();
+    }
+
+    this.formErrors("");
+    this.isExecuting(true);
+    const selectedDatabase = this.container.findSelectedDatabase();
+    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
+      databaseId: selectedDatabase.id(),
+      dataExplorerArea: Constants.Areas.ContextualPane,
+      paneTitle: this.title(),
+    });
+    return Q(
+      deleteDatabase(selectedDatabase.id()).then(
+        () => {
+          this.isExecuting(false);
+          this.close();
+          this.container.refreshAllDatabases();
+          this.container.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
+          this.container.selectedNode(null);
+          selectedDatabase
+            .collections()
+            .forEach((collection: ViewModels.Collection) =>
+              this.container.tabsManager.closeTabsByComparator(
+                (tab) =>
+                  tab.node?.id() === collection.id() &&
+                  (tab.node as ViewModels.Collection).databaseId === collection.databaseId
+              )
+            );
+          this.resetData();
+          TelemetryProcessor.traceSuccess(
+            Action.DeleteDatabase,
+            {
+              databaseId: selectedDatabase.id(),
+              dataExplorerArea: Constants.Areas.ContextualPane,
+              paneTitle: this.title(),
+            },
+            startKey
+          );
+
+          if (this.shouldRecordFeedback()) {
+            let deleteFeedback = new DeleteFeedback(
+              this.container.databaseAccount().id,
+              this.container.databaseAccount().name,
+              DefaultExperienceUtility.getApiKindFromDefaultExperience(this.container.defaultExperience()),
+              this.databaseDeleteFeedback()
+            );
+
+            TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
+              message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+            });
+
+            this.databaseDeleteFeedback("");
+          }
+        },
+        (error: any) => {
+          this.isExecuting(false);
+          const errorMessage = getErrorMessage(error);
+          this.formErrors(errorMessage);
+          this.formErrorsDetails(errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.DeleteDatabase,
+            {
+              databaseId: selectedDatabase.id(),
+              dataExplorerArea: Constants.Areas.ContextualPane,
+              paneTitle: this.title(),
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+    );
+  }
+
+  public resetData() {
+    this.databaseIdConfirmation("");
+    super.resetData();
+  }
+
+  public async open() {
+    await this.container.loadSelectedDatabaseOffer();
+    this.recordDeleteFeedback(this.shouldRecordFeedback());
+    super.open();
+  }
+
+  public shouldRecordFeedback(): boolean {
+    return (
+      this.container.isLastNonEmptyDatabase() ||
+      (this.container.isLastDatabase() && this.container.isSelectedDatabaseShared())
+    );
+  }
+
+  private _isValid(): boolean {
+    const selectedDatabase = this.container.findSelectedDatabase();
+    if (!selectedDatabase) {
+      return false;
+    }
+
+    return this.databaseIdConfirmation() === selectedDatabase.id();
+  }
+}
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx
@@ -1,139 +0,0 @@
-jest.mock("../../Common/dataAccess/deleteDatabase");
-jest.mock("../../Shared/Telemetry/TelemetryProcessor");
-import { mount, ReactWrapper, shallow } from "enzyme";
-import * as ko from "knockout";
-import React from "react";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import { ApiKind, DatabaseAccount } from "../../Contracts/DataModels";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
-import { DeleteDatabaseConfirmationPanel } from "./DeleteDatabaseConfirmationPanel";
-
-describe("Delete Database Confirmation Pane", () => {
-  describe("shouldRecordFeedback()", () => {
-    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
-      const fakeExplorer = new Explorer();
-      fakeExplorer.refreshAllDatabases = () => undefined;
-      fakeExplorer.isLastCollection = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      database.id = ko.observable<string>("testDatabse");
-
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        openNotificationConsole: (): void => undefined,
-        selectedDatabase: database,
-      };
-
-      const wrapper = shallow(<DeleteDatabaseConfirmationPanel {...props} />);
-      props.explorer.isLastNonEmptyDatabase = () => true;
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
-
-      props.explorer.isLastNonEmptyDatabase = () => false;
-      props.explorer.isLastDatabase = () => false;
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
-
-      props.explorer.isLastNonEmptyDatabase = () => false;
-      props.explorer.isLastDatabase = () => true;
-      props.explorer.isSelectedDatabaseShared = () => false;
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
-    });
-  });
-
-  describe("submit()", () => {
-    const selectedDatabaseId = "testDatabse";
-    const fakeExplorer = new Explorer();
-    fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.isLastCollection = () => true;
-    fakeExplorer.isSelectedDatabaseShared = () => false;
-
-    let wrapper: ReactWrapper;
-    beforeAll(() => {
-      updateUserContext({
-        databaseAccount: {
-          name: "testDatabaseAccountName",
-          properties: {
-            cassandraEndpoint: "testEndpoint",
-          },
-          id: "testDatabaseAccountId",
-        } as DatabaseAccount,
-        defaultExperience: DefaultAccountExperienceType.DocumentDB,
-      });
-      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-      (TelemetryProcessor.trace as jest.Mock).mockReturnValue(undefined);
-    });
-
-    beforeEach(() => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      database.id = ko.observable<string>(selectedDatabaseId);
-
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        openNotificationConsole: (): void => undefined,
-        selectedDatabase: database,
-      };
-
-      wrapper = mount(<DeleteDatabaseConfirmationPanel {...props} />);
-      props.explorer.isLastNonEmptyDatabase = () => true;
-      wrapper.setProps(props);
-    });
-
-    it("Should call delete database", () => {
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
-
-      wrapper
-        .find("#confirmDatabaseId")
-        .hostNodes()
-        .simulate("change", { target: { value: selectedDatabaseId } });
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
-      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
-      wrapper.unmount();
-    });
-
-    it("should record feedback", async () => {
-      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
-      wrapper
-        .find("#confirmDatabaseId")
-        .hostNodes()
-        .simulate("change", { target: { value: selectedDatabaseId } });
-
-      expect(wrapper.exists("#deleteDatabaseFeedbackInput")).toBe(true);
-      const feedbackText = "Test delete Database feedback text";
-      wrapper
-        .find("#deleteDatabaseFeedbackInput")
-        .hostNodes()
-        .simulate("change", { target: { value: feedbackText } });
-
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
-      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
-
-      const deleteFeedback = new DeleteFeedback(
-        "testDatabaseAccountId",
-        "testDatabaseAccountName",
-        ApiKind.SQL,
-        feedbackText
-      );
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
-        message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-      });
-      wrapper.unmount();
-    });
-  });
-});
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -1,168 +0,0 @@
-import { useBoolean } from "@uifabric/react-hooks";
-import { Text, TextField } from "office-ui-fabric-react";
-import React, { FunctionComponent, useState } from "react";
-import { Areas } from "../../Common/Constants";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
-
-interface DeleteDatabaseConfirmationPanelProps {
-  explorer: Explorer;
-  closePanel: () => void;
-  openNotificationConsole: () => void;
-  selectedDatabase: Database;
-}
-
-export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = (
-  props: DeleteDatabaseConfirmationPanelProps
-): JSX.Element => {
-  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-
-  const [formError, setFormError] = useState<string>("");
-  const [databaseInput, setDatabaseInput] = useState<string>("");
-  const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
-
-  const getPanelErrorProps = (): PanelInfoErrorProps => {
-    if (formError) {
-      return {
-        messageType: "error",
-        message: formError,
-        showErrorDetails: true,
-        openNotificationConsole: props.openNotificationConsole,
-      };
-    }
-
-    return {
-      messageType: "warning",
-      showErrorDetails: false,
-      message:
-        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
-    };
-  };
-
-  const submit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    const { selectedDatabase, explorer } = props;
-    event.preventDefault();
-    if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
-      setFormError("Input database name does not match the selected database");
-      logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
-      return;
-    }
-    setFormError("");
-    setLoadingTrue();
-
-    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
-      databaseId: selectedDatabase.id(),
-      dataExplorerArea: Areas.ContextualPane,
-      paneTitle: "Delete Database",
-    });
-
-    try {
-      await deleteDatabase(selectedDatabase.id());
-      props.closePanel();
-      explorer.refreshAllDatabases();
-      explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
-      explorer.selectedNode(undefined);
-      selectedDatabase
-        .collections()
-        .forEach((collection: Collection) =>
-          explorer.tabsManager.closeTabsByComparator(
-            (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
-          )
-        );
-      TelemetryProcessor.traceSuccess(
-        Action.DeleteDatabase,
-        {
-          databaseId: selectedDatabase.id(),
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: "Delete Database",
-        },
-        startKey
-      );
-
-      if (shouldRecordFeedback()) {
-        const deleteFeedback = new DeleteFeedback(
-          userContext?.databaseAccount.id,
-          userContext?.databaseAccount.name,
-          DefaultExperienceUtility.getApiKindFromDefaultExperience(userContext.defaultExperience),
-          databaseFeedbackInput
-        );
-
-        TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
-          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-        });
-      }
-    } catch (error) {
-      setLoadingFalse();
-      setFormError(error);
-      const errorMessage = getErrorMessage(error);
-      TelemetryProcessor.traceFailure(
-        Action.DeleteDatabase,
-        {
-          databaseId: selectedDatabase.id(),
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: "Delete Database",
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-    }
-  };
-
-  const shouldRecordFeedback = (): boolean => {
-    const { explorer } = props;
-    return explorer.isLastNonEmptyDatabase() || (explorer.isLastDatabase() && explorer.isSelectedDatabaseShared());
-  };
-
-  return (
-    <form className="panelFormWrapper" onSubmit={submit}>
-      <PanelInfoErrorComponent {...getPanelErrorProps()} />
-      <div className="panelMainContent">
-        <div className="confirmDeleteInput">
-          <span className="mandatoryStar">* </span>
-          <Text variant="small">Confirm by typing the database id</Text>
-          <TextField
-            id="confirmDatabaseId"
-            autoFocus
-            styles={{ fieldGroup: { width: 300 } }}
-            onChange={(event, newInput?: string) => {
-              setDatabaseInput(newInput);
-            }}
-          />
-        </div>
-        {shouldRecordFeedback() && (
-          <div className="deleteDatabaseFeedback">
-            <Text variant="small" block>
-              Help us improve Azure Cosmos DB!
-            </Text>
-            <Text variant="small" block>
-              What is the reason why you are deleting this database?
-            </Text>
-            <TextField
-              id="deleteDatabaseFeedbackInput"
-              styles={{ fieldGroup: { width: 300 } }}
-              multiline
-              rows={3}
-              onChange={(event, newInput?: string) => {
-                setDatabaseFeedbackInput(newInput);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      <PanelFooterComponent buttonLabel="OK" />
-      {isLoading && <PanelLoadingScreen />}
-    </form>
-  );
-};
--- a/src/Explorer/Panes/ExecuteSprocParamsPane.html
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane.html
@@ -0,0 +1,175 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+                    click: cancel,
+                    clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="executesprocparamspane">
+    <!-- Input params form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: execute">
+        <!-- Input params header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                                    click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Input params header - End -->
+
+        <!-- Input params errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="
+                            visible: formErrorsDetails() && formErrorsDetails() !== '',
+                            click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Input params errors - End -->
+
+        <!-- Script for each param clause to be used for executing a stored procedure -->
+        <script type="text/html" id="param-template">
+          <tr>
+            <td class="paramTemplateRow">
+              <select class="dataTypeSelector" data-bind="value: type, attr: { 'aria-label': type }">
+                <option value="custom">Custom</option>
+                <option value="string">String</option>
+              </select>
+            </td>
+            <td class="paramTemplateRow">
+              <input class="valueTextBox" aria-label="Param" data-bind="textInput: value" />
+              <span
+                class="spEntityAddCancel"
+                data-bind="click: $parent.deleteParam.bind($parent, $index()), event: { keypress: $parent.onDeleteParamKeyPress.bind($parent, $index()) }"
+                role="button"
+                tabindex="0"
+              >
+                <img src="/Entity_cancel.svg" alt="Delete param" />
+              </span>
+              <span
+                class="spEntityAddCancel"
+                data-bind="click: $parent.addNewParamAtIndex.bind($parent, $index()), event: { keypress: $parent.onAddNewParamAtIndexKeyPress.bind($parent, $index()) }"
+                role="button"
+                tabindex="0"
+              >
+                <img src="/Add-property.svg" alt="Add param" />
+              </span>
+            </td>
+          </tr>
+        </script>
+
+        <!-- Input params input - Start -->
+        <div class="paneMainContent">
+          <div>
+            <!-- Partition key input - Start -->
+            <div class="partitionKeyContainer" data-bind="visible: collectionHasPartitionKey">
+              <div class="inputHeader">Partition key value</div>
+              <div class="scrollBox">
+                <table class="paramsClauseTable">
+                  <thead>
+                    <tr>
+                      <th>Type</th>
+                      <th>Value</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="paramTemplateRow">
+                        <select
+                          class="dataTypeSelector"
+                          data-bind="value: partitionKeyType, attr: { 'aria-label': partitionKeyType }"
+                        >
+                          <option value="custom">Custom</option>
+                          <option value="string">String</option>
+                        </select>
+                      </td>
+                      <td class="paramTemplateRow">
+                        <input
+                          class="partitionKeyValue"
+                          id="partitionKeyValue"
+                          role="textbox"
+                          tabindex="0"
+                          aria-label="Partition key value"
+                          data-bind="textInput: partitionKeyValue"
+                          autofocus
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <!-- Partition key input - End -->
+
+            <!-- Input params table - Start -->
+            <div class="paramsTable">
+              <div class="enterInputParams">Enter input parameters (if any)</div>
+              <div class="scrollBox" id="executeSprocParamsScroll">
+                <table class="paramsClauseTable">
+                  <thead>
+                    <tr>
+                      <th class="paramTableTypeHead">Type</th>
+                      <th>Param</th>
+                    </tr>
+                  </thead>
+                  <tbody data-bind="template: { name: 'param-template', foreach: params }"></tbody>
+                </table>
+              </div>
+              <div
+                id="addNewParamLink"
+                class="addNewParam"
+                data-bind="click: addNewParam, event: { keypress: onAddNewParamKeyPress }, attr:{ title: addNewParamLabel }"
+                role="button"
+                tabindex="0"
+              >
+                <span>
+                  <img src="/Add-property.svg" alt="Add new param" />
+                  <span class="addNewParamLabel" data-bind="text: addNewParamLabel" />
+                </span>
+              </div>
+            </div>
+            <!-- Input params table - End -->
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input
+              type="submit"
+              value="Execute"
+              class="btncreatecoll1"
+              data-bind="{ css: { btnDisabled: !executeButtonEnabled() }}"
+            />
+          </div>
+        </div>
+        <!-- Input param input - End -->
+      </form>
+    </div>
+    <!-- Input params form - End -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>
--- a/src/Explorer/Panes/ExecuteSprocParamsPane.ts
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane.ts
@@ -0,0 +1,172 @@
+import * as ko from "knockout";
+import * as _ from "underscore";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import StoredProcedure from "../Tree/StoredProcedure";
+
+export interface ExecuteSprocParam {
+  type: ko.Observable<string>;
+  value: ko.Observable<string>;
+}
+
+type UnwrappedExecuteSprocParam = {
+  type: string;
+  value: any;
+};
+
+export class ExecuteSprocParamsPane extends ContextualPaneBase {
+  public params: ko.ObservableArray<ExecuteSprocParam>;
+  public partitionKeyType: ko.Observable<string>;
+  public partitionKeyValue: ko.Observable<string>;
+  public collectionHasPartitionKey: ko.Observable<boolean>;
+  public addNewParamLabel: string = "Add New Param";
+  public executeButtonEnabled: ko.Computed<boolean>;
+
+  private _selectedSproc: StoredProcedure;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Input parameters");
+    this.partitionKeyType = ko.observable<string>("custom");
+    this.partitionKeyValue = ko.observable<string>();
+    this.executeButtonEnabled = ko.computed<boolean>(() => this.validPartitionKeyValue());
+    this.params = ko.observableArray<ExecuteSprocParam>([
+      { type: ko.observable<string>("string"), value: ko.observable<string>() },
+    ]);
+    this.collectionHasPartitionKey = ko.observable<boolean>();
+    this.resetData();
+  }
+
+  public open() {
+    super.open();
+    const currentSelectedSproc = this.container && this.container.findSelectedStoredProcedure();
+    if (!!currentSelectedSproc && !!this._selectedSproc && this._selectedSproc.rid !== currentSelectedSproc.rid) {
+      this.params([]);
+      this.partitionKeyValue("");
+    }
+    this._selectedSproc = currentSelectedSproc;
+    this.collectionHasPartitionKey((this.container && !!this.container.findSelectedCollection().partitionKey) || false);
+    const focusElement = document.getElementById("partitionKeyValue");
+    focusElement && focusElement.focus();
+  }
+
+  public execute = () => {
+    this.formErrors("");
+    const partitionKeyValue: string = (() => {
+      if (!this.collectionHasPartitionKey()) {
+        return undefined;
+      }
+
+      const type: string = this.partitionKeyType();
+      let value: string = this.partitionKeyValue();
+
+      if (type === "custom") {
+        if (value === "undefined" || value === undefined) {
+          return undefined;
+        }
+
+        if (value === "null" || value === null) {
+          return null;
+        }
+
+        try {
+          value = JSON.parse(value);
+        } catch (e) {
+          this.formErrors(`Invalid param specified: ${value}`);
+          this.formErrorsDetails(`Invalid param specified: ${value} is not a valid literal value`);
+        }
+      }
+
+      return value;
+    })();
+    const unwrappedParams: UnwrappedExecuteSprocParam[] = ko.toJS(this.params());
+    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = !this.params()
+      ? undefined
+      : _.map(unwrappedParams, (unwrappedParam: UnwrappedExecuteSprocParam) => {
+          let paramValue: string = unwrappedParam.value;
+
+          if (unwrappedParam.type === "custom" && (paramValue === "undefined" || paramValue === "")) {
+            paramValue = undefined;
+          } else if (unwrappedParam.type === "custom") {
+            try {
+              paramValue = JSON.parse(paramValue);
+            } catch (e) {
+              this.formErrors(`Invalid param specified: ${paramValue}`);
+              this.formErrorsDetails(`Invalid param specified: ${paramValue} is not a valid literal value`);
+            }
+          }
+
+          unwrappedParam.value = paramValue;
+          return unwrappedParam;
+        });
+
+    if (this.formErrors()) {
+      return;
+    }
+
+    const sprocParams = wrappedSprocParams && _.pluck(wrappedSprocParams, "value");
+    this._selectedSproc.execute(sprocParams, partitionKeyValue);
+    this.close();
+  };
+
+  private validPartitionKeyValue = (): boolean => {
+    return !this.collectionHasPartitionKey || (this.partitionKeyValue() != null && this.partitionKeyValue().length > 0);
+  };
+
+  public addNewParam = (): void => {
+    this.params.push({ type: ko.observable<string>("string"), value: ko.observable<string>() });
+    this._maintainFocusOnAddNewParamLink();
+  };
+
+  public onAddNewParamKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.addNewParam();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  public addNewParamAtIndex = (index: number): void => {
+    this.params.splice(index, 0, { type: ko.observable<string>("string"), value: ko.observable<string>() });
+  };
+
+  public onAddNewParamAtIndexKeyPress = (index: number, source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.addNewParamAtIndex(index);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public deleteParam = (indexToRemove: number): void => {
+    const params = _.reject(this.params(), (param: ExecuteSprocParam, index: number) => {
+      return index === indexToRemove;
+    });
+    this.params(params);
+  };
+
+  public onDeleteParamKeyPress = (indexToRemove: number, source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.deleteParam(indexToRemove);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public close(): void {
+    super.close();
+    this.formErrors("");
+    this.formErrorsDetails("");
+  }
+
+  private _maintainFocusOnAddNewParamLink(): void {
+    const addNewParamLink = document.getElementById("addNewParamLink");
+    addNewParamLink.scrollIntoView();
+  }
+}
--- a/src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx
@@ -1,91 +0,0 @@
-import {
-  Dropdown,
-  IDropdownOption,
-  IDropdownStyles,
-  IImageProps,
-  Image,
-  Label,
-  Stack,
-  TextField,
-} from "office-ui-fabric-react";
-import React, { FunctionComponent } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
-
-const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
-const options = [
-  { key: "string", text: "String" },
-  { key: "custom", text: "Custom" },
-];
-
-export interface InputParameterProps {
-  dropdownLabel?: string;
-  inputParameterTitle?: string;
-  inputLabel?: string;
-  isAddRemoveVisible: boolean;
-  onDeleteParamKeyPress?: () => void;
-  onAddNewParamKeyPress?: () => void;
-  onParamValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onParamKeyChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
-  paramValue: string;
-  selectedKey: string | number;
-}
-
-export const InputParameter: FunctionComponent<InputParameterProps> = ({
-  dropdownLabel,
-  inputParameterTitle,
-  inputLabel,
-  isAddRemoveVisible,
-  paramValue,
-  selectedKey,
-  onDeleteParamKeyPress,
-  onAddNewParamKeyPress,
-  onParamValueChange,
-  onParamKeyChange,
-}: InputParameterProps): JSX.Element => {
-  const imageProps: IImageProps = {
-    width: 20,
-    height: 30,
-    className: dropdownLabel ? "addRemoveIconLabel" : "addRemoveIcon",
-  };
-
-  return (
-    <>
-      {inputParameterTitle && <Label>{inputParameterTitle}</Label>}
-      <Stack horizontal>
-        <Dropdown
-          label={dropdownLabel && dropdownLabel}
-          selectedKey={selectedKey}
-          onChange={onParamKeyChange}
-          options={options}
-          styles={dropdownStyles}
-        />
-        <TextField
-          label={inputLabel && inputLabel}
-          id="confirmCollectionId"
-          autoFocus
-          value={paramValue}
-          onChange={onParamValueChange}
-        />
-        {isAddRemoveVisible && (
-          <>
-            <Image
-              {...imageProps}
-              src={EntityCancelIcon}
-              alt="Delete param"
-              id="deleteparam"
-              onClick={onDeleteParamKeyPress}
-            />
-            <Image
-              {...imageProps}
-              src={AddPropertyIcon}
-              alt="Add param"
-              id="addparam"
-              onClick={onAddNewParamKeyPress}
-            />
-          </>
-        )}
-      </Stack>
-    </>
-  );
-};
--- a/src/Explorer/Panes/ExecuteSprocParamsPanel/snapshots/index.test.tsx.snap
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/snapshots/index.test.tsx.snap
--- a/src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx
@@ -1,34 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import Explorer from "../../Explorer";
-import { ExecuteSprocParamsPanel } from "./index";
-
-describe("Excute Sproc Param Pane", () => {
-  const fakeExplorer = {} as Explorer;
-  const props = {
-    explorer: fakeExplorer,
-    closePanel: (): void => undefined,
-  };
-
-  it("should render Default properly", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("initially display 2 input field, 1 partition and 1 parameter", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    expect(wrapper.find("input[type='text']")).toHaveLength(2);
-  });
-
-  it("add a new parameter field", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    wrapper.find("#addparam").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(3);
-  });
-
-  it("remove a parameter field", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    wrapper.find("#deleteparam").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
-  });
-});
--- a/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
+++ b/src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx
@@ -1,163 +0,0 @@
-import { useBoolean } from "@uifabric/react-hooks";
-import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
-import React, { FunctionComponent, useState } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-import { InputParameter } from "./InputParameter";
-
-interface ExecuteSprocParamsPaneProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-const imageProps: IImageProps = {
-  width: 20,
-  height: 30,
-};
-
-interface UnwrappedExecuteSprocParam {
-  key: string;
-  text: string;
-}
-
-export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
-  explorer,
-  closePanel,
-}: ExecuteSprocParamsPaneProps): JSX.Element => {
-  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-  const [paramKeyValues, setParamKeyValues] = useState<UnwrappedExecuteSprocParam[]>([{ key: "string", text: "" }]);
-  const [partitionValue, setPartitionValue] = useState<string>("");
-  const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
-  const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
-
-  const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
-    setSelectedKey(item);
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container: explorer,
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "executesprocparamspane",
-    isExecuting: isLoading,
-    title: "Input parameters",
-    submitButtonText: "Execute",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
-  const validateUnwrappedParams = (): boolean => {
-    const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
-    for (let i = 0; i < unwrappedParams.length; i++) {
-      const { key: paramType, text: paramValue } = unwrappedParams[i];
-      if (paramType === "custom" && (paramValue === "" || paramValue === undefined)) {
-        return false;
-      }
-    }
-    return true;
-  };
-
-  const setInvalidParamError = (invalidParam: string): void => {
-    setFormError(`Invalid param specified: ${invalidParam}`);
-    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
-  };
-
-  const submit = (): void => {
-    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
-    const { key: partitionKey } = selectedKey;
-    if (partitionKey === "custom" && (partitionValue === "" || partitionValue === undefined)) {
-      setInvalidParamError(partitionValue);
-      return;
-    }
-    if (!validateUnwrappedParams()) {
-      setInvalidParamError("");
-      return;
-    }
-    setLoadingTrue();
-    const sprocParams = wrappedSprocParams && wrappedSprocParams.map((sprocParam) => sprocParam.text);
-    const currentSelectedSproc = explorer.findSelectedStoredProcedure();
-    currentSelectedSproc.execute(sprocParams, partitionValue);
-    setLoadingFalse();
-    closePanel();
-  };
-
-  const deleteParamAtIndex = (indexToRemove: number): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue.splice(indexToRemove, 1);
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const addNewParamAtIndex = (indexToAdd: number): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue.splice(indexToAdd, 0, { key: "string", text: "" });
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const paramValueChange = (value: string, indexOfInput: number): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue[indexOfInput].text = value;
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const paramKeyChange = (
-    _event: React.FormEvent<HTMLDivElement>,
-    selectedParam: IDropdownOption,
-    indexOfParam: number
-  ): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue[indexOfParam].key = selectedParam.key.toString();
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const addNewParamAtLastIndex = (): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue.splice(cloneParamKeyValue.length, 0, { key: "string", text: "" });
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="panelFormWrapper">
-        <div className="panelMainContent">
-          <InputParameter
-            dropdownLabel="Key"
-            inputParameterTitle="Partition key value"
-            inputLabel="Value"
-            isAddRemoveVisible={false}
-            onParamValueChange={(_event, newInput?: string) => {
-              setPartitionValue(newInput);
-            }}
-            onParamKeyChange={onPartitionKeyChange}
-            paramValue={partitionValue}
-            selectedKey={selectedKey.key}
-          />
-          {paramKeyValues.map((paramKeyValue, index) => (
-            <InputParameter
-              key={paramKeyValue && paramKeyValue.text + index}
-              dropdownLabel={!index && "Key"}
-              inputParameterTitle={!index && "Enter input parameters (if any)"}
-              inputLabel={!index && "Param"}
-              isAddRemoveVisible={true}
-              onDeleteParamKeyPress={() => deleteParamAtIndex(index)}
-              onAddNewParamKeyPress={() => addNewParamAtIndex(index + 1)}
-              onParamValueChange={(event, newInput?: string) => {
-                paramValueChange(newInput, index);
-              }}
-              onParamKeyChange={(event: React.FormEvent<HTMLDivElement>, selectedParam: IDropdownOption) => {
-                paramKeyChange(event, selectedParam, index);
-              }}
-              paramValue={paramKeyValue && paramKeyValue.text}
-              selectedKey={paramKeyValue && paramKeyValue.key}
-            />
-          ))}
-          <Stack horizontal onClick={addNewParamAtLastIndex}>
-            <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
-            <Text className="addNewParamStyle">Add New Param</Text>
-          </Stack>
-        </div>
-      </div>
-    </GenericRightPaneComponent>
-  );
-};
--- a/src/Explorer/Panes/GenericRightPaneComponent.tsx
+++ b/src/Explorer/Panes/GenericRightPaneComponent.tsx
@@ -1,9 +1,9 @@
-import { Subscription } from "knockout";
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
 import * as React from "react";
+import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { KeyCodes } from "../../Common/Constants";
+import { Subscription } from "knockout";
 import ErrorRedIcon from "../../../images/error_red.svg";
 import LoadingIndicatorIcon from "../../../images/LoadingIndicator_3Squares.gif";
-import { KeyCodes } from "../../Common/Constants";
 import Explorer from "../Explorer";

 export interface GenericRightPaneProps {
--- a/src/Explorer/Panes/LoadQueryPane.html
+++ b/src/Explorer/Panes/LoadQueryPane.html
@@ -0,0 +1,88 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
+  <div class="contextual-pane" id="loadQueryPane">
+    <!-- Load Query form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Load Query header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Load Query header - End -->
+
+        <!-- Load Query errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Load Query errors - End -->
+
+        <!-- Load Query inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="renewUploadItemsHeader">Select a query document</div>
+            <input
+              class="importFilesTitle"
+              type="text"
+              role="textbox"
+              disabled
+              data-bind="value: selectedFilesTitle"
+              aria-label="Select a query document"
+              autofocus
+            />
+            <input
+              type="file"
+              id="importQueryInput"
+              accept="text/plain"
+              style="display: none"
+              data-bind="event: { change: updateSelectedFiles }"
+            />
+            <a
+              href="#"
+              id="queryFileImportLink"
+              aria-label="Upload files"
+              tabindex="0"
+              role="button"
+              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
+            >
+              <img class="fileImportImg" src="/folder_16x16.svg" alt="upload files" title="upload files" />
+            </a>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="Load" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Load Query inputs - End -->
+      </form>
+    </div>
+    <!-- Load Query form  - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>
--- a/src/Explorer/Panes/LoadQueryPane.ts
+++ b/src/Explorer/Panes/LoadQueryPane.ts
@@ -0,0 +1,147 @@
+import * as ko from "knockout";
+import * as Q from "q";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as Logger from "../../Common/Logger";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import QueryTab from "../Tabs/QueryTab";
+
+export class LoadQueryPane extends ContextualPaneBase {
+  public selectedFilesTitle: ko.Observable<string>;
+  public files: ko.Observable<FileList>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Load Query");
+    this.resetData();
+
+    this.selectedFilesTitle = ko.observable<string>("");
+    this.files = ko.observable<FileList>();
+    this.files.subscribe((newFiles: FileList) => this.updateSelectedFilesTitle(newFiles));
+    const focusElement = document.getElementById("queryFileImportLink");
+    focusElement && focusElement.focus();
+  }
+
+  public submit() {
+    this.formErrors("");
+    this.formErrorsDetails("");
+    if (!this.files() || this.files().length === 0) {
+      this.formErrors("No file specified");
+      this.formErrorsDetails("No file specified. Please input a file.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not load query -- No file specified. Please input a file."
+      );
+      return;
+    }
+
+    const file: File = this.files().item(0);
+    const id: string = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `Loading query from file ${file.name}`
+    );
+    this.isExecuting(true);
+    this.loadQueryFromFile(this.files().item(0))
+      .then(
+        () => {
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully loaded query from file ${file.name}`
+          );
+          this.close();
+        },
+        (error: any) => {
+          this.formErrors("Failed to load query");
+          this.formErrorsDetails(`Failed to load query: ${error}`);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to load query from file ${file.name}: ${error}`
+          );
+        }
+      )
+      .finally(() => {
+        this.isExecuting(false);
+        NotificationConsoleUtils.clearInProgressMessageWithId(id);
+      });
+  }
+
+  public updateSelectedFiles(element: any, event: any): void {
+    this.files(event.target.files);
+  }
+
+  public open() {
+    super.open();
+    const focusElement = document.getElementById("queryFileImportLink");
+    focusElement && focusElement.focus();
+  }
+
+  public close() {
+    super.close();
+    this.resetData();
+    this.files(undefined);
+    this.resetFileInput();
+  }
+
+  public onImportLinkClick(source: any, event: MouseEvent): boolean {
+    document.getElementById("importQueryInput").click();
+    return false;
+  }
+
+  public onImportLinkKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.onImportLinkClick(source, null);
+      return false;
+    }
+    return true;
+  };
+
+  public loadQueryFromFile(file: File): Q.Promise<void> {
+    const selectedCollection: ViewModels.Collection = this.container && this.container.findSelectedCollection();
+    if (!selectedCollection) {
+      // should never get into this state
+      Logger.logError("No collection was selected", "LoadQueryPane.loadQueryFromFile");
+      return Q.reject("No collection was selected");
+    } else if (this.container.isPreferredApiMongoDB()) {
+      selectedCollection.onNewMongoQueryClick(selectedCollection, null);
+    } else {
+      selectedCollection.onNewQueryClick(selectedCollection, null);
+    }
+    const deferred: Q.Deferred<void> = Q.defer<void>();
+    const reader = new FileReader();
+    reader.onload = (evt: any): void => {
+      const fileData: string = evt.target.result;
+      const queryTab = this.container.tabsManager.activeTab() as QueryTab;
+      queryTab.initialEditorContent(fileData);
+      queryTab.sqlQueryEditorContent(fileData);
+      deferred.resolve();
+    };
+
+    reader.onerror = (evt: ProgressEvent): void => {
+      deferred.reject((evt as any).error.message);
+    };
+
+    reader.readAsText(file);
+    return deferred.promise;
+  }
+
+  private updateSelectedFilesTitle(fileList: FileList) {
+    this.selectedFilesTitle("");
+
+    if (!fileList || fileList.length === 0) {
+      return;
+    }
+
+    for (let i = 0; i < fileList.length; i++) {
+      const originalTitle = this.selectedFilesTitle();
+      this.selectedFilesTitle(originalTitle + `"${fileList.item(i).name}"`);
+    }
+  }
+
+  private resetFileInput(): void {
+    const inputElement = $("#importQueryInput");
+    inputElement.wrap("<form>").closest("form").get(0).reset();
+    inputElement.unwrap();
+  }
+}
--- a/src/Explorer/Panes/LoadQueryPanel/snapshots/index.test.tsx.snap
+++ b/src/Explorer/Panes/LoadQueryPanel/snapshots/index.test.tsx.snap
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Load Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
-  container={Object {}}
-  formError=""
-  formErrorDetail=""
-  id="loadQueryPane"
-  isExecuting={false}
-  onClose={[Function]}
-  onSubmit={[Function]}
-  submitButtonText="Load"
-  title="Load Query"
->
-  <div
-    className="panelFormWrapper"
-  >
-    <div
-      className="panelMainContent"
-    >
-      <Stack
-        horizontal={true}
-      >
-        <StyledTextFieldBase
-          autoFocus={true}
-          id="confirmCollectionId"
-          label="Select a query document"
-          readOnly={true}
-          styles={
-            Object {
-              "fieldGroup": Object {
-                "width": 300,
-              },
-            }
-          }
-          value=""
-        />
-        <label
-          className="customFileUpload"
-          htmlFor="importQueryInputId"
-        >
-          <StyledImageBase
-            alt="upload files"
-            className="fileIcon"
-            height={20}
-            imageFit={4}
-            src=""
-            width={20}
-          />
-          <input
-            accept="text/plain"
-            className="fileUpload"
-            id="importQueryInputId"
-            onChange={[Function]}
-            type="file"
-          />
-        </label>
-      </Stack>
-    </div>
-  </div>
-</GenericRightPaneComponent>
-`;
--- a/Show More
+++ b/Show More