Move serverId

Readme updates
Update README
2026-01-07 19:46:53 +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"],
+  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"]
  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
 };
--- 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;
+    font-family: wf_segoe-ui_normal;
-  src: url("../../fonts/segoe-ui/west-european/normal/latest.woff");
+    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;
+@AccentMediumHigh: #0058AD;
-@AccentMedium: #004e87;
+@AccentMedium: #004E87;
-@AccentHigh: #1ebaed;
+@AccentHigh: #1EBAED;
-@AccentExtraHigh: #55b3ff;
+@AccentExtraHigh: #55B3FF;
-@AccentLow: #edf6ff;
+@AccentLow: #EDF6FF;
-@AccentMediumLow: #ddeefe;
+@AccentMediumLow: #DDEEFE;
-@AccentLight: #eef7ff;
+@AccentLight: #EEF7FF;
-@AccentExtra: #ddf0ff;
+@AccentExtra: #DDF0FF;
-@SelectionHigh: #b91f26;
+@SelectionHigh: #B91F26;
-@BaseLight: #ffffff;
+@BaseLight: #FFFFFF;
@BaseDark: #000000;
-@NotificationLow: #fff4ce;
+@NotificationLow: #FFF4CE;
-@NotificationHigh: #f9e9b0;
+@NotificationHigh: #F9E9B0;
-@Purple1: #8a2da5;
+@Purple1: #8A2DA5;
@Dirty: #9b4f96;
-@BaseLow: #f2f2f2;
+@BaseLow: #F2F2F2;
-@BaseMediumLow: #e6e6e6;
+@BaseMediumLow: #E6E6E6;
-@BaseMedium: #cccccc;
+@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: ~"-webkit-@{display}";
-  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-  display: ~"-ms-@{display}"; // IE11
+	display: ~"-ms-@{display}"; // IE11
-  display: @display;
+	display: @display;
 }
 .flex-direction(@direction: column) {
  -webkit-flex-direction: @direction;
-  -ms-flex-direction: @direction;
+      -ms-flex-direction: @direction;
-  flex-direction: @direction;
+          flex-direction: @direction;
 }
 /*************************************************************************************
@@ -161,31 +161,32 @@
 **************************************************************************************/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .selectedRadio,
+    .selectedRadio,
-  .selectedRadio:hover,
+    .selectedRadio:hover,
-  .selectedRadio:active,
+    .selectedRadio:active,
-  .selectedRadio.dirty,
+    .selectedRadio.dirty,
-  .tab [type="radio"]:checked ~ label,
+    .tab [type=radio]:checked ~ label,
-  .tab [type="radio"]:checked ~ label:hover {
+    .tab [type=radio]:checked ~ label:hover {
-    -ms-high-contrast-adjust: none;
+        -ms-high-contrast-adjust: none;
-    -webkit-text-fill-color: HighlightText;
+        -webkit-text-fill-color: HighlightText;
-    color: HighlightText;
+        color: HighlightText;
-    border-color: HighlightText;
+        border-color: HighlightText;
-    background-color: Highlight;
+        background-color: Highlight;
-  }
+    }
-
+
-  .queryMetricsSummaryTuple {
+    .queryMetricsSummaryTuple {
-    th,
+
-    td {
+        th, td {
-      &:nth-child(2) {
+
-        width: @IETableDataWidth;
+            &:nth-child(2) {
-      }
+                width: @IETableDataWidth;
-
+            }
-      &:nth-child(3) {
+
-        width: 50%;
+            &: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%;
+    max-width: 100%;
-  margin-bottom: @SmallSpace;
+    margin-bottom: @SmallSpace;
-  padding: @SmallSpace;
+    padding: @SmallSpace;
-  cursor: pointer;
+    cursor: pointer;
-  color: @BaseHigh;
+    color: @BaseHigh;
-  font-weight: 400;
+    font-weight: 400;
-  font-size: @mediumFontSize;
+    font-size: @mediumFontSize;
-  font-family: @DataExplorerFont;
+    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;
+    cursor: pointer;
-  width: @ImgWidth;
+    width: @ImgWidth;
-  height: @ImgHeight;
+    height: @ImgHeight;
 }
 /*********************************************************************************************************
                            Info Tooltip
 **********************************************************************************************************/
 .infoTooltip() {
-  position: relative;
+    position: relative;
-  display: inline-block;
+    display: inline-block;
 }
 .tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-  visibility: hidden;
+    visibility: hidden;
-  background-color: @backgroundColor;
+    background-color: @backgroundColor;
-  color: @textColor;
+    color: @textColor;
-  position: absolute;
+    position: absolute;
-  z-index: 1;
+    z-index: 1;
-  left: @MediumSpace;
+    left: @MediumSpace;
-  padding: @MediumSpace;
+    padding: @MediumSpace;
 }
 .tooltipTextAfter(@color: @BaseDark) {
-  content: "";
+    content: "";
-  position: absolute;
+    position: absolute;
-  right: 100%;
+    right: 100%;
-  border-style: solid;
+    border-style: solid;
-  border-color: transparent @color transparent transparent;
+    border-color: transparent @color transparent transparent;
-  left: 0px;
+    left: 0px;
-  width: 0;
+    width: 0;
-  height: 0;
+    height: 0;
-  border-color: @InfoPointerColor transparent;
+    border-color: @InfoPointerColor transparent;
 }
 .tooltipVisible() {
-  visibility: visible;
+    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;
 }
--- 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=",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
      "optional": true
    },
    "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==",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
      "optional": true
    },
    "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=",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
      "optional": true
    },
    "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=",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
      "optional": true
    },
    "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=",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
          "optional": true
        },
        "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=",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
      "optional": true
    },
    "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==",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA=="
      "optional": true
    },
    "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==",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ=="
      "optional": true
    },
    "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=",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
      "dev": true
    },
    "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==",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
      "optional": true
    },
    "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=",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
          "optional": true
        },
        "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==",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
      "dev": true
    },
    "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",
+    "@azure/cosmos-language-service": "0.0.5",
    "@babel/plugin-proposal-decorators": "7.12.12",
    "@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";
