Force token refresh

WIP
Fix test login
2026-01-21 18:54:22 +00:00 · 2021-01-07 14:13:41 -06:00 · 2021-01-05 01:14:17 -06:00 · 2021-01-04 10:51:44 -06:00 · 2021-01-04 10:09:24 -06:00 · 2021-01-03 23:55:58 -06:00
140 changed files with 2498 additions and 8415 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -42,7 +42,6 @@ src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
 src/Controls/Heatmap/HeatmapDatatypes.ts
-src/Definitions/adal.d.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -242,9 +241,6 @@ src/Platform/Hosted/Authorization.ts
 src/Platform/Hosted/DataAccessUtility.ts
 src/Platform/Hosted/ExplorerFactory.ts
 src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
-src/Platform/Hosted/Helpers/ConnectionStringParser.ts
-src/Platform/Hosted/HostedUtils.test.ts
-src/Platform/Hosted/HostedUtils.ts
 src/Platform/Hosted/Main.ts
 src/Platform/Hosted/Maint.test.ts
 src/Platform/Hosted/NotificationsClient.ts
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -43,6 +43,7 @@ module.exports = {
    "@typescript-eslint/no-explicit-any": "error",
    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
    eqeqeq: "error",
+    "react/display-name": "off",
    "no-restricted-syntax": [
      "error",
      {
--- a/README.md
+++ b/README.md
@@ -69,10 +69,6 @@ Jest and Puppeteer are used for end to end browser based tests and are contained

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

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

 Please read the [contribution guidelines](./CONTRIBUTING.md).
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,3 @@
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
-  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
+  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"]
 };
--- a/externals/adal.js
+++ b/externals/adal.js
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -3,8 +3,8 @@
 /******************************************************************************/

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

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

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

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

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

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

@ErrorColor: @SelectionHigh;

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

@FocusColor: #605e5c;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-.inputTooltip {
-  .inputTooltip();
-}
-
-.inputTooltip .inputTooltipText {
-  top: -68px;
-  .inputTooltipText();
-}
-
-.inputTooltip .inputTooltipText::after {
-  border-width: @MediumSpace @MediumSpace 0 @MediumSpace;
-  top: 55px;
-  .inputTooltipTextAfter();
-}
-
 .nowrap {
  white-space: nowrap;
 }
@@ -3042,45 +3027,3 @@ settings-pane {
 .collapsibleSection :hover {
  cursor: pointer;
 }
-
-.messageBarInfoIcon {
-  color: #0072c6;
-}
-
-.messageBarWarningIcon {
-  color: #db7500;
-}
-
-.freeTierInfoBanner {
-  background-color: @BaseLow;
-  display: inline-flex;
-  padding: @DefaultSpace;
-  width: 100%;
-
-  .freeTierInfoIcon img {
-    height: 28px;
-    width: 28px;
-    margin-left: 4px;
-  }
-
-  .freeTierInfoMessage {
-    margin: auto 0;
-    padding-left: @MediumSpace;
-  }
-}
-
-.freeTierInlineWarning {
-  display: inline-flex;
-  padding: 8px 8px 8px 0;
-  width: 100%;
-
-  .freeTierWarningIcon img {
-    height: 20px;
-    width: 20px;
-  }
-
-  .freeTierWarningMessage {
-    margin: auto 0;
-    padding-left: @SmallSpace;
-  }
-}
--- 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
@@ -275,6 +275,27 @@
        }
      }
    },
+    "@azure/msal-browser": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.8.0.tgz",
+      "integrity": "sha512-I6n7EQnwsZXgKPOLlS5X48jhzUNUFwMVm180wDBA/pwEkUy8ei6zWiPMBfWaMSxz9uNx9WHaEhgAyhJy0ze3AQ==",
+      "requires": {
+        "@azure/msal-common": "^2.0.0"
+      }
+    },
+    "@azure/msal-common": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-2.0.0.tgz",
+      "integrity": "sha512-d1RNcJb+P1EGzMHtgbZoVlHLQWjlVfr504jywNk9YEfoq8Hw3BxJ0wepu+1w0hc64D8zG0wljcvHaIH1jTn2SA==",
+      "requires": {
+        "debug": "^4.1.1"
+      }
+    },
+    "@azure/msal-react": {
+      "version": "1.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-1.0.0-alpha.1.tgz",
+      "integrity": "sha512-8BftMP1DyXf7/Fa7mxi14/fmHBdDGDUONmE8sm1T6w7ERJyY1RN7PZgdnUOcYcqj2xMnxfz9++8HsrzMrtMc0Q=="
+    },
    "@babel/code-frame": {
      "version": "7.10.4",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -393,6 +414,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 +641,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 +750,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",
@@ -5469,12 +5464,6 @@
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
      "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
    },
-    "adal-angular": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.15.tgz",
-      "integrity": "sha1-8qnvgvNYxEToMUKs5l0yJ6RBBDs=",
-      "dev": true
-    },
    "agent-base": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -15339,6 +15328,15 @@
        "tinyqueue": "^1.1.0"
      }
    },
+    "match-sorter": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.0.2.tgz",
+      "integrity": "sha512-SDRLNlWof9GnAUEyhKP0O5525MMGXUGt+ep4MrrqQ2StAh3zjvICVZseiwg7Zijn3GazpJDiwuRr/mFDHd92NQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
    "matchdep": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -15817,9 +15815,9 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "msal": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.3.tgz",
-      "integrity": "sha512-C90MhgzcBuTSR2BOQ/LQryY1CZVESQLJDdmRDWSsaVde+zwZ2iXD0fWw7zeBd5TzfUCiJEXZVs4lFJ8d/IGbiQ==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.4.tgz",
+      "integrity": "sha512-aOBD/L6jAsizDFzKxxvXxH0FEDjp6Inr3Ufi/Y2o7KCFKN+akoE2sLeszEb/0Y3VxHxK0F0ea7xQ/HHTomKivw==",
      "requires": {
        "tslib": "^1.9.3"
      },
@@ -17786,6 +17784,15 @@
        "warning": "^4.0.2"
      }
    },
+    "react-query": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.5.5.tgz",
+      "integrity": "sha512-WYZcHcAs5K5lPGT6CI8fz3lU62S8IfZhvB1K4aZH27wg9T6CWei+y7IRyZwti9X18LX134O4olgEuNth9LEX+w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "match-sorter": "^6.0.2"
+      }
+    },
    "react-redux": {
      "version": "7.1.3",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
@@ -17998,11 +18005,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",
@@ -18183,6 +18185,11 @@
        "superagent-proxy": "^2.0.0"
      }
    },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U="
+    },
    "remove-trailing-separator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
    "@azure/cosmos": "3.9.0",
    "@azure/cosmos-language-service": "0.0.5",
    "@azure/identity": "1.1.0",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@azure/msal-browser": "2.8.0",
+    "@azure/msal-react": "1.0.0-alpha.1",
    "@jupyterlab/services": "6.0.0-rc.2",
    "@jupyterlab/terminal": "3.0.0-rc.2",
    "@microsoft/applicationinsights-web": "2.5.9",
@@ -71,6 +71,7 @@
    "knockout": "3.5.1",
    "mkdirp": "1.0.4",
    "monaco-editor": "0.18.1",
+    "msal": "1.4.4",
    "object.entries": "1.1.0",
    "office-ui-fabric-react": "7.134.1",
    "p-retry": "4.2.0",
@@ -85,9 +86,9 @@
    "react-dom": "16.9.0",
    "react-hotkeys": "2.0.0",
    "react-notification-system": "0.2.17",
+    "react-query": "3.5.5",
    "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",
@@ -131,7 +132,6 @@
    "@types/webfontloader": "1.6.29",
    "@typescript-eslint/eslint-plugin": "4.0.1",
    "@typescript-eslint/parser": "4.0.1",
-    "adal-angular": "1.0.15",
    "axe-puppeteer": "1.1.0",
    "babel-jest": "24.9.0",
    "babel-loader": "8.1.0",
--- a/src/AuthType.ts
+++ b/src/AuthType.ts
@@ -2,5 +2,6 @@ export enum AuthType {
  AAD = "aad",
  EncryptedToken = "encryptedtoken",
  MasterKey = "masterkey",
-  ResourceToken = "resourcetoken"
+  ResourceToken = "resourcetoken",
+  ConnectionString = "connectionstring"
 }
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -1,437 +1,434 @@
-import { HashMap } from "./HashMap";
-
-export class AuthorizationEndpoints {
-  public static arm: string = "https://management.core.windows.net/";
-  public static common: string = "https://login.windows.net/";
-}
-
-export class CodeOfConductEndpoints {
-  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
-  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
-  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
-}
-
-export class EndpointsRegex {
-  public static readonly cassandra = [
-    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-    "HostName=(.*).cassandra.cosmos.azure.com"
-  ];
-  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
-  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
-  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
-  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
-}
-
-export class ApiEndpoints {
-  public static runtimeProxy: string = "/api/RuntimeProxy";
-  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
-}
-
-export class ServerIds {
-  public static localhost: string = "localhost";
-  public static blackforest: string = "blackforest";
-  public static fairfax: string = "fairfax";
-  public static mooncake: string = "mooncake";
-  public static productionPortal: string = "prod";
-  public static dev: string = "dev";
-}
-
-export class ArmApiVersions {
-  public static readonly documentDB: string = "2015-11-06";
-  public static readonly arcadia: string = "2019-06-01-preview";
-  public static readonly arcadiaLivy: string = "2019-11-01-preview";
-  public static readonly arm: string = "2015-11-01";
-  public static readonly armFeatures: string = "2014-08-01-preview";
-  public static readonly publicVersion = "2020-04-01";
-}
-
-export class ArmResourceTypes {
-  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
-  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
-}
-
-export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
-  public static singlePartitionStorageInGb: string = "10";
-  public static multiPartitionStorageInGb: string = "100";
-  public static maxChangeFeedRetentionDuration: number = 10;
-  public static partitionKeyVersion = 2;
-}
-
-export class ClientDefaults {
-  public static requestTimeoutMs: number = 60000;
-  public static portalCacheTimeoutMs: number = 10000;
-  public static errorNotificationTimeoutMs: number = 5000;
-  public static copyHelperTimeoutMs: number = 2000;
-  public static waitForDOMElementMs: number = 500;
-  public static cacheBustingTimeoutMs: number =
-    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static databaseThroughputIncreaseFactor: number = 100;
-  public static readonly arcadiaTokenRefreshInterval: number =
-    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
-}
-
-export class AccountKind {
-  public static DocumentDB: string = "DocumentDB";
-  public static MongoDB: string = "MongoDB";
-  public static Parse: string = "Parse";
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  public static Default: string = AccountKind.DocumentDB;
-}
-
-export class CorrelationBackend {
-  public static Url: string = "https://aka.ms/cosmosdbanalytics";
-}
-
-export class DefaultAccountExperience {
-  public static DocumentDB: string = "DocumentDB";
-  public static Graph: string = "Graph";
-  public static MongoDB: string = "MongoDB";
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
-  public static Table: string = "Table";
-  public static Cassandra: string = "Cassandra";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
-}
-
-export class CapabilityNames {
-  public static EnableTable: string = "EnableTable";
-  public static EnableGremlin: string = "EnableGremlin";
-  public static EnableCassandra: string = "EnableCassandra";
-  public static EnableAutoScale: string = "EnableAutoScale";
-  public static readonly EnableNotebooks: string = "EnableNotebooks";
-  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
-  public static readonly EnableMongo: string = "EnableMongo";
-  public static readonly EnableServerless: string = "EnableServerless";
-}
-
-export class Features {
-  public static readonly cosmosdb = "cosmosdb";
-  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly executeSproc = "dataexplorerexecutesproc";
-  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
-  public static readonly enableTtl = "enablettl";
-  public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableLinkInjection = "enablelinkinjection";
-  public static readonly enableSpark = "enablespark";
-  public static readonly livyEndpoint = "livyendpoint";
-  public static readonly notebookServerUrl = "notebookserverurl";
-  public static readonly notebookServerToken = "notebookservertoken";
-  public static readonly notebookBasePath = "notebookbasepath";
-  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
-  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
-  public static readonly ttl90Days = "ttl90days";
-  public static readonly enableRightPanelV2 = "enablerightpanelv2";
-  public static readonly enableSchema = "enableschema";
-  public static readonly enableSDKoperations = "enablesdkoperations";
-  public static readonly showMinRUSurvey = "showminrusurvey";
-  public static readonly selfServeType = "selfservetype";
-}
-
-// flight names returned from the portal are always lowercase
-export class Flights {
-  public static readonly SettingsV2 = "settingsv2";
-  public static readonly MongoIndexEditor = "mongoindexeditor";
-  public static readonly AutoscaleTest = "autoscaletest";
-  public static readonly MongoIndexing = "mongoindexing";
-}
-
-export class AfecFeatures {
-  public static readonly Spark = "spark-public-preview";
-  public static readonly Notebooks = "sparknotebooks-public-preview";
-  public static readonly StorageAnalytics = "storageanalytics-public-preview";
-}
-
-export class Spark {
-  public static readonly MaxWorkerCount = 10;
-  public static readonly SKUs: HashMap<string> = new HashMap({
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
-    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
-    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
-    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
-  });
-}
-
-export class TagNames {
-  public static defaultExperience: string = "defaultExperience";
-}
-
-export class MongoDBAccounts {
-  public static protocol: string = "https";
-  public static defaultPort: string = "10255";
-}
-
-export enum MongoBackendEndpointType {
-  local,
-  remote
-}
-
-// TODO: 435619 Add default endpoints per cloud and use regional only when available
-export class CassandraBackend {
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
-  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra";
-  public static readonly guestQueryApi: string = "api/guest/cassandra";
-  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
-  public static readonly schemaApi: string = "api/cassandra/schema";
-  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
-}
-
-export class Queries {
-  public static CustomPageOption: string = "custom";
-  public static UnlimitedPageOption: string = "unlimited";
-  public static itemsPerPage: number = 100;
-  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
-  public static QueryEditorMinHeightRatio: number = 0.1;
-  public static QueryEditorMaxHeightRatio: number = 0.4;
-  public static readonly DefaultMaxDegreeOfParallelism = 6;
-}
-
-export class SavedQueries {
-  public static readonly CollectionName: string = "___Query";
-  public static readonly DatabaseName: string = "___Cosmos";
-  public static readonly OfferThroughput: number = 400;
-  public static readonly PartitionKeyProperty: string = "id";
-}
-
-export class DocumentsGridMetrics {
-  public static DocumentsPerPage: number = 100;
-  public static IndividualRowHeight: number = 34;
-  public static BufferHeight: number = 28;
-  public static SplitterMinWidth: number = 200;
-  public static SplitterMaxWidth: number = 360;
-
-  public static DocumentEditorMinWidthRatio: number = 0.2;
-  public static DocumentEditorMaxWidthRatio: number = 0.4;
-}
-
-export class ExplorerMetrics {
-  public static SplitterMinWidth: number = 240;
-  public static SplitterMaxWidth: number = 400;
-  public static CollapsedResourceTreeWidth: number = 36;
-}
-
-export class SplitterMetrics {
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-}
-
-export class Areas {
-  public static ResourceTree: string = "Resource Tree";
-  public static ContextualPane: string = "Contextual Pane";
-  public static Tab: string = "Tab";
-  public static ShareDialog: string = "Share Access Dialog";
-  public static Notebook: string = "Notebook";
-}
-
-export class HttpHeaders {
-  public static activityId: string = "x-ms-activity-id";
-  public static apiType: string = "x-ms-cosmos-apitype";
-  public static authorization: string = "authorization";
-  public static collectionIndexTransformationProgress: string =
-    "x-ms-documentdb-collection-index-transformation-progress";
-  public static continuation: string = "x-ms-continuation";
-  public static correlationRequestId: string = "x-ms-correlation-request-id";
-  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
-  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
-  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
-  public static connectionString: string = "x-ms-connection-string";
-  public static msDate: string = "x-ms-date";
-  public static location: string = "Location";
-  public static contentType: string = "Content-Type";
-  public static offerReplacePending: string = "x-ms-offer-replace-pending";
-  public static user: string = "x-ms-user";
-  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
-  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
-  public static requestCharge: string = "x-ms-request-charge";
-  public static resourceQuota: string = "x-ms-resource-quota";
-  public static resourceUsage: string = "x-ms-resource-usage";
-  public static retryAfterMs: string = "x-ms-retry-after-ms";
-  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
-  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
-  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
-  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
-  public static autoPilotThroughput = "autoscaleSettings";
-  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
-  public static partitionKey: string = "x-ms-documentdb-partitionkey";
-  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
-  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-}
-
-export class ApiType {
-  // Mapped to hexadecimal values in the backend
-  public static readonly MongoDB: number = 1;
-  public static readonly Gremlin: number = 2;
-  public static readonly Cassandra: number = 4;
-  public static readonly Table: number = 8;
-  public static readonly SQL: number = 16;
-}
-
-export class HttpStatusCodes {
-  public static readonly OK: number = 200;
-  public static readonly Created: number = 201;
-  public static readonly Accepted: number = 202;
-  public static readonly NoContent: number = 204;
-  public static readonly NotModified: number = 304;
-  public static readonly Unauthorized: number = 401;
-  public static readonly Forbidden: number = 403;
-  public static readonly NotFound: number = 404;
-  public static readonly TooManyRequests: number = 429;
-  public static readonly Conflict: number = 409;
-
-  public static readonly InternalServerError: number = 500;
-  public static readonly BadGateway: number = 502;
-  public static readonly ServiceUnavailable: number = 503;
-  public static readonly GatewayTimeout: number = 504;
-
-  public static readonly RetryableStatusCodes: number[] = [
-    HttpStatusCodes.TooManyRequests,
-    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
-    HttpStatusCodes.BadGateway,
-    HttpStatusCodes.ServiceUnavailable,
-    HttpStatusCodes.GatewayTimeout
-  ];
-}
-
-export class Urls {
-  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
-  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
-  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
-  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
-}
-
-export class HashRoutePrefixes {
-  public static databases: string = "/dbs/{db_id}";
-  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
-  public static sprocHash: string = "/sprocs/";
-  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
-  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
-  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
-
-  public static databasesWithId(databaseId: string): string {
-    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static collectionsWithIds(databaseId: string, collectionId: string): string {
-    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static sprocWithIds(
-    databaseId: string,
-    collectionId: string,
-    sprocId: string,
-    stripFirstSlash: boolean = true
-  ): string {
-    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
-
-    const transformedSprocRoute: string = transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{sproc_id}", sprocId);
-    if (!!stripFirstSlash) {
-      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
-    }
-
-    return transformedSprocRoute;
-  }
-
-  public static conflictsWithIds(databaseId: string, collectionId: string) {
-    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
-  }
-
-  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
-    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{doc_id}", docId)
-      .replace("/", ""); // strip the first slash since hasher adds it
-  }
-}
-
-export class ConfigurationOverridesValues {
-  public static IsBsonSchemaV2: string = "true";
-}
-
-export class KeyCodes {
-  public static Space: number = 32;
-  public static Enter: number = 13;
-  public static Escape: number = 27;
-  public static UpArrow: number = 38;
-  public static DownArrow: number = 40;
-  public static LeftArrow: number = 37;
-  public static RightArrow: number = 39;
-  public static Tab: number = 9;
-}
-
-// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-export class NormalizedEventKey {
-  public static readonly Space = " ";
-  public static readonly Enter = "Enter";
-  public static readonly Escape = "Escape";
-  public static readonly UpArrow = "ArrowUp";
-  public static readonly DownArrow = "ArrowDown";
-  public static readonly LeftArrow = "ArrowLeft";
-  public static readonly RightArrow = "ArrowRight";
-}
-
-export class TryCosmosExperience {
-  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
-  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
-  public static collectionsPerAccount: number = 3;
-  public static maxRU: number = 5000;
-  public static defaultRU: number = 3000;
-}
-
-export class OfferVersions {
-  public static V1: string = "V1";
-  public static V2: string = "V2";
-}
-
-export enum ConflictOperationType {
-  Replace = "replace",
-  Create = "create",
-  Delete = "delete"
-}
-
-export const EmulatorMasterKey =
-  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
-  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
-
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
-export class Notebook {
-  public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
-  public static readonly kernelRestartInitialDelayMs = 1000;
-  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly autoSaveIntervalMs = 120000;
-}
-
-export class SparkLibrary {
-  public static readonly nameMinLength = 3;
-  public static readonly nameMaxLength = 63;
-}
-
-export class AnalyticalStorageTtl {
-  public static readonly Days90: number = 7776000;
-  public static readonly Infinite: number = -1;
-  public static readonly Disabled: number = 0;
-}
-
-export class TerminalQueryParams {
-  public static readonly Terminal = "terminal";
-  public static readonly Server = "server";
-  public static readonly Token = "token";
-  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly TerminalEndpoint = "terminalEndpoint";
-}
+import { HashMap } from "./HashMap";
+
+export class AuthorizationEndpoints {
+  public static arm: string = "https://management.core.windows.net/";
+  public static common: string = "https://login.windows.net/";
+}
+
+export class CodeOfConductEndpoints {
+  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
+  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
+  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
+}
+
+export class EndpointsRegex {
+  public static readonly cassandra = [
+    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+    "HostName=(.*).cassandra.cosmos.azure.com"
+  ];
+  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
+  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
+}
+
+export class ApiEndpoints {
+  public static runtimeProxy: string = "/api/RuntimeProxy";
+  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
+}
+
+export class ServerIds {
+  public static localhost: string = "localhost";
+  public static blackforest: string = "blackforest";
+  public static fairfax: string = "fairfax";
+  public static mooncake: string = "mooncake";
+  public static productionPortal: string = "prod";
+  public static dev: string = "dev";
+}
+
+export class ArmApiVersions {
+  public static readonly documentDB: string = "2015-11-06";
+  public static readonly arcadia: string = "2019-06-01-preview";
+  public static readonly arcadiaLivy: string = "2019-11-01-preview";
+  public static readonly arm: string = "2015-11-01";
+  public static readonly armFeatures: string = "2014-08-01-preview";
+  public static readonly publicVersion = "2020-04-01";
+}
+
+export class ArmResourceTypes {
+  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
+}
+
+export class BackendDefaults {
+  public static partitionKeyKind: string = "Hash";
+  public static singlePartitionStorageInGb: string = "10";
+  public static multiPartitionStorageInGb: string = "100";
+  public static maxChangeFeedRetentionDuration: number = 10;
+  public static partitionKeyVersion = 2;
+}
+
+export class ClientDefaults {
+  public static requestTimeoutMs: number = 60000;
+  public static portalCacheTimeoutMs: number = 10000;
+  public static errorNotificationTimeoutMs: number = 5000;
+  public static copyHelperTimeoutMs: number = 2000;
+  public static waitForDOMElementMs: number = 500;
+  public static cacheBustingTimeoutMs: number =
+    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static databaseThroughputIncreaseFactor: number = 100;
+  public static readonly arcadiaTokenRefreshInterval: number =
+    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
+}
+
+export class AccountKind {
+  public static DocumentDB: string = "DocumentDB";
+  public static MongoDB: string = "MongoDB";
+  public static Parse: string = "Parse";
+  public static GlobalDocumentDB: string = "GlobalDocumentDB";
+  public static Default: string = AccountKind.DocumentDB;
+}
+
+export class CorrelationBackend {
+  public static Url: string = "https://aka.ms/cosmosdbanalytics";
+}
+
+export class DefaultAccountExperience {
+  public static DocumentDB: string = "DocumentDB";
+  public static Graph: string = "Graph";
+  public static MongoDB: string = "MongoDB";
+  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
+  public static Table: string = "Table";
+  public static Cassandra: string = "Cassandra";
+  public static Default: string = DefaultAccountExperience.DocumentDB;
+}
+
+export class CapabilityNames {
+  public static EnableTable: string = "EnableTable";
+  public static EnableGremlin: string = "EnableGremlin";
+  public static EnableCassandra: string = "EnableCassandra";
+  public static EnableAutoScale: string = "EnableAutoScale";
+  public static readonly EnableNotebooks: string = "EnableNotebooks";
+  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
+  public static readonly EnableMongo: string = "EnableMongo";
+  public static readonly EnableServerless: string = "EnableServerless";
+}
+
+export class Features {
+  public static readonly cosmosdb = "cosmosdb";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly enableTtl = "enablettl";
+  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableGalleryPublish = "enablegallerypublish";
+  public static readonly enableLinkInjection = "enablelinkinjection";
+  public static readonly enableSpark = "enablespark";
+  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly ttl90Days = "ttl90days";
+  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableSchema = "enableschema";
+  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly showMinRUSurvey = "showminrusurvey";
+}
+
+// flight names returned from the portal are always lowercase
+export class Flights {
+  public static readonly SettingsV2 = "settingsv2";
+  public static readonly MongoIndexEditor = "mongoindexeditor";
+}
+
+export class AfecFeatures {
+  public static readonly Spark = "spark-public-preview";
+  public static readonly Notebooks = "sparknotebooks-public-preview";
+  public static readonly StorageAnalytics = "storageanalytics-public-preview";
+}
+
+export class Spark {
+  public static readonly MaxWorkerCount = 10;
+  public static readonly SKUs: HashMap<string> = new HashMap({
+    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
+    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
+    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
+    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
+    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
+    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
+    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
+  });
+}
+
+export class TagNames {
+  public static defaultExperience: string = "defaultExperience";
+}
+
+export class MongoDBAccounts {
+  public static protocol: string = "https";
+  public static defaultPort: string = "10255";
+}
+
+export enum MongoBackendEndpointType {
+  local,
+  remote
+}
+
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
+export class CassandraBackend {
+  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
+  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
+  public static readonly queryApi: string = "api/cassandra";
+  public static readonly guestQueryApi: string = "api/guest/cassandra";
+  public static readonly keysApi: string = "api/cassandra/keys";
+  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
+  public static readonly schemaApi: string = "api/cassandra/schema";
+  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
+}
+
+export class Queries {
+  public static CustomPageOption: string = "custom";
+  public static UnlimitedPageOption: string = "unlimited";
+  public static itemsPerPage: number = 100;
+  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+
+  public static QueryEditorMinHeightRatio: number = 0.1;
+  public static QueryEditorMaxHeightRatio: number = 0.4;
+  public static readonly DefaultMaxDegreeOfParallelism = 6;
+}
+
+export class SavedQueries {
+  public static readonly CollectionName: string = "___Query";
+  public static readonly DatabaseName: string = "___Cosmos";
+  public static readonly OfferThroughput: number = 400;
+  public static readonly PartitionKeyProperty: string = "id";
+}
+
+export class DocumentsGridMetrics {
+  public static DocumentsPerPage: number = 100;
+  public static IndividualRowHeight: number = 34;
+  public static BufferHeight: number = 28;
+  public static SplitterMinWidth: number = 200;
+  public static SplitterMaxWidth: number = 360;
+
+  public static DocumentEditorMinWidthRatio: number = 0.2;
+  public static DocumentEditorMaxWidthRatio: number = 0.4;
+}
+
+export class ExplorerMetrics {
+  public static SplitterMinWidth: number = 240;
+  public static SplitterMaxWidth: number = 400;
+  public static CollapsedResourceTreeWidth: number = 36;
+}
+
+export class SplitterMetrics {
+  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
+}
+
+export class Areas {
+  public static ResourceTree: string = "Resource Tree";
+  public static ContextualPane: string = "Contextual Pane";
+  public static Tab: string = "Tab";
+  public static ShareDialog: string = "Share Access Dialog";
+  public static Notebook: string = "Notebook";
+}
+
+export class HttpHeaders {
+  public static activityId: string = "x-ms-activity-id";
+  public static apiType: string = "x-ms-cosmos-apitype";
+  public static authorization: string = "authorization";
+  public static collectionIndexTransformationProgress: string =
+    "x-ms-documentdb-collection-index-transformation-progress";
+  public static continuation: string = "x-ms-continuation";
+  public static correlationRequestId: string = "x-ms-correlation-request-id";
+  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
+  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
+  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
+  public static connectionString: string = "x-ms-connection-string";
+  public static msDate: string = "x-ms-date";
+  public static location: string = "Location";
+  public static contentType: string = "Content-Type";
+  public static offerReplacePending: string = "x-ms-offer-replace-pending";
+  public static user: string = "x-ms-user";
+  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
+  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
+  public static requestCharge: string = "x-ms-request-charge";
+  public static resourceQuota: string = "x-ms-resource-quota";
+  public static resourceUsage: string = "x-ms-resource-usage";
+  public static retryAfterMs: string = "x-ms-retry-after-ms";
+  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
+  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+  public static autoPilotThroughput = "autoscaleSettings";
+  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+  public static partitionKey: string = "x-ms-documentdb-partitionkey";
+  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
+  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+}
+
+export class ApiType {
+  // Mapped to hexadecimal values in the backend
+  public static readonly MongoDB: number = 1;
+  public static readonly Gremlin: number = 2;
+  public static readonly Cassandra: number = 4;
+  public static readonly Table: number = 8;
+  public static readonly SQL: number = 16;
+}
+
+export class HttpStatusCodes {
+  public static readonly OK: number = 200;
+  public static readonly Created: number = 201;
+  public static readonly Accepted: number = 202;
+  public static readonly NoContent: number = 204;
+  public static readonly NotModified: number = 304;
+  public static readonly Unauthorized: number = 401;
+  public static readonly Forbidden: number = 403;
+  public static readonly NotFound: number = 404;
+  public static readonly TooManyRequests: number = 429;
+  public static readonly Conflict: number = 409;
+
+  public static readonly InternalServerError: number = 500;
+  public static readonly BadGateway: number = 502;
+  public static readonly ServiceUnavailable: number = 503;
+  public static readonly GatewayTimeout: number = 504;
+
+  public static readonly RetryableStatusCodes: number[] = [
+    HttpStatusCodes.TooManyRequests,
+    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+    HttpStatusCodes.BadGateway,
+    HttpStatusCodes.ServiceUnavailable,
+    HttpStatusCodes.GatewayTimeout
+  ];
+}
+
+export class Urls {
+  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
+  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
+  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
+}
+
+export class HashRoutePrefixes {
+  public static databases: string = "/dbs/{db_id}";
+  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
+  public static sprocHash: string = "/sprocs/";
+  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
+  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
+  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
+
+  public static databasesWithId(databaseId: string): string {
+    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static collectionsWithIds(databaseId: string, collectionId: string): string {
+    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static sprocWithIds(
+    databaseId: string,
+    collectionId: string,
+    sprocId: string,
+    stripFirstSlash: boolean = true
+  ): string {
+    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
+
+    const transformedSprocRoute: string = transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{sproc_id}", sprocId);
+    if (!!stripFirstSlash) {
+      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+    }
+
+    return transformedSprocRoute;
+  }
+
+  public static conflictsWithIds(databaseId: string, collectionId: string) {
+    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
+  }
+
+  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
+    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{doc_id}", docId)
+      .replace("/", ""); // strip the first slash since hasher adds it
+  }
+}
+
+export class ConfigurationOverridesValues {
+  public static IsBsonSchemaV2: string = "true";
+}
+
+export class KeyCodes {
+  public static Space: number = 32;
+  public static Enter: number = 13;
+  public static Escape: number = 27;
+  public static UpArrow: number = 38;
+  public static DownArrow: number = 40;
+  public static LeftArrow: number = 37;
+  public static RightArrow: number = 39;
+  public static Tab: number = 9;
+}
+
+// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export class NormalizedEventKey {
+  public static readonly Space = " ";
+  public static readonly Enter = "Enter";
+  public static readonly Escape = "Escape";
+  public static readonly UpArrow = "ArrowUp";
+  public static readonly DownArrow = "ArrowDown";
+  public static readonly LeftArrow = "ArrowLeft";
+  public static readonly RightArrow = "ArrowRight";
+}
+
+export class TryCosmosExperience {
+  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
+  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
+  public static collectionsPerAccount: number = 3;
+  public static maxRU: number = 5000;
+  public static defaultRU: number = 3000;
+}
+
+export class OfferVersions {
+  public static V1: string = "V1";
+  public static V2: string = "V2";
+}
+
+export enum ConflictOperationType {
+  Replace = "replace",
+  Create = "create",
+  Delete = "delete"
+}
+
+export const EmulatorMasterKey =
+  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
+  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
+
+export class Notebook {
+  public static readonly defaultBasePath = "./notebooks";
+  public static readonly heartbeatDelayMs = 5000;
+  public static readonly kernelRestartInitialDelayMs = 1000;
+  public static readonly kernelRestartMaxDelayMs = 20000;
+  public static readonly autoSaveIntervalMs = 120000;
+}
+
+export class SparkLibrary {
+  public static readonly nameMinLength = 3;
+  public static readonly nameMaxLength = 63;
+}
+
+export class AnalyticalStorageTtl {
+  public static readonly Days90: number = 7776000;
+  public static readonly Infinite: number = -1;
+  public static readonly Disabled: number = 0;
+}
+
+export class TerminalQueryParams {
+  public static readonly Terminal = "terminal";
+  public static readonly Server = "server";
+  public static readonly Token = "token";
+  public static readonly SubscriptionId = "subscriptionId";
+  public static readonly TerminalEndpoint = "terminalEndpoint";
+}
--- a/src/Common/ErrorHandlingUtils.ts
+++ b/src/Common/ErrorHandlingUtils.ts
@@ -21,7 +21,7 @@ export const handleError = (error: string | ARMError | Error, area: string, cons
  sendNotificationForError(errorMessage, errorCode);
 };

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

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

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

