Move query cost to main header in summary

.env.example

@@ -3,11 +3,7 @@ PORTAL_RUNNER_PASSWORD=
 PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
-PORTAL_RUNNER_DATABASE_ACCOUNT_KEY=
 PORTAL_RUNNER_CONNECTION_STRING=
-NOTEBOOKS_TEST_RUNNER_TENANT_ID=
-NOTEBOOKS_TEST_RUNNER_CLIENT_ID=
-NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET=
 CASSANDRA_CONNECTION_STRING=
 MONGO_CONNECTION_STRING=
 TABLES_CONNECTION_STRING=

.eslintignore

@@ -14,6 +14,7 @@ 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
@@ -201,6 +202,8 @@ src/Explorer/Tabs/QueryTab.test.ts
 src/Explorer/Tabs/QueryTab.ts
 src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
+src/Explorer/Tabs/SettingsTab.test.ts
+src/Explorer/Tabs/SettingsTab.ts
 src/Explorer/Tabs/SparkMasterTab.ts
 src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
@@ -287,6 +290,8 @@ src/Utils/DatabaseAccountUtils.ts
 src/Utils/JunoUtils.ts
 src/Utils/MessageValidation.ts
 src/Utils/NotebookConfigurationUtils.ts
+src/Utils/OfferUtils.test.ts
+src/Utils/OfferUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.ts

.github/workflows/ci.yml

@@ -101,7 +101,6 @@ jobs:
           PLATFORM: "Emulator"
           NODE_TLS_REJECT_UNAUTHORIZED: 0
       - uses: actions/upload-artifact@v2
-        if: failure()
         with:
           name: screenshots
           path: failed-*
@@ -147,27 +146,19 @@ jobs:
         shell: bash
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
-          PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-          PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
-          PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
-          PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
-          NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
-          NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-          NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
           PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
           MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
           CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
           TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
-        if: failure()
         with:
           name: screenshots
           path: failed-*
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -191,7 +182,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -213,28 +204,3 @@ jobs:
         name: packages
         with:
           path: "*.nupkg"
-  nugetie:
-    name: Publish Nuget IE
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
-    runs-on: ubuntu-latest
-    env:
-      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
-      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
-    steps:
-      - uses: nuget/setup-nuget@v1
-        with:
-          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
-      - name: Download Dist Folder
-        uses: actions/download-artifact@v2
-        with:
-          name: dist
-      - run: cp ./configs/prod.json config.json
-      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.IE/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
-      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v2
-        name: packages
-        with:
-          path: "*.nupkg"

.github/workflows/runners.yml

@@ -0,0 +1,25 @@
+name: Runners
+on:
+  schedule:
+    - cron: "0 * 1 * *"
+jobs:
+  sqlcreatecollection:
+    runs-on: ubuntu-latest
+    name: "SQL | Create Collection"
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+      - run: npm ci
+      - run: npm run test:e2e
+        env:
+          PORTAL_RUNNER_APP_INSIGHTS_KEY: ${{ secrets.PORTAL_RUNNER_APP_INSIGHTS_KEY }}
+          PORTAL_RUNNER_USERNAME: ${{ secrets.PORTAL_RUNNER_USERNAME }}
+          PORTAL_RUNNER_PASSWORD: ${{ secrets.PORTAL_RUNNER_PASSWORD }}
+          PORTAL_RUNNER_SUBSCRIPTION: 69e02f2d-f059-4409-9eac-97e8a276ae2c
+          PORTAL_RUNNER_RESOURCE_GROUP: runners
+          PORTAL_RUNNER_DATABASE_ACCOUNT: portal-sql-runner
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: screenshots
+          path: failure.png

README.md

