Merge master into remove-redundant-e2e-tests

.env.example

@@ -1,10 +1,7 @@
+# These options are only needed when if running end to end tests locally
 PORTAL_RUNNER_USERNAME=
 PORTAL_RUNNER_PASSWORD=
 PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
-PORTAL_RUNNER_CONNECTION_STRING=
+PORTAL_RUNNER_CONNECTION_STRING=
-CASSANDRA_CONNECTION_STRING=
-MONGO_CONNECTION_STRING=
-TABLES_CONNECTION_STRING=
-DATA_EXPLORER_ENDPOINT=https://localhost:1234/hostedExplorer.html

.eslintignore

@@ -15,6 +15,8 @@ src/Common/DeleteFeedback.ts
 src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/EnvironmentUtility.ts
+src/Common/ErrorParserUtility.test.ts
+src/Common/ErrorParserUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
 src/Common/HeadersUtility.test.ts

.eslintrc.js

@@ -42,13 +42,6 @@ module.exports = {
     "no-null/no-null": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
-    eqeqeq: "error",
+    eqeqeq: "error"
-    "no-restricted-syntax": [
-      "error",
-      {
-        selector: "CallExpression[callee.object.name='JSON'][callee.property.name='stringify'] Identifier[name=/$err/]",
-        message: "Do not use JSON.stringify(error). It will print '{}'"
-      }
-    ]
   }
 };

.github/workflows/automerge.yml

@@ -0,0 +1,29 @@
+name: automerge
+on:
+  pull_request:
+    types:
+      - labeled
+      - unlabeled
+      - synchronize
+      - opened
+      - edited
+      - ready_for_review
+      - reopened
+      - unlocked
+  pull_request_review:
+    types:
+      - submitted
+  check_suite:
+    types:
+      - completed
+  status: {}
+jobs:
+  automerge:
+    runs-on: ubuntu-latest
+    steps:
+      - name: automerge
+        uses: "pascalgn/automerge-action@v0.11.0"
+        env:
+          GITHUB_TOKEN: "${{ secrets.AUTOMERGE_GITHUB_PAT }}"
+          MERGE_METHOD: "squash"
+          MERGE_COMMIT_MESSAGE: "pull-request-title"

.github/workflows/ci.yml

@@ -150,12 +150,6 @@ jobs:
           PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
           MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
           CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
-      - uses: actions/upload-artifact@v2
-        with:
-          name: screenshots
-          path: failed-*
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')

README.md

@@ -1,4 +1,4 @@
-# Cosmos DB Explorer
+# CosmosDB Explorer
 
 UI for Azure Cosmos DB. Powers the [Azure Portal](https://portal.azure.com/), https://cosmos.azure.com/, and the [Cosmos DB Emulator](https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator)
 
@@ -33,7 +33,7 @@ To run pure hosted mode, in `webpack.config.js` change index HtmlWebpackPlugin t
 
 ### 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.
+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 enironment 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`
 
@@ -60,7 +60,7 @@ The Cosmos Portal that consumes this repo is not currently open source. If you h
 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
+2. Whitelist `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
 
@@ -84,19 +84,16 @@ Unit tests are located adjacent to the code under test and run with [Jest](https
 4. Install dependencies: `npm install`
 5. Run cypress headless(`npm run test`) or in interactive mode(`npm run test:debug`)
 
-#### End to End Production Tests
+#### End to End Production Runners
 
 Jest and Puppeteer are used for end to end production runners and are contained in `test/`. To run these tests locally:
 
-1. Copy .env.example to .env
+1. Copy .env.example to .env and fill in all variables
-2. Update the values in .env including your local data explorer endpoint (ask a teammate/codeowner for help with .env values)
+2. Run `npm run test:e2e`
-3. Make sure all packages are installed `npm install`
-4. Run the server `npm run start` and wait for it to start
-5. Run `npm run test:e2e`
 
 ### Releasing
 
-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.
+We generally adhear 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.
 
 # Contributing
 

azure-pipelines.cg.yml

@@ -7,7 +7,7 @@ trigger:
 - master
 
 pool:
-  vmImage: "ubuntu-latest"
+  vmImage: 'ubuntu-latest'
 
 steps:
-  - task: ComponentGovernanceComponentDetection@0
+- task: ComponentGovernanceComponentDetection@0

externals/jquery.contextMenu.css

@@ -0,0 +1,177 @@
+/*!
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: 1.6.6
+ *
+ * Authors: Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://medialize.github.com/jQuery-contextMenu/
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *   GPL v3 http://opensource.org/licenses/GPL-3.0
+ *
+ */
+
+.context-menu-list {
+    z-index: 1001;
+    position: fixed;
+    background: white;
+    border: solid 1px gainsboro;
+    box-shadow: 4px 4px 4px -2px #888888;
+    padding: 8px 0px 8px 0px;
+    line-height: 25px;
+    width: 254px;
+    list-style: none;
+    margin-left: -10px;
+    outline: 0px #fff;
+}
+
+.context-menu-item {
+    padding: 2px 2px 2px 31px;
+    background-color: #fff;
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.context-menu-separator {
+    padding-bottom: 0;
+    border-bottom: 1px solid #DDD;
+}
+
+.context-menu-item>label>input,
+.context-menu-item>label>textarea {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+    margin-left: -10px;
+}
+
+.context-menu-item:hover {
+    cursor: pointer;
+    background-color: #eeeeee;
+}
+
+.context-menu-item.disabled {
+    color: #666;
+}
+
+.context-menu-input.hover,
+.context-menu-item.disabled.hover {
+    cursor: default;
+    background-color: #EEE;
+}
+
+.context-menu-submenu:after {
+    content: ">";
+    color: #666;
+    position: absolute;
+    top: 0;
+    right: 3px;
+    z-index: 1;
+}
+
+
+/* icons
+    #protip:
+    In case you want to use sprites for icons (which I would suggest you do) have a look at
+    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
+    .context-menu-item.icon:before {}
+ */
+
+.context-menu-item.icon {
+    min-height: 18px;
+    background-repeat: no-repeat;
+    background-position: 10px 7px;
+}
+
+.context-menu-item.icon:hover {
+    min-height: 18px;
+    background-repeat: no-repeat;
+    background-position: 10px 7px;
+}
+
+
+/*.context-menu-item.icon-edit {
+    background-image: url(images/page_white_edit.png);
+}
+
+.context-menu-item.icon-cut {
+    background-image: url(images/cut.png);
+}
+
+.context-menu-item.icon-copy {
+    background-image: url(images/page_white_copy.png);
+}
+
+.context-menu-item.icon-paste {
+    background-image: url(images/page_white_paste.png);
+}
+
+.context-menu-item.icon-delete {
+    background-image: url(images/page_white_delete.png);
+}
+
+.context-menu-item.icon-add {
+    background-image: url(images/page_white_add.png);
+}
+
+.context-menu-item.icon-quit {
+    background-image: url(images/door.png);
+}*/
+
+
+/* vertically align inside labels */
+
+.context-menu-input>label>* {
+    vertical-align: top;
+}
+
+
+/* position checkboxes and radios as icons */
+
+.context-menu-input>label>input[type="checkbox"],
+.context-menu-input>label>input[type="radio"] {
+    margin-left: -17px;
+}
+
+.context-menu-input>label>span {
+    margin-left: 5px;
+}
+
+.context-menu-input>label,
+.context-menu-input>label>input[type="text"],
+.context-menu-input>label>textarea,
+.context-menu-input>label>select {
+    display: block;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.context-menu-input>label>textarea {
+    height: 100px;
+}
+
+.context-menu-item>.context-menu-list {
+    display: none;
+    /* re-positioned by js */
+    right: -5px;
+    top: 5px;
+}
+
+
+/*.context-menu-item.hover>.context-menu-list {
+    display: block;
+    padding-left: 5px;
+}*/
+
+.context-menu-accesskey {
+    text-decoration: underline;
+}

jest-puppeteer.config.js

@@ -3,7 +3,7 @@ const isCI = require("is-ci");
 module.exports = {
   launch: {
     headless: isCI,
-    slowMo: 55,
+    slowMo: 30,
     defaultViewport: null,
     ignoreHTTPSErrors: true,
     args: ["--disable-web-security"]

less/documentDB.less

@@ -2082,8 +2082,7 @@ a:link {
 .resourceTreeAndTabs {
     display: flex;
     flex: 1 1 auto;
-    overflow-x: auto;
+    overflow: auto;
-    overflow-y: hidden;
     height: 100%;
 }
 
@@ -3023,7 +3022,3 @@ settings-pane {
 .infoBoxContent a {
     color: @AccentMediumHigh
 }
-
-.collapsibleSection :hover{
-    cursor: pointer;
-}

package-lock.json

@@ -76,6 +76,7 @@
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
       "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.8.3",
         "@babel/generator": "^7.9.0",
@@ -98,7 +99,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -2324,83 +2326,83 @@
       }
     },
     "@microsoft/applicationinsights-analytics-js": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-analytics-js/-/applicationinsights-analytics-js-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-analytics-js/-/applicationinsights-analytics-js-2.5.8.tgz",
-      "integrity": "sha512-9L3fb1H1as+J3J2j2EDx1HEMdrucjgR4INqahy+ZAxDPFvR3HCOedYzx645zObBIPu7QkH2LAjPk4fuNGHR1rg==",
+      "integrity": "sha512-2RsftiXa5ojNXuHRIC7RybWbN+Z7TMrLK2XGTza1Wq/KHRJNB48WmQuxjd6SzsNguqxRoHsH0sUogIwlK+NO8A==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.3",
+        "@microsoft/applicationinsights-shims": "1.0.1",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-channel-js": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-channel-js/-/applicationinsights-channel-js-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-channel-js/-/applicationinsights-channel-js-2.5.8.tgz",
-      "integrity": "sha512-NAQ/2wWmD+gaIZDCMzzwxm8RcbswDvUO5BYeuW9UHJaFuEZ9o9xpztKVz32u4CMv7OI/mLOqnmR4rb0d+kUMwQ==",
+      "integrity": "sha512-etVGzhNluflTikOpW9dlDxdg+B+8gt/nxmGeXqti9Hsqq0fTxcY9bmNklFIEKhOIwai4DodgJjflaDdgR0ObUQ==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.3",
+        "@microsoft/applicationinsights-shims": "1.0.1",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-common": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-common/-/applicationinsights-common-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-common/-/applicationinsights-common-2.5.8.tgz",
-      "integrity": "sha512-dKmXO9m55uRDhpoa0P7l+BApf+lsrqjgoLeKv+ABM8ygIyd9JH6CDcdaT3af+kUFtt9Oj3ChyfueKr1EVOdGkQ==",
+      "integrity": "sha512-RIMAJTsF0H5wiRZxYIF9H8sbMe2W5Ig4yMuH0/lho69DcNZpHf8p6PSa4Qhhli0AnoWYfLE7/WlWO1eR5SkByw==",
       "requires": {
-        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.3"
+        "@microsoft/applicationinsights-shims": "1.0.1"
       }
     },
     "@microsoft/applicationinsights-core-js": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-core-js/-/applicationinsights-core-js-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-core-js/-/applicationinsights-core-js-2.5.8.tgz",
-      "integrity": "sha512-KE9h1wmC/Ckm7jYjsMF1SEWQnk0v0CRzZq1upSARgPH7BgmyClXz1kdnLtuTWz8Aha8IIH9dW2hUOfPCdR+BpQ==",
+      "integrity": "sha512-NxxIViHKuqgpla+KdQk7Qy48Dm8lN4oy2mMEpv9kM5GW5MBJ8nZ4A5RV1kokF3kXuDmTUTHlWBXeLR8hauA3qQ==",
       "requires": {
-        "@microsoft/applicationinsights-shims": "1.0.3",
+        "@microsoft/applicationinsights-shims": "1.0.1",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-dependencies-js": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-dependencies-js/-/applicationinsights-dependencies-js-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-dependencies-js/-/applicationinsights-dependencies-js-2.5.8.tgz",
-      "integrity": "sha512-pNM/dkUOscV0ul/YJe928+77EBtRkRXO/le/VWzlunoUFaEEo4pirc7NycvPx9w/KxA62JMEogbQsWE6nAmqPg==",
+      "integrity": "sha512-jnXpjE/bnlLeew78OsN8aPTLOPZQJ4y1MOO8R3E+eUXdproD2TemynSk5kUfrMdry91DZOBZnrmJ2NCB+g5ArQ==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.3",
+        "@microsoft/applicationinsights-shims": "1.0.1",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-properties-js": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-properties-js/-/applicationinsights-properties-js-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-properties-js/-/applicationinsights-properties-js-2.5.8.tgz",
-      "integrity": "sha512-mZxaC8CZsURn38IwsPaUx+o9QXQU2vm81THZL+1Lc+7scPo55ATDTFgZ2awIj7CdTp69oGzUkpB7maOn6+OVOw==",
+      "integrity": "sha512-BAOSguXe07ua6SqYmAW+8+vVvBZb4qmmUP6s5zc7kNMMgEoEGsCn2VHmM8wHHxq4J/TmYxIqwoufS+XKbUvCeQ==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.3"
+        "@microsoft/applicationinsights-shims": "1.0.1"
       }
     },
     "@microsoft/applicationinsights-shims": {
-      "version": "1.0.3",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-shims/-/applicationinsights-shims-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-shims/-/applicationinsights-shims-1.0.1.tgz",
-      "integrity": "sha512-+S17aqEkOYpyBpmclhgwcEplwnxSo5AxYBdRg38GBobI1GKPSpZfnLssLzcjJ6XZCS5tqB5xjyTZs6gHj7ZJWQ=="
+      "integrity": "sha512-nPjUBSpvX5Dnkovp2lZzrg0/uSvYNtbAclWwVP7t8J1hy5OJ3xr3KPNaz79+b84G16Rj861ybau9Gbk7inXkTg=="
     },
     "@microsoft/applicationinsights-web": {
-      "version": "2.5.9",
+      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web/-/applicationinsights-web-2.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web/-/applicationinsights-web-2.5.8.tgz",
-      "integrity": "sha512-dxg5XXbQqjWw9QmGdgbd7knb1qFA58FFYj9ObqRmlqiihk25kper7H15HH8LaV0lV6goClmBWc9KsNGA2veyeA==",
+      "integrity": "sha512-ZxCUkBJrCFNHa0LgWWbtwqu4TxJPlukuSvDrdLv6XV1yX2ETq6Q1kw/IUEtKhbtNbTZQ8aJ+x8Nc/iqbssdXTA==",
       "requires": {
-        "@microsoft/applicationinsights-analytics-js": "2.5.9",
+        "@microsoft/applicationinsights-analytics-js": "2.5.8",
-        "@microsoft/applicationinsights-channel-js": "2.5.9",
+        "@microsoft/applicationinsights-channel-js": "2.5.8",
-        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-dependencies-js": "2.5.9",
+        "@microsoft/applicationinsights-dependencies-js": "2.5.8",
-        "@microsoft/applicationinsights-properties-js": "2.5.9",
+        "@microsoft/applicationinsights-properties-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.3",
+        "@microsoft/applicationinsights-shims": "1.0.1",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
@@ -2803,13 +2805,12 @@
       }
     },
     "@nteract/monaco-editor": {
-      "version": "3.2.2",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@nteract/monaco-editor/-/monaco-editor-3.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@nteract/monaco-editor/-/monaco-editor-3.2.0.tgz",
-      "integrity": "sha512-51Pxt6v6qaAlbDY0BgEydk/Jxuu93t+uB8Geg3vJfE6VDphTEakB0wocBIfvcTKVV55Lx53/rTSp6QHqtaHiGg==",
+      "integrity": "sha512-PGEUvy/GTBMECy4RUfh4wxO7GfA9YDBSV3hGt8MyrVz/GxUDtjB7FqrYS0ZhmVQPYl8hnV2i48F3YlypC+xIXA==",
       "requires": {
         "@nteract/core": "^14.0.0",
-        "@nteract/messaging": "^7.0.12",
+        "@nteract/messaging": "^7.0.10",
-        "lodash.debounce": "^4.0.6",
         "monaco-editor": "0.18.1",
         "rxjs": "^6.3.3"
       },
@@ -2858,40 +2859,6 @@
             "rxjs": "^6.3.3"
           }
         },
-        "@nteract/messaging": {
-          "version": "7.0.12",
-          "resolved": "https://registry.npmjs.org/@nteract/messaging/-/messaging-7.0.12.tgz",
-          "integrity": "sha512-5z2Ffd1hj7AsGBJTAoqJshLlUZ+ISJBjiZAdNDjb70PNEv0x8UOMk/di80RI3WBLK5MKxSJkGXfs4jfzfdW6bA==",
-          "requires": {
-            "@nteract/types": "^7.1.2",
-            "@types/uuid": "^8.0.0",
-            "lodash.clonedeep": "^4.5.0",
-            "rxjs": "^6.6.0",
-            "uuid": "^8.0.0"
-          },
-          "dependencies": {
-            "@nteract/commutable": {
-              "version": "7.3.4",
-              "resolved": "https://registry.npmjs.org/@nteract/commutable/-/commutable-7.3.4.tgz",
-              "integrity": "sha512-Z6aUtIZN0CKUMJwbZjUUqaaBhT6P0RiEG5nHso+oG/FOXF20Qv+hf/TyvYhw9SXQVmmacaMk4zj0iOID20pIng==",
-              "requires": {
-                "immutable": "^4.0.0-rc.12",
-                "uuid": "^8.0.0"
-              }
-            },
-            "@nteract/types": {
-              "version": "7.1.2",
-              "resolved": "https://registry.npmjs.org/@nteract/types/-/types-7.1.2.tgz",
-              "integrity": "sha512-I/1TvaUC/m9I/LFk1HemsOUqB0eNdagu0KRLA1YEtChPh9pk5F9flglA7m5+0/j31gLXBISj5+6tL8ikA8BxOQ==",
-              "requires": {
-                "@nteract/commutable": "^7.3.4",
-                "immutable": "^4.0.0-rc.12",
-                "rxjs": "^6.6.0",
-                "uuid": "^8.0.0"
-              }
-            }
-          }
-        },
         "@nteract/mythic-notifications": {
           "version": "0.1.9",
           "resolved": "https://registry.npmjs.org/@nteract/mythic-notifications/-/mythic-notifications-0.1.9.tgz",
@@ -7236,10 +7203,11 @@
       }
     },
     "create-react-class": {
-      "version": "15.7.0",
+      "version": "15.6.3",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
-      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
       "requires": {
+        "fbjs": "^0.8.9",
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
       }
@@ -8536,6 +8504,24 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
+          "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -9681,6 +9667,27 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -11881,6 +11888,26 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "requires": {
+            "encoding": "^0.1.11",
+            "is-stream": "^1.0.1"
+          }
+        }
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -13379,6 +13406,36 @@
         "micromatch": "^3.1.10",
         "pretty-format": "^24.9.0",
         "realpath-native": "^1.1.0"
+      },
+      "dependencies": {
+        "@babel/core": {
+          "version": "7.11.6",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.6.tgz",
+          "integrity": "sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.11.6",
+            "@babel/helper-module-transforms": "^7.11.0",
+            "@babel/helpers": "^7.10.4",
+            "@babel/parser": "^7.11.5",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.11.5",
+            "@babel/types": "^7.11.5",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.19",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
       }
     },
     "jest-dev-server": {
@@ -14457,11 +14514,6 @@
       "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
       "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
     },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
-    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -16567,8 +16619,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "asap": "~2.0.3"
       }
