Move serverId

Readme updates
Update README
2026-01-03 00:01:42 +00:00 · 2020-12-15 23:26:30 -06:00 · 2020-12-15 19:40:36 -06:00 · 2020-12-15 19:31:43 -06:00 · 2020-12-15 19:16:53 -06:00 · 2020-12-15 19:11:51 -06:00
141 changed files with 4784 additions and 7203 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -101,7 +101,6 @@ jobs:
          PLATFORM: "Emulator"
          NODE_TLS_REJECT_UNAUTHORIZED: 0
      - uses: actions/upload-artifact@v2
-        if: failure()
        with:
          name: screenshots
          path: failed-*
@@ -160,14 +159,13 @@ jobs:
          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
      - uses: actions/upload-artifact@v2
-        if: failure()
        with:
          name: screenshots
          path: failed-*
  nuget:
    name: Publish Nuget
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
    runs-on: ubuntu-latest
    env:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -191,7 +189,7 @@ jobs:
  nugetmpac:
    name: Publish Nuget MPAC
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
    runs-on: ubuntu-latest
    env:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -213,28 +211,3 @@ jobs:
        name: packages
        with:
          path: "*.nupkg"
-  nugetie:
-    name: Publish Nuget IE
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
-    runs-on: ubuntu-latest
-    env:
-      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
-      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
-    steps:
-      - uses: nuget/setup-nuget@v1
-        with:
-          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
-      - name: Download Dist Folder
-        uses: actions/download-artifact@v2
-        with:
-          name: dist
-      - run: cp ./configs/prod.json config.json
-      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.IE/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
-      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v2
-        name: packages
-        with:
-          path: "*.nupkg"
--- a/.vs/slnx.sqlite
+++ b/.vs/slnx.sqlite
--- a/README.md
+++ b/README.md
@@ -69,10 +69,6 @@ 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.

-### 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)
-
 # Contributing

 Please read the [contribution guidelines](./CONTRIBUTING.md).
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,3 @@
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
-  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
+  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"]
 };
--- a/canvas/README.md
+++ b/canvas/README.md
@@ -1,7 +0,0 @@
-# Why?
-
-This adds a mock module for `canvas`. Nteract has a ignored require and undeclared dependency on this module. `cavnas` is a server side node module and is not used in browser side code for nteract.
-
-Installing it locally (`npm install canvas`) will resolve the problem, but it is a native module so it is flaky depending on the system, node version, processor arch, etc. This module provides a simpler, more robust solution.
-
-Remove this workaround if [this bug](https://github.com/nteract/any-vega/issues/2) ever gets resolved 
--- a/canvas/index.js
+++ b/canvas/index.js
@@ -1 +0,0 @@
-module.exports = {}
--- a/canvas/package.json
+++ b/canvas/package.json
@@ -1,11 +0,0 @@
-{
-  "name": "canvas",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -3,8 +3,8 @@
 /******************************************************************************/

@font-face {
-  font-family: wf_segoe-ui_normal;
-  src: url("../../fonts/segoe-ui/west-european/normal/latest.woff");
+    font-family: wf_segoe-ui_normal;
+    src: url('../../fonts/segoe-ui/west-european/normal/latest.woff');
 }

@DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -20,26 +20,26 @@
                                COLORS
 /******************************************************************************/

-@AccentMediumHigh: #0058ad;
-@AccentMedium: #004e87;
-@AccentHigh: #1ebaed;
-@AccentExtraHigh: #55b3ff;
-@AccentLow: #edf6ff;
-@AccentMediumLow: #ddeefe;
-@AccentLight: #eef7ff;
-@AccentExtra: #ddf0ff;
+@AccentMediumHigh: #0058AD;
+@AccentMedium: #004E87;
+@AccentHigh: #1EBAED;
+@AccentExtraHigh: #55B3FF;
+@AccentLow: #EDF6FF;
+@AccentMediumLow: #DDEEFE;
+@AccentLight: #EEF7FF;
+@AccentExtra: #DDF0FF;

-@SelectionHigh: #b91f26;
-@BaseLight: #ffffff;
+@SelectionHigh: #B91F26;
+@BaseLight: #FFFFFF;
@BaseDark: #000000;
-@NotificationLow: #fff4ce;
-@NotificationHigh: #f9e9b0;
-@Purple1: #8a2da5;
+@NotificationLow: #FFF4CE;
+@NotificationHigh: #F9E9B0;
+@Purple1: #8A2DA5;
@Dirty: #9b4f96;

-@BaseLow: #f2f2f2;
-@BaseMediumLow: #e6e6e6;
-@BaseMedium: #cccccc;
+@BaseLow: #F2F2F2;
+@BaseMediumLow: #E6E6E6;
+@BaseMedium: #CCCCCC;
@BaseMediumHigh: #767676;
@BaseHigh: #393939;

@@ -53,7 +53,7 @@

@ErrorColor: @SelectionHigh;

-@SelectionColor: #3074b0;
+@SelectionColor: #3074B0;

@FocusColor: #605e5c;

@@ -80,7 +80,7 @@
@ImgWidth: 14px;
@ImgHeight: 14px;

-@toggleFontWeight: 700;
+@toggleFontWeight:700;

 //Resource Tree
@TreeLineHeight: 17px;
@@ -144,16 +144,16 @@
 /**********************************************************************************/

 .flex-display(@display: flex) {
-  display: ~"-webkit-@{display}";
-  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-  display: ~"-ms-@{display}"; // IE11
-  display: @display;
+	display: ~"-webkit-@{display}";
+	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+	display: ~"-ms-@{display}"; // IE11
+	display: @display;
 }

 .flex-direction(@direction: column) {
  -webkit-flex-direction: @direction;
-  -ms-flex-direction: @direction;
-  flex-direction: @direction;
+      -ms-flex-direction: @direction;
+          flex-direction: @direction;
 }

 /*************************************************************************************
@@ -161,31 +161,32 @@
 **************************************************************************************/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .selectedRadio,
-  .selectedRadio:hover,
-  .selectedRadio:active,
-  .selectedRadio.dirty,
-  .tab [type="radio"]:checked ~ label,
-  .tab [type="radio"]:checked ~ label:hover {
-    -ms-high-contrast-adjust: none;
-    -webkit-text-fill-color: HighlightText;
-    color: HighlightText;
-    border-color: HighlightText;
-    background-color: Highlight;
-  }
-
-  .queryMetricsSummaryTuple {
-    th,
-    td {
-      &:nth-child(2) {
-        width: @IETableDataWidth;
-      }
-
-      &:nth-child(3) {
-        width: 50%;
-      }
+    .selectedRadio,
+    .selectedRadio:hover,
+    .selectedRadio:active,
+    .selectedRadio.dirty,
+    .tab [type=radio]:checked ~ label,
+    .tab [type=radio]:checked ~ label:hover {
+        -ms-high-contrast-adjust: none;
+        -webkit-text-fill-color: HighlightText;
+        color: HighlightText;
+        border-color: HighlightText;
+        background-color: Highlight;
+    }
+
+    .queryMetricsSummaryTuple {
+
+        th, td {
+
+            &:nth-child(2) {
+                width: @IETableDataWidth;
+            }
+
+            &:nth-child(3) {
+                width: 50%;
+            }
+        }
    }
-  }
 }

 /********************************************************************************************
@@ -193,15 +194,15 @@
 *********************************************************************************************/

 .hover() {
-  background-color: @AccentLight;
+    background-color: @AccentLight;
 }

 .active() {
-  background-color: @AccentExtra;
+    background-color: @AccentExtra;
 }

 .focus() {
-  outline: 1px dashed @FocusColor;
+    outline: 1px dashed @FocusColor;
 }

 /************************************************************************************************
@@ -211,87 +212,63 @@
@ToggleWidth: 180px;

 .toggleSwitch() {
-  max-width: 100%;
-  margin-bottom: @SmallSpace;
-  padding: @SmallSpace;
-  cursor: pointer;
-  color: @BaseHigh;
-  font-weight: 400;
-  font-size: @mediumFontSize;
-  font-family: @DataExplorerFont;
+    max-width: 100%;
+    margin-bottom: @SmallSpace;
+    padding: @SmallSpace;
+    cursor: pointer;
+    color: @BaseHigh;
+    font-weight: 400;
+    font-size: @mediumFontSize;
+    font-family: @DataExplorerFont;
 }

 .selectedToggle() {
-  border-bottom: 2px solid @BaseHigh;
+    border-bottom: 2px solid @BaseHigh;
 }

 .unselectedToggle() {
-  color: @AccentMediumHigh;
+    color: @AccentMediumHigh;
 }

 /********************************************************************************************************
                             Common Data Explorer Icons
 *********************************************************************************************************/
 .dataExplorerIcons() {
-  cursor: pointer;
-  width: @ImgWidth;
-  height: @ImgHeight;
+    cursor: pointer;
+    width: @ImgWidth;
+    height: @ImgHeight;
 }

 /*********************************************************************************************************
                            Info Tooltip
 **********************************************************************************************************/
 .infoTooltip() {
-  position: relative;
-  display: inline-block;
+    position: relative;
+    display: inline-block;
 }

 .tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-  visibility: hidden;
-  background-color: @backgroundColor;
-  color: @textColor;
-  position: absolute;
-  z-index: 1;
-  left: @MediumSpace;
-  padding: @MediumSpace;
+    visibility: hidden;
+    background-color: @backgroundColor;
+    color: @textColor;
+    position: absolute;
+    z-index: 1;
+    left: @MediumSpace;
+    padding: @MediumSpace;
 }

 .tooltipTextAfter(@color: @BaseDark) {
-  content: "";
-  position: absolute;
-  right: 100%;
-  border-style: solid;
-  border-color: transparent @color transparent transparent;
-  left: 0px;
-  width: 0;
-  height: 0;
-  border-color: @InfoPointerColor transparent;
+    content: "";
+    position: absolute;
+    right: 100%;
+    border-style: solid;
+    border-color: transparent @color transparent transparent;
+    left: 0px;
+    width: 0;
+    height: 0;
+    border-color: @InfoPointerColor transparent;
 }

 .tooltipVisible() {
-  visibility: visible;
-}
-
-.inputTooltip() {
-  position: relative;
-}
-
-.inputTooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-  background-color: @backgroundColor;
-  color: @textColor;
-  position: absolute;
-  z-index: 1;
-  padding: @MediumSpace;
-}
-
-.inputTooltipTextAfter(@color: @BaseDark) {
-  content: "";
-  position: absolute;
-  right: 100%;
-  border-style: solid;
-  border-color: transparent @color transparent transparent;
-  left: 10px;
-  width: 0;
-  height: 0;
-  border-color: @InfoPointerColor transparent;
+    visibility: visible;
 }
--- a/less/documentDB.less
+++ b/less/documentDB.less
--- a/less/hostedexplorer.less
+++ b/less/hostedexplorer.less
@@ -13,11 +13,6 @@
@NavMediumSpace: 10px;
@NavLargeSpace: 15px;

-.skip-link {
-    position: fixed;
-    top: -200px;
-}
-
 html {
    font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
    padding: 0px;
--- a/less/tree.less
+++ b/less/tree.less
@@ -1,12 +1,20 @@
@import "./Common/Constants";

+.main {
+    width: 100%;
+    float: left;
+    transition: all .0s ease-in-out;
+    -ms-transition: all 0s ease-in-out;
+    -webkit-transition: all 0s ease-in-out;
+    -moz-transition: all .0s ease-in-out;
+    height: 100%;
+    background-color: white;
+    border-left: 0px solid white;
+}

 .resourceTree {
    height: 100%;
    flex: 0 0 auto;
-    .main {
-        height: 100%;
-    }
 }

 .resourceTreeScroll {
--- a/package-lock.json
+++ b/package-lock.json
@@ -393,6 +393,7 @@
      "version": "7.12.1",
      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz",
      "integrity": "sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==",
+      "dev": true,
      "requires": {
        "@babel/helper-function-name": "^7.10.4",
        "@babel/helper-member-expression-to-functions": "^7.12.1",
@@ -619,25 +620,6 @@
        "@babel/plugin-syntax-async-generators": "^7.8.0"
      }
    },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
-      "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.12.1",
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-proposal-decorators": {
-      "version": "7.12.12",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.12.tgz",
-      "integrity": "sha512-fhkE9lJYpw2mjHelBpM2zCbaA11aov2GJs7q4cFaXNrWx0H3bW58H9Esy2rdtYOghFBEYUDRIpvlgi+ZD+AvvQ==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.12.1",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-decorators": "^7.12.1"
-      }
-    },
    "@babel/plugin-proposal-dynamic-import": {
      "version": "7.12.1",
      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz",
@@ -747,14 +729,6 @@
        "@babel/helper-plugin-utils": "^7.10.4"
      }
    },
-    "@babel/plugin-syntax-decorators": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.1.tgz",
-      "integrity": "sha512-ir9YW5daRrTYiy9UJ2TzdNIJEZu8KclVzDcfSt4iEmOtwQ4llPtWInNKJyKnVXp1vE4bbVd5S31M/im3mYMO1w==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
    "@babel/plugin-syntax-dynamic-import": {
      "version": "7.8.3",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
@@ -5419,6 +5393,11 @@
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
      "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="
    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
    "abort-controller": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -5662,7 +5641,6 @@
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-      "optional": true,
      "requires": {
        "delegates": "^1.0.0",
        "readable-stream": "^2.0.6"
@@ -6905,7 +6883,14 @@
      "dev": true
    },
    "canvas": {
-      "version": "file:canvas"
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.6.1.tgz",
+      "integrity": "sha512-S98rKsPcuhfTcYbtF53UIJhcbgIAK533d1kJKMwsMwAIFgfd58MOyxRud3kktlzWiEkFliaJtvyZCBtud/XVEA==",
+      "requires": {
+        "nan": "^2.14.0",
+        "node-pre-gyp": "^0.11.0",
+        "simple-get": "^3.0.3"
+      }
    },
    "capture-exit": {
      "version": "2.0.0",
@@ -7469,8 +7454,7 @@
    "console-control-strings": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "optional": true
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
    },
    "constants-browserify": {
      "version": "1.0.0",
@@ -8451,7 +8435,6 @@
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
-      "optional": true,
      "requires": {
        "mimic-response": "^2.0.0"
      }
@@ -8477,8 +8460,7 @@
    "deep-extend": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "optional": true
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
    },
    "deep-is": {
      "version": "0.1.3",
@@ -8670,8 +8652,7 @@
    "delegates": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "optional": true
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
    },
    "depd": {
      "version": "1.1.2",
@@ -8707,8 +8688,7 @@
    "detect-libc": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
-      "optional": true
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
    },
    "detect-newline": {
      "version": "2.1.0",
@@ -10694,6 +10674,14 @@
        "universalify": "^0.1.0"
      }
    },
+    "fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "requires": {
+        "minipass": "^2.6.0"
+      }
+    },
    "fs-observable": {
      "version": "4.1.14",
      "resolved": "https://registry.npmjs.org/fs-observable/-/fs-observable-4.1.14.tgz",
@@ -10835,7 +10823,6 @@
      "version": "2.7.4",
      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "optional": true,
      "requires": {
        "aproba": "^1.0.3",
        "console-control-strings": "^1.0.0",
@@ -10850,14 +10837,12 @@
        "ansi-regex": {
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "optional": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
        },
        "is-fullwidth-code-point": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -10866,7 +10851,6 @@
          "version": "1.0.2",
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -10877,7 +10861,6 @@
          "version": "3.0.1",
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -11367,8 +11350,7 @@
    "has-unicode": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "optional": true
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
    },
    "has-value": {
      "version": "1.0.0",
@@ -11850,6 +11832,14 @@
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
    },
+    "ignore-walk": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
    "image-size": {
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -15554,8 +15544,7 @@
    "mimic-response": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
-      "optional": true
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA=="
    },
    "min-document": {
      "version": "2.19.0",
@@ -15612,6 +15601,15 @@
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
    },
+    "minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
    "minipass-collect": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
@@ -15681,6 +15679,14 @@
        }
      }
    },
+    "minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "requires": {
+        "minipass": "^2.9.0"
+      }
+    },
    "mississippi": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -15855,8 +15861,7 @@
    "nan": {
      "version": "2.14.2",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
-      "optional": true
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ=="
    },
    "nanomatch": {
      "version": "1.2.13",
@@ -15906,6 +15911,26 @@
        "semver": "^5.4.1"
      }
    },
+    "needle": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.5.2.tgz",
+      "integrity": "sha512-LbRIwS9BfkPvNwNHlsA41Q29kL2L/6VaOJ0qisM5lLWsTV3nP15abO5ITL6L81zqFhzjRKDAYjpcBcwM0AVvLQ==",
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -16074,6 +16099,41 @@
        "which": "^1.3.0"
      }
    },
+    "node-pre-gyp": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz",
+      "integrity": "sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q==",
+      "requires": {
+        "detect-libc": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "needle": "^2.2.1",
+        "nopt": "^4.0.1",
+        "npm-packlist": "^1.1.6",
+        "npmlog": "^4.0.2",
+        "rc": "^1.2.7",
+        "rimraf": "^2.6.1",
+        "semver": "^5.3.0",
+        "tar": "^4"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
    "node-releases": {
      "version": "1.1.66",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz",
@@ -16086,6 +16146,15 @@
      "integrity": "sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=",
      "optional": true
    },
+    "nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
    "normalize-package-data": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -16110,6 +16179,29 @@
      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
    },
+    "npm-bundled": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
+      "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
+      "requires": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA=="
+    },
+    "npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
    "npm-run-path": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -16122,7 +16214,6 @@
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "optional": true,
      "requires": {
        "are-we-there-yet": "~1.1.2",
        "console-control-strings": "~1.1.0",
@@ -16514,8 +16605,7 @@
    "os-homedir": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
    },
    "os-locale": {
      "version": "1.4.0",
@@ -16534,6 +16624,20 @@
        "windows-release": "^3.1.0"
      }
    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
    "p-defer": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -17586,7 +17690,6 @@
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "optional": true,
      "requires": {
        "deep-extend": "^0.6.0",
        "ini": "~1.3.0",
@@ -17998,11 +18101,6 @@
      "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-2.0.0-alpha.0.tgz",
      "integrity": "sha512-w0RsVGprIFiYi1AhFCOATiv3ld2AtuobvbcVsLvX19p8eAwLowWl2OrKYcCq/QEeEpmSHTXutXfVfcBnzaWmdw=="
    },
-    "reflect-metadata": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
-    },
    "reflect.ownkeys": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
@@ -19018,14 +19116,12 @@
    "simple-concat": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "optional": true
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
    },
    "simple-get": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz",
      "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==",
-      "optional": true,
      "requires": {
        "decompress-response": "^4.2.0",
        "once": "^1.3.1",
@@ -20017,6 +20113,30 @@
      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
      "dev": true
    },
+    "tar": {
+      "version": "4.4.13",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+      "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
+      "requires": {
+        "chownr": "^1.1.1",
+        "fs-minipass": "^1.2.5",
+        "minipass": "^2.8.6",
+        "minizlib": "^1.2.1",
+        "mkdirp": "^0.5.0",
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.3"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        }
+      }
+    },
    "tar-fs": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
@@ -22072,7 +22192,6 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-      "optional": true,
      "requires": {
        "string-width": "^1.0.2 || 2"
      },