@@ -13,18 +13,29 @@ UI for Azure Cosmos DB. Powers the [Azure Portal](https://portal.azure.com/), ht
 
 ### Watch mode
 
-Run `npm start` to start the development server and automatically rebuild on changes
+Run `npm run watch` to start the development server and automatically rebuild on changes
 
-### Hosted Development (https://cosmos.azure.com)
+### Specifying Development Platform
 
-- 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.
+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.
 
 ### Emulator Development
 
-- Start the Cosmos Emulator
-- Visit: https://localhost:1234/index.html
+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`
 
 #### Setting up a Remote Emulator
 
@@ -44,8 +55,16 @@ The Cosmos emulator currently only runs in Windows environments. You can still d
 
 ### Portal Development
 
-- 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
+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.
 
 ### Testing
 
@@ -69,10 +88,6 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
 
 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
 
-### Architechture
-
-[![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
-
 # Contributing
 
 Please read the [contribution guidelines](./CONTRIBUTING.md).

babel.config.js

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

canvas/README.md

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

canvas/index.js

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

canvas/package.json

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

less/Common/Constants.less

@@ -3,8 +3,8 @@
 /******************************************************************************/
 
 @font-face {
-  font-family: wf_segoe-ui_normal;
-  src: url("../../fonts/segoe-ui/west-european/normal/latest.woff");
+    font-family: wf_segoe-ui_normal;
+    src: url('../../fonts/segoe-ui/west-european/normal/latest.woff');
 }
 
 @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -20,26 +20,26 @@
                                 COLORS
 /******************************************************************************/
 
-@AccentMediumHigh: #0058ad;
-@AccentMedium: #004e87;
-@AccentHigh: #1ebaed;
-@AccentExtraHigh: #55b3ff;
-@AccentLow: #edf6ff;
-@AccentMediumLow: #ddeefe;
-@AccentLight: #eef7ff;
-@AccentExtra: #ddf0ff;
+@AccentMediumHigh: #0058AD;
+@AccentMedium: #004E87;
+@AccentHigh: #1EBAED;
+@AccentExtraHigh: #55B3FF;
+@AccentLow: #EDF6FF;
+@AccentMediumLow: #DDEEFE;
+@AccentLight: #EEF7FF;
+@AccentExtra: #DDF0FF;
 
-@SelectionHigh: #b91f26;
-@BaseLight: #ffffff;
+@SelectionHigh: #B91F26;
+@BaseLight: #FFFFFF;
 @BaseDark: #000000;
-@NotificationLow: #fff4ce;
-@NotificationHigh: #f9e9b0;
-@Purple1: #8a2da5;
+@NotificationLow: #FFF4CE;
+@NotificationHigh: #F9E9B0;
+@Purple1: #8A2DA5;
 @Dirty: #9b4f96;
 
-@BaseLow: #f2f2f2;
-@BaseMediumLow: #e6e6e6;
-@BaseMedium: #cccccc;
+@BaseLow: #F2F2F2;
+@BaseMediumLow: #E6E6E6;
+@BaseMedium: #CCCCCC;
 @BaseMediumHigh: #767676;
 @BaseHigh: #393939;
 
@@ -53,7 +53,7 @@
 
 @ErrorColor: @SelectionHigh;
 
-@SelectionColor: #3074b0;
+@SelectionColor: #3074B0;
 
 @FocusColor: #605e5c;
 
@@ -80,7 +80,7 @@
 @ImgWidth: 14px;
 @ImgHeight: 14px;
 
-@toggleFontWeight: 700;
+@toggleFontWeight:700;
 
 //Resource Tree
 @TreeLineHeight: 17px;
@@ -144,16 +144,16 @@
 /**********************************************************************************/
 
 .flex-display(@display: flex) {
-  display: ~"-webkit-@{display}";
-  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-  display: ~"-ms-@{display}"; // IE11
-  display: @display;
+	display: ~"-webkit-@{display}";
+	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+	display: ~"-ms-@{display}"; // IE11
+	display: @display;
 }
 
 .flex-direction(@direction: column) {
   -webkit-flex-direction: @direction;
-  -ms-flex-direction: @direction;
-  flex-direction: @direction;
+      -ms-flex-direction: @direction;
+          flex-direction: @direction;
 }
 
 /*************************************************************************************
@@ -161,31 +161,32 @@
 **************************************************************************************/
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .selectedRadio,
-  .selectedRadio:hover,
-  .selectedRadio:active,
-  .selectedRadio.dirty,
-  .tab [type="radio"]:checked ~ label,
-  .tab [type="radio"]:checked ~ label:hover {
-    -ms-high-contrast-adjust: none;
-    -webkit-text-fill-color: HighlightText;
-    color: HighlightText;
-    border-color: HighlightText;
-    background-color: Highlight;
-  }
-
-  .queryMetricsSummaryTuple {
-    th,
-    td {
-      &:nth-child(2) {
-        width: @IETableDataWidth;
-      }
-
-      &:nth-child(3) {
-        width: 50%;
-      }
+    .selectedRadio,
+    .selectedRadio:hover,
+    .selectedRadio:active,
+    .selectedRadio.dirty,
+    .tab [type=radio]:checked ~ label,
+    .tab [type=radio]:checked ~ label:hover {
+        -ms-high-contrast-adjust: none;
+        -webkit-text-fill-color: HighlightText;
+        color: HighlightText;
+        border-color: HighlightText;
+        background-color: Highlight;
+    }
+
+    .queryMetricsSummaryTuple {
+
+        th, td {
+
+            &:nth-child(2) {
+                width: @IETableDataWidth;
+            }
+
+            &:nth-child(3) {
+                width: 50%;
+            }
+        }
     }
-  }
 }
 
 /********************************************************************************************
@@ -193,15 +194,15 @@
 *********************************************************************************************/
 
 .hover() {
-  background-color: @AccentLight;
+    background-color: @AccentLight;
 }
 
 .active() {
-  background-color: @AccentExtra;
+    background-color: @AccentExtra;
 }
 
 .focus() {
-  outline: 1px dashed @FocusColor;
+    outline: 1px dashed @FocusColor;
 }
 
 /************************************************************************************************
@@ -211,87 +212,63 @@
 @ToggleWidth: 180px;
 
 .toggleSwitch() {
-  max-width: 100%;
-  margin-bottom: @SmallSpace;
-  padding: @SmallSpace;
-  cursor: pointer;
-  color: @BaseHigh;
-  font-weight: 400;
-  font-size: @mediumFontSize;
-  font-family: @DataExplorerFont;
+    max-width: 100%;
+    margin-bottom: @SmallSpace;
+    padding: @SmallSpace;
+    cursor: pointer;
+    color: @BaseHigh;
+    font-weight: 400;
+    font-size: @mediumFontSize;
+    font-family: @DataExplorerFont;
 }
 
 .selectedToggle() {
-  border-bottom: 2px solid @BaseHigh;
+    border-bottom: 2px solid @BaseHigh;
 }
 
 .unselectedToggle() {
-  color: @AccentMediumHigh;
+    color: @AccentMediumHigh;
 }
 
 /********************************************************************************************************
                              Common Data Explorer Icons
 *********************************************************************************************************/
 .dataExplorerIcons() {
-  cursor: pointer;
-  width: @ImgWidth;
-  height: @ImgHeight;
+    cursor: pointer;
+    width: @ImgWidth;
+    height: @ImgHeight;
 }
 
 /*********************************************************************************************************
                             Info Tooltip
 **********************************************************************************************************/
 .infoTooltip() {
-  position: relative;
-  display: inline-block;
+    position: relative;
+    display: inline-block;
 }
 
 .tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-  visibility: hidden;
-  background-color: @backgroundColor;
-  color: @textColor;
-  position: absolute;
-  z-index: 1;
-  left: @MediumSpace;
-  padding: @MediumSpace;
+    visibility: hidden;
+    background-color: @backgroundColor;
+    color: @textColor;
+    position: absolute;
+    z-index: 1;
+    left: @MediumSpace;
+    padding: @MediumSpace;
 }
 
 .tooltipTextAfter(@color: @BaseDark) {
-  content: "";
-  position: absolute;
-  right: 100%;
-  border-style: solid;
-  border-color: transparent @color transparent transparent;
-  left: 0px;
-  width: 0;
-  height: 0;
-  border-color: @InfoPointerColor transparent;
+    content: "";
+    position: absolute;
+    right: 100%;
+    border-style: solid;
+    border-color: transparent @color transparent transparent;
+    left: 0px;
+    width: 0;
+    height: 0;
+    border-color: @InfoPointerColor transparent;
 }
 
 .tooltipVisible() {
-  visibility: visible;
-}
-
-.inputTooltip() {
-  position: relative;
-}
-
-.inputTooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-  background-color: @backgroundColor;
-  color: @textColor;
-  position: absolute;
-  z-index: 1;
-  padding: @MediumSpace;
-}
-
-.inputTooltipTextAfter(@color: @BaseDark) {
-  content: "";
-  position: absolute;
-  right: 100%;
-  border-style: solid;
-  border-color: transparent @color transparent transparent;
-  left: 10px;
-  width: 0;
-  height: 0;
-  border-color: @InfoPointerColor transparent;
+    visibility: visible;
 }

less/hostedexplorer.less

@@ -13,11 +13,6 @@
 @NavMediumSpace: 10px;
 @NavLargeSpace: 15px;
 
-.skip-link {
-    position: fixed;
-    top: -200px;
-}
-
 html {
     font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
     padding: 0px;

less/tree.less

@@ -1,12 +1,20 @@
 @import "./Common/Constants";
 
+.main {
+    width: 100%;
+    float: left;
+    transition: all .0s ease-in-out;
+    -ms-transition: all 0s ease-in-out;
+    -webkit-transition: all 0s ease-in-out;
+    -moz-transition: all .0s ease-in-out;
+    height: 100%;
+    background-color: white;
+    border-left: 0px solid white;
+}
 
 .resourceTree {
     height: 100%;
     flex: 0 0 auto;
-    .main {
-        height: 100%;
-    }
 }
 
 .resourceTreeScroll {

package.json

@@ -4,12 +4,8 @@
   "description": "Cosmos Explorer",
   "main": "index.js",
   "dependencies": {
-    "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.1.0",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@azure/cosmos-language-service": "0.0.4",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
@@ -46,7 +42,7 @@
     "applicationinsights": "1.8.0",
     "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
-    "canvas": "file:./canvas",
+    "canvas": "2.6.1",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
@@ -70,7 +66,7 @@
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
-    "monaco-editor": "0.18.1",
+    "monaco-editor": "0.15.6",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
@@ -87,7 +83,6 @@
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
-    "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
@@ -120,7 +115,7 @@
     "@types/prop-types": "15.5.8",
     "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "16.9.56",
+    "@types/react": "16.9.49",
     "@types/react-dom": "16.0.7",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",

sampleData/gremlinSampleData.json

@@ -3,6 +3,7 @@
   "offerThroughput": 400,
   "databaseLevelThroughput": false,
   "collectionId": "Persons",
+  "rupmEnabled": false,
   "partitionKey": { "kind": "Hash", "paths": ["/name"] },
   "data": [
     "g.addV('person').property(id, '1').property('name', 'Eva').property('age', 44)",
@@ -12,4 +13,4 @@
     "g.V('1').addE('knows').to(g.V('2')).outV().addE('knows').to(g.V('3'))",
     "g.V('3').addE('knows').to(g.V('4'))"
   ]
-}
+}

src/Common/Constants.ts

@@ -1,437 +1,441 @@
-import { HashMap } from "./HashMap";
-
-export class AuthorizationEndpoints {
-  public static arm: string = "https://management.core.windows.net/";
-  public static common: string = "https://login.windows.net/";
-}
-
-export class CodeOfConductEndpoints {
-  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
-  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
-  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
-}
-
-export class EndpointsRegex {
-  public static readonly cassandra = [
-    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-    "HostName=(.*).cassandra.cosmos.azure.com"
-  ];
-  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
-  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
-  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
-  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
-}
-
-export class ApiEndpoints {
-  public static runtimeProxy: string = "/api/RuntimeProxy";
-  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
-}
-
-export class ServerIds {
-  public static localhost: string = "localhost";
-  public static blackforest: string = "blackforest";
-  public static fairfax: string = "fairfax";
-  public static mooncake: string = "mooncake";
-  public static productionPortal: string = "prod";
-  public static dev: string = "dev";
-}
-
-export class ArmApiVersions {
-  public static readonly documentDB: string = "2015-11-06";
-  public static readonly arcadia: string = "2019-06-01-preview";
-  public static readonly arcadiaLivy: string = "2019-11-01-preview";
-  public static readonly arm: string = "2015-11-01";
-  public static readonly armFeatures: string = "2014-08-01-preview";
-  public static readonly publicVersion = "2020-04-01";
-}
-
-export class ArmResourceTypes {
-  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
-  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
-}
-
-export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
-  public static singlePartitionStorageInGb: string = "10";
-  public static multiPartitionStorageInGb: string = "100";
-  public static maxChangeFeedRetentionDuration: number = 10;
-  public static partitionKeyVersion = 2;
-}
-
-export class ClientDefaults {
-  public static requestTimeoutMs: number = 60000;
-  public static portalCacheTimeoutMs: number = 10000;
-  public static errorNotificationTimeoutMs: number = 5000;
-  public static copyHelperTimeoutMs: number = 2000;
-  public static waitForDOMElementMs: number = 500;
-  public static cacheBustingTimeoutMs: number =
-    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static databaseThroughputIncreaseFactor: number = 100;
-  public static readonly arcadiaTokenRefreshInterval: number =
-    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
-}
-
-export class AccountKind {
-  public static DocumentDB: string = "DocumentDB";
-  public static MongoDB: string = "MongoDB";
-  public static Parse: string = "Parse";
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  public static Default: string = AccountKind.DocumentDB;
-}
-
-export class CorrelationBackend {
-  public static Url: string = "https://aka.ms/cosmosdbanalytics";
-}
-
-export class DefaultAccountExperience {
-  public static DocumentDB: string = "DocumentDB";
-  public static Graph: string = "Graph";
-  public static MongoDB: string = "MongoDB";
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
-  public static Table: string = "Table";
-  public static Cassandra: string = "Cassandra";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
-}
-
-export class CapabilityNames {
-  public static EnableTable: string = "EnableTable";
-  public static EnableGremlin: string = "EnableGremlin";
-  public static EnableCassandra: string = "EnableCassandra";
-  public static EnableAutoScale: string = "EnableAutoScale";
-  public static readonly EnableNotebooks: string = "EnableNotebooks";
-  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
-  public static readonly EnableMongo: string = "EnableMongo";
-  public static readonly EnableServerless: string = "EnableServerless";
-}
-
-export class Features {
-  public static readonly cosmosdb = "cosmosdb";
-  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly executeSproc = "dataexplorerexecutesproc";
-  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
-  public static readonly enableTtl = "enablettl";
-  public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableLinkInjection = "enablelinkinjection";
-  public static readonly enableSpark = "enablespark";
-  public static readonly livyEndpoint = "livyendpoint";
-  public static readonly notebookServerUrl = "notebookserverurl";
-  public static readonly notebookServerToken = "notebookservertoken";
-  public static readonly notebookBasePath = "notebookbasepath";
-  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
-  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
-  public static readonly ttl90Days = "ttl90days";
-  public static readonly enableRightPanelV2 = "enablerightpanelv2";
-  public static readonly enableSchema = "enableschema";
-  public static readonly enableSDKoperations = "enablesdkoperations";
-  public static readonly showMinRUSurvey = "showminrusurvey";
-  public static readonly selfServeType = "selfservetype";
-}
-
-// flight names returned from the portal are always lowercase
-export class Flights {
-  public static readonly SettingsV2 = "settingsv2";
-  public static readonly MongoIndexEditor = "mongoindexeditor";
-  public static readonly AutoscaleTest = "autoscaletest";
-  public static readonly MongoIndexing = "mongoindexing";
-}
-
-export class AfecFeatures {
-  public static readonly Spark = "spark-public-preview";
-  public static readonly Notebooks = "sparknotebooks-public-preview";
-  public static readonly StorageAnalytics = "storageanalytics-public-preview";
-}
-
-export class Spark {
-  public static readonly MaxWorkerCount = 10;
-  public static readonly SKUs: HashMap<string> = new HashMap({
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
-    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
-    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
-    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
-  });
-}
-
-export class TagNames {
-  public static defaultExperience: string = "defaultExperience";
-}
-
-export class MongoDBAccounts {
-  public static protocol: string = "https";
-  public static defaultPort: string = "10255";
-}
-
-export enum MongoBackendEndpointType {
-  local,
-  remote
-}
-
-// TODO: 435619 Add default endpoints per cloud and use regional only when available
-export class CassandraBackend {
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
-  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra";
-  public static readonly guestQueryApi: string = "api/guest/cassandra";
-  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
-  public static readonly schemaApi: string = "api/cassandra/schema";
-  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
-}
-
-export class Queries {
-  public static CustomPageOption: string = "custom";
-  public static UnlimitedPageOption: string = "unlimited";
-  public static itemsPerPage: number = 100;
-  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
-  public static QueryEditorMinHeightRatio: number = 0.1;
-  public static QueryEditorMaxHeightRatio: number = 0.4;
-  public static readonly DefaultMaxDegreeOfParallelism = 6;
-}
-
-export class SavedQueries {
-  public static readonly CollectionName: string = "___Query";
-  public static readonly DatabaseName: string = "___Cosmos";
-  public static readonly OfferThroughput: number = 400;
-  public static readonly PartitionKeyProperty: string = "id";
-}
-
-export class DocumentsGridMetrics {
-  public static DocumentsPerPage: number = 100;
-  public static IndividualRowHeight: number = 34;
-  public static BufferHeight: number = 28;
-  public static SplitterMinWidth: number = 200;
-  public static SplitterMaxWidth: number = 360;
-
-  public static DocumentEditorMinWidthRatio: number = 0.2;
-  public static DocumentEditorMaxWidthRatio: number = 0.4;
-}
-
-export class ExplorerMetrics {
-  public static SplitterMinWidth: number = 240;
-  public static SplitterMaxWidth: number = 400;
-  public static CollapsedResourceTreeWidth: number = 36;
-}
-
-export class SplitterMetrics {
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-}
-
-export class Areas {
-  public static ResourceTree: string = "Resource Tree";
-  public static ContextualPane: string = "Contextual Pane";
-  public static Tab: string = "Tab";
-  public static ShareDialog: string = "Share Access Dialog";
-  public static Notebook: string = "Notebook";
-}
-
-export class HttpHeaders {
-  public static activityId: string = "x-ms-activity-id";
-  public static apiType: string = "x-ms-cosmos-apitype";
-  public static authorization: string = "authorization";
-  public static collectionIndexTransformationProgress: string =
-    "x-ms-documentdb-collection-index-transformation-progress";
-  public static continuation: string = "x-ms-continuation";
-  public static correlationRequestId: string = "x-ms-correlation-request-id";
-  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
-  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
-  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
-  public static connectionString: string = "x-ms-connection-string";
-  public static msDate: string = "x-ms-date";
-  public static location: string = "Location";
-  public static contentType: string = "Content-Type";
-  public static offerReplacePending: string = "x-ms-offer-replace-pending";
-  public static user: string = "x-ms-user";
-  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
-  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
-  public static requestCharge: string = "x-ms-request-charge";
-  public static resourceQuota: string = "x-ms-resource-quota";
-  public static resourceUsage: string = "x-ms-resource-usage";
-  public static retryAfterMs: string = "x-ms-retry-after-ms";
-  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
-  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
-  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
-  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
-  public static autoPilotThroughput = "autoscaleSettings";
-  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
-  public static partitionKey: string = "x-ms-documentdb-partitionkey";
-  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
-  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-}
-
-export class ApiType {
-  // Mapped to hexadecimal values in the backend
-  public static readonly MongoDB: number = 1;
-  public static readonly Gremlin: number = 2;
-  public static readonly Cassandra: number = 4;
-  public static readonly Table: number = 8;
-  public static readonly SQL: number = 16;
-}
-
-export class HttpStatusCodes {
-  public static readonly OK: number = 200;
-  public static readonly Created: number = 201;
-  public static readonly Accepted: number = 202;
-  public static readonly NoContent: number = 204;
-  public static readonly NotModified: number = 304;
-  public static readonly Unauthorized: number = 401;
-  public static readonly Forbidden: number = 403;
-  public static readonly NotFound: number = 404;
-  public static readonly TooManyRequests: number = 429;
-  public static readonly Conflict: number = 409;
-
-  public static readonly InternalServerError: number = 500;
-  public static readonly BadGateway: number = 502;
-  public static readonly ServiceUnavailable: number = 503;
-  public static readonly GatewayTimeout: number = 504;
-
-  public static readonly RetryableStatusCodes: number[] = [
-    HttpStatusCodes.TooManyRequests,
-    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
-    HttpStatusCodes.BadGateway,
-    HttpStatusCodes.ServiceUnavailable,
-    HttpStatusCodes.GatewayTimeout
-  ];
-}
-
-export class Urls {
-  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
-  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
-  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
-  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
-}
-
-export class HashRoutePrefixes {
-  public static databases: string = "/dbs/{db_id}";
-  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
-  public static sprocHash: string = "/sprocs/";
-  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
-  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
-  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
-
-  public static databasesWithId(databaseId: string): string {
-    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static collectionsWithIds(databaseId: string, collectionId: string): string {
-    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static sprocWithIds(
-    databaseId: string,
-    collectionId: string,
-    sprocId: string,
-    stripFirstSlash: boolean = true
-  ): string {
-    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
-
-    const transformedSprocRoute: string = transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{sproc_id}", sprocId);
-    if (!!stripFirstSlash) {
-      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
-    }
-
-    return transformedSprocRoute;
-  }
-
-  public static conflictsWithIds(databaseId: string, collectionId: string) {
-    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
-  }
-
-  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
-    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{doc_id}", docId)
-      .replace("/", ""); // strip the first slash since hasher adds it
-  }
-}
-
-export class ConfigurationOverridesValues {
-  public static IsBsonSchemaV2: string = "true";
-}
-
-export class KeyCodes {
-  public static Space: number = 32;
-  public static Enter: number = 13;
-  public static Escape: number = 27;
-  public static UpArrow: number = 38;
-  public static DownArrow: number = 40;
-  public static LeftArrow: number = 37;
-  public static RightArrow: number = 39;
-  public static Tab: number = 9;
-}
-
-// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-export class NormalizedEventKey {
-  public static readonly Space = " ";
-  public static readonly Enter = "Enter";
-  public static readonly Escape = "Escape";
-  public static readonly UpArrow = "ArrowUp";
-  public static readonly DownArrow = "ArrowDown";
-  public static readonly LeftArrow = "ArrowLeft";
-  public static readonly RightArrow = "ArrowRight";
-}
-
-export class TryCosmosExperience {
-  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
-  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
-  public static collectionsPerAccount: number = 3;
-  public static maxRU: number = 5000;
-  public static defaultRU: number = 3000;
-}
-
-export class OfferVersions {
-  public static V1: string = "V1";
-  public static V2: string = "V2";
-}
-
-export enum ConflictOperationType {
-  Replace = "replace",
-  Create = "create",
-  Delete = "delete"
-}
-
-export const EmulatorMasterKey =
-  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
-  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
-
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
-export class Notebook {
-  public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
-  public static readonly kernelRestartInitialDelayMs = 1000;
-  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly autoSaveIntervalMs = 120000;
-}
-
-export class SparkLibrary {
-  public static readonly nameMinLength = 3;
-  public static readonly nameMaxLength = 63;
-}
-
-export class AnalyticalStorageTtl {
-  public static readonly Days90: number = 7776000;
-  public static readonly Infinite: number = -1;
-  public static readonly Disabled: number = 0;
-}
-
-export class TerminalQueryParams {
-  public static readonly Terminal = "terminal";
-  public static readonly Server = "server";
-  public static readonly Token = "token";
-  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly TerminalEndpoint = "terminalEndpoint";
-}
+import { HashMap } from "./HashMap";
+
+export class AuthorizationEndpoints {
+  public static arm: string = "https://management.core.windows.net/";
+  public static common: string = "https://login.windows.net/";
+}
+
+export class CodeOfConductEndpoints {
+  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
+  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
+  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
+}
+
+export class EndpointsRegex {
+  public static readonly cassandra = [
+    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+    "HostName=(.*).cassandra.cosmos.azure.com"
+  ];
+  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
+  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
+}
+
+export class ApiEndpoints {
+  public static runtimeProxy: string = "/api/RuntimeProxy";
+  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
+}
+
+export class ServerIds {
+  public static localhost: string = "localhost";
+  public static blackforest: string = "blackforest";
+  public static fairfax: string = "fairfax";
+  public static mooncake: string = "mooncake";
+  public static productionPortal: string = "prod";
+  public static dev: string = "dev";
+}
+
+export class ArmApiVersions {
+  public static readonly documentDB: string = "2015-11-06";
+  public static readonly arcadia: string = "2019-06-01-preview";
+  public static readonly arcadiaLivy: string = "2019-11-01-preview";
+  public static readonly arm: string = "2015-11-01";
+  public static readonly armFeatures: string = "2014-08-01-preview";
+  public static readonly publicVersion = "2020-04-01";
+}
+
+export class ArmResourceTypes {
+  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
+}
+
+export class BackendDefaults {
+  public static partitionKeyKind: string = "Hash";
+  public static singlePartitionStorageInGb: string = "10";
+  public static multiPartitionStorageInGb: string = "100";
+  public static maxChangeFeedRetentionDuration: number = 10;
+  public static partitionKeyVersion = 2;
+}
+
+export class ClientDefaults {
+  public static requestTimeoutMs: number = 60000;
+  public static portalCacheTimeoutMs: number = 10000;
+  public static errorNotificationTimeoutMs: number = 5000;
+  public static copyHelperTimeoutMs: number = 2000;
+  public static waitForDOMElementMs: number = 500;
+  public static cacheBustingTimeoutMs: number =
+    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static databaseThroughputIncreaseFactor: number = 100;
+  public static readonly arcadiaTokenRefreshInterval: number =
+    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
+}
+
+export class AccountKind {
+  public static DocumentDB: string = "DocumentDB";
+  public static MongoDB: string = "MongoDB";
+  public static Parse: string = "Parse";
+  public static GlobalDocumentDB: string = "GlobalDocumentDB";
+  public static Default: string = AccountKind.DocumentDB;
+}
+
+export class CorrelationBackend {
+  public static Url: string = "https://aka.ms/cosmosdbanalytics";
+}
+
+export class DefaultAccountExperience {
+  public static DocumentDB: string = "DocumentDB";
+  public static Graph: string = "Graph";
+  public static MongoDB: string = "MongoDB";
+  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
+  public static Table: string = "Table";
+  public static Cassandra: string = "Cassandra";
+  public static Default: string = DefaultAccountExperience.DocumentDB;
+}
+
+export class CapabilityNames {
+  public static EnableTable: string = "EnableTable";
+  public static EnableGremlin: string = "EnableGremlin";
+  public static EnableCassandra: string = "EnableCassandra";
+  public static EnableAutoScale: string = "EnableAutoScale";
+  public static readonly EnableNotebooks: string = "EnableNotebooks";
+  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
+  public static readonly EnableMongo: string = "EnableMongo";
+  public static readonly EnableServerless: string = "EnableServerless";
+}
+
+export class Features {
+  public static readonly cosmosdb = "cosmosdb";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly enableRupm = "enablerupm";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly enableTtl = "enablettl";
+  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableGalleryPublish = "enablegallerypublish";
+  public static readonly enableCodeOfConduct = "enablecodeofconduct";
+  public static readonly enableLinkInjection = "enablelinkinjection";
+  public static readonly enableSpark = "enablespark";
+  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly ttl90Days = "ttl90days";
+  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableSchema = "enableschema";
+  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly showMinRUSurvey = "showminrusurvey";
+}
+
+// flight names returned from the portal are always lowercase
+export class Flights {
+  public static readonly SettingsV2 = "settingsv2";
+  public static readonly MongoIndexEditor = "mongoindexeditor";
+}
+
+export class AfecFeatures {
+  public static readonly Spark = "spark-public-preview";
+  public static readonly Notebooks = "sparknotebooks-public-preview";
+  public static readonly StorageAnalytics = "storageanalytics-public-preview";
+}
+
+export class Spark {
+  public static readonly MaxWorkerCount = 10;
+  public static readonly SKUs: HashMap<string> = new HashMap({
+    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
+    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
+    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
+    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
+    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
+    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
+    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
+  });
+}
+
+export class TagNames {
+  public static defaultExperience: string = "defaultExperience";
+}
+
+export class MongoDBAccounts {
+  public static protocol: string = "https";
+  public static defaultPort: string = "10255";
+}
+
+export enum MongoBackendEndpointType {
+  local,
+  remote
+}
+
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
+export class CassandraBackend {
+  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
+  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
+  public static readonly queryApi: string = "api/cassandra";
+  public static readonly guestQueryApi: string = "api/guest/cassandra";
+  public static readonly keysApi: string = "api/cassandra/keys";
+  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
+  public static readonly schemaApi: string = "api/cassandra/schema";
+  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
+}
+
+export class RUPMStates {
+  public static on: string = "on";
+  public static off: string = "off";
+}
+
+export class Queries {
+  public static CustomPageOption: string = "custom";
+  public static UnlimitedPageOption: string = "unlimited";
+  public static itemsPerPage: number = 100;
+  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+
+  public static QueryEditorMinHeightRatio: number = 0.1;
+  public static QueryEditorMaxHeightRatio: number = 0.4;
+  public static readonly DefaultMaxDegreeOfParallelism = 6;
+}
+
+export class SavedQueries {
+  public static readonly CollectionName: string = "___Query";
+  public static readonly DatabaseName: string = "___Cosmos";
+  public static readonly OfferThroughput: number = 400;
+  public static readonly PartitionKeyProperty: string = "id";
+}
+
+export class DocumentsGridMetrics {
+  public static DocumentsPerPage: number = 100;
+  public static IndividualRowHeight: number = 34;
+  public static BufferHeight: number = 28;
+  public static SplitterMinWidth: number = 200;
+  public static SplitterMaxWidth: number = 360;
+
+  public static DocumentEditorMinWidthRatio: number = 0.2;
+  public static DocumentEditorMaxWidthRatio: number = 0.4;
+}
+
+export class ExplorerMetrics {
+  public static SplitterMinWidth: number = 240;
+  public static SplitterMaxWidth: number = 400;
+  public static CollapsedResourceTreeWidth: number = 36;
+}
+
+export class SplitterMetrics {
+  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
+}
+
+export class Areas {
+  public static ResourceTree: string = "Resource Tree";
+  public static ContextualPane: string = "Contextual Pane";
+  public static Tab: string = "Tab";
+  public static ShareDialog: string = "Share Access Dialog";
+  public static Notebook: string = "Notebook";
+}
+
+export class HttpHeaders {
+  public static activityId: string = "x-ms-activity-id";
+  public static apiType: string = "x-ms-cosmos-apitype";
+  public static authorization: string = "authorization";
+  public static collectionIndexTransformationProgress: string =
+    "x-ms-documentdb-collection-index-transformation-progress";
+  public static continuation: string = "x-ms-continuation";
+  public static correlationRequestId: string = "x-ms-correlation-request-id";
+  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
+  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
+  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
+  public static connectionString: string = "x-ms-connection-string";
+  public static msDate: string = "x-ms-date";
+  public static location: string = "Location";
+  public static contentType: string = "Content-Type";
+  public static offerReplacePending: string = "x-ms-offer-replace-pending";
+  public static user: string = "x-ms-user";
+  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
+  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
+  public static requestCharge: string = "x-ms-request-charge";
+  public static resourceQuota: string = "x-ms-resource-quota";
+  public static resourceUsage: string = "x-ms-resource-usage";
+  public static retryAfterMs: string = "x-ms-retry-after-ms";
+  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
+  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+  public static autoPilotThroughput = "autoscaleSettings";
+  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+  public static partitionKey: string = "x-ms-documentdb-partitionkey";
+  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
+  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+}
+
+export class ApiType {
+  // Mapped to hexadecimal values in the backend
+  public static readonly MongoDB: number = 1;
+  public static readonly Gremlin: number = 2;
+  public static readonly Cassandra: number = 4;
+  public static readonly Table: number = 8;
+  public static readonly SQL: number = 16;
+}
+
+export class HttpStatusCodes {
+  public static readonly OK: number = 200;
+  public static readonly Created: number = 201;
+  public static readonly Accepted: number = 202;
+  public static readonly NoContent: number = 204;
+  public static readonly NotModified: number = 304;
+  public static readonly Unauthorized: number = 401;
+  public static readonly Forbidden: number = 403;
+  public static readonly NotFound: number = 404;
+  public static readonly TooManyRequests: number = 429;
+  public static readonly Conflict: number = 409;
+
+  public static readonly InternalServerError: number = 500;
+  public static readonly BadGateway: number = 502;
+  public static readonly ServiceUnavailable: number = 503;
+  public static readonly GatewayTimeout: number = 504;
+
+  public static readonly RetryableStatusCodes: number[] = [
+    HttpStatusCodes.TooManyRequests,
+    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+    HttpStatusCodes.BadGateway,
+    HttpStatusCodes.ServiceUnavailable,
+    HttpStatusCodes.GatewayTimeout
+  ];
+}
+
+export class Urls {
+  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
+  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
+  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
+}
+
+export class HashRoutePrefixes {
+  public static databases: string = "/dbs/{db_id}";
+  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
+  public static sprocHash: string = "/sprocs/";
+  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
+  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
+  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
+
+  public static databasesWithId(databaseId: string): string {
+    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static collectionsWithIds(databaseId: string, collectionId: string): string {
+    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static sprocWithIds(
+    databaseId: string,
+    collectionId: string,
+    sprocId: string,
+    stripFirstSlash: boolean = true
+  ): string {
+    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
+
+    const transformedSprocRoute: string = transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{sproc_id}", sprocId);
+    if (!!stripFirstSlash) {
+      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+    }
+
+    return transformedSprocRoute;
+  }
+
+  public static conflictsWithIds(databaseId: string, collectionId: string) {
+    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
+  }
+
+  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
+    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{doc_id}", docId)
+      .replace("/", ""); // strip the first slash since hasher adds it
+  }
+}
+
+export class ConfigurationOverridesValues {
+  public static IsBsonSchemaV2: string = "true";
+}
+
+export class KeyCodes {
+  public static Space: number = 32;
+  public static Enter: number = 13;
+  public static Escape: number = 27;
+  public static UpArrow: number = 38;
+  public static DownArrow: number = 40;
+  public static LeftArrow: number = 37;
+  public static RightArrow: number = 39;
+  public static Tab: number = 9;
+}
+
+// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export class NormalizedEventKey {
+  public static readonly Space = " ";
+  public static readonly Enter = "Enter";
+  public static readonly Escape = "Escape";
+  public static readonly UpArrow = "ArrowUp";
+  public static readonly DownArrow = "ArrowDown";
+  public static readonly LeftArrow = "ArrowLeft";
+  public static readonly RightArrow = "ArrowRight";
+}
+
+export class TryCosmosExperience {
+  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
+  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
+  public static collectionsPerAccount: number = 3;
+  public static maxRU: number = 5000;
+  public static defaultRU: number = 3000;
+}
+
+export class OfferVersions {
+  public static V1: string = "V1";
+  public static V2: string = "V2";
+}
+
+export enum ConflictOperationType {
+  Replace = "replace",
+  Create = "create",
+  Delete = "delete"
+}
+
+export const EmulatorMasterKey =
+  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
+  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
+
+export class Notebook {
+  public static readonly defaultBasePath = "./notebooks";
+  public static readonly heartbeatDelayMs = 5000;
+  public static readonly kernelRestartInitialDelayMs = 1000;
+  public static readonly kernelRestartMaxDelayMs = 20000;
+  public static readonly autoSaveIntervalMs = 120000;
+}
+
+export class SparkLibrary {
+  public static readonly nameMinLength = 3;
+  public static readonly nameMaxLength = 63;
+}
+
+export class AnalyticalStorageTtl {
+  public static readonly Days90: number = 7776000;
+  public static readonly Infinite: number = -1;
+  public static readonly Disabled: number = 0;
+}
+
+export class TerminalQueryParams {
+  public static readonly Terminal = "terminal";
+  public static readonly Server = "server";
+  public static readonly Token = "token";
+  public static readonly SubscriptionId = "subscriptionId";
+  public static readonly TerminalEndpoint = "terminalEndpoint";
+}

src/Common/DataAccessUtilityBase.test.ts

@@ -1,13 +1,13 @@
-import { getCommonQueryOptions } from "./queryDocuments";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-
-describe("getCommonQueryOptions", () => {
-  it("builds the correct default options objects", () => {
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
-  it("reads from localStorage", () => {
-    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
-});
+import { getCommonQueryOptions } from "./DataAccessUtilityBase";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+
+describe("getCommonQueryOptions", () => {
+  it("builds the correct default options objects", () => {
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
+  });
+  it("reads from localStorage", () => {
+    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
+    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
+  });
+});

src/Common/DataAccessUtilityBase.ts

@@ -0,0 +1,182 @@
+import {
+  ConflictDefinition,
+  FeedOptions,
+  ItemDefinition,
+  OfferDefinition,
+  QueryIterator,
+  Resource
+} from "@azure/cosmos";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import Q from "q";
+import { configContext, Platform } from "../ConfigContext";
+import * as DataModels from "../Contracts/DataModels";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+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 { OfferUtils } from "../Utils/OfferUtils";
+import * as Constants from "./Constants";
+import { client } from "./CosmosClient";
+import * as HeadersUtility from "./HeadersUtility";
+import { sendCachedDataMessage } from "./MessageHandler";
+
+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

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

src/Common/DocumentUtility.ts

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

src/Common/EnvironmentUtility.ts

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

@@ -1,64 +0,0 @@
-import * as OfferUtility from "./OfferUtility";
-import { SDKOfferDefinition, Offer } from "../Contracts/DataModels";
-import { OfferResponse } from "@azure/cosmos";
-
-describe("parseSDKOfferResponse", () => {
-  it("manual throughput", () => {
-    const mockOfferDefinition = {
-      content: {
-        offerThroughput: 500,
-        collectionThroughputInfo: {
-          minimumRUForCollection: 400,
-          numPhysicalPartitions: 1
-        }
-      },
-      id: "test"
-    } as SDKOfferDefinition;
-
-    const mockResponse = {
-      resource: mockOfferDefinition
-    } as OfferResponse;
-
-    const expectedResult: Offer = {
-      manualThroughput: 500,
-      autoscaleMaxThroughput: undefined,
-      minimumThroughput: 400,
-      id: "test",
-      offerDefinition: mockOfferDefinition,
-      offerReplacePending: false
-    };
-
-    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
-  });
-
-  it("autoscale throughput", () => {
-    const mockOfferDefinition = {
-      content: {
-        offerThroughput: 400,
-        collectionThroughputInfo: {
-          minimumRUForCollection: 400,
-          numPhysicalPartitions: 1
-        },
-        offerAutopilotSettings: {
-          maxThroughput: 5000
-        }
-      },
-      id: "test"
-    } as SDKOfferDefinition;
-
-    const mockResponse = {
-      resource: mockOfferDefinition
-    } as OfferResponse;
-
-    const expectedResult: Offer = {
-      manualThroughput: undefined,
-      autoscaleMaxThroughput: 5000,
-      minimumThroughput: 400,
-      id: "test",
-      offerDefinition: mockOfferDefinition,
-      offerReplacePending: false
-    };
-
-    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
-  });
-});

src/Common/OfferUtility.ts

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

src/Common/PortalNotifications.ts

@@ -16,7 +16,7 @@ const notificationsPath = () => {
 };
 
 export const fetchPortalNotifications = async (): Promise<DataModels.Notification[]> => {
-  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.Hosted) {
+  if (configContext.platform === Platform.Emulator) {
     return [];
   }
 

src/Common/QueriesClient.ts

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

src/Common/Splitter.ts

@@ -23,10 +23,10 @@ export class Splitter {
   public splitterId: string;
   public leftSideId: string;
 
-  public splitter!: HTMLElement;
-  public leftSide!: HTMLElement;
-  public lastX!: number;
-  public lastWidth!: number;
+  public splitter: HTMLElement;
+  public leftSide: HTMLElement;
+  public lastX: number;
+  public lastWidth: number;
 
   private isCollapsed: ko.Observable<boolean>;
   private bounds: SplitterBounds;
@@ -42,10 +42,9 @@ export class Splitter {
   }
 
   public initialize() {
-    if (document.getElementById(this.splitterId) !== null && document.getElementById(this.leftSideId) != null) {
-      this.splitter = <HTMLElement>document.getElementById(this.splitterId);
-      this.leftSide = <HTMLElement>document.getElementById(this.leftSideId);
-    }
+    this.splitter = document.getElementById(this.splitterId);
+    this.leftSide = document.getElementById(this.leftSideId);
+
     const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
     const splitterOptions: JQueryUI.ResizableOptions = {
       animate: true,

src/Common/dataAccess/createCollection.test.ts

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

src/Common/dataAccess/createDocument.ts

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

src/Common/dataAccess/deleteConflict.ts

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

src/Common/dataAccess/deleteDocument.ts

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

src/Common/dataAccess/executeStoredProcedure.ts

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

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -1,92 +0,0 @@
-import { AuthType } from "../../AuthType";
-import { armRequest } from "../../Utils/arm/request";
-import { configContext } from "../../ConfigContext";
-import { handleError } from "../ErrorHandlingUtils";
-import { userContext } from "../../UserContext";
-
-interface TimeSeriesData {
-  data: {
-    timeStamp: string;
-    total: number;
-  }[];
-  metadatavalues: {
-    name: {
-      localizedValue: string;
-      value: string;
-    };
-    value: string;
-  };
-}
-
-interface MetricsData {
-  displayDescription: string;
-  errorCode: string;
-  id: string;
-  name: {
-    value: string;
-    localizedValue: string;
-  };
-  timeseries: TimeSeriesData[];
-  type: string;
-  unit: string;
-}
-
-interface MetricsResponse {
-  cost: number;
-  interval: string;
-  namespace: string;
-  resourceregion: string;
-  timespan: string;
-  value: MetricsData[];
-}
-
-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;
-  const filter = `DatabaseName eq '${databaseName}' and CollectionName eq '${containerName}'`;
-  const metricNames = "DataUsage,IndexUsage";
-  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/providers/microsoft.insights/metrics`;
-
-  try {
-    const metricsResponse: MetricsResponse = await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path,
-      method: "GET",
-      apiVersion: "2018-01-01",
-      queryParams: {
-        filter,
-        metricNames
-      }
-    });
-
-    if (metricsResponse?.value?.length !== 2) {
-      return undefined;
-    }
-
-    const dataUsageData: MetricsData = metricsResponse.value[0];
-    const indexUsagedata: MetricsData = metricsResponse.value[1];
-    const dataUsageSizeInKb: number = getUsageSizeInKb(dataUsageData);
-    const indexUsageSizeInKb: number = getUsageSizeInKb(indexUsagedata);
-
-    return dataUsageSizeInKb + indexUsageSizeInKb;
-  } catch (error) {
-    handleError(error, "getCollectionUsageSize");
-    throw error;
-  }
-};
-
-const getUsageSizeInKb = (metricsData: MetricsData): number => {
-  if (metricsData?.errorCode !== "Success") {
-    throw Error(`Get collection usage size failed: ${metricsData.errorCode}`);
-  }
-
-  const timeSeriesData: TimeSeriesData = metricsData?.timeseries?.[0];
-  const usageSizeInBytes: number = timeSeriesData?.data?.[0]?.total;
-
-  return usageSizeInBytes ? usageSizeInBytes / 1024 : 0;
-};

