Merge branch 'master' into languy-resource-tree-to-react

Remove comment and test code
Fix build issues and reformat
2025-12-24 03:11:32 +00:00 · 2021-03-16 16:27:30 +01:00 · 2021-03-15 17:35:35 +01:00 · 2021-03-12 14:01:35 +01:00 · 2021-03-12 11:21:01 +01:00 · 2021-03-12 10:36:27 +01:00
264 changed files with 39617 additions and 32389 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,20 +127,29 @@ 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
 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
@@ -245,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
@@ -298,6 +312,8 @@ src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.t
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
+src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
    browser: true,
    es6: true,
  },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  globals: {
    Atomics: "readonly",
@@ -20,7 +20,7 @@ module.exports = {
  overrides: [
    {
      files: ["**/*.tsx"],
-      extends: ["plugin:react/recommended"],
+      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
      plugins: ["react"],
    },
    {
@@ -42,8 +42,6 @@ module.exports = {
    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
    eqeqeq: "error",
    "react/display-name": "off",
-    "react-hooks/rules-of-hooks": "warn", // TODO: error
-    "react-hooks/exhaustive-deps": "warn", // TODO: error
    "no-restricted-syntax": [
      "error",
      {
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1 +0,0 @@
-[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)
--- 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/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/less/tree.less
+++ b/less/tree.less
@@ -7,6 +7,7 @@
    .main {
        height: 100%;
    }
+    border-right: 1px solid @BaseMedium;
 }

 .resourceTreeScroll {
--- 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",
@@ -25,12 +25,12 @@
    "@nteract/iron-icons": "1.0.0",
    "@nteract/jupyter-widgets": "2.0.0",
    "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.6.1",
+    "@nteract/markdown": "4.4.0",
    "@nteract/monaco-editor": "3.2.2",
    "@nteract/octicons": "2.0.0",
    "@nteract/outputs": "3.0.9",
    "@nteract/presentational-components": "3.0.7",
-    "@nteract/stateful-components": "1.7.7",
+    "@nteract/stateful-components": "1.7.0",
    "@nteract/styles": "2.0.2",
    "@nteract/transform-geojson": "5.1.8",
    "@nteract/transform-model-debug": "5.0.1",
@@ -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",
@@ -200,8 +215,8 @@
    "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
    "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
    "build:contracts": "npm run compile:contracts",
-    "strict:find": "node ./strict-null-checks/find.js",
-    "strict:add": "node ./strict-null-checks/auto-add.js",
+    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
+    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
    "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
  },
--- 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,70 +0,0 @@
-const express = require("express");
-const { createProxyMiddleware } = require("http-proxy-middleware");
-const port = process.env.PORT || 3000;
-const fetch = require("node-fetch");
-
-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.get("/pull/:pr(\\d+)", (req, res) => {
-  const pr = req.params.pr;
-  const [, query] = req.originalUrl.split("?");
-  const search = new URLSearchParams(query);
-
-  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
-    .then((response) => response.json())
-    .then(({ head: { ref, sha } }) => {
-      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
-      prUrl.hash = ref;
-      search.set("feature.pr", prUrl.href);
-
-      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
-      explorer.search = search.toString();
-
-      const portal = new URL("https://ms.portal.azure.com/");
-      portal.searchParams.set("dataExplorerSource", explorer.href);
-      portal.hash =
-        "@microsoft.onmicrosoft.com/resource/subscriptions/b9c77f10-b438-4c32-9819-eef8a654e478/resourceGroups/stfaul/providers/Microsoft.DocumentDb/databaseAccounts/stfaul-sql/dataExplorer";
-
-      return res.redirect(portal.href);
-    })
-    .catch(() => res.sendStatus(500));
-});
-
-app.listen(port, () => {
-  console.log(`Example app listening on port: ${port}`);
-});
--- a/preview/package-lock.json
+++ b/preview/package-lock.json
--- a/preview/package.json
+++ b/preview/package.json
@@ -1,18 +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",
-    "node-fetch": "^2.6.1"
-  }
-}
--- 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";
@@ -368,6 +392,9 @@ export class Notebook {
  public static readonly kernelRestartInitialDelayMs = 1000;
  public static readonly kernelRestartMaxDelayMs = 20000;
  public static readonly autoSaveIntervalMs = 120000;
+
+  public static readonly MyNotebooksTitle = "My Notebooks";
+  public static readonly GitHubReposTitle = "GitHub repos";
 }

 export class SparkLibrary {
--- 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>;
@@ -48,18 +48,17 @@ export function sendCachedDataMessage<TResponseDataModel>(
 }

 export function sendMessage(data: any): void {
-  _sendMessage({
-    signature: "pcIframe",
-    data: data,
-  });
-}
-
-export function sendReadyMessage(): void {
-  _sendMessage({
-    signature: "pcIframe",
-    kind: "ready",
-    data: "ready",
-  });
+  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",
+        data: data,
+      },
+      portalChildWindow.document.referrer
+    );
+  }
 }

 export function canSendMessage(): boolean {
@@ -75,17 +74,3 @@ export function runGarbageCollector() {
    }
  });
 }