@@ -18196,8 +18246,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
-      "dev": true
     },
     "setprototypeof": {
       "version": "1.1.1",
@@ -19957,6 +20006,11 @@
         "free-style": "3.1.0"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.22",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
+      "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",

package.json

@@ -8,7 +8,7 @@
     "@azure/cosmos-language-service": "0.0.4",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@microsoft/applicationinsights-web": "2.5.8",
     "@nteract/commutable": "7.3.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -21,7 +21,7 @@
     "@nteract/jupyter-widgets": "2.0.0",
     "@nteract/logos": "1.0.0",
     "@nteract/markdown": "4.4.0",
-    "@nteract/monaco-editor": "3.2.2",
+    "@nteract/monaco-editor": "3.2.0",
     "@nteract/octicons": "2.0.0",
     "@nteract/outputs": "3.0.9",
     "@nteract/presentational-components": "3.0.7",
@@ -88,8 +88,8 @@
     "styled-components": "4.3.2",
     "text-encoding": "0.7.0",
     "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
     "utility-types": "3.10.0",
+    "url-polyfill": "1.1.7",
     "webcrypto-liner": "1.1.4",
     "webfontloader": "1.6.28",
     "whatwg-fetch": "3.0.0"

src/Common/Constants.ts

@@ -1,3 +1,4 @@
+import { AutopilotTier } from "../Contracts/DataModels";
 import { HashMap } from "./HashMap";
 
 export class AuthorizationEndpoints {
@@ -116,6 +117,7 @@ export class Features {
   public static readonly enableGalleryPublish = "enablegallerypublish";
   public static readonly enableCodeOfConduct = "enablecodeofconduct";
   public static readonly enableLinkInjection = "enablelinkinjection";
+  public static readonly enableSettingsV2 = "enablesettingsv2";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
   public static readonly notebookServerUrl = "notebookserverurl";
@@ -123,17 +125,12 @@ export class Features {
   public static readonly notebookBasePath = "notebookbasepath";
   public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
   public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly enableAutoPilotV2 = "enableautopilotv2";
   public static readonly ttl90Days = "ttl90days";
   public static readonly enableRightPanelV2 = "enablerightpanelv2";
   public static readonly enableSDKoperations = "enablesdkoperations";
 }
 
-// flight names returned from the portal are always lowercase
-export class Flights {
-  public static readonly SettingsV2 = "settingsv2";
-  public static readonly MongoIndexEditor = "mongoindexeditor";
-}
-
 export class AfecFeatures {
   public static readonly Spark = "spark-public-preview";
   public static readonly Notebooks = "sparknotebooks-public-preview";
@@ -260,6 +257,7 @@ export class HttpHeaders {
   public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
   public static autoPilotThroughput = "autoscaleSettings";
   public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+  public static autoPilotTier = "x-ms-cosmos-offer-autopilot-tier";
   public static partitionKey: string = "x-ms-documentdb-partitionkey";
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
@@ -404,6 +402,54 @@ export enum ConflictOperationType {
   Delete = "delete"
 }
 
+export class AutoPilot {
+  public static tier1Text: string = "4,000 RU/s";
+  public static tier2Text: string = "20,000 RU/s";
+  public static tier3Text: string = "100,000 RU/s";
+  public static tier4Text: string = "500,000 RU/s";
+
+  public static tierText = {
+    [AutopilotTier.Tier1]: "Tier 1",
+    [AutopilotTier.Tier2]: "Tier 2",
+    [AutopilotTier.Tier3]: "Tier 3",
+    [AutopilotTier.Tier4]: "Tier 4"
+  };
+
+  public static tierMaxRus = {
+    [AutopilotTier.Tier1]: 2000,
+    [AutopilotTier.Tier2]: 20000,
+    [AutopilotTier.Tier3]: 100000,
+    [AutopilotTier.Tier4]: 500000
+  };
+
+  public static tierMinRus = {
+    [AutopilotTier.Tier1]: 0,
+    [AutopilotTier.Tier2]: 0,
+    [AutopilotTier.Tier3]: 0,
+    [AutopilotTier.Tier4]: 0
+  };
+
+  public static tierStorageInGB = {
+    [AutopilotTier.Tier1]: 50,
+    [AutopilotTier.Tier2]: 200,
+    [AutopilotTier.Tier3]: 1000,
+    [AutopilotTier.Tier4]: 5000
+  };
+}
+
+export class DataExplorerVersions {
+  public static readonly v_1_0_0: string = "1.0.0";
+  public static readonly v_1_0_1: string = "1.0.1";
+}
+
+export class DataExplorerFeatures {
+  public static offerCache: string = "OfferCache";
+}
+
+export const DataExplorerFeaturesVersions: any = {
+  OfferCache: DataExplorerVersions.v_1_0_1
+};
+
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";

src/Common/CosmosClient.test.ts

@@ -112,6 +112,7 @@ describe("endpoint", () => {
 
 describe("requestPlugin", () => {
   beforeEach(() => {
+    delete window.dataExplorerPlatform;
     resetConfigContext();
   });
 

src/Common/CosmosClient.ts

@@ -1,7 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
-import { getErrorMessage } from "./ErrorHandlingUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { userContext } from "../UserContext";
@@ -70,7 +69,7 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
     const result = JSON.parse(await response.json());
     return result;
   } catch (error) {
-    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${getErrorMessage(error)}`);
+    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${JSON.stringify(error)}`);
     return Promise.reject(error);
   }
 }

src/Common/DataAccessUtilityBase.ts

@@ -72,6 +72,22 @@ export function getPartitionKeyHeader(partitionKeyDefinition: DataModels.Partiti
   return [partitionKeyValue];
 }
 
+export function updateOffer(
+  offer: DataModels.Offer,
+  newOffer: DataModels.Offer,
+  options?: RequestOptions
+): Q.Promise<DataModels.Offer> {
+  return Q(
+    client()
+      .offer(offer.id)
+      // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
+      .replace((newOffer as unknown) as OfferDefinition, options)
+      .then(response => {
+        return Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => response.resource);
+      })
+  );
+}
+
 export function updateDocument(
   collection: ViewModels.CollectionBase,
   documentId: DocumentId,
@@ -168,6 +184,22 @@ export function deleteConflict(
   );
 }
 
+export function refreshCachedOffers(): Q.Promise<void> {
+  if (configContext.platform === Platform.Portal) {
+    return sendCachedDataMessage(MessageTypes.RefreshOffers, []);
+  } else {
+    return Q();
+  }
+}
+
+export function refreshCachedResources(options?: any): Q.Promise<void> {
+  if (configContext.platform === Platform.Portal) {
+    return sendCachedDataMessage(MessageTypes.RefreshResources, []);
+  } else {
+    return Q();
+  }
+}
+
 export function queryConflicts(
   databaseId: string,
   containerId: string,

src/Common/DocumentClientUtilityBase.ts

@@ -1,14 +1,17 @@
 import { ConflictDefinition, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
 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 { logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import * as Constants from "./Constants";
+import { sendNotificationForError } from "./dataAccess/sendNotificationForError";
 import * as DataAccessUtilityBase from "./DataAccessUtilityBase";
 import { MinimalQueryIterator, nextPage } from "./IteratorUtilities";
-import { handleError } from "./ErrorHandlingUtils";
+import * as Logger from "./Logger";
 
 // TODO: Log all promise resolutions and errors with verbosity levels
 export function queryDocuments(
@@ -56,11 +59,13 @@ export function executeStoredProcedure(
         );
       },
       (error: any) => {
-        handleError(
+        logConsoleError(
-          error,
+          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}: ${JSON.stringify(
-          "ExecuteStoredProcedure",
+            error
-          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+          )}`
         );
+        Logger.logError(JSON.stringify(error), "ExecuteStoredProcedure", error.code);
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -88,7 +93,9 @@ export function queryDocumentsPage(
         deferred.resolve(result);
       },
       (error: any) => {
-        handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
+        logConsoleError(`Failed to query ${entityName} for container ${resourceName}: ${JSON.stringify(error)}`);
+        Logger.logError(JSON.stringify(error), "QueryDocumentsPage", error.code);
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -109,7 +116,9 @@ export function readDocument(collection: ViewModels.CollectionBase, documentId:
         deferred.resolve(document);
       },
       (error: any) => {
-        handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
+        logConsoleError(`Failed to read ${entityName} ${documentId.id()}: ${JSON.stringify(error)}`);
+        Logger.logError(JSON.stringify(error), "ReadDocument", error.code);
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -135,7 +144,44 @@ export function updateDocument(
         deferred.resolve(updatedDocument);
       },
       (error: any) => {
-        handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
+        logConsoleError(`Failed to update ${entityName} ${documentId.id()}: ${JSON.stringify(error)}`);
+        Logger.logError(JSON.stringify(error), "UpdateDocument", error.code);
+        sendNotificationForError(error);
+        deferred.reject(error);
+      }
+    )
+    .finally(() => {
+      clearMessage();
+    });
+
+  return deferred.promise;
+}
+
+export function updateOffer(
+  offer: DataModels.Offer,
+  newOffer: DataModels.Offer,
+  options: RequestOptions
+): Q.Promise<DataModels.Offer> {
+  var deferred = Q.defer<any>();
+  const clearMessage = logConsoleProgress(`Updating offer for resource ${offer.resource}`);
+  DataAccessUtilityBase.updateOffer(offer, newOffer, options)
+    .then(
+      (replacedOffer: DataModels.Offer) => {
+        logConsoleInfo(`Successfully updated offer for resource ${offer.resource}`);
+        deferred.resolve(replacedOffer);
+      },
+      (error: any) => {
+        logConsoleError(`Error updating offer for resource ${offer.resource}: ${JSON.stringify(error)}`);
+        Logger.logError(
+          JSON.stringify({
+            oldOffer: offer,
+            newOffer: newOffer,
+            error: error
+          }),
+          "UpdateOffer",
+          error.code
+        );
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -157,7 +203,11 @@ export function createDocument(collection: ViewModels.CollectionBase, newDocumen
         deferred.resolve(savedDocument);
       },
       (error: any) => {
-        handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
+        logConsoleError(
+          `Error while creating new ${entityName} for container ${collection.id()}:\n ${JSON.stringify(error)}`
+        );
+        Logger.logError(JSON.stringify(error), "CreateDocument", error.code);
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -179,7 +229,9 @@ export function deleteDocument(collection: ViewModels.CollectionBase, documentId
         deferred.resolve(response);
       },
       (error: any) => {
-        handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
+        logConsoleError(`Error while deleting ${entityName} ${documentId.id()}:\n ${JSON.stringify(error)}`);
+        Logger.logError(JSON.stringify(error), "DeleteDocument", error.code);
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -205,7 +257,9 @@ export function deleteConflict(
         deferred.resolve(response);
       },
       (error: any) => {
-        handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
+        logConsoleError(`Error while deleting conflict ${conflictId.id()}:\n ${JSON.stringify(error)}`);
+        Logger.logError(JSON.stringify(error), "DeleteConflict", error.code);
+        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -215,3 +269,11 @@ export function deleteConflict(
 
   return deferred.promise;
 }
+
+export function refreshCachedResources(options: any = {}): Q.Promise<void> {
+  return DataAccessUtilityBase.refreshCachedResources(options);
+}
+
+export function refreshCachedOffers(): Q.Promise<void> {
+  return DataAccessUtilityBase.refreshCachedOffers();
+}

src/Common/ErrorHandlingUtils.ts

@@ -1,56 +0,0 @@
-import { ARMError } from "../Utils/arm/request";
-import { HttpStatusCodes } from "./Constants";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { SubscriptionType } from "../Contracts/ViewModels";
-import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { logError } from "./Logger";
-import { sendMessage } from "./MessageHandler";
-
-export const handleError = (error: string | ARMError | Error, area: string, consoleErrorPrefix?: string): void => {
-  const errorMessage = getErrorMessage(error);
-  const errorCode = error instanceof ARMError ? error.code : undefined;
-
-  // logs error to data explorer console
-  const consoleErrorMessage = consoleErrorPrefix ? `${consoleErrorPrefix}:\n ${errorMessage}` : errorMessage;
-  logConsoleError(consoleErrorMessage);
-
-  // logs error to both app insight and kusto
-  logError(errorMessage, area, errorCode);
-
-  // checks for errors caused by firewall and sends them to portal to handle
-  sendNotificationForError(errorMessage, errorCode);
-};
-
-export const getErrorMessage = (error: string | Error): string => {
-  const errorMessage = typeof error === "string" ? error : error.message;
-  return replaceKnownError(errorMessage);
-};
-
-export const getErrorStack = (error: string | Error): string => {
-  return typeof error === "string" ? undefined : error.stack;
-};
-
-const sendNotificationForError = (errorMessage: string, errorCode: number | string): void => {
-  if (errorCode === HttpStatusCodes.Forbidden) {
-    if (errorMessage?.toLowerCase().indexOf("sharedoffer is disabled for your account") > 0) {
-      return;
-    }
-    sendMessage({
-      type: MessageTypes.ForbiddenError,
-      reason: errorMessage
-    });
-  }
-};
-
-const replaceKnownError = (errorMessage: string): string => {
-  if (
-    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
-    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) {
-    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
-  }
-
-  return errorMessage;
-};

src/Common/ErrorParserUtility.test.ts

@@ -0,0 +1,24 @@
+import * as ErrorParserUtility from "./ErrorParserUtility";
+
+describe("Error Parser Utility", () => {
+  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
+    it("should parse a backend error correctly", () => {
+      // A fake error matching what is thrown by the SDK on a bad collection create request
+      const innerMessage =
+        "The partition key component definition path '/asdwqr31 @#$#$WRadf' could not be accepted, failed near position '10'. Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
+      const message = `Message: {\"Errors\":[\"${innerMessage}\"]}\r\nActivityId: 97b2e684-7505-4921-85f6-2513b9b28220, Request URI: /apps/89fdcf25-2a0b-4d2a-aab6-e161e565b26f/services/54911149-7bb1-4e7d-a1fa-22c8b36a4bb9/partitions/cc2a7a04-5f5a-4709-bcf7-8509b264963f/replicas/132304018743619218p, RequestStats: , SDK: Microsoft.Azure.Documents.Common/2.10.0`;
+      const err = new Error(message) as any;
+      err.code = 400;
+      err.body = {
+        code: "BadRequest",
+        message
+      };
+      err.headers = {};
+      err.activityId = "97b2e684-7505-4921-85f6-2513b9b28220";
+
+      const parsedError = ErrorParserUtility.parse(err);
+      expect(parsedError.length).toBe(1);
+      expect(parsedError[0].message).toBe(innerMessage);
+    });
+  });
+});

src/Common/ErrorParserUtility.ts

@@ -0,0 +1,69 @@
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+
+export function replaceKnownError(err: string): string {
+  if (
+    window.dataExplorer.subscriptionType() === ViewModels.SubscriptionType.Internal &&
+    err.indexOf("SharedOffer is Disabled for your account") >= 0
+  ) {
+    return "Database throughput is not supported for internal subscriptions.";
+  } else if (err.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.";
+  }
+
+  return err;
+}
+
+export function parse(err: any): DataModels.ErrorDataModel[] {
+  try {
+    return _parse(err);
+  } catch (e) {
+    return [<DataModels.ErrorDataModel>{ message: JSON.stringify(err) }];
+  }
+}
+
+function _parse(err: any): DataModels.ErrorDataModel[] {
+  var normalizedErrors: DataModels.ErrorDataModel[] = [];
+  if (err.message && !err.code) {
+    normalizedErrors.push(err);
+  } else {
+    const innerErrors: any[] = _getInnerErrors(err.message);
+    normalizedErrors = innerErrors.map(innerError =>
+      typeof innerError === "string" ? { message: innerError } : innerError
+    );
+  }
+
+  return normalizedErrors;
+}
+
+function _getInnerErrors(message: string): any[] {
+  /*
+            The backend error message has an inner-message which is a stringified object. 
+
+            For SQL errors, the "errors" property is an array of SqlErrorDataModel.
+            Example:
+                "Message: {"Errors":["Resource with specified id or name already exists"]}\r\nActivityId: 80005000008d40b6a, Request URI: /apps/19000c000c0a0005/services/mctestdocdbprod-MasterService-0-00066ab9937/partitions/900005f9000e676fb8/replicas/13000000000955p"
+            For non-SQL errors the "Errors" propery is an array of string.
+            Example:
+                "Message: {"errors":[{"severity":"Error","location":{"start":7,"end":8},"code":"SC1001","message":"Syntax error, incorrect syntax near '.'."}]}\r\nActivityId: d3300016d4084e310a, Request URI: /apps/12401f9e1df77/services/dc100232b1f44545/partitions/f86f3bc0001a2f78/replicas/13085003638s"
+        */
+
+  let innerMessage: any = null;
+
+  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
+  try {
+    // Multi-Partition error flavor
+    const regExp = /^(.*)ActivityId: (.*)/g;
+    const regString = regExp.exec(singleLineMessage);
+    const innerMessageString = regString[1];
+    innerMessage = JSON.parse(innerMessageString);
+  } catch (e) {
+    // Single-partition error flavor
+    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
+    const regString = regExp.exec(singleLineMessage);
+    const innerMessageString = regString[1];
+    innerMessage = JSON.parse(innerMessageString);
+  }
+
+  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
+}

src/Common/Logger.ts

@@ -21,8 +21,14 @@ export function logWarning(message: string, area: string, code?: number): void {
   return _logEntry(entry);
 }
 
-export function logError(errorMessage: string, area: string, code?: number | string): void {
+export function logError(message: string | Error, area: string, code?: number): void {
-  const entry: Diagnostics.LogEntry = _generateLogEntry(Diagnostics.LogEntryLevel.Error, errorMessage, area, code);
+  let logMessage: string;
+  if (typeof message === "string") {
+    logMessage = message;
+  } else {
+    logMessage = JSON.stringify(message, Object.getOwnPropertyNames(message));
+  }
+  const entry: Diagnostics.LogEntry = _generateLogEntry(Diagnostics.LogEntryLevel.Error, logMessage, area, code);
   return _logEntry(entry);
 }
 
@@ -53,7 +59,7 @@ function _generateLogEntry(
   level: Diagnostics.LogEntryLevel,
   message: string,
   area: string,
-  code?: number | string
+  code?: number
 ): Diagnostics.LogEntry {
   return {
     timestamp: new Date().getUTCSeconds(),

src/Common/NotificationsClientBase.ts

@@ -0,0 +1,46 @@
+import "jquery";
+import * as Q from "q";
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { userContext } from "../UserContext";
+
+export class NotificationsClientBase {
+  private _extensionEndpoint: string;
+  private _notificationsApiSuffix: string;
+
+  protected constructor(notificationsApiSuffix: string) {
+    this._notificationsApiSuffix = notificationsApiSuffix;
+  }
+
+  public fetchNotifications(): Q.Promise<DataModels.Notification[]> {
+    const deferred: Q.Deferred<DataModels.Notification[]> = Q.defer<DataModels.Notification[]>();
+    const databaseAccount = userContext.databaseAccount;
+    const subscriptionId = userContext.subscriptionId;
+    const resourceGroup = userContext.resourceGroup;
+    const url = `${this._extensionEndpoint}${this._notificationsApiSuffix}?accountName=${databaseAccount.name}&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
+    const authorizationHeader: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
+    const headers: any = {};
+    headers[authorizationHeader.header] = authorizationHeader.token;
+
+    $.ajax({
+      url: url,
+      type: "GET",
+      headers: headers,
+      cache: false
+    }).then(
+      (notifications: DataModels.Notification[], textStatus: string, xhr: JQueryXHR<any>) => {
+        deferred.resolve(notifications);
+      },
+      (xhr: JQueryXHR<any>, textStatus: string, error: any) => {
+        deferred.reject(xhr.responseText);
+      }
+    );
+
+    return deferred.promise;
+  }
+
+  public setExtensionEndpoint(extensionEndpoint: string): void {
+    this._extensionEndpoint = extensionEndpoint;
+  }
+}

src/Common/PortalNotifications.ts

@@ -1,41 +0,0 @@
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-import { userContext } from "../UserContext";
-import { configContext, Platform } from "../ConfigContext";
-
-const notificationsPath = () => {
-  switch (configContext.platform) {
-    case Platform.Hosted:
-      return "/api/guest/notifications";
-    case Platform.Portal:
-      return "/api/notifications";
-    default:
-      throw new Error(`Unknown platform: ${configContext.platform}`);
-  }
-};
-
-export const fetchPortalNotifications = async (): Promise<DataModels.Notification[]> => {
-  if (configContext.platform === Platform.Emulator) {
-    return [];
-  }
-
-  const databaseAccount = userContext.databaseAccount;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
-    databaseAccount.name
-  }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
-  const authorizationHeader: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
-  const headers = { [authorizationHeader.header]: authorizationHeader.token };
-
-  const response = await window.fetch(url, {
-    headers
-  });
-
-  if (!response.ok) {
-    throw new Error(await response.text());
-  }
-
-  return (await response.json()) as DataModels.Notification[];
-};

src/Common/QueriesClient.ts

@@ -12,7 +12,8 @@ import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
 import { createCollection } from "./dataAccess/createCollection";
-import { handleError } from "./ErrorHandlingUtils";
+import * as ErrorParserUtility from "./ErrorParserUtility";
+import * as Logger from "./Logger";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -52,8 +53,13 @@ export class QueriesClient {
           return Promise.resolve(collection);
         },
         (error: any) => {
-          handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
+          const stringifiedError: string = JSON.stringify(error);
-          return Promise.reject(error);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to set up account for saving queries: ${stringifiedError}`
+          );
+          Logger.logError(stringifiedError, "setupQueriesCollection");
+          return Promise.reject(stringifiedError);
         }
       )
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
@@ -96,11 +102,19 @@ export class QueriesClient {
           return Promise.resolve();
         },
         (error: any) => {
-          if (error.code === HttpStatusCodes.Conflict.toString()) {
+          let errorMessage: string;
-            error = `Query ${query.queryName} already exists`;
+          const parsedError: DataModels.ErrorDataModel = ErrorParserUtility.parse(error)[0];
+          if (parsedError.code === HttpStatusCodes.Conflict.toString()) {
+            errorMessage = `Query ${query.queryName} already exists`;
+          } else {
+            errorMessage = parsedError.message;
           }
-          handleError(error, "saveQuery", `Failed to save query ${query.queryName}`);
+          NotificationConsoleUtils.logConsoleMessage(
-          return Promise.reject(error);
+            ConsoleDataType.Error,
+            `Failed to save query ${query.queryName}: ${errorMessage}`
+          );
+          Logger.logError(JSON.stringify(parsedError), "saveQuery");
+          return Promise.reject(errorMessage);
         }
       )
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
@@ -149,15 +163,25 @@ export class QueriesClient {
               return Promise.resolve(queries);
             },
             (error: any) => {
-              handleError(error, "getSavedQueries", "Failed to fetch saved queries");
+              const stringifiedError: string = JSON.stringify(error);
-              return Promise.reject(error);
+              NotificationConsoleUtils.logConsoleMessage(
+                ConsoleDataType.Error,
+                `Failed to fetch saved queries: ${stringifiedError}`
+              );
+              Logger.logError(stringifiedError, "getSavedQueries");
+              return Promise.reject(stringifiedError);
             }
           );
         },
         (error: any) => {
           // should never get into this state but we handle this regardless
-          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
+          const stringifiedError: string = JSON.stringify(error);
-          return Promise.reject(error);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to fetch saved queries: ${stringifiedError}`
+          );
+          Logger.logError(stringifiedError, "getSavedQueries");
+          return Promise.reject(stringifiedError);
         }
       )
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
@@ -208,8 +232,13 @@ export class QueriesClient {
           return Promise.resolve();
         },
         (error: any) => {
-          handleError(error, "deleteQuery", `Failed to delete query ${query.queryName}`);
+          const stringifiedError: string = JSON.stringify(error);
-          return Promise.reject(error);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to delete query ${query.queryName}: ${stringifiedError}`
+          );
+          Logger.logError(stringifiedError, "deleteQuery");
+          return Promise.reject(stringifiedError);
         }
       )
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));

src/Common/dataAccess/createCollection.ts

@@ -1,4 +1,5 @@
 import * as DataModels from "../../Contracts/DataModels";
+import * as ErrorParserUtility from "../ErrorParserUtility";
 import { AuthType } from "../../AuthType";
 import { ContainerResponse, DatabaseResponse } from "@azure/cosmos";
 import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
@@ -22,19 +23,21 @@ import {
   getGremlinGraph
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 import { createDatabase } from "./createDatabase";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { handleError } from "../ErrorHandlingUtils";
 
 export const createCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  let collection: DataModels.Collection;
   const clearMessage = logConsoleProgress(
     `Creating a new container ${params.collectionId} for database ${params.databaseId}`
   );
   try {
-    let collection: DataModels.Collection;
     if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
@@ -51,15 +54,18 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
     } else {
       collection = await createCollectionWithSDK(params);
     }
-
-    logConsoleInfo(`Successfully created container ${params.collectionId}`);
-    return collection;
   } catch (error) {
-    handleError(error, "CreateCollection", `Error while creating container ${params.collectionId}`);
+    const sanitizedError = ErrorParserUtility.replaceKnownError(JSON.stringify(error));
-    throw error;
+    logConsoleError(`Error while creating container ${params.collectionId}:\n ${sanitizedError}`);
-  } finally {
+    logError(JSON.stringify(error), "CreateCollection", error.code);
+    sendNotificationForError(error);
     clearMessage();
+    throw error;
   }
+  logConsoleInfo(`Successfully created container ${params.collectionId}`);
+  await refreshCachedResources();
+  clearMessage();
+  return collection;
 };
 
 const createCollectionWithARM = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {

src/Common/dataAccess/createDatabase.ts

@@ -24,28 +24,36 @@ import {
   createUpdateGremlinDatabase,
   getGremlinDatabase
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedOffers, refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export async function createDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  let database: DataModels.Database;
   const clearMessage = logConsoleProgress(`Creating a new database ${params.databaseId}`);
   try {
     if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
       throw new Error("Creating database resources is not allowed for tables accounts");
     }
-    const database: DataModels.Database = await (window.authType === AuthType.AAD && !userContext.useSDKOperations
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
-      ? createDatabaseWithARM(params)
+      database = await createDatabaseWithARM(params);
-      : createDatabaseWithSDK(params));
+    } else {
-
+      database = await createDatabaseWithSDK(params);
-    logConsoleInfo(`Successfully created database ${params.databaseId}`);
+    }
-    return database;
   } catch (error) {
-    handleError(error, "CreateDatabase", `Error while creating database ${params.databaseId}`);
+    logConsoleError(`Error while creating database ${params.databaseId}:\n ${error.message}`);
-    throw error;
+    logError(JSON.stringify(error), "CreateDatabase", error.code);
-  } finally {
+    sendNotificationForError(error);
     clearMessage();
+    throw error;
   }