-  if (autopilotSettings && autopilotSettings.maxThroughput && minimumThroughput) {
+  if (autopilotSettings) {
    return {
      id: offerDefinition.id,
      autoscaleMaxThroughput: autopilotSettings.maxThroughput,
--- a/src/Common/Splitter.ts
+++ b/src/Common/Splitter.ts
@@ -23,10 +23,10 @@ export class Splitter {
  public splitterId: string;
  public leftSideId: string;

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

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

  public initialize() {
-    if (document.getElementById(this.splitterId) !== null && document.getElementById(this.leftSideId) != null) {
-      this.splitter = <HTMLElement>document.getElementById(this.splitterId);
-      this.leftSide = <HTMLElement>document.getElementById(this.leftSideId);
-    }
+    this.splitter = document.getElementById(this.splitterId);
+    this.leftSide = document.getElementById(this.leftSideId);
+
    const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
    const splitterOptions: JQueryUI.ResizableOptions = {
      animate: true,
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -210,9 +210,9 @@ export interface QueryMetrics {

 export interface Offer {
  id: string;
-  autoscaleMaxThroughput: number | undefined;
-  manualThroughput: number | undefined;
-  minimumThroughput: number | undefined;
+  autoscaleMaxThroughput: number;
+  manualThroughput: number;
+  minimumThroughput: number;
  offerDefinition?: SDKOfferDefinition;
  offerReplacePending: boolean;
 }
@@ -587,11 +587,3 @@ export interface MemoryUsageInfo {
  freeKB: number;
  totalKB: number;
 }
-
-export interface resourceTokenConnectionStringProperties {
-  accountEndpoint: string;
-  collectionId: string;
-  databaseId: string;
-  partitionKey?: string;
-  resourceToken: string;
-}
--- 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";
@@ -396,7 +395,6 @@ export interface DataExplorerInputsFrame {
  isAuthWithresourceToken?: boolean;
  defaultCollectionThroughput?: CollectionCreationDefaults;
  flights?: readonly string[];
-  selfServeType?: SelfServeType;
 }

 export interface CollectionCreationDefaults {
--- a/src/Definitions/adal.d.ts
+++ b/src/Definitions/adal.d.ts
@@ -1,383 +0,0 @@
-// Type definitions for adal-angular 1.0.1.1
-// Project: https://github.com/AzureAD/azure-activedirectory-library-for-js#readme
-// Definitions by: Daniel Perez Alvarez <https://github.com/unindented>
-//                 Anthony Ciccarello <https://github.com/aciccarello>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-//This is a customized version of adal on top of version 1.0.1 which does not support multi tenant
-// Customized version add tenantId to stored tokens so when tenant change, adal will refetch instead of read from sessionStorage
-
-// In module contexts the class constructor function is the exported object
-// export = AuthenticationContext;
-
-// This class is defined globally in not in a module context
-declare class AuthenticationContext {
-  instance: string;
-  config: AuthenticationContext.Options;
-  callback: AuthenticationContext.TokenCallback;
-  popUp: boolean;
-  isAngular: boolean;
-
-  /**
-   * Enum for request type
-   */
-  REQUEST_TYPE: AuthenticationContext.RequestType;
-  RESPONSE_TYPE: AuthenticationContext.ResponseType;
-  CONSTANTS: AuthenticationContext.Constants;
-
-  constructor(options: AuthenticationContext.Options);
-  /**
-   * Initiates the login process by redirecting the user to Azure AD authorization endpoint.
-   */
-  login(): void;
-  /**
-   * Returns whether a login is in progress.
-   */
-  loginInProgress(): boolean;
-  /**
-   * Gets token for the specified resource from the cache.
-   * @param resource A URI that identifies the resource for which the token is requested.
-   * @param tenantId tenant Id.
-   */
-  getCachedToken(resource: string, tenantId: string): string;
-  /**
-   * If user object exists, returns it. Else creates a new user object by decoding `id_token` from the cache.
-   */
-  getCachedUser(): AuthenticationContext.UserInfo;
-  /**
-   * Adds the passed callback to the array of callbacks for the specified resource.
-   * @param resource A URI that identifies the resource for which the token is requested.
-   * @param expectedState A unique identifier (guid).
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  registerCallback(
-    expectedState: string,
-    resource: string,
-    callback: AuthenticationContext.TokenCallback,
-    tenantId: string
-  ): void;
-  /**
-   * Acquires token from the cache if it is not expired. Otherwise sends request to AAD to obtain a new token.
-   * @param resource Resource URI identifying the target resource.
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  acquireToken(resource: string, tenantId: string, callback: AuthenticationContext.TokenCallback): void;
-  /**
-   * Acquires token (interactive flow using a popup window) by sending request to AAD to obtain a new token.
-   * @param resource Resource URI identifying the target resource.
-   * @param extraQueryParameters Query parameters to add to the authentication request.
-   * @param claims Claims to add to the authentication request.
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  acquireTokenPopup(
-    resource: string,
-    tenantId: string,
-    extraQueryParameters: string | null | undefined,
-    claims: string | null | undefined,
-    callback: AuthenticationContext.TokenCallback
-  ): void;
-  /**
-   * Acquires token (interactive flow using a redirect) by sending request to AAD to obtain a new token. In this case the callback passed in the authentication request constructor will be called.
-   * @param resource Resource URI identifying the target resource.
-   * @param extraQueryParameters Query parameters to add to the authentication request.
-   * @param claims Claims to add to the authentication request.
-   */
-  acquireTokenRedirect(
-    resource: string,
-    tenantId: string,
-    extraQueryParameters?: string | null,
-    claims?: string | null
-  ): void;
-  /**
-   * Redirects the browser to Azure AD authorization endpoint.
-   * @param urlNavigate URL of the authorization endpoint.
-   */
-  promptUser(urlNavigate: string): void;
-  /**
-   * Clears cache items.
-   */
-  clearCache(): void;
-  /**
-   * Clears cache items for a given resource.
-   * @param resource Resource URI identifying the target resource.
-   */
-  clearCacheForResource(resource: string): void;
-  /**
-   * Redirects user to logout endpoint. After logout, it will redirect to `postLogoutRedirectUri` if added as a property on the config object.
-   */
-  logOut(): void;
-  /**
-   * Calls the passed in callback with the user object or error message related to the user.
-   * @param callback The callback provided by the caller. It will be called with user or error.
-   */
-  getUser(callback: AuthenticationContext.UserCallback): void;
-  /**
-   * Checks if the URL fragment contains access token, id token or error description.
-   * @param hash Hash passed from redirect page.
-   */
-  isCallback(hash: string): boolean;
-  /**
-   * Gets login error.
-   */
-  getLoginError(): string;
-  /**
-   * Creates a request info object from the URL fragment and returns it.
-   */
-  getRequestInfo(hash: string): AuthenticationContext.RequestInfo;
-  /**
-   * Saves token or error received in the response from AAD in the cache. In case of `id_token`, it also creates the user object.
-   */
-  saveTokenFromHash(requestInfo: AuthenticationContext.RequestInfo): void;
-  /**
-   * Gets resource for given endpoint if mapping is provided with config.
-   * @param endpoint Resource URI identifying the target resource.
-   */
-  getResourceForEndpoint(resource: string): string;
-  /**
-   * This method must be called for processing the response received from AAD. It extracts the hash, processes the token or error, saves it in the cache and calls the callbacks with the result.
-   * @param hash Hash fragment of URL. Defaults to `window.location.hash`.
-   */
-  handleWindowCallback(hash?: string): void;
-
-  /**
-   * Checks the logging Level, constructs the log message and logs it. Users need to implement/override this method to turn on logging.
-   * @param level Level can be set 0, 1, 2 and 3 which turns on 'error', 'warning', 'info' or 'verbose' level logging respectively.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  log(level: AuthenticationContext.LoggingLevel, message: string, error: any): void;
-  /**
-   * Logs messages when logging level is set to 0.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  error(message: string, error: any): void;
-  /**
-   * Logs messages when logging level is set to 1.
-   * @param message Message to log.
-   */
-  warn(message: string): void;
-  /**
-   * Logs messages when logging level is set to 2.
-   * @param message Message to log.
-   */
-  info(message: string): void;
-  /**
-   * Logs messages when logging level is set to 3.
-   * @param message Message to log.
-   */
-  verbose(message: string): void;
-
-  /**
-   * Logs Pii messages when Logging Level is set to 0 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  errorPii(message: string, error: any): void;
-
-  /**
-   * Logs  Pii messages when Logging Level is set to 1 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  warnPii(message: string): void;
-
-  /**
-   * Logs messages when Logging Level is set to 2 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  infoPii(message: string): void;
-
-  /**
-   * Logs messages when Logging Level is set to 3 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  verbosePii(message: string): void;
-}
-
-declare namespace AuthenticationContext {
-  function inject(config: Options): AuthenticationContext;
-
-  type LoggingLevel = 0 | 1 | 2 | 3;
-
-  type RequestType = "LOGIN" | "RENEW_TOKEN" | "UNKNOWN";
-
-  type ResponseType = "id_token token" | "token";
-
-  interface RequestInfo {
-    /**
-     * Object comprising of fields such as id_token/error, session_state, state, e.t.c.
-     */
-    parameters: any;
-    /**
-     * Request type.
-     */
-    requestType: RequestType;
-    /**
-     * Whether state is valid.
-     */
-    stateMatch: boolean;
-    /**
-     * Unique guid used to match the response with the request.
-     */
-    stateResponse: string;
-    /**
-     * Whether `requestType` contains `id_token`, `access_token` or error.
-     */
-    valid: boolean;
-  }
-
-  interface UserInfo {
-    /**
-     * Username assigned from UPN or email.
-     */
-    userName: string;
-    /**
-     * Properties parsed from `id_token`.
-     */
-    profile: any;
-  }
-
-  type TokenCallback = (errorDesc: string | null, token: string | null, error: any) => void;
-
-  type UserCallback = (errorDesc: string | null, user: UserInfo | null) => void;
-
-  /**
-   * Configuration options for Authentication Context
-   */
-  interface Options {
-    /**
-     * Client ID assigned to your app by Azure Active Directory.
-     */
-    clientId: string;
-    /**
-     * Endpoint at which you expect to receive tokens.Defaults to `window.location.href`.
-     */
-    redirectUri?: string;
-    /**
-     * Azure Active Directory instance. Defaults to `https://login.microsoftonline.com/`.
-     */
-    instance?: string;
-    /**
-     * Your target tenant. Defaults to `common`.
-     */
-    tenant?: string;
-    /**
-     * Query parameters to add to the authentication request.
-     */
-    extraQueryParameter?: string;
-    /**
-     * Unique identifier used to map the request with the response. Defaults to RFC4122 version 4 guid (128 bits).
-     */
-    correlationId?: string;
-    /**
-     * User defined function of handling the navigation to Azure AD authorization endpoint in case of login.
-     */
-    displayCall?: (url: string) => void;
-    /**
-     * Set this to true to enable login in a popup winodow instead of a full redirect. Defaults to `false`.
-     */
-    popUp?: boolean;
-    /**
-     * Set this to the resource to request on login. Defaults to `clientId`.
-     */
-    loginResource?: string;
-    /**
-     * Set this to redirect the user to a custom login page.
-     */
-    localLoginUrl?: string;
-    /**
-     * Redirects to start page after login. Defaults to `true`.
-     */
-    navigateToLoginRequestUrl?: boolean;
-    /**
-     * Set this to redirect the user to a custom logout page.
-     */
-    logOutUri?: string;
-    /**
-     * Redirects the user to postLogoutRedirectUri after logout. Defaults to `redirectUri`.
-     */
-    postLogoutRedirectUri?: string;
-    /**
-     * Sets browser storage to either 'localStorage' or sessionStorage'. Defaults to `sessionStorage`.
-     */
-    cacheLocation?: "localStorage" | "sessionStorage";
-    /**
-     * Array of keywords or URIs. Adal will attach a token to outgoing requests that have these keywords or URIs.
-     */
-    endpoints?: { [resource: string]: string };
-    /**
-     * Array of keywords or URIs. Adal will not attach a token to outgoing requests that have these keywords or URIs.
-     */
-    anonymousEndpoints?: string[];
-    /**
-     * If the cached token is about to be expired in the expireOffsetSeconds (in seconds), Adal will renew the token instead of using the cached token. Defaults to 300 seconds.
-     */
-    expireOffsetSeconds?: number;
-    /**
-     * The number of milliseconds of inactivity before a token renewal response from AAD should be considered timed out. Defaults to 6 seconds.
-     */
-    loadFrameTimeout?: number;
-    /**
-     * Callback to be invoked when a token is acquired.
-     */
-    callback?: TokenCallback;
-  }
-
-  interface LoggingConfig {
-    level: LoggingLevel;
-    log: (message: string) => void;
-    piiLoggingEnabled: boolean;
-  }
-
-  /**
-   * Enum for storage constants
-   */
-  interface Constants {
-    ACCESS_TOKEN: "access_token";
-    EXPIRES_IN: "expires_in";
-    ID_TOKEN: "id_token";
-    ERROR_DESCRIPTION: "error_description";
-    SESSION_STATE: "session_state";
-    STORAGE: {
-      TOKEN_KEYS: "adal.token.keys";
-      ACCESS_TOKEN_KEY: "adal.access.token.key";
-      EXPIRATION_KEY: "adal.expiration.key";
-      STATE_LOGIN: "adal.state.login";
-      STATE_RENEW: "adal.state.renew";
-      NONCE_IDTOKEN: "adal.nonce.idtoken";
-      SESSION_STATE: "adal.session.state";
-      USERNAME: "adal.username";
-      IDTOKEN: "adal.idtoken";
-      ERROR: "adal.error";
-      ERROR_DESCRIPTION: "adal.error.description";
-      LOGIN_REQUEST: "adal.login.request";
-      LOGIN_ERROR: "adal.login.error";
-      RENEW_STATUS: "adal.token.renew.status";
-    };
-    RESOURCE_DELIMETER: "|";
-    LOADFRAME_TIMEOUT: "6000";
-    TOKEN_RENEW_STATUS_CANCELED: "Canceled";
-    TOKEN_RENEW_STATUS_COMPLETED: "Completed";
-    TOKEN_RENEW_STATUS_IN_PROGRESS: "In Progress";
-    LOGGING_LEVEL: {
-      ERROR: 0;
-      WARN: 1;
-      INFO: 2;
-      VERBOSE: 3;
-    };
-    LEVEL_STRING_MAP: {
-      0: "ERROR:";
-      1: "WARNING:";
-      2: "INFO:";
-      3: "VERBOSE:";
-    };
-    POPUP_WIDTH: 483;
-    POPUP_HEIGHT: 600;
-  }
-}
-
-// declare global {
-//     interface Window {
-//         Logging: AuthenticationContext.LoggingConfig;
-//     }
-// }
--- a/src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx
+++ b/src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx
@@ -1,159 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
-import { AuthType } from "../../../AuthType";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-import { AccountKind } from "../../../Common/Constants";
-
-const createBlankProps = (): AccountSwitchComponentProps => {
-  return {
-    authType: null,
-    displayText: "",
-    accounts: [],
-    selectedAccountName: null,
-    isLoadingAccounts: false,
-    onAccountChange: jest.fn(),
-    subscriptions: [],
-    selectedSubscriptionId: null,
-    isLoadingSubscriptions: false,
-    onSubscriptionChange: jest.fn()
-  };
-};
-
-const createBlankAccount = (): DatabaseAccount => {
-  return {
-    id: "",
-    kind: AccountKind.Default,
-    name: "",
-    properties: null,
-    location: "",
-    tags: null,
-    type: ""
-  };
-};
-
-const createBlankSubscription = (): Subscription => {
-  return {
-    subscriptionId: "",
-    displayName: "",
-    authorizationSource: "",
-    state: "",
-    subscriptionPolicies: null,
-    tenantId: "",
-    uniqueDisplayName: ""
-  };
-};
-
-const createFullProps = (): AccountSwitchComponentProps => {
-  const props = createBlankProps();
-  props.authType = AuthType.AAD;
-  const account1 = createBlankAccount();
-  account1.name = "account1";
-  const account2 = createBlankAccount();
-  account2.name = "account2";
-  const account3 = createBlankAccount();
-  account3.name = "superlongaccountnamestringtest";
-  props.accounts = [account1, account2, account3];
-  props.selectedAccountName = "account2";
-
-  const sub1 = createBlankSubscription();
-  sub1.displayName = "sub1";
-  sub1.subscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
-  const sub2 = createBlankSubscription();
-  sub2.displayName = "subsubsubsubsubsubsub2";
-  sub2.subscriptionId = "b20b3e93-0185-4326-8a9c-d44bac276b6b";
-  props.subscriptions = [sub1, sub2];
-  props.selectedSubscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
-
-  return props;
-};
-
-describe("test render", () => {
-  it("renders no auth type -> handle error in code", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  // Encrypted Token
-  it("renders auth security token, with selected account name", () => {
-    const props = createBlankProps();
-    props.authType = AuthType.EncryptedToken;
-    props.selectedAccountName = "testaccount";
-
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  // AAD
-  it("renders auth aad, with all information", () => {
-    const props = createFullProps();
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders auth aad all dropdown menus", () => {
-    const props = createFullProps();
-    const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
-    wrapper.find("button.accountSwitchButton").simulate("click");
-    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(true);
-
-    expect(wrapper.exists("div.accountSwitchSubscriptionDropdown")).toBe(true);
-    wrapper.find("DropdownBase.accountSwitchSubscriptionDropdown").simulate("click");
-    // Click will dismiss the first contextual menu in enzyme. Need to dig deeper to achieve below test
-
-    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(true);
-    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(2);
-    // wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(false);
-
-    // expect(wrapper.exists("div.accountSwitchAccountDropdown")).toBe(true);
-    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(true);
-    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(3);
-    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(false);
-
-    // wrapper.find("button.accountSwitchButton").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
-
-    wrapper.unmount();
-  });
-});
-
-// describe("test function", () => {
-//   it("switch subscription function", () => {
-//     const props = createFullProps();
-//     const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-//     wrapper.find("button.accountSwitchButton").simulate("click");
-//     wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
-//     wrapper
-//       .find("button.ms-Dropdown-item")
-//       .at(1)
-//       .simulate("click");
-//     expect(props.onSubscriptionChange).toBeCalled();
-//     expect(props.onSubscriptionChange).toHaveBeenCalled();
-
-//     wrapper.unmount();
-//   });
-
-//   it("switch account", () => {
-//     const props = createFullProps();
-//     const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-//     wrapper.find("button.accountSwitchButton").simulate("click");
-//     wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-//     wrapper
-//       .find("button.ms-Dropdown-item")
-//       .at(0)
-//       .simulate("click");
-//     expect(props.onAccountChange).toBeCalled();
-//     expect(props.onAccountChange).toHaveBeenCalled();
-
-//     wrapper.unmount();
-//   });
-// });
--- a/src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx
+++ b/src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx
@@ -1,177 +0,0 @@
-import { AuthType } from "../../../AuthType";
-import { StyleConstants } from "../../../Common/Constants";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-
-import * as React from "react";
-import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
-import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
-
-export interface AccountSwitchComponentProps {
-  authType: AuthType;
-  selectedAccountName: string;
-  accounts: DatabaseAccount[];
-  isLoadingAccounts: boolean;
-  onAccountChange: (newAccount: DatabaseAccount) => void;
-  selectedSubscriptionId: string;
-  subscriptions: Subscription[];
-  isLoadingSubscriptions: boolean;
-  onSubscriptionChange: (newSubscription: Subscription) => void;
-  displayText?: string;
-}
-
-export class AccountSwitchComponent extends React.Component<AccountSwitchComponentProps> {
-  public render(): JSX.Element {
-    return this.props.authType === AuthType.AAD ? this._renderSwitchDropDown() : this._renderAccountName();
-  }
-
-  private _renderSwitchDropDown(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-
-    const menuProps: IContextualMenuProps = {
-      directionalHintFixed: true,
-      className: "accountSwitchContextualMenu",
-      items: [
-        {
-          key: "switchSubscription",
-          onRender: this._renderSubscriptionDropdown.bind(this)
-        },
-        {
-          key: "switchAccount",
-          onRender: this._renderAccountDropDown.bind(this)
-        }
-      ]
-    };
-
-    const buttonStyles: IButtonStyles = {
-      root: {
-        fontSize: StyleConstants.DefaultFontSize,
-        height: 40,
-        padding: 0,
-        paddingLeft: 10,
-        marginRight: 5,
-        backgroundColor: StyleConstants.BaseDark,
-        color: StyleConstants.BaseLight
-      },
-      rootHovered: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootFocused: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootPressed: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootExpanded: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      textContainer: {
-        flexGrow: "initial"
-      }
-    };
-
-    const buttonProps: IButtonProps = {
-      text: displayText || selectedAccountName,
-      menuProps: menuProps,
-      styles: buttonStyles,
-      className: "accountSwitchButton",
-      id: "accountSwitchButton"
-    };
-
-    return <DefaultButton {...buttonProps} />;
-  }
-
-  private _renderSubscriptionDropdown(): JSX.Element {
-    const { subscriptions, selectedSubscriptionId, isLoadingSubscriptions } = this.props;
-    const options: IDropdownOption[] = subscriptions.map(sub => {
-      return {
-        key: sub.subscriptionId,
-        text: sub.displayName,
-        data: sub
-      };
-    });
-
-    const placeHolderText = isLoadingSubscriptions
-      ? "Loading subscriptions"
-      : !options || !options.length
-      ? "No subscriptions found in current directory"
-      : "Select subscription from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Subscription",
-      className: "accountSwitchSubscriptionDropdown",
-      options: options,
-      onChange: this._onSubscriptionDropdownChange,
-      defaultSelectedKey: selectedSubscriptionId,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchSubscriptionDropdownMenu"
-      }
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onSubscriptionDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onSubscriptionChange(option.data);
-  };
-
-  private _renderAccountDropDown(): JSX.Element {
-    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
-    const options: IDropdownOption[] = accounts.map(account => {
-      return {
-        key: account.name,
-        text: account.name,
-        data: account
-      };
-    });
-    // Fabric UI will also try to select the first non-disabled option from dropdown.
-    // Add a option to prevent pop the message when user click on dropdown on first time.
-    options.unshift({
-      key: "select from list",
-      text: "Select Cosmos DB account from list",
-      data: undefined
-    });
-
-    const placeHolderText = isLoadingAccounts
-      ? "Loading Cosmos DB accounts"
-      : !options || !options.length
-      ? "No Cosmos DB accounts found"
-      : "Select Cosmos DB account from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Cosmos DB Account Name",
-      className: "accountSwitchAccountDropdown",
-      options: options,
-      onChange: this._onAccountDropdownChange,
-      defaultSelectedKey: selectedAccountName,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchAccountDropdownMenu"
-      }
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onAccountDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onAccountChange(option.data);
-  };
-
-  private _renderAccountName(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-    return <span className="accountNameHeader">{displayText || selectedAccountName}</span>;
-  }
-}
--- a/src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx
+++ b/src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx
@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
-
-export class AccountSwitchComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<AccountSwitchComponentProps>;
-
-  public renderComponent(): JSX.Element {
-    return <AccountSwitchComponent {...this.parameters()} />;
-  }
-}
--- a/src/Explorer/Controls/AccountSwitch/snapshots/AccountSwitchComponent.test.tsx.snap
+++ b/src/Explorer/Controls/AccountSwitch/snapshots/AccountSwitchComponent.test.tsx.snap
@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders auth aad, with all information 1`] = `
-<CustomizedDefaultButton
-  className="accountSwitchButton"
-  id="accountSwitchButton"
-  menuProps={
-    Object {
-      "className": "accountSwitchContextualMenu",
-      "directionalHintFixed": true,
-      "items": Array [
-        Object {
-          "key": "switchSubscription",
-          "onRender": [Function],
-        },
-        Object {
-          "key": "switchAccount",
-          "onRender": [Function],
-        },
-      ],
-    }
-  }
-  styles={
-    Object {
-      "root": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-        "fontSize": undefined,
-        "height": 40,
-        "marginRight": 5,
-        "padding": 0,
-        "paddingLeft": 10,
-      },
-      "rootExpanded": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootFocused": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootHovered": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootPressed": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "textContainer": Object {
-        "flexGrow": "initial",
-      },
-    }
-  }
-  text="account2"
-/>
-`;
-
-exports[`test render renders auth security token, with selected account name 1`] = `
-<span
-  className="accountNameHeader"
->
-  testaccount
-</span>
-`;
-
-exports[`test render renders no auth type -> handle error in code 1`] = `
-<span
-  className="accountNameHeader"
-/>
-`;
--- 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/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -38,7 +38,7 @@ export interface CommandButtonComponentProps {
  /**
   * Label for the button
   */
-  commandButtonLabel: string;
+  commandButtonLabel?: string;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    if (policy.mode === DataModels.ConflictResolutionMode.LastWriterWins) {
      policy.conflictResolutionPath = this.state.conflictResolutionPolicyPath;
-      if (!policy.conflictResolutionPath?.startsWith("/")) {
+      if (policy.conflictResolutionPath?.startsWith("/")) {
        policy.conflictResolutionPath = "/" + policy.conflictResolutionPath;
      }
    }
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -66,7 +66,7 @@ export interface PriceBreakdown {
  currencySign: string;
 }

-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };

 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
  label: {
@@ -166,10 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
  ]
 };

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

 export const throughputUnit = "RU/s";

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

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

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

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

    this.step = this.props.step ?? ThroughputInputAutoPilotV3Component.defaultStep;
@@ -432,7 +424,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 +432,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 +443,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
  private onChoiceGroupChange = (
    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
    option?: IChoiceGroupOption
-  ): void => {
-    this.props.onAutoPilotSelected(option.key === "true");
-    TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-      changedSelectedValueTo:
-        option.key === "true" ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-      subscriptionId: userContext.subscriptionId,
-      databaseAccountName: this.props.databaseAccount?.name,
-      databaseName: this.props.databaseName,
-      collectionName: this.props.collectionName,
-      apiKind: userContext.defaultExperience,
-      dataExplorerArea: "Scale Tab V2"
-    });
-  };
+  ): void => this.props.onAutoPilotSelected(option.key === "true");

  private minRUperGBSurvey = (): JSX.Element => {
    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
@@ -500,10 +479,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
          />
        </Label>
        {this.overrideWithProvisionedThroughputSettings() && (
-          <MessageBar
-            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-            styles={messageBarStyles}
-          >
+          <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
            {manualToAutoscaleDisclaimerElement}
          </MessageBar>
        )}
@@ -580,21 +556,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        }
        onChange={this.onThroughputChange}
      />
-      {this.state.exceedFreeTierThroughput && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-          styles={messageBarStyles}
-        >
-          {
-            "Billing will apply if you provision more than 400 RU/s of manual throughput, or if the resource scales beyond 400 RU/s with autoscale."
-          }
-        </MessageBar>
-      )}
      {this.props.getThroughputWarningMessage() && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
          {this.props.getThroughputWarningMessage()}
        </MessageBar>
      )}
@@ -620,15 +583,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
      warningMessage = saveThroughputWarningMessage;
    }

-    return (
-      <>
-        {warningMessage && (
-          <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
-            {warningMessage}
-          </MessageBar>
-        )}
-      </>
-    );
+    return <>{warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}</>;
  };

  public render(): JSX.Element {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -9,18 +9,13 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
  }
 >
  <StyledMessageBarBase
-    messageBarIconProps={
-      Object {
-        "className": "messageBarWarningIcon",
-        "iconName": "WarningSolid",
-      }
-    }
+    messageBarType={5}
  >
    <Text
      styles={
        Object {
          "root": Object {
-            "fontSize": 14,
+            "fontSize": 12,
          },
        }
      }
@@ -39,7 +34,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -50,21 +45,12 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
      />
    </StyledLabelBase>
    <StyledMessageBarBase
-      messageBarIconProps={
-        Object {
-          "className": "messageBarInfoIcon",
-          "iconName": "InfoSolid",
-        }
-      }
+      messageBarType={5}
      styles={
        Object {
          "root": Object {
-            "backgroundColor": "white",
            "marginTop": "5px",
          },
-          "text": Object {
-            "fontSize": 14,
-          },
        }
      }
    >
@@ -73,7 +59,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
        styles={
          Object {
            "root": Object {
-              "fontSize": 14,
+              "fontSize": 12,
            },
          }
        }
@@ -185,7 +171,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
@@ -458,7 +444,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
            styles={
              Object {
                "root": Object {
-                  "fontSize": 14,
+                  "fontSize": 12,
                },
              }
            }
--- 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
@@ -159,7 +159,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -176,7 +176,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -195,7 +195,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -207,7 +207,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -219,7 +219,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -230,7 +230,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -249,7 +249,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -268,7 +268,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -286,7 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -299,7 +299,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -310,7 +310,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -329,7 +329,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -371,7 +371,7 @@ exports[`SettingsUtils functions render 1`] = `
      styles={
        Object {
          "root": Object {
-            "fontSize": 14,
+            "fontSize": 12,
          },
        }
      }
@@ -386,7 +386,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
@@ -402,7 +402,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
        },
      }
    }
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, SmartUiDescriptor, UiType } from "./SmartUiComponent";
+import { SmartUiComponent, Descriptor, InputType } from "./SmartUiComponent";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-    <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
-      <span class="freeTierWarningIcon"><img src="/warning.svg" alt="Warning"/></span>
-      <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
-    </div>
-
    <p data-bind="visible: costsVisible">
      <span data-bind="html: requestUnitsUsageCost"></span>
    </p>
--- a/src/Explorer/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,7 +131,6 @@ 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>;
@@ -160,7 +156,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 +207,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 +257,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 +292,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>();
@@ -411,7 +402,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 +412,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 +693,6 @@ export default class Explorer {
    });

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

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

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

    this._initSettings();
