Update package versions and package-lock.json (#404)

The file `package-lock.json` is not in sync with `package.json` anymore. This causes build issues when upgrading a package.
This change sync's `package-lock.json` and fixes the build issues.

.eslintignore

@@ -14,7 +14,6 @@ src/Common/DataAccessUtilityBase.ts
 src/Common/DeleteFeedback.ts
 src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
-src/Common/EnvironmentUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
 src/Common/HeadersUtility.test.ts
@@ -43,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
@@ -243,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

.eslintrc.js

@@ -20,10 +20,7 @@ module.exports = {
   overrides: [
     {
       files: ["**/*.tsx"],
-      env: {
-        jest: true,
-      },
-      extends: ["plugin:react/recommended"],
+      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
       plugins: ["react"],
     },
     {
@@ -36,6 +33,7 @@ module.exports = {
     },
   ],
   rules: {
+    "no-console": ["error", { allow: ["error", "warn", "dir"] }],
     curly: "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
@@ -43,6 +41,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",
       {

.github/workflows/ci.yml

@@ -9,6 +9,20 @@ on:
     branches:
       - master
 jobs:
+  codemetrics:
+    runs-on: ubuntu-latest
+    name: "Log Code Metrics"
+    if: github.ref == 'refs/heads/master'
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - run: npm ci
+      - run: node utils/codeMetrics.js
+        env:
+          CODE_METRICS_APP_ID: ${{ secrets.CODE_METRICS_APP_ID }}
   compile:
     runs-on: ubuntu-latest
     name: "Compile TypeScript"
@@ -94,13 +108,14 @@ jobs:
           npm ci
           npm start &
           npm run wait-for-server
-          npx jest -c ./jest.config.e2e.js --detectOpenHandles sql
+          npx jest -c ./jest.config.e2e.js --detectOpenHandles test/sql/container.spec.ts
         shell: bash
         env:
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
           PLATFORM: "Emulator"
           NODE_TLS_REJECT_UNAUTHORIZED: 0
       - uses: actions/upload-artifact@v2
+        if: failure()
         with:
           name: screenshots
           path: failed-*
@@ -141,6 +156,7 @@ jobs:
         run: |
           npm ci
           npm start &
+          node utils/cleanupDBs.js
           npm run wait-for-server
           npm run test:e2e
         shell: bash
@@ -159,13 +175,14 @@ jobs:
           TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
+        if: failure()
         with:
           name: screenshots
           path: failed-*
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -189,7 +206,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}

README.md

@@ -13,29 +13,18 @@ UI for Azure Cosmos DB. Powers the [Azure Portal](https://portal.azure.com/), ht
 
 ### Watch mode
 
-Run `npm run watch` to start the development server and automatically rebuild on changes
+Run `npm start` to start the development server and automatically rebuild on changes
 
-### Specifying Development Platform
+### Hosted Development (https://cosmos.azure.com)
 
-Setting the environment variable `PLATFORM` during the build process will force the explorer to load the specified platform. By default in development it will run in `Hosted` mode. Valid options:
-
-- Hosted
-- Emulator
-- Portal
-
-`PLATFORM=Emulator npm run watch`
-
-### Hosted Development
-
-The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
-
-To run pure hosted mode, in `webpack.config.js` change index HtmlWebpackPlugin to use hostedExplorer.html and change entry for index to use HostedExplorer.ts.
+- Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
+- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
 
-In a window environment, running `npm run build` will automatically copy the built files from `/dist` over to the default emulator install paths. In a non-windows environment you can specify an alternate endpoint using `EMULATOR_ENDPOINT` and webpack dev server will proxy requests for you.
-
-`PLATFORM=Emulator EMULATOR_ENDPOINT=https://my-vm.azure.com:8081 npm run watch`
+- Start the Cosmos Emulator
+- Visit: https://localhost:1234/index.html
 
 #### Setting up a Remote Emulator
 
@@ -55,16 +44,8 @@ The Cosmos emulator currently only runs in Windows environments. You can still d
 
 ### Portal Development
 
-The Cosmos Portal that consumes this repo is not currently open source. If you have access to this project, `npm run build` will copy the built files over to the portal where they will be loaded by the portal development environment
-
-You can however load a local running instance of data explorer in the production portal.
-
-1. Turn off browser SSL validation for localhost: chrome://flags/#allow-insecure-localhost OR Install valid SSL certs for localhost (on IE, follow these [instructions](https://www.technipages.com/ie-bypass-problem-with-this-websites-security-certificate) to install the localhost certificate in the right place)
-2. Allowlist `https://localhost:1234` domain for CORS in the Azure Cosmos DB portal
-3. Start the project in portal mode: `PLATFORM=Portal npm run watch`
-4. Load the portal using the following link: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html
-
-Live reload will occur, but data explorer will not properly integrate again with the parent iframe. You will have to manually reload the page.
+- Visit: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html
+- You may have to manually visit https://localhost:1234/explorer.html first and click through any SSL certificate warnings
 
 ### Testing
 
@@ -88,6 +69,10 @@ 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).

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
+  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
 };

canvas/README.md

@@ -0,0 +1,7 @@
+# Why?
+
+This adds a mock module for `canvas`. Nteract has a ignored require and undeclared dependency on this module. `cavnas` is a server side node module and is not used in browser side code for nteract.
+
+Installing it locally (`npm install canvas`) will resolve the problem, but it is a native module so it is flaky depending on the system, node version, processor arch, etc. This module provides a simpler, more robust solution.
+
+Remove this workaround if [this bug](https://github.com/nteract/any-vega/issues/2) ever gets resolved 

canvas/index.js

@@ -0,0 +1 @@
+module.exports = {}

canvas/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "canvas",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

jest.config.js

@@ -39,10 +39,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 20,
-      functions: 24,
-      lines: 30,
-      statements: 29.0,
+      branches: 22,
+      functions: 28,
+      lines: 33,
+      statements: 31,
     },
   },
 

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,32 +161,31 @@
 **************************************************************************************/
 
 @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%;
+      }
     }