+  logConsoleInfo(`Successfully created database ${params.databaseId}`);
+  await refreshCachedResources();
+  await refreshCachedOffers();
+  clearMessage();
+  return database;
 }
 
 async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {

src/Common/dataAccess/createStoredProcedure.ts

@@ -1,78 +1,28 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
-import {
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-  SqlStoredProcedureCreateUpdateParameters,
-  SqlStoredProcedureResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import {
+import { logError } from "../Logger";
-  createUpdateSqlStoredProcedure,
+import { sendNotificationForError } from "./sendNotificationForError";
-  getSqlStoredProcedure
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function createStoredProcedure(
   databaseId: string,
   collectionId: string,
   storedProcedure: StoredProcedureDefinition
 ): Promise<StoredProcedureDefinition & Resource> {
+  let createdStoredProcedure: StoredProcedureDefinition & Resource;
   const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      try {
-        const getResponse = await getSqlStoredProcedure(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-          databaseId,
-          collectionId,
-          storedProcedure.id
-        );
-        if (getResponse?.properties?.resource) {
-          throw new Error(
-            `Create stored procedure failed: stored procedure with id ${storedProcedure.id} already exists`
-          );
-        }
-      } catch (error) {
-        if (error.code !== "NotFound") {
-          throw error;
-        }
-      }
-
-      const createSprocParams: SqlStoredProcedureCreateUpdateParameters = {
-        properties: {
-          resource: storedProcedure as SqlStoredProcedureResource,
-          options: {}
-        }
-      };
-      const rpResponse = await createUpdateSqlStoredProcedure(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        storedProcedure.id,
-        createSprocParams
-      );
-      return rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.storedProcedures.create(storedProcedure);
-    return response?.resource;
+    createdStoredProcedure = response.resource;
   } catch (error) {
-    handleError(error, "CreateStoredProcedure", `Error while creating stored procedure ${storedProcedure.id}`);
+    logConsoleError(`Error while creating stored procedure ${storedProcedure.id}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "CreateStoredProcedure", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return createdStoredProcedure;
 }

src/Common/dataAccess/createTrigger.ts

@@ -1,73 +1,28 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, TriggerDefinition } from "@azure/cosmos";
-import {
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logError } from "../Logger";
-import { handleError } from "../ErrorHandlingUtils";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function createTrigger(
   databaseId: string,
   collectionId: string,
   trigger: TriggerDefinition
 ): Promise<TriggerDefinition & Resource> {
+  let createdTrigger: TriggerDefinition & Resource;
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      try {
-        const getResponse = await getSqlTrigger(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-          databaseId,
-          collectionId,
-          trigger.id
-        );
-        if (getResponse?.properties?.resource) {
-          throw new Error(`Create trigger failed: ${trigger.id} already exists`);
-        }
-      } catch (error) {
-        if (error.code !== "NotFound") {
-          throw error;
-        }
-      }
-
-      const createTriggerParams: SqlTriggerCreateUpdateParameters = {
-        properties: {
-          resource: trigger as SqlTriggerResource,
-          options: {}
-        }
-      };
-      const rpResponse = await createUpdateSqlTrigger(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        trigger.id,
-        createTriggerParams
-      );
-      return rpResponse && (rpResponse.properties?.resource as TriggerDefinition & Resource);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.triggers.create(trigger);
-    return response.resource;
+    createdTrigger = response.resource;
   } catch (error) {
-    handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);
+    logConsoleError(`Error while creating trigger ${trigger.id}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "CreateTrigger", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return createdTrigger;
 }

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -1,82 +1,28 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
-import {
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-  SqlUserDefinedFunctionCreateUpdateParameters,
-  SqlUserDefinedFunctionResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import {
+import { logError } from "../Logger";
-  createUpdateSqlUserDefinedFunction,
+import { sendNotificationForError } from "./sendNotificationForError";
-  getSqlUserDefinedFunction
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function createUserDefinedFunction(
   databaseId: string,
   collectionId: string,
   userDefinedFunction: UserDefinedFunctionDefinition
 ): Promise<UserDefinedFunctionDefinition & Resource> {
+  let createdUserDefinedFunction: UserDefinedFunctionDefinition & Resource;
   const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      try {
-        const getResponse = await getSqlUserDefinedFunction(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-          databaseId,
-          collectionId,
-          userDefinedFunction.id
-        );
-        if (getResponse?.properties?.resource) {
-          throw new Error(
-            `Create user defined function failed: user defined function with id ${userDefinedFunction.id} already exists`
-          );
-        }
-      } catch (error) {
-        if (error.code !== "NotFound") {
-          throw error;
-        }
-      }
-
-      const createUDFParams: SqlUserDefinedFunctionCreateUpdateParameters = {
-        properties: {
-          resource: userDefinedFunction as SqlUserDefinedFunctionResource,
-          options: {}
-        }
-      };
-      const rpResponse = await createUpdateSqlUserDefinedFunction(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        userDefinedFunction.id,
-        createUDFParams
-      );
-      return rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.userDefinedFunctions.create(userDefinedFunction);
-    return response?.resource;
+    createdUserDefinedFunction = response.resource;
   } catch (error) {
-    handleError(
+    logConsoleError(`Error while creating user defined function ${userDefinedFunction.id}:\n ${JSON.stringify(error)}`);
-      error,
+    logError(JSON.stringify(error), "CreateUserupdateUserDefinedFunction", error.code);
-      "CreateUserupdateUserDefinedFunction",
+    sendNotificationForError(error);
-      `Error while creating user defined function ${userDefinedFunction.id}`
-    );
-    throw error;
-  } finally {
-    clearMessage();
   }
+
+  clearMessage();
+  return createdUserDefinedFunction;
 }

src/Common/dataAccess/deleteCollection.test.ts

@@ -7,6 +7,7 @@ import { AuthType } from "../../AuthType";
 import { client } from "../CosmosClient";
 import { updateUserContext } from "../../UserContext";
 import { DatabaseAccount } from "../../Contracts/DataModels";
+import { sendCachedDataMessage } from "../MessageHandler";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 
 describe("deleteCollection", () => {
@@ -17,6 +18,7 @@ describe("deleteCollection", () => {
       } as DatabaseAccount,
       defaultExperience: DefaultAccountExperienceType.DocumentDB
     });
+    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
   });
 
   it("should call ARM if logged in with AAD", async () => {

src/Common/dataAccess/deleteCollection.ts

@@ -5,10 +5,12 @@ import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-0
 import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 import { client } from "../CosmosClient";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
 
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
@@ -21,13 +23,15 @@ export async function deleteCollection(databaseId: string, collectionId: string)
         .container(collectionId)
         .delete();
     }
-    logConsoleInfo(`Successfully deleted container ${collectionId}`);
   } catch (error) {
-    handleError(error, "DeleteCollection", `Error while deleting container ${collectionId}`);
+    logConsoleError(`Error while deleting container ${collectionId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteCollection", error.code);
+    sendNotificationForError(error);
     throw error;
-  } finally {
-    clearMessage();
   }
+  logConsoleInfo(`Successfully deleted container ${collectionId}`);
+  clearMessage();
+  await refreshCachedResources();
 }
 
 function deleteCollectionWithARM(databaseId: string, collectionId: string): Promise<void> {

src/Common/dataAccess/deleteDatabase.test.ts

@@ -7,6 +7,7 @@ import { AuthType } from "../../AuthType";
 import { client } from "../CosmosClient";
 import { updateUserContext } from "../../UserContext";
 import { DatabaseAccount } from "../../Contracts/DataModels";
+import { sendCachedDataMessage } from "../MessageHandler";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 
 describe("deleteDatabase", () => {
@@ -17,6 +18,7 @@ describe("deleteDatabase", () => {
       } as DatabaseAccount,
       defaultExperience: DefaultAccountExperienceType.DocumentDB
     });
+    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
   });
 
   it("should call ARM if logged in with AAD", async () => {

src/Common/dataAccess/deleteDatabase.ts

@@ -4,10 +4,12 @@ import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/s
 import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { userContext } from "../../UserContext";
 import { client } from "../CosmosClient";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
 
 export async function deleteDatabase(databaseId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
@@ -23,13 +25,15 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
         .database(databaseId)
         .delete();
     }
-    logConsoleInfo(`Successfully deleted database ${databaseId}`);
   } catch (error) {
-    handleError(error, "DeleteDatabase", `Error while deleting database ${databaseId}`);
+    logConsoleError(`Error while deleting database ${databaseId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteDatabase", error.code);
+    sendNotificationForError(error);
     throw error;
-  } finally {
-    clearMessage();
   }
+  logConsoleInfo(`Successfully deleted database ${databaseId}`);
+  clearMessage();
+  await refreshCachedResources();
 }
 
 function deleteDatabaseWithARM(databaseId: string): Promise<void> {

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -1,10 +1,7 @@
-import { AuthType } from "../../AuthType";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { deleteSqlStoredProcedure } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logError } from "../Logger";
-import { handleError } from "../ErrorHandlingUtils";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function deleteStoredProcedure(
   databaseId: string,
@@ -13,30 +10,17 @@ export async function deleteStoredProcedure(
 ): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
   try {
-    if (
+    await client()
-      window.authType === AuthType.AAD &&
+      .database(databaseId)
-      !userContext.useSDKOperations &&
+      .container(collectionId)
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
+      .scripts.storedProcedure(storedProcedureId)
-    ) {
+      .delete();
-      await deleteSqlStoredProcedure(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        storedProcedureId
-      );
-    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .scripts.storedProcedure(storedProcedureId)
-        .delete();
-    }
   } catch (error) {
-    handleError(error, "DeleteStoredProcedure", `Error while deleting stored procedure ${storedProcedureId}`);
+    logConsoleError(`Error while deleting stored procedure ${storedProcedureId}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "DeleteStoredProcedure", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return undefined;
 }

src/Common/dataAccess/deleteTrigger.ts

@@ -1,38 +1,22 @@
-import { AuthType } from "../../AuthType";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logError } from "../Logger";
-import { handleError } from "../ErrorHandlingUtils";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function deleteTrigger(databaseId: string, collectionId: string, triggerId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
   try {
-    if (
+    await client()
-      window.authType === AuthType.AAD &&
+      .database(databaseId)
-      !userContext.useSDKOperations &&
+      .container(collectionId)
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
+      .scripts.trigger(triggerId)
-    ) {
+      .delete();
-      await deleteSqlTrigger(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        triggerId
-      );
-    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .scripts.trigger(triggerId)
-        .delete();
-    }
   } catch (error) {
-    handleError(error, "DeleteTrigger", `Error while deleting trigger ${triggerId}`);
+    logConsoleError(`Error while deleting trigger ${triggerId}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "DeleteTrigger", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return undefined;
 }

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -1,38 +1,22 @@
-import { AuthType } from "../../AuthType";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logError } from "../Logger";
-import { handleError } from "../ErrorHandlingUtils";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function deleteUserDefinedFunction(databaseId: string, collectionId: string, id: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
   try {
-    if (
+    await client()
-      window.authType === AuthType.AAD &&
+      .database(databaseId)
-      !userContext.useSDKOperations &&
+      .container(collectionId)
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
+      .scripts.userDefinedFunction(id)
-    ) {
+      .delete();
-      await deleteSqlUserDefinedFunction(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        id
-      );
-    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .scripts.userDefinedFunction(id)
-        .delete();
-    }
   } catch (error) {
-    handleError(error, "DeleteUserDefinedFunction", `Error while deleting user defined function ${id}`);
+    logConsoleError(`Error while deleting user defined function ${id}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "DeleteUserDefinedFunction", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return undefined;
 }

src/Common/dataAccess/getIndexTransformationProgress.ts

@@ -1,28 +0,0 @@
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import * as Constants from "../Constants";
-import { AuthType } from "../../AuthType";
-
-export async function getIndexTransformationProgress(databaseId: string, collectionId: string): Promise<number> {
-  if (window.authType !== AuthType.AAD) {
-    return undefined;
-  }
-  let indexTransformationPercentage: number;
-  const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
-  try {
-    const response = await client()
-      .database(databaseId)
-      .container(collectionId)
-      .read({ populateQuotaInfo: true });
-
-    indexTransformationPercentage = parseInt(
-      response.headers[Constants.HttpHeaders.collectionIndexTransformationProgress] as string
-    );
-  } catch (error) {
-    handleError(error, "ReadMongoDBCollection", `Error while reading container ${collectionId}`);
-    throw error;
-  }
-  clearMessage();
-  return indexTransformationPercentage;
-}

src/Common/dataAccess/readCollection.ts

@@ -1,7 +1,8 @@
 import * as DataModels from "../../Contracts/DataModels";
 import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
 
 export async function readCollection(databaseId: string, collectionId: string): Promise<DataModels.Collection> {
   let collection: DataModels.Collection;
@@ -13,7 +14,9 @@ export async function readCollection(databaseId: string, collectionId: string):
       .read();
     collection = response.resource as DataModels.Collection;
   } catch (error) {
-    handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
+    logConsoleError(`Error while querying container ${collectionId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollection", error.code);
+    sendNotificationForError(error);
     throw error;
   }
   clearMessage();

src/Common/dataAccess/readCollectionOffer.ts

@@ -4,14 +4,15 @@ import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType
 import { HttpHeaders } from "../Constants";
 import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
 import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { getTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
 import { readOffers } from "./readOffers";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export const readCollectionOffer = async (
@@ -56,7 +57,9 @@ export const readCollectionOffer = async (
       }
     );
   } catch (error) {
-    handleError(error, "ReadCollectionOffer", `Error while querying offer for collection ${params.collectionId}`);
+    logConsoleError(`Error while querying offer for collection ${params.collectionId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollectionOffer", error.code);
+    sendNotificationForError(error);
     throw error;
   } finally {
     clearMessage();

src/Common/dataAccess/readCollectionQuotaInfo.ts

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

src/Common/dataAccess/readCollections.ts

@@ -2,16 +2,18 @@ import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
 import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
+  let collections: DataModels.Collection[];
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
   try {
     if (
@@ -20,20 +22,22 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
       userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
-      return await readCollectionsWithARM(databaseId);
+      collections = await readCollectionsWithARM(databaseId);
+    } else {
+      const sdkResponse = await client()
+        .database(databaseId)
+        .containers.readAll()
+        .fetchAll();
+      collections = sdkResponse.resources as DataModels.Collection[];
     }
-
-    const sdkResponse = await client()
-      .database(databaseId)
-      .containers.readAll()
-      .fetchAll();
-    return sdkResponse.resources as DataModels.Collection[];
   } catch (error) {
-    handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
+    logConsoleError(`Error while querying containers for database ${databaseId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollections", error.code);
+    sendNotificationForError(error);
     throw error;
-  } finally {
-    clearMessage();
   }
+  clearMessage();
+  return collections;
 }
 
 async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {

src/Common/dataAccess/readDatabaseOffer.ts

@@ -8,9 +8,10 @@ import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-
 import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
 import { readOffers } from "./readOffers";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export const readDatabaseOffer = async (
@@ -19,14 +20,26 @@ export const readDatabaseOffer = async (
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
   let offerId = params.offerId;
   if (!offerId) {
-    offerId = await (window.authType === AuthType.AAD &&
+    if (
-    !userContext.useSDKOperations &&
+      window.authType === AuthType.AAD &&
-    userContext.defaultExperience !== DefaultAccountExperienceType.Table
+      !userContext.useSDKOperations &&
-      ? getDatabaseOfferIdWithARM(params.databaseId)
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
-      : getDatabaseOfferIdWithSDK(params.databaseResourceId));
+    ) {
-    if (!offerId) {
+      try {
-      clearMessage();
+        offerId = await getDatabaseOfferIdWithARM(params.databaseId);
-      return undefined;
+      } catch (error) {
+        clearMessage();
+        if (error.code !== "NotFound") {
+          throw new error();
+        }
+        return undefined;
+      }
+    } else {
+      offerId = await getDatabaseOfferIdWithSDK(params.databaseResourceId);
+      if (!offerId) {
+        clearMessage();
+        return undefined;
+      }
     }
   }
 
@@ -47,7 +60,9 @@ export const readDatabaseOffer = async (
       }
     );
   } catch (error) {
-    handleError(error, "ReadDatabaseOffer", `Error while querying offer for database ${params.databaseId}`);
+    logConsoleError(`Error while querying offer for database ${params.databaseId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadDatabaseOffer", error.code);
+    sendNotificationForError(error);
     throw error;
   } finally {
     clearMessage();
@@ -60,32 +75,24 @@ const getDatabaseOfferIdWithARM = async (databaseId: string): Promise<string> =>
   const resourceGroup = userContext.resourceGroup;
   const accountName = userContext.databaseAccount.name;
   const defaultExperience = userContext.defaultExperience;
-
+  switch (defaultExperience) {
-  try {
+    case DefaultAccountExperienceType.DocumentDB:
-    switch (defaultExperience) {
+      rpResponse = await getSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
-      case DefaultAccountExperienceType.DocumentDB:
+      break;
-        rpResponse = await getSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+    case DefaultAccountExperienceType.MongoDB:
-        break;
+      rpResponse = await getMongoDBDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
-      case DefaultAccountExperienceType.MongoDB:
+      break;
-        rpResponse = await getMongoDBDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+    case DefaultAccountExperienceType.Cassandra:
-        break;
+      rpResponse = await getCassandraKeyspaceThroughput(subscriptionId, resourceGroup, accountName, databaseId);
-      case DefaultAccountExperienceType.Cassandra:
+      break;
-        rpResponse = await getCassandraKeyspaceThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+    case DefaultAccountExperienceType.Graph:
-        break;
+      rpResponse = await getGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
-      case DefaultAccountExperienceType.Graph:
+      break;
-        rpResponse = await getGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+    default:
-        break;
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
-      default:
-        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
-    }
-
-    return rpResponse?.name;
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-    return undefined;
   }
+
+  return rpResponse?.name;
 };
 
 const getDatabaseOfferIdWithSDK = async (databaseResourceId: string): Promise<string> => {

src/Common/dataAccess/readDatabases.ts

@@ -2,12 +2,13 @@ import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
 import { listSqlDatabases } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export async function readDatabases(): Promise<DataModels.Database[]> {
@@ -17,7 +18,9 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
     if (
       window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Cassandra
     ) {
       databases = await readDatabasesWithARM();
     } else {
@@ -27,7 +30,9 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
       databases = sdkResponse.resources as DataModels.Database[];
     }
   } catch (error) {
-    handleError(error, "ReadDatabases", `Error while querying databases`);
+    logConsoleError(`Error while querying databases:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadDatabases", error.code);
+    sendNotificationForError(error);
     throw error;
   }
   clearMessage();

src/Common/dataAccess/readMongoDBCollection.tsx

@@ -1,30 +0,0 @@
-import { userContext } from "../../UserContext";
-import { getMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { MongoDBCollectionResource } from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { handleError } from "../ErrorHandlingUtils";
-import { AuthType } from "../../AuthType";
-
-export async function readMongoDBCollectionThroughRP(
-  databaseId: string,
-  collectionId: string
-): Promise<MongoDBCollectionResource> {
-  if (window.authType !== AuthType.AAD) {
-    return undefined;
-  }
-  let collection: MongoDBCollectionResource;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
-  try {
-    const response = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
-    collection = response.properties.resource;
-  } catch (error) {
-    handleError(error, "ReadMongoDBCollection", `Error while reading container ${collectionId}`);
-    throw error;
-  }
-  clearMessage();
-  return collection;
-}

src/Common/dataAccess/readOffers.ts

@@ -1,10 +1,26 @@
 import { Offer } from "../../Contracts/DataModels";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { ClientDefaults } from "../Constants";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { Platform, configContext } from "../../ConfigContext";
 import { client } from "../CosmosClient";
-import { handleError, getErrorMessage } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendCachedDataMessage } from "../MessageHandler";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
 
 export const readOffers = async (): Promise<Offer[]> => {
   const clearMessage = logConsoleProgress(`Querying offers`);
+  try {
+    if (configContext.platform === Platform.Portal) {
+      return sendCachedDataMessage<Offer[]>(MessageTypes.AllOffers, [
+        userContext.databaseAccount.id,
+        ClientDefaults.portalCacheTimeoutMs
+      ]);
+    }
+  } catch (error) {
+    // If error getting cached Offers, continue on and read via SDK
+  }
 
   try {
     const response = await client()
@@ -13,11 +29,13 @@ export const readOffers = async (): Promise<Offer[]> => {
     return response?.resources;
   } catch (error) {
     // This should be removed when we can correctly identify if an account is serverless when connected using connection string too.
-    if (getErrorMessage(error)?.includes("Reading or replacing offers is not supported for serverless accounts")) {
+    if (error.message.includes("Reading or replacing offers is not supported for serverless accounts")) {
       return [];
     }
 
-    handleError(error, "ReadOffers", `Error while querying offers`);
+    logConsoleError(`Error while querying offers:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadOffers", error.code);
+    sendNotificationForError(error);
     throw error;
   } finally {
     clearMessage();

src/Common/dataAccess/readStoredProcedures.ts

@@ -1,43 +1,27 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
+import { logError } from "../Logger";
-import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function readStoredProcedures(
   databaseId: string,
   collectionId: string
 ): Promise<(StoredProcedureDefinition & Resource)[]> {
+  let sprocs: (StoredProcedureDefinition & Resource)[];
   const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      const rpResponse = await listSqlStoredProcedures(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId
-      );
-      return rpResponse?.value?.map(sproc => sproc.properties?.resource as StoredProcedureDefinition & Resource);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.storedProcedures.readAll()
       .fetchAll();
-    return response?.resources;
+    sprocs = response.resources;
   } catch (error) {
-    handleError(error, "ReadStoredProcedures", `Failed to query stored procedures for container ${collectionId}`);
+    logConsoleError(`Failed to query stored procedures for container ${collectionId}: ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "ReadStoredProcedures", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+  clearMessage();
+  return sprocs;
 }

src/Common/dataAccess/readTriggers.ts

@@ -1,43 +1,27 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
-import { listSqlTriggers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logError } from "../Logger";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { userContext } from "../../UserContext";
-import { handleError } from "../ErrorHandlingUtils";
 
 export async function readTriggers(
   databaseId: string,
   collectionId: string
 ): Promise<(TriggerDefinition & Resource)[]> {
+  let triggers: (TriggerDefinition & Resource)[];
   const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      const rpResponse = await listSqlTriggers(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId
-      );
-      return rpResponse?.value?.map(trigger => trigger.properties?.resource as TriggerDefinition & Resource);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.triggers.readAll()
       .fetchAll();
-    return response?.resources;
+    triggers = response.resources;
   } catch (error) {
-    handleError(error, "ReadTriggers", `Failed to query triggers for container ${collectionId}`);
+    logConsoleError(`Failed to query triggers for container ${collectionId}: ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "ReadTriggers", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+  clearMessage();
+  return triggers;
 }

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -1,47 +1,27 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
+import { logError } from "../Logger";
-import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function readUserDefinedFunctions(
   databaseId: string,
   collectionId: string
 ): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
+  let udfs: (UserDefinedFunctionDefinition & Resource)[];
   const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      const rpResponse = await listSqlUserDefinedFunctions(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId
-      );
-      return rpResponse?.value?.map(udf => udf.properties?.resource as UserDefinedFunctionDefinition & Resource);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.userDefinedFunctions.readAll()
       .fetchAll();
-    return response?.resources;
+    udfs = response.resources;
   } catch (error) {
-    handleError(
+    logConsoleError(`Failed to query user defined functions for container ${collectionId}: ${JSON.stringify(error)}`);
-      error,
+    logError(JSON.stringify(error), "ReadUserDefinedFunctions", error.code);
-      "ReadUserDefinedFunctions",
+    sendNotificationForError(error);
-      `Failed to query user defined functions for container ${collectionId}`
-    );
-    throw error;
-  } finally {
-    clearMessage();
   }
+  clearMessage();
+  return udfs;
 }

src/Common/dataAccess/sendNotificationForError.ts

@@ -0,0 +1,20 @@
+import * as Constants from "../Constants";
+import { sendMessage } from "../MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+
+interface CosmosError {
+  code: number;
+  message?: string;
+}
+
+export function sendNotificationForError(error: CosmosError): void {
+  if (error && error.code === Constants.HttpStatusCodes.Forbidden) {
+    if (error.message && error.message.toLowerCase().indexOf("sharedoffer is disabled for your account") > 0) {
+      return;
+    }
+    sendMessage({
+      type: MessageTypes.ForbiddenError,
+      reason: error && error.message ? error.message : error
+    });
+  }
+}

src/Common/dataAccess/updateCollection.ts

@@ -3,10 +3,7 @@ import { Collection } from "../../Contracts/DataModels";
 import { ContainerDefinition } from "@azure/cosmos";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import {
-  CreateUpdateOptions,
   ExtendedResourceProperties,
-  MongoDBCollectionCreateUpdateParameters,
-  MongoDBCollectionResource,
   SqlContainerCreateUpdateParameters,
   SqlContainerResource
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
@@ -26,8 +23,10 @@ import {
   getGremlinGraph
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export async function updateCollection(
@@ -42,7 +41,6 @@ export async function updateCollection(
   try {
     if (
       window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
@@ -52,18 +50,18 @@ export async function updateCollection(
         .database(databaseId)
         .container(collectionId)
         .replace(newCollection as ContainerDefinition, options);
-
       collection = sdkResponse.resource as Collection;
     }
-
-    logConsoleInfo(`Successfully updated container ${collectionId}`);
-    return collection;
   } catch (error) {
-    handleError(error, "UpdateCollection", `Failed to update container ${collectionId}`);
+    logConsoleError(`Failed to update container ${collectionId}: ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "UpdateCollection", error.code);
+    sendNotificationForError(error);
     throw error;
-  } finally {
-    clearMessage();
   }
+  logConsoleInfo(`Successfully updated container ${collectionId}`);
+  clearMessage();
+  await refreshCachedResources();
+  return collection;
 }
 
 async function updateCollectionWithARM(
@@ -79,6 +77,15 @@ async function updateCollectionWithARM(
   switch (defaultExperience) {
     case DefaultAccountExperienceType.DocumentDB:
       return updateSqlContainer(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    case DefaultAccountExperienceType.MongoDB:
+      return updateMongoDBCollection(
+        databaseId,
+        collectionId,
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        newCollection
+      );
     case DefaultAccountExperienceType.Cassandra:
       return updateCassandraTable(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
     case DefaultAccountExperienceType.Graph:
@@ -115,35 +122,26 @@ async function updateSqlContainer(
   throw new Error(`Sql container to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
 }
 
-export async function updateMongoDBCollectionThroughRP(
+async function updateMongoDBCollection(
   databaseId: string,
   collectionId: string,
-  newCollection: MongoDBCollectionResource,
+  subscriptionId: string,
-  updateOptions?: CreateUpdateOptions
+  resourceGroup: string,
-): Promise<MongoDBCollectionResource> {
+  accountName: string,
-  const subscriptionId = userContext.subscriptionId;
+  newCollection: Collection
-  const resourceGroup = userContext.resourceGroup;
+): Promise<Collection> {
-  const accountName = userContext.databaseAccount.name;
-
   const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
-    const updateParams: MongoDBCollectionCreateUpdateParameters = {
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
-      properties: {
-        resource: newCollection,
-        options: updateOptions
-      }
-    };
-
     const updateResponse = await createUpdateMongoDBCollection(
       subscriptionId,
       resourceGroup,
       accountName,
       databaseId,
       collectionId,
-      updateParams
+      getResponse as SqlContainerCreateUpdateParameters
     );
-
+    return updateResponse && (updateResponse.properties.resource as Collection);
-    return updateResponse && (updateResponse.properties.resource as MongoDBCollectionResource);
   }
 
   throw new Error(

src/Common/dataAccess/updateOffer.ts

@@ -1,419 +0,0 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { HttpHeaders } from "../Constants";
-import { Offer, UpdateOfferParams } from "../../Contracts/DataModels";
-import { OfferDefinition } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { readCollectionOffer } from "./readCollectionOffer";
-import { readDatabaseOffer } from "./readDatabaseOffer";
-import {
-  updateSqlDatabaseThroughput,
-  migrateSqlDatabaseToAutoscale,
-  migrateSqlDatabaseToManualThroughput,
-  migrateSqlContainerToAutoscale,
-  migrateSqlContainerToManualThroughput,
-  updateSqlContainerThroughput
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import {
-  updateCassandraKeyspaceThroughput,
-  migrateCassandraKeyspaceToAutoscale,
-  migrateCassandraKeyspaceToManualThroughput,
-  migrateCassandraTableToAutoscale,
-  migrateCassandraTableToManualThroughput,
-  updateCassandraTableThroughput
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  updateMongoDBDatabaseThroughput,
-  migrateMongoDBDatabaseToAutoscale,
-  migrateMongoDBDatabaseToManualThroughput,
-  migrateMongoDBCollectionToAutoscale,
-  migrateMongoDBCollectionToManualThroughput,
-  updateMongoDBCollectionThroughput
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import {
-  updateGremlinDatabaseThroughput,
-  migrateGremlinDatabaseToAutoscale,
-  migrateGremlinDatabaseToManualThroughput,
-  migrateGremlinGraphToAutoscale,
-  migrateGremlinGraphToManualThroughput,
-  updateGremlinGraphThroughput
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { userContext } from "../../UserContext";
-import {
-  migrateTableToAutoscale,
-  migrateTableToManualThroughput,
-  updateTableThroughput
-} from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-
-export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> => {
-  let updatedOffer: Offer;
-  const offerResourceText: string = params.collectionId
-    ? `collection ${params.collectionId}`
-    : `database ${params.databaseId}`;
-  const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
-
-  try {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
-      if (params.collectionId) {
-        updatedOffer = await updateCollectionOfferWithARM(params);
-      } else if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
-        // update table's database offer with SDK since RP doesn't support it
-        updatedOffer = await updateOfferWithSDK(params);
-      } else {
-        updatedOffer = await updateDatabaseOfferWithARM(params);
-      }
-    } else {
-      updatedOffer = await updateOfferWithSDK(params);
-    }
-    logConsoleInfo(`Successfully updated offer for ${offerResourceText}`);
-    return updatedOffer;
-  } catch (error) {
-    handleError(error, "UpdateCollection", `Error updating offer for ${offerResourceText}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};
-
-const updateCollectionOfferWithARM = async (params: UpdateOfferParams): Promise<Offer> => {
-  try {
-    switch (userContext.defaultExperience) {
-      case DefaultAccountExperienceType.DocumentDB:
-        await updateSqlContainerOffer(params);
-        break;
-      case DefaultAccountExperienceType.MongoDB:
-        await updateMongoCollectionOffer(params);
-        break;
-      case DefaultAccountExperienceType.Cassandra:
-        await updateCassandraTableOffer(params);
-        break;
-      case DefaultAccountExperienceType.Graph:
-        await updateGremlinGraphOffer(params);
-        break;
-      case DefaultAccountExperienceType.Table:
-        await updateTableOffer(params);
-        break;
-      default:
-        throw new Error(`Unsupported default experience type: ${userContext.defaultExperience}`);
-    }
-  } catch (error) {
-    if (error.code !== "MethodNotAllowed") {
-      throw error;
-    }
-  }
-
-  return await readCollectionOffer({
-    collectionId: params.collectionId,
-    databaseId: params.databaseId,
-    offerId: params.currentOffer.id
-  });
-};
-
-const updateDatabaseOfferWithARM = async (params: UpdateOfferParams): Promise<Offer> => {
-  try {
-    switch (userContext.defaultExperience) {
-      case DefaultAccountExperienceType.DocumentDB:
-        await updateSqlDatabaseOffer(params);
-        break;
-      case DefaultAccountExperienceType.MongoDB:
-        await updateMongoDatabaseOffer(params);
-        break;
-      case DefaultAccountExperienceType.Cassandra:
-        await updateCassandraKeyspaceOffer(params);
-        break;
-      case DefaultAccountExperienceType.Graph:
-        await updateGremlinDatabaseOffer(params);
-        break;
-      default:
-        throw new Error(`Unsupported default experience type: ${userContext.defaultExperience}`);
-    }
-  } catch (error) {
-    if (error.code !== "MethodNotAllowed") {
-      throw error;
-    }
-  }
-
-  return await readDatabaseOffer({
-    databaseId: params.databaseId,
-    offerId: params.currentOffer.id
-  });
-};
-
-const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateSqlContainerToAutoscale(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else if (params.migrateToManual) {
-    await migrateSqlContainerToManualThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateSqlContainerThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId,
-      body
-    );
-  }
-};
-
-const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateMongoDBCollectionToAutoscale(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else if (params.migrateToManual) {
-    await migrateMongoDBCollectionToManualThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateMongoDBCollectionThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId,
-      body
-    );
-  }
-};
-
-const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateCassandraTableToAutoscale(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else if (params.migrateToManual) {
-    await migrateCassandraTableToManualThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateCassandraTableThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId,
-      body
-    );
-  }
-};
-
-const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateGremlinGraphToAutoscale(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else if (params.migrateToManual) {
-    await migrateGremlinGraphToManualThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId
-    );
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateGremlinGraphThroughput(
-      subscriptionId,
-      resourceGroup,
-      accountName,
-      params.databaseId,
-      params.collectionId,
-      body
-    );
-  }
-};
-
-const updateTableOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateTableToAutoscale(subscriptionId, resourceGroup, accountName, params.collectionId);
-  } else if (params.migrateToManual) {
-    await migrateTableToManualThroughput(subscriptionId, resourceGroup, accountName, params.collectionId);
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateTableThroughput(subscriptionId, resourceGroup, accountName, params.collectionId, body);
-  }
-};
-
-const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateSqlDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else if (params.migrateToManual) {
-    await migrateSqlDatabaseToManualThroughput(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, params.databaseId, body);
-  }
-};
-
-const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateMongoDBDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else if (params.migrateToManual) {
-    await migrateMongoDBDatabaseToManualThroughput(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateMongoDBDatabaseThroughput(subscriptionId, resourceGroup, accountName, params.databaseId, body);
-  }
-};
-
-const updateCassandraKeyspaceOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateCassandraKeyspaceToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else if (params.migrateToManual) {
-    await migrateCassandraKeyspaceToManualThroughput(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateCassandraKeyspaceThroughput(subscriptionId, resourceGroup, accountName, params.databaseId, body);
-  }
-};
-
-const updateGremlinDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
-  if (params.migrateToAutoPilot) {
-    await migrateGremlinDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else if (params.migrateToManual) {
-    await migrateGremlinDatabaseToManualThroughput(subscriptionId, resourceGroup, accountName, params.databaseId);
-  } else {
-    const body: ThroughputSettingsUpdateParameters = createUpdateOfferBody(params);
-    await updateGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, params.databaseId, body);
-  }
-};
-
-const createUpdateOfferBody = (params: UpdateOfferParams): ThroughputSettingsUpdateParameters => {
-  const body: ThroughputSettingsUpdateParameters = {
-    properties: {
-      resource: {}
-    }
-  };
-
-  if (params.autopilotThroughput) {
-    body.properties.resource.autoscaleSettings = {
-      maxThroughput: params.autopilotThroughput
-    };
-  } else {
-    body.properties.resource.throughput = params.manualThroughput;
-  }
-
-  return body;
-};
-
-const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> => {
-  const currentOffer = params.currentOffer;
-  const newOffer: Offer = {
-    content: {
-      offerThroughput: undefined,
-      offerIsRUPerMinuteThroughputEnabled: false
-    },
-    _etag: undefined,
-    _ts: undefined,
-    _rid: currentOffer._rid,
-    _self: currentOffer._self,
-    id: currentOffer.id,
-    offerResourceId: currentOffer.offerResourceId,
-    offerVersion: currentOffer.offerVersion,
-    offerType: currentOffer.offerType,
-    resource: currentOffer.resource
-  };
-
-  if (params.autopilotThroughput) {
-    newOffer.content.offerAutopilotSettings = {
-      maxThroughput: params.autopilotThroughput
-    };
-  } else {
-    newOffer.content.offerThroughput = params.manualThroughput;
-  }
-
-  const options: RequestOptions = {};
-  if (params.migrateToAutoPilot) {
-    options.initialHeaders = {
-      [HttpHeaders.migrateOfferToAutopilot]: "true"
-    };
-    delete newOffer.content.offerAutopilotSettings;
-  } else if (params.migrateToManual) {
-    options.initialHeaders = {
-      [HttpHeaders.migrateOfferToManualThroughput]: "true"
-    };
-    newOffer.content.offerAutopilotSettings = { maxThroughput: 0 };
-  }
-
-  const sdkResponse = await client()
-    .offer(params.currentOffer.id)
-    // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
-    .replace((newOffer as unknown) as OfferDefinition, options);
-  return sdkResponse?.resource;
-};

src/Common/dataAccess/updateOfferThroughputBeyondLimit.test.ts

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

src/Common/dataAccess/updateOfferThroughputBeyondLimit.ts

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

src/Common/dataAccess/updateStoredProcedure.ts

@@ -1,72 +1,29 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
-import {
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-  SqlStoredProcedureCreateUpdateParameters,
-  SqlStoredProcedureResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import {
+import { logError } from "../Logger";
-  createUpdateSqlStoredProcedure,
+import { sendNotificationForError } from "./sendNotificationForError";
-  getSqlStoredProcedure
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function updateStoredProcedure(
   databaseId: string,
   collectionId: string,
   storedProcedure: StoredProcedureDefinition
 ): Promise<StoredProcedureDefinition & Resource> {
+  let updatedStoredProcedure: StoredProcedureDefinition & Resource;
   const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      const getResponse = await getSqlStoredProcedure(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        storedProcedure.id
-      );
-
-      if (getResponse?.properties?.resource) {
-        const createSprocParams: SqlStoredProcedureCreateUpdateParameters = {
-          properties: {
-            resource: storedProcedure as SqlStoredProcedureResource,
-            options: {}
-          }
-        };
-        const rpResponse = await createUpdateSqlStoredProcedure(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-          databaseId,
-          collectionId,
-          storedProcedure.id,
-          createSprocParams
-        );
-        return rpResponse && (rpResponse.properties?.resource as StoredProcedureDefinition & Resource);
-      }
-
-      throw new Error(`Failed to update stored procedure: ${storedProcedure.id} does not exist.`);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.storedProcedure(storedProcedure.id)
       .replace(storedProcedure);
-    return response?.resource;
+    updatedStoredProcedure = response.resource;
   } catch (error) {
-    handleError(error, "UpdateStoredProcedure", `Error while updating stored procedure ${storedProcedure.id}`);
+    logConsoleError(`Error while updating stored procedure ${storedProcedure.id}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "UpdateStoredProcedure", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return updatedStoredProcedure;
 }

src/Common/dataAccess/updateTrigger.ts

@@ -1,69 +1,29 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import {
-  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { TriggerDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logError } from "../Logger";
-import { handleError } from "../ErrorHandlingUtils";
+import { sendNotificationForError } from "./sendNotificationForError";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function updateTrigger(
   databaseId: string,
   collectionId: string,
   trigger: TriggerDefinition
 ): Promise<TriggerDefinition> {
+  let updatedTrigger: TriggerDefinition;
   const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      const getResponse = await getSqlTrigger(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        trigger.id
-      );
-
-      if (getResponse?.properties?.resource) {
-        const createTriggerParams: SqlTriggerCreateUpdateParameters = {
-          properties: {
-            resource: trigger as SqlTriggerResource,
-            options: {}
-          }
-        };
-        const rpResponse = await createUpdateSqlTrigger(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-          databaseId,
-          collectionId,
-          trigger.id,
-          createTriggerParams
-        );
-        return rpResponse && (rpResponse.properties?.resource as TriggerDefinition);
-      }
-
-      throw new Error(`Failed to update trigger: ${trigger.id} does not exist.`);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.trigger(trigger.id)
       .replace(trigger);
-    return response?.resource;
+    updatedTrigger = response.resource;
   } catch (error) {
-    handleError(error, "UpdateTrigger", `Error while updating trigger ${trigger.id}`);
+    logConsoleError(`Error while updating trigger ${trigger.id}:\n ${JSON.stringify(error)}`);
-    throw error;
+    logError(JSON.stringify(error), "UpdateTrigger", error.code);
-  } finally {
+    sendNotificationForError(error);
-    clearMessage();
   }
+
+  clearMessage();
+  return updatedTrigger;
 }

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -1,76 +1,29 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
-import {
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-  SqlUserDefinedFunctionCreateUpdateParameters,
-  SqlUserDefinedFunctionResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import {
+import { logError } from "../Logger";
-  createUpdateSqlUserDefinedFunction,
+import { sendNotificationForError } from "./sendNotificationForError";
-  getSqlUserDefinedFunction
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function updateUserDefinedFunction(
   databaseId: string,
   collectionId: string,
   userDefinedFunction: UserDefinedFunctionDefinition
 ): Promise<UserDefinedFunctionDefinition & Resource> {
+  let updatedUserDefinedFunction: UserDefinedFunctionDefinition & Resource;
   const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
   try {
-    if (
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
-      const getResponse = await getSqlUserDefinedFunction(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
-        databaseId,
-        collectionId,
-        userDefinedFunction.id
-      );
-
-      if (getResponse?.properties?.resource) {
-        const createUDFParams: SqlUserDefinedFunctionCreateUpdateParameters = {
-          properties: {
-            resource: userDefinedFunction as SqlUserDefinedFunctionResource,
-            options: {}
-          }
-        };
-        const rpResponse = await createUpdateSqlUserDefinedFunction(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
-          databaseId,
-          collectionId,
-          userDefinedFunction.id,
-          createUDFParams
-        );
-        return rpResponse && (rpResponse.properties?.resource as UserDefinedFunctionDefinition & Resource);
-      }
-
-      throw new Error(`Failed to update user defined function: ${userDefinedFunction.id} does not exist.`);
-    }
-
     const response = await client()
       .database(databaseId)
       .container(collectionId)
       .scripts.userDefinedFunction(userDefinedFunction.id)
       .replace(userDefinedFunction);
-    return response?.resource;
+    updatedUserDefinedFunction = response.resource;
   } catch (error) {
-    handleError(
+    logConsoleError(`Error while updating user defined function ${userDefinedFunction.id}:\n ${JSON.stringify(error)}`);
-      error,
+    logError(JSON.stringify(error), "UpdateUserupdateUserDefinedFunction", error.code);
-      "UpdateUserupdateUserDefinedFunction",
+    sendNotificationForError(error);
-      `Error while updating user defined function ${userDefinedFunction.id}`
-    );
-    throw error;
-  } finally {
-    clearMessage();
   }
+
+  clearMessage();
+  return updatedUserDefinedFunction;
 }

src/ConfigContext.ts

@@ -34,7 +34,6 @@ let configContext: Readonly<ConfigContext> = {
   allowedParentFrameOrigins: [
     `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
-    `^https:\\/\\/[\\.\\w]*portal\\.microsoftazure.de$`,
     `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
     `^https://cosmos-db-dataexplorer-germanycentral.azurewebsites.de$`
@@ -51,8 +50,7 @@ let configContext: Readonly<ConfigContext> = {
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/settings/applications/1189306
-  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
+  JUNO_ENDPOINT: "https://tools.cosmos.azure.com"
-  BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
 };
 
 export function resetConfigContext(): void {

src/Contracts/DataModels.ts

@@ -191,6 +191,18 @@ export interface OfferWithHeaders extends Offer {
   headers: any;
 }
 
+export interface CollectionQuotaInfo {
+  storedProcedures: number;
+  triggers: number;
+  functions: number;
+  documentsSize: number;
+  collectionSize: number;
+  documentsCount: number;
+  usageSizeInKB: number;
+  numPartitions: number;
+  uniqueKeyPolicy?: UniqueKeyPolicy; // TODO: This should ideally not be a part of the collection quota. Remove after refactoring. (#119617)
+}
+
 export interface OfferThroughputInfo {
   minimumRUForCollection: number;
   numPhysicalPartitions: number;
@@ -204,6 +216,18 @@ export interface UniqueKey {
   paths: string[];
 }
 
+// Returned by DocumentDb client proxy
+// Inner errors in BackendErrorDataModel when error is in SQL syntax
+export interface ErrorDataModel {
+  message: string;
+  severity?: string;
+  location?: {
+    start: string;
+    end: string;
+  };
+  code?: string;
+}
+
 export interface CreateDatabaseAndCollectionRequest {
   databaseId: string;
   collectionId: string;
@@ -215,12 +239,21 @@ export interface CreateDatabaseAndCollectionRequest {
   uniqueKeyPolicy?: UniqueKeyPolicy;
   autoPilot?: AutoPilotCreationSettings;
   analyticalStorageTtl?: number;
+  hasAutoPilotV2FeatureFlag?: boolean;
 }
 
 export interface AutoPilotCreationSettings {
+  autopilotTier?: AutopilotTier;
   maxThroughput?: number;
 }
 
+export enum AutopilotTier {
+  Tier1 = 1,
+  Tier2 = 2,
+  Tier3 = 3,
+  Tier4 = 4
+}
+
 export interface Query {
   id: string;
   resourceId: string;
@@ -229,7 +262,9 @@ export interface Query {
 }
 
 export interface AutoPilotOfferSettings {
+  tier?: AutopilotTier;
   maximumTierThroughput?: number;
+  targetTier?: AutopilotTier;
   maxThroughput?: number;
   targetMaxThroughput?: number;
 }
@@ -268,16 +303,6 @@ export interface ReadCollectionOfferParams {
   offerId?: string;
 }
 
-export interface UpdateOfferParams {
-  currentOffer: Offer;
-  databaseId: string;
-  autopilotThroughput: number;
-  manualThroughput: number;
-  collectionId?: string;
-  migrateToAutoPilot?: boolean;
-  migrateToManual?: boolean;
-}
-
 export interface Notification {
   id: string;
   kind: string;
@@ -456,6 +481,7 @@ export interface MongoParameters extends RpParameters {
   rid?: string;
   rtype?: string;
   isAutoPilot?: Boolean;
+  autoPilotTier?: string;
   autoPilotThroughput?: string;
   analyticalStorageTtl?: number;
 }

src/Contracts/Diagnostics.ts

@@ -46,7 +46,7 @@ export interface LogEntry {
   /**
    * The message code.
    */
-  code?: number | string;
+  code?: number;
   /**
    * Any additional data to be logged.
    */

src/Contracts/ViewModels.ts

@@ -85,7 +85,7 @@ export interface Database extends TreeNode {
   collapseDatabase(): void;
 
   loadCollections(): Promise<void>;
-  findCollectionWithId(collectionId: string): Collection;
+  findCollectionWithId(collectionRid: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
   onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
@@ -117,6 +117,7 @@ export interface Collection extends CollectionBase {
   analyticalStorageTtl: ko.Observable<number>;
   indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
+  quotaInfo: ko.Observable<DataModels.CollectionQuotaInfo>;
   offer: ko.Observable<DataModels.Offer>;
   conflictResolutionPolicy: ko.Observable<DataModels.ConflictResolutionPolicy>;
   changeFeedPolicy: ko.Observable<DataModels.ChangeFeedPolicy>;
@@ -265,6 +266,7 @@ export interface TabOptions {
   tabKind: CollectionTabKind;
   title: string;
   tabPath: string;
+  selfLink: string;
   isActive: ko.Observable<boolean>;
   hashLocation: string;
   onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
@@ -288,10 +290,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>;
@@ -307,6 +305,7 @@ export interface QueryTabOptions extends TabOptions {
 export interface ScriptTabOption extends TabOptions {
   resource: any;
   isNew: boolean;
+  collectionSelfLink?: string;
   partitionKey?: DataModels.PartitionKey;
 }
 
@@ -389,7 +388,6 @@ export interface DataExplorerInputsFrame {
   dataExplorerVersion?: string;
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
-  flights?: readonly string[];
 }
 
 export interface CollectionCreationDefaults {

src/Definitions/jquery.contextmenu.d.ts

@@ -0,0 +1,42 @@
+// Type definitions for jQuery contextMenu 1.7.0
+// Project: http://medialize.github.com/jQuery-contextMenu/
+// Definitions by: Natan Vivo <https://github.com/nvivo/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="jquery.d.ts" />
+
+interface JQueryContextMenuOptions {
+  selector: string;
+  appendTo?: string;
+  trigger?: string;
+  autoHide?: boolean;
+  delay?: number;
+  determinePosition?: (menu: JQuery) => void;
+  position?: (opt: JQuery, x: number, y: number) => void;
+  positionSubmenu?: (menu: JQuery) => void;
+  zIndex?: number;
+  animation?: {
+    duration?: number;
+    show?: string;
+    hide?: string;
+  };
+  events?: {
+    show?: () => void;
+    hide?: () => void;
+  };
+  callback?: (key: any, options: any) => any;
+  items?: any;
+  build?: (triggerElement: JQuery, e: Event) => any;
+  reposition?: boolean;
+  className?: string;
+  itemClickEvent?: string;
+}
+
+interface JQueryStatic {
+  contextMenu(options?: JQueryContextMenuOptions): JQuery;
+  contextMenu(type: string, selector?: any): JQuery;
+}
+
+interface JQuery {
+  contextMenu(options?: any): JQuery;
+}

src/Explorer/ComponentRegisterer.test.ts

@@ -123,4 +123,8 @@ describe("Component Registerer", () => {
   it("should register dynamic-list component", () => {
     expect(ko.components.isRegistered("dynamic-list")).toBe(true);
   });
+
+  it("should register throughput-input component", () => {
+    expect(ko.components.isRegistered("throughput-input")).toBe(true);
+  });
 });

src/Explorer/ComponentRegisterer.ts

@@ -11,6 +11,7 @@ import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahea
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
 import { TabsManagerKOComponent } from "./Tabs/TabsManager";
+import { ThroughputInputComponent } from "./Controls/ThroughputInput/ThroughputInputComponent";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
@@ -22,6 +23,7 @@ ko.components.register("editor", new EditorComponent());
 ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
+ko.components.register("throughput-input", ThroughputInputComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
 ko.components.register("tabs-manager", TabsManagerKOComponent());
 

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

@@ -1,9 +1,12 @@
 import * as React from "react";
 import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
 import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
-import { IContextualMenuItem, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
+import {
+  IContextualMenuItem,
+  IContextualMenuProps,
+  ContextualMenuItemType
+} from "office-ui-fabric-react/lib/ContextualMenu";
 import * as Logger from "../../../Common/Logger";
-import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
 
 export interface ArcadiaMenuPickerProps {
   selectText?: string;
@@ -44,7 +47,7 @@ export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, A
         selectedSparkPool: item.text
       });
     } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaMenuPicker/_onSparkPoolClicked");
+      Logger.logError(error, "ArcadiaMenuPicker/_onSparkPoolClicked");
       throw error;
     }
   };

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx

@@ -1,14 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { CollapsibleSectionComponent, CollapsibleSectionProps } from "./CollapsibleSectionComponent";
-
-describe("CollapsibleSectionComponent", () => {
-  it("renders", () => {
-    const props: CollapsibleSectionProps = {
-      title: "Sample title"
-    };
-
-    const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,36 +0,0 @@
-import { Icon, Label, Stack } from "office-ui-fabric-react";
-import * as React from "react";
-import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
-
-export interface CollapsibleSectionProps {
-  title: string;
-}
-
-export interface CollapsibleSectionState {
-  isExpanded: boolean;
-}
-
-export class CollapsibleSectionComponent extends React.Component<CollapsibleSectionProps, CollapsibleSectionState> {
-  constructor(props: CollapsibleSectionProps) {
-    super(props);
-    this.state = {
-      isExpanded: true
-    };
-  }
-
-  private toggleCollapsed = (): void => {
-    this.setState({ isExpanded: !this.state.isExpanded });
-  };
-
-  public render(): JSX.Element {
-    return (
-      <>
-        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
-          <Label>{this.props.title}</Label>
-        </Stack>
-        {this.state.isExpanded && this.props.children}
-      </>
-    );
-  }
-}

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CollapsibleSectionComponent renders 1`] = `
-<Fragment>
-  <Stack
-    className="collapsibleSection"
-    horizontal={true}
-    onClick={[Function]}
-    tokens={
-      Object {
-        "childrenGap": 10,
-      }
-    }
-  >
-    <StyledIconBase
-      iconName="ChevronDown"
-      styles={
-        Object {
-          "root": Object {
-            "paddingTop": 7,
-          },
-        }
-      }
-    />
-    <StyledLabelBase>
-      Sample title
-    </StyledLabelBase>
-  </Stack>
-</Fragment>
-`;

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

@@ -3,7 +3,7 @@ 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 { FontIcon } from "office-ui-fabric-react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -24,7 +24,6 @@ export interface DialogProps {
   subText: string;
   isModal: boolean;
   visible: boolean;
-  choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
   primaryButtonText: string;
@@ -66,7 +65,6 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
       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 primaryButtonProps: IButtonProps = {
@@ -84,7 +82,6 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
 
     return (
       <Dialog {...dialogProps}>
-        {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
         {textFieldProps && <TextField {...textFieldProps} />}
         {linkProps && (
           <Link href={linkProps.linkUrl} target="_blank">

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -55,6 +55,7 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
       label: "Enable Injecting Notebook Viewer Link into the first cell",
       value: "true"
     },
+    { key: "feature.enablesettingsv2", label: "Enable SettingsV2 Tab", value: "true" },
     { key: "feature.canexceedmaximumvalue", label: "Can exceed max value", value: "true" },
     {
       key: "feature.enablefixedcollectionwithsharedthroughput",

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

@@ -178,6 +178,12 @@ exports[`Feature panel renders all flags 1`] = `
         className="checkboxRow"
         horizontalAlign="space-between"
       >
+        <StyledCheckboxBase
+          checked={false}
+          key="feature.enablesettingsv2"
+          label="Enable SettingsV2 Tab"
+          onChange={[Function]}
+        />
         <StyledCheckboxBase
           checked={false}
           key="feature.canexceedmaximumvalue"

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -4,10 +4,12 @@
 
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
+import * as Logger from "../../../Common/Logger";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { StringUtils } from "../../../Utils/StringUtils";
 import { userContext } from "../../../UserContext";
 import { TerminalQueryParams } from "../../../Common/Constants";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
 
 export interface NotebookTerminalComponentProps {
   notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
@@ -69,10 +71,9 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
     params: Map<string, string>
   ): string {
     if (!serverInfo.notebookServerEndpoint) {
-      handleError(
+      const error = "Notebook server endpoint not defined. Terminal will fail to connect to jupyter server.";
-        "Notebook server endpoint not defined. Terminal will fail to connect to jupyter server.",
+      Logger.logError(error, "NotebookTerminalComponent/createNotebookAppSrc");
-        "NotebookTerminalComponent/createNotebookAppSrc"
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, error);
-      );
       return "";
     }
 

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

@@ -18,9 +18,7 @@ describe("GalleryCardComponent", () => {
         downloads: 0,
         favorites: 0,
         views: 0,
-        newCellId: undefined,
+        newCellId: undefined
-        policyViolations: undefined,
-        pendingScanJobIds: undefined
       },
       isFavorite: false,
       showDownload: true,

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { JunoClient } from "../../../Juno/JunoClient";
 import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
+import * as Logger from "../../../Common/Logger";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import { Stack, Text, Checkbox, PrimaryButton, Link } from "office-ui-fabric-react";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
 
 export interface CodeOfConductComponentProps {
   junoClient: JunoClient;
@@ -44,7 +45,9 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
 
       this.props.onAcceptCodeOfConduct(response.data);
     } catch (error) {
-      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
+      const message = `Failed to accept code of conduct: ${error}`;
+      Logger.logError(message, "CodeOfConductComponent/acceptCodeOfConduct");
+      logConsoleError(message);
     }
   }
 

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -1,7 +1,6 @@
 import {
   Dropdown,
   FocusZone,
-  FontWeights,
   IDropdownOption,
   IPageSpecification,
   IPivotItemProps,
@@ -12,12 +11,14 @@ import {
   Pivot,
   PivotItem,
   SearchBox,
-  Stack,
+  Stack
-  Text
 } from "office-ui-fabric-react";
 import * as React from "react";
+import * as Logger from "../../../Common/Logger";
 import { IGalleryItem, JunoClient, IJunoResponse, IPublicGalleryData } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
 import "./GalleryViewerComponent.less";
@@ -25,7 +26,6 @@ import { HttpStatusCodes } from "../../../Common/Constants";
 import Explorer from "../../Explorer";
 import { CodeOfConductComponent } from "./CodeOfConductComponent";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
 
 export interface GalleryViewerComponentProps {
   container?: Explorer;
@@ -151,7 +151,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       // 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));
+        tabs.push(this.createTab(GalleryTab.Published, this.state.publishedNotebooks));
       }
     }
 
@@ -197,59 +197,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.createSearchBarHeader(this.createCardsTabContent(data))
+      content: this.createTabContent(data)
     };
   }
 
-  private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
-    return {
-      tab,
-      content: this.createPublishedNotebooksTabContent(data)
-    };
-  };
-
-  private createPublishedNotebooksTabContent = (data: IGalleryItem[]): JSX.Element => {
-    const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(data);
-    const content = (
-      <Stack tokens={{ childrenGap: 10 }}>
-        {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.",
-            this.createCardsTabContent(published)
-          )}
-        {underReview?.length > 0 &&
-          this.createPublishedNotebooksSectionContent(
-            "Under Review",
-            "Content of a notebook you published is currently being scanned for illegal content. It will not be available to public gallery until the review is completed (may take a few days)",
-            this.createCardsTabContent(underReview)
-          )}
-        {removed?.length > 0 &&
-          this.createPublishedNotebooksSectionContent(
-            "Removed",
-            "These notebooks were found to contain illegal content and has been taken down.",
-            this.createPolicyViolationsListContent(removed)
-          )}
-      </Stack>
-    );
-
-    return this.createSearchBarHeader(content);
-  };
-
-  private createPublishedNotebooksSectionContent = (
-    title: string,
-    description: string,
-    content: JSX.Element
-  ): JSX.Element => {
-    return (
-      <Stack tokens={{ childrenGap: 5 }}>
-        {title && <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{title}</Text>}
-        {description && <Text>{description}</Text>}
-        {content}
-      </Stack>
-    );
-  };
-
   private createPublicGalleryTabContent(data: IGalleryItem[], acceptedCodeOfConduct: boolean): JSX.Element {
     return acceptedCodeOfConduct === false ? (
       <CodeOfConductComponent
@@ -259,11 +210,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         }}
       />
     ) : (
-      this.createSearchBarHeader(this.createCardsTabContent(data))
+      this.createTabContent(data)
     );
   }
 
-  private createSearchBarHeader(content: JSX.Element): JSX.Element {
+  private createTabContent(data: IGalleryItem[]): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
         <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
@@ -276,13 +227,13 @@ 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.container?.isGalleryPublishEnabled() && (
             <Stack.Item>
               <InfoComponent />
             </Stack.Item>
           )}
         </Stack>
-        <Stack.Item>{content}</Stack.Item>
+        {data && this.createCardsTabContent(data)}
       </Stack>
     );
   }
@@ -300,25 +251,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   }
 
-  private createPolicyViolationsListContent(data: IGalleryItem[]): JSX.Element {
-    return (
-      <table>
-        <tbody>
-          <tr>
-            <th>Name</th>
-            <th>Policy violations</th>
-          </tr>
-          {data.map(item => (
-            <tr key={`policy-violations-tr-${item.id}`}>
-              <td>{item.name}</td>
-              <td>{item.policyViolations.join(", ")}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
       case GalleryTab.OfficialSamples:
@@ -352,7 +284,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
         this.sampleNotebooks = response.data;
       } catch (error) {
-        handleError(error, "GalleryViewerComponent/loadSampleNotebooks", "Failed to load sample notebooks");
+        const message = `Failed to load sample notebooks: ${error}`;
+        Logger.logError(message, "GalleryViewerComponent/loadSampleNotebooks");
+        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
       }
     }
 
@@ -378,7 +312,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           throw new Error(`Received HTTP ${response.status} when loading public notebooks`);
         }
       } catch (error) {
-        handleError(error, "GalleryViewerComponent/loadPublicNotebooks", "Failed to load public notebooks");
+        const message = `Failed to load public notebooks: ${error}`;
+        Logger.logError(message, "GalleryViewerComponent/loadPublicNotebooks");
+        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
       }
     }
 
@@ -398,7 +334,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
         this.favoriteNotebooks = response.data;
       } catch (error) {
-        handleError(error, "GalleryViewerComponent/loadFavoriteNotebooks", "Failed to load favorite notebooks");
+        const message = `Failed to load favorite notebooks: ${error}`;
+        Logger.logError(message, "GalleryViewerComponent/loadFavoriteNotebooks");
+        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
       }
     }
 
@@ -424,7 +362,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
         this.publishedNotebooks = response.data;
       } catch (error) {
-        handleError(error, "GalleryViewerComponent/loadPublishedNotebooks", "Failed to load published notebooks");
+        const message = `Failed to load published notebooks: ${error}`;
+        Logger.logError(message, "GalleryViewerComponent/loadPublishedNotebooks");
+        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
       }
     }
 

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx

@@ -3,14 +3,10 @@ import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fa
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";
 
-export interface InfoComponentProps {
+export class InfoComponent extends React.Component {
-  onReportAbuseClick?: () => void;
+  private getInfoPanel = (iconName: string, labelText: string, url: string): JSX.Element => {
-}
-
-export class InfoComponent extends React.Component<InfoComponentProps> {
-  private getInfoPanel = (iconName: string, labelText: string, url?: string, onClick?: () => void): JSX.Element => {
     return (
-      <Link href={url} target={url && "_blank"} onClick={onClick}>
+      <Link href={url} target="_blank">
         <div className="infoPanel">
           <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} />
           <Label className="infoLabel">{labelText}</Label>
@@ -29,11 +25,6 @@ export class InfoComponent extends React.Component<InfoComponentProps> {
         <Stack.Item>
           {this.getInfoPanel("KnowledgeArticle", "Microsoft Terms of Use", CodeOfConductEndpoints.termsOfUse)}
         </Stack.Item>
-        {this.props.onReportAbuseClick && (
-          <Stack.Item>
-            {this.getInfoPanel("ReportHacked", "Report Abuse", undefined, () => this.props.onReportAbuseClick())}
-          </Stack.Item>
-        )}
       </Stack>
     );
   };

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

@@ -77,25 +77,7 @@ 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>
-        </StackItem>
       </Stack>
     </PivotItem>
   </StyledPivotBase>

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.test.tsx

@@ -18,17 +18,14 @@ describe("NotebookMetadataComponent", () => {
         downloads: 0,
         favorites: 0,
         views: 0,
-        newCellId: undefined,
+        newCellId: undefined
-        policyViolations: undefined,
-        pendingScanJobIds: undefined
       },
       isFavorite: false,
       downloadButtonText: "Download",
       onTagClick: undefined,
       onDownloadClick: undefined,
       onFavoriteClick: undefined,
-      onUnfavoriteClick: undefined,
+      onUnfavoriteClick: undefined
-      onReportAbuseClick: undefined
     };
 
     const wrapper = shallow(<NotebookMetadataComponent {...props} />);
@@ -50,17 +47,14 @@ describe("NotebookMetadataComponent", () => {
         downloads: 0,
         favorites: 0,
         views: 0,
-        newCellId: undefined,
+        newCellId: undefined
-        policyViolations: undefined,
-        pendingScanJobIds: undefined
       },
       isFavorite: true,
       downloadButtonText: "Download",
       onTagClick: undefined,
       onDownloadClick: undefined,
       onFavoriteClick: undefined,
-      onUnfavoriteClick: undefined,
+      onUnfavoriteClick: undefined
-      onReportAbuseClick: undefined
     };
 
     const wrapper = shallow(<NotebookMetadataComponent {...props} />);

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -17,7 +17,6 @@ import { IGalleryItem } from "../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
-import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";
 
 export interface NotebookMetadataComponentProps {
   data: IGalleryItem;
@@ -27,7 +26,6 @@ export interface NotebookMetadataComponentProps {
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
   onDownloadClick: () => void;
-  onReportAbuseClick: () => void;
 }
 
 export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
@@ -43,39 +41,24 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
     return (
       <Stack tokens={{ childrenGap: 10 }}>
         <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 30 }}>
-          <Stack.Item>
+          <Text variant="xxLarge" nowrap>
-            <Text variant="xxLarge" nowrap>
+            {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
-              {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
+          </Text>
-            </Text>
+          <Text>
-          </Stack.Item>
+            {this.props.isFavorite !== undefined && (
-
+              <>
-          <Stack.Item>
+                <IconButton
-            <Text>
+                  iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
-              {this.props.isFavorite !== undefined && (
+                  onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
-                <>
+                />
-                  <IconButton
+                {this.props.data.favorites} likes
-                    iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
+              </>
-                    onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
+            )}
-                  />
+          </Text>
-                  {this.props.data.favorites} likes
-                </>
-              )}
-            </Text>
-          </Stack.Item>
 
           {this.props.downloadButtonText && (
-            <Stack.Item>
+            <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
-              <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
-            </Stack.Item>
           )}
-
-          <Stack.Item grow>
-            <></>
-          </Stack.Item>
-
-          <Stack.Item>
-            <InfoComponent onReportAbuseClick={this.props.onReportAbuseClick} />
-          </Stack.Item>
         </Stack>
 
         <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 10 }}>

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,10 +3,11 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 import * as Logger from "../../../Common/Logger";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
@@ -14,14 +15,12 @@ import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationCon
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { DialogComponent, DialogProps, TextFieldProps } from "../DialogReactComponent/DialogComponent";
+import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 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";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -44,8 +43,10 @@ interface NotebookViewerComponentState {
   showProgressBar: boolean;
 }
 
-export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
+export class NotebookViewerComponent extends React.Component<
-  implements DialogHost {
+  NotebookViewerComponentProps,
+  NotebookViewerComponentState
+> {
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 
@@ -101,7 +102,9 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
       }
     } catch (error) {
       this.setState({ showProgressBar: false });
-      handleError(error, "NotebookViewerComponent/loadNotebookContent", "Failed to load notebook content");
+      const message = `Failed to load notebook content: ${error}`;
+      Logger.logError(message, "NotebookViewerComponent/loadNotebookContent");
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
     }
   }
 
@@ -137,7 +140,6 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}
               onDownloadClick={this.downloadItem}
-              onReportAbuseClick={this.state.galleryItem.isSample ? undefined : this.reportAbuse}
             />
           </div>
         ) : (
@@ -177,39 +179,6 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
     };
   }
 
-  // DialogHost
-  showOkCancelModalDialog(
-    title: string,
-    msg: string,
-    okLabel: string,
-    onOk: () => void,
-    cancelLabel: string,
-    onCancel: () => void,
-    choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps
-  ): void {
-    this.setState({
-      dialogProps: {
-        isModal: true,
-        visible: true,
-        title,
-        subText: msg,
-        primaryButtonText: okLabel,
-        secondaryButtonText: cancelLabel,
-        onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onOk && onOk();
-        },
-        onSecondaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onCancel && onCancel();
-        },
-        choiceGroupProps,
-        textFieldProps
-      }
-    });
-  }
-
   private favoriteItem = async (): Promise<void> => {
     GalleryUtils.favoriteItem(this.props.container, this.props.junoClient, this.state.galleryItem, item =>
       this.setState({ galleryItem: item, isFavorite: true })
@@ -227,8 +196,4 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
       this.setState({ galleryItem: item })
     );
   };
-
-  private reportAbuse = (): void => {
-    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => {});
-  };
 }

src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap

@@ -17,38 +17,26 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
     }
     verticalAlign="center"
   >
-    <StackItem>
+    <Text
-      <Text
+      nowrap={true}
-        nowrap={true}
+      variant="xxLarge"
-        variant="xxLarge"
+    >
-      >
+      name
-        name
+    </Text>
-      </Text>
+    <Text>
-    </StackItem>
+      <CustomizedIconButton
-    <StackItem>
+        iconProps={
-      <Text>
+          Object {
-        <CustomizedIconButton
+            "iconName": "HeartFill",
-          iconProps={
-            Object {
-              "iconName": "HeartFill",
-            }
           }
-        />
+        }
-        0
-         likes
-      </Text>
-    </StackItem>
-    <StackItem>
-      <CustomizedPrimaryButton
-        text="Download"
       />
-    </StackItem>
+      0
-    <StackItem
+       likes
-      grow={true}
+    </Text>
+    <CustomizedPrimaryButton
+      text="Download"
     />
-    <StackItem>
-      <InfoComponent />
-    </StackItem>
   </Stack>
   <Stack
     horizontal={true}
@@ -129,38 +117,26 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
     }
     verticalAlign="center"
   >
-    <StackItem>
+    <Text
-      <Text
+      nowrap={true}
-        nowrap={true}
+      variant="xxLarge"
-        variant="xxLarge"
+    >
-      >
+      name
-        name
+    </Text>
-      </Text>
+    <Text>
-    </StackItem>
+      <CustomizedIconButton
-    <StackItem>
+        iconProps={
-      <Text>
+          Object {
-        <CustomizedIconButton
+            "iconName": "Heart",
-          iconProps={
-            Object {
-              "iconName": "Heart",
-            }
           }
-        />
+        }
-        0
-         likes
-      </Text>
-    </StackItem>
-    <StackItem>
-      <CustomizedPrimaryButton
-        text="Download"
       />
-    </StackItem>
+      0
-    <StackItem
+       likes
-      grow={true}
+    </Text>
+    <CustomizedPrimaryButton
+      text="Download"
     />
-    <StackItem>
-      <InfoComponent />
-    </StackItem>
   </Stack>
   <Stack
     horizontal={true}

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -28,7 +28,6 @@ import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcesso
 
 import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
 import { QueriesClient } from "../../../Common/QueriesClient";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 
 export interface QueriesGridComponentProps {
   queriesClient: QueriesClient;
@@ -245,9 +244,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                             databaseAccountName: container && container.databaseAccount().name,
                             defaultExperience: container && container.defaultExperience(),
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: container && container.browseQueriesPane.title(),
+                            paneTitle: container && container.browseQueriesPane.title()
-                            error: getErrorMessage(error),
-                            errorStack: getErrorStack(error)
                           },
                           startKey
                         );

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

@@ -6,12 +6,9 @@ import SettingsTabV2 from "../../Tabs/SettingsTabV2";
 import { collection } from "./TestUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import { TtlType, isDirty, TtlOnNoDefault, TtlOn, TtlOff } from "./SettingsUtils";
 import Explorer from "../../Explorer";
-jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
-  getIndexTransformationProgress: jest.fn().mockReturnValue(undefined)
-}));
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -21,18 +18,10 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     changeFeedPolicy: undefined,
     analyticalStorageTtl: undefined,
     geospatialConfig: undefined
-  } as DataModels.Collection),
+  } as DataModels.Collection)
-  updateMongoDBCollectionThroughRP: jest.fn().mockReturnValue({
-    id: undefined,
-    shardKey: undefined,
-    indexes: [],
-    analyticalStorageTtl: undefined
-  } as MongoDBCollectionResource)
 }));
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { updateOffer } from "../../../Common/DocumentClientUtilityBase";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+jest.mock("../../../Common/DocumentClientUtilityBase", () => ({
-import Q from "q";
-jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer)
 }));
 
@@ -44,12 +33,10 @@ describe("SettingsComponent", () => {
       title: "Scale & Settings",
       tabPath: "",
       node: undefined,
+      selfLink: undefined,
       hashLocation: "settings",
       isActive: ko.observable(false),
-      onUpdateTabsButtons: undefined,
+      onUpdateTabsButtons: undefined
-      getPendingNotification: Q.Promise<DataModels.Notification>(() => {
-        return;
-      })
     })
   };
 