@@ -22080,14 +22199,12 @@
        "ansi-regex": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "optional": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
        },
        "string-width": {
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "optional": true,
          "requires": {
            "is-fullwidth-code-point": "^2.0.0",
            "strip-ansi": "^4.0.0"
@@ -22097,7 +22214,6 @@
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "optional": true,
          "requires": {
            "ansi-regex": "^3.0.0"
          }
@@ -22267,8 +22383,7 @@
    "yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
    },
    "yargs": {
      "version": "13.3.2",
--- a/package.json
+++ b/package.json
@@ -6,10 +6,8 @@
  "dependencies": {
    "@azure/arm-cosmosdb": "9.1.0",
    "@azure/cosmos": "3.9.0",
-    "@azure/cosmos-language-service": "0.0.5",
    "@azure/identity": "1.1.0",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@azure/cosmos-language-service": "0.0.5",
    "@jupyterlab/services": "6.0.0-rc.2",
    "@jupyterlab/terminal": "3.0.0-rc.2",
    "@microsoft/applicationinsights-web": "2.5.9",
@@ -46,7 +44,7 @@
    "applicationinsights": "1.8.0",
    "babel-polyfill": "6.26.0",
    "bootstrap": "3.4.1",
-    "canvas": "file:./canvas",
+    "canvas": "2.6.1",
    "clean-webpack-plugin": "0.1.19",
    "copy-webpack-plugin": "6.0.2",
    "crossroads": "0.12.2",
@@ -87,7 +85,6 @@
    "react-notification-system": "0.2.17",
    "react-redux": "7.1.3",
    "redux": "4.0.4",
-    "reflect-metadata": "0.1.13",
    "rx-jupyter": "5.5.12",
    "rxjs": "6.6.3",
    "styled-components": "4.3.2",
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -1,437 +1,434 @@
-import { HashMap } from "./HashMap";
-
-export class AuthorizationEndpoints {
-  public static arm: string = "https://management.core.windows.net/";
-  public static common: string = "https://login.windows.net/";
-}
-
-export class CodeOfConductEndpoints {
-  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
-  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
-  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
-}
-
-export class EndpointsRegex {
-  public static readonly cassandra = [
-    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-    "HostName=(.*).cassandra.cosmos.azure.com"
-  ];
-  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
-  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
-  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
-  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
-}
-
-export class ApiEndpoints {
-  public static runtimeProxy: string = "/api/RuntimeProxy";
-  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
-}
-
-export class ServerIds {
-  public static localhost: string = "localhost";
-  public static blackforest: string = "blackforest";
-  public static fairfax: string = "fairfax";
-  public static mooncake: string = "mooncake";
-  public static productionPortal: string = "prod";
-  public static dev: string = "dev";
-}
-
-export class ArmApiVersions {
-  public static readonly documentDB: string = "2015-11-06";
-  public static readonly arcadia: string = "2019-06-01-preview";
-  public static readonly arcadiaLivy: string = "2019-11-01-preview";
-  public static readonly arm: string = "2015-11-01";
-  public static readonly armFeatures: string = "2014-08-01-preview";
-  public static readonly publicVersion = "2020-04-01";
-}
-
-export class ArmResourceTypes {
-  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
-  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
-}
-
-export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
-  public static singlePartitionStorageInGb: string = "10";
-  public static multiPartitionStorageInGb: string = "100";
-  public static maxChangeFeedRetentionDuration: number = 10;
-  public static partitionKeyVersion = 2;
-}
-
-export class ClientDefaults {
-  public static requestTimeoutMs: number = 60000;
-  public static portalCacheTimeoutMs: number = 10000;
-  public static errorNotificationTimeoutMs: number = 5000;
-  public static copyHelperTimeoutMs: number = 2000;
-  public static waitForDOMElementMs: number = 500;
-  public static cacheBustingTimeoutMs: number =
-    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static databaseThroughputIncreaseFactor: number = 100;
-  public static readonly arcadiaTokenRefreshInterval: number =
-    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
-}
-
-export class AccountKind {
-  public static DocumentDB: string = "DocumentDB";
-  public static MongoDB: string = "MongoDB";
-  public static Parse: string = "Parse";
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  public static Default: string = AccountKind.DocumentDB;
-}
-
-export class CorrelationBackend {
-  public static Url: string = "https://aka.ms/cosmosdbanalytics";
-}
-
-export class DefaultAccountExperience {
-  public static DocumentDB: string = "DocumentDB";
-  public static Graph: string = "Graph";
-  public static MongoDB: string = "MongoDB";
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
-  public static Table: string = "Table";
-  public static Cassandra: string = "Cassandra";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
-}
-
-export class CapabilityNames {
-  public static EnableTable: string = "EnableTable";
-  public static EnableGremlin: string = "EnableGremlin";
-  public static EnableCassandra: string = "EnableCassandra";
-  public static EnableAutoScale: string = "EnableAutoScale";
-  public static readonly EnableNotebooks: string = "EnableNotebooks";
-  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
-  public static readonly EnableMongo: string = "EnableMongo";
-  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 enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableLinkInjection = "enablelinkinjection";
-  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 selfServeType = "selfservetype";
-}
-
-// flight names returned from the portal are always lowercase
-export class Flights {
-  public static readonly SettingsV2 = "settingsv2";
-  public static readonly MongoIndexEditor = "mongoindexeditor";
-  public static readonly AutoscaleTest = "autoscaletest";
-  public static readonly MongoIndexing = "mongoindexing";
-}
-
-export class AfecFeatures {
-  public static readonly Spark = "spark-public-preview";
-  public static readonly Notebooks = "sparknotebooks-public-preview";
-  public static readonly StorageAnalytics = "storageanalytics-public-preview";
-}
-
-export class Spark {
-  public static readonly MaxWorkerCount = 10;
-  public static readonly SKUs: HashMap<string> = new HashMap({
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
-    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
-    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
-    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
-  });
-}
-
-export class TagNames {
-  public static defaultExperience: string = "defaultExperience";
-}
-
-export class MongoDBAccounts {
-  public static protocol: string = "https";
-  public static defaultPort: string = "10255";
-}
-
-export enum MongoBackendEndpointType {
-  local,
-  remote
-}
-
-// TODO: 435619 Add default endpoints per cloud and use regional only when available
-export class CassandraBackend {
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
-  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra";
-  public static readonly guestQueryApi: string = "api/guest/cassandra";
-  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
-  public static readonly schemaApi: string = "api/cassandra/schema";
-  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
-}
-
-export class Queries {
-  public static CustomPageOption: string = "custom";
-  public static UnlimitedPageOption: string = "unlimited";
-  public static itemsPerPage: number = 100;
-  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
-  public static QueryEditorMinHeightRatio: number = 0.1;
-  public static QueryEditorMaxHeightRatio: number = 0.4;
-  public static readonly DefaultMaxDegreeOfParallelism = 6;
-}
-
-export class SavedQueries {
-  public static readonly CollectionName: string = "___Query";
-  public static readonly DatabaseName: string = "___Cosmos";
-  public static readonly OfferThroughput: number = 400;
-  public static readonly PartitionKeyProperty: string = "id";
-}
-
-export class DocumentsGridMetrics {
-  public static DocumentsPerPage: number = 100;
-  public static IndividualRowHeight: number = 34;
-  public static BufferHeight: number = 28;
-  public static SplitterMinWidth: number = 200;
-  public static SplitterMaxWidth: number = 360;
-
-  public static DocumentEditorMinWidthRatio: number = 0.2;
-  public static DocumentEditorMaxWidthRatio: number = 0.4;
-}
-
-export class ExplorerMetrics {
-  public static SplitterMinWidth: number = 240;
-  public static SplitterMaxWidth: number = 400;
-  public static CollapsedResourceTreeWidth: number = 36;
-}
-
-export class SplitterMetrics {
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-}
-
-export class Areas {
-  public static ResourceTree: string = "Resource Tree";
-  public static ContextualPane: string = "Contextual Pane";
-  public static Tab: string = "Tab";
-  public static ShareDialog: string = "Share Access Dialog";
-  public static Notebook: string = "Notebook";
-}
-
-export class HttpHeaders {
-  public static activityId: string = "x-ms-activity-id";
-  public static apiType: string = "x-ms-cosmos-apitype";
-  public static authorization: string = "authorization";
-  public static collectionIndexTransformationProgress: string =
-    "x-ms-documentdb-collection-index-transformation-progress";
-  public static continuation: string = "x-ms-continuation";
-  public static correlationRequestId: string = "x-ms-correlation-request-id";
-  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
-  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
-  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
-  public static connectionString: string = "x-ms-connection-string";
-  public static msDate: string = "x-ms-date";
-  public static location: string = "Location";
-  public static contentType: string = "Content-Type";
-  public static offerReplacePending: string = "x-ms-offer-replace-pending";
-  public static user: string = "x-ms-user";
-  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
-  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
-  public static requestCharge: string = "x-ms-request-charge";
-  public static resourceQuota: string = "x-ms-resource-quota";
-  public static resourceUsage: string = "x-ms-resource-usage";
-  public static retryAfterMs: string = "x-ms-retry-after-ms";
-  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
-  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
-  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
-  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
-  public static autoPilotThroughput = "autoscaleSettings";
-  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
-  public static partitionKey: string = "x-ms-documentdb-partitionkey";
-  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
-  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-}
-
-export class ApiType {
-  // Mapped to hexadecimal values in the backend
-  public static readonly MongoDB: number = 1;
-  public static readonly Gremlin: number = 2;
-  public static readonly Cassandra: number = 4;
-  public static readonly Table: number = 8;
-  public static readonly SQL: number = 16;
-}
-
-export class HttpStatusCodes {
-  public static readonly OK: number = 200;
-  public static readonly Created: number = 201;
-  public static readonly Accepted: number = 202;
-  public static readonly NoContent: number = 204;
-  public static readonly NotModified: number = 304;
-  public static readonly Unauthorized: number = 401;
-  public static readonly Forbidden: number = 403;
-  public static readonly NotFound: number = 404;
-  public static readonly TooManyRequests: number = 429;
-  public static readonly Conflict: number = 409;
-
-  public static readonly InternalServerError: number = 500;
-  public static readonly BadGateway: number = 502;
-  public static readonly ServiceUnavailable: number = 503;
-  public static readonly GatewayTimeout: number = 504;
-
-  public static readonly RetryableStatusCodes: number[] = [
-    HttpStatusCodes.TooManyRequests,
-    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
-    HttpStatusCodes.BadGateway,
-    HttpStatusCodes.ServiceUnavailable,
-    HttpStatusCodes.GatewayTimeout
-  ];
-}
-
-export class Urls {
-  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
-  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
-  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
-  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
-}
-
-export class HashRoutePrefixes {
-  public static databases: string = "/dbs/{db_id}";
-  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
-  public static sprocHash: string = "/sprocs/";
-  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
-  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
-  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
-
-  public static databasesWithId(databaseId: string): string {
-    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static collectionsWithIds(databaseId: string, collectionId: string): string {
-    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static sprocWithIds(
-    databaseId: string,
-    collectionId: string,
-    sprocId: string,
-    stripFirstSlash: boolean = true
-  ): string {
-    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
-
-    const transformedSprocRoute: string = transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{sproc_id}", sprocId);
-    if (!!stripFirstSlash) {
-      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
-    }
-
-    return transformedSprocRoute;
-  }
-
-  public static conflictsWithIds(databaseId: string, collectionId: string) {
-    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
-  }
-
-  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
-    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{doc_id}", docId)
-      .replace("/", ""); // strip the first slash since hasher adds it
-  }
-}
-
-export class ConfigurationOverridesValues {
-  public static IsBsonSchemaV2: string = "true";
-}
-
-export class KeyCodes {
-  public static Space: number = 32;
-  public static Enter: number = 13;
-  public static Escape: number = 27;
-  public static UpArrow: number = 38;
-  public static DownArrow: number = 40;
-  public static LeftArrow: number = 37;
-  public static RightArrow: number = 39;
-  public static Tab: number = 9;
-}
-
-// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-export class NormalizedEventKey {
-  public static readonly Space = " ";
-  public static readonly Enter = "Enter";
-  public static readonly Escape = "Escape";
-  public static readonly UpArrow = "ArrowUp";
-  public static readonly DownArrow = "ArrowDown";
-  public static readonly LeftArrow = "ArrowLeft";
-  public static readonly RightArrow = "ArrowRight";
-}
-
-export class TryCosmosExperience {
-  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
-  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
-  public static collectionsPerAccount: number = 3;
-  public static maxRU: number = 5000;
-  public static defaultRU: number = 3000;
-}
-
-export class OfferVersions {
-  public static V1: string = "V1";
-  public static V2: string = "V2";
-}
-
-export enum ConflictOperationType {
-  Replace = "replace",
-  Create = "create",
-  Delete = "delete"
-}
-
-export const EmulatorMasterKey =
-  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
-  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
-
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
-export class Notebook {
-  public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
-  public static readonly kernelRestartInitialDelayMs = 1000;
-  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly autoSaveIntervalMs = 120000;
-}
-
-export class SparkLibrary {
-  public static readonly nameMinLength = 3;
-  public static readonly nameMaxLength = 63;
-}
-
-export class AnalyticalStorageTtl {
-  public static readonly Days90: number = 7776000;
-  public static readonly Infinite: number = -1;
-  public static readonly Disabled: number = 0;
-}
-
-export class TerminalQueryParams {
-  public static readonly Terminal = "terminal";
-  public static readonly Server = "server";
-  public static readonly Token = "token";
-  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly TerminalEndpoint = "terminalEndpoint";
-}
+import { HashMap } from "./HashMap";
+
+export class AuthorizationEndpoints {
+  public static arm: string = "https://management.core.windows.net/";
+  public static common: string = "https://login.windows.net/";
+}
+
+export class CodeOfConductEndpoints {
+  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
+  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
+  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
+}
+
+export class EndpointsRegex {
+  public static readonly cassandra = [
+    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+    "HostName=(.*).cassandra.cosmos.azure.com"
+  ];
+  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
+  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
+}
+
+export class ApiEndpoints {
+  public static runtimeProxy: string = "/api/RuntimeProxy";
+  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
+}
+
+export class ServerIds {
+  public static localhost: string = "localhost";
+  public static blackforest: string = "blackforest";
+  public static fairfax: string = "fairfax";
+  public static mooncake: string = "mooncake";
+  public static productionPortal: string = "prod";
+  public static dev: string = "dev";
+}
+
+export class ArmApiVersions {
+  public static readonly documentDB: string = "2015-11-06";
+  public static readonly arcadia: string = "2019-06-01-preview";
+  public static readonly arcadiaLivy: string = "2019-11-01-preview";
+  public static readonly arm: string = "2015-11-01";
+  public static readonly armFeatures: string = "2014-08-01-preview";
+  public static readonly publicVersion = "2020-04-01";
+}
+
+export class ArmResourceTypes {
+  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
+}
+
+export class BackendDefaults {
+  public static partitionKeyKind: string = "Hash";
+  public static singlePartitionStorageInGb: string = "10";
+  public static multiPartitionStorageInGb: string = "100";
+  public static maxChangeFeedRetentionDuration: number = 10;
+  public static partitionKeyVersion = 2;
+}
+
+export class ClientDefaults {
+  public static requestTimeoutMs: number = 60000;
+  public static portalCacheTimeoutMs: number = 10000;
+  public static errorNotificationTimeoutMs: number = 5000;
+  public static copyHelperTimeoutMs: number = 2000;
+  public static waitForDOMElementMs: number = 500;
+  public static cacheBustingTimeoutMs: number =
+    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static databaseThroughputIncreaseFactor: number = 100;
+  public static readonly arcadiaTokenRefreshInterval: number =
+    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
+}
+
+export class AccountKind {
+  public static DocumentDB: string = "DocumentDB";
+  public static MongoDB: string = "MongoDB";
+  public static Parse: string = "Parse";
+  public static GlobalDocumentDB: string = "GlobalDocumentDB";
+  public static Default: string = AccountKind.DocumentDB;
+}
+
+export class CorrelationBackend {
+  public static Url: string = "https://aka.ms/cosmosdbanalytics";
+}
+
+export class DefaultAccountExperience {
+  public static DocumentDB: string = "DocumentDB";
+  public static Graph: string = "Graph";
+  public static MongoDB: string = "MongoDB";
+  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
+  public static Table: string = "Table";
+  public static Cassandra: string = "Cassandra";
+  public static Default: string = DefaultAccountExperience.DocumentDB;
+}
+
+export class CapabilityNames {
+  public static EnableTable: string = "EnableTable";
+  public static EnableGremlin: string = "EnableGremlin";
+  public static EnableCassandra: string = "EnableCassandra";
+  public static EnableAutoScale: string = "EnableAutoScale";
+  public static readonly EnableNotebooks: string = "EnableNotebooks";
+  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
+  public static readonly EnableMongo: string = "EnableMongo";
+  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 enableGalleryPublish = "enablegallerypublish";
+  public static readonly enableLinkInjection = "enablelinkinjection";
+  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";
+}
+
+// flight names returned from the portal are always lowercase
+export class Flights {
+  public static readonly SettingsV2 = "settingsv2";
+  public static readonly MongoIndexEditor = "mongoindexeditor";
+}
+
+export class AfecFeatures {
+  public static readonly Spark = "spark-public-preview";
+  public static readonly Notebooks = "sparknotebooks-public-preview";
+  public static readonly StorageAnalytics = "storageanalytics-public-preview";
+}
+
+export class Spark {
+  public static readonly MaxWorkerCount = 10;
+  public static readonly SKUs: HashMap<string> = new HashMap({
+    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
+    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
+    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
+    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
+    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
+    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
+    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
+  });
+}
+
+export class TagNames {
+  public static defaultExperience: string = "defaultExperience";
+}
+
+export class MongoDBAccounts {
+  public static protocol: string = "https";
+  public static defaultPort: string = "10255";
+}
+
+export enum MongoBackendEndpointType {
+  local,
+  remote
+}
+
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
+export class CassandraBackend {
+  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
+  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
+  public static readonly queryApi: string = "api/cassandra";
+  public static readonly guestQueryApi: string = "api/guest/cassandra";
+  public static readonly keysApi: string = "api/cassandra/keys";
+  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
+  public static readonly schemaApi: string = "api/cassandra/schema";
+  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
+}
+
+export class Queries {
+  public static CustomPageOption: string = "custom";
+  public static UnlimitedPageOption: string = "unlimited";
+  public static itemsPerPage: number = 100;
+  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+
+  public static QueryEditorMinHeightRatio: number = 0.1;
+  public static QueryEditorMaxHeightRatio: number = 0.4;
+  public static readonly DefaultMaxDegreeOfParallelism = 6;
+}
+
+export class SavedQueries {
+  public static readonly CollectionName: string = "___Query";
+  public static readonly DatabaseName: string = "___Cosmos";
+  public static readonly OfferThroughput: number = 400;
+  public static readonly PartitionKeyProperty: string = "id";
+}
+
+export class DocumentsGridMetrics {
+  public static DocumentsPerPage: number = 100;
+  public static IndividualRowHeight: number = 34;
+  public static BufferHeight: number = 28;
+  public static SplitterMinWidth: number = 200;
+  public static SplitterMaxWidth: number = 360;
+
+  public static DocumentEditorMinWidthRatio: number = 0.2;
+  public static DocumentEditorMaxWidthRatio: number = 0.4;
+}
+
+export class ExplorerMetrics {
+  public static SplitterMinWidth: number = 240;
+  public static SplitterMaxWidth: number = 400;
+  public static CollapsedResourceTreeWidth: number = 36;
+}
+
+export class SplitterMetrics {
+  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
+}
+
+export class Areas {
+  public static ResourceTree: string = "Resource Tree";
+  public static ContextualPane: string = "Contextual Pane";
+  public static Tab: string = "Tab";
+  public static ShareDialog: string = "Share Access Dialog";
+  public static Notebook: string = "Notebook";
+}
+
+export class HttpHeaders {
+  public static activityId: string = "x-ms-activity-id";
+  public static apiType: string = "x-ms-cosmos-apitype";
+  public static authorization: string = "authorization";
+  public static collectionIndexTransformationProgress: string =
+    "x-ms-documentdb-collection-index-transformation-progress";
+  public static continuation: string = "x-ms-continuation";
+  public static correlationRequestId: string = "x-ms-correlation-request-id";
+  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
+  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
+  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
+  public static connectionString: string = "x-ms-connection-string";
+  public static msDate: string = "x-ms-date";
+  public static location: string = "Location";
+  public static contentType: string = "Content-Type";
+  public static offerReplacePending: string = "x-ms-offer-replace-pending";
+  public static user: string = "x-ms-user";
+  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
+  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
+  public static requestCharge: string = "x-ms-request-charge";
+  public static resourceQuota: string = "x-ms-resource-quota";
+  public static resourceUsage: string = "x-ms-resource-usage";
+  public static retryAfterMs: string = "x-ms-retry-after-ms";
+  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
+  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+  public static autoPilotThroughput = "autoscaleSettings";
+  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+  public static partitionKey: string = "x-ms-documentdb-partitionkey";
+  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
+  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+}
+
+export class ApiType {
+  // Mapped to hexadecimal values in the backend
+  public static readonly MongoDB: number = 1;
+  public static readonly Gremlin: number = 2;
+  public static readonly Cassandra: number = 4;
+  public static readonly Table: number = 8;
+  public static readonly SQL: number = 16;
+}
+
+export class HttpStatusCodes {
+  public static readonly OK: number = 200;
+  public static readonly Created: number = 201;
+  public static readonly Accepted: number = 202;
+  public static readonly NoContent: number = 204;
+  public static readonly NotModified: number = 304;
+  public static readonly Unauthorized: number = 401;
+  public static readonly Forbidden: number = 403;
+  public static readonly NotFound: number = 404;
+  public static readonly TooManyRequests: number = 429;
+  public static readonly Conflict: number = 409;
+
+  public static readonly InternalServerError: number = 500;
+  public static readonly BadGateway: number = 502;
+  public static readonly ServiceUnavailable: number = 503;
+  public static readonly GatewayTimeout: number = 504;
+
+  public static readonly RetryableStatusCodes: number[] = [
+    HttpStatusCodes.TooManyRequests,
+    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+    HttpStatusCodes.BadGateway,
+    HttpStatusCodes.ServiceUnavailable,
+    HttpStatusCodes.GatewayTimeout
+  ];
+}
+
+export class Urls {
+  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
+  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
+  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
+}
+
+export class HashRoutePrefixes {
+  public static databases: string = "/dbs/{db_id}";
+  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
+  public static sprocHash: string = "/sprocs/";
+  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
+  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
+  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
+
+  public static databasesWithId(databaseId: string): string {
+    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static collectionsWithIds(databaseId: string, collectionId: string): string {
+    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static sprocWithIds(
+    databaseId: string,
+    collectionId: string,
+    sprocId: string,
+    stripFirstSlash: boolean = true
+  ): string {
+    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
+
+    const transformedSprocRoute: string = transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{sproc_id}", sprocId);
+    if (!!stripFirstSlash) {
+      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+    }
+
+    return transformedSprocRoute;
+  }
+
+  public static conflictsWithIds(databaseId: string, collectionId: string) {
+    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
+  }
+
+  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
+    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{doc_id}", docId)
+      .replace("/", ""); // strip the first slash since hasher adds it
+  }
+}
+
+export class ConfigurationOverridesValues {
+  public static IsBsonSchemaV2: string = "true";
+}
+
+export class KeyCodes {
+  public static Space: number = 32;
+  public static Enter: number = 13;
+  public static Escape: number = 27;
+  public static UpArrow: number = 38;
+  public static DownArrow: number = 40;
+  public static LeftArrow: number = 37;
+  public static RightArrow: number = 39;
+  public static Tab: number = 9;
+}
+
+// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export class NormalizedEventKey {
+  public static readonly Space = " ";
+  public static readonly Enter = "Enter";
+  public static readonly Escape = "Escape";
+  public static readonly UpArrow = "ArrowUp";
+  public static readonly DownArrow = "ArrowDown";
+  public static readonly LeftArrow = "ArrowLeft";
+  public static readonly RightArrow = "ArrowRight";
+}
+
+export class TryCosmosExperience {
+  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
+  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
+  public static collectionsPerAccount: number = 3;
+  public static maxRU: number = 5000;
+  public static defaultRU: number = 3000;
+}
+
+export class OfferVersions {
+  public static V1: string = "V1";
+  public static V2: string = "V2";
+}
+
+export enum ConflictOperationType {
+  Replace = "replace",
+  Create = "create",
+  Delete = "delete"
+}
+
+export const EmulatorMasterKey =
+  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
+  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
+
+export class Notebook {
+  public static readonly defaultBasePath = "./notebooks";
+  public static readonly heartbeatDelayMs = 5000;
+  public static readonly kernelRestartInitialDelayMs = 1000;
+  public static readonly kernelRestartMaxDelayMs = 20000;
+  public static readonly autoSaveIntervalMs = 120000;
+}
+
+export class SparkLibrary {
+  public static readonly nameMinLength = 3;
+  public static readonly nameMaxLength = 63;
+}
+
+export class AnalyticalStorageTtl {
+  public static readonly Days90: number = 7776000;
+  public static readonly Infinite: number = -1;
+  public static readonly Disabled: number = 0;
+}
+
+export class TerminalQueryParams {
+  public static readonly Terminal = "terminal";
+  public static readonly Server = "server";
+  public static readonly Token = "token";
+  public static readonly SubscriptionId = "subscriptionId";
+  public static readonly TerminalEndpoint = "terminalEndpoint";
+}
--- a/src/Common/dataAccess/queryDocuments.test.ts
+++ b/src/Common/dataAccess/queryDocuments.test.ts
@@ -1,13 +1,13 @@
-import { getCommonQueryOptions } from "./queryDocuments";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-
-describe("getCommonQueryOptions", () => {
-  it("builds the correct default options objects", () => {
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
-  it("reads from localStorage", () => {
-    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
-});
+import { getCommonQueryOptions } from "./DataAccessUtilityBase";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+
+describe("getCommonQueryOptions", () => {
+  it("builds the correct default options objects", () => {
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
+  });
+  it("reads from localStorage", () => {
+    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
+    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
+  });
+});
--- a/src/Common/DataAccessUtilityBase.ts
+++ b/src/Common/DataAccessUtilityBase.ts
@@ -0,0 +1,169 @@
+import { ConflictDefinition, FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import Q from "q";
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+import ConflictId from "../Explorer/Tree/ConflictId";
+import DocumentId from "../Explorer/Tree/DocumentId";
+import StoredProcedure from "../Explorer/Tree/StoredProcedure";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+import * as Constants from "./Constants";
+import { client } from "./CosmosClient";
+
+export function getCommonQueryOptions(options: FeedOptions): any {
+  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
+  options = options || {};
+  options.populateQueryMetrics = true;
+  options.enableScanInQuery = options.enableScanInQuery || true;
+  if (!options.partitionKey) {
+    options.forceQueryPlan = true;
+  }
+  options.maxItemCount =
+    options.maxItemCount ||
+    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
+    Constants.Queries.itemsPerPage;
+  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
+
+  return options;
+}
+
+export function queryDocuments(
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: any
+): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
+  options = getCommonQueryOptions(options);
+  const documentsIterator = client()
+    .database(databaseId)
+    .container(containerId)
+    .items.query(query, options);
+  return Q(documentsIterator);
+}
+
+export function getPartitionKeyHeaderForConflict(conflictId: ConflictId): Object {
+  const partitionKeyDefinition: DataModels.PartitionKey = conflictId.partitionKey;
+  const partitionKeyValue: any = conflictId.partitionKeyValue;
+
+  return getPartitionKeyHeader(partitionKeyDefinition, partitionKeyValue);
+}
+
+export function getPartitionKeyHeader(partitionKeyDefinition: DataModels.PartitionKey, partitionKeyValue: any): Object {
+  if (!partitionKeyDefinition) {
+    return undefined;
+  }
+
+  if (partitionKeyValue === undefined) {
+    return [{}];
+  }
+
+  return [partitionKeyValue];
+}
+
+export function updateDocument(
+  collection: ViewModels.CollectionBase,
+  documentId: DocumentId,
+  newDocument: any
+): Q.Promise<any> {
+  const partitionKey = documentId.partitionKeyValue;
+
+  return Q(
+    client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), partitionKey)
+      .replace(newDocument)
+      .then(response => response.resource)
+  );
+}
+
+export function executeStoredProcedure(
+  collection: ViewModels.Collection,
+  storedProcedure: StoredProcedure,
+  partitionKeyValue: any,
+  params: any[]
+): Q.Promise<any> {
+  // TODO remove this deferred. Kept it because of timeout code at bottom of function
+  const deferred = Q.defer<any>();
+
+  client()
+    .database(collection.databaseId)
+    .container(collection.id())
+    .scripts.storedProcedure(storedProcedure.id())
+    .execute(partitionKeyValue, params, { enableScriptLogging: true })
+    .then(response =>
+      deferred.resolve({
+        result: response.resource,
+        scriptLogs: response.headers[Constants.HttpHeaders.scriptLogResults]
+      })
+    )
+    .catch(error => deferred.reject(error));
+
+  return deferred.promise.timeout(
+    Constants.ClientDefaults.requestTimeoutMs,
+    `Request timed out while executing stored procedure ${storedProcedure.id()}`
+  );
+}
+
+export function createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
+  return Q(
+    client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .items.create(newDocument)
+      .then(response => response.resource)
+  );
+}
+
+export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
+  const partitionKey = documentId.partitionKeyValue;
+
+  return Q(
+    client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), partitionKey)
+      .read()
+      .then(response => response.resource)
+  );
+}
+
+export function deleteDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
+  const partitionKey = documentId.partitionKeyValue;
+
+  return Q(
+    client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), partitionKey)
+      .delete()
+  );
+}
+
+export function deleteConflict(
+  collection: ViewModels.CollectionBase,
+  conflictId: ConflictId,
+  options: any = {}
+): Q.Promise<any> {
+  options.partitionKey = options.partitionKey || getPartitionKeyHeaderForConflict(conflictId);
+
+  return Q(
+    client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .conflict(conflictId.id())
+      .delete(options)
+  );
+}
+
+export function queryConflicts(
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: any
+): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
+  const documentsIterator = client()
+    .database(databaseId)
+    .container(containerId)
+    .conflicts.query(query, options);
+  return Q(documentsIterator);
+}
--- a/src/Common/DocumentClientUtilityBase.ts
+++ b/src/Common/DocumentClientUtilityBase.ts
@@ -0,0 +1,217 @@
+import { ConflictDefinition, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import Q from "q";
+import * as ViewModels from "../Contracts/ViewModels";
+import ConflictId from "../Explorer/Tree/ConflictId";
+import DocumentId from "../Explorer/Tree/DocumentId";
+import StoredProcedure from "../Explorer/Tree/StoredProcedure";
+import { logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import * as Constants from "./Constants";
+import * as DataAccessUtilityBase from "./DataAccessUtilityBase";
+import { MinimalQueryIterator, nextPage } from "./IteratorUtilities";
+import { handleError } from "./ErrorHandlingUtils";
+
+// TODO: Log all promise resolutions and errors with verbosity levels
+export function queryDocuments(
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: any
+): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
+  return DataAccessUtilityBase.queryDocuments(databaseId, containerId, query, options);
+}
+
+export function queryConflicts(
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: any
+): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
+  return DataAccessUtilityBase.queryConflicts(databaseId, containerId, query, options);
+}
+
+export function getEntityName() {
+  const defaultExperience =
+    window.dataExplorer && window.dataExplorer.defaultExperience && window.dataExplorer.defaultExperience();
+  if (defaultExperience === Constants.DefaultAccountExperience.MongoDB) {
+    return "document";
+  }
+  return "item";
+}
+
+export function executeStoredProcedure(
+  collection: ViewModels.Collection,
+  storedProcedure: StoredProcedure,
+  partitionKeyValue: any,
+  params: any[]
+): Q.Promise<any> {
+  var deferred = Q.defer<any>();
+
+  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
+  DataAccessUtilityBase.executeStoredProcedure(collection, storedProcedure, partitionKeyValue, params)
+    .then(
+      (response: any) => {
+        deferred.resolve(response);
+        logConsoleInfo(
+          `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+        );
+      },
+      (error: any) => {
+        handleError(
+          error,
+          "ExecuteStoredProcedure",
+          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+        );
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function queryDocumentsPage(
+  resourceName: string,
+  documentsIterator: MinimalQueryIterator,
+  firstItemIndex: number,
+  options: any
+): Q.Promise<ViewModels.QueryResults> {
+  var deferred = Q.defer<ViewModels.QueryResults>();
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
+  Q(nextPage(documentsIterator, firstItemIndex))
+    .then(
+      (result: ViewModels.QueryResults) => {
+        const itemCount = (result.documents && result.documents.length) || 0;
+        logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
+        deferred.resolve(result);
+      },
+      (error: any) => {
+        handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
+  var deferred = Q.defer<any>();
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);
+  DataAccessUtilityBase.readDocument(collection, documentId)
+    .then(
+      (document: any) => {
+        deferred.resolve(document);
+      },
+      (error: any) => {
+        handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function updateDocument(
+  collection: ViewModels.CollectionBase,
+  documentId: DocumentId,
+  newDocument: any
+): Q.Promise<any> {
+  var deferred = Q.defer<any>();
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
+  DataAccessUtilityBase.updateDocument(collection, documentId, newDocument)
+    .then(
+      (updatedDocument: any) => {
+        logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
+        deferred.resolve(updatedDocument);
+      },
+      (error: any) => {
+        handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
+  var deferred = Q.defer<any>();
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
+  DataAccessUtilityBase.createDocument(collection, newDocument)
+    .then(
+      (savedDocument: any) => {
+        logConsoleInfo(`Successfully created new ${entityName} for container ${collection.id()}`);
+        deferred.resolve(savedDocument);
+      },
+      (error: any) => {
+        handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function deleteDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
+  var deferred = Q.defer<any>();
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
+  DataAccessUtilityBase.deleteDocument(collection, documentId)
+    .then(
+      (response: any) => {
+        logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
+        deferred.resolve(response);
+      },
+      (error: any) => {
+        handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function deleteConflict(
+  collection: ViewModels.CollectionBase,
+  conflictId: ConflictId,
+  options?: any
+): Q.Promise<any> {
+  var deferred = Q.defer<any>();
+
+  const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
+  DataAccessUtilityBase.deleteConflict(collection, conflictId, options)
+    .then(
+      (response: any) => {
+        logConsoleInfo(`Successfully deleted conflict ${conflictId.id()}`);
+        deferred.resolve(response);
+      },
+      (error: any) => {
+        handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
--- a/src/Common/DocumentUtility.ts
+++ b/src/Common/DocumentUtility.ts
@@ -1,10 +0,0 @@
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
-import { userContext } from "../UserContext";
-
-export const getEntityName = (): string => {
-  if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
-    return "document";
-  }
-
-  return "item";
-};
--- a/src/Common/ErrorHandlingUtils.ts
+++ b/src/Common/ErrorHandlingUtils.ts
@@ -21,7 +21,7 @@ export const handleError = (error: string | ARMError | Error, area: string, cons
  sendNotificationForError(errorMessage, errorCode);
 };

-export const getErrorMessage = (error: string | Error = ""): string => {
+export const getErrorMessage = (error: string | Error): string => {
  const errorMessage = typeof error === "string" ? error : error.message;
  return replaceKnownError(errorMessage);
 };
@@ -45,10 +45,10 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
 const replaceKnownError = (errorMessage: string): string => {
  if (
    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
-    errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
+    errorMessage.indexOf("SharedOffer is Disabled for your account") >= 0
  ) {
    return "Database throughput is not supported for internal subscriptions.";
-  } else if (errorMessage?.indexOf("Partition key paths must contain only valid") >= 0) {
+  } else if (errorMessage.indexOf("Partition key paths must contain only valid") >= 0) {
    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
  }

--- a/src/Common/OfferUtility.ts
+++ b/src/Common/OfferUtility.ts
@@ -2,11 +2,8 @@ import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
 import { HttpHeaders } from "./Constants";

-export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer | undefined => {
-  const offerDefinition: SDKOfferDefinition | undefined = offerResponse?.resource;
-  if (!offerDefinition) {
-    return undefined;
-  }
+export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
+  const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
  const offerContent = offerDefinition.content;
  if (!offerContent) {
    return undefined;
@@ -15,7 +12,7 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer | und
  const minimumThroughput = offerContent.collectionThroughputInfo?.minimumRUForCollection;
  const autopilotSettings = offerContent.offerAutopilotSettings;

-  if (autopilotSettings && autopilotSettings.maxThroughput && minimumThroughput) {
+  if (autopilotSettings) {
    return {
      id: offerDefinition.id,
      autoscaleMaxThroughput: autopilotSettings.maxThroughput,
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -3,18 +3,16 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
-import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
+import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
 import { createCollection } from "./dataAccess/createCollection";
 import { handleError } from "./ErrorHandlingUtils";
-import { createDocument } from "./dataAccess/createDocument";
-import { deleteDocument } from "./dataAccess/deleteDocument";
-import { queryDocuments } from "./dataAccess/queryDocuments";

 export class QueriesClient {
  private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -33,7 +31,10 @@ export class QueriesClient {
      return Promise.resolve(queriesCollection.rawDataModel);
    }

-    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
+    const id = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      "Setting up account for saving queries"
+    );
    return createCollection({
      collectionId: SavedQueries.CollectionName,
      createNewDatabase: true,
@@ -44,7 +45,10 @@ export class QueriesClient {
    })
      .then(
        (collection: DataModels.Collection) => {
-          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            "Successfully set up account for saving queries"
+          );
          return Promise.resolve(collection);
        },
        (error: any) => {
@@ -52,14 +56,17 @@ export class QueriesClient {
          return Promise.reject(error);
        }
      )
-      .finally(() => clearMessage());
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
  }

  public async saveQuery(query: DataModels.Query): Promise<void> {
    const queriesCollection = this.findQueriesCollection();
    if (!queriesCollection) {
      const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to save query ${query.queryName}: ${errorMessage}`
+      );
      return Promise.reject(errorMessage);
    }

@@ -67,16 +74,25 @@ export class QueriesClient {
      this.validateQuery(query);
    } catch (error) {
      const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to save query ${query.queryName}: ${errorMessage}`
+      );
      return Promise.reject(errorMessage);
    }

-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Saving query ${query.queryName}`);
+    const id = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `Saving query ${query.queryName}`
+    );
    query.id = query.queryName;
    return createDocument(queriesCollection, query)
      .then(
        (savedQuery: DataModels.Query) => {
-          NotificationConsoleUtils.logConsoleInfo(`Successfully saved query ${query.queryName}`);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully saved query ${query.queryName}`
+          );
          return Promise.resolve();
        },
        (error: any) => {
@@ -87,65 +103,74 @@ export class QueriesClient {
          return Promise.reject(error);
        }
      )
-      .finally(() => clearMessage());
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
  }

  public async getQueries(): Promise<DataModels.Query[]> {
    const queriesCollection = this.findQueriesCollection();
    if (!queriesCollection) {
      const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to fetch saved queries: ${errorMessage}`
+      );
      return Promise.reject(errorMessage);
    }

    const options: any = { enableCrossPartitionQuery: true };
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
-    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
-      SavedQueries.DatabaseName,
-      SavedQueries.CollectionName,
-      this.fetchQueriesQuery(),
-      options
-    );
-    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
-      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
-    return QueryUtils.queryAllPages(fetchQueries)
+    const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
+    return queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
      .then(
-        (results: ViewModels.QueryResults) => {
-          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-            if (!document) {
-              return undefined;
+        (queryIterator: QueryIterator<ItemDefinition & Resource>) => {
+          const fetchQueries = (firstItemIndex: number): Q.Promise<ViewModels.QueryResults> =>
+            queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex, options);
+          return QueryUtils.queryAllPages(fetchQueries).then(
+            (results: ViewModels.QueryResults) => {
+              let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
+                if (!document) {
+                  return undefined;
+                }
+                const { id, resourceId, query, queryName } = document;
+                const parsedQuery: DataModels.Query = {
+                  resourceId: resourceId,
+                  queryName: queryName,
+                  query: query,
+                  id: id
+                };
+                try {
+                  this.validateQuery(parsedQuery);
+                  return parsedQuery;
+                } catch (error) {
+                  return undefined;
+                }
+              });
+              queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+              NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Successfully fetched saved queries");
+              return Promise.resolve(queries);
+            },
+            (error: any) => {
+              handleError(error, "getSavedQueries", "Failed to fetch saved queries");
+              return Promise.reject(error);
            }
-            const { id, resourceId, query, queryName } = document;
-            const parsedQuery: DataModels.Query = {
-              resourceId: resourceId,
-              queryName: queryName,
-              query: query,
-              id: id
-            };
-            try {
-              this.validateQuery(parsedQuery);
-              return parsedQuery;
-            } catch (error) {
-              return undefined;
-            }
-          });
-          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
-          return Promise.resolve(queries);
+          );
        },
        (error: any) => {
+          // should never get into this state but we handle this regardless
          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
          return Promise.reject(error);
        }
      )