+  }
 }
 
 /********************************************************************************************
@@ -194,15 +193,15 @@
 *********************************************************************************************/
 
 .hover() {
-    background-color: @AccentLight;
+  background-color: @AccentLight;
 }
 
 .active() {
-    background-color: @AccentExtra;
+  background-color: @AccentExtra;
 }
 
 .focus() {
-    outline: 1px dashed @FocusColor;
+  outline: 1px dashed @FocusColor;
 }
 
 /************************************************************************************************
@@ -212,63 +211,87 @@
 @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;
+  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;
 }

less/hostedexplorer.less

@@ -13,6 +13,11 @@
 @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;

less/tree.less

@@ -1,20 +1,12 @@
 @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 {

package.json

@@ -6,12 +6,14 @@
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/identity": "1.1.0",
     "@azure/cosmos-language-service": "0.0.5",
-    "@jupyterlab/services": "6.0.0-rc.2",
-    "@jupyterlab/terminal": "3.0.0-rc.2",
+    "@azure/identity": "1.2.1",
+    "@babel/plugin-proposal-class-properties": "7.12.1",
+    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@jupyterlab/services": "6.0.2",
+    "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.5.9",
-    "@nteract/commutable": "7.3.2",
+    "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -36,6 +38,7 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
+    "@testing-library/jest-dom": "5.11.9",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
@@ -44,7 +47,7 @@
     "applicationinsights": "1.8.0",
     "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.6.1",
+    "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
@@ -69,6 +72,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",
@@ -80,14 +84,16 @@
     "react-animate-height": "2.0.8",
     "react-dnd": "9.4.0",
     "react-dnd-html5-backend": "9.4.0",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
+    "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
+    "swr": "0.4.0",
     "text-encoding": "0.7.0",
     "underscore": "1.9.1",
     "url-polyfill": "1.1.7",
@@ -101,6 +107,7 @@
     "@babel/preset-env": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
+    "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
     "@types/crossroads": "0.0.30",
@@ -109,7 +116,7 @@
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
-    "@types/jest": "23.3.10",
+    "@types/jest": "26.0.20",
     "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
@@ -117,8 +124,8 @@
     "@types/prop-types": "15.5.8",
     "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.0.7",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/sinon": "2.3.3",
@@ -128,7 +135,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",
@@ -143,7 +149,9 @@
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expose-loader": "0.7.5",
+    "fast-glob": "3.2.5",
     "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
     "html-loader": "0.5.5",
@@ -170,7 +178,7 @@
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.1.2",
+    "typescript": "4.0.2",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",

src/AuthType.ts

@@ -3,4 +3,5 @@ export enum AuthType {
   EncryptedToken = "encryptedtoken",
   MasterKey = "masterkey",
   ResourceToken = "resourcetoken",
+  ConnectionString = "connectionstring",
 }

src/Bindings/BindingHandlersRegisterer.ts

@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as ReactBindingHandler from "./ReactBindingHandler";
+import "../Explorer/Tables/DataTable/DataTableBindingManager";
 
 export class BindingHandlersRegisterer {
   public static registerBindingHandlers() {

src/Common/Constants.ts

@@ -1,10 +1,3 @@
-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";
@@ -113,7 +106,6 @@ export class Features {
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
   public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableCodeOfConduct = "enablecodeofconduct";
   public static readonly enableLinkInjection = "enablelinkinjection";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
@@ -127,12 +119,15 @@ export class Features {
   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 MongoIndexing = "mongoindexing";
+  public static readonly AutoscaleTest = "autoscaletest";
 }
 
 export class AfecFeatures {
@@ -141,19 +136,6 @@ export class AfecFeatures {
   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";
 }

src/Common/CosmosClient.ts

@@ -77,7 +77,7 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
 
 export function client(): Cosmos.CosmosClient {
   const options: Cosmos.CosmosClientOptions = {
-    endpoint: endpoint() || " ", // CosmosClient gets upset if we pass a falsy value here
+    endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.masterKey,
     tokenProvider,
     connectionPolicy: {

src/Common/DataAccessUtilityBase.ts

@@ -1,155 +0,0 @@
-import { ConflictDefinition, FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import Q from "q";
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-import ConflictId from "../Explorer/Tree/ConflictId";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import StoredProcedure from "../Explorer/Tree/StoredProcedure";
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-import * as Constants from "./Constants";
-import { client } from "./CosmosClient";
-
-export function getCommonQueryOptions(options: FeedOptions): any {
-  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
-  options = options || {};
-  options.populateQueryMetrics = true;
-  options.enableScanInQuery = options.enableScanInQuery || true;
-  if (!options.partitionKey) {
-    options.forceQueryPlan = true;
-  }
-  options.maxItemCount =
-    options.maxItemCount ||
-    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
-    Constants.Queries.itemsPerPage;
-  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
-
-  return options;
-}
-
-export function queryDocuments(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
-  options = getCommonQueryOptions(options);
-  const documentsIterator = client().database(databaseId).container(containerId).items.query(query, options);
-  return Q(documentsIterator);
-}
-
-export function getPartitionKeyHeaderForConflict(conflictId: ConflictId): Object {
-  const partitionKeyDefinition: DataModels.PartitionKey = conflictId.partitionKey;
-  const partitionKeyValue: any = conflictId.partitionKeyValue;
-
-  return getPartitionKeyHeader(partitionKeyDefinition, partitionKeyValue);
-}
-
-export function getPartitionKeyHeader(partitionKeyDefinition: DataModels.PartitionKey, partitionKeyValue: any): Object {
-  if (!partitionKeyDefinition) {
-    return undefined;
-  }
-
-  if (partitionKeyValue === undefined) {
-    return [{}];
-  }
-
-  return [partitionKeyValue];
-}
-
-export function updateDocument(
-  collection: ViewModels.CollectionBase,
-  documentId: DocumentId,
-  newDocument: any
-): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), partitionKey)
-      .replace(newDocument)
-      .then((response) => response.resource)
-  );
-}
-
-export function executeStoredProcedure(
-  collection: ViewModels.Collection,
-  storedProcedure: StoredProcedure,
-  partitionKeyValue: any,
-  params: any[]
-): Q.Promise<any> {
-  // TODO remove this deferred. Kept it because of timeout code at bottom of function
-  const deferred = Q.defer<any>();
-
-  client()
-    .database(collection.databaseId)
-    .container(collection.id())
-    .scripts.storedProcedure(storedProcedure.id())
-    .execute(partitionKeyValue, params, { enableScriptLogging: true })
-    .then((response) =>
-      deferred.resolve({
-        result: response.resource,
-        scriptLogs: response.headers[Constants.HttpHeaders.scriptLogResults],
-      })
-    )
-    .catch((error) => deferred.reject(error));
-
-  return deferred.promise.timeout(
-    Constants.ClientDefaults.requestTimeoutMs,
-    `Request timed out while executing stored procedure ${storedProcedure.id()}`
-  );
-}
-
-export function createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .items.create(newDocument)
-      .then((response) => response.resource)
-  );
-}
-
-export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), partitionKey)
-      .read()
-      .then((response) => response.resource)
-  );
-}
-
-export function deleteDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    client().database(collection.databaseId).container(collection.id()).item(documentId.id(), partitionKey).delete()
-  );
-}
-
-export function deleteConflict(
-  collection: ViewModels.CollectionBase,
-  conflictId: ConflictId,
-  options: any = {}
-): Q.Promise<any> {
-  options.partitionKey = options.partitionKey || getPartitionKeyHeaderForConflict(conflictId);
-
-  return Q(
-    client().database(collection.databaseId).container(collection.id()).conflict(conflictId.id()).delete(options)
-  );
-}
-
-export function queryConflicts(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
-  const documentsIterator = client().database(databaseId).container(containerId).conflicts.query(query, options);
-  return Q(documentsIterator);
-}

src/Common/DocumentClientUtilityBase.ts

@@ -1,217 +0,0 @@
-import { ConflictDefinition, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import Q from "q";
-import * as ViewModels from "../Contracts/ViewModels";
-import ConflictId from "../Explorer/Tree/ConflictId";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import StoredProcedure from "../Explorer/Tree/StoredProcedure";
-import { logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
-import * as Constants from "./Constants";
-import * as DataAccessUtilityBase from "./DataAccessUtilityBase";
-import { MinimalQueryIterator, nextPage } from "./IteratorUtilities";
-import { handleError } from "./ErrorHandlingUtils";
-
-// TODO: Log all promise resolutions and errors with verbosity levels
-export function queryDocuments(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
-  return DataAccessUtilityBase.queryDocuments(databaseId, containerId, query, options);
-}
-
-export function queryConflicts(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
-  return DataAccessUtilityBase.queryConflicts(databaseId, containerId, query, options);
-}
-
-export function getEntityName() {
-  const defaultExperience =
-    window.dataExplorer && window.dataExplorer.defaultExperience && window.dataExplorer.defaultExperience();
-  if (defaultExperience === Constants.DefaultAccountExperience.MongoDB) {
-    return "document";
-  }
-  return "item";
-}
-
-export function executeStoredProcedure(
-  collection: ViewModels.Collection,
-  storedProcedure: StoredProcedure,
-  partitionKeyValue: any,
-  params: any[]
-): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-
-  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
-  DataAccessUtilityBase.executeStoredProcedure(collection, storedProcedure, partitionKeyValue, params)
-    .then(
-      (response: any) => {
-        deferred.resolve(response);
-        logConsoleInfo(
-          `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
-        );
-      },
-      (error: any) => {
-        handleError(
-          error,
-          "ExecuteStoredProcedure",
-          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
-        );
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function queryDocumentsPage(
-  resourceName: string,
-  documentsIterator: MinimalQueryIterator,
-  firstItemIndex: number,
-  options: any
-): Q.Promise<ViewModels.QueryResults> {
-  var deferred = Q.defer<ViewModels.QueryResults>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
-  Q(nextPage(documentsIterator, firstItemIndex))
-    .then(
-      (result: ViewModels.QueryResults) => {
-        const itemCount = (result.documents && result.documents.length) || 0;
-        logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
-        deferred.resolve(result);
-      },
-      (error: any) => {
-        handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);
-  DataAccessUtilityBase.readDocument(collection, documentId)
-    .then(
-      (document: any) => {
-        deferred.resolve(document);
-      },
-      (error: any) => {
-        handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function updateDocument(
-  collection: ViewModels.CollectionBase,
-  documentId: DocumentId,
-  newDocument: any
-): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
-  DataAccessUtilityBase.updateDocument(collection, documentId, newDocument)
-    .then(
-      (updatedDocument: any) => {
-        logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
-        deferred.resolve(updatedDocument);
-      },
-      (error: any) => {
-        handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
-  DataAccessUtilityBase.createDocument(collection, newDocument)
-    .then(
-      (savedDocument: any) => {
-        logConsoleInfo(`Successfully created new ${entityName} for container ${collection.id()}`);
-        deferred.resolve(savedDocument);
-      },
-      (error: any) => {
-        handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function deleteDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
-  DataAccessUtilityBase.deleteDocument(collection, documentId)
-    .then(
-      (response: any) => {
-        logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
-        deferred.resolve(response);
-      },
-      (error: any) => {
-        handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function deleteConflict(
-  collection: ViewModels.CollectionBase,
-  conflictId: ConflictId,
-  options?: any
-): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-
-  const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
-  DataAccessUtilityBase.deleteConflict(collection, conflictId, options)
-    .then(
-      (response: any) => {
-        logConsoleInfo(`Successfully deleted conflict ${conflictId.id()}`);
-        deferred.resolve(response);
-      },
-      (error: any) => {
-        handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}

src/Common/DocumentUtility.ts

@@ -0,0 +1,10 @@
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import { userContext } from "../UserContext";
+
+export const getEntityName = (): string => {
+  if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
+    return "document";
+  }
+
+  return "item";
+};

src/Common/EnvironmentUtility.ts

@@ -1,8 +1,6 @@
-export default class EnvironmentUtility {
-  public static normalizeArmEndpointUri(uri: string): string {
-    if (uri && uri.slice(-1) !== "/") {
-      return `${uri}/`;
-    }
-    return uri;
+export function normalizeArmEndpoint(uri: string): string {
+  if (uri && uri.slice(-1) !== "/") {
+    return `${uri}/`;
   }
+  return uri;
 }

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.";
   }
 

src/Common/OfferUtility.test.ts

@@ -25,6 +25,7 @@ describe("parseSDKOfferResponse", () => {
       minimumThroughput: 400,
       id: "test",
       offerDefinition: mockOfferDefinition,
+      offerReplacePending: false,
     };
 
     expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
@@ -55,6 +56,7 @@ describe("parseSDKOfferResponse", () => {
       minimumThroughput: 400,
       id: "test",
       offerDefinition: mockOfferDefinition,
+      offerReplacePending: false,
     };
 
     expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);

src/Common/OfferUtility.ts

@@ -1,8 +1,12 @@
 import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
+import { HttpHeaders } from "./Constants";
 
-export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
-  const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
+export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer | undefined => {
+  const offerDefinition: SDKOfferDefinition | undefined = offerResponse?.resource;
+  if (!offerDefinition) {
+    return undefined;
+  }
   const offerContent = offerDefinition.content;
   if (!offerContent) {
     return undefined;
@@ -11,14 +15,14 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
   const minimumThroughput = offerContent.collectionThroughputInfo?.minimumRUForCollection;
   const autopilotSettings = offerContent.offerAutopilotSettings;
 
-  if (autopilotSettings) {
+  if (autopilotSettings && autopilotSettings.maxThroughput && minimumThroughput) {
     return {
       id: offerDefinition.id,
       autoscaleMaxThroughput: autopilotSettings.maxThroughput,
       manualThroughput: undefined,
       minimumThroughput,
       offerDefinition,
-      headers: offerResponse.headers,
+      offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true",
     };
   }
 
@@ -28,6 +32,6 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
     manualThroughput: offerContent.offerThroughput,
     minimumThroughput,
     offerDefinition,
-    headers: offerResponse.headers,
+    offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true",
   };
 };

src/Common/QueriesClient.ts

@@ -3,16 +3,18 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
-import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
+import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
 import { createCollection } from "./dataAccess/createCollection";
 import { handleError } from "./ErrorHandlingUtils";
+import { createDocument } from "./dataAccess/createDocument";
+import { deleteDocument } from "./dataAccess/deleteDocument";
+import { queryDocuments } from "./dataAccess/queryDocuments";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -31,10 +33,7 @@ export class QueriesClient {
       return Promise.resolve(queriesCollection.rawDataModel);
     }
 
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      "Setting up account for saving queries"
-    );
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
     return createCollection({
       collectionId: SavedQueries.CollectionName,
       createNewDatabase: true,
@@ -45,10 +44,7 @@ export class QueriesClient {
     })
       .then(
         (collection: DataModels.Collection) => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            "Successfully set up account for saving queries"
-          );
+          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
           return Promise.resolve(collection);
         },
         (error: any) => {
@@ -56,17 +52,14 @@ export class QueriesClient {
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public async saveQuery(query: DataModels.Query): Promise<void> {
     const queriesCollection = this.findQueriesCollection();
     if (!queriesCollection) {
       const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to save query ${query.queryName}: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
@@ -74,25 +67,16 @@ export class QueriesClient {
       this.validateQuery(query);
     } catch (error) {
       const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to save query ${query.queryName}: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      `Saving query ${query.queryName}`
-    );
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Saving query ${query.queryName}`);
     query.id = query.queryName;
     return createDocument(queriesCollection, query)
       .then(
         (savedQuery: DataModels.Query) => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully saved query ${query.queryName}`
-          );
+          NotificationConsoleUtils.logConsoleInfo(`Successfully saved query ${query.queryName}`);
           return Promise.resolve();
         },
         (error: any) => {
@@ -103,74 +87,65 @@ export class QueriesClient {
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public async getQueries(): Promise<DataModels.Query[]> {
     const queriesCollection = this.findQueriesCollection();
     if (!queriesCollection) {
       const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to fetch saved queries: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
     const options: any = { enableCrossPartitionQuery: true };
-    const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
-    return queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
+    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+      SavedQueries.DatabaseName,
+      SavedQueries.CollectionName,
+      this.fetchQueriesQuery(),
+      options
+    );
+    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
+      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
+    return QueryUtils.queryAllPages(fetchQueries)
       .then(
-        (queryIterator: QueryIterator<ItemDefinition & Resource>) => {
-          const fetchQueries = (firstItemIndex: number): Q.Promise<ViewModels.QueryResults> =>
-            queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex, options);
-          return QueryUtils.queryAllPages(fetchQueries).then(
-            (results: ViewModels.QueryResults) => {
-              let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-                if (!document) {
-                  return undefined;
-                }
-                const { id, resourceId, query, queryName } = document;
-                const parsedQuery: DataModels.Query = {
-                  resourceId: resourceId,
-                  queryName: queryName,
-                  query: query,
-                  id: id,
-                };
-                try {
-                  this.validateQuery(parsedQuery);
-                  return parsedQuery;
-                } catch (error) {
-                  return undefined;
-                }
-              });
-              queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-              NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Successfully fetched saved queries");
-              return Promise.resolve(queries);
-            },
-            (error: any) => {
-              handleError(error, "getSavedQueries", "Failed to fetch saved queries");
-              return Promise.reject(error);
+        (results: ViewModels.QueryResults) => {
+          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
+            if (!document) {
+              return undefined;
             }
-          );
+            const { id, resourceId, query, queryName } = document;
+            const parsedQuery: DataModels.Query = {
+              resourceId: resourceId,
+              queryName: queryName,
+              query: query,
+              id: id,
+            };
+            try {
+              this.validateQuery(parsedQuery);
+              return parsedQuery;
+            } catch (error) {
+              return undefined;
+            }
+          });
+          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
+          return Promise.resolve(queries);
         },
         (error: any) => {
-          // should never get into this state but we handle this regardless
           handleError(error, "getSavedQueries", "Failed to fetch saved queries");
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public async deleteQuery(query: DataModels.Query): Promise<void> {
     const queriesCollection = this.findQueriesCollection();
     if (!queriesCollection) {
       const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to fetch saved queries: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
@@ -178,16 +153,10 @@ export class QueriesClient {
       this.validateQuery(query);
     } catch (error) {
       const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to delete query ${query.queryName}: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to delete query ${query.queryName}: ${errorMessage}`);
     }
 
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      `Deleting query ${query.queryName}`
-    );
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting query ${query.queryName}`);
     query.id = query.queryName;
     const documentId = new DocumentId(
       {
@@ -201,10 +170,7 @@ export class QueriesClient {
     return deleteDocument(queriesCollection, documentId)
       .then(
         () => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully deleted query ${query.queryName}`
-          );
+          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted query ${query.queryName}`);
           return Promise.resolve();
         },
         (error: any) => {
@@ -212,7 +178,7 @@ export class QueriesClient {
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public getResourceId(): string {

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,9 +42,10 @@ export class Splitter {
   }
 
   public initialize() {
-    this.splitter = document.getElementById(this.splitterId);
-    this.leftSide = document.getElementById(this.leftSideId);
-
+    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);
+    }
     const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
     const splitterOptions: JQueryUI.ResizableOptions = {
       animate: true,

src/Common/dataAccess/createCollection.test.ts

@@ -1,6 +1,5 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../CosmosClient");
-jest.mock("../DataAccessUtilityBase");
 import { AuthType } from "../../AuthType";
 import { CreateCollectionParams, DatabaseAccount } from "../../Contracts/DataModels";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";

src/Common/dataAccess/createDocument.ts

@@ -0,0 +1,25 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+
+export const createDocument = async (collection: CollectionBase, newDocument: unknown): Promise<unknown> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .items.create(newDocument);
+
+    logConsoleInfo(`Successfully created new ${entityName} for container ${collection.id()}`);
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/deleteConflict.ts

@@ -0,0 +1,36 @@
+import ConflictId from "../../Explorer/Tree/ConflictId";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { RequestOptions } from "@azure/cosmos";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+
+export const deleteConflict = async (collection: CollectionBase, conflictId: ConflictId): Promise<void> => {
+  const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
+
+  try {
+    const options = {
+      partitionKey: getPartitionKeyHeaderForConflict(conflictId),
+    };
+
+    await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .conflict(conflictId.id())
+      .delete(options as RequestOptions);
+    logConsoleInfo(`Successfully deleted conflict ${conflictId.id()}`);
+  } catch (error) {
+    handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};
+
+const getPartitionKeyHeaderForConflict = (conflictId: ConflictId): unknown => {
+  if (!conflictId.partitionKey) {
+    return undefined;
+  }
+
+  return conflictId.partitionKeyValue === undefined ? [{}] : [conflictId.partitionKeyValue];
+};

src/Common/dataAccess/deleteDocument.ts

@@ -0,0 +1,25 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
+  const entityName: string = getEntityName();
+  const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
+
+  try {
+    await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), documentId.partitionKeyValue)
+      .delete();
+    logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
+  } catch (error) {
+    handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/executeStoredProcedure.ts

@@ -0,0 +1,48 @@
+import { Collection } from "../../Contracts/ViewModels";
+import { ClientDefaults, HttpHeaders } from "../Constants";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import StoredProcedure from "../../Explorer/Tree/StoredProcedure";
+
+export interface ExecuteSprocResult {
+  result: StoredProcedure;
+  scriptLogs: string;
+}
+
+export const executeStoredProcedure = async (
+  collection: Collection,
+  storedProcedure: StoredProcedure,
+  partitionKeyValue: string,
+  params: string[]
+): Promise<ExecuteSprocResult> => {
+  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
+  const timeout = setTimeout(() => {
+    throw Error(`Request timed out while executing stored procedure ${storedProcedure.id()}`);
+  }, ClientDefaults.requestTimeoutMs);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .scripts.storedProcedure(storedProcedure.id())
+      .execute(partitionKeyValue, params, { enableScriptLogging: true });
+    clearTimeout(timeout);
+    logConsoleInfo(
+      `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+    );
+    return {
+      result: response.resource,
+      scriptLogs: response.headers[HttpHeaders.scriptLogResults] as string,
+    };
+  } catch (error) {
+    handleError(
+      error,
+      "ExecuteStoredProcedure",
+      `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+    );
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -1,3 +1,4 @@
+import { AuthType } from "../../AuthType";
 import { armRequest } from "../../Utils/arm/request";
 import { configContext } from "../../ConfigContext";
 import { handleError } from "../ErrorHandlingUtils";
@@ -40,6 +41,10 @@ interface MetricsResponse {
 }
 
 export const getCollectionUsageSizeInKB = async (databaseName: string, containerName: string): Promise<number> => {
+  if (window.authType !== AuthType.AAD) {
+    return undefined;
+  }
+
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
   const accountName = userContext.databaseAccount.name;

src/Common/dataAccess/queryConflicts.ts

@@ -0,0 +1,11 @@
+import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
+import { client } from "../CosmosClient";
+
+export const queryConflicts = (
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: FeedOptions
+): QueryIterator<ConflictDefinition & Resource> => {
+  return client().database(databaseId).container(containerId).conflicts.query(query, options);
+};

src/Common/dataAccess/queryDocuments.test.ts

@@ -1,5 +1,5 @@
-import { getCommonQueryOptions } from "./DataAccessUtilityBase";
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+import { getCommonQueryOptions } from "./queryDocuments";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 
 describe("getCommonQueryOptions", () => {
   it("builds the correct default options objects", () => {

src/Common/dataAccess/queryDocuments.ts

@@ -0,0 +1,31 @@
+import { Queries } from "../Constants";
+import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { client } from "../CosmosClient";
+
+export const queryDocuments = (
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: FeedOptions
+): QueryIterator<ItemDefinition & Resource> => {
+  options = getCommonQueryOptions(options);
+  return client().database(databaseId).container(containerId).items.query(query, options);
+};
+
+export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
+  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
+  options = options || {};
+  options.populateQueryMetrics = true;
+  options.enableScanInQuery = options.enableScanInQuery || true;
+  if (!options.partitionKey) {
+    options.forceQueryPlan = true;
+  }
+  options.maxItemCount =
+    options.maxItemCount ||
+    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
+    Queries.itemsPerPage;
+  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
+
+  return options;
+};

src/Common/dataAccess/queryDocumentsPage.ts

@@ -0,0 +1,26 @@
+import { QueryResults } from "../../Contracts/ViewModels";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
+import { handleError } from "../ErrorHandlingUtils";
+import { getEntityName } from "../DocumentUtility";
+
+export const queryDocumentsPage = async (
+  resourceName: string,
+  documentsIterator: MinimalQueryIterator,
+  firstItemIndex: number
+): Promise<QueryResults> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
+
+  try {
+    const result: QueryResults = await nextPage(documentsIterator, firstItemIndex);
+    const itemCount = (result.documents && result.documents.length) || 0;
+    logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
+    return result;
+  } catch (error) {
+    handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/readCollectionOffer.ts

@@ -106,6 +106,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
         manualThroughput: undefined,
         minimumThroughput,
+        offerReplacePending: resource.offerReplacePending === "true",
       };
     }
 
@@ -114,6 +115,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
       autoscaleMaxThroughput: undefined,
       manualThroughput: resource.throughput,
       minimumThroughput,
+      offerReplacePending: resource.offerReplacePending === "true",
     };
   }
 

src/Common/dataAccess/readDatabaseOffer.ts

@@ -78,6 +78,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
         autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
         manualThroughput: undefined,
         minimumThroughput,
+        offerReplacePending: resource.offerReplacePending === "true",
       };
     }
 
@@ -86,6 +87,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
       autoscaleMaxThroughput: undefined,
       manualThroughput: resource.throughput,
       minimumThroughput,
+      offerReplacePending: resource.offerReplacePending === "true",
     };
   }
 

src/Common/dataAccess/readDocument.ts

@@ -0,0 +1,27 @@
+import { Item } from "@azure/cosmos";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const readDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<Item> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), documentId.partitionKeyValue)
+      .read();
+
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/updateDocument.ts

@@ -0,0 +1,32 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { Item } from "@azure/cosmos";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const updateDocument = async (
+  collection: CollectionBase,
+  documentId: DocumentId,
+  newDocument: Item
+): Promise<Item> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), documentId.partitionKeyValue)
+      .replace(newDocument);
+
+    logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/ConfigContext.ts

@@ -4,7 +4,7 @@ export enum Platform {
   Emulator = "Emulator",
 }
 
-interface ConfigContext {
+export interface ConfigContext {
   platform: Platform;
   allowedParentFrameOrigins: string[];
   gitSha?: string;
@@ -104,7 +104,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       const platform = params.get("platform");
       switch (platform) {
         default:
-          console.log("Invalid platform query parameter given, ignoring");
+          console.error(`Invalid platform query parameter: ${platform}`);
           break;
         case Platform.Portal:
         case Platform.Hosted:
@@ -113,7 +113,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       }
     }
   } catch (error) {
-    console.log("No configuration file found using defaults");
+    console.error("No configuration file found using defaults");
   }
   return configContext;
 }

src/Contracts/DataModels.ts

@@ -210,11 +210,11 @@ export interface QueryMetrics {
 
 export interface Offer {
   id: string;
-  autoscaleMaxThroughput: number;
-  manualThroughput: number;
-  minimumThroughput: number;
+  autoscaleMaxThroughput: number | undefined;
+  manualThroughput: number | undefined;
+  minimumThroughput: number | undefined;
   offerDefinition?: SDKOfferDefinition;
-  headers?: any;
+  offerReplacePending: boolean;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -587,11 +587,3 @@ export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
 }
-
-export interface resourceTokenConnectionStringProperties {
-  accountEndpoint: string;
-  collectionId: string;
-  databaseId: string;
-  partitionKey?: string;
-  resourceToken: string;
-}

src/Contracts/ExplorerContracts.ts

@@ -33,7 +33,6 @@ export enum MessageTypes {
   CreateWorkspace,
   CreateSparkPool,
   RefreshDatabaseAccount,
-  InitTestExplorer,
 }
 
 export { Versions, ActionContracts, Diagnostics };

src/Contracts/ViewModels.ts

@@ -15,6 +15,7 @@ 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";
@@ -362,7 +363,7 @@ export enum CollectionTabKind {
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  SettingsV2 = 19,
+  SettingsV2 = 20,
 }
 
 export enum TerminalKind {
@@ -395,6 +396,7 @@ export interface DataExplorerInputsFrame {
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
+  selfServeType?: SelfServeType;
 }
 
 export interface CollectionCreationDefaults {

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;
-//     }
-// }

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();
-//   });
-// });

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>;
-  }
-}

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()} />;
-  }
-}

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"
-/>
-`;

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

@@ -42,7 +42,7 @@ interface CollapsiblePanelParams {
  * Use the optional "collapseToLeft" parameter to collapse to the left.
  */
 class CollapsiblePanelViewModel {
-  private params: CollapsiblePanelParams;
+  public params: CollapsiblePanelParams;
   private isCollapsed: ko.Observable<boolean>;
 
   public constructor(params: CollapsiblePanelParams) {
@@ -50,7 +50,7 @@ class CollapsiblePanelViewModel {
     this.isCollapsed = params.isCollapsed || ko.observable(false);
   }
 
-  private toggleCollapse(): void {
+  public toggleCollapse(): void {
     this.isCollapsed(!this.isCollapsed());
   }
 }

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.

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -48,7 +48,7 @@ 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.enablecodeofconduct", label: "Enable Code Of Conduct Acknowledgement", value: "true" },
+    { key: "feature.selfServeType", label: "Self serve feature", value: "sample" },
     {
       key: "feature.enableLinkInjection",
       label: "Enable Injecting Notebook Viewer Link into the first cell",

src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap

@@ -157,8 +157,8 @@ exports[`Feature panel renders all flags 1`] = `
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.enablecodeofconduct"
-          label="Enable Code Of Conduct Acknowledgement"
+          key="feature.selfServeType"
+          label="Self serve feature"
           onChange={[Function]}
         />
         <StyledCheckboxBase

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, selection: Item) => void;
+  submitFct?: (inputValue: string | null, selection: Item | null) => void;
 
   /**
    * Typehead comes with a Search button that we normally remove.
@@ -88,8 +88,8 @@ interface OnClickItem {
 }
 
 interface Cache {
-  inputValue: string;
-  selection: Item;
+  inputValue: string | null;
+  selection: Item | null;
 }
 
 class InputTypeaheadViewModel {
@@ -98,15 +98,12 @@ 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,
@@ -161,7 +158,7 @@ class InputTypeaheadViewModel {
       }
     }
 
-    $.typeahead(options);
+    ($ as any).typeahead(options);
   }
 
   /**
@@ -177,11 +174,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.
    */
-  private afterRender(): void {
+  public afterRender(): void {
     this.initializeTypeahead();
   }
 
-  private submit(): void {
+  public submit(): void {
     if (this.params.submitFct) {
       this.params.submitFct(this.cache.inputValue, this.cache.selection);
     }

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

@@ -59,10 +59,12 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
     this.params = params;
 
     this.params.content.subscribe((newValue: string) => {
-      if (!!this.editor) {
-        this.editor.getModel().setValue(newValue);
-      } else {
-        this.createEditor(newValue, this.configureEditor.bind(this));
+      if (newValue) {
+        if (!!this.editor) {
+          this.editor.getModel().setValue(newValue);
+        } else {
+          this.createEditor(newValue, this.configureEditor.bind(this));
+        }
       }
     });
 

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -1,6 +1,7 @@
 import {
   Dropdown,
   FocusZone,
+  FontIcon,
   FontWeights,
   IDropdownOption,
   IPageSpecification,
@@ -16,7 +17,7 @@ import {
   Text,
 } from "office-ui-fabric-react";
 import * as React from "react";
-import { IGalleryItem, JunoClient, IJunoResponse, IPublicGalleryData } from "../../../Juno/JunoClient";
+import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
@@ -136,7 +137,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   public render(): JSX.Element {
-    const tabs: GalleryTabInfo[] = [this.createTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
 
     if (this.props.container?.isGalleryPublishEnabled()) {
       tabs.push(
@@ -146,7 +147,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           this.state.isCodeOfConductAccepted
         )
       );
-      tabs.push(this.createTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+      tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
 
       // explicitly checking if isCodeOfConductAccepted is not false, as it is initially undefined.
       // Displaying code of conduct component on gallery load should not be the default behavior.
@@ -183,6 +184,27 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   }
 
+  private isEmptyData = (data: IGalleryItem[]): boolean => {
+    return !data || data.length === 0;
+  };
+
+  private createEmptyTabContent = (iconName: string, line1: string, line2: string): JSX.Element => {
+    return (
+      <Stack horizontalAlign="center" tokens={{ childrenGap: 10 }}>
+        <FontIcon iconName={iconName} style={{ fontSize: 100, color: "lightgray", marginTop: 20 }} />
+        <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{line1}</Text>
+        <Text>{line2}</Text>
+      </Stack>
+    );
+  };
+
+  private createSamplesTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
+    return {
+      tab,
+      content: this.createSearchBarHeader(this.createCardsTabContent(data)),
+    };
+  };
+
   private createPublicGalleryTab(
     tab: GalleryTab,
     data: IGalleryItem[],
@@ -194,17 +216,29 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
-  private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
+  private createFavoritesTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.createSearchBarHeader(this.createCardsTabContent(data)),
+      content: this.isEmptyData(data)
+        ? this.createEmptyTabContent(
+            "ContactHeart",
+            "You have not liked anything",
+            "Like any notebook from Official Samples or Public gallery"
+          )
+        : this.createSearchBarHeader(this.createCardsTabContent(data)),
     };
   }
 
   private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      content: this.createPublishedNotebooksTabContent(data),
+      content: this.isEmptyData(data)
+        ? this.createEmptyTabContent(
+            "Contact",
+            "You have not published anything",
+            "Publish your sample notebooks to share your published work with others"
+          )
+        : this.createPublishedNotebooksTabContent(data),
     };
   };
 
@@ -364,9 +398,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublicNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
-        let response: IJunoResponse<IPublicGalleryData> | IJunoResponse<IGalleryItem[]>;
-        if (this.props.container.isCodeOfConductEnabled()) {
-          response = await this.props.junoClient.fetchPublicNotebooks();
+        let response: IJunoResponse<IGalleryItem[]> | IJunoResponse<IPublicGalleryData>;
+        if (this.props.container) {
+          response = await this.props.junoClient.getPublicGalleryData();
           this.isCodeOfConductAccepted = response.data?.metadata.acceptedCodeOfConduct;
           this.publicNotebooks = response.data?.notebooksData;
         } else {
@@ -570,7 +604,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private deleteItem = async (data: IGalleryItem): Promise<void> => {
     GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
-      this.publishedNotebooks = this.publishedNotebooks.filter((notebook) => item.id !== notebook.id);
+      this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
       this.refreshSelectedTab(item);
     });
   };

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -93,6 +93,7 @@ describe("SettingsComponent", () => {
       manualThroughput: undefined,
       minimumThroughput: 400,
       id: "test",
+      offerReplacePending: false,
     });
 
     const props = { ...baseProps };
@@ -230,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;

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.collection.partitionKey ||
-      (this.container.isPreferredApiMongoDB() && this.collection.partitionKey.systemKey);
+      this.container.isPreferredApiMongoDB() &&
+      (!this.collection.partitionKey || this.collection.partitionKey.systemKey);
 
     this.state = {
       throughput: undefined,
@@ -295,7 +295,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    return !!this.collection?.offer()?.headers?.[Constants.HttpHeaders.offerReplacePending];
+    return this.collection?.offer()?.offerReplacePending;
   };
 
   public onSaveClick = async (): Promise<void> => {
@@ -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;
       }
     }

src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx

@@ -1,9 +1,9 @@
 import { shallow } from "enzyme";
 import React from "react";
+import { IColumn, Text } from "office-ui-fabric-react";
 import {
   getAutoPilotV3SpendElement,
-  getEstimatedSpendElement,
-  getEstimatedAutoscaleSpendElement,
+  getEstimatedSpendingElement,
   manualToAutoscaleDisclaimerElement,
   ttlWarning,
   indexingPolicynUnsavedWarningMessage,
@@ -20,10 +20,36 @@ import {
   mongoIndexingPolicyAADError,
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,
+  ManualEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
   public render(): JSX.Element {
+    const estimatedSpendingColumns: IColumn[] = [
+      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "daily", name: "Daily", fieldName: "daily", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "monthly", name: "Monthly", fieldName: "monthly", minWidth: 100, maxWidth: 200, isResizable: true },
+    ];
+    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        hourly: <Text>$ 1.02</Text>,
+        daily: <Text>$ 24.48</Text>,
+        monthly: <Text>$ 744.6</Text>,
+      },
+    ];
+    const priceBreakdown: PriceBreakdown = {
+      hourlyPrice: 1.02,
+      dailyPrice: 24.48,
+      monthlyPrice: 744.6,
+      pricePerRu: 0.00051,
+      currency: "RMB",
+      currencySign: "¥",
+    };
+
     return (
       <>
         {getAutoPilotV3SpendElement(1000, false)}
@@ -31,9 +57,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {getAutoPilotV3SpendElement(1000, true)}
         {getAutoPilotV3SpendElement(undefined, true)}
 
-        {getEstimatedSpendElement(1000, "mooncake", 2, false)}
-
-        {getEstimatedAutoscaleSpendElement(1000, "mooncake", 2, false)}
+        {getEstimatedSpendingElement(estimatedSpendingColumns, estimatedSpendingItems, 1000, 2, priceBreakdown, false)}
 
         {manualToAutoscaleDisclaimerElement}
         {ttlWarning}
@@ -69,4 +93,14 @@ describe("SettingsUtils functions", () => {
     const wrapper = shallow(<SettingsRenderUtilsTestComponent />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("should return correct price breakdown for a manual RU setting of 500, 1 region, multimaster disabled", () => {
+    const prices = getRuPriceBreakdown(500, "", 1, false, false);
+    expect(prices.hourlyPrice).toBe(0.04);
+    expect(prices.dailyPrice).toBe(0.96);
+    expect(prices.monthlyPrice).toBe(29.2);
+    expect(prices.pricePerRu).toBe(0.00008);
+    expect(prices.currency).toBe("USD");
+    expect(prices.currencySign).toBe("$");
+  });
 });

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -3,14 +3,13 @@ import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
 import { Urls, StyleConstants } from "../../../Common/Constants";
 import {
-  computeAutoscaleUsagePriceHourly,
   getPriceCurrency,
   getCurrencySign,
   getAutoscalePricePerRu,
   getMultimasterMultiplier,
   computeRUUsagePriceHourly,
   getPricePerRu,
-  calculateEstimateNumber,
+  estimatedCostDisclaimer,
 } from "../../../Utils/PricingUtils";
 import {
   ITextFieldStyles,
@@ -33,10 +32,41 @@ import {
   Stack,
   Spinner,
   SpinnerSize,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  DetailsListLayoutMode,
+  IDetailsRowProps,
+  DetailsRow,
+  IDetailsColumnStyles,
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
+export interface EstimatedSpendingDisplayProps {
+  costType: JSX.Element;
+}
+
+export interface ManualEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
+  hourly: JSX.Element;
+  daily: JSX.Element;
+  monthly: JSX.Element;
+}
+
+export interface AutoscaleEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
+  minPerMonth: JSX.Element;
+  maxPerMonth: JSX.Element;
+}
+
+export interface PriceBreakdown {
+  hourlyPrice: number;
+  dailyPrice: number;
+  monthlyPrice: number;
+  pricePerRu: number;
+  currency: string;
+  currencySign: string;
+}
+
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -104,6 +134,16 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   },
 };
 
+export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
+  root: {
+    selectors: {
+      ":hover": {
+        background: "transparent",
+      },
+    },
+  },
+};
+
 export const customDetailsListStyles: Partial<IDetailsListStyles> = {
   root: {
     selectors: {
@@ -126,10 +166,17 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
   ],
 };
 
-export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop: "5px" } };
+export const messageBarStyles: Partial<IMessageBarStyles> = {
+  root: { marginTop: "5px", backgroundColor: "white" },
+  text: { fontSize: 14 },
+};
 
 export const throughputUnit = "RU/s";
 
+export function onRenderRow(props: IDetailsRowProps): JSX.Element {
+  return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
+}
+
 export const getAutoPilotV3SpendElement = (
   maxAutoPilotThroughputSet: number,
   isDatabaseThroughput: boolean,
@@ -165,63 +212,61 @@ export const getAutoPilotV3SpendElement = (
   );
 };
 
-export const getEstimatedAutoscaleSpendElement = (
+export const getRuPriceBreakdown = (
   throughput: number,
   serverId: string,
-  regions: number,
-  multimaster: boolean
-): JSX.Element => {
-  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
-  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-  const currency: string = getPriceCurrency(serverId);
-  const currencySign: string = getCurrencySign(serverId);
-  const pricePerRu =
-    getAutoscalePricePerRu(serverId, getMultimasterMultiplier(regions, multimaster)) *
-    getMultimasterMultiplier(regions, multimaster);
-
-  return (
-    <Text id="autoscaleSpendElement">
-      Estimated monthly cost ({currency}) is{" "}
-      <b>
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice / 10)}
-        {` - `}
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice)}{" "}
-      </b>
-      ({"regions: "} {regions}, {throughput / 10} - {throughput} RU/s, {currencySign}
-      {pricePerRu}/RU)
-    </Text>
-  );
+  numberOfRegions: number,
+  isMultimaster: boolean,
+  isAutoscale: boolean
+): PriceBreakdown => {
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId: serverId,
+    requestUnits: throughput,
+    numberOfRegions: numberOfRegions,
+    multimasterEnabled: isMultimaster,
+    isAutoscale: isAutoscale,
+  });
+  const basePricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    : getPricePerRu(serverId);
+  return {
+    hourlyPrice: hourlyPrice,
+    dailyPrice: hourlyPrice * 24,
+    monthlyPrice: hourlyPrice * hoursInAMonth,
+    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+    currency: getPriceCurrency(serverId),
+    currencySign: getCurrencySign(serverId),
+  };
 };
 
-export const getEstimatedSpendElement = (
+export const getEstimatedSpendingElement = (
+  estimatedSpendingColumns: IColumn[],
+  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
   throughput: number,
-  serverId: string,
-  regions: number,
-  multimaster: boolean
+  numberOfRegions: number,
+  priceBreakdown: PriceBreakdown,
+  isAutoscale: boolean
 ): JSX.Element => {
-  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, throughput, regions, multimaster);
-  const dailyPrice: number = hourlyPrice * 24;
-  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-  const currency: string = getPriceCurrency(serverId);
-  const currencySign: string = getCurrencySign(serverId);
-  const pricePerRu = getPricePerRu(serverId) * getMultimasterMultiplier(regions, multimaster);
-
+  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
-    <Text id="throughputSpendElement">
-      Estimated cost ({currency}):{" "}
-      <b>
-        {currencySign}
-        {calculateEstimateNumber(hourlyPrice)} hourly {` / `}
-        {currencySign}
-        {calculateEstimateNumber(dailyPrice)} daily {` / `}
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      </b>
-      ({"regions: "} {regions}, {throughput}RU/s, {currencySign}
-      {pricePerRu}/RU)
-    </Text>
+    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
+      <DetailsList
+        disableSelectionZone
+        items={estimatedSpendingItems}
+        columns={estimatedSpendingColumns}
+        selectionMode={SelectionMode.none}
+        layoutMode={DetailsListLayoutMode.justified}
+        onRenderRow={onRenderRow}
+      />
+      <Text id="throughputSpendElement">
+        ({"regions: "} {numberOfRegions}, {ruRange}
+        {throughput} RU/s, {priceBreakdown.currencySign}
+        {priceBreakdown.pricePerRu}/RU)
+      </Text>
+      <Text>
+        <em>{estimatedCostDisclaimer}</em>
+      </Text>
+    </Stack>
   );
 };
 
@@ -265,6 +310,13 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
   </Text>
 );
 
+export const saveThroughputWarningMessage: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
+    before saving your changes
+  </Text>
+);
+
 const getCurrentThroughput = (
   isAutoscale: boolean,
   throughput: number,
@@ -389,6 +441,13 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = (
   </Text>
 );
 
+export const mongoCompoundIndexNotSupportedMessage: JSX.Element = (
+  <Text>
+    Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this
+    collection, use the Mongo Shell.
+  </Text>
+);
+
 export const mongoIndexingPolicyAADError: JSX.Element = (
   <MessageBar messageBarType={MessageBarType.error}>
     <Text>

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx

@@ -36,6 +36,14 @@ describe("MongoIndexingPolicyComponent", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it("error shown for collection with compound indexes", () => {
+    const props = { ...baseProps, mongoIndexes: [{ key: { keys: ["prop1", "prop2"] } }] };
+    const wrapper = shallow(<MongoIndexingPolicyComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    const mongoIndexingPolicyComponent = wrapper.instance() as MongoIndexingPolicyComponent;
+    expect(mongoIndexingPolicyComponent.hasCompoundIndex()).toBeTruthy();
+  });
+
   describe("AddMongoIndexProps test", () => {
     const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
     const mongoIndexingPolicyComponent = wrapper.instance() as MongoIndexingPolicyComponent;

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -6,8 +6,6 @@ import {
   IconButton,
   Text,
   SelectionMode,
-  IDetailsRowProps,
-  DetailsRow,
   IColumn,
   MessageBar,
   MessageBarType,
@@ -21,11 +19,12 @@ import {
   mongoIndexingPolicyDisclaimer,
   mediumWidthStackStyles,
   subComponentStackProps,
-  transparentDetailsRowStyles,
   createAndAddMongoIndexStackProps,
   separatorStyles,
   indexingPolicynUnsavedWarningMessage,
   infoAndToolTipTextStyle,
+  onRenderRow,
+  mongoCompoundIndexNotSupportedMessage,
 } from "../../SettingsRenderUtils";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
@@ -140,10 +139,6 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     return undefined;
   };
 
-  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
-    return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
-  };
-
   private getActionButton = (arrayPosition: number, isCurrentIndex: boolean): JSX.Element => {
     return isCurrentIndex ? (
       <IconButton
@@ -253,7 +248,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
                 items={initialIndexes}
                 columns={this.initialIndexesColumns}
                 selectionMode={SelectionMode.none}
-                onRenderRow={this.onRenderRow}
+                onRenderRow={onRenderRow}
                 layoutMode={DetailsListLayoutMode.justified}
               />
               {this.renderIndexesToBeAdded()}
@@ -279,7 +274,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
               items={indexesToBeDropped}
               columns={this.indexesToBeDroppedColumns}
               selectionMode={SelectionMode.none}
-              onRenderRow={this.onRenderRow}
+              onRenderRow={onRenderRow}
               layoutMode={DetailsListLayoutMode.justified}
             />
           )}
@@ -288,6 +283,15 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     );
   };
 
+  public hasCompoundIndex = (): boolean => {
+    for (let index = 0; index < this.props.mongoIndexes.length; index++) {
+      if (this.props.mongoIndexes[index].key?.keys?.length > 1) {
+        return true;
+      }
+    }
+    return false;
+  };
+
   private renderWarningMessage = (): JSX.Element => {
     let warningMessage: JSX.Element;
     if (this.getMongoWarningNotificationMessage()) {
@@ -309,6 +313,9 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
 
   public render(): JSX.Element {
     if (this.props.mongoIndexes) {
+      if (this.hasCompoundIndex()) {
+        return mongoCompoundIndexNotSupportedMessage;
+      }
       return (
         <Stack {...subComponentStackProps}>
           {this.renderWarningMessage()}

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
+<Text>
+  Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
+</Text>
+`;
+
 exports[`MongoIndexingPolicyComponent renders 1`] = `
 <Stack
   tokens={

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx

@@ -59,7 +59,7 @@ describe("ScaleComponent", () => {
       autoscaleMaxThroughput: maxThroughput,
       minimumThroughput: 400,
       id: "offer",
-      headers: { "x-ms-offer-replace-pending": true },
+      offerReplacePending: true,
     });
     const newProps = {
       ...baseProps,

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 { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
 import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
@@ -116,7 +116,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     }
 
     const offer = this.props.collection?.offer();
-    if (offer?.headers?.[Constants.HttpHeaders.offerReplacePending]) {
+    if (offer?.offerReplacePending) {
       const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
         this.props.isAutoPilotSelected,
@@ -165,6 +165,8 @@ 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}
@@ -176,6 +178,7 @@ 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}
@@ -190,9 +193,37 @@ 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>
         )}

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -13,16 +13,7 @@ import {
 } from "../SettingsUtils";
 import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import {
-  Label,
-  Text,
-  TextField,
-  Stack,
-  IChoiceGroupOption,
-  ChoiceGroup,
-  MessageBar,
-  MessageBarType,
-} from "office-ui-fabric-react";
+import { Label, Text, TextField, Stack, IChoiceGroupOption, ChoiceGroup, MessageBar } from "office-ui-fabric-react";
 import {
   getTextFieldStyles,
   changeFeedPolicyToolTip,
@@ -190,7 +181,10 @@ 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 messageBarType={MessageBarType.warning} styles={messageBarStyles}>
+        <MessageBar
+          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+          styles={messageBarStyles}
+        >
           {ttlWarning}
         </MessageBar>
       )}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx

@@ -9,6 +9,8 @@ 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,
@@ -26,6 +28,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     spendAckVisible: false,
     showAsMandatory: true,
     isFixed: false,
+    isFreeTierAccount: false,
     label: "label",
     infoBubbleText: "infoBubbleText",
     canExceedMaximumValue: true,
@@ -54,7 +57,6 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     expect(wrapper.exists("#throughputInput")).toEqual(true);
     expect(wrapper.exists("#autopilotInput")).toEqual(false);
     expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
-    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(false);
   });
 
   it("autopilot input visible", () => {
@@ -72,8 +74,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
 
     wrapper.setProps({ wasAutopilotOriginallySet: true });
     wrapper.update();
-    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(true);
-    expect(wrapper.exists("#throughputSpendElement")).toEqual(false);
+    expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
   });
 
   it("spendAck checkbox visible", () => {

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -8,10 +8,15 @@ import {
   checkBoxAndInputStackProps,
   getChoiceGroupStyles,
   messageBarStyles,
-  getEstimatedSpendElement,
-  getEstimatedAutoscaleSpendElement,
+  getEstimatedSpendingElement,
   getAutoPilotV3SpendElement,
   manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle,
 } from "../../SettingsRenderUtils";
 import {
   Text,
@@ -23,7 +28,8 @@ import {
   Label,
   Link,
   MessageBar,
-  MessageBarType,
+  FontIcon,
+  IColumn,
 } from "office-ui-fabric-react";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
@@ -32,11 +38,16 @@ import * as DataModels from "../../../../../Contracts/DataModels";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import { userContext } from "../../../../../UserContext";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import { usageInGB } from "../../../../../Utils/PricingUtils";
+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;
@@ -51,6 +62,7 @@ export interface ThroughputInputAutoPilotV3Props {
   spendAckVisible?: boolean;
   showAsMandatory?: boolean;
   isFixed: boolean;
+  isFreeTierAccount: boolean;
   isEmulator: boolean;
   label: string;
   infoBubbleText?: string;
@@ -69,6 +81,7 @@ export interface ThroughputInputAutoPilotV3Props {
 
 interface ThroughputInputAutoPilotV3State {
   spendAckChecked: boolean;
+  exceedFreeTierThroughput: boolean;
 }
 
 export class ThroughputInputAutoPilotV3Component extends React.Component<
@@ -143,6 +156,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     super(props);
     this.state = {
       spendAckChecked: this.props.spendAckChecked,
+      exceedFreeTierThroughput:
+        this.props.isFreeTierAccount && !this.props.isAutoPilotSelected && this.props.throughput > 400,
     };
 
     this.step = this.props.step ?? ThroughputInputAutoPilotV3Component.defaultStep;
@@ -165,33 +180,243 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return <></>;
     }
 
+    const isDirty: boolean = this.IsComponentDirty().isDiscardable;
     const serverId: string = this.props.serverId;
-    const offerThroughput: number = this.props.throughput;
-
     const regions = account?.properties?.readLocations?.length || 1;
     const multimaster = account?.properties?.enableMultipleWriteLocations || false;
 
     let estimatedSpend: JSX.Element;
 
     if (!this.props.isAutoPilotSelected) {
-      estimatedSpend = getEstimatedSpendElement(
+      estimatedSpend = this.getEstimatedManualSpendElement(
         // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
-        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : offerThroughput,
+        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
         serverId,
         regions,
-        multimaster
+        multimaster,
+        isDirty ? this.props.throughput : undefined
       );
     } else {
-      estimatedSpend = getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughput,
+      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
+        this.props.maxAutoPilotThroughputBaseline,
         serverId,
         regions,
-        multimaster
+        multimaster,
+        isDirty ? this.props.maxAutoPilotThroughput : undefined
       );
     }
     return estimatedSpend;
   };
 
+  private getEstimatedAutoscaleSpendElement = (
+    throughput: number,
+    serverId: string,
+    numberOfRegions: number,
+    isMultimaster: boolean,
+    newThroughput?: number
+  ): JSX.Element => {
+    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
+    const estimatedSpendingColumns: IColumn[] = [
+      {
+        key: "costType",
+        name: "",
+        fieldName: "costType",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+      {
+        key: "minPerMonth",
+        name: "Min Per Month",
+        fieldName: "minPerMonth",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+      {
+        key: "maxPerMonth",
+        name: "Max Per Month",
+        fieldName: "maxPerMonth",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+    ];
+    const estimatedSpendingItems: AutoscaleEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        minPerMonth: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)}
+          </Text>
+        ),
+        maxPerMonth: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+          </Text>
+        ),
+      },
+    ];
+
+    if (newThroughput) {
+      const newPrices: PriceBreakdown = getRuPriceBreakdown(
+        newThroughput,
+        serverId,
+        numberOfRegions,
+        isMultimaster,
+        true
+      );
+      estimatedSpendingItems.unshift({
+        costType: (
+          <Text>
+            <b>Updated Cost</b>
+          </Text>
+        ),
+        minPerMonth: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)}
+            </b>
+          </Text>
+        ),
+        maxPerMonth: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+            </b>
+          </Text>
+        ),
+      });
+    }
+
+    return getEstimatedSpendingElement(
+      estimatedSpendingColumns,
+      estimatedSpendingItems,
+      newThroughput ?? throughput,
+      numberOfRegions,
+      prices,
+      true
+    );
+  };
+
+  private getEstimatedManualSpendElement = (
+    throughput: number,
+    serverId: string,
+    numberOfRegions: number,
+    isMultimaster: boolean,
+    newThroughput?: number
+  ): JSX.Element => {
+    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
+    const estimatedSpendingColumns: IColumn[] = [
+      {
+        key: "costType",
+        name: "",
+        fieldName: "costType",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+      {
+        key: "hourly",
+        name: "Hourly",
+        fieldName: "hourly",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+      {
+        key: "daily",
+        name: "Daily",
+        fieldName: "daily",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+      {
+        key: "monthly",
+        name: "Monthly",
+        fieldName: "monthly",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle,
+      },
+    ];
+    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        hourly: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
+          </Text>
+        ),
+        daily: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
+          </Text>
+        ),
+        monthly: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+          </Text>
+        ),
+      },
+    ];
+
+    if (newThroughput) {
+      const newPrices: PriceBreakdown = getRuPriceBreakdown(
+        newThroughput,
+        serverId,
+        numberOfRegions,
+        isMultimaster,
+        false
+      );
+      estimatedSpendingItems.unshift({
+        costType: (
+          <Text>
+            <b>Updated Cost</b>
+          </Text>
+        ),
+        hourly: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
+            </b>
+          </Text>
+        ),
+        daily: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
+            </b>
+          </Text>
+        ),
+        monthly: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+            </b>
+          </Text>
+        ),
+      });
+    }
+
+    return getEstimatedSpendingElement(
+      estimatedSpendingColumns,
+      estimatedSpendingItems,
+      newThroughput ?? throughput,
+      numberOfRegions,
+      prices,
+      false
+    );
+  };
+
   private getAutoPilotUsageCost = (): JSX.Element => {
     if (!this.props.maxAutoPilotThroughput) {
       return <></>;
@@ -207,7 +432,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string
   ): void => {
-    const newThroughput = getSanitizedInputValue(newValue, this.autoPilotInputMaxValue);
+    const newThroughput = getSanitizedInputValue(newValue);
     this.props.onMaxAutoPilotThroughputChange(newThroughput);
   };
 
@@ -215,10 +440,11 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string
   ): void => {
-    const newThroughput = getSanitizedInputValue(newValue, this.throughputInputMaxValue);
+    const newThroughput = getSanitizedInputValue(newValue);
     if (this.overrideWithAutoPilotSettings()) {
       this.props.onMaxAutoPilotThroughputChange(newThroughput);
     } else {
+      this.setState({ exceedFreeTierThroughput: this.props.isFreeTierAccount && newThroughput > 400 });
       this.props.onThroughputChange(newThroughput);
     }
   };
@@ -226,7 +452,19 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
   private onChoiceGroupChange = (
     event?: React.FormEvent<HTMLElement | HTMLInputElement>,
     option?: IChoiceGroupOption
-  ): void => this.props.onAutoPilotSelected(option.key === "true");
+  ): 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",
+    });
+  };
 
   private minRUperGBSurvey = (): JSX.Element => {
     const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
@@ -262,7 +500,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           />
         </Label>
         {this.overrideWithProvisionedThroughputSettings() && (
-          <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
+          <MessageBar
+            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+            styles={messageBarStyles}
+          >
             {manualToAutoscaleDisclaimerElement}
           </MessageBar>
         )}
@@ -318,6 +559,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
   private renderThroughputInput = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
+      <Text>
+        Estimate your required throughput with
+        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+          {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
+        </Link>
+      </Text>
       <TextField
         required
         type="number"
@@ -333,8 +580,21 @@ 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 messageBarType={MessageBarType.warning} styles={messageBarStyles}>
+        <MessageBar
+          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+          styles={messageBarStyles}
+        >
           {this.props.getThroughputWarningMessage()}
         </MessageBar>
       )}
@@ -349,13 +609,32 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           onChange={this.onSpendAckChecked}
         />
       )}
+      <br />
       {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
     </Stack>
   );
 
+  private renderWarningMessage = (): JSX.Element => {
+    let warningMessage: JSX.Element;
+    if (this.IsComponentDirty().isDiscardable) {
+      warningMessage = saveThroughputWarningMessage;
+    }
+
+    return (
+      <>
+        {warningMessage && (
+          <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
+            {warningMessage}
+          </MessageBar>
+        )}
+      </>
+    );
+  };
+
   public render(): JSX.Element {
     return (
       <Stack {...checkBoxAndInputStackProps}>
+        {this.renderWarningMessage()}
         {this.renderThroughputModeChoices()}
 
         {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

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

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": 12,
+            "fontSize": 14,
           },
         }
       }
@@ -40,6 +40,8 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
   >
     <ThroughputInputAutoPilotV3Component
       canExceedMaximumValue={true}
+      collectionName="test"
+      databaseName="test"
       getThroughputWarningMessage={[Function]}
       isAutoPilotSelected={false}
       isEmulator={false}

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -136,7 +136,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }
@@ -412,7 +412,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }
@@ -952,7 +952,7 @@ exports[`SubSettingsComponent renders 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }
@@ -1228,7 +1228,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }

src/Explorer/Controls/Settings/SettingsUtils.test.tsx

@@ -5,7 +5,6 @@ import {
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
-  isDirtyTypes,
   MongoIndexTypes,
   MongoNotificationType,
   parseConflictResolutionMode,
@@ -71,17 +70,18 @@ describe("SettingsUtils", () => {
       excludedPaths: [],
     } as DataModels.IndexingPolicy;
 
-    const cases = [
-      ["baseline", "current"],
-      [0, 1],
-      [true, false],
-      [undefined, indexingPolicy],
-      [indexingPolicy, { ...indexingPolicy, automatic: false }],
-    ];
+    it("works on all types", () => {
+      expect(isDirty("baseline", "baseline")).toEqual(false);
+      expect(isDirty(0, 0)).toEqual(false);
+      expect(isDirty(true, true)).toEqual(false);
+      expect(isDirty(undefined, undefined)).toEqual(false);
+      expect(isDirty(indexingPolicy, indexingPolicy)).toEqual(false);
 
-    test.each(cases)("", (baseline: isDirtyTypes, current: isDirtyTypes) => {
-      expect(isDirty(baseline, baseline)).toEqual(false);
-      expect(isDirty(baseline, current)).toEqual(true);
+      expect(isDirty("baseline", "current")).toEqual(true);
+      expect(isDirty(0, 1)).toEqual(true);
+      expect(isDirty(true, false)).toEqual(true);
+      expect(isDirty(undefined, indexingPolicy)).toEqual(true);
+      expect(isDirty(indexingPolicy, { ...indexingPolicy, automatic: false })).toEqual(true);
     });
   });
 

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 Math.min(newValue, max);
+  return max ? Math.min(newValue, max) : newValue;
 };
 
 export const isDirty = (current: isDirtyTypes, baseline: isDirtyTypes): boolean => {

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -24,6 +24,7 @@ export const collection = ({
     manualThroughput: 10000,
     minimumThroughput: 6000,
     id: "offer",
+    offerReplacePending: false,
   }),
   conflictResolutionPolicy: ko.observable<DataModels.ConflictResolutionPolicy>(
     {} as DataModels.ConflictResolutionPolicy

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -55,6 +55,7 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -104,6 +105,7 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -591,6 +593,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -665,6 +668,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -731,7 +735,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -943,7 +946,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isCodeOfConductEnabled": [Function],
+                "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -952,9 +955,9 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
+                "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isNotificationConsoleExpanded": [Function],
                 "isPreferredApiCassandra": [Function],
                 "isPreferredApiDocumentDB": [Function],
                 "isPreferredApiGraph": [Function],
@@ -1014,17 +1017,10 @@ exports[`SettingsComponent renders 1`] = `
                 "nonSystemDatabases": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
-                "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                  "consoleData": [Function],
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
-                "parentFrameDataExplorerVersion": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1050,7 +1046,6 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
-                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -1118,7 +1113,18 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
                 "serverId": [Function],
+                "setInProgressConsoleDataIdToBeDeleted": undefined,
+                "setIsNotificationConsoleExpanded": undefined,
+                "setNotificationConsoleData": undefined,
                 "settingsPane": SettingsPane {
                   "container": [Circular],
                   "crossPartitionQueryEnabled": [Function],
@@ -1179,11 +1185,9 @@ exports[`SettingsComponent renders 1`] = `
                   },
                   "direction": "vertical",
                   "isCollapsed": [Function],
-                  "leftSide": null,
                   "leftSideId": "resourcetree",
                   "onResizeStart": [Function],
                   "onResizeStop": [Function],
-                  "splitter": null,
                   "splitterId": "h_splitter1",
                 },
                 "stringInputPane": StringInputPane {
@@ -1330,6 +1334,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -1379,6 +1384,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -1866,6 +1872,7 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -1940,6 +1947,7 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -2006,7 +2014,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -2218,7 +2225,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isCodeOfConductEnabled": [Function],
+              "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -2227,9 +2234,9 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
+              "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isNotificationConsoleExpanded": [Function],
               "isPreferredApiCassandra": [Function],
               "isPreferredApiDocumentDB": [Function],
               "isPreferredApiGraph": [Function],
@@ -2289,17 +2296,10 @@ exports[`SettingsComponent renders 1`] = `
               "nonSystemDatabases": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
-              "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                "consoleData": [Function],
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
-              "parentFrameDataExplorerVersion": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2325,7 +2325,6 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
-              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -2393,7 +2392,18 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
               "serverId": [Function],
+              "setInProgressConsoleDataIdToBeDeleted": undefined,
+              "setIsNotificationConsoleExpanded": undefined,
+              "setNotificationConsoleData": undefined,
               "settingsPane": SettingsPane {
                 "container": [Circular],
                 "crossPartitionQueryEnabled": [Function],
@@ -2454,11 +2464,9 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "direction": "vertical",
                 "isCollapsed": [Function],
-                "leftSide": null,
                 "leftSideId": "resourcetree",
                 "onResizeStart": [Function],
                 "onResizeStop": [Function],
-                "splitter": null,
                 "splitterId": "h_splitter1",
               },
               "stringInputPane": StringInputPane {
@@ -2618,6 +2626,7 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -2667,6 +2676,7 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -3154,6 +3164,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -3228,6 +3239,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3294,7 +3306,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -3506,7 +3517,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isCodeOfConductEnabled": [Function],
+                "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -3515,9 +3526,9 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
+                "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isNotificationConsoleExpanded": [Function],
                 "isPreferredApiCassandra": [Function],
                 "isPreferredApiDocumentDB": [Function],
                 "isPreferredApiGraph": [Function],
@@ -3577,17 +3588,10 @@ exports[`SettingsComponent renders 1`] = `
                 "nonSystemDatabases": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
-                "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                  "consoleData": [Function],
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
-                "parentFrameDataExplorerVersion": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3613,7 +3617,6 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
-                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -3681,7 +3684,18 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
                 "serverId": [Function],
+                "setInProgressConsoleDataIdToBeDeleted": undefined,
+                "setIsNotificationConsoleExpanded": undefined,
+                "setNotificationConsoleData": undefined,
                 "settingsPane": SettingsPane {
                   "container": [Circular],
                   "crossPartitionQueryEnabled": [Function],
@@ -3742,11 +3756,9 @@ exports[`SettingsComponent renders 1`] = `
                   },
                   "direction": "vertical",
                   "isCollapsed": [Function],
-                  "leftSide": null,
                   "leftSideId": "resourcetree",
                   "onResizeStart": [Function],
                   "onResizeStop": [Function],
-                  "splitter": null,
                   "splitterId": "h_splitter1",
                 },
                 "stringInputPane": StringInputPane {
@@ -3893,6 +3905,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3942,6 +3955,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -4429,6 +4443,7 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -4503,6 +4518,7 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -4569,7 +4585,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -4781,7 +4796,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isCodeOfConductEnabled": [Function],
+              "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -4790,9 +4805,9 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
+              "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isNotificationConsoleExpanded": [Function],
               "isPreferredApiCassandra": [Function],
               "isPreferredApiDocumentDB": [Function],
               "isPreferredApiGraph": [Function],
@@ -4852,17 +4867,10 @@ exports[`SettingsComponent renders 1`] = `
               "nonSystemDatabases": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
-              "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                "consoleData": [Function],
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
-              "parentFrameDataExplorerVersion": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4888,7 +4896,6 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
-              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -4956,7 +4963,18 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
               "serverId": [Function],
+              "setInProgressConsoleDataIdToBeDeleted": undefined,
+              "setIsNotificationConsoleExpanded": undefined,
+              "setNotificationConsoleData": undefined,
               "settingsPane": SettingsPane {
                 "container": [Circular],
                 "crossPartitionQueryEnabled": [Function],
@@ -5017,11 +5035,9 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "direction": "vertical",
                 "isCollapsed": [Function],
-                "leftSide": null,
                 "leftSideId": "resourcetree",
                 "onResizeStart": [Function],
                 "onResizeStop": [Function],
-                "splitter": null,
                 "splitterId": "h_splitter1",
               },
               "stringInputPane": StringInputPane {

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -60,72 +60,106 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     .
   </Text>
-  <Text
-    id="throughputSpendElement"
+  <Stack
+    styles={
+      Object {
+        "root": Object {
+          "width": 600,
+        },
+      }
+    }
+    tokens={
+      Object {
+        "childrenGap": 10,
+      }
+    }
   >
-    Estimated cost (
-    RMB
-    ):
-     
-    <b>
-      ¥
-      1.02
-       hourly 
-       / 
-      ¥
-      24.48
-       daily 
-       / 
-      ¥
-      744.60
-       monthly
+    <StyledWithViewportComponent
+      columns={
+        Array [
+          Object {
+            "fieldName": "costType",
+            "isResizable": true,
+            "key": "costType",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "",
+          },
+          Object {
+            "fieldName": "hourly",
+            "isResizable": true,
+            "key": "hourly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Hourly",
+          },
+          Object {
+            "fieldName": "daily",
+            "isResizable": true,
+            "key": "daily",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Daily",
+          },
+          Object {
+            "fieldName": "monthly",
+            "isResizable": true,
+            "key": "monthly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Monthly",
+          },
+        ]
+      }
+      disableSelectionZone={true}
+      items={
+        Array [
+          Object {
+            "costType": <Text>
+              Current Cost
+            </Text>,
+            "daily": <Text>
+              $ 24.48
+            </Text>,
+            "hourly": <Text>
+              $ 1.02
+            </Text>,
+            "monthly": <Text>
+              $ 744.6
+            </Text>,
+          },
+        ]
+      }
+      layoutMode={1}
+      onRenderRow={[Function]}
+      selectionMode={0}
+    />
+    <Text
+      id="throughputSpendElement"
+    >
+      (
+      regions: 
        
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    1000
-    RU/s, 
-    ¥
-    0.00051
-    /RU)
-  </Text>
-  <Text
-    id="autoscaleSpendElement"
-  >
-    Estimated monthly cost (
-    RMB
-    ) is
-     
-    <b>
+      2
+      , 
+      1000
+       RU/s, 
       ¥
-      111.69
-       - 
-      ¥
-      1116.90
-       
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    100
-     - 
-    1000
-     RU/s, 
-    ¥
-    0.000765
-    /RU)
-  </Text>
+      0.00051
+      /RU)
+    </Text>
+    <Text>
+      <em>
+        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+      </em>
+    </Text>
+  </Stack>
   <Text
     id="manualToAutoscaleDisclaimerElement"
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -142,7 +176,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -161,7 +195,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -173,7 +207,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -185,7 +219,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -196,7 +230,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -215,7 +249,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -234,7 +268,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -252,7 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -265,7 +299,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -276,7 +310,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -295,7 +329,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -337,7 +371,7 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
-            "fontSize": 12,
+            "fontSize": 14,
           },
         }
       }