@@ -116,7 +103,10 @@ describe("SettingsComponent", () => {
     let settingsComponentInstance = new SettingsComponent(baseProps);
     expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(false);
 
-    const newContainer = new Explorer();
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
     newContainer.isPreferredApiCassandra = ko.computed(() => true);
 
     const newCollection = { ...collection };
@@ -157,7 +147,10 @@ describe("SettingsComponent", () => {
     let settingsComponentInstance = new SettingsComponent(baseProps);
     expect(settingsComponentInstance.hasConflictResolution()).toEqual(undefined);
 
-    const newContainer = new Explorer();
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
     newContainer.databaseAccount = ko.observable({
       id: undefined,
       name: undefined,
@@ -202,17 +195,13 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.isOfferReplacePending()).toEqual(true);
   });
 
-  it("save calls updateCollection, updateMongoDBCollectionThroughRP and updateOffer", async () => {
+  it("save calls updateCollection and updateOffer", async () => {
     const wrapper = shallow(<SettingsComponent {...baseProps} />);
-    wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true, isMongoIndexingPolicySaveable: true });
+    wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true });
     wrapper.update();
     const settingsComponentInstance = wrapper.instance() as SettingsComponent;
-    settingsComponentInstance.mongoDBCollectionResource = {
-      id: "id"
-    };
     await settingsComponentInstance.onSaveClick();
     expect(updateCollection).toBeCalled();
-    expect(updateMongoDBCollectionThroughRP).toBeCalled();
     expect(updateOffer).toBeCalled();
   });
 
@@ -231,6 +220,13 @@ describe("SettingsComponent", () => {
     expect(isDirty(state.throughput, state.throughputBaseline)).toEqual(false);
   });
 
+  it("getTtlValue", async () => {
+    const settingsComponentInstance = new SettingsComponent(baseProps);
+    expect(settingsComponentInstance.getTtlValue(TtlType.OnNoDefault)).toEqual(TtlOnNoDefault);
+    expect(settingsComponentInstance.getTtlValue(TtlType.On)).toEqual(TtlOn);
+    expect(settingsComponentInstance.getTtlValue(TtlType.Off)).toEqual(TtlOff);
+  });
+
   it("getAnalyticalStorageTtl", () => {
     const newCollection = { ...collection };
     newCollection.analyticalStorageTtl = ko.observable(10);

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,49 +1,46 @@
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import * as Constants from "../../../Common/Constants";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as SharedConstants from "../../../Shared/Constants";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
-import * as Constants from "../../../Common/Constants";
+import { traceStart, traceFailure, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { updateOffer } from "../../../Common/DocumentClientUtilityBase";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { userContext } from "../../../UserContext";
+import { updateOfferThroughputBeyondLimit } from "../../../Common/dataAccess/updateOfferThroughputBeyondLimit";
 import SettingsTab from "../../Tabs/SettingsTabV2";
-import "./SettingsComponent.less";
+import { throughputUnit } from "./SettingsRenderUtils";
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
+import {
+  getMaxRUs,
+  hasDatabaseSharedThroughput,
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  SettingsV2TabTypes,
+  getTabTitle,
+  isDirty,
+  TtlOff,
+  TtlOn,
+  TtlOnNoDefault,
+  parseConflictResolutionMode,
+  parseConflictResolutionProcedure
+} from "./SettingsUtils";
 import {
   ConflictResolutionComponent,
   ConflictResolutionComponentProps
 } from "./SettingsSubComponents/ConflictResolutionComponent";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
-import {
-  MongoIndexingPolicyComponent,
-  MongoIndexingPolicyComponentProps
-} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
-import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
-import {
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps, IChoiceGroupOption } from "office-ui-fabric-react";
-  AddMongoIndexProps,
+import "./SettingsComponent.less";
-  ChangeFeedPolicyState,
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
-  GeospatialConfigType,
-  getMongoNotification,
-  getTabTitle,
-  hasDatabaseSharedThroughput,
-  isDirty,
-  MongoIndexTypes,
-  parseConflictResolutionMode,
-  parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
-  TtlType
-} from "./SettingsUtils";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -88,15 +85,9 @@ export interface SettingsComponentState {
   indexingPolicyContent: DataModels.IndexingPolicy;
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
   shouldDiscardIndexingPolicy: boolean;
+  indexingPolicyElementFocussed: boolean;
   isIndexingPolicyDirty: boolean;
 
-  isMongoIndexingPolicySaveable: boolean;
-  isMongoIndexingPolicyDiscardable: boolean;
-  currentMongoIndexes: MongoIndex[];
-  indexesToDrop: number[];
-  indexesToAdd: AddMongoIndexProps[];
-  indexTransformationProgress: number;
-
   conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyPath: string;
@@ -111,16 +102,18 @@ export interface SettingsComponentState {
 
 export class SettingsComponent extends React.Component<SettingsComponentProps, SettingsComponentState> {
   private static readonly sixMonthsInSeconds = 15768000;
-  private saveSettingsButton: ButtonV2;
+  private static readonly zeroSeconds = 0;
-  private discardSettingsChangesButton: ButtonV2;
 
-  private isAnalyticalStorageEnabled: boolean;
+  public saveSettingsButton: ButtonV2;
+  public discardSettingsChangesButton: ButtonV2;
+
+  public isAnalyticalStorageEnabled: boolean;
   private collection: ViewModels.Collection;
   private container: Explorer;
   private changeFeedPolicyVisible: boolean;
   private isFixedContainer: boolean;
+  private autoPilotTiersList: ViewModels.DropdownOption<DataModels.AutopilotTier>[];
   private shouldShowIndexingPolicyEditor: boolean;
-  public mongoDBCollectionResource: MongoDBCollectionResource;
 
   constructor(props: SettingsComponentProps) {
     super(props);
@@ -134,8 +127,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     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);
@@ -167,16 +160,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
       indexingPolicyContent: undefined,
       indexingPolicyContentBaseline: undefined,
+      indexingPolicyElementFocussed: false,
       shouldDiscardIndexingPolicy: false,
       isIndexingPolicyDirty: false,
 
-      indexesToDrop: [],
-      indexesToAdd: [],
-      currentMongoIndexes: undefined,
-      isMongoIndexingPolicySaveable: false,
-      isMongoIndexingPolicyDiscardable: false,
-      indexTransformationProgress: undefined,
-
       conflictResolutionPolicyMode: undefined,
       conflictResolutionPolicyModeBaseline: undefined,
       conflictResolutionPolicyPath: undefined,
@@ -205,8 +192,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   }
 
   componentDidMount(): void {
-    this.refreshIndexTransformationProgress();
-    this.loadMongoIndexes();
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
@@ -220,31 +205,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     }
   }
 
-  public loadMongoIndexes = async (): Promise<void> => {
-    if (
-      this.container.isMongoIndexEditorEnabled() &&
-      this.container.isPreferredApiMongoDB() &&
-      this.container.isEnableMongoCapabilityPresent() &&
-      this.container.databaseAccount()
-    ) {
-      this.mongoDBCollectionResource = await readMongoDBCollectionThroughRP(
-        this.collection.databaseId,
-        this.collection.id()
-      );
-
-      if (this.mongoDBCollectionResource) {
-        this.setState({
-          currentMongoIndexes: [...this.mongoDBCollectionResource.indexes]
-        });
-      }
-    }
-  };
-
-  public refreshIndexTransformationProgress = async (): Promise<void> => {
-    const currentProgress = await getIndexTransformationProgress(this.collection.databaseId, this.collection.id());
-    this.setState({ indexTransformationProgress: currentProgress });
-  };
-
   public isSaveSettingsButtonEnabled = (): boolean => {
     if (this.isOfferReplacePending()) {
       return false;
@@ -254,8 +214,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isScaleSaveable ||
       this.state.isSubSettingsSaveable ||
       this.state.isIndexingPolicyDirty ||
-      this.state.isConflictResolutionDirty ||
+      this.state.isConflictResolutionDirty
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicySaveable)
     );
   };
 
@@ -264,8 +223,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.state.isScaleDiscardable ||
       this.state.isSubSettingsDiscardable ||
       this.state.isIndexingPolicyDirty ||
-      this.state.isConflictResolutionDirty ||
+      this.state.isConflictResolutionDirty
-      (!!this.state.currentMongoIndexes && this.state.isMongoIndexingPolicyDiscardable)
     );
   };
 
@@ -312,7 +270,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.props.settingsTab.isExecutionError(false);
 
     this.props.settingsTab.isExecuting(true);
-    const startKey: number = traceStart(Action.SettingsV2Updated, {
+    const startKey: number = traceStart(Action.UpdateSettings, {
       databaseAccountName: this.container.databaseAccount()?.name,
       defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
@@ -341,7 +299,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
             break;
         }
 
-        const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
         newCollection.defaultTtl = defaultTtl;
 
         newCollection.indexingPolicy = this.state.indexingPolicyContent;
@@ -377,11 +334,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         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,
@@ -390,61 +342,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         });
       }
 
-      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 newThroughput = this.state.throughput;
         const newOffer: DataModels.Offer = { ...this.collection.offer() };
+        const originalThroughputValue: number = this.state.throughput;
 
         if (newOffer.content) {
           newOffer.content.offerThroughput = newThroughput;
@@ -482,65 +383,89 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
           }
         }
 