-
-const _sendMessage = (message: any): void => {
-  if (canSendMessage()) {
-    // Portal window can receive messages from only child windows
-    const portalChildWindow = getDataExplorerWindow(window) || window;
-    if (portalChildWindow === window) {
-      // Current window is a child of portal, send message to portal window
-      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
-    } else {
-      // Current window is not a child of portal, send message to the child window instead (which is data explorer)
-      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
-    }
-  }
-};
--- 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/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,15 +1,15 @@
-import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { userContext } from "../../UserContext";
-import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { userContext } from "../../UserContext";

 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
@@ -17,6 +17,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
    if (
      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
    ) {
      return await readCollectionsWithARM(databaseId);
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -1,37 +1,39 @@
-import { ContainerDefinition } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
+import { ContainerDefinition } from "@azure/cosmos";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { userContext } from "../../UserContext";
+import {
+  CreateUpdateOptions,
+  ExtendedResourceProperties,
+  MongoDBCollectionCreateUpdateParameters,
+  MongoDBCollectionResource,
+  SqlContainerCreateUpdateParameters,
+  SqlContainerResource,
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
  createUpdateCassandraTable,
  getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateGremlinGraph,
-  getGremlinGraph,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import {
  createUpdateMongoDBCollection,
  getMongoDBCollection,
 } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import {
-  ExtendedResourceProperties,
-  MongoDBCollectionCreateUpdateParameters,
-  SqlContainerCreateUpdateParameters,
-  SqlContainerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+  createUpdateGremlinGraph,
+  getGremlinGraph,
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { userContext } from "../../UserContext";

 export async function updateCollection(
  databaseId: string,
  collectionId: string,
-  newCollection: Partial<Collection>,
+  newCollection: Collection,
  options: RequestOptions = {}
 ): Promise<Collection> {
  let collection: Collection;
@@ -41,6 +43,7 @@ export async function updateCollection(
    if (
      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
    ) {
      collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
@@ -66,7 +69,7 @@ export async function updateCollection(
 async function updateCollectionWithARM(
  databaseId: string,
  collectionId: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const subscriptionId = userContext.subscriptionId;
  const resourceGroup = userContext.resourceGroup;
@@ -82,15 +85,6 @@ async function updateCollectionWithARM(
      return updateGremlinGraph(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
    case DefaultAccountExperienceType.Table:
      return updateTable(collectionId, subscriptionId, resourceGroup, accountName, newCollection);
-    case DefaultAccountExperienceType.MongoDB:
-      return updateMongoDBCollection(
-        databaseId,
-        collectionId,
-        subscriptionId,
-        resourceGroup,
-        accountName,
-        newCollection
-      );
    default:
      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
  }
@@ -102,7 +96,7 @@ async function updateSqlContainer(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -121,26 +115,35 @@ async function updateSqlContainer(
  throw new Error(`Sql container to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
 }

-export async function updateMongoDBCollection(
+export async function updateMongoDBCollectionThroughRP(
  databaseId: string,
  collectionId: string,
-  subscriptionId: string,
-  resourceGroup: string,
-  accountName: string,
-  newCollection: Partial<Collection>
-): Promise<Collection> {
+  newCollection: MongoDBCollectionResource,
+  updateOptions?: CreateUpdateOptions
+): Promise<MongoDBCollectionResource> {
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+
  const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
-    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateParams: MongoDBCollectionCreateUpdateParameters = {
+      properties: {
+        resource: newCollection,
+        options: updateOptions,
+      },
+    };
+
    const updateResponse = await createUpdateMongoDBCollection(
      subscriptionId,
      resourceGroup,
      accountName,
      databaseId,
      collectionId,
-      getResponse as MongoDBCollectionCreateUpdateParameters
+      updateParams
    );
-    return updateResponse && (updateResponse.properties.resource as Collection);
+
+    return updateResponse && (updateResponse.properties.resource as MongoDBCollectionResource);
  }

  throw new Error(
@@ -154,7 +157,7 @@ async function updateCassandraTable(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -181,7 +184,7 @@ async function updateGremlinGraph(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -205,7 +208,7 @@ async function updateTable(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getTable(subscriptionId, resourceGroup, accountName, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
--- 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,12 +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,18 +1,17 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import { updateCollection } 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 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,
@@ -22,9 +21,16 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
    changeFeedPolicy: undefined,
    analyticalStorageTtl: undefined,
    geospatialConfig: undefined,
+  } as DataModels.Collection),
+  updateMongoDBCollectionThroughRP: jest.fn().mockReturnValue({
+    id: undefined,
+    shardKey: undefined,
    indexes: [],
-  }),
+    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),
 }));
@@ -128,6 +134,7 @@ describe("SettingsComponent", () => {
      loadCollections: undefined,
      findCollectionWithId: undefined,
      openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
      readSettings: undefined,
      onSettingsClick: undefined,
      loadOffer: undefined,
@@ -187,6 +194,7 @@ describe("SettingsComponent", () => {
    };
    await settingsComponentInstance.onSaveClick();
    expect(updateCollection).toBeCalled();
+    expect(updateMongoDBCollectionThroughRP).toBeCalled();
    expect(updateOffer).toBeCalled();
  });

--- 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 } 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(
@@ -782,12 +784,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
      try {
        const newMongoIndexes = this.getMongoIndexesToSave();
-        const newMongoCollection = {
+        const newMongoCollection: MongoDBCollectionResource = {
          ...this.mongoDBCollectionResource,
          indexes: newMongoIndexes,
        };

-        this.mongoDBCollectionResource = await updateCollection(
+        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
          this.collection.databaseId,
          this.collection.id(),
          newMongoCollection
@@ -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 { IGalleryItem, IPinnedRepo } 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,32 +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 { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
+import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
+import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
-import QueryViewModel from "./Tables/QueryBuilder/QueryViewModel";
+import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
@@ -76,7 +77,6 @@ import { TabsManager } from "./Tabs/TabsManager";
 import TerminalTab from "./Tabs/TerminalTab";
 import Database from "./Tree/Database";
 import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
 import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
@@ -94,10 +94,17 @@ export interface ExplorerParams {
  closeSidePanel: () => void;
  closeDialog: () => void;
  openDialog: (props: DialogProps) => void;
-  tabsManager: TabsManager;
+
+  onRefreshNotebookList: () => void;
+  initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
+  getMyNotebooksContentRoot: () => NotebookContentItem;
 }

 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>;
@@ -105,6 +112,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;

  /**
@@ -113,6 +121,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
@@ -153,6 +166,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;
@@ -169,19 +184,25 @@ 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>;
-  private resourceTree: ResourceTreeAdapter;
+  /**
+   * @deprecated
+   * Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
+   * */
+  public isRefreshingExplorer: ko.Observable<boolean>;

  // Resource Token
  public resourceTokenDatabaseId: ko.Observable<string>;
  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>;
@@ -193,11 +214,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 +266,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;
@@ -247,7 +280,7 @@ export default class Explorer {

  private static readonly MaxNbDatabasesToAutoExpand = 5;

-  constructor(params?: ExplorerParams) {
+  constructor(public params?: ExplorerParams) {
    this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
    this.setNotificationConsoleData = params?.setNotificationConsoleData;
    this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
@@ -261,6 +294,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 +302,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 +339,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();
@@ -301,9 +350,9 @@ export default class Explorer {
        Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
          async () => {
            this.isNotebookEnabled(
-              userContext.authType !== AuthType.ResourceToken &&
+              !this.isAuthWithResourceToken() &&
                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
-                  userContext.features.enableNotebooks)
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
            );

            TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
@@ -325,10 +374,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,
@@ -349,20 +398,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);

@@ -442,7 +497,7 @@ export default class Explorer {
    });

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

@@ -501,7 +556,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) {
@@ -523,6 +591,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),
@@ -545,6 +617,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),
@@ -566,6 +645,20 @@ 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),
+
+      container: this,
+    });
+
    this.newVertexPane = new NewVertexPane({
      id: "newvertexpane",
      visible: ko.observable<boolean>(false),
@@ -580,6 +673,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),
@@ -594,17 +738,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,
    ];
@@ -700,6 +854,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;
    }
@@ -724,7 +880,6 @@ export default class Explorer {
        this.notebookManager.initialize({
          container: this,
          notebookBasePath: this.notebookBasePath,
-          resourceTree: this.resourceTree,
          refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
          refreshNotebookList: () => this.refreshNotebookList(),
        });
@@ -739,7 +894,6 @@ export default class Explorer {

    this.isSparkEnabled = ko.observable(false);
    this.isSparkEnabled.subscribe((isEnabled: boolean) => this.refreshCommandBarButtons());
-    this.resourceTree = new ResourceTreeAdapter(this);
    this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
    this.notebookServerInfo = ko.observable<DataModels.NotebookWorkspaceConnectionInfo>({
      notebookServerEndpoint: undefined,
@@ -753,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 {
@@ -859,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);
  }
@@ -905,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,
    });
@@ -917,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,
          {
@@ -931,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(
@@ -1000,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();
  };

@@ -1095,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);
@@ -1216,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;
@@ -1255,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,
@@ -1336,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
    );
  }

@@ -1513,7 +1707,7 @@ export default class Explorer {

    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent);
    promise
-      .then(() => this.resourceTree.triggerRender())
+      .then(() => this.params.onRefreshNotebookList())
      .catch((reason: any) => this.showOkModalDialog("Unable to upload file", reason));
    return promise;
  }
@@ -1521,7 +1715,7 @@ export default class Explorer {
  public async importAndOpen(path: string): Promise<boolean> {
    const name = NotebookUtil.getName(path);
    const item = NotebookUtil.createNotebookContentItem(name, path, "file");
-    const parent = this.resourceTree.myNotebooksContentRoot;
+    const parent = this.params.getMyNotebooksContentRoot();

    if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
      const existingItem = _.find(parent.children, (node) => node.name === name);
@@ -1538,7 +1732,8 @@ export default class Explorer {
  }

  public async importAndOpenContent(name: string, content: string): Promise<boolean> {
-    const parent = this.resourceTree.myNotebooksContentRoot;
+    // const parent = this.params.getMyNotebooksContentRoot();
+    const parent = this.params.getMyNotebooksContentRoot();

    if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
      if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
@@ -1723,7 +1918,6 @@ export default class Explorer {

        return newNotebookFile;
      });
-    result.then(() => this.resourceTree.triggerRender());
    return result;
  }

@@ -1744,7 +1938,6 @@ export default class Explorer {
      defaultInput: "",
      onSubmit: (input: string) => this.notebookManager?.notebookContentClient.createDirectory(parent, input),
    });
-    result.then(() => this.resourceTree.triggerRender());
    return result;
  }

@@ -1900,12 +2093,14 @@ export default class Explorer {
      return false;
    }
  };
+
  private refreshNotebookList = async (): Promise<void> => {
    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
      return;
    }

-    await this.resourceTree.initialize();
+    this.params?.onRefreshNotebookList();
+
    this.notebookManager?.refreshPinnedRepos();
    if (this.notebookToImport) {
      this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
@@ -1968,7 +2163,7 @@ export default class Explorer {
      throw new Error(error);
    }

-    parent = parent || this.resourceTree.myNotebooksContentRoot;
+    parent = parent || this.params.getMyNotebooksContentRoot();

    const notificationProgressId = NotificationConsoleUtils.logConsoleMessage(
      ConsoleDataType.InProgress,
@@ -1992,7 +2187,7 @@ export default class Explorer {
        );
        return this.openNotebook(newFile);
      })
-      .then(() => this.resourceTree.triggerRender())
+      .then(() => this.params.onRefreshNotebookList())
      .catch((error: any) => {
        const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, errorMessage);
@@ -2009,7 +2204,39 @@ export default class Explorer {
      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
  }

-  public refreshContentItem(item: NotebookContentItem): Promise<void> {
+  public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
+    parent = parent || this.params.getMyNotebooksContentRoot();
+
+    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<NotebookContentItem> {
    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
      const error = "Attempt to refresh notebook list, but notebook is not enabled";
      handleError(error, "Explorer/refreshContentItem");
@@ -2171,12 +2398,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 +2437,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 +2530,7 @@ export default class Explorer {
  }

  public openDeleteCollectionConfirmationPane(): void {
-    userContext.features.enableKOPanel
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
      ? this.deleteCollectionConfirmationPane.open()
      : this.openSidePanel(
          "Delete Collection",
@@ -2290,74 +2541,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)}
-      />
-    );
-  }
-
-  public openTableSelectQueryPanel(queryViewModal: QueryViewModel): void {
-    this.openSidePanel(
-      "Select Column",
-      <TableQuerySelectPanel explorer={this} closePanel={this.closeSidePanel} queryViewModel={queryViewModal} />
-    );
-  }
 }
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
@@ -1,6 +1,6 @@
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as GraphData from "./GraphData";
 import { NeighborVertexBasicInfo } from "./GraphExplorer";
+import * as GraphData from "./GraphData";
+import * as ViewModels from "../../../Contracts/ViewModels";

 interface JoinArrayMaxCharOutput {
  result: string; // string output
@@ -13,9 +13,9 @@ interface EdgePropertyType {
  inV?: string;
 }

-export const getNeighborTitle = (neighbor: NeighborVertexBasicInfo): string => {
+export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
  return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
-};
+}

 /**
 * Collect all edges from this node
@@ -23,11 +23,11 @@ export const getNeighborTitle = (neighbor: NeighborVertexBasicInfo): string => {
 * @param graphData
 * @param newNodes (optional) object describing new nodes encountered
 */
-export const createEdgesfromNode = (
+export function createEdgesfromNode(
  vertex: GraphData.GremlinVertex,
  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
  newNodes?: { [id: string]: boolean }
-): void => {
+): void {
  if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
    const outE = vertex.outE;
    for (const label in outE) {
@@ -66,7 +66,7 @@ export const createEdgesfromNode = (
      });
    }
  }
-};
+}

 /**
 * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
@@ -75,7 +75,7 @@ export const createEdgesfromNode = (
 * @param maxSize
 * @return
 */
-export const getLimitedArrayString = (array: string[], maxSize: number): JoinArrayMaxCharOutput => {
+export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
  if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
    return { result: "", consumedCount: 0 };
  }
@@ -96,16 +96,16 @@ export const getLimitedArrayString = (array: string[], maxSize: number): JoinArr
    result: output,
    consumedCount: i + 1,
  };
-};
+}

-export const createFetchEdgePairQuery = (
+export function createFetchEdgePairQuery(
  outE: boolean,
  pkid: string,
  excludedEdgeIds: string[],
  startIndex: number,
  pageSize: number,
  withoutStepArgMaxLenght: number
-): string => {
+): string {
  let gremlinQuery: string;
  if (excludedEdgeIds.length > 0) {
    // build a string up to max char
@@ -128,15 +128,15 @@ export const createFetchEdgePairQuery = (
    }().as('v').select('e', 'v')`;
  }
  return gremlinQuery;
-};
+}

 /**
 * Trim graph
 */
-export const trimGraph = (
+export function trimGraph(
  currentRoot: GraphData.GremlinVertex,
  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-): void => {
+) {
  const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
  graphData.unloadAllVertices(importantNodes);

@@ -144,32 +144,32 @@ export const trimGraph = (
  $.each(graphData.ids, (index: number, id: string) => {
    graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
  });
-};
+}

-export const addRootChildToGraph = (
+export function addRootChildToGraph(
  root: GraphData.GremlinVertex,
  child: GraphData.GremlinVertex,
  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-): void => {
+) {
  child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
  graphData.addVertex(child);
  createEdgesfromNode(child, graphData);
  graphData.addNeighborInfo(child);
-};
+}

 /**
 * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
 * @param value
 */
-export const escapeDoubleQuotes = (value: string): string => {
+export function escapeDoubleQuotes(value: string): string {
  return value === undefined ? value : value.replace(/"/g, '\\"');
-};
+}

 /**
 * Surround with double-quotes if val is a string.
 * @param val
 */
-export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string => {
+export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
  switch (ip.type) {
    case "number":
    case "boolean":
@@ -179,12 +179,12 @@ export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string =>
    default:
      return `"${escapeDoubleQuotes(ip.value as string)}"`;
  }
-};
+}

 /**
 * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
 * @param value
 */
-export const escapeSingleQuotes = (value: string): string => {
+export function escapeSingleQuotes(value: string): string {
  return value === undefined ? value : value.replace(/'/g, "\\'");
-};
+}
--- 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/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,
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
@@ -1,9 +1,9 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { shallow } from "enzyme";
 import {
-  ConsoleDataType,
-  NotificationConsoleComponent,
  NotificationConsoleComponentProps,
+  NotificationConsoleComponent,
+  ConsoleDataType,
 } from "./NotificationConsoleComponent";

 describe("NotificationConsoleComponent", () => {
@@ -12,7 +12,7 @@ describe("NotificationConsoleComponent", () => {
      consoleData: undefined,
      isConsoleExpanded: false,
      inProgressConsoleDataIdToBeDeleted: "",
-      setIsConsoleExpanded: (): void => undefined,
+      setIsConsoleExpanded: (isExpanded: boolean): void => {},
    };
  };

@@ -98,7 +98,7 @@ describe("NotificationConsoleComponent", () => {
    wrapper.setProps(props);
    expect(wrapper.find(".notificationConsoleData .date").text()).toEqual(date);
    expect(wrapper.find(".notificationConsoleData .message").text()).toEqual(message);
-    expect(wrapper.exists(`.notificationConsoleData .${iconClassName}`)).toBe(true);
+    expect(wrapper.exists(`.notificationConsoleData .${iconClassName}`));
  };

  it("renders progress notifications", () => {
@@ -139,7 +139,7 @@ describe("NotificationConsoleComponent", () => {
    wrapper.setProps(props);

    wrapper.find(".clearNotificationsButton").simulate("click");
-    expect(wrapper.exists(".notificationConsoleData")).toBe(true);
+    expect(!wrapper.exists(".notificationConsoleData"));
  });

  it("collapses and hide content", () => {
@@ -155,7 +155,7 @@ describe("NotificationConsoleComponent", () => {
    wrapper.setProps(props);

    wrapper.find(".notificationConsoleHeader").simulate("click");
-    expect(wrapper.exists(".notificationConsoleContent")).toBe(false);
+    expect(!wrapper.exists(".notificationConsoleContent"));
  });

  it("display latest data in header", () => {
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -2,20 +2,19 @@
 * React component for control bar
 */

-import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
 import * as React from "react";
+import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import AnimateHeight from "react-animate-height";
-import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
-import ClearIcon from "../../../../images/Clear.svg";
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
+import LoadingIcon from "../../../../images/loading.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
-import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
-import LoadingIcon from "../../../../images/loading.svg";
-import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
+import ErrorRedIcon from "../../../../images/error_red.svg";
+import ClearIcon from "../../../../images/Clear.svg";
+import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
 import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
-import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
-import { userContext } from "../../../UserContext";
+import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";

 /**
 * Log levels
@@ -77,7 +76,7 @@ export class NotificationConsoleComponent extends React.Component<
  public componentDidUpdate(
    prevProps: NotificationConsoleComponentProps,
    prevState: NotificationConsoleComponentState
-  ): void {
+  ) {
    const currentHeaderStatus = NotificationConsoleComponent.extractHeaderStatus(this.props.consoleData);

    if (
@@ -98,7 +97,7 @@ export class NotificationConsoleComponent extends React.Component<
    }
  }

-  public setElememntRef = (element: HTMLElement): void => {
+  public setElememntRef = (element: HTMLElement) => {
    this.consoleHeaderElement = element;
  };

@@ -117,7 +116,7 @@ export class NotificationConsoleComponent extends React.Component<
          className="notificationConsoleHeader"
          id="notificationConsoleHeader"
          ref={this.setElememntRef}
-          onClick={() => this.expandCollapseConsole()}
+          onClick={(event: React.MouseEvent<HTMLDivElement>) => this.expandCollapseConsole()}
          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
          tabIndex={0}
        >
@@ -136,7 +135,6 @@ export class NotificationConsoleComponent extends React.Component<
                <span className="numInfoItems">{numInfoItems}</span>
              </span>
            </span>
-            {userContext.features.pr && <PrPreview pr={userContext.features.pr} />}
            <span className="consoleSplitter" />
            <span className="headerStatus">
              <span className="headerStatusEllipsis">{this.state.headerStatus}</span>
@@ -306,18 +304,3 @@ export class NotificationConsoleComponent extends React.Component<
    );
  };
 }
-
-const PrPreview = (props: { pr: string }) => {
-  const url = new URL(props.pr);
-  const [, ref] = url.hash.split("#");
-  url.hash = "";
-
-  return (
-    <>
-      <span className="consoleSplitter" />
-      <a target="_blank" rel="noreferrer" href={url.href} style={{ marginRight: "1em", fontWeight: "bold" }}>
-        {ref}
-      </a>
-    </>
-  );
-};
--- 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/NotebookClientV2.ts
+++ b/src/Explorer/Notebook/NotebookClientV2.ts
@@ -1,16 +1,15 @@
 // Manages all the redux logic for the notebook nteract code
 // TODO: Merge with NotebookClient?
+import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
+import * as Constants from "../../Common/Constants";
+import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
+
 // Vendor modules
 import {
  actions,
  AppState,
-  ContentRecord,
  createHostRef,
  createKernelspecsRef,
-  HostRecord,
-  HostRef,
-  IContentProvider,
-  KernelspecsRef,
  makeAppRecord,
  makeCommsRecord,
  makeContentsRecord,
@@ -20,21 +19,23 @@ import {
  makeJupyterHostRecord,
  makeStateRecord,
  makeTransformsRecord,
+  ContentRecord,
+  HostRecord,
+  HostRef,
+  KernelspecsRef,
+  IContentProvider,
 } from "@nteract/core";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
-import { Notification } from "react-notification-system";
-import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
-import * as Constants from "../../Common/Constants";
-import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
+import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
+
 import configureStore from "./NotebookComponent/store";
-import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-import JavaScript from "./NotebookRenderer/outputs/javascript";
+
+import { Notification } from "react-notification-system";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";

 export type KernelSpecsDisplay = { name: string; displayName: string };

@@ -167,7 +168,7 @@ export class NotebookClientV2 {
              "application/vnd.vega.v5+json": NullTransform,
              "application/vdom.v1+json": TransformVDOM,
              "application/json": Media.Json,
-              "application/javascript": userContext.features.sandboxNotebookOutputs ? JavaScript : Media.JavaScript,
+              "application/javascript": Media.JavaScript,
              "text/html": Media.HTML,
              "text/markdown": Media.Markdown,
              "text/latex": Media.LaTeX,
--- 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>,
@@ -17,11 +18,13 @@ export class NotebookContentClient {
  /**
   * This updates the item and points all the children's parent to this item
   * @param item
+   * @return updated item
   */
-  public updateItemChildren(item: NotebookContentItem): Promise<void> {
+  public updateItemChildren(item: NotebookContentItem): Promise<NotebookContentItem> {
    return this.fetchNotebookFiles(item.path).then((subItems) => {
      item.children = subItems;
      subItems.forEach((subItem) => (subItem.parent = item));
+      return item;
    });
  }

--- a/src/Explorer/Notebook/NotebookManager.ts
+++ b/src/Explorer/Notebook/NotebookManager.ts
@@ -18,7 +18,6 @@ import { contents } from "rx-jupyter";
 import { NotebookContainerClient } from "./NotebookContainerClient";
 import { MemoryUsageInfo } from "../../Contracts/DataModels";
 import { NotebookContentClient } from "./NotebookContentClient";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
 import { getFullName } from "../../Utils/UserUtils";
 import { ImmutableNotebook } from "@nteract/commutable";
@@ -30,7 +29,6 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 export interface NotebookManagerOptions {
  container: Explorer;
  notebookBasePath: ko.Observable<string>;
-  resourceTree: ResourceTreeAdapter;
  refreshCommandBarButtons: () => void;
  refreshNotebookList: () => void;
 }
@@ -107,8 +105,8 @@ export default class NotebookManager {
    });

    this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
-      this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
-      this.params.resourceTree.triggerRender();
+      // TODO Move this out of NotebookManager?
+      this.params.container.params.initializeGitHubRepos(pinnedRepos);
    });
    this.refreshPinnedRepos();
  }
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
@@ -1,20 +1,18 @@
-import { actions, ContentRef } from "@nteract/core";
-import { KernelOutputError, StreamText } from "@nteract/outputs";
-import { Cells, CodeCell, MarkdownCell, RawCell } from "@nteract/stateful-components";
-import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
-import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
-import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
-import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
 import * as React from "react";
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
-import { userContext } from "../../../UserContext";
-import loadTransform from "../NotebookComponent/loadTransform";
-import { AzureTheme } from "./AzureTheme";
 import "./base.css";
 import "./default.css";
+
+import { CodeCell, RawCell, Cells, MarkdownCell } from "@nteract/stateful-components";
+import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
+import { AzureTheme } from "./AzureTheme";
+
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { actions, ContentRef } from "@nteract/core";
+import loadTransform from "../NotebookComponent/loadTransform";
+import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
+import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import "./NotebookReadOnlyRenderer.less";
-import IFrameOutputs from "./outputs/IFrameOutputs";

 export interface NotebookRendererProps {
  contentRef: any;
@@ -62,16 +60,6 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
              <CodeCell id={id} contentRef={contentRef}>
                {{
                  prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
-                  outputs: userContext.features.sandboxNotebookOutputs
-                    ? (props: any) => (
-                        <IFrameOutputs id={id} contentRef={contentRef}>
-                          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-                          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-                          <KernelOutputError />
-                          <StreamText />
-                        </IFrameOutputs>
-                      )
-                    : undefined,
                  editor: {
                    monaco: (props: PassedEditorProps) =>
                      this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />,
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
@@ -1,32 +1,37 @@
-import { CellId } from "@nteract/commutable";
-import { CellType } from "@nteract/commutable/src";
-import { actions, ContentRef } from "@nteract/core";
-import { KernelOutputError, StreamText } from "@nteract/outputs";
-import { Cells, CodeCell, MarkdownCell, RawCell } from "@nteract/stateful-components";
+import * as React from "react";
+import "./base.css";
+import "./default.css";
+
+import { RawCell, Cells, CodeCell, MarkdownCell } from "@nteract/stateful-components";
 import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
-import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
-import * as React from "react";
-import { DndProvider } from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
-import { userContext } from "../../../UserContext";
-import * as cdbActions from "../NotebookComponent/actions";
-import loadTransform from "../NotebookComponent/loadTransform";
-import { AzureTheme } from "./AzureTheme";
-import "./base.css";
-import CellCreator from "./decorators/CellCreator";
-import CellLabeler from "./decorators/CellLabeler";
-import HoverableCell from "./decorators/HoverableCell";
-import KeyboardShortcuts from "./decorators/kbd-shortcuts";
-import "./default.css";
-import "./NotebookRenderer.less";
-import IFrameOutputs from "./outputs/IFrameOutputs";
+
 import Prompt from "./Prompt";
 import { promptContent } from "./PromptContent";
-import StatusBar from "./StatusBar";
+
+import { AzureTheme } from "./AzureTheme";
+import { DndProvider } from "react-dnd";
+import HTML5Backend from "react-dnd-html5-backend";
+
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { actions, ContentRef } from "@nteract/core";
+import { CellId } from "@nteract/commutable";
+import loadTransform from "../NotebookComponent/loadTransform";
+import DraggableCell from "./decorators/draggable";
+import CellCreator from "./decorators/CellCreator";
+import KeyboardShortcuts from "./decorators/kbd-shortcuts";
+
 import CellToolbar from "./Toolbar";
+import StatusBar from "./StatusBar";
+
+import HijackScroll from "./decorators/hijack-scroll";
+import { CellType } from "@nteract/commutable/src";
+
+import "./NotebookRenderer.less";
+import HoverableCell from "./decorators/HoverableCell";
+import CellLabeler from "./decorators/CellLabeler";
+import * as cdbActions from "../NotebookComponent/actions";

 export interface NotebookRendererBaseProps {
  contentRef: any;
@@ -107,16 +112,6 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                              </Prompt>
                            ),
                            toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
-                            outputs: userContext.features.sandboxNotebookOutputs
-                              ? (props: any) => (
-                                  <IFrameOutputs id={id} contentRef={contentRef}>
-                                    <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-                                    <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-                                    <KernelOutputError />
-                                    <StreamText />
-                                  </IFrameOutputs>
-                                )
-                              : undefined,
                          }}
                        </CodeCell>
                      ),
--- a/src/Explorer/Notebook/NotebookRenderer/outputs/IFrameOutputs.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/outputs/IFrameOutputs.tsx
@@ -1,70 +0,0 @@
-import { AppState, ContentRef, selectors } from "@nteract/core";
-import { Output } from "@nteract/outputs";
-import Immutable from "immutable";
-import React from "react";
-import { connect } from "react-redux";
-import { SandboxFrame } from "./SandboxFrame";
-
-// Adapted from https://github.com/nteract/nteract/blob/main/packages/stateful-components/src/outputs/index.tsx
-// to add support for sandboxing using <iframe>
-
-interface ComponentProps {
-  id: string;
-  contentRef: ContentRef;
-  children: React.ReactNode;
-}
-
-interface StateProps {
-  hidden: boolean;
-  expanded: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  outputs: Immutable.List<any>;
-}
-
-export class IFrameOutputs extends React.PureComponent<ComponentProps & StateProps> {
-  render(): JSX.Element {
-    const { outputs, children, hidden, expanded } = this.props;
-    return (
-      <SandboxFrame
-        style={{ border: "none", width: "100%" }}
-        sandbox="allow-downloads allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox"
-      >
-        <div className={`nteract-cell-outputs ${hidden ? "hidden" : ""} ${expanded ? "expanded" : ""}`}>
-          {outputs.map((output, index) => (
-            <Output output={output} key={index}>
-              {children}
-            </Output>
-          ))}
-        </div>
-      </SandboxFrame>
-    );
-  }
-}
-
-export const makeMapStateToProps = (
-  initialState: AppState,
-  ownProps: ComponentProps
-): ((state: AppState) => StateProps) => {
-  const mapStateToProps = (state: AppState): StateProps => {
-    let outputs = Immutable.List();
-    let hidden = false;
-    let expanded = false;
-
-    const { contentRef, id } = ownProps;
-    const model = selectors.model(state, { contentRef });
-
-    if (model && model.type === "notebook") {
-      const cell = selectors.notebook.cellById(model, { id });
-      if (cell) {
-        outputs = cell.get("outputs", Immutable.List());
-        hidden = cell.cell_type === "code" && cell.getIn(["metadata", "jupyter", "outputs_hidden"]);
-        expanded = cell.cell_type === "code" && cell.getIn(["metadata", "collapsed"]) === false;
-      }
-    }
-
-    return { outputs, hidden, expanded };
-  };
-  return mapStateToProps;
-};
-
-export default connect<StateProps, void, ComponentProps, AppState>(makeMapStateToProps)(IFrameOutputs);
--- a/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx
@@ -1,64 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { copyStyles } from "../../../../Utils/StyleUtils";
-
-interface SandboxFrameProps {
-  style: React.CSSProperties;
-  sandbox: string;
-}
-
-interface SandboxFrameState {
-  frame: HTMLIFrameElement;
-  frameBody: HTMLElement;
-  frameHeight: number;
-}
-
-export class SandboxFrame extends React.PureComponent<SandboxFrameProps, SandboxFrameState> {
-  private resizeObserver: ResizeObserver;
-
-  constructor(props: SandboxFrameProps) {
-    super(props);
-
-    this.state = {
-      frame: undefined,
-      frameBody: undefined,
-      frameHeight: 0,
-    };
-  }
-
-  render(): JSX.Element {
-    return (
-      <iframe
-        ref={(ele) => this.setState({ frame: ele })}
-        srcDoc={`<!DOCTYPE html>`}
-        onLoad={(event) => this.onFrameLoad(event)}
-        style={this.props.style}
-        sandbox={this.props.sandbox}
-        height={this.state.frameHeight}
-      >
-        {this.state.frameBody && ReactDOM.createPortal(this.props.children, this.state.frameBody)}
-      </iframe>
-    );
-  }
-
-  componentWillUnmount() {
-    this.resizeObserver?.disconnect();
-  }
-
-  onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
-    const doc = (event.target as HTMLIFrameElement).contentDocument;
-    copyStyles(document, doc);
-
-    this.setState({
-      frameBody: doc.body,
-      frameHeight: doc.body.scrollHeight,
-    });
-
-    this.resizeObserver = new ResizeObserver(() =>
-      this.setState({
-        frameHeight: this.state.frameBody.scrollHeight,
-      })
-    );
-    this.resizeObserver.observe(doc.body);
-  }
-}
--- a/src/Explorer/Notebook/NotebookRenderer/outputs/javascript.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/outputs/javascript.tsx
@@ -1,26 +0,0 @@
-import { Media } from "@nteract/outputs";
-import React from "react";
-
-interface Props {
-  /**
-   * The JavaScript code that we would like to execute.
-   */
-  data: string;
-  /**
-   * The media type associated with our component.
-   */
-  mediaType: "text/javascript";
-}
-
-export class JavaScript extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "application/javascript",
-  };
-
-  render(): JSX.Element {
-    return <Media.HTML data={`<script>${this.props.data}</script>`} />;
-  }
-}
-
-export default JavaScript;
--- 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/CopyNotebookPane.tsx
+++ b/src/Explorer/Panes/CopyNotebookPane.tsx
@@ -8,10 +8,9 @@ import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRight
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
 import { IDropdownOption } from "office-ui-fabric-react";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { HttpStatusCodes } from "../../Common/Constants";
+import { HttpStatusCodes, Notebook } from "../../Common/Constants";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { NotebookContentItemType, NotebookContentItem } from "../Notebook/NotebookContentItem";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { handleError, getErrorMessage } from "../../Common/ErrorHandlingUtils";

 interface Location {
@@ -151,7 +150,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
    switch (location.type) {
      case "MyNotebooks":
        parent = {
-          name: ResourceTreeAdapter.MyNotebooksTitle,
+          name: Notebook.MyNotebooksTitle,
          path: this.container.getNotebookBasePath(),
          type: NotebookContentItemType.Directory,
        };
@@ -159,7 +158,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {

      case "GitHub":
        parent = {
-          name: ResourceTreeAdapter.GitHubReposTitle,
+          name: Notebook.GitHubReposTitle,
          path: GitHubUtils.toContentUri(
            this.selectedLocation.owner,
            this.selectedLocation.repo,
--- a/src/Explorer/Panes/CopyNotebookPaneComponent.tsx
+++ b/src/Explorer/Panes/CopyNotebookPaneComponent.tsx
@@ -1,7 +1,6 @@
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as React from "react";
 import { IPinnedRepo } from "../../Juno/JunoClient";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import {
  Stack,
  Label,
@@ -13,6 +12,7 @@ import {
  IRenderFunction,
  ISelectableOption,
 } from "office-ui-fabric-react";
+import { Notebook } from "../../Common/Constants";

 interface Location {
  type: "MyNotebooks" | "GitHub";
@@ -70,8 +70,8 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP

    options.push({
      key: "MyNotebooks-Item",
-      text: ResourceTreeAdapter.MyNotebooksTitle,
-      title: ResourceTreeAdapter.MyNotebooksTitle,
+      text: Notebook.MyNotebooksTitle,
+      title: Notebook.MyNotebooksTitle,
      data: {
        type: "MyNotebooks",
      } as Location,
@@ -86,7 +86,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP

      options.push({
        key: "GitHub-Header",
-        text: ResourceTreeAdapter.GitHubReposTitle,
+        text: Notebook.GitHubReposTitle,
        itemType: SelectableOptionMenuItemType.Header,
      });

--- 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/Show More
+++ b/Show More
Author	SHA1	Message	Date
Laurent Nguyen	a17d71d76e	Merge branch 'master' into languy-resource-tree-to-react	2021-03-16 16:27:30 +01:00
Laurent Nguyen	faf2e3b559	Remove comment and test code	2021-03-15 17:35:35 +01:00
Laurent Nguyen	7e992c2b17	Fix build issues and reformat	2021-03-12 14:01:35 +01:00
Laurent Nguyen	21b92ed4f8	Merge branch 'master' into languy-resource-tree-to-react	2021-03-12 11:21:01 +01:00
Laurent Nguyen	e5755dff39	Fix unit tests	2021-03-12 10:36:27 +01:00
Laurent Nguyen	e48a6a10cb	Fix notebook updates issues	2021-03-11 16:22:59 +01:00
Laurent Nguyen	4480a7250d	Remove ResourceTreeAdapter	2021-03-08 14:20:27 +01:00
				`@@ -1 +0,0 @@`
				`[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)`