@@ -1274,16 +1260,6 @@ export default class Explorer {
    $("#contextSwitchPrompt").dialog("open");
  }

-  public displayConnectExplorerForm(): void {
-    $("#divExplorer").hide();
-    $("#connectExplorer").css("display", "flex");
-  }
-
-  public hideConnectExplorerForm(): void {
-    $("#connectExplorer").hide();
-    $("#divExplorer").show();
-  }
-
  public isReadWriteToggled: () => boolean = (): boolean => {
    return this.shareAccessToggleState() === ShareAccessToggleState.ReadWrite;
  };
@@ -1853,25 +1829,11 @@ 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.
      // This allows webpack hot reload to funciton properly
-      if (process.env.NODE_ENV === "development") {
+      if (process.env.NODE_ENV === "development" && configContext.platform === Platform.Portal) {
        sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
      }

@@ -1890,7 +1852,6 @@ export default class Explorer {
      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription);
      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken);
      this.setFeatureFlagsFromFlights(inputs.flights);
-      this.setSelfServeType(inputs);
      this._importExplorerConfigComplete = true;

      updateConfigContext({
@@ -1907,16 +1868,6 @@ export default class Explorer {
        subscriptionType: inputs.subscriptionType,
        quotaId: inputs.quotaId
      });
-      TelemetryProcessor.traceSuccess(
-        Action.LoadDatabaseAccount,
-        {
-          resourceId: this.databaseAccount && this.databaseAccount().id,
-          dataExplorerArea: Constants.Areas.ResourceTree,
-          databaseAccount: this.databaseAccount && this.databaseAccount()
-        },
-        inputs.loadDatabaseAccountTimestamp
-      );
-
      this.isAccountReady(true);
    }
  }
@@ -1925,12 +1876,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 {
@@ -3049,25 +2994,4 @@ export default class Explorer {
      })
    );
  }
-
-  public isFirstResourceCreated(): boolean {
-    const databases: ViewModels.Database[] = this.databases();
-
-    if (!databases || databases.length === 0) {
-      return false;
-    }
-
-    return databases.some(database => {
-      // user has created at least one collection
-      if (database.collections()?.length > 0) {
-        return true;
-      }
-      // user has created a database with shared throughput
-      if (database.offer()) {
-        return true;
-      }
-      // use has created an empty database without shared throughput
-      return false;
-    });
-  }
 }