-        const updateOfferParams: DataModels.UpdateOfferParams = {
+        if (
-          databaseId: this.collection.databaseId,
+          getMaxRUs(this.collection, this.container) <=
-          collectionId: this.collection.id(),
+            SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
-          currentOffer: this.collection.offer(),
+          newThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
-          autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+          this.container
-          manualThroughput: this.state.isAutoPilotSelected ? undefined : newThroughput
+        ) {
-        };
+          const requestPayload = {
-        if (this.hasProvisioningTypeChanged()) {
+            subscriptionId: userContext.subscriptionId,
-          if (this.state.isAutoPilotSelected) {
+            databaseAccountName: userContext.databaseAccount.name,
-            updateOfferParams.migrateToAutoPilot = true;
+            resourceGroup: userContext.resourceGroup,
-          } else {
+            databaseName: this.collection.databaseId,
-            updateOfferParams.migrateToManual = true;
+            collectionName: this.collection.id(),
+            throughput: newThroughput,
+            offerIsRUPerMinuteThroughputEnabled: false
+          };
+          try {
+            await updateOfferThroughputBeyondLimit(requestPayload);
+            this.collection.offer().content.offerThroughput = originalThroughputValue;
+            this.setState({
+              throughput: originalThroughputValue,
+              throughputBaseline: originalThroughputValue,
+              initialNotification: {
+                description: `Throughput update for ${newThroughput} ${throughputUnit}`
+              } as DataModels.Notification
+            });
+            this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+          } catch (error) {
+            traceFailure(
+              Action.UpdateSettings,
+              {
+                databaseAccountName: this.container.databaseAccount().name,
+                databaseName: this.collection && this.collection.databaseId,
+                collectionName: this.collection && this.collection.id(),
+                defaultExperience: this.container.defaultExperience(),
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.props.settingsTab.tabTitle(),
+                error: error
+              },
+              startKey
+            );
+            throw error;
           }
-        }
-        const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-        this.collection.offer(updatedOffer);
-        this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
-        if (this.state.isAutoPilotSelected) {
-          this.setState({
-            autoPilotThroughput: updatedOffer.content.offerAutopilotSettings.maxThroughput,
-            autoPilotThroughputBaseline: updatedOffer.content.offerAutopilotSettings.maxThroughput
-          });
         } else {
-          this.setState({
+          const updatedOffer: DataModels.Offer = await updateOffer(this.collection.offer(), newOffer, headerOptions);
-            throughput: updatedOffer.content.offerThroughput,
+          this.collection.offer(updatedOffer);
-            throughputBaseline: updatedOffer.content.offerThroughput
+          this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
-          });
+          if (this.state.isAutoPilotSelected) {
+            this.setState({
+              autoPilotThroughput: updatedOffer.content.offerAutopilotSettings.maxThroughput,
+              autoPilotThroughputBaseline: updatedOffer.content.offerAutopilotSettings.maxThroughput
+            });
+          } else {
+            this.setState({
+              throughput: updatedOffer.content.offerThroughput,
+              throughputBaseline: updatedOffer.content.offerThroughput
+            });
+          }
         }
       }
       this.container.isRefreshingExplorer(false);
       this.setBaseline();
       this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
       traceSuccess(
-        Action.SettingsV2Updated,
+        Action.UpdateSettings,
         {
           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) {
+    } catch (reason) {
       this.container.isRefreshingExplorer(false);
       this.props.settingsTab.isExecutionError(true);
-      console.error(error);
+      console.error(reason);
       traceFailure(
-        Action.SettingsV2Updated,
+        Action.UpdateSettings,
         {
           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(),
+          tabTitle: this.props.settingsTab.tabTitle()
-          error: getErrorMessage(error),
-          errorStack: getErrorStack(error)
         },
         startKey
       );
@@ -549,18 +474,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public onRevertClick = (): void => {
-    trace(Action.SettingsV2Discarded, ActionModifiers.Mark, {
-      message: "Settings Discarded"
-    });
-
     this.setState({
       throughput: this.state.throughputBaseline,
       timeToLive: this.state.timeToLiveBaseline,
       timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
       geospatialConfigType: this.state.geospatialConfigTypeBaseline,
       indexingPolicyContent: this.state.indexingPolicyContentBaseline,
-      indexesToAdd: [],
-      indexesToDrop: [],
       conflictResolutionPolicyMode: this.state.conflictResolutionPolicyModeBaseline,
       conflictResolutionPolicyPath: this.state.conflictResolutionPolicyPathBaseline,
       conflictResolutionPolicyProcedure: this.state.conflictResolutionPolicyProcedureBaseline,
@@ -575,29 +494,19 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       isSubSettingsSaveable: false,
       isSubSettingsDiscardable: false,
       isIndexingPolicyDirty: false,
-      isMongoIndexingPolicySaveable: false,
-      isMongoIndexingPolicyDiscardable: false,
       isConflictResolutionDirty: false
     });
   };
 
-  private getMongoIndexesToSave = (): MongoIndex[] => {
-    let finalIndexes: MongoIndex[] = [];
-    this.state.currentMongoIndexes?.map((mongoIndex: MongoIndex, index: number) => {
-      if (!this.state.indexesToDrop.includes(index)) {
-        finalIndexes.push(mongoIndex);
-      }
-    });
-    finalIndexes = finalIndexes.concat(this.state.indexesToAdd.map((m: AddMongoIndexProps) => m.mongoIndex));
-    return finalIndexes;
-  };
-
   private onScaleSaveableChange = (isScaleSaveable: boolean): void =>
     this.setState({ isScaleSaveable: isScaleSaveable });
 
   private onScaleDiscardableChange = (isScaleDiscardable: boolean): void =>
     this.setState({ isScaleDiscardable: isScaleDiscardable });
 
+  private onIndexingPolicyElementFocusChange = (indexingPolicyElementFocussed: boolean): void =>
+    this.setState({ indexingPolicyElementFocussed: indexingPolicyElementFocussed });
+
   private onIndexingPolicyContentChange = (newIndexingPolicy: DataModels.IndexingPolicy): void =>
     this.setState({ indexingPolicyContent: newIndexingPolicy });
 
@@ -621,64 +530,79 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     }
   };
 
-  private onIndexDrop = (index: number): void => this.setState({ indexesToDrop: [...this.state.indexesToDrop, index] });
+  private onConflictResolutionPolicyModeChange = (
+    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.setState({
+      conflictResolutionPolicyMode:
+        DataModels.ConflictResolutionMode[option.key as keyof typeof DataModels.ConflictResolutionMode]
+    });
 
-  private onRevertIndexDrop = (index: number): void => {
+  private onConflictResolutionPolicyPathChange = (
-    const indexesToDrop = [...this.state.indexesToDrop];
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    indexesToDrop.splice(index, 1);
+    newValue?: string
-    this.setState({ indexesToDrop });
+  ): void => this.setState({ conflictResolutionPolicyPath: newValue });
-  };
 
-  private onRevertIndexAdd = (index: number): void => {
+  private onConflictResolutionPolicyProcedureChange = (
-    const indexesToAdd = [...this.state.indexesToAdd];
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    indexesToAdd.splice(index, 1);
+    newValue?: string
-    this.setState({ indexesToAdd });
+  ): void => this.setState({ conflictResolutionPolicyProcedure: newValue });
-  };
-
-  private onIndexAddOrChange = (index: number, description: string, type: MongoIndexTypes): void => {
-    const newIndexesToAdd = [...this.state.indexesToAdd];
-    const notification = getMongoNotification(description, type);
-    const newMongoIndexWithType: AddMongoIndexProps = {
-      mongoIndex: { key: { keys: [description] } } as MongoIndex,
-      type: type,
-      notification: notification
-    };
-    if (index === newIndexesToAdd.length) {
-      newIndexesToAdd.push(newMongoIndexWithType);
-    } else {
-      newIndexesToAdd[index] = newMongoIndexWithType;
-    }
-    this.setState({ indexesToAdd: newIndexesToAdd });
-  };
-
-  private onConflictResolutionPolicyModeChange = (newMode: DataModels.ConflictResolutionMode): void =>
-    this.setState({ conflictResolutionPolicyMode: newMode });
-
-  private onConflictResolutionPolicyPathChange = (newPath: string): void =>
-    this.setState({ conflictResolutionPolicyPath: newPath });
-
-  private onConflictResolutionPolicyProcedureChange = (newProcedure: string): void =>
-    this.setState({ conflictResolutionPolicyProcedure: newProcedure });
 
   private onConflictResolutionDirtyChange = (isConflictResolutionDirty: boolean): void =>
     this.setState({ isConflictResolutionDirty: isConflictResolutionDirty });
 
-  private onTtlChange = (newTtl: TtlType): void => this.setState({ timeToLive: newTtl });
+  public getTtlValue = (value: string): TtlType => {
+    switch (value) {
+      case TtlOn:
+        return TtlType.On;
+      case TtlOff:
+        return TtlType.Off;
+      case TtlOnNoDefault:
+        return TtlType.OnNoDefault;
+    }
+    return undefined;
+  };
 
-  private onTimeToLiveSecondsChange = (newTimeToLiveSeconds: number): void =>
+  private onTtlChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption): void =>
+    this.setState({ timeToLive: this.getTtlValue(option.key) });
+
+  private onTimeToLiveSecondsChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    let newTimeToLiveSeconds = parseInt(newValue);
+    newTimeToLiveSeconds = isNaN(newTimeToLiveSeconds) ? SettingsComponent.zeroSeconds : newTimeToLiveSeconds;
     this.setState({ timeToLiveSeconds: newTimeToLiveSeconds });
+  };
 