@@ -352,7 +386,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -368,7 +402,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, Descriptor, InputType } from "./SmartUiComponent";
+import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
+import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
 
 describe("SmartUiComponent", () => {
-  const exampleData: Descriptor = {
+  const exampleData: SmartUiDescriptor = {
     root: {
       id: "root",
       info: {
@@ -14,6 +15,20 @@ describe("SmartUiComponent", () => {
         },
       },
       children: [
+        {
+          id: "description",
+          input: {
+            dataFieldName: "description",
+            type: "string",
+            description: {
+              text: "this is an example description text.",
+              link: {
+                href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+                text: "Click here for more information.",
+              },
+            },
+          },
+        },
         {
           id: "throughput",
           input: {
@@ -24,7 +39,7 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            inputType: "spin",
+            uiType: NumberUiType.Spinner,
           },
         },
         {
@@ -37,7 +52,21 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            inputType: "slider",
+            uiType: NumberUiType.Slider,
+          },
+        },
+        {
+          id: "throughput3",
+          input: {
+            label: "Throughput (invalid)",
+            dataFieldName: "throughput3",
+            type: "boolean",
+            min: 400,
+            max: 500,
+            step: 10,
+            defaultValue: 400,
+            uiType: NumberUiType.Spinner,
+            errorMessage: "label, truelabel and falselabel are required for boolean input 'throughput3'",
           },
         },
         {
@@ -64,11 +93,11 @@ describe("SmartUiComponent", () => {
           input: {
             label: "Database",
             dataFieldName: "database",
-            type: "enum",
+            type: "object",
             choices: [
-              { label: "Database 1", key: "db1", value: "database1" },
-              { label: "Database 2", key: "db2", value: "database2" },
-              { label: "Database 3", key: "db3", value: "database3" },
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },
@@ -77,12 +106,58 @@ describe("SmartUiComponent", () => {
     },
   };
 
-  const exampleCallbacks = (newValues: Map<string, InputType>): void => {
-    console.log("New values:", newValues);
-  };
-
-  it("should render", () => {
-    const wrapper = shallow(<SmartUiComponent descriptor={exampleData} onChange={exampleCallbacks} />);
+  it("should render and honor input's hidden, disabled state", async () => {
+    const currentValues = new Map<string, SmartUiInput>();
+    const wrapper = shallow(
+      <SmartUiComponent
+        disabled={false}
+        descriptor={exampleData}
+        currentValues={currentValues}
+        onInputChange={jest.fn()}
+        onError={() => {
+          return;
+        }}
+      />
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#containerId-textField-input")).toBeTruthy();
+
+    currentValues.set("containerId", { value: "container1", hidden: true });
+    wrapper.setProps({ currentValues });
+    wrapper.update();
+    expect(wrapper.exists("#containerId-textField-input")).toBeFalsy();
+
+    currentValues.set("containerId", { value: "container1", hidden: false, disabled: true });
+    wrapper.setProps({ currentValues });
+    wrapper.update();
+    const containerIdTextField = wrapper.find("#containerId-textField-input");
+    expect(containerIdTextField.props().disabled).toBeTruthy();
+  });
+
+  it("disable all inputs", async () => {
+    const wrapper = shallow(
+      <SmartUiComponent
+        disabled={true}
+        descriptor={exampleData}
+        currentValues={new Map()}
+        onInputChange={jest.fn()}
+        onError={() => {
+          return;
+        }}
+      />
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(wrapper).toMatchSnapshot();
+    const throughputSpinner = wrapper.find("#throughput-spinner-input");
+    expect(throughputSpinner.props().disabled).toBeTruthy();
+    const throughput2Slider = wrapper.find("#throughput2-slider-input").childAt(0);
+    expect(throughput2Slider.props().disabled).toBeTruthy();
+    const containerIdTextField = wrapper.find("#containerId-textField-input");
+    expect(containerIdTextField.props().disabled).toBeTruthy();
+    const analyticalStoreToggle = wrapper.find("#analyticalStore-toggle-input");
+    expect(analyticalStoreToggle.props().disabled).toBeTruthy();
+    const databaseDropdown = wrapper.find("#database-dropdown-input");
+    expect(databaseDropdown.props().disabled).toBeTruthy();
   });
 });

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -5,13 +5,19 @@ 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 { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
 import * as InputUtils from "./InputUtils";
 import "./SmartUiComponent.less";
+import {
+  ChoiceItem,
+  Description,
+  Info,
+  InputType,
+  InputTypeValue,
+  NumberUiType,
+  SmartUiInput,
+} from "../../../SelfServe/SelfServeTypes";
 
 /**
  * Generic UX renderer
@@ -21,172 +27,191 @@ import "./SmartUiComponent.less";
  * - a descriptor of the UX.
  */
 
-export type InputTypeValue = "number" | "string" | "boolean" | "enum";
-
-/* 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;
+interface BaseDisplay {
   dataFieldName: string;
+  errorMessage?: string;
   type: InputTypeValue;
+}
+
+interface BaseInput extends BaseDisplay {
+  label: string;
   placeholder?: string;
+  errorMessage?: string;
 }
 
 /**
  * For now, this only supports integers
  */
-export interface NumberInput extends BaseInput {
-  min?: number;
-  max?: number;
+interface NumberInput extends BaseInput {
+  min: number;
+  max: number;
   step: number;
-  defaultValue: number;
-  inputType: "spin" | "slider";
+  defaultValue?: number;
+  uiType: NumberUiType;
 }
 
-export interface BooleanInput extends BaseInput {
+interface BooleanInput extends BaseInput {
   trueLabel: string;
   falseLabel: string;
-  defaultValue: boolean;
+  defaultValue?: boolean;
 }
 
-export interface StringInput extends BaseInput {
+interface StringInput extends BaseInput {
   defaultValue?: string;
 }
 
-export interface EnumInput extends BaseInput {
-  choices: EnumItem[];
-  defaultKey: string;
+interface ChoiceInput extends BaseInput {
+  choices: ChoiceItem[];
+  defaultKey?: string;
 }
 
-export interface Info {
-  message: string;
-  link?: {
-    href: string;
-    text: string;
-  };
+interface DescriptionDisplay extends BaseDisplay {
+  description: Description;
 }
 
-export type AnyInput = NumberInput | BooleanInput | StringInput | EnumInput;
+type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
 
-export interface Node {
+interface Node {
   id: string;
   info?: Info;
-  input?: AnyInput;
+  input?: AnyDisplay;
   children?: Node[];
 }
 
-export interface Descriptor {
+export interface SmartUiDescriptor {
   root: Node;
 }
 
 /************************** Component implementation starts here ************************************* */
-
 export interface SmartUiComponentProps {
-  descriptor: Descriptor;
-  onChange: (newValues: Map<string, InputType>) => void;
+  descriptor: SmartUiDescriptor;
+  currentValues: Map<string, SmartUiInput>;
+  onInputChange: (input: AnyDisplay, newValue: InputType) => void;
+  onError: (hasError: boolean) => void;
+  disabled: boolean;
 }
 
 interface SmartUiComponentState {
-  currentValues: Map<string, InputType>;
   errors: Map<string, string>;
 }
 
 export class SmartUiComponent extends React.Component<SmartUiComponentProps, SmartUiComponentState> {
+  private shouldCheckErrors = true;
   private static readonly labelStyle = {
     color: "#393939",
     fontFamily: "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
     fontSize: 12,
   };
 
+  componentDidUpdate(): void {
+    if (!this.shouldCheckErrors) {
+      this.shouldCheckErrors = true;
+      return;
+    }
+    this.props.onError(this.state.errors.size > 0);
+    this.shouldCheckErrors = false;
+  }
+
   constructor(props: SmartUiComponentProps) {
     super(props);
     this.state = {
-      currentValues: new Map(),
       errors: new Map(),
     };
   }
 
   private renderInfo(info: Info): JSX.Element {
     return (
-      <MessageBar>
+      <MessageBar styles={{ root: { width: 400 } }}>
         {info.message}
-        <Link href={info.link.href} target="_blank">
-          {info.link.text}
-        </Link>
+        {info.link && (
+          <Link href={info.link.href} target="_blank">
+            {info.link.text}
+          </Link>
+        )}
       </MessageBar>
     );
   }
 
-  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 {
+  private renderTextInput(input: StringInput): JSX.Element {
+    const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
+    const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
     return (
       <div className="stringInputContainer">
-        <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,
-                  },
+        <TextField
+          id={`${input.dataFieldName}-textField-input`}
+          label={input.label}
+          type="text"
+          value={value || ""}
+          placeholder={input.placeholder}
+          disabled={disabled}
+          onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
+          styles={{
+            root: { width: 400 },
+            subComponentStyles: {
+              label: {
+                root: {
+                  ...SmartUiComponent.labelStyle,
+                  fontWeight: 600,
                 },
               },
-            }}
-          />
-        </div>
+            },
+          }}
+        />
       </div>
     );
   }
 
+  private renderDescription(input: DescriptionDisplay): JSX.Element {
+    const description = input.description;
+    return (
+      <Text id={`${input.dataFieldName}-text-display`}>
+        {input.description.text}{" "}
+        {description.link && (
+          <Link target="_blank" href={input.description.link.href}>
+            {input.description.link.text}
+          </Link>
+        )}
+      </Text>
+    );
+  }
+
   private clearError(dataFieldName: string): void {
     const { errors } = this.state;
     errors.delete(dataFieldName);
     this.setState({ errors });
   }
 
-  private onValidate = (value: string, min: number, max: number, dataFieldName: string): string => {
+  private onValidate = (input: NumberInput, value: string, min: number, max: number): string => {
     const newValue = InputUtils.onValidateValueChange(value, min, max);
+    const dataFieldName = input.dataFieldName;
     if (newValue) {
-      this.onInputChange(newValue, dataFieldName);
+      this.props.onInputChange(input, newValue);
       this.clearError(dataFieldName);
       return newValue.toString();
     } else {
       const { errors } = this.state;
-      errors.set(dataFieldName, `Invalid value ${value}: must be between ${min} and ${max}`);
+      errors.set(dataFieldName, `Invalid value '${value}'. It must be between ${min} and ${max}`);
       this.setState({ errors });
     }
     return undefined;
   };
 
-  private onIncrement = (value: string, step: number, max: number, dataFieldName: string): string => {
+  private onIncrement = (input: NumberInput, value: string, step: number, max: number): string => {
     const newValue = InputUtils.onIncrementValue(value, step, max);
+    const dataFieldName = input.dataFieldName;
     if (newValue) {
-      this.onInputChange(newValue, dataFieldName);
+      this.props.onInputChange(input, newValue);
       this.clearError(dataFieldName);
       return newValue.toString();
     }
     return undefined;
   };
 
-  private onDecrement = (value: string, step: number, min: number, dataFieldName: string): string => {
+  private onDecrement = (input: NumberInput, value: string, step: number, min: number): string => {
     const newValue = InputUtils.onDecrementValue(value, step, min);
+    const dataFieldName = input.dataFieldName;
     if (newValue) {
-      this.onInputChange(newValue, dataFieldName);
+      this.props.onInputChange(input, newValue);
       this.clearError(dataFieldName);
       return newValue.toString();
     }
@@ -194,19 +219,29 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   };
 
   private renderNumberInput(input: NumberInput): JSX.Element {
-    const { label, min, max, defaultValue, dataFieldName, step } = input;
-    const props = { label, min, max, ariaLabel: label, step };
+    const { label, min, max, dataFieldName, step } = input;
+    const props = {
+      label: label,
+      min: min,
+      max: max,
+      ariaLabel: label,
+      step: step,
+    };
 
-    if (input.inputType === "spin") {
+    const value = this.props.currentValues.get(dataFieldName)?.value as number;
+    const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
+    if (input.uiType === NumberUiType.Spinner) {
       return (
-        <div>
+        <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
           <SpinButton
             {...props}
-            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)}
+            id={`${input.dataFieldName}-spinner-input`}
+            value={value?.toString()}
+            onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
+            onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
+            onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
             labelPosition={Position.top}
+            disabled={disabled}
             styles={{
               label: {
                 ...SmartUiComponent.labelStyle,
@@ -217,83 +252,71 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           {this.state.errors.has(dataFieldName) && (
             <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
           )}
+        </Stack>
+      );
+    } else if (input.uiType === NumberUiType.Slider) {
+      return (
+        <div id={`${input.dataFieldName}-slider-input`}>
+          <Slider
+            {...props}
+            value={value}
+            disabled={disabled}
+            onChange={(newValue) => this.props.onInputChange(input, newValue)}
+            styles={{
+              root: { width: 400 },
+              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 input type {input.inputType}</>;
+      return <>Unsupported number UI type {input.uiType}</>;
     }
   }
 
   private renderBooleanInput(input: BooleanInput): JSX.Element {
-    const { dataFieldName } = input;
+    const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
+    const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
     return (
-      <div>
-        <div className="inputLabelContainer">
-          <Text variant="small" nowrap className="inputLabel">
-            {input.label}
-          </Text>
-        </div>
-        <RadioSwitchComponent
-          choices={[
-            {
-              label: input.falseLabel,
-              key: "false",
-              onSelect: () => this.onInputChange(false, dataFieldName),
-            },
-            {
-              label: input.trueLabel,
-              key: "true",
-              onSelect: () => this.onInputChange(true, dataFieldName),
-            },
-          ]}
-          selectedKey={
-            (
-              this.state.currentValues.has(dataFieldName)
-                ? (this.state.currentValues.get(dataFieldName) as boolean)
-                : input.defaultValue
-            )
-              ? "true"
-              : "false"
-          }
-        />
-      </div>
+      <Toggle
+        id={`${input.dataFieldName}-toggle-input`}
+        label={input.label}
+        checked={value || false}
+        onText={input.trueLabel}
+        offText={input.falseLabel}
+        disabled={disabled}
+        onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
+        styles={{ root: { width: 400 } }}
+      />
     );
   }
 
-  private renderEnumInput(input: EnumInput): JSX.Element {
-    const { label, defaultKey, dataFieldName, choices, placeholder } = input;
+  private renderChoiceInput(input: ChoiceInput): JSX.Element {
+    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
+    const value = this.props.currentValues.get(dataFieldName)?.value as string;
+    const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
+    let selectedKey = value ? value : defaultKey;
+    if (!selectedKey) {
+      selectedKey = "";
+    }
     return (
       <Dropdown
+        id={`${input.dataFieldName}-dropdown-input`}
         label={label}
-        selectedKey={
-          this.state.currentValues.has(dataFieldName)
-            ? (this.state.currentValues.get(dataFieldName) as string)
-            : defaultKey
-        }
-        onChange={(_, item: IDropdownOption) => this.onInputChange(item.key.toString(), dataFieldName)}
+        selectedKey={selectedKey}
+        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
         placeholder={placeholder}
+        disabled={disabled}
         options={choices.map((c) => ({
           key: c.key,
-          text: c.value,
+          text: c.label,
         }))}
         styles={{
+          root: { width: 400 },
           label: {
             ...SmartUiComponent.labelStyle,
             fontWeight: 600,
@@ -304,16 +327,30 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     );
   }
 
-  private renderInput(input: AnyInput): JSX.Element {
+  private renderError(input: AnyDisplay): JSX.Element {
+    return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
+  }
+
+  private renderDisplay(input: AnyDisplay): JSX.Element {
+    if (input.errorMessage) {
+      return this.renderError(input);
+    }
+    const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
+    if (inputHidden) {
+      return <></>;
+    }
     switch (input.type) {
       case "string":
-        return this.renderStringInput(input as StringInput);
+        if ("description" in input) {
+          return this.renderDescription(input as DescriptionDisplay);
+        }
+        return this.renderTextInput(input as StringInput);
       case "number":
         return this.renderNumberInput(input as NumberInput);
       case "boolean":
         return this.renderBooleanInput(input as BooleanInput);
-      case "enum":
-        return this.renderEnumInput(input as EnumInput);
+      case "object":
+        return this.renderChoiceInput(input as ChoiceInput);
       default:
         throw new Error(`Unknown input type: ${input.type}`);
     }
@@ -324,14 +361,16 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        {node.info && this.renderInfo(node.info)}
-        {node.input && this.renderInput(node.input)}
+        <Stack.Item>
+          {node.info && this.renderInfo(node.info as Info)}
+          {node.input && this.renderDisplay(node.input)}
+        </Stack.Item>
         {node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
       </Stack>
     );
   }
 
   render(): JSX.Element {
-    return <>{this.renderNode(this.props.descriptor.root)}</>;
+    return this.renderNode(this.props.descriptor.root);
   }
 }

src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap

@@ -1,16 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SmartUiComponent should render 1`] = `
-<Fragment>
-  <Stack
-    className="widgetRendererContainer"
-    tokens={
-      Object {
-        "childrenGap": 10,
-      }
+exports[`SmartUiComponent disable all inputs 1`] = `
+<Stack
+  className="widgetRendererContainer"
+  tokens={
+    Object {
+      "childrenGap": 10,
     }
-  >
-    <StyledMessageBarBase>
+  }
+>
+  <StackItem>
+    <StyledMessageBarBase
+      styles={
+        Object {
+          "root": Object {
+            "width": 400,
+          },
+        }
+      }
+    >
       Start at $24/mo per database
       <StyledLinkBase
         href="https://aka.ms/azure-cosmos-db-pricing"
@@ -19,18 +27,60 @@ exports[`SmartUiComponent should render 1`] = `
         More Details
       </StyledLinkBase>
     </StyledMessageBarBase>
-    <div
-      key="throughput"
-    >
-      <Stack
-        className="widgetRendererContainer"
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
+  </StackItem>
+  <div
+    key="description"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
         }
-      >
-        <div>
+      }
+    >
+      <StackItem>
+        <Text
+          id="description-text-display"
+        >
+          this is an example description text.
+           
+          <StyledLinkBase
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+            target="_blank"
+          >
+            Click here for more information.
+          </StyledLinkBase>
+        </Text>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="throughput"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <Stack
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
+            }
+          }
+          tokens={
+            Object {
+              "childrenGap": 2,
+            }
+          }
+        >
           <CustomizedSpinButton
             ariaLabel="Throughput (input)"
             decrementButtonIcon={
@@ -38,8 +88,8 @@ exports[`SmartUiComponent should render 1`] = `
                 "iconName": "ChevronDownSmall",
               }
             }
-            defaultValue="400"
-            disabled={false}
+            disabled={true}
+            id="throughput-spinner-input"
             incrementButtonIcon={
               Object {
                 "iconName": "ChevronUpSmall",
@@ -64,155 +114,182 @@ exports[`SmartUiComponent should render 1`] = `
               }
             }
           />
-        </div>
-      </Stack>
-    </div>
-    <div
-      key="throughput2"
-    >
-      <Stack
-        className="widgetRendererContainer"
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
+        </Stack>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="throughput2"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
         }
-      >
-        <StyledSliderBase
-          ariaLabel="Throughput (Slider)"
-          defaultValue={400}
-          label="Throughput (Slider)"
-          max={500}
-          min={400}
+      }
+    >
+      <StackItem>
+        <div
+          id="throughput2-slider-input"
+        >
+          <StyledSliderBase
+            ariaLabel="Throughput (Slider)"
+            disabled={true}
+            label="Throughput (Slider)"
+            max={500}
+            min={400}
+            onChange={[Function]}
+            step={10}
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+                "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": 10,
+        }
+      }
+    >
+      <StackItem>
+        <StyledMessageBarBase
+          messageBarType={1}
+        >
+          Error: 
+          label, truelabel and falselabel are required for boolean input 'throughput3'
+        </StyledMessageBarBase>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="containerId"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <div
+          className="stringInputContainer"
+        >
+          <StyledTextFieldBase
+            disabled={true}
+            id="containerId-textField-input"
+            label="Container id"
+            onChange={[Function]}
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+                "subComponentStyles": Object {
+                  "label": Object {
+                    "root": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                      "fontWeight": 600,
+                    },
+                  },
+                },
+              }
+            }
+            type="text"
+            value=""
+          />
+        </div>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="analyticalStore"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <StyledToggleBase
+          checked={false}
+          disabled={true}
+          id="analyticalStore-toggle-input"
+          label="Analytical Store"
+          offText="Disabled"
           onChange={[Function]}
-          step={10}
+          onText="Enabled"
           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,
+              "root": Object {
+                "width": 400,
               },
             }
           }
         />
-      </Stack>
-    </div>
-    <div
-      key="containerId"
-    >
-      <Stack
-        className="widgetRendererContainer"
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="database"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
         }
-      >
-        <div
-          className="stringInputContainer"
-        >
-          <div>
-            <StyledTextFieldBase
-              id="containerId-input"
-              label="Container id"
-              onChange={[Function]}
-              styles={
-                Object {
-                  "subComponentStyles": Object {
-                    "label": Object {
-                      "root": Object {
-                        "color": "#393939",
-                        "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                        "fontSize": 12,
-                        "fontWeight": 600,
-                      },
-                    },
-                  },
-                }
-              }
-              type="text"
-            />
-          </div>
-        </div>
-      </Stack>
-    </div>
-    <div
-      key="analyticalStore"
+      }
     >
-      <Stack
-        className="widgetRendererContainer"
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
-        }
-      >
-        <div>
-          <div
-            className="inputLabelContainer"
-          >
-            <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"
-          />
-        </div>
-      </Stack>
-    </div>
-    <div
-      key="database"
-    >
-      <Stack
-        className="widgetRendererContainer"
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
-        }
-      >
+      <StackItem>
         <StyledWithResponsiveMode
+          disabled={true}
+          id="database-dropdown-input"
           label="Database"
           onChange={[Function]}
           options={
             Array [
               Object {
                 "key": "db1",
-                "text": "database1",
+                "text": "Database 1",
               },
               Object {
                 "key": "db2",
-                "text": "database2",
+                "text": "Database 2",
               },
               Object {
                 "key": "db3",
-                "text": "database3",
+                "text": "Database 3",
               },
             ]
           }
@@ -230,11 +307,329 @@ exports[`SmartUiComponent should render 1`] = `
                 "fontSize": 12,
                 "fontWeight": 600,
               },
+              "root": Object {
+                "width": 400,
+              },
             }
           }
         />
-      </Stack>
-    </div>
-  </Stack>
-</Fragment>
+      </StackItem>
+    </Stack>
+  </div>
+</Stack>
+`;
+
+exports[`SmartUiComponent should render and honor input's hidden, disabled state 1`] = `
+<Stack
+  className="widgetRendererContainer"
+  tokens={
+    Object {
+      "childrenGap": 10,
+    }
+  }
+>
+  <StackItem>
+    <StyledMessageBarBase
+      styles={
+        Object {
+          "root": Object {
+            "width": 400,
+          },
+        }
+      }
+    >
+      Start at $24/mo per database
+      <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
+      >
+        More Details
+      </StyledLinkBase>
+    </StyledMessageBarBase>
+  </StackItem>
+  <div
+    key="description"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <Text
+          id="description-text-display"
+        >
+          this is an example description text.
+           
+          <StyledLinkBase
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+            target="_blank"
+          >
+            Click here for more information.
+          </StyledLinkBase>
+        </Text>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="throughput"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <Stack
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
+            }
+          }
+          tokens={
+            Object {
+              "childrenGap": 2,
+            }
+          }
+        >
+          <CustomizedSpinButton
+            ariaLabel="Throughput (input)"
+            decrementButtonIcon={
+              Object {
+                "iconName": "ChevronDownSmall",
+              }
+            }
+            disabled={false}
+            id="throughput-spinner-input"
+            incrementButtonIcon={
+              Object {
+                "iconName": "ChevronUpSmall",
+              }
+            }
+            label="Throughput (input)"
+            labelPosition={0}
+            max={500}
+            min={400}
+            onDecrement={[Function]}
+            onIncrement={[Function]}
+            onValidate={[Function]}
+            step={10}
+            styles={
+              Object {
+                "label": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                },
+              }
+            }
+          />
+        </Stack>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="throughput2"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "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 {
+                "root": Object {
+                  "width": 400,
+                },
+                "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": 10,
+        }
+      }
+    >
+      <StackItem>
+        <StyledMessageBarBase
+          messageBarType={1}
+        >
+          Error: 
+          label, truelabel and falselabel are required for boolean input 'throughput3'
+        </StyledMessageBarBase>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="containerId"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <div
+          className="stringInputContainer"
+        >
+          <StyledTextFieldBase
+            id="containerId-textField-input"
+            label="Container id"
+            onChange={[Function]}
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+                "subComponentStyles": Object {
+                  "label": Object {
+                    "root": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                      "fontWeight": 600,
+                    },
+                  },
+                },
+              }
+            }
+            type="text"
+            value=""
+          />
+        </div>
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="analyticalStore"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <StyledToggleBase
+          checked={false}
+          id="analyticalStore-toggle-input"
+          label="Analytical Store"
+          offText="Disabled"
+          onChange={[Function]}
+          onText="Enabled"
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
+            }
+          }
+        />
+      </StackItem>
+    </Stack>
+  </div>
+  <div
+    key="database"
+  >
+    <Stack
+      className="widgetRendererContainer"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <StackItem>
+        <StyledWithResponsiveMode
+          id="database-dropdown-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={
+            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,
+              },
+              "root": Object {
+                "width": 400,
+              },
+            }
+          }
+        />
+      </StackItem>
+    </Stack>
+  </div>
+</Stack>
 `;

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -5,6 +5,9 @@ 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:
  *
@@ -129,6 +132,8 @@ 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 {
@@ -165,6 +170,10 @@ 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();
@@ -195,6 +204,16 @@ 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;
@@ -219,6 +238,16 @@ 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() {

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -126,6 +126,20 @@
   </div>
 
   <div data-bind="visible: !isAutoPilotSelected()">
+    <p>
+      <span
+        >Estimate your required throughput with
+        <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="
@@ -148,6 +162,11 @@
       />
     </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>

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -1,11 +1,11 @@
-jest.mock("../../Common/DocumentClientUtilityBase");
 jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
+jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
 import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
-import { createDocument } from "../../Common/DocumentClientUtilityBase";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 import Explorer from "../Explorer";
 import { updateUserContext } from "../../UserContext";
 

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -4,8 +4,8 @@ import GraphTab from ".././Tabs/GraphTab";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { createDocument } from "../../Common/DocumentClientUtilityBase";
 import { createCollection } from "../../Common/dataAccess/createCollection";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 import { userContext } from "../../UserContext";
 
 interface SampleDataFile extends DataModels.CreateCollectionParams {
@@ -95,12 +95,15 @@ export class ContainerSampleGenerator {
         .reduce((previous, current) => previous.then(current), Promise.resolve());
     } else {
       // For SQL all queries are executed at the same time
-      this.sampleDataFile.data.map((doc) => {
-        const subPromise = createDocument(collection, doc);
-        subPromise.catch((reason) => NotificationConsoleUtils.logConsoleError(reason));
-        promises.push(subPromise);
-      });
-      await Promise.all(promises);
+      await Promise.all(
+        this.sampleDataFile.data.map(async (doc) => {
+          try {
+            await createDocument(collection, doc);
+          } catch (error) {
+            NotificationConsoleUtils.logConsoleError(error);
+          }
+        })
+      );
     }
   }
 

src/Explorer/Explorer.ts

@@ -18,7 +18,7 @@ import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPa
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import EnvironmentUtility from "../Common/EnvironmentUtility";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import hasher from "hasher";
 import NewVertexPane from "./Panes/NewVertexPane";
@@ -55,7 +55,6 @@ import { sendMessage, sendCachedDataMessage, handleCachedDataMessage } from "../
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
-import { NotificationConsoleComponentAdapter } from "./Menus/NotificationConsole/NotificationConsoleComponentAdapter";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueriesClient } from "../Common/QueriesClient";
 import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
@@ -88,6 +87,10 @@ 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 { appInsights } from "../Shared/appInsights";
+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
@@ -103,6 +106,12 @@ interface AdHocAccessData {
   readUrl: string;
 }
 
+export interface ExplorerParams {
+  setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
+  setNotificationConsoleData: (consoleData: ConsoleData) => void;
+  setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
+}
+
 export default class Explorer {
   public flight: ko.Observable<string> = ko.observable<string>(
     SharedConstants.CollectionCreation.DefaultAddCollectionDefaultFlight
@@ -121,7 +130,6 @@ export default class Explorer {
   public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
   public subscriptionType: ko.Observable<SubscriptionType>;
-  public quotaId: ko.Observable<string>;
   public defaultExperience: ko.Observable<string>;
   public isPreferredApiDocumentDB: ko.Computed<boolean>;
   public isPreferredApiCassandra: ko.Computed<boolean>;
@@ -132,20 +140,20 @@ export default class Explorer {
   public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
   public isServerlessEnabled: ko.Computed<boolean>;
   public isAccountReady: ko.Observable<boolean>;
+  public selfServeType: ko.Observable<SelfServeType>;
   public canSaveQueries: ko.Computed<boolean>;
   public features: ko.Observable<any>;
   public serverId: ko.Observable<string>;
-  public armEndpoint: ko.Observable<string>;
   public isTryCosmosDBSubscription: ko.Observable<boolean>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
-  public parentFrameDataExplorerVersion: ko.Observable<string> = ko.observable<string>("");
   public mostRecentActivity: MostRecentActivity.MostRecentActivity;
 
   // Notification Console
-  public notificationConsoleData: ko.ObservableArray<ConsoleData>;
-  public isNotificationConsoleExpanded: ko.Observable<boolean>;
+  private setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
+  private setNotificationConsoleData: (consoleData: ConsoleData) => void;
+  private setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
 
   // Panes
   public contextPanes: ContextualPaneBase[];
@@ -159,6 +167,7 @@ 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>;
@@ -204,14 +213,15 @@ export default class Explorer {
 
   // features
   public isGalleryPublishEnabled: ko.Computed<boolean>;
-  public isCodeOfConductEnabled: ko.Computed<boolean>;
   public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
   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>;
@@ -256,15 +266,19 @@ export default class Explorer {
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
   private splashScreenAdapter: SplashScreenComponentAdapter;
-  private notificationConsoleComponentAdapter: NotificationConsoleComponentAdapter;
   private dialogComponentAdapter: DialogComponentAdapter;
   private _dialogProps: ko.Observable<DialogProps>;
   private addSynapseLinkDialog: DialogComponentAdapter;
   private _addSynapseLinkDialogProps: ko.Observable<DialogProps>;
+  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
-  constructor() {
+  constructor(params?: ExplorerParams) {
+    this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
+    this.setNotificationConsoleData = params?.setNotificationConsoleData;
+    this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
+
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
@@ -279,7 +293,6 @@ export default class Explorer {
 
     this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
-    this.quotaId = ko.observable<string>("");
     let firstInitialization = true;
     this.isRefreshingExplorer = ko.observable<boolean>(true);
     this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
@@ -297,6 +310,7 @@ 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>();
@@ -319,9 +333,9 @@ export default class Explorer {
       if (isAccountReady) {
         this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
-        this.notebookWorkspaceManager = new NotebookWorkspaceManager(this.armEndpoint());
+        this.notebookWorkspaceManager = new NotebookWorkspaceManager();
         this.arcadiaWorkspaces = ko.observableArray();
-        this._arcadiaManager = new ArcadiaResourceManager(this.armEndpoint());
+        this._arcadiaManager = new ArcadiaResourceManager();
         this._isAfecFeatureRegistered(Constants.AfecFeatures.StorageAnalytics).then((isRegistered) =>
           this.hasStorageAnalyticsAfecFeature(isRegistered)
         );
@@ -357,6 +371,15 @@ export default class Explorer {
                 this.isFeatureEnabled(Constants.Features.enableSpark)
             );
             if (this.isSparkEnabled()) {
+              appInsights.trackEvent(
+                { name: "LoadedWithSparkEnabled" },
+                {
+                  subscriptionId: userContext.subscriptionId,
+                  accountName: userContext.databaseAccount?.name,
+                  accountId: userContext.databaseAccount?.id,
+                  platform: configContext.platform,
+                }
+              );
               const pollArcadiaTokenRefresh = async () => {
                 this.arcadiaToken(await this.getArcadiaToken());
                 setTimeout(() => pollArcadiaTokenRefresh(), this.getTokenRefreshInterval(this.arcadiaToken()));
@@ -371,7 +394,6 @@ export default class Explorer {
 
     this.features = ko.observable();
     this.serverId = ko.observable<string>();
-    this.armEndpoint = ko.observable<string>(undefined);
     this.queriesClient = new QueriesClient(this);
     this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
 
@@ -404,13 +426,11 @@ export default class Explorer {
     this.isGalleryPublishEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableGalleryPublish)
     );
-    this.isCodeOfConductEnabled = ko.computed<boolean>(() =>
-      this.isFeatureEnabled(Constants.Features.enableCodeOfConduct)
-    );
     this.isLinkInjectionEnabled = ko.computed<boolean>(() =>
       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);
 
@@ -419,7 +439,8 @@ 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>(() => {
@@ -465,7 +486,6 @@ export default class Explorer {
       bounds: splitterBounds,
       direction: SplitterDirection.Vertical,
     });
-    this.notificationConsoleData = ko.observableArray<ConsoleData>([]);
     this.defaultExperience = ko.observable<string>();
     this.databaseAccount.subscribe((databaseAccount) => {
       const defaultExperience: string = DefaultExperienceUtility.getDefaultExperienceFromDatabaseAccount(
@@ -702,6 +722,7 @@ export default class Explorer {
     });
 
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
@@ -877,7 +898,7 @@ export default class Explorer {
     });
 
     this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
-    this.notificationConsoleComponentAdapter = new NotificationConsoleComponentAdapter(this);
+    this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
 
     this._initSettings();
 
@@ -1016,9 +1037,7 @@ export default class Explorer {
         this.isSynapseLinkUpdating(true);
         this._closeSynapseLinkModalDialog();
 
-        const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(
-          this.databaseAccount().id
-        );
+        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(this.databaseAccount().id);
 
         try {
           const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
@@ -1336,23 +1355,19 @@ export default class Explorer {
   }
 
   public logConsoleData(consoleData: ConsoleData): void {
-    this.notificationConsoleData.splice(0, 0, consoleData);
+    this.setNotificationConsoleData(consoleData);
   }
 
   public deleteInProgressConsoleDataWithId(id: string): void {
-    const updatedConsoleData = _.reject(
-      this.notificationConsoleData(),
-      (data: ConsoleData) => data.type === ConsoleDataType.InProgress && data.id === id
-    );
-    this.notificationConsoleData(updatedConsoleData);
+    this.setInProgressConsoleDataIdToBeDeleted(id);
   }
 
   public expandConsole(): void {
-    this.isNotificationConsoleExpanded(true);
+    this.setIsNotificationConsoleExpanded(true);
   }
 
   public collapseConsole(): void {
-    this.isNotificationConsoleExpanded(false);
+    this.setIsNotificationConsoleExpanded(false);
   }
 
   public toggleLeftPaneExpanded() {
@@ -1705,111 +1720,58 @@ export default class Explorer {
     this._addSynapseLinkDialogProps.valueHasMutated();
   };
 
-  private _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;
-    }
-
-    // before initialization completed give exception
-    const message = event.data.data;
-    if (!this._importExplorerConfigComplete && message && message.type) {
-      const messageType = message.type;
-      switch (messageType) {
-        case MessageTypes.SendNotification:
-        case MessageTypes.ClearNotification:
-        case MessageTypes.LoadingStatus:
-        case MessageTypes.InitTestExplorer:
-          return true;
-      }
-    }
-    if (!("inputs" in event.data["data"]) && !this._importExplorerConfigComplete) {
-      return false;
-    }
-    return true;
-  }
-
-  public handleMessage(event: MessageEvent) {
-    if (isInvalidParentFrameOrigin(event)) {
-      return;
-    }
-
-    if (!this._shouldProcessMessage(event)) {
-      return;
-    }
-
-    const message: any = event.data.data;
-    const inputs: ViewModels.DataExplorerInputsFrame = message.inputs;
-
-    const isRunningInPortal = configContext.platform === Platform.Portal;
-    const isRunningInDevMode = process.env.NODE_ENV === "development";
-    if (inputs && configContext.BACKEND_ENDPOINT && isRunningInPortal && isRunningInDevMode) {
-      inputs.extensionEndpoint = configContext.PROXY_PATH;
-    }
-
-    const initPromise: Q.Promise<void> = inputs ? this.initDataExplorerWithFrameInputs(inputs) : Q();
-
-    initPromise.then(() => {
-      const openAction: ActionContracts.DataExplorerAction = message.openAction;
-      if (!!openAction) {
-        if (this.isRefreshingExplorer()) {
-          const subscription = this.databases.subscribe((databases: ViewModels.Database[]) => {
-            handleOpenAction(openAction, this.nonSystemDatabases(), this);
-            subscription.dispose();
-          });
-        } else {
+  public handleMessage(message: any) {
+    const openAction: ActionContracts.DataExplorerAction = message.openAction;
+    if (!!openAction) {
+      if (this.isRefreshingExplorer()) {
+        const subscription = this.databases.subscribe((databases: ViewModels.Database[]) => {
           handleOpenAction(openAction, this.nonSystemDatabases(), this);
-        }
+          subscription.dispose();
+        });
+      } else {
+        handleOpenAction(openAction, this.nonSystemDatabases(), this);
       }
-      if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
-        handleCachedDataMessage(message);
-        return;
-      }
-      if (message.type) {
-        switch (message.type) {
-          case MessageTypes.UpdateLocationHash:
-            if (!message.locationHash) {
-              break;
-            }
-            hasher.replaceHash(message.locationHash);
-            RouteHandler.getInstance().parseHash(message.locationHash);
-            break;
-          case MessageTypes.SendNotification:
-            if (!message.message) {
-              break;
-            }
-            NotificationConsoleUtils.logConsoleMessage(
-              message.consoleDataType || ConsoleDataType.Info,
-              message.message,
-              message.id
-            );
-            break;
-          case MessageTypes.ClearNotification:
-            if (!message.id) {
-              break;
-            }
-            NotificationConsoleUtils.clearInProgressMessageWithId(message.id);
-            break;
-          case MessageTypes.LoadingStatus:
-            if (!message.text) {
-              break;
-            }
-            this._setLoadingStatusText(message.text, message.title);
-            break;
-        }
-        return;
+    }
+    if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
+      handleCachedDataMessage(message);
+      return;
+    }
+    if (message.type) {
+      switch (message.type) {
+        case MessageTypes.UpdateLocationHash:
+          if (!message.locationHash) {
+            break;
+          }
+          hasher.replaceHash(message.locationHash);
+          RouteHandler.getInstance().parseHash(message.locationHash);
+          break;
+        case MessageTypes.SendNotification:
+          if (!message.message) {
+            break;
+          }
+          NotificationConsoleUtils.logConsoleMessage(
+            message.consoleDataType || ConsoleDataType.Info,
+            message.message,
+            message.id
+          );
+          break;
+        case MessageTypes.ClearNotification:
+          if (!message.id) {
+            break;
+          }
+          NotificationConsoleUtils.clearInProgressMessageWithId(message.id);
+          break;
+        case MessageTypes.LoadingStatus:
+          if (!message.text) {
+            break;
+          }
+          this._setLoadingStatusText(message.text, message.title);
+          break;
       }
+      return;
+    }
 
-      this.splashScreenAdapter.forceRender();
-    });
+    this.splashScreenAdapter.forceRender();
   }
 
   public findSelectedDatabase(): ViewModels.Database {
@@ -1849,8 +1811,28 @@ export default class Explorer {
     return false;
   }
 
-  public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): Q.Promise<void> {
+  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 configure(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") {
+        sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
+      }
+
       const authorizationToken = inputs.authorizationToken || "";
       const masterKey = inputs.masterKey || "";
       const databaseAccount = inputs.databaseAccount || null;
@@ -1859,25 +1841,19 @@ export default class Explorer {
       }
       this.features(inputs.features);
       this.serverId(inputs.serverId);
-      this.armEndpoint(EnvironmentUtility.normalizeArmEndpointUri(inputs.csmEndpoint || configContext.ARM_ENDPOINT));
       this.databaseAccount(databaseAccount);
       this.subscriptionType(inputs.subscriptionType);
-      this.quotaId(inputs.quotaId);
       this.hasWriteAccess(inputs.hasWriteAccess);
       this.flight(inputs.addCollectionDefaultFlight);
       this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription);
       this.isAuthWithResourceToken(inputs.isAuthWithresourceToken);
       this.setFeatureFlagsFromFlights(inputs.flights);
-
-      if (!!inputs.dataExplorerVersion) {
-        this.parentFrameDataExplorerVersion(inputs.dataExplorerVersion);
-      }
-
+      this.setSelfServeType(inputs);
       this._importExplorerConfigComplete = true;
 
       updateConfigContext({
         BACKEND_ENDPOINT: inputs.extensionEndpoint || "",
-        ARM_ENDPOINT: this.armEndpoint(),
+        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
       });
 
       updateUserContext({
@@ -1887,6 +1863,7 @@ export default class Explorer {
         resourceGroup: inputs.resourceGroup,
         subscriptionId: inputs.subscriptionId,
         subscriptionType: inputs.subscriptionType,
+        quotaId: inputs.quotaId,
       });
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -1900,13 +1877,18 @@ export default class Explorer {
 
       this.isAccountReady(true);
     }
-    return Q();
   }
 
   public setFeatureFlagsFromFlights(flights: readonly string[]): void {
     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 {
@@ -2273,7 +2255,6 @@ export default class Explorer {
         name,
         content,
         parentDomElement,
-        this.isCodeOfConductEnabled(),
         this.isLinkInjectionEnabled()
       );
       this.publishNotebookPaneAdapter = this.notebookManager.publishNotebookPaneAdapter;
@@ -2564,7 +2545,7 @@ export default class Explorer {
 
   public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
     const subscriptionId = userContext.subscriptionId;
-    const armEndpoint = this.armEndpoint();
+    const armEndpoint = configContext.ARM_ENDPOINT;
     const authType = window.authType as AuthType;
     if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
@@ -2573,7 +2554,7 @@ export default class Explorer {
     }
 
     const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${Constants.AfecFeatures.Spark}`;
-    const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(featureUri);
+    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
     try {
       const sparkNotebooksFeature: DataModels.AfecFeature = await resourceProviderClient.getAsync(
         featureUri,
@@ -2593,7 +2574,7 @@ export default class Explorer {
 
   public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
     const subscriptionId = userContext.subscriptionId;
-    const armEndpoint = this.armEndpoint();
+    const armEndpoint = configContext.ARM_ENDPOINT;
     const authType = window.authType as AuthType;
     if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
@@ -2601,7 +2582,7 @@ export default class Explorer {
     }
 
     const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${featureName}`;
-    const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(featureUri);
+    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
     try {
       const featureStatus: DataModels.AfecFeature = await resourceProviderClient.getAsync(
         featureUri,
@@ -3026,4 +3007,25 @@ 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;
+    });
+  }
 }

src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts

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

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): string | number | boolean {
+  public static getNodePropValue(node: D3Node, prop: string): undefined | string | number | boolean {
     if (node.hasOwnProperty(prop)) {
       return (node as any)[prop];
     }
 
     // This is DocDB specific
-    if (node.hasOwnProperty("properties") && node.properties.hasOwnProperty(prop)) {
+    if (node.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
    */
-  private static getChildrenId(vertex: GremlinVertex): string[] {
+  public static getChildrenId(vertex: GremlinVertex): string[] {
     const ids = <any>{}; // HashSet
     if (vertex.hasOwnProperty("outE")) {
       let outE = vertex.outE;

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -1,4 +1,5 @@
-jest.mock("../../../Common/DocumentClientUtilityBase");
+jest.mock("../../../Common/dataAccess/queryDocuments");
+jest.mock("../../../Common/dataAccess/queryDocumentsPage");
 import React from "react";
 import * as sinon from "sinon";
 import { mount, ReactWrapper } from "enzyme";
@@ -12,7 +13,8 @@ import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import GraphTab from "../../Tabs/GraphTab";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
+import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 
 describe("Check whether query result is vertex array", () => {
   it("should reject null as vertex array", () => {
@@ -299,12 +301,12 @@ describe("GraphExplorer", () => {
       ignoreD3Update: boolean
     ): GraphExplorer => {
       (queryDocuments as jest.Mock).mockImplementation((container: any, query: string, options: any) => {
-        return Q.resolve({
+        return {
           _query: query,
           nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
           hasMoreResults: () => false,
           executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {},
-        });
+        };
       });
       (queryDocumentsPage as jest.Mock).mockImplementation(
         (rid: string, iterator: any, firstItemIndex: number, options: any) => {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -28,8 +28,10 @@ import * as Constants from "../../../Common/Constants";
 import { InputProperty } from "../../../Contracts/ViewModels";
 import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
+import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
+import { FeedOptions } from "@azure/cosmos";
 
 export interface GraphAccessor {
   applyFilter: () => void;
@@ -725,26 +727,32 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * Execute DocDB query and get all results
    */
-  public executeNonPagedDocDbQuery(query: string): Q.Promise<DataModels.DocumentId[]> {
-    // TODO maxItemCount: this reduces throttling, but won't cap the # of results
-    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-      maxItemCount: GraphExplorer.PAGE_ALL,
-      enableCrossPartitionQuery:
-        StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.IsCrossPartitionQueryEnabled) ===
-        "true",
-    }).then(
-      (iterator: QueryIterator<ItemDefinition & Resource>) => {
-        return iterator.fetchNext().then((response) => response.resources);
-      },
-      (reason: any) => {
-        GraphExplorer.reportToConsole(
-          ConsoleDataType.Error,
-          `Failed to execute non-paged query ${query}. Reason:${reason}`,
-          reason
-        );
-        return null;
-      }
-    );
+  public async executeNonPagedDocDbQuery(query: string): Promise<DataModels.DocumentId[]> {
+    try {
+      // TODO maxItemCount: this reduces throttling, but won't cap the # of results
+      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+        this.props.databaseId,
+        this.props.collectionId,
+        query,
+        {
+          maxItemCount: GraphExplorer.PAGE_ALL,
+          enableCrossPartitionQuery:
+            StorageUtility.LocalStorageUtility.getEntryString(
+              StorageUtility.StorageKey.IsCrossPartitionQueryEnabled
+            ) === "true",
+        } as FeedOptions
+      );
+      const response = await iterator.fetchNext();
+
+      return response?.resources;
+    } catch (error) {
+      GraphExplorer.reportToConsole(
+        ConsoleDataType.Error,
+        `Failed to execute non-paged query ${query}. Reason:${error}`,
+        error
+      );
+      return null;
+    }
   }
 
   /**
@@ -864,7 +872,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * User executes query
    */
-  public submitQuery(query: string): void {
+  public async submitQuery(query: string): Promise<void> {
     // Clear any progress indicator
     this.executeCounter = 0;
     this.setState({
@@ -882,24 +890,22 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     // Remember query
     this.pushToLatestQueryFragments(query);
 
-    let backendPromise;
-
-    if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
-      backendPromise = this.executeDocDbGVQuery();
-    } else {
-      backendPromise = this.executeGremlinQuery(query);
-    }
-
-    backendPromise.then(
-      (result: UserQueryResult) => (this.queryTotalRequestCharge = result.requestCharge),
-      (error: any) => {
-        const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
-        GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-        this.setState({
-          filterQueryError: errorMsg,
-        });
+    try {
+      let result: UserQueryResult;
+      if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
+        result = await this.executeDocDbGVQuery();
+      } else {
+        result = await this.executeGremlinQuery(query);
       }
-    );
+
+      this.queryTotalRequestCharge = result.requestCharge;
+    } catch (error) {
+      const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
+      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+      this.setState({
+        filterQueryError: errorMsg,
+      });
+    }
   }
 
   /**
@@ -1390,7 +1396,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * Update possible vertices to display in UI
    */
-  private updatePossibleVertices(): Q.Promise<PossibleVertex[]> {
+  private updatePossibleVertices(): Promise<PossibleVertex[]> {
     const highlightedNodeId = this.state.highlightedNode ? this.state.highlightedNode.id : null;
 
     const q = `SELECT c.id, c["${
@@ -1722,86 +1728,82 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     );
   }
 
-  private executeDocDbGVQuery(): Q.Promise<UserQueryResult> {
+  private async executeDocDbGVQuery(): Promise<UserQueryResult> {
     let query = "select root.id from root where IS_DEFINED(root._isEdge) = false order by root._ts desc";
     if (this.props.collectionPartitionKeyProperty) {
       query = `select root.id, root.${this.props.collectionPartitionKeyProperty} from root where IS_DEFINED(root._isEdge) = false order by root._ts asc`;
     }
 
-    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-      maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
-      enableCrossPartitionQuery: LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true",
-    })
-      .then(
-        (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          this.currentDocDBQueryInfo = {
-            iterator: iterator,
-            index: 0,
-            query: query,
-          };
-        },
-        (reason: any) => {
-          GraphExplorer.reportToConsole(
-            ConsoleDataType.Error,
-            `Failed to execute CosmosDB query: ${query} reason:${reason}`
-          );
-        }
-      )
-      .then(() => this.loadMoreRootNodes());
+    try {
+      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+        this.props.databaseId,
+        this.props.collectionId,
+        query,
+        {
+          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          enableCrossPartitionQuery:
+            LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true",
+        } as FeedOptions
+      );
+      this.currentDocDBQueryInfo = {
+        iterator: iterator,
+        index: 0,
+        query: query,
+      };
+      return await this.loadMoreRootNodes();
+    } catch (error) {
+      GraphExplorer.reportToConsole(
+        ConsoleDataType.Error,
+        `Failed to execute CosmosDB query: ${query} reason:${error}`
+      );
+      throw error;
+    }
   }
 
-  private loadMoreRootNodes(): Q.Promise<UserQueryResult> {
+  private async loadMoreRootNodes(): Promise<UserQueryResult> {
     if (!this.currentDocDBQueryInfo) {
-      return Q.resolve(null);
+      return undefined;
     }
-    let RU: string = GraphExplorer.REQUEST_CHARGE_UNKNOWN_MSG;
 
+    let RU: string = GraphExplorer.REQUEST_CHARGE_UNKNOWN_MSG;
     const queryInfoStr = `${this.currentDocDBQueryInfo.query} (${this.currentDocDBQueryInfo.index + 1}-${
       this.currentDocDBQueryInfo.index + GraphExplorer.ROOT_LIST_PAGE_SIZE
     })`;
     const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${queryInfoStr}`);
 
-    return queryDocumentsPage(
-      this.props.collectionId,
-      this.currentDocDBQueryInfo.iterator,
-      this.currentDocDBQueryInfo.index,
-      {
-        enableCrossPartitionQuery:
-          LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true",
-      }
-    )
-      .then((results: ViewModels.QueryResults) => {
-        GraphExplorer.clearConsoleProgress(id);
-        this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
-        this.setState({ hasMoreRoots: results.hasMoreResults });
-        RU = results.requestCharge.toString();
-        GraphExplorer.reportToConsole(
-          ConsoleDataType.Info,
-          `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
-        );
-        const documents = results.documents || [];
-        return documents.map(
-          (item: DataModels.DocumentId) => {
-            return GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty);
-          },
-          (reason: any) => {
-            // Failure
-            GraphExplorer.clearConsoleProgress(id);
-            const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${reason}`;
-            GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-            this.setState({
-              filterQueryError: errorMsg,
-            });
-            this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
-            throw reason;
-          }
-        );
-      })
-      .then((pkIds: string[]) => {
-        const arg = pkIds.join(",");
-        return this.executeGremlinQuery(`g.V(${arg})`);
-      })
-      .then(() => ({ requestCharge: RU }));
+    try {
+      const results: ViewModels.QueryResults = await queryDocumentsPage(
+        this.props.collectionId,
+        this.currentDocDBQueryInfo.iterator,
+        this.currentDocDBQueryInfo.index
+      );
+
+      GraphExplorer.clearConsoleProgress(id);
+      this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
+      this.setState({ hasMoreRoots: results.hasMoreResults });
+      RU = results.requestCharge.toString();
+      GraphExplorer.reportToConsole(
+        ConsoleDataType.Info,
+        `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
+      );
+      const pkIds: string[] = (results.documents || []).map((item: DataModels.DocumentId) =>
+        GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty)
+      );
+
+      const arg = pkIds.join(",");
+      await this.executeGremlinQuery(`g.V(${arg})`);
+
+      return { requestCharge: RU };
+    } catch (error) {
+      GraphExplorer.clearConsoleProgress(id);
+      const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${getErrorMessage(error)}`;
+      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+      this.setState({
+        filterQueryError: errorMsg,
+      });
+      this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
+      throw error;
+    }
   }
 
   private executeGremlinQuery(query: string): Q.Promise<UserQueryResult> {

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 (Preview)";
+    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link";
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -36,7 +36,36 @@ export class CommandBarComponentButtonFactory {
     }
 
     const newCollectionBtn = CommandBarComponentButtonFactory.createNewCollectionGroup(container);
-    const buttons: CommandButtonComponentProps[] = [newCollectionBtn];
+    const buttons: CommandButtonComponentProps[] = [];
+
+    if (container.isFeatureEnabled && container.isFeatureEnabled("regionselectbutton")) {
+      const regions = [{ name: "West US" }, { name: "East US" }, { name: "North Europe" }];
+      buttons.push({
+        iconSrc: null,
+        onCommandClick: () => {},
+        commandButtonLabel: null,
+        hasPopup: false,
+        isDropdown: true,
+        dropdownPlaceholder: "West US",
+        dropdownSelectedKey: "West US",
+        dropdownWidth: 100,
+        children: regions.map(
+          (region) =>
+            ({
+              iconSrc: null,
+              onCommandClick: () => {},
+              commandButtonLabel: region.name,
+              dropdownItemKey: region.name,
+              hasPopup: false,
+              disabled: false,
+              ariaLabel: "",
+            } as CommandButtonComponentProps)
+        ),
+        ariaLabel: "",
+      });
+    }
+
+    buttons.push(newCollectionBtn);
 
     const addSynapseLink = CommandBarComponentButtonFactory.createOpenSynapseLinkDialogButton(container);
     if (addSynapseLink) {
@@ -269,7 +298,7 @@ export class CommandBarComponentButtonFactory {
       return null;
     }
 
-    const label = "Enable Azure Synapse Link (Preview)";
+    const label = "Enable Azure Synapse Link";
     return {
       iconSrc: SynapseIcon,
       iconAlt: label,

src/Explorer/Menus/NavBar/MeControlComponent.test.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { MeControlComponent, MeControlComponentProps } from "./MeControlComponent";
-
-const createNotSignedInProps = (): MeControlComponentProps => {
-  return {
-    isUserSignedIn: false,
-    user: null,
-    onSignInClick: jest.fn(),
-    onSignOutClick: jest.fn(),
-    onSwitchDirectoryClick: jest.fn(),
-  };
-};
-
-const createSignedInProps = (): MeControlComponentProps => {
-  return {
-    isUserSignedIn: true,
-    user: {
-      name: "Test User",
-      email: "testuser@contoso.com",
-      tenantName: "Contoso",
-      imageUrl: "../../../../images/dotnet.png",
-    },
-    onSignInClick: jest.fn(),
-    onSignOutClick: jest.fn(),
-    onSwitchDirectoryClick: jest.fn(),
-  };
-};
-
-describe("test render", () => {
-  it("renders not signed in", () => {
-    const props = createNotSignedInProps();
-
-    const wrapper = shallow(<MeControlComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders signed in with full info", () => {
-    const props = createSignedInProps();
-
-    const wrapper = shallow(<MeControlComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("change not signed in to signed in", () => {
-    const notSignInProps = createNotSignedInProps();
-
-    const wrapper = mount(<MeControlComponent {...notSignInProps} />);
-    expect(wrapper.exists(".mecontrolSigninButton")).toBe(true);
-    expect(wrapper.exists(".mecontrolHeaderButton")).toBe(false);
-
-    const signInProps = createSignedInProps();
-
-    wrapper.setProps(signInProps);
-    expect(wrapper.exists(".mecontrolSigninButton")).toBe(false);
-    expect(wrapper.exists(".mecontrolHeaderButton")).toBe(true);
-
-    wrapper.unmount;
-  });
-
-  it("render contextual menu", () => {
-    const signInProps = createSignedInProps();
-    const wrapper = mount(<MeControlComponent {...signInProps} />);
-
-    wrapper.find("button.mecontrolHeaderButton").simulate("click");
-    expect(wrapper.exists(".mecontrolContextualMenu")).toBe(true);
-
-    wrapper.find("button.mecontrolHeaderButton").simulate("click");
-    expect(wrapper.exists(".mecontrolContextualMenu")).toBe(false);
-
-    wrapper.unmount;
-  });
-});
-
-describe("test function got called", () => {
-  it("sign in click", () => {
-    const notSignInProps = createNotSignedInProps();
-    const wrapper = mount(<MeControlComponent {...notSignInProps} />);
-
-    wrapper.find("button.mecontrolSigninButton").simulate("click");
-    expect(notSignInProps.onSignInClick).toBeCalled();
-    expect(notSignInProps.onSignInClick).toHaveBeenCalled();
-  });
-
-  it("sign out click", () => {
-    const signInProps = createSignedInProps();
-    const wrapper = mount(<MeControlComponent {...signInProps} />);
-
-    wrapper.find("button.mecontrolHeaderButton").simulate("click");
-    expect(wrapper.exists(".mecontrolContextualMenu")).toBe(true);
-
-    wrapper.find("div.signOutLink").simulate("click");
-    expect(signInProps.onSignOutClick).toBeCalled();
-    expect(signInProps.onSignOutClick).toHaveBeenCalled();
-  });
-
-  it("switch directory", () => {
-    const signInProps = createSignedInProps();
-    const wrapper = mount(<MeControlComponent {...signInProps} />);
-
-    wrapper.find("button.mecontrolHeaderButton").simulate("click");
-    expect(wrapper.exists(".mecontrolContextualMenu")).toBe(true);
-
-    wrapper.find("div.switchDirectoryLink").simulate("click");
-    expect(signInProps.onSwitchDirectoryClick).toBeCalled();
-    expect(signInProps.onSwitchDirectoryClick).toHaveBeenCalled();
-  });
-});

src/Explorer/Menus/NavBar/MeControlComponent.tsx

@@ -1,167 +0,0 @@
-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";
-import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { IPersonaSharedProps, Persona, PersonaInitialsColor, PersonaSize } from "office-ui-fabric-react/lib/Persona";
-
-export interface MeControlComponentProps {
-  /**
-   * Wheather user is signed in or not
-   */
-  isUserSignedIn: boolean;
-  /**
-   * User info
-   */
-  user: MeControlUser;
-  /**
-   * Click handler for sign in click
-   */
-  onSignInClick: (e: React.MouseEvent<BaseButton>) => void;
-  /**
-   * Click handler for sign out click
-   */
-  onSignOutClick: (e: React.SyntheticEvent) => void;
-  /**
-   * Click handler for switch directory click
-   */
-  onSwitchDirectoryClick: (e: React.SyntheticEvent) => void;
-}
-
-export interface MeControlUser {
-  /**
-   * Display name for user
-   */
-  name: string;
-  /**
-   * Display email for user
-   */
-  email: string;
-  /**
-   * Display tenant for user
-   */
-  tenantName: string;
-  /**
-   * image source for the profic photo
-   */
-  imageUrl: string;
-}
-
-export class MeControlComponent extends React.Component<MeControlComponentProps> {
-  public render(): JSX.Element {
-    return this.props.isUserSignedIn ? this._renderProfileComponent() : this._renderSignInComponent();
-  }
-
-  private _renderProfileComponent(): JSX.Element {
-    const { user } = this.props;
-
-    const menuProps: IContextualMenuProps = {
-      className: "mecontrolContextualMenu",
-      isBeakVisible: false,
-      directionalHintFixed: true,
-      directionalHint: DirectionalHint.bottomRightEdge,
-      calloutProps: {
-        minPagePadding: 0,
-      },
-      items: [
-        {
-          key: "Persona",
-          onRender: this._renderPersonaComponent,
-        },
-        {
-          key: "SwitchDirectory",
-          onRender: this._renderSwitchDirectory,
-        },
-        {
-          key: "SignOut",
-          onRender: this._renderSignOut,
-        },
-      ],
-    };
-
-    const personaProps: IPersonaSharedProps = {
-      imageUrl: user.imageUrl,
-      text: user.email,
-      secondaryText: user.tenantName,
-      showSecondaryText: true,
-      showInitialsUntilImageLoads: true,
-      initialsColor: PersonaInitialsColor.teal,
-      size: PersonaSize.size28,
-      className: "mecontrolHeaderPersona",
-    };
-
-    const buttonProps: IButtonProps = {
-      id: "mecontrolHeader",
-      className: "mecontrolHeaderButton",
-      menuProps: menuProps,
-      onRenderMenuIcon: () => <span />,
-      styles: {
-        rootHovered: { backgroundColor: "#393939" },
-        rootFocused: { backgroundColor: "#393939" },
-        rootPressed: { backgroundColor: "#393939" },
-        rootExpanded: { backgroundColor: "#393939" },
-      },
-    };
-
-    return (
-      <FocusZone>
-        <DefaultButton {...buttonProps}>
-          <Persona {...personaProps} />
-        </DefaultButton>
-      </FocusZone>
-    );
-  }
-
-  private _renderPersonaComponent = (): JSX.Element => {
-    const { user } = this.props;
-    const personaProps: IPersonaSharedProps = {
-      imageUrl: user.imageUrl,
-      text: user.name,
-      secondaryText: user.email,
-      showSecondaryText: true,
-      showInitialsUntilImageLoads: true,
-      initialsColor: PersonaInitialsColor.teal,
-      size: PersonaSize.size72,
-      className: "mecontrolContextualMenuPersona",
-    };
-
-    return <Persona {...personaProps} />;
-  };
-
-  private _renderSwitchDirectory = (): JSX.Element => {
-    return (
-      <div
-        className="switchDirectoryLink"
-        onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) =>
-          this.props.onSwitchDirectoryClick(e)
-        }
-      >
-        Switch Directory
-      </div>
-    );
-  };
-
-  private _renderSignOut = (): JSX.Element => {
-    return (
-      <div
-        className="signOutLink"
-        onClick={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => this.props.onSignOutClick(e)}
-      >
-        Sign out
-      </div>
-    );
-  };
-
-  private _renderSignInComponent = (): JSX.Element => {
-    const buttonProps: IButtonProps = {
-      className: "mecontrolSigninButton",
-      text: "Sign In",
-      onClick: (e: React.MouseEvent<BaseButton>) => this.props.onSignInClick(e),
-      styles: {
-        rootHovered: { backgroundColor: "#393939", color: "#fff" },
-        rootFocused: { backgroundColor: "#393939", color: "#fff" },
-        rootPressed: { backgroundColor: "#393939", color: "#fff" },
-      },
-    };
-    return <DefaultButton {...buttonProps} />;
-  };
-}

src/Explorer/Menus/NavBar/MeControlComponentAdapter.tsx

@@ -1,16 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { MeControlComponent, MeControlComponentProps } from "./MeControlComponent";
-
-export class MeControlComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<MeControlComponentProps>;
-
-  public renderComponent(): JSX.Element {
-    return <MeControlComponent {...this.parameters()} />;
-  }
-}

src/Explorer/Menus/NavBar/__snapshots__/MeControlComponent.test.tsx.snap

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders not signed in 1`] = `
-<CustomizedDefaultButton
-  className="mecontrolSigninButton"
-  onClick={[Function]}
-  styles={
-    Object {
-      "rootFocused": Object {
-        "backgroundColor": "#393939",
-        "color": "#fff",
-      },
-      "rootHovered": Object {
-        "backgroundColor": "#393939",
-        "color": "#fff",
-      },
-      "rootPressed": Object {
-        "backgroundColor": "#393939",
-        "color": "#fff",
-      },
-    }
-  }
-  text="Sign In"
-/>
-`;
-
-exports[`test render renders signed in with full info 1`] = `
-<FocusZone
-  direction={2}
-  isCircularNavigation={false}
-  shouldRaiseClicks={true}
->
-  <CustomizedDefaultButton
-    className="mecontrolHeaderButton"
-    id="mecontrolHeader"
-    menuProps={
-      Object {
-        "calloutProps": Object {
-          "minPagePadding": 0,
-        },
-        "className": "mecontrolContextualMenu",
-        "directionalHint": 6,
-        "directionalHintFixed": true,
-        "isBeakVisible": false,
-        "items": Array [
-          Object {
-            "key": "Persona",
-            "onRender": [Function],
-          },
-          Object {
-            "key": "SwitchDirectory",
-            "onRender": [Function],
-          },
-          Object {
-            "key": "SignOut",
-            "onRender": [Function],
-          },
-        ],
-      }
-    }
-    onRenderMenuIcon={[Function]}
-    styles={
-      Object {
-        "rootExpanded": Object {
-          "backgroundColor": "#393939",
-        },
-        "rootFocused": Object {
-          "backgroundColor": "#393939",
-        },
-        "rootHovered": Object {
-          "backgroundColor": "#393939",
-        },
-        "rootPressed": Object {
-          "backgroundColor": "#393939",
-        },
-      }
-    }
-  >
-    <StyledPersonaBase
-      className="mecontrolHeaderPersona"
-      imageUrl="../../../../images/dotnet.png"
-      initialsColor={3}
-      secondaryText="Contoso"
-      showInitialsUntilImageLoads={true}
-      showSecondaryText={true}
-      size={7}
-      text="testuser@contoso.com"
-    />
-  </CustomizedDefaultButton>
-</FocusZone>
-`;