src/Common/dataAccess/queryConflicts.ts

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

src/Common/dataAccess/queryDocuments.ts

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

src/Common/dataAccess/queryDocumentsPage.ts

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

src/Common/dataAccess/readCollectionOffer.ts

@@ -1,6 +1,9 @@
+import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { Offer, ReadCollectionOfferParams } from "../../Contracts/DataModels";
+import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
@@ -8,22 +11,50 @@ import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/20
 import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { getTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { readOfferWithSDK } from "./readOfferWithSDK";
+import { readOffers } from "./readOffers";
 import { userContext } from "../../UserContext";
 
-export const readCollectionOffer = async (params: ReadCollectionOfferParams): Promise<Offer> => {
+export const readCollectionOffer = async (
+  params: DataModels.ReadCollectionOfferParams
+): Promise<DataModels.OfferWithHeaders> => {
   const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
+  let offerId = params.offerId;
+  if (!offerId) {
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+      try {
+        offerId = await getCollectionOfferIdWithARM(params.databaseId, params.collectionId);
+      } catch (error) {
+        clearMessage();
+        if (error.code !== "NotFound") {
+          throw error;
+        }
+        return undefined;
+      }
+    } else {
+      offerId = await getCollectionOfferIdWithSDK(params.collectionResourceId);
+      if (!offerId) {
+        clearMessage();
+        return undefined;
+      }
+    }
+  }
+
+  const options: RequestOptions = {
+    initialHeaders: {
+      [HttpHeaders.populateCollectionThroughputInfo]: true
+    }
+  };
 
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.Table
-    ) {
-      return await readCollectionOfferWithARM(params.databaseId, params.collectionId);
-    }
-
-    return await readOfferWithSDK(params.offerId, params.collectionResourceId);
+    const response = await client()
+      .offer(offerId)
+      .read(options);
+    return (
+      response && {
+        ...response.resource,
+        headers: response.headers
+      }
+    );
   } catch (error) {
     handleError(error, "ReadCollectionOffer", `Error while querying offer for collection ${params.collectionId}`);
     throw error;
@@ -32,92 +63,61 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr
   }
 };
 