-  private onGeoSpatialConfigTypeChange = (newGeoSpatialConfigType: GeospatialConfigType): void =>
+  private onGeoSpatialConfigTypeChange = (
-    this.setState({ geospatialConfigType: newGeoSpatialConfigType });
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.setState({ geospatialConfigType: GeospatialConfigType[option.key as keyof typeof GeospatialConfigType] });
 
-  private onAnalyticalStorageTtlSelectionChange = (newAnalyticalStorageTtlSelection: TtlType): void =>
+  private onAnalyticalStorageTtlSelectionChange = (
-    this.setState({ analyticalStorageTtlSelection: newAnalyticalStorageTtlSelection });
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void => this.setState({ analyticalStorageTtlSelection: this.getTtlValue(option.key) });
 
-  private onAnalyticalStorageTtlSecondsChange = (newAnalyticalStorageTtlSeconds: number): void =>
+  private onAnalyticalStorageTtlSecondsChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    let newAnalyticalStorageTtlSeconds = parseInt(newValue);
+    newAnalyticalStorageTtlSeconds = isNaN(newAnalyticalStorageTtlSeconds)
+      ? SettingsComponent.zeroSeconds
+      : newAnalyticalStorageTtlSeconds;
     this.setState({ analyticalStorageTtlSeconds: newAnalyticalStorageTtlSeconds });
+  };
 
-  private onChangeFeedPolicyChange = (newChangeFeedPolicy: ChangeFeedPolicyState): void =>
+  private onChangeFeedPolicyChange = (
-    this.setState({ changeFeedPolicy: newChangeFeedPolicy });
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.setState({ changeFeedPolicy: ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState] });
 
   private onSubSettingsSaveableChange = (isSubSettingsSaveable: boolean): void =>
     this.setState({ isSubSettingsSaveable: isSubSettingsSaveable });
@@ -689,12 +613,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onIndexingPolicyDirtyChange = (isIndexingPolicyDirty: boolean): void =>
     this.setState({ isIndexingPolicyDirty: isIndexingPolicyDirty });
 
-  private onMongoIndexingPolicySaveableChange = (isMongoIndexingPolicySaveable: boolean): void =>
-    this.setState({ isMongoIndexingPolicySaveable });
-
-  private onMongoIndexingPolicyDiscardableChange = (isMongoIndexingPolicyDiscardable: boolean): void =>
-    this.setState({ isMongoIndexingPolicyDiscardable });
-
   public getAnalyticalStorageTtl = (): number => {
     if (this.isAnalyticalStorageEnabled) {
       if (this.state.analyticalStorageTtlSelection === TtlType.On) {
@@ -865,6 +783,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       collection: this.collection,
       container: this.container,
       isFixedContainer: this.isFixedContainer,
+      autoPilotTiersList: this.autoPilotTiersList,
       onThroughputChange: this.onThroughputChange,
       throughput: this.state.throughput,
       throughputBaseline: this.state.throughputBaseline,
@@ -911,27 +830,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
       indexingPolicyContent: this.state.indexingPolicyContent,
       indexingPolicyContentBaseline: this.state.indexingPolicyContentBaseline,
+      onIndexingPolicyElementFocusChange: this.onIndexingPolicyElementFocusChange,
       onIndexingPolicyContentChange: this.onIndexingPolicyContentChange,
       logIndexingPolicySuccessMessage: this.logIndexingPolicySuccessMessage,
-      indexTransformationProgress: this.state.indexTransformationProgress,
-      refreshIndexTransformationProgress: this.refreshIndexTransformationProgress,
       onIndexingPolicyDirtyChange: this.onIndexingPolicyDirtyChange
     };
 
-    const mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps = {
-      mongoIndexes: this.state.currentMongoIndexes,
-      onIndexDrop: this.onIndexDrop,
-      indexesToDrop: this.state.indexesToDrop,
-      onRevertIndexDrop: this.onRevertIndexDrop,
-      indexesToAdd: this.state.indexesToAdd,
-      onRevertIndexAdd: this.onRevertIndexAdd,
-      onIndexAddOrChange: this.onIndexAddOrChange,
-      indexTransformationProgress: this.state.indexTransformationProgress,
-      refreshIndexTransformationProgress: this.refreshIndexTransformationProgress,
-      onMongoIndexingPolicySaveableChange: this.onMongoIndexingPolicySaveableChange,
-      onMongoIndexingPolicyDiscardableChange: this.onMongoIndexingPolicyDiscardableChange
-    };
-
     const conflictResolutionPolicyComponentProps: ConflictResolutionComponentProps = {
       collection: this.collection,
       container: this.container,
@@ -948,7 +852,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
 
     const tabs: SettingsV2TabInfo[] = [];
-    if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
+    if (!hasDatabaseSharedThroughput(this.collection)) {
       tabs.push({
         tab: SettingsV2TabTypes.ScaleTab,
         content: <ScaleComponent {...scaleComponentProps} />
@@ -965,15 +869,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         tab: SettingsV2TabTypes.IndexingPolicyTab,
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />
       });
-    } else if (
-      this.container.isMongoIndexEditorEnabled() &&
-      this.container.isPreferredApiMongoDB() &&
-      this.container.isEnableMongoCapabilityPresent()
-    ) {
-      tabs.push({
-        tab: SettingsV2TabTypes.IndexingPolicyTab,
-        content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />
-      });
     }
 
     if (this.hasConflictResolution()) {

src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx

@@ -4,11 +4,17 @@ import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent";
 
 export class SettingsComponentAdapter implements ReactAdapter {
-  public parameters: ko.Computed<boolean>;
+  public parameters: ko.Observable<number>;
 
-  constructor(private props: SettingsComponentProps) {}
+  constructor(private props: SettingsComponentProps) {
+    this.parameters = ko.observable<number>(Date.now());
+  }
 
   public renderComponent(): JSX.Element {
-    return this.parameters() ? <SettingsComponent {...this.props} /> : <></>;
+    return <SettingsComponent {...this.props} />;
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
   }
 }

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

@@ -6,7 +6,7 @@ import {
   getEstimatedAutoscaleSpendElement,
   manualToAutoscaleDisclaimerElement,
   ttlWarning,
-  indexingPolicynUnsavedWarningMessage,
+  indexingPolicyTTLWarningMessage,
   updateThroughputBeyondLimitWarningMessage,
   updateThroughputDelayedApplyWarningMessage,
   getThroughputApplyDelayedMessage,
@@ -15,11 +15,7 @@ import {
   getToolTipContainer,
   conflictResolutionCustomToolTip,
   changeFeedPolicyToolTip,
-  conflictResolutionLwwTooltip,
+  conflictResolutionLwwTooltip
-  mongoIndexingPolicyDisclaimer,
-  mongoIndexingPolicyAADError,
-  mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
@@ -37,7 +33,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
 
         {manualToAutoscaleDisclaimerElement}
         {ttlWarning}
-        {indexingPolicynUnsavedWarningMessage}
+        {indexingPolicyTTLWarningMessage}
         {updateThroughputBeyondLimitWarningMessage}
         {updateThroughputDelayedApplyWarningMessage}
 
@@ -49,16 +45,6 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {conflictResolutionLwwTooltip}
         {conflictResolutionCustomToolTip}
         {changeFeedPolicyToolTip}
-
-        {mongoIndexingPolicyDisclaimer}
-        {mongoIndexingPolicyAADError}
-        {mongoIndexTransformationRefreshingMessage}
-        {renderMongoIndexTransformationRefreshMessage(0, () => {
-          return;
-        })}
-        {renderMongoIndexTransformationRefreshMessage(90, () => {
-          return;
-        })}
       </>
     );
   }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -21,24 +21,13 @@ import {
   Link,
   Text,
   IMessageBarStyles,
-  ITextStyles,
+  ITextStyles
-  IDetailsRowStyles,
-  IStackStyles,
-  IIconStyles,
-  IDetailsListStyles,
-  IDropdownStyles,
-  ISeparatorStyles,
-  MessageBar,
-  MessageBarType,
-  Stack,
-  Spinner,
-  SpinnerSize
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
+const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
 
-export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
+export const spendAckCheckBoxStyle: ICheckboxStyles = {
   label: {
     margin: 0,
     padding: "2 0 2 0"
@@ -56,20 +45,6 @@ export const titleAndInputStackProps: Partial<IStackProps> = {
   tokens: { childrenGap: 5 }
 };
 
-export const mongoWarningStackProps: Partial<IStackProps> = {
-  tokens: { childrenGap: 5 }
-};
-
-export const mongoErrorMessageStyles: Partial<IMessageBarStyles> = { root: { marginLeft: 10 } };
-
-export const createAndAddMongoIndexStackProps: Partial<IStackProps> = {
-  tokens: { childrenGap: 5 }
-};
-
-export const addMongoIndexStackProps: Partial<IStackProps> = {
-  tokens: { childrenGap: 10 }
-};
-
 export const checkBoxAndInputStackProps: Partial<IStackProps> = {
   tokens: { childrenGap: 10 }
 };
@@ -78,54 +53,6 @@ export const toolTipLabelStackTokens: IStackTokens = {
   childrenGap: 6
 };
 
-export const accordionStackTokens: IStackTokens = {
-  childrenGap: 10
-};
-
-export const addMongoIndexSubElementsTokens: IStackTokens = {
-  childrenGap: 20
-};
-
-export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
-
-export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
-
-export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
-
-export const shortWidthDropDownStyles: Partial<IDropdownStyles> = { dropdown: { paddingleft: 10, width: 202 } };
-
-export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
-  root: {
-    selectors: {
-      ":hover": {
-        background: "transparent"
-      }
-    }
-  }
-};
-
-export const customDetailsListStyles: Partial<IDetailsListStyles> = {
-  root: {
-    selectors: {
-      ".ms-FocusZone": {
-        paddingTop: 0
-      }
-    }
-  }
-};
-
-export const separatorStyles: Partial<ISeparatorStyles> = {
-  root: [
-    {
-      selectors: {
-        "::before": {
-          background: StyleConstants.BaseMedium
-        }
-      }
-    }
-  ]
-};
-
 export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop: "5px" } };
 
 export const throughputUnit = "RU/s";
@@ -245,9 +172,15 @@ export const ttlWarning: JSX.Element = (
   </Text>
 );
 
-export const indexingPolicynUnsavedWarningMessage: JSX.Element = (
+export const indexingPolicyTTLWarningMessage: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle}>
-    You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.
+    Changing the Indexing Policy impacts query results while the index transformation occurs. When a change is made and
+    the indexing mode is set to consistent or lazy, queries return eventual results until the operation completes. For
+    more information see,{" "}
+    <Link target="_blank" href="https://aka.ms/cosmosdb/modify-index-policy">
+      Modifying Indexing Policies
+    </Link>
+    .
   </Text>
 );
 
@@ -380,56 +313,6 @@ export const changeFeedPolicyToolTip: JSX.Element = (
   </Text>
 );
 
-export const mongoIndexingPolicyDisclaimer: JSX.Element = (
-  <Text>
-    For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
-    <Link href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types" target="_blank">
-      {` Compound indexes `}
-    </Link>
-    are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo
-    shell.
-  </Text>
-);
-
-export const mongoIndexingPolicyAADError: JSX.Element = (
-  <MessageBar messageBarType={MessageBarType.error}>
-    <Text>
-      To use the indexing policy editor, please login to the
-      <Link target="_blank" href="https://portal.azure.com">
-        {"azure portal."}
-      </Link>
-    </Text>
-  </MessageBar>
-);
-
-export const mongoIndexTransformationRefreshingMessage: JSX.Element = (
-  <Stack horizontal {...mongoWarningStackProps}>
-    <Text styles={infoAndToolTipTextStyle}>Refreshing index transformation progress</Text>
-    <Spinner size={SpinnerSize.small} />
-  </Stack>
-);
-
-export const renderMongoIndexTransformationRefreshMessage = (
-  progress: number,
-  performRefresh: () => void
-): JSX.Element => {
-  if (progress === 0) {
-    return (
-      <Text styles={infoAndToolTipTextStyle}>
-        {"You can make more indexing changes once the current index transformation is complete. "}
-        <Link onClick={performRefresh}>{"Refresh to check if it has completed."}</Link>
-      </Text>
-    );
-  } else {
-    return (
-      <Text styles={infoAndToolTipTextStyle}>
-        {`You can make more indexing changes once the current index transformation has completed. It is ${progress}% complete. `}
-        <Link onClick={performRefresh}>{"Refresh to check the progress."}</Link>
-      </Text>
-    );
-  }
-};
-
 export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes): Partial<ITextFieldStyles> => ({
   fieldGroup: {
     height: 25,

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

@@ -18,15 +18,24 @@ export interface ConflictResolutionComponentProps {
   container: Explorer;
   conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
-  onConflictResolutionPolicyModeChange: (newMode: DataModels.ConflictResolutionMode) => void;
+  onConflictResolutionPolicyModeChange: (
+    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ) => void;
   conflictResolutionPolicyPath: string;
   conflictResolutionPolicyPathBaseline: string;
 
-  onConflictResolutionPolicyPathChange: (newPath: string) => void;
+  onConflictResolutionPolicyPathChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ) => void;
   conflictResolutionPolicyProcedure: string;
   conflictResolutionPolicyProcedureBaseline: string;
 
-  onConflictResolutionPolicyProcedureChange: (newProcedure: string) => void;
+  onConflictResolutionPolicyProcedureChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ) => void;
   onConflictResolutionDirtyChange: (isConflictResolutionDirty: boolean) => void;
 }
 
@@ -68,30 +77,12 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
     return false;
   };
 
-  private onConflictResolutionPolicyModeChange = (
-    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ): void =>
-    this.props.onConflictResolutionPolicyModeChange(
-      DataModels.ConflictResolutionMode[option.key as keyof typeof DataModels.ConflictResolutionMode]
-    );
-
-  private onConflictResolutionPolicyPathChange = (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ): void => this.props.onConflictResolutionPolicyPathChange(newValue);
-
-  private onConflictResolutionPolicyProcedureChange = (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ): void => this.props.onConflictResolutionPolicyProcedureChange(newValue);
-
   private getConflictResolutionModeComponent = (): JSX.Element => (
     <ChoiceGroup
       label="Mode"
       selectedKey={this.props.conflictResolutionPolicyMode}
       options={this.conflictResolutionChoiceGroupOptions}
-      onChange={this.onConflictResolutionPolicyModeChange}
+      onChange={this.props.onConflictResolutionPolicyModeChange}
       styles={getChoiceGroupStyles(
         this.props.conflictResolutionPolicyMode,
         this.props.conflictResolutionPolicyModeBaseline
@@ -113,7 +104,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
         this.props.conflictResolutionPolicyPathBaseline
       )}
       value={this.props.conflictResolutionPolicyPath}
-      onChange={this.onConflictResolutionPolicyPathChange}
+      onChange={this.props.onConflictResolutionPolicyPathChange}
     />
   );
 
@@ -131,7 +122,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
         this.props.conflictResolutionPolicyProcedureBaseline
       )}
       value={this.props.conflictResolutionPolicyProcedure}
-      onChange={this.onConflictResolutionPolicyProcedureChange}
+      onChange={this.props.onConflictResolutionPolicyProcedureChange}
     />
   );
 

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