--- a/src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
@@ -11,9 +11,7 @@ export class ArraysByKeyCache<T> {

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

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

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

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

@@ -496,7 +496,7 @@ export class GraphData<V extends GremlinVertex, E extends GremlinEdge> {
   * Get list of children ids of a given vertex
   * @param vertex
   */
-  public static getChildrenId(vertex: GremlinVertex): string[] {
+  private static getChildrenId(vertex: GremlinVertex): string[] {
    const ids = <any>{}; // HashSet
    if (vertex.hasOwnProperty("outE")) {
      let outE = vertex.outE;
--- a/src/Explorer/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/NavBar/MeControlComponent.tsx
+++ b/src/Explorer/Menus/NavBar/MeControlComponent.tsx
@@ -1,3 +1,4 @@
+import "./MeControlComponent.less";
 import * as React from "react";
 import { DefaultButton, BaseButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
 import { DirectionalHint, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -11,8 +11,8 @@ import ErrorBlackIcon from "../../../../images/error_black.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
 import ErrorRedIcon from "../../../../images/error_red.svg";
-import ClearIcon from "../../../../images/Clear.svg";
 import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
+import ClearIcon from "../../../../images/Clear.svg";
 import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
 import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -182,18 +182,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
      return isFreeTierAccount;
    });

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

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

    this.upsellMessageAriaLabel = ko.pureComputed<string>(() => {
@@ -337,7 +313,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
  public resetData() {
    this.databaseId("");
    this.databaseCreateNewShared(this.getSharedThroughputDefault());
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    this.isAutoPilotSelected(false);
    this.maxAutoPilotThroughputSet(AutoPilotUtils.minAutoPilotThroughput);
    this._updateThroughputLimitByDatabase();
    this.throughputSpendAck(false);
--- a/src/Explorer/Panes/CassandraAddCollectionPane.ts
+++ b/src/Explorer/Panes/CassandraAddCollectionPane.ts
@@ -451,8 +451,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
  public resetData() {
    super.resetData();
    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    this.isAutoPilotSelected(false);
+    this.isSharedAutoPilotSelected(false);
    this.selectedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
    this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
    this.throughput(AddCollectionUtility.getMaxThroughput(this.container.collectionCreationDefaults, this.container));
--- a/src/Explorer/Panes/RenewAdHocAccessPane.ts
+++ b/src/Explorer/Panes/RenewAdHocAccessPane.ts
@@ -2,7 +2,7 @@ import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { ConnectionStringParser } from "../../Platform/Hosted/Helpers/ConnectionStringParser";
+import { parseConnectionString } from "../../Platform/Hosted/Helpers/ConnectionStringParser";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
@@ -48,9 +48,7 @@ export class RenewAdHocAccessPane extends ContextualPaneBase {
  };

  private _shouldShowContextSwitchPrompt(): boolean {
-    const inputMetadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
-      this.accessKey()
-    );
+    const inputMetadata: DataModels.AccessInputMetadata = parseConnectionString(this.accessKey());
    const apiKind: DataModels.ApiKind =
      this.container && DefaultExperienceUtility.getApiKindFromDefaultExperience(this.container.defaultExperience());
    const hasOpenedTabs: boolean =
--- a/src/Explorer/Tables/DataTable/CacheBase.ts
+++ b/src/Explorer/Tables/DataTable/CacheBase.ts
@@ -1,5 +1,5 @@
 abstract class CacheBase<T> {
-  public data: T[] | null;
+  public data: T[];
  public sortOrder: any;
  public serverCallInProgress: boolean;

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

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

-export interface ErrorDataModel {
-  message: string;
-  severity?: string;
-  location?: {
-    start: string;
-    end: string;
-  };
-  code?: string;
-}
-
-function parseError(err: any): ErrorDataModel[] {
-  try {
-    return _parse(err);
-  } catch (e) {
-    return [<ErrorDataModel>{ message: JSON.stringify(err) }];
-  }
-}
-
-function _parse(err: any): ErrorDataModel[] {
-  var normalizedErrors: ErrorDataModel[] = [];
-  if (err.message && !err.code) {
-    normalizedErrors.push(err);
-  } else {
-    const innerErrors: any[] = _getInnerErrors(err.message);
-    normalizedErrors = innerErrors.map(innerError =>
-      typeof innerError === "string" ? { message: innerError } : innerError
-    );
-  }
-
-  return normalizedErrors;
-}
-
-function _getInnerErrors(message: string): any[] {
-  /*
-            The backend error message has an inner-message which is a stringified object. 
-            For SQL errors, the "errors" property is an array of SqlErrorDataModel.
-            Example:
-                "Message: {"Errors":["Resource with specified id or name already exists"]}\r\nActivityId: 80005000008d40b6a, Request URI: /apps/19000c000c0a0005/services/mctestdocdbprod-MasterService-0-00066ab9937/partitions/900005f9000e676fb8/replicas/13000000000955p"
-            For non-SQL errors the "Errors" propery is an array of string.
-            Example:
-                "Message: {"errors":[{"severity":"Error","location":{"start":7,"end":8},"code":"SC1001","message":"Syntax error, incorrect syntax near '.'."}]}\r\nActivityId: d3300016d4084e310a, Request URI: /apps/12401f9e1df77/services/dc100232b1f44545/partitions/f86f3bc0001a2f78/replicas/13085003638s"
-        */
-
-  let innerMessage: any = null;
-
-  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
-  try {
-    // Multi-Partition error flavor
-    const regExp = /^(.*)ActivityId: (.*)/g;
-    const regString = regExp.exec(singleLineMessage);
-    const innerMessageString = regString[1];
-    innerMessage = JSON.parse(innerMessageString);
-  } catch (e) {
-    // Single-partition error flavor
-    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
-    const regString = regExp.exec(singleLineMessage);
-    const innerMessageString = regString[1];
-    innerMessage = JSON.parse(innerMessageString);
-  }
-
-  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
-}
-
 /**
 * Storage Table Entity List ViewModel
 */
@@ -448,17 +387,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
        }
      })
      .catch((error: any) => {
-        const parsedErrors = parseError(error);
-        var errors = parsedErrors.map(error => {
-          return <ViewModels.QueryError>{
-            message: error.message,
-            start: error.location ? error.location.start : undefined,
-            end: error.location ? error.location.end : undefined,
-            code: error.code,
-            severity: error.severity
-          };
-        });
-        this.queryErrorMessage(errors[0].message);
+        const errorMessage = getErrorMessage(error);
+        this.queryErrorMessage(errorMessage);
        if (this.queryTablesTab.onLoadStartKey != null && this.queryTablesTab.onLoadStartKey != undefined) {
          TelemetryProcessor.traceFailure(
            Action.Tab,
@@ -469,7 +399,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
              defaultExperience: this.queryTablesTab.collection.container.defaultExperience(),
              dataExplorerArea: Areas.Tab,
              tabTitle: this.queryTablesTab.tabTitle(),
-              error: error
+              error: errorMessage,
+              errorStack: getErrorStack(error)
            },
            this.queryTablesTab.onLoadStartKey
          );
@@ -490,53 +421,47 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   * Note that this also means that we can get less entities than the requested download size in a successful call.
   * See Microsoft Azure API Documentation at: https://msdn.microsoft.com/en-us/library/azure/dd135718.aspx
   */
-  private prefetchData(
+  private async prefetchData(
    tableQuery: Entities.ITableQuery,
    downloadSize: number,
    currentRetry: number = 0
-  ): Q.Promise<any> {
+  ): Promise<IListTableEntitiesSegmentedResult> {
    if (!this.cache.serverCallInProgress) {
      this.cache.serverCallInProgress = true;
      this.allDownloaded = false;
      this.lastPrefetchTime = new Date().getTime();
-      var time = this.lastPrefetchTime;
+      const time = this.lastPrefetchTime;

-      var promise: Q.Promise<IListTableEntitiesSegmentedResult>;
      if (this._documentIterator && this.continuationToken) {
        // TODO handle Cassandra case
+        const response = await this._documentIterator.fetchNext();
+        const entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(response?.resources);

-        promise = Q(this._documentIterator.fetchNext().then(response => response.resources)).then(
-          (documents: any[]) => {
-            let entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(documents);
-            let finalEntities: IListTableEntitiesSegmentedResult = <IListTableEntitiesSegmentedResult>{
-              Results: entities,
-              ContinuationToken: this._documentIterator.hasMoreResults()
-            };
-            return Q.resolve(finalEntities);
-          }
-        );
-      } else if (this.continuationToken && this.queryTablesTab.container.isPreferredApiCassandra()) {
-        promise = Q(
-          this.queryTablesTab.container.tableDataClient.queryDocuments(
+        return {
+          Results: entities,
+          ContinuationToken: this._documentIterator.hasMoreResults()
+        };
+      }
+
+      try {
+        let documents: IListTableEntitiesSegmentedResult;
+        if (this.continuationToken && this.queryTablesTab.container.isPreferredApiCassandra()) {
+          documents = await this.queryTablesTab.container.tableDataClient.queryDocuments(
            this.queryTablesTab.collection,
            this.cqlQuery(),
            true,
            this.continuationToken
-          )
-        );
-      } else {
-        let query = this.sqlQuery();
-        if (this.queryTablesTab.container.isPreferredApiCassandra()) {
-          query = this.cqlQuery();
-        }
-        promise = Q(
-          this.queryTablesTab.container.tableDataClient.queryDocuments(this.queryTablesTab.collection, query, true)
-        );
-      }
-      return promise
-        .then((result: IListTableEntitiesSegmentedResult) => {
+          );
+        } else {
+          const query = this.queryTablesTab.container.isPreferredApiCassandra() ? this.cqlQuery() : this.sqlQuery();
+          documents = await this.queryTablesTab.container.tableDataClient.queryDocuments(
+            this.queryTablesTab.collection,
+            query,
+            true
+          );
+
          if (!this._documentIterator) {
-            this._documentIterator = result.iterator;
+            this._documentIterator = documents.iterator;
          }
          var actualDownloadSize: number = 0;

@@ -547,11 +472,11 @@ export default class TableEntityListViewModel extends DataTableViewModel {
            return Q.resolve(null);
          }

-          var entities = result.Results;
+          var entities = documents.Results;
          actualDownloadSize = entities.length;

          // Queries can fetch no results and still return a continuation header. See prefetchAndRender() method.
-          this.continuationToken = this.isCancelled ? null : result.ContinuationToken;
+          this.continuationToken = this.isCancelled ? null : documents.ContinuationToken;

          if (!this.continuationToken) {
            this.allDownloaded = true;
@@ -583,20 +508,22 @@ export default class TableEntityListViewModel extends DataTableViewModel {
          // For #2.1, set prefetch exceeds maximum retry number and end prefetch.
          // For #2.2, go to next round prefetch.
          if (this.allDownloaded || nextDownloadSize === 0) {
-            return Q.resolve(result);
+            return documents;
          }

          if (currentRetry >= TableEntityListViewModel._maximumNumberOfPrefetchRetries) {
-            result.ExceedMaximumRetries = true;
-            return Q.resolve(result);
+            documents.ExceedMaximumRetries = true;
+            return documents;
          }
-          return this.prefetchData(tableQuery, nextDownloadSize, currentRetry + 1);
-        })
-        .catch((error: Error) => {
-          this.cache.serverCallInProgress = false;
-          return Q.reject(error);
-        });
+
+          return await this.prefetchData(tableQuery, nextDownloadSize, currentRetry + 1);
+        }
+      } catch (error) {
+        this.cache.serverCallInProgress = false;
+        throw error;
+      }
    }
-    return null;
+
+    return undefined;
  }
 }
--- 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
@@ -312,10 +312,9 @@ export class CassandraAPIDataClient extends TableDataClient {
        const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting row ${currEntityToDelete.RowKey._}`);
        const partitionKeyValue = currEntityToDelete[partitionKeyProperty];
        const currQuery =
-          query +
-          (this.isStringType(partitionKeyValue.$)
+          query + this.isStringType(partitionKeyValue.$)
            ? `${partitionKeyProperty} = '${partitionKeyValue._}'`
-            : `${partitionKeyProperty} = ${partitionKeyValue._}`);
+            : `${partitionKeyProperty} = ${partitionKeyValue._}`;

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

  private _hasProvisioningTypeChanged: ko.Computed<boolean>;
  private _wasAutopilotOriginallySet: ko.Observable<boolean>;
@@ -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();
  }

--- 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"
--- 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";
@@ -29,7 +31,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 +120,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
@@ -328,6 +324,21 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
        queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
      this.showingDocumentsDisplayText(resultsDisplay);
      this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);
+
+      if (!this.queryResults() && !results) {
+        const errorMessage: string = JSON.stringify({
+          error: `Returned no results after query execution`,
+          accountName: this.collection && this.collection.container.databaseAccount(),
+          databaseName: this.collection && this.collection.databaseId,
+          collectionName: this.collection && this.collection.id(),
+          sqlQuery: this.sqlStatementToExecute(),
+          hasMoreResults: resultsMetadata.hasMoreResults,
+          itemCount: resultsMetadata.itemCount,
+          responseHeaders: queryResults && queryResults.headers
+        });
+        Logger.logError(errorMessage, "QueryTab");
+      }
+
      this.queryResults(results);

      TelemetryProcessor.traceSuccess(
--- a/src/Explorer/Tree/AccessibleVerticalList.ts
+++ b/src/Explorer/Tree/AccessibleVerticalList.ts
@@ -8,7 +8,7 @@ enum ScrollPosition {

 export class AccessibleVerticalList {
  private items: any[] = [];
-  private onSelect?: (item: any) => void;
+  private onSelect: (item: any) => void;

  public currentItemIndex: ko.Observable<number>;
  public currentItem: ko.Computed<any>;
@@ -42,9 +42,7 @@ export class AccessibleVerticalList {
      const targetElement = targetContainer
        .getElementsByClassName("accessibleListElement")
        .item(this.currentItemIndex());
-      if (targetElement) {
-        this.scrollElementIntoContainerViewIfNeeded(targetElement, targetContainer, ScrollPosition.Top);
-      }
+      this.scrollElementIntoContainerViewIfNeeded(targetElement, targetContainer, ScrollPosition.Top);
      return false;
    }
    if (event.keyCode === 40) {
@@ -54,9 +52,7 @@ export class AccessibleVerticalList {
      const targetElement = targetContainer
        .getElementsByClassName("accessibleListElement")
        .item(this.currentItemIndex());
-      if (targetElement) {
-        this.scrollElementIntoContainerViewIfNeeded(targetElement, targetContainer, ScrollPosition.Top);
-      }
+      this.scrollElementIntoContainerViewIfNeeded(targetElement, targetContainer, ScrollPosition.Bottom);
      return false;
    }
    return true;
--- a/src/HostedExplorer.ts
+++ b/src/HostedExplorer.ts
--- a/src/HostedExplorer.tsx
+++ b/src/HostedExplorer.tsx
@@ -0,0 +1,140 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { initializeIcons } from "office-ui-fabric-react";
+import * as React from "react";
+import { render } from "react-dom";
+import ChevronRight from "../images/chevron-right.svg";
+import "../less/hostedexplorer.less";
+import { AuthType } from "./AuthType";
+import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
+import { DatabaseAccount } from "./Contracts/DataModels";
+import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
+import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
+import "./Explorer/Menus/NavBar/MeControlComponent.less";
+import { usePortalAccessToken } from "./hooks/usePortalAccessToken";
+import { MeControl } from "./Platform/Hosted/Components/MeControl";
+import "./Platform/Hosted/ConnectScreen.less";
+import "./Shared/appInsights";
+import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
+import { useAADAuth } from "./hooks/useAADAuth";
+import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
+import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
+import { extractMasterKeyfromConnectionString } from "./Platform/Hosted/HostedUtils";
+
+initializeIcons();
+
+const App: React.FunctionComponent = () => {
+  // For handling encrypted portal tokens sent via query paramter
+  const params = new URLSearchParams(window.location.search);
+  const [encryptedToken, setEncryptedToken] = React.useState<string>(params && params.get("key"));
+  const encryptedTokenMetadata = usePortalAccessToken(encryptedToken);
+
+  // For showing/hiding panel
+  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
+
+  const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login, switchTenant } = useAADAuth();
+  const [databaseAccount, setDatabaseAccount] = React.useState<DatabaseAccount>();
+  const [authType, setAuthType] = React.useState<AuthType>(encryptedToken ? AuthType.EncryptedToken : undefined);
+  const [connectionString, setConnectionString] = React.useState<string>();
+
+  const ref = React.useRef<HTMLIFrameElement>();
+
+  React.useEffect(() => {
+    // If ref.current is undefined no iframe has been rendered
+    if (ref.current) {
+      // In hosted mode, we can set global properties directly on the child iframe.
+      // This is not possible in the portal where the iframes have different origins
+      const frameWindow = ref.current.contentWindow as HostedExplorerChildFrame;
+      // AAD authenticated uses ALWAYS using AAD authType
+      if (isLoggedIn) {
+        frameWindow.hostedConfig = {
+          authType: AuthType.AAD,
+          databaseAccount,
+          authorizationToken: armToken
+        };
+      } else if (authType === AuthType.EncryptedToken) {
+        frameWindow.hostedConfig = {
+          authType: AuthType.EncryptedToken,
+          encryptedToken,
+          encryptedTokenMetadata
+        };
+      } else if (authType === AuthType.ConnectionString) {
+        frameWindow.hostedConfig = {
+          authType: AuthType.ConnectionString,
+          encryptedToken,
+          encryptedTokenMetadata,
+          masterKey: extractMasterKeyfromConnectionString(connectionString)
+        };
+      } else if (authType === AuthType.ResourceToken) {
+        frameWindow.hostedConfig = {
+          authType: AuthType.ResourceToken,
+          resourceToken: connectionString
+        };
+      }
+    }
+  }, [ref, encryptedToken, encryptedTokenMetadata, isLoggedIn, databaseAccount]);
+
+  const showAccount = (isLoggedIn && databaseAccount) || (encryptedTokenMetadata && encryptedTokenMetadata);
+
+  return (
+    <>
+      <header>
+        <div className="items" role="menubar">
+          <div className="cosmosDBTitle">
+            <span
+              className="title"
+              onClick={() => window.open("https://portal.azure.com", "_blank")}
+              tabIndex={0}
+              title="Go to Azure Portal"
+            >
+              Microsoft Azure
+            </span>
+            <span className="accontSplitter" /> <span className="serviceTitle">Cosmos DB</span>
+            {(isLoggedIn || encryptedTokenMetadata?.accountName) && (
+              <img className="chevronRight" src={ChevronRight} alt="account separator" />
+            )}
+            {isLoggedIn && (
+              <span className="accountSwitchComponentContainer">
+                <AccountSwitcher armToken={armToken} setDatabaseAccount={setDatabaseAccount} />
+              </span>
+            )}
+            {!isLoggedIn && encryptedTokenMetadata?.accountName && (
+              <span className="accountSwitchComponentContainer">
+                <span className="accountNameHeader">{encryptedTokenMetadata?.accountName}</span>
+              </span>
+            )}
+          </div>
+          <FeedbackCommandButton />
+          <div className="meControl">
+            {isLoggedIn ? (
+              <MeControl {...{ graphToken, openPanel, logout, account }} />
+            ) : (
+              <SignInButton {...{ login }} />
+            )}
+          </div>
+        </div>
+      </header>
+      {showAccount && (
+        // Ideally we would import and render data explorer like any other React component, however
+        // because it still has a significant amount of Knockout code, this would lead to memory leaks.
+        // Knockout does not have a way to tear down all of its binding and listeners with a single method.
+        // It's possible this can be changed once all knockout code has been removed.
+        <iframe
+          // Setting key is needed so React will re-render this element on any account change
+          key={databaseAccount?.id || encryptedTokenMetadata?.accountName}
+          ref={ref}
+          id="explorerMenu"
+          name="explorer"
+          className="iframe"
+          title="explorer"
+          src="explorer.html?v=1.0.1&platform=Hosted"
+        ></iframe>
+      )}
+      {!isLoggedIn && !encryptedTokenMetadata && (
+        <ConnectExplorer {...{ login, setEncryptedToken, setAuthType, connectionString, setConnectionString }} />
+      )}
+      {isLoggedIn && <DirectoryPickerPanel {...{ isOpen, dismissPanel, armToken, tenantId, switchTenant }} />}
+    </>
+  );
+};
+
+render(<App />, document.getElementById("App"));
--- a/src/HostedExplorerChildFrame.ts
+++ b/src/HostedExplorerChildFrame.ts
@@ -0,0 +1,32 @@
+import { AuthType } from "./AuthType";
+import { AccessInputMetadata, DatabaseAccount } from "./Contracts/DataModels";
+
+export interface HostedExplorerChildFrame extends Window {
+  hostedConfig: AAD | ConnectionString | EncryptedToken | ResourceToken;
+}
+
+interface AAD {
+  authType: AuthType.AAD;
+  databaseAccount: DatabaseAccount;
+  authorizationToken: string;
+}
+
+interface ConnectionString {
+  authType: AuthType.ConnectionString;
+  // Connection string uses still use encrypted token for Cassandra/Mongo APIs as they us the portal backend proxy
+  encryptedToken: string;
+  encryptedTokenMetadata: AccessInputMetadata;
+  // Master key is currently only used by Graph API. All other APIs use encrypted tokens and proxy with connection string
+  masterKey?: string;
+}
+
+interface EncryptedToken {
+  authType: AuthType.EncryptedToken;
+  encryptedToken: string;
+  encryptedTokenMetadata: AccessInputMetadata;
+}
+
+interface ResourceToken {
+  authType: AuthType.ResourceToken;
+  resourceToken: string;
+}
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -44,7 +44,6 @@ import "./Libs/jquery";
 import "bootstrap/dist/js/npm";
 import "../externals/jquery.typeahead.min.js";
 import "../externals/jquery-ui.min.js";
-import "../externals/adal.js";
 import "promise-polyfill/src/polyfill";
 import "abort-controller/polyfill";
 import "whatwg-fetch";
@@ -56,19 +55,11 @@ import "url-polyfill/url-polyfill.min";

 initializeIcons();

-import * as ko from "knockout";
-import * as TelemetryProcessor from "./Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "./Shared/Telemetry/TelemetryConstants";
-
-import { BindingHandlersRegisterer } from "./Bindings/BindingHandlersRegisterer";
-import * as Emulator from "./Platform/Emulator/Main";
-import Hosted from "./Platform/Hosted/Main";
-import * as Portal from "./Platform/Portal/Main";
 import { AuthType } from "./AuthType";

 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import { applyExplorerBindings } from "./applyExplorerBindings";
-import { initializeConfiguration, Platform } from "./ConfigContext";
+import { configContext, initializeConfiguration, Platform } from "./ConfigContext";
 import Explorer from "./Explorer/Explorer";
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
@@ -78,65 +69,201 @@ import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
 import refreshImg from "../images/refresh-cosmos.svg";
 import arrowLeftImg from "../images/imgarrowlefticon.svg";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
+import { updateUserContext } from "./UserContext";
+import AuthHeadersUtil from "./Platform/Hosted/Authorization";
+import { CollectionCreation } from "./Shared/Constants";
+import { extractFeatures } from "./Platform/Hosted/extractFeatures";
+import { emulatorAccount } from "./Platform/Emulator/emulatorAccount";
+import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
+import {
+  getDatabaseAccountKindFromExperience,
+  getDatabaseAccountPropertiesFromMetadata
+} from "./Platform/Hosted/HostedUtils";
+import { DefaultExperienceUtility } from "./Shared/DefaultExperienceUtility";
+import { parseResourceTokenConnectionString } from "./Platform/Hosted/Helpers/ResourceTokenUtils";
+import { AccountKind, DefaultAccountExperience } from "./Common/Constants";

-// TODO: Encapsulate and reuse all global variables as environment variables
-window.authType = AuthType.AAD;
+// const accountResourceId =
+// authType === AuthType.EncryptedToken
+//   ? Main._databaseAccountId
+//   : authType === AuthType.AAD && account
+//   ? account.id
+//   : "";
+// const subscriptionId: string =
+// accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
+// const resourceGroup: string =
+// accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];

 const App: React.FunctionComponent = () => {
  useEffect(() => {
    initializeConfiguration().then(config => {
+      let explorer: Explorer;
      if (config.platform === Platform.Hosted) {
-        try {
-          Hosted.initializeExplorer().then(
-            (explorer: Explorer) => {
-              applyExplorerBindings(explorer);
-              Hosted.configureTokenValidationDisplayPrompt(explorer);
-            },
-            (error: unknown) => {
-              try {
-                const uninitializedExplorer: Explorer = Hosted.getUninitializedExplorerForGuestAccess();
-                window.dataExplorer = uninitializedExplorer;
-                ko.applyBindings(uninitializedExplorer);
-                BindingHandlersRegisterer.registerBindingHandlers();
-                if (window.authType !== AuthType.AAD) {
-                  uninitializedExplorer.isRefreshingExplorer(false);
-                  uninitializedExplorer.displayConnectExplorerForm();
-                }
-              } catch (e) {
-                console.log(e);
-              }
-              console.error(error);
-            }
+        const win = (window as unknown) as HostedExplorerChildFrame;
+        explorer = new Explorer();
+        if (win.hostedConfig.authType === AuthType.EncryptedToken) {
+          // TODO: Remove window.authType
+          window.authType = AuthType.EncryptedToken;
+          // Impossible to tell if this is a try cosmos sub using an encrypted token
+          explorer.isTryCosmosDBSubscription(false);
+          updateUserContext({
+            accessToken: encodeURIComponent(win.hostedConfig.encryptedToken)
+          });
+
+          const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
+            win.hostedConfig.encryptedTokenMetadata.apiKind
          );
-        } catch (e) {
-          console.log(e);
+          explorer.initDataExplorerWithFrameInputs({
+            databaseAccount: {
+              id: "",
+              // id: Main._databaseAccountId,
+              name: win.hostedConfig.encryptedTokenMetadata.accountName,
+              kind: getDatabaseAccountKindFromExperience(apiExperience),
+              properties: getDatabaseAccountPropertiesFromMetadata(win.hostedConfig.encryptedTokenMetadata),
+              tags: []
+            },
+            subscriptionId: undefined,
+            resourceGroup: undefined,
+            masterKey: undefined,
+            hasWriteAccess: true, // TODO: we should embed this information in the token ideally
+            authorizationToken: undefined,
+            features: extractFeatures(),
+            csmEndpoint: undefined,
+            dnsSuffix: undefined,
+            serverId: AuthHeadersUtil.serverId,
+            extensionEndpoint: configContext.BACKEND_ENDPOINT,
+            subscriptionType: CollectionCreation.DefaultSubscriptionType,
+            quotaId: undefined,
+            addCollectionDefaultFlight: explorer.flight(),
+            isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription()
+          });
+          explorer.isAccountReady(true);
+        } else if (win.hostedConfig.authType === AuthType.ResourceToken) {
+          window.authType = AuthType.ResourceToken;
+          // Resource tokens can only be used with SQL API
+          const apiExperience: string = DefaultAccountExperience.DocumentDB;
+          const parsedResourceToken = parseResourceTokenConnectionString(win.hostedConfig.resourceToken);
+          updateUserContext({
+            resourceToken: parsedResourceToken.resourceToken
+          });
+          return explorer.initDataExplorerWithFrameInputs({
+            databaseAccount: {
+              id: "",
+              name: parsedResourceToken.accountEndpoint,
+              kind: AccountKind.GlobalDocumentDB,
+              properties: { documentEndpoint: parsedResourceToken.accountEndpoint },
+              tags: { defaultExperience: apiExperience }
+            },
+            subscriptionId: undefined,
+            resourceGroup: undefined,
+            masterKey: undefined,
+            hasWriteAccess: true, // TODO: we should embed this information in the token ideally
+            authorizationToken: undefined,
+            features: extractFeatures(),
+            csmEndpoint: undefined,
+            dnsSuffix: undefined,
+            serverId: AuthHeadersUtil.serverId,
+            extensionEndpoint: configContext.BACKEND_ENDPOINT,
+            subscriptionType: CollectionCreation.DefaultSubscriptionType,
+            quotaId: undefined,
+            addCollectionDefaultFlight: explorer.flight(),
+            isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription(),
+            isAuthWithresourceToken: true
+          });
+        } else if (win.hostedConfig.authType === AuthType.ConnectionString) {
+          // For legacy reasons lots of code expects a connection string login to look and act like an encrypted token login
+          window.authType = AuthType.EncryptedToken;
+          // Impossible to tell if this is a try cosmos sub using an encrypted token
+          explorer.isTryCosmosDBSubscription(false);
+          updateUserContext({
+            accessToken: encodeURIComponent(win.hostedConfig.encryptedToken)
+          });
+
+          const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
+            win.hostedConfig.encryptedTokenMetadata.apiKind
+          );
+          explorer.initDataExplorerWithFrameInputs({
+            databaseAccount: {
+              id: "",
+              // id: Main._databaseAccountId,
+              name: win.hostedConfig.encryptedTokenMetadata.accountName,
+              kind: getDatabaseAccountKindFromExperience(apiExperience),
+              properties: getDatabaseAccountPropertiesFromMetadata(win.hostedConfig.encryptedTokenMetadata),
+              tags: []
+            },
+            subscriptionId: undefined,
+            resourceGroup: undefined,
+            masterKey: win.hostedConfig.masterKey,
+            hasWriteAccess: true, // TODO: we should embed this information in the token ideally
+            authorizationToken: undefined,
+            features: extractFeatures(),
+            csmEndpoint: undefined,
+            dnsSuffix: undefined,
+            serverId: AuthHeadersUtil.serverId,
+            extensionEndpoint: configContext.BACKEND_ENDPOINT,
+            subscriptionType: CollectionCreation.DefaultSubscriptionType,
+            quotaId: undefined,
+            addCollectionDefaultFlight: explorer.flight(),
+            isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription()
+          });
+          explorer.isAccountReady(true);
+        } else if (win.hostedConfig.authType === AuthType.AAD) {
+          window.authType = AuthType.AAD;
+          const account = win.hostedConfig.databaseAccount;
+          const accountResourceId = account.id;
+          const subscriptionId = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
+          const resourceGroup = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
+          updateUserContext({
+            databaseAccount: win.hostedConfig.databaseAccount
+          });
+          explorer.initDataExplorerWithFrameInputs({
+            databaseAccount: account,
+            subscriptionId,
+            resourceGroup,
+            masterKey: "",
+            hasWriteAccess: true, //TODO: 425017 - support read access
+            authorizationToken: `Bearer ${win.hostedConfig.authorizationToken}`,
+            features: extractFeatures(),
+            csmEndpoint: undefined,
+            dnsSuffix: undefined,
+            serverId: AuthHeadersUtil.serverId,
+            extensionEndpoint: configContext.BACKEND_ENDPOINT,
+            subscriptionType: CollectionCreation.DefaultSubscriptionType,
+            quotaId: undefined,
+            addCollectionDefaultFlight: explorer.flight(),
+            isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription()
+          });
+          explorer.isAccountReady(true);
        }
      } else if (config.platform === Platform.Emulator) {
        window.authType = AuthType.MasterKey;
-        const explorer = Emulator.initializeExplorer();
-        applyExplorerBindings(explorer);
+        explorer = new Explorer();
+        explorer.databaseAccount(emulatorAccount);
+        explorer.isAccountReady(true);
      } else if (config.platform === Platform.Portal) {
-        TelemetryProcessor.trace(Action.InitializeDataExplorer, ActionModifiers.Open, {});
-        const explorer = Portal.initializeExplorer();
-        TelemetryProcessor.trace(Action.InitializeDataExplorer, ActionModifiers.IFrameReady, {});
-        applyExplorerBindings(explorer);
+        explorer = new Explorer();
+
+        // In development mode, try to load the iframe message from session storage.
+        // This allows webpack hot reload to funciton properly
+        if (process.env.NODE_ENV === "development") {
+          const initMessage = sessionStorage.getItem("portalDataExplorerInitMessage");
+          if (initMessage) {
+            const message = JSON.parse(initMessage);
+            console.warn("Loaded cached portal iframe message from session storage");
+            console.dir(message);
+            explorer.initDataExplorerWithFrameInputs(message);
+          }
+        }
+
+        window.addEventListener("message", explorer.handleMessage.bind(explorer), false);
      }
+      applyExplorerBindings(explorer);
    });
  }, []);

  return (
    <div className="flexContainer">
-      <div
-        id="divSelfServe"
-        className="flexContainer"
-        data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter"
-      ></div>
-      <div
-        id="divExplorer"
-        data-bind="if: selfServeType() === 'none'"
-        className="flexContainer hideOverflows"
-        style={{ display: "none" }}
-      >
+      <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
        {/* Main Command Bar - Start */}
        <div data-bind="react: commandBarComponentAdapter" />
        {/* Main Command Bar - End */}
@@ -187,7 +314,7 @@ const App: React.FunctionComponent = () => {
                  aria-label="Share url link"
                  className="shareLink"
                  type="text"
-                  read-only
+                  read-only={true}
                  data-bind="value: shareAccessUrl"
                />
                <span
@@ -381,21 +508,17 @@ const App: React.FunctionComponent = () => {
      </div>
      {/* Explorer Connection - Encryption Token / AAD - End */}
      {/* Global loader - Start */}
-
      <div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
        <div className="splashLoaderContentContainer">
-          <div data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter"></div>
-          <div data-bind="if: selfServeType() === 'none'" style={{ display: "none" }}>
-            <p className="connectExplorerContent">
-              <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-            </p>
-            <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-              Welcome to Azure Cosmos DB
-            </p>
-            <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-              Connecting...
-            </p>
-          </div>
+          <p className="connectExplorerContent">
+            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+          </p>
+          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+            Welcome to Azure Cosmos DB
+          </p>
+          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+            Connecting...
+          </p>
        </div>
      </div>
      {/* Global loader - End */}
--- a/src/Platform/Emulator/Main.ts
+++ b/src/Platform/Emulator/Main.ts
@@ -1,25 +0,0 @@
-import Explorer from "../../Explorer/Explorer";
-import { AccountKind, DefaultAccountExperience, TagNames } from "../../Common/Constants";
-
-export function initializeExplorer(): Explorer {
-  const explorer = new Explorer();
-  explorer.databaseAccount({
-    name: "",
-    id: "",
-    location: "",
-    type: "",
-    kind: AccountKind.DocumentDB,
-    tags: {
-      [TagNames.defaultExperience]: DefaultAccountExperience.DocumentDB
-    },
-    properties: {
-      documentEndpoint: "",
-      tableEndpoint: "",
-      gremlinEndpoint: "",
-      cassandraEndpoint: ""
-    }
-  });
-
-  explorer.isAccountReady(true);
-  return explorer;
-}
--- a/src/Platform/Emulator/emulatorAccount.tsx
+++ b/src/Platform/Emulator/emulatorAccount.tsx
@@ -0,0 +1,18 @@
+import { AccountKind, DefaultAccountExperience, TagNames } from "../../Common/Constants";
+
+export const emulatorAccount = {
+  name: "",
+  id: "",
+  location: "",
+  type: "",
+  kind: AccountKind.DocumentDB,
+  tags: {
+    [TagNames.defaultExperience]: DefaultAccountExperience.DocumentDB
+  },
+  properties: {
+    documentEndpoint: "",
+    tableEndpoint: "",
+    gremlinEndpoint: "",
+    cassandraEndpoint: ""
+  }
+};
--- a/src/Platform/Hosted/ArmResourceUtils.ts
+++ b/src/Platform/Hosted/ArmResourceUtils.ts
@@ -1,180 +0,0 @@
-import AuthHeadersUtil from "./Authorization";
-import * as Constants from "../../Common/Constants";
-import * as Logger from "../../Common/Logger";
-import { Tenant, Subscription, DatabaseAccount, AccountKeys } from "../../Contracts/DataModels";
-import { configContext } from "../../ConfigContext";
-import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
-
-// TODO: 421864 - add a fetch wrapper
-export abstract class ArmResourceUtils {
-  private static readonly _armEndpoint: string = configContext.ARM_ENDPOINT;
-  private static readonly _armApiVersion: string = configContext.ARM_API_VERSION;
-  private static readonly _armAuthArea: string = configContext.ARM_AUTH_AREA;
-
-  // TODO: 422867 - return continuation token instead of read through
-  public static async listTenants(): Promise<Array<Tenant>> {
-    let tenants: Array<Tenant> = [];
-
-    try {
-      const fetchHeaders = await ArmResourceUtils._getAuthHeader(ArmResourceUtils._armAuthArea);
-      let nextLink = `${ArmResourceUtils._armEndpoint}/tenants?api-version=2017-08-01`;
-
-      while (nextLink) {
-        const response: Response = await fetch(nextLink, { headers: fetchHeaders });
-        const result: TenantListResult =
-          response.status === 204 || response.status === 304 ? null : await response.json();
-        if (!response.ok) {
-          throw result;
-        }
-        nextLink = result.nextLink;
-        tenants = [...tenants, ...result.value];
-      }
-      return tenants;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArmResourceUtils/listTenants");
-      throw error;
-    }
-  }
-
-  // TODO: 422867 - return continuation token instead of read through
-  public static async listSubscriptions(tenantId?: string): Promise<Array<Subscription>> {
-    let subscriptions: Array<Subscription> = [];
-
-    try {
-      const fetchHeaders = await ArmResourceUtils._getAuthHeader(ArmResourceUtils._armAuthArea, tenantId);
-      let nextLink = `${ArmResourceUtils._armEndpoint}/subscriptions?api-version=${ArmResourceUtils._armApiVersion}`;
-
-      while (nextLink) {
-        const response: Response = await fetch(nextLink, { headers: fetchHeaders });
-        const result: SubscriptionListResult =
-          response.status === 204 || response.status === 304 ? null : await response.json();
-        if (!response.ok) {
-          throw result;
-        }
-        nextLink = result.nextLink;
-        const validSubscriptions = result.value.filter(
-          sub => sub.state === "Enabled" || sub.state === "Warned" || sub.state === "PastDue"
-        );
-        subscriptions = [...subscriptions, ...validSubscriptions];
-      }
-      return subscriptions;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArmResourceUtils/listSubscriptions");
-      throw error;
-    }
-  }
-
-  // TODO: 422867 - return continuation token instead of read through
-  public static async listCosmosdbAccounts(
-    subscriptionIds: string[],
-    tenantId?: string
-  ): Promise<Array<DatabaseAccount>> {
-    if (!subscriptionIds || !subscriptionIds.length) {
-      return Promise.reject("No subscription passed in");
-    }
-
-    let accounts: Array<DatabaseAccount> = [];
-
-    try {
-      const subscriptionFilter = "subscriptionId eq '" + subscriptionIds.join("' or subscriptionId eq '") + "'";
-      const urlFilter = `$filter=(${subscriptionFilter}) and (resourceType eq 'microsoft.documentdb/databaseaccounts')`;
-      const fetchHeaders = await ArmResourceUtils._getAuthHeader(ArmResourceUtils._armAuthArea, tenantId);
-      let nextLink = `${ArmResourceUtils._armEndpoint}/resources?api-version=${ArmResourceUtils._armApiVersion}&${urlFilter}`;
-
-      while (nextLink) {
-        const response: Response = await fetch(nextLink, { headers: fetchHeaders });
-        const result: AccountListResult =
-          response.status === 204 || response.status === 304 ? null : await response.json();
-        if (!response.ok) {
-          throw result;
-        }
-        nextLink = result.nextLink;
-        accounts = [...accounts, ...result.value];
-      }
-      return accounts;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArmResourceUtils/listAccounts");
-      throw error;
-    }
-  }
-
-  public static async getCosmosdbAccount(cosmosdbResourceId: string, tenantId?: string): Promise<DatabaseAccount> {
-    if (!cosmosdbResourceId) {
-      return Promise.reject("No Cosmos DB resource id passed in");
-    }
-    try {
-      const fetchHeaders = await ArmResourceUtils._getAuthHeader(ArmResourceUtils._armAuthArea, tenantId);
-      const url = `${ArmResourceUtils._armEndpoint}/${cosmosdbResourceId}?api-version=${Constants.ArmApiVersions.documentDB}`;
-
-      const response: Response = await fetch(url, { headers: fetchHeaders });
-      const result: DatabaseAccount = response.status === 204 || response.status === 304 ? null : await response.json();
-      if (!response.ok) {
-        throw result;
-      }
-      return result;
-    } catch (error) {
-      throw error;
-    }
-  }
-
-  public static async getCosmosdbKeys(cosmosdbResourceId: string, tenantId?: string): Promise<AccountKeys> {
-    if (!cosmosdbResourceId) {
-      return Promise.reject("No Cosmos DB resource id passed in");
-    }
-
-    try {
-      const fetchHeaders = await ArmResourceUtils._getAuthHeader(ArmResourceUtils._armAuthArea, tenantId);
-      const readWriteKeysUrl = `${ArmResourceUtils._armEndpoint}/${cosmosdbResourceId}/listKeys?api-version=${Constants.ArmApiVersions.documentDB}`;
-      const readOnlyKeysUrl = `${ArmResourceUtils._armEndpoint}/${cosmosdbResourceId}/readOnlyKeys?api-version=${Constants.ArmApiVersions.documentDB}`;
-      let response: Response = await fetch(readWriteKeysUrl, { headers: fetchHeaders, method: "POST" });
-      if (response.status === Constants.HttpStatusCodes.Forbidden) {
-        // fetch read only keys for readers
-        response = await fetch(readOnlyKeysUrl, { headers: fetchHeaders, method: "POST" });
-      }
-      const result: AccountKeys =
-        response.status === Constants.HttpStatusCodes.NoContent ||
-        response.status === Constants.HttpStatusCodes.NotModified
-          ? null
-          : await response.json();
-      if (!response.ok) {
-        throw result;
-      }
-      return result;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArmResourceUtils/getAccountKeys");
-      throw error;
-    }
-  }
-
-  public static async getAuthToken(tenantId?: string): Promise<string> {
-    try {
-      const token = await AuthHeadersUtil.getAccessToken(ArmResourceUtils._armAuthArea, tenantId);
-      return token;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArmResourceUtils/getAuthToken");
-      throw error;
-    }
-  }
-
-  private static async _getAuthHeader(authArea: string, tenantId?: string): Promise<Headers> {
-    const token = await AuthHeadersUtil.getAccessToken(authArea, tenantId);
-    let fetchHeaders = new Headers();
-    fetchHeaders.append("authorization", `Bearer ${token}`);
-    return fetchHeaders;
-  }
-}
-
-interface TenantListResult {
-  nextLink: string;
-  value: Tenant[];
-}
-
-interface SubscriptionListResult {
-  nextLink: string;
-  value: Subscription[];
-}
-
-interface AccountListResult {
-  nextLink: string;
-  value: DatabaseAccount[];
-}
--- a/src/Platform/Hosted/Authorization.ts
+++ b/src/Platform/Hosted/Authorization.ts
@@ -1,5 +1,3 @@
-import "expose-loader?AuthenticationContext!../../../externals/adal";
-
 import Q from "q";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
@@ -14,29 +12,6 @@ import { userContext } from "../../UserContext";
 export default class AuthHeadersUtil {
  public static serverId: string = Constants.ServerIds.productionPortal;

-  private static readonly _firstPartyAppId: string = "203f1145-856a-4232-83d4-a43568fba23d";
-  private static readonly _aadEndpoint: string = configContext.AAD_ENDPOINT;
-  private static readonly _armEndpoint: string = configContext.ARM_ENDPOINT;
-  private static readonly _arcadiaEndpoint: string = configContext.ARCADIA_ENDPOINT;
-  private static readonly _armAuthArea: string = configContext.ARM_AUTH_AREA;
-  private static readonly _graphEndpoint: string = configContext.GRAPH_ENDPOINT;
-  private static readonly _graphApiVersion: string = configContext.GRAPH_API_VERSION;
-
-  private static _authContext: AuthenticationContext = new AuthenticationContext({
-    instance: AuthHeadersUtil._aadEndpoint,
-    clientId: AuthHeadersUtil._firstPartyAppId,
-    postLogoutRedirectUri: window.location.origin,
-    endpoints: {
-      aad: AuthHeadersUtil._aadEndpoint,
-      graph: AuthHeadersUtil._graphEndpoint,
-      armAuthArea: AuthHeadersUtil._armAuthArea,
-      armEndpoint: AuthHeadersUtil._armEndpoint,
-      arcadiaEndpoint: AuthHeadersUtil._arcadiaEndpoint
-    },
-    tenant: undefined,
-    cacheLocation: window.navigator.userAgent.indexOf("Edge") > -1 ? "localStorage" : undefined
-  });
-
  public static getAccessInputMetadata(accessInput: string): Q.Promise<DataModels.AccessInputMetadata> {
    const deferred: Q.Deferred<DataModels.AccessInputMetadata> = Q.defer<DataModels.AccessInputMetadata>();
    const url = `${configContext.BACKEND_ENDPOINT}${Constants.ApiEndpoints.guestRuntimeProxy}/accessinputmetadata`;
@@ -118,154 +93,6 @@ export default class AuthHeadersUtil {
    });
  }

-  public static isUserSignedIn(): boolean {
-    const user = AuthHeadersUtil._authContext.getCachedUser();
-    return !!user;
-  }
-
-  public static getCachedUser(): AuthenticationContext.UserInfo {
-    if (this.isUserSignedIn()) {
-      return AuthHeadersUtil._authContext.getCachedUser();
-    }
-    return undefined;
-  }
-
-  public static signIn() {
-    if (!AuthHeadersUtil.isUserSignedIn()) {
-      AuthHeadersUtil._authContext.login();
-    }
-  }
-
-  public static signOut() {
-    AuthHeadersUtil._authContext.logOut();
-  }
-
-  /**
-   * Process token from oauth after login or get cached
-   */
-  public static processTokenResponse() {
-    const isCallback = AuthHeadersUtil._authContext.isCallback(window.location.hash);
-    if (isCallback && !AuthHeadersUtil._authContext.getLoginError()) {
-      AuthHeadersUtil._authContext.handleWindowCallback();
-    }
-  }
-
-  /**
-   * Get auth token to access apis (Graph, ARM)
-   *
-   * @param authEndpoint Default to ARM endpoint
-   * @param tenantId if tenant id provided, tenant id will set at global. Can be reset with 'common'
-   */
-  public static async getAccessToken(
-    authEndpoint: string = AuthHeadersUtil._armAuthArea,
-    tenantId?: string
-  ): Promise<string> {
-    const AuthorizationType: string = (<any>window).authType;
-    if (AuthorizationType === AuthType.EncryptedToken) {
-      // setting authorization header to an undefined value causes the browser to exclude
-      // the header, which is expected here
-      throw new Error("auth type is encrypted token, should not get access token");
-    }
-
-    return new Promise<string>(async (resolve, reject) => {
-      if (tenantId) {
-        // if tenant id passed in, we will use this tenant id for all the rest calls until next tenant id passed in
-        AuthHeadersUtil._authContext.config.tenant = tenantId;
-      }
-
-      AuthHeadersUtil._authContext.acquireToken(
-        authEndpoint,
-        AuthHeadersUtil._authContext.config.tenant,
-        (errorResponse: any, token: any) => {
-          if (errorResponse && typeof errorResponse === "string") {
-            if (errorResponse.indexOf("login is required") >= 0 || errorResponse.indexOf("AADSTS50058") === 0) {
-              // Handle error AADSTS50058: A silent sign-in request was sent but no user is signed in.
-              // The user's cached token is invalid, hence we let the user login again.
-              AuthHeadersUtil._authContext.login();
-              return;
-            }
-            if (
-              this._isMultifactorAuthRequired(errorResponse) ||
-              errorResponse.indexOf("AADSTS53000") > -1 ||
-              errorResponse.indexOf("AADSTS65001") > -1
-            ) {
-              // Handle error AADSTS50079 and AADSTS50076: User needs to use multifactor authentication and acquireToken fails silent. Redirect
-              // Handle error AADSTS53000: User needs to use compliant device to access resource when Conditional Access Policy is set up for user.
-              AuthHeadersUtil._authContext.acquireTokenRedirect(
-                authEndpoint,
-                AuthHeadersUtil._authContext.config.tenant
-              );
-              return;
-            }
-          }
-          if (errorResponse || !token) {
-            Logger.logError(errorResponse, "Hosted/Authorization/_getAuthHeader");
-            reject(errorResponse);
-            return;
-          }
-          resolve(token);
-        }
-      );
-    });
-  }
-
-  public static async getPhotoFromGraphAPI(): Promise<Blob> {
-    const token = await this.getAccessToken(AuthHeadersUtil._graphEndpoint);
-    const headers = new Headers();
-    headers.append("Authorization", `Bearer ${token}`);
-
-    try {
-      const response: Response = await fetch(
-        `${AuthHeadersUtil._graphEndpoint}/me/thumbnailPhoto?api-version=${AuthHeadersUtil._graphApiVersion}`,
-        {
-          method: "GET",
-          headers: headers
-        }
-      );
-      if (!response.ok) {
-        throw response;
-      }
-      return response.blob();
-    } catch (err) {
-      return new Blob();
-    }
-  }
-
-  private static async _getTenant(subId: string): Promise<string | undefined> {
-    if (subId) {
-      try {
-        // Follow https://github.com/MicrosoftDocs/azure-docs/blob/master/articles/azure-resource-manager/resource-manager-api-authentication.md
-        // TenantId will be returned in the header of the response.
-        const response: Response = await fetch(
-          `https://management.core.windows.net/subscriptions/${subId}?api-version=2015-01-01`
-        );
-        if (!response.ok) {
-          throw response;
-        }
-      } catch (reason) {
-        if (reason.status === 401) {
-          const authUrl: string = reason.headers
-            .get("www-authenticate")
-            .split(",")[0]
-            .split("=")[1];
-          // Fetch the tenant GUID ID and the length should be 36.
-          const tenantId: string = authUrl.substring(authUrl.lastIndexOf("/") + 1, authUrl.lastIndexOf("/") + 37);
-          return Promise.resolve(tenantId);
-        }
-      }
-    }
-    return Promise.resolve(undefined);
-  }
-
-  private static _isMultifactorAuthRequired(errorResponse: string): boolean {
-    for (const code of ["AADSTS50079", "AADSTS50076"]) {
-      if (errorResponse.indexOf(code) === 0) {
-        return true;
-      }
-    }
-    return false;
-  }
-
  private static _generateResourceUrl(): string {
    const databaseAccount = userContext.databaseAccount;
    const subscriptionId: string = userContext.subscriptionId;
--- a/src/Platform/Hosted/Components/AccountSwitcher.tsx
+++ b/src/Platform/Hosted/Components/AccountSwitcher.tsx
@@ -0,0 +1,139 @@
+// TODO: Renable this rule for the file or turn it off everywhere
+/* eslint-disable react/display-name */
+
+import { StyleConstants } from "../../../Common/Constants";
+import * as React from "react";
+import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
+import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
+import { Dropdown, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+import { useSubscriptions } from "../../../hooks/useSubscriptions";
+import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
+import { DatabaseAccount } from "../../../Contracts/DataModels";
+
+const buttonStyles: IButtonStyles = {
+  root: {
+    fontSize: StyleConstants.DefaultFontSize,
+    height: 40,
+    padding: 0,
+    paddingLeft: 10,
+    marginRight: 5,
+    backgroundColor: StyleConstants.BaseDark,
+    color: StyleConstants.BaseLight
+  },
+  rootHovered: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  rootFocused: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  rootPressed: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  rootExpanded: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  textContainer: {
+    flexGrow: "initial"
+  }
+};
+
+const cachedSubscriptionId = localStorage.getItem("cachedSubscriptionId");
+const cachedDatabaseAccountName = localStorage.getItem("cachedDatabaseAccountName");
+
+interface Props {
+  armToken: string;
+  setDatabaseAccount: (account: DatabaseAccount) => void;
+}
+
+export const AccountSwitcher: React.FunctionComponent<Props> = ({ armToken, setDatabaseAccount }: Props) => {
+  const subscriptions = useSubscriptions(armToken);
+  const [selectedSubscriptionId, setSelectedSubscriptionId] = React.useState<string>(cachedSubscriptionId);
+  const accounts = useDatabaseAccounts(selectedSubscriptionId, armToken);
+  const [selectedAccountName, setSelectedAccoutName] = React.useState<string>(cachedDatabaseAccountName);
+
+  React.useEffect(() => {
+    if (accounts && selectedAccountName) {
+      const account = accounts.find(account => account.name === selectedAccountName);
+      // Only set a new account if one is found
+      if (account) {
+        setDatabaseAccount(account);
+      }
+    }
+  }, [accounts, selectedAccountName]);
+
+  const menuProps: IContextualMenuProps = {
+    directionalHintFixed: true,
+    className: "accountSwitchContextualMenu",
+    items: [
+      {
+        key: "switchSubscription",
+        onRender: () => {
+          const dropdownProps: IDropdownProps = {
+            label: "Subscription",
+            className: "accountSwitchSubscriptionDropdown",
+            options: subscriptions.map(sub => {
+              return {
+                key: sub.subscriptionId,
+                text: sub.displayName,
+                data: sub
+              };
+            }),
+            onChange: (event, option) => {
+              const subscriptionId = String(option.key);
+              setSelectedSubscriptionId(subscriptionId);
+              localStorage.setItem("cachedSubscriptionId", subscriptionId);
+            },
+            defaultSelectedKey: selectedSubscriptionId,
+            placeholder: "Select subscription from list",
+            styles: {
+              callout: "accountSwitchSubscriptionDropdownMenu"
+            }
+          };
+
+          return <Dropdown {...dropdownProps} />;
+        }
+      },
+      {
+        key: "switchAccount",
+        onRender: (item, dismissMenu) => {
+          const dropdownProps: IDropdownProps = {
+            label: "Cosmos DB Account Name",
+            className: "accountSwitchAccountDropdown",
+            options: accounts.map(account => ({
+              key: account.name,
+              text: account.name,
+              data: account
+            })),
+            onChange: (event, option) => {
+              const accountName = String(option.key);
+              setSelectedAccoutName(String(option.key));
+              localStorage.setItem("cachedDatabaseAccountName", accountName);
+              dismissMenu();
+            },
+            defaultSelectedKey: selectedAccountName,
+            placeholder: "No Cosmos DB accounts found",
+            styles: {
+              callout: "accountSwitchAccountDropdownMenu"
+            }
+          };
+
+          return <Dropdown {...dropdownProps} />;
+        }
+      }
+    ]
+  };
+
+  return (
+    <DefaultButton
+      text={selectedAccountName || "Select Database Account"}
+      menuProps={menuProps}
+      styles={buttonStyles}
+      className="accountSwitchButton"
+      id="accountSwitchButton"
+    />
+  );
+};
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -0,0 +1,95 @@
+import * as React from "react";
+import { useBoolean } from "@uifabric/react-hooks";
+import { HttpHeaders } from "../../../Common/Constants";
+import { GenerateTokenResponse } from "../../../Contracts/DataModels";
+import { configContext } from "../../../ConfigContext";
+import { AuthType } from "../../../AuthType";
+import { isResourceTokenConnectionString } from "../Helpers/ResourceTokenUtils";
+
+interface Props {
+  connectionString: string;
+  login: () => void;
+  setEncryptedToken: (token: string) => void;
+  setConnectionString: (connectionString: string) => void;
+  setAuthType: (authType: AuthType) => void;
+}
+
+export const ConnectExplorer: React.FunctionComponent<Props> = ({
+  setEncryptedToken,
+  login,
+  setAuthType,
+  connectionString,
+  setConnectionString
+}: Props) => {
+  const [isFormVisible, { setTrue: showForm }] = useBoolean(false);
+
+  return (
+    <div id="connectExplorer" className="connectExplorerContainer" style={{ display: "flex" }}>
+      <div className="connectExplorerFormContainer">
+        <div className="connectExplorer">
+          <p className="connectExplorerContent">
+            <img src="images/HdeConnectCosmosDB.svg" alt="Azure Cosmos DB" />
+          </p>
+          <p className="welcomeText">Welcome to Azure Cosmos DB</p>
+          {isFormVisible ? (
+            <form
+              id="connectWithConnectionString"
+              onSubmit={async event => {
+                event.preventDefault();
+
+                if (isResourceTokenConnectionString(connectionString)) {
+                  setAuthType(AuthType.ResourceToken);
+                  return;
+                }
+
+                const headers = new Headers();
+                headers.append(HttpHeaders.connectionString, connectionString);
+                const url = configContext.BACKEND_ENDPOINT + "/api/guest/tokens/generateToken";
+                const response = await fetch(url, { headers, method: "POST" });
+                if (!response.ok) {
+                  throw response;
+                }
+                // This API has a quirk where it must be parsed twice
+                const result: GenerateTokenResponse = JSON.parse(await response.json());
+                console.log(result.readWrite || result.read);
+                setEncryptedToken(decodeURIComponent(result.readWrite || result.read));
+                setAuthType(AuthType.ConnectionString);
+              }}
+            >
+              <p className="connectExplorerContent connectStringText">Connect to your account with connection string</p>
+              <p className="connectExplorerContent">
+                <input
+                  className="inputToken"
+                  type="text"
+                  required
+                  placeholder="Please enter a connection string"
+                  value={connectionString}
+                  onChange={event => {
+                    setConnectionString(event.target.value);
+                  }}
+                />
+                <span className="errorDetailsInfoTooltip" style={{ display: "none" }}>
+                  <img className="errorImg" src="images/error.svg" alt="Error notification" />
+                  <span className="errorDetails"></span>
+                </span>
+              </p>
+              <p className="connectExplorerContent">
+                <input className="filterbtnstyle" type="submit" value="Connect" />
+              </p>
+              <p className="switchConnectTypeText" onClick={login}>
+                Sign In with Azure Account
+              </p>
+            </form>
+          ) : (
+            <div id="connectWithAad">
+              <input className="filterbtnstyle" type="button" value="Sign In" onClick={login} />
+              <p className="switchConnectTypeText" onClick={showForm}>
+                Connect to your account with connection string
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/Platform/Hosted/Components/DirectoryPickerPanel.tsx
+++ b/src/Platform/Hosted/Components/DirectoryPickerPanel.tsx
@@ -0,0 +1,39 @@
+import { Panel, PanelType, ChoiceGroup } from "office-ui-fabric-react";
+import * as React from "react";
+import { useDirectories } from "../../../hooks/useDirectories";
+
+interface Props {
+  isOpen: boolean;
+  dismissPanel: () => void;
+  tenantId: string;
+  armToken: string;
+  switchTenant: (tenantId: string) => void;
+}
+
+export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({
+  isOpen,
+  dismissPanel,
+  armToken,
+  tenantId,
+  switchTenant
+}: Props) => {
+  const directories = useDirectories(armToken);
+  return (
+    <Panel
+      type={PanelType.medium}
+      headerText="Select Directory"
+      isOpen={isOpen}
+      onDismiss={dismissPanel}
+      closeButtonAriaLabel="Close"
+    >
+      <ChoiceGroup
+        options={directories.map(dir => ({ key: dir.tenantId, text: `${dir.displayName} (${dir.tenantId})` }))}
+        selectedKey={tenantId}
+        onChange={async (event, option) => {
+          switchTenant(option.key);
+          dismissPanel();
+        }}
+      />
+    </Panel>
+  );
+};
--- a/src/Platform/Hosted/Components/FeedbackCommandButton.tsx
+++ b/src/Platform/Hosted/Components/FeedbackCommandButton.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { CommandButtonComponent } from "../../../Explorer/Controls/CommandButton/CommandButtonComponent";
+import FeedbackIcon from "../../../../images/Feedback.svg";
+
+export const FeedbackCommandButton: React.FunctionComponent = () => {
+  return (
+    <div className="feedbackConnectSettingIcons">
+      <CommandButtonComponent
+        id="commandbutton-feedback"
+        iconSrc={FeedbackIcon}
+        iconAlt="feeback button"
+        onCommandClick={() =>
+          window.open("https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Hosted%20Data%20Explorer%20Feedback")
+        }
+        ariaLabel="feeback button"
+        tooltipText="Send feedback"
+        hasPopup={true}
+        disabled={false}
+      />
+    </div>
+  );
+};
--- a/src/Platform/Hosted/Components/MeControl.tsx
+++ b/src/Platform/Hosted/Components/MeControl.tsx
@@ -0,0 +1,68 @@
+import {
+  FocusZone,
+  DefaultButton,
+  DirectionalHint,
+  Persona,
+  PersonaInitialsColor,
+  PersonaSize
+} from "office-ui-fabric-react";
+import * as React from "react";
+import { Account } from "msal";
+import { useGraphPhoto } from "../../../hooks/useGraphPhoto";
+
+interface Props {
+  graphToken: string;
+  account: Account;
+  openPanel: () => void;
+  logout: () => void;
+}
+
+export const MeControl: React.FunctionComponent<Props> = ({ openPanel, logout, account, graphToken }: Props) => {
+  const photo = useGraphPhoto(graphToken);
+  return (
+    <FocusZone>
+      <DefaultButton
+        id="mecontrolHeader"
+        className="mecontrolHeaderButton"
+        menuProps={{
+          className: "mecontrolContextualMenu",
+          isBeakVisible: false,
+          directionalHintFixed: true,
+          directionalHint: DirectionalHint.bottomRightEdge,
+          calloutProps: {
+            minPagePadding: 0
+          },
+          items: [
+            {
+              key: "SwitchDirectory",
+              text: "Switch Directory",
+              onClick: openPanel
+            },
+            {
+              key: "SignOut",
+              text: "Sign Out",
+              onClick: logout
+            }
+          ]
+        }}
+        styles={{
+          rootHovered: { backgroundColor: "#393939" },
+          rootFocused: { backgroundColor: "#393939" },
+          rootPressed: { backgroundColor: "#393939" },
+          rootExpanded: { backgroundColor: "#393939" }
+        }}
+      >
+        <Persona
+          imageUrl={photo}
+          text={account?.name}
+          secondaryText={account?.userName}
+          showSecondaryText={true}
+          showInitialsUntilImageLoads={true}
+          initialsColor={PersonaInitialsColor.teal}
+          size={PersonaSize.size28}
+          className="mecontrolHeaderPersona"
+        />
+      </DefaultButton>
+    </FocusZone>
+  );
+};
--- a/src/Platform/Hosted/Components/SignInButton.tsx
+++ b/src/Platform/Hosted/Components/SignInButton.tsx
@@ -0,0 +1,21 @@
+import { DefaultButton } from "office-ui-fabric-react";
+import * as React from "react";
+
+interface Props {
+  login: () => void;
+}
+
+export const SignInButton: React.FunctionComponent<Props> = ({ login }: Props) => {
+  return (
+    <DefaultButton
+      className="mecontrolSigninButton"
+      text="Sign In"
+      onClick={login}
+      styles={{
+        rootHovered: { backgroundColor: "#393939", color: "#fff" },
+        rootFocused: { backgroundColor: "#393939", color: "#fff" },
+        rootPressed: { backgroundColor: "#393939", color: "#fff" }
+      }}
+    />
+  );
+};
--- a/src/Platform/Hosted/ConnectScreen.less
+++ b/src/Platform/Hosted/ConnectScreen.less
@@ -0,0 +1,101 @@
+.connectExplorerContainer {
+  height: 100%;
+  width: 100%;
+}
+.connectExplorerContainer .connectExplorerFormContainer {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.connectExplorerContainer .connectExplorer {
+  text-align: center;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  margin-bottom: 60px;
+}
+.connectExplorerContainer .connectExplorer .welcomeText {
+  font-size: 14px;
+  color: #393939;
+  margin: 8px 8px 16px 8px;
+}
+.connectExplorerContainer .connectExplorer .switchConnectTypeText {
+  margin: 8px;
+  font-size: 12px;
+  color: #0058ad;
+  cursor: pointer;
+}
+.connectExplorerContainer .connectExplorer .connectStringText {
+  font-size: 12px;
+  color: #393939;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent {
+  margin: 8px;
+  color: #393939;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .inputToken {
+  width: 300px;
+  padding: 0px 4px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .inputToken::placeholder {
+  font-style: italic;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip {
+  position: relative;
+  display: inline-block;
+  padding-left: 4px;
+  vertical-align: top;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip:hover .errorDetails {
+  visibility: visible;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorDetails {
+  bottom: 24px;
+  width: 145px;
+  visibility: hidden;
+  background-color: #393939;
+  color: #ffffff;
+  position: absolute;
+  z-index: 1;
+  left: -10px;
+  padding: 6px;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorDetails:after {
+  border-width: 10px 10px 0px 10px;
+  bottom: -8px;
+  content: "";
+  position: absolute;
+  right: 100%;
+  border-style: solid;
+  left: 12px;
+  width: 0;
+  height: 0;
+  border-color: #3b3b3b transparent;
+}
+.connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorImg {
+  height: 14px;
+  width: 14px;
+}
+
+.filterbtnstyle {
+  background: #0058ad;
+  width: 90px;
+  height: 25px;
+  color: white;
+  border: solid 1px;
+}
--- a/src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
+++ b/src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
@@ -1,12 +1,12 @@
 import * as DataModels from "../../../Contracts/DataModels";
-import { ConnectionStringParser } from "./ConnectionStringParser";
+import { parseConnectionString } from "./ConnectionStringParser";

 describe("ConnectionStringParser", () => {
  const mockAccountName: string = "Test";
  const mockMasterKey: string = "some-key";

  it("should parse a valid sql account connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
+    const metadata = parseConnectionString(
      `AccountEndpoint=https://${mockAccountName}.documents.azure.com:443/;AccountKey=${mockMasterKey};`
    );

@@ -15,7 +15,7 @@ describe("ConnectionStringParser", () => {
  });

  it("should parse a valid mongo account connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
+    const metadata = parseConnectionString(
      `mongodb://${mockAccountName}:${mockMasterKey}@${mockAccountName}.documents.azure.com:10255`
    );

@@ -24,7 +24,7 @@ describe("ConnectionStringParser", () => {
  });

  it("should parse a valid compute mongo account connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
+    const metadata = parseConnectionString(
      `mongodb://${mockAccountName}:${mockMasterKey}@${mockAccountName}.mongo.cosmos.azure.com:10255`
    );

@@ -33,7 +33,7 @@ describe("ConnectionStringParser", () => {
  });

  it("should parse a valid graph account connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
+    const metadata = parseConnectionString(
      `AccountEndpoint=https://${mockAccountName}.documents.azure.com:443/;AccountKey=${mockMasterKey};ApiKind=Gremlin;`
    );

@@ -42,7 +42,7 @@ describe("ConnectionStringParser", () => {
  });

  it("should parse a valid table account connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
+    const metadata = parseConnectionString(
      `DefaultEndpointsProtocol=https;AccountName=${mockAccountName};AccountKey=${mockMasterKey};TableEndpoint=https://${mockAccountName}.table.cosmosdb.azure.com:443/;`
    );

@@ -51,7 +51,7 @@ describe("ConnectionStringParser", () => {
  });

  it("should parse a valid cassandra account connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
+    const metadata = parseConnectionString(
      `AccountEndpoint=${mockAccountName}.cassandra.cosmosdb.azure.com;AccountKey=${mockMasterKey};`
    );

@@ -60,15 +60,13 @@ describe("ConnectionStringParser", () => {
  });

  it("should fail to parse an invalid connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString(
-      "some-rogue-connection-string"
-    );
+    const metadata = parseConnectionString("some-rogue-connection-string");

    expect(metadata).toBe(undefined);
  });

  it("should fail to parse an empty connection string", () => {
-    const metadata: DataModels.AccessInputMetadata = ConnectionStringParser.parseConnectionString("");
+    const metadata = parseConnectionString("");

    expect(metadata).toBe(undefined);
  });
--- a/src/Platform/Hosted/Helpers/ConnectionStringParser.ts
+++ b/src/Platform/Hosted/Helpers/ConnectionStringParser.ts
@@ -1,50 +1,48 @@
 import * as Constants from "../../../Common/Constants";
-import * as DataModels from "../../../Contracts/DataModels";
+import { AccessInputMetadata, ApiKind } from "../../../Contracts/DataModels";

-export class ConnectionStringParser {
-  public static parseConnectionString(connectionString: string): DataModels.AccessInputMetadata {
-    if (!!connectionString) {
-      try {
-        const accessInput: DataModels.AccessInputMetadata = {} as DataModels.AccessInputMetadata;
-        const connectionStringParts = connectionString.split(";");
+export function parseConnectionString(connectionString: string): AccessInputMetadata {
+  if (connectionString) {
+    try {
+      const accessInput = {} as AccessInputMetadata;
+      const connectionStringParts = connectionString.split(";");

-        connectionStringParts.forEach((connectionStringPart: string) => {
-          if (RegExp(Constants.EndpointsRegex.sql).test(connectionStringPart)) {
-            accessInput.accountName = connectionStringPart.match(Constants.EndpointsRegex.sql)[1];
-            accessInput.apiKind = DataModels.ApiKind.SQL;
-          } else if (RegExp(Constants.EndpointsRegex.mongo).test(connectionStringPart)) {
-            const matches: string[] = connectionStringPart.match(Constants.EndpointsRegex.mongo);
-            accessInput.accountName = matches && matches.length > 1 && matches[2];
-            accessInput.apiKind = DataModels.ApiKind.MongoDB;
-          } else if (RegExp(Constants.EndpointsRegex.mongoCompute).test(connectionStringPart)) {
-            const matches: string[] = connectionStringPart.match(Constants.EndpointsRegex.mongoCompute);
-            accessInput.accountName = matches && matches.length > 1 && matches[2];
-            accessInput.apiKind = DataModels.ApiKind.MongoDBCompute;
-          } else if (Constants.EndpointsRegex.cassandra.some(regex => RegExp(regex).test(connectionStringPart))) {
-            Constants.EndpointsRegex.cassandra.forEach(regex => {
-              if (RegExp(regex).test(connectionStringPart)) {
-                accessInput.accountName = connectionStringPart.match(regex)[1];
-                accessInput.apiKind = DataModels.ApiKind.Cassandra;
-              }
-            });
-          } else if (RegExp(Constants.EndpointsRegex.table).test(connectionStringPart)) {
-            accessInput.accountName = connectionStringPart.match(Constants.EndpointsRegex.table)[1];
-            accessInput.apiKind = DataModels.ApiKind.Table;
-          } else if (connectionStringPart.indexOf("ApiKind=Gremlin") >= 0) {
-            accessInput.apiKind = DataModels.ApiKind.Graph;
-          }
-        });
-
-        if (Object.keys(accessInput).length === 0) {
-          return undefined;
+      connectionStringParts.forEach((connectionStringPart: string) => {
+        if (RegExp(Constants.EndpointsRegex.sql).test(connectionStringPart)) {
+          accessInput.accountName = connectionStringPart.match(Constants.EndpointsRegex.sql)[1];
+          accessInput.apiKind = ApiKind.SQL;
+        } else if (RegExp(Constants.EndpointsRegex.mongo).test(connectionStringPart)) {
+          const matches: string[] = connectionStringPart.match(Constants.EndpointsRegex.mongo);
+          accessInput.accountName = matches && matches.length > 1 && matches[2];
+          accessInput.apiKind = ApiKind.MongoDB;
+        } else if (RegExp(Constants.EndpointsRegex.mongoCompute).test(connectionStringPart)) {
+          const matches: string[] = connectionStringPart.match(Constants.EndpointsRegex.mongoCompute);
+          accessInput.accountName = matches && matches.length > 1 && matches[2];
+          accessInput.apiKind = ApiKind.MongoDBCompute;
+        } else if (Constants.EndpointsRegex.cassandra.some(regex => RegExp(regex).test(connectionStringPart))) {
+          Constants.EndpointsRegex.cassandra.forEach(regex => {
+            if (RegExp(regex).test(connectionStringPart)) {
+              accessInput.accountName = connectionStringPart.match(regex)[1];
+              accessInput.apiKind = ApiKind.Cassandra;
+            }
+          });
+        } else if (RegExp(Constants.EndpointsRegex.table).test(connectionStringPart)) {
+          accessInput.accountName = connectionStringPart.match(Constants.EndpointsRegex.table)[1];
+          accessInput.apiKind = ApiKind.Table;
+        } else if (connectionStringPart.indexOf("ApiKind=Gremlin") >= 0) {
+          accessInput.apiKind = ApiKind.Graph;
        }
+      });

-        return accessInput;
-      } catch (error) {
+      if (Object.keys(accessInput).length === 0) {
        return undefined;
      }
-    }

-    return undefined;
+      return accessInput;
+    } catch (error) {
+      return undefined;
+    }
  }
+
+  return undefined;
 }
--- a/src/Platform/Hosted/Helpers/ResourceTokenUtils.test.ts
+++ b/src/Platform/Hosted/Helpers/ResourceTokenUtils.test.ts
@@ -1,24 +1,10 @@
-import Main from "./Main";
-
-describe("Main", () => {
-  it("correctly detects feature flags", () => {
-    // Search containing non-features, with Camelcase keys and uri encoded values
-    const params = new URLSearchParams(
-      "?platform=Hosted&feature.notebookserverurl=https%3A%2F%2Flocalhost%3A10001%2F12345%2Fnotebook&feature.notebookServerToken=token&feature.enablenotebooks=true&key=mykey"
-    );
-    const features = Main.extractFeatures(params);
-
-    expect(features).toEqual({
-      notebookserverurl: "https://localhost:10001/12345/notebook",
-      notebookservertoken: "token",
-      enablenotebooks: "true"
-    });
-  });
+import { isResourceTokenConnectionString, parseResourceTokenConnectionString } from "./ResourceTokenUtils";

+describe("parseResourceTokenConnectionString", () => {
  it("correctly parses resource token connection string", () => {
    const connectionString =
      "AccountEndpoint=fakeEndpoint;DatabaseId=fakeDatabaseId;CollectionId=fakeCollectionId;type=resource&ver=1&sig=2dIP+CdIfT1ScwHWdv5GGw==;fakeToken;";
-    const properties = Main.parseResourceTokenConnectionString(connectionString);
+    const properties = parseResourceTokenConnectionString(connectionString);

    expect(properties).toEqual({
      accountEndpoint: "fakeEndpoint",
@@ -32,7 +18,7 @@ describe("Main", () => {
  it("correctly parses resource token connection string with partition key", () => {
    const connectionString =
      "type=resource&ver=1&sig=2dIP+CdIfT1ScwHWdv5GGw==;fakeToken;AccountEndpoint=fakeEndpoint;DatabaseId=fakeDatabaseId;CollectionId=fakeCollectionId;PartitionKey=fakePartitionKey;";
-    const properties = Main.parseResourceTokenConnectionString(connectionString);
+    const properties = parseResourceTokenConnectionString(connectionString);

    expect(properties).toEqual({
      accountEndpoint: "fakeEndpoint",
@@ -43,3 +29,16 @@ describe("Main", () => {
    });
  });
 });
+
+describe("isResourceToken", () => {
+  it("valid resource connection string", () => {
+    const connectionString =
+      "AccountEndpoint=fakeEndpoint;DatabaseId=fakeDatabaseId;CollectionId=fakeCollectionId;type=resource&ver=1&sig=2dIP+CdIfT1ScwHWdv5GGw==;fakeToken;";
+    expect(isResourceTokenConnectionString(connectionString)).toBe(true);
+  });
+
+  it("non-resource connection string", () => {
+    const connectionString = "AccountEndpoint=https://stfaul-sql.documents.azure.com:443/;AccountKey=foo;";
+    expect(isResourceTokenConnectionString(connectionString)).toBe(false);
+  });
+});
--- a/src/Platform/Hosted/Helpers/ResourceTokenUtils.ts
+++ b/src/Platform/Hosted/Helpers/ResourceTokenUtils.ts
@@ -0,0 +1,43 @@
+export interface ParsedResourceTokenConnectionString {
+  accountEndpoint: string;
+  collectionId: string;
+  databaseId: string;
+  partitionKey?: string;
+  resourceToken: string;
+}
+
+export function parseResourceTokenConnectionString(connectionString: string): ParsedResourceTokenConnectionString {
+  let accountEndpoint: string;
+  let collectionId: string;
+  let databaseId: string;
+  let partitionKey: string;
+  let resourceToken: string;
+  const connectionStringParts = connectionString.split(";");
+  connectionStringParts.forEach((part: string) => {
+    if (part.startsWith("type=resource")) {
+      resourceToken = part + ";";
+    } else if (part.startsWith("AccountEndpoint=")) {
+      accountEndpoint = part.substring(16);
+    } else if (part.startsWith("DatabaseId=")) {
+      databaseId = part.substring(11);
+    } else if (part.startsWith("CollectionId=")) {
+      collectionId = part.substring(13);
+    } else if (part.startsWith("PartitionKey=")) {
+      partitionKey = part.substring(13);
+    } else if (part !== "") {
+      resourceToken += part + ";";
+    }
+  });
+
+  return {
+    accountEndpoint,
+    collectionId,
+    databaseId,
+    partitionKey,
+    resourceToken
+  };
+}
+
+export function isResourceTokenConnectionString(connectionString: string): boolean {
+  return connectionString && connectionString.includes("type=resource");
+}
--- a/src/Platform/Hosted/HostedUtils.test.ts
+++ b/src/Platform/Hosted/HostedUtils.test.ts
@@ -1,9 +1,9 @@
 import { AccessInputMetadata } from "../../Contracts/DataModels";
-import { HostedUtils } from "./HostedUtils";
+import { getDatabaseAccountPropertiesFromMetadata } from "./HostedUtils";

 describe("getDatabaseAccountPropertiesFromMetadata", () => {
  it("should only return an object with the mongoEndpoint key if the apiKind is mongoCompute (5)", () => {
-    let mongoComputeAccount: AccessInputMetadata = {
+    const mongoComputeAccount: AccessInputMetadata = {
      accountName: "compute-batch2",
      apiEndpoint: "compute-batch2.mongo.cosmos.azure.com:10255",
      apiKind: 5,
@@ -11,21 +11,21 @@ describe("getDatabaseAccountPropertiesFromMetadata", () => {
      expiryTimestamp: "1234",
      mongoEndpoint: "https://compute-batch2.mongo.cosmos.azure.com:443/"
    };
-    expect(HostedUtils.getDatabaseAccountPropertiesFromMetadata(mongoComputeAccount)).toEqual({
+    expect(getDatabaseAccountPropertiesFromMetadata(mongoComputeAccount)).toEqual({
      mongoEndpoint: mongoComputeAccount.mongoEndpoint,
      documentEndpoint: mongoComputeAccount.documentEndpoint
    });
  });

  it("should not return an object with the mongoEndpoint key if the apiKind is mongo (1)", () => {
-    let mongoAccount: AccessInputMetadata = {
+    const mongoAccount: AccessInputMetadata = {
      accountName: "compute-batch2",
      apiEndpoint: "compute-batch2.mongo.cosmos.azure.com:10255",
      apiKind: 1,
      documentEndpoint: "https://compute-batch2.documents.azure.com:443/",
      expiryTimestamp: "1234"
    };
-    expect(HostedUtils.getDatabaseAccountPropertiesFromMetadata(mongoAccount)).toEqual({
+    expect(getDatabaseAccountPropertiesFromMetadata(mongoAccount)).toEqual({
      documentEndpoint: mongoAccount.documentEndpoint
    });
  });
--- a/src/Platform/Hosted/HostedUtils.ts
+++ b/src/Platform/Hosted/HostedUtils.ts
@@ -3,33 +3,49 @@ import * as DataModels from "../../Contracts/DataModels";
 import { AccessInputMetadata } from "../../Contracts/DataModels";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";

-export class HostedUtils {
-  static getDatabaseAccountPropertiesFromMetadata(metadata: AccessInputMetadata): any {
-    let properties = { documentEndpoint: metadata.documentEndpoint };
-    const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(metadata.apiKind);
+export function getDatabaseAccountPropertiesFromMetadata(metadata: AccessInputMetadata): unknown {
+  let properties = { documentEndpoint: metadata.documentEndpoint };
+  const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(metadata.apiKind);

-    if (apiExperience === Constants.DefaultAccountExperience.Cassandra) {
+  if (apiExperience === Constants.DefaultAccountExperience.Cassandra) {
+    properties = Object.assign(properties, {
+      cassandraEndpoint: metadata.apiEndpoint,
+      capabilities: [{ name: Constants.CapabilityNames.EnableCassandra }]
+    });
+  } else if (apiExperience === Constants.DefaultAccountExperience.Table) {
+    properties = Object.assign(properties, {
+      tableEndpoint: metadata.apiEndpoint,
+      capabilities: [{ name: Constants.CapabilityNames.EnableTable }]
+    });
+  } else if (apiExperience === Constants.DefaultAccountExperience.Graph) {
+    properties = Object.assign(properties, {
+      gremlinEndpoint: metadata.apiEndpoint,
+      capabilities: [{ name: Constants.CapabilityNames.EnableGremlin }]
+    });
+  } else if (apiExperience === Constants.DefaultAccountExperience.MongoDB) {
+    if (metadata.apiKind === DataModels.ApiKind.MongoDBCompute) {
      properties = Object.assign(properties, {
-        cassandraEndpoint: metadata.apiEndpoint,
-        capabilities: [{ name: Constants.CapabilityNames.EnableCassandra }]
+        mongoEndpoint: metadata.mongoEndpoint
      });
-    } else if (apiExperience === Constants.DefaultAccountExperience.Table) {
-      properties = Object.assign(properties, {
-        tableEndpoint: metadata.apiEndpoint,
-        capabilities: [{ name: Constants.CapabilityNames.EnableTable }]
-      });
-    } else if (apiExperience === Constants.DefaultAccountExperience.Graph) {
-      properties = Object.assign(properties, {
-        gremlinEndpoint: metadata.apiEndpoint,
-        capabilities: [{ name: Constants.CapabilityNames.EnableGremlin }]
-      });
-    } else if (apiExperience === Constants.DefaultAccountExperience.MongoDB) {
-      if (metadata.apiKind === DataModels.ApiKind.MongoDBCompute) {
-        properties = Object.assign(properties, {
-          mongoEndpoint: metadata.mongoEndpoint
-        });
-      }
    }
-    return properties;
  }
+  return properties;
+}
+
+export function getDatabaseAccountKindFromExperience(apiExperience: string): string {
+  if (apiExperience === Constants.DefaultAccountExperience.MongoDB) {
+    return Constants.AccountKind.MongoDB;
+  }
+
+  if (apiExperience === Constants.DefaultAccountExperience.ApiForMongoDB) {
+    return Constants.AccountKind.MongoDB;
+  }
+
+  return Constants.AccountKind.GlobalDocumentDB;
+}
+
+export function extractMasterKeyfromConnectionString(connectionString: string): string {
+  // Only Gremlin uses the actual master key for connection to cosmos
+  const matchedParts = connectionString.match("AccountKey=(.*);ApiKind=Gremlin;$");
+  return (matchedParts && matchedParts.length > 1 && matchedParts[1]) || undefined;
 }
--- a/src/Platform/Hosted/Main.ts
+++ b/src/Platform/Hosted/Main.ts
@@ -1,598 +0,0 @@
-import * as Constants from "../../Common/Constants";
-import AuthHeadersUtil from "./Authorization";
-import Q from "q";
-import {
-  AccessInputMetadata,
-  AccountKeys,
-  ApiKind,
-  DatabaseAccount,
-  GenerateTokenResponse,
-  resourceTokenConnectionStringProperties
-} from "../../Contracts/DataModels";
-import { AuthType } from "../../AuthType";
-import { CollectionCreation } from "../../Shared/Constants";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import { DataExplorerInputsFrame } from "../../Contracts/ViewModels";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { HostedUtils } from "./HostedUtils";
-import { sendMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { SessionStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import { SubscriptionUtilMappings } from "../../Shared/Constants";
-import "../../Explorer/Tables/DataTable/DataTableBindingManager";
-import Explorer from "../../Explorer/Explorer";
-import { updateUserContext } from "../../UserContext";
-import { configContext } from "../../ConfigContext";
-import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
-
-export default class Main {
-  private static _databaseAccountId: string;
-  private static _encryptedToken: string;
-  private static _accessInputMetadata: AccessInputMetadata;
-  private static _features: { [key: string]: string };
-  // For AAD, Need to post message to hosted frame to do the auth
-  // Use local deferred variable as work around until we find better solution
-  private static _getAadAccessDeferred: Q.Deferred<Explorer>;
-  private static _explorer: Explorer;
-
-  public static isUsingEncryptionToken(): boolean {
-    const params = new URLSearchParams(window.parent.location.search);
-    if ((!!params && params.has("key")) || Main._hasCachedEncryptedKey()) {
-      return true;
-    }
-    return false;
-  }
-
-  public static initializeExplorer(): Q.Promise<Explorer> {
-    window.addEventListener("message", this._handleMessage.bind(this), false);
-    this._features = {};
-    const params = new URLSearchParams(window.parent.location.search);
-    const deferred: Q.Deferred<Explorer> = Q.defer<Explorer>();
-    let authType: string = null;
-
-    // Encrypted token flow
-    if (!!params && params.has("key")) {
-      Main._encryptedToken = encodeURIComponent(params.get("key"));
-      SessionStorageUtility.setEntryString(StorageKey.EncryptedKeyToken, Main._encryptedToken);
-      authType = AuthType.EncryptedToken;
-    } else if (Main._hasCachedEncryptedKey()) {
-      Main._encryptedToken = SessionStorageUtility.getEntryString(StorageKey.EncryptedKeyToken);
-      authType = AuthType.EncryptedToken;
-    }
-
-    // Aad flow
-    if (AuthHeadersUtil.isUserSignedIn()) {
-      authType = AuthType.AAD;
-    }
-
-    if (params) {
-      this._features = Main.extractFeatures(params);
-    }
-
-    (<any>window).authType = authType;
-    if (!authType) {
-      return Q.reject("Sign in needed");
-    }
-
-    const explorer: Explorer = this._instantiateExplorer();
-    if (authType === AuthType.EncryptedToken) {
-      sendMessage({
-        type: MessageTypes.UpdateAccountSwitch,
-        props: {
-          authType: AuthType.EncryptedToken,
-          displayText: "Loading..."
-        }
-      });
-      updateUserContext({
-        accessToken: Main._encryptedToken
-      });
-      Main._getAccessInputMetadata(Main._encryptedToken).then(
-        () => {
-          const expiryTimestamp: number =
-            Main._accessInputMetadata && parseInt(Main._accessInputMetadata.expiryTimestamp);
-          if (authType === AuthType.EncryptedToken && (isNaN(expiryTimestamp) || expiryTimestamp <= 0)) {
-            return deferred.reject("Token expired");
-          }
-
-          Main._initDataExplorerFrameInputs(explorer);
-          deferred.resolve(explorer);
-        },
-        (error: any) => {
-          console.error(error);
-          deferred.reject(error);
-        }
-      );
-    } else if (authType === AuthType.AAD) {
-      sendMessage({
-        type: MessageTypes.GetAccessAadRequest
-      });
-      if (this._getAadAccessDeferred != null) {
-        // already request aad access, don't duplicate
-        return Q(null);
-      }
-      this._explorer = explorer;
-      this._getAadAccessDeferred = Q.defer<Explorer>();
-      return this._getAadAccessDeferred.promise.finally(() => {
-        this._getAadAccessDeferred = null;
-      });
-    } else {
-      Main._initDataExplorerFrameInputs(explorer);
-      deferred.resolve(explorer);
-    }
-
-    return deferred.promise;
-  }
-
-  public static extractFeatures(params: URLSearchParams): { [key: string]: string } {
-    const featureParamRegex = /feature.(.*)/i;
-    const features: { [key: string]: string } = {};
-    params.forEach((value: string, param: string) => {
-      if (featureParamRegex.test(param)) {
-        const matches: string[] = param.match(featureParamRegex);
-        if (matches.length > 0) {
-          features[matches[1].toLowerCase()] = value;
-        }
-      }
-    });
-    return features;
-  }
-
-  public static configureTokenValidationDisplayPrompt(explorer: Explorer): void {
-    const authType: AuthType = (<any>window).authType;
-    if (
-      !explorer ||
-      !Main._encryptedToken ||
-      !Main._accessInputMetadata ||
-      Main._accessInputMetadata.expiryTimestamp == null ||
-      authType !== AuthType.EncryptedToken
-    ) {
-      return;
-    }
-
-    Main._showGuestAccessTokenRenewalPromptInMs(explorer, parseInt(Main._accessInputMetadata.expiryTimestamp));
-  }
-
-  public static parseResourceTokenConnectionString(connectionString: string): resourceTokenConnectionStringProperties {
-    let accountEndpoint: string;
-    let collectionId: string;
-    let databaseId: string;
-    let partitionKey: string;
-    let resourceToken: string;
-    const connectionStringParts = connectionString.split(";");
-    connectionStringParts.forEach((part: string) => {
-      if (part.startsWith("type=resource")) {
-        resourceToken = part + ";";
-      } else if (part.startsWith("AccountEndpoint=")) {
-        accountEndpoint = part.substring(16);
-      } else if (part.startsWith("DatabaseId=")) {
-        databaseId = part.substring(11);
-      } else if (part.startsWith("CollectionId=")) {
-        collectionId = part.substring(13);
-      } else if (part.startsWith("PartitionKey=")) {
-        partitionKey = part.substring(13);
-      } else if (part !== "") {
-        resourceToken += part + ";";
-      }
-    });
-
-    return {
-      accountEndpoint,
-      collectionId,
-      databaseId,
-      partitionKey,
-      resourceToken
-    };
-  }
-
-  public static renewExplorerAccess = (explorer: Explorer, connectionString: string): Q.Promise<void> => {
-    if (!connectionString) {
-      console.error("Missing or invalid connection string input");
-      Q.reject("Missing or invalid connection string input");
-    }
-
-    if (Main._isResourceToken(connectionString)) {
-      return Main._renewExplorerAccessWithResourceToken(explorer, connectionString);
-    }
-
-    const deferred: Q.Deferred<void> = Q.defer<void>();
-    AuthHeadersUtil.generateUnauthenticatedEncryptedTokenForConnectionString(connectionString).then(
-      (encryptedToken: GenerateTokenResponse) => {
-        if (!encryptedToken || !encryptedToken.readWrite) {
-          deferred.reject("Encrypted token is empty or undefined");
-        }
-
-        Main._encryptedToken = encryptedToken.readWrite;
-        window.authType = AuthType.EncryptedToken;
-
-        updateUserContext({
-          accessToken: Main._encryptedToken
-        });
-        Main._getAccessInputMetadata(Main._encryptedToken).then(
-          () => {
-            if (explorer.isConnectExplorerVisible()) {
-              explorer.notificationConsoleData([]);
-              explorer.hideConnectExplorerForm();
-            }
-
-            if (Main._accessInputMetadata.apiKind != ApiKind.Graph) {
-              // do not save encrypted token for graphs because we cannot extract master key in the client
-              SessionStorageUtility.setEntryString(StorageKey.EncryptedKeyToken, Main._encryptedToken);
-              window.parent &&
-                window.parent.history.replaceState(
-                  { encryptedToken: encryptedToken },
-                  "",
-                  `?key=${Main._encryptedToken}${(window.parent && window.parent.location.hash) || ""}`
-                ); // replace query params if any
-            } else {
-              SessionStorageUtility.removeEntry(StorageKey.EncryptedKeyToken);
-              window.parent &&
-                window.parent.history.replaceState(
-                  { encryptedToken: encryptedToken },
-                  "",
-                  `?${(window.parent && window.parent.location.hash) || ""}`
-                ); // replace query params if any
-            }
-
-            const masterKey: string = Main._getMasterKeyFromConnectionString(connectionString);
-            Main.configureTokenValidationDisplayPrompt(explorer);
-            Main._setExplorerReady(explorer, masterKey);
-
-            deferred.resolve();
-          },
-          (error: any) => {
-            console.error(error);
-            deferred.reject(error);
-          }
-        );
-      },
-      (error: any) => {
-        deferred.reject(`Failed to generate encrypted token: ${getErrorMessage(error)}`);
-      }
-    );
-
-    return deferred.promise.timeout(Constants.ClientDefaults.requestTimeoutMs);
-  };
-
-  public static getUninitializedExplorerForGuestAccess(): Explorer {
-    const explorer = Main._instantiateExplorer();
-    if (window.authType === AuthType.AAD) {
-      this._explorer = explorer;
-    }
-    (<any>window).dataExplorer = explorer;
-
-    return explorer;
-  }
-
-  private static _initDataExplorerFrameInputs(
-    explorer: Explorer,
-    masterKey?: string /* master key extracted from connection string if available */,
-    account?: DatabaseAccount,
-    authorizationToken?: string /* access key */
-  ): void {
-    const serverId: string = AuthHeadersUtil.serverId;
-    const authType: string = (<any>window).authType;
-    const accountResourceId =
-      authType === AuthType.EncryptedToken
-        ? Main._databaseAccountId
-        : authType === AuthType.AAD && account
-        ? account.id
-        : "";
-    const subscriptionId: string = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
-    const resourceGroup: string = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
-
-    explorer.isTryCosmosDBSubscription(SubscriptionUtilMappings.FreeTierSubscriptionIds.indexOf(subscriptionId) >= 0);
-    if (authorizationToken && authorizationToken.indexOf("Bearer") !== 0) {
-      // Portal sends the auth token with bearer suffix, so we prepend the same to be consistent
-      authorizationToken = `Bearer ${authorizationToken}`;
-    }
-
-    if (authType === AuthType.EncryptedToken) {
-      const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
-        Main._accessInputMetadata.apiKind
-      );
-      sendMessage({
-        type: MessageTypes.UpdateAccountSwitch,
-        props: {
-          authType: AuthType.EncryptedToken,
-          selectedAccountName: Main._accessInputMetadata.accountName
-        }
-      });
-      return explorer.initDataExplorerWithFrameInputs({
-        databaseAccount: {
-          id: Main._databaseAccountId,
-          name: Main._accessInputMetadata.accountName,
-          kind: this._getDatabaseAccountKindFromExperience(apiExperience),
-          properties: HostedUtils.getDatabaseAccountPropertiesFromMetadata(Main._accessInputMetadata),
-          tags: { defaultExperience: apiExperience }
-        },
-        subscriptionId,
-        resourceGroup,
-        masterKey,
-        hasWriteAccess: true, // TODO: we should embed this information in the token ideally
-        authorizationToken: undefined,
-        features: this._features,
-        csmEndpoint: undefined,
-        dnsSuffix: null,
-        serverId: serverId,
-        extensionEndpoint: configContext.BACKEND_ENDPOINT,
-        subscriptionType: CollectionCreation.DefaultSubscriptionType,
-        quotaId: undefined,
-        addCollectionDefaultFlight: explorer.flight(),
-        isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription()
-      });
-    }
-
-    if (authType === AuthType.AAD) {
-      const inputs: DataExplorerInputsFrame = {
-        databaseAccount: account,
-        subscriptionId,
-        resourceGroup,
-        masterKey,
-        hasWriteAccess: true, //TODO: 425017 - support read access
-        authorizationToken,
-        features: this._features,
-        csmEndpoint: undefined,
-        dnsSuffix: null,
-        serverId: serverId,
-        extensionEndpoint: configContext.BACKEND_ENDPOINT,
-        subscriptionType: CollectionCreation.DefaultSubscriptionType,
-        quotaId: undefined,
-        addCollectionDefaultFlight: explorer.flight(),
-        isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription()
-      };
-      return explorer.initDataExplorerWithFrameInputs(inputs);
-    }
-
-    if (authType === AuthType.ResourceToken) {
-      const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
-        Main._accessInputMetadata.apiKind
-      );
-      return explorer.initDataExplorerWithFrameInputs({
-        databaseAccount: {
-          id: Main._databaseAccountId,
-          name: Main._accessInputMetadata.accountName,
-          kind: this._getDatabaseAccountKindFromExperience(apiExperience),
-          properties: HostedUtils.getDatabaseAccountPropertiesFromMetadata(Main._accessInputMetadata),
-          tags: { defaultExperience: apiExperience }
-        },
-        subscriptionId,
-        resourceGroup,
-        masterKey,
-        hasWriteAccess: true, // TODO: we should embed this information in the token ideally
-        authorizationToken: undefined,
-        features: this._features,
-        csmEndpoint: undefined,
-        dnsSuffix: null,
-        serverId: serverId,
-        extensionEndpoint: configContext.BACKEND_ENDPOINT,
-        subscriptionType: CollectionCreation.DefaultSubscriptionType,
-        quotaId: undefined,
-        addCollectionDefaultFlight: explorer.flight(),
-        isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription(),
-        isAuthWithresourceToken: true
-      });
-    }
-
-    throw new Error(`Unsupported AuthType ${authType}`);
-  }
-
-  private static _instantiateExplorer(): Explorer {
-    const explorer = new Explorer();
-    // workaround to resolve cyclic refs with view
-    explorer.renewExplorerShareAccess = Main.renewExplorerAccess;
-    window.addEventListener("message", explorer.handleMessage.bind(explorer), false);
-
-    // Hosted needs click to dismiss any menu
-    if (window.authType === AuthType.AAD) {
-      window.addEventListener(
-        "click",
-        () => {
-          sendMessage({
-            type: MessageTypes.ExplorerClickEvent
-          });
-        },
-        true
-      );
-    }
-
-    return explorer;
-  }
-
-  private static _showGuestAccessTokenRenewalPromptInMs(explorer: Explorer, interval: number): void {
-    if (interval != null && !isNaN(interval)) {
-      setTimeout(() => {
-        explorer.displayGuestAccessTokenRenewalPrompt();
-      }, interval);
-    }
-  }
-
-  private static _hasCachedEncryptedKey(): boolean {
-    return SessionStorageUtility.hasItem(StorageKey.EncryptedKeyToken);
-  }
-
-  private static _getDatabaseAccountKindFromExperience(apiExperience: string): string {
-    if (apiExperience === Constants.DefaultAccountExperience.MongoDB) {
-      return Constants.AccountKind.MongoDB;
-    }
-
-    if (apiExperience === Constants.DefaultAccountExperience.ApiForMongoDB) {
-      return Constants.AccountKind.MongoDB;
-    }
-
-    return Constants.AccountKind.GlobalDocumentDB;
-  }
-
-  private static _getAccessInputMetadata(accessInput: string): Q.Promise<void> {
-    const deferred: Q.Deferred<void> = Q.defer<void>();
-    AuthHeadersUtil.getAccessInputMetadata(accessInput).then(
-      (metadata: any) => {
-        Main._accessInputMetadata = metadata;
-        deferred.resolve();
-      },
-      (error: any) => {
-        deferred.reject(error);
-      }
-    );
-
-    return deferred.promise.timeout(Constants.ClientDefaults.requestTimeoutMs);
-  }
-
-  private static _getMasterKeyFromConnectionString(connectionString: string): string {
-    if (!connectionString || Main._accessInputMetadata == null || Main._accessInputMetadata.apiKind !== ApiKind.Graph) {
-      // client only needs master key for Graph API
-      return undefined;
-    }
-
-    const matchedParts: string[] = connectionString.match("AccountKey=(.*);ApiKind=Gremlin;$");
-    return (matchedParts.length > 1 && matchedParts[1]) || undefined;
-  }
-
-  private static _isResourceToken(connectionString: string): boolean {
-    return connectionString && connectionString.includes("type=resource");
-  }
-
-  private static _renewExplorerAccessWithResourceToken = (
-    explorer: Explorer,
-    connectionString: string
-  ): Q.Promise<void> => {
-    window.authType = AuthType.ResourceToken;
-
-    const properties: resourceTokenConnectionStringProperties = Main.parseResourceTokenConnectionString(
-      connectionString
-    );
-    if (
-      !properties.accountEndpoint ||
-      !properties.resourceToken ||
-      !properties.databaseId ||
-      !properties.collectionId
-    ) {
-      console.error("Invalid connection string input");
-      Q.reject("Invalid connection string input");
-    }
-    updateUserContext({
-      resourceToken: properties.resourceToken,
-      endpoint: properties.accountEndpoint
-    });
-    explorer.resourceTokenDatabaseId(properties.databaseId);
-    explorer.resourceTokenCollectionId(properties.collectionId);
-    if (properties.partitionKey) {
-      explorer.resourceTokenPartitionKey(properties.partitionKey);
-    }
-    Main._accessInputMetadata = Main._getAccessInputMetadataFromAccountEndpoint(properties.accountEndpoint);
-
-    if (explorer.isConnectExplorerVisible()) {
-      explorer.notificationConsoleData([]);
-      explorer.hideConnectExplorerForm();
-    }
-
-    Main._setExplorerReady(explorer);
-    return Q.resolve();
-  };
-
-  private static _getAccessInputMetadataFromAccountEndpoint = (accountEndpoint: string): AccessInputMetadata => {
-    const documentEndpoint: string = accountEndpoint;
-    const result: RegExpMatchArray = accountEndpoint.match("https://([^\\.]+)\\..+");
-    const accountName: string = result && result[1];
-    const apiEndpoint: string = accountEndpoint.substring(8);
-    const apiKind: number = ApiKind.SQL;
-
-    return {
-      accountName,
-      apiEndpoint,
-      apiKind,
-      documentEndpoint,
-      expiryTimestamp: ""
-    };
-  };
-
-  private static _setExplorerReady(
-    explorer: Explorer,
-    masterKey?: string,
-    account?: DatabaseAccount,
-    authorizationToken?: string
-  ) {
-    Main._initDataExplorerFrameInputs(explorer, masterKey, account, authorizationToken);
-    explorer.isAccountReady.valueHasMutated();
-    sendMessage("ready");
-  }
-
-  private static _shouldProcessMessage(event: MessageEvent): boolean {
-    if (typeof event.data !== "object") {
-      return false;
-    }
-    if (event.data["signature"] !== "pcIframe") {
-      return false;
-    }
-    if (!("data" in event.data)) {
-      return false;
-    }
-    if (typeof event.data["data"] !== "object") {
-      return false;
-    }
-    return true;
-  }
-
-  private static _handleMessage(event: MessageEvent) {
-    if (isInvalidParentFrameOrigin(event)) {
-      return;
-    }
-
-    if (!this._shouldProcessMessage(event)) {
-      return;
-    }
-
-    const message: any = event.data.data;
-    if (message.type) {
-      if (message.type === MessageTypes.GetAccessAadResponse && (message.response || message.error)) {
-        if (message.response) {
-          Main._handleGetAccessAadSucceed(message.response);
-        }
-        if (message.error) {
-          Main._handleGetAccessAadFailed(message.error);
-        }
-        return;
-      }
-      if (message.type === MessageTypes.SwitchAccount && message.account && message.keys) {
-        Main._handleSwitchAccountSucceed(message.account, message.keys, message.authorizationToken);
-        return;
-      }
-    }
-  }
-
-  private static _handleSwitchAccountSucceed(account: DatabaseAccount, keys: AccountKeys, authorizationToken: string) {
-    if (!this._explorer) {
-      console.error("no explorer found");
-      return;
-    }
-
-    this._explorer.hideConnectExplorerForm();
-
-    const masterKey = Main._getMasterKey(keys);
-    this._explorer.notificationConsoleData([]);
-    Main._setExplorerReady(this._explorer, masterKey, account, authorizationToken);
-  }
-
-  private static _handleGetAccessAadSucceed(response: [DatabaseAccount, AccountKeys, string]) {
-    if (!response || response.length < 1) {
-      return;
-    }
-    const account = response[0];
-    const masterKey = Main._getMasterKey(response[1]);
-    const authorizationToken = response[2];
-    Main._setExplorerReady(this._explorer, masterKey, account, authorizationToken);
-    this._getAadAccessDeferred.resolve(this._explorer);
-  }
-
-  private static _getMasterKey(keys: AccountKeys): string {
-    return (
-      keys?.primaryMasterKey ??
-      keys?.secondaryMasterKey ??
-      keys?.primaryReadonlyMasterKey ??
-      keys?.secondaryReadonlyMasterKey
-    );
-  }
-
-  private static _handleGetAccessAadFailed(error: any) {
-    this._getAadAccessDeferred.reject(error);
-  }
-}
--- a/src/Platform/Hosted/extractFeatures.test.ts
+++ b/src/Platform/Hosted/extractFeatures.test.ts
@@ -0,0 +1,17 @@
+import { extractFeatures } from "./extractFeatures";
+
+describe("extractFeatures", () => {
+  it("correctly detects feature flags", () => {
+    // Search containing non-features, with Camelcase keys and uri encoded values
+    const params = new URLSearchParams(
+      "?platform=Hosted&feature.notebookserverurl=https%3A%2F%2Flocalhost%3A10001%2F12345%2Fnotebook&feature.notebookServerToken=token&feature.enablenotebooks=true&key=mykey"
+    );
+    const features = extractFeatures(params);
+
+    expect(features).toEqual({
+      notebookserverurl: "https://localhost:10001/12345/notebook",
+      notebookservertoken: "token",
+      enablenotebooks: "true"
+    });
+  });
+});
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -0,0 +1,14 @@
+export function extractFeatures(params?: URLSearchParams): { [key: string]: string } {
+  params = params || new URLSearchParams(window.parent.location.search);
+  const featureParamRegex = /feature.(.*)/i;
+  const features: { [key: string]: string } = {};
+  params.forEach((value: string, param: string) => {
+    if (featureParamRegex.test(param)) {
+      const matches: string[] = param.match(featureParamRegex);
+      if (matches.length > 0) {
+        features[matches[1].toLowerCase()] = value;
+      }
+    }
+  });
+  return features;
+}
--- a/src/Platform/Portal/Main.ts
+++ b/src/Platform/Portal/Main.ts
@@ -1,23 +0,0 @@
-import "../../Explorer/Tables/DataTable/DataTableBindingManager";
-import Explorer from "../../Explorer/Explorer";
-import { handleMessage } from "../../Controls/Heatmap/Heatmap";
-
-export function initializeExplorer(): Explorer {
-  const explorer = new Explorer();
-
-  // In development mode, try to load the iframe message from session storage.
-  // This allows webpack hot reload to funciton properly
-  if (process.env.NODE_ENV === "development") {
-    const initMessage = sessionStorage.getItem("portalDataExplorerInitMessage");
-    if (initMessage) {
-      const message = JSON.parse(initMessage);
-      console.warn("Loaded cached portal iframe message from session storage");
-      console.dir(message);
-      explorer.initDataExplorerWithFrameInputs(message);
-    }
-  }
-
-  window.addEventListener("message", explorer.handleMessage.bind(explorer), false);
-
-  return explorer;
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Steve Faulkner	35213a77e2	Force token refresh	2021-01-07 14:13:41 -06:00
Steve Faulkner	d1ac8eb077	WIP	2021-01-05 01:14:17 -06:00
Steve Faulkner	d9156c47d0	Fix test login	2021-01-04 10:51:44 -06:00
Steve Faulkner	a844042580	Fix tables	2021-01-04 10:09:24 -06:00
Steve Faulkner	1238d30f95	Fix format	2021-01-03 23:55:58 -06:00
Steve Faulkner	684cbfe4a0	more fixes	2021-01-03 23:54:37 -06:00
Steve Faulkner	5b6b4d3583	More cleanup	2021-01-03 23:41:47 -06:00
Steve Faulkner	e05a78e96a	WIP	2021-01-03 23:23:42 -06:00
Steve Faulkner	33f7ae1e6d	WIP, checkpoint	2021-01-03 23:07:26 -06:00
Steve Faulkner	2089a8881d	Add file	2021-01-03 21:52:20 -06:00
Steve Faulkner	2e1665f093	WIP	2021-01-03 21:49:50 -06:00
Steve Faulkner	f6d6222e5c	more WIP	2021-01-02 22:18:20 -06:00
Steve Faulkner	2147b10361	Refactor Components	2021-01-02 20:47:54 -06:00
Steve Faulkner	09ac1d1552	WIP	2021-01-02 20:29:37 -06:00
Steve Faulkner	b81cef2a03	WIP	2021-01-02 19:19:26 -06:00
Steve Faulkner	731999c4e8	WIP	2021-01-02 19:19:19 -06:00
Steve Faulkner	aba583abd8	Checkpoint	2021-01-02 19:00:49 -06:00
Steve Faulkner	2e10b96678	Checkpoint	2021-01-02 17:15:18 -06:00
Steve Faulkner	5652f29d03	WIP	2021-01-01 14:36:29 -06:00
Steve Faulkner	15cb4a8fc4	Checkpoint	2021-01-01 00:09:38 -06:00
Steve Faulkner	bf30c3190a	WIP	2020-12-31 15:05:34 -06:00
Steve Faulkner	585f75bc91	Checkpoint	2020-12-30 19:12:22 -06:00
Steve Faulkner	7116f25ce4	checkpoint	2020-12-30 13:18:03 -06:00
Steve Faulkner	5f5d9176af	WIP	2020-12-28 20:55:44 -06:00
Steve Faulkner	ac2d645fda	Add files from previous commit	2020-12-28 18:48:30 -06:00
Steve Faulkner	12a44fdd42	MSAL 2.0 checkpoint	2020-12-28 18:48:19 -06:00
Steve Faulkner	13dbcb6453	Merge branch 'master' into hosted-msal	2020-12-28 11:40:03 -06:00
Steve Faulkner	e41230e8c4	WIP	2020-12-26 20:01:42 -06:00