-const readCollectionOfferWithARM = async (databaseId: string, collectionId: string): Promise<Offer> => {
+const getCollectionOfferIdWithARM = async (databaseId: string, collectionId: string): Promise<string> => {
+  let rpResponse;
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
   const accountName = userContext.databaseAccount.name;
   const defaultExperience = userContext.defaultExperience;
-
-  let rpResponse;
-  try {
-    switch (defaultExperience) {
-      case DefaultAccountExperienceType.DocumentDB:
-        rpResponse = await getSqlContainerThroughput(
-          subscriptionId,
-          resourceGroup,
-          accountName,
-          databaseId,
-          collectionId
-        );
-        break;
-      case DefaultAccountExperienceType.MongoDB:
-        rpResponse = await getMongoDBCollectionThroughput(
-          subscriptionId,
-          resourceGroup,
-          accountName,
-          databaseId,
-          collectionId
-        );
-        break;
-      case DefaultAccountExperienceType.Cassandra:
-        rpResponse = await getCassandraTableThroughput(
-          subscriptionId,
-          resourceGroup,
-          accountName,
-          databaseId,
-          collectionId
-        );
-        break;
-      case DefaultAccountExperienceType.Graph:
-        rpResponse = await getGremlinGraphThroughput(
-          subscriptionId,
-          resourceGroup,
-          accountName,
-          databaseId,
-          collectionId
-        );
-        break;
-      case DefaultAccountExperienceType.Table:
-        rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
-        break;
-      default:
-        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-
-    return undefined;
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      rpResponse = await getSqlContainerThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.MongoDB:
+      rpResponse = await getMongoDBCollectionThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.Cassandra:
+      rpResponse = await getCassandraTableThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.Graph:
+      rpResponse = await getGremlinGraphThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.Table:
+      rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
+      break;
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 
-  const resource = rpResponse?.properties?.resource;
-  if (resource) {
-    const offerId: string = rpResponse.name;
-    const minimumThroughput: number =
-      typeof resource.minimumThroughput === "string"
-        ? parseInt(resource.minimumThroughput)
-        : resource.minimumThroughput;
-    const autoscaleSettings = resource.autoscaleSettings;
-
-    if (autoscaleSettings) {
-      return {
-        id: offerId,
-        autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
-        manualThroughput: undefined,
-        minimumThroughput,
-        offerReplacePending: resource.offerReplacePending === "true"
-      };
-    }
-
-    return {
-      id: offerId,
-      autoscaleMaxThroughput: undefined,
-      manualThroughput: resource.throughput,
-      minimumThroughput,
-      offerReplacePending: resource.offerReplacePending === "true"
-    };
-  }
-
-  return undefined;
+  return rpResponse?.name;
+};
+
+const getCollectionOfferIdWithSDK = async (collectionResourceId: string): Promise<string> => {
+  const offers = await readOffers();
+  const offer = offers.find(offer => offer.resource === collectionResourceId);
+  return offer?.id;
 };

src/Common/dataAccess/readCollectionQuotaInfo.ts

@@ -0,0 +1,45 @@
+import * as DataModels from "../../Contracts/DataModels";
+import * as HeadersUtility from "../HeadersUtility";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContainerDefinition, Resource } from "@azure/cosmos";
+import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+
+interface ResourceWithStatistics {
+  statistics: DataModels.Statistic[];
+}
+
+export const readCollectionQuotaInfo = async (
+  collection: ViewModels.Collection
+): Promise<DataModels.CollectionQuotaInfo> => {
+  const clearMessage = logConsoleProgress(`Querying containers for database ${collection.id}`);
+  const options: RequestOptions = {};
+  options.populateQuotaInfo = true;
+  options.initialHeaders = options.initialHeaders || {};
+  options.initialHeaders[HttpHeaders.populatePartitionStatistics] = true;
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .read(options);
+    const quota: DataModels.CollectionQuotaInfo = HeadersUtility.getQuota(response.headers);
+    const resource = response.resource as ContainerDefinition & Resource & ResourceWithStatistics;
+    quota["usageSizeInKB"] = resource.statistics.reduce(
+      (previousValue: number, currentValue: DataModels.Statistic) => previousValue + currentValue.sizeInKB,
+      0
+    );
+    quota["numPartitions"] = resource.statistics.length;
+    quota["uniqueKeyPolicy"] = collection.uniqueKeyPolicy; // TODO: Remove after refactoring (#119617)
+
+    return quota;
+  } catch (error) {
+    handleError(error, "ReadCollectionQuotaInfo", `Error while querying quota info for container ${collection.id}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,28 +1,51 @@
+import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
+import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
 import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { readOfferWithSDK } from "./readOfferWithSDK";
+import { readOffers } from "./readOffers";
 import { userContext } from "../../UserContext";
 
-export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
+export const readDatabaseOffer = async (
+  params: DataModels.ReadDatabaseOfferParams
+): Promise<DataModels.OfferWithHeaders> => {
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
+  let offerId = params.offerId;
+  if (!offerId) {
+    offerId = await (window.authType === AuthType.AAD &&
+    !userContext.useSDKOperations &&
+    userContext.defaultExperience !== DefaultAccountExperienceType.Table
+      ? getDatabaseOfferIdWithARM(params.databaseId)
+      : getDatabaseOfferIdWithSDK(params.databaseResourceId));
+    if (!offerId) {
+      clearMessage();
+      return undefined;
+    }
+  }
+
+  const options: RequestOptions = {
+    initialHeaders: {
+      [HttpHeaders.populateCollectionThroughputInfo]: true
+    }
+  };
 
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.Table
-    ) {
-      return await readDatabaseOfferWithARM(params.databaseId);
-    }
-
-    return await readOfferWithSDK(params.offerId, params.databaseResourceId);
+    const response = await client()
+      .offer(offerId)
+      .read(options);
+    return (
+      response && {
+        ...response.resource,
+        headers: response.headers
+      }
+    );
   } catch (error) {
     handleError(error, "ReadDatabaseOffer", `Error while querying offer for database ${params.databaseId}`);
     throw error;
@@ -31,13 +54,13 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
   }
 };
 
-const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
+const getDatabaseOfferIdWithARM = async (databaseId: string): Promise<string> => {
+  let rpResponse;
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
   const accountName = userContext.databaseAccount.name;
   const defaultExperience = userContext.defaultExperience;
 
-  let rpResponse;
   try {
     switch (defaultExperience) {
       case DefaultAccountExperienceType.DocumentDB:
@@ -55,41 +78,18 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
       default:
         throw new Error(`Unsupported default experience type: ${defaultExperience}`);
     }
+
+    return rpResponse?.name;
   } catch (error) {
     if (error.code !== "NotFound") {
       throw error;
     }
-
     return undefined;
   }
-
-  const resource = rpResponse?.properties?.resource;
-  if (resource) {
-    const offerId: string = rpResponse.name;
-    const minimumThroughput: number =
-      typeof resource.minimumThroughput === "string"
-        ? parseInt(resource.minimumThroughput)
-        : resource.minimumThroughput;
-    const autoscaleSettings = resource.autoscaleSettings;
-
-    if (autoscaleSettings) {
-      return {
-        id: offerId,
-        autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
-        manualThroughput: undefined,
-        minimumThroughput,
-        offerReplacePending: resource.offerReplacePending === "true"
-      };
-    }
-
-    return {
-      id: offerId,
-      autoscaleMaxThroughput: undefined,
-      manualThroughput: resource.throughput,
-      minimumThroughput,
-      offerReplacePending: resource.offerReplacePending === "true"
-    };
-  }
-
-  return undefined;
+};
+
+const getDatabaseOfferIdWithSDK = async (databaseResourceId: string): Promise<string> => {
+  const offers = await readOffers();
+  const offer = offers.find(offer => offer.resource === databaseResourceId);
+  return offer?.id;
 };

src/Common/dataAccess/readDocument.ts

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

src/Common/dataAccess/readOfferWithSDK.ts

@@ -1,29 +0,0 @@
-import { HttpHeaders } from "../Constants";
-import { Offer } from "../../Contracts/DataModels";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { client } from "../CosmosClient";
-import { parseSDKOfferResponse } from "../OfferUtility";
-import { readOffers } from "./readOffers";
-
-export const readOfferWithSDK = async (offerId: string, resourceId: string): Promise<Offer> => {
-  if (!offerId) {
-    const offers = await readOffers();
-    const offer = offers.find(offer => offer.resource === resourceId);
-
-    if (!offer) {
-      return undefined;
-    }
-    offerId = offer.id;
-  }
-
-  const options: RequestOptions = {
-    initialHeaders: {
-      [HttpHeaders.populateCollectionThroughputInfo]: true
-    }
-  };
-  const response = await client()
-    .offer(offerId)
-    .read(options);
-
-  return parseSDKOfferResponse(response);
-};

src/Common/dataAccess/readOffers.ts

@@ -1,9 +1,9 @@
-import { SDKOfferDefinition } from "../../Contracts/DataModels";
+import { Offer } from "../../Contracts/DataModels";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError, getErrorMessage } from "../ErrorHandlingUtils";
 
-export const readOffers = async (): Promise<SDKOfferDefinition[]> => {
+export const readOffers = async (): Promise<Offer[]> => {
   const clearMessage = logConsoleProgress(`Querying offers`);
 
   try {

src/Common/dataAccess/updateDocument.ts

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

src/Common/dataAccess/updateOffer.ts

@@ -1,14 +1,13 @@
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { HttpHeaders } from "../Constants";
-import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
+import { Offer, UpdateOfferParams } from "../../Contracts/DataModels";
 import { OfferDefinition } from "@azure/cosmos";
 import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { parseSDKOfferResponse } from "../OfferUtility";
 import { readCollectionOffer } from "./readCollectionOffer";
 import { readDatabaseOffer } from "./readDatabaseOffer";
 import {
@@ -374,21 +373,21 @@ const createUpdateOfferBody = (params: UpdateOfferParams): ThroughputSettingsUpd
 };
 
 const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> => {
-  const sdkOfferDefinition = params.currentOffer.offerDefinition;
-  const newOffer: SDKOfferDefinition = {
+  const currentOffer = params.currentOffer;
+  const newOffer: Offer = {
     content: {
       offerThroughput: undefined,
       offerIsRUPerMinuteThroughputEnabled: false
     },
     _etag: undefined,
     _ts: undefined,
-    _rid: sdkOfferDefinition._rid,
-    _self: sdkOfferDefinition._self,
-    id: sdkOfferDefinition.id,
-    offerResourceId: sdkOfferDefinition.offerResourceId,
-    offerVersion: sdkOfferDefinition.offerVersion,
-    offerType: sdkOfferDefinition.offerType,
-    resource: sdkOfferDefinition.resource
+    _rid: currentOffer._rid,
+    _self: currentOffer._self,
+    id: currentOffer.id,
+    offerResourceId: currentOffer.offerResourceId,
+    offerVersion: currentOffer.offerVersion,
+    offerType: currentOffer.offerType,
+    resource: currentOffer.resource
   };
 
   if (params.autopilotThroughput) {
@@ -416,6 +415,5 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
     .offer(params.currentOffer.id)
     // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
     .replace((newOffer as unknown) as OfferDefinition, options);
-
-  return parseSDKOfferResponse(sdkResponse);
+  return sdkResponse?.resource;
 };

src/Common/dataAccess/updateOfferThroughputBeyondLimit.test.ts

@@ -0,0 +1,25 @@
+import { updateOfferThroughputBeyondLimit } from "./updateOfferThroughputBeyondLimit";
+
+describe("updateOfferThroughputBeyondLimit", () => {
+  it("should call fetch", async () => {
+    window.fetch = jest.fn(() => {
+      return {
+        ok: true
+      };
+    });
+    window.dataExplorer = {
+      logConsoleData: jest.fn(),
+      deleteInProgressConsoleDataWithId: jest.fn()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+    await updateOfferThroughputBeyondLimit({
+      subscriptionId: "foo",
+      resourceGroup: "foo",
+      databaseAccountName: "foo",
+      databaseName: "foo",
+      throughput: 1000000000,
+      offerIsRUPerMinuteThroughputEnabled: false
+    });
+    expect(window.fetch).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/updateOfferThroughputBeyondLimit.ts

@@ -0,0 +1,57 @@
+import { Platform, configContext } from "../../ConfigContext";
+import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
+import { AutoPilotOfferSettings } from "../../Contracts/DataModels";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { HttpHeaders } from "../Constants";
+import { handleError } from "../ErrorHandlingUtils";
+
+interface UpdateOfferThroughputRequest {
+  subscriptionId: string;
+  resourceGroup: string;
+  databaseAccountName: string;
+  databaseName: string;
+  collectionName?: string;
+  throughput: number;
+  offerIsRUPerMinuteThroughputEnabled: boolean;
+  offerAutopilotSettings?: AutoPilotOfferSettings;
+}
+
+export async function updateOfferThroughputBeyondLimit(request: UpdateOfferThroughputRequest): Promise<void> {
+  if (configContext.platform !== Platform.Portal) {
+    throw new Error("Updating throughput beyond specified limit is not supported on this platform");
+  }
+
+  const resourceDescriptionInfo = request.collectionName
+    ? `database ${request.databaseName} and container ${request.collectionName}`
+    : `database ${request.databaseName}`;
+
+  const clearMessage = logConsoleProgress(
+    `Requesting increase in throughput to ${request.throughput} for ${resourceDescriptionInfo}`
+  );
+
+  const url = `${configContext.BACKEND_ENDPOINT}/api/offerthroughputrequest/updatebeyondspecifiedlimit`;
+  const authorizationHeader = getAuthorizationHeader();
+
+  const response = await fetch(url, {
+    method: "POST",
+    body: JSON.stringify(request),
+    headers: { [authorizationHeader.header]: authorizationHeader.token, [HttpHeaders.contentType]: "application/json" }
+  });
+
+  if (response.ok) {
+    logConsoleInfo(
+      `Successfully requested an increase in throughput to ${request.throughput} for ${resourceDescriptionInfo}`
+    );
+    clearMessage();
+    return undefined;
+  }
+
+  const error = await response.json();
+  handleError(
+    error,
+    "updateOfferThroughputBeyondLimit",
+    `Failed to request an increase in throughput for ${request.throughput}`
+  );
+  clearMessage();
+  throw error;
+}

src/Contracts/DataModels.ts

@@ -208,21 +208,12 @@ export interface QueryMetrics {
   vmExecutionTime: any;
 }
 
-export interface Offer {
-  id: string;
-  autoscaleMaxThroughput: number | undefined;
-  manualThroughput: number | undefined;
-  minimumThroughput: number | undefined;
-  offerDefinition?: SDKOfferDefinition;
-  offerReplacePending: boolean;
-}
-
-export interface SDKOfferDefinition extends Resource {
+export interface Offer extends Resource {
   offerVersion?: string;
   offerType?: string;
   content?: {
     offerThroughput: number;
-    offerIsRUPerMinuteThroughputEnabled?: boolean;
+    offerIsRUPerMinuteThroughputEnabled: boolean;
     collectionThroughputInfo?: OfferThroughputInfo;
     offerAutopilotSettings?: AutoPilotOfferSettings;
   };
@@ -230,6 +221,22 @@ export interface SDKOfferDefinition extends Resource {
   offerResourceId?: string;
 }
 
+export interface OfferWithHeaders extends Offer {
+  headers: any;
+}
+
+export interface CollectionQuotaInfo {
+  storedProcedures: number;
+  triggers: number;
+  functions: number;
+  documentsSize: number;
+  collectionSize: number;
+  documentsCount: number;
+  usageSizeInKB: number;
+  numPartitions: number;
+  uniqueKeyPolicy?: UniqueKeyPolicy; // TODO: This should ideally not be a part of the collection quota. Remove after refactoring. (#119617)
+}
+
 export interface OfferThroughputInfo {
   minimumRUForCollection: number;
   numPhysicalPartitions: number;
@@ -248,6 +255,7 @@ export interface CreateDatabaseAndCollectionRequest {
   collectionId: string;
   offerThroughput: number;
   databaseLevelThroughput: boolean;
+  rupmEnabled?: boolean;
   partitionKey?: PartitionKey;
   indexingPolicy?: IndexingPolicy;
   uniqueKeyPolicy?: UniqueKeyPolicy;

src/Contracts/ExplorerContracts.ts

@@ -32,8 +32,7 @@ export enum MessageTypes {
   GetArcadiaToken,
   CreateWorkspace,
   CreateSparkPool,
-  RefreshDatabaseAccount,
-  InitTestExplorer
+  RefreshDatabaseAccount
 }
 
 export { Versions, ActionContracts, Diagnostics };

src/Contracts/ViewModels.ts

@@ -15,7 +15,6 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
-import { SelfServeType } from "../SelfServe/SelfServeUtils";
 import { UploadDetails } from "../workers/upload/definitions";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
@@ -121,7 +120,7 @@ export interface Collection extends CollectionBase {
   requestSchema?: () => void;
   indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
-  usageSizeInKB: ko.Observable<number>;
+  quotaInfo: ko.Observable<DataModels.CollectionQuotaInfo>;
   offer: ko.Observable<DataModels.Offer>;
   conflictResolutionPolicy: ko.Observable<DataModels.ConflictResolutionPolicy>;
   changeFeedPolicy: ko.Observable<DataModels.ChangeFeedPolicy>;
@@ -363,7 +362,7 @@ export enum CollectionTabKind {
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  SettingsV2 = 20
+  SettingsV2 = 19
 }
 
 export enum TerminalKind {
@@ -396,7 +395,6 @@ export interface DataExplorerInputsFrame {
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
-  selfServeType?: SelfServeType;
 }
 
 export interface CollectionCreationDefaults {

src/Explorer/ComponentRegisterer.test.ts

@@ -44,6 +44,10 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("user-defined-function-tab")).toBe(true);
   });
 
+  it("should register settings-tab component", () => {
+    expect(ko.components.isRegistered("settings-tab")).toBe(true);
+  });
+
   it("should register settings-tab-v2 component", () => {
     expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -26,11 +26,12 @@ ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponent
 ko.components.register("tabs-manager", TabsManagerKOComponent());
 
 // Collection Tabs
-ko.components.register("documents-tab", new TabComponents.DocumentsTab());
+ko.components.register("documents-tab", new TabComponents.MongoDocumentsTabV2());
 ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
 ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
 ko.components.register("trigger-tab", new TabComponents.TriggerTab());
 ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
+ko.components.register("settings-tab", new TabComponents.SettingsTab());
 ko.components.register("settings-tab-v2", new TabComponents.SettingsTabV2());
 ko.components.register("query-tab", new TabComponents.QueryTab());
 ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

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

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -44,11 +44,12 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     onChange?: (_?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
   }[] = [
     { key: "feature.enablechangefeedpolicy", label: "Enable change feed policy", value: "true" },
+    { key: "feature.enablerupm", label: "Enable RUPM", value: "true" },
     { key: "feature.dataexplorerexecutesproc", label: "Execute stored procedure", value: "true" },
     { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
     { key: "feature.enablettl", label: "Enable TTL", value: "true" },
     { key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
-    { key: "feature.selfServeType", label: "Self serve feature", value: "sample" },
+    { key: "feature.enablecodeofconduct", label: "Enable Code Of Conduct Acknowledgement", value: "true" },
     {
       key: "feature.enableLinkInjection",
       label: "Enable Injecting Notebook Viewer Link into the first cell",

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

@@ -131,6 +131,12 @@ exports[`Feature panel renders all flags 1`] = `
           label="Enable change feed policy"
           onChange={[Function]}
         />
+        <StyledCheckboxBase
+          checked={false}
+          key="feature.enablerupm"
+          label="Enable RUPM"
+          onChange={[Function]}
+        />
         <StyledCheckboxBase
           checked={false}
           key="feature.dataexplorerexecutesproc"
@@ -157,8 +163,8 @@ exports[`Feature panel renders all flags 1`] = `
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.selfServeType"
-          label="Self serve feature"
+          key="feature.enablecodeofconduct"
+          label="Enable Code Of Conduct Acknowledgement"
           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 | null, selection: Item | null) => void;
+  submitFct?: (inputValue: string, selection: Item) => void;
 
   /**
    * Typehead comes with a Search button that we normally remove.
@@ -88,8 +88,8 @@ interface OnClickItem {
 }
 
 interface Cache {
-  inputValue: string | null;
-  selection: Item | null;
+  inputValue: string;
+  selection: Item;
 }
 
 class InputTypeaheadViewModel {
@@ -98,12 +98,15 @@ class InputTypeaheadViewModel {
   private params: InputTypeaheadParams;
 
   private cache: Cache;
+  private inputValue: string;
+  private selection: Item;
 
   public constructor(params: InputTypeaheadParams) {
     this.instanceNumber = InputTypeaheadViewModel.instanceCount++;
     this.params = params;
 
     this.params.choices.subscribe(this.initializeTypeahead.bind(this));
+
     this.cache = {
       inputValue: null,
       selection: null
@@ -158,7 +161,7 @@ class InputTypeaheadViewModel {
       }
     }
 
-    ($ as any).typeahead(options);
+    $.typeahead(options);
   }
 
   /**
@@ -174,11 +177,11 @@ class InputTypeaheadViewModel {
    * Use ko's "template: afterRender" callback to do that without actually using any template.
    * Another way is to call it within setTimeout() in constructor.
    */
-  public afterRender(): void {
+  private afterRender(): void {
     this.initializeTypeahead();
   }
 
-  public submit(): void {
+  private submit(): void {
     if (this.params.submitFct) {
       this.params.submitFct(this.cache.inputValue, this.cache.selection);
     }

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -1,7 +1,6 @@
 import {
   Dropdown,
   FocusZone,
-  FontIcon,
   FontWeights,
   IDropdownOption,
   IPageSpecification,
@@ -17,7 +16,7 @@ import {
   Text
 } from "office-ui-fabric-react";
 import * as React from "react";
-import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
+import { IGalleryItem, JunoClient, IJunoResponse, IPublicGalleryData } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
@@ -137,7 +136,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   public render(): JSX.Element {
-    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+    const tabs: GalleryTabInfo[] = [this.createTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
 
     if (this.props.container?.isGalleryPublishEnabled()) {
       tabs.push(
@@ -147,7 +146,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           this.state.isCodeOfConductAccepted
         )
       );
-      tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+      tabs.push(this.createTab(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.
@@ -184,27 +183,6 @@ 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[],
@@ -216,29 +194,17 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
-  private createFavoritesTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
+  private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      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))
+      content: this.createSearchBarHeader(this.createCardsTabContent(data))
     };
   }
 
   private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      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)
+      content: this.createPublishedNotebooksTabContent(data)
     };
   };
 
@@ -398,9 +364,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<IGalleryItem[]> | IJunoResponse<IPublicGalleryData>;
-        if (this.props.container) {
-          response = await this.props.junoClient.getPublicGalleryData();
+        let response: IJunoResponse<IPublicGalleryData> | IJunoResponse<IGalleryItem[]>;
+        if (this.props.container.isCodeOfConductEnabled()) {
+          response = await this.props.junoClient.fetchPublicNotebooks();
           this.isCodeOfConductAccepted = response.data?.metadata.acceptedCodeOfConduct;
           this.publicNotebooks = response.data?.notebooksData;
         } else {
@@ -602,7 +568,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

@@ -89,12 +89,12 @@ describe("SettingsComponent", () => {
   it("auto pilot helper functions pass on correct value", () => {
     const newCollection = { ...collection };
     newCollection.offer = ko.observable<DataModels.Offer>({
-      autoscaleMaxThroughput: 10000,
-      manualThroughput: undefined,
-      minimumThroughput: 400,
-      id: "test",
-      offerReplacePending: false
-    });
+      content: {
+        offerAutopilotSettings: {
+          maxThroughput: 10000
+        }
+      }
+    } as DataModels.Offer);
 
     const props = { ...baseProps };
     props.settingsTab.collection = newCollection;
@@ -187,6 +187,21 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.hasConflictResolution()).toEqual(true);
   });
 
+  it("isOfferReplacePending", () => {
+    let settingsComponentInstance = new SettingsComponent(baseProps);
+    expect(settingsComponentInstance.isOfferReplacePending()).toEqual(undefined);
+
+    const newCollection = { ...collection };
+    newCollection.offer = ko.observable({
+      headers: { "x-ms-offer-replace-pending": true }
+    } as DataModels.OfferWithHeaders);
+    const props = { ...baseProps };
+    props.settingsTab.collection = newCollection;
+
+    settingsComponentInstance = new SettingsComponent(props);
+    expect(settingsComponentInstance.isOfferReplacePending()).toEqual(true);
+  });
+
   it("save calls updateCollection, updateMongoDBCollectionThroughRP and updateOffer", async () => {
     const wrapper = shallow(<SettingsComponent {...baseProps} />);
     wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true, isMongoIndexingPolicySaveable: true });
@@ -231,7 +246,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

@@ -2,23 +2,28 @@ import * as React from "react";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import * as Constants from "../../../Common/Constants";
 import * as DataModels from "../../../Contracts/DataModels";
+import * as SharedConstants from "../../../Shared/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
 import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
 import Explorer from "../../Explorer";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { userContext } from "../../../UserContext";
+import { updateOfferThroughputBeyondLimit } from "../../../Common/dataAccess/updateOfferThroughputBeyondLimit";
 import SettingsTab from "../../Tabs/SettingsTabV2";
-import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
+import { throughputUnit } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
   MongoIndexingPolicyComponent,
   MongoIndexingPolicyComponentProps
 } from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
 import {
+  getMaxRUs,
   hasDatabaseSharedThroughput,
   GeospatialConfigType,
   TtlType,
@@ -44,7 +49,6 @@ import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/genera
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { isEmpty } from "underscore";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -138,8 +142,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     // Mongo container with system partition key still treat as "Fixed"
     this.isFixedContainer =
-      this.container.isPreferredApiMongoDB() &&
-      (!this.collection.partitionKey || this.collection.partitionKey.systemKey);
+      !this.collection.partitionKey ||
+      (this.container.isPreferredApiMongoDB() && this.collection.partitionKey.systemKey);
 
     this.state = {
       throughput: undefined,
@@ -223,6 +227,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
   public loadMongoIndexes = async (): Promise<void> => {
     if (
+      this.container.isMongoIndexEditorEnabled() &&
       this.container.isPreferredApiMongoDB() &&
       this.container.isEnableMongoCapabilityPresent() &&
       this.container.databaseAccount()
@@ -270,14 +275,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   private setAutoPilotStates = (): void => {
-    const autoscaleMaxThroughput = this.collection?.offer()?.autoscaleMaxThroughput;
+    const offer = this.collection?.offer && this.collection.offer();
+    const offerAutopilotSettings = offer?.content?.offerAutopilotSettings;
 
-    if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
+    if (
+      offerAutopilotSettings &&
+      offerAutopilotSettings.maxThroughput &&
+      AutoPilotUtils.isValidAutoPilotThroughput(offerAutopilotSettings.maxThroughput)
+    ) {
       this.setState({
         isAutoPilotSelected: true,
         wasAutopilotOriginallySet: true,
-        autoPilotThroughput: autoscaleMaxThroughput,
-        autoPilotThroughputBaseline: autoscaleMaxThroughput
+        autoPilotThroughput: offerAutopilotSettings.maxThroughput,
+        autoPilotThroughputBaseline: offerAutopilotSettings.maxThroughput
       });
     }
   };
@@ -295,7 +305,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    return this.collection?.offer()?.offerReplacePending;
+    const offer = this.collection?.offer && this.collection.offer();
+    return (
+      offer &&
+      Object.keys(offer).find(value => value === "headers") &&
+      !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
+    );
   };
 
   public onSaveClick = async (): Promise<void> => {
@@ -433,33 +448,102 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
 
       if (this.state.isScaleSaveable) {
-        const updateOfferParams: DataModels.UpdateOfferParams = {
-          databaseId: this.collection.databaseId,
-          collectionId: this.collection.id(),
-          currentOffer: this.collection.offer(),
-          autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
-          manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput
-        };
-        if (this.hasProvisioningTypeChanged()) {
-          if (this.state.isAutoPilotSelected) {
-            updateOfferParams.migrateToAutoPilot = true;
-          } else {
-            updateOfferParams.migrateToManual = true;
-          }
+        const newThroughput = this.state.throughput;
+        const newOffer: DataModels.Offer = { ...this.collection.offer() };
+        const originalThroughputValue: number = this.state.throughput;
+
+        if (newOffer.content) {
+          newOffer.content.offerThroughput = newThroughput;
+        } else {
+          newOffer.content = {
+            offerThroughput: newThroughput,
+            offerIsRUPerMinuteThroughputEnabled: false
+          };
         }
-        const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-        this.collection.offer(updatedOffer);
-        this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+
+        const headerOptions: RequestOptions = { initialHeaders: {} };
+
         if (this.state.isAutoPilotSelected) {
-          this.setState({
-            autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
-            autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput
-          });
+          newOffer.content.offerAutopilotSettings = {
+            maxThroughput: this.state.autoPilotThroughput
+          };
+
+          // user has changed from provisioned --> autoscale
+          if (this.hasProvisioningTypeChanged()) {
+            headerOptions.initialHeaders[Constants.HttpHeaders.migrateOfferToAutopilot] = "true";
+            delete newOffer.content.offerAutopilotSettings;
+          } else {
+            delete newOffer.content.offerThroughput;
+          }
         } else {
           this.setState({
-            throughput: updatedOffer.manualThroughput,
-            throughputBaseline: updatedOffer.manualThroughput
+            isAutoPilotSelected: false
           });
+
+          // user has changed from autoscale --> provisioned
+          if (this.hasProvisioningTypeChanged()) {
+            headerOptions.initialHeaders[Constants.HttpHeaders.migrateOfferToManualThroughput] = "true";
+          } else {
+            delete newOffer.content.offerAutopilotSettings;
+          }
+        }
+
+        if (
+          getMaxRUs(this.collection, this.container) <=
+            SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
+          newThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
+          this.container
+        ) {
+          const requestPayload = {
+            subscriptionId: userContext.subscriptionId,
+            databaseAccountName: userContext.databaseAccount.name,
+            resourceGroup: userContext.resourceGroup,
+            databaseName: this.collection.databaseId,
+            collectionName: this.collection.id(),
+            throughput: newThroughput,
+            offerIsRUPerMinuteThroughputEnabled: false
+          };
+
+          await updateOfferThroughputBeyondLimit(requestPayload);
+          this.collection.offer().content.offerThroughput = originalThroughputValue;
+          this.setState({
+            isScaleSaveable: false,
+            isScaleDiscardable: false,
+            throughput: originalThroughputValue,
+            throughputBaseline: originalThroughputValue,
+            initialNotification: {
+              description: `Throughput update for ${newThroughput} ${throughputUnit}`
+            } as DataModels.Notification
+          });
+        } else {
+          const updateOfferParams: DataModels.UpdateOfferParams = {
+            databaseId: this.collection.databaseId,
+            collectionId: this.collection.id(),
+            currentOffer: this.collection.offer(),
+            autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+            manualThroughput: this.state.isAutoPilotSelected ? undefined : newThroughput
+          };
+          if (this.hasProvisioningTypeChanged()) {
+            if (this.state.isAutoPilotSelected) {
+              updateOfferParams.migrateToAutoPilot = true;
+            } else {
+              updateOfferParams.migrateToManual = true;
+            }
+          }
+          const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+          this.collection.offer(updatedOffer);
+          this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+          if (this.state.isAutoPilotSelected) {
+            this.setState({
+              autoPilotThroughput: updatedOffer.content.offerAutopilotSettings.maxThroughput,
+              autoPilotThroughputBaseline: updatedOffer.content.offerAutopilotSettings.maxThroughput
+            });
+          } else {
+            this.setState({
+              throughput: updatedOffer.content.offerThroughput,
+              throughputBaseline: updatedOffer.content.offerThroughput
+            });
+          }
         }
       }
       this.container.isRefreshingExplorer(false);
@@ -684,7 +768,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;
       }
     }
@@ -725,7 +809,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    const offerThroughput = this.collection.offer()?.manualThroughput;
+    const offerThroughput = this.collection?.offer && this.collection.offer()?.content?.offerThroughput;
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
@@ -916,18 +1000,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         tab: SettingsV2TabTypes.IndexingPolicyTab,
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />
       });
-    } else if (this.container.isPreferredApiMongoDB()) {
-      if (isEmpty(this.container.features())) {
-        tabs.push({
-          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexingPolicyAADError
-        });
-      } else if (this.container.isEnableMongoCapabilityPresent()) {
-        tabs.push({
-          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />
-        });
-      }
+    } else if (
+      this.container.isMongoIndexEditorEnabled() &&
+      this.container.isPreferredApiMongoDB() &&
+      this.container.isEnableMongoCapabilityPresent()
+    ) {
+      tabs.push({
+        tab: SettingsV2TabTypes.IndexingPolicyTab,
+        content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />
+      });
     }
 
     if (this.hasConflictResolution()) {

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

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

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -3,13 +3,14 @@ import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
 import { Urls, StyleConstants } from "../../../Common/Constants";
 import {
+  computeAutoscaleUsagePriceHourly,
   getPriceCurrency,
   getCurrencySign,
   getAutoscalePricePerRu,
   getMultimasterMultiplier,
   computeRUUsagePriceHourly,
   getPricePerRu,
-  estimatedCostDisclaimer
+  calculateEstimateNumber
 } from "../../../Utils/PricingUtils";
 import {
   ITextFieldStyles,
@@ -31,42 +32,11 @@ import {
   MessageBarType,
   Stack,
   Spinner,
-  SpinnerSize,
-  DetailsList,
-  IColumn,
-  SelectionMode,
-  DetailsListLayoutMode,
-  IDetailsRowProps,
-  DetailsRow,
-  IDetailsColumnStyles
+  SpinnerSize
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
-export interface EstimatedSpendingDisplayProps {
-  costType: JSX.Element;
-}
-
-export interface ManualEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
-  hourly: JSX.Element;
-  daily: JSX.Element;
-  monthly: JSX.Element;
-}
-
-export interface AutoscaleEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
-  minPerMonth: JSX.Element;
-  maxPerMonth: JSX.Element;
-}
-
-export interface PriceBreakdown {
-  hourlyPrice: number;
-  dailyPrice: number;
-  monthlyPrice: number;
-  pricePerRu: number;
-  currency: string;
-  currencySign: string;
-}
-
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -134,16 +104,6 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   }
 };
 
-export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
-  root: {
-    selectors: {
-      ":hover": {
-        background: "transparent"
-      }
-    }
-  }
-};
-
 export const customDetailsListStyles: Partial<IDetailsListStyles> = {
   root: {
     selectors: {
@@ -166,17 +126,10 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
   ]
 };
 
-export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: { marginTop: "5px", backgroundColor: "white" },
-  text: { fontSize: 14 }
-};
+export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop: "5px" } };
 
 export const throughputUnit = "RU/s";
 
-export function onRenderRow(props: IDetailsRowProps): JSX.Element {
-  return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
-}
-
 export const getAutoPilotV3SpendElement = (
   maxAutoPilotThroughputSet: number,
   isDatabaseThroughput: boolean,
@@ -212,61 +165,64 @@ export const getAutoPilotV3SpendElement = (
   );
 };
 
-export const getRuPriceBreakdown = (
+export const getEstimatedAutoscaleSpendElement = (
   throughput: number,
   serverId: string,
-  numberOfRegions: number,
-  isMultimaster: boolean,
-  isAutoscale: boolean
-): PriceBreakdown => {
-  const hourlyPrice: number = computeRUUsagePriceHourly({
-    serverId: serverId,
-    requestUnits: throughput,
-    numberOfRegions: numberOfRegions,
-    multimasterEnabled: isMultimaster,
-    isAutoscale: isAutoscale
-  });
-  const basePricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
-    : getPricePerRu(serverId);
-  return {
-    hourlyPrice: hourlyPrice,
-    dailyPrice: hourlyPrice * 24,
-    monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
-    currency: getPriceCurrency(serverId),
-    currencySign: getCurrencySign(serverId)
-  };
+  regions: number,
+  multimaster: boolean
+): JSX.Element => {
+  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
+  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
+  const currency: string = getPriceCurrency(serverId);
+  const currencySign: string = getCurrencySign(serverId);
+  const pricePerRu =
+    getAutoscalePricePerRu(serverId, getMultimasterMultiplier(regions, multimaster)) *
+    getMultimasterMultiplier(regions, multimaster);
+
+  return (
+    <Text id="autoscaleSpendElement">
+      Estimated monthly cost ({currency}) is{" "}
+      <b>
+        {currencySign}
+        {calculateEstimateNumber(monthlyPrice / 10)}
+        {` - `}
+        {currencySign}
+        {calculateEstimateNumber(monthlyPrice)}{" "}
+      </b>
+      ({"regions: "} {regions}, {throughput / 10} - {throughput} RU/s, {currencySign}
+      {pricePerRu}/RU)
+    </Text>
+  );
 };
 
-export const getEstimatedSpendingElement = (
-  estimatedSpendingColumns: IColumn[],
-  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
+export const getEstimatedSpendElement = (
   throughput: number,
-  numberOfRegions: number,
-  priceBreakdown: PriceBreakdown,
-  isAutoscale: boolean
+  serverId: string,
+  regions: number,
+  multimaster: boolean,
+  rupmEnabled: boolean
 ): JSX.Element => {
-  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
+  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, rupmEnabled, throughput, regions, multimaster);
+  const dailyPrice: number = hourlyPrice * 24;
+  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
+  const currency: string = getPriceCurrency(serverId);
+  const currencySign: string = getCurrencySign(serverId);
+  const pricePerRu = getPricePerRu(serverId) * getMultimasterMultiplier(regions, multimaster);
+
   return (
-    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
-      <DetailsList
-        disableSelectionZone
-        items={estimatedSpendingItems}
-        columns={estimatedSpendingColumns}
-        selectionMode={SelectionMode.none}
-        layoutMode={DetailsListLayoutMode.justified}
-        onRenderRow={onRenderRow}
-      />
-      <Text id="throughputSpendElement">
-        ({"regions: "} {numberOfRegions}, {ruRange}
-        {throughput} RU/s, {priceBreakdown.currencySign}
-        {priceBreakdown.pricePerRu}/RU)
-      </Text>
-      <Text>
-        <em>{estimatedCostDisclaimer}</em>
-      </Text>
-    </Stack>
+    <Text id="throughputSpendElement">
+      Estimated cost ({currency}):{" "}
+      <b>
+        {currencySign}
+        {calculateEstimateNumber(hourlyPrice)} hourly {` / `}
+        {currencySign}
+        {calculateEstimateNumber(dailyPrice)} daily {` / `}
+        {currencySign}
+        {calculateEstimateNumber(monthlyPrice)} monthly{" "}
+      </b>
+      ({"regions: "} {regions}, {throughput}RU/s, {currencySign}
+      {pricePerRu}/RU)
+    </Text>
   );
 };
 
@@ -310,13 +266,6 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
   </Text>
 );
 
-export const saveThroughputWarningMessage: JSX.Element = (
-  <Text styles={infoAndToolTipTextStyle}>
-    Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
-    before saving your changes
-  </Text>
-);
-
 const getCurrentThroughput = (
   isAutoscale: boolean,
   throughput: number,
@@ -370,13 +319,14 @@ export const getThroughputApplyShortDelayMessage = (
   throughput: number,
   throughputUnit: string,
   databaseName: string,
-  collectionName: string
+  collectionName: string,
+  targetThroughput: number
 ): JSX.Element => (
   <Text styles={infoAndToolTipTextStyle} id="throughputApplyShortDelayMessage">
     A request to increase the throughput is currently in progress. This operation will take some time to complete.
     <br />
     Database: {databaseName}, Container: {collectionName}{" "}
-    {getCurrentThroughput(isAutoscale, throughput, throughputUnit)}
+    {getCurrentThroughput(isAutoscale, throughput, throughputUnit, targetThroughput)}
   </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": 14,
+          "fontSize": 12,
         },
       }
     }

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

@@ -6,6 +6,8 @@ import {
   IconButton,
   Text,
   SelectionMode,
+  IDetailsRowProps,
+  DetailsRow,
   IColumn,
   MessageBar,
   MessageBarType,
@@ -19,11 +21,12 @@ import {
   mongoIndexingPolicyDisclaimer,
   mediumWidthStackStyles,
   subComponentStackProps,
+  transparentDetailsRowStyles,
   createAndAddMongoIndexStackProps,
   separatorStyles,
+  mongoIndexingPolicyAADError,
   indexingPolicynUnsavedWarningMessage,
-  infoAndToolTipTextStyle,
-  onRenderRow
+  infoAndToolTipTextStyle
 } from "../../SettingsRenderUtils";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
@@ -37,6 +40,7 @@ import {
 } from "../../SettingsUtils";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
 import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
+import { AuthType } from "../../../../../AuthType";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 
 export interface MongoIndexingPolicyComponentProps {
@@ -138,6 +142,10 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     return undefined;
   };
 
+  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
+    return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
+  };
+
   private getActionButton = (arrayPosition: number, isCurrentIndex: boolean): JSX.Element => {
     return isCurrentIndex ? (
       <IconButton
@@ -247,7 +255,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
                 items={initialIndexes}
                 columns={this.initialIndexesColumns}
                 selectionMode={SelectionMode.none}
-                onRenderRow={onRenderRow}
+                onRenderRow={this.onRenderRow}
                 layoutMode={DetailsListLayoutMode.justified}
               />
               {this.renderIndexesToBeAdded()}
@@ -273,7 +281,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
               items={indexesToBeDropped}
               columns={this.indexesToBeDroppedColumns}
               selectionMode={SelectionMode.none}
-              onRenderRow={onRenderRow}
+              onRenderRow={this.onRenderRow}
               layoutMode={DetailsListLayoutMode.justified}
             />
           )}
@@ -313,7 +321,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
         </Stack>
       );
     } else {
-      return <Spinner size={SpinnerSize.large} />;
+      return window.authType !== AuthType.AAD ? mongoIndexingPolicyAADError : <Spinner size={SpinnerSize.large} />;
     }
   }
 }

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

@@ -44,7 +44,7 @@ describe("ScaleComponent", () => {
     } as DataModels.Notification
   };
 
-  it("renders with correct initial notification", () => {
+  it("renders with correct intiial notification", () => {
     let wrapper = shallow(<ScaleComponent {...baseProps} />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
@@ -54,13 +54,16 @@ describe("ScaleComponent", () => {
 
     const newCollection = { ...collection };
     const maxThroughput = 5000;
+    const targetMaxThroughput = 50000;
     newCollection.offer = ko.observable({
-      manualThroughput: undefined,
-      autoscaleMaxThroughput: maxThroughput,
-      minimumThroughput: 400,
-      id: "offer",
-      offerReplacePending: true
-    });
+      content: {
+        offerAutopilotSettings: {
+          maxThroughput: maxThroughput,
+          targetMaxThroughput: targetMaxThroughput
+        }
+      },
+      headers: { "x-ms-offer-replace-pending": true }
+    } as DataModels.OfferWithHeaders);
     const newProps = {
       ...baseProps,
       initialNotification: undefined as DataModels.Notification,
@@ -70,6 +73,7 @@ describe("ScaleComponent", () => {
     expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
     expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
     expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(maxThroughput);
+    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(targetMaxThroughput);
   });
 
   it("autoScale disabled", () => {
@@ -105,6 +109,11 @@ describe("ScaleComponent", () => {
     expect(scaleComponent.isAutoScaleEnabled()).toEqual(true);
   });
 
+  it("getMaxRUThroughputInputLimit", () => {
+    const scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.getMaxRUThroughputInputLimit()).toEqual(40000);
+  });
+
   it("getThroughputTitle", () => {
     let scaleComponent = new ScaleComponent(baseProps);
     expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
@@ -129,8 +138,14 @@ describe("ScaleComponent", () => {
 
   it("getThroughputWarningMessage", () => {
     const throughputBeyondLimit = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million + 1000;
+    const throughputBeyondMaxRus = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million - 1000;
+
     const newProps = { ...baseProps, container: nonNationalCloudContainer, throughput: throughputBeyondLimit };
-    const scaleComponent = new ScaleComponent(newProps);
+    let scaleComponent = new ScaleComponent(newProps);
     expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputBeyondLimitWarningMessage");
+
+    newProps.throughput = throughputBeyondMaxRus;
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputDelayedApplyWarningMessage");
   });
 });

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

@@ -12,11 +12,12 @@ import {
   throughputUnit,
   getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
-  updateThroughputBeyondLimitWarningMessage
+  updateThroughputBeyondLimitWarningMessage,
+  updateThroughputDelayedApplyWarningMessage
 } from "../SettingsRenderUtils";
-import { hasDatabaseSharedThroughput } from "../SettingsUtils";
+import { getMaxRUs, getMinRUs, hasDatabaseSharedThroughput } from "../SettingsUtils";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
-import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
 import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
@@ -61,7 +62,11 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   private getStorageCapacityTitle = (): JSX.Element => {
-    const capacity: string = this.props.isFixedContainer ? "Fixed" : "Unlimited";
+    // Mongo container with system partition key still treat as "Fixed"
+    const isFixed =
+      !this.props.collection.partitionKey ||
+      (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey);
+    const capacity: string = isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
         <Label>Storage capacity</Label>
@@ -70,26 +75,12 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     );
   };
 
-  public getMaxRUs = (): number => {
-    if (this.props.container?.isTryCosmosDBSubscription()) {
-      return Constants.TryCosmosExperience.maxRU;
+  public getMaxRUThroughputInputLimit = (): number => {
+    if (configContext.platform === Platform.Hosted && this.props.collection.partitionKey) {
+      return SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
     }
 
-    if (this.props.isFixedContainer) {
-      return SharedConstants.CollectionCreation.MaxRUPerPartition;
-    }
-
-    return SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
-  };
-
-  public getMinRUs = (): number => {
-    if (this.props.container?.isTryCosmosDBSubscription()) {
-      return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
-    }
-
-    return (
-      this.props.collection.offer()?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400
-    );
+    return getMaxRUs(this.props.collection, this.props.container);
   };
 
   public getThroughputTitle = (): string => {
@@ -97,8 +88,11 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return AutoPilotUtils.getAutoPilotHeaderText();
     }
 
-    const minThroughput: string = this.getMinRUs().toLocaleString();
-    const maxThroughput: string = !this.props.isFixedContainer ? "unlimited" : this.getMaxRUs().toLocaleString();
+    const minThroughput: string = getMinRUs(this.props.collection, this.props.container).toLocaleString();
+    const maxThroughput: string =
+      this.canThroughputExceedMaximumValue() && !this.props.isFixedContainer
+        ? "unlimited"
+        : getMaxRUs(this.props.collection, this.props.container).toLocaleString();
     return `Throughput (${minThroughput} - ${maxThroughput} RU/s)`;
   };
 
@@ -115,15 +109,26 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return this.getLongDelayMessage();
     }
 
-    const offer = this.props.collection?.offer();
-    if (offer?.offerReplacePending) {
-      const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
+    const offer = this.props.collection?.offer && this.props.collection.offer();
+    if (
+      offer &&
+      Object.keys(offer).find(value => {
+        return value === "headers";
+      }) &&
+      !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
+    ) {
+      const throughput = offer?.content?.offerAutopilotSettings?.maxThroughput;
+
+      const targetThroughput =
+        offer.content?.offerAutopilotSettings?.targetMaxThroughput || offer?.content?.offerThroughput;
+
       return getThroughputApplyShortDelayMessage(
         this.props.isAutoPilotSelected,
         throughput,
         throughputUnit,
         this.props.collection.databaseId,
-        this.props.collection.id()
+        this.props.collection.id(),
+        targetThroughput
       );
     }
 
@@ -133,12 +138,21 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   public getThroughputWarningMessage = (): JSX.Element => {
     const throughputExceedsBackendLimits: boolean =
       this.canThroughputExceedMaximumValue() &&
+      getMaxRUs(this.props.collection, this.props.container) <=
+        SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
       this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
 
     if (throughputExceedsBackendLimits && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
       return updateThroughputBeyondLimitWarningMessage;
     }
 
+    const throughputExceedsMaxValue: boolean =
+      !this.isEmulator && this.props.throughput > getMaxRUs(this.props.collection, this.props.container);
+
+    if (throughputExceedsMaxValue && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
+      return updateThroughputDelayedApplyWarningMessage;
+    }
+
     return undefined;
   };
 
@@ -165,20 +179,17 @@ 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}
       onThroughputChange={this.props.onThroughputChange}
-      minimum={this.getMinRUs()}
-      maximum={this.getMaxRUs()}
+      minimum={getMinRUs(this.props.collection, this.props.container)}
+      maximum={this.getMaxRUThroughputInputLimit()}
       isEnabled={!hasDatabaseSharedThroughput(this.props.collection)}
       canExceedMaximumValue={this.canThroughputExceedMaximumValue()}
       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}
@@ -189,41 +200,13 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       onScaleSaveableChange={this.props.onScaleSaveableChange}
       onScaleDiscardableChange={this.props.onScaleDiscardableChange}
       getThroughputWarningMessage={this.getThroughputWarningMessage}
-      usageSizeInKB={this.props.collection.usageSizeInKB()}
+      usageSizeInKB={this.props.collection.quotaInfo().usageSizeInKB}
     />
   );
 
-  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,7 +13,16 @@ import {
 } from "../SettingsUtils";
 import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import { Label, Text, TextField, Stack, IChoiceGroupOption, ChoiceGroup, MessageBar } from "office-ui-fabric-react";
+import {
+  Label,
+  Text,
+  TextField,
+  Stack,
+  IChoiceGroupOption,
+  ChoiceGroup,
+  MessageBar,
+  MessageBarType
+} from "office-ui-fabric-react";
 import {
   getTextFieldStyles,
   changeFeedPolicyToolTip,
@@ -181,10 +190,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
       />
       {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
           {ttlWarning}
         </MessageBar>
       )}

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

@@ -9,8 +9,6 @@ import * as DataModels from "../../../../../Contracts/DataModels";
 describe("ThroughputInputAutoPilotV3Component", () => {
   const baseProps: ThroughputInputAutoPilotV3Props = {
     databaseAccount: {} as DataModels.DatabaseAccount,
-    databaseName: "test",
-    collectionName: "test",
     serverId: undefined,
     wasAutopilotOriginallySet: false,
     throughput: 100,
@@ -28,7 +26,6 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     spendAckVisible: false,
     showAsMandatory: true,
     isFixed: false,
-    isFreeTierAccount: false,
     label: "label",
     infoBubbleText: "infoBubbleText",
     canExceedMaximumValue: true,
@@ -57,6 +54,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     expect(wrapper.exists("#throughputInput")).toEqual(true);
     expect(wrapper.exists("#autopilotInput")).toEqual(false);
     expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
+    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(false);
   });
 
   it("autopilot input visible", () => {
@@ -74,7 +72,8 @@ describe("ThroughputInputAutoPilotV3Component", () => {
 
     wrapper.setProps({ wasAutopilotOriginallySet: true });
     wrapper.update();
-    expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
+    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(true);
+    expect(wrapper.exists("#throughputSpendElement")).toEqual(false);
   });
 
   it("spendAck checkbox visible", () => {

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

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

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

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

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ScaleComponent renders with correct initial notification 1`] = `
+exports[`ScaleComponent renders with correct intiial notification 1`] = `
 <Stack
   tokens={
     Object {
@@ -16,7 +16,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       styles={
         Object {
           "root": Object {
-            "fontSize": 14,
+            "fontSize": 12,
           },
         }
       }
@@ -40,8 +40,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
   >
     <ThroughputInputAutoPilotV3Component
       canExceedMaximumValue={true}
-      collectionName="test"
-      databaseName="test"
       getThroughputWarningMessage={[Function]}
       isAutoPilotSelected={false}
       isEmulator={false}
@@ -50,7 +48,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       label="Throughput (6,000 - unlimited RU/s)"
       maxAutoPilotThroughput={4000}
       maxAutoPilotThroughputBaseline={4000}
-      maximum={1000000}
+      maximum={40000}
       minimum={6000}
       onAutoPilotSelected={[Function]}
       onMaxAutoPilotThroughputChange={[Function]}
@@ -60,7 +58,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       spendAckChecked={false}
       throughput={1000}
       throughputBaseline={1000}
-      usageSizeInKB={100}
       wasAutopilotOriginallySet={true}
     />
     <Stack

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

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

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

@@ -1,5 +1,7 @@
-import { collection } from "./TestUtils";
+import { collection, container } from "./TestUtils";
 import {
+  getMaxRUs,
+  getMinRUs,
   getMongoIndexType,
   getMongoNotification,
   getSanitizedInputValue,
@@ -21,6 +23,16 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import ko from "knockout";
 
 describe("SettingsUtils", () => {
+  it("getMaxRUs", () => {
+    expect(collection.offer().content.collectionThroughputInfo.numPhysicalPartitions).toEqual(4);
+    expect(getMaxRUs(collection, container)).toEqual(40000);
+  });
+
+  it("getMinRUs", () => {
+    expect(collection.offer().content.collectionThroughputInfo.numPhysicalPartitions).toEqual(4);
+    expect(getMinRUs(collection, container)).toEqual(6000);
+  });
+
   it("hasDatabaseSharedThroughput", () => {
     expect(hasDatabaseSharedThroughput(collection)).toEqual(undefined);
 

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -1,6 +1,10 @@
 import * as ViewModels from "../../../Contracts/ViewModels";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as Constants from "../../../Common/Constants";
+import * as SharedConstants from "../../../Shared/Constants";
+import * as PricingUtils from "../../../Utils/PricingUtils";
+
+import Explorer from "../../Explorer";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 
 const zeroValue = 0;
@@ -67,6 +71,57 @@ export const hasDatabaseSharedThroughput = (collection: ViewModels.Collection):
   return database?.isDatabaseShared() && !collection.offer();
 };
 
+export const getMaxRUs = (collection: ViewModels.Collection, container: Explorer): number => {
+  const isTryCosmosDBSubscription = container?.isTryCosmosDBSubscription() || false;
+  if (isTryCosmosDBSubscription) {
+    return Constants.TryCosmosExperience.maxRU;
+  }
+
+  const numPartitionsFromOffer: number =
+    collection?.offer && collection.offer()?.content?.collectionThroughputInfo?.numPhysicalPartitions;
+
+  const numPartitionsFromQuotaInfo: number = collection?.quotaInfo()?.numPartitions;
+
+  const numPartitions = numPartitionsFromOffer ?? numPartitionsFromQuotaInfo ?? 1;
+
+  return SharedConstants.CollectionCreation.MaxRUPerPartition * numPartitions;
+};
+
+export const getMinRUs = (collection: ViewModels.Collection, container: Explorer): number => {
+  const isTryCosmosDBSubscription = container?.isTryCosmosDBSubscription();
+  if (isTryCosmosDBSubscription) {
+    return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
+  }
+
+  const offerContent = collection?.offer && collection.offer()?.content;
+
+  if (offerContent?.offerAutopilotSettings) {
+    return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
+  }
+
+  const collectionThroughputInfo: DataModels.OfferThroughputInfo = offerContent?.collectionThroughputInfo;
+
+  if (collectionThroughputInfo?.minimumRUForCollection > 0) {
+    return collectionThroughputInfo.minimumRUForCollection;
+  }
+
+  const numPartitions = collectionThroughputInfo?.numPhysicalPartitions ?? collection.quotaInfo()?.numPartitions;
+
+  if (!numPartitions || numPartitions === 1) {
+    return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
+  }
+
+  const baseRU = SharedConstants.CollectionCreation.DefaultCollectionRUs400;
+
+  const quotaInKb = collection.quotaInfo().collectionSize;
+  const quotaInGb = PricingUtils.usageInGB(quotaInKb);
+
+  const perPartitionGBQuota: number = Math.max(10, quotaInGb / numPartitions);
+  const baseRUbyPartitions: number = ((numPartitions * perPartitionGBQuota) / 10) * 100;
+
+  return Math.max(baseRU, baseRUbyPartitions);
+};
+
 export const parseConflictResolutionMode = (modeFromBackend: string): DataModels.ConflictResolutionMode => {
   // Backend can contain different casing as it does case-insensitive comparisson
   if (!modeFromBackend) {
@@ -101,13 +156,13 @@ export const parseConflictResolutionProcedure = (procedureFromBackEnd: string):
   return procedureFromBackEnd;
 };
 
-export const getSanitizedInputValue = (newValueString: string, max?: number): number => {
+export const getSanitizedInputValue = (newValueString: string, max: number): number => {
   const newValue = parseInt(newValueString);
   if (isNaN(newValue)) {
     return zeroValue;
   }
   // make sure new value does not exceed the maximum throughput
-  return max ? Math.min(newValue, max) : newValue;
+  return Math.min(newValue, max);
 };
 
 export const isDirty = (current: isDirtyTypes, baseline: isDirtyTypes): boolean => {

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -18,14 +18,17 @@ export const collection = ({
     excludedPaths: []
   }),
   uniqueKeyPolicy: {} as DataModels.UniqueKeyPolicy,
-  usageSizeInKB: ko.observable(100),
+  quotaInfo: ko.observable<DataModels.CollectionQuotaInfo>({} as DataModels.CollectionQuotaInfo),
   offer: ko.observable<DataModels.Offer>({
-    autoscaleMaxThroughput: undefined,
-    manualThroughput: 10000,
-    minimumThroughput: 6000,
-    id: "offer",
-    offerReplacePending: false
-  }),
+    content: {
+      offerThroughput: 10000,
+      offerIsRUPerMinuteThroughputEnabled: false,
+      collectionThroughputInfo: {
+        minimumRUForCollection: 6000,
+        numPhysicalPartitions: 4
+      } as DataModels.OfferThroughputInfo
+    }
+  } as DataModels.Offer),
   conflictResolutionPolicy: ko.observable<DataModels.ConflictResolutionPolicy>(
     {} as DataModels.ConflictResolutionPolicy
   ),

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

@@ -55,7 +55,6 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -105,7 +104,6 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -135,6 +133,8 @@ exports[`SettingsComponent renders 1`] = `
                     "partitionKeyVisible": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
+                    "rupm": [Function],
+                    "rupmVisible": [Function],
                     "sharedAutoPilotThroughput": [Function],
                     "sharedThroughputRangeText": [Function],
                     "shouldCreateMongoWildcardIndex": [Function],
@@ -593,7 +593,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -623,6 +622,8 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
+                  "rupm": [Function],
+                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -668,7 +669,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -735,6 +735,7 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
+                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -946,7 +947,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isAutoscaleDefaultEnabled": [Function],
+                "isCodeOfConductEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -955,7 +956,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
-                "isMongoIndexingEnabled": [Function],
+                "isMongoIndexEditorEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
                 "isNotificationConsoleExpanded": [Function],
@@ -972,6 +973,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
                 "isServerlessEnabled": [Function],
+                "isSettingsV2Enabled": [Function],
                 "isSparkEnabled": [Function],
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
@@ -1028,6 +1030,7 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
+                "parentFrameDataExplorerVersion": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1053,6 +1056,7 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
+                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -1120,14 +1124,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
-                "selfServeComponentAdapter": SelfServeComponentAdapter {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                  "parameters": [Function],
-                },
-                "selfServeType": [Function],
                 "serverId": [Function],
                 "settingsPane": SettingsPane {
                   "container": [Circular],
@@ -1189,9 +1185,11 @@ exports[`SettingsComponent renders 1`] = `
                   },
                   "direction": "vertical",
                   "isCollapsed": [Function],
+                  "leftSide": null,
                   "leftSideId": "resourcetree",
                   "onResizeStart": [Function],
                   "onResizeStop": [Function],
+                  "splitter": null,
                   "splitterId": "h_splitter1",
                 },
                 "stringInputPane": StringInputPane {
@@ -1304,9 +1302,9 @@ exports[`SettingsComponent renders 1`] = `
                 "version": 2,
               },
               "partitionKeyProperty": "partitionKey",
+              "quotaInfo": [Function],
               "readSettings": [Function],
               "uniqueKeyPolicy": Object {},
-              "usageSizeInKB": [Function],
             }
           }
           container={
@@ -1338,7 +1336,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -1388,7 +1385,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -1418,6 +1414,8 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
+                  "rupm": [Function],
+                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -1876,7 +1874,6 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -1906,6 +1903,8 @@ exports[`SettingsComponent renders 1`] = `
                 "partitionKeyVisible": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
+                "rupm": [Function],
+                "rupmVisible": [Function],
                 "sharedAutoPilotThroughput": [Function],
                 "sharedThroughputRangeText": [Function],
                 "shouldCreateMongoWildcardIndex": [Function],
@@ -1951,7 +1950,6 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -2018,6 +2016,7 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
+              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -2229,7 +2228,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isAutoscaleDefaultEnabled": [Function],
+              "isCodeOfConductEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -2238,7 +2237,7 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
-              "isMongoIndexingEnabled": [Function],
+              "isMongoIndexEditorEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
               "isNotificationConsoleExpanded": [Function],
@@ -2255,6 +2254,7 @@ exports[`SettingsComponent renders 1`] = `
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
               "isServerlessEnabled": [Function],
+              "isSettingsV2Enabled": [Function],
               "isSparkEnabled": [Function],
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
@@ -2311,6 +2311,7 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
+              "parentFrameDataExplorerVersion": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2336,6 +2337,7 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
+              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -2403,14 +2405,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
-              "selfServeComponentAdapter": SelfServeComponentAdapter {
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                "parameters": [Function],
-              },
-              "selfServeType": [Function],
               "serverId": [Function],
               "settingsPane": SettingsPane {
                 "container": [Circular],
@@ -2472,9 +2466,11 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "direction": "vertical",
                 "isCollapsed": [Function],
+                "leftSide": null,
                 "leftSideId": "resourcetree",
                 "onResizeStart": [Function],
                 "onResizeStop": [Function],
+                "splitter": null,
                 "splitterId": "h_splitter1",
               },
               "stringInputPane": StringInputPane {
@@ -2634,7 +2630,6 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -2684,7 +2679,6 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
-                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -2714,6 +2708,8 @@ exports[`SettingsComponent renders 1`] = `
                     "partitionKeyVisible": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
+                    "rupm": [Function],
+                    "rupmVisible": [Function],
                     "sharedAutoPilotThroughput": [Function],
                     "sharedThroughputRangeText": [Function],
                     "shouldCreateMongoWildcardIndex": [Function],
@@ -3172,7 +3168,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -3202,6 +3197,8 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
+                  "rupm": [Function],
+                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -3247,7 +3244,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3314,6 +3310,7 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
+                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -3525,7 +3522,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isAutoscaleDefaultEnabled": [Function],
+                "isCodeOfConductEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -3534,7 +3531,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
-                "isMongoIndexingEnabled": [Function],
+                "isMongoIndexEditorEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
                 "isNotificationConsoleExpanded": [Function],
@@ -3551,6 +3548,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
                 "isServerlessEnabled": [Function],
+                "isSettingsV2Enabled": [Function],
                 "isSparkEnabled": [Function],
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
@@ -3607,6 +3605,7 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
+                "parentFrameDataExplorerVersion": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3632,6 +3631,7 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
+                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -3699,14 +3699,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
-                "selfServeComponentAdapter": SelfServeComponentAdapter {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                  "parameters": [Function],
-                },
-                "selfServeType": [Function],
                 "serverId": [Function],
                 "settingsPane": SettingsPane {
                   "container": [Circular],
@@ -3768,9 +3760,11 @@ exports[`SettingsComponent renders 1`] = `
                   },
                   "direction": "vertical",
                   "isCollapsed": [Function],
+                  "leftSide": null,
                   "leftSideId": "resourcetree",
                   "onResizeStart": [Function],
                   "onResizeStop": [Function],
+                  "splitter": null,
                   "splitterId": "h_splitter1",
                 },
                 "stringInputPane": StringInputPane {
@@ -3883,9 +3877,9 @@ exports[`SettingsComponent renders 1`] = `
                 "version": 2,
               },
               "partitionKeyProperty": "partitionKey",
+              "quotaInfo": [Function],
               "readSettings": [Function],
               "uniqueKeyPolicy": Object {},
-              "usageSizeInKB": [Function],
             }
           }
           container={
@@ -3917,7 +3911,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3967,7 +3960,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -3997,6 +3989,8 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
+                  "rupm": [Function],
+                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -4455,7 +4449,6 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -4485,6 +4478,8 @@ exports[`SettingsComponent renders 1`] = `
                 "partitionKeyVisible": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
+                "rupm": [Function],
+                "rupmVisible": [Function],
                 "sharedAutoPilotThroughput": [Function],
                 "sharedThroughputRangeText": [Function],
                 "shouldCreateMongoWildcardIndex": [Function],
@@ -4530,7 +4525,6 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
-                "freeTierExceedThroughputTooltip": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -4597,6 +4591,7 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
+              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -4808,7 +4803,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isAutoscaleDefaultEnabled": [Function],
+              "isCodeOfConductEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -4817,7 +4812,7 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
-              "isMongoIndexingEnabled": [Function],
+              "isMongoIndexEditorEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
               "isNotificationConsoleExpanded": [Function],
@@ -4834,6 +4829,7 @@ exports[`SettingsComponent renders 1`] = `
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
               "isServerlessEnabled": [Function],
+              "isSettingsV2Enabled": [Function],
               "isSparkEnabled": [Function],
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
@@ -4890,6 +4886,7 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
+              "parentFrameDataExplorerVersion": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4915,6 +4912,7 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
+              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -4982,14 +4980,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
-              "selfServeComponentAdapter": SelfServeComponentAdapter {
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
-                "parameters": [Function],
-              },
-              "selfServeType": [Function],
               "serverId": [Function],
               "settingsPane": SettingsPane {
                 "container": [Circular],
@@ -5051,9 +5041,11 @@ 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,106 +60,72 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     .
   </Text>
-  <Stack
-    styles={
-      Object {
-        "root": Object {
-          "width": 600,
-        },
-      }
-    }
-    tokens={
-      Object {
-        "childrenGap": 10,
-      }
-    }
+  <Text
+    id="throughputSpendElement"
   >
-    <StyledWithViewportComponent
-      columns={
-        Array [
-          Object {
-            "fieldName": "costType",
-            "isResizable": true,
-            "key": "costType",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "",
-          },
-          Object {
-            "fieldName": "hourly",
-            "isResizable": true,
-            "key": "hourly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Hourly",
-          },
-          Object {
-            "fieldName": "daily",
-            "isResizable": true,
-            "key": "daily",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Daily",
-          },
-          Object {
-            "fieldName": "monthly",
-            "isResizable": true,
-            "key": "monthly",
-            "maxWidth": 200,
-            "minWidth": 100,
-            "name": "Monthly",
-          },
-        ]
-      }
-      disableSelectionZone={true}
-      items={
-        Array [
-          Object {
-            "costType": <Text>
-              Current Cost
-            </Text>,
-            "daily": <Text>
-              $ 24.48
-            </Text>,
-            "hourly": <Text>
-              $ 1.02
-            </Text>,
-            "monthly": <Text>
-              $ 744.6
-            </Text>,
-          },
-        ]
-      }
-      layoutMode={1}
-      onRenderRow={[Function]}
-      selectionMode={0}
-    />
-    <Text
-      id="throughputSpendElement"
-    >
-      (
-      regions: 
-       
-      2
-      , 
-      1000
-       RU/s, 
+    Estimated cost (
+    RMB
+    ):
+     
+    <b>
       ¥
-      0.00051
-      /RU)
-    </Text>
-    <Text>
-      <em>
-        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
-      </em>
-    </Text>
-  </Stack>
+      1.29
+       hourly 
+       / 
+      ¥
+      31.06
+       daily 
+       / 
+      ¥
+      944.60
+       monthly
+       
+    </b>
+    (
+    regions: 
+     
+    2
+    , 
+    1000
+    RU/s, 
+    ¥
+    0.00051
+    /RU)
+  </Text>
+  <Text
+    id="autoscaleSpendElement"
+  >
+    Estimated monthly cost (
+    RMB
+    ) is
+     
+    <b>
+      ¥
+      111.69
+       - 
+      ¥
+      1116.90
+       
+    </b>
+    (
+    regions: 
+     
+    2
+    , 
+    100
+     - 
+    1000
+     RU/s, 
+    ¥
+    0.000765
+    /RU)
+  </Text>
   <Text
     id="manualToAutoscaleDisclaimerElement"
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -176,7 +142,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -195,7 +161,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -207,7 +173,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -219,7 +185,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -230,7 +196,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -249,7 +215,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -261,14 +227,14 @@ exports[`SettingsUtils functions render 1`] = `
     , Container: 
     sampleCollection
      
-    , Current manual throughput: 1000 RU/s
+    , Current manual throughput: 1000 RU/s, Target manual throughput: 2000
   </Text>
   <Text
     id="throughputApplyLongDelayMessage"
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -286,7 +252,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -299,7 +265,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -310,7 +276,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -329,7 +295,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -371,7 +337,7 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
-            "fontSize": 14,
+            "fontSize": 12,
           },
         }
       }
@@ -386,7 +352,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }
@@ -402,7 +368,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 14,
+          "fontSize": 12,
         },
       }
     }

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, SmartUiDescriptor, UiType } from "./SmartUiComponent";
+import { SmartUiComponent, Descriptor, InputType } from "./SmartUiComponent";
 
 describe("SmartUiComponent", () => {
-  const exampleData: SmartUiDescriptor = {
+  const exampleData: Descriptor = {
     root: {
       id: "root",
       info: {
@@ -24,7 +24,7 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: UiType.Spinner
+            inputType: "spin"
           }
         },
         {
@@ -37,21 +37,7 @@ describe("SmartUiComponent", () => {
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: UiType.Slider
-          }
-        },
-        {
-          id: "throughput3",
-          input: {
-            label: "Throughput (invalid)",
-            dataFieldName: "throughput3",
-            type: "boolean",
-            min: 400,
-            max: 500,
-            step: 10,
-            defaultValue: 400,
-            uiType: UiType.Spinner,
-            errorMessage: "label, truelabel and falselabel are required for boolean input 'throughput3'"
+            inputType: "slider"
           }
         },
         {
@@ -78,11 +64,11 @@ describe("SmartUiComponent", () => {
           input: {
             label: "Database",
             dataFieldName: "database",
-            type: "object",
+            type: "enum",
             choices: [
-              { label: "Database 1", key: "db1" },
-              { label: "Database 2", key: "db2" },
-              { label: "Database 3", key: "db3" }
+              { label: "Database 1", key: "db1", value: "database1" },
+              { label: "Database 2", key: "db2", value: "database2" },
+              { label: "Database 3", key: "db3", value: "database3" }
             ],
             defaultKey: "db2"
           }
@@ -91,11 +77,12 @@ describe("SmartUiComponent", () => {
     }
   };
 
-  it("should render", async () => {
-    const wrapper = shallow(
-      <SmartUiComponent descriptor={exampleData} currentValues={new Map()} onInputChange={undefined} />
-    );
-    await new Promise(resolve => setTimeout(resolve, 0));
+  const exampleCallbacks = (newValues: Map<string, InputType>): void => {
+    console.log("New values:", newValues);
+  };
+
+  it("should render", () => {
+    const wrapper = shallow(<SmartUiComponent descriptor={exampleData} onChange={exampleCallbacks} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -5,9 +5,11 @@ import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
 import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { Text } from "office-ui-fabric-react/lib/Text";
+import { InputType } from "../../Tables/Constants";
 import { RadioSwitchComponent } from "../RadioSwitchComponent/RadioSwitchComponent";
 import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
 import { Link, MessageBar, MessageBarType } from "office-ui-fabric-react";
+
 import * as InputUtils from "./InputUtils";
 import "./SmartUiComponent.less";
 
@@ -19,16 +21,45 @@ import "./SmartUiComponent.less";
  * - a descriptor of the UX.
  */
 
-export type InputTypeValue = "number" | "string" | "boolean" | "object";
+export type InputTypeValue = "number" | "string" | "boolean" | "enum";
 
-export enum UiType {
-  Spinner = "Spinner",
-  Slider = "Slider"
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export type EnumItem = { label: string; key: string; value: any };
+
+export type InputType = number | string | boolean | EnumItem;
+
+interface BaseInput {
+  label: string;
+  dataFieldName: string;
+  type: InputTypeValue;
+  placeholder?: string;
 }
 
-export type ChoiceItem = { label: string; key: string };
+/**
+ * For now, this only supports integers
+ */
+export interface NumberInput extends BaseInput {
+  min?: number;
+  max?: number;
+  step: number;
+  defaultValue: number;
+  inputType: "spin" | "slider";
+}
 
-export type InputType = number | string | boolean | ChoiceItem;
+export interface BooleanInput extends BaseInput {
+  trueLabel: string;
+  falseLabel: string;
+  defaultValue: boolean;
+}
+
+export interface StringInput extends BaseInput {
+  defaultValue?: string;
+}
+
+export interface EnumInput extends BaseInput {
+  choices: EnumItem[];
+  defaultKey: string;
+}
 
 export interface Info {
   message: string;
@@ -38,62 +69,28 @@ export interface Info {
   };
 }
 
-interface BaseInput {
-  label: string;
-  dataFieldName: string;
-  type: InputTypeValue;
-  placeholder?: string;
-  errorMessage?: string;
-}
+export type AnyInput = NumberInput | BooleanInput | StringInput | EnumInput;
 
-/**
- * For now, this only supports integers
- */
-interface NumberInput extends BaseInput {
-  min: number;
-  max: number;
-  step: number;
-  defaultValue?: number;
-  uiType: UiType;
-}
-
-interface BooleanInput extends BaseInput {
-  trueLabel: string;
-  falseLabel: string;
-  defaultValue?: boolean;
-}
-
-interface StringInput extends BaseInput {
-  defaultValue?: string;
-}
-
-interface ChoiceInput extends BaseInput {
-  choices: ChoiceItem[];
-  defaultKey?: string;
-}
-
-type AnyInput = NumberInput | BooleanInput | StringInput | ChoiceInput;
-
-interface Node {
+export interface Node {
   id: string;
   info?: Info;
   input?: AnyInput;
   children?: Node[];
 }
 
-export interface SmartUiDescriptor {
+export interface Descriptor {
   root: Node;
 }
 
 /************************** Component implementation starts here ************************************* */
 
 export interface SmartUiComponentProps {
-  descriptor: SmartUiDescriptor;
-  currentValues: Map<string, InputType>;
-  onInputChange: (input: AnyInput, newValue: InputType) => void;
+  descriptor: Descriptor;
+  onChange: (newValues: Map<string, InputType>) => void;
 }
 
 interface SmartUiComponentState {
+  currentValues: Map<string, InputType>;
   errors: Map<string, string>;
 }
 
@@ -107,6 +104,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   constructor(props: SmartUiComponentProps) {
     super(props);
     this.state = {
+      currentValues: new Map(),
       errors: new Map()
     };
   }
@@ -115,37 +113,42 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return (
       <MessageBar>
         {info.message}
-        {info.link && (
-          <Link href={info.link.href} target="_blank">
-            {info.link.text}
-          </Link>
-        )}
+        <Link href={info.link.href} target="_blank">
+          {info.link.text}
+        </Link>
       </MessageBar>
     );
   }
 
-  private renderTextInput(input: StringInput): JSX.Element {
-    const value = this.props.currentValues.get(input.dataFieldName) as string;
+  private onInputChange = (newValue: string | number | boolean, dataFieldName: string) => {
+    const { currentValues } = this.state;
+    currentValues.set(dataFieldName, newValue);
+    this.setState({ currentValues }, () => this.props.onChange(this.state.currentValues));
+  };
+
+  private renderStringInput(input: StringInput): JSX.Element {
     return (
       <div className="stringInputContainer">
-        <TextField
-          id={`${input.dataFieldName}-textBox-input`}
-          label={input.label}
-          type="text"
-          value={value}
-          placeholder={input.placeholder}
-          onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
-          styles={{
-            subComponentStyles: {
-              label: {
-                root: {
-                  ...SmartUiComponent.labelStyle,
-                  fontWeight: 600
+        <div>
+          <TextField
+            id={`${input.dataFieldName}-input`}
+            label={input.label}
+            type="text"
+            value={input.defaultValue}
+            placeholder={input.placeholder}
+            onChange={(_, newValue) => this.onInputChange(newValue, input.dataFieldName)}
+            styles={{
+              subComponentStyles: {
+                label: {
+                  root: {
+                    ...SmartUiComponent.labelStyle,
+                    fontWeight: 600
+                  }
                 }
               }
-            }
-          }}
-        />
+            }}
+          />
+        </div>
       </div>
     );
   }
@@ -156,11 +159,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     this.setState({ errors });
   }
 
-  private onValidate = (input: AnyInput, value: string, min: number, max: number): string => {
+  private onValidate = (value: string, min: number, max: number, dataFieldName: string): string => {
     const newValue = InputUtils.onValidateValueChange(value, min, max);
-    const dataFieldName = input.dataFieldName;
     if (newValue) {
-      this.props.onInputChange(input, newValue);
+      this.onInputChange(newValue, dataFieldName);
       this.clearError(dataFieldName);
       return newValue.toString();
     } else {
@@ -171,22 +173,20 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return undefined;
   };
 
-  private onIncrement = (input: AnyInput, value: string, step: number, max: number): string => {
+  private onIncrement = (value: string, step: number, max: number, dataFieldName: string): string => {
     const newValue = InputUtils.onIncrementValue(value, step, max);
-    const dataFieldName = input.dataFieldName;
     if (newValue) {
-      this.props.onInputChange(input, newValue);
+      this.onInputChange(newValue, dataFieldName);
       this.clearError(dataFieldName);
       return newValue.toString();
     }
     return undefined;
   };
 
-  private onDecrement = (input: AnyInput, value: string, step: number, min: number): string => {
+  private onDecrement = (value: string, step: number, min: number, dataFieldName: string): string => {
     const newValue = InputUtils.onDecrementValue(value, step, min);
-    const dataFieldName = input.dataFieldName;
     if (newValue) {
-      this.props.onInputChange(input, newValue);
+      this.onInputChange(newValue, dataFieldName);
       this.clearError(dataFieldName);
       return newValue.toString();
     }
@@ -194,26 +194,18 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   };
 
   private renderNumberInput(input: NumberInput): JSX.Element {
-    const { label, min, max, dataFieldName, step } = input;
-    const props = {
-      label: label,
-      min: min,
-      max: max,
-      ariaLabel: label,
-      step: step
-    };
+    const { label, min, max, defaultValue, dataFieldName, step } = input;
+    const props = { label, min, max, ariaLabel: label, step };
 
-    const value = this.props.currentValues.get(dataFieldName) as number;
-    if (input.uiType === UiType.Spinner) {
+    if (input.inputType === "spin") {
       return (
-        <>
+        <div>
           <SpinButton
             {...props}
-            id={`${input.dataFieldName}-spinner-input`}
-            value={value?.toString()}
-            onValidate={newValue => this.onValidate(input, newValue, props.min, props.max)}
-            onIncrement={newValue => this.onIncrement(input, newValue, props.step, props.max)}
-            onDecrement={newValue => this.onDecrement(input, newValue, props.step, props.min)}
+            defaultValue={defaultValue.toString()}
+            onValidate={newValue => this.onValidate(newValue, min, max, dataFieldName)}
+            onIncrement={newValue => this.onIncrement(newValue, step, max, dataFieldName)}
+            onDecrement={newValue => this.onDecrement(newValue, step, min, dataFieldName)}
             labelPosition={Position.top}
             styles={{
               label: {
@@ -225,35 +217,34 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           {this.state.errors.has(dataFieldName) && (
             <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
           )}
-        </>
-      );
-    } else if (input.uiType === UiType.Slider) {
-      return (
-        <div id={`${input.dataFieldName}-slider-input`}>
-          <Slider
-            {...props}
-            value={value}
-            onChange={newValue => this.props.onInputChange(input, newValue)}
-            styles={{
-              titleLabel: {
-                ...SmartUiComponent.labelStyle,
-                fontWeight: 600
-              },
-              valueLabel: SmartUiComponent.labelStyle
-            }}
-          />
         </div>
       );
+    } else if (input.inputType === "slider") {
+      return (
+        <Slider
+          // showValue={true}
+          // valueFormat={}
+          {...props}
+          defaultValue={defaultValue}
+          onChange={newValue => this.onInputChange(newValue, dataFieldName)}
+          styles={{
+            titleLabel: {
+              ...SmartUiComponent.labelStyle,
+              fontWeight: 600
+            },
+            valueLabel: SmartUiComponent.labelStyle
+          }}
+        />
+      );
     } else {
-      return <>Unsupported number UI type {input.uiType}</>;
+      return <>Unsupported number input type {input.inputType}</>;
     }
   }
 
   private renderBooleanInput(input: BooleanInput): JSX.Element {
-    const value = this.props.currentValues.get(input.dataFieldName) as boolean;
-    const selectedKey = value || input.defaultValue ? "true" : "false";
+    const { dataFieldName } = input;
     return (
-      <div id={`${input.dataFieldName}-radioSwitch-input`}>
+      <div>
         <div className="inputLabelContainer">
           <Text variant="small" nowrap className="inputLabel">
             {input.label}
@@ -264,33 +255,41 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             {
               label: input.falseLabel,
               key: "false",
-              onSelect: () => this.props.onInputChange(input, false)
+              onSelect: () => this.onInputChange(false, dataFieldName)
             },
             {
               label: input.trueLabel,
               key: "true",
-              onSelect: () => this.props.onInputChange(input, true)
+              onSelect: () => this.onInputChange(true, dataFieldName)
             }
           ]}
-          selectedKey={selectedKey}
+          selectedKey={
+            (this.state.currentValues.has(dataFieldName)
+            ? (this.state.currentValues.get(dataFieldName) as boolean)
+            : input.defaultValue)
+              ? "true"
+              : "false"
+          }
         />
       </div>
     );
   }
 
-  private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
-    const value = this.props.currentValues.get(dataFieldName) as string;
+  private renderEnumInput(input: EnumInput): JSX.Element {
+    const { label, defaultKey, dataFieldName, choices, placeholder } = input;
     return (
       <Dropdown
-        id={`${input.dataFieldName}-dropown-input`}
         label={label}
-        selectedKey={value ? value : defaultKey}
-        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
+        selectedKey={
+          this.state.currentValues.has(dataFieldName)
+            ? (this.state.currentValues.get(dataFieldName) as string)
+            : defaultKey
+        }
+        onChange={(_, item: IDropdownOption) => this.onInputChange(item.key.toString(), dataFieldName)}
         placeholder={placeholder}
         options={choices.map(c => ({
           key: c.key,
-          text: c.label
+          text: c.value
         }))}
         styles={{
           label: {
@@ -303,48 +302,34 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     );
   }
 
-  private renderError(input: AnyInput): JSX.Element {
-    return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
-  }
-
   private renderInput(input: AnyInput): JSX.Element {
-    if (input.errorMessage) {
-      return this.renderError(input);
-    }
     switch (input.type) {
       case "string":
-        return this.renderTextInput(input as StringInput);
+        return this.renderStringInput(input as StringInput);
       case "number":
         return this.renderNumberInput(input as NumberInput);
       case "boolean":
         return this.renderBooleanInput(input as BooleanInput);
-      case "object":
-        return this.renderChoiceInput(input as ChoiceInput);
+      case "enum":
+        return this.renderEnumInput(input as EnumInput);
       default:
         throw new Error(`Unknown input type: ${input.type}`);
     }
   }
 
   private renderNode(node: Node): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 15 };
+    const containerStackTokens: IStackTokens = { childrenGap: 10 };
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>
-          {node.info && this.renderInfo(node.info as Info)}
-          {node.input && this.renderInput(node.input)}
-        </Stack.Item>
+        {node.info && this.renderInfo(node.info)}
+        {node.input && this.renderInput(node.input)}
         {node.children && node.children.map(child => <div key={child.id}>{this.renderNode(child)}</div>)}
       </Stack>
     );
   }
 
   render(): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 20 };
-    return (
-      <Stack tokens={containerStackTokens} styles={{ root: { width: 400, padding: 10 } }}>
-        {this.renderNode(this.props.descriptor.root)}
-      </Stack>
-    );
+    return <>{this.renderNode(this.props.descriptor.root)}</>;
   }
 }

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

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

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -5,9 +5,6 @@ import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutos
 import { KeyCodes } from "../../../Common/Constants";
 import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
 
-import { userContext } from "../../../UserContext";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 /**
  * Throughput Input:
  *
@@ -132,8 +129,6 @@ export interface ThroughputInputParams {
   showAutoPilot?: ko.Observable<boolean>;
   overrideWithAutoPilotSettings: ko.Observable<boolean>;
   overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  freeTierExceedThroughputTooltip?: ko.Observable<string>;
-  freeTierExceedThroughputWarning?: ko.Observable<string>;
 }
 
 export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
@@ -170,10 +165,6 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
   public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
   public isManualThroughputInputFieldRequired: ko.Computed<boolean>;
   public isAutoscaleThroughputInputFieldRequired: ko.Computed<boolean>;
-  public freeTierExceedThroughputTooltip: ko.Observable<string>;
-  public freeTierExceedThroughputWarning: ko.Observable<string>;
-  public showFreeTierExceedThroughputTooltip: ko.Computed<boolean>;
-  public showFreeTierExceedThroughputWarning: ko.Computed<boolean>;
 
   public constructor(options: ThroughputInputParams) {
     super();
@@ -204,16 +195,6 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
     this.label = options.label || ko.observable<string>();
     this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
     this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
-    this.isAutoPilotSelected.subscribe(value => {
-      TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-        changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-        databaseAccountName: userContext.databaseAccount?.name,
-        subscriptionId: userContext.subscriptionId,
-        apiKind: userContext.defaultExperience,
-        dataExplorerArea: "Scale Tab V1"
-      });
-    });
-
     this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
     this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
     this.throughputModeRadioName = options.throughputModeRadioName;
@@ -238,16 +219,6 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
     this.isAutoscaleThroughputInputFieldRequired = ko.pureComputed(
       () => this.isEnabled() && this.isAutoPilotSelected()
     );
-
-    this.freeTierExceedThroughputTooltip = options.freeTierExceedThroughputTooltip || ko.observable<string>();
-    this.freeTierExceedThroughputWarning = options.freeTierExceedThroughputWarning || ko.observable<string>();
-    this.showFreeTierExceedThroughputTooltip = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputTooltip() && this.value() > 400
-    );
-
-    this.showFreeTierExceedThroughputWarning = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputWarning() && this.value() > 400
-    );
   }
 
   public decreaseThroughput() {

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -126,20 +126,6 @@
   </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="
@@ -162,11 +148,6 @@
       />
     </div>
 
-    <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
-      <span class="freeTierWarningIcon"><img src="/warning.svg" alt="Warning"/></span>
-      <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
-    </div>
-
     <p data-bind="visible: costsVisible">
       <span data-bind="html: requestUnitsUsageCost"></span>
     </p>

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

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

src/Explorer/DataSamples/ContainerSampleGenerator.ts

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

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 { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
+import EnvironmentUtility from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import hasher from "hasher";
 import NewVertexPane from "./Panes/NewVertexPane";
@@ -88,9 +88,6 @@ import { stringToBlob } from "../Utils/BlobUtils";
 import { IChoiceGroupProps } from "office-ui-fabric-react";
 import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
-import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
-import { SelfServeType } from "../SelfServe/SelfServeUtils";
-import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -124,6 +121,7 @@ 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>;
@@ -134,14 +132,15 @@ 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
@@ -160,7 +159,6 @@ export default class Explorer {
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
   public isRefreshingExplorer: ko.Observable<boolean>;
   private resourceTree: ResourceTreeAdapter;
-  private selfServeComponentAdapter: SelfServeComponentAdapter;
 
   // Resource Token
   public resourceTokenDatabaseId: ko.Observable<string>;
@@ -206,15 +204,16 @@ export default class Explorer {
 
   // features
   public isGalleryPublishEnabled: ko.Computed<boolean>;
+  public isCodeOfConductEnabled: ko.Computed<boolean>;
   public isLinkInjectionEnabled: ko.Computed<boolean>;
+  public isSettingsV2Enabled: ko.Observable<boolean>;
+  public isMongoIndexEditorEnabled: ko.Observable<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>;
@@ -264,7 +263,6 @@ export default class Explorer {
   private _dialogProps: ko.Observable<DialogProps>;
   private addSynapseLinkDialog: DialogComponentAdapter;
   private _addSynapseLinkDialogProps: ko.Observable<DialogProps>;
-  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
@@ -283,6 +281,7 @@ 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) => {
@@ -300,7 +299,6 @@ export default class Explorer {
       }
     });
     this.isAccountReady = ko.observable<boolean>(false);
-    this.selfServeType = ko.observable<SelfServeType>(undefined);
     this._isInitializingNotebooks = false;
     this._isInitializingSparkConnectionInfo = false;
     this.arcadiaToken = ko.observable<string>();
@@ -323,9 +321,9 @@ export default class Explorer {
       if (isAccountReady) {
         this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
-        this.notebookWorkspaceManager = new NotebookWorkspaceManager();
+        this.notebookWorkspaceManager = new NotebookWorkspaceManager(this.armEndpoint());
         this.arcadiaWorkspaces = ko.observableArray();
-        this._arcadiaManager = new ArcadiaResourceManager();
+        this._arcadiaManager = new ArcadiaResourceManager(this.armEndpoint());
         this._isAfecFeatureRegistered(Constants.AfecFeatures.StorageAnalytics).then(isRegistered =>
           this.hasStorageAnalyticsAfecFeature(isRegistered)
         );
@@ -375,6 +373,7 @@ 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);
 
@@ -407,11 +406,15 @@ 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.isSettingsV2Enabled = ko.observable(false);
+    this.isMongoIndexEditorEnabled = ko.observable(false);
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
-    this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
@@ -422,8 +425,6 @@ export default class Explorer {
     this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
     this.isNotificationConsoleExpanded = ko.observable<boolean>(false);
 
-    this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
-
     this.databases = ko.observableArray<ViewModels.Database>();
     this.canSaveQueries = ko.computed<boolean>(() => {
       const savedQueriesDatabase: ViewModels.Database = _.find(
@@ -705,7 +706,6 @@ export default class Explorer {
     });
 
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
-    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
@@ -881,7 +881,6 @@ export default class Explorer {
     });
 
     this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
-    this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
     this.notificationConsoleComponentAdapter = new NotificationConsoleComponentAdapter(this);
 
     this._initSettings();
@@ -1021,7 +1020,9 @@ export default class Explorer {
         this.isSynapseLinkUpdating(true);
         this._closeSynapseLinkModalDialog();
 
-        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(this.databaseAccount().id);
+        const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(
+          this.databaseAccount().id
+        );
 
         try {
           const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
@@ -1733,7 +1734,6 @@ export default class Explorer {
         case MessageTypes.SendNotification:
         case MessageTypes.ClearNotification:
         case MessageTypes.LoadingStatus:
-        case MessageTypes.InitTestExplorer:
           return true;
       }
     }
@@ -1761,59 +1761,61 @@ export default class Explorer {
       inputs.extensionEndpoint = configContext.PROXY_PATH;
     }
 
-    this.initDataExplorerWithFrameInputs(inputs);
+    const initPromise: Q.Promise<void> = inputs ? this.initDataExplorerWithFrameInputs(inputs) : Q();
 
-    const openAction: ActionContracts.DataExplorerAction = message.openAction;
-    if (!!openAction) {
-      if (this.isRefreshingExplorer()) {
-        const subscription = this.databases.subscribe((databases: ViewModels.Database[]) => {
+    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 {
           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;
+      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;
       }
-      return;
-    }
 
-    this.splashScreenAdapter.forceRender();
+      this.splashScreenAdapter.forceRender();
+    });
   }
 
   public findSelectedDatabase(): ViewModels.Database {
@@ -1853,28 +1855,8 @@ export default class Explorer {
     return false;
   }
 
-  public setSelfServeType(inputs: ViewModels.DataExplorerInputsFrame): void {
-    const selfServeFeature = inputs.features[Constants.Features.selfServeType];
-    if (selfServeFeature) {
-      // self serve type received from query string
-      const selfServeType = SelfServeType[selfServeFeature?.toLowerCase() as keyof typeof SelfServeType];
-      this.selfServeType(selfServeType ? selfServeType : SelfServeType.invalid);
-    } else if (inputs.selfServeType) {
-      // self serve type received from portal
-      this.selfServeType(inputs.selfServeType);
-    } else {
-      this.selfServeType(SelfServeType.none);
-    }
-  }
-
-  public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): void {
+  public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): Q.Promise<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;
@@ -1883,19 +1865,25 @@ 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);
-      this.setSelfServeType(inputs);
+
+      if (!!inputs.dataExplorerVersion) {
+        this.parentFrameDataExplorerVersion(inputs.dataExplorerVersion);
+      }
+
       this._importExplorerConfigComplete = true;
 
       updateConfigContext({
         BACKEND_ENDPOINT: inputs.extensionEndpoint || "",
-        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT)
+        ARM_ENDPOINT: this.armEndpoint()
       });
 
       updateUserContext({
@@ -1904,8 +1892,7 @@ export default class Explorer {
         databaseAccount,
         resourceGroup: inputs.resourceGroup,
         subscriptionId: inputs.subscriptionId,
-        subscriptionType: inputs.subscriptionType,
-        quotaId: inputs.quotaId
+        subscriptionType: inputs.subscriptionType
       });
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -1919,17 +1906,20 @@ 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.SettingsV2) !== -1) {
+      this.isSettingsV2Enabled(true);
     }
-    if (flights.indexOf(Constants.Flights.MongoIndexing) !== -1) {
-      this.isMongoIndexingEnabled(true);
+
+    if (flights.indexOf(Constants.Flights.MongoIndexEditor) !== -1) {
+      this.isMongoIndexEditorEnabled(true);
     }
   }
 
@@ -2297,6 +2287,7 @@ export default class Explorer {
         name,
         content,
         parentDomElement,
+        this.isCodeOfConductEnabled(),
         this.isLinkInjectionEnabled()
       );
       this.publishNotebookPaneAdapter = this.notebookManager.publishNotebookPaneAdapter;
@@ -2388,13 +2379,11 @@ export default class Explorer {
       this.tabsManager.activateTab(notebookTab);
     } else {
       const options: NotebookTabOptions = {
-        account: userContext.databaseAccount,
         tabKind: ViewModels.CollectionTabKind.NotebookV2,
         node: null,
         title: notebookContentItem.name,
         tabPath: notebookContentItem.path,
         collection: null,
-        masterKey: userContext.masterKey || "",
         hashLocation: "notebooks",
         isActive: ko.observable(false),
         isTabsContentExpanded: ko.observable(true),
@@ -2587,7 +2576,7 @@ export default class Explorer {
 
   public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
     const subscriptionId = userContext.subscriptionId;
-    const armEndpoint = configContext.ARM_ENDPOINT;
+    const armEndpoint = this.armEndpoint();
     const authType = window.authType as AuthType;
     if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
@@ -2596,7 +2585,7 @@ export default class Explorer {
     }
 
     const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${Constants.AfecFeatures.Spark}`;
-    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
+    const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(featureUri);
     try {
       const sparkNotebooksFeature: DataModels.AfecFeature = await resourceProviderClient.getAsync(
         featureUri,
@@ -2616,7 +2605,7 @@ export default class Explorer {
 
   public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
     const subscriptionId = userContext.subscriptionId;
-    const armEndpoint = configContext.ARM_ENDPOINT;
+    const armEndpoint = this.armEndpoint();
     const authType = window.authType as AuthType;
     if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
@@ -2624,7 +2613,7 @@ export default class Explorer {
     }
 
     const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${featureName}`;
-    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
+    const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(featureUri);
     try {
       const featureStatus: DataModels.AfecFeature = await resourceProviderClient.getAsync(
         featureUri,
@@ -3049,25 +3038,4 @@ export default class Explorer {
       })
     );
   }
-
-  public isFirstResourceCreated(): boolean {
-    const databases: ViewModels.Database[] = this.databases();
-
-    if (!databases || databases.length === 0) {
-      return false;
-    }
-
-    return databases.some(database => {
-      // user has created at least one collection
-      if (database.collections()?.length > 0) {
-        return true;
-      }
-      // user has created a database with shared throughput
-      if (database.offer()) {
-        return true;
-      }
-      // use has created an empty database without shared throughput
-      return false;
-    });
-  }
 }

src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts

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

src/Explorer/Graph/GraphExplorerComponent/GraphData.ts

@@ -413,13 +413,13 @@ export class GraphData<V extends GremlinVertex, E extends GremlinEdge> {
    * @param node
    * @param prop
    */
-  public static getNodePropValue(node: D3Node, prop: string): undefined | string | number | boolean {
+  public static getNodePropValue(node: D3Node, prop: string): string | number | boolean {
     if (node.hasOwnProperty(prop)) {
       return (node as any)[prop];
     }
 
     // This is DocDB specific
-    if (node.properties && node.properties.hasOwnProperty(prop)) {
+    if (node.hasOwnProperty("properties") && node.properties.hasOwnProperty(prop)) {
       return node.properties[prop][0]["value"];
     }
 
@@ -496,7 +496,7 @@ export class GraphData<V extends GremlinVertex, E extends GremlinEdge> {
    * Get list of children ids of a given vertex
    * @param vertex
    */
-  public static getChildrenId(vertex: GremlinVertex): string[] {
+  private static getChildrenId(vertex: GremlinVertex): string[] {
     const ids = <any>{}; // HashSet
     if (vertex.hasOwnProperty("outE")) {
       let outE = vertex.outE;

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

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

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -8,7 +8,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
   let mockExplorer: Explorer;
 
   describe("Enable Azure Synapse Link Button", () => {
-    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link";
+    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link (Preview)";
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -269,7 +269,7 @@ export class CommandBarComponentButtonFactory {
       return null;
     }
 
-    const label = "Enable Azure Synapse Link";
+    const label = "Enable Azure Synapse Link (Preview)";
     return {
       iconSrc: SynapseIcon,
       iconAlt: label,

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -99,22 +99,7 @@
         .notificationConsoleControls {
             padding: @MediumSpace;
             margin-left:@DefaultSpace;
-            display: flex;
-            align-items: center;
 
-            .ms-Dropdown-container {
-                display: flex;
-                .ms-Dropdown-title {
-                    height: 25px;
-                    line-height: 25px;
-                }
-                .ms-Dropdown {
-                    min-width: 110px;
-                    margin-left: 10px;
-                    height: 25px;
-                    line-height: 25px;
-                }
-            }
             #consoleFilterLabel {
                 padding: 4px;
             }
@@ -122,7 +107,6 @@
             .consoleSplitter {
                 border-left: 1px solid @BaseMedium;
                 margin: @MediumSpace;
-                height: 20px;
             }
 
             .clearNotificationsButton {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -5,14 +5,14 @@
 import * as React from "react";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import AnimateHeight from "react-animate-height";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
+
 import LoadingIcon from "../../../../images/loading.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
 import ErrorRedIcon from "../../../../images/error_red.svg";
-import ClearIcon from "../../../../images/Clear.svg";
 import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
+import ClearIcon from "../../../../images/Clear.svg";
 import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
 import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 
@@ -53,21 +53,16 @@ export class NotificationConsoleComponent extends React.Component<
   NotificationConsoleComponentState
 > {
   private static readonly transitionDurationMs = 200;
-  private static readonly FilterOptions = [
-    { key: "All", text: "All" },
-    { key: "In Progress", text: "In progress" },
-    { key: "Info", text: "Info" },
-    { key: "Error", text: "Error" }
-  ];
-  private headerTimeoutId?: number;
-  private prevHeaderStatus: string | null;
-  private consoleHeaderElement?: HTMLElement;
+  private static readonly FilterOptions = ["All", "In Progress", "Info", "Error"];
+  private headerTimeoutId: number;
+  private prevHeaderStatus: string;
+  private consoleHeaderElement: HTMLElement;
 
   constructor(props: NotificationConsoleComponentProps) {
     super(props);
     this.state = {
       headerStatus: "",
-      selectedFilter: NotificationConsoleComponent.FilterOptions[0].key || "",
+      selectedFilter: NotificationConsoleComponent.FilterOptions[0],
       isExpanded: props.isConsoleExpanded
     };
     this.prevHeaderStatus = null;
@@ -99,10 +94,6 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement) => {
-    this.consoleHeaderElement = element;
-  };
-
   public render(): JSX.Element {
     const numInProgress = this.props.consoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.InProgress)
       .length;
@@ -114,7 +105,7 @@ export class NotificationConsoleComponent extends React.Component<
       <div className="notificationConsoleContainer">
         <div
           className="notificationConsoleHeader"
-          ref={this.setElememntRef}
+          ref={(element: HTMLElement) => (this.consoleHeaderElement = element)}
           onClick={(event: React.MouseEvent<HTMLDivElement>) => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
@@ -159,15 +150,20 @@ export class NotificationConsoleComponent extends React.Component<
         >
           <div className="notificationConsoleContents">
             <div className="notificationConsoleControls">
-              <Dropdown
-                label="Filter:"
-                role="combobox"
-                selectedKey={this.state.selectedFilter}
-                options={NotificationConsoleComponent.FilterOptions}
-                onChange={this.onFilterSelected.bind(this)}
+              <label id="consoleFilterLabel">Filter</label>
+              <select
                 aria-labelledby="consoleFilterLabel"
+                role="combobox"
                 aria-label={this.state.selectedFilter}
-              />
+                value={this.state.selectedFilter}
+                onChange={this.onFilterSelected.bind(this)}
+              >
+                {NotificationConsoleComponent.FilterOptions.map((value: string) => (
+                  <option value={value} key={value}>
+                    {value}
+                  </option>
+                ))}
+              </select>
               <span className="consoleSplitter" />
               <span
                 className="clearNotificationsButton"
@@ -224,12 +220,12 @@ export class NotificationConsoleComponent extends React.Component<
     ));
   }
 
-  private onFilterSelected = (event: React.ChangeEvent<HTMLSelectElement>, option: IDropdownOption): void => {
-    this.setState({ selectedFilter: String(option.key) });
-  };
+  private onFilterSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+    this.setState({ selectedFilter: event.target.value });
+  }
 
   private getFilteredConsoleData(): ConsoleData[] {
-    let filterType: ConsoleDataType | null = null;
+    let filterType: ConsoleDataType = null;
 
     switch (this.state.selectedFilter) {
       case "All":
@@ -276,7 +272,7 @@ export class NotificationConsoleComponent extends React.Component<
 
   private onConsoleWasExpanded = (): void => {
     this.props.onConsoleExpandedChange(this.state.isExpanded);
-    if (this.state.isExpanded && this.consoleHeaderElement) {
+    if (this.state.isExpanded) {
       this.consoleHeaderElement.focus();
     }
   };

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -110,34 +110,43 @@ exports[`NotificationConsoleComponent renders the console (expanded) 1`] = `
       <div
         className="notificationConsoleControls"
       >
-        <StyledWithResponsiveMode
+        <label
+          id="consoleFilterLabel"
+        >
+          Filter
+        </label>
+        <select
           aria-label="All"
           aria-labelledby="consoleFilterLabel"
-          label="Filter:"
           onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "key": "All",
-                "text": "All",
-              },
-              Object {
-                "key": "In Progress",
-                "text": "In progress",
-              },
-              Object {
-                "key": "Info",
-                "text": "Info",
-              },
-              Object {
-                "key": "Error",
-                "text": "Error",
-              },
-            ]
-          }
           role="combobox"
-          selectedKey="All"
-        />
+          value="All"
+        >
+          <option
+            key="All"
+            value="All"
+          >
+            All
+          </option>
+          <option
+            key="In Progress"
+            value="In Progress"
+          >
+            In Progress
+          </option>
+          <option
+            key="Info"
+            value="Info"
+          >
+            Info
+          </option>
+          <option
+            key="Error"
+            value="Error"
+          >
+            Error
+          </option>
+        </select>
         <span
           className="consoleSplitter"
         />

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.less

@@ -0,0 +1,23 @@
+.mongoQueryComponent {
+  margin-left: 10px;
+
+  input {
+    margin-top: 0;
+  }
+  label {
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  label:before {
+    top: 2px;
+    left: 2px;
+    height: 16px;
+    width: 16px;
+  }
+
+  .queryInput {
+    border: 1px solid black;
+    margin: 5px;
+  }
+}

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import { Dispatch } from "redux";
+import MonacoEditor from "@nteract/monaco-editor";
+import { PrimaryButton } from "office-ui-fabric-react";
+import { ChoiceGroup, IChoiceGroupOption } from "office-ui-fabric-react/lib/ChoiceGroup";
+import Outputs from "@nteract/stateful-components/lib/outputs";
+import { KernelOutputError, StreamText } from "@nteract/outputs";
+import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
+import { actions, selectors, AppState, ContentRef, KernelRef } from "@nteract/core";
+import loadTransform from "../NotebookComponent/loadTransform";
+import { connect } from "react-redux";
+import Immutable from "immutable";
+
+import "./MongoQueryComponent.less";
+interface MongoQueryComponentPureProps {
+  contentRef: ContentRef;
+  kernelRef: KernelRef;
+  databaseId: string;
+  collectionId: string;
+}
+
+interface MongoQueryComponentDispatchProps {
+  runCell: (contentRef: ContentRef, cellId: string) => void;
+  addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => void;
+  onChange: (text: string, id: string, contentRef: ContentRef) => void;
+  save: (contentRef: ContentRef) => void;
+}
+
+type OutputType = "rich" | "json";
+
+interface MongoQueryComponentState {
+  outputType: OutputType;
+  selectedId: string;
+}
+
+const options: IChoiceGroupOption[] = [
+  { key: "rich", text: "Rich Output" },
+  { key: "json", text: "Json Output" }
+];
+
+interface MongoKernelJsonOutput {
+  results: any;
+}
+
+interface MongoDocument {
+  id: string;
+}
+
+type MongoQueryComponentProps = MongoQueryComponentPureProps & StateProps & MongoQueryComponentDispatchProps;
+export class MongoQueryComponent extends React.Component<MongoQueryComponentProps, MongoQueryComponentState> {
+  constructor(props: MongoQueryComponentProps) {
+    super(props);
+    this.state = {
+      outputType: "json",
+      selectedId: undefined
+    };
+  }
+
+  componentDidMount(): void {
+    loadTransform(this.props);
+  }
+
+  private onExecute = () => {
+    this.props.runCell(this.props.contentRef, this.props.firstCellId);
+    this.props.save(this.props.contentRef);
+  };
+
+  /**
+   *
+   * @param databaseId
+   * @param collectionId
+   * @param query e.g. { "lastName": { $in: ["Andersen"] } }
+   */
+  private createFilterQuery(databaseId: string, collectionId: string, query: string): string {
+    const newCommand = `{ "command": "filter", "database": "${databaseId}", "collection": "${collectionId}", "filter": ${JSON.stringify(query)}, "outputType": "${this.state.outputType}" }`;
+    return newCommand;
+  }
+
+  private onOutputTypeChange = (e: React.FormEvent<HTMLElement | HTMLInputElement>, option: IChoiceGroupOption): void => {
+    const outputType = option.key as OutputType;
+    this.setState({ outputType }, () => this.onInputChange(this.props.inputValue));
+  };
+
+  private onInputChange = (text: string) => {
+    this.props.onChange(this.createFilterQuery(this.props.databaseId, this.props.collectionId, text),
+      this.props.firstCellId, this.props.contentRef);
+  };
+
+  render(): JSX.Element {
+    const { firstCellId: id, contentRef, outputDocuments } = this.props;
+
+    if (!id) {
+      return <></>;
+    }
+
+    return (
+      <div className="mongoQueryComponent">
+        <div className="queryInput">
+          <MonacoEditor id={this.props.firstCellId} contentRef={this.props.contentRef} theme={""}
+            language="json" onChange={this.onInputChange}
+            value={this.props.inputValue} />
+        </div>
+        <PrimaryButton text="Apply" onClick={this.onExecute} disabled={!this.props.firstCellId} />
+        <ChoiceGroup
+          selectedKey={this.state.outputType}
+          options={options}
+          onChange={this.onOutputTypeChange}
+          label="Output Type"
+          styles={{ input: { marginTop: 0 }, root: { marginTop: 0 } }}
+        />
+        <hr />
+        <div style={ { display: "flex" } }>
+          <ul>
+            {outputDocuments && outputDocuments.map(d => (
+              <li key={d.id}>
+                <a onClick={() => this.setState({ selectedId: id })}>{d.id}</a>
+              </li>
+              ))}
+          </ul>
+          <div style={{ width: "100%" }} >
+          <MonacoEditor id={""} contentRef={""} theme={""} language="json" onChange={() => {}}
+            value={JSON.stringify(outputDocuments.find(doc => doc.id ===this.state.selectedId)) ?? ""} />
+          </div>
+        </div>
+        <hr />
+        <Outputs id={id} contentRef={contentRef}>
+          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+          <KernelOutputError />
+          <StreamText />
+        </Outputs>
+      </div>
+    );
+  }
+}
+
+interface StateProps {
+  firstCellId: string;
+  inputValue: string;
+  outputDocuments: MongoDocument[];
+}
+interface InitialProps {
+  contentRef: string;
+}
+
+// Redux
+const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
+  const { contentRef } = initialProps;
+  const mapStateToProps = (state: AppState) => {
+    let firstCellId;
+    let inputValue = "";
+    let outputDocuments = [];
+    const content = selectors.content(state, { contentRef });
+    if (content?.type === "notebook") {
+      const cellOrder = selectors.notebook.cellOrder(content.model);
+      if (cellOrder.size > 0) {
+        firstCellId = cellOrder.first() as string;
+        const cell = selectors.notebook.cellById(content.model, { id: firstCellId });
+
+        // Parse to extract filter and output type
+        const cellValue = cell.get("source", "");
+        if (cellValue) {
+          try {
+            const filterValue = JSON.parse(cellValue).filter;
+            if (filterValue) {
+              inputValue = filterValue;
+            }
+          } catch(e) {
+            console.error("Could not parse", e);
+          }
+        }
+        const outputs = cell.get("outputs", Immutable.List());
+        // Extract "application/json" mime-type
+        let jsonOutput: MongoKernelJsonOutput;
+        for (const output of outputs) {
+          if (Object.prototype.hasOwnProperty.call(output.data, "application/json")) {
+            jsonOutput = output.data["application/json"];
+            break;
+          }
+        }
+        outputDocuments = jsonOutput?.results ?? [];
+      }
+    }
+
+    return {
+      firstCellId,
+      inputValue,
+      outputDocuments
+    };
+  };
+  return mapStateToProps;
+};
+
+const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: MongoQueryComponentProps) => {
+  const mapDispatchToProps = (dispatch: Dispatch) => {
+    return {
+      addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
+        return dispatch(
+          actions.addTransform({
+            mediaType: transform.MIMETYPE,
+            component: transform
+          })
+        );
+      },
+      runCell: (contentRef: ContentRef, cellId: string) => {
+        return dispatch(
+          actions.executeCell({
+            contentRef,
+            id: cellId
+          })
+        );
+      },
+      onChange: (text: string, id: string, contentRef: ContentRef) => {
+        dispatch(actions.updateCellSource({ id, contentRef, value: text }));
+      },
+      save: (contentRef: ContentRef) => {
+        dispatch(actions.save({ contentRef }));
+      }
+    };
+  };
+  return mapDispatchToProps;
+};
+
+export default connect(makeMapStateToProps, makeMapDispatchToProps)(MongoQueryComponent);

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponentAdapter.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import {
+  NotebookComponentBootstrapper,
+  NotebookComponentBootstrapperOptions
+} from "../NotebookComponent/NotebookComponentBootstrapper";
+import MongoQueryComponent from "../MongoQueryComponent/MongoQueryComponent";
+import { actions, createContentRef, createKernelRef, KernelRef } from "@nteract/core";
+import { Provider } from "react-redux";
+
+export class MongoQueryComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
+  public parameters: unknown;
+  private kernelRef: KernelRef;
+
+  constructor(options: NotebookComponentBootstrapperOptions, private databaseId: string, private collectionId: string) {
+    super(options);
+
+    if (!this.contentRef) {
+      this.contentRef = createContentRef();
+      this.kernelRef = createKernelRef();
+
+      // Request fetching notebook content
+      this.getStore().dispatch(
+        actions.fetchContent({
+          filepath: "mongo.ipynb",
+          params: {},
+          kernelRef: this.kernelRef,
+          contentRef: this.contentRef
+        })
+      );
+    }
+  }
+
+  public renderComponent(): JSX.Element {
+    const props = {
+      contentRef: this.contentRef,
+      kernelRef: this.kernelRef,
+      databaseId: this.databaseId,
+      collectionId: this.collectionId
+    };
+
+    return (
+      <Provider store={this.getStore()}>
+        <MongoQueryComponent {...props} />;
+      </Provider>
+    );
+  }
+}

src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts

@@ -1,17 +1,18 @@
 import { Observable, of } from "rxjs";
-import { AjaxRequest, AjaxResponse } from "rxjs/ajax";
+import { AjaxResponse } from "rxjs/ajax";
+import { ServerConfig } from "rx-jupyter";
 
 let fakeAjaxResponse: AjaxResponse = {
-  originalEvent: <Event>(<unknown>undefined),
+  originalEvent: undefined,
   xhr: new XMLHttpRequest(),
-  request: <AjaxRequest>(<unknown>null),
+  request: null,
   status: 200,
   response: {},
-  responseText: "",
+  responseText: null,
   responseType: "json"
 };
 export const sessions = {
-  create: (serverConfig: unknown, body: object): Observable<AjaxResponse> => of(fakeAjaxResponse),
+  create: (serverConfig: ServerConfig, body: object): Observable<AjaxResponse> => of(fakeAjaxResponse),
   __setResponse: (response: AjaxResponse) => {
     fakeAjaxResponse = response;
   },