@@ -17,6 +17,9 @@ describe("IndexingPolicyComponent", () => {
     },
     indexingPolicyContent: initialIndexingPolicyContent,
     indexingPolicyContentBaseline: initialIndexingPolicyContent,
+    onIndexingPolicyElementFocusChange: () => {
+      return;
+    },
     onIndexingPolicyContentChange: () => {
       return;
     },
@@ -25,9 +28,7 @@ describe("IndexingPolicyComponent", () => {
     },
     onIndexingPolicyDirtyChange: () => {
       return;
-    },
+    }
-    indexTransformationProgress: undefined,
-    refreshIndexTransformationProgress: () => new Promise(jest.fn())
   };
 
   it("renders", () => {

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

@@ -1,20 +1,18 @@
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as monaco from "monaco-editor";
-import { isDirty, isIndexTransforming } from "../SettingsUtils";
+import { isDirty } from "../SettingsUtils";
 import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
-import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
+import { indexingPolicyTTLWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
-import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
   indexingPolicyContent: DataModels.IndexingPolicy;
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
+  onIndexingPolicyElementFocusChange: (indexingPolicyContentFocussed: boolean) => void;
   onIndexingPolicyContentChange: (newIndexingPolicy: DataModels.IndexingPolicy) => void;
   logIndexingPolicySuccessMessage: () => void;
-  indexTransformationProgress: number;
-  refreshIndexTransformationProgress: () => Promise<void>;
   onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
 }
 
@@ -54,9 +52,6 @@ export class IndexingPolicyComponent extends React.Component<
     if (!this.indexingPolicyEditor) {
       this.createIndexingPolicyEditor();
     } else {
-      this.indexingPolicyEditor.updateOptions({
-        readOnly: isIndexTransforming(this.props.indexTransformationProgress)
-      });
       const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
       const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
       indexingPolicyEditorModel.setValue(value);
@@ -90,10 +85,12 @@ export class IndexingPolicyComponent extends React.Component<
     this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
       value: value,
       language: "json",
-      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+      readOnly: false,
       ariaLabel: "Indexing Policy"
     });
     if (this.indexingPolicyEditor) {
+      this.indexingPolicyEditor.onDidFocusEditorText(() => this.props.onIndexingPolicyElementFocusChange(true));
+      this.indexingPolicyEditor.onDidBlurEditorText(() => this.props.onIndexingPolicyElementFocusChange(false));
       const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
       indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
       this.props.logIndexingPolicySuccessMessage();
@@ -114,12 +111,8 @@ export class IndexingPolicyComponent extends React.Component<
   public render(): JSX.Element {
     return (
       <Stack {...titleAndInputStackProps}>
-        <IndexingPolicyRefreshComponent
-          indexTransformationProgress={this.props.indexTransformationProgress}
-          refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
-        />
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicynUnsavedWarningMessage}</MessageBar>
+          <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicyTTLWarningMessage}</MessageBar>
         )}
         <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>

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