+import { HashMap } from "./HashMap";
-
+
-export class AuthorizationEndpoints {
+export class AuthorizationEndpoints {
-  public static arm: string = "https://management.core.windows.net/";
+  public static arm: string = "https://management.core.windows.net/";
-  public static common: string = "https://login.windows.net/";
+  public static common: string = "https://login.windows.net/";
-}
+}
-
+
-export class CodeOfConductEndpoints {
+export class CodeOfConductEndpoints {
-  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
+  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
-  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
+  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
-  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
+  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
-}
+}
-
+
-export class EndpointsRegex {
+export class EndpointsRegex {
-  public static readonly cassandra = [
+  public static readonly cassandra = [
-    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-    "HostName=(.*).cassandra.cosmos.azure.com"
+    "HostName=(.*).cassandra.cosmos.azure.com"
-  ];
+  ];
-  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
-  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
-  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
+  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
-  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
+  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
-}
+}
-
+
-export class ApiEndpoints {
+export class ApiEndpoints {
-  public static runtimeProxy: string = "/api/RuntimeProxy";
+  public static runtimeProxy: string = "/api/RuntimeProxy";
-  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
+  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
-}
+}
-
+
-export class ServerIds {
+export class ServerIds {
-  public static localhost: string = "localhost";
+  public static localhost: string = "localhost";
-  public static blackforest: string = "blackforest";
+  public static blackforest: string = "blackforest";
-  public static fairfax: string = "fairfax";
+  public static fairfax: string = "fairfax";
-  public static mooncake: string = "mooncake";
+  public static mooncake: string = "mooncake";
-  public static productionPortal: string = "prod";
+  public static productionPortal: string = "prod";
-  public static dev: string = "dev";
+  public static dev: string = "dev";
-}
+}
-
+
-export class ArmApiVersions {
+export class ArmApiVersions {
-  public static readonly documentDB: string = "2015-11-06";
+  public static readonly documentDB: string = "2015-11-06";
-  public static readonly arcadia: string = "2019-06-01-preview";
+  public static readonly arcadia: string = "2019-06-01-preview";
-  public static readonly arcadiaLivy: string = "2019-11-01-preview";
+  public static readonly arcadiaLivy: string = "2019-11-01-preview";
-  public static readonly arm: string = "2015-11-01";
+  public static readonly arm: string = "2015-11-01";
-  public static readonly armFeatures: string = "2014-08-01-preview";
+  public static readonly armFeatures: string = "2014-08-01-preview";
-  public static readonly publicVersion = "2020-04-01";
+  public static readonly publicVersion = "2020-04-01";
-}
+}
-
+
-export class ArmResourceTypes {
+export class ArmResourceTypes {
-  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
-  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
+  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
-}
+}
-
+
-export class BackendDefaults {
+export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
+  public static partitionKeyKind: string = "Hash";
-  public static singlePartitionStorageInGb: string = "10";
+  public static singlePartitionStorageInGb: string = "10";
-  public static multiPartitionStorageInGb: string = "100";
+  public static multiPartitionStorageInGb: string = "100";
-  public static maxChangeFeedRetentionDuration: number = 10;
+  public static maxChangeFeedRetentionDuration: number = 10;
-  public static partitionKeyVersion = 2;
+  public static partitionKeyVersion = 2;
-}
+}
-
+
-export class ClientDefaults {
+export class ClientDefaults {
-  public static requestTimeoutMs: number = 60000;
+  public static requestTimeoutMs: number = 60000;
-  public static portalCacheTimeoutMs: number = 10000;
+  public static portalCacheTimeoutMs: number = 10000;
-  public static errorNotificationTimeoutMs: number = 5000;
+  public static errorNotificationTimeoutMs: number = 5000;
-  public static copyHelperTimeoutMs: number = 2000;
+  public static copyHelperTimeoutMs: number = 2000;
-  public static waitForDOMElementMs: number = 500;
+  public static waitForDOMElementMs: number = 500;
-  public static cacheBustingTimeoutMs: number =
+  public static cacheBustingTimeoutMs: number =
-    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static databaseThroughputIncreaseFactor: number = 100;
+  public static databaseThroughputIncreaseFactor: number = 100;
-  public static readonly arcadiaTokenRefreshInterval: number =
+  public static readonly arcadiaTokenRefreshInterval: number =
-    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
+  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
-}
+}
-
+
-export class AccountKind {
+export class AccountKind {
-  public static DocumentDB: string = "DocumentDB";
+  public static DocumentDB: string = "DocumentDB";
-  public static MongoDB: string = "MongoDB";
+  public static MongoDB: string = "MongoDB";
-  public static Parse: string = "Parse";
+  public static Parse: string = "Parse";
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
+  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  public static Default: string = AccountKind.DocumentDB;
+  public static Default: string = AccountKind.DocumentDB;
-}
+}
-
+
-export class CorrelationBackend {
+export class CorrelationBackend {
-  public static Url: string = "https://aka.ms/cosmosdbanalytics";
+  public static Url: string = "https://aka.ms/cosmosdbanalytics";
-}
+}
-
+
-export class DefaultAccountExperience {
+export class DefaultAccountExperience {
-  public static DocumentDB: string = "DocumentDB";
+  public static DocumentDB: string = "DocumentDB";
-  public static Graph: string = "Graph";
+  public static Graph: string = "Graph";
-  public static MongoDB: string = "MongoDB";
+  public static MongoDB: string = "MongoDB";
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
+  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
-  public static Table: string = "Table";
+  public static Table: string = "Table";
-  public static Cassandra: string = "Cassandra";
+  public static Cassandra: string = "Cassandra";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
+  public static Default: string = DefaultAccountExperience.DocumentDB;
-}
+}
-
+
-export class CapabilityNames {
+export class CapabilityNames {
-  public static EnableTable: string = "EnableTable";
+  public static EnableTable: string = "EnableTable";
-  public static EnableGremlin: string = "EnableGremlin";
+  public static EnableGremlin: string = "EnableGremlin";
-  public static EnableCassandra: string = "EnableCassandra";
+  public static EnableCassandra: string = "EnableCassandra";
-  public static EnableAutoScale: string = "EnableAutoScale";
+  public static EnableAutoScale: string = "EnableAutoScale";
-  public static readonly EnableNotebooks: string = "EnableNotebooks";
+  public static readonly EnableNotebooks: string = "EnableNotebooks";
-  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
+  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
-  public static readonly EnableMongo: string = "EnableMongo";
+  public static readonly EnableMongo: string = "EnableMongo";
-  public static readonly EnableServerless: string = "EnableServerless";
+  public static readonly EnableServerless: string = "EnableServerless";
-}
+}
-
+
-export class Features {
+export class Features {
-  public static readonly cosmosdb = "cosmosdb";
+  public static readonly cosmosdb = "cosmosdb";
-  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
-  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
-  public static readonly enableTtl = "enablettl";
+  public static readonly enableTtl = "enablettl";
-  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableGalleryPublish = "enablegallerypublish";
+  public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableLinkInjection = "enablelinkinjection";
+  public static readonly enableLinkInjection = "enablelinkinjection";
-  public static readonly enableSpark = "enablespark";
+  public static readonly enableSpark = "enablespark";
-  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly livyEndpoint = "livyendpoint";
-  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerUrl = "notebookserverurl";
-  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookServerToken = "notebookservertoken";
-  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly notebookBasePath = "notebookbasepath";
-  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
-  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
-  public static readonly ttl90Days = "ttl90days";
+  public static readonly ttl90Days = "ttl90days";
-  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableRightPanelV2 = "enablerightpanelv2";
-  public static readonly enableSchema = "enableschema";
+  public static readonly enableSchema = "enableschema";
-  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly enableSDKoperations = "enablesdkoperations";
-  public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly showMinRUSurvey = "showminrusurvey";
-  public static readonly selfServeType = "selfservetype";
+}
-}
+
-
+// flight names returned from the portal are always lowercase
-// flight names returned from the portal are always lowercase
+export class Flights {
-export class Flights {
+  public static readonly SettingsV2 = "settingsv2";
-  public static readonly SettingsV2 = "settingsv2";
+  public static readonly MongoIndexEditor = "mongoindexeditor";
-  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";
-export class AfecFeatures {
+  public static readonly StorageAnalytics = "storageanalytics-public-preview";
-  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({
-export class Spark {
+    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
-  public static readonly MaxWorkerCount = 10;
+    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
-  public static readonly SKUs: HashMap<string> = new HashMap({
+    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
+    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
+    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
+    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
+    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB 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 TagNames {
+
-  public static defaultExperience: string = "defaultExperience";
+export class MongoDBAccounts {
-}
+  public static protocol: string = "https";
-
+  public static defaultPort: string = "10255";
-export class MongoDBAccounts {
+}
-  public static protocol: string = "https";
+
-  public static defaultPort: string = "10255";
+export enum MongoBackendEndpointType {
-}
+  local,
-
+  remote
-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";
-// TODO: 435619 Add default endpoints per cloud and use regional only when available
+  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
-export class CassandraBackend {
+  public static readonly queryApi: string = "api/cassandra";
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
+  public static readonly guestQueryApi: string = "api/guest/cassandra";
-  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
+  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly queryApi: string = "api/cassandra";
+  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
-  public static readonly guestQueryApi: string = "api/guest/cassandra";
+  public static readonly schemaApi: string = "api/cassandra/schema";
-  public static readonly keysApi: string = "api/cassandra/keys";
+  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
-  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";
-export class Queries {
+  public static itemsPerPage: number = 100;
-  public static CustomPageOption: string = "custom";
+  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-  public static UnlimitedPageOption: string = "unlimited";
+
-  public static itemsPerPage: number = 100;
+  public static QueryEditorMinHeightRatio: number = 0.1;
-  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+  public static QueryEditorMaxHeightRatio: number = 0.4;
-
+  public static readonly DefaultMaxDegreeOfParallelism = 6;
-  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";
-export class SavedQueries {
+  public static readonly OfferThroughput: number = 400;
-  public static readonly CollectionName: string = "___Query";
+  public static readonly PartitionKeyProperty: string = "id";
-  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;
-export class DocumentsGridMetrics {
+  public static BufferHeight: number = 28;
-  public static DocumentsPerPage: number = 100;
+  public static SplitterMinWidth: number = 200;
-  public static IndividualRowHeight: number = 34;
+  public static SplitterMaxWidth: number = 360;
-  public static BufferHeight: number = 28;
+
-  public static SplitterMinWidth: number = 200;
+  public static DocumentEditorMinWidthRatio: number = 0.2;
-  public static SplitterMaxWidth: number = 360;
+  public static DocumentEditorMaxWidthRatio: number = 0.4;
-
+}
-  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;
-export class ExplorerMetrics {
+  public static CollapsedResourceTreeWidth: number = 36;
-  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 SplitterMetrics {
+
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
+export class Areas {
-}
+  public static ResourceTree: string = "Resource Tree";
-
+  public static ContextualPane: string = "Contextual Pane";
-export class Areas {
+  public static Tab: string = "Tab";
-  public static ResourceTree: string = "Resource Tree";
+  public static ShareDialog: string = "Share Access Dialog";
-  public static ContextualPane: string = "Contextual Pane";
+  public static Notebook: string = "Notebook";
-  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";
-export class HttpHeaders {
+  public static authorization: string = "authorization";
-  public static activityId: string = "x-ms-activity-id";
+  public static collectionIndexTransformationProgress: string =
-  public static apiType: string = "x-ms-cosmos-apitype";
+    "x-ms-documentdb-collection-index-transformation-progress";
-  public static authorization: string = "authorization";
+  public static continuation: string = "x-ms-continuation";
-  public static collectionIndexTransformationProgress: string =
+  public static correlationRequestId: string = "x-ms-correlation-request-id";
-    "x-ms-documentdb-collection-index-transformation-progress";
+  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
-  public static continuation: string = "x-ms-continuation";
+  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
-  public static correlationRequestId: string = "x-ms-correlation-request-id";
+  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
-  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
+  public static connectionString: string = "x-ms-connection-string";
-  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
+  public static msDate: string = "x-ms-date";
-  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
+  public static location: string = "Location";
-  public static connectionString: string = "x-ms-connection-string";
+  public static contentType: string = "Content-Type";
-  public static msDate: string = "x-ms-date";
+  public static offerReplacePending: string = "x-ms-offer-replace-pending";
-  public static location: string = "Location";
+  public static user: string = "x-ms-user";
-  public static contentType: string = "Content-Type";
+  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
-  public static offerReplacePending: string = "x-ms-offer-replace-pending";
+  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
-  public static user: string = "x-ms-user";
+  public static requestCharge: string = "x-ms-request-charge";
-  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
+  public static resourceQuota: string = "x-ms-resource-quota";
-  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
+  public static resourceUsage: string = "x-ms-resource-usage";
-  public static requestCharge: string = "x-ms-request-charge";
+  public static retryAfterMs: string = "x-ms-retry-after-ms";
-  public static resourceQuota: string = "x-ms-resource-quota";
+  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
-  public static resourceUsage: string = "x-ms-resource-usage";
+  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
-  public static retryAfterMs: string = "x-ms-retry-after-ms";
+  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
-  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
+  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
-  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+  public static autoPilotThroughput = "autoscaleSettings";
-  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
-  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+  public static partitionKey: string = "x-ms-documentdb-partitionkey";
-  public static autoPilotThroughput = "autoscaleSettings";
+  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
-  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-  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;
-export class ApiType {
+  public static readonly Gremlin: number = 2;
-  // Mapped to hexadecimal values in the backend
+  public static readonly Cassandra: number = 4;
-  public static readonly MongoDB: number = 1;
+  public static readonly Table: number = 8;
-  public static readonly Gremlin: number = 2;
+  public static readonly SQL: number = 16;
-  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;
-export class HttpStatusCodes {
+  public static readonly Accepted: number = 202;
-  public static readonly OK: number = 200;
+  public static readonly NoContent: number = 204;
-  public static readonly Created: number = 201;
+  public static readonly NotModified: number = 304;
-  public static readonly Accepted: number = 202;
+  public static readonly Unauthorized: number = 401;
-  public static readonly NoContent: number = 204;
+  public static readonly Forbidden: number = 403;
-  public static readonly NotModified: number = 304;
+  public static readonly NotFound: number = 404;
-  public static readonly Unauthorized: number = 401;
+  public static readonly TooManyRequests: number = 429;
-  public static readonly Forbidden: number = 403;
+  public static readonly Conflict: number = 409;
-  public static readonly NotFound: number = 404;
+
-  public static readonly TooManyRequests: number = 429;
+  public static readonly InternalServerError: number = 500;
-  public static readonly Conflict: number = 409;
+  public static readonly BadGateway: number = 502;
-
+  public static readonly ServiceUnavailable: number = 503;
-  public static readonly InternalServerError: number = 500;
+  public static readonly GatewayTimeout: number = 504;
-  public static readonly BadGateway: number = 502;
+
-  public static readonly ServiceUnavailable: number = 503;
+  public static readonly RetryableStatusCodes: number[] = [
-  public static readonly GatewayTimeout: number = 504;
+    HttpStatusCodes.TooManyRequests,
-
+    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
-  public static readonly RetryableStatusCodes: number[] = [
+    HttpStatusCodes.BadGateway,
-    HttpStatusCodes.TooManyRequests,
+    HttpStatusCodes.ServiceUnavailable,
-    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+    HttpStatusCodes.GatewayTimeout
-    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";
-export class Urls {
+  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
-  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
-  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}";
-export class HashRoutePrefixes {
+  public static sprocHash: string = "/sprocs/";
-  public static databases: string = "/dbs/{db_id}";
+  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
-  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
+  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
-  public static sprocHash: string = "/sprocs/";
+  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
-  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
+
-  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
+  public static databasesWithId(databaseId: string): string {
-  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
+    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
-
+  }
-  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);
-
+
-  public static collectionsWithIds(databaseId: string, collectionId: string): string {
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
-    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,
-  public static sprocWithIds(
+    sprocId: string,
-    databaseId: string,
+    stripFirstSlash: boolean = true
-    collectionId: string,
+  ): string {
-    sprocId: string,
+    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
-    stripFirstSlash: boolean = true
+
-  ): string {
+    const transformedSprocRoute: string = transformedDatabasePrefix
-    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
+      .replace("{coll_id}", collectionId)
-
+      .replace("{sproc_id}", sprocId);
-    const transformedSprocRoute: string = transformedDatabasePrefix
+    if (!!stripFirstSlash) {
-      .replace("{coll_id}", collectionId)
+      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
-      .replace("{sproc_id}", sprocId);
+    }
-    if (!!stripFirstSlash) {
+
-      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+    return transformedSprocRoute;
-    }
+  }
-
+
-    return transformedSprocRoute;
+  public static conflictsWithIds(databaseId: string, collectionId: string) {
-  }
+    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
-
+
-  public static conflictsWithIds(databaseId: string, collectionId: string) {
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
-    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);
-
+
-  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
+    return transformedDatabasePrefix
-    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
+      .replace("{coll_id}", collectionId)
-
+      .replace("{doc_id}", docId)
-    return transformedDatabasePrefix
+      .replace("/", ""); // strip the first slash since hasher adds it
-      .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 ConfigurationOverridesValues {
+
-  public static IsBsonSchemaV2: string = "true";
+export class KeyCodes {
-}
+  public static Space: number = 32;
-
+  public static Enter: number = 13;
-export class KeyCodes {
+  public static Escape: number = 27;
-  public static Space: number = 32;
+  public static UpArrow: number = 38;
-  public static Enter: number = 13;
+  public static DownArrow: number = 40;
-  public static Escape: number = 27;
+  public static LeftArrow: number = 37;
-  public static UpArrow: number = 38;
+  public static RightArrow: number = 39;
-  public static DownArrow: number = 40;
+  public static Tab: number = 9;
-  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 = " ";
-// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+  public static readonly Enter = "Enter";
-export class NormalizedEventKey {
+  public static readonly Escape = "Escape";
-  public static readonly Space = " ";
+  public static readonly UpArrow = "ArrowUp";
-  public static readonly Enter = "Enter";
+  public static readonly DownArrow = "ArrowDown";
-  public static readonly Escape = "Escape";
+  public static readonly LeftArrow = "ArrowLeft";
-  public static readonly UpArrow = "ArrowUp";
+  public static readonly RightArrow = "ArrowRight";
-  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}";
-export class TryCosmosExperience {
+  public static collectionsPerAccount: number = 3;
-  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
+  public static maxRU: number = 5000;
-  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
+  public static defaultRU: number = 3000;
-  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 class OfferVersions {
+}
-  public static V1: string = "V1";
+
-  public static V2: string = "V2";
+export enum ConflictOperationType {
-}
+  Replace = "replace",
-
+  Create = "create",
-export enum ConflictOperationType {
+  Delete = "delete"
-  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==";
-export const EmulatorMasterKey =
+
-  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
+
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
+export class Notebook {
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
+  public static readonly defaultBasePath = "./notebooks";
-
+  public static readonly heartbeatDelayMs = 5000;
-export class Notebook {
+  public static readonly kernelRestartInitialDelayMs = 1000;
-  public static readonly defaultBasePath = "./notebooks";
+  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly heartbeatDelayMs = 5000;
+  public static readonly autoSaveIntervalMs = 120000;
-  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 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;
-export class AnalyticalStorageTtl {
+  public static readonly Disabled: number = 0;
-  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";
-export class TerminalQueryParams {
+  public static readonly Token = "token";
-  public static readonly Terminal = "terminal";
+  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly Server = "server";
+  public static readonly TerminalEndpoint = "terminalEndpoint";
-  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 { getCommonQueryOptions } from "./DataAccessUtilityBase";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-
+
-describe("getCommonQueryOptions", () => {
+describe("getCommonQueryOptions", () => {
-  it("builds the correct default options objects", () => {
+  it("builds the correct default options objects", () => {
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
+  });
-  it("reads from localStorage", () => {
+  it("reads from localStorage", () => {
-    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
+    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
+    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
+    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 => {
+export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
-  const offerDefinition: SDKOfferDefinition | undefined = offerResponse?.resource;
+  const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
  if (!offerDefinition) {
    return undefined;
  }
  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 id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
-    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+    return queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
      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)
      .then(
-        (results: ViewModels.QueryResults) => {
+        (queryIterator: QueryIterator<ItemDefinition & Resource>) => {
-          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
+          const fetchQueries = (firstItemIndex: number): Q.Promise<ViewModels.QueryResults> =>
-            if (!document) {
+            queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex, options);
-              return undefined;
+          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 splitter: HTMLElement;
-  public leftSide!: HTMLElement;
+  public leftSide: HTMLElement;
-  public lastX!: number;
+  public lastX: number;
-  public lastWidth!: 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 = document.getElementById(this.splitterId);
-      this.splitter = <HTMLElement>document.getElementById(this.splitterId);
+    this.leftSide = document.getElementById(this.leftSideId);
-      this.leftSide = <HTMLElement>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;
+  autoscaleMaxThroughput: number;
-  manualThroughput: number | undefined;
+  manualThroughput: number;
-  minimumThroughput: number | undefined;
+  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"
+          key="feature.enableLinkInjection"
-          label="Self serve feature"
+          label="Enable Injecting Notebook Viewer Link into the first cell"
          onChange={[Function]}
        />
        <StyledCheckboxBase
          checked={false}
-          key="feature.enableLinkInjection"
+          key="feature.canexceedmaximumvalue"
-          label="Enable Injecting Notebook Viewer Link into the first cell"
+          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;
+  inputValue: string;
-  selection: Item | null;
+  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) {
-        if (!!this.editor) {
+        this.editor.getModel().setValue(newValue);
-          this.editor.getModel().setValue(newValue);
+      } else {
-        } else {
+        this.createEditor(newValue, this.configureEditor.bind(this));
          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 || this.collection.partitionKey.systemKey);
+      (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,
+  renderMongoIndexTransformationRefreshMessage
  ManualEstimatedSpendingDisplayProps,
  PriceBreakdown,
  getRuPriceBreakdown
 } 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,
+  SpinnerSize
  DetailsList,
  IColumn,
  SelectionMode,
  DetailsListLayoutMode,
  IDetailsRowProps,
  DetailsRow,
  IDetailsColumnStyles
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
-export interface EstimatedSpendingDisplayProps {
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
  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 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> = {
+export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop: "5px" } };
  root: { marginTop: "5px", backgroundColor: "white" },
  text: { fontSize: 14 }
 };
 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,
+  regions: number,
-  isMultimaster: boolean,
+  multimaster: boolean
-  isAutoscale: boolean
+): JSX.Element => {
-): PriceBreakdown => {
+  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
-  const hourlyPrice: number = computeRUUsagePriceHourly({
+  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-    serverId: serverId,
+  const currency: string = getPriceCurrency(serverId);
-    requestUnits: throughput,
+  const currencySign: string = getCurrencySign(serverId);
-    numberOfRegions: numberOfRegions,
+  const pricePerRu =
-    multimasterEnabled: isMultimaster,
+    getAutoscalePricePerRu(serverId, getMultimasterMultiplier(regions, multimaster)) *
-    isAutoscale: isAutoscale
+    getMultimasterMultiplier(regions, multimaster);
-  });
+
-  const basePricePerRu: number = isAutoscale
+  return (
-    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    <Text id="autoscaleSpendElement">
-    : getPricePerRu(serverId);
+      Estimated monthly cost ({currency}) is{" "}
-  return {
+      <b>
-    hourlyPrice: hourlyPrice,
+        {currencySign}
-    dailyPrice: hourlyPrice * 24,
+        {calculateEstimateNumber(monthlyPrice / 10)}
-    monthlyPrice: hourlyPrice * hoursInAMonth,
+        {` - `}
-    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+        {currencySign}
-    currency: getPriceCurrency(serverId),
+        {calculateEstimateNumber(monthlyPrice)}{" "}
-    currencySign: getCurrencySign(serverId)
+      </b>
-  };
+      ({"regions: "} {regions}, {throughput / 10} - {throughput} RU/s, {currencySign}
      {pricePerRu}/RU)
    </Text>
  );
 };
-export const getEstimatedSpendingElement = (
+export const getEstimatedSpendElement = (
  estimatedSpendingColumns: IColumn[],
  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
  throughput: number,
-  numberOfRegions: number,
+  serverId: string,
-  priceBreakdown: PriceBreakdown,
+  regions: number,
-  isAutoscale: boolean
+  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}>
+    <Text id="throughputSpendElement">
-      <DetailsList
+      Estimated cost ({currency}):{" "}
-        disableSelectionZone
+      <b>
-        items={estimatedSpendingItems}
+        {currencySign}
-        columns={estimatedSpendingColumns}
+        {calculateEstimateNumber(hourlyPrice)} hourly {` / `}
-        selectionMode={SelectionMode.none}
+        {currencySign}
-        layoutMode={DetailsListLayoutMode.justified}
+        {calculateEstimateNumber(dailyPrice)} daily {` / `}
-        onRenderRow={onRenderRow}
+        {currencySign}
-      />
+        {calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      <Text id="throughputSpendElement">
+      </b>
-        ({"regions: "} {numberOfRegions}, {ruRange}
+      ({"regions: "} {regions}, {throughput}RU/s, {currencySign}
-        {throughput} RU/s, {priceBreakdown.currencySign}
+      {pricePerRu}/RU)
-        {priceBreakdown.pricePerRu}/RU)
+    </Text>
      </Text>
      <Text>
        <em>{estimatedCostDisclaimer}</em>
      </Text>
    </Stack>
  );
 };
@@ -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,
+  infoAndToolTipTextStyle
  onRenderRow
 } 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}
+      serverId={configContext.serverId}
      collectionName={this.props.collection.id()}
      serverId={this.props.container.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
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
          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,
+  manualToAutoscaleDisclaimerElement
  saveThroughputWarningMessage,
  ManualEstimatedSpendingDisplayProps,
  AutoscaleEstimatedSpendingDisplayProps,
  PriceBreakdown,
  getRuPriceBreakdown,
  transparentDetailsHeaderStyle
 } from "../../SettingsRenderUtils";
 import {
  Text,
@@ -28,8 +23,7 @@ import {
  Label,
  Link,
  MessageBar,
-  FontIcon,
+  MessageBarType
  IColumn
 } 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,
+      spendAckChecked: this.props.spendAckChecked
      exceedFreeTierThroughput:
        this.props.isFreeTierAccount && !this.props.isAutoPilotSelected && this.props.throughput > 400
    };
    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,
+        multimaster
        isDirty ? this.props.throughput : undefined
      );
    } else {
-      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
+      estimatedSpend = getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughputBaseline,
+        this.props.maxAutoPilotThroughput,
        serverId,
        regions,
-        multimaster,
+        multimaster
        isDirty ? this.props.maxAutoPilotThroughput : undefined
      );
    }
    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 => {
+  ): void => this.props.onAutoPilotSelected(option.key === "true");
    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"
    });
  };
  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
+          <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
            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
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
          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={
+      messageBarType={5}
        Object {
          "className": "messageBarInfoIcon",
          "iconName": "InfoSolid",
        }
      }
      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
+    <Text
-      styles={
+      id="throughputSpendElement"
        Object {
          "root": Object {
            "width": 600,
          },
        }
      }
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
-      <StyledWithViewportComponent
+      Estimated cost (
-        columns={
+      USD
-          Array [
+      ):
-            Object {
+       
-              "fieldName": "costType",
+      <b>
              "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, 
        $
-        0.00008
+        0.0080
-        /RU)
+         hourly 
-      </Text>
+         / 
-      <Text>
+        $
-        <em>
+        0.19
-          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+         daily 
-        </em>
+         / 
-      </Text>
+        $
-    </Stack>
+        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
+    <Text
-      styles={
+      id="throughputSpendElement"
        Object {
          "root": Object {
            "width": 600,
          },
        }
      }
      tokens={
        Object {
          "childrenGap": 10,
        }
      }
    >
-      <StyledWithViewportComponent
+      Estimated cost (
-        columns={
+      USD
-          Array [
+      ):
-            Object {
+       
-              "fieldName": "costType",
+      <b>
              "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, 
        $
-        0.00008
+        0.0080
-        /RU)
+         hourly 
-      </Text>
+         / 
-      <Text>
+        $
-        <em>
+        0.19
-          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+         daily 
-        </em>
+         / 
-      </Text>
+        $
-    </Stack>
+        5.84
-    <br />
+         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
+  <Text
-    styles={
+    id="throughputSpendElement"
      Object {
        "root": Object {
          "width": 600,
        },
      }
    }
    tokens={
      Object {
        "childrenGap": 10,
      }
    }
  >
-    <StyledWithViewportComponent
+    Estimated cost (
-      columns={
+    RMB
-        Array [
+    ):
-          Object {
+     
-            "fieldName": "costType",
+    <b>
            "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, 
      ¥
-      0.00051
+      1.02
-      /RU)
+       hourly 
-    </Text>
+       / 
-    <Text>
+      ¥
-      <em>
+      24.48
-        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+       daily 
-      </em>
+       / 
-    </Text>
+      ¥
-  </Stack>
+      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
+            inputType: "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'"
          }
        },
        {
@@ -78,11 +64,11 @@ describe("SmartUiComponent", () => {
          input: {
            label: "Database",
            dataFieldName: "database",
-            type: "object",
+            type: "enum",
            choices: [
-              { label: "Database 1", key: "db1" },
+              { label: "Database 1", key: "db1", value: "database1" },
-              { label: "Database 2", key: "db2" },
+              { label: "Database 2", key: "db2", value: "database2" },
-              { label: "Database 3", key: "db3" }
+              { label: "Database 3", key: "db3", value: "database3" }
            ],
            defaultKey: "db2"
          }
@@ -91,11 +77,12 @@ describe("SmartUiComponent", () => {
    }
  };
-  it("should render", async () => {
+  const exampleCallbacks = (newValues: Map<string, InputType>): void => {
-    const wrapper = shallow(
+    console.log("New values:", newValues);
-      <SmartUiComponent descriptor={exampleData} currentValues={new Map()} onInputChange={undefined} />
+  };
-    );
+
-    await new Promise(resolve => setTimeout(resolve, 0));
+  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 {
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  Spinner = "Spinner",
+export type EnumItem = { label: string; key: string; value: any };
-  Slider = "Slider"
+
 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 {
+export type AnyInput = NumberInput | BooleanInput | StringInput | EnumInput;
  label: string;
  dataFieldName: string;
  type: InputTypeValue;
  placeholder?: string;
  errorMessage?: string;
 }
-/**
+export interface Node {
 * 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 {
  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;
+  descriptor: Descriptor;
-  currentValues: Map<string, InputType>;
+  onChange: (newValues: Map<string, InputType>) => void;
  onInputChange: (input: AnyInput, newValue: 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">
-          <Link href={info.link.href} target="_blank">
+          {info.link.text}
-            {info.link.text}
+        </Link>
          </Link>
        )}
      </MessageBar>
    );
  }
-  private renderTextInput(input: StringInput): JSX.Element {
+  private onInputChange = (newValue: string | number | boolean, dataFieldName: string) => {
-    const value = this.props.currentValues.get(input.dataFieldName) as 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
+        <div>
-          id={`${input.dataFieldName}-textBox-input`}
+          <TextField
-          label={input.label}
+            id={`${input.dataFieldName}-input`}
-          type="text"
+            label={input.label}
-          value={value}
+            type="text"
-          placeholder={input.placeholder}
+            value={input.defaultValue}
-          onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
+            placeholder={input.placeholder}
-          styles={{
+            onChange={(_, newValue) => this.onInputChange(newValue, input.dataFieldName)}
-            subComponentStyles: {
+            styles={{
-              label: {
+              subComponentStyles: {
-                root: {
+                label: {
-                  ...SmartUiComponent.labelStyle,
+                  root: {
-                  fontWeight: 600
+                    ...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 { label, min, max, defaultValue, dataFieldName, step } = input;
-    const props = {
+    const props = { label, min, max, ariaLabel: label, step };
      label: label,
      min: min,
      max: max,
      ariaLabel: label,
      step: step
    };
-    const value = this.props.currentValues.get(dataFieldName) as number;
+    if (input.inputType === "spin") {
    if (input.uiType === UiType.Spinner) {
      return (
-        <>
+        <div>
          <SpinButton
            {...props}
-            id={`${input.dataFieldName}-spinner-input`}
+            defaultValue={defaultValue.toString()}
-            value={value?.toString()}
+            onValidate={newValue => this.onValidate(newValue, min, max, dataFieldName)}
-            onValidate={newValue => this.onValidate(input, newValue, props.min, props.max)}
+            onIncrement={newValue => this.onIncrement(newValue, step, max, dataFieldName)}
-            onIncrement={newValue => this.onIncrement(input, newValue, props.step, props.max)}
+            onDecrement={newValue => this.onDecrement(newValue, step, min, dataFieldName)}
            onDecrement={newValue => this.onDecrement(input, newValue, props.step, props.min)}
            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 { dataFieldName } = input;
    const selectedKey = value || input.defaultValue ? "true" : "false";
    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 {
+  private renderEnumInput(input: EnumInput): JSX.Element {
-    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
+    const { label, defaultKey, dataFieldName, choices, placeholder } = input;
    const value = this.props.currentValues.get(dataFieldName) as string;
    return (
      <Dropdown
        id={`${input.dataFieldName}-dropown-input`}
        label={label}
-        selectedKey={value ? value : defaultKey}
+        selectedKey={
-        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
+          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":
+      case "enum":
-        return this.renderChoiceInput(input as ChoiceInput);
+        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)}
-          {node.info && this.renderInfo(node.info as Info)}
+        {node.input && this.renderInput(node.input)}
          {node.input && this.renderInput(node.input)}
        </Stack.Item>
        {node.children && node.children.map(child => <div key={child.id}>{this.renderNode(child)}</div>)}
      </Stack>
    );
  }
  render(): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 20 };
+    return <>{this.renderNode(this.props.descriptor.root)}</>;
    return (
      <Stack tokens={containerStackTokens} styles={{ root: { width: 400, padding: 10 } }}>
        {this.renderNode(this.props.descriptor.root)}
      </Stack>
    );
  }
 }
--- 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
+<Fragment>
  styles={
    Object {
      "root": Object {
        "padding": 10,
        "width": 400,
      },
    }
  }
  tokens={
    Object {
      "childrenGap": 20,
    }
  }
 >
  <Stack
    className="widgetRendererContainer"
    tokens={
      Object {
-        "childrenGap": 15,
+        "childrenGap": 10,
      }
    }
  >
-    <StackItem>
+    <StyledMessageBarBase>
-      <StyledMessageBarBase>
+      Start at $24/mo per database
-        Start at $24/mo per database
+      <StyledLinkBase
-        <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
-          href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
-          target="_blank"
+      >
-        >
+        More Details
-          More Details
+      </StyledLinkBase>
-        </StyledLinkBase>
+    </StyledMessageBarBase>
      </StyledMessageBarBase>
    </StackItem>
    <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>
+        <StyledSliderBase
-          <div
+          ariaLabel="Throughput (Slider)"
-            id="throughput2-slider-input"
+          defaultValue={400}
-          >
+          label="Throughput (Slider)"
-            <StyledSliderBase
+          max={500}
-              ariaLabel="Throughput (Slider)"
+          min={400}
-              label="Throughput (Slider)"
+          onChange={[Function]}
-              max={500}
+          step={10}
-              min={400}
+          styles={
-              onChange={[Function]}
+            Object {
-              step={10}
+              "titleLabel": Object {
-              styles={
+                "color": "#393939",
-                Object {
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "titleLabel": Object {
+                "fontSize": 12,
-                    "color": "#393939",
+                "fontWeight": 600,
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+              },
-                    "fontSize": 12,
+              "valueLabel": Object {
-                    "fontWeight": 600,
+                "color": "#393939",
-                  },
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "valueLabel": Object {
+                "fontSize": 12,
-                    "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,
          }
-        }
+        />
      >
        <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
-          <div
+          className="stringInputContainer"
-            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
+            <Text
-              className="inputLabelContainer"
+              className="inputLabel"
              nowrap={true}
              variant="small"
            >
-              <Text
+              Analytical Store
-                className="inputLabel"
+            </Text>
                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"
            />
          </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
-          <StyledWithResponsiveMode
+          label="Database"
-            id="database-dropown-input"
+          onChange={[Function]}
-            label="Database"
+          options={
-            onChange={[Function]}
+            Array [
            options={
              Array [
                Object {
                  "key": "db1",
                  "text": "Database 1",
                },
                Object {
                  "key": "db2",
                  "text": "Database 2",
                },
                Object {
                  "key": "db3",
                  "text": "Database 3",
                },
              ]
            }
            selectedKey="db2"
            styles={
              Object {
-                "dropdown": Object {
+                "key": "db1",
-                  "color": "#393939",
+                "text": "database1",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+              },
-                  "fontSize": 12,
+              Object {
-                },
+                "key": "db2",
-                "label": Object {
+                "text": "database2",
-                  "color": "#393939",
+              },
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+              Object {
-                  "fontSize": 12,
+                "key": "db3",
-                  "fontWeight": 600,
+                "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(doc => {
-        this.sampleDataFile.data.map(async doc => {
+        const subPromise = createDocument(collection, doc);
-          try {
+        subPromise.catch(reason => NotificationConsoleUtils.logConsoleError(reason));
-            await createDocument(collection, doc);
+        promises.push(subPromise);
-          } catch (error) {
+      });
-            NotificationConsoleUtils.logConsoleError(error);
+      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 ||
+      userContext === Constants.ServerIds.blackforest ||
-      this.serverId() === Constants.ServerIds.fairfax ||
+      userContext === Constants.ServerIds.fairfax ||
-      this.serverId() === Constants.ServerIds.mooncake
+      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.clear();
    this.cache = {};
    this.totalElements = 0;
  }
  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;
-      this.totalElements -= this.cache[oldKey].length;
+    delete this.cache[oldKey];
      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/DocumentClientUtilityBase");
 jest.mock("../../../Common/dataAccess/queryDocumentsPage");
 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 { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
 import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 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 { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
 import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 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[]> {
+  public executeNonPagedDocDbQuery(query: string): Q.Promise<DataModels.DocumentId[]> {
-    try {
+    // TODO maxItemCount: this reduces throttling, but won't cap the # of results
-      // TODO maxItemCount: this reduces throttling, but won't cap the # of results
+    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+      maxItemCount: GraphExplorer.PAGE_ALL,
-        this.props.databaseId,
+      enableCrossPartitionQuery:
-        this.props.collectionId,
+        StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.IsCrossPartitionQueryEnabled) ===
-        query,
+        "true"
-        {
+    }).then(
-          maxItemCount: GraphExplorer.PAGE_ALL,
+      (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          enableCrossPartitionQuery:
+        return iterator.fetchNext().then(response => response.resources);
-            StorageUtility.LocalStorageUtility.getEntryString(
+      },
-              StorageUtility.StorageKey.IsCrossPartitionQueryEnabled
+      (reason: any) => {
-            ) === "true"
+        GraphExplorer.reportToConsole(
-        } as FeedOptions
+          ConsoleDataType.Error,
-      );
+          `Failed to execute non-paged query ${query}. Reason:${reason}`,
-      const response = await iterator.fetchNext();
+          reason
-
+        );
-      return response?.resources;
+        return null;
-    } catch (error) {
+      }
-      GraphExplorer.reportToConsole(
+    );
        ConsoleDataType.Error,
        `Failed to execute non-paged query ${query}. Reason:${error}`,
        error
      );
      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 backendPromise;
      let result: UserQueryResult;
      if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
        result = await this.executeDocDbGVQuery();
      } else {
        result = await this.executeGremlinQuery(query);
      }
-      this.queryTotalRequestCharge = result.requestCharge;
+    if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
-    } catch (error) {
+      backendPromise = this.executeDocDbGVQuery();
-      const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
+    } else {
-      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+      backendPromise = this.executeGremlinQuery(query);
      this.setState({
        filterQueryError: errorMsg
      });
    }
    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 {
+    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+      maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
-        this.props.databaseId,
+      enableCrossPartitionQuery: LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-        this.props.collectionId,
+    })
-        query,
+      .then(
-        {
+        (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          this.currentDocDBQueryInfo = {
-          enableCrossPartitionQuery:
+            iterator: iterator,
-            LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+            index: 0,
-        } as FeedOptions
+            query: query
-      );
+          };
-      this.currentDocDBQueryInfo = {
+        },
-        iterator: iterator,
+        (reason: any) => {
-        index: 0,
+          GraphExplorer.reportToConsole(
-        query: query
+            ConsoleDataType.Error,
-      };
+            `Failed to execute CosmosDB query: ${query} reason:${reason}`
-      return await this.loadMoreRootNodes();
+          );
-    } catch (error) {
+        }
-      GraphExplorer.reportToConsole(
+      )
-        ConsoleDataType.Error,
+      .then(() => this.loadMoreRootNodes());
        `Failed to execute CosmosDB query: ${query} reason:${error}`
      );
      throw error;
    }
  }
-  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 {
+    return queryDocumentsPage(
-      const results: ViewModels.QueryResults = await queryDocumentsPage(
+      this.props.collectionId,
-        this.props.collectionId,
+      this.currentDocDBQueryInfo.iterator,
-        this.currentDocDBQueryInfo.iterator,
+      this.currentDocDBQueryInfo.index,
-        this.currentDocDBQueryInfo.index
+      {
-      );
+        enableCrossPartitionQuery:
-
+          LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-      GraphExplorer.clearConsoleProgress(id);
+      }
-      this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
+    )
-      this.setState({ hasMoreRoots: results.hasMoreResults });
+      .then((results: ViewModels.QueryResults) => {
-      RU = results.requestCharge.toString();
+        GraphExplorer.clearConsoleProgress(id);
-      GraphExplorer.reportToConsole(
+        this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
-        ConsoleDataType.Info,
+        this.setState({ hasMoreRoots: results.hasMoreResults });
-        `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
+        RU = results.requestCharge.toString();
-      );
+        GraphExplorer.reportToConsole(
-      const pkIds: string[] = (results.documents || []).map((item: DataModels.DocumentId) =>
+          ConsoleDataType.Info,
-        GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty)
+          `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
-      );
+        );
-
+        const documents = results.documents || [];
-      const arg = pkIds.join(",");
+        return documents.map(
-      await this.executeGremlinQuery(`g.V(${arg})`);
+          (item: DataModels.DocumentId) => {
-
+            return GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty);
-      return { requestCharge: RU };
+          },
-    } catch (error) {
+          (reason: any) => {
-      GraphExplorer.clearConsoleProgress(id);
+            // Failure
-      const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${getErrorMessage(error)}`;
+            GraphExplorer.clearConsoleProgress(id);
-      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+            const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${reason}`;
-      this.setState({
+            GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-        filterQueryError: errorMsg
+            this.setState({
-      });
+              filterQueryError: errorMsg
-      this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
+            });
-      throw error;
+            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 headerTimeoutId: number;
-  private prevHeaderStatus: string | null;
+  private prevHeaderStatus: string;
-  private consoleHeaderElement?: HTMLElement;
+  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);
-      const items = await this.fetchNotebookFiles(parentDirPath);
+    return items.some(value => FileSystemUtil.isPathEqual(value.path, filepath));
      return items.some(value => FileSystemUtil.isPathEqual(value.path, filepath));
    }
    return false;
  }
  /**
@@ -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(),
+                                                                                                                  showAutoPilot: !isFreeTierAccount()
                                                                                                                  freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
                                                                                                              }">
              </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(),
+                                              showAutoPilot: !isFixedStorageSelected()
                                              freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
                                            }">
                  </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(
+      return PricingUtils.getUpsellMessage(configContext.serverId, this.isFreeTierAccount());
        this.container.serverId(),
        this.isFreeTierAccount(),
        this.container.isFirstResourceCreated(),
        this.container.defaultExperience(),
        true
      );
    });
    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.isAutoPilotSelected(false);
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    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(),
+                                              showAutoPilot: !isFreeTierAccount()
                                              freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
                                          }">
              </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(
+      return PricingUtils.getUpsellMessage(configContext.serverId, this.isFreeTierAccount());
        this.container.serverId(),
        this.isFreeTierAccount(),
        this.container.isFirstResourceCreated(),
        this.container.defaultExperience(),
        false
      );
    });
    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.isAutoPilotSelected(false);
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    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);
+        const errorMessage = getErrorMessage(error);
-        var errors = parsedErrors.map(error => {
+        this.queryErrorMessage(errorMessage);
          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);
        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(
+        promise = this.queryTablesTab.container.tableDataClient.queryDocuments(
-          this.queryTablesTab.container.tableDataClient.queryDocuments(
+          this.queryTablesTab.collection,
-            this.queryTablesTab.collection,
+          this.cqlQuery(),
-            this.cqlQuery(),
+          true,
-            true,
+          this.continuationToken
            this.continuationToken
          )
        );
      } else {
        let query = this.sqlQuery();
        if (this.queryTablesTab.container.isPreferredApiCassandra()) {
          query = this.cqlQuery();
        }
-        promise = Q(
+        promise = this.queryTablesTab.container.tableDataClient.queryDocuments(
-          this.queryTablesTab.container.tableDataClient.queryDocuments(this.queryTablesTab.collection, query, true)
+          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> {
+  ): Q.Promise<Entities.ITableEntity> {
-    try {
+    const deferred = Q.defer<Entities.ITableEntity>();
-      const newDocument = await updateDocument(
+
-        collection,
+    updateDocument(
-        originalDocument,
+      collection,
-        TableEntityProcessor.convertEntityToNewDocument(<Entities.ITableEntityForTablesAPI>entity)
+      originalDocument,
-      );
+      TableEntityProcessor.convertEntityToNewDocument(<Entities.ITableEntityForTablesAPI>entity)
-      return TableEntityProcessor.convertDocumentsToEntities([newDocument])[0];
+    ).then(
-    } catch (error) {
+      (newDocument: any) => {
-      handleError(error, "TablesAPIDataClient/updateDocument");
+        const newEntity = TableEntityProcessor.convertDocumentsToEntities([newDocument])[0];
-      throw error;
+        deferred.resolve(newEntity);
-    }
+      },
      reason => {
        deferred.reject(reason);
      }
    );
    return deferred.promise;
  }
-  public async queryDocuments(
+  public queryDocuments(
    collection: ViewModels.Collection,
    query: string
-  ): Promise<Entities.IListTableEntitiesResult> {
+  ): Q.Promise<Entities.IListTableEntitiesResult> {
-    try {
+    const deferred = Q.defer<Entities.IListTableEntitiesResult>();
      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);
-      return {
+    let options: any = {};
-        Results: entities,
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-        ContinuationToken: iterator.hasMoreResults(),
+    queryDocuments(collection.databaseId, collection.id(), query, options).then(
-        iterator: iterator
+      iterator => {
-      };
+        iterator
-    } catch (error) {
+          .fetchNext()
-      handleError(error, "TablesAPIDataClient/queryDocuments", "Query documents failed");
+          .then(response => response.resources)
-      throw error;
+          .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(
+  public deleteDocuments(collection: ViewModels.Collection, entitiesToDelete: Entities.ITableEntity[]): Q.Promise<any> {
-    collection: ViewModels.Collection,
+    let documentsToDelete: any[] = TableEntityProcessor.convertEntitiesToDocuments(
    entitiesToDelete: Entities.ITableEntity[]
  ): Promise<any> {
    const documentsToDelete: any[] = TableEntityProcessor.convertEntitiesToDocuments(
      <Entities.ITableEntityForTablesAPI[]>entitiesToDelete,
      collection
    );
-
+    let promiseArray: Q.Promise<any>[] = [];
-    await Promise.all(
+    documentsToDelete &&
-      documentsToDelete?.map(async document => {
+      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> {
+  ): Q.Promise<Entities.ITableEntity> {
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Updating row ${originalDocument.RowKey._}`);
+    const notificationId = NotificationConsoleUtils.logConsoleMessage(
-
+      ConsoleDataType.InProgress,
-    try {
+      `Updating row ${originalDocument.RowKey._}`
-      let whereSegment = " WHERE";
+    );
-      let keys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys.concat(
+    const deferred = Q.defer<Entities.ITableEntity>();
-        collection.cassandraKeys.clusteringKeys
+    let promiseArray: Q.Promise<any>[] = [];
-      );
+    let query = `UPDATE ${collection.databaseId}.${collection.id()}`;
-      for (let keyIndex in keys) {
+    let isChange: boolean = false;
-        const key = keys[keyIndex].property;
+    for (let property in newEntity) {
-        const keyType = keys[keyIndex].type;
+      if (!originalDocument[property] || newEntity[property]._.toString() !== originalDocument[property]._.toString()) {
-        whereSegment += this.isStringType(keyType)
+        if (this.isStringType(newEntity[property].$)) {
-          ? ` ${key} = '${newEntity[key]._}' AND`
+          query = `${query} SET ${property} = '${newEntity[property]._}',`;
-          : ` ${key} = ${newEntity[key]._} AND`;
+        } else {
-      }
+          query = `${query} SET ${property} = ${newEntity[property]._},`;
      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;
        }
        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> {
+  ): Q.Promise<Entities.IListTableEntitiesResult> {
-    const clearMessage =
+    let notificationId: string;
-      shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
+    if (shouldNotify) {
-    try {
+      notificationId = NotificationConsoleUtils.logConsoleMessage(
-      const authType = window.authType;
+        ConsoleDataType.InProgress,
-      const apiEndpoint: string =
+        `Querying rows for table ${collection.id()}`
-        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?.();
    }
    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(
+  public deleteDocuments(collection: ViewModels.Collection, entitiesToDelete: Entities.ITableEntity[]): Q.Promise<any> {
    collection: ViewModels.Collection,
    entitiesToDelete: Entities.ITableEntity[]
  ): Promise<any> {
    const query = `DELETE FROM ${collection.databaseId}.${collection.id()} WHERE `;
-    const partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
+    let promiseArray: Q.Promise<any>[] = [];
-
+    let partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
-    await Promise.all(
+    for (let i = 0, len = entitiesToDelete.length; i < len; i++) {
-      entitiesToDelete.map(async (currEntityToDelete: Entities.ITableEntity) => {
+      let currEntityToDelete: Entities.ITableEntity = entitiesToDelete[i];
-        const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting row ${currEntityToDelete.RowKey._}`);
+      let currQuery = query;
-        const partitionKeyValue = currEntityToDelete[partitionKeyProperty];
+      let partitionKeyValue = currEntityToDelete[partitionKeyProperty];
-        const currQuery =
+      if (partitionKeyValue._ != null && this.isStringType(partitionKeyValue.$)) {
-          query +
+        currQuery = `${currQuery}${partitionKeyProperty} = '${partitionKeyValue._}' AND `;
-          (this.isStringType(partitionKeyValue.$)
+      } else {
-            ? `${partitionKeyProperty} = '${partitionKeyValue._}'`
+        currQuery = `${currQuery}${partitionKeyProperty} = ${partitionKeyValue._} AND `;
-            : `${partitionKeyProperty} = ${partitionKeyValue._}`);
+      }
-
+      currQuery = currQuery.slice(0, currQuery.length - 5);
-        try {
+      const notificationId = NotificationConsoleUtils.logConsoleMessage(
-          await this.queryDocuments(collection, currQuery);
+        ConsoleDataType.InProgress,
-          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted row ${currEntityToDelete.RowKey._}`);
+        `Deleting row ${currEntityToDelete.RowKey._}`
-        } catch (error) {
+      );
-          handleError(error, "DeleteRowCassandra", `Error while deleting row ${currEntityToDelete.RowKey._}`);
+      promiseArray.push(
-          throw error;
+        this.queryDocuments(collection, currQuery)
-        } finally {
+          .then(
-          clearMessage();
+            () => {
-        }
+              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> {
+  public refreshDocumentsGrid(): Q.Promise<any> {
-    try {
+    // clear documents grid
-      // clear documents grid
+    this.conflictIds([]);
-      this.conflictIds([]);
+    return this.createIterator()
-      this._documentsIterator = this.createIterator();
+      .then(
-      await this.loadNextPage();
+        // reset iterator
-    } catch (error) {
+        iterator => {
-      window.alert(getErrorMessage(error));
+          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 {
+    let operationPromise: Q.Promise<any> = Q();
-      if (selectedConflict.operationType === Constants.ConflictOperationType.Replace) {
+    if (selectedConflict.operationType === Constants.ConflictOperationType.Replace) {
-        const documentContent = JSON.parse(this.selectedConflictContent());
+      const documentContent = JSON.parse(this.selectedConflictContent());
-        await updateDocument(
+      operationPromise = updateDocument(
-          this.collection,
+        this.collection,
-          selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty]),
+        selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty]),
-          documentContent
+        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
      );
    } 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 {
+    return deleteConflict(this.collection, selectedConflict)
-      await deleteConflict(this.collection, selectedConflict);
+      .then(
-      this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
+        () => {
-      this.selectedConflictContent("");
+          this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
-      this.selectedConflictCurrent("");
+          this.selectedConflictContent("");
-      this.selectedConflictId(null);
+          this.selectedConflictCurrent("");
-      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+          this.selectedConflictId(null);
-      TelemetryProcessor.traceSuccess(
+          this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-        Action.DeleteConflict,
+          TelemetryProcessor.traceSuccess(
-        {
+            Action.DeleteConflict,
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+            {
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          dataExplorerArea: Constants.Areas.Tab,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          tabTitle: this.tabTitle(),
+              dataExplorerArea: Constants.Areas.Tab,
-          conflictResourceType: selectedConflict.resourceType,
+              tabTitle: this.tabTitle(),
-          conflictOperationType: selectedConflict.operationType,
+              conflictResourceType: selectedConflict.resourceType,
-          conflictResourceId: selectedConflict.resourceId
+              conflictOperationType: selectedConflict.operationType,
              conflictResourceId: selectedConflict.resourceId
            },
            startKey
          );
        },
-        startKey
+        error => {
-      );
+          this.isExecutionError(true);
-    } catch (error) {
+          const errorMessage = getErrorMessage(error);
-      this.isExecutionError(true);
+          window.alert(errorMessage);
-      const errorMessage = getErrorMessage(error);
+          TelemetryProcessor.traceFailure(
-      window.alert(errorMessage);
+            Action.DeleteConflict,
-      TelemetryProcessor.traceFailure(
+            {
-        Action.DeleteConflict,
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-        {
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              dataExplorerArea: Constants.Areas.Tab,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              tabTitle: this.tabTitle(),
-          dataExplorerArea: Constants.Areas.Tab,
+              conflictResourceType: selectedConflict.resourceType,
-          tabTitle: this.tabTitle(),
+              conflictOperationType: selectedConflict.operationType,
-          conflictResourceType: selectedConflict.resourceType,
+              conflictResourceId: selectedConflict.resourceId,
-          conflictOperationType: selectedConflict.operationType,
+              error: errorMessage,
-          conflictResourceId: selectedConflict.resourceId,
+              errorStack: getErrorStack(error)
-          error: errorMessage,
+            },
-          errorStack: getErrorStack(error)
+            startKey
-        },
+          );
-        startKey
+        }
-      );
+      )
-    } finally {
+      .finally(() => this.isExecuting(false));
      this.isExecuting(false);
    }
  };
  public onDiscardClick = (): Q.Promise<any> => {
@@ -429,47 +445,60 @@ export default class ConflictsTab extends TabsBase {
    return Q();
  }
-  public onTabClick(): void {
+  public onTabClick(): Q.Promise<any> {
-    super.onTabClick();
+    return super.onTabClick().then(() => {
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
+      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
    });
  }
-  public async onActivate(): Promise<void> {
+  public onActivate(): Q.Promise<any> {
-    super.onActivate();
+    return super.onActivate().then(() => {
-
+      if (this._documentsIterator) {
-    if (!this._documentsIterator) {
+        return Q.resolve(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;
        }
      }
-    }
+
      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 = {
+    let options: any = {};
-      enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey()
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-    };
+    return queryConflicts(this.collection.databaseId, this.collection.id(), query, options);
    return queryConflicts(this.collection.databaseId, this.collection.id(), query, options as FeedOptions);
  }
  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,
+                    overrideWithProvisionedThroughputSettings: overrideWithProvisionedThroughputSettings
                    freeTierExceedThroughputWarning: freeTierExceedThroughputWarning
                 }"
      >
      </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> {
+  public onActivate(): Q.Promise<any> {
-    super.onActivate();
+    return super.onActivate().then(async () => {
-    this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
+      this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
-    await this.database.loadOffer();
+      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 {
+import { extractPartitionKey, PartitionKeyDefinition, QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
  extractPartitionKey,
  PartitionKeyDefinition,
  QueryIterator,
  ItemDefinition,
  Resource,
  Item
 } 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 {
+  public refreshDocumentsGrid(): Q.Promise<any> {
-      // reset iterator
+    return this.onApplyFilterClick();
      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 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 {
+  public onTabClick(): Q.Promise<any> {
-    super.onTabClick();
+    return super.onTabClick().then(() => {
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
    });
  }
-  public async onActivate(): Promise<void> {
+  public onActivate(): Q.Promise<any> {
-    super.onActivate();
+    return super.onActivate().then(() => {
-
+      if (this._documentsIterator) {
-    if (!this._documentsIterator) {
+        return Q.resolve(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;
        }
      }
-    }
+
      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);
+    return readDocument(this.collection, documentId).then((content: any) => {
-    this.initDocumentEditor(documentId, content);
+      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 {
+  public onTabClick(): Q.Promise<any> {
-    super.onTabClick();
+    return super.onTabClick().then(() => {
-    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);
+      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);
+    return Q(
-    this.initDocumentEditor(documentId, content);
+      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> {
+  protected __deleteDocument(documentId: DocumentId): Q.Promise<any> {
-    return deleteDocument(this.collection.databaseId, this.collection, documentId);
+    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 {
+  public onTabClick(): Q.Promise<any> {
-    super.onTabClick();
+    return super.onTabClick().then(() => {
-    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+      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 {
+  public onTabClick(): Q.Promise<any> {
-    super.onTabClick();
+    return super.onTabClick().then(() => {
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Query);
+      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) {
+    if (this._iterator == null) {
-      this._initIterator();
+      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) =>
+    const queryDocuments = (firstItemIndex: number) =>
-      await queryDocumentsPage(this.collection && this.collection.id(), this._iterator, firstItemIndex);
+      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 {
+          this._updateQueryMetricsMap(queryResults.headers[Constants.HttpHeaders.queryMetrics]);
      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]);
+          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) {
+          const documents: any[] = queryResults.documents;
-        // we let users query for the next page because the SDK sometimes specifies there are more elements
+          const results = this.renderObjectForEditor(documents, null, 4);
        // even though there aren't any so we should not update the prior query results.
        return;
      }
-      const documents: any[] = queryResults.documents;
+          const resultsDisplay: string =
-      const results = this.renderObjectForEditor(documents, null, 4);
+            queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
          this.showingDocumentsDisplayText(resultsDisplay);
          this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);
-      const resultsDisplay: string =
+          if (!this.queryResults() && !results) {
-        queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
+            const errorMessage: string = JSON.stringify({
-      this.showingDocumentsDisplayText(resultsDisplay);
+              error: `Returned no results after query execution`,
-      this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);
+              accountName: this.collection && this.collection.container.databaseAccount(),
-      this.queryResults(results);
+              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(
+          this.queryResults(results);
-        Action.ExecuteQuery,
+
-        {
+          TelemetryProcessor.traceSuccess(
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+            Action.ExecuteQuery,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+            {
-          dataExplorerArea: Constants.Areas.Tab,
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-          tabTitle: this.tabTitle()
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
              dataExplorerArea: Constants.Areas.Tab,
              tabTitle: this.tabTitle()
            },
            startKey
          );
        },
-        startKey
+        (error: any) => {
-      );
+          this.isExecutionError(true);
-    } catch (error) {
+          const errorMessage = getErrorMessage(error);
-      this.isExecutionError(true);
+          this.error(errorMessage);
-      const errorMessage = getErrorMessage(error);
+          TelemetryProcessor.traceFailure(
-      this.error(errorMessage);
+            Action.ExecuteQuery,
-      TelemetryProcessor.traceFailure(
+            {
-        Action.ExecuteQuery,
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-        {
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              dataExplorerArea: Constants.Areas.Tab,
-          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+              tabTitle: this.tabTitle(),
-          dataExplorerArea: Constants.Areas.Tab,
+              error: errorMessage,
-          tabTitle: this.tabTitle(),
+              errorStack: getErrorStack(error)
-          error: errorMessage,
+            },
-          errorStack: getErrorStack(error)
+            startKey
-        },
+          );
-        startKey
+          document.getElementById("error-display").focus();
-      );
+        }
-      document.getElementById("error-display").focus();
+      )
-    } finally {
+      .finally(() => {
-      this.isExecuting(false);
+        this.isExecuting(false);
-      this.togglesOnFocus();
+        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(
+    return Q(
-      this.collection.databaseId,
+      queryDocuments(this.collection.databaseId, this.collection.id(), this.sqlStatementToExecute(), options).then(
-      this.collection.id(),
+        iterator => (this._iterator = iterator)
-      this.sqlStatementToExecute(),
+      )
      options
    );
  }
--- 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 {
+  public onActivate(): Q.Promise<any> {
-    super.onActivate();
+    return super.onActivate().then(() => {
-    const columns =
+      const columns =
-      !!this.tableEntityListViewModel() &&
+        !!this.tableEntityListViewModel() &&
-      !!this.tableEntityListViewModel().table &&
+        !!this.tableEntityListViewModel().table &&
-      this.tableEntityListViewModel().table.columns;
+        this.tableEntityListViewModel().table.columns;
-    if (!!columns) {
+      if (!!columns) {
-      columns.adjust();
+        columns.adjust();
-      $(window).resize();
+        $(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 {
+  public onTabClick(): Q.Promise<any> {
-    super.onTabClick();
+    return super.onTabClick().then(() => {
-    if (this.isNew()) {
+      if (this.isNew()) {
-      this.collection.selectedSubnodeKind(this.tabKind);
+        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> {
+  public onActivate(): Q.Promise<unknown> {
-    try {
+    this.isExecuting(true);
-      this.isExecuting(true);
+    this.currentCollection.loadOffer().then(
-      await this.currentCollection.loadOffer();
+      () => {
-      // passed in options and set by parent as "Settings" by default
+        // passed in options and set by parent as "Settings" by default
-      this.tabTitle(this.currentCollection.offer() ? "Settings" : "Scale & Settings");
+        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(
+    return super.onActivate().then(() => {
-        (data: DataModels.Notification) => {
+      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.SettingsV2);
-          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);
  }
  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