Removing TODO comments

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.eslintignore

@@ -14,7 +14,6 @@ src/Common/DataAccessUtilityBase.ts
 src/Common/DeleteFeedback.ts
 src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
-src/Common/EnvironmentUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
 src/Common/HeadersUtility.test.ts
@@ -43,7 +42,6 @@ src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
 src/Controls/Heatmap/HeatmapDatatypes.ts
-src/Definitions/adal.d.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -89,7 +87,7 @@ src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts
 src/Explorer/DataSamples/DataSamplesUtil.ts
-src/Explorer/Explorer.ts
+src/Explorer/Explorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -243,9 +241,6 @@ src/Platform/Hosted/Authorization.ts
 src/Platform/Hosted/DataAccessUtility.ts
 src/Platform/Hosted/ExplorerFactory.ts
 src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
-src/Platform/Hosted/Helpers/ConnectionStringParser.ts
-src/Platform/Hosted/HostedUtils.test.ts
-src/Platform/Hosted/HostedUtils.ts
 src/Platform/Hosted/Main.ts
 src/Platform/Hosted/Maint.test.ts
 src/Platform/Hosted/NotificationsClient.ts

.eslintrc.js

@@ -20,10 +20,7 @@ module.exports = {
   overrides: [
     {
       files: ["**/*.tsx"],
-      env: {
-        jest: true,
-      },
-      extends: ["plugin:react/recommended"],
+      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
       plugins: ["react"],
     },
     {
@@ -36,6 +33,7 @@ module.exports = {
     },
   ],
   rules: {
+    "no-console": ["error", { allow: ["error", "warn", "dir"] }],
     curly: "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
@@ -43,6 +41,7 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "error",
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
     eqeqeq: "error",
+    "react/display-name": "off",
     "no-restricted-syntax": [
       "error",
       {

.github/workflows/ci.yml

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

README.md

@@ -13,29 +13,18 @@ UI for Azure Cosmos DB. Powers the [Azure Portal](https://portal.azure.com/), ht
 
 ### Watch mode
 
-Run `npm run watch` to start the development server and automatically rebuild on changes
+Run `npm start` to start the development server and automatically rebuild on changes
 
-### Specifying Development Platform
+### Hosted Development (https://cosmos.azure.com)
 
-Setting the environment variable `PLATFORM` during the build process will force the explorer to load the specified platform. By default in development it will run in `Hosted` mode. Valid options:
-
-- Hosted
-- Emulator
-- Portal
-
-`PLATFORM=Emulator npm run watch`
-
-### Hosted Development
-
-The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
-
-To run pure hosted mode, in `webpack.config.js` change index HtmlWebpackPlugin to use hostedExplorer.html and change entry for index to use HostedExplorer.ts.
+- Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
+- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
 
-In a window environment, running `npm run build` will automatically copy the built files from `/dist` over to the default emulator install paths. In a non-windows environment you can specify an alternate endpoint using `EMULATOR_ENDPOINT` and webpack dev server will proxy requests for you.
-
-`PLATFORM=Emulator EMULATOR_ENDPOINT=https://my-vm.azure.com:8081 npm run watch`
+- Start the Cosmos Emulator
+- Visit: https://localhost:1234/index.html
 
 #### Setting up a Remote Emulator
 
@@ -55,16 +44,8 @@ The Cosmos emulator currently only runs in Windows environments. You can still d
 
 ### Portal Development
 
-The Cosmos Portal that consumes this repo is not currently open source. If you have access to this project, `npm run build` will copy the built files over to the portal where they will be loaded by the portal development environment
-
-You can however load a local running instance of data explorer in the production portal.
-
-1. Turn off browser SSL validation for localhost: chrome://flags/#allow-insecure-localhost OR Install valid SSL certs for localhost (on IE, follow these [instructions](https://www.technipages.com/ie-bypass-problem-with-this-websites-security-certificate) to install the localhost certificate in the right place)
-2. Allowlist `https://localhost:1234` domain for CORS in the Azure Cosmos DB portal
-3. Start the project in portal mode: `PLATFORM=Portal npm run watch`
-4. Load the portal using the following link: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html
-
-Live reload will occur, but data explorer will not properly integrate again with the parent iframe. You will have to manually reload the page.
+- Visit: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html
+- You may have to manually visit https://localhost:1234/explorer.html first and click through any SSL certificate warnings
 
 ### Testing
 
@@ -88,6 +69,10 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
 
 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
 
+### Architechture
+
+[![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
+
 # Contributing
 
 Please read the [contribution guidelines](./CONTRIBUTING.md).

babel.config.js

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

canvas/README.md

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

canvas/index.js

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

canvas/package.json

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

configs/mpac.json

@@ -1,3 +1,4 @@
 {
- "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com"
+ "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com",
+ "ENABLE_GALLERY_PUBLISH": true
 }

images/notebook/publish_content.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.31449 2.01439L4.00103 5.31963L3.26105 4.57965L7.8407 0L12.4203 4.57965L11.6804 5.31963L8.36691 2.01439V12.8428H7.31449V2.01439ZM13.629 12.8428H14.6814V16H1V12.8428H2.05242V14.9476H13.629V12.8428Z" fill="#0078D4"/>
+</svg>

jest.config.js

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

less/Common/Constants.less

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

less/hostedexplorer.less

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

less/tree.less

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

package.json

@@ -6,12 +6,14 @@
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/identity": "1.1.0",
     "@azure/cosmos-language-service": "0.0.5",
-    "@jupyterlab/services": "6.0.0-rc.2",
-    "@jupyterlab/terminal": "3.0.0-rc.2",
+    "@azure/identity": "1.2.1",
+    "@babel/plugin-proposal-class-properties": "7.12.1",
+    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@jupyterlab/services": "6.0.2",
+    "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.5.9",
-    "@nteract/commutable": "7.3.2",
+    "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -36,6 +38,7 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
+    "@testing-library/jest-dom": "5.11.9",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
@@ -44,7 +47,7 @@
     "applicationinsights": "1.8.0",
     "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.6.1",
+    "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
@@ -61,6 +64,9 @@
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
+    "i18next": "19.8.4",
+    "i18next-browser-languagedetector": "6.0.1",
+    "i18next-http-backend": "1.0.23",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -69,6 +75,7 @@
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
+    "msal": "1.4.4",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
@@ -80,14 +87,17 @@
     "react-animate-height": "2.0.8",
     "react-dnd": "9.4.0",
     "react-dnd-html5-backend": "9.4.0",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
+    "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
+    "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
+    "swr": "0.4.0",
     "text-encoding": "0.7.0",
     "underscore": "1.9.1",
     "url-polyfill": "1.1.7",
@@ -101,6 +111,7 @@
     "@babel/preset-env": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
+    "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
     "@types/crossroads": "0.0.30",
@@ -109,7 +120,7 @@
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
-    "@types/jest": "23.3.10",
+    "@types/jest": "26.0.20",
     "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
@@ -117,8 +128,8 @@
     "@types/prop-types": "15.5.8",
     "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.0.7",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/sinon": "2.3.3",
@@ -128,7 +139,6 @@
     "@types/webfontloader": "1.6.29",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
-    "adal-angular": "1.0.15",
     "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
@@ -143,7 +153,9 @@
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expose-loader": "0.7.5",
+    "fast-glob": "3.2.5",
     "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
     "html-loader": "0.5.5",
@@ -170,7 +182,7 @@
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.1.2",
+    "typescript": "4.0.2",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",

src/AuthType.ts

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

src/Bindings/BindingHandlersRegisterer.ts

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

src/Common/Constants.ts

@@ -1,10 +1,3 @@
-import { HashMap } from "./HashMap";
-
-export class AuthorizationEndpoints {
-  public static arm: string = "https://management.core.windows.net/";
-  public static common: string = "https://login.windows.net/";
-}
-
 export class CodeOfConductEndpoints {
   public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
   public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
@@ -113,7 +106,6 @@ export class Features {
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
   public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableCodeOfConduct = "enablecodeofconduct";
   public static readonly enableLinkInjection = "enablelinkinjection";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
@@ -127,12 +119,18 @@ export class Features {
   public static readonly enableSchema = "enableschema";
   public static readonly enableSDKoperations = "enablesdkoperations";
   public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
+  public static readonly selfServeType = "selfservetype";
+  public static readonly enableKOPanel = "enablekopanel";
 }
 
 // flight names returned from the portal are always lowercase
 export class Flights {
   public static readonly SettingsV2 = "settingsv2";
   public static readonly MongoIndexEditor = "mongoindexeditor";
+  public static readonly MongoIndexing = "mongoindexing";
+  public static readonly AutoscaleTest = "autoscaletest";
+  public static readonly GalleryPublish = "gallerypublish";
 }
 
 export class AfecFeatures {
@@ -141,19 +139,6 @@ export class AfecFeatures {
   public static readonly StorageAnalytics = "storageanalytics-public-preview";
 }
 
-export class Spark {
-  public static readonly MaxWorkerCount = 10;
-  public static readonly SKUs: HashMap<string> = new HashMap({
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
-    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
-    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
-    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM",
-  });
-}
-
 export class TagNames {
   public static defaultExperience: string = "defaultExperience";
 }

src/Common/CosmosClient.ts

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

src/Common/DataAccessUtilityBase.ts

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

src/Common/DocumentClientUtilityBase.ts

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

src/Common/DocumentUtility.ts

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

src/Common/EnvironmentUtility.ts

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

src/Common/ErrorHandlingUtils.ts

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

src/Common/OfferUtility.test.ts

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

src/Common/OfferUtility.ts

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

src/Common/QueriesClient.ts

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

src/Common/Splitter.ts

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

src/Common/dataAccess/createCollection.test.ts

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

src/Common/dataAccess/createDocument.ts

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

src/Common/dataAccess/deleteConflict.ts

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

src/Common/dataAccess/deleteDocument.ts

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

src/Common/dataAccess/executeStoredProcedure.ts

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

src/Common/dataAccess/getCollectionDataUsageSize.ts

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

src/Common/dataAccess/queryConflicts.ts

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

src/Common/dataAccess/queryDocuments.test.ts

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

src/Common/dataAccess/queryDocuments.ts

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

src/Common/dataAccess/queryDocumentsPage.ts

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

src/Common/dataAccess/readCollectionOffer.ts

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

src/Common/dataAccess/readDatabaseOffer.ts

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

src/Common/dataAccess/readDocument.ts

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

src/Common/dataAccess/updateDocument.ts

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

src/ConfigContext.ts

@@ -4,7 +4,7 @@ export enum Platform {
   Emulator = "Emulator",
 }
 
-interface ConfigContext {
+export interface ConfigContext {
   platform: Platform;
   allowedParentFrameOrigins: string[];
   gitSha?: string;
@@ -26,6 +26,7 @@ interface ConfigContext {
   GITHUB_CLIENT_SECRET?: string; // No need to inject secret for prod. Juno already knows it.
   hostedExplorerURL: string;
   armAPIVersion?: string;
+  ENABLE_GALLERY_PUBLISH?: boolean;
 }
 
 // Default configuration
@@ -79,7 +80,11 @@ if (process.env.NODE_ENV === "development") {
 
 export async function initializeConfiguration(): Promise<ConfigContext> {
   try {
-    const response = await fetch("./config.json");
+    const response = await fetch("./config.json", {
+      headers: {
+        "If-None-Match": "", // disable client side cache
+      },
+    });
     if (response.status === 200) {
       try {
         const { allowedParentFrameOrigins, ...externalConfig } = await response.json();
@@ -104,7 +109,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       const platform = params.get("platform");
       switch (platform) {
         default:
-          console.log("Invalid platform query parameter given, ignoring");
+          console.error(`Invalid platform query parameter: ${platform}`);
           break;
         case Platform.Portal:
         case Platform.Hosted:
@@ -113,7 +118,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       }
     }
   } catch (error) {
-    console.log("No configuration file found using defaults");
+    console.error("No configuration file found using defaults");
   }
   return configContext;
 }

src/Contracts/DataModels.ts

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

src/Contracts/ExplorerContracts.ts

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

src/Contracts/ViewModels.ts

@@ -5,7 +5,6 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Q from "q";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
@@ -15,6 +14,7 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
+import { SelfServeType } from "../SelfServe/SelfServeUtils";
 import { UploadDetails } from "../workers/upload/definitions";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
@@ -91,6 +91,7 @@ export interface Database extends TreeNode {
   onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 export interface CollectionBase extends TreeNode {
@@ -108,7 +109,7 @@ export interface CollectionBase extends TreeNode {
 
   onDocumentDBDocumentsClick(): void;
   onNewQueryClick(source: any, event: MouseEvent, queryText?: string): void;
-  expandCollection(): Q.Promise<any>;
+  expandCollection(): void;
   collapseCollection(): void;
   getDatabase(): Database;
 }
@@ -137,7 +138,6 @@ export interface Collection extends CollectionBase {
   openTab(): void;
 
   onSettingsClick: () => Promise<void>;
-  onDeleteCollectionContextMenuClick(source: Collection, event: MouseEvent): void;
 
   onNewGraphClick(): void;
   onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string): void;
@@ -175,9 +175,10 @@ export interface Collection extends CollectionBase {
 
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
-  uploadFiles(fileList: FileList): Q.Promise<UploadDetails>;
+  uploadFiles(fileList: FileList): Promise<UploadDetails>;
 
   getLabel(): string;
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 /**
@@ -292,10 +293,6 @@ export interface DocumentsTabOptions extends TabOptions {
   resourceTokenPartitionKey?: string;
 }
 
-export interface SettingsTabV2Options extends TabOptions {
-  getPendingNotification: Q.Promise<DataModels.Notification>;
-}
-
 export interface ConflictsTabOptions extends TabOptions {
   partitionKey: DataModels.PartitionKey;
   conflictIds: ko.ObservableArray<ConflictId>;
@@ -362,7 +359,8 @@ export enum CollectionTabKind {
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  SettingsV2 = 19,
+  CollectionSettingsV2 = 20,
+  DatabaseSettingsV2 = 21,
 }
 
 export enum TerminalKind {
@@ -395,6 +393,7 @@ export interface DataExplorerInputsFrame {
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
+  selfServeType?: SelfServeType;
 }
 
 export interface CollectionCreationDefaults {

src/Definitions/adal.d.ts

@@ -1,383 +0,0 @@
-// Type definitions for adal-angular 1.0.1.1
-// Project: https://github.com/AzureAD/azure-activedirectory-library-for-js#readme
-// Definitions by: Daniel Perez Alvarez <https://github.com/unindented>
-//                 Anthony Ciccarello <https://github.com/aciccarello>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-//This is a customized version of adal on top of version 1.0.1 which does not support multi tenant
-// Customized version add tenantId to stored tokens so when tenant change, adal will refetch instead of read from sessionStorage
-
-// In module contexts the class constructor function is the exported object
-// export = AuthenticationContext;
-
-// This class is defined globally in not in a module context
-declare class AuthenticationContext {
-  instance: string;
-  config: AuthenticationContext.Options;
-  callback: AuthenticationContext.TokenCallback;
-  popUp: boolean;
-  isAngular: boolean;
-
-  /**
-   * Enum for request type
-   */
-  REQUEST_TYPE: AuthenticationContext.RequestType;
-  RESPONSE_TYPE: AuthenticationContext.ResponseType;
-  CONSTANTS: AuthenticationContext.Constants;
-
-  constructor(options: AuthenticationContext.Options);
-  /**
-   * Initiates the login process by redirecting the user to Azure AD authorization endpoint.
-   */
-  login(): void;
-  /**
-   * Returns whether a login is in progress.
-   */
-  loginInProgress(): boolean;
-  /**
-   * Gets token for the specified resource from the cache.
-   * @param resource A URI that identifies the resource for which the token is requested.
-   * @param tenantId tenant Id.
-   */
-  getCachedToken(resource: string, tenantId: string): string;
-  /**
-   * If user object exists, returns it. Else creates a new user object by decoding `id_token` from the cache.
-   */
-  getCachedUser(): AuthenticationContext.UserInfo;
-  /**
-   * Adds the passed callback to the array of callbacks for the specified resource.
-   * @param resource A URI that identifies the resource for which the token is requested.
-   * @param expectedState A unique identifier (guid).
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  registerCallback(
-    expectedState: string,
-    resource: string,
-    callback: AuthenticationContext.TokenCallback,
-    tenantId: string
-  ): void;
-  /**
-   * Acquires token from the cache if it is not expired. Otherwise sends request to AAD to obtain a new token.
-   * @param resource Resource URI identifying the target resource.
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  acquireToken(resource: string, tenantId: string, callback: AuthenticationContext.TokenCallback): void;
-  /**
-   * Acquires token (interactive flow using a popup window) by sending request to AAD to obtain a new token.
-   * @param resource Resource URI identifying the target resource.
-   * @param extraQueryParameters Query parameters to add to the authentication request.
-   * @param claims Claims to add to the authentication request.
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  acquireTokenPopup(
-    resource: string,
-    tenantId: string,
-    extraQueryParameters: string | null | undefined,
-    claims: string | null | undefined,
-    callback: AuthenticationContext.TokenCallback
-  ): void;
-  /**
-   * Acquires token (interactive flow using a redirect) by sending request to AAD to obtain a new token. In this case the callback passed in the authentication request constructor will be called.
-   * @param resource Resource URI identifying the target resource.
-   * @param extraQueryParameters Query parameters to add to the authentication request.
-   * @param claims Claims to add to the authentication request.
-   */
-  acquireTokenRedirect(
-    resource: string,
-    tenantId: string,
-    extraQueryParameters?: string | null,
-    claims?: string | null
-  ): void;
-  /**
-   * Redirects the browser to Azure AD authorization endpoint.
-   * @param urlNavigate URL of the authorization endpoint.
-   */
-  promptUser(urlNavigate: string): void;
-  /**
-   * Clears cache items.
-   */
-  clearCache(): void;
-  /**
-   * Clears cache items for a given resource.
-   * @param resource Resource URI identifying the target resource.
-   */
-  clearCacheForResource(resource: string): void;
-  /**
-   * Redirects user to logout endpoint. After logout, it will redirect to `postLogoutRedirectUri` if added as a property on the config object.
-   */
-  logOut(): void;
-  /**
-   * Calls the passed in callback with the user object or error message related to the user.
-   * @param callback The callback provided by the caller. It will be called with user or error.
-   */
-  getUser(callback: AuthenticationContext.UserCallback): void;
-  /**
-   * Checks if the URL fragment contains access token, id token or error description.
-   * @param hash Hash passed from redirect page.
-   */
-  isCallback(hash: string): boolean;
-  /**
-   * Gets login error.
-   */
-  getLoginError(): string;
-  /**
-   * Creates a request info object from the URL fragment and returns it.
-   */
-  getRequestInfo(hash: string): AuthenticationContext.RequestInfo;
-  /**
-   * Saves token or error received in the response from AAD in the cache. In case of `id_token`, it also creates the user object.
-   */
-  saveTokenFromHash(requestInfo: AuthenticationContext.RequestInfo): void;
-  /**
-   * Gets resource for given endpoint if mapping is provided with config.
-   * @param endpoint Resource URI identifying the target resource.
-   */
-  getResourceForEndpoint(resource: string): string;
-  /**
-   * This method must be called for processing the response received from AAD. It extracts the hash, processes the token or error, saves it in the cache and calls the callbacks with the result.
-   * @param hash Hash fragment of URL. Defaults to `window.location.hash`.
-   */
-  handleWindowCallback(hash?: string): void;
-
-  /**
-   * Checks the logging Level, constructs the log message and logs it. Users need to implement/override this method to turn on logging.
-   * @param level Level can be set 0, 1, 2 and 3 which turns on 'error', 'warning', 'info' or 'verbose' level logging respectively.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  log(level: AuthenticationContext.LoggingLevel, message: string, error: any): void;
-  /**
-   * Logs messages when logging level is set to 0.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  error(message: string, error: any): void;
-  /**
-   * Logs messages when logging level is set to 1.
-   * @param message Message to log.
-   */
-  warn(message: string): void;
-  /**
-   * Logs messages when logging level is set to 2.
-   * @param message Message to log.
-   */
-  info(message: string): void;
-  /**
-   * Logs messages when logging level is set to 3.
-   * @param message Message to log.
-   */
-  verbose(message: string): void;
-
-  /**
-   * Logs Pii messages when Logging Level is set to 0 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  errorPii(message: string, error: any): void;
-
-  /**
-   * Logs  Pii messages when Logging Level is set to 1 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  warnPii(message: string): void;
-
-  /**
-   * Logs messages when Logging Level is set to 2 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  infoPii(message: string): void;
-
-  /**
-   * Logs messages when Logging Level is set to 3 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  verbosePii(message: string): void;
-}
-
-declare namespace AuthenticationContext {
-  function inject(config: Options): AuthenticationContext;
-
-  type LoggingLevel = 0 | 1 | 2 | 3;
-
-  type RequestType = "LOGIN" | "RENEW_TOKEN" | "UNKNOWN";
-
-  type ResponseType = "id_token token" | "token";
-
-  interface RequestInfo {
-    /**
-     * Object comprising of fields such as id_token/error, session_state, state, e.t.c.
-     */
-    parameters: any;
-    /**
-     * Request type.
-     */
-    requestType: RequestType;
-    /**
-     * Whether state is valid.
-     */
-    stateMatch: boolean;
-    /**
-     * Unique guid used to match the response with the request.
-     */
-    stateResponse: string;
-    /**
-     * Whether `requestType` contains `id_token`, `access_token` or error.
-     */
-    valid: boolean;
-  }
-
-  interface UserInfo {
-    /**
-     * Username assigned from UPN or email.
-     */
-    userName: string;
-    /**
-     * Properties parsed from `id_token`.
-     */
-    profile: any;
-  }
-
-  type TokenCallback = (errorDesc: string | null, token: string | null, error: any) => void;
-
-  type UserCallback = (errorDesc: string | null, user: UserInfo | null) => void;
-
-  /**
-   * Configuration options for Authentication Context
-   */
-  interface Options {
-    /**
-     * Client ID assigned to your app by Azure Active Directory.
-     */
-    clientId: string;
-    /**
-     * Endpoint at which you expect to receive tokens.Defaults to `window.location.href`.
-     */
-    redirectUri?: string;
-    /**
-     * Azure Active Directory instance. Defaults to `https://login.microsoftonline.com/`.
-     */
-    instance?: string;
-    /**
-     * Your target tenant. Defaults to `common`.
-     */
-    tenant?: string;
-    /**
-     * Query parameters to add to the authentication request.
-     */
-    extraQueryParameter?: string;
-    /**
-     * Unique identifier used to map the request with the response. Defaults to RFC4122 version 4 guid (128 bits).
-     */
-    correlationId?: string;
-    /**
-     * User defined function of handling the navigation to Azure AD authorization endpoint in case of login.
-     */
-    displayCall?: (url: string) => void;
-    /**
-     * Set this to true to enable login in a popup winodow instead of a full redirect. Defaults to `false`.
-     */
-    popUp?: boolean;
-    /**
-     * Set this to the resource to request on login. Defaults to `clientId`.
-     */
-    loginResource?: string;
-    /**
-     * Set this to redirect the user to a custom login page.
-     */
-    localLoginUrl?: string;
-    /**
-     * Redirects to start page after login. Defaults to `true`.
-     */
-    navigateToLoginRequestUrl?: boolean;
-    /**
-     * Set this to redirect the user to a custom logout page.
-     */
-    logOutUri?: string;
-    /**
-     * Redirects the user to postLogoutRedirectUri after logout. Defaults to `redirectUri`.
-     */
-    postLogoutRedirectUri?: string;
-    /**
-     * Sets browser storage to either 'localStorage' or sessionStorage'. Defaults to `sessionStorage`.
-     */
-    cacheLocation?: "localStorage" | "sessionStorage";
-    /**
-     * Array of keywords or URIs. Adal will attach a token to outgoing requests that have these keywords or URIs.
-     */
-    endpoints?: { [resource: string]: string };
-    /**
-     * Array of keywords or URIs. Adal will not attach a token to outgoing requests that have these keywords or URIs.
-     */
-    anonymousEndpoints?: string[];
-    /**
-     * If the cached token is about to be expired in the expireOffsetSeconds (in seconds), Adal will renew the token instead of using the cached token. Defaults to 300 seconds.
-     */
-    expireOffsetSeconds?: number;
-    /**
-     * The number of milliseconds of inactivity before a token renewal response from AAD should be considered timed out. Defaults to 6 seconds.
-     */
-    loadFrameTimeout?: number;
-    /**
-     * Callback to be invoked when a token is acquired.
-     */
-    callback?: TokenCallback;
-  }
-
-  interface LoggingConfig {
-    level: LoggingLevel;
-    log: (message: string) => void;
-    piiLoggingEnabled: boolean;
-  }
-
-  /**
-   * Enum for storage constants
-   */
-  interface Constants {
-    ACCESS_TOKEN: "access_token";
-    EXPIRES_IN: "expires_in";
-    ID_TOKEN: "id_token";
-    ERROR_DESCRIPTION: "error_description";
-    SESSION_STATE: "session_state";
-    STORAGE: {
-      TOKEN_KEYS: "adal.token.keys";
-      ACCESS_TOKEN_KEY: "adal.access.token.key";
-      EXPIRATION_KEY: "adal.expiration.key";
-      STATE_LOGIN: "adal.state.login";
-      STATE_RENEW: "adal.state.renew";
-      NONCE_IDTOKEN: "adal.nonce.idtoken";
-      SESSION_STATE: "adal.session.state";
-      USERNAME: "adal.username";
-      IDTOKEN: "adal.idtoken";
-      ERROR: "adal.error";
-      ERROR_DESCRIPTION: "adal.error.description";
-      LOGIN_REQUEST: "adal.login.request";
-      LOGIN_ERROR: "adal.login.error";
-      RENEW_STATUS: "adal.token.renew.status";
-    };
-    RESOURCE_DELIMETER: "|";
-    LOADFRAME_TIMEOUT: "6000";
-    TOKEN_RENEW_STATUS_CANCELED: "Canceled";
-    TOKEN_RENEW_STATUS_COMPLETED: "Completed";
-    TOKEN_RENEW_STATUS_IN_PROGRESS: "In Progress";
-    LOGGING_LEVEL: {
-      ERROR: 0;
-      WARN: 1;
-      INFO: 2;
-      VERBOSE: 3;
-    };
-    LEVEL_STRING_MAP: {
-      0: "ERROR:";
-      1: "WARNING:";
-      2: "INFO:";
-      3: "VERBOSE:";
-    };
-    POPUP_WIDTH: 483;
-    POPUP_HEIGHT: 600;
-  }
-}
-
-// declare global {
-//     interface Window {
-//         Logging: AuthenticationContext.LoggingConfig;
-//     }
-// }

src/Explorer/ComponentRegisterer.test.ts

@@ -45,7 +45,8 @@ describe("Component Registerer", () => {
   });
 
   it("should register settings-tab-v2 component", () => {
-    expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("database-settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("collection-settings-tab-v2")).toBe(true);
   });
 
   it("should register query-tab component", () => {

src/Explorer/ComponentRegisterer.ts

@@ -31,7 +31,7 @@ ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTa
 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-v2", new TabComponents.SettingsTabV2());
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
 ko.components.register("query-tab", new TabComponents.QueryTab());
 ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
 ko.components.register("graph-tab", new TabComponents.GraphTab());
@@ -45,6 +45,7 @@ ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTa
 
 // Database Tabs
 ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -112,10 +112,7 @@ export class ResourceTreeContextMenuButtonFactory {
 
     items.push({
       iconSrc: DeleteCollectionIcon,
-      onClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-        selectedCollection && selectedCollection.onDeleteCollectionContextMenuClick(selectedCollection, null);
-      },
+      onClick: () => container.openDeleteCollectionConfirmationPane(),
       label: container.deleteCollectionText(),
       styleClass: "deleteCollectionMenuItem",
     });

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx

@@ -1,159 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
-import { AuthType } from "../../../AuthType";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-import { AccountKind } from "../../../Common/Constants";
-
-const createBlankProps = (): AccountSwitchComponentProps => {
-  return {
-    authType: null,
-    displayText: "",
-    accounts: [],
-    selectedAccountName: null,
-    isLoadingAccounts: false,
-    onAccountChange: jest.fn(),
-    subscriptions: [],
-    selectedSubscriptionId: null,
-    isLoadingSubscriptions: false,
-    onSubscriptionChange: jest.fn(),
-  };
-};
-
-const createBlankAccount = (): DatabaseAccount => {
-  return {
-    id: "",
-    kind: AccountKind.Default,
-    name: "",
-    properties: null,
-    location: "",
-    tags: null,
-    type: "",
-  };
-};
-
-const createBlankSubscription = (): Subscription => {
-  return {
-    subscriptionId: "",
-    displayName: "",
-    authorizationSource: "",
-    state: "",
-    subscriptionPolicies: null,
-    tenantId: "",
-    uniqueDisplayName: "",
-  };
-};
-
-const createFullProps = (): AccountSwitchComponentProps => {
-  const props = createBlankProps();
-  props.authType = AuthType.AAD;
-  const account1 = createBlankAccount();
-  account1.name = "account1";
-  const account2 = createBlankAccount();
-  account2.name = "account2";
-  const account3 = createBlankAccount();
-  account3.name = "superlongaccountnamestringtest";
-  props.accounts = [account1, account2, account3];
-  props.selectedAccountName = "account2";
-
-  const sub1 = createBlankSubscription();
-  sub1.displayName = "sub1";
-  sub1.subscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
-  const sub2 = createBlankSubscription();
-  sub2.displayName = "subsubsubsubsubsubsub2";
-  sub2.subscriptionId = "b20b3e93-0185-4326-8a9c-d44bac276b6b";
-  props.subscriptions = [sub1, sub2];
-  props.selectedSubscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
-
-  return props;
-};
-
-describe("test render", () => {
-  it("renders no auth type -> handle error in code", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  // Encrypted Token
-  it("renders auth security token, with selected account name", () => {
-    const props = createBlankProps();
-    props.authType = AuthType.EncryptedToken;
-    props.selectedAccountName = "testaccount";
-
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  // AAD
-  it("renders auth aad, with all information", () => {
-    const props = createFullProps();
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders auth aad all dropdown menus", () => {
-    const props = createFullProps();
-    const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
-    wrapper.find("button.accountSwitchButton").simulate("click");
-    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(true);
-
-    expect(wrapper.exists("div.accountSwitchSubscriptionDropdown")).toBe(true);
-    wrapper.find("DropdownBase.accountSwitchSubscriptionDropdown").simulate("click");
-    // Click will dismiss the first contextual menu in enzyme. Need to dig deeper to achieve below test
-
-    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(true);
-    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(2);
-    // wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(false);
-
-    // expect(wrapper.exists("div.accountSwitchAccountDropdown")).toBe(true);
-    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(true);
-    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(3);
-    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(false);
-
-    // wrapper.find("button.accountSwitchButton").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
-
-    wrapper.unmount();
-  });
-});
-
-// describe("test function", () => {
-//   it("switch subscription function", () => {
-//     const props = createFullProps();
-//     const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-//     wrapper.find("button.accountSwitchButton").simulate("click");
-//     wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
-//     wrapper
-//       .find("button.ms-Dropdown-item")
-//       .at(1)
-//       .simulate("click");
-//     expect(props.onSubscriptionChange).toBeCalled();
-//     expect(props.onSubscriptionChange).toHaveBeenCalled();
-
-//     wrapper.unmount();
-//   });
-
-//   it("switch account", () => {
-//     const props = createFullProps();
-//     const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-//     wrapper.find("button.accountSwitchButton").simulate("click");
-//     wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-//     wrapper
-//       .find("button.ms-Dropdown-item")
-//       .at(0)
-//       .simulate("click");
-//     expect(props.onAccountChange).toBeCalled();
-//     expect(props.onAccountChange).toHaveBeenCalled();
-
-//     wrapper.unmount();
-//   });
-// });

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx

@@ -1,177 +0,0 @@
-import { AuthType } from "../../../AuthType";
-import { StyleConstants } from "../../../Common/Constants";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-
-import * as React from "react";
-import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
-import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
-
-export interface AccountSwitchComponentProps {
-  authType: AuthType;
-  selectedAccountName: string;
-  accounts: DatabaseAccount[];
-  isLoadingAccounts: boolean;
-  onAccountChange: (newAccount: DatabaseAccount) => void;
-  selectedSubscriptionId: string;
-  subscriptions: Subscription[];
-  isLoadingSubscriptions: boolean;
-  onSubscriptionChange: (newSubscription: Subscription) => void;
-  displayText?: string;
-}
-
-export class AccountSwitchComponent extends React.Component<AccountSwitchComponentProps> {
-  public render(): JSX.Element {
-    return this.props.authType === AuthType.AAD ? this._renderSwitchDropDown() : this._renderAccountName();
-  }
-
-  private _renderSwitchDropDown(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-
-    const menuProps: IContextualMenuProps = {
-      directionalHintFixed: true,
-      className: "accountSwitchContextualMenu",
-      items: [
-        {
-          key: "switchSubscription",
-          onRender: this._renderSubscriptionDropdown.bind(this),
-        },
-        {
-          key: "switchAccount",
-          onRender: this._renderAccountDropDown.bind(this),
-        },
-      ],
-    };
-
-    const buttonStyles: IButtonStyles = {
-      root: {
-        fontSize: StyleConstants.DefaultFontSize,
-        height: 40,
-        padding: 0,
-        paddingLeft: 10,
-        marginRight: 5,
-        backgroundColor: StyleConstants.BaseDark,
-        color: StyleConstants.BaseLight,
-      },
-      rootHovered: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight,
-      },
-      rootFocused: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight,
-      },
-      rootPressed: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight,
-      },
-      rootExpanded: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight,
-      },
-      textContainer: {
-        flexGrow: "initial",
-      },
-    };
-
-    const buttonProps: IButtonProps = {
-      text: displayText || selectedAccountName,
-      menuProps: menuProps,
-      styles: buttonStyles,
-      className: "accountSwitchButton",
-      id: "accountSwitchButton",
-    };
-
-    return <DefaultButton {...buttonProps} />;
-  }
-
-  private _renderSubscriptionDropdown(): JSX.Element {
-    const { subscriptions, selectedSubscriptionId, isLoadingSubscriptions } = this.props;
-    const options: IDropdownOption[] = subscriptions.map((sub) => {
-      return {
-        key: sub.subscriptionId,
-        text: sub.displayName,
-        data: sub,
-      };
-    });
-
-    const placeHolderText = isLoadingSubscriptions
-      ? "Loading subscriptions"
-      : !options || !options.length
-      ? "No subscriptions found in current directory"
-      : "Select subscription from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Subscription",
-      className: "accountSwitchSubscriptionDropdown",
-      options: options,
-      onChange: this._onSubscriptionDropdownChange,
-      defaultSelectedKey: selectedSubscriptionId,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchSubscriptionDropdownMenu",
-      },
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onSubscriptionDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onSubscriptionChange(option.data);
-  };
-
-  private _renderAccountDropDown(): JSX.Element {
-    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
-    const options: IDropdownOption[] = accounts.map((account) => {
-      return {
-        key: account.name,
-        text: account.name,
-        data: account,
-      };
-    });
-    // Fabric UI will also try to select the first non-disabled option from dropdown.
-    // Add a option to prevent pop the message when user click on dropdown on first time.
-    options.unshift({
-      key: "select from list",
-      text: "Select Cosmos DB account from list",
-      data: undefined,
-    });
-
-    const placeHolderText = isLoadingAccounts
-      ? "Loading Cosmos DB accounts"
-      : !options || !options.length
-      ? "No Cosmos DB accounts found"
-      : "Select Cosmos DB account from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Cosmos DB Account Name",
-      className: "accountSwitchAccountDropdown",
-      options: options,
-      onChange: this._onAccountDropdownChange,
-      defaultSelectedKey: selectedAccountName,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchAccountDropdownMenu",
-      },
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onAccountDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onAccountChange(option.data);
-  };
-
-  private _renderAccountName(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-    return <span className="accountNameHeader">{displayText || selectedAccountName}</span>;
-  }
-}

src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
-
-export class AccountSwitchComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<AccountSwitchComponentProps>;
-
-  public renderComponent(): JSX.Element {
-    return <AccountSwitchComponent {...this.parameters()} />;
-  }
-}

src/Explorer/Controls/AccountSwitch/__snapshots__/AccountSwitchComponent.test.tsx.snap

@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders auth aad, with all information 1`] = `
-<CustomizedDefaultButton
-  className="accountSwitchButton"
-  id="accountSwitchButton"
-  menuProps={
-    Object {
-      "className": "accountSwitchContextualMenu",
-      "directionalHintFixed": true,
-      "items": Array [
-        Object {
-          "key": "switchSubscription",
-          "onRender": [Function],
-        },
-        Object {
-          "key": "switchAccount",
-          "onRender": [Function],
-        },
-      ],
-    }
-  }
-  styles={
-    Object {
-      "root": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-        "fontSize": undefined,
-        "height": 40,
-        "marginRight": 5,
-        "padding": 0,
-        "paddingLeft": 10,
-      },
-      "rootExpanded": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootFocused": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootHovered": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootPressed": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "textContainer": Object {
-        "flexGrow": "initial",
-      },
-    }
-  }
-  text="account2"
-/>
-`;
-
-exports[`test render renders auth security token, with selected account name 1`] = `
-<span
-  className="accountNameHeader"
->
-  testaccount
-</span>
-`;
-
-exports[`test render renders no auth type -> handle error in code 1`] = `
-<span
-  className="accountNameHeader"
-/>
-`;

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

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

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -38,7 +38,7 @@ export interface CommandButtonComponentProps {
   /**
    * Label for the button
    */
-  commandButtonLabel: string;
+  commandButtonLabel?: string;
 
   /**
    * True if this button opens a tab or pane, false otherwise.

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

@@ -3,7 +3,13 @@ import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric
 import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
 import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import { Link } from "office-ui-fabric-react/lib/Link";
-import { ChoiceGroup, FontIcon, IChoiceGroupProps } from "office-ui-fabric-react";
+import {
+  ChoiceGroup,
+  FontIcon,
+  IChoiceGroupProps,
+  IProgressIndicatorProps,
+  ProgressIndicator,
+} from "office-ui-fabric-react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -27,6 +33,7 @@ export interface DialogProps {
   choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
+  progressIndicatorProps?: IProgressIndicatorProps;
   primaryButtonText: string;
   secondaryButtonText: string;
   onPrimaryButtonClick: () => void;
@@ -62,13 +69,14 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
         showCloseButton: this.props.showCloseButton || false,
         onDismiss: this.props.onDismiss,
       },
-      modalProps: { isBlocking: this.props.isModal },
+      modalProps: { isBlocking: this.props.isModal, isDarkOverlay: false },
       minWidth: DIALOG_MIN_WIDTH,
       maxWidth: DIALOG_MAX_WIDTH,
     };
     const choiceGroupProps: IChoiceGroupProps = this.props.choiceGroupProps;
     const textFieldProps: ITextFieldProps = this.props.textFieldProps;
     const linkProps: LinkProps = this.props.linkProps;
+    const progressIndicatorProps: IProgressIndicatorProps = this.props.progressIndicatorProps;
     const primaryButtonProps: IButtonProps = {
       text: this.props.primaryButtonText,
       disabled: this.props.primaryButtonDisabled || false,
@@ -91,6 +99,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
             {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
           </Link>
         )}
+        {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
         <DialogFooter>
           <PrimaryButton {...primaryButtonProps} />
           {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -48,7 +48,7 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
     { key: "feature.enablettl", label: "Enable TTL", value: "true" },
     { key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
-    { key: "feature.enablecodeofconduct", label: "Enable Code Of Conduct Acknowledgement", value: "true" },
+    { key: "feature.selfServeType", label: "Self serve feature", value: "sample" },
     {
       key: "feature.enableLinkInjection",
       label: "Enable Injecting Notebook Viewer Link into the first cell",

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

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

src/Explorer/Controls/InputTypeahead/InputTypeahead.ts

@@ -71,7 +71,7 @@ interface InputTypeaheadParams {
   /**
    * This function gets called when pressing ENTER on the input box
    */
-  submitFct?: (inputValue: string, selection: Item) => void;
+  submitFct?: (inputValue: string | null, selection: Item | null) => void;
 
   /**
    * Typehead comes with a Search button that we normally remove.
@@ -88,8 +88,8 @@ interface OnClickItem {
 }
 
 interface Cache {
-  inputValue: string;
-  selection: Item;
+  inputValue: string | null;
+  selection: Item | null;
 }
 
 class InputTypeaheadViewModel {
@@ -98,15 +98,12 @@ class InputTypeaheadViewModel {
   private params: InputTypeaheadParams;
 
   private cache: Cache;
-  private inputValue: string;
-  private selection: Item;
 
   public constructor(params: InputTypeaheadParams) {
     this.instanceNumber = InputTypeaheadViewModel.instanceCount++;
     this.params = params;
 
     this.params.choices.subscribe(this.initializeTypeahead.bind(this));
-
     this.cache = {
       inputValue: null,
       selection: null,
@@ -161,7 +158,7 @@ class InputTypeaheadViewModel {
       }
     }
 
-    $.typeahead(options);
+    ($ as any).typeahead(options);
   }
 
   /**
@@ -177,11 +174,11 @@ class InputTypeaheadViewModel {
    * Use ko's "template: afterRender" callback to do that without actually using any template.
    * Another way is to call it within setTimeout() in constructor.
    */
-  private afterRender(): void {
+  public afterRender(): void {
     this.initializeTypeahead();
   }
 
-  private submit(): void {
+  public submit(): void {
     if (this.params.submitFct) {
       this.params.submitFct(this.cache.inputValue, this.cache.selection);
     }

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

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

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -18,7 +18,6 @@ import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
-import { StyleConstants } from "../../../../Common/Constants";
 
 export interface GalleryCardComponentProps {
   data: IGalleryItem;
@@ -38,7 +37,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
     GalleryCardComponent.cardImageHeight / GalleryCardComponent.CARD_WIDTH;
-  private static readonly cardDescriptionMaxChars = 88;
+  private static readonly cardDescriptionMaxChars = 80;
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
 
@@ -54,6 +53,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
 
     return (
       <Card
+        style={{ background: "white" }}
         aria-label={cardTitle}
         data-is-focusable="true"
         tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
@@ -79,12 +79,16 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
 
         <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
           <Text variant="small" nowrap>
-            {this.props.data.tags?.map((tag, index, array) => (
-              <span key={tag}>
-                <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
-                {index === array.length - 1 ? <></> : ", "}
-              </span>
-            ))}
+            {this.props.data.tags ? (
+              this.props.data.tags.map((tag, index, array) => (
+                <span key={tag}>
+                  <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
+                  {index === array.length - 1 ? <></> : ", "}
+                </span>
+              ))
+            ) : (
+              <br />
+            )}
           </Text>
 
           <Text
@@ -101,13 +105,14 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
           </Text>
 
           <Text variant="small" styles={{ root: { height: 36 } }}>
-            {this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars)}
+            {this.renderTruncatedDescription()}
           </Text>
 
           <span>
-            {this.generateIconText("RedEye", this.props.data.views.toString())}
-            {this.generateIconText("Download", this.props.data.downloads.toString())}
-            {this.props.isFavorite !== undefined &&
+            {this.props.data.views !== undefined && this.generateIconText("RedEye", this.props.data.views.toString())}
+            {this.props.data.downloads !== undefined &&
+              this.generateIconText("Download", this.props.data.downloads.toString())}
+            {this.props.data.favorites !== undefined &&
               this.generateIconText("Heart", this.props.data.favorites.toString())}
           </span>
         </Card.Section>
@@ -127,7 +132,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
               {this.props.isFavorite !== undefined &&
                 this.generateIconButtonWithTooltip(
                   this.props.isFavorite ? "HeartFill" : "Heart",
-                  this.props.isFavorite ? "Unlike" : "Like",
+                  this.props.isFavorite ? "Unfavorite" : "Favorite",
                   "left",
                   this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
                 )}
@@ -144,12 +149,17 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     );
   }
 
+  private renderTruncatedDescription = (): string => {
+    let truncatedDescription = this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars);
+    if (this.props.data.description.length > GalleryCardComponent.cardDescriptionMaxChars) {
+      truncatedDescription = `${truncatedDescription} ...`;
+    }
+    return truncatedDescription;
+  };
+
   private generateIconText = (iconName: string, text: string): JSX.Element => {
     return (
-      <Text
-        variant="tiny"
-        styles={{ root: { color: StyleConstants.BaseMedium, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
-      >
+      <Text variant="tiny" styles={{ root: { color: "#605E5C", paddingRight: GalleryCardComponent.cardItemGapSmall } }}>
         <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
       </Text>
     );

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -5,6 +5,11 @@ exports[`GalleryCardComponent renders 1`] = `
   aria-label="name"
   data-is-focusable="true"
   onClick={[Function]}
+  style={
+    Object {
+      "background": "white",
+    }
+  }
   tokens={
     Object {
       "childrenGap": 0,
@@ -88,7 +93,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -112,7 +117,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -136,7 +141,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -185,7 +190,7 @@ exports[`GalleryCardComponent renders 1`] = `
             "gapSpace": 0,
           }
         }
-        content="Like"
+        content="Favorite"
         id="TooltipHost-IconButton-Heart"
         styles={
           Object {
@@ -197,14 +202,14 @@ exports[`GalleryCardComponent renders 1`] = `
         }
       >
         <CustomizedIconButton
-          ariaLabel="Like"
+          ariaLabel="Favorite"
           iconProps={
             Object {
               "iconName": "Heart",
             }
           }
           onClick={[Function]}
-          title="Like"
+          title="Favorite"
         />
       </StyledTooltipHostBase>
       <StyledTooltipHostBase

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -2,7 +2,9 @@ import * as React from "react";
 import { JunoClient } from "../../../Juno/JunoClient";
 import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
 import { Stack, Text, Checkbox, PrimaryButton, Link } from "office-ui-fabric-react";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface CodeOfConductComponentProps {
   junoClient: JunoClient;
@@ -14,11 +16,11 @@ interface CodeOfConductComponentState {
 }
 
 export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
+  private viewCodeOfConductTraced: boolean;
   private descriptionPara1: string;
   private descriptionPara2: string;
   private descriptionPara3: string;
   private link1: { label: string; url: string };
-  private link2: { label: string; url: string };
 
   constructor(props: CodeOfConductComponentProps) {
     super(props);
@@ -27,23 +29,34 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
       readCodeOfConduct: false,
     };
 
-    this.descriptionPara1 = "Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement";
-    this.descriptionPara2 =
-      "Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.";
-    this.descriptionPara3 = "In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the ";
-    this.link1 = { label: "code of conduct", url: CodeOfConductEndpoints.codeOfConduct };
-    this.link2 = { label: "privacy statement", url: CodeOfConductEndpoints.privacyStatement };
+    this.descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
+    this.descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
+    this.descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
+    this.link1 = { label: "code of conduct.", url: CodeOfConductEndpoints.codeOfConduct };
   }
 
   private async acceptCodeOfConduct(): Promise<void> {
+    const startKey = traceStart(Action.NotebooksGalleryAcceptCodeOfConduct);
+
     try {
       const response = await this.props.junoClient.acceptCodeOfConduct();
       if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
         throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
       }
 
+      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, startKey);
+
       this.props.onAcceptCodeOfConduct(response.data);
     } catch (error) {
+      traceFailure(
+        Action.NotebooksGalleryAcceptCodeOfConduct,
+        {
+          error: getErrorMessage(error),
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+
       handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
     }
   }
@@ -53,6 +66,11 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
   };
 
   public render(): JSX.Element {
+    if (!this.viewCodeOfConductTraced) {
+      this.viewCodeOfConductTraced = true;
+      trace(Action.NotebooksGalleryViewCodeOfConduct);
+    }
+
     return (
       <Stack tokens={{ childrenGap: 20 }}>
         <Stack.Item>
@@ -69,10 +87,6 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
             <Link href={this.link1.url} target="_blank">
               {this.link1.label}
             </Link>
-            {" and "}
-            <Link href={this.link2.url} target="_blank">
-              {this.link2.label}
-            </Link>
           </Text>
         </Stack.Item>
 
@@ -87,7 +101,7 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
                 fontSize: 12,
               },
             }}
-            label="I have read and accepted the code of conduct and privacy statement"
+            label="I have read and accept the code of conduct."
             onChange={this.onChangeCheckbox}
           />
         </Stack.Item>

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponent.tsx

@@ -7,6 +7,7 @@ import Explorer from "../../Explorer";
 
 export interface GalleryAndNotebookViewerComponentProps {
   container?: Explorer;
+  isGalleryPublishEnabled: boolean;
   junoClient: JunoClient;
   notebookUrl?: string;
   galleryItem?: IGalleryItem;
@@ -60,6 +61,7 @@ export class GalleryAndNotebookViewerComponent extends React.Component<
 
     const props: GalleryViewerComponentProps = {
       container: this.props.container,
+      isGalleryPublishEnabled: this.props.isGalleryPublishEnabled,
       junoClient: this.props.junoClient,
       selectedTab: this.state.selectedTab,
       sortBy: this.state.sortBy,

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx

@@ -7,14 +7,20 @@ import {
 } from "./GalleryAndNotebookViewerComponent";
 
 export class GalleryAndNotebookViewerComponentAdapter implements ReactAdapter {
+  private key: string;
   public parameters: ko.Observable<number>;
 
   constructor(private props: GalleryAndNotebookViewerComponentProps) {
+    this.reset();
     this.parameters = ko.observable<number>(Date.now());
   }
 
   public renderComponent(): JSX.Element {
-    return <GalleryAndNotebookViewerComponent {...this.props} />;
+    return <GalleryAndNotebookViewerComponent key={this.key} {...this.props} />;
+  }
+
+  public reset(): void {
+    this.key = `GalleryAndNotebookViewerComponent-${Date.now()}`;
   }
 
   public triggerRender(): void {

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

@@ -6,4 +6,16 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
+  background: @GalleryBackgroundColor;
+}
+
+.publicGalleryTabContainer {
+  position: relative;
+  height: 100vh;
+}
+
+.publicGalleryTabOverlayContent {
+  background: white;
+  padding: 20px;
+  margin: 10%;
 }

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.test.tsx

@@ -5,6 +5,7 @@ import { GalleryViewerComponent, GalleryViewerComponentProps, GalleryTab, SortBy
 describe("GalleryViewerComponent", () => {
   it("renders", () => {
     const props: GalleryViewerComponentProps = {
+      isGalleryPublishEnabled: false,
       junoClient: undefined,
       selectedTab: GalleryTab.OfficialSamples,
       sortBy: SortBy.MostViewed,

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -1,6 +1,7 @@
 import {
   Dropdown,
   FocusZone,
+  FontIcon,
   FontWeights,
   IDropdownOption,
   IPageSpecification,
@@ -8,15 +9,19 @@ import {
   IPivotProps,
   IRectangle,
   Label,
+  Link,
   List,
+  Overlay,
   Pivot,
   PivotItem,
   SearchBox,
+  Spinner,
+  SpinnerSize,
   Stack,
   Text,
 } from "office-ui-fabric-react";
 import * as React from "react";
-import { IGalleryItem, JunoClient, IJunoResponse, IPublicGalleryData } from "../../../Juno/JunoClient";
+import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
@@ -26,9 +31,12 @@ import Explorer from "../../Explorer";
 import { CodeOfConductComponent } from "./CodeOfConductComponent";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface GalleryViewerComponentProps {
   container?: Explorer;
+  isGalleryPublishEnabled: boolean;
   junoClient: JunoClient;
   selectedTab: GalleryTab;
   sortBy: SortBy;
@@ -63,6 +71,8 @@ interface GalleryViewerComponentState {
   searchText: string;
   dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
+  isFetchingPublishedNotebooks: boolean;
+  isFetchingFavouriteNotebooks: boolean;
 }
 
 interface GalleryTabInfo {
@@ -73,18 +83,24 @@ interface GalleryTabInfo {
 export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps, GalleryViewerComponentState> {
   public static readonly OfficialSamplesTitle = "Official samples";
   public static readonly PublicGalleryTitle = "Public gallery";
-  public static readonly FavoritesTitle = "Liked";
-  public static readonly PublishedTitle = "Your published work";
+  public static readonly FavoritesTitle = "My favorites";
+  public static readonly PublishedTitle = "My published work";
 
   private static readonly rowsPerPage = 5;
 
   private static readonly mostViewedText = "Most viewed";
   private static readonly mostDownloadedText = "Most downloaded";
-  private static readonly mostFavoritedText = "Most liked";
+  private static readonly mostFavoritedText = "Most favorited";
   private static readonly mostRecentText = "Most recent";
 
   private readonly sortingOptions: IDropdownOption[];
 
+  private viewGalleryTraced: boolean;
+  private viewOfficialSamplesTraced: boolean;
+  private viewPublicGalleryTraced: boolean;
+  private viewFavoritesTraced: boolean;
+  private viewPublishedNotebooksTraced: boolean;
+
   private sampleNotebooks: IGalleryItem[];
   private publicNotebooks: IGalleryItem[];
   private favoriteNotebooks: IGalleryItem[];
@@ -106,6 +122,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       searchText: props.searchText,
       dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
+      isFetchingFavouriteNotebooks: true,
+      isFetchingPublishedNotebooks: true,
     };
 
     this.sortingOptions = [
@@ -136,9 +154,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   public render(): JSX.Element {
-    const tabs: GalleryTabInfo[] = [this.createTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+    this.traceViewGallery();
 
-    if (this.props.container?.isGalleryPublishEnabled()) {
+    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+
+    if (this.props.isGalleryPublishEnabled) {
       tabs.push(
         this.createPublicGalleryTab(
           GalleryTab.PublicGallery,
@@ -146,13 +166,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           this.state.isCodeOfConductAccepted
         )
       );
-      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.
-      if (this.state.isCodeOfConductAccepted !== false) {
-        tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
-      }
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+      tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
     }
 
     const pivotProps: IPivotProps = {
@@ -183,6 +201,74 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   }
 
+  private traceViewGallery = (): void => {
+    if (!this.viewGalleryTraced) {
+      this.viewGalleryTraced = true;
+      trace(Action.NotebooksGalleryViewGallery);
+    }
+
+    switch (this.state.selectedTab) {
+      case GalleryTab.OfficialSamples:
+        if (!this.viewOfficialSamplesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewOfficialSamplesTraced = true;
+          trace(Action.NotebooksGalleryViewOfficialSamples);
+        }
+        break;
+      case GalleryTab.PublicGallery:
+        if (!this.viewPublicGalleryTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublicGalleryTraced = true;
+          trace(Action.NotebooksGalleryViewPublicGallery);
+        }
+        break;
+      case GalleryTab.Favorites:
+        if (!this.viewFavoritesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewFavoritesTraced = true;
+          trace(Action.NotebooksGalleryViewFavorites);
+        }
+        break;
+      case GalleryTab.Published:
+        if (!this.viewPublishedNotebooksTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublishedNotebooksTraced = true;
+          trace(Action.NotebooksGalleryViewPublishedNotebooks);
+        }
+        break;
+      default:
+        throw new Error(`Unknown selected tab ${this.state.selectedTab}`);
+    }
+  };
+
+  private resetViewGalleryTabTracedFlags = (): void => {
+    this.viewOfficialSamplesTraced = false;
+    this.viewPublicGalleryTraced = false;
+    this.viewFavoritesTraced = false;
+    this.viewPublishedNotebooksTraced = false;
+  };
+
+  private isEmptyData = (data: IGalleryItem[]): boolean => {
+    return !data || data.length === 0;
+  };
+
+  private createEmptyTabContent = (iconName: string, line1: JSX.Element, line2: JSX.Element): JSX.Element => {
+    return (
+      <Stack horizontalAlign="center" tokens={{ childrenGap: 10 }}>
+        <FontIcon iconName={iconName} style={{ fontSize: 100, color: "lightgray", marginTop: 20 }} />
+        <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{line1}</Text>
+        <Text>{line2}</Text>
+      </Stack>
+    );
+  };
+
+  private createSamplesTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
+    return {
+      tab,
+      content: this.createSearchBarHeader(this.createCardsTabContent(data)),
+    };
+  };
+
   private createPublicGalleryTab(
     tab: GalleryTab,
     data: IGalleryItem[],
@@ -194,28 +280,63 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
-  private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
+  private getFavouriteNotebooksTabContent = (data: IGalleryItem[]) => {
+    if (this.isEmptyData(data)) {
+      if (this.state.isFetchingFavouriteNotebooks) {
+        return <Spinner size={SpinnerSize.large} />;
+      }
+      return this.createEmptyTabContent(
+        "ContactHeart",
+        <>You don&apos;t have any favorites yet</>,
+        <>
+          Favorite any notebook from the{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.OfficialSamples })}>official samples</Link> or{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link>
+        </>
+      );
+    }
+    return this.createSearchBarHeader(this.createCardsTabContent(data));
+  };
+
+  private createFavoritesTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.createSearchBarHeader(this.createCardsTabContent(data)),
+      content: this.getFavouriteNotebooksTabContent(data),
     };
   }
 
+  private getPublishedNotebooksTabContent = (data: IGalleryItem[]) => {
+    if (this.isEmptyData(data)) {
+      if (this.state.isFetchingPublishedNotebooks) {
+        return <Spinner size={SpinnerSize.large} />;
+      }
+      return this.createEmptyTabContent(
+        "Contact",
+        <>
+          You have not published anything to the{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link> yet
+        </>,
+        <>Publish your notebooks to share your work with other users</>
+      );
+    }
+    return this.createPublishedNotebooksTabContent(data);
+  };
+
   private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      content: this.createPublishedNotebooksTabContent(data),
+      content: this.getPublishedNotebooksTabContent(data),
     };
   };
 
   private createPublishedNotebooksTabContent = (data: IGalleryItem[]): JSX.Element => {
     const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(data);
     const content = (
-      <Stack tokens={{ childrenGap: 10 }}>
+      <Stack tokens={{ childrenGap: 20 }}>
         {published?.length > 0 &&
           this.createPublishedNotebooksSectionContent(
             undefined,
-            "You have successfully published the following notebook(s) to public gallery and shared with other Azure Cosmos DB users.",
+            "You have successfully published and shared the following notebook(s) to the public gallery.",
             this.createCardsTabContent(published)
           )}
         {underReview?.length > 0 &&
@@ -242,24 +363,33 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     content: JSX.Element
   ): JSX.Element => {
     return (
-      <Stack tokens={{ childrenGap: 5 }}>
-        {title && <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{title}</Text>}
-        {description && <Text>{description}</Text>}
+      <Stack tokens={{ childrenGap: 10 }}>
+        {title && (
+          <Text styles={{ root: { fontWeight: FontWeights.semibold, marginLeft: 10, marginRight: 10 } }}>{title}</Text>
+        )}
+        {description && <Text styles={{ root: { marginLeft: 10, marginRight: 10 } }}>{description}</Text>}
         {content}
       </Stack>
     );
   };
 
   private createPublicGalleryTabContent(data: IGalleryItem[], acceptedCodeOfConduct: boolean): JSX.Element {
-    return acceptedCodeOfConduct === false ? (
-      <CodeOfConductComponent
-        junoClient={this.props.junoClient}
-        onAcceptCodeOfConduct={(result: boolean) => {
-          this.setState({ isCodeOfConductAccepted: result });
-        }}
-      />
-    ) : (
-      this.createSearchBarHeader(this.createCardsTabContent(data))
+    return (
+      <div className="publicGalleryTabContainer">
+        {this.createSearchBarHeader(this.createCardsTabContent(data))}
+        {acceptedCodeOfConduct === false && (
+          <Overlay isDarkThemed>
+            <div className="publicGalleryTabOverlayContent">
+              <CodeOfConductComponent
+                junoClient={this.props.junoClient}
+                onAcceptCodeOfConduct={(result: boolean) => {
+                  this.setState({ isCodeOfConductAccepted: result });
+                }}
+              />
+            </div>
+          </Overlay>
+        )}
+      </div>
     );
   }
 
@@ -276,7 +406,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           <Stack.Item styles={{ root: { minWidth: 200 } }}>
             <Dropdown options={this.sortingOptions} selectedKey={this.state.sortBy} onChange={this.onDropdownChange} />
           </Stack.Item>
-          {(!this.props.container || this.props.container.isGalleryPublishEnabled()) && (
+          {this.props.isGalleryPublishEnabled && (
             <Stack.Item>
               <InfoComponent />
             </Stack.Item>
@@ -288,7 +418,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   private createCardsTabContent(data: IGalleryItem[]): JSX.Element {
-    return (
+    return data ? (
       <FocusZone>
         <List
           items={data}
@@ -297,12 +427,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           onRenderCell={this.onRenderCell}
         />
       </FocusZone>
+    ) : (
+      <Spinner size={SpinnerSize.large} />
     );
   }
 
   private createPolicyViolationsListContent(data: IGalleryItem[]): JSX.Element {
     return (
-      <table>
+      <table style={{ margin: 10 }}>
         <tbody>
           <tr>
             <th>Name</th>
@@ -351,6 +483,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         }
 
         this.sampleNotebooks = response.data;
+
+        trace(Action.NotebooksGalleryOfficialSamplesCount, ActionModifiers.Mark, {
+          count: this.sampleNotebooks?.length,
+        });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadSampleNotebooks", "Failed to load sample notebooks");
       }
@@ -364,9 +500,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublicNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
-        let response: IJunoResponse<IPublicGalleryData> | IJunoResponse<IGalleryItem[]>;
-        if (this.props.container.isCodeOfConductEnabled()) {
-          response = await this.props.junoClient.fetchPublicNotebooks();
+        let response: IJunoResponse<IGalleryItem[]> | IJunoResponse<IPublicGalleryData>;
+        if (this.props.container) {
+          response = await this.props.junoClient.getPublicGalleryData();
           this.isCodeOfConductAccepted = response.data?.metadata.acceptedCodeOfConduct;
           this.publicNotebooks = response.data?.notebooksData;
         } else {
@@ -377,6 +513,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading public notebooks`);
         }
+
+        trace(Action.NotebooksGalleryPublicGalleryCount, ActionModifiers.Mark, { count: this.publicNotebooks?.length });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadPublicNotebooks", "Failed to load public notebooks");
       }
@@ -391,14 +529,19 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadFavoriteNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
+        this.setState({ isFetchingFavouriteNotebooks: true });
         const response = await this.props.junoClient.getFavoriteNotebooks();
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading favorite notebooks`);
         }
 
         this.favoriteNotebooks = response.data;
+
+        trace(Action.NotebooksGalleryFavoritesCount, ActionModifiers.Mark, { count: this.favoriteNotebooks?.length });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadFavoriteNotebooks", "Failed to load favorite notebooks");
+      } finally {
+        this.setState({ isFetchingFavouriteNotebooks: false });
       }
     }
 
@@ -417,14 +560,25 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublishedNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
+        this.setState({ isFetchingPublishedNotebooks: true });
         const response = await this.props.junoClient.getPublishedNotebooks();
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading published notebooks`);
         }
 
         this.publishedNotebooks = response.data;
+
+        const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(this.publishedNotebooks);
+        trace(Action.NotebooksGalleryPublishedCount, ActionModifiers.Mark, {
+          count: this.publishedNotebooks?.length,
+          publishedCount: published.length,
+          underReviewCount: underReview.length,
+          removedCount: removed.length,
+        });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadPublishedNotebooks", "Failed to load published notebooks");
+      } finally {
+        this.setState({ isFetchingPublishedNotebooks: false });
       }
     }
 
@@ -570,7 +724,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/NotebookGallery/__snapshots__/CodeOfConductComponent.test.tsx.snap

@@ -17,35 +17,28 @@ exports[`CodeOfConductComponent renders 1`] = `
         }
       }
     >
-      Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement
+      Azure Cosmos DB Notebook Gallery - Code of Conduct
     </Text>
   </StackItem>
   <StackItem>
     <Text>
-      Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.
+      The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.
     </Text>
   </StackItem>
   <StackItem>
     <Text>
-      In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the 
+      In order to view and publish your samples to the gallery, you must accept the 
       <StyledLinkBase
         href="https://aka.ms/cosmos-code-of-conduct"
         target="_blank"
       >
-        code of conduct
-      </StyledLinkBase>
-       and 
-      <StyledLinkBase
-        href="https://aka.ms/ms-privacy-policy"
-        target="_blank"
-      >
-        privacy statement
+        code of conduct.
       </StyledLinkBase>
     </Text>
   </StackItem>
   <StackItem>
     <StyledCheckboxBase
-      label="I have read and accepted the code of conduct and privacy statement"
+      label="I have read and accept the code of conduct."
       onChange={[Function]}
       styles={
         Object {

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -77,24 +77,11 @@ exports[`GalleryViewerComponent renders 1`] = `
               selectedKey={0}
             />
           </StackItem>
-          <StackItem>
-            <InfoComponent />
-          </StackItem>
         </Stack>
         <StackItem>
-          <FocusZone
-            direction={2}
-            isCircularNavigation={false}
-            shouldRaiseClicks={true}
-          >
-            <List
-              getPageSpecification={[Function]}
-              onRenderCell={[Function]}
-              renderedWindowsAhead={3}
-              renderedWindowsBehind={2}
-              startIndex={0}
-            />
-          </FocusZone>
+          <StyledSpinnerBase
+            size={3}
+          />
         </StackItem>
       </Stack>
     </PivotItem>

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -31,6 +31,26 @@ export interface NotebookMetadataComponentProps {
 }
 
 export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
+  private renderFavouriteButton = (): JSX.Element => {
+    return (
+      <Text>
+        {this.props.isFavorite !== undefined ? (
+          <>
+            <IconButton
+              iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
+              onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
+            />
+            {this.props.data.favorites} likes
+          </>
+        ) : (
+          <>
+            <Icon iconName="Heart" /> {this.props.data.favorites} likes
+          </>
+        )}
+      </Text>
+    );
+  };
+
   public render(): JSX.Element {
     const options: Intl.DateTimeFormatOptions = {
       year: "numeric",
@@ -49,19 +69,7 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
             </Text>
           </Stack.Item>
 
-          <Stack.Item>
-            <Text>
-              {this.props.isFavorite !== undefined && (
-                <>
-                  <IconButton
-                    iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
-                    onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
-                  />
-                  {this.props.data.favorites} likes
-                </>
-              )}
-            </Text>
-          </Stack.Item>
+          <Stack.Item>{this.renderFavouriteButton()}</Stack.Item>
 
           {this.props.downloadButtonText && (
             <Stack.Item>

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,14 +3,11 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
-import * as Logger from "../../../Common/Logger";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
@@ -21,7 +18,9 @@ import Explorer from "../../Explorer";
 import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -80,6 +79,12 @@ export class NotebookViewerComponent
   }
 
   private async loadNotebookContent(): Promise<void> {
+    const startKey = traceStart(Action.NotebooksGalleryViewNotebook, {
+      notebookUrl: this.props.notebookUrl,
+      notebookId: this.props.galleryItem?.id,
+      isSample: this.props.galleryItem?.isSample,
+    });
+
     try {
       const response = await fetch(this.props.notebookUrl);
       if (!response.ok) {
@@ -87,6 +92,16 @@ export class NotebookViewerComponent
         throw new Error(`Received HTTP ${response.status} while fetching ${this.props.notebookUrl}`);
       }
 
+      traceSuccess(
+        Action.NotebooksGalleryViewNotebook,
+        {
+          notebookUrl: this.props.notebookUrl,
+          notebookId: this.props.galleryItem?.id,
+          isSample: this.props.galleryItem?.isSample,
+        },
+        startKey
+      );
+
       const notebook: Notebook = await response.json();
       this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
@@ -101,6 +116,18 @@ export class NotebookViewerComponent
         SessionStorageUtility.setEntry(this.props.galleryItem?.id, "true");
       }
     } catch (error) {
+      traceFailure(
+        Action.NotebooksGalleryViewNotebook,
+        {
+          notebookUrl: this.props.notebookUrl,
+          notebookId: this.props.galleryItem?.id,
+          isSample: this.props.galleryItem?.isSample,
+          error: getErrorMessage(error),
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+
       this.setState({ showProgressBar: false });
       handleError(error, "NotebookViewerComponent/loadNotebookContent", "Failed to load notebook content");
     }
@@ -178,6 +205,32 @@ export class NotebookViewerComponent
     };
   }
 
+  // DialogHost
+  showOkModalDialog(
+    title: string,
+    msg: string,
+    okLabel: string,
+    onOk: () => void,
+    progressIndicatorProps?: IProgressIndicatorProps
+  ): void {
+    this.setState({
+      dialogProps: {
+        isModal: true,
+        visible: true,
+        title,
+        subText: msg,
+        primaryButtonText: okLabel,
+        onPrimaryButtonClick: () => {
+          this.setState({ dialogProps: undefined });
+          onOk && onOk();
+        },
+        secondaryButtonText: undefined,
+        onSecondaryButtonClick: undefined,
+        progressIndicatorProps,
+      },
+    });
+  }
+
   // DialogHost
   showOkCancelModalDialog(
     title: string,
@@ -186,8 +239,10 @@ export class NotebookViewerComponent
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
+    progressIndicatorProps?: IProgressIndicatorProps,
     choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
   ): void {
     this.setState({
       dialogProps: {
@@ -205,8 +260,10 @@ export class NotebookViewerComponent
           this.setState({ dialogProps: undefined });
           onCancel && onCancel();
         },
+        progressIndicatorProps,
         choiceGroupProps,
         textFieldProps,
+        primaryButtonDisabled,
       },
     });
   }

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

@@ -2,7 +2,7 @@ import { shallow } from "enzyme";
 import React from "react";
 import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import SettingsTabV2 from "../../Tabs/SettingsTabV2";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { collection } from "./TestUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
@@ -31,25 +31,21 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
 }));
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import Q from "q";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
 
 describe("SettingsComponent", () => {
   const baseProps: SettingsComponentProps = {
-    settingsTab: new SettingsTabV2({
+    settingsTab: new CollectionSettingsTabV2({
       collection: collection,
-      tabKind: ViewModels.CollectionTabKind.SettingsV2,
+      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
       title: "Scale & Settings",
       tabPath: "",
       node: undefined,
       hashLocation: "settings",
       isActive: ko.observable(false),
       onUpdateTabsButtons: undefined,
-      getPendingNotification: Q.Promise<DataModels.Notification>(() => {
-        return;
-      }),
     }),
   };
 
@@ -93,6 +89,7 @@ describe("SettingsComponent", () => {
       manualThroughput: undefined,
       minimumThroughput: 400,
       id: "test",
+      offerReplacePending: false,
     });
 
     const props = { ...baseProps };
@@ -141,6 +138,7 @@ describe("SettingsComponent", () => {
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
+      getPendingThroughputSplitNotification: undefined,
     } as ViewModels.Database;
     newCollection.getDatabase = () => newDatabase;
     newCollection.offer = ko.observable(undefined);
@@ -230,7 +228,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

@@ -11,7 +11,7 @@ import Explorer from "../../Explorer";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import SettingsTab from "../../Tabs/SettingsTabV2";
+import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
@@ -58,7 +58,7 @@ interface ButtonV2 {
 }
 
 export interface SettingsComponentProps {
-  settingsTab: SettingsTab;
+  settingsTab: SettingsTabV2;
 }
 
 export interface SettingsComponentState {
@@ -116,7 +116,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private discardSettingsChangesButton: ButtonV2;
 
   private isAnalyticalStorageEnabled: boolean;
+  private isCollectionSettingsTab: boolean;
   private collection: ViewModels.Collection;
+  private database: ViewModels.Database;
+  private offer: DataModels.Offer;
   private container: Explorer;
   private changeFeedPolicyVisible: boolean;
   private isFixedContainer: boolean;
@@ -126,20 +129,28 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   constructor(props: SettingsComponentProps) {
     super(props);
 
-    this.collection = this.props.settingsTab.collection as ViewModels.Collection;
-    this.container = this.collection?.container;
-    this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
-    this.shouldShowIndexingPolicyEditor =
-      this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
+    this.isCollectionSettingsTab = this.props.settingsTab.tabKind === ViewModels.CollectionTabKind.CollectionSettingsV2;
+    if (this.isCollectionSettingsTab) {
+      this.collection = this.props.settingsTab.collection as ViewModels.Collection;
+      this.container = this.collection?.container;
+      this.offer = this.collection?.offer();
+      this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
+      this.shouldShowIndexingPolicyEditor =
+        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
 
-    this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
-      Constants.Features.enableChangeFeedPolicy
-    );
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );
 
-    // Mongo container with system partition key still treat as "Fixed"
-    this.isFixedContainer =
-      !this.collection.partitionKey ||
-      (this.container.isPreferredApiMongoDB() && this.collection.partitionKey.systemKey);
+      // Mongo container with system partition key still treat as "Fixed"
+      this.isFixedContainer =
+        this.container.isPreferredApiMongoDB() &&
+        (!this.collection?.partitionKey || this.collection?.partitionKey.systemKey);
+    } else {
+      this.database = this.props.settingsTab.database;
+      this.container = this.database?.container;
+      this.offer = this.database?.offer();
+    }
 
     this.state = {
       throughput: undefined,
@@ -206,18 +217,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   }
 
   componentDidMount(): void {
-    this.refreshIndexTransformationProgress();
-    this.loadMongoIndexes();
+    if (this.isCollectionSettingsTab) {
+      this.refreshIndexTransformationProgress();
+      this.loadMongoIndexes();
+    }
+
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
@@ -270,7 +284,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   private setAutoPilotStates = (): void => {
-    const autoscaleMaxThroughput = this.collection?.offer()?.autoscaleMaxThroughput;
+    const autoscaleMaxThroughput = this.offer?.autoscaleMaxThroughput;
 
     if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
       this.setState({
@@ -295,7 +309,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    return !!this.collection?.offer()?.headers?.[Constants.HttpHeaders.offerReplacePending];
+    return this.offer?.offerReplacePending;
   };
 
   public onSaveClick = async (): Promise<void> => {
@@ -309,174 +323,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       tabTitle: this.props.settingsTab.tabTitle(),
     });
 
-    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
     try {
-      if (
-        this.state.isSubSettingsSaveable ||
-        this.state.isIndexingPolicyDirty ||
-        this.state.isConflictResolutionDirty
-      ) {
-        let defaultTtl: number;
-        switch (this.state.timeToLive) {
-          case TtlType.On:
-            defaultTtl = Number(this.state.timeToLiveSeconds);
-            break;
-          case TtlType.OnNoDefault:
-            defaultTtl = -1;
-            break;
-          case TtlType.Off:
-          default:
-            defaultTtl = undefined;
-            break;
-        }
-
-        const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
-        newCollection.defaultTtl = defaultTtl;
-
-        newCollection.indexingPolicy = this.state.indexingPolicyContent;
-
-        newCollection.changeFeedPolicy =
-          this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
-            ? {
-                retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
-              }
-            : undefined;
-
-        newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
-
-        newCollection.geospatialConfig = {
-          type: this.state.geospatialConfigType,
-        };
-
-        const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
-        if (conflictResolutionChanges) {
-          newCollection.conflictResolutionPolicy = conflictResolutionChanges;
-        }
-
-        const updatedCollection: DataModels.Collection = await updateCollection(
-          this.collection.databaseId,
-          this.collection.id(),
-          newCollection
-        );
-        this.collection.rawDataModel = updatedCollection;
-        this.collection.defaultTtl(updatedCollection.defaultTtl);
-        this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
-        this.collection.id(updatedCollection.id);
-        this.collection.indexingPolicy(updatedCollection.indexingPolicy);
-        this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
-        this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
-        this.collection.geospatialConfig(updatedCollection.geospatialConfig);
-
-        if (wasIndexingPolicyModified) {
-          await this.refreshIndexTransformationProgress();
-        }
-
-        this.setState({
-          isSubSettingsSaveable: false,
-          isSubSettingsDiscardable: false,
-          isIndexingPolicyDirty: false,
-          isConflictResolutionDirty: false,
-        });
-      }
-
-      if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
-        try {
-          const newMongoIndexes = this.getMongoIndexesToSave();
-          const newMongoCollection: MongoDBCollectionResource = {
-            ...this.mongoDBCollectionResource,
-            indexes: newMongoIndexes,
-          };
-
-          this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
-            this.collection.databaseId,
-            this.collection.id(),
-            newMongoCollection
-          );
-
-          await this.refreshIndexTransformationProgress();
-          this.setState({
-            isMongoIndexingPolicySaveable: false,
-            indexesToDrop: [],
-            indexesToAdd: [],
-            currentMongoIndexes: [...this.mongoDBCollectionResource.indexes],
-          });
-          traceSuccess(
-            Action.MongoIndexUpdated,
-            {
-              databaseAccountName: this.container.databaseAccount()?.name,
-              databaseName: this.collection?.databaseId,
-              collectionName: this.collection?.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.props.settingsTab.tabTitle(),
-            },
-            startKey
-          );
-        } catch (error) {
-          traceFailure(
-            Action.MongoIndexUpdated,
-            {
-              databaseAccountName: this.container.databaseAccount()?.name,
-              databaseName: this.collection?.databaseId,
-              collectionName: this.collection?.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.props.settingsTab.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            startKey
-          );
-          throw error;
-        }
-      }
-
-      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 updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-        this.collection.offer(updatedOffer);
-        this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
-        if (this.state.isAutoPilotSelected) {
-          this.setState({
-            autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
-            autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
-          });
-        } else {
-          this.setState({
-            throughput: updatedOffer.manualThroughput,
-            throughputBaseline: updatedOffer.manualThroughput,
-          });
-        }
-      }
-      this.container.isRefreshingExplorer(false);
-      this.setBaseline();
-      this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
-      traceSuccess(
-        Action.SettingsV2Updated,
-        {
-          databaseAccountName: this.container.databaseAccount()?.name,
-          databaseName: this.collection?.databaseId,
-          collectionName: this.collection?.id(),
-          defaultExperience: this.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.props.settingsTab.tabTitle(),
-        },
-        startKey
-      );
+      await (this.isCollectionSettingsTab
+        ? this.saveCollectionSettings(startKey)
+        : this.saveDatabaseSettings(startKey));
     } catch (error) {
       this.container.isRefreshingExplorer(false);
       this.props.settingsTab.isExecutionError(true);
@@ -495,8 +345,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         },
         startKey
       );
+    } finally {
+      this.props.settingsTab.isExecuting(false);
     }
-    this.props.settingsTab.isExecuting(false);
   };
 
   public onRevertClick = (): void => {
@@ -684,7 +535,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;
       }
     }
@@ -693,6 +544,17 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public setBaseline = (): void => {
+    const offerThroughput = this.offer?.manualThroughput;
+
+    if (!this.isCollectionSettingsTab) {
+      this.setState({
+        throughput: offerThroughput,
+        throughputBaseline: offerThroughput,
+      });
+
+      return;
+    }
+
     const defaultTtl = this.collection.defaultTtl();
 
     let timeToLive: TtlType = this.state.timeToLive;
@@ -725,7 +587,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    const offerThroughput = this.collection.offer()?.manualThroughput;
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
@@ -811,9 +672,225 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.setState({ selectedTab: selectedTab });
   };
 
+  private saveDatabaseSettings = async (startKey: number): Promise<void> => {
+    if (this.state.isScaleSaveable) {
+      const updateOfferParams: DataModels.UpdateOfferParams = {
+        databaseId: this.database.id(),
+        currentOffer: this.database.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 updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.database.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+      if (this.state.isAutoPilotSelected) {
+        this.setState({
+          autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+          autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
+        });
+      } else {
+        this.setState({
+          throughput: updatedOffer.manualThroughput,
+          throughputBaseline: updatedOffer.manualThroughput,
+        });
+      }
+    }
+
+    this.container.isRefreshingExplorer(false);
+    this.setBaseline();
+    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+    traceSuccess(
+      Action.SettingsV2Updated,
+      {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        databaseName: this.database.id(),
+        defaultExperience: this.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle: this.props.settingsTab.tabTitle(),
+      },
+      startKey
+    );
+  };
+
+  private saveCollectionSettings = async (startKey: number): Promise<void> => {
+    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
+
+    if (this.state.isSubSettingsSaveable || this.state.isIndexingPolicyDirty || this.state.isConflictResolutionDirty) {
+      let defaultTtl: number;
+      switch (this.state.timeToLive) {
+        case TtlType.On:
+          defaultTtl = Number(this.state.timeToLiveSeconds);
+          break;
+        case TtlType.OnNoDefault:
+          defaultTtl = -1;
+          break;
+        case TtlType.Off:
+        default:
+          defaultTtl = undefined;
+          break;
+      }
+
+      const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
+      newCollection.defaultTtl = defaultTtl;
+
+      newCollection.indexingPolicy = this.state.indexingPolicyContent;
+
+      newCollection.changeFeedPolicy =
+        this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
+          ? {
+              retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
+            }
+          : undefined;
+
+      newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
+
+      newCollection.geospatialConfig = {
+        type: this.state.geospatialConfigType,
+      };
+
+      const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
+      if (conflictResolutionChanges) {
+        newCollection.conflictResolutionPolicy = conflictResolutionChanges;
+      }
+
+      const updatedCollection: DataModels.Collection = await updateCollection(
+        this.collection.databaseId,
+        this.collection.id(),
+        newCollection
+      );
+      this.collection.rawDataModel = updatedCollection;
+      this.collection.defaultTtl(updatedCollection.defaultTtl);
+      this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
+      this.collection.id(updatedCollection.id);
+      this.collection.indexingPolicy(updatedCollection.indexingPolicy);
+      this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
+      this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
+      this.collection.geospatialConfig(updatedCollection.geospatialConfig);
+
+      if (wasIndexingPolicyModified) {
+        await this.refreshIndexTransformationProgress();
+      }
+
+      this.setState({
+        isSubSettingsSaveable: false,
+        isSubSettingsDiscardable: false,
+        isIndexingPolicyDirty: false,
+        isConflictResolutionDirty: false,
+      });
+    }
+
+    if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
+      try {
+        const newMongoIndexes = this.getMongoIndexesToSave();
+        const newMongoCollection: MongoDBCollectionResource = {
+          ...this.mongoDBCollectionResource,
+          indexes: newMongoIndexes,
+        };
+
+        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
+          this.collection.databaseId,
+          this.collection.id(),
+          newMongoCollection
+        );
+
+        await this.refreshIndexTransformationProgress();
+        this.setState({
+          isMongoIndexingPolicySaveable: false,
+          indexesToDrop: [],
+          indexesToAdd: [],
+          currentMongoIndexes: [...this.mongoDBCollectionResource.indexes],
+        });
+        traceSuccess(
+          Action.MongoIndexUpdated,
+          {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            databaseName: this.collection?.databaseId,
+            collectionName: this.collection?.id(),
+            defaultExperience: this.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: this.props.settingsTab.tabTitle(),
+          },
+          startKey
+        );
+      } catch (error) {
+        traceFailure(
+          Action.MongoIndexUpdated,
+          {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            databaseName: this.collection?.databaseId,
+            collectionName: this.collection?.id(),
+            defaultExperience: this.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: this.props.settingsTab.tabTitle(),
+            error: getErrorMessage(error),
+            errorStack: getErrorStack(error),
+          },
+          startKey
+        );
+        throw error;
+      }
+    }
+
+    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 updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.collection.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+      if (this.state.isAutoPilotSelected) {
+        this.setState({
+          autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+          autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
+        });
+      } else {
+        this.setState({
+          throughput: updatedOffer.manualThroughput,
+          throughputBaseline: updatedOffer.manualThroughput,
+        });
+      }
+    }
+    this.container.isRefreshingExplorer(false);
+    this.setBaseline();
+    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+    traceSuccess(
+      Action.SettingsV2Updated,
+      {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        databaseName: this.collection?.databaseId,
+        collectionName: this.collection?.id(),
+        defaultExperience: this.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle: this.props.settingsTab.tabTitle(),
+      },
+      startKey
+    );
+  };
+
   public render(): JSX.Element {
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
+      database: this.database,
       container: this.container,
       isFixedContainer: this.isFixedContainer,
       onThroughputChange: this.onThroughputChange,
@@ -830,6 +907,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       initialNotification: this.props.settingsTab.pendingNotification(),
     };
 
+    if (!this.isCollectionSettingsTab) {
+      return (
+        <div className="settingsV2MainContainer">
+          <div className="settingsV2TabsContainer">
+            <ScaleComponent {...scaleComponentProps} />
+          </div>
+        </div>
+      );
+    }
+
     const subSettingsComponentProps: SubSettingsComponentProps = {
       collection: this.collection,
       container: this.container,
@@ -899,7 +986,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
 
     const tabs: SettingsV2TabInfo[] = [];
-    if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
+    if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
         tab: SettingsV2TabTypes.ScaleTab,
         content: <ScaleComponent {...scaleComponentProps} />,

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

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

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

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

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

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

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

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

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

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

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

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

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

@@ -18,6 +18,7 @@ describe("ScaleComponent", () => {
 
   const baseProps: ScaleComponentProps = {
     collection: collection,
+    database: undefined,
     container: container,
     isFixedContainer: false,
     onThroughputChange: () => {
@@ -59,7 +60,7 @@ describe("ScaleComponent", () => {
       autoscaleMaxThroughput: maxThroughput,
       minimumThroughput: 400,
       id: "offer",
-      headers: { "x-ms-offer-replace-pending": true },
+      offerReplacePending: true,
     });
     const newProps = {
       ...baseProps,

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

@@ -16,11 +16,12 @@ import {
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
-import { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
 import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
   collection: ViewModels.Collection;
+  database: ViewModels.Database;
   container: Explorer;
   isFixedContainer: boolean;
   onThroughputChange: (newThroughput: number) => void;
@@ -39,9 +40,16 @@ export interface ScaleComponentProps {
 
 export class ScaleComponent extends React.Component<ScaleComponentProps> {
   private isEmulator: boolean;
+  private offer: DataModels.Offer;
+  private databaseId: string;
+  private collectionId: string;
+
   constructor(props: ScaleComponentProps) {
     super(props);
     this.isEmulator = configContext.platform === Platform.Emulator;
+    this.offer = this.props.database?.offer() || this.props.collection?.offer();
+    this.databaseId = this.props.database?.id() || this.props.collection.databaseId;
+    this.collectionId = this.props.collection?.id();
   }
 
   public isAutoScaleEnabled = (): boolean => {
@@ -87,9 +95,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
     }
 
-    return (
-      this.props.collection.offer()?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400
-    );
+    return this.offer?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400;
   };
 
   public getThroughputTitle = (): string => {
@@ -115,15 +121,14 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return this.getLongDelayMessage();
     }
 
-    const offer = this.props.collection?.offer();
-    if (offer?.headers?.[Constants.HttpHeaders.offerReplacePending]) {
-      const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
+    if (this.offer?.offerReplacePending) {
+      const throughput = this.offer.manualThroughput || this.offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
         this.props.isAutoPilotSelected,
         throughput,
         throughputUnit,
-        this.props.collection.databaseId,
-        this.props.collection.id()
+        this.databaseId,
+        this.collectionId
       );
     }
 
@@ -135,7 +140,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       this.canThroughputExceedMaximumValue() &&
       this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
 
-    if (throughputExceedsBackendLimits && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
+    if (throughputExceedsBackendLimits && !this.props.isFixedContainer) {
       return updateThroughputBeyondLimitWarningMessage;
     }
 
@@ -154,8 +159,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
         this.props.wasAutopilotOriginallySet,
         throughput,
         throughputUnit,
-        this.props.collection.databaseId,
-        this.props.collection.id(),
+        this.databaseId,
+        this.collectionId,
         targetThroughput
       );
     }
@@ -165,17 +170,20 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   private getThroughputInputComponent = (): JSX.Element => (
     <ThroughputInputAutoPilotV3Component
       databaseAccount={this.props.container.databaseAccount()}
+      databaseName={this.databaseId}
+      collectionName={this.collectionId}
       serverId={this.props.container.serverId()}
       throughput={this.props.throughput}
       throughputBaseline={this.props.throughputBaseline}
       onThroughputChange={this.props.onThroughputChange}
       minimum={this.getMinRUs()}
       maximum={this.getMaxRUs()}
-      isEnabled={!hasDatabaseSharedThroughput(this.props.collection)}
+      isEnabled={!!this.props.database || !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}
@@ -186,20 +194,48 @@ 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?.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>
         )}
         {!this.isAutoScaleEnabled() && (
           <Stack {...subComponentStackProps}>
             {this.getThroughputInputComponent()}
-            {this.getStorageCapacityTitle()}
+            {!this.props.database && this.getStorageCapacityTitle()}
           </Stack>
         )}
 

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

@@ -13,16 +13,7 @@ import {
 } from "../SettingsUtils";
 import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import {
-  Label,
-  Text,
-  TextField,
-  Stack,
-  IChoiceGroupOption,
-  ChoiceGroup,
-  MessageBar,
-  MessageBarType,
-} from "office-ui-fabric-react";
+import { Label, Text, TextField, Stack, IChoiceGroupOption, ChoiceGroup, MessageBar } from "office-ui-fabric-react";
 import {
   getTextFieldStyles,
   changeFeedPolicyToolTip,
@@ -190,7 +181,10 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
       />
       {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
-        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
+        <MessageBar
+          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+          styles={messageBarStyles}
+        >
           {ttlWarning}
         </MessageBar>
       )}

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

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

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

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

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

@@ -8,6 +8,26 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     }
   }
 >
+  <StyledMessageBarBase
+    messageBarIconProps={
+      Object {
+        "className": "messageBarWarningIcon",
+        "iconName": "WarningSolid",
+      }
+    }
+  >
+    <Text
+      styles={
+        Object {
+          "root": Object {
+            "fontSize": 14,
+          },
+        }
+      }
+    >
+      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
+    </Text>
+  </StyledMessageBarBase>
   <Stack>
     <StyledLabelBase
       id="settingsV2RadioButtonLabelId"
@@ -19,7 +39,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }
@@ -30,12 +50,21 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       />
     </StyledLabelBase>
     <StyledMessageBarBase
-      messageBarType={5}
+      messageBarIconProps={
+        Object {
+          "className": "messageBarInfoIcon",
+          "iconName": "InfoSolid",
+        }
+      }
       styles={
         Object {
           "root": Object {
+            "backgroundColor": "white",
             "marginTop": "5px",
           },
+          "text": Object {
+            "fontSize": 14,
+          },
         }
       }
     >
@@ -44,7 +73,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           Object {
             "root": Object {
-              "fontSize": 12,
+              "fontSize": 14,
             },
           }
         }
@@ -113,6 +142,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     id="autopilotInput"
     key="auto pilot throughput input"
     label="Max RU/s"
+    min={4000}
     onChange={[Function]}
     required={true}
     step={1000}
@@ -156,7 +186,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }
@@ -214,10 +244,24 @@ 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"
       key="provisioned throughput input"
+      min={10000}
       onChange={[Function]}
       required={true}
       step={100}
@@ -239,38 +283,142 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       type="number"
       value="100"
     />
-    <Text
-      id="throughputSpendElement"
+    <Stack
+      styles={
+        Object {
+          "root": Object {
+            "width": 600,
+          },
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
     >
-      Estimated cost (
-      USD
-      ):
-       
-      <b>
-        $
-        0.0080
-         hourly 
-         / 
-        $
-        0.19
-         daily 
-         / 
-        $
-        5.84
-         monthly
+      <StyledWithViewportComponent
+        columns={
+          Array [
+            Object {
+              "fieldName": "costType",
+              "isResizable": true,
+              "key": "costType",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "hourly",
+              "isResizable": true,
+              "key": "hourly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Hourly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "daily",
+              "isResizable": true,
+              "key": "daily",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Daily",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "monthly",
+              "isResizable": true,
+              "key": "monthly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Monthly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+          ]
+        }
+        disableSelectionZone={true}
+        items={
+          Array [
+            Object {
+              "costType": <Text>
+                Current Cost
+              </Text>,
+              "daily": <Text>
+                $
+                 
+                0.19
+              </Text>,
+              "hourly": <Text>
+                $
+                 
+                0.0080
+              </Text>,
+              "monthly": <Text>
+                $
+                 
+                5.84
+              </Text>,
+            },
+          ]
+        }
+        layoutMode={1}
+        onRenderRow={[Function]}
+        selectionMode={0}
+      />
+      <Text
+        id="throughputSpendElement"
+      >
+        (
+        regions: 
          
-      </b>
-      (
-      regions: 
-       
-      1
-      , 
-      100
-      RU/s, 
-      $
-      0.00008
-      /RU)
-    </Text>
+        1
+        , 
+        100
+         RU/s, 
+        $
+        0.00008
+        /RU)
+      </Text>
+      <Text>
+        <em>
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+        </em>
+      </Text>
+    </Stack>
     <StyledCheckboxBase
       checked={false}
       id="spendAckCheckBox"
@@ -288,6 +436,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       }
     />
+    <br />
   </Stack>
 </Stack>
 `;
@@ -311,7 +460,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "fontSize": 12,
+                  "fontSize": 14,
                 },
               }
             }
@@ -369,10 +518,24 @@ 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"
       key="provisioned throughput input"
+      min={10000}
       onChange={[Function]}
       required={true}
       step={100}
@@ -394,38 +557,143 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       type="number"
       value="100"
     />
-    <Text
-      id="throughputSpendElement"
+    <Stack
+      styles={
+        Object {
+          "root": Object {
+            "width": 600,
+          },
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
     >
-      Estimated cost (
-      USD
-      ):
-       
-      <b>
-        $
-        0.0080
-         hourly 
-         / 
-        $
-        0.19
-         daily 
-         / 
-        $
-        5.84
-         monthly
+      <StyledWithViewportComponent
+        columns={
+          Array [
+            Object {
+              "fieldName": "costType",
+              "isResizable": true,
+              "key": "costType",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "hourly",
+              "isResizable": true,
+              "key": "hourly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Hourly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "daily",
+              "isResizable": true,
+              "key": "daily",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Daily",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "monthly",
+              "isResizable": true,
+              "key": "monthly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Monthly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+          ]
+        }
+        disableSelectionZone={true}
+        items={
+          Array [
+            Object {
+              "costType": <Text>
+                Current Cost
+              </Text>,
+              "daily": <Text>
+                $
+                 
+                0.19
+              </Text>,
+              "hourly": <Text>
+                $
+                 
+                0.0080
+              </Text>,
+              "monthly": <Text>
+                $
+                 
+                5.84
+              </Text>,
+            },
+          ]
+        }
+        layoutMode={1}
+        onRenderRow={[Function]}
+        selectionMode={0}
+      />
+      <Text
+        id="throughputSpendElement"
+      >
+        (
+        regions: 
          
-      </b>
-      (
-      regions: 
-       
-      1
-      , 
-      100
-      RU/s, 
-      $
-      0.00008
-      /RU)
-    </Text>
+        1
+        , 
+        100
+         RU/s, 
+        $
+        0.00008
+        /RU)
+      </Text>
+      <Text>
+        <em>
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+        </em>
+      </Text>
+    </Stack>
+    <br />
   </Stack>
 </Stack>
 `;

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

@@ -16,18 +16,14 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       styles={
         Object {
           "root": Object {
-            "fontSize": 12,
+            "fontSize": 14,
           },
         }
       }
     >
       A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
       <br />
-      Database: 
-      test
-      , Container: 
-      test
-       
+      Database: test, Container: test 
       , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
     </Text>
   </StyledMessageBarBase>
@@ -40,6 +36,8 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
   >
     <ThroughputInputAutoPilotV3Component
       canExceedMaximumValue={true}
+      collectionName="test"
+      databaseName="test"
       getThroughputWarningMessage={[Function]}
       isAutoPilotSelected={false}
       isEmulator={false}

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

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

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

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

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -101,13 +101,13 @@ export const parseConflictResolutionProcedure = (procedureFromBackEnd: string):
   return procedureFromBackEnd;
 };
 
-export const getSanitizedInputValue = (newValueString: string, max: number): number => {
+export const getSanitizedInputValue = (newValueString: string, max?: number): number => {
   const newValue = parseInt(newValueString);
   if (isNaN(newValue)) {
     return zeroValue;
   }
   // make sure new value does not exceed the maximum throughput
-  return Math.min(newValue, max);
+  return max ? Math.min(newValue, max) : newValue;
 };
 
 export const isDirty = (current: isDirtyTypes, baseline: isDirtyTypes): boolean => {

src/Explorer/Controls/Settings/TestUtils.tsx

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

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

@@ -55,6 +55,7 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -104,6 +105,7 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -591,6 +593,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -665,6 +668,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -731,7 +735,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -801,6 +804,7 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "clickHostedAccountSwitch": [Function],
                 "clickHostedDirectorySwitch": [Function],
+                "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
                   "storage": "100",
@@ -943,7 +947,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isCodeOfConductEnabled": [Function],
+                "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -952,9 +956,9 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
+                "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isNotificationConsoleExpanded": [Function],
                 "isPreferredApiCassandra": [Function],
                 "isPreferredApiDocumentDB": [Function],
                 "isPreferredApiGraph": [Function],
@@ -1014,17 +1018,11 @@ exports[`SettingsComponent renders 1`] = `
                 "nonSystemDatabases": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
-                "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                  "consoleData": [Function],
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
-                "parentFrameDataExplorerVersion": [Function],
+                "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1050,7 +1048,6 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
-                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -1118,7 +1115,18 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
                 "serverId": [Function],
+                "setInProgressConsoleDataIdToBeDeleted": undefined,
+                "setIsNotificationConsoleExpanded": undefined,
+                "setNotificationConsoleData": undefined,
                 "settingsPane": SettingsPane {
                   "container": [Circular],
                   "crossPartitionQueryEnabled": [Function],
@@ -1179,11 +1187,9 @@ exports[`SettingsComponent renders 1`] = `
                   },
                   "direction": "vertical",
                   "isCollapsed": [Function],
-                  "leftSide": null,
                   "leftSideId": "resourcetree",
                   "onResizeStart": [Function],
                   "onResizeStop": [Function],
-                  "splitter": null,
                   "splitterId": "h_splitter1",
                 },
                 "stringInputPane": StringInputPane {
@@ -1330,6 +1336,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -1379,6 +1386,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -1866,6 +1874,7 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -1940,6 +1949,7 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -2006,7 +2016,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -2076,6 +2085,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "clickHostedAccountSwitch": [Function],
               "clickHostedDirectorySwitch": [Function],
+              "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
                 "storage": "100",
@@ -2218,7 +2228,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isCodeOfConductEnabled": [Function],
+              "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -2227,9 +2237,9 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
+              "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isNotificationConsoleExpanded": [Function],
               "isPreferredApiCassandra": [Function],
               "isPreferredApiDocumentDB": [Function],
               "isPreferredApiGraph": [Function],
@@ -2289,17 +2299,11 @@ exports[`SettingsComponent renders 1`] = `
               "nonSystemDatabases": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
-              "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                "consoleData": [Function],
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
-              "parentFrameDataExplorerVersion": [Function],
+              "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2325,7 +2329,6 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
-              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -2393,7 +2396,18 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
               "serverId": [Function],
+              "setInProgressConsoleDataIdToBeDeleted": undefined,
+              "setIsNotificationConsoleExpanded": undefined,
+              "setNotificationConsoleData": undefined,
               "settingsPane": SettingsPane {
                 "container": [Circular],
                 "crossPartitionQueryEnabled": [Function],
@@ -2454,11 +2468,9 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "direction": "vertical",
                 "isCollapsed": [Function],
-                "leftSide": null,
                 "leftSideId": "resourcetree",
                 "onResizeStart": [Function],
                 "onResizeStop": [Function],
-                "splitter": null,
                 "splitterId": "h_splitter1",
               },
               "stringInputPane": StringInputPane {
@@ -2618,6 +2630,7 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -2667,6 +2680,7 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
+                    "freeTierExceedThroughputTooltip": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -3154,6 +3168,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -3228,6 +3243,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3294,7 +3310,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -3364,6 +3379,7 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "clickHostedAccountSwitch": [Function],
                 "clickHostedDirectorySwitch": [Function],
+                "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
                   "storage": "100",
@@ -3506,7 +3522,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isCodeOfConductEnabled": [Function],
+                "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -3515,9 +3531,9 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
+                "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isNotificationConsoleExpanded": [Function],
                 "isPreferredApiCassandra": [Function],
                 "isPreferredApiDocumentDB": [Function],
                 "isPreferredApiGraph": [Function],
@@ -3577,17 +3593,11 @@ exports[`SettingsComponent renders 1`] = `
                 "nonSystemDatabases": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
-                "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                  "consoleData": [Function],
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
-                "parentFrameDataExplorerVersion": [Function],
+                "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3613,7 +3623,6 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
-                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -3681,7 +3690,18 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
                 "serverId": [Function],
+                "setInProgressConsoleDataIdToBeDeleted": undefined,
+                "setIsNotificationConsoleExpanded": undefined,
+                "setNotificationConsoleData": undefined,
                 "settingsPane": SettingsPane {
                   "container": [Circular],
                   "crossPartitionQueryEnabled": [Function],
@@ -3742,11 +3762,9 @@ exports[`SettingsComponent renders 1`] = `
                   },
                   "direction": "vertical",
                   "isCollapsed": [Function],
-                  "leftSide": null,
                   "leftSideId": "resourcetree",
                   "onResizeStart": [Function],
                   "onResizeStop": [Function],
-                  "splitter": null,
                   "splitterId": "h_splitter1",
                 },
                 "stringInputPane": StringInputPane {
@@ -3893,6 +3911,7 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3942,6 +3961,7 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
+                  "freeTierExceedThroughputTooltip": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -4429,6 +4449,7 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -4503,6 +4524,7 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
+                "freeTierExceedThroughputTooltip": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -4569,7 +4591,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -4639,6 +4660,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "clickHostedAccountSwitch": [Function],
               "clickHostedDirectorySwitch": [Function],
+              "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
                 "storage": "100",
@@ -4781,7 +4803,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isCodeOfConductEnabled": [Function],
+              "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -4790,9 +4812,9 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
+              "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isNotificationConsoleExpanded": [Function],
               "isPreferredApiCassandra": [Function],
               "isPreferredApiDocumentDB": [Function],
               "isPreferredApiGraph": [Function],
@@ -4852,17 +4874,11 @@ exports[`SettingsComponent renders 1`] = `
               "nonSystemDatabases": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
-              "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
-                "consoleData": [Function],
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
-              "parentFrameDataExplorerVersion": [Function],
+              "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4888,7 +4904,6 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
-              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -4956,7 +4971,18 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
               "serverId": [Function],
+              "setInProgressConsoleDataIdToBeDeleted": undefined,
+              "setIsNotificationConsoleExpanded": undefined,
+              "setNotificationConsoleData": undefined,
               "settingsPane": SettingsPane {
                 "container": [Circular],
                 "crossPartitionQueryEnabled": [Function],
@@ -5017,11 +5043,9 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "direction": "vertical",
                 "isCollapsed": [Function],
-                "leftSide": null,
                 "leftSideId": "resourcetree",
                 "onResizeStart": [Function],
                 "onResizeStop": [Function],
-                "splitter": null,
                 "splitterId": "h_splitter1",
               },
               "stringInputPane": StringInputPane {

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

@@ -60,72 +60,106 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     .
   </Text>
-  <Text
-    id="throughputSpendElement"
+  <Stack
+    styles={
+      Object {
+        "root": Object {
+          "width": 600,
+        },
+      }
+    }
+    tokens={
+      Object {
+        "childrenGap": 10,
+      }
+    }
   >
-    Estimated cost (
-    RMB
-    ):
-     
-    <b>
-      ¥
-      1.02
-       hourly 
-       / 
-      ¥
-      24.48
-       daily 
-       / 
-      ¥
-      744.60
-       monthly
+    <StyledWithViewportComponent
+      columns={
+        Array [
+          Object {
+            "fieldName": "costType",
+            "isResizable": true,
+            "key": "costType",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "",
+          },
+          Object {
+            "fieldName": "hourly",
+            "isResizable": true,
+            "key": "hourly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Hourly",
+          },
+          Object {
+            "fieldName": "daily",
+            "isResizable": true,
+            "key": "daily",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Daily",
+          },
+          Object {
+            "fieldName": "monthly",
+            "isResizable": true,
+            "key": "monthly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Monthly",
+          },
+        ]
+      }
+      disableSelectionZone={true}
+      items={
+        Array [
+          Object {
+            "costType": <Text>
+              Current Cost
+            </Text>,
+            "daily": <Text>
+              $ 24.48
+            </Text>,
+            "hourly": <Text>
+              $ 1.02
+            </Text>,
+            "monthly": <Text>
+              $ 744.6
+            </Text>,
+          },
+        ]
+      }
+      layoutMode={1}
+      onRenderRow={[Function]}
+      selectionMode={0}
+    />
+    <Text
+      id="throughputSpendElement"
+    >
+      (
+      regions: 
        
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    1000
-    RU/s, 
-    ¥
-    0.00051
-    /RU)
-  </Text>
-  <Text
-    id="autoscaleSpendElement"
-  >
-    Estimated monthly cost (
-    RMB
-    ) is
-     
-    <b>
+      2
+      , 
+      1000
+       RU/s, 
       ¥
-      111.69
-       - 
-      ¥
-      1116.90
-       
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    100
-     - 
-    1000
-     RU/s, 
-    ¥
-    0.000765
-    /RU)
-  </Text>
+      0.00051
+      /RU)
+    </Text>
+    <Text>
+      <em>
+        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+      </em>
+    </Text>
+  </Stack>
   <Text
     id="manualToAutoscaleDisclaimerElement"
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -142,7 +176,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -161,7 +195,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -173,7 +207,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -185,7 +219,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -196,7 +230,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -215,18 +249,14 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
   >
     A request to increase the throughput is currently in progress. This operation will take some time to complete.
     <br />
-    Database: 
-    sampleDb
-    , Container: 
-    sampleCollection
-     
+    Database: sampleDb, Container: sampleCollection 
     , Current manual throughput: 1000 RU/s
   </Text>
   <Text
@@ -234,25 +264,21 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
   >
     A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
     <br />
-    Database: 
-    sampleDb
-    , Container: 
-    sampleCollection
-     
+    Database: sampleDb, Container: sampleCollection 
     , Current manual throughput: 1000 RU/s, Target manual throughput: 2000
   </Text>
   <Text
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -265,7 +291,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -276,7 +302,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -295,7 +321,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -337,7 +363,7 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
-            "fontSize": 12,
+            "fontSize": 14,
           },
         }
       }
@@ -352,7 +378,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }
@@ -368,7 +394,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "fontSize": 12,
+          "fontSize": 14,
         },
       }
     }

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

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