@@ -1,15 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { IndexingPolicyRefreshComponentProps, IndexingPolicyRefreshComponent } from "./IndexingPolicyRefreshComponent";
-
-describe("IndexingPolicyRefreshComponent", () => {
-  it("renders", () => {
-    const props: IndexingPolicyRefreshComponentProps = {
-      indexTransformationProgress: 90,
-      refreshIndexTransformationProgress: () => new Promise(jest.fn())
-    };
-
-    const wrapper = shallow(<IndexingPolicyRefreshComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import { MessageBar, MessageBarType } from "office-ui-fabric-react";
-import {
-  mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage
-} from "../../SettingsRenderUtils";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
-import { isIndexTransforming } from "../../SettingsUtils";
-
-export interface IndexingPolicyRefreshComponentProps {
-  indexTransformationProgress: number;
-  refreshIndexTransformationProgress: () => Promise<void>;
-}
-
-interface IndexingPolicyRefreshComponentState {
-  isRefreshing: boolean;
-}
-
-export class IndexingPolicyRefreshComponent extends React.Component<
-  IndexingPolicyRefreshComponentProps,
-  IndexingPolicyRefreshComponentState
-> {
-  constructor(props: IndexingPolicyRefreshComponentProps) {
-    super(props);
-    this.state = {
-      isRefreshing: false
-    };
-  }
-
-  private onClickRefreshIndexingTransformationLink = async () => await this.refreshIndexTransformationProgress();
-
-  private renderIndexTransformationWarning = (): JSX.Element => {
-    if (this.state.isRefreshing) {
-      return mongoIndexTransformationRefreshingMessage;
-    } else if (isIndexTransforming(this.props.indexTransformationProgress)) {
-      return renderMongoIndexTransformationRefreshMessage(
-        this.props.indexTransformationProgress,
-        this.onClickRefreshIndexingTransformationLink
-      );
-    }
-    return undefined;
-  };
-
-  private refreshIndexTransformationProgress = async () => {
-    this.setState({ isRefreshing: true });
-    try {
-      await this.props.refreshIndexTransformationProgress();
-    } catch (error) {
-      handleError(error, "RefreshIndexTransformationProgress", "Refreshing index transformation progress failed");
-    } finally {
-      this.setState({ isRefreshing: false });
-    }
-  };
-
-  public render(): JSX.Element {
-    return this.renderIndexTransformationWarning() ? (
-      <MessageBar messageBarType={MessageBarType.warning}>{this.renderIndexTransformationWarning()}</MessageBar>
-    ) : (
-      <></>
-    );
-  }
-}

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

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IndexingPolicyRefreshComponent renders 1`] = `
-<StyledMessageBarBase
-  messageBarType={5}
->
-  <Text
-    styles={
-      Object {
-        "root": Object {
-          "fontSize": 12,
-        },
-      }
-    }
-  >
-    You can make more indexing changes once the current index transformation has completed. It is 90% complete. 
-    <StyledLinkBase
-      onClick={[Function]}
-    >
-      Refresh to check the progress.
-    </StyledLinkBase>
-  </Text>
-</StyledMessageBarBase>
-`;

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

@@ -1,24 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { MongoIndexTypes, MongoNotificationType } from "../../SettingsUtils";
-import { AddMongoIndexComponent, AddMongoIndexComponentProps } from "./AddMongoIndexComponent";
-
-describe("AddMongoIndexComponent", () => {
-  it("renders", () => {
-    const props: AddMongoIndexComponentProps = {
-      position: 1,
-      description: "sample_key",
-      type: MongoIndexTypes.Single,
-      notification: { type: MongoNotificationType.Error, message: "sample error" },
-      onIndexAddOrChange: () => {
-        return;
-      },
-      onDiscard: () => {
-        return;
-      }
-    };
-
-    const wrapper = shallow(<AddMongoIndexComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,103 +0,0 @@
-import * as React from "react";
-import {
-  MessageBar,
-  MessageBarType,
-  Stack,
-  IconButton,
-  TextField,
-  Dropdown,
-  IDropdownOption,
-  ITextField
-} from "office-ui-fabric-react";
-import {
-  addMongoIndexSubElementsTokens,
-  mongoErrorMessageStyles,
-  mongoWarningStackProps,
-  shortWidthDropDownStyles,
-  shortWidthTextFieldStyles
-} from "../../SettingsRenderUtils";
-import {
-  getMongoIndexTypeText,
-  MongoIndexTypes,
-  MongoNotificationMessage,
-  MongoNotificationType,
-  MongoWildcardPlaceHolder
-} from "../../SettingsUtils";
-
-export interface AddMongoIndexComponentProps {
-  position: number;
-  description: string;
-  type: MongoIndexTypes;
-  notification: MongoNotificationMessage;
-  onIndexAddOrChange: (description: string, type: MongoIndexTypes) => void;
-  onDiscard: () => void;
-  disabled?: boolean;
-}
-
-export class AddMongoIndexComponent extends React.Component<AddMongoIndexComponentProps> {
-  private descriptionTextField: ITextField;
-  private indexTypes: IDropdownOption[] = [MongoIndexTypes.Single, MongoIndexTypes.Wildcard].map(
-    (value: MongoIndexTypes) => ({
-      text: getMongoIndexTypeText(value),
-      key: value
-    })
-  );
-
-  private onDescriptionChange = (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ): void => {
-    this.props.onIndexAddOrChange(newValue, this.props.type);
-  };
-
-  private onTypeChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
-    const newType = MongoIndexTypes[option.key as keyof typeof MongoIndexTypes];
-    this.props.onIndexAddOrChange(this.props.description, newType);
-  };
-
-  private setRef = (textField: ITextField) => (this.descriptionTextField = textField);
-
-  public focus = (): void => {
-    this.descriptionTextField.focus();
-  };
-
-  public render(): JSX.Element {
-    return (
-      <Stack {...mongoWarningStackProps}>
-        <Stack horizontal tokens={addMongoIndexSubElementsTokens}>
-          <TextField
-            ariaLabel={"Index Field Name " + this.props.position}
-            disabled={this.props.disabled}
-            styles={shortWidthTextFieldStyles}
-            componentRef={this.setRef}
-            value={this.props.description}
-            placeholder={this.props.type === MongoIndexTypes.Wildcard ? MongoWildcardPlaceHolder : undefined}
-            onChange={this.onDescriptionChange}
-          />
-
-          <Dropdown
-            ariaLabel={"Index Type " + this.props.position}
-            disabled={this.props.disabled}
-            styles={shortWidthDropDownStyles}
-            placeholder="Select an index type"
-            selectedKey={this.props.type}
-            options={this.indexTypes}
-            onChange={this.onTypeChange}
-          />
-
-          <IconButton
-            ariaLabel={"Undo Button " + this.props.position}
-            iconProps={{ iconName: "Undo" }}
-            disabled={!this.props.description && !this.props.type}
-            onClick={() => this.props.onDiscard()}
-          />
-        </Stack>
-        {this.props.notification?.type === MongoNotificationType.Error && (
-          <MessageBar styles={mongoErrorMessageStyles} messageBarType={MessageBarType.error}>
-            {this.props.notification.message}
-          </MessageBar>
-        )}
-      </Stack>
-    );
-  }
-}

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

@@ -1,113 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
-import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
-import { renderToString } from "react-dom/server";
-
-describe("MongoIndexingPolicyComponent", () => {
-  const baseProps: MongoIndexingPolicyComponentProps = {
-    mongoIndexes: [],
-    onIndexDrop: () => {
-      return;
-    },
-    indexesToDrop: [],
-    onRevertIndexDrop: () => {
-      return;
-    },
-    indexesToAdd: [],
-    onRevertIndexAdd: () => {
-      return;
-    },
-    onIndexAddOrChange: () => {
-      return;
-    },
-    indexTransformationProgress: undefined,
-    refreshIndexTransformationProgress: () => new Promise(jest.fn()),
-    onMongoIndexingPolicySaveableChange: () => {
-      return;
-    },
-    onMongoIndexingPolicyDiscardableChange: () => {
-      return;
-    }
-  };
-
-  it("renders", () => {
-    const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe("AddMongoIndexProps test", () => {
-    const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
-    const mongoIndexingPolicyComponent = wrapper.instance() as MongoIndexingPolicyComponent;
-
-    it("defaults", () => {
-      expect(mongoIndexingPolicyComponent.isMongoIndexingPolicySaveable()).toEqual(false);
-      expect(mongoIndexingPolicyComponent.isMongoIndexingPolicyDiscardable()).toEqual(false);
-      expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
-    });
-
-    const sampleWarning = "sampleWarning";
-    const sampleError = "sampleError";
-
-    const cases = [
-      [
-        { type: MongoNotificationType.Warning, message: sampleWarning } as MongoNotificationMessage,
-        false,
-        false,
-        true,
-        sampleWarning
-      ],
-      [
-        { type: MongoNotificationType.Error, message: sampleError } as MongoNotificationMessage,
-        false,
-        false,
-        true,
-        undefined
-      ],
-      [
-        { type: MongoNotificationType.Error, message: sampleError } as MongoNotificationMessage,
-        true,
-        false,
-        true,
-        undefined
-      ],
-      [undefined, false, true, true, undefined],
-      [undefined, true, true, true, undefined]
-    ];
-
-    test.each(cases)(
-      "",
-      (
-        notification: MongoNotificationMessage,
-        indexToDropIsPresent: boolean,
-        isMongoIndexingPolicySaveable: boolean,
-        isMongoIndexingPolicyDiscardable: boolean,
-        mongoWarningNotificationMessage: string
-      ) => {
-        const addMongoIndexProps = {
-          mongoIndex: { key: { keys: ["sampleKey"] } },
-          type: MongoIndexTypes.Single,
-          notification: notification
-        };
-
-        let indexesToDrop: number[] = [];
-        if (indexToDropIsPresent) {
-          indexesToDrop = [0];
-        }
-        wrapper.setProps({ indexesToAdd: [addMongoIndexProps], indexesToDrop: indexesToDrop });
-        wrapper.update();
-
-        expect(mongoIndexingPolicyComponent.isMongoIndexingPolicySaveable()).toEqual(isMongoIndexingPolicySaveable);
-        expect(mongoIndexingPolicyComponent.isMongoIndexingPolicyDiscardable()).toEqual(
-          isMongoIndexingPolicyDiscardable
-        );
-        if (mongoWarningNotificationMessage) {
-          const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
-          expect(elementAsString).toContain(mongoWarningNotificationMessage);
-        } else {
-          expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
-        }
-      }
-    );
-  });
-});

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

@@ -1,327 +0,0 @@
-import * as React from "react";
-import {
-  DetailsList,
-  DetailsListLayoutMode,
-  Stack,
-  IconButton,
-  Text,
-  SelectionMode,
-  IDetailsRowProps,
-  DetailsRow,
-  IColumn,
-  MessageBar,
-  MessageBarType,
-  Spinner,
-  SpinnerSize,
-  Separator
-} from "office-ui-fabric-react";
-import {
-  addMongoIndexStackProps,
-  customDetailsListStyles,
-  mongoIndexingPolicyDisclaimer,
-  mediumWidthStackStyles,
-  subComponentStackProps,
-  transparentDetailsRowStyles,
-  createAndAddMongoIndexStackProps,
-  separatorStyles,
-  mongoIndexingPolicyAADError,
-  indexingPolicynUnsavedWarningMessage,
-  infoAndToolTipTextStyle
-} from "../../SettingsRenderUtils";
-import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
-import {
-  MongoIndexTypes,
-  AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoNotificationType,
-  getMongoIndexType,
-  getMongoIndexTypeText,
-  isIndexTransforming
-} from "../../SettingsUtils";
-import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
-import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
-import { AuthType } from "../../../../../AuthType";
-import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
-export interface MongoIndexingPolicyComponentProps {
-  mongoIndexes: MongoIndex[];
-  onIndexDrop: (index: number) => void;
-  indexesToDrop: number[];
-  onRevertIndexDrop: (index: number) => void;
-  indexesToAdd: AddMongoIndexProps[];
-  onRevertIndexAdd: (index: number) => void;
-  onIndexAddOrChange: (index: number, description: string, type: MongoIndexTypes) => void;
-  indexTransformationProgress: number;
-  refreshIndexTransformationProgress: () => Promise<void>;
-  onMongoIndexingPolicySaveableChange: (isMongoIndexingPolicySaveable: boolean) => void;
-  onMongoIndexingPolicyDiscardableChange: (isMongoIndexingPolicyDiscardable: boolean) => void;
-}
-
-interface MongoIndexDisplayProps {
-  definition: JSX.Element;
-  type: JSX.Element;
-  actionButton: JSX.Element;
-}
-
-export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
-  private shouldCheckComponentIsDirty = true;
-  private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
-  private initialIndexesColumns: IColumn[] = [
-    { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
-    { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
-    {
-      key: "actionButton",
-      name: "Drop Index",
-      fieldName: "actionButton",
-      minWidth: 100,
-      maxWidth: 200,
-      isResizable: true
-    }
-  ];
-
-  private indexesToBeDroppedColumns: IColumn[] = [
-    { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
-    { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
-    {
-      key: "actionButton",
-      name: "Add index back",
-      fieldName: "actionButton",
-      minWidth: 100,
-      maxWidth: 200,
-      isResizable: true
-    }
-  ];
-
-  componentDidUpdate(prevProps: MongoIndexingPolicyComponentProps): void {
-    if (this.props.indexesToAdd.length > prevProps.indexesToAdd.length) {
-      this.addMongoIndexComponentRefs[prevProps.indexesToAdd.length]?.current?.focus();
-    }
-    this.onComponentUpdate();
-  }
-
-  componentDidMount(): void {
-    this.onComponentUpdate();
-  }
-
-  private onComponentUpdate = (): void => {
-    if (!this.shouldCheckComponentIsDirty) {
-      this.shouldCheckComponentIsDirty = true;
-      return;
-    }
-    this.props.onMongoIndexingPolicySaveableChange(this.isMongoIndexingPolicySaveable());
-    this.props.onMongoIndexingPolicyDiscardableChange(this.isMongoIndexingPolicyDiscardable());
-    this.shouldCheckComponentIsDirty = false;
-  };
-
-  public isMongoIndexingPolicySaveable = (): boolean => {
-    if (this.props.indexesToAdd.length === 0 && this.props.indexesToDrop.length === 0) {
-      return false;
-    }
-
-    const addErrorsExist = !!this.props.indexesToAdd.find(addMongoIndexProps => addMongoIndexProps.notification);
-
-    if (addErrorsExist) {
-      return false;
-    }
-
-    return true;
-  };
-
-  public isMongoIndexingPolicyDiscardable = (): boolean => {
-    return this.props.indexesToAdd.length > 0 || this.props.indexesToDrop.length > 0;
-  };
-
-  public getMongoWarningNotificationMessage = (): JSX.Element => {
-    const warningMessage = this.props.indexesToAdd.find(
-      addMongoIndexProps => addMongoIndexProps.notification?.type === MongoNotificationType.Warning
-    )?.notification.message;
-
-    if (warningMessage) {
-      return <Text styles={infoAndToolTipTextStyle}>{warningMessage}</Text>;
-    }
-    return undefined;
-  };
-
-  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
-    return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
-  };
-
-  private getActionButton = (arrayPosition: number, isCurrentIndex: boolean): JSX.Element => {
-    return isCurrentIndex ? (
-      <IconButton
-        ariaLabel="Delete index Button"
-        iconProps={{ iconName: "Delete" }}
-        disabled={isIndexTransforming(this.props.indexTransformationProgress)}
-        onClick={() => {
-          this.props.onIndexDrop(arrayPosition);
-        }}
-      />
-    ) : (
-      <IconButton
-        ariaLabel="Add back Index Button"
-        iconProps={{ iconName: "Add" }}
-        onClick={() => {
-          this.props.onRevertIndexDrop(arrayPosition);
-        }}
-      />
-    );
-  };
-
-  private getMongoIndexDisplayProps = (
-    mongoIndex: MongoIndex,
-    arrayPosition: number,
-    isCurrentIndex: boolean
-  ): MongoIndexDisplayProps => {
-    const keys = mongoIndex?.key?.keys;
-    const type = getMongoIndexType(keys);
-    const definition = keys?.join();
-    let mongoIndexDisplayProps: MongoIndexDisplayProps;
-    if (type) {
-      mongoIndexDisplayProps = {
-        definition: <Text>{definition}</Text>,
-        type: <Text>{getMongoIndexTypeText(type)}</Text>,
-        actionButton: definition === MongoIndexIdField ? <></> : this.getActionButton(arrayPosition, isCurrentIndex)
-      };
-    }
-    return mongoIndexDisplayProps;
-  };
-
-  private renderIndexesToBeAdded = (): JSX.Element => {
-    const indexesToAddLength = this.props.indexesToAdd.length;
-    for (let i = 0; i < indexesToAddLength; i++) {
-      const existingIndexToAddRef = React.createRef<AddMongoIndexComponent>();
-      this.addMongoIndexComponentRefs[i] = existingIndexToAddRef;
-    }
-    const newIndexToAddRef = React.createRef<AddMongoIndexComponent>();
-    this.addMongoIndexComponentRefs[indexesToAddLength] = newIndexToAddRef;
-
-    return (
-      <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        {this.props.indexesToAdd.map((mongoIndexWithType, arrayPosition) => {
-          const keys = mongoIndexWithType.mongoIndex.key.keys;
-          const type = mongoIndexWithType.type;
-          const notification = mongoIndexWithType.notification;
-          return (
-            <AddMongoIndexComponent
-              ref={this.addMongoIndexComponentRefs[arrayPosition]}
-              position={arrayPosition}
-              key={arrayPosition}
-              description={keys.join()}
-              type={type}
-              notification={notification}
-              onIndexAddOrChange={(description, type) =>
-                this.props.onIndexAddOrChange(arrayPosition, description, type)
-              }
-              onDiscard={() => {
-                this.addMongoIndexComponentRefs.splice(arrayPosition, 1);
-                this.props.onRevertIndexAdd(arrayPosition);
-              }}
-            />
-          );
-        })}
-
-        <AddMongoIndexComponent
-          ref={this.addMongoIndexComponentRefs[indexesToAddLength]}
-          disabled={isIndexTransforming(this.props.indexTransformationProgress)}
-          position={indexesToAddLength}
-          key={indexesToAddLength}
-          description={undefined}
-          type={undefined}
-          notification={undefined}
-          onIndexAddOrChange={(description, type) =>
-            this.props.onIndexAddOrChange(indexesToAddLength, description, type)
-          }
-          onDiscard={() => {
-            this.props.onRevertIndexAdd(indexesToAddLength);
-          }}
-        />
-      </Stack>
-    );
-  };
-
-  private renderInitialIndexes = (): JSX.Element => {
-    const initialIndexes = this.props.mongoIndexes
-      .map((mongoIndex, arrayPosition) => this.getMongoIndexDisplayProps(mongoIndex, arrayPosition, true))
-      .filter((value, arrayPosition) => !!value && !this.props.indexesToDrop.includes(arrayPosition));
-
-    return (
-      <Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Current index(es)">
-          {
-            <>
-              <DetailsList
-                styles={customDetailsListStyles}
-                disableSelectionZone
-                items={initialIndexes}
-                columns={this.initialIndexesColumns}
-                selectionMode={SelectionMode.none}
-                onRenderRow={this.onRenderRow}
-                layoutMode={DetailsListLayoutMode.justified}
-              />
-              {this.renderIndexesToBeAdded()}
-            </>
-          }
-        </CollapsibleSectionComponent>
-      </Stack>
-    );
-  };
-
-  private renderIndexesToBeDropped = (): JSX.Element => {
-    const indexesToBeDropped = this.props.indexesToDrop.map((dropIndex, arrayPosition) =>
-      this.getMongoIndexDisplayProps(this.props.mongoIndexes[dropIndex], arrayPosition, false)
-    );
-
-    return (
-      <Stack styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Index(es) to be dropped">
-          {indexesToBeDropped.length > 0 && (
-            <DetailsList
-              styles={customDetailsListStyles}
-              disableSelectionZone
-              items={indexesToBeDropped}
-              columns={this.indexesToBeDroppedColumns}
-              selectionMode={SelectionMode.none}
-              onRenderRow={this.onRenderRow}
-              layoutMode={DetailsListLayoutMode.justified}
-            />
-          )}
-        </CollapsibleSectionComponent>
-      </Stack>
-    );
-  };
-
-  private renderWarningMessage = (): JSX.Element => {
-    let warningMessage: JSX.Element;
-    if (this.getMongoWarningNotificationMessage()) {
-      warningMessage = this.getMongoWarningNotificationMessage();
-    } else if (this.isMongoIndexingPolicySaveable()) {
-      warningMessage = indexingPolicynUnsavedWarningMessage;
-    }
-
-    return (
-      <>
-        <IndexingPolicyRefreshComponent
-          indexTransformationProgress={this.props.indexTransformationProgress}
-          refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
-        />
-        {warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
-      </>
-    );
-  };
-
-  public render(): JSX.Element {
-    if (this.props.mongoIndexes) {
-      return (
-        <Stack {...subComponentStackProps}>
-          {this.renderWarningMessage()}
-          {mongoIndexingPolicyDisclaimer}
-          {this.renderInitialIndexes()}
-          <Separator styles={separatorStyles} />
-          {this.renderIndexesToBeDropped()}
-        </Stack>
-      );
-    } else {
-      return window.authType !== AuthType.AAD ? mongoIndexingPolicyAADError : <Spinner size={SpinnerSize.large} />;
-    }
-  }
-}

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

@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddMongoIndexComponent renders 1`] = `
-<Stack
-  tokens={
-    Object {
-      "childrenGap": 5,
-    }
-  }
->
-  <Stack
-    horizontal={true}
-    tokens={
-      Object {
-        "childrenGap": 20,
-      }
-    }
-  >
-    <StyledTextFieldBase
-      ariaLabel="Index Field Name 1"
-      componentRef={[Function]}
-      onChange={[Function]}
-      styles={
-        Object {
-          "root": Object {
-            "paddingLeft": 10,
-            "width": 210,
-          },
-        }
-      }
-      value="sample_key"
-    />
-    <StyledWithResponsiveMode
-      ariaLabel="Index Type 1"
-      onChange={[Function]}
-      options={
-        Array [
-          Object {
-            "key": "Single",
-            "text": "Single Field",
-          },
-          Object {
-            "key": "Wildcard",
-            "text": "Wildcard",
-          },
-        ]
-      }
-      placeholder="Select an index type"
-      selectedKey="Single"
-      styles={
-        Object {
-          "dropdown": Object {
-            "paddingleft": 10,
-            "width": 202,
-          },
-        }
-      }
-    />
-    <CustomizedIconButton
-      ariaLabel="Undo Button 1"
-      disabled={false}
-      iconProps={
-        Object {
-          "iconName": "Undo",
-        }
-      }
-      onClick={[Function]}
-    />
-  </Stack>
-  <StyledMessageBarBase
-    messageBarType={1}
-    styles={
-      Object {
-        "root": Object {
-          "marginLeft": 10,
-        },
-      }
-    }
-  >
-    sample error
-  </StyledMessageBarBase>
-</Stack>
-`;

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

@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MongoIndexingPolicyComponent renders 1`] = `
-<Stack
-  tokens={
-    Object {
-      "childrenGap": 20,
-    }
-  }
->
-  <IndexingPolicyRefreshComponent
-    refreshIndexTransformationProgress={[Function]}
-  />
-  <Text>
-    For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
-    <StyledLinkBase
-      href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
-      target="_blank"
-    >
-       Compound indexes 
-    </StyledLinkBase>
-    are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo shell.
-  </Text>
-  <Stack
-    styles={
-      Object {
-        "root": Object {
-          "width": 600,
-        },
-      }
-    }
-    tokens={
-      Object {
-        "childrenGap": 5,
-      }
-    }
-  >
-    <CollapsibleSectionComponent
-      title="Current index(es)"
-    >
-      <StyledWithViewportComponent
-        columns={
-          Array [
-            Object {
-              "fieldName": "definition",
-              "isResizable": true,
-              "key": "definition",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Definition",
-            },
-            Object {
-              "fieldName": "type",
-              "isResizable": true,
-              "key": "type",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Type",
-            },
-            Object {
-              "fieldName": "actionButton",
-              "isResizable": true,
-              "key": "actionButton",
-              "maxWidth": 200,
-              "minWidth": 100,
-              "name": "Drop Index",
-            },
-          ]
-        }
-        disableSelectionZone={true}
-        items={Array []}
-        layoutMode={1}
-        onRenderRow={[Function]}
-        selectionMode={0}
-        styles={
-          Object {
-            "root": Object {
-              "selectors": Object {
-                ".ms-FocusZone": Object {
-                  "paddingTop": 0,
-                },
-              },
-            },
-          }
-        }
-      />
-      <Stack
-        styles={
-          Object {
-            "root": Object {
-              "width": 600,
-            },
-          }
-        }
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
-        }
-      >
-        <AddMongoIndexComponent
-          disabled={false}
-          key="0"
-          onDiscard={[Function]}
-          onIndexAddOrChange={[Function]}
-          position={0}
-        />
-      </Stack>
-    </CollapsibleSectionComponent>
-  </Stack>
-  <Styled
-    styles={
-      Object {
-        "root": Array [
-          Object {
-            "selectors": Object {
-              "::before": Object {
-                "background": undefined,
-              },
-            },
-          },
-        ],
-      }
-    }
-  />
-  <Stack
-    styles={
-      Object {
-        "root": Object {
-          "width": 600,
-        },
-      }
-    }
-  >
-    <CollapsibleSectionComponent
-      title="Index(es) to be dropped"
-    />
-  </Stack>
-</Stack>
-`;

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

@@ -1,16 +1,22 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import * as Constants from "../../../../Common/Constants";
-import * as DataModels from "../../../../Contracts/DataModels";
-import Explorer from "../../../Explorer";
-import { throughputUnit } from "../SettingsRenderUtils";
-import { collection, container } from "../TestUtils";
 import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
+import { container, collection } from "../TestUtils";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import Explorer from "../../../Explorer";
+import * as Constants from "../../../../Common/Constants";
+import { PlatformType } from "../../../../PlatformType";
+import * as DataModels from "../../../../Contracts/DataModels";
+import { throughputUnit } from "../SettingsRenderUtils";
+import * as SharedConstants from "../../../../Shared/Constants";
+import ko from "knockout";
 
 describe("ScaleComponent", () => {
-  const nonNationalCloudContainer = new Explorer();
+  const nonNationalCloudContainer = new Explorer({
+    notificationsClient: undefined,
+    isEmulator: false
+  });
+  nonNationalCloudContainer.getPlatformType = () => PlatformType.Portal;
   nonNationalCloudContainer.isRunningOnNationalCloud = () => false;
 
   const targetThroughput = 6000;
@@ -19,6 +25,7 @@ describe("ScaleComponent", () => {
     collection: collection,
     container: container,
     isFixedContainer: false,
+    autoPilotTiersList: [],
     onThroughputChange: () => {
       return;
     },
@@ -47,7 +54,9 @@ describe("ScaleComponent", () => {
     let wrapper = shallow(<ScaleComponent {...baseProps} />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
+    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(true);
     expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(false);
+    expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(targetThroughput);
 
     const newCollection = { ...collection };
     const maxThroughput = 5000;
@@ -79,7 +88,10 @@ describe("ScaleComponent", () => {
   });
 
   it("autoScale enabled", () => {
-    const newContainer = new Explorer();
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
 
     newContainer.databaseAccount({
       id: undefined,
@@ -106,9 +118,14 @@ describe("ScaleComponent", () => {
     expect(scaleComponent.isAutoScaleEnabled()).toEqual(true);
   });
 
+  it("getMaxRUThroughputInputLimit", () => {
+    const scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.getMaxRUThroughputInputLimit()).toEqual(40000);
+  });
+
   it("getThroughputTitle", () => {
     let scaleComponent = new ScaleComponent(baseProps);
-    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
+    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - 40,000 RU/s)");
 
     let newProps = { ...baseProps, container: nonNationalCloudContainer };
     scaleComponent = new ScaleComponent(newProps);
@@ -118,4 +135,26 @@ describe("ScaleComponent", () => {
     scaleComponent = new ScaleComponent(newProps);
     expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (autoscale)");
   });
+
+  it("canThroughputExceedMaximumValue", () => {
+    let scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(false);
+
+    const newProps = { ...baseProps, container: nonNationalCloudContainer };
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
+  });
+
+  it("getThroughputWarningMessage", () => {
+    const throughputBeyondLimit = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million + 1000;
+    const throughputBeyondMaxRus = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million - 1000;
+
+    const newProps = { ...baseProps, container: nonNationalCloudContainer, throughput: throughputBeyondLimit };
+    let scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputBeyondLimitWarningMessage");
+
+    newProps.throughput = throughputBeyondMaxRus;
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputDelayedApplyWarningMessage");
+  });
 });