-      .finally(() => clearMessage());
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
  }

  public async deleteQuery(query: DataModels.Query): Promise<void> {
    const queriesCollection = this.findQueriesCollection();
    if (!queriesCollection) {
      const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to fetch saved queries: ${errorMessage}`
+      );
      return Promise.reject(errorMessage);
    }

@@ -153,10 +178,16 @@ export class QueriesClient {
      this.validateQuery(query);
    } catch (error) {
      const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleError(`Failed to delete query ${query.queryName}: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to delete query ${query.queryName}: ${errorMessage}`
+      );
    }

-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting query ${query.queryName}`);
+    const id = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `Deleting query ${query.queryName}`
+    );
    query.id = query.queryName;
    const documentId = new DocumentId(
      {
@@ -170,7 +201,10 @@ export class QueriesClient {
    return deleteDocument(queriesCollection, documentId)
      .then(
        () => {
-          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted query ${query.queryName}`);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully deleted query ${query.queryName}`
+          );
          return Promise.resolve();
        },
        (error: any) => {
@@ -178,7 +212,7 @@ export class QueriesClient {
          return Promise.reject(error);
        }
      )
-      .finally(() => clearMessage());
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
  }

  public getResourceId(): string {
--- a/src/Common/Splitter.ts
+++ b/src/Common/Splitter.ts
@@ -23,10 +23,10 @@ export class Splitter {
  public splitterId: string;
  public leftSideId: string;

-  public splitter!: HTMLElement;
-  public leftSide!: HTMLElement;
-  public lastX!: number;
-  public lastWidth!: number;
+  public splitter: HTMLElement;
+  public leftSide: HTMLElement;
+  public lastX: number;
+  public lastWidth: number;

  private isCollapsed: ko.Observable<boolean>;
  private bounds: SplitterBounds;
@@ -42,10 +42,9 @@ export class Splitter {
  }

  public initialize() {
-    if (document.getElementById(this.splitterId) !== null && document.getElementById(this.leftSideId) != null) {
-      this.splitter = <HTMLElement>document.getElementById(this.splitterId);
-      this.leftSide = <HTMLElement>document.getElementById(this.leftSideId);
-    }
+    this.splitter = document.getElementById(this.splitterId);
+    this.leftSide = document.getElementById(this.leftSideId);
+
    const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
    const splitterOptions: JQueryUI.ResizableOptions = {
      animate: true,
--- a/src/Common/dataAccess/snapshots/queryDocuments.test.ts.snap
+++ b/src/Common/dataAccess/snapshots/queryDocuments.test.ts.snap
--- a/src/Common/dataAccess/createCollection.test.ts
+++ b/src/Common/dataAccess/createCollection.test.ts
@@ -1,5 +1,6 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../CosmosClient");
+jest.mock("../DataAccessUtilityBase");
 import { AuthType } from "../../AuthType";
 import { CreateCollectionParams, DatabaseAccount } from "../../Contracts/DataModels";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
--- a/src/Common/dataAccess/createDocument.ts
+++ b/src/Common/dataAccess/createDocument.ts
@@ -1,25 +0,0 @@
-import { CollectionBase } from "../../Contracts/ViewModels";
-import { client } from "../CosmosClient";
-import { getEntityName } from "../DocumentUtility";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-
-export const createDocument = async (collection: CollectionBase, newDocument: unknown): Promise<unknown> => {
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
-
-  try {
-    const response = await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .items.create(newDocument);
-
-    logConsoleInfo(`Successfully created new ${entityName} for container ${collection.id()}`);
-    return response?.resource;
-  } catch (error) {
-    handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
--- a/src/Common/dataAccess/deleteConflict.ts
+++ b/src/Common/dataAccess/deleteConflict.ts
@@ -1,36 +0,0 @@
-import ConflictId from "../../Explorer/Tree/ConflictId";
-import { CollectionBase } from "../../Contracts/ViewModels";
-import { RequestOptions } from "@azure/cosmos";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-
-export const deleteConflict = async (collection: CollectionBase, conflictId: ConflictId): Promise<void> => {
-  const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
-
-  try {
-    const options = {
-      partitionKey: getPartitionKeyHeaderForConflict(conflictId)
-    };
-
-    await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .conflict(conflictId.id())
-      .delete(options as RequestOptions);
-    logConsoleInfo(`Successfully deleted conflict ${conflictId.id()}`);
-  } catch (error) {
-    handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
-
-const getPartitionKeyHeaderForConflict = (conflictId: ConflictId): unknown => {
-  if (!conflictId.partitionKey) {
-    return undefined;
-  }
-
-  return conflictId.partitionKeyValue === undefined ? [{}] : [conflictId.partitionKeyValue];
-};
--- a/src/Common/dataAccess/deleteDocument.ts
+++ b/src/Common/dataAccess/deleteDocument.ts
@@ -1,25 +0,0 @@
-import { CollectionBase } from "../../Contracts/ViewModels";
-import { client } from "../CosmosClient";
-import { getEntityName } from "../DocumentUtility";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import DocumentId from "../../Explorer/Tree/DocumentId";
-
-export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
-  const entityName: string = getEntityName();
-  const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
-
-  try {
-    await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue)
-      .delete();
-    logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
-  } catch (error) {
-    handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
--- a/src/Common/dataAccess/executeStoredProcedure.ts
+++ b/src/Common/dataAccess/executeStoredProcedure.ts
@@ -1,48 +0,0 @@
-import { Collection } from "../../Contracts/ViewModels";
-import { ClientDefaults, HttpHeaders } from "../Constants";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import StoredProcedure from "../../Explorer/Tree/StoredProcedure";
-
-export interface ExecuteSprocResult {
-  result: StoredProcedure;
-  scriptLogs: string;
-}
-
-export const executeStoredProcedure = async (
-  collection: Collection,
-  storedProcedure: StoredProcedure,
-  partitionKeyValue: string,
-  params: string[]
-): Promise<ExecuteSprocResult> => {
-  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
-  const timeout = setTimeout(() => {
-    throw Error(`Request timed out while executing stored procedure ${storedProcedure.id()}`);
-  }, ClientDefaults.requestTimeoutMs);
-
-  try {
-    const response = await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.storedProcedure(storedProcedure.id())
-      .execute(partitionKeyValue, params, { enableScriptLogging: true });
-    clearTimeout(timeout);
-    logConsoleInfo(
-      `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
-    );
-    return {
-      result: response.resource,
-      scriptLogs: response.headers[HttpHeaders.scriptLogResults] as string
-    };
-  } catch (error) {
-    handleError(
-      error,
-      "ExecuteStoredProcedure",
-      `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
-    );
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
--- a/src/Common/dataAccess/queryConflicts.ts
+++ b/src/Common/dataAccess/queryConflicts.ts
@@ -1,14 +0,0 @@
-import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
-import { client } from "../CosmosClient";
-
-export const queryConflicts = (
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: FeedOptions
-): QueryIterator<ConflictDefinition & Resource> => {
-  return client()
-    .database(databaseId)
-    .container(containerId)
-    .conflicts.query(query, options);
-};
--- a/src/Common/dataAccess/queryDocuments.ts
+++ b/src/Common/dataAccess/queryDocuments.ts
@@ -1,34 +0,0 @@
-import { Queries } from "../Constants";
-import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import { client } from "../CosmosClient";
-
-export const queryDocuments = (
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: FeedOptions
-): QueryIterator<ItemDefinition & Resource> => {
-  options = getCommonQueryOptions(options);
-  return client()
-    .database(databaseId)
-    .container(containerId)
-    .items.query(query, options);
-};
-
-export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
-  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
-  options = options || {};
-  options.populateQueryMetrics = true;
-  options.enableScanInQuery = options.enableScanInQuery || true;
-  if (!options.partitionKey) {
-    options.forceQueryPlan = true;
-  }
-  options.maxItemCount =
-    options.maxItemCount ||
-    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
-    Queries.itemsPerPage;
-  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
-
-  return options;
-};
--- a/src/Common/dataAccess/queryDocumentsPage.ts
+++ b/src/Common/dataAccess/queryDocumentsPage.ts
@@ -1,26 +0,0 @@
-import { QueryResults } from "../../Contracts/ViewModels";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
-import { handleError } from "../ErrorHandlingUtils";
-import { getEntityName } from "../DocumentUtility";
-
-export const queryDocumentsPage = async (
-  resourceName: string,
-  documentsIterator: MinimalQueryIterator,
-  firstItemIndex: number
-): Promise<QueryResults> => {
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
-
-  try {
-    const result: QueryResults = await nextPage(documentsIterator, firstItemIndex);
-    const itemCount = (result.documents && result.documents.length) || 0;
-    logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
-    return result;
-  } catch (error) {
-    handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
--- a/src/Common/dataAccess/readDocument.ts
+++ b/src/Common/dataAccess/readDocument.ts
@@ -1,27 +0,0 @@
-import { Item } from "@azure/cosmos";
-import { CollectionBase } from "../../Contracts/ViewModels";
-import { client } from "../CosmosClient";
-import { getEntityName } from "../DocumentUtility";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import DocumentId from "../../Explorer/Tree/DocumentId";
-
-export const readDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<Item> => {
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);
-
-  try {
-    const response = await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue)
-      .read();
-
-    return response?.resource;
-  } catch (error) {
-    handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
--- a/src/Common/dataAccess/updateDocument.ts
+++ b/src/Common/dataAccess/updateDocument.ts
@@ -1,32 +0,0 @@
-import { CollectionBase } from "../../Contracts/ViewModels";
-import { Item } from "@azure/cosmos";
-import { client } from "../CosmosClient";
-import { getEntityName } from "../DocumentUtility";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import DocumentId from "../../Explorer/Tree/DocumentId";
-
-export const updateDocument = async (
-  collection: CollectionBase,
-  documentId: DocumentId,
-  newDocument: Item
-): Promise<Item> => {
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
-
-  try {
-    const response = await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue)
-      .replace(newDocument);
-
-    logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
-    return response?.resource;
-  } catch (error) {
-    handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -26,6 +26,7 @@ interface ConfigContext {
  GITHUB_CLIENT_SECRET?: string; // No need to inject secret for prod. Juno already knows it.
  hostedExplorerURL: string;
  armAPIVersion?: string;
+  serverId?: string;
 }

 // Default configuration
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -210,9 +210,9 @@ export interface QueryMetrics {

 export interface Offer {
  id: string;
-  autoscaleMaxThroughput: number | undefined;
-  manualThroughput: number | undefined;
-  minimumThroughput: number | undefined;
+  autoscaleMaxThroughput: number;
+  manualThroughput: number;
+  minimumThroughput: number;
  offerDefinition?: SDKOfferDefinition;
  offerReplacePending: boolean;
 }
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -15,7 +15,6 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
-import { SelfServeType } from "../SelfServe/SelfServeUtils";
 import { UploadDetails } from "../workers/upload/definitions";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
@@ -363,7 +362,7 @@ export enum CollectionTabKind {
  Gallery = 17,
  NotebookViewer = 18,
  Schema = 19,
-  SettingsV2 = 20
+  SettingsV2 = 19
 }

 export enum TerminalKind {
@@ -396,7 +395,6 @@ export interface DataExplorerInputsFrame {
  isAuthWithresourceToken?: boolean;
  defaultCollectionThroughput?: CollectionCreationDefaults;
  flights?: readonly string[];
-  selfServeType?: SelfServeType;
 }

 export interface CollectionCreationDefaults {
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
@@ -42,7 +42,7 @@ interface CollapsiblePanelParams {
 * Use the optional "collapseToLeft" parameter to collapse to the left.
 */
 class CollapsiblePanelViewModel {
-  public params: CollapsiblePanelParams;
+  private params: CollapsiblePanelParams;
  private isCollapsed: ko.Observable<boolean>;

  public constructor(params: CollapsiblePanelParams) {
@@ -50,7 +50,7 @@ class CollapsiblePanelViewModel {
    this.isCollapsed = params.isCollapsed || ko.observable(false);
  }

-  public toggleCollapse(): void {
+  private toggleCollapse(): void {
    this.isCollapsed(!this.isCollapsed());
  }
 }
--- a/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
+++ b/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
@@ -48,7 +48,6 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
    { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
    { key: "feature.enablettl", label: "Enable TTL", value: "true" },
    { key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
-    { key: "feature.selfServeType", label: "Self serve feature", value: "sample" },
    {
      key: "feature.enableLinkInjection",
      label: "Enable Injecting Notebook Viewer Link into the first cell",
--- a/src/Explorer/Controls/FeaturePanel/snapshots/FeaturePanelComponent.test.tsx.snap
+++ b/src/Explorer/Controls/FeaturePanel/snapshots/FeaturePanelComponent.test.tsx.snap
@@ -157,14 +157,14 @@ exports[`Feature panel renders all flags 1`] = `
        />
        <StyledCheckboxBase
          checked={false}
-          key="feature.selfServeType"
-          label="Self serve feature"
+          key="feature.enableLinkInjection"
+          label="Enable Injecting Notebook Viewer Link into the first cell"
          onChange={[Function]}
        />
        <StyledCheckboxBase
          checked={false}
-          key="feature.enableLinkInjection"
-          label="Enable Injecting Notebook Viewer Link into the first cell"
+          key="feature.canexceedmaximumvalue"
+          label="Can exceed max value"
          onChange={[Function]}
        />
      </Stack>
@@ -172,12 +172,6 @@ exports[`Feature panel renders all flags 1`] = `
        className="checkboxRow"
        horizontalAlign="space-between"
      >
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.canexceedmaximumvalue"
-          label="Can exceed max value"
-          onChange={[Function]}
-        />
        <StyledCheckboxBase
          checked={false}
          key="feature.enablefixedcollectionwithsharedthroughput"
--- a/src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
@@ -71,7 +71,7 @@ interface InputTypeaheadParams {
  /**
   * This function gets called when pressing ENTER on the input box
   */
-  submitFct?: (inputValue: string | null, selection: Item | null) => void;
+  submitFct?: (inputValue: string, selection: Item) => void;

  /**
   * Typehead comes with a Search button that we normally remove.
@@ -88,8 +88,8 @@ interface OnClickItem {
 }

 interface Cache {
-  inputValue: string | null;
-  selection: Item | null;
+  inputValue: string;
+  selection: Item;
 }

 class InputTypeaheadViewModel {
@@ -98,12 +98,15 @@ class InputTypeaheadViewModel {
  private params: InputTypeaheadParams;

  private cache: Cache;
+  private inputValue: string;
+  private selection: Item;

  public constructor(params: InputTypeaheadParams) {
    this.instanceNumber = InputTypeaheadViewModel.instanceCount++;
    this.params = params;

    this.params.choices.subscribe(this.initializeTypeahead.bind(this));
+
    this.cache = {
      inputValue: null,
      selection: null
@@ -158,7 +161,7 @@ class InputTypeaheadViewModel {
      }
    }

-    ($ as any).typeahead(options);
+    $.typeahead(options);
  }

  /**
@@ -174,11 +177,11 @@ class InputTypeaheadViewModel {
   * Use ko's "template: afterRender" callback to do that without actually using any template.
   * Another way is to call it within setTimeout() in constructor.
   */
-  public afterRender(): void {
+  private afterRender(): void {
    this.initializeTypeahead();
  }

-  public submit(): void {
+  private submit(): void {
    if (this.params.submitFct) {
      this.params.submitFct(this.cache.inputValue, this.cache.selection);
    }
--- a/src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
+++ b/src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
@@ -59,12 +59,10 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
    this.params = params;

    this.params.content.subscribe((newValue: string) => {
-      if (newValue) {
-        if (!!this.editor) {
-          this.editor.getModel().setValue(newValue);
-        } else {
-          this.createEditor(newValue, this.configureEditor.bind(this));
-        }
+      if (!!this.editor) {
+        this.editor.getModel().setValue(newValue);
+      } else {
+        this.createEditor(newValue, this.configureEditor.bind(this));
      }
    });

--- a/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
@@ -231,7 +231,7 @@ describe("SettingsComponent", () => {

  it("getUpdatedConflictResolutionPolicy", () => {
    const wrapper = shallow(<SettingsComponent {...baseProps} />);
-    const conflictResolutionPolicyPath = "/_ts";
+    const conflictResolutionPolicyPath = "_ts";
    const conflictResolutionPolicyProcedure = "sample_sproc";
    const expectSprocPath =
      "/dbs/" + collection.databaseId + "/colls/" + collection.id() + "/sprocs/" + conflictResolutionPolicyProcedure;
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -138,8 +138,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S

    // Mongo container with system partition key still treat as "Fixed"
    this.isFixedContainer =
-      this.container.isPreferredApiMongoDB() &&
-      (!this.collection.partitionKey || this.collection.partitionKey.systemKey);
+      !this.collection.partitionKey ||
+      (this.container.isPreferredApiMongoDB() && this.collection.partitionKey.systemKey);

    this.state = {
      throughput: undefined,
@@ -684,7 +684,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S

    if (policy.mode === DataModels.ConflictResolutionMode.LastWriterWins) {
      policy.conflictResolutionPath = this.state.conflictResolutionPolicyPath;
-      if (!policy.conflictResolutionPath?.startsWith("/")) {
+      if (policy.conflictResolutionPath?.startsWith("/")) {
        policy.conflictResolutionPath = "/" + policy.conflictResolutionPath;
      }
    }
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
@@ -1,9 +1,9 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IColumn, Text } from "office-ui-fabric-react";
 import {
  getAutoPilotV3SpendElement,
-  getEstimatedSpendingElement,
+  getEstimatedSpendElement,
+  getEstimatedAutoscaleSpendElement,
  manualToAutoscaleDisclaimerElement,
  ttlWarning,
  indexingPolicynUnsavedWarningMessage,
@@ -19,37 +19,11 @@ import {
  mongoIndexingPolicyDisclaimer,
  mongoIndexingPolicyAADError,
  mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage,
-  ManualEstimatedSpendingDisplayProps,
-  PriceBreakdown,
-  getRuPriceBreakdown
+  renderMongoIndexTransformationRefreshMessage
 } from "./SettingsRenderUtils";

 class SettingsRenderUtilsTestComponent extends React.Component {
  public render(): JSX.Element {
-    const estimatedSpendingColumns: IColumn[] = [
-      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "daily", name: "Daily", fieldName: "daily", minWidth: 100, maxWidth: 200, isResizable: true },
-      { key: "monthly", name: "Monthly", fieldName: "monthly", minWidth: 100, maxWidth: 200, isResizable: true }
-    ];
-    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        hourly: <Text>$ 1.02</Text>,
-        daily: <Text>$ 24.48</Text>,
-        monthly: <Text>$ 744.6</Text>
-      }
-    ];
-    const priceBreakdown: PriceBreakdown = {
-      hourlyPrice: 1.02,
-      dailyPrice: 24.48,
-      monthlyPrice: 744.6,
-      pricePerRu: 0.00051,
-      currency: "RMB",
-      currencySign: "¥"
-    };
-
    return (
      <>
        {getAutoPilotV3SpendElement(1000, false)}
@@ -57,7 +31,9 @@ class SettingsRenderUtilsTestComponent extends React.Component {
        {getAutoPilotV3SpendElement(1000, true)}
        {getAutoPilotV3SpendElement(undefined, true)}

-        {getEstimatedSpendingElement(estimatedSpendingColumns, estimatedSpendingItems, 1000, 2, priceBreakdown, false)}
+        {getEstimatedSpendElement(1000, "mooncake", 2, false)}
+
+        {getEstimatedAutoscaleSpendElement(1000, "mooncake", 2, false)}

        {manualToAutoscaleDisclaimerElement}
        {ttlWarning}
@@ -93,14 +69,4 @@ describe("SettingsUtils functions", () => {
    const wrapper = shallow(<SettingsRenderUtilsTestComponent />);
    expect(wrapper).toMatchSnapshot();
  });
-
-  it("should return correct price breakdown for a manual RU setting of 500, 1 region, multimaster disabled", () => {
-    const prices = getRuPriceBreakdown(500, "", 1, false, false);
-    expect(prices.hourlyPrice).toBe(0.04);
-    expect(prices.dailyPrice).toBe(0.96);
-    expect(prices.monthlyPrice).toBe(29.2);
-    expect(prices.pricePerRu).toBe(0.00008);
-    expect(prices.currency).toBe("USD");
-    expect(prices.currencySign).toBe("$");
-  });
 });
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -3,13 +3,14 @@ import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
 import { Urls, StyleConstants } from "../../../Common/Constants";
 import {
+  computeAutoscaleUsagePriceHourly,
  getPriceCurrency,
  getCurrencySign,
  getAutoscalePricePerRu,
  getMultimasterMultiplier,
  computeRUUsagePriceHourly,
  getPricePerRu,
-  estimatedCostDisclaimer
+  calculateEstimateNumber
 } from "../../../Utils/PricingUtils";
 import {
  ITextFieldStyles,
@@ -31,42 +32,11 @@ import {
  MessageBarType,
  Stack,
  Spinner,
-  SpinnerSize,
-  DetailsList,
-  IColumn,
-  SelectionMode,
-  DetailsListLayoutMode,
-  IDetailsRowProps,
-  DetailsRow,
-  IDetailsColumnStyles
+  SpinnerSize
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";

-export interface EstimatedSpendingDisplayProps {
-  costType: JSX.Element;
-}
-
-export interface ManualEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
-  hourly: JSX.Element;
-  daily: JSX.Element;
-  monthly: JSX.Element;
-}
-
-export interface AutoscaleEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
-  minPerMonth: JSX.Element;
-  maxPerMonth: JSX.Element;
-}
-
-export interface PriceBreakdown {
-  hourlyPrice: number;
-  dailyPrice: number;
-  monthlyPrice: number;
-  pricePerRu: number;
-  currency: string;
-  currencySign: string;
-}
-
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };

 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
  label: {
@@ -134,16 +104,6 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
  }
 };

-export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
-  root: {
-    selectors: {
-      ":hover": {
-        background: "transparent"
-      }
-    }
-  }
-};
-
 export const customDetailsListStyles: Partial<IDetailsListStyles> = {
  root: {
    selectors: {
@@ -166,17 +126,10 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
  ]
 };

-export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
-  text: { fontSize: 14 }
-};
+export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop: "5px" } };

 export const throughputUnit = "RU/s";

-export function onRenderRow(props: IDetailsRowProps): JSX.Element {
-  return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
-}
-
 export const getAutoPilotV3SpendElement = (
  maxAutoPilotThroughputSet: number,
  isDatabaseThroughput: boolean,
@@ -212,61 +165,63 @@ export const getAutoPilotV3SpendElement = (
  );
 };

-export const getRuPriceBreakdown = (
+export const getEstimatedAutoscaleSpendElement = (
  throughput: number,
  serverId: string,
-  numberOfRegions: number,
-  isMultimaster: boolean,
-  isAutoscale: boolean
-): PriceBreakdown => {
-  const hourlyPrice: number = computeRUUsagePriceHourly({
-    serverId: serverId,
-    requestUnits: throughput,
-    numberOfRegions: numberOfRegions,
-    multimasterEnabled: isMultimaster,
-    isAutoscale: isAutoscale
-  });
-  const basePricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
-    : getPricePerRu(serverId);
-  return {
-    hourlyPrice: hourlyPrice,
-    dailyPrice: hourlyPrice * 24,
-    monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
-    currency: getPriceCurrency(serverId),
-    currencySign: getCurrencySign(serverId)
-  };
+  regions: number,
+  multimaster: boolean
+): JSX.Element => {
+  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
+  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
+  const currency: string = getPriceCurrency(serverId);
+  const currencySign: string = getCurrencySign(serverId);
+  const pricePerRu =
+    getAutoscalePricePerRu(serverId, getMultimasterMultiplier(regions, multimaster)) *
+    getMultimasterMultiplier(regions, multimaster);
+
+  return (
+    <Text id="autoscaleSpendElement">
+      Estimated monthly cost ({currency}) is{" "}
+      <b>
+        {currencySign}
+        {calculateEstimateNumber(monthlyPrice / 10)}
+        {` - `}
+        {currencySign}
+        {calculateEstimateNumber(monthlyPrice)}{" "}
+      </b>
+      ({"regions: "} {regions}, {throughput / 10} - {throughput} RU/s, {currencySign}
+      {pricePerRu}/RU)
+    </Text>
+  );
 };

-export const getEstimatedSpendingElement = (
-  estimatedSpendingColumns: IColumn[],
-  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
+export const getEstimatedSpendElement = (
  throughput: number,
-  numberOfRegions: number,
-  priceBreakdown: PriceBreakdown,
-  isAutoscale: boolean
+  serverId: string,
+  regions: number,
+  multimaster: boolean
 ): JSX.Element => {
-  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
+  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, throughput, regions, multimaster);
+  const dailyPrice: number = hourlyPrice * 24;
+  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
+  const currency: string = getPriceCurrency(serverId);
+  const currencySign: string = getCurrencySign(serverId);
+  const pricePerRu = getPricePerRu(serverId) * getMultimasterMultiplier(regions, multimaster);
+
  return (
-    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
-      <DetailsList
-        disableSelectionZone
-        items={estimatedSpendingItems}
-        columns={estimatedSpendingColumns}
-        selectionMode={SelectionMode.none}
-        layoutMode={DetailsListLayoutMode.justified}
-        onRenderRow={onRenderRow}
-      />
-      <Text id="throughputSpendElement">
-        ({"regions: "} {numberOfRegions}, {ruRange}
-        {throughput} RU/s, {priceBreakdown.currencySign}
-        {priceBreakdown.pricePerRu}/RU)
-      </Text>
-      <Text>
-        <em>{estimatedCostDisclaimer}</em>
-      </Text>
-    </Stack>
+    <Text id="throughputSpendElement">
+      Estimated cost ({currency}):{" "}
+      <b>
+        {currencySign}
+        {calculateEstimateNumber(hourlyPrice)} hourly {` / `}
+        {currencySign}
+        {calculateEstimateNumber(dailyPrice)} daily {` / `}
+        {currencySign}
+        {calculateEstimateNumber(monthlyPrice)} monthly{" "}
+      </b>
+      ({"regions: "} {regions}, {throughput}RU/s, {currencySign}
+      {pricePerRu}/RU)
+    </Text>
  );
 };

@@ -310,13 +265,6 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
  </Text>
 );

-export const saveThroughputWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle}>
-    Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
-    before saving your changes
-  </Text>
-);
-
 const getCurrentThroughput = (
  isAutoscale: boolean,
  throughput: number,
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/snapshots/IndexingPolicyRefreshComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/snapshots/IndexingPolicyRefreshComponent.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -6,6 +6,8 @@ import {
  IconButton,
  Text,
  SelectionMode,
+  IDetailsRowProps,
+  DetailsRow,
  IColumn,
  MessageBar,
  MessageBarType,
@@ -19,11 +21,11 @@ import {
  mongoIndexingPolicyDisclaimer,
  mediumWidthStackStyles,
  subComponentStackProps,
+  transparentDetailsRowStyles,
  createAndAddMongoIndexStackProps,
  separatorStyles,
  indexingPolicynUnsavedWarningMessage,
-  infoAndToolTipTextStyle,
-  onRenderRow
+  infoAndToolTipTextStyle
 } from "../../SettingsRenderUtils";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
@@ -138,6 +140,10 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
    return undefined;
  };

+  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
+    return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
+  };
+
  private getActionButton = (arrayPosition: number, isCurrentIndex: boolean): JSX.Element => {
    return isCurrentIndex ? (
      <IconButton
@@ -247,7 +253,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
                items={initialIndexes}
                columns={this.initialIndexesColumns}
                selectionMode={SelectionMode.none}
-                onRenderRow={onRenderRow}
+                onRenderRow={this.onRenderRow}
                layoutMode={DetailsListLayoutMode.justified}
              />
              {this.renderIndexesToBeAdded()}
@@ -273,7 +279,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
              items={indexesToBeDropped}
              columns={this.indexesToBeDroppedColumns}
              selectionMode={SelectionMode.none}
-              onRenderRow={onRenderRow}
+              onRenderRow={this.onRenderRow}
              layoutMode={DetailsListLayoutMode.justified}
            />
          )}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -16,7 +16,7 @@ import {
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
-import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
 import { configContext, Platform } from "../../../../ConfigContext";

 export interface ScaleComponentProps {
@@ -165,9 +165,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  private getThroughputInputComponent = (): JSX.Element => (
    <ThroughputInputAutoPilotV3Component
      databaseAccount={this.props.container.databaseAccount()}
-      databaseName={this.props.collection.databaseId}
-      collectionName={this.props.collection.id()}
-      serverId={this.props.container.serverId()}
+      serverId={configContext.serverId}
      throughput={this.props.throughput}
      throughputBaseline={this.props.throughputBaseline}
      onThroughputChange={this.props.onThroughputChange}
@@ -178,7 +176,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      label={this.getThroughputTitle()}
      isEmulator={this.isEmulator}
      isFixed={this.props.isFixedContainer}
-      isFreeTierAccount={this.isFreeTierAccount()}
      isAutoPilotSelected={this.props.isAutoPilotSelected}
      onAutoPilotSelected={this.props.onAutoPilotSelected}
      wasAutopilotOriginallySet={this.props.wasAutopilotOriginallySet}
@@ -193,37 +190,9 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
    />
  );

-  private isFreeTierAccount(): boolean {
-    const databaseAccount = this.props.container?.databaseAccount();
-    return databaseAccount?.properties?.enableFreeTier;
-  }
-
-  private getFreeTierInfoMessage(): JSX.Element {
-    return (
-      <Text>
-        With free tier, you will get the first 400 RU/s and 5 GB of storage in this account for free. To keep your
-        account free, keep the total RU/s across all resources in the account to 400 RU/s.
-        <Link
-          href="https://docs.microsoft.com/en-us/azure/cosmos-db/understand-your-bill#billing-examples-with-free-tier-accounts"
-          target="_blank"
-        >
-          Learn more.
-        </Link>
-      </Text>
-    );
-  }
-
  public render(): JSX.Element {
    return (
      <Stack {...subComponentStackProps}>
-        {this.isFreeTierAccount() && (
-          <MessageBar
-            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-            styles={{ text: { fontSize: 14 } }}
-          >
-            {this.getFreeTierInfoMessage()}
-          </MessageBar>
-        )}
        {this.getInitialNotificationElement() && (
          <MessageBar messageBarType={MessageBarType.warning}>{this.getInitialNotificationElement()}</MessageBar>
        )}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -13,7 +13,16 @@ import {
 } from "../SettingsUtils";
 import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import { Label, Text, TextField, Stack, IChoiceGroupOption, ChoiceGroup, MessageBar } from "office-ui-fabric-react";
+import {
+  Label,
+  Text,
+  TextField,
+  Stack,
+  IChoiceGroupOption,
+  ChoiceGroup,
+  MessageBar,
+  MessageBarType
+} from "office-ui-fabric-react";
 import {
  getTextFieldStyles,
  changeFeedPolicyToolTip,
@@ -181,10 +190,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
        styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
      />
      {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
          {ttlWarning}
        </MessageBar>
      )}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
@@ -9,8 +9,6 @@ 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,
@@ -28,7 +26,6 @@ describe("ThroughputInputAutoPilotV3Component", () => {
    spendAckVisible: false,
    showAsMandatory: true,
    isFixed: false,
-    isFreeTierAccount: false,
    label: "label",
    infoBubbleText: "infoBubbleText",
    canExceedMaximumValue: true,
@@ -57,6 +54,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
    expect(wrapper.exists("#throughputInput")).toEqual(true);
    expect(wrapper.exists("#autopilotInput")).toEqual(false);
    expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
+    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(false);
  });

  it("autopilot input visible", () => {
@@ -74,7 +72,8 @@ describe("ThroughputInputAutoPilotV3Component", () => {

    wrapper.setProps({ wasAutopilotOriginallySet: true });
    wrapper.update();
-    expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
+    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(true);
+    expect(wrapper.exists("#throughputSpendElement")).toEqual(false);
  });

  it("spendAck checkbox visible", () => {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -8,15 +8,10 @@ import {
  checkBoxAndInputStackProps,
  getChoiceGroupStyles,
  messageBarStyles,
-  getEstimatedSpendingElement,
+  getEstimatedSpendElement,
+  getEstimatedAutoscaleSpendElement,
  getAutoPilotV3SpendElement,
-  manualToAutoscaleDisclaimerElement,
-  saveThroughputWarningMessage,
-  ManualEstimatedSpendingDisplayProps,
-  AutoscaleEstimatedSpendingDisplayProps,
-  PriceBreakdown,
-  getRuPriceBreakdown,
-  transparentDetailsHeaderStyle
+  manualToAutoscaleDisclaimerElement
 } from "../../SettingsRenderUtils";
 import {
  Text,
@@ -28,8 +23,7 @@ import {
  Label,
  Link,
  MessageBar,
-  FontIcon,
-  IColumn
+  MessageBarType
 } from "office-ui-fabric-react";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
@@ -38,16 +32,11 @@ 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 { usageInGB } from "../../../../../Utils/PricingUtils";
 import { Features } from "../../../../../Common/Constants";

-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;
@@ -62,7 +51,6 @@ export interface ThroughputInputAutoPilotV3Props {
  spendAckVisible?: boolean;
  showAsMandatory?: boolean;
  isFixed: boolean;
-  isFreeTierAccount: boolean;
  isEmulator: boolean;
  label: string;
  infoBubbleText?: string;
@@ -81,7 +69,6 @@ export interface ThroughputInputAutoPilotV3Props {

 interface ThroughputInputAutoPilotV3State {
  spendAckChecked: boolean;
-  exceedFreeTierThroughput: boolean;
 }

 export class ThroughputInputAutoPilotV3Component extends React.Component<
@@ -155,9 +142,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
  public constructor(props: ThroughputInputAutoPilotV3Props) {
    super(props);
    this.state = {
-      spendAckChecked: this.props.spendAckChecked,
-      exceedFreeTierThroughput:
-        this.props.isFreeTierAccount && !this.props.isAutoPilotSelected && this.props.throughput > 400
+      spendAckChecked: this.props.spendAckChecked
    };

    this.step = this.props.step ?? ThroughputInputAutoPilotV3Component.defaultStep;
@@ -180,243 +165,33 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
      return <></>;
    }

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

    let estimatedSpend: JSX.Element;

    if (!this.props.isAutoPilotSelected) {
-      estimatedSpend = this.getEstimatedManualSpendElement(
+      estimatedSpend = getEstimatedSpendElement(
        // 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,
+        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : offerThroughput,
        serverId,
        regions,
-        multimaster,
-        isDirty ? this.props.throughput : undefined
+        multimaster
      );
    } else {
-      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughputBaseline,
+      estimatedSpend = getEstimatedAutoscaleSpendElement(
+        this.props.maxAutoPilotThroughput,
        serverId,
        regions,
-        multimaster,
-        isDirty ? this.props.maxAutoPilotThroughput : undefined
+        multimaster
      );
    }
    return estimatedSpend;
  };

-  private getEstimatedAutoscaleSpendElement = (
-    throughput: number,
-    serverId: string,
-    numberOfRegions: number,
-    isMultimaster: boolean,
-    newThroughput?: number
-  ): JSX.Element => {
-    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
-    const estimatedSpendingColumns: IColumn[] = [
-      {
-        key: "costType",
-        name: "",
-        fieldName: "costType",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      },
-      {
-        key: "minPerMonth",
-        name: "Min Per Month",
-        fieldName: "minPerMonth",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      },
-      {
-        key: "maxPerMonth",
-        name: "Max Per Month",
-        fieldName: "maxPerMonth",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      }
-    ];
-    const estimatedSpendingItems: AutoscaleEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        minPerMonth: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)}
-          </Text>
-        ),
-        maxPerMonth: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
-          </Text>
-        )
-      }
-    ];
-
-    if (newThroughput) {
-      const newPrices: PriceBreakdown = getRuPriceBreakdown(
-        newThroughput,
-        serverId,
-        numberOfRegions,
-        isMultimaster,
-        true
-      );
-      estimatedSpendingItems.unshift({
-        costType: (
-          <Text>
-            <b>Updated Cost</b>
-          </Text>
-        ),
-        minPerMonth: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)}
-            </b>
-          </Text>
-        ),
-        maxPerMonth: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
-            </b>
-          </Text>
-        )
-      });
-    }
-
-    return getEstimatedSpendingElement(
-      estimatedSpendingColumns,
-      estimatedSpendingItems,
-      newThroughput ?? throughput,
-      numberOfRegions,
-      prices,
-      true
-    );
-  };
-
-  private getEstimatedManualSpendElement = (
-    throughput: number,
-    serverId: string,
-    numberOfRegions: number,
-    isMultimaster: boolean,
-    newThroughput?: number
-  ): JSX.Element => {
-    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
-    const estimatedSpendingColumns: IColumn[] = [
-      {
-        key: "costType",
-        name: "",
-        fieldName: "costType",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      },
-      {
-        key: "hourly",
-        name: "Hourly",
-        fieldName: "hourly",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      },
-      {
-        key: "daily",
-        name: "Daily",
-        fieldName: "daily",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      },
-      {
-        key: "monthly",
-        name: "Monthly",
-        fieldName: "monthly",
-        minWidth: 100,
-        maxWidth: 200,
-        isResizable: true,
-        styles: transparentDetailsHeaderStyle
-      }
-    ];
-    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
-      {
-        costType: <Text>Current Cost</Text>,
-        hourly: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
-          </Text>
-        ),
-        daily: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
-          </Text>
-        ),
-        monthly: (
-          <Text>
-            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
-          </Text>
-        )
-      }
-    ];
-
-    if (newThroughput) {
-      const newPrices: PriceBreakdown = getRuPriceBreakdown(
-        newThroughput,
-        serverId,
-        numberOfRegions,
-        isMultimaster,
-        false
-      );
-      estimatedSpendingItems.unshift({
-        costType: (
-          <Text>
-            <b>Updated Cost</b>
-          </Text>
-        ),
-        hourly: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
-            </b>
-          </Text>
-        ),
-        daily: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
-            </b>
-          </Text>
-        ),
-        monthly: (
-          <Text>
-            <b>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
-            </b>
-          </Text>
-        )
-      });
-    }
-
-    return getEstimatedSpendingElement(
-      estimatedSpendingColumns,
-      estimatedSpendingItems,
-      newThroughput ?? throughput,
-      numberOfRegions,
-      prices,
-      false
-    );
-  };
-
  private getAutoPilotUsageCost = (): JSX.Element => {
    if (!this.props.maxAutoPilotThroughput) {
      return <></>;
@@ -432,7 +207,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
    newValue?: string
  ): void => {
-    const newThroughput = getSanitizedInputValue(newValue);
+    const newThroughput = getSanitizedInputValue(newValue, this.autoPilotInputMaxValue);
    this.props.onMaxAutoPilotThroughputChange(newThroughput);
  };

@@ -440,11 +215,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
    newValue?: string
  ): void => {
-    const newThroughput = getSanitizedInputValue(newValue);
+    const newThroughput = getSanitizedInputValue(newValue, this.throughputInputMaxValue);
    if (this.overrideWithAutoPilotSettings()) {
      this.props.onMaxAutoPilotThroughputChange(newThroughput);
    } else {
-      this.setState({ exceedFreeTierThroughput: this.props.isFreeTierAccount && newThroughput > 400 });
      this.props.onThroughputChange(newThroughput);
    }
  };
@@ -452,19 +226,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
  private onChoiceGroupChange = (
    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
    option?: IChoiceGroupOption
-  ): void => {
-    this.props.onAutoPilotSelected(option.key === "true");
-    TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-      changedSelectedValueTo:
-        option.key === "true" ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-      subscriptionId: userContext.subscriptionId,
-      databaseAccountName: this.props.databaseAccount?.name,
-      databaseName: this.props.databaseName,
-      collectionName: this.props.collectionName,
-      apiKind: userContext.defaultExperience,
-      dataExplorerArea: "Scale Tab V2"
-    });
-  };
+  ): void => this.props.onAutoPilotSelected(option.key === "true");

  private minRUperGBSurvey = (): JSX.Element => {
    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
@@ -500,10 +262,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
          />
        </Label>
        {this.overrideWithProvisionedThroughputSettings() && (
-          <MessageBar
-            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-            styles={messageBarStyles}
-          >
+          <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
            {manualToAutoscaleDisclaimerElement}
          </MessageBar>
        )}
@@ -559,12 +318,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<

  private renderThroughputInput = (): JSX.Element => (
    <Stack {...titleAndInputStackProps}>
-      <Text>
-        Estimate your required throughput with
-        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-          {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
-        </Link>
-      </Text>
      <TextField
        required
        type="number"
@@ -580,21 +333,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        }
        onChange={this.onThroughputChange}
      />
-      {this.state.exceedFreeTierThroughput && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-          styles={messageBarStyles}
-        >
-          {
-            "Billing will apply if you provision more than 400 RU/s of manual throughput, or if the resource scales beyond 400 RU/s with autoscale."
-          }
-        </MessageBar>
-      )}
      {this.props.getThroughputWarningMessage() && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
          {this.props.getThroughputWarningMessage()}
        </MessageBar>
      )}
@@ -609,32 +349,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
          onChange={this.onSpendAckChecked}
        />
      )}
-      <br />
      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
    </Stack>
  );

-  private renderWarningMessage = (): JSX.Element => {
-    let warningMessage: JSX.Element;
-    if (this.IsComponentDirty().isDiscardable) {
-      warningMessage = saveThroughputWarningMessage;
-    }
-
-    return (
-      <>
-        {warningMessage && (
-          <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
-            {warningMessage}
-          </MessageBar>
-        )}
-      </>
-    );
-  };
-
  public render(): JSX.Element {
    return (
      <Stack {...checkBoxAndInputStackProps}>
-        {this.renderWarningMessage()}
        {this.renderThroughputModeChoices()}

        {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -8,26 +8,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    }
  }
 >
-  <StyledMessageBarBase
-    messageBarIconProps={
-      Object {
-        "className": "messageBarWarningIcon",
-        "iconName": "WarningSolid",
-      }
-    }
-  >
-    <Text
-      styles={
-        Object {
-          "root": Object {
-            "fontSize": 14,
-          },
-        }
-      }
-    >
-      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
-    </Text>
-  </StyledMessageBarBase>
  <Stack>
    <StyledLabelBase
      id="settingsV2RadioButtonLabelId"
@@ -39,7 +19,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -50,21 +30,12 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
      />
    </StyledLabelBase>
    <StyledMessageBarBase
-      messageBarIconProps={
-        Object {
-          "className": "messageBarInfoIcon",
-          "iconName": "InfoSolid",
-        }
-      }
+      messageBarType={5}
      styles={
        Object {
          "root": Object {
-            "backgroundColor": "white",
            "marginTop": "5px",
          },
-          "text": Object {
-            "fontSize": 14,
-          },
        }
      }
    >
@@ -73,7 +44,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
        styles={
          Object {
            "root": Object {
-              "fontSize": 14,
+              "fontSize": 12,
            },
          }
        }
@@ -185,7 +156,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -243,19 +214,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
      }
    }
  >
-    <Text>
-      Estimate your required throughput with
-      <StyledLinkBase
-        href="https://cosmos.azure.com/capacitycalculator/"
-        target="_blank"
-      >
-         capacity calculator
-         
-        <Component
-          iconName="NavigateExternalInline"
-        />
-      </StyledLinkBase>
-    </Text>
    <StyledTextFieldBase
      disabled={false}
      id="throughputInput"
@@ -281,142 +239,38 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
      type="number"
      value="100"
    />
-    <Stack
-      styles={
-        Object {
-          "root": Object {
-            "width": 600,
-          },
-        }
-      }
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
+    <Text
+      id="throughputSpendElement"
    >
-      <StyledWithViewportComponent
-        columns={
-          Array [
-            Object {
-              "fieldName": "costType",
-              "isResizable": true,
-              "key": "costType",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-            Object {
-              "fieldName": "hourly",
-              "isResizable": true,
-              "key": "hourly",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Hourly",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-            Object {
-              "fieldName": "daily",
-              "isResizable": true,
-              "key": "daily",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Daily",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-            Object {
-              "fieldName": "monthly",
-              "isResizable": true,
-              "key": "monthly",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Monthly",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-          ]
-        }
-        disableSelectionZone={true}
-        items={
-          Array [
-            Object {
-              "costType": <Text>
-                Current Cost
-              </Text>,
-              "daily": <Text>
-                $
-                 
-                0.19
-              </Text>,
-              "hourly": <Text>
-                $
-                 
-                0.0080
-              </Text>,
-              "monthly": <Text>
-                $
-                 
-                5.84
-              </Text>,
-            },
-          ]
-        }
-        layoutMode={1}
-        onRenderRow={[Function]}
-        selectionMode={0}
-      />
-      <Text
-        id="throughputSpendElement"
-      >
-        (
-        regions: 
-         
-        1
-        , 
-        100
-         RU/s, 
+      Estimated cost (
+      USD
+      ):
+       
+      <b>
        $
-        0.00008
-        /RU)
-      </Text>
-      <Text>
-        <em>
-          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
-        </em>
-      </Text>
-    </Stack>
+        0.0080
+         hourly 
+         / 
+        $
+        0.19
+         daily 
+         / 
+        $
+        5.84
+         monthly
+         
+      </b>
+      (
+      regions: 
+       
+      1
+      , 
+      100
+      RU/s, 
+      $
+      0.00008
+      /RU)
+    </Text>
    <StyledCheckboxBase
      checked={false}
      id="spendAckCheckBox"
@@ -434,7 +288,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
        }
      }
    />
-    <br />
  </Stack>
 </Stack>
 `;
@@ -458,7 +311,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -516,19 +369,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
      }
    }
  >
-    <Text>
-      Estimate your required throughput with
-      <StyledLinkBase
-        href="https://cosmos.azure.com/capacitycalculator/"
-        target="_blank"
-      >
-         capacity calculator
-         
-        <Component
-          iconName="NavigateExternalInline"
-        />
-      </StyledLinkBase>
-    </Text>
    <StyledTextFieldBase
      disabled={false}
      id="throughputInput"
@@ -554,143 +394,38 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
      type="number"
      value="100"
    />
-    <Stack
-      styles={
-        Object {
-          "root": Object {
-            "width": 600,
-          },
-        }
-      }
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
+    <Text
+      id="throughputSpendElement"
    >
-      <StyledWithViewportComponent
-        columns={
-          Array [
-            Object {
-              "fieldName": "costType",
-              "isResizable": true,
-              "key": "costType",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-            Object {
-              "fieldName": "hourly",
-              "isResizable": true,
-              "key": "hourly",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Hourly",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-            Object {
-              "fieldName": "daily",
-              "isResizable": true,
-              "key": "daily",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Daily",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-            Object {
-              "fieldName": "monthly",
-              "isResizable": true,
-              "key": "monthly",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Monthly",
-              "styles": Object {
-                "root": Object {
-                  "selectors": Object {
-                    ":hover": Object {
-                      "background": "transparent",
-                    },
-                  },
-                },
-              },
-            },
-          ]
-        }
-        disableSelectionZone={true}
-        items={
-          Array [
-            Object {
-              "costType": <Text>
-                Current Cost
-              </Text>,
-              "daily": <Text>
-                $
-                 
-                0.19
-              </Text>,
-              "hourly": <Text>
-                $
-                 
-                0.0080
-              </Text>,
-              "monthly": <Text>
-                $
-                 
-                5.84
-              </Text>,
-            },
-          ]
-        }
-        layoutMode={1}
-        onRenderRow={[Function]}
-        selectionMode={0}
-      />
-      <Text
-        id="throughputSpendElement"
-      >
-        (
-        regions: 
-         
-        1
-        , 
-        100
-         RU/s, 
+      Estimated cost (
+      USD
+      ):
+       
+      <b>
        $
-        0.00008
-        /RU)
-      </Text>
-      <Text>
-        <em>
-          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
-        </em>
-      </Text>
-    </Stack>
-    <br />
+        0.0080
+         hourly 
+         / 
+        $
+        0.19
+         daily 
+         / 
+        $
+        5.84
+         monthly
+         
+      </b>
+      (
+      regions: 
+       
+      1
+      , 
+      100
+      RU/s, 
+      $
+      0.00008
+      /RU)
+    </Text>
  </Stack>
 </Stack>
 `;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
      styles={
        Object {
          "root": Object {
-            "fontSize": 14,
+            "fontSize": 12,
          },
        }
      }
@@ -40,8 +40,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
  >
    <ThroughputInputAutoPilotV3Component
      canExceedMaximumValue={true}
-      collectionName="test"
-      databaseName="test"
      getThroughputWarningMessage={[Function]}
      isAutoPilotSelected={false}
      isEmulator={false}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -412,7 +412,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -952,7 +952,7 @@ exports[`SubSettingsComponent renders 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -1228,7 +1228,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -101,13 +101,13 @@ export const parseConflictResolutionProcedure = (procedureFromBackEnd: string):
  return procedureFromBackEnd;
 };

-export const getSanitizedInputValue = (newValueString: string, max?: number): number => {
+export const getSanitizedInputValue = (newValueString: string, max: number): number => {
  const newValue = parseInt(newValueString);
  if (isNaN(newValue)) {
    return zeroValue;
  }
  // make sure new value does not exceed the maximum throughput
-  return max ? Math.min(newValue, max) : newValue;
+  return Math.min(newValue, max);
 };

 export const isDirty = (current: isDirtyTypes, baseline: isDirtyTypes): boolean => {
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -55,7 +55,6 @@ exports[`SettingsComponent renders 1`] = `
                    "firstFieldHasFocus": [Function],
                    "formErrors": [Function],
                    "formErrorsDetails": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                    "id": "adddatabasepane",
                    "isAutoPilotSelected": [Function],
                    "isExecuting": [Function],
@@ -105,7 +104,6 @@ exports[`SettingsComponent renders 1`] = `
                    "formErrors": [Function],
                    "formErrorsDetails": [Function],
                    "formWarnings": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                    "id": "addcollectionpane",
                    "isAnalyticalStorageOn": [Function],
                    "isAutoPilotSelected": [Function],
@@ -593,7 +591,6 @@ exports[`SettingsComponent renders 1`] = `
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "addcollectionpane",
                  "isAnalyticalStorageOn": [Function],
                  "isAutoPilotSelected": [Function],
@@ -668,7 +665,6 @@ exports[`SettingsComponent renders 1`] = `
                  "firstFieldHasFocus": [Function],
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "adddatabasepane",
                  "isAutoPilotSelected": [Function],
                  "isExecuting": [Function],
@@ -946,7 +942,6 @@ exports[`SettingsComponent renders 1`] = `
                "hasWriteAccess": [Function],
                "isAccountReady": [Function],
                "isAuthWithResourceToken": [Function],
-                "isAutoscaleDefaultEnabled": [Function],
                "isCopyNotebookPaneEnabled": [Function],
                "isEnableMongoCapabilityPresent": [Function],
                "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -955,7 +950,6 @@ exports[`SettingsComponent renders 1`] = `
                "isHostedDataExplorerEnabled": [Function],
                "isLeftPaneExpanded": [Function],
                "isLinkInjectionEnabled": [Function],
-                "isMongoIndexingEnabled": [Function],
                "isNotebookEnabled": [Function],
                "isNotebooksEnabledForAccount": [Function],
                "isNotificationConsoleExpanded": [Function],
@@ -1120,14 +1114,6 @@ exports[`SettingsComponent renders 1`] = `
                },
                "selectedDatabaseId": [Function],
                "selectedNode": [Function],
-                "selfServeComponentAdapter": SelfServeComponentAdapter {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                  "parameters": [Function],
-                },
-                "selfServeType": [Function],
                "serverId": [Function],
                "settingsPane": SettingsPane {
                  "container": [Circular],
@@ -1189,9 +1175,11 @@ exports[`SettingsComponent renders 1`] = `
                  },
                  "direction": "vertical",
                  "isCollapsed": [Function],
+                  "leftSide": null,
                  "leftSideId": "resourcetree",
                  "onResizeStart": [Function],
                  "onResizeStop": [Function],
+                  "splitter": null,
                  "splitterId": "h_splitter1",
                },
                "stringInputPane": StringInputPane {
@@ -1338,7 +1326,6 @@ exports[`SettingsComponent renders 1`] = `
                  "firstFieldHasFocus": [Function],
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "adddatabasepane",
                  "isAutoPilotSelected": [Function],
                  "isExecuting": [Function],
@@ -1388,7 +1375,6 @@ exports[`SettingsComponent renders 1`] = `
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "addcollectionpane",
                  "isAnalyticalStorageOn": [Function],
                  "isAutoPilotSelected": [Function],
@@ -1876,7 +1862,6 @@ exports[`SettingsComponent renders 1`] = `
                "formErrors": [Function],
                "formErrorsDetails": [Function],
                "formWarnings": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                "id": "addcollectionpane",
                "isAnalyticalStorageOn": [Function],
                "isAutoPilotSelected": [Function],
@@ -1951,7 +1936,6 @@ exports[`SettingsComponent renders 1`] = `
                "firstFieldHasFocus": [Function],
                "formErrors": [Function],
                "formErrorsDetails": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                "id": "adddatabasepane",
                "isAutoPilotSelected": [Function],
                "isExecuting": [Function],
@@ -2229,7 +2213,6 @@ exports[`SettingsComponent renders 1`] = `
              "hasWriteAccess": [Function],
              "isAccountReady": [Function],
              "isAuthWithResourceToken": [Function],
-              "isAutoscaleDefaultEnabled": [Function],
              "isCopyNotebookPaneEnabled": [Function],
              "isEnableMongoCapabilityPresent": [Function],
              "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -2238,7 +2221,6 @@ exports[`SettingsComponent renders 1`] = `
              "isHostedDataExplorerEnabled": [Function],
              "isLeftPaneExpanded": [Function],
              "isLinkInjectionEnabled": [Function],
-              "isMongoIndexingEnabled": [Function],
              "isNotebookEnabled": [Function],
              "isNotebooksEnabledForAccount": [Function],
              "isNotificationConsoleExpanded": [Function],
@@ -2403,14 +2385,6 @@ exports[`SettingsComponent renders 1`] = `
              },
              "selectedDatabaseId": [Function],
              "selectedNode": [Function],
-              "selfServeComponentAdapter": SelfServeComponentAdapter {
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                "parameters": [Function],
-              },
-              "selfServeType": [Function],
              "serverId": [Function],
              "settingsPane": SettingsPane {
                "container": [Circular],
@@ -2472,9 +2446,11 @@ exports[`SettingsComponent renders 1`] = `
                },
                "direction": "vertical",
                "isCollapsed": [Function],
+                "leftSide": null,
                "leftSideId": "resourcetree",
                "onResizeStart": [Function],
                "onResizeStop": [Function],
+                "splitter": null,
                "splitterId": "h_splitter1",
              },
              "stringInputPane": StringInputPane {
@@ -2634,7 +2610,6 @@ exports[`SettingsComponent renders 1`] = `
                    "firstFieldHasFocus": [Function],
                    "formErrors": [Function],
                    "formErrorsDetails": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                    "id": "adddatabasepane",
                    "isAutoPilotSelected": [Function],
                    "isExecuting": [Function],
@@ -2684,7 +2659,6 @@ exports[`SettingsComponent renders 1`] = `
                    "formErrors": [Function],
                    "formErrorsDetails": [Function],
                    "formWarnings": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                    "id": "addcollectionpane",
                    "isAnalyticalStorageOn": [Function],
                    "isAutoPilotSelected": [Function],
@@ -3172,7 +3146,6 @@ exports[`SettingsComponent renders 1`] = `
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "addcollectionpane",
                  "isAnalyticalStorageOn": [Function],
                  "isAutoPilotSelected": [Function],
@@ -3247,7 +3220,6 @@ exports[`SettingsComponent renders 1`] = `
                  "firstFieldHasFocus": [Function],
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "adddatabasepane",
                  "isAutoPilotSelected": [Function],
                  "isExecuting": [Function],
@@ -3525,7 +3497,6 @@ exports[`SettingsComponent renders 1`] = `
                "hasWriteAccess": [Function],
                "isAccountReady": [Function],
                "isAuthWithResourceToken": [Function],
-                "isAutoscaleDefaultEnabled": [Function],
                "isCopyNotebookPaneEnabled": [Function],
                "isEnableMongoCapabilityPresent": [Function],
                "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -3534,7 +3505,6 @@ exports[`SettingsComponent renders 1`] = `
                "isHostedDataExplorerEnabled": [Function],
                "isLeftPaneExpanded": [Function],
                "isLinkInjectionEnabled": [Function],
-                "isMongoIndexingEnabled": [Function],
                "isNotebookEnabled": [Function],
                "isNotebooksEnabledForAccount": [Function],
                "isNotificationConsoleExpanded": [Function],
@@ -3699,14 +3669,6 @@ exports[`SettingsComponent renders 1`] = `
                },
                "selectedDatabaseId": [Function],
                "selectedNode": [Function],
-                "selfServeComponentAdapter": SelfServeComponentAdapter {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                  "parameters": [Function],
-                },
-                "selfServeType": [Function],
                "serverId": [Function],
                "settingsPane": SettingsPane {
                  "container": [Circular],
@@ -3768,9 +3730,11 @@ exports[`SettingsComponent renders 1`] = `
                  },
                  "direction": "vertical",
                  "isCollapsed": [Function],
+                  "leftSide": null,
                  "leftSideId": "resourcetree",
                  "onResizeStart": [Function],
                  "onResizeStop": [Function],
+                  "splitter": null,
                  "splitterId": "h_splitter1",
                },
                "stringInputPane": StringInputPane {
@@ -3917,7 +3881,6 @@ exports[`SettingsComponent renders 1`] = `
                  "firstFieldHasFocus": [Function],
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "adddatabasepane",
                  "isAutoPilotSelected": [Function],
                  "isExecuting": [Function],
@@ -3967,7 +3930,6 @@ exports[`SettingsComponent renders 1`] = `
                  "formErrors": [Function],
                  "formErrorsDetails": [Function],
                  "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                  "id": "addcollectionpane",
                  "isAnalyticalStorageOn": [Function],
                  "isAutoPilotSelected": [Function],
@@ -4455,7 +4417,6 @@ exports[`SettingsComponent renders 1`] = `
                "formErrors": [Function],
                "formErrorsDetails": [Function],
                "formWarnings": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                "id": "addcollectionpane",
                "isAnalyticalStorageOn": [Function],
                "isAutoPilotSelected": [Function],
@@ -4530,7 +4491,6 @@ exports[`SettingsComponent renders 1`] = `
                "firstFieldHasFocus": [Function],
                "formErrors": [Function],
                "formErrorsDetails": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                "id": "adddatabasepane",
                "isAutoPilotSelected": [Function],
                "isExecuting": [Function],
@@ -4808,7 +4768,6 @@ exports[`SettingsComponent renders 1`] = `
              "hasWriteAccess": [Function],
              "isAccountReady": [Function],
              "isAuthWithResourceToken": [Function],
-              "isAutoscaleDefaultEnabled": [Function],
              "isCopyNotebookPaneEnabled": [Function],
              "isEnableMongoCapabilityPresent": [Function],
              "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -4817,7 +4776,6 @@ exports[`SettingsComponent renders 1`] = `
              "isHostedDataExplorerEnabled": [Function],
              "isLeftPaneExpanded": [Function],
              "isLinkInjectionEnabled": [Function],
-              "isMongoIndexingEnabled": [Function],
              "isNotebookEnabled": [Function],
              "isNotebooksEnabledForAccount": [Function],
              "isNotificationConsoleExpanded": [Function],
@@ -4982,14 +4940,6 @@ exports[`SettingsComponent renders 1`] = `
              },
              "selectedDatabaseId": [Function],
              "selectedNode": [Function],
-              "selfServeComponentAdapter": SelfServeComponentAdapter {
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                "parameters": [Function],
-              },
-              "selfServeType": [Function],
              "serverId": [Function],
              "settingsPane": SettingsPane {
                "container": [Circular],
@@ -5051,9 +5001,11 @@ exports[`SettingsComponent renders 1`] = `
                },
                "direction": "vertical",
                "isCollapsed": [Function],
+                "leftSide": null,
                "leftSideId": "resourcetree",
                "onResizeStart": [Function],
                "onResizeStop": [Function],
+                "splitter": null,
                "splitterId": "h_splitter1",
              },
              "stringInputPane": StringInputPane {
--- a/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
@@ -60,106 +60,72 @@ exports[`SettingsUtils functions render 1`] = `
    </StyledLinkBase>
    .
  </Text>
-  <Stack
-    styles={
-      Object {
-        "root": Object {
-          "width": 600,
-        },
-      }
-    }
-    tokens={
-      Object {
-        "childrenGap": 10,
-      }
-    }
+  <Text
+    id="throughputSpendElement"
  >
-    <StyledWithViewportComponent
-      columns={
-        Array [
-          Object {
-            "fieldName": "costType",
-            "isResizable": true,
-            "key": "costType",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "",
-          },
-          Object {
-            "fieldName": "hourly",
-            "isResizable": true,
-            "key": "hourly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Hourly",
-          },
-          Object {
-            "fieldName": "daily",
-            "isResizable": true,
-            "key": "daily",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Daily",
-          },
-          Object {
-            "fieldName": "monthly",
-            "isResizable": true,
-            "key": "monthly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Monthly",
-          },
-        ]
-      }
-      disableSelectionZone={true}
-      items={
-        Array [
-          Object {
-            "costType": <Text>
-              Current Cost
-            </Text>,
-            "daily": <Text>
-              $ 24.48
-            </Text>,
-            "hourly": <Text>
-              $ 1.02
-            </Text>,
-            "monthly": <Text>
-              $ 744.6
-            </Text>,
-          },
-        ]
-      }
-      layoutMode={1}
-      onRenderRow={[Function]}
-      selectionMode={0}
-    />
-    <Text
-      id="throughputSpendElement"
-    >
-      (
-      regions: 
-       
-      2
-      , 
-      1000
-       RU/s, 
+    Estimated cost (
+    RMB
+    ):
+     
+    <b>
      ¥
-      0.00051
-      /RU)
-    </Text>
-    <Text>
-      <em>
-        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
-      </em>
-    </Text>
-  </Stack>
+      1.02
+       hourly 
+       / 
+      ¥
+      24.48
+       daily 
+       / 
+      ¥
+      744.60
+       monthly
+       
+    </b>
+    (
+    regions: 
+     
+    2
+    , 
+    1000
+    RU/s, 
+    ¥
+    0.00051
+    /RU)
+  </Text>
+  <Text
+    id="autoscaleSpendElement"
+  >
+    Estimated monthly cost (
+    RMB
+    ) is
+     
+    <b>
+      ¥
+      111.69
+       - 
+      ¥
+      1116.90
+       
+    </b>
+    (
+    regions: 
+     
+    2
+    , 
+    100
+     - 
+    1000
+     RU/s, 
+    ¥
+    0.000765
+    /RU)
+  </Text>
  <Text
    id="manualToAutoscaleDisclaimerElement"
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -176,7 +142,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -195,7 +161,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -207,7 +173,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -219,7 +185,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -230,7 +196,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -249,7 +215,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -268,7 +234,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -286,7 +252,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -299,7 +265,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -310,7 +276,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -329,7 +295,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -371,7 +337,7 @@ exports[`SettingsUtils functions render 1`] = `
      styles={
        Object {
          "root": Object {
-            "fontSize": 14,
+            "fontSize": 12,
          },
        }
      }
@@ -386,7 +352,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -402,7 +368,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, SmartUiDescriptor, UiType } from "./SmartUiComponent";
+import { SmartUiComponent, Descriptor, InputType } from "./SmartUiComponent";

 describe("SmartUiComponent", () => {
-  const exampleData: SmartUiDescriptor = {
+  const exampleData: Descriptor = {
    root: {
      id: "root",
      info: {
@@ -24,7 +24,7 @@ describe("SmartUiComponent", () => {
            max: 500,
            step: 10,
            defaultValue: 400,
-            uiType: UiType.Spinner
+            inputType: "spin"
          }
        },
        {
@@ -37,21 +37,7 @@ describe("SmartUiComponent", () => {
            max: 500,
            step: 10,
            defaultValue: 400,
-            uiType: UiType.Slider
-          }
-        },
-        {
-          id: "throughput3",
-          input: {
-            label: "Throughput (invalid)",
-            dataFieldName: "throughput3",
-            type: "boolean",
-            min: 400,
-            max: 500,
-            step: 10,
-            defaultValue: 400,
-            uiType: UiType.Spinner,
-            errorMessage: "label, truelabel and falselabel are required for boolean input 'throughput3'"
+            inputType: "slider"
          }
        },
        {
@@ -78,11 +64,11 @@ describe("SmartUiComponent", () => {
          input: {
            label: "Database",
            dataFieldName: "database",
-            type: "object",
+            type: "enum",
            choices: [
-              { label: "Database 1", key: "db1" },
-              { label: "Database 2", key: "db2" },
-              { label: "Database 3", key: "db3" }
+              { label: "Database 1", key: "db1", value: "database1" },
+              { label: "Database 2", key: "db2", value: "database2" },
+              { label: "Database 3", key: "db3", value: "database3" }
            ],
            defaultKey: "db2"
          }
@@ -91,11 +77,12 @@ describe("SmartUiComponent", () => {
    }
  };

-  it("should render", async () => {
-    const wrapper = shallow(
-      <SmartUiComponent descriptor={exampleData} currentValues={new Map()} onInputChange={undefined} />
-    );
-    await new Promise(resolve => setTimeout(resolve, 0));
+  const exampleCallbacks = (newValues: Map<string, InputType>): void => {
+    console.log("New values:", newValues);
+  };
+
+  it("should render", () => {
+    const wrapper = shallow(<SmartUiComponent descriptor={exampleData} onChange={exampleCallbacks} />);
    expect(wrapper).toMatchSnapshot();
  });
 });
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
@@ -5,9 +5,11 @@ import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
 import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { Text } from "office-ui-fabric-react/lib/Text";
+import { InputType } from "../../Tables/Constants";
 import { RadioSwitchComponent } from "../RadioSwitchComponent/RadioSwitchComponent";
 import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
 import { Link, MessageBar, MessageBarType } from "office-ui-fabric-react";
+
 import * as InputUtils from "./InputUtils";
 import "./SmartUiComponent.less";

@@ -19,16 +21,45 @@ import "./SmartUiComponent.less";
 * - a descriptor of the UX.
 */

-export type InputTypeValue = "number" | "string" | "boolean" | "object";
+export type InputTypeValue = "number" | "string" | "boolean" | "enum";

-export enum UiType {
-  Spinner = "Spinner",
-  Slider = "Slider"
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export type EnumItem = { label: string; key: string; value: any };
+
+export type InputType = number | string | boolean | EnumItem;
+
+interface BaseInput {
+  label: string;
+  dataFieldName: string;
+  type: InputTypeValue;
+  placeholder?: string;
 }

-export type ChoiceItem = { label: string; key: string };
+/**
+ * For now, this only supports integers
+ */
+export interface NumberInput extends BaseInput {
+  min?: number;
+  max?: number;
+  step: number;
+  defaultValue: number;
+  inputType: "spin" | "slider";
+}

-export type InputType = number | string | boolean | ChoiceItem;
+export interface BooleanInput extends BaseInput {
+  trueLabel: string;
+  falseLabel: string;
+  defaultValue: boolean;
+}
+
+export interface StringInput extends BaseInput {
+  defaultValue?: string;
+}
+
+export interface EnumInput extends BaseInput {
+  choices: EnumItem[];
+  defaultKey: string;
+}

 export interface Info {
  message: string;
@@ -38,62 +69,28 @@ export interface Info {
  };
 }

-interface BaseInput {
-  label: string;
-  dataFieldName: string;
-  type: InputTypeValue;
-  placeholder?: string;
-  errorMessage?: string;
-}
+export type AnyInput = NumberInput | BooleanInput | StringInput | EnumInput;

-/**
- * For now, this only supports integers
- */
-interface NumberInput extends BaseInput {
-  min: number;
-  max: number;
-  step: number;
-  defaultValue?: number;
-  uiType: UiType;
-}
-
-interface BooleanInput extends BaseInput {
-  trueLabel: string;
-  falseLabel: string;
-  defaultValue?: boolean;
-}
-
-interface StringInput extends BaseInput {
-  defaultValue?: string;
-}
-
-interface ChoiceInput extends BaseInput {
-  choices: ChoiceItem[];
-  defaultKey?: string;
-}
-
-type AnyInput = NumberInput | BooleanInput | StringInput | ChoiceInput;
-
-interface Node {
+export interface Node {
  id: string;
  info?: Info;
  input?: AnyInput;
  children?: Node[];
 }

-export interface SmartUiDescriptor {
+export interface Descriptor {
  root: Node;
 }

 /************************** Component implementation starts here ************************************* */

 export interface SmartUiComponentProps {
-  descriptor: SmartUiDescriptor;
-  currentValues: Map<string, InputType>;
-  onInputChange: (input: AnyInput, newValue: InputType) => void;
+  descriptor: Descriptor;
+  onChange: (newValues: Map<string, InputType>) => void;
 }

 interface SmartUiComponentState {
+  currentValues: Map<string, InputType>;
  errors: Map<string, string>;
 }

@@ -107,6 +104,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
  constructor(props: SmartUiComponentProps) {
    super(props);
    this.state = {
+      currentValues: new Map(),
      errors: new Map()
    };
  }
@@ -115,37 +113,42 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    return (
      <MessageBar>
        {info.message}
-        {info.link && (
-          <Link href={info.link.href} target="_blank">
-            {info.link.text}
-          </Link>
-        )}
+        <Link href={info.link.href} target="_blank">
+          {info.link.text}
+        </Link>
      </MessageBar>
    );
  }

-  private renderTextInput(input: StringInput): JSX.Element {
-    const value = this.props.currentValues.get(input.dataFieldName) as string;
+  private onInputChange = (newValue: string | number | boolean, dataFieldName: string) => {
+    const { currentValues } = this.state;
+    currentValues.set(dataFieldName, newValue);
+    this.setState({ currentValues }, () => this.props.onChange(this.state.currentValues));
+  };
+
+  private renderStringInput(input: StringInput): JSX.Element {
    return (
      <div className="stringInputContainer">
-        <TextField
-          id={`${input.dataFieldName}-textBox-input`}
-          label={input.label}
-          type="text"
-          value={value}
-          placeholder={input.placeholder}
-          onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
-          styles={{
-            subComponentStyles: {
-              label: {
-                root: {
-                  ...SmartUiComponent.labelStyle,
-                  fontWeight: 600
+        <div>
+          <TextField
+            id={`${input.dataFieldName}-input`}
+            label={input.label}
+            type="text"
+            value={input.defaultValue}
+            placeholder={input.placeholder}
+            onChange={(_, newValue) => this.onInputChange(newValue, input.dataFieldName)}
+            styles={{
+              subComponentStyles: {
+                label: {
+                  root: {
+                    ...SmartUiComponent.labelStyle,
+                    fontWeight: 600
+                  }
                }
              }
-            }
-          }}
-        />
+            }}
+          />
+        </div>
      </div>
    );
  }
@@ -156,11 +159,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    this.setState({ errors });
  }

-  private onValidate = (input: AnyInput, value: string, min: number, max: number): string => {
+  private onValidate = (value: string, min: number, max: number, dataFieldName: string): string => {
    const newValue = InputUtils.onValidateValueChange(value, min, max);
-    const dataFieldName = input.dataFieldName;
    if (newValue) {
-      this.props.onInputChange(input, newValue);
+      this.onInputChange(newValue, dataFieldName);
      this.clearError(dataFieldName);
      return newValue.toString();
    } else {
@@ -171,22 +173,20 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    return undefined;
  };

-  private onIncrement = (input: AnyInput, value: string, step: number, max: number): string => {
+  private onIncrement = (value: string, step: number, max: number, dataFieldName: string): string => {
    const newValue = InputUtils.onIncrementValue(value, step, max);
-    const dataFieldName = input.dataFieldName;
    if (newValue) {
-      this.props.onInputChange(input, newValue);
+      this.onInputChange(newValue, dataFieldName);
      this.clearError(dataFieldName);
      return newValue.toString();
    }
    return undefined;
  };

-  private onDecrement = (input: AnyInput, value: string, step: number, min: number): string => {
+  private onDecrement = (value: string, step: number, min: number, dataFieldName: string): string => {
    const newValue = InputUtils.onDecrementValue(value, step, min);
-    const dataFieldName = input.dataFieldName;
    if (newValue) {
-      this.props.onInputChange(input, newValue);
+      this.onInputChange(newValue, dataFieldName);
      this.clearError(dataFieldName);
      return newValue.toString();
    }
@@ -194,26 +194,18 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
  };

  private renderNumberInput(input: NumberInput): JSX.Element {
-    const { label, min, max, dataFieldName, step } = input;
-    const props = {
-      label: label,
-      min: min,
-      max: max,
-      ariaLabel: label,
-      step: step
-    };
+    const { label, min, max, defaultValue, dataFieldName, step } = input;
+    const props = { label, min, max, ariaLabel: label, step };

-    const value = this.props.currentValues.get(dataFieldName) as number;
-    if (input.uiType === UiType.Spinner) {
+    if (input.inputType === "spin") {
      return (
-        <>
+        <div>
          <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)}
+            defaultValue={defaultValue.toString()}
+            onValidate={newValue => this.onValidate(newValue, min, max, dataFieldName)}
+            onIncrement={newValue => this.onIncrement(newValue, step, max, dataFieldName)}
+            onDecrement={newValue => this.onDecrement(newValue, step, min, dataFieldName)}
            labelPosition={Position.top}
            styles={{
              label: {
@@ -225,35 +217,34 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
          {this.state.errors.has(dataFieldName) && (
            <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
          )}
-        </>
-      );
-    } else if (input.uiType === UiType.Slider) {
-      return (
-        <div id={`${input.dataFieldName}-slider-input`}>
-          <Slider
-            {...props}
-            value={value}
-            onChange={newValue => this.props.onInputChange(input, newValue)}
-            styles={{
-              titleLabel: {
-                ...SmartUiComponent.labelStyle,
-                fontWeight: 600
-              },
-              valueLabel: SmartUiComponent.labelStyle
-            }}
-          />
        </div>
      );
+    } else if (input.inputType === "slider") {
+      return (
+        <Slider
+          // showValue={true}
+          // valueFormat={}
+          {...props}
+          defaultValue={defaultValue}
+          onChange={newValue => this.onInputChange(newValue, dataFieldName)}
+          styles={{
+            titleLabel: {
+              ...SmartUiComponent.labelStyle,
+              fontWeight: 600
+            },
+            valueLabel: SmartUiComponent.labelStyle
+          }}
+        />
+      );
    } else {
-      return <>Unsupported number UI type {input.uiType}</>;
+      return <>Unsupported number input type {input.inputType}</>;
    }
  }

  private renderBooleanInput(input: BooleanInput): JSX.Element {
-    const value = this.props.currentValues.get(input.dataFieldName) as boolean;
-    const selectedKey = value || input.defaultValue ? "true" : "false";
+    const { dataFieldName } = input;
    return (
-      <div id={`${input.dataFieldName}-radioSwitch-input`}>
+      <div>
        <div className="inputLabelContainer">
          <Text variant="small" nowrap className="inputLabel">
            {input.label}
@@ -264,33 +255,41 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
            {
              label: input.falseLabel,
              key: "false",
-              onSelect: () => this.props.onInputChange(input, false)
+              onSelect: () => this.onInputChange(false, dataFieldName)
            },
            {
              label: input.trueLabel,
              key: "true",
-              onSelect: () => this.props.onInputChange(input, true)
+              onSelect: () => this.onInputChange(true, dataFieldName)
            }
          ]}
-          selectedKey={selectedKey}
+          selectedKey={
+            (this.state.currentValues.has(dataFieldName)
+            ? (this.state.currentValues.get(dataFieldName) as boolean)
+            : input.defaultValue)
+              ? "true"
+              : "false"
+          }
        />
      </div>
    );
  }

-  private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
-    const value = this.props.currentValues.get(dataFieldName) as string;
+  private renderEnumInput(input: EnumInput): JSX.Element {
+    const { label, defaultKey, dataFieldName, choices, placeholder } = input;
    return (
      <Dropdown
-        id={`${input.dataFieldName}-dropown-input`}
        label={label}
-        selectedKey={value ? value : defaultKey}
-        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
+        selectedKey={
+          this.state.currentValues.has(dataFieldName)
+            ? (this.state.currentValues.get(dataFieldName) as string)
+            : defaultKey
+        }
+        onChange={(_, item: IDropdownOption) => this.onInputChange(item.key.toString(), dataFieldName)}
        placeholder={placeholder}
        options={choices.map(c => ({
          key: c.key,
-          text: c.label
+          text: c.value
        }))}
        styles={{
          label: {
@@ -303,48 +302,34 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    );
  }

-  private renderError(input: AnyInput): JSX.Element {
-    return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
-  }
-
  private renderInput(input: AnyInput): JSX.Element {
-    if (input.errorMessage) {
-      return this.renderError(input);
-    }
    switch (input.type) {
      case "string":
-        return this.renderTextInput(input as StringInput);
+        return this.renderStringInput(input as StringInput);
      case "number":
        return this.renderNumberInput(input as NumberInput);
      case "boolean":
        return this.renderBooleanInput(input as BooleanInput);
-      case "object":
-        return this.renderChoiceInput(input as ChoiceInput);
+      case "enum":
+        return this.renderEnumInput(input as EnumInput);
      default:
        throw new Error(`Unknown input type: ${input.type}`);
    }
  }

  private renderNode(node: Node): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 15 };
+    const containerStackTokens: IStackTokens = { childrenGap: 10 };

    return (
      <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>
-          {node.info && this.renderInfo(node.info as Info)}
-          {node.input && this.renderInput(node.input)}
-        </Stack.Item>
+        {node.info && this.renderInfo(node.info)}
+        {node.input && this.renderInput(node.input)}
        {node.children && node.children.map(child => <div key={child.id}>{this.renderNode(child)}</div>)}
      </Stack>
    );
  }

  render(): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 20 };
-    return (
-      <Stack tokens={containerStackTokens} styles={{ root: { width: 400, padding: 10 } }}>
-        {this.renderNode(this.props.descriptor.root)}
-      </Stack>
-    );
+    return <>{this.renderNode(this.props.descriptor.root)}</>;
  }
 }
--- a/src/Explorer/Controls/SmartUi/snapshots/SmartUiComponent.test.tsx.snap
+++ b/src/Explorer/Controls/SmartUi/snapshots/SmartUiComponent.test.tsx.snap
@@ -1,40 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`SmartUiComponent should render 1`] = `
-<Stack
-  styles={
-    Object {
-      "root": Object {
-        "padding": 10,
-        "width": 400,
-      },
-    }
-  }
-  tokens={
-    Object {
-      "childrenGap": 20,
-    }
-  }
->
+<Fragment>
  <Stack
    className="widgetRendererContainer"
    tokens={
      Object {
-        "childrenGap": 15,
+        "childrenGap": 10,
      }
    }
  >
-    <StackItem>
-      <StyledMessageBarBase>
-        Start at $24/mo per database
-        <StyledLinkBase
-          href="https://aka.ms/azure-cosmos-db-pricing"
-          target="_blank"
-        >
-          More Details
-        </StyledLinkBase>
-      </StyledMessageBarBase>
-    </StackItem>
+    <StyledMessageBarBase>
+      Start at $24/mo per database
+      <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
+      >
+        More Details
+      </StyledLinkBase>
+    </StyledMessageBarBase>
    <div
      key="throughput"
    >
@@ -42,11 +26,11 @@ exports[`SmartUiComponent should render 1`] = `
        className="widgetRendererContainer"
        tokens={
          Object {
-            "childrenGap": 15,
+            "childrenGap": 10,
          }
        }
      >
-        <StackItem>
+        <div>
          <CustomizedSpinButton
            ariaLabel="Throughput (input)"
            decrementButtonIcon={
@@ -54,8 +38,8 @@ exports[`SmartUiComponent should render 1`] = `
                "iconName": "ChevronDownSmall",
              }
            }
+            defaultValue="400"
            disabled={false}
-            id="throughput-spinner-input"
            incrementButtonIcon={
              Object {
                "iconName": "ChevronUpSmall",
@@ -80,7 +64,7 @@ exports[`SmartUiComponent should render 1`] = `
              }
            }
          />
-        </StackItem>
+        </div>
      </Stack>
    </div>
    <div
@@ -90,60 +74,34 @@ exports[`SmartUiComponent should render 1`] = `
        className="widgetRendererContainer"
        tokens={
          Object {
-            "childrenGap": 15,
+            "childrenGap": 10,
          }
        }
      >
-        <StackItem>
-          <div
-            id="throughput2-slider-input"
-          >
-            <StyledSliderBase
-              ariaLabel="Throughput (Slider)"
-              label="Throughput (Slider)"
-              max={500}
-              min={400}
-              onChange={[Function]}
-              step={10}
-              styles={
-                Object {
-                  "titleLabel": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                    "fontWeight": 600,
-                  },
-                  "valueLabel": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                }
-              }
-            />
-          </div>
-        </StackItem>
-      </Stack>
-    </div>
-    <div
-      key="throughput3"
-    >
-      <Stack
-        className="widgetRendererContainer"
-        tokens={
-          Object {
-            "childrenGap": 15,
+        <StyledSliderBase
+          ariaLabel="Throughput (Slider)"
+          defaultValue={400}
+          label="Throughput (Slider)"
+          max={500}
+          min={400}
+          onChange={[Function]}
+          step={10}
+          styles={
+            Object {
+              "titleLabel": Object {
+                "color": "#393939",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "fontSize": 12,
+                "fontWeight": 600,
+              },
+              "valueLabel": Object {
+                "color": "#393939",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "fontSize": 12,
+              },
+            }
          }
-        }
-      >
-        <StackItem>
-          <StyledMessageBarBase
-            messageBarType={1}
-          >
-            Error: 
-            label, truelabel and falselabel are required for boolean input 'throughput3'
-          </StyledMessageBarBase>
-        </StackItem>
+        />
      </Stack>
    </div>
    <div
@@ -153,16 +111,16 @@ exports[`SmartUiComponent should render 1`] = `
        className="widgetRendererContainer"
        tokens={
          Object {
-            "childrenGap": 15,
+            "childrenGap": 10,
          }
        }
      >
-        <StackItem>
-          <div
-            className="stringInputContainer"
-          >
+        <div
+          className="stringInputContainer"
+        >
+          <div>
            <StyledTextFieldBase
-              id="containerId-textBox-input"
+              id="containerId-input"
              label="Container id"
              onChange={[Function]}
              styles={
@@ -182,7 +140,7 @@ exports[`SmartUiComponent should render 1`] = `
              type="text"
            />
          </div>
-        </StackItem>
+        </div>
      </Stack>
    </div>
    <div
@@ -192,44 +150,40 @@ exports[`SmartUiComponent should render 1`] = `
        className="widgetRendererContainer"
        tokens={
          Object {
-            "childrenGap": 15,
+            "childrenGap": 10,
          }
        }
      >
-        <StackItem>
+        <div>
          <div
-            id="analyticalStore-radioSwitch-input"
+            className="inputLabelContainer"
          >
-            <div
-              className="inputLabelContainer"
+            <Text
+              className="inputLabel"
+              nowrap={true}
+              variant="small"
            >
-              <Text
-                className="inputLabel"
-                nowrap={true}
-                variant="small"
-              >
-                Analytical Store
-              </Text>
-            </div>
-            <RadioSwitchComponent
-              choices={
-                Array [
-                  Object {
-                    "key": "false",
-                    "label": "Disabled",
-                    "onSelect": [Function],
-                  },
-                  Object {
-                    "key": "true",
-                    "label": "Enabled",
-                    "onSelect": [Function],
-                  },
-                ]
-              }
-              selectedKey="true"
-            />
+              Analytical Store
+            </Text>
          </div>
-        </StackItem>
+          <RadioSwitchComponent
+            choices={
+              Array [
+                Object {
+                  "key": "false",
+                  "label": "Disabled",
+                  "onSelect": [Function],
+                },
+                Object {
+                  "key": "true",
+                  "label": "Enabled",
+                  "onSelect": [Function],
+                },
+              ]
+            }
+            selectedKey="true"
+          />
+        </div>
      </Stack>
    </div>
    <div
@@ -239,51 +193,48 @@ exports[`SmartUiComponent should render 1`] = `
        className="widgetRendererContainer"
        tokens={
          Object {
-            "childrenGap": 15,
+            "childrenGap": 10,
          }
        }
      >
-        <StackItem>
-          <StyledWithResponsiveMode
-            id="database-dropown-input"
-            label="Database"
-            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={
+        <StyledWithResponsiveMode
+          label="Database"
+          onChange={[Function]}
+          options={
+            Array [
              Object {
-                "dropdown": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-                "label": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-              }
+                "key": "db1",
+                "text": "database1",
+              },
+              Object {
+                "key": "db2",
+                "text": "database2",
+              },
+              Object {
+                "key": "db3",
+                "text": "database3",
+              },
+            ]
+          }
+          selectedKey="db2"
+          styles={
+            Object {
+              "dropdown": Object {
+                "color": "#393939",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "fontSize": 12,
+              },
+              "label": Object {
+                "color": "#393939",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "fontSize": 12,
+                "fontWeight": 600,
+              },
            }
-          />
-        </StackItem>
+          }
+        />
      </Stack>
    </div>
  </Stack>
-</Stack>
+</Fragment>
 `;
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
@@ -5,9 +5,6 @@ import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutos
 import { KeyCodes } from "../../../Common/Constants";
 import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";

-import { userContext } from "../../../UserContext";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 /**
 * Throughput Input:
 *
@@ -132,8 +129,6 @@ export interface ThroughputInputParams {
  showAutoPilot?: ko.Observable<boolean>;
  overrideWithAutoPilotSettings: ko.Observable<boolean>;
  overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  freeTierExceedThroughputTooltip?: ko.Observable<string>;
-  freeTierExceedThroughputWarning?: ko.Observable<string>;
 }

 export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
@@ -170,10 +165,6 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
  public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
  public isManualThroughputInputFieldRequired: ko.Computed<boolean>;
  public isAutoscaleThroughputInputFieldRequired: ko.Computed<boolean>;
-  public freeTierExceedThroughputTooltip: ko.Observable<string>;
-  public freeTierExceedThroughputWarning: ko.Observable<string>;
-  public showFreeTierExceedThroughputTooltip: ko.Computed<boolean>;
-  public showFreeTierExceedThroughputWarning: ko.Computed<boolean>;

  public constructor(options: ThroughputInputParams) {
    super();
@@ -204,16 +195,6 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
    this.label = options.label || ko.observable<string>();
    this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
-    this.isAutoPilotSelected.subscribe(value => {
-      TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-        changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-        databaseAccountName: userContext.databaseAccount?.name,
-        subscriptionId: userContext.subscriptionId,
-        apiKind: userContext.defaultExperience,
-        dataExplorerArea: "Scale Tab V1"
-      });
-    });
-
    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
    this.throughputModeRadioName = options.throughputModeRadioName;
@@ -238,16 +219,6 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
    this.isAutoscaleThroughputInputFieldRequired = ko.pureComputed(
      () => this.isEnabled() && this.isAutoPilotSelected()
    );
-
-    this.freeTierExceedThroughputTooltip = options.freeTierExceedThroughputTooltip || ko.observable<string>();
-    this.freeTierExceedThroughputWarning = options.freeTierExceedThroughputWarning || ko.observable<string>();
-    this.showFreeTierExceedThroughputTooltip = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputTooltip() && this.value() > 400
-    );
-
-    this.showFreeTierExceedThroughputWarning = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputWarning() && this.value() > 400
-    );
  }

  public decreaseThroughput() {
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html
@@ -132,14 +132,6 @@
        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a></span
      >
    </p>
-
-    <div class="inputTooltip">
-      <span
-        data-bind="text: freeTierExceedThroughputTooltip, visible: showFreeTierExceedThroughputTooltip"
-        class="inputTooltipText"
-      ></span>
-    </div>
-
    <div data-bind="setTemplateReady: true">
      <input
        data-bind="
@@ -162,11 +154,6 @@
      />
    </div>

-    <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
-      <span class="freeTierWarningIcon"><img src="/warning.svg" alt="Warning"/></span>
-      <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
-    </div>
-
    <p data-bind="visible: costsVisible">
      <span data-bind="html: requestUnitsUsageCost"></span>
    </p>
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -1,11 +1,11 @@
+jest.mock("../../Common/DocumentClientUtilityBase");
 jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
-jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
 import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
-import { createDocument } from "../../Common/dataAccess/createDocument";
+import { createDocument } from "../../Common/DocumentClientUtilityBase";
 import Explorer from "../Explorer";
 import { updateUserContext } from "../../UserContext";

--- a/src/Explorer/DataSamples/ContainerSampleGenerator.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.ts
@@ -4,8 +4,8 @@ import GraphTab from ".././Tabs/GraphTab";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import { createDocument } from "../../Common/DocumentClientUtilityBase";
 import { createCollection } from "../../Common/dataAccess/createCollection";
-import { createDocument } from "../../Common/dataAccess/createDocument";
 import { userContext } from "../../UserContext";

 interface SampleDataFile extends DataModels.CreateCollectionParams {
@@ -95,15 +95,12 @@ export class ContainerSampleGenerator {
        .reduce((previous, current) => previous.then(current), Promise.resolve());
    } else {
      // For SQL all queries are executed at the same time
-      await Promise.all(
-        this.sampleDataFile.data.map(async doc => {
-          try {
-            await createDocument(collection, doc);
-          } catch (error) {
-            NotificationConsoleUtils.logConsoleError(error);
-          }
-        })
-      );
+      this.sampleDataFile.data.map(doc => {
+        const subPromise = createDocument(collection, doc);
+        subPromise.catch(reason => NotificationConsoleUtils.logConsoleError(reason));
+        promises.push(subPromise);
+      });
+      await Promise.all(promises);
    }
  }

--- a/src/Explorer/Explorer.ts
+++ b/src/Explorer/Explorer.ts
@@ -88,9 +88,6 @@ import { stringToBlob } from "../Utils/BlobUtils";
 import { IChoiceGroupProps } from "office-ui-fabric-react";
 import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
-import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
-import { SelfServeType } from "../SelfServe/SelfServeUtils";
-import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";

 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -134,10 +131,8 @@ export default class Explorer {
  public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
  public isServerlessEnabled: ko.Computed<boolean>;
  public isAccountReady: ko.Observable<boolean>;
-  public selfServeType: ko.Observable<SelfServeType>;
  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;
@@ -160,7 +155,6 @@ export default class Explorer {
  public selectedNode: ko.Observable<ViewModels.TreeNode>;
  public isRefreshingExplorer: ko.Observable<boolean>;
  private resourceTree: ResourceTreeAdapter;
-  private selfServeComponentAdapter: SelfServeComponentAdapter;

  // Resource Token
  public resourceTokenDatabaseId: ko.Observable<string>;
@@ -212,9 +206,7 @@ export default class Explorer {
  public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
  public isHostedDataExplorerEnabled: ko.Computed<boolean>;
  public isRightPanelV2Enabled: ko.Computed<boolean>;
-  public isMongoIndexingEnabled: ko.Observable<boolean>;
  public canExceedMaximumValue: ko.Computed<boolean>;
-  public isAutoscaleDefaultEnabled: ko.Observable<boolean>;

  public shouldShowShareDialogContents: ko.Observable<boolean>;
  public shareAccessData: ko.Observable<AdHocAccessData>;
@@ -264,7 +256,6 @@ export default class Explorer {
  private _dialogProps: ko.Observable<DialogProps>;
  private addSynapseLinkDialog: DialogComponentAdapter;
  private _addSynapseLinkDialogProps: ko.Observable<DialogProps>;
-  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;

  private static readonly MaxNbDatabasesToAutoExpand = 5;

@@ -300,7 +291,6 @@ export default class Explorer {
      }
    });
    this.isAccountReady = ko.observable<boolean>(false);
-    this.selfServeType = ko.observable<SelfServeType>(undefined);
    this._isInitializingNotebooks = false;
    this._isInitializingSparkConnectionInfo = false;
    this.arcadiaToken = ko.observable<string>();
@@ -374,7 +364,6 @@ 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);

@@ -411,7 +400,6 @@ export default class Explorer {
      this.isFeatureEnabled(Constants.Features.enableLinkInjection)
    );
    this.isGitHubPaneEnabled = ko.observable<boolean>(false);
-    this.isMongoIndexingEnabled = ko.observable<boolean>(false);
    this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
    this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);

@@ -422,8 +410,6 @@ export default class Explorer {
    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
    this.isNotificationConsoleExpanded = ko.observable<boolean>(false);

-    this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
-
    this.databases = ko.observableArray<ViewModels.Database>();
    this.canSaveQueries = ko.computed<boolean>(() => {
      const savedQueriesDatabase: ViewModels.Database = _.find(
@@ -705,7 +691,6 @@ export default class Explorer {
    });

    this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
-    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);

    this.loadQueryPane = new LoadQueryPane({
      id: "loadquerypane",
@@ -881,7 +866,6 @@ export default class Explorer {
    });

    this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
-    this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
    this.notificationConsoleComponentAdapter = new NotificationConsoleComponentAdapter(this);

    this._initSettings();
@@ -1853,20 +1837,6 @@ export default class Explorer {
    return false;
  }

-  public setSelfServeType(inputs: ViewModels.DataExplorerInputsFrame): void {
-    const selfServeFeature = inputs.features[Constants.Features.selfServeType];
-    if (selfServeFeature) {
-      // self serve type received from query string
-      const selfServeType = SelfServeType[selfServeFeature?.toLowerCase() as keyof typeof SelfServeType];
-      this.selfServeType(selfServeType ? selfServeType : SelfServeType.invalid);
-    } else if (inputs.selfServeType) {
-      // self serve type received from portal
-      this.selfServeType(inputs.selfServeType);
-    } else {
-      this.selfServeType(SelfServeType.none);
-    }
-  }
-
  public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): void {
    if (inputs != null) {
      // In development mode, save the iframe message from the portal in session storage.
@@ -1882,7 +1852,6 @@ export default class Explorer {
        this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
      }
      this.features(inputs.features);
-      this.serverId(inputs.serverId);
      this.databaseAccount(databaseAccount);
      this.subscriptionType(inputs.subscriptionType);
      this.hasWriteAccess(inputs.hasWriteAccess);
@@ -1890,12 +1859,12 @@ export default class Explorer {
      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription);
      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken);
      this.setFeatureFlagsFromFlights(inputs.flights);
-      this.setSelfServeType(inputs);
      this._importExplorerConfigComplete = true;

      updateConfigContext({
        BACKEND_ENDPOINT: inputs.extensionEndpoint || "",
-        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT)
+        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
+        serverId: inputs.serverId
      });

      updateUserContext({
@@ -1925,12 +1894,6 @@ export default class Explorer {
    if (!flights) {
      return;
    }
-    if (flights.indexOf(Constants.Flights.AutoscaleTest) !== -1) {
-      this.isAutoscaleDefaultEnabled(true);
-    }
-    if (flights.indexOf(Constants.Flights.MongoIndexing) !== -1) {
-      this.isMongoIndexingEnabled(true);
-    }
  }

  public findSelectedCollection(): ViewModels.Collection {
@@ -1988,9 +1951,9 @@ export default class Explorer {

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

@@ -3049,25 +3012,4 @@ export default class Explorer {
      })
    );
  }
-
-  public isFirstResourceCreated(): boolean {
-    const databases: ViewModels.Database[] = this.databases();
-
-    if (!databases || databases.length === 0) {
-      return false;
-    }
-
-    return databases.some(database => {
-      // user has created at least one collection
-      if (database.collections()?.length > 0) {
-        return true;
-      }
-      // user has created a database with shared throughput
-      if (database.offer()) {
-        return true;
-      }
-      // use has created an empty database without shared throughput
-      return false;
-    });
-  }
 }
--- a/src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
@@ -11,9 +11,7 @@ export class ArraysByKeyCache<T> {

  public constructor(maxNbElements: number) {
    this.maxNbElements = maxNbElements;
-    this.keyQueue = [];
-    this.cache = {};
-    this.totalElements = 0;
+    this.clear();
  }

  public clear(): void {
@@ -60,7 +58,7 @@ export class ArraysByKeyCache<T> {
   * @param startIndex
   * @param pageSize
   */
-  public retrieve(key: string, startIndex: number, pageSize: number): T[] | null {
+  public retrieve(key: string, startIndex: number, pageSize: number): T[] {
    if (!this.cache.hasOwnProperty(key)) {
      return null;
    }
@@ -79,10 +77,8 @@ export class ArraysByKeyCache<T> {
  private reduceCacheSize(): void {
    // remove an key and its array
    const oldKey = this.keyQueue.shift();
-    if (oldKey) {
-      this.totalElements -= this.cache[oldKey].length;
-      delete this.cache[oldKey];
-    }
+    this.totalElements -= this.cache[oldKey].length;
+    delete this.cache[oldKey];
  }

  /**
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
@@ -413,13 +413,13 @@ export class GraphData<V extends GremlinVertex, E extends GremlinEdge> {
   * @param node
   * @param prop
   */
-  public static getNodePropValue(node: D3Node, prop: string): undefined | string | number | boolean {
+  public static getNodePropValue(node: D3Node, prop: string): string | number | boolean {
    if (node.hasOwnProperty(prop)) {
      return (node as any)[prop];
    }

    // This is DocDB specific
-    if (node.properties && node.properties.hasOwnProperty(prop)) {
+    if (node.hasOwnProperty("properties") && node.properties.hasOwnProperty(prop)) {
      return node.properties[prop][0]["value"];
    }

@@ -496,7 +496,7 @@ export class GraphData<V extends GremlinVertex, E extends GremlinEdge> {
   * Get list of children ids of a given vertex
   * @param vertex
   */
-  public static getChildrenId(vertex: GremlinVertex): string[] {
+  private static getChildrenId(vertex: GremlinVertex): string[] {
    const ids = <any>{}; // HashSet
    if (vertex.hasOwnProperty("outE")) {
      let outE = vertex.outE;
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
@@ -1,5 +1,4 @@
-jest.mock("../../../Common/dataAccess/queryDocuments");
-jest.mock("../../../Common/dataAccess/queryDocumentsPage");
+jest.mock("../../../Common/DocumentClientUtilityBase");
 import React from "react";
 import * as sinon from "sinon";
 import { mount, ReactWrapper } from "enzyme";
@@ -13,8 +12,7 @@ import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import GraphTab from "../../Tabs/GraphTab";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
-import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
+import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";

 describe("Check whether query result is vertex array", () => {
  it("should reject null as vertex array", () => {
@@ -301,12 +299,12 @@ describe("GraphExplorer", () => {
      ignoreD3Update: boolean
    ): GraphExplorer => {
      (queryDocuments as jest.Mock).mockImplementation((container: any, query: string, options: any) => {
-        return {
+        return Q.resolve({
          _query: query,
          nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
          hasMoreResults: () => false,
          executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {}
-        };
+        });
      });
      (queryDocumentsPage as jest.Mock).mockImplementation(
        (rid: string, iterator: any, firstItemIndex: number, options: any) => {
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
@@ -28,10 +28,8 @@ import * as Constants from "../../../Common/Constants";
 import { InputProperty } from "../../../Contracts/ViewModels";
 import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
-import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
+import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
-import { FeedOptions } from "@azure/cosmos";

 export interface GraphAccessor {
  applyFilter: () => void;
@@ -727,32 +725,26 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
  /**
   * Execute DocDB query and get all results
   */
-  public async executeNonPagedDocDbQuery(query: string): Promise<DataModels.DocumentId[]> {
-    try {
-      // TODO maxItemCount: this reduces throttling, but won't cap the # of results
-      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
-        this.props.databaseId,
-        this.props.collectionId,
-        query,
-        {
-          maxItemCount: GraphExplorer.PAGE_ALL,
-          enableCrossPartitionQuery:
-            StorageUtility.LocalStorageUtility.getEntryString(
-              StorageUtility.StorageKey.IsCrossPartitionQueryEnabled
-            ) === "true"
-        } as FeedOptions
-      );
-      const response = await iterator.fetchNext();
-
-      return response?.resources;
-    } catch (error) {
-      GraphExplorer.reportToConsole(
-        ConsoleDataType.Error,
-        `Failed to execute non-paged query ${query}. Reason:${error}`,
-        error
-      );
-      return null;
-    }
+  public executeNonPagedDocDbQuery(query: string): Q.Promise<DataModels.DocumentId[]> {
+    // TODO maxItemCount: this reduces throttling, but won't cap the # of results
+    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
+      maxItemCount: GraphExplorer.PAGE_ALL,
+      enableCrossPartitionQuery:
+        StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.IsCrossPartitionQueryEnabled) ===
+        "true"
+    }).then(
+      (iterator: QueryIterator<ItemDefinition & Resource>) => {
+        return iterator.fetchNext().then(response => response.resources);
+      },
+      (reason: any) => {
+        GraphExplorer.reportToConsole(
+          ConsoleDataType.Error,
+          `Failed to execute non-paged query ${query}. Reason:${reason}`,
+          reason
+        );
+        return null;
+      }
+    );
  }

  /**
@@ -872,7 +864,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
  /**
   * User executes query
   */
-  public async submitQuery(query: string): Promise<void> {
+  public submitQuery(query: string): void {
    // Clear any progress indicator
    this.executeCounter = 0;
    this.setState({
@@ -890,22 +882,24 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    // Remember query
    this.pushToLatestQueryFragments(query);

-    try {
-      let result: UserQueryResult;
-      if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
-        result = await this.executeDocDbGVQuery();
-      } else {
-        result = await this.executeGremlinQuery(query);
-      }
+    let backendPromise;

-      this.queryTotalRequestCharge = result.requestCharge;
-    } catch (error) {
-      const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
-      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-      this.setState({
-        filterQueryError: errorMsg
-      });
+    if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
+      backendPromise = this.executeDocDbGVQuery();
+    } else {
+      backendPromise = this.executeGremlinQuery(query);
    }
+
+    backendPromise.then(
+      (result: UserQueryResult) => (this.queryTotalRequestCharge = result.requestCharge),
+      (error: any) => {
+        const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
+        GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+        this.setState({
+          filterQueryError: errorMsg
+        });
+      }
+    );
  }

  /**
@@ -1396,7 +1390,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
  /**
   * Update possible vertices to display in UI
   */
-  private updatePossibleVertices(): Promise<PossibleVertex[]> {
+  private updatePossibleVertices(): Q.Promise<PossibleVertex[]> {
    const highlightedNodeId = this.state.highlightedNode ? this.state.highlightedNode.id : null;

    const q = `SELECT c.id, c["${this.props.graphConfigUiData.nodeCaptionChoice() ||
@@ -1727,81 +1721,85 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    );
  }

-  private async executeDocDbGVQuery(): Promise<UserQueryResult> {
+  private executeDocDbGVQuery(): Q.Promise<UserQueryResult> {
    let query = "select root.id from root where IS_DEFINED(root._isEdge) = false order by root._ts desc";
    if (this.props.collectionPartitionKeyProperty) {
      query = `select root.id, root.${this.props.collectionPartitionKeyProperty} from root where IS_DEFINED(root._isEdge) = false order by root._ts asc`;
    }

-    try {
-      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
-        this.props.databaseId,
-        this.props.collectionId,
-        query,
-        {
-          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
-          enableCrossPartitionQuery:
-            LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-        } as FeedOptions
-      );
-      this.currentDocDBQueryInfo = {
-        iterator: iterator,
-        index: 0,
-        query: query
-      };
-      return await this.loadMoreRootNodes();
-    } catch (error) {
-      GraphExplorer.reportToConsole(
-        ConsoleDataType.Error,
-        `Failed to execute CosmosDB query: ${query} reason:${error}`
-      );
-      throw error;
-    }
+    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
+      maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+      enableCrossPartitionQuery: LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+    })
+      .then(
+        (iterator: QueryIterator<ItemDefinition & Resource>) => {
+          this.currentDocDBQueryInfo = {
+            iterator: iterator,
+            index: 0,
+            query: query
+          };
+        },
+        (reason: any) => {
+          GraphExplorer.reportToConsole(
+            ConsoleDataType.Error,
+            `Failed to execute CosmosDB query: ${query} reason:${reason}`
+          );
+        }
+      )
+      .then(() => this.loadMoreRootNodes());
  }

-  private async loadMoreRootNodes(): Promise<UserQueryResult> {
+  private loadMoreRootNodes(): Q.Promise<UserQueryResult> {
    if (!this.currentDocDBQueryInfo) {
-      return undefined;
+      return Q.resolve(null);
    }
-
    let RU: string = GraphExplorer.REQUEST_CHARGE_UNKNOWN_MSG;
+
    const queryInfoStr = `${this.currentDocDBQueryInfo.query} (${this.currentDocDBQueryInfo.index + 1}-${this
      .currentDocDBQueryInfo.index + GraphExplorer.ROOT_LIST_PAGE_SIZE})`;
    const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${queryInfoStr}`);

-    try {
-      const results: ViewModels.QueryResults = await queryDocumentsPage(
-        this.props.collectionId,
-        this.currentDocDBQueryInfo.iterator,
-        this.currentDocDBQueryInfo.index
-      );
-
-      GraphExplorer.clearConsoleProgress(id);
-      this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
-      this.setState({ hasMoreRoots: results.hasMoreResults });
-      RU = results.requestCharge.toString();
-      GraphExplorer.reportToConsole(
-        ConsoleDataType.Info,
-        `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
-      );
-      const pkIds: string[] = (results.documents || []).map((item: DataModels.DocumentId) =>
-        GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty)
-      );
-
-      const arg = pkIds.join(",");
-      await this.executeGremlinQuery(`g.V(${arg})`);
-
-      return { requestCharge: RU };
-    } catch (error) {
-      GraphExplorer.clearConsoleProgress(id);
-      const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${getErrorMessage(error)}`;
-      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-      this.setState({
-        filterQueryError: errorMsg
-      });
-      this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
-      throw error;
-    }
+    return queryDocumentsPage(
+      this.props.collectionId,
+      this.currentDocDBQueryInfo.iterator,
+      this.currentDocDBQueryInfo.index,
+      {
+        enableCrossPartitionQuery:
+          LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+      }
+    )
+      .then((results: ViewModels.QueryResults) => {
+        GraphExplorer.clearConsoleProgress(id);
+        this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
+        this.setState({ hasMoreRoots: results.hasMoreResults });
+        RU = results.requestCharge.toString();
+        GraphExplorer.reportToConsole(
+          ConsoleDataType.Info,
+          `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
+        );
+        const documents = results.documents || [];
+        return documents.map(
+          (item: DataModels.DocumentId) => {
+            return GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty);
+          },
+          (reason: any) => {
+            // Failure
+            GraphExplorer.clearConsoleProgress(id);
+            const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${reason}`;
+            GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+            this.setState({
+              filterQueryError: errorMsg
+            });
+            this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
+            throw reason;
+          }
+        );
+      })
+      .then((pkIds: string[]) => {
+        const arg = pkIds.join(",");
+        return this.executeGremlinQuery(`g.V(${arg})`);
+      })
+      .then(() => ({ requestCharge: RU }));
  }

  private executeGremlinQuery(query: string): Q.Promise<UserQueryResult> {
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -8,7 +8,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
  let mockExplorer: Explorer;

  describe("Enable Azure Synapse Link Button", () => {
-    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link";
+    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link (Preview)";

    beforeAll(() => {
      mockExplorer = {} as Explorer;
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
@@ -269,7 +269,7 @@ export class CommandBarComponentButtonFactory {
      return null;
    }

-    const label = "Enable Azure Synapse Link";
+    const label = "Enable Azure Synapse Link (Preview)";
    return {
      iconSrc: SynapseIcon,
      iconAlt: label,
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -11,8 +11,8 @@ import ErrorBlackIcon from "../../../../images/error_black.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
 import ErrorRedIcon from "../../../../images/error_red.svg";
-import ClearIcon from "../../../../images/Clear.svg";
 import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
+import ClearIcon from "../../../../images/Clear.svg";
 import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
 import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";

@@ -59,9 +59,9 @@ export class NotificationConsoleComponent extends React.Component<
    { key: "Info", text: "Info" },
    { key: "Error", text: "Error" }
  ];
-  private headerTimeoutId?: number;
-  private prevHeaderStatus: string | null;
-  private consoleHeaderElement?: HTMLElement;
+  private headerTimeoutId: number;
+  private prevHeaderStatus: string;
+  private consoleHeaderElement: HTMLElement;

  constructor(props: NotificationConsoleComponentProps) {
    super(props);
@@ -99,10 +99,6 @@ export class NotificationConsoleComponent extends React.Component<
    }
  }

-  public setElememntRef = (element: HTMLElement) => {
-    this.consoleHeaderElement = element;
-  };
-
  public render(): JSX.Element {
    const numInProgress = this.props.consoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.InProgress)
      .length;
@@ -114,7 +110,7 @@ export class NotificationConsoleComponent extends React.Component<
      <div className="notificationConsoleContainer">
        <div
          className="notificationConsoleHeader"
-          ref={this.setElememntRef}
+          ref={(element: HTMLElement) => (this.consoleHeaderElement = element)}
          onClick={(event: React.MouseEvent<HTMLDivElement>) => this.expandCollapseConsole()}
          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
          tabIndex={0}
@@ -224,12 +220,12 @@ export class NotificationConsoleComponent extends React.Component<
    ));
  }

-  private onFilterSelected = (event: React.ChangeEvent<HTMLSelectElement>, option: IDropdownOption): void => {
+  private onFilterSelected(event: React.ChangeEvent<HTMLSelectElement>, option: IDropdownOption): void {
    this.setState({ selectedFilter: String(option.key) });
-  };
+  }

  private getFilteredConsoleData(): ConsoleData[] {
-    let filterType: ConsoleDataType | null = null;
+    let filterType: ConsoleDataType = null;

    switch (this.state.selectedFilter) {
      case "All":
@@ -276,7 +272,7 @@ export class NotificationConsoleComponent extends React.Component<

  private onConsoleWasExpanded = (): void => {
    this.props.onConsoleExpandedChange(this.state.isExpanded);
-    if (this.state.isExpanded && this.consoleHeaderElement) {
+    if (this.state.isExpanded) {
      this.consoleHeaderElement.focus();
    }
  };
--- a/src/Explorer/Notebook/NotebookComponent/mocks/rx-jupyter.ts
+++ b/src/Explorer/Notebook/NotebookComponent/mocks/rx-jupyter.ts
@@ -1,17 +1,18 @@
 import { Observable, of } from "rxjs";
-import { AjaxRequest, AjaxResponse } from "rxjs/ajax";
+import { AjaxResponse } from "rxjs/ajax";
+import { ServerConfig } from "rx-jupyter";

 let fakeAjaxResponse: AjaxResponse = {
-  originalEvent: <Event>(<unknown>undefined),
+  originalEvent: undefined,
  xhr: new XMLHttpRequest(),
-  request: <AjaxRequest>(<unknown>null),
+  request: null,
  status: 200,
  response: {},
-  responseText: "",
+  responseText: null,
  responseType: "json"
 };
 export const sessions = {
-  create: (serverConfig: unknown, body: object): Observable<AjaxResponse> => of(fakeAjaxResponse),
+  create: (serverConfig: ServerConfig, body: object): Observable<AjaxResponse> => of(fakeAjaxResponse),
  __setResponse: (response: AjaxResponse) => {
    fakeAjaxResponse = response;
  },
--- a/src/Explorer/Notebook/NotebookComponent/epics.ts
+++ b/src/Explorer/Notebook/NotebookComponent/epics.ts
@@ -808,7 +808,7 @@ const closeUnsupportedMimetypesEpic = (
        const filepath = action.payload.filepath;
        // Close tab and show error message
        explorer.tabsManager.closeTabsByComparator(
-          (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
+          tab => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
        );
        const msg = `${filepath} cannot be rendered. Please download the file, in order to view it outside of Data Explorer.`;
        explorer.showOkModalDialog("File cannot be rendered", msg);
@@ -836,7 +836,7 @@ const closeContentFailedToFetchEpic = (
        const filepath = action.payload.filepath;
        // Close tab and show error message
        explorer.tabsManager.closeTabsByComparator(
-          (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
+          tab => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
        );
        const msg = `Failed to load file: ${filepath}.`;
        explorer.showOkModalDialog("Failure to load", msg);
--- a/src/Explorer/Notebook/NotebookContentClient.ts
+++ b/src/Explorer/Notebook/NotebookContentClient.ts
@@ -11,7 +11,7 @@ import { stringifyNotebook } from "@nteract/commutable";
 export class NotebookContentClient {
  constructor(
    private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
-    public notebookBasePath: ko.Observable<string>,
+    private notebookBasePath: ko.Observable<string>,
    private contentProvider: IContentProvider
  ) {}

@@ -117,11 +117,8 @@ export class NotebookContentClient {

  private async checkIfFilepathExists(filepath: string): Promise<boolean> {
    const parentDirPath = NotebookUtil.getParentPath(filepath);
-    if (parentDirPath) {
-      const items = await this.fetchNotebookFiles(parentDirPath);
-      return items.some(value => FileSystemUtil.isPathEqual(value.path, filepath));
-    }
-    return false;
+    const items = await this.fetchNotebookFiles(parentDirPath);
+    return items.some(value => FileSystemUtil.isPathEqual(value.path, filepath));
  }

  /**
@@ -192,7 +189,7 @@ export class NotebookContentClient {
        const dir = xhr.response;
        const item = NotebookUtil.createNotebookContentItem(dir.name, dir.path, dir.type);
        item.parent = parent;
-        parent.children?.push(item);
+        parent.children.push(item);
        return item;
      });
  }
@@ -228,7 +225,7 @@ export class NotebookContentClient {
   * Convert rx-jupyter type to our type
   * @param type
   */
-  public static getType(type: FileType): NotebookContentItemType {
+  private static getType(type: FileType): NotebookContentItemType {
    switch (type) {
      case "directory":
        return NotebookContentItemType.Directory;
--- a/src/Explorer/Panes/AddCollectionPane.html
+++ b/src/Explorer/Panes/AddCollectionPane.html
@@ -152,8 +152,7 @@
                                                                                                                  maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
                                                                                                                  autoPilotUsageCost: autoPilotUsageCost,
                                                                                                                  canExceedMaximumValue: canExceedMaximumValue,
-                                                                                                                  showAutoPilot: !isFreeTierAccount(),
-                                                                                                                  freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
+                                                                                                                  showAutoPilot: !isFreeTierAccount()
                                                                                                              }">
              </throughput-input-autopilot-v3>
          </div>
@@ -257,7 +256,7 @@
                              range of values and is likely to have evenly distributed access patterns.</span>
                      </span>
                  </p>
-                  <input type="text" id="addCollection-partitionKeyValue" data-test="addCollection-partitionKeyValue" aria-required="true" size="40"
+                  <input type="text" id="partitionKeyValue" data-test="addCollection-partitionKeyValue" aria-required="true" size="40"
                      class="textfontclr collid" data-bind="textInput: partitionKey,
                                                attr: {
                                                    placeholder: partitionKeyPlaceholder,
@@ -334,8 +333,7 @@
                                              maxAutoPilotThroughputSet: autoPilotThroughput,
                                              autoPilotUsageCost: autoPilotUsageCost,
                                              canExceedMaximumValue: canExceedMaximumValue,
-                                              showAutoPilot: !isFixedStorageSelected(),
-                                              freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
+                                              showAutoPilot: !isFixedStorageSelected()
                                            }">
                  </throughput-input-autopilot-v3>
              </div>
--- a/src/Explorer/Panes/AddCollectionPane.test.ts
+++ b/src/Explorer/Panes/AddCollectionPane.test.ts
@@ -74,7 +74,7 @@ describe("Add Collection Pane", () => {
      explorer.databaseAccount(mockFreeTierDatabaseAccount);
      const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
      expect(addCollectionPane.isFreeTierAccount()).toBe(true);
-      expect(addCollectionPane.upsellMessage()).toContain("With free tier");
+      expect(addCollectionPane.upsellMessage()).toContain("With free tier discount");
      expect(addCollectionPane.upsellAnchorUrl()).toBe(Constants.Urls.freeTierInformation);
      expect(addCollectionPane.upsellAnchorText()).toBe("Learn more");
    });
--- a/src/Explorer/Panes/AddCollectionPane.ts
+++ b/src/Explorer/Panes/AddCollectionPane.ts
@@ -89,7 +89,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
  public isSynapseLinkUpdating: ko.Computed<boolean>;
  public canExceedMaximumValue: ko.PureComputed<boolean>;
  public ruToolTipText: ko.Computed<string>;
-  public freeTierExceedThroughputTooltip: ko.Computed<string>;
  public canConfigureThroughput: ko.PureComputed<boolean>;
  public showUpsellMessage: ko.PureComputed<boolean>;
  public shouldCreateMongoWildcardIndex: ko.Observable<boolean>;
@@ -100,6 +99,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
    super(options);
    this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText());
    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
+    this.showUpsellMessage = ko.pureComputed(() => !this.container.isServerlessEnabled());
    this.formWarnings = ko.observable<string>();
    this.collectionId = ko.observable<string>();
    this.databaseId = ko.observable<string>();
@@ -186,7 +186,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
        return "";
      }

-      const serverId: string = this.container.serverId();
+      const serverId = configContext.serverId;
      const regions =
        (account &&
          account.properties &&
@@ -200,7 +200,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
      if (!this.isSharedAutoPilotSelected()) {
        throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
          offerThroughput,
-          serverId,
+          configContext.serverId,
          regions,
          multimaster,
          this.isSharedAutoPilotSelected()
@@ -240,7 +240,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
        return "";
      }

-      const serverId: string = this.container.serverId();
+      const serverId: string = configContext.serverId;
      const regions =
        (account &&
          account.properties &&
@@ -481,20 +481,8 @@ export default class AddCollectionPane extends ContextualPaneBase {
      this.resetData();
    });

-    this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
-      this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
-        ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
-        : ""
-    );
-
    this.upsellMessage = ko.pureComputed<string>(() => {
-      return PricingUtils.getUpsellMessage(
-        this.container.serverId(),
-        this.isFreeTierAccount(),
-        this.container.isFirstResourceCreated(),
-        this.container.defaultExperience(),
-        true
-      );
+      return PricingUtils.getUpsellMessage(configContext.serverId, this.isFreeTierAccount());
    });

    this.upsellMessageAriaLabel = ko.pureComputed<string>(() => {
@@ -546,23 +534,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
      return isFreeTierAccount;
    });

-    this.showUpsellMessage = ko.pureComputed(() => {
-      if (this.container.isServerlessEnabled()) {
-        return false;
-      }
-
-      if (
-        this.isFreeTierAccount() &&
-        !this.databaseCreateNew() &&
-        this.databaseHasSharedOffer() &&
-        !this.collectionWithThroughputInShared()
-      ) {
-        return false;
-      }
-
-      return true;
-    });
-
    this.showIndexingOptionsForSharedThroughput = ko.computed<boolean>(() => {
      const newDatabaseWithSharedOffer = this.databaseCreateNew() && this.databaseCreateNewShared();
      const existingDatabaseWithSharedOffer = !this.databaseCreateNew() && this.databaseHasSharedOffer();
@@ -654,7 +625,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
      });
    });

-    this.shouldCreateMongoWildcardIndex = ko.observable(this.container.isMongoIndexingEnabled());
+    this.shouldCreateMongoWildcardIndex = ko.observable(false);
  }

  public getSharedThroughputDefault(): boolean {
@@ -679,7 +650,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
    // TODO: Figure out if a database level partition split is about to happen once shared throughput read is available
    this.formWarnings("");
    this.databaseCreateNewShared(this.getSharedThroughputDefault());
-    this.shouldCreateMongoWildcardIndex(this.container.isMongoIndexingEnabled());
    if (this.isPreferredApiTable() && !databaseId) {
      databaseId = SharedConstants.CollectionCreation.TablesAPIDefaultDatabase;
    }
@@ -929,13 +899,11 @@ export default class AddCollectionPane extends ContextualPaneBase {
    this.databaseId("");
    this.partitionKey("");
    this.throughputSpendAck(false);
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    this.isAutoPilotSelected(false);
+    this.isSharedAutoPilotSelected(false);
    this.autoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
    this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);

-    this.shouldCreateMongoWildcardIndex = ko.observable(this.container.isMongoIndexingEnabled());
-
    this.uniqueKeys([]);
    this.useIndexingForSharedThroughput(true);

--- a/src/Explorer/Panes/AddDatabasePane.html
+++ b/src/Explorer/Panes/AddDatabasePane.html
@@ -114,8 +114,7 @@
                                              maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
                                              autoPilotUsageCost: autoPilotUsageCost,
                                              canExceedMaximumValue: canExceedMaximumValue,
-                                              showAutoPilot: !isFreeTierAccount(),
-                                              freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
+                                              showAutoPilot: !isFreeTierAccount()
                                          }">
              </throughput-input-autopilot-v3>
              <p data-bind="visible: canRequestSupport">
--- a/src/Explorer/Panes/AddDatabasePane.test.ts
+++ b/src/Explorer/Panes/AddDatabasePane.test.ts
@@ -77,7 +77,7 @@ describe("Add Database Pane", () => {
      explorer.databaseAccount(mockFreeTierDatabaseAccount);
      const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
      expect(addDatabasePane.isFreeTierAccount()).toBe(true);
-      expect(addDatabasePane.upsellMessage()).toContain("With free tier");
+      expect(addDatabasePane.upsellMessage()).toContain("With free tier discount");
      expect(addDatabasePane.upsellAnchorUrl()).toBe(Constants.Urls.freeTierInformation);
      expect(addDatabasePane.upsellAnchorText()).toBe("Learn more");
    });
--- a/src/Explorer/Panes/AddDatabasePane.ts
+++ b/src/Explorer/Panes/AddDatabasePane.ts
@@ -44,7 +44,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
  public autoPilotUsageCost: ko.Computed<string>;
  public canExceedMaximumValue: ko.PureComputed<boolean>;
  public ruToolTipText: ko.Computed<string>;
-  public freeTierExceedThroughputTooltip: ko.Computed<string>;
  public isFreeTierAccount: ko.Computed<boolean>;
  public canConfigureThroughput: ko.PureComputed<boolean>;
  public showUpsellMessage: ko.PureComputed<boolean>;
@@ -55,6 +54,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
    this.databaseId = ko.observable<string>();
    this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText());
    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
+    this.showUpsellMessage = ko.pureComputed(() => !this.container.isServerlessEnabled());

    this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue());

@@ -122,7 +122,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
        return "";
      }

-      const serverId = this.container.serverId();
+      const serverId = configContext.serverId;
      const regions =
        (account &&
          account.properties &&
@@ -182,18 +182,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
      return isFreeTierAccount;
    });

-    this.showUpsellMessage = ko.pureComputed(() => {
-      if (this.container.isServerlessEnabled()) {
-        return false;
-      }
-
-      if (this.isFreeTierAccount()) {
-        return this.databaseCreateNewShared();
-      }
-
-      return true;
-    });
-
    this.maxThroughputRUText = ko.pureComputed(() => {
      return this.maxThroughputRU().toLocaleString();
    });
@@ -231,20 +219,8 @@ export default class AddDatabasePane extends ContextualPaneBase {
      this.resetData();
    });

-    this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
-      this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
-        ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
-        : ""
-    );
-
    this.upsellMessage = ko.pureComputed<string>(() => {
-      return PricingUtils.getUpsellMessage(
-        this.container.serverId(),
-        this.isFreeTierAccount(),
-        this.container.isFirstResourceCreated(),
-        this.container.defaultExperience(),
-        false
-      );
+      return PricingUtils.getUpsellMessage(configContext.serverId, this.isFreeTierAccount());
    });

    this.upsellMessageAriaLabel = ko.pureComputed<string>(() => {
@@ -337,7 +313,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
  public resetData() {
    this.databaseId("");
    this.databaseCreateNewShared(this.getSharedThroughputDefault());
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    this.isAutoPilotSelected(false);
    this.maxAutoPilotThroughputSet(AutoPilotUtils.minAutoPilotThroughput);
    this._updateThroughputLimitByDatabase();
    this.throughputSpendAck(false);
--- a/src/Explorer/Panes/CassandraAddCollectionPane.ts
+++ b/src/Explorer/Panes/CassandraAddCollectionPane.ts
@@ -127,7 +127,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
        return "";
      }

-      const serverId = this.container.serverId();
+      const serverId = configContext.serverId;
      const regions =
        (account &&
          account.properties &&
@@ -172,7 +172,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
        return "";
      }

-      const serverId = this.container.serverId();
+      const serverId = configContext.serverId;
      const regions =
        (account &&
          account.properties &&
@@ -451,8 +451,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
  public resetData() {
    super.resetData();
    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    this.isAutoPilotSelected(false);
+    this.isSharedAutoPilotSelected(false);
    this.selectedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
    this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
    this.throughput(AddCollectionUtility.getMaxThroughput(this.container.collectionCreationDefaults, this.container));
--- a/src/Explorer/Tables/DataTable/CacheBase.ts
+++ b/src/Explorer/Tables/DataTable/CacheBase.ts
@@ -1,5 +1,5 @@
 abstract class CacheBase<T> {
-  public data: T[] | null;
+  public data: T[];
  public sortOrder: any;
  public serverCallInProgress: boolean;

--- a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
+++ b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
@@ -16,75 +16,14 @@ import * as Entities from "../Entities";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import * as TableEntityProcessor from "../TableEntityProcessor";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

 interface IListTableEntitiesSegmentedResult extends Entities.IListTableEntitiesResult {
  ExceedMaximumRetries?: boolean;
 }

-export interface ErrorDataModel {
-  message: string;
-  severity?: string;
-  location?: {
-    start: string;
-    end: string;
-  };
-  code?: string;
-}
-
-function parseError(err: any): ErrorDataModel[] {
-  try {
-    return _parse(err);
-  } catch (e) {
-    return [<ErrorDataModel>{ message: JSON.stringify(err) }];
-  }
-}
-
-function _parse(err: any): ErrorDataModel[] {
-  var normalizedErrors: ErrorDataModel[] = [];
-  if (err.message && !err.code) {
-    normalizedErrors.push(err);
-  } else {
-    const innerErrors: any[] = _getInnerErrors(err.message);
-    normalizedErrors = innerErrors.map(innerError =>
-      typeof innerError === "string" ? { message: innerError } : innerError
-    );
-  }
-
-  return normalizedErrors;
-}
-
-function _getInnerErrors(message: string): any[] {
-  /*
-            The backend error message has an inner-message which is a stringified object. 
-            For SQL errors, the "errors" property is an array of SqlErrorDataModel.
-            Example:
-                "Message: {"Errors":["Resource with specified id or name already exists"]}\r\nActivityId: 80005000008d40b6a, Request URI: /apps/19000c000c0a0005/services/mctestdocdbprod-MasterService-0-00066ab9937/partitions/900005f9000e676fb8/replicas/13000000000955p"
-            For non-SQL errors the "Errors" propery is an array of string.
-            Example:
-                "Message: {"errors":[{"severity":"Error","location":{"start":7,"end":8},"code":"SC1001","message":"Syntax error, incorrect syntax near '.'."}]}\r\nActivityId: d3300016d4084e310a, Request URI: /apps/12401f9e1df77/services/dc100232b1f44545/partitions/f86f3bc0001a2f78/replicas/13085003638s"
-        */
-
-  let innerMessage: any = null;
-
-  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
-  try {
-    // Multi-Partition error flavor
-    const regExp = /^(.*)ActivityId: (.*)/g;
-    const regString = regExp.exec(singleLineMessage);
-    const innerMessageString = regString[1];
-    innerMessage = JSON.parse(innerMessageString);
-  } catch (e) {
-    // Single-partition error flavor
-    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
-    const regString = regExp.exec(singleLineMessage);
-    const innerMessageString = regString[1];
-    innerMessage = JSON.parse(innerMessageString);
-  }
-
-  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
-}
-
 /**
 * Storage Table Entity List ViewModel
 */
@@ -448,17 +387,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
        }
      })
      .catch((error: any) => {
-        const parsedErrors = parseError(error);
-        var errors = parsedErrors.map(error => {
-          return <ViewModels.QueryError>{
-            message: error.message,
-            start: error.location ? error.location.start : undefined,
-            end: error.location ? error.location.end : undefined,
-            code: error.code,
-            severity: error.severity
-          };
-        });
-        this.queryErrorMessage(errors[0].message);
+        const errorMessage = getErrorMessage(error);
+        this.queryErrorMessage(errorMessage);
        if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
          TelemetryProcessor.traceFailure(
            Action.Tab,
@@ -469,7 +399,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
              defaultExperience: this.queryTablesTab.collection.container.defaultExperience(),
              dataExplorerArea: Areas.Tab,
              tabTitle: this.queryTablesTab.tabTitle(),
-              error: error
+              error: errorMessage,
+              errorStack: getErrorStack(error)
            },
            this.queryTablesTab.onLoadStartKey
          );
@@ -516,21 +447,21 @@ export default class TableEntityListViewModel extends DataTableViewModel {
          }
        );
      } else if (this.continuationToken && this.queryTablesTab.container.isPreferredApiCassandra()) {
-        promise = Q(
-          this.queryTablesTab.container.tableDataClient.queryDocuments(
-            this.queryTablesTab.collection,
-            this.cqlQuery(),
-            true,
-            this.continuationToken
-          )
+        promise = this.queryTablesTab.container.tableDataClient.queryDocuments(
+          this.queryTablesTab.collection,
+          this.cqlQuery(),
+          true,
+          this.continuationToken
        );
      } else {
        let query = this.sqlQuery();
        if (this.queryTablesTab.container.isPreferredApiCassandra()) {
          query = this.cqlQuery();
        }
-        promise = Q(
-          this.queryTablesTab.container.tableDataClient.queryDocuments(this.queryTablesTab.collection, query, true)
+        promise = this.queryTablesTab.container.tableDataClient.queryDocuments(
+          this.queryTablesTab.collection,
+          query,
+          true
        );
      }
      return promise
--- a/src/Explorer/Tables/Entities.ts
+++ b/src/Explorer/Tables/Entities.ts
@@ -7,7 +7,7 @@ export interface ITableEntity {
 export interface ITableEntityForTablesAPI extends ITableEntity {
  PartitionKey: ITableEntityAttribute;
  RowKey: ITableEntityAttribute;
-  Timestamp: ITableEntityAttribute;
+  Timestamp?: ITableEntityAttribute;
 }

 export interface ITableEntityAttribute {
--- a/src/Explorer/Tables/TableDataClient.ts
+++ b/src/Explorer/Tables/TableDataClient.ts
@@ -4,7 +4,6 @@ import Q from "q";
 import { displayTokenRenewalPromptForStatus, getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
 import { AuthType } from "../../AuthType";
 import { ConsoleDataType } from "../../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { FeedOptions } from "@azure/cosmos";
 import * as Constants from "../../Common/Constants";
 import * as Entities from "./Entities";
 import * as HeadersUtility from "../../Common/HeadersUtility";
@@ -13,12 +12,9 @@ import * as TableConstants from "./Constants";
 import * as TableEntityProcessor from "./TableEntityProcessor";
 import * as ViewModels from "../../Contracts/ViewModels";
 import Explorer from "../Explorer";
+import { queryDocuments, deleteDocument, updateDocument, createDocument } from "../../Common/DocumentClientUtilityBase";
 import { configContext } from "../../ConfigContext";
 import { handleError } from "../../Common/ErrorHandlingUtils";
-import { createDocument } from "../../Common/dataAccess/createDocument";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";

 export interface CassandraTableKeys {
  partitionKeys: CassandraTableKey[];
@@ -42,19 +38,19 @@ export abstract class TableDataClient {
    collection: ViewModels.Collection,
    originalDocument: any,
    newEntity: Entities.ITableEntity
-  ): Promise<Entities.ITableEntity>;
+  ): Q.Promise<Entities.ITableEntity>;

  public abstract queryDocuments(
    collection: ViewModels.Collection,
    query: string,
    shouldNotify?: boolean,
    paginationToken?: string
-  ): Promise<Entities.IListTableEntitiesResult>;
+  ): Q.Promise<Entities.IListTableEntitiesResult>;

  public abstract deleteDocuments(
    collection: ViewModels.Collection,
    entitiesToDelete: Entities.ITableEntity[]
-  ): Promise<any>;
+  ): Q.Promise<any>;
 }

 export class TablesAPIDataClient extends TableDataClient {
@@ -78,63 +74,77 @@ export class TablesAPIDataClient extends TableDataClient {
    return deferred.promise;
  }

-  public async updateDocument(
+  public updateDocument(
    collection: ViewModels.Collection,
    originalDocument: any,
    entity: Entities.ITableEntity
-  ): Promise<Entities.ITableEntity> {
-    try {
-      const newDocument = await updateDocument(
-        collection,
-        originalDocument,
-        TableEntityProcessor.convertEntityToNewDocument(<Entities.ITableEntityForTablesAPI>entity)
-      );
-      return TableEntityProcessor.convertDocumentsToEntities([newDocument])[0];
-    } catch (error) {
-      handleError(error, "TablesAPIDataClient/updateDocument");
-      throw error;
-    }
+  ): Q.Promise<Entities.ITableEntity> {
+    const deferred = Q.defer<Entities.ITableEntity>();
+
+    updateDocument(
+      collection,
+      originalDocument,
+      TableEntityProcessor.convertEntityToNewDocument(<Entities.ITableEntityForTablesAPI>entity)
+    ).then(
+      (newDocument: any) => {
+        const newEntity = TableEntityProcessor.convertDocumentsToEntities([newDocument])[0];
+        deferred.resolve(newEntity);
+      },
+      reason => {
+        deferred.reject(reason);
+      }
+    );
+    return deferred.promise;
  }

-  public async queryDocuments(
+  public queryDocuments(
    collection: ViewModels.Collection,
    query: string
-  ): Promise<Entities.IListTableEntitiesResult> {
-    try {
-      const options = {
-        enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey()
-      } as FeedOptions;
-      const iterator = queryDocuments(collection.databaseId, collection.id(), query, options);
-      const response = await iterator.fetchNext();
-      const documents = response?.resources;
-      const entities = TableEntityProcessor.convertDocumentsToEntities(documents);
+  ): Q.Promise<Entities.IListTableEntitiesResult> {
+    const deferred = Q.defer<Entities.IListTableEntitiesResult>();

-      return {
-        Results: entities,
-        ContinuationToken: iterator.hasMoreResults(),
-        iterator: iterator
-      };
-    } catch (error) {
-      handleError(error, "TablesAPIDataClient/queryDocuments", "Query documents failed");
-      throw error;
-    }
+    let options: any = {};
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
+    queryDocuments(collection.databaseId, collection.id(), query, options).then(
+      iterator => {
+        iterator
+          .fetchNext()
+          .then(response => response.resources)
+          .then(
+            (documents: any[] = []) => {
+              let entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(documents);
+              let finalEntities: Entities.IListTableEntitiesResult = <Entities.IListTableEntitiesResult>{
+                Results: entities,
+                ContinuationToken: iterator.hasMoreResults(),
+                iterator: iterator
+              };
+              deferred.resolve(finalEntities);
+            },
+            reason => {
+              deferred.reject(reason);
+            }
+          );
+      },
+      reason => {
+        deferred.reject(reason);
+      }
+    );
+    return deferred.promise;
  }

-  public async deleteDocuments(
-    collection: ViewModels.Collection,
-    entitiesToDelete: Entities.ITableEntity[]
-  ): Promise<any> {
-    const documentsToDelete: any[] = TableEntityProcessor.convertEntitiesToDocuments(
+  public deleteDocuments(collection: ViewModels.Collection, entitiesToDelete: Entities.ITableEntity[]): Q.Promise<any> {
+    let documentsToDelete: any[] = TableEntityProcessor.convertEntitiesToDocuments(
      <Entities.ITableEntityForTablesAPI[]>entitiesToDelete,
      collection
    );
-
-    await Promise.all(
-      documentsToDelete?.map(async document => {
+    let promiseArray: Q.Promise<any>[] = [];
+    documentsToDelete &&
+      documentsToDelete.forEach(document => {
        document.id = ko.observable<string>(document.id);
-        await deleteDocument(collection, document);
-      })
-    );
+        let promise: Q.Promise<any> = deleteDocument(collection, document);
+        promiseArray.push(promise);
+      });
+    return Q.all(promiseArray);
  }
 }

@@ -170,7 +180,10 @@ export class CassandraAPIDataClient extends TableDataClient {
        (data: any) => {
          entity[TableConstants.EntityKeyNames.RowKey] = entity[this.getCassandraPartitionKeyProperty(collection)];
          entity[TableConstants.EntityKeyNames.RowKey]._ = entity[TableConstants.EntityKeyNames.RowKey]._.toString();
-          NotificationConsoleUtils.logConsoleInfo(`Successfully added new row to table ${collection.id()}`);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully added new row to table ${collection.id()}`
+          );
          deferred.resolve(entity);
        },
        error => {
@@ -184,150 +197,181 @@ export class CassandraAPIDataClient extends TableDataClient {
    return deferred.promise;
  }

-  public async updateDocument(
+  public updateDocument(
    collection: ViewModels.Collection,
    originalDocument: any,
    newEntity: Entities.ITableEntity
-  ): Promise<Entities.ITableEntity> {
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Updating row ${originalDocument.RowKey._}`);
-
-    try {
-      let whereSegment = " WHERE";
-      let keys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys.concat(
-        collection.cassandraKeys.clusteringKeys
-      );
-      for (let keyIndex in keys) {
-        const key = keys[keyIndex].property;
-        const keyType = keys[keyIndex].type;
-        whereSegment += this.isStringType(keyType)
-          ? ` ${key} = '${newEntity[key]._}' AND`
-          : ` ${key} = ${newEntity[key]._} AND`;
-      }
-      whereSegment = whereSegment.slice(0, whereSegment.length - 4);
-
-      let updateQuery = `UPDATE ${collection.databaseId}.${collection.id()}`;
-      let isPropertyUpdated = false;
-      for (let property in newEntity) {
-        if (
-          !originalDocument[property] ||
-          newEntity[property]._.toString() !== originalDocument[property]._.toString()
-        ) {
-          updateQuery += this.isStringType(newEntity[property].$)
-            ? ` SET ${property} = '${newEntity[property]._}',`
-            : ` SET ${property} = ${newEntity[property]._},`;
-          isPropertyUpdated = true;
+  ): Q.Promise<Entities.ITableEntity> {
+    const notificationId = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `Updating row ${originalDocument.RowKey._}`
+    );
+    const deferred = Q.defer<Entities.ITableEntity>();
+    let promiseArray: Q.Promise<any>[] = [];
+    let query = `UPDATE ${collection.databaseId}.${collection.id()}`;
+    let isChange: boolean = false;
+    for (let property in newEntity) {
+      if (!originalDocument[property] || newEntity[property]._.toString() !== originalDocument[property]._.toString()) {
+        if (this.isStringType(newEntity[property].$)) {
+          query = `${query} SET ${property} = '${newEntity[property]._}',`;
+        } else {
+          query = `${query} SET ${property} = ${newEntity[property]._},`;
        }
+        isChange = true;
      }
-
-      if (isPropertyUpdated) {
-        updateQuery = updateQuery.slice(0, updateQuery.length - 1);
-        updateQuery += whereSegment;
-        await this.queryDocuments(collection, updateQuery);
-      }
-
-      let deleteQuery = `DELETE `;
-      let isPropertyDeleted = false;
-      for (let property in originalDocument) {
-        if (property !== TableConstants.EntityKeyNames.RowKey && !newEntity[property] && !!originalDocument[property]) {
-          deleteQuery += ` ${property},`;
-          isPropertyDeleted = true;
-        }
-      }
-
-      if (isPropertyDeleted) {
-        deleteQuery = deleteQuery.slice(0, deleteQuery.length - 1);
-        deleteQuery += ` FROM ${collection.databaseId}.${collection.id()}${whereSegment}`;
-        await this.queryDocuments(collection, deleteQuery);
-      }
-
-      newEntity[TableConstants.EntityKeyNames.RowKey] = originalDocument[TableConstants.EntityKeyNames.RowKey];
-      NotificationConsoleUtils.logConsoleInfo(`Successfully updated row ${newEntity.RowKey._}`);
-      return newEntity;
-    } catch (error) {
-      handleError(error, "UpdateRowCassandra", "Failed to update row ${newEntity.RowKey._}");
-      throw error;
-    } finally {
-      clearMessage();
    }
+    query = query.slice(0, query.length - 1);
+    let whereSegment = " WHERE";
+    let keys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys.concat(
+      collection.cassandraKeys.clusteringKeys
+    );
+    for (let keyIndex in keys) {
+      const key = keys[keyIndex].property;
+      const keyType = keys[keyIndex].type;
+      if (this.isStringType(keyType)) {
+        whereSegment = `${whereSegment} ${key} = '${newEntity[key]._}' AND`;
+      } else {
+        whereSegment = `${whereSegment} ${key} = ${newEntity[key]._} AND`;
+      }
+    }
+    whereSegment = whereSegment.slice(0, whereSegment.length - 4);
+    query = query + whereSegment;
+    if (isChange) {
+      promiseArray.push(this.queryDocuments(collection, query));
+    }
+    query = `DELETE `;
+    for (let property in originalDocument) {
+      if (property !== TableConstants.EntityKeyNames.RowKey && !newEntity[property] && !!originalDocument[property]) {
+        query = `${query} ${property},`;
+      }
+    }
+    if (query.length > 7) {
+      query = query.slice(0, query.length - 1);
+      query = `${query} FROM ${collection.databaseId}.${collection.id()}${whereSegment}`;
+      promiseArray.push(this.queryDocuments(collection, query));
+    }
+    Q.all(promiseArray)
+      .then(
+        (data: any) => {
+          newEntity[TableConstants.EntityKeyNames.RowKey] = originalDocument[TableConstants.EntityKeyNames.RowKey];
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully updated row ${newEntity.RowKey._}`
+          );
+          deferred.resolve(newEntity);
+        },
+        error => {
+          handleError(error, "UpdateRowCassandra", `Failed to update row ${newEntity.RowKey._}`);
+          deferred.reject(error);
+        }
+      )
+      .finally(() => {
+        NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
+      });
+    return deferred.promise;
  }

-  public async queryDocuments(
+  public queryDocuments(
    collection: ViewModels.Collection,
    query: string,
    shouldNotify?: boolean,
    paginationToken?: string
-  ): Promise<Entities.IListTableEntitiesResult> {
-    const clearMessage =
-      shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
-    try {
-      const authType = window.authType;
-      const apiEndpoint: string =
-        authType === AuthType.EncryptedToken
-          ? Constants.CassandraBackend.guestQueryApi
-          : Constants.CassandraBackend.queryApi;
-      const data: any = await $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
-        type: "POST",
-        data: {
-          accountName:
-            collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
-          cassandraEndpoint: this.trimCassandraEndpoint(
-            collection.container.databaseAccount().properties.cassandraEndpoint
-          ),
-          resourceId: collection.container.databaseAccount().id,
-          keyspaceId: collection.databaseId,
-          tableId: collection.id(),
-          query,
-          paginationToken
-        },
-        beforeSend: this.setAuthorizationHeader,
-        error: this.handleAjaxError,
-        cache: false
-      });
-      shouldNotify &&
-        NotificationConsoleUtils.logConsoleInfo(
-          `Successfully fetched ${data.result.length} rows for table ${collection.id()}`
-        );
-      return {
-        Results: data.result,
-        ContinuationToken: data.paginationToken
-      };
-    } catch (error) {
-      shouldNotify &&
-        handleError(error, "QueryDocumentsCassandra", `Failed to query rows for table ${collection.id()}`);
-      throw error;
-    } finally {
-      clearMessage?.();
+  ): Q.Promise<Entities.IListTableEntitiesResult> {
+    let notificationId: string;
+    if (shouldNotify) {
+      notificationId = NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.InProgress,
+        `Querying rows for table ${collection.id()}`
+      );
    }
+    const deferred = Q.defer<Entities.IListTableEntitiesResult>();
+    const authType = window.authType;
+    const apiEndpoint: string =
+      authType === AuthType.EncryptedToken
+        ? Constants.CassandraBackend.guestQueryApi
+        : Constants.CassandraBackend.queryApi;
+    $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+      type: "POST",
+      data: {
+        accountName: collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
+        cassandraEndpoint: this.trimCassandraEndpoint(
+          collection.container.databaseAccount().properties.cassandraEndpoint
+        ),
+        resourceId: collection.container.databaseAccount().id,
+        keyspaceId: collection.databaseId,
+        tableId: collection.id(),
+        query: query,
+        paginationToken: paginationToken
+      },
+      beforeSend: this.setAuthorizationHeader,
+      error: this.handleAjaxError,
+      cache: false
+    })
+      .then(
+        (data: any) => {
+          if (shouldNotify) {
+            NotificationConsoleUtils.logConsoleMessage(
+              ConsoleDataType.Info,
+              `Successfully fetched ${data.result.length} rows for table ${collection.id()}`
+            );
+          }
+          deferred.resolve({
+            Results: data.result,
+            ContinuationToken: data.paginationToken
+          });
+        },
+        (error: any) => {
+          if (shouldNotify) {
+            handleError(error, "QueryDocumentsCassandra", `Failed to query rows for table ${collection.id()}`);
+          }
+          deferred.reject(error);
+        }
+      )
+      .done(() => {
+        if (shouldNotify) {
+          NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
+        }
+      });
+    return deferred.promise;
  }

-  public async deleteDocuments(
-    collection: ViewModels.Collection,
-    entitiesToDelete: Entities.ITableEntity[]
-  ): Promise<any> {
+  public deleteDocuments(collection: ViewModels.Collection, entitiesToDelete: Entities.ITableEntity[]): Q.Promise<any> {
    const query = `DELETE FROM ${collection.databaseId}.${collection.id()} WHERE `;
-    const partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
-
-    await Promise.all(
-      entitiesToDelete.map(async (currEntityToDelete: Entities.ITableEntity) => {
-        const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting row ${currEntityToDelete.RowKey._}`);
-        const partitionKeyValue = currEntityToDelete[partitionKeyProperty];
-        const currQuery =
-          query +
-          (this.isStringType(partitionKeyValue.$)
-            ? `${partitionKeyProperty} = '${partitionKeyValue._}'`
-            : `${partitionKeyProperty} = ${partitionKeyValue._}`);
-
-        try {
-          await this.queryDocuments(collection, currQuery);
-          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted row ${currEntityToDelete.RowKey._}`);
-        } catch (error) {
-          handleError(error, "DeleteRowCassandra", `Error while deleting row ${currEntityToDelete.RowKey._}`);
-          throw error;
-        } finally {
-          clearMessage();
-        }
-      })
-    );
+    let promiseArray: Q.Promise<any>[] = [];
+    let partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
+    for (let i = 0, len = entitiesToDelete.length; i < len; i++) {
+      let currEntityToDelete: Entities.ITableEntity = entitiesToDelete[i];
+      let currQuery = query;
+      let partitionKeyValue = currEntityToDelete[partitionKeyProperty];
+      if (partitionKeyValue._ != null && this.isStringType(partitionKeyValue.$)) {
+        currQuery = `${currQuery}${partitionKeyProperty} = '${partitionKeyValue._}' AND `;
+      } else {
+        currQuery = `${currQuery}${partitionKeyProperty} = ${partitionKeyValue._} AND `;
+      }
+      currQuery = currQuery.slice(0, currQuery.length - 5);
+      const notificationId = NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.InProgress,
+        `Deleting row ${currEntityToDelete.RowKey._}`
+      );
+      promiseArray.push(
+        this.queryDocuments(collection, currQuery)
+          .then(
+            () => {
+              NotificationConsoleUtils.logConsoleMessage(
+                ConsoleDataType.Info,
+                `Successfully deleted row ${currEntityToDelete.RowKey._}`
+              );
+            },
+            error => {
+              handleError(error, "DeleteRowCassandra", `Error while deleting row ${currEntityToDelete.RowKey._}`);
+            }
+          )
+          .finally(() => {
+            NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
+          })
+      );
+    }
+    return Q.all(promiseArray);
  }

  public createKeyspace(
--- a/src/Explorer/Tabs/ConflictsTab.ts
+++ b/src/Explorer/Tabs/ConflictsTab.ts
@@ -16,16 +16,18 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import DiscardIcon from "../../../images/discard.svg";
 import DeleteIcon from "../../../images/delete.svg";
-import { QueryIterator, Resource, ConflictDefinition, FeedOptions } from "@azure/cosmos";
+import { QueryIterator, ItemDefinition, Resource, ConflictDefinition } from "@azure/cosmos";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
 import Explorer from "../Explorer";
+import {
+  queryConflicts,
+  deleteConflict,
+  deleteDocument,
+  createDocument,
+  updateDocument
+} from "../../Common/DocumentClientUtilityBase";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { createDocument } from "../../Common/dataAccess/createDocument";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";
-import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
-import { queryConflicts } from "../../Common/dataAccess/queryConflicts";

 export default class ConflictsTab extends TabsBase {
  public selectedConflictId: ko.Observable<ConflictId>;
@@ -223,15 +225,25 @@ export default class ConflictsTab extends TabsBase {
    });
  }

-  public async refreshDocumentsGrid(): Promise<void> {
-    try {
-      // clear documents grid
-      this.conflictIds([]);
-      this._documentsIterator = this.createIterator();
-      await this.loadNextPage();
-    } catch (error) {
-      window.alert(getErrorMessage(error));
-    }
+  public refreshDocumentsGrid(): Q.Promise<any> {
+    // clear documents grid
+    this.conflictIds([]);
+    return this.createIterator()
+      .then(
+        // reset iterator
+        iterator => {
+          this._documentsIterator = iterator;
+        }
+      )
+      .then(
+        // load documents
+        () => {
+          return this.loadNextPage();
+        }
+      )
+      .catch(error => {
+        window.alert(getErrorMessage(error));
+      });
  }

  public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
@@ -253,9 +265,9 @@ export default class ConflictsTab extends TabsBase {
    return Q();
  }

-  public onAcceptChangesClick = async (): Promise<void> => {
+  public onAcceptChangesClick = (): Q.Promise<any> => {
    if (this.isEditorDirty() && !this._isIgnoreDirtyEditor()) {
-      return;
+      return Q();
    }

    this.isExecutionError(false);
@@ -273,79 +285,81 @@ export default class ConflictsTab extends TabsBase {
      conflictResourceId: selectedConflict.resourceId
    });

-    try {
-      if (selectedConflict.operationType === Constants.ConflictOperationType.Replace) {
-        const documentContent = JSON.parse(this.selectedConflictContent());
+    let operationPromise: Q.Promise<any> = Q();
+    if (selectedConflict.operationType === Constants.ConflictOperationType.Replace) {
+      const documentContent = JSON.parse(this.selectedConflictContent());

-        await updateDocument(
-          this.collection,
-          selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty]),
-          documentContent
-        );
-      }
-
-      if (selectedConflict.operationType === Constants.ConflictOperationType.Create) {
-        const documentContent = JSON.parse(this.selectedConflictContent());
-
-        await createDocument(this.collection, documentContent);
-      }
-
-      if (
-        selectedConflict.operationType === Constants.ConflictOperationType.Delete &&
-        !!this.selectedConflictContent()
-      ) {
-        const documentContent = JSON.parse(this.selectedConflictContent());
-
-        await deleteDocument(
-          this.collection,
-          selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty])
-        );
-      }
-
-      await deleteConflict(this.collection, selectedConflict);
-      this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
-      this.selectedConflictContent("");
-      this.selectedConflictCurrent("");
-      this.selectedConflictId(null);
-      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-      TelemetryProcessor.traceSuccess(
-        Action.ResolveConflict,
-        {
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          conflictResourceType: selectedConflict.resourceType,
-          conflictOperationType: selectedConflict.operationType,
-          conflictResourceId: selectedConflict.resourceId
-        },
-        startKey
+      operationPromise = updateDocument(
+        this.collection,
+        selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty]),
+        documentContent
      );
-    } catch (error) {
-      this.isExecutionError(true);
-      const errorMessage = getErrorMessage(error);
-      window.alert(errorMessage);
-      TelemetryProcessor.traceFailure(
-        Action.ResolveConflict,
-        {
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          conflictResourceType: selectedConflict.resourceType,
-          conflictOperationType: selectedConflict.operationType,
-          conflictResourceId: selectedConflict.resourceId,
-          error: errorMessage,
-          errorStack: getErrorStack(error)
-        },
-        startKey
-      );
-    } finally {
-      this.isExecuting(false);
    }
+
+    if (selectedConflict.operationType === Constants.ConflictOperationType.Create) {
+      const documentContent = JSON.parse(this.selectedConflictContent());
+
+      operationPromise = createDocument(this.collection, documentContent);
+    }
+
+    if (selectedConflict.operationType === Constants.ConflictOperationType.Delete && !!this.selectedConflictContent()) {
+      const documentContent = JSON.parse(this.selectedConflictContent());
+
+      operationPromise = deleteDocument(
+        this.collection,
+        selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty])
+      );
+    }
+
+    return operationPromise
+      .then(
+        () => {
+          return deleteConflict(this.collection, selectedConflict).then(() => {
+            this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
+            this.selectedConflictContent("");
+            this.selectedConflictCurrent("");
+            this.selectedConflictId(null);
+            this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+            TelemetryProcessor.traceSuccess(
+              Action.ResolveConflict,
+              {
+                databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+                defaultExperience: this.collection && this.collection.container.defaultExperience(),
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+                conflictResourceType: selectedConflict.resourceType,
+                conflictOperationType: selectedConflict.operationType,
+                conflictResourceId: selectedConflict.resourceId
+              },
+              startKey
+            );
+          });
+        },
+        error => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          window.alert(errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.ResolveConflict,
+            {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              conflictResourceType: selectedConflict.resourceType,
+              conflictOperationType: selectedConflict.operationType,
+              conflictResourceId: selectedConflict.resourceId,
+              error: errorMessage,
+              errorStack: getErrorStack(error)
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
  };

-  public onDeleteClick = async (): Promise<void> => {
+  public onDeleteClick = (): Q.Promise<any> => {
    this.isExecutionError(false);
    this.isExecuting(true);

@@ -361,48 +375,50 @@ export default class ConflictsTab extends TabsBase {
      conflictResourceId: selectedConflict.resourceId
    });

-    try {
-      await deleteConflict(this.collection, selectedConflict);
-      this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
-      this.selectedConflictContent("");
-      this.selectedConflictCurrent("");
-      this.selectedConflictId(null);
-      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-      TelemetryProcessor.traceSuccess(
-        Action.DeleteConflict,
-        {
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          conflictResourceType: selectedConflict.resourceType,
-          conflictOperationType: selectedConflict.operationType,
-          conflictResourceId: selectedConflict.resourceId
+    return deleteConflict(this.collection, selectedConflict)
+      .then(
+        () => {
+          this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
+          this.selectedConflictContent("");
+          this.selectedConflictCurrent("");
+          this.selectedConflictId(null);
+          this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+          TelemetryProcessor.traceSuccess(
+            Action.DeleteConflict,
+            {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              conflictResourceType: selectedConflict.resourceType,
+              conflictOperationType: selectedConflict.operationType,
+              conflictResourceId: selectedConflict.resourceId
+            },
+            startKey
+          );
        },
-        startKey
-      );
-    } catch (error) {
-      this.isExecutionError(true);
-      const errorMessage = getErrorMessage(error);
-      window.alert(errorMessage);
-      TelemetryProcessor.traceFailure(
-        Action.DeleteConflict,
-        {
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          conflictResourceType: selectedConflict.resourceType,
-          conflictOperationType: selectedConflict.operationType,
-          conflictResourceId: selectedConflict.resourceId,
-          error: errorMessage,
-          errorStack: getErrorStack(error)
-        },
-        startKey
-      );
-    } finally {
-      this.isExecuting(false);
-    }
+        error => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          window.alert(errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.DeleteConflict,
+            {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              conflictResourceType: selectedConflict.resourceType,
+              conflictOperationType: selectedConflict.operationType,
+              conflictResourceId: selectedConflict.resourceId,
+              error: errorMessage,
+              errorStack: getErrorStack(error)
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
  };

  public onDiscardClick = (): Q.Promise<any> => {
@@ -429,47 +445,60 @@ export default class ConflictsTab extends TabsBase {
    return Q();
  }

-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
+  public onTabClick(): Q.Promise<any> {
+    return super.onTabClick().then(() => {
+      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
+    });
  }

-  public async onActivate(): Promise<void> {
-    super.onActivate();
-
-    if (!this._documentsIterator) {
-      try {
-        this._documentsIterator = await this.createIterator();
-        await this.loadNextPage();
-      } catch (error) {
-        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-          TelemetryProcessor.traceFailure(
-            Action.Tab,
-            {
-              databaseAccountName: this.collection.container.databaseAccount().name,
-              databaseName: this.collection.databaseId,
-              collectionName: this.collection.id(),
-              defaultExperience: this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error)
-            },
-            this.onLoadStartKey
-          );
-          this.onLoadStartKey = null;
-        }
+  public onActivate(): Q.Promise<any> {
+    return super.onActivate().then(() => {
+      if (this._documentsIterator) {
+        return Q.resolve(this._documentsIterator);
      }
-    }
+
+      return this.createIterator().then(
+        (iterator: QueryIterator<ItemDefinition & Resource>) => {
+          this._documentsIterator = iterator;
+          return this.loadNextPage();
+        },
+        error => {
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+            TelemetryProcessor.traceFailure(
+              Action.Tab,
+              {
+                databaseAccountName: this.collection.container.databaseAccount().name,
+                databaseName: this.collection.databaseId,
+                collectionName: this.collection.id(),
+                defaultExperience: this.collection.container.defaultExperience(),
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+                error: getErrorMessage(error),
+                errorStack: getErrorStack(error)
+              },
+              this.onLoadStartKey
+            );
+            this.onLoadStartKey = null;
+          }
+        }
+      );
+    });
  }

-  public createIterator(): QueryIterator<ConflictDefinition & Resource> {
+  public onRefreshClick(): Q.Promise<any> {
+    return this.refreshDocumentsGrid().then(() => {
+      this.selectedConflictContent("");
+      this.selectedConflictId(null);
+      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+    });
+  }
+
+  public createIterator(): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
    // TODO: Conflict Feed does not allow filtering atm
    const query: string = undefined;
-    const options = {
-      enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey()
-    };
-    return queryConflicts(this.collection.databaseId, this.collection.id(), query, options as FeedOptions);
+    let options: any = {};
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
+    return queryConflicts(this.collection.databaseId, this.collection.id(), query, options);
  }

  public loadNextPage(): Q.Promise<any> {
--- a/src/Explorer/Tabs/DatabaseSettingsTab.html
+++ b/src/Explorer/Tabs/DatabaseSettingsTab.html
@@ -23,19 +23,6 @@
    <div class="scaleDivison" aria-label="Scale" aria-controls="scaleRegion">
      <span class="scaleSettingTitle">Scale</span>
    </div>
-    <div class="freeTierInfoBanner" data-bind="visible: isFreeTierAccount">
-      <span class="freeTierInfoIcon"><img src="/info_color.svg" alt="Info"/></span>
-      <span class="freeTierInfoMessage"
-        >With free tier, you'll get the first 400 RU/s and 5 GB of storage in this account for free. To keep your
-        account free, keep the total RU/s across all resources in the account to 400 RU/s.
-        <a
-          href="https://docs.microsoft.com/en-us/azure/cosmos-db/understand-your-bill#billing-examples-with-free-tier-accounts"
-          target="_blank"
-        >
-          Learn more.</a
-        >
-      </span>
-    </div>
    <div class="ssTextAllignment" id="scaleRegion">
      <throughput-input-autopilot-v3
        params="{ 
@@ -59,8 +46,7 @@
                    autoPilotUsageCost: autoPilotUsageCost,
                    canExceedMaximumValue: canExceedMaximumValue,
                    overrideWithAutoPilotSettings: overrideWithAutoPilotSettings,
-                    overrideWithProvisionedThroughputSettings: overrideWithProvisionedThroughputSettings,
-                    freeTierExceedThroughputWarning: freeTierExceedThroughputWarning
+                    overrideWithProvisionedThroughputSettings: overrideWithProvisionedThroughputSettings
                 }"
      >
      </throughput-input-autopilot-v3>
--- a/src/Explorer/Tabs/DatabaseSettingsTab.ts
+++ b/src/Explorer/Tabs/DatabaseSettingsTab.ts
@@ -57,7 +57,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
  public canThroughputExceedMaximumValue: ko.Computed<boolean>;
  public costsVisible: ko.Computed<boolean>;
  public displayedError: ko.Observable<string>;
-  public isFreeTierAccount: ko.Computed<boolean>;
  public isTemplateReady: ko.Observable<boolean>;
  public minRUAnotationVisible: ko.Computed<boolean>;
  public minRUs: ko.Observable<number>;
@@ -83,7 +82,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
  public throughputAutoPilotRadioId: string;
  public throughputProvisionedRadioId: string;
  public throughputModeRadioName: string;
-  public freeTierExceedThroughputWarning: ko.Computed<string>;

  private _hasProvisioningTypeChanged: ko.Computed<boolean>;
  private _wasAutopilotOriginallySet: ko.Observable<boolean>;
@@ -141,7 +139,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
        return "";
      }

-      const serverId = this.container.serverId();
+      const serverId = configContext.serverId;
      const regions =
        (account &&
          account.properties &&
@@ -361,17 +359,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.

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

-    this.isFreeTierAccount = ko.computed<boolean>(() => {
-      const databaseAccount = this.container?.databaseAccount();
-      return databaseAccount?.properties?.enableFreeTier;
-    });
-
-    this.freeTierExceedThroughputWarning = ko.computed<string>(() =>
-      this.isFreeTierAccount()
-        ? "Billing will apply if you provision more than 400 RU/s of manual throughput, or if the resource scales beyond 400 RU/s with autoscale."
-        : ""
-    );
-
    this._buildCommandBarOptions();
  }

@@ -442,10 +429,11 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
    return Q();
  };

-  public async onActivate(): Promise<void> {
-    super.onActivate();
-    this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
-    await this.database.loadOffer();
+  public onActivate(): Q.Promise<any> {
+    return super.onActivate().then(async () => {
+      this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
+      await this.database.loadOffer();
+    });
  }

  private _setBaseline() {
--- a/src/Explorer/Tabs/DocumentsTab.html
+++ b/src/Explorer/Tabs/DocumentsTab.html
@@ -103,7 +103,7 @@
            <button
              class="filterbtnstyle queryButton"
              data-bind="
-                                click: refreshDocumentsGrid,
+                                click: onApplyFilterClick,
                                enable: applyFilterButton.enabled"
              aria-label="Apply filter"
              tabindex="0"
--- a/src/Explorer/Tabs/DocumentsTab.ts
+++ b/src/Explorer/Tabs/DocumentsTab.ts
@@ -19,24 +19,19 @@ import SaveIcon from "../../../images/save-cosmos.svg";
 import DiscardIcon from "../../../images/discard.svg";
 import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
 import UploadIcon from "../../../images/Upload_16x16.svg";
-import {
-  extractPartitionKey,
-  PartitionKeyDefinition,
-  QueryIterator,
-  ItemDefinition,
-  Resource,
-  Item
-} from "@azure/cosmos";
+import { extractPartitionKey, PartitionKeyDefinition, QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import {
+  readDocument,
+  queryDocuments,
+  deleteDocument,
+  updateDocument,
+  createDocument
+} from "../../Common/DocumentClientUtilityBase";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { readDocument } from "../../Common/dataAccess/readDocument";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";
-import { createDocument } from "../../Common/dataAccess/createDocument";

 export default class DocumentsTab extends TabsBase {
  public selectedDocumentId: ko.Observable<DocumentId>;
@@ -374,22 +369,36 @@ export default class DocumentsTab extends TabsBase {
    return true;
  };

-  public async refreshDocumentsGrid(): Promise<void> {
+  public onApplyFilterClick(): Q.Promise<any> {
    // clear documents grid
    this.documentIds([]);
+    return this.createIterator()
+      .then(
+        // reset iterator
+        iterator => {
+          this._documentsIterator = iterator;
+        }
+      )
+      .then(
+        // load documents
+        () => {
+          return this.loadNextPage();
+        }
+      )
+      .then(() => {
+        // collapse filter
+        this.appliedFilter(this.filterContent());
+        this.isFilterExpanded(false);
+        const focusElement = document.getElementById("errorStatusIcon");
+        focusElement && focusElement.focus();
+      })
+      .catch(error => {
+        window.alert(getErrorMessage(error));
+      });
+  }

-    try {
-      // reset iterator
-      this._documentsIterator = this.createIterator();
-      // load documents
-      await this.loadNextPage();
-      // collapse filter
-      this.appliedFilter(this.filterContent());
-      this.isFilterExpanded(false);
-      document.getElementById("errorStatusIcon")?.focus();
-    } catch (error) {
-      window.alert(getErrorMessage(error));
-    }
+  public refreshDocumentsGrid(): Q.Promise<any> {
+    return this.onApplyFilterClick();
  }

  public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
@@ -425,7 +434,7 @@ export default class DocumentsTab extends TabsBase {
    return Q();
  };

-  public onSaveNewDocumentClick = (): Promise<any> => {
+  public onSaveNewDocumentClick = (): Q.Promise<any> => {
    this.isExecutionError(false);
    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
@@ -493,7 +502,7 @@ export default class DocumentsTab extends TabsBase {
    return Q();
  };

-  public onSaveExisitingDocumentClick = (): Promise<any> => {
+  public onSaveExisitingDocumentClick = (): Q.Promise<any> => {
    const selectedDocumentId = this.selectedDocumentId();
    const documentContent = JSON.parse(this.selectedDocumentContent());

@@ -562,15 +571,17 @@ export default class DocumentsTab extends TabsBase {
    return Q();
  };

-  public onDeleteExisitingDocumentClick = async (): Promise<void> => {
+  public onDeleteExisitingDocumentClick = (): Q.Promise<any> => {
    const selectedDocumentId = this.selectedDocumentId();
    const msg = !this.isPreferredApiMongoDB
      ? "Are you sure you want to delete the selected item ?"
      : "Are you sure you want to delete the selected document ?";

    if (window.confirm(msg)) {
-      await this._deleteDocument(selectedDocumentId);
+      return this._deleteDocument(selectedDocumentId);
    }
+
+    return Q();
  };

  public onValidDocumentEdit(): Q.Promise<any> {
@@ -606,50 +617,63 @@ export default class DocumentsTab extends TabsBase {
    return Q();
  }

-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+  public onTabClick(): Q.Promise<any> {
+    return super.onTabClick().then(() => {
+      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+    });
  }

-  public async onActivate(): Promise<void> {
-    super.onActivate();
-
-    if (!this._documentsIterator) {
-      try {
-        this._documentsIterator = this.createIterator();
-        await this.loadNextPage();
-      } catch (error) {
-        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-          TelemetryProcessor.traceFailure(
-            Action.Tab,
-            {
-              databaseAccountName: this.collection.container.databaseAccount().name,
-              databaseName: this.collection.databaseId,
-              collectionName: this.collection.id(),
-              defaultExperience: this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error)
-            },
-            this.onLoadStartKey
-          );
-          this.onLoadStartKey = null;
-        }
+  public onActivate(): Q.Promise<any> {
+    return super.onActivate().then(() => {
+      if (this._documentsIterator) {
+        return Q.resolve(this._documentsIterator);
      }
-    }
+
+      return this.createIterator().then(
+        (iterator: QueryIterator<ItemDefinition & Resource>) => {
+          this._documentsIterator = iterator;
+          return this.loadNextPage();
+        },
+        error => {
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+            TelemetryProcessor.traceFailure(
+              Action.Tab,
+              {
+                databaseAccountName: this.collection.container.databaseAccount().name,
+                databaseName: this.collection.databaseId,
+                collectionName: this.collection.id(),
+                defaultExperience: this.collection.container.defaultExperience(),
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+                error: getErrorMessage(error),
+                errorStack: getErrorStack(error)
+              },
+              this.onLoadStartKey
+            );
+            this.onLoadStartKey = null;
+          }
+        }
+      );
+    });
  }

+  public onRefreshClick(): Q.Promise<any> {
+    return this.refreshDocumentsGrid().then(() => {
+      this.selectedDocumentContent("");
+      this.selectedDocumentId(null);
+      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+    });
+  }
  private _isIgnoreDirtyEditor = (): boolean => {
    var msg: string = "Changes will be lost. Do you want to continue?";
    return window.confirm(msg);
  };

-  protected __deleteDocument(documentId: DocumentId): Promise<void> {
+  protected __deleteDocument(documentId: DocumentId): Q.Promise<any> {
    return deleteDocument(this.collection, documentId);
  }

-  private _deleteDocument(selectedDocumentId: DocumentId): Promise<void> {
+  private _deleteDocument(selectedDocumentId: DocumentId): Q.Promise<any> {
    this.isExecutionError(false);
    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
@@ -660,7 +684,7 @@ export default class DocumentsTab extends TabsBase {
    this.isExecuting(true);
    return this.__deleteDocument(selectedDocumentId)
      .then(
-        () => {
+        (result: any) => {
          this.documentIds.remove((documentId: DocumentId) => documentId.rid === selectedDocumentId.rid);
          this.selectedDocumentContent("");
          this.selectedDocumentId(null);
@@ -696,7 +720,7 @@ export default class DocumentsTab extends TabsBase {
      .finally(() => this.isExecuting(false));
  }

-  public createIterator(): QueryIterator<ItemDefinition & Resource> {
+  public createIterator(): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
    let filters = this.lastFilterContents();
    const filter: string = this.filterContent().trim();
    const query: string = this.buildQuery(filter);
@@ -710,10 +734,11 @@ export default class DocumentsTab extends TabsBase {
    return queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
  }

-  public async selectDocument(documentId: DocumentId): Promise<void> {
+  public selectDocument(documentId: DocumentId): Q.Promise<any> {
    this.selectedDocumentId(documentId);
-    const content = await readDocument(this.collection, documentId);
-    this.initDocumentEditor(documentId, content);
+    return readDocument(this.collection, documentId).then((content: any) => {
+      this.initDocumentEditor(documentId, content);
+    });
  }

  public loadNextPage(): Q.Promise<any> {
--- a/src/Explorer/Tabs/GraphTab.ts
+++ b/src/Explorer/Tabs/GraphTab.ts
@@ -114,9 +114,10 @@ export default class GraphTab extends TabsBase {
      : `${account.name}.graphs.azure.com:443/`;
  }

-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);
+  public onTabClick(): Q.Promise<any> {
+    return super.onTabClick().then(() => {
+      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);
+    });
  }

  /**
--- a/src/Explorer/Tabs/MongoDocumentsTab.html
+++ b/src/Explorer/Tabs/MongoDocumentsTab.html
@@ -289,7 +289,7 @@
            <button
              class="filterbtnstyle queryButton"
              data-bind="
-                                click: refreshDocumentsGrid,
+                                click: onApplyFilterClick,
                                enable: applyFilterButton.enabled"
            >
              Apply Filter
--- a/src/Explorer/Tabs/MongoDocumentsTab.ts
+++ b/src/Explorer/Tabs/MongoDocumentsTab.ts
@@ -44,7 +44,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
    super.buildCommandBarOptions();
  }

-  public onSaveNewDocumentClick = (): Promise<any> => {
+  public onSaveNewDocumentClick = (): Q.Promise<any> => {
    const documentContent = JSON.parse(this.selectedDocumentContent());
    this.displayedError("");
    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
@@ -78,12 +78,12 @@ export default class MongoDocumentsTab extends DocumentsTab {
        startKey
      );
      Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
-      throw new Error("Document without shard key");
+      return Q.reject("Document without shard key");
    }

    this.isExecutionError(false);
    this.isExecuting(true);
-    return createDocument(this.collection.databaseId, this.collection, this.partitionKeyProperty, documentContent)
+    return Q(createDocument(this.collection.databaseId, this.collection, this.partitionKeyProperty, documentContent))
      .then(
        (savedDocument: any) => {
          let partitionKeyArray = extractPartitionKey(
@@ -136,7 +136,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
      .finally(() => this.isExecuting(false));
  };

-  public onSaveExisitingDocumentClick = (): Promise<any> => {
+  public onSaveExisitingDocumentClick = (): Q.Promise<any> => {
    const selectedDocumentId = this.selectedDocumentId();
    const documentContent = this.selectedDocumentContent();
    this.isExecutionError(false);
@@ -148,7 +148,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
      tabTitle: this.tabTitle()
    });

-    return updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent)
+    return Q(updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent))
      .then(
        (updatedDocument: any) => {
          let value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
@@ -204,10 +204,13 @@ export default class MongoDocumentsTab extends DocumentsTab {
    return filter || "{}";
  }

-  public async selectDocument(documentId: DocumentId): Promise<void> {
+  public selectDocument(documentId: DocumentId): Q.Promise<any> {
    this.selectedDocumentId(documentId);
-    const content = await readDocument(this.collection.databaseId, this.collection, documentId);
-    this.initDocumentEditor(documentId, content);
+    return Q(
+      readDocument(this.collection.databaseId, this.collection, documentId).then((content: any) => {
+        this.initDocumentEditor(documentId, content);
+      })
+    );
  }

  public loadNextPage(): Q.Promise<any> {
@@ -327,7 +330,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
    return partitionKey;
  }

-  protected __deleteDocument(documentId: DocumentId): Promise<void> {
-    return deleteDocument(this.collection.databaseId, this.collection, documentId);
+  protected __deleteDocument(documentId: DocumentId): Q.Promise<any> {
+    return Q(deleteDocument(this.collection.databaseId, this.collection, documentId));
  }
 }
--- a/src/Explorer/Tabs/MongoShellTab.ts
+++ b/src/Explorer/Tabs/MongoShellTab.ts
@@ -33,7 +33,7 @@ export default class MongoShellTab extends TabsBase {
      this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
      const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
      let baseUrl = "/content/mongoshell/dist/";
-      if (this._container.serverId() === "localhost") {
+      if (configContext.serverId === "localhost") {
        baseUrl = "/content/mongoshell/";
      }

@@ -53,9 +53,10 @@ export default class MongoShellTab extends TabsBase {
    // }
  }

-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+  public onTabClick(): Q.Promise<any> {
+    return super.onTabClick().then(() => {
+      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+    });
  }

  public handleMessage(event: MessageEvent) {
--- a/src/Explorer/Tabs/QueryTab.html
+++ b/src/Explorer/Tabs/QueryTab.html
@@ -11,17 +11,6 @@
      Start by writing a Mongo query, for example: <strong>{'id':'foo'}</strong> or <strong>{ }</strong> to get all the
      documents.
    </div>
-    <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: maybeSubQuery">
-      <div class="warningErrorContent">
-        <span><img class="paneErrorIcon" src="/info_color.svg" alt="Error"/></span>
-        <span class="warningErrorDetailsLinkContainer">
-          We have detected you may be using a subquery. Non-correlated subqueries are not currently supported.
-          <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/sql-query-subquery"
-            >Please see Cosmos sub query documentation for further information</a
-          >
-        </span>
-      </div>
-    </div>
    <div class="queryEditorWithSplitter" data-bind="attr: { id: queryEditorId }">
      <editor
        class="queryEditor"
@@ -114,7 +103,7 @@
        </div>
        <json-editor
          params="{ content: queryResults, isReadOnly: true, ariaLabel: 'Query results' }"
-          data-bind="visible: queryResults() && queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && !error()"
+          data-bind="visible: queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && !error()"
        >
        </json-editor>
        <div
--- a/src/Explorer/Tabs/QueryTab.ts
+++ b/src/Explorer/Tabs/QueryTab.ts
@@ -1,4 +1,5 @@
 import * as ko from "knockout";
+import Q from "q";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -6,6 +7,7 @@ import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import TabsBase from "./TabsBase";
 import { HashMap } from "../../Common/HashMap";
 import * as HeadersUtility from "../../Common/HeadersUtility";
+import * as Logger from "../../Common/Logger";
 import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
@@ -13,10 +15,9 @@ import { QueryUtils } from "../../Utils/QueryUtils";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";

 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import { queryDocuments, queryDocumentsPage } from "../../Common/DocumentClientUtilityBase";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";

 enum ToggleState {
  Result,
@@ -29,7 +30,6 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
  public fetchNextPageButton: ViewModels.Button;
  public saveQueryButton: ViewModels.Button;
  public initialEditorContent: ko.Observable<string>;
-  public maybeSubQuery: ko.Computed<boolean>;
  public sqlQueryEditorContent: ko.Observable<string>;
  public selectedContent: ko.Observable<string>;
  public sqlStatementToExecute: ko.Observable<string>;
@@ -119,11 +119,6 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
      return (container && (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph())) || false;
    });

-    this.maybeSubQuery = ko.computed<boolean>(function() {
-      const sql = this.sqlQueryEditorContent();
-      return sql && /.*\(.*SELECT.*\)/i.test(sql);
-    }, this);
-
    this.saveQueryButton = {
      enabled: this._isSaveQueriesEnabled,
      visible: this._isSaveQueriesEnabled
@@ -168,19 +163,20 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
    this._buildCommandBarOptions();
  }

-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Query);
+  public onTabClick(): Q.Promise<any> {
+    return super.onTabClick().then(() => {
+      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Query);
+    });
  }

-  public onExecuteQueryClick = async (): Promise<void> => {
+  public onExecuteQueryClick = (): Q.Promise<any> => {
    const sqlStatement: string = this.selectedContent() || this.sqlQueryEditorContent();
    this.sqlStatementToExecute(sqlStatement);
    this.allResultsMetadata([]);
    this.queryResults("");
-    this._iterator = undefined;
+    this._iterator = null;

-    await this._executeQueryDocumentsPage(0);
+    return this._executeQueryDocumentsPage(0);
  };

  public onLoadQueryClick = (): void => {
@@ -195,13 +191,13 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
    this.collection && this.collection.container && this.collection.container.browseQueriesPane.open();
  };

-  public async onFetchNextPageClick(): Promise<void> {
+  public onFetchNextPageClick(): Q.Promise<any> {
    const allResultsMetadata = (this.allResultsMetadata && this.allResultsMetadata()) || [];
    const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
    const firstResultIndex: number = (metadata && Number(metadata.firstItemIndex)) || 1;
    const itemCount: number = (metadata && Number(metadata.itemCount)) || 0;

-    await this._executeQueryDocumentsPage(firstResultIndex + itemCount - 1);
+    return this._executeQueryDocumentsPage(firstResultIndex + itemCount - 1);
  }

  public onErrorDetailsClick = (src: any, event: MouseEvent): boolean => {
@@ -269,18 +265,19 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
    return true;
  };

-  private async _executeQueryDocumentsPage(firstItemIndex: number): Promise<any> {
+  private _executeQueryDocumentsPage(firstItemIndex: number): Q.Promise<any> {
    this.error("");
    this.roundTrips(undefined);
-    if (this._iterator === undefined) {
-      this._initIterator();
+    if (this._iterator == null) {
+      const queryIteratorPromise = this._initIterator();
+      return queryIteratorPromise.finally(() => this._queryDocumentsPage(firstItemIndex));
    }

-    await this._queryDocumentsPage(firstItemIndex);
+    return this._queryDocumentsPage(firstItemIndex);
  }

  // TODO: Position and enable spinner when request is in progress
-  private async _queryDocumentsPage(firstItemIndex: number): Promise<void> {
+  private _queryDocumentsPage(firstItemIndex: number): Q.Promise<any> {
    this.isExecutionError(false);
    this._resetAggregateQueryMetrics();
    const startKey: number = TelemetryProcessor.traceStart(Action.ExecuteQuery, {
@@ -292,75 +289,90 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
    let options: any = {};
    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();

-    const queryDocuments = async (firstItemIndex: number) =>
-      await queryDocumentsPage(this.collection && this.collection.id(), this._iterator, firstItemIndex);
+    const queryDocuments = (firstItemIndex: number) =>
+      queryDocumentsPage(this.collection && this.collection.id(), this._iterator, firstItemIndex, options);
    this.isExecuting(true);
+    return QueryUtils.queryPagesUntilContentPresent(firstItemIndex, queryDocuments)
+      .then(
+        (queryResults: ViewModels.QueryResults) => {
+          const allResultsMetadata = (this.allResultsMetadata && this.allResultsMetadata()) || [];
+          const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
+          const resultsMetadata: ViewModels.QueryResultsMetadata = {
+            hasMoreResults: queryResults.hasMoreResults,
+            itemCount: queryResults.itemCount,
+            firstItemIndex: queryResults.firstItemIndex,
+            lastItemIndex: queryResults.lastItemIndex
+          };
+          this.allResultsMetadata.push(resultsMetadata);
+          this.activityId(queryResults.activityId);
+          this.roundTrips(queryResults.roundTrips);

-    try {
-      const queryResults: ViewModels.QueryResults = await QueryUtils.queryPagesUntilContentPresent(
-        firstItemIndex,
-        queryDocuments
-      );
-      const allResultsMetadata = (this.allResultsMetadata && this.allResultsMetadata()) || [];
-      const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
-      const resultsMetadata: ViewModels.QueryResultsMetadata = {
-        hasMoreResults: queryResults.hasMoreResults,
-        itemCount: queryResults.itemCount,
-        firstItemIndex: queryResults.firstItemIndex,
-        lastItemIndex: queryResults.lastItemIndex
-      };
-      this.allResultsMetadata.push(resultsMetadata);
-      this.activityId(queryResults.activityId);
-      this.roundTrips(queryResults.roundTrips);
+          this._updateQueryMetricsMap(queryResults.headers[Constants.HttpHeaders.queryMetrics]);

-      this._updateQueryMetricsMap(queryResults.headers[Constants.HttpHeaders.queryMetrics]);
+          if (queryResults.itemCount == 0 && metadata != null && metadata.itemCount >= 0) {
+            // we let users query for the next page because the SDK sometimes specifies there are more elements
+            // even though there aren't any so we should not update the prior query results.
+            return;
+          }

-      if (queryResults.itemCount == 0 && metadata != null && metadata.itemCount >= 0) {
-        // we let users query for the next page because the SDK sometimes specifies there are more elements
-        // even though there aren't any so we should not update the prior query results.
-        return;
-      }
+          const documents: any[] = queryResults.documents;
+          const results = this.renderObjectForEditor(documents, null, 4);

-      const documents: any[] = queryResults.documents;
-      const results = this.renderObjectForEditor(documents, null, 4);
+          const resultsDisplay: string =
+            queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
+          this.showingDocumentsDisplayText(resultsDisplay);
+          this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);

-      const resultsDisplay: string =
-        queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
-      this.showingDocumentsDisplayText(resultsDisplay);
-      this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);
-      this.queryResults(results);
+          if (!this.queryResults() && !results) {
+            const errorMessage: string = JSON.stringify({
+              error: `Returned no results after query execution`,
+              accountName: this.collection && this.collection.container.databaseAccount(),
+              databaseName: this.collection && this.collection.databaseId,
+              collectionName: this.collection && this.collection.id(),
+              sqlQuery: this.sqlStatementToExecute(),
+              hasMoreResults: resultsMetadata.hasMoreResults,
+              itemCount: resultsMetadata.itemCount,
+              responseHeaders: queryResults && queryResults.headers
+            });
+            Logger.logError(errorMessage, "QueryTab");
+          }

-      TelemetryProcessor.traceSuccess(
-        Action.ExecuteQuery,
-        {
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle()
+          this.queryResults(results);
+
+          TelemetryProcessor.traceSuccess(
+            Action.ExecuteQuery,
+            {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle()
+            },
+            startKey
+          );
        },
-        startKey
-      );
-    } catch (error) {
-      this.isExecutionError(true);
-      const errorMessage = getErrorMessage(error);
-      this.error(errorMessage);
-      TelemetryProcessor.traceFailure(
-        Action.ExecuteQuery,
-        {
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.tabTitle(),
-          error: errorMessage,
-          errorStack: getErrorStack(error)
-        },
-        startKey
-      );
-      document.getElementById("error-display").focus();
-    } finally {
-      this.isExecuting(false);
-      this.togglesOnFocus();
-    }
+        (error: any) => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          this.error(errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.ExecuteQuery,
+            {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: errorMessage,
+              errorStack: getErrorStack(error)
+            },
+            startKey
+          );
+          document.getElementById("error-display").focus();
+        }
+      )
+      .finally(() => {
+        this.isExecuting(false);
+        this.togglesOnFocus();
+      });
  }

  private _updateQueryMetricsMap(metricsMap: { [partitionKeyRange: string]: DataModels.QueryMetrics }): void {
@@ -465,17 +477,16 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
    }
  }

-  protected _initIterator(): void {
+  protected _initIterator(): Q.Promise<MinimalQueryIterator> {
    const options: any = QueryTab.getIteratorOptions(this.collection);
    if (this._resourceTokenPartitionKey) {
      options.partitionKey = this._resourceTokenPartitionKey;
    }

-    this._iterator = queryDocuments(
-      this.collection.databaseId,
-      this.collection.id(),
-      this.sqlStatementToExecute(),
-      options
+    return Q(
+      queryDocuments(this.collection.databaseId, this.collection.id(), this.sqlStatementToExecute(), options).then(
+        iterator => (this._iterator = iterator)
+      )
    );
  }

--- a/src/Explorer/Tabs/QueryTablesTab.ts
+++ b/src/Explorer/Tabs/QueryTablesTab.ts
@@ -161,16 +161,17 @@ export default class QueryTablesTab extends TabsBase {
    return null;
  };

-  public onActivate(): void {
-    super.onActivate();
-    const columns =
-      !!this.tableEntityListViewModel() &&
-      !!this.tableEntityListViewModel().table &&
-      this.tableEntityListViewModel().table.columns;
-    if (!!columns) {
-      columns.adjust();
-      $(window).resize();
-    }
+  public onActivate(): Q.Promise<any> {
+    return super.onActivate().then(() => {
+      const columns =
+        !!this.tableEntityListViewModel() &&
+        !!this.tableEntityListViewModel().table &&
+        this.tableEntityListViewModel().table.columns;
+      if (!!columns) {
+        columns.adjust();
+        $(window).resize();
+      }
+    });
  }

  protected getTabsButtons(): CommandButtonComponentProps[] {
--- a/src/Explorer/Tabs/ScriptTabBase.ts
+++ b/src/Explorer/Tabs/ScriptTabBase.ts
@@ -186,11 +186,12 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
    this._setBaselines();
  }

-  public onTabClick(): void {
-    super.onTabClick();
-    if (this.isNew()) {
-      this.collection.selectedSubnodeKind(this.tabKind);
-    }
+  public onTabClick(): Q.Promise<any> {
+    return super.onTabClick().then(() => {
+      if (this.isNew()) {
+        this.collection.selectedSubnodeKind(this.tabKind);
+      }
+    });
  }

  public abstract onSaveClick: () => Promise<any>;
--- a/src/Explorer/Tabs/SettingsTabV2.tsx
+++ b/src/Explorer/Tabs/SettingsTabV2.tsx
@@ -42,49 +42,54 @@ export default class SettingsTabV2 extends TabsBase {
    });
  }

-  public async onActivate(): Promise<void> {
-    try {
-      this.isExecuting(true);
-      await this.currentCollection.loadOffer();
-      // passed in options and set by parent as "Settings" by default
-      this.tabTitle(this.currentCollection.offer() ? "Settings" : "Scale & Settings");
+  public onActivate(): Q.Promise<unknown> {
+    this.isExecuting(true);
+    this.currentCollection.loadOffer().then(
+      () => {
+        // passed in options and set by parent as "Settings" by default
+        this.tabTitle(this.currentCollection.offer() ? "Settings" : "Scale & Settings");
+        this.offerRead(true);
+        this.options.getPendingNotification.then(
+          (data: DataModels.Notification) => {
+            this.notification = data;
+            this.notificationRead(true);
+            this.isExecuting(false);
+          },
+          error => {
+            const errorMessage = getErrorMessage(error);
+            this.notification = undefined;
+            this.notificationRead(true);
+            this.isExecuting(false);
+            traceFailure(
+              Action.Tab,
+              {
+                databaseAccountName: this.options.collection.container.databaseAccount().name,
+                databaseName: this.options.collection.databaseId,
+                collectionName: this.options.collection.id(),
+                defaultExperience: this.options.collection.container.defaultExperience(),
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle,
+                error: errorMessage,
+                errorStack: getErrorStack(error)
+              },
+              this.options.onLoadStartKey
+            );
+            logConsoleError(
+              `Error while fetching container settings for container ${this.options.collection.id()}: ${errorMessage}`
+            );
+            throw error;
+          }
+        );
+      },
+      () => {
+        this.offerRead(true);
+        this.isExecuting(false);
+      }
+    );

-      this.options.getPendingNotification.then(
-        (data: DataModels.Notification) => {
-          this.notification = data;
-          this.notificationRead(true);
-        },
-        error => {
-          const errorMessage = getErrorMessage(error);
-          this.notification = undefined;
-          this.notificationRead(true);
-          traceFailure(
-            Action.Tab,
-            {
-              databaseAccountName: this.options.collection.container.databaseAccount().name,
-              databaseName: this.options.collection.databaseId,
-              collectionName: this.options.collection.id(),
-              defaultExperience: this.options.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle,
-              error: errorMessage,
-              errorStack: getErrorStack(error)
-            },
-            this.options.onLoadStartKey
-          );
-          logConsoleError(
-            `Error while fetching container settings for container ${this.options.collection.id()}: ${errorMessage}`
-          );
-          throw error;
-        }
-      );
-    } finally {
-      this.offerRead(true);
-      this.isExecuting(false);
-    }
-
-    super.onActivate();
-    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.SettingsV2);
+    return super.onActivate().then(() => {
+      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.SettingsV2);
+    });
  }

  public getSettingsTabContainer(): Explorer {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Steve Faulkner	0f8c36bbf0	Move serverId	2020-12-15 23:26:30 -06:00
Steve Faulkner	661fb66f7b	Readme updates	2020-12-15 19:40:36 -06:00
Steve Faulkner	2eabc377b0	Update README	2020-12-15 19:31:43 -06:00
Steve Faulkner	1aa3fb8e7b	Update snapshot	2020-12-15 19:16:53 -06:00
Steve Faulkner	57aef782d8	Explorer.ts Cleanup	2020-12-15 19:11:51 -06:00