Fix commas

* Remove AutoPilot v2

* Update DatabaseSettingsTab.ts

* Update DatabaseSettingsTab.ts

* Update src/Explorer/Tabs/DatabaseSettingsTab.ts

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

* Update src/Explorer/Tabs/SettingsTab.ts

* Update src/Explorer/Tabs/DatabaseSettingsTab.ts

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

* Update src/Explorer/Tabs/SettingsTab.ts

* Remove more unused code

* Remove import

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

.eslintrc.js

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

@@ -1,29 +0,0 @@
-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

@@ -105,74 +105,6 @@ jobs:
           EMULATOR_ENDPOINT: https://0.0.0.0:8081/
           NODE_TLS_REJECT_UNAUTHORIZED: 0
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-  endtoendsql:
-    name: "End To End Tests | SQL"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Restore Cypress Binary Cache
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache/Cypress
-          key: ${{ runner.os }}-cypress-binary-cache
-      - run: npm ci
-      - name: End to End Tests
-        run: |
-          npm start &
-          cd cypress
-          npm ci
-          node cleanup.js
-          npm run wait-for-server
-          npx cypress run --browser chrome --headless --spec "./integration/dataexplorer/SQL/*"
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-          CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-          CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-      - uses: actions/upload-artifact@v2
-        name: videos
-        if: ${{ failure() }}
-        with:
-          path: "**/*.mp4"
-  endtoendmongo:
-    name: "End To End Tests | Mongo"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Restore Cypress Binary Cache
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache/Cypress
-          key: ${{ runner.os }}-cypress-binary-cache
-      - name: End to End Tests
-        run: |
-          npm ci
-          npm start &
-          cd cypress
-          npm ci
-          node cleanup.js
-          npm run wait-for-server
-          npx cypress run --browser chrome --headless --spec "./integration/dataexplorer/MONGO/*"
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-          CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-          CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-      - uses: actions/upload-artifact@v2
-        if: ${{ failure() }}
-        name: videos
-        with:
-          path: "**/*.mp4"
   accessibility:
     name: "Accessibility | Hosted"
     needs: [lint, format, compile, unittest]
@@ -221,7 +153,7 @@ jobs:
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendpuppeteer]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -245,7 +177,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendpuppeteer]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}

README.md

@@ -1,4 +1,4 @@
-# CosmosDB Explorer
+# Cosmos DB 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)
 

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

@@ -1,177 +0,0 @@
-/*!
- * 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: 30,
+    slowMo: 55,
     defaultViewport: null,
     ignoreHTTPSErrors: true,
     args: ["--disable-web-security"]

less/documentDB.less

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

package-lock.json

@@ -76,7 +76,6 @@
       "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",
@@ -99,8 +98,7 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
@@ -2326,83 +2324,83 @@
       }
     },
     "@microsoft/applicationinsights-analytics-js": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-analytics-js/-/applicationinsights-analytics-js-2.5.8.tgz",
-      "integrity": "sha512-2RsftiXa5ojNXuHRIC7RybWbN+Z7TMrLK2XGTza1Wq/KHRJNB48WmQuxjd6SzsNguqxRoHsH0sUogIwlK+NO8A==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-analytics-js/-/applicationinsights-analytics-js-2.5.9.tgz",
+      "integrity": "sha512-9L3fb1H1as+J3J2j2EDx1HEMdrucjgR4INqahy+ZAxDPFvR3HCOedYzx645zObBIPu7QkH2LAjPk4fuNGHR1rg==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.1",
+        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-shims": "1.0.3",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-channel-js": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-channel-js/-/applicationinsights-channel-js-2.5.8.tgz",
-      "integrity": "sha512-etVGzhNluflTikOpW9dlDxdg+B+8gt/nxmGeXqti9Hsqq0fTxcY9bmNklFIEKhOIwai4DodgJjflaDdgR0ObUQ==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-channel-js/-/applicationinsights-channel-js-2.5.9.tgz",
+      "integrity": "sha512-NAQ/2wWmD+gaIZDCMzzwxm8RcbswDvUO5BYeuW9UHJaFuEZ9o9xpztKVz32u4CMv7OI/mLOqnmR4rb0d+kUMwQ==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.1",
+        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-shims": "1.0.3",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-common": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-common/-/applicationinsights-common-2.5.8.tgz",
-      "integrity": "sha512-RIMAJTsF0H5wiRZxYIF9H8sbMe2W5Ig4yMuH0/lho69DcNZpHf8p6PSa4Qhhli0AnoWYfLE7/WlWO1eR5SkByw==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-common/-/applicationinsights-common-2.5.9.tgz",
+      "integrity": "sha512-dKmXO9m55uRDhpoa0P7l+BApf+lsrqjgoLeKv+ABM8ygIyd9JH6CDcdaT3af+kUFtt9Oj3ChyfueKr1EVOdGkQ==",
       "requires": {
-        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.1"
+        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-shims": "1.0.3"
       }
     },
     "@microsoft/applicationinsights-core-js": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-core-js/-/applicationinsights-core-js-2.5.8.tgz",
-      "integrity": "sha512-NxxIViHKuqgpla+KdQk7Qy48Dm8lN4oy2mMEpv9kM5GW5MBJ8nZ4A5RV1kokF3kXuDmTUTHlWBXeLR8hauA3qQ==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-core-js/-/applicationinsights-core-js-2.5.9.tgz",
+      "integrity": "sha512-KE9h1wmC/Ckm7jYjsMF1SEWQnk0v0CRzZq1upSARgPH7BgmyClXz1kdnLtuTWz8Aha8IIH9dW2hUOfPCdR+BpQ==",
       "requires": {
-        "@microsoft/applicationinsights-shims": "1.0.1",
+        "@microsoft/applicationinsights-shims": "1.0.3",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-dependencies-js": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-dependencies-js/-/applicationinsights-dependencies-js-2.5.8.tgz",
-      "integrity": "sha512-jnXpjE/bnlLeew78OsN8aPTLOPZQJ4y1MOO8R3E+eUXdproD2TemynSk5kUfrMdry91DZOBZnrmJ2NCB+g5ArQ==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-dependencies-js/-/applicationinsights-dependencies-js-2.5.9.tgz",
+      "integrity": "sha512-pNM/dkUOscV0ul/YJe928+77EBtRkRXO/le/VWzlunoUFaEEo4pirc7NycvPx9w/KxA62JMEogbQsWE6nAmqPg==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.1",
+        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-shims": "1.0.3",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
     "@microsoft/applicationinsights-properties-js": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-properties-js/-/applicationinsights-properties-js-2.5.8.tgz",
-      "integrity": "sha512-BAOSguXe07ua6SqYmAW+8+vVvBZb4qmmUP6s5zc7kNMMgEoEGsCn2VHmM8wHHxq4J/TmYxIqwoufS+XKbUvCeQ==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-properties-js/-/applicationinsights-properties-js-2.5.9.tgz",
+      "integrity": "sha512-mZxaC8CZsURn38IwsPaUx+o9QXQU2vm81THZL+1Lc+7scPo55ATDTFgZ2awIj7CdTp69oGzUkpB7maOn6+OVOw==",
       "requires": {
-        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.1"
+        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-shims": "1.0.3"
       }
     },
     "@microsoft/applicationinsights-shims": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-shims/-/applicationinsights-shims-1.0.1.tgz",
-      "integrity": "sha512-nPjUBSpvX5Dnkovp2lZzrg0/uSvYNtbAclWwVP7t8J1hy5OJ3xr3KPNaz79+b84G16Rj861ybau9Gbk7inXkTg=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-shims/-/applicationinsights-shims-1.0.3.tgz",
+      "integrity": "sha512-+S17aqEkOYpyBpmclhgwcEplwnxSo5AxYBdRg38GBobI1GKPSpZfnLssLzcjJ6XZCS5tqB5xjyTZs6gHj7ZJWQ=="
     },
     "@microsoft/applicationinsights-web": {
-      "version": "2.5.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web/-/applicationinsights-web-2.5.8.tgz",
-      "integrity": "sha512-ZxCUkBJrCFNHa0LgWWbtwqu4TxJPlukuSvDrdLv6XV1yX2ETq6Q1kw/IUEtKhbtNbTZQ8aJ+x8Nc/iqbssdXTA==",
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-web/-/applicationinsights-web-2.5.9.tgz",
+      "integrity": "sha512-dxg5XXbQqjWw9QmGdgbd7knb1qFA58FFYj9ObqRmlqiihk25kper7H15HH8LaV0lV6goClmBWc9KsNGA2veyeA==",
       "requires": {
-        "@microsoft/applicationinsights-analytics-js": "2.5.8",
-        "@microsoft/applicationinsights-channel-js": "2.5.8",
-        "@microsoft/applicationinsights-common": "2.5.8",
-        "@microsoft/applicationinsights-core-js": "2.5.8",
-        "@microsoft/applicationinsights-dependencies-js": "2.5.8",
-        "@microsoft/applicationinsights-properties-js": "2.5.8",
-        "@microsoft/applicationinsights-shims": "1.0.1",
+        "@microsoft/applicationinsights-analytics-js": "2.5.9",
+        "@microsoft/applicationinsights-channel-js": "2.5.9",
+        "@microsoft/applicationinsights-common": "2.5.9",
+        "@microsoft/applicationinsights-core-js": "2.5.9",
+        "@microsoft/applicationinsights-dependencies-js": "2.5.9",
+        "@microsoft/applicationinsights-properties-js": "2.5.9",
+        "@microsoft/applicationinsights-shims": "1.0.3",
         "@microsoft/dynamicproto-js": "^1.0.0"
       }
     },
@@ -7203,11 +7201,10 @@
       }
     },
     "create-react-class": {
-      "version": "15.6.3",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
-      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
+      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
       "requires": {
-        "fbjs": "^0.8.9",
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
       }
@@ -8504,24 +8501,6 @@
       "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",
@@ -9667,27 +9646,6 @@
         "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",
@@ -11888,26 +11846,6 @@
       "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",
@@ -13406,36 +13344,6 @@
         "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": {
@@ -16619,6 +16527,8 @@
       "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"
       }
@@ -18246,7 +18156,8 @@
     "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",
@@ -20006,11 +19917,6 @@
         "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.8",
+    "@microsoft/applicationinsights-web": "2.5.9",
     "@nteract/commutable": "7.3.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -88,8 +88,8 @@
     "styled-components": "4.3.2",
     "text-encoding": "0.7.0",
     "underscore": "1.9.1",
-    "utility-types": "3.10.0",
     "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
     "webcrypto-liner": "1.1.4",
     "webfontloader": "1.6.28",
     "whatwg-fetch": "3.0.0"

sampleData/gremlinSampleData.json

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

src/Common/Constants.ts

@@ -1,4 +1,3 @@
-import { AutopilotTier } from "../Contracts/DataModels";
 import { HashMap } from "./HashMap";
 
 export class AuthorizationEndpoints {
@@ -109,7 +108,6 @@ export class CapabilityNames {
 export class Features {
   public static readonly cosmosdb = "cosmosdb";
   public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly enableRupm = "enablerupm";
   public static readonly executeSproc = "dataexplorerexecutesproc";
   public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
   public static readonly enableTtl = "enablettl";
@@ -117,7 +115,6 @@ 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";
@@ -125,12 +122,17 @@ 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";
@@ -175,12 +177,6 @@ export class CassandraBackend {
   public static readonly schemaApi: string = "api/cassandra/schema";
   public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
 }
-
-export class RUPMStates {
-  public static on: string = "on";
-  public static off: string = "off";
-}
-
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";
@@ -257,7 +253,6 @@ 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";
@@ -402,54 +397,6 @@ 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,7 +112,6 @@ describe("endpoint", () => {
 
 describe("requestPlugin", () => {
   beforeEach(() => {
-    delete window.dataExplorerPlatform;
     resetConfigContext();
   });
 

src/Common/CosmosClient.ts

@@ -69,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}: ${JSON.stringify(error)}`);
+    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${error.message}`);
     return Promise.reject(error);
   }
 }

src/Common/DataAccessUtilityBase.ts

@@ -72,22 +72,6 @@ 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,
@@ -184,22 +168,6 @@ 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,17 +1,14 @@
 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 { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import { 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 * as Logger from "./Logger";
+import { handleError } from "./ErrorHandlingUtils";
 
 // TODO: Log all promise resolutions and errors with verbosity levels
 export function queryDocuments(
@@ -59,13 +56,11 @@ export function executeStoredProcedure(
         );
       },
       (error: any) => {
-        logConsoleError(
-          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}: ${JSON.stringify(
-            error
-          )}`
+        handleError(
+          error,
+          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`,
+          "ExecuteStoredProcedure"
         );
-        Logger.logError(JSON.stringify(error), "ExecuteStoredProcedure", error.code);
-        sendNotificationForError(error);
         deferred.reject(error);
       }
     )
@@ -93,9 +88,7 @@ export function queryDocumentsPage(
         deferred.resolve(result);
       },
       (error: any) => {
-        logConsoleError(`Failed to query ${entityName} for container ${resourceName}: ${JSON.stringify(error)}`);
-        Logger.logError(JSON.stringify(error), "QueryDocumentsPage", error.code);
-        sendNotificationForError(error);
+        handleError(error, `Failed to query ${entityName} for container ${resourceName}`, "QueryDocumentsPage");
         deferred.reject(error);
       }
     )
@@ -116,9 +109,7 @@ export function readDocument(collection: ViewModels.CollectionBase, documentId:
         deferred.resolve(document);
       },
       (error: any) => {
-        logConsoleError(`Failed to read ${entityName} ${documentId.id()}: ${JSON.stringify(error)}`);
-        Logger.logError(JSON.stringify(error), "ReadDocument", error.code);
-        sendNotificationForError(error);
+        handleError(error, `Failed to read ${entityName} ${documentId.id()}`, "ReadDocument");
         deferred.reject(error);
       }
     )
@@ -144,44 +135,7 @@ export function updateDocument(
         deferred.resolve(updatedDocument);
       },
       (error: any) => {
-        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);
+        handleError(error, `Failed to update ${entityName} ${documentId.id()}`, "UpdateDocument");
         deferred.reject(error);
       }
     )
@@ -203,11 +157,7 @@ export function createDocument(collection: ViewModels.CollectionBase, newDocumen
         deferred.resolve(savedDocument);
       },
       (error: any) => {
-        logConsoleError(
-          `Error while creating new ${entityName} for container ${collection.id()}:\n ${JSON.stringify(error)}`
-        );
-        Logger.logError(JSON.stringify(error), "CreateDocument", error.code);
-        sendNotificationForError(error);
+        handleError(error, `Error while creating new ${entityName} for container ${collection.id()}`, "CreateDocument");
         deferred.reject(error);
       }
     )
@@ -229,9 +179,7 @@ export function deleteDocument(collection: ViewModels.CollectionBase, documentId
         deferred.resolve(response);
       },
       (error: any) => {
-        logConsoleError(`Error while deleting ${entityName} ${documentId.id()}:\n ${JSON.stringify(error)}`);
-        Logger.logError(JSON.stringify(error), "DeleteDocument", error.code);
-        sendNotificationForError(error);
+        handleError(error, `Error while deleting ${entityName} ${documentId.id()}`, "DeleteDocument");
         deferred.reject(error);
       }
     )
@@ -257,9 +205,7 @@ export function deleteConflict(
         deferred.resolve(response);
       },
       (error: any) => {
-        logConsoleError(`Error while deleting conflict ${conflictId.id()}:\n ${JSON.stringify(error)}`);
-        Logger.logError(JSON.stringify(error), "DeleteConflict", error.code);
-        sendNotificationForError(error);
+        handleError(error, `Error while deleting conflict ${conflictId.id()}`, "DeleteConflict");
         deferred.reject(error);
       }
     )
@@ -269,11 +215,3 @@ 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

@@ -0,0 +1,11 @@
+import { CosmosError, sendNotificationForError } from "./dataAccess/sendNotificationForError";
+import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { logError } from "./Logger";
+import { replaceKnownError } from "./ErrorParserUtility";
+
+export const handleError = (error: CosmosError, consoleErrorPrefix: string, area: string): void => {
+  const sanitizedErrorMsg = replaceKnownError(error.message);
+  logConsoleError(`${consoleErrorPrefix}:\n ${sanitizedErrorMsg}`);
+  logError(sanitizedErrorMsg, area, error.code);
+  sendNotificationForError(error);
+};

src/Common/NotificationsClientBase.ts

@@ -1,46 +0,0 @@
-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

@@ -0,0 +1,41 @@
+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

@@ -53,7 +53,7 @@ export class QueriesClient {
           return Promise.resolve(collection);
         },
         (error: any) => {
-          const stringifiedError: string = JSON.stringify(error);
+          const stringifiedError: string = error.message;
           NotificationConsoleUtils.logConsoleMessage(
             ConsoleDataType.Error,
             `Failed to set up account for saving queries: ${stringifiedError}`
@@ -163,7 +163,7 @@ export class QueriesClient {
               return Promise.resolve(queries);
             },
             (error: any) => {
-              const stringifiedError: string = JSON.stringify(error);
+              const stringifiedError: string = error.message;
               NotificationConsoleUtils.logConsoleMessage(
                 ConsoleDataType.Error,
                 `Failed to fetch saved queries: ${stringifiedError}`
@@ -175,7 +175,7 @@ export class QueriesClient {
         },
         (error: any) => {
           // should never get into this state but we handle this regardless
-          const stringifiedError: string = JSON.stringify(error);
+          const stringifiedError: string = error.message;
           NotificationConsoleUtils.logConsoleMessage(
             ConsoleDataType.Error,
             `Failed to fetch saved queries: ${stringifiedError}`
@@ -232,7 +232,7 @@ export class QueriesClient {
           return Promise.resolve();
         },
         (error: any) => {
-          const stringifiedError: string = JSON.stringify(error);
+          const stringifiedError: string = error.message;
           NotificationConsoleUtils.logConsoleMessage(
             ConsoleDataType.Error,
             `Failed to delete query ${query.queryName}: ${stringifiedError}`

src/Common/dataAccess/createCollection.ts

@@ -1,5 +1,4 @@
 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";
@@ -23,21 +22,19 @@ import {
   getGremlinGraph
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
-import { refreshCachedResources } from "../DataAccessUtilityBase";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 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 = {
@@ -54,18 +51,15 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
     } else {
       collection = await createCollectionWithSDK(params);
     }
+
+    logConsoleInfo(`Successfully created container ${params.collectionId}`);
+    return collection;
   } catch (error) {
-    const sanitizedError = ErrorParserUtility.replaceKnownError(JSON.stringify(error));
-    logConsoleError(`Error while creating container ${params.collectionId}:\n ${sanitizedError}`);
-    logError(JSON.stringify(error), "CreateCollection", error.code);
-    sendNotificationForError(error);
-    clearMessage();
+    handleError(error, `Error while creating container ${params.collectionId}`, "CreateCollection");
     throw error;
+  } finally {
+    clearMessage();
   }
-  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,36 +24,28 @@ import {
   createUpdateGremlinDatabase,
   getGremlinDatabase
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
-import { refreshCachedOffers, refreshCachedResources } from "../DataAccessUtilityBase";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 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");
     }
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
-      database = await createDatabaseWithARM(params);
-    } else {
-      database = await createDatabaseWithSDK(params);
-    }
+    const database: DataModels.Database = await (window.authType === AuthType.AAD && !userContext.useSDKOperations
+      ? createDatabaseWithARM(params)
+      : createDatabaseWithSDK(params));
+
+    logConsoleInfo(`Successfully created database ${params.databaseId}`);
+    return database;
   } catch (error) {
-    logConsoleError(`Error while creating database ${params.databaseId}:\n ${error.message}`);
-    logError(JSON.stringify(error), "CreateDatabase", error.code);
-    sendNotificationForError(error);
-    clearMessage();
+    handleError(error, `Error while creating database ${params.databaseId}`, "CreateDatabase");
     throw error;
+  } finally {
+    clearMessage();
   }
-  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,28 +1,78 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import {
+  SqlStoredProcedureCreateUpdateParameters,
+  SqlStoredProcedureResource
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import {
+  createUpdateSqlStoredProcedure,
+  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);
-    createdStoredProcedure = response.resource;
+    return response?.resource;
   } catch (error) {
-    logConsoleError(`Error while creating stored procedure ${storedProcedure.id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "CreateStoredProcedure", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while creating stored procedure ${storedProcedure.id}`, "CreateStoredProcedure");
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return createdStoredProcedure;
 }

src/Common/dataAccess/createTrigger.ts

@@ -1,28 +1,76 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, TriggerDefinition } from "@azure/cosmos";
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import {
+  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 { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { logError } from "../Logger";
 import { sendNotificationForError } from "./sendNotificationForError";
+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);
-    createdTrigger = response.resource;
+    return response.resource;
   } catch (error) {
-    logConsoleError(`Error while creating trigger ${trigger.id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "CreateTrigger", error.code);
+    logConsoleError(`Error while creating trigger ${trigger.id}:\n ${error.message}`);
+    logError(error.message, "CreateTrigger", error.code);
     sendNotificationForError(error);
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return createdTrigger;
 }

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -1,28 +1,82 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import {
+  SqlUserDefinedFunctionCreateUpdateParameters,
+  SqlUserDefinedFunctionResource
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import {
+  createUpdateSqlUserDefinedFunction,
+  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);
-    createdUserDefinedFunction = response.resource;
+    return response?.resource;
   } catch (error) {
-    logConsoleError(`Error while creating user defined function ${userDefinedFunction.id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "CreateUserupdateUserDefinedFunction", error.code);
-    sendNotificationForError(error);
+    handleError(
+      error,
+      `Error while creating user defined function ${userDefinedFunction.id}`,
+      "CreateUserupdateUserDefinedFunction"
+    );
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return createdUserDefinedFunction;
 }

src/Common/dataAccess/deleteCollection.test.ts

@@ -7,7 +7,6 @@ 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", () => {
@@ -18,7 +17,6 @@ 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,12 +5,10 @@ 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 { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 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}`);
@@ -23,15 +21,13 @@ export async function deleteCollection(databaseId: string, collectionId: string)
         .container(collectionId)
         .delete();
     }
+    logConsoleInfo(`Successfully deleted container ${collectionId}`);
   } catch (error) {
-    logConsoleError(`Error while deleting container ${collectionId}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "DeleteCollection", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while deleting container ${collectionId}`, "DeleteCollection");
     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,7 +7,6 @@ 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", () => {
@@ -18,7 +17,6 @@ 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,12 +4,10 @@ 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 { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { handleError } from "../ErrorHandlingUtils";
+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}`);
@@ -25,15 +23,13 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
         .database(databaseId)
         .delete();
     }
+    logConsoleInfo(`Successfully deleted database ${databaseId}`);
   } catch (error) {
-    logConsoleError(`Error while deleting database ${databaseId}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "DeleteDatabase", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while deleting database ${databaseId}`, "DeleteDatabase");
     throw error;
+  } finally {
+    clearMessage();
   }
-  logConsoleInfo(`Successfully deleted database ${databaseId}`);
-  clearMessage();
-  await refreshCachedResources();
 }
 
 function deleteDatabaseWithARM(databaseId: string): Promise<void> {

src/Common/dataAccess/deleteStoredProcedure.ts

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

src/Common/dataAccess/deleteTrigger.ts

@@ -1,22 +1,38 @@
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { handleError } from "../ErrorHandlingUtils";
+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 {
-    await client()
-      .database(databaseId)
-      .container(collectionId)
-      .scripts.trigger(triggerId)
-      .delete();
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
+    ) {
+      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) {
-    logConsoleError(`Error while deleting trigger ${triggerId}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "DeleteTrigger", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while deleting trigger ${triggerId}`, "DeleteTrigger");
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return undefined;
 }

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -1,22 +1,38 @@
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { client } from "../CosmosClient";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { handleError } from "../ErrorHandlingUtils";
+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 {
-    await client()
-      .database(databaseId)
-      .container(collectionId)
-      .scripts.userDefinedFunction(id)
-      .delete();
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
+    ) {
+      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) {
-    logConsoleError(`Error while deleting user defined function ${id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "DeleteUserDefinedFunction", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while deleting user defined function ${id}`, "DeleteUserDefinedFunction");
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return undefined;
 }

src/Common/dataAccess/readCollection.ts

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

src/Common/dataAccess/readCollectionOffer.ts

@@ -4,15 +4,14 @@ 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, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { readOffers } from "./readOffers";
-import { sendNotificationForError } from "./sendNotificationForError";
 import { userContext } from "../../UserContext";
 
 export const readCollectionOffer = async (
@@ -57,9 +56,7 @@ export const readCollectionOffer = async (
       }
     );
   } catch (error) {
-    logConsoleError(`Error while querying offer for collection ${params.collectionId}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadCollectionOffer", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while querying offer for collection ${params.collectionId}`, "ReadCollectionOffer");
     throw error;
   } finally {
     clearMessage();

src/Common/dataAccess/readCollectionQuotaInfo.ts

@@ -5,9 +5,8 @@ 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";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 interface ResourceWithStatistics {
   statistics: DataModels.Statistic[];
@@ -38,9 +37,7 @@ export const readCollectionQuotaInfo = async (
 
     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);
+    handleError(error, `Error while querying quota info for container ${collection.id}`, "ReadCollectionQuotaInfo");
     throw error;
   } finally {
     clearMessage();

src/Common/dataAccess/readCollections.ts

@@ -2,18 +2,16 @@ 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, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 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 (
@@ -22,22 +20,20 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
       userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
-      collections = await readCollectionsWithARM(databaseId);
-    } else {
-      const sdkResponse = await client()
-        .database(databaseId)
-        .containers.readAll()
-        .fetchAll();
-      collections = sdkResponse.resources as DataModels.Collection[];
+      return await readCollectionsWithARM(databaseId);
     }
+
+    const sdkResponse = await client()
+      .database(databaseId)
+      .containers.readAll()
+      .fetchAll();
+    return sdkResponse.resources as DataModels.Collection[];
   } catch (error) {
-    logConsoleError(`Error while querying containers for database ${databaseId}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadCollections", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while querying containers for database ${databaseId}`, "ReadCollections");
     throw error;
+  } finally {
+    clearMessage();
   }
-  clearMessage();
-  return collections;
 }
 
 async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {

src/Common/dataAccess/readDatabaseOffer.ts

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

src/Common/dataAccess/readDatabases.ts

@@ -2,13 +2,12 @@ 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, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { userContext } from "../../UserContext";
 
 export async function readDatabases(): Promise<DataModels.Database[]> {
@@ -18,9 +17,7 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
     if (
       window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.Table &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.Cassandra
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
       databases = await readDatabasesWithARM();
     } else {
@@ -30,9 +27,7 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
       databases = sdkResponse.resources as DataModels.Database[];
     }
   } catch (error) {
-    logConsoleError(`Error while querying databases:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadDatabases", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while querying databases`, "ReadDatabases");
     throw error;
   }
   clearMessage();

src/Common/dataAccess/readMongoDBCollection.tsx

@@ -0,0 +1,58 @@
+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 * as Constants from "../Constants";
+import { client } from "../CosmosClient";
+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, `Error while reading container ${collectionId}`, "ReadMongoDBCollection");
+    throw error;
+  }
+  clearMessage();
+  return collection;
+}
+
+export async function getMongoDBCollectionIndexTransformationProgress(
+  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, `Error while reading container ${collectionId}`, "ReadMongoDBCollection");
+    throw error;
+  }
+  clearMessage();
+  return indexTransformationPercentage;
+}

src/Common/dataAccess/readOffers.ts

@@ -1,26 +1,10 @@
 import { Offer } from "../../Contracts/DataModels";
-import { ClientDefaults } from "../Constants";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { Platform, configContext } from "../../ConfigContext";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
-import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { logError } from "../Logger";
-import { sendCachedDataMessage } from "../MessageHandler";
-import { sendNotificationForError } from "./sendNotificationForError";
-import { userContext } from "../../UserContext";
+import { handleError } from "../ErrorHandlingUtils";
 
 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()
@@ -33,9 +17,7 @@ export const readOffers = async (): Promise<Offer[]> => {
       return [];
     }
 
-    logConsoleError(`Error while querying offers:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadOffers", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while querying offers`, "ReadOffers");
     throw error;
   } finally {
     clearMessage();

src/Common/dataAccess/readStoredProcedures.ts

@@ -1,27 +1,43 @@
+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 { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { handleError } from "../ErrorHandlingUtils";
+import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+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();
-    sprocs = response.resources;
+    return response?.resources;
   } catch (error) {
-    logConsoleError(`Failed to query stored procedures for container ${collectionId}: ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadStoredProcedures", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Failed to query stored procedures for container ${collectionId}`, "ReadStoredProcedures");
+    throw error;
+  } finally {
+    clearMessage();
   }
-  clearMessage();
-  return sprocs;
 }

src/Common/dataAccess/readTriggers.ts

@@ -1,27 +1,43 @@
+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 { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { listSqlTriggers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+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();
-    triggers = response.resources;
+    return response?.resources;
   } catch (error) {
-    logConsoleError(`Failed to query triggers for container ${collectionId}: ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadTriggers", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Failed to query triggers for container ${collectionId}`, "ReadTriggers");
+    throw error;
+  } finally {
+    clearMessage();
   }
-  clearMessage();
-  return triggers;
 }

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -1,27 +1,47 @@
+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 { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { handleError } from "../ErrorHandlingUtils";
+import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+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();
-    udfs = response.resources;
+    return response?.resources;
   } catch (error) {
-    logConsoleError(`Failed to query user defined functions for container ${collectionId}: ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "ReadUserDefinedFunctions", error.code);
-    sendNotificationForError(error);
+    handleError(
+      error,
+      `Failed to query user defined functions for container ${collectionId}`,
+      "ReadUserDefinedFunctions"
+    );
+    throw error;
+  } finally {
+    clearMessage();
   }
-  clearMessage();
-  return udfs;
 }

src/Common/dataAccess/sendNotificationForError.ts

@@ -2,7 +2,7 @@ import * as Constants from "../Constants";
 import { sendMessage } from "../MessageHandler";
 import { MessageTypes } from "../../Contracts/ExplorerContracts";
 
-interface CosmosError {
+export interface CosmosError {
   code: number;
   message?: string;
 }

src/Common/dataAccess/updateCollection.ts

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

src/Common/dataAccess/updateOffer.ts

@@ -0,0 +1,418 @@
+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, `Error updating offer for ${offerResourceText}`, "UpdateCollection");
+    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
+    },
+    _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

@@ -17,8 +17,7 @@ describe("updateOfferThroughputBeyondLimit", () => {
       resourceGroup: "foo",
       databaseAccountName: "foo",
       databaseName: "foo",
-      throughput: 1000000000,
-      offerIsRUPerMinuteThroughputEnabled: false
+      throughput: 1000000000
     });
     expect(window.fetch).toHaveBeenCalled();
   });

src/Common/dataAccess/updateOfferThroughputBeyondLimit.ts

@@ -11,7 +11,6 @@ interface UpdateOfferThroughputRequest {
   databaseName: string;
   collectionName?: string;
   throughput: number;
-  offerIsRUPerMinuteThroughputEnabled: boolean;
   offerAutopilotSettings?: AutoPilotOfferSettings;
 }
 

src/Common/dataAccess/updateStoredProcedure.ts

@@ -1,29 +1,72 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import {
+  SqlStoredProcedureCreateUpdateParameters,
+  SqlStoredProcedureResource
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import {
+  createUpdateSqlStoredProcedure,
+  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);
-    updatedStoredProcedure = response.resource;
+    return response?.resource;
   } catch (error) {
-    logConsoleError(`Error while updating stored procedure ${storedProcedure.id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "UpdateStoredProcedure", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while updating stored procedure ${storedProcedure.id}`, "UpdateStoredProcedure");
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return updatedStoredProcedure;
 }

src/Common/dataAccess/updateTrigger.ts

@@ -1,29 +1,69 @@
+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 { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { handleError } from "../ErrorHandlingUtils";
+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);
-    updatedTrigger = response.resource;
+    return response?.resource;
   } catch (error) {
-    logConsoleError(`Error while updating trigger ${trigger.id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "UpdateTrigger", error.code);
-    sendNotificationForError(error);
+    handleError(error, `Error while updating trigger ${trigger.id}`, "UpdateTrigger");
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return updatedTrigger;
 }

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -1,29 +1,76 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
-import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import {
+  SqlUserDefinedFunctionCreateUpdateParameters,
+  SqlUserDefinedFunctionResource
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
+import {
+  createUpdateSqlUserDefinedFunction,
+  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);
-    updatedUserDefinedFunction = response.resource;
+    return response?.resource;
   } catch (error) {
-    logConsoleError(`Error while updating user defined function ${userDefinedFunction.id}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "UpdateUserupdateUserDefinedFunction", error.code);
-    sendNotificationForError(error);
+    handleError(
+      error,
+      `Error while updating user defined function ${userDefinedFunction.id}`,
+      "UpdateUserupdateUserDefinedFunction"
+    );
+    throw error;
+  } finally {
+    clearMessage();
   }
-
-  clearMessage();
-  return updatedUserDefinedFunction;
 }

src/ConfigContext.ts

@@ -34,6 +34,7 @@ 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$`
@@ -50,7 +51,8 @@ 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

@@ -179,7 +179,6 @@ export interface Offer extends Resource {
   offerType?: string;
   content?: {
     offerThroughput: number;
-    offerIsRUPerMinuteThroughputEnabled: boolean;
     collectionThroughputInfo?: OfferThroughputInfo;
     offerAutopilotSettings?: AutoPilotOfferSettings;
   };
@@ -233,27 +232,17 @@ export interface CreateDatabaseAndCollectionRequest {
   collectionId: string;
   offerThroughput: number;
   databaseLevelThroughput: boolean;
-  rupmEnabled?: boolean;
   partitionKey?: PartitionKey;
   indexingPolicy?: IndexingPolicy;
   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;
@@ -262,9 +251,7 @@ export interface Query {
 }
 
 export interface AutoPilotOfferSettings {
-  tier?: AutopilotTier;
   maximumTierThroughput?: number;
-  targetTier?: AutopilotTier;
   maxThroughput?: number;
   targetMaxThroughput?: number;
 }
@@ -303,6 +290,16 @@ 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;
@@ -481,7 +478,6 @@ export interface MongoParameters extends RpParameters {
   rid?: string;
   rtype?: string;
   isAutoPilot?: Boolean;
-  autoPilotTier?: string;
   autoPilotThroughput?: string;
   analyticalStorageTtl?: number;
 }

src/Contracts/ViewModels.ts

@@ -85,7 +85,7 @@ export interface Database extends TreeNode {
   collapseDatabase(): void;
 
   loadCollections(): Promise<void>;
-  findCollectionWithId(collectionRid: string): Collection;
+  findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
   onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
@@ -266,7 +266,6 @@ export interface TabOptions {
   tabKind: CollectionTabKind;
   title: string;
   tabPath: string;
-  selfLink: string;
   isActive: ko.Observable<boolean>;
   hashLocation: string;
   onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
@@ -290,6 +289,10 @@ 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>;
@@ -305,7 +308,6 @@ export interface QueryTabOptions extends TabOptions {
 export interface ScriptTabOption extends TabOptions {
   resource: any;
   isNew: boolean;
-  collectionSelfLink?: string;
   partitionKey?: DataModels.PartitionKey;
 }
 
@@ -388,6 +390,7 @@ export interface DataExplorerInputsFrame {
   dataExplorerVersion?: string;
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
+  flights?: readonly string[];
 }
 
 export interface CollectionCreationDefaults {

src/Definitions/jquery.contextmenu.d.ts

@@ -1,42 +0,0 @@
-// 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,8 +123,4 @@ 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,7 +11,6 @@ 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());
@@ -23,7 +22,6 @@ 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/CollapsiblePanel/CollapsibleSectionComponent.test.tsx

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,30 @@
+// 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 { FontIcon } from "office-ui-fabric-react";
+import { ChoiceGroup, FontIcon, IChoiceGroupProps } from "office-ui-fabric-react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -24,6 +24,7 @@ export interface DialogProps {
   subText: string;
   isModal: boolean;
   visible: boolean;
+  choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
   primaryButtonText: string;
@@ -65,6 +66,7 @@ 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 = {
@@ -82,6 +84,7 @@ 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

@@ -44,7 +44,6 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     onChange?: (_?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
   }[] = [
     { key: "feature.enablechangefeedpolicy", label: "Enable change feed policy", value: "true" },
-    { key: "feature.enablerupm", label: "Enable RUPM", value: "true" },
     { key: "feature.dataexplorerexecutesproc", label: "Execute stored procedure", value: "true" },
     { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
     { key: "feature.enablettl", label: "Enable TTL", value: "true" },
@@ -55,7 +54,6 @@ 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

@@ -131,12 +131,6 @@ exports[`Feature panel renders all flags 1`] = `
           label="Enable change feed policy"
           onChange={[Function]}
         />
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.enablerupm"
-          label="Enable RUPM"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.dataexplorerexecutesproc"
@@ -178,12 +172,6 @@ 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/NotebookGallery/Cards/GalleryCardComponent.test.tsx

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -1,6 +1,7 @@
 import {
   Dropdown,
   FocusZone,
+  FontWeights,
   IDropdownOption,
   IPageSpecification,
   IPivotItemProps,
@@ -11,7 +12,8 @@ import {
   Pivot,
   PivotItem,
   SearchBox,
-  Stack
+  Stack,
+  Text
 } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Logger from "../../../Common/Logger";
@@ -151,7 +153,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.createTab(GalleryTab.Published, this.state.publishedNotebooks));
+        tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
       }
     }
 
@@ -197,10 +199,59 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.createTabContent(data)
+      content: this.createSearchBarHeader(this.createCardsTabContent(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
@@ -210,11 +261,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         }}
       />
     ) : (
-      this.createTabContent(data)
+      this.createSearchBarHeader(this.createCardsTabContent(data))
     );
   }
 
-  private createTabContent(data: IGalleryItem[]): JSX.Element {
+  private createSearchBarHeader(content: JSX.Element): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
         <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
@@ -227,13 +278,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?.isGalleryPublishEnabled() && (
+          {(!this.props.container || this.props.container.isGalleryPublishEnabled()) && (
             <Stack.Item>
               <InfoComponent />
             </Stack.Item>
           )}
         </Stack>
-        {data && this.createCardsTabContent(data)}
+        <Stack.Item>{content}</Stack.Item>
       </Stack>
     );
   }
@@ -251,6 +302,25 @@ 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:

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

@@ -3,10 +3,14 @@ import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fa
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";
 
-export class InfoComponent extends React.Component {
-  private getInfoPanel = (iconName: string, labelText: string, url: string): JSX.Element => {
+export interface InfoComponentProps {
+  onReportAbuseClick?: () => void;
+}
+
+export class InfoComponent extends React.Component<InfoComponentProps> {
+  private getInfoPanel = (iconName: string, labelText: string, url?: string, onClick?: () => void): JSX.Element => {
     return (
-      <Link href={url} target="_blank">
+      <Link href={url} target={url && "_blank"} onClick={onClick}>
         <div className="infoPanel">
           <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} />
           <Label className="infoLabel">{labelText}</Label>
@@ -25,6 +29,11 @@ export class InfoComponent extends React.Component {
         <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,7 +77,25 @@ 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,14 +18,17 @@ 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} />);
@@ -47,14 +50,17 @@ 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,6 +17,7 @@ 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;
@@ -26,6 +27,7 @@ export interface NotebookMetadataComponentProps {
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
   onDownloadClick: () => void;
+  onReportAbuseClick: () => void;
 }
 
 export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
@@ -41,24 +43,39 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
     return (
       <Stack tokens={{ childrenGap: 10 }}>
         <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 30 }}>
-          <Text variant="xxLarge" nowrap>
-            {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
-          </Text>
-          <Text>
-            {this.props.isFavorite !== undefined && (
-              <>
-                <IconButton
-                  iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
-                  onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
-                />
-                {this.props.data.favorites} likes
-              </>
-            )}
-          </Text>
+          <Stack.Item>
+            <Text variant="xxLarge" nowrap>
+              {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
+            </Text>
+          </Stack.Item>
+
+          <Stack.Item>
+            <Text>
+              {this.props.isFavorite !== undefined && (
+                <>
+                  <IconButton
+                    iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
+                    onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
+                  />
+                  {this.props.data.favorites} likes
+                </>
+              )}
+            </Text>
+          </Stack.Item>
 
           {this.props.downloadButtonText && (
-            <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+            <Stack.Item>
+              <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,11 +3,10 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, 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";
@@ -15,12 +14,13 @@ 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 } from "../DialogReactComponent/DialogComponent";
+import { DialogComponent, DialogProps, TextFieldProps } 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";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -43,10 +43,8 @@ interface NotebookViewerComponentState {
   showProgressBar: boolean;
 }
 
-export class NotebookViewerComponent extends React.Component<
-  NotebookViewerComponentProps,
-  NotebookViewerComponentState
-> {
+export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
+  implements DialogHost {
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 
@@ -140,6 +138,7 @@ export class NotebookViewerComponent extends React.Component<
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}
               onDownloadClick={this.downloadItem}
+              onReportAbuseClick={this.state.galleryItem.isSample ? undefined : this.reportAbuse}
             />
           </div>
         ) : (
@@ -179,6 +178,39 @@ export class NotebookViewerComponent extends React.Component<
     };
   }
 
+  // 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 })
@@ -196,4 +228,8 @@ export class NotebookViewerComponent extends React.Component<
       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,26 +17,38 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
     }
     verticalAlign="center"
   >
-    <Text
-      nowrap={true}
-      variant="xxLarge"
-    >
-      name
-    </Text>
-    <Text>
-      <CustomizedIconButton
-        iconProps={
-          Object {
-            "iconName": "HeartFill",
+    <StackItem>
+      <Text
+        nowrap={true}
+        variant="xxLarge"
+      >
+        name
+      </Text>
+    </StackItem>
+    <StackItem>
+      <Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "HeartFill",
+            }
           }
-        }
+        />
+        0
+         likes
+      </Text>
+    </StackItem>
+    <StackItem>
+      <CustomizedPrimaryButton
+        text="Download"
       />
-      0
-       likes
-    </Text>
-    <CustomizedPrimaryButton
-      text="Download"
+    </StackItem>
+    <StackItem
+      grow={true}
     />
+    <StackItem>
+      <InfoComponent />
+    </StackItem>
   </Stack>
   <Stack
     horizontal={true}
@@ -117,26 +129,38 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
     }
     verticalAlign="center"
   >
-    <Text
-      nowrap={true}
-      variant="xxLarge"
-    >
-      name
-    </Text>
-    <Text>
-      <CustomizedIconButton
-        iconProps={
-          Object {
-            "iconName": "Heart",
+    <StackItem>
+      <Text
+        nowrap={true}
+        variant="xxLarge"
+      >
+        name
+      </Text>
+    </StackItem>
+    <StackItem>
+      <Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "Heart",
+            }
           }
-        }
+        />
+        0
+         likes
+      </Text>
+    </StackItem>
+    <StackItem>
+      <CustomizedPrimaryButton
+        text="Download"
       />
-      0
-       likes
-    </Text>
-    <CustomizedPrimaryButton
-      text="Download"
+    </StackItem>
+    <StackItem
+      grow={true}
     />
+    <StackItem>
+      <InfoComponent />
+    </StackItem>
   </Stack>
   <Stack
     horizontal={true}

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

@@ -6,9 +6,12 @@ import SettingsTabV2 from "../../Tabs/SettingsTabV2";
 import { collection } from "./TestUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty, TtlOnNoDefault, TtlOn, TtlOff } from "./SettingsUtils";
+import { TtlType, isDirty } from "./SettingsUtils";
 import Explorer from "../../Explorer";
-import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+jest.mock("../../../Common/dataAccess/readMongoDBCollection", () => ({
+  getMongoDBCollectionIndexTransformationProgress: jest.fn().mockReturnValue(undefined)
+}));
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -18,10 +21,18 @@ 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/DocumentClientUtilityBase";
-jest.mock("../../../Common/DocumentClientUtilityBase", () => ({
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import Q from "q";
+jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer)
 }));
 
@@ -33,10 +44,12 @@ 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;
+      })
     })
   };
 
@@ -103,10 +116,7 @@ describe("SettingsComponent", () => {
     let settingsComponentInstance = new SettingsComponent(baseProps);
     expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(false);
 
-    const newContainer = new Explorer({
-      notificationsClient: undefined,
-      isEmulator: false
-    });
+    const newContainer = new Explorer();
     newContainer.isPreferredApiCassandra = ko.computed(() => true);
 
     const newCollection = { ...collection };
@@ -147,10 +157,7 @@ describe("SettingsComponent", () => {
     let settingsComponentInstance = new SettingsComponent(baseProps);
     expect(settingsComponentInstance.hasConflictResolution()).toEqual(undefined);
 
-    const newContainer = new Explorer({
-      notificationsClient: undefined,
-      isEmulator: false
-    });
+    const newContainer = new Explorer();
     newContainer.databaseAccount = ko.observable({
       id: undefined,
       name: undefined,
@@ -195,13 +202,17 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.isOfferReplacePending()).toEqual(true);
   });
 
-  it("save calls updateCollection and updateOffer", async () => {
+  it("save calls updateCollection, updateMongoDBCollectionThroughRP and updateOffer", async () => {
     const wrapper = shallow(<SettingsComponent {...baseProps} />);
-    wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true });
+    wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true, isMongoIndexingPolicySaveable: 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();
   });
 
@@ -220,13 +231,6 @@ 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

@@ -6,18 +6,22 @@ import * as SharedConstants from "../../../Shared/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
-import { traceStart, traceFailure, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { RequestOptions } from "@azure/cosmos/dist-esm";
 import Explorer from "../../Explorer";
-import { updateOffer } from "../../../Common/DocumentClientUtilityBase";
-import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { userContext } from "../../../UserContext";
 import { updateOfferThroughputBeyondLimit } from "../../../Common/dataAccess/updateOfferThroughputBeyondLimit";
 import SettingsTab from "../../Tabs/SettingsTabV2";
 import { throughputUnit } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
+import {
+  MongoIndexingPolicyComponent,
+  MongoIndexingPolicyComponentProps
+} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
 import {
   getMaxRUs,
   hasDatabaseSharedThroughput,
@@ -27,20 +31,25 @@ import {
   SettingsV2TabTypes,
   getTabTitle,
   isDirty,
-  TtlOff,
-  TtlOn,
-  TtlOnNoDefault,
+  AddMongoIndexProps,
+  MongoIndexTypes,
   parseConflictResolutionMode,
-  parseConflictResolutionProcedure
+  parseConflictResolutionProcedure,
+  getMongoNotification
 } from "./SettingsUtils";
 import {
   ConflictResolutionComponent,
   ConflictResolutionComponentProps
 } from "./SettingsSubComponents/ConflictResolutionComponent";
 import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
-import { Pivot, PivotItem, IPivotProps, IPivotItemProps, IChoiceGroupOption } from "office-ui-fabric-react";
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
 import "./SettingsComponent.less";
 import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import {
+  getMongoDBCollectionIndexTransformationProgress,
+  readMongoDBCollectionThroughRP
+} from "../../../Common/dataAccess/readMongoDBCollection";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -85,9 +94,15 @@ 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;
@@ -102,18 +117,16 @@ export interface SettingsComponentState {
 
 export class SettingsComponent extends React.Component<SettingsComponentProps, SettingsComponentState> {
   private static readonly sixMonthsInSeconds = 15768000;
-  private static readonly zeroSeconds = 0;
+  private saveSettingsButton: ButtonV2;
+  private discardSettingsChangesButton: ButtonV2;
 
-  public saveSettingsButton: ButtonV2;
-  public discardSettingsChangesButton: ButtonV2;
-
-  public isAnalyticalStorageEnabled: boolean;
+  private 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);
@@ -127,8 +140,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"
 
+    // Mongo container with system partition key still treat as "Fixed"
     this.isFixedContainer =
       !this.collection.partitionKey ||
       (this.container.isPreferredApiMongoDB() && this.collection.partitionKey.systemKey);
@@ -160,10 +173,16 @@ 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,
@@ -192,6 +211,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   }
 
   componentDidMount(): void {
+    this.loadMongoIndexes();
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
@@ -205,6 +225,36 @@ 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()
+    ) {
+      await this.refreshIndexTransformationProgress();
+
+      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 getMongoDBCollectionIndexTransformationProgress(
+      this.collection.databaseId,
+      this.collection.id()
+    );
+    this.setState({ indexTransformationProgress: currentProgress });
+  };
+
   public isSaveSettingsButtonEnabled = (): boolean => {
     if (this.isOfferReplacePending()) {
       return false;
@@ -214,7 +264,8 @@ 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)
     );
   };
 
@@ -223,7 +274,8 @@ 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)
     );
   };
 
@@ -270,7 +322,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.props.settingsTab.isExecutionError(false);
 
     this.props.settingsTab.isExecuting(true);
-    const startKey: number = traceStart(Action.UpdateSettings, {
+    const startKey: number = traceStart(Action.SettingsV2Updated, {
       databaseAccountName: this.container.databaseAccount()?.name,
       defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
@@ -342,6 +394,57 @@ 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: error.message
+            },
+            startKey
+          );
+          throw error;
+        }
+      }
+
       if (this.state.isScaleSaveable) {
         const newThroughput = this.state.throughput;
         const newOffer: DataModels.Offer = { ...this.collection.offer() };
@@ -351,8 +454,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
           newOffer.content.offerThroughput = newThroughput;
         } else {
           newOffer.content = {
-            offerThroughput: newThroughput,
-            offerIsRUPerMinuteThroughputEnabled: false
+            offerThroughput: newThroughput
           };
         }
 
@@ -395,38 +497,36 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
             resourceGroup: userContext.resourceGroup,
             databaseName: this.collection.databaseId,
             collectionName: this.collection.id(),
-            throughput: newThroughput,
-            offerIsRUPerMinuteThroughputEnabled: false
+            throughput: newThroughput
           };
-          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;
-          }
+
+          await updateOfferThroughputBeyondLimit(requestPayload);
+          this.collection.offer().content.offerThroughput = originalThroughputValue;
+          this.setState({
+            isScaleSaveable: false,
+            isScaleDiscardable: false,
+            throughput: originalThroughputValue,
+            throughputBaseline: originalThroughputValue,
+            initialNotification: {
+              description: `Throughput update for ${newThroughput} ${throughputUnit}`
+            } as DataModels.Notification
+          });
         } else {
-          const updatedOffer: DataModels.Offer = await updateOffer(this.collection.offer(), newOffer, headerOptions);
+          const updateOfferParams: DataModels.UpdateOfferParams = {
+            databaseId: this.collection.databaseId,
+            collectionId: this.collection.id(),
+            currentOffer: this.collection.offer(),
+            autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+            manualThroughput: this.state.isAutoPilotSelected ? undefined : newThroughput
+          };
+          if (this.hasProvisioningTypeChanged()) {
+            if (this.state.isAutoPilotSelected) {
+              updateOfferParams.migrateToAutoPilot = true;
+            } else {
+              updateOfferParams.migrateToManual = true;
+            }
+          }
+          const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
           this.collection.offer(updatedOffer);
           this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
           if (this.state.isAutoPilotSelected) {
@@ -446,9 +546,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.setBaseline();
       this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
       traceSuccess(
-        Action.UpdateSettings,
+        Action.SettingsV2Updated,
         {
           databaseAccountName: this.container.databaseAccount()?.name,
+          databaseName: this.collection?.databaseId,
+          collectionName: this.collection?.id(),
           defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.props.settingsTab.tabTitle()
@@ -460,12 +562,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.props.settingsTab.isExecutionError(true);
       console.error(reason);
       traceFailure(
-        Action.UpdateSettings,
+        Action.SettingsV2Updated,
         {
           databaseAccountName: this.container.databaseAccount()?.name,
+          databaseName: this.collection?.databaseId,
+          collectionName: this.collection?.id(),
           defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.props.settingsTab.tabTitle()
+          tabTitle: this.props.settingsTab.tabTitle(),
+          error: reason.message
         },
         startKey
       );
@@ -474,12 +579,18 @@ 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,
@@ -494,19 +605,29 @@ 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 });
 
@@ -530,79 +651,64 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     }
   };
 
-  private onConflictResolutionPolicyModeChange = (
-    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ): void =>
-    this.setState({
-      conflictResolutionPolicyMode:
-        DataModels.ConflictResolutionMode[option.key as keyof typeof DataModels.ConflictResolutionMode]
-    });
+  private onIndexDrop = (index: number): void => this.setState({ indexesToDrop: [...this.state.indexesToDrop, index] });
 
-  private onConflictResolutionPolicyPathChange = (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ): void => this.setState({ conflictResolutionPolicyPath: newValue });
+  private onRevertIndexDrop = (index: number): void => {
+    const indexesToDrop = [...this.state.indexesToDrop];
+    indexesToDrop.splice(index, 1);
+    this.setState({ indexesToDrop });
+  };
 
-  private onConflictResolutionPolicyProcedureChange = (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ): void => this.setState({ conflictResolutionPolicyProcedure: newValue });
+  private onRevertIndexAdd = (index: number): void => {
+    const indexesToAdd = [...this.state.indexesToAdd];
+    indexesToAdd.splice(index, 1);
+    this.setState({ indexesToAdd });
+  };
+
+  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 });
 
-  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 onTtlChange = (newTtl: TtlType): void => this.setState({ timeToLive: newTtl });
 
-  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;
+  private onTimeToLiveSecondsChange = (newTimeToLiveSeconds: number): void =>
     this.setState({ timeToLiveSeconds: newTimeToLiveSeconds });
-  };
 
-  private onGeoSpatialConfigTypeChange = (
-    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ): void =>
-    this.setState({ geospatialConfigType: GeospatialConfigType[option.key as keyof typeof GeospatialConfigType] });
+  private onGeoSpatialConfigTypeChange = (newGeoSpatialConfigType: GeospatialConfigType): void =>
+    this.setState({ geospatialConfigType: newGeoSpatialConfigType });
 
-  private onAnalyticalStorageTtlSelectionChange = (
-    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ): void => this.setState({ analyticalStorageTtlSelection: this.getTtlValue(option.key) });
+  private onAnalyticalStorageTtlSelectionChange = (newAnalyticalStorageTtlSelection: TtlType): void =>
+    this.setState({ analyticalStorageTtlSelection: newAnalyticalStorageTtlSelection });
 
-  private onAnalyticalStorageTtlSecondsChange = (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ): void => {
-    let newAnalyticalStorageTtlSeconds = parseInt(newValue);
-    newAnalyticalStorageTtlSeconds = isNaN(newAnalyticalStorageTtlSeconds)
-      ? SettingsComponent.zeroSeconds
-      : newAnalyticalStorageTtlSeconds;
+  private onAnalyticalStorageTtlSecondsChange = (newAnalyticalStorageTtlSeconds: number): void =>
     this.setState({ analyticalStorageTtlSeconds: newAnalyticalStorageTtlSeconds });
-  };
 
-  private onChangeFeedPolicyChange = (
-    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ): void =>
-    this.setState({ changeFeedPolicy: ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState] });
+  private onChangeFeedPolicyChange = (newChangeFeedPolicy: ChangeFeedPolicyState): void =>
+    this.setState({ changeFeedPolicy: newChangeFeedPolicy });
 
   private onSubSettingsSaveableChange = (isSubSettingsSaveable: boolean): void =>
     this.setState({ isSubSettingsSaveable: isSubSettingsSaveable });
@@ -613,6 +719,12 @@ 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) {
@@ -783,7 +895,6 @@ 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,
@@ -830,12 +941,25 @@ 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,
       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,
@@ -852,7 +976,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
 
     const tabs: SettingsV2TabInfo[] = [];
-    if (!hasDatabaseSharedThroughput(this.collection)) {
+    if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
       tabs.push({
         tab: SettingsV2TabTypes.ScaleTab,
         content: <ScaleComponent {...scaleComponentProps} />
@@ -869,6 +993,15 @@ 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,17 +4,11 @@ import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent";
 
 export class SettingsComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
+  public parameters: ko.Computed<boolean>;
 
-  constructor(private props: SettingsComponentProps) {
-    this.parameters = ko.observable<number>(Date.now());
-  }
+  constructor(private props: SettingsComponentProps) {}
 
   public renderComponent(): JSX.Element {
-    return <SettingsComponent {...this.props} />;
-  }
-
-  public triggerRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
+    return this.parameters() ? <SettingsComponent {...this.props} /> : <></>;
   }
 }

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

@@ -15,7 +15,11 @@ import {
   getToolTipContainer,
   conflictResolutionCustomToolTip,
   changeFeedPolicyToolTip,
-  conflictResolutionLwwTooltip
+  conflictResolutionLwwTooltip,
+  mongoIndexingPolicyDisclaimer,
+  mongoIndexingPolicyAADError,
+  mongoIndexTransformationRefreshingMessage,
+  renderMongoIndexTransformationRefreshMessage
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
@@ -27,7 +31,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {getAutoPilotV3SpendElement(1000, true)}
         {getAutoPilotV3SpendElement(undefined, true)}
 
-        {getEstimatedSpendElement(1000, "mooncake", 2, false, true)}
+        {getEstimatedSpendElement(1000, "mooncake", 2, false)}
 
         {getEstimatedAutoscaleSpendElement(1000, "mooncake", 2, false)}
 
@@ -45,6 +49,16 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {conflictResolutionLwwTooltip}
         {conflictResolutionCustomToolTip}
         {changeFeedPolicyToolTip}
+
+        {mongoIndexingPolicyDisclaimer}
+        {mongoIndexingPolicyAADError}
+        {mongoIndexTransformationRefreshingMessage}
+        {renderMongoIndexTransformationRefreshMessage(0, () => {
+          return;
+        })}
+        {renderMongoIndexTransformationRefreshMessage(90, () => {
+          return;
+        })}
       </>
     );
   }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -21,13 +21,24 @@ 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";
 
 const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
 
-export const spendAckCheckBoxStyle: ICheckboxStyles = {
+export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
     margin: 0,
     padding: "2 0 2 0"
@@ -45,6 +56,20 @@ 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 }
 };
@@ -53,6 +78,54 @@ 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";
@@ -126,10 +199,9 @@ export const getEstimatedSpendElement = (
   throughput: number,
   serverId: string,
   regions: number,
-  multimaster: boolean,
-  rupmEnabled: boolean
+  multimaster: boolean
 ): JSX.Element => {
-  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, rupmEnabled, throughput, regions, multimaster);
+  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, throughput, regions, multimaster);
   const dailyPrice: number = hourlyPrice * 24;
   const monthlyPrice: number = hourlyPrice * hoursInAMonth;
   const currency: string = getPriceCurrency(serverId);
@@ -313,6 +385,56 @@ 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>Refreshing index transformation progress</Text>
+    <Spinner size={SpinnerSize.medium} />
+  </Stack>
+);
+
+export const renderMongoIndexTransformationRefreshMessage = (
+  progress: number,
+  performRefresh: () => void
+): JSX.Element => {
+  if (progress === 0) {
+    return (
+      <Text>
+        {"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>
+        {`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,24 +18,15 @@ export interface ConflictResolutionComponentProps {
   container: Explorer;
   conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
   conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
-  onConflictResolutionPolicyModeChange: (
-    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ) => void;
+  onConflictResolutionPolicyModeChange: (newMode: DataModels.ConflictResolutionMode) => void;
   conflictResolutionPolicyPath: string;
   conflictResolutionPolicyPathBaseline: string;
 
-  onConflictResolutionPolicyPathChange: (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ) => void;
+  onConflictResolutionPolicyPathChange: (newPath: string) => void;
   conflictResolutionPolicyProcedure: string;
   conflictResolutionPolicyProcedureBaseline: string;
 
-  onConflictResolutionPolicyProcedureChange: (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ) => void;
+  onConflictResolutionPolicyProcedureChange: (newProcedure: string) => void;
   onConflictResolutionDirtyChange: (isConflictResolutionDirty: boolean) => void;
 }
 
@@ -77,12 +68,30 @@ 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.props.onConflictResolutionPolicyModeChange}
+      onChange={this.onConflictResolutionPolicyModeChange}
       styles={getChoiceGroupStyles(
         this.props.conflictResolutionPolicyMode,
         this.props.conflictResolutionPolicyModeBaseline
@@ -104,7 +113,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
         this.props.conflictResolutionPolicyPathBaseline
       )}
       value={this.props.conflictResolutionPolicyPath}
-      onChange={this.props.onConflictResolutionPolicyPathChange}
+      onChange={this.onConflictResolutionPolicyPathChange}
     />
   );
 
@@ -122,7 +131,7 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
         this.props.conflictResolutionPolicyProcedureBaseline
       )}
       value={this.props.conflictResolutionPolicyProcedure}
-      onChange={this.props.onConflictResolutionPolicyProcedureChange}
+      onChange={this.onConflictResolutionPolicyProcedureChange}
     />
   );
 

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

@@ -17,9 +17,6 @@ describe("IndexingPolicyComponent", () => {
     },
     indexingPolicyContent: initialIndexingPolicyContent,
     indexingPolicyContentBaseline: initialIndexingPolicyContent,
-    onIndexingPolicyElementFocusChange: () => {
-      return;
-    },
     onIndexingPolicyContentChange: () => {
       return;
     },

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

@@ -10,7 +10,6 @@ export interface IndexingPolicyComponentProps {
   resetShouldDiscardIndexingPolicy: () => void;
   indexingPolicyContent: DataModels.IndexingPolicy;
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
-  onIndexingPolicyElementFocusChange: (indexingPolicyContentFocussed: boolean) => void;
   onIndexingPolicyContentChange: (newIndexingPolicy: DataModels.IndexingPolicy) => void;
   logIndexingPolicySuccessMessage: () => void;
   onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
@@ -89,8 +88,6 @@ export class IndexingPolicyComponent extends React.Component<
       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();

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,122 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
+import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
+
+describe("MongoIndexingPolicyComponent", () => {
+  const baseProps: MongoIndexingPolicyComponentProps = {
+    mongoIndexes: [],
+    onIndexDrop: () => {
+      return;
+    },
+    indexesToDrop: [],
+    onRevertIndexDrop: () => {
+      return;
+    },
+    indexesToAdd: [],
+    onRevertIndexAdd: () => {
+      return;
+    },
+    onIndexAddOrChange: () => {
+      return;
+    },
+    indexTransformationProgress: undefined,
+    refreshIndexTransformationProgress: () =>
+      new Promise(() => {
+        return;
+      }),
+    onMongoIndexingPolicySaveableChange: () => {
+      return;
+    },
+    onMongoIndexingPolicyDiscardableChange: () => {
+      return;
+    }
+  };
+
+  it("renders", () => {
+    const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("isIndexingTransforming", () => {
+    const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
+    const mongoIndexingPolicyComponent = wrapper.instance() as MongoIndexingPolicyComponent;
+    expect(mongoIndexingPolicyComponent.isIndexingTransforming()).toEqual(false);
+    wrapper.setProps({ indexTransformationProgress: 50 });
+    expect(mongoIndexingPolicyComponent.isIndexingTransforming()).toEqual(true);
+    wrapper.setProps({ indexTransformationProgress: 100 });
+    expect(mongoIndexingPolicyComponent.isIndexingTransforming()).toEqual(false);
+  });
+
+  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()).toEqual(undefined);
+    });
+
+    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
+        );
+        expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toEqual(
+          mongoWarningNotificationMessage
+        );
+      }
+    );
+  });
+});

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

@@ -0,0 +1,369 @@
+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,
+  mongoIndexTransformationRefreshingMessage,
+  renderMongoIndexTransformationRefreshMessage
+} from "../../SettingsRenderUtils";
+import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
+import {
+  MongoIndexTypes,
+  AddMongoIndexProps,
+  MongoIndexIdField,
+  MongoNotificationType,
+  getMongoIndexType,
+  getMongoIndexTypeText
+} from "../../SettingsUtils";
+import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
+import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
+import { handleError } from "../../../../../Common/ErrorHandlingUtils";
+import { AuthType } from "../../../../../AuthType";
+
+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 MongoIndexingPolicyComponentState {
+  isRefreshingIndexTransformationProgress: boolean;
+}
+
+interface MongoIndexDisplayProps {
+  definition: JSX.Element;
+  type: JSX.Element;
+  actionButton: JSX.Element;
+}
+
+export class MongoIndexingPolicyComponent extends React.Component<
+  MongoIndexingPolicyComponentProps,
+  MongoIndexingPolicyComponentState
+> {
+  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
+    }
+  ];
+
+  constructor(props: MongoIndexingPolicyComponentProps) {
+    super(props);
+    this.state = {
+      isRefreshingIndexTransformationProgress: false
+    };
+  }
+
+  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 = (): string => {
+    return this.props.indexesToAdd.find(
+      addMongoIndexProps => addMongoIndexProps.notification?.type === MongoNotificationType.Warning
+    )?.notification.message;
+  };
+
+  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={this.isIndexingTransforming()}
+        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={this.isIndexingTransforming()}
+          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 refreshIndexTransformationProgress = async () => {
+    this.setState({ isRefreshingIndexTransformationProgress: true });
+    try {
+      await this.props.refreshIndexTransformationProgress();
+    } catch (error) {
+      handleError(error, "Refreshing index transformation progress failed.", "RefreshIndexTransformationProgress");
+    } finally {
+      this.setState({ isRefreshingIndexTransformationProgress: false });
+    }
+  };
+
+  public isIndexingTransforming = (): boolean =>
+    // index transformation progress can be 0
+    this.props.indexTransformationProgress !== undefined && this.props.indexTransformationProgress !== 100;
+
+  private onClickRefreshIndexingTransformationLink = async () => await this.refreshIndexTransformationProgress();
+
+  private renderIndexTransformationWarning = (): JSX.Element => {
+    if (this.state.isRefreshingIndexTransformationProgress) {
+      return mongoIndexTransformationRefreshingMessage;
+    } else if (this.isIndexingTransforming()) {
+      return renderMongoIndexTransformationRefreshMessage(
+        this.props.indexTransformationProgress,
+        this.onClickRefreshIndexingTransformationLink
+      );
+    }
+    return undefined;
+  };
+
+  private renderWarningMessage = (): JSX.Element => {
+    let warningMessage: string;
+    if (this.getMongoWarningNotificationMessage()) {
+      warningMessage = this.getMongoWarningNotificationMessage();
+    } else if (this.isMongoIndexingPolicySaveable()) {
+      warningMessage =
+        "You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.";
+    }
+
+    return (
+      <>
+        {this.renderIndexTransformationWarning() && (
+          <MessageBar messageBarType={MessageBarType.warning}>{this.renderIndexTransformationWarning()}</MessageBar>
+        )}
+
+        {warningMessage && (
+          <MessageBar messageBarType={MessageBarType.warning}>
+            <Text>{warningMessage}</Text>
+          </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

@@ -0,0 +1,83 @@
+// 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

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MongoIndexingPolicyComponent renders 1`] = `
+<Stack
+  tokens={
+    Object {
+      "childrenGap": 20,
+    }
+  }
+>
+  <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

@@ -5,18 +5,13 @@ 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({
-    notificationsClient: undefined,
-    isEmulator: false
-  });
-  nonNationalCloudContainer.getPlatformType = () => PlatformType.Portal;
+  const nonNationalCloudContainer = new Explorer();
   nonNationalCloudContainer.isRunningOnNationalCloud = () => false;
 
   const targetThroughput = 6000;
@@ -25,7 +20,6 @@ describe("ScaleComponent", () => {
     collection: collection,
     container: container,
     isFixedContainer: false,
-    autoPilotTiersList: [],
     onThroughputChange: () => {
       return;
     },
@@ -88,10 +82,7 @@ describe("ScaleComponent", () => {
   });
 
   it("autoScale enabled", () => {
-    const newContainer = new Explorer({
-      notificationsClient: undefined,
-      isEmulator: false
-    });
+    const newContainer = new Explorer();
 
     newContainer.databaseAccount({
       id: undefined,
@@ -125,7 +116,7 @@ describe("ScaleComponent", () => {
 
   it("getThroughputTitle", () => {
     let scaleComponent = new ScaleComponent(baseProps);
-    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - 40,000 RU/s)");
+    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
 
     let newProps = { ...baseProps, container: nonNationalCloudContainer };
     scaleComponent = new ScaleComponent(newProps);
@@ -138,7 +129,7 @@ describe("ScaleComponent", () => {
 
   it("canThroughputExceedMaximumValue", () => {
     let scaleComponent = new ScaleComponent(baseProps);
-    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(false);
+    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
 
     const newProps = { ...baseProps, container: nonNationalCloudContainer };
     scaleComponent = new ScaleComponent(newProps);

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

@@ -5,7 +5,6 @@ import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as SharedConstants from "../../../../Shared/Constants";
 import Explorer from "../../../Explorer";
-import { PlatformType } from "../../../../PlatformType";
 import {
   getTextFieldStyles,
   subComponentStackProps,
@@ -19,12 +18,12 @@ import {
 import { getMaxRUs, getMinRUs, hasDatabaseSharedThroughput } from "../SettingsUtils";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
   collection: ViewModels.Collection;
   container: Explorer;
   isFixedContainer: boolean;
-  autoPilotTiersList: ViewModels.DropdownOption<DataModels.AutopilotTier>[];
   onThroughputChange: (newThroughput: number) => void;
   throughput: number;
   throughputBaseline: number;
@@ -43,7 +42,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   private isEmulator: boolean;
   constructor(props: ScaleComponentProps) {
     super(props);
-    this.isEmulator = this.props.container.isEmulator;
+    this.isEmulator = configContext.platform === Platform.Emulator;
   }
 
   public isAutoScaleEnabled = (): boolean => {
@@ -77,7 +76,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getMaxRUThroughputInputLimit = (): number => {
-    if (this.props.container?.getPlatformType() === PlatformType.Hosted && this.props.collection.partitionKey) {
+    if (configContext.platform === Platform.Hosted && this.props.collection.partitionKey) {
       return SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
     }
 
@@ -86,7 +85,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
 
   public getThroughputTitle = (): string => {
     if (this.props.isAutoPilotSelected) {
-      return AutoPilotUtils.getAutoPilotHeaderText(false);
+      return AutoPilotUtils.getAutoPilotHeaderText();
     }
 
     const minThroughput: string = getMinRUs(this.props.collection, this.props.container).toLocaleString();
@@ -98,12 +97,11 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public canThroughputExceedMaximumValue = (): boolean => {
-    const isPublicAzurePortal: boolean =
-      this.props.container.getPlatformType() === PlatformType.Portal &&
-      !this.props.container.isRunningOnNationalCloud();
-    const hasPartitionKey = !!this.props.collection.partitionKey;
-
-    return isPublicAzurePortal && hasPartitionKey;
+    return (
+      !this.props.isFixedContainer &&
+      configContext.platform === Platform.Portal &&
+      !this.props.container.isRunningOnNationalCloud()
+    );
   };
 
   public getInitialNotificationElement = (): JSX.Element => {

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

@@ -2,7 +2,7 @@ import { shallow } from "enzyme";
 import React from "react";
 import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";
 import { container, collection } from "../TestUtils";
-import { TtlType, GeospatialConfigType, ChangeFeedPolicyState } from "../SettingsUtils";
+import { TtlType, GeospatialConfigType, ChangeFeedPolicyState, TtlOnNoDefault, TtlOn, TtlOff } from "../SettingsUtils";
 import ko from "knockout";
 import Explorer from "../../../Explorer";
 
@@ -105,10 +105,7 @@ describe("SubSettingsComponent", () => {
   });
 
   it("partitionKey not visible", () => {
-    const newContainer = new Explorer({
-      notificationsClient: undefined,
-      isEmulator: false
-    });
+    const newContainer = new Explorer();
 
     newContainer.isPreferredApiCassandra = ko.computed(() => true);
     const props = { ...baseProps, container: newContainer };
@@ -133,4 +130,11 @@ describe("SubSettingsComponent", () => {
     expect(isComponentDirtyResult.isSaveable).toEqual(true);
     expect(isComponentDirtyResult.isDiscardable).toEqual(true);
   });
+
+  it("getTtlValue", async () => {
+    const subSettingsComponentInstance = new SubSettingsComponent(baseProps);
+    expect(subSettingsComponentInstance.getTtlValue(TtlType.OnNoDefault)).toEqual(TtlOnNoDefault);
+    expect(subSettingsComponentInstance.getTtlValue(TtlType.On)).toEqual(TtlOn);
+    expect(subSettingsComponentInstance.getTtlValue(TtlType.Off)).toEqual(TtlOff);
+  });
 });

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

@@ -5,7 +5,11 @@ import {
   TtlType,
   ChangeFeedPolicyState,
   isDirty,
-  IsComponentDirtyResult
+  IsComponentDirtyResult,
+  TtlOn,
+  TtlOff,
+  TtlOnNoDefault,
+  getSanitizedInputValue
 } from "../SettingsUtils";
 import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
@@ -37,40 +41,28 @@ export interface SubSettingsComponentProps {
   timeToLive: TtlType;
   timeToLiveBaseline: TtlType;
 
-  onTtlChange: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
+  onTtlChange: (newTtl: TtlType) => void;
   timeToLiveSeconds: number;
   timeToLiveSecondsBaseline: number;
-  onTimeToLiveSecondsChange: (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ) => void;
+  onTimeToLiveSecondsChange: (newTimeToLiveSeconds: number) => void;
 
   geospatialConfigType: GeospatialConfigType;
   geospatialConfigTypeBaseline: GeospatialConfigType;
-  onGeoSpatialConfigTypeChange: (
-    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ) => void;
+  onGeoSpatialConfigTypeChange: (newGeoSpatialConfigType: GeospatialConfigType) => void;
 
   isAnalyticalStorageEnabled: boolean;
   analyticalStorageTtlSelection: TtlType;
   analyticalStorageTtlSelectionBaseline: TtlType;
-  onAnalyticalStorageTtlSelectionChange: (
-    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option?: IChoiceGroupOption
-  ) => void;
+  onAnalyticalStorageTtlSelectionChange: (newAnalyticalStorageTtlSelection: TtlType) => void;
 
   analyticalStorageTtlSeconds: number;
   analyticalStorageTtlSecondsBaseline: number;
-  onAnalyticalStorageTtlSecondsChange: (
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string
-  ) => void;
+  onAnalyticalStorageTtlSecondsChange: (newAnalyticalStorageTtlSeconds: number) => void;
 
   changeFeedPolicyVisible: boolean;
   changeFeedPolicy: ChangeFeedPolicyState;
   changeFeedPolicyBaseline: ChangeFeedPolicyState;
-  onChangeFeedPolicyChange: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
+  onChangeFeedPolicyChange: (newChangeFeedPolicyState: ChangeFeedPolicyState) => void;
   onSubSettingsSaveableChange: (isSubSettingsSaveable: boolean) => void;
   onSubSettingsDiscardableChange: (isSubSettingsDiscardable: boolean) => void;
 }
@@ -139,6 +131,54 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     { key: TtlType.On, text: "On" }
   ];
 
+  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 onTtlChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption): void =>
+    this.props.onTtlChange(this.getTtlValue(option.key));
+
+  private onTimeToLiveSecondsChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    const newTimeToLiveSeconds = getSanitizedInputValue(newValue, Int32.Max);
+    this.props.onTimeToLiveSecondsChange(newTimeToLiveSeconds);
+  };
+
+  private onGeoSpatialConfigTypeChange = (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.props.onGeoSpatialConfigTypeChange(GeospatialConfigType[option.key as keyof typeof GeospatialConfigType]);
+
+  private onAnalyticalStorageTtlSelectionChange = (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void => this.props.onAnalyticalStorageTtlSelectionChange(this.getTtlValue(option.key));
+
+  private onAnalyticalStorageTtlSecondsChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    const newAnalyticalStorageTtlSeconds = getSanitizedInputValue(newValue, Int32.Max);
+    this.props.onAnalyticalStorageTtlSecondsChange(newAnalyticalStorageTtlSeconds);
+  };
+
+  private onChangeFeedPolicyChange = (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]);
+
   private getTtlComponent = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
       <ChoiceGroup
@@ -146,7 +186,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         label="Time to Live"
         selectedKey={this.props.timeToLive}
         options={this.ttlChoiceGroupOptions}
-        onChange={this.props.onTtlChange}
+        onChange={this.onTtlChange}
         styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
       />
       {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
@@ -163,7 +203,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
           min={1}
           max={Int32.Max}
           value={this.props.timeToLiveSeconds?.toString()}
-          onChange={this.props.onTimeToLiveSecondsChange}
+          onChange={this.onTimeToLiveSecondsChange}
           suffix="second(s)"
         />
       )}
@@ -183,7 +223,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         label="Analytical Storage Time to Live"
         selectedKey={this.props.analyticalStorageTtlSelection}
         options={this.analyticalTtlChoiceGroupOptions}
-        onChange={this.props.onAnalyticalStorageTtlSelectionChange}
+        onChange={this.onAnalyticalStorageTtlSelectionChange}
         styles={getChoiceGroupStyles(
           this.props.analyticalStorageTtlSelection,
           this.props.analyticalStorageTtlSelectionBaseline
@@ -202,7 +242,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
           max={Int32.Max}
           value={this.props.analyticalStorageTtlSeconds?.toString()}
           suffix="second(s)"
-          onChange={this.props.onAnalyticalStorageTtlSecondsChange}
+          onChange={this.onAnalyticalStorageTtlSecondsChange}
         />
       )}
     </Stack>
@@ -219,7 +259,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
       label="Geospatial Configuration"
       selectedKey={this.props.geospatialConfigType}
       options={this.geoSpatialConfigTypeChoiceGroupOptions}
-      onChange={this.props.onGeoSpatialConfigTypeChange}
+      onChange={this.onGeoSpatialConfigTypeChange}
       styles={getChoiceGroupStyles(this.props.geospatialConfigType, this.props.geospatialConfigTypeBaseline)}
     />
   );
@@ -241,7 +281,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
           id="changeFeedPolicy"
           selectedKey={this.props.changeFeedPolicy}
           options={this.changeFeedChoiceGroupOptions}
-          onChange={this.props.onChangeFeedPolicyChange}
+          onChange={this.onChangeFeedPolicyChange}
           styles={getChoiceGroupStyles(this.props.changeFeedPolicy, this.props.changeFeedPolicyBaseline)}
           aria-labelledby={labelId}
         />

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

@@ -3,7 +3,7 @@ import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import {
   getTextFieldStyles,
   getToolTipContainer,
-  spendAckCheckBoxStyle,
+  noLeftPaddingCheckBoxStyle,
   titleAndInputStackProps,
   checkBoxAndInputStackProps,
   getChoiceGroupStyles,
@@ -26,9 +26,10 @@ import {
   MessageBarType
 } from "office-ui-fabric-react";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
-import { IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import * as SharedConstants from "../../../../../Shared/Constants";
 import * as DataModels from "../../../../../Contracts/DataModels";
+import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 
 export interface ThroughputInputAutoPilotV3Props {
   databaseAccount: DataModels.DatabaseAccount;
@@ -71,9 +72,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 > {
   private shouldCheckComponentIsDirty = true;
   private static readonly defaultStep = 100;
-  private static readonly zeroThroughput = 0;
   private step: number;
-  private choiceGroupFixedStyle = getChoiceGroupStyles(undefined, undefined);
+  private throughputInputMaxValue: number;
+  private autoPilotInputMaxValue: number;
   private options: IChoiceGroupOption[] = [
     { key: "true", text: "Autoscale" },
     { key: "false", text: "Manual" }
@@ -140,6 +141,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     };
 
     this.step = this.props.step ?? ThroughputInputAutoPilotV3Component.defaultStep;
+    this.throughputInputMaxValue = this.props.canExceedMaximumValue ? Int32.Max : this.props.maximum;
+    this.autoPilotInputMaxValue = this.props.isFixed ? this.props.maximum : Int32.Max;
   }
 
   public hasProvisioningTypeChanged = (): boolean =>
@@ -171,8 +174,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : offerThroughput,
         serverId,
         regions,
-        multimaster,
-        false
+        multimaster
       );
     } else {
       estimatedSpend = getEstimatedAutoscaleSpendElement(
@@ -200,8 +202,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string
   ): void => {
-    let newThroughput = parseInt(newValue);
-    newThroughput = isNaN(newThroughput) ? ThroughputInputAutoPilotV3Component.zeroThroughput : newThroughput;
+    const newThroughput = getSanitizedInputValue(newValue, this.autoPilotInputMaxValue);
     this.props.onMaxAutoPilotThroughputChange(newThroughput);
   };
 
@@ -209,9 +210,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string
   ): void => {
-    let newThroughput = parseInt(newValue);
-    newThroughput = isNaN(newThroughput) ? ThroughputInputAutoPilotV3Component.zeroThroughput : newThroughput;
-
+    const newThroughput = getSanitizedInputValue(newValue, this.throughputInputMaxValue);
     if (this.overrideWithAutoPilotSettings()) {
       this.props.onMaxAutoPilotThroughputChange(newThroughput);
     } else {
@@ -245,7 +244,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           onChange={this.onChoiceGroupChange}
           required={this.props.showAsMandatory}
           ariaLabelledBy={labelId}
-          styles={this.choiceGroupFixedStyle}
+          styles={getChoiceGroupStyles(this.props.wasAutopilotOriginallySet, this.props.isAutoPilotSelected)}
         />
       </Stack>
     );
@@ -270,8 +269,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         key="auto pilot throughput input"
         styles={getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)}
         disabled={this.overrideWithProvisionedThroughputSettings()}
-        step={this.step}
-        min={AutoPilotUtils.minAutoPilotThroughput}
+        step={AutoPilotUtils.autoPilotIncrementStep}
         value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
         onChange={this.onAutoPilotThroughputChange}
       />
@@ -279,12 +277,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       {this.props.spendAckVisible && (
         <Checkbox
           id="spendAckCheckBox"
-          styles={spendAckCheckBoxStyle}
+          styles={noLeftPaddingCheckBoxStyle}
           label={this.props.spendAckText}
           checked={this.state.spendAckChecked}
           onChange={this.onSpendAckChecked}
         />
       )}
+      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
     </>
   );
 
@@ -298,8 +297,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         styles={getTextFieldStyles(this.props.throughput, this.props.throughputBaseline)}
         disabled={this.overrideWithAutoPilotSettings()}
         step={this.step}
-        min={this.props.minimum}
-        max={this.props.canExceedMaximumValue ? undefined : this.props.maximum}
         value={
           this.overrideWithAutoPilotSettings()
             ? this.props.maxAutoPilotThroughputBaseline?.toString()
@@ -319,21 +316,21 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       {this.props.spendAckVisible && (
         <Checkbox
           id="spendAckCheckBox"
-          styles={spendAckCheckBoxStyle}
+          styles={noLeftPaddingCheckBoxStyle}
           label={this.props.spendAckText}
           checked={this.state.spendAckChecked}
           onChange={this.onSpendAckChecked}
         />
       )}
 
-      {this.props.isFixed && <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>}
+      {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
     </Stack>
   );
 
   public render(): JSX.Element {
     return (
       <Stack {...checkBoxAndInputStackProps}>
-        {!this.props.isFixed && this.renderThroughputModeChoices()}
+        {this.renderThroughputModeChoices()}
 
         {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}
       </Stack>

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

@@ -81,10 +81,10 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             Object {
               "selectors": Object {
                 ".ms-ChoiceField-field.is-checked::after": Object {
-                  "borderColor": "",
+                  "borderColor": undefined,
                 },
                 ".ms-ChoiceField-field.is-checked::before": Object {
-                  "borderColor": "",
+                  "borderColor": undefined,
                 },
                 ".ms-ChoiceField-wrapper label": Object {
                   "fontFamily": undefined,
@@ -113,10 +113,9 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     id="autopilotInput"
     key="auto pilot throughput input"
     label="Max RU/s"
-    min={4000}
     onChange={[Function]}
     required={true}
-    step={100}
+    step={1000}
     styles={
       Object {
         "fieldGroup": Object {
@@ -219,7 +218,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       disabled={false}
       id="throughputInput"
       key="provisioned throughput input"
-      min={10000}
       onChange={[Function]}
       required={true}
       step={100}
@@ -375,7 +373,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       disabled={false}
       id="throughputInput"
       key="provisioned throughput input"
-      min={10000}
       onChange={[Function]}
       required={true}
       step={100}

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

@@ -39,13 +39,13 @@ exports[`ScaleComponent renders with correct intiial notification 1`] = `
     }
   >
     <ThroughputInputAutoPilotV3Component
-      canExceedMaximumValue={false}
+      canExceedMaximumValue={true}
       getThroughputWarningMessage={[Function]}
       isAutoPilotSelected={false}
       isEmulator={false}
       isEnabled={true}
       isFixed={false}
-      label="Throughput (6,000 - 40,000 RU/s)"
+      label="Throughput (6,000 - unlimited RU/s)"
       maxAutoPilotThroughput={4000}
       maxAutoPilotThroughputBaseline={4000}
       maximum={40000}

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

@@ -2,11 +2,20 @@ import { collection, container } from "./TestUtils";
 import {
   getMaxRUs,
   getMinRUs,
+  getMongoIndexType,
+  getMongoNotification,
+  getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
   isDirtyTypes,
+  MongoIndexTypes,
+  MongoNotificationType,
   parseConflictResolutionMode,
-  parseConflictResolutionProcedure
+  parseConflictResolutionProcedure,
+  MongoWildcardPlaceHolder,
+  getMongoIndexTypeText,
+  SingleFieldText,
+  WildcardText
 } from "./SettingsUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -86,4 +95,47 @@ describe("SettingsUtils", () => {
       expect(isDirty(baseline, current)).toEqual(true);
     });
   });
+
+  it("getSanitizedInputValue", () => {
+    const max = 100;
+    expect(getSanitizedInputValue("", max)).toEqual(0);
+    expect(getSanitizedInputValue("999", max)).toEqual(100);
+    expect(getSanitizedInputValue("10", max)).toEqual(10);
+  });
+
+  it("getMongoIndexType", () => {
+    expect(getMongoIndexType(["Single"])).toEqual(MongoIndexTypes.Single);
+    expect(getMongoIndexType(["Wildcard.$**"])).toEqual(MongoIndexTypes.Wildcard);
+    expect(getMongoIndexType(["Key1", "Key2"])).toEqual(undefined);
+  });
+
+  it("getMongoIndexTypeText", () => {
+    expect(getMongoIndexTypeText(MongoIndexTypes.Single)).toEqual(SingleFieldText);
+    expect(getMongoIndexTypeText(MongoIndexTypes.Wildcard)).toEqual(WildcardText);
+  });
+
+  it("getMongoNotification", () => {
+    const singleIndexDescription = "sampleKey";
+    const wildcardIndexDescription = "sampleKey.$**";
+
+    let notification = getMongoNotification(singleIndexDescription, undefined);
+    expect(notification.message).toEqual("Please select a type for each index.");
+    expect(notification.type).toEqual(MongoNotificationType.Warning);
+
+    notification = getMongoNotification(singleIndexDescription, MongoIndexTypes.Single);
+    expect(notification).toEqual(undefined);
+
+    notification = getMongoNotification(wildcardIndexDescription, MongoIndexTypes.Wildcard);
+    expect(notification).toEqual(undefined);
+
+    notification = getMongoNotification("", MongoIndexTypes.Single);
+    expect(notification.message).toEqual("Please enter a field name.");
+    expect(notification.type).toEqual(MongoNotificationType.Error);
+
+    notification = getMongoNotification(singleIndexDescription, MongoIndexTypes.Wildcard);
+    expect(notification.message).toEqual(
+      "Wildcard path is not present in the field name. Use a pattern like " + MongoWildcardPlaceHolder
+    );
+    expect(notification.type).toEqual(MongoNotificationType.Error);
+  });
 });

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -5,11 +5,17 @@ import * as SharedConstants from "../../../Shared/Constants";
 import * as PricingUtils from "../../../Utils/PricingUtils";
 
 import Explorer from "../../Explorer";
+import { MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 
+const zeroValue = 0;
 export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy;
 export const TtlOff = "off";
 export const TtlOn = "on";
 export const TtlOnNoDefault = "on-nodefault";
+export const MongoIndexIdField = "_id";
+export const MongoWildcardPlaceHolder = "properties.$**";
+export const SingleFieldText = "Single Field";
+export const WildcardText = "Wildcard";
 
 export enum ChangeFeedPolicyState {
   Off = "Off",
@@ -27,6 +33,17 @@ export enum GeospatialConfigType {
   Geometry = "Geometry"
 }
 
+export enum MongoIndexTypes {
+  Single = "Single",
+  Wildcard = "Wildcard"
+}
+
+export interface AddMongoIndexProps {
+  mongoIndex: MongoIndex;
+  type: MongoIndexTypes;
+  notification: MongoNotificationMessage;
+}
+
 export enum SettingsV2TabTypes {
   ScaleTab,
   ConflictResolutionTab,
@@ -39,6 +56,16 @@ export interface IsComponentDirtyResult {
   isDiscardable: boolean;
 }
 
+export enum MongoNotificationType {
+  Warning = "Warning",
+  Error = "Error"
+}
+
+export interface MongoNotificationMessage {
+  type: MongoNotificationType;
+  message: string;
+}
+
 export const hasDatabaseSharedThroughput = (collection: ViewModels.Collection): boolean => {
   const database: ViewModels.Database = collection.getDatabase();
   return database?.isDatabaseShared() && !collection.offer();
@@ -53,7 +80,7 @@ export const getMaxRUs = (collection: ViewModels.Collection, container: Explorer
   const numPartitionsFromOffer: number =
     collection?.offer && collection.offer()?.content?.collectionThroughputInfo?.numPhysicalPartitions;
 
-  const numPartitionsFromQuotaInfo: number = collection?.quotaInfo().numPartitions;
+  const numPartitionsFromQuotaInfo: number = collection?.quotaInfo()?.numPartitions;
 
   const numPartitions = numPartitionsFromOffer ?? numPartitionsFromQuotaInfo ?? 1;
 
@@ -78,7 +105,7 @@ export const getMinRUs = (collection: ViewModels.Collection, container: Explorer
     return collectionThroughputInfo.minimumRUForCollection;
   }
 
-  const numPartitions = collectionThroughputInfo?.numPhysicalPartitions ?? collection.quotaInfo().numPartitions;
+  const numPartitions = collectionThroughputInfo?.numPhysicalPartitions ?? collection.quotaInfo()?.numPartitions;
 
   if (!numPartitions || numPartitions === 1) {
     return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
@@ -129,6 +156,15 @@ export const parseConflictResolutionProcedure = (procedureFromBackEnd: string):
   return procedureFromBackEnd;
 };
 
+export const getSanitizedInputValue = (newValueString: string, max: number): number => {
+  const newValue = parseInt(newValueString);
+  if (isNaN(newValue)) {
+    return zeroValue;
+  }
+  // make sure new value does not exceed the maximum throughput
+  return Math.min(newValue, max);
+};
+
 export const isDirty = (current: isDirtyTypes, baseline: isDirtyTypes): boolean => {
   const currentType = typeof current;
   const baselineType = typeof baseline;
@@ -169,3 +205,48 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
       throw new Error(`Unknown tab ${tab}`);
   }
 };
+
+export const getMongoNotification = (description: string, type: MongoIndexTypes): MongoNotificationMessage => {
+  if (description && !type) {
+    return {
+      type: MongoNotificationType.Warning,
+      message: "Please select a type for each index."
+    };
+  }
+
+  if (type && (!description || description.trim().length === 0)) {
+    return {
+      type: MongoNotificationType.Error,
+      message: "Please enter a field name."
+    };
+  } else if (type === MongoIndexTypes.Wildcard && description?.indexOf("$**") === -1) {
+    return {
+      type: MongoNotificationType.Error,
+      message: "Wildcard path is not present in the field name. Use a pattern like " + MongoWildcardPlaceHolder
+    };
+  }
+
+  return undefined;
+};
+
+export const getMongoIndexType = (keys: string[]): MongoIndexTypes => {
+  const length = keys?.length;
+  let type: MongoIndexTypes;
+
+  if (length === 1) {
+    if (keys[0].indexOf("$**") !== -1) {
+      type = MongoIndexTypes.Wildcard;
+    } else {
+      type = MongoIndexTypes.Single;
+    }
+  }
+
+  return type;
+};
+
+export const getMongoIndexTypeText = (index: MongoIndexTypes): string => {
+  if (index === MongoIndexTypes.Single) {
+    return SingleFieldText;
+  }
+  return WildcardText;
+};

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -3,10 +3,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
 import ko from "knockout";
 
-export const container = new Explorer({
-  notificationsClient: undefined,
-  isEmulator: false
-});
+export const container = new Explorer();
 
 export const collection = ({
   container: container,
@@ -25,7 +22,6 @@ export const collection = ({
   offer: ko.observable<DataModels.Offer>({
     content: {
       offerThroughput: 10000,
-      offerIsRUPerMinuteThroughputEnabled: false,
       collectionThroughputInfo: {
         minimumRUForCollection: 6000,
         numPhysicalPartitions: 4

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

@@ -40,7 +40,6 @@ exports[`SettingsComponent renders 1`] = `
                 "_openShareDialog": [Function],
                 "_panes": Array [
                   AddDatabasePane {
-                    "autoPilotTiersList": [Function],
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
                     "canExceedMaximumValue": [Function],
@@ -56,7 +55,6 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
-                    "hasAutoPilotV2FeatureFlag": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -69,7 +67,6 @@ exports[`SettingsComponent renders 1`] = `
                     "onMoreDetailsKeyPress": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
-                    "selectedAutoPilotTier": [Function],
                     "showUpsellMessage": [Function],
                     "throughput": [Function],
                     "throughputRangeText": [Function],
@@ -84,12 +81,8 @@ exports[`SettingsComponent renders 1`] = `
                     "visible": [Function],
                   },
                   AddCollectionPane {
-                    "_databaseOffers": HashMap {
-                      "container": Object {},
-                    },
                     "_isSynapseLinkEnabled": [Function],
                     "autoPilotThroughput": [Function],
-                    "autoPilotTiersList": [Function],
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
                     "canExceedMaximumValue": [Function],
@@ -111,7 +104,6 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
-                    "hasAutoPilotV2FeatureFlag": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -141,12 +133,7 @@ exports[`SettingsComponent renders 1`] = `
                     "partitionKeyVisible": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
-                    "rupm": [Function],
-                    "rupmVisible": [Function],
-                    "selectedAutoPilotTier": [Function],
-                    "selectedSharedAutoPilotTier": [Function],
                     "sharedAutoPilotThroughput": [Function],
-                    "sharedAutoPilotTiersList": [Function],
                     "sharedThroughputRangeText": [Function],
                     "shouldCreateMongoWildcardIndex": [Function],
                     "shouldUseDatabaseThroughput": [Function],
@@ -357,7 +344,6 @@ exports[`SettingsComponent renders 1`] = `
                     "visible": [Function],
                   },
                   CassandraAddCollectionPane {
-                    "autoPilotTiersList": [Function],
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
                     "canExceedMaximumValue": [Function],
@@ -369,7 +355,6 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
-                    "hasAutoPilotV2FeatureFlag": [Function],
                     "id": "cassandraaddcollectionpane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -390,10 +375,7 @@ exports[`SettingsComponent renders 1`] = `
                     "requestUnitsUsageCostShared": [Function],
                     "ruToolTipText": [Function],
                     "selectedAutoPilotThroughput": [Function],
-                    "selectedAutoPilotTier": [Function],
-                    "selectedSharedAutoPilotTier": [Function],
                     "sharedAutoPilotThroughput": [Function],
-                    "sharedAutoPilotTiersList": [Function],
                     "sharedThroughputRangeText": [Function],
                     "sharedThroughputSpendAck": [Function],
                     "sharedThroughputSpendAckText": [Function],
@@ -586,12 +568,8 @@ exports[`SettingsComponent renders 1`] = `
                 "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
                 "addCollectionPane": AddCollectionPane {
-                  "_databaseOffers": HashMap {
-                    "container": Object {},
-                  },
                   "_isSynapseLinkEnabled": [Function],
                   "autoPilotThroughput": [Function],
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -613,7 +591,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -643,12 +620,7 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
                   "shouldUseDatabaseThroughput": [Function],
@@ -678,7 +650,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "addCollectionText": [Function],
                 "addDatabasePane": AddDatabasePane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -694,7 +665,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -707,7 +677,6 @@ exports[`SettingsComponent renders 1`] = `
                   "onMoreDetailsKeyPress": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "selectedAutoPilotTier": [Function],
                   "showUpsellMessage": [Function],
                   "throughput": [Function],
                   "throughputRangeText": [Function],
@@ -784,7 +753,6 @@ exports[`SettingsComponent renders 1`] = `
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
                 "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -796,7 +764,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "cassandraaddcollectionpane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -817,10 +784,7 @@ exports[`SettingsComponent renders 1`] = `
                   "requestUnitsUsageCostShared": [Function],
                   "ruToolTipText": [Function],
                   "selectedAutoPilotThroughput": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "sharedThroughputSpendAck": [Function],
                   "sharedThroughputSpendAckText": [Function],
@@ -975,14 +939,12 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
                 "isCodeOfConductEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
-                "isEmulator": false,
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isGalleryPublishEnabled": [Function],
@@ -990,6 +952,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
+                "isMongoIndexEditorEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
                 "isNotificationConsoleExpanded": [Function],
@@ -1058,7 +1021,6 @@ exports[`SettingsComponent renders 1`] = `
                   "parameters": [Function],
                 },
                 "notificationConsoleData": [Function],
-                "notificationsClient": undefined,
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
@@ -1354,7 +1316,6 @@ exports[`SettingsComponent renders 1`] = `
               "_openShareDialog": [Function],
               "_panes": Array [
                 AddDatabasePane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -1370,7 +1331,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -1383,7 +1343,6 @@ exports[`SettingsComponent renders 1`] = `
                   "onMoreDetailsKeyPress": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "selectedAutoPilotTier": [Function],
                   "showUpsellMessage": [Function],
                   "throughput": [Function],
                   "throughputRangeText": [Function],
@@ -1398,12 +1357,8 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 AddCollectionPane {
-                  "_databaseOffers": HashMap {
-                    "container": Object {},
-                  },
                   "_isSynapseLinkEnabled": [Function],
                   "autoPilotThroughput": [Function],
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -1425,7 +1380,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -1455,12 +1409,7 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
                   "shouldUseDatabaseThroughput": [Function],
@@ -1671,7 +1620,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 CassandraAddCollectionPane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -1683,7 +1631,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "cassandraaddcollectionpane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -1704,10 +1651,7 @@ exports[`SettingsComponent renders 1`] = `
                   "requestUnitsUsageCostShared": [Function],
                   "ruToolTipText": [Function],
                   "selectedAutoPilotThroughput": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "sharedThroughputSpendAck": [Function],
                   "sharedThroughputSpendAckText": [Function],
@@ -1900,12 +1844,8 @@ exports[`SettingsComponent renders 1`] = `
               "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
               "addCollectionPane": AddCollectionPane {
-                "_databaseOffers": HashMap {
-                  "container": Object {},
-                },
                 "_isSynapseLinkEnabled": [Function],
                 "autoPilotThroughput": [Function],
-                "autoPilotTiersList": [Function],
                 "autoPilotUsageCost": [Function],
                 "canConfigureThroughput": [Function],
                 "canExceedMaximumValue": [Function],
@@ -1927,7 +1867,6 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -1957,12 +1896,7 @@ exports[`SettingsComponent renders 1`] = `
                 "partitionKeyVisible": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
-                "rupm": [Function],
-                "rupmVisible": [Function],
-                "selectedAutoPilotTier": [Function],
-                "selectedSharedAutoPilotTier": [Function],
                 "sharedAutoPilotThroughput": [Function],
-                "sharedAutoPilotTiersList": [Function],
                 "sharedThroughputRangeText": [Function],
                 "shouldCreateMongoWildcardIndex": [Function],
                 "shouldUseDatabaseThroughput": [Function],
@@ -1992,7 +1926,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "addCollectionText": [Function],
               "addDatabasePane": AddDatabasePane {
-                "autoPilotTiersList": [Function],
                 "autoPilotUsageCost": [Function],
                 "canConfigureThroughput": [Function],
                 "canExceedMaximumValue": [Function],
@@ -2008,7 +1941,6 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -2021,7 +1953,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onMoreDetailsKeyPress": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
-                "selectedAutoPilotTier": [Function],
                 "showUpsellMessage": [Function],
                 "throughput": [Function],
                 "throughputRangeText": [Function],
@@ -2098,7 +2029,6 @@ exports[`SettingsComponent renders 1`] = `
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
               "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                "autoPilotTiersList": [Function],
                 "autoPilotUsageCost": [Function],
                 "canConfigureThroughput": [Function],
                 "canExceedMaximumValue": [Function],
@@ -2110,7 +2040,6 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "id": "cassandraaddcollectionpane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -2131,10 +2060,7 @@ exports[`SettingsComponent renders 1`] = `
                 "requestUnitsUsageCostShared": [Function],
                 "ruToolTipText": [Function],
                 "selectedAutoPilotThroughput": [Function],
-                "selectedAutoPilotTier": [Function],
-                "selectedSharedAutoPilotTier": [Function],
                 "sharedAutoPilotThroughput": [Function],
-                "sharedAutoPilotTiersList": [Function],
                 "sharedThroughputRangeText": [Function],
                 "sharedThroughputSpendAck": [Function],
                 "sharedThroughputSpendAckText": [Function],
@@ -2289,14 +2215,12 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "hasAutoPilotV2FeatureFlag": [Function],
               "hasStorageAnalyticsAfecFeature": [Function],
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
               "isCodeOfConductEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
-              "isEmulator": false,
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isGalleryPublishEnabled": [Function],
@@ -2304,6 +2228,7 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
+              "isMongoIndexEditorEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
               "isNotificationConsoleExpanded": [Function],
@@ -2372,7 +2297,6 @@ exports[`SettingsComponent renders 1`] = `
                 "parameters": [Function],
               },
               "notificationConsoleData": [Function],
-              "notificationsClient": undefined,
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
@@ -2681,7 +2605,6 @@ exports[`SettingsComponent renders 1`] = `
                 "_openShareDialog": [Function],
                 "_panes": Array [
                   AddDatabasePane {
-                    "autoPilotTiersList": [Function],
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
                     "canExceedMaximumValue": [Function],
@@ -2697,7 +2620,6 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
-                    "hasAutoPilotV2FeatureFlag": [Function],
                     "id": "adddatabasepane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -2710,7 +2632,6 @@ exports[`SettingsComponent renders 1`] = `
                     "onMoreDetailsKeyPress": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
-                    "selectedAutoPilotTier": [Function],
                     "showUpsellMessage": [Function],
                     "throughput": [Function],
                     "throughputRangeText": [Function],
@@ -2725,12 +2646,8 @@ exports[`SettingsComponent renders 1`] = `
                     "visible": [Function],
                   },
                   AddCollectionPane {
-                    "_databaseOffers": HashMap {
-                      "container": Object {},
-                    },
                     "_isSynapseLinkEnabled": [Function],
                     "autoPilotThroughput": [Function],
-                    "autoPilotTiersList": [Function],
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
                     "canExceedMaximumValue": [Function],
@@ -2752,7 +2669,6 @@ exports[`SettingsComponent renders 1`] = `
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
                     "formWarnings": [Function],
-                    "hasAutoPilotV2FeatureFlag": [Function],
                     "id": "addcollectionpane",
                     "isAnalyticalStorageOn": [Function],
                     "isAutoPilotSelected": [Function],
@@ -2782,12 +2698,7 @@ exports[`SettingsComponent renders 1`] = `
                     "partitionKeyVisible": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
-                    "rupm": [Function],
-                    "rupmVisible": [Function],
-                    "selectedAutoPilotTier": [Function],
-                    "selectedSharedAutoPilotTier": [Function],
                     "sharedAutoPilotThroughput": [Function],
-                    "sharedAutoPilotTiersList": [Function],
                     "sharedThroughputRangeText": [Function],
                     "shouldCreateMongoWildcardIndex": [Function],
                     "shouldUseDatabaseThroughput": [Function],
@@ -2998,7 +2909,6 @@ exports[`SettingsComponent renders 1`] = `
                     "visible": [Function],
                   },
                   CassandraAddCollectionPane {
-                    "autoPilotTiersList": [Function],
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
                     "canExceedMaximumValue": [Function],
@@ -3010,7 +2920,6 @@ exports[`SettingsComponent renders 1`] = `
                     "firstFieldHasFocus": [Function],
                     "formErrors": [Function],
                     "formErrorsDetails": [Function],
-                    "hasAutoPilotV2FeatureFlag": [Function],
                     "id": "cassandraaddcollectionpane",
                     "isAutoPilotSelected": [Function],
                     "isExecuting": [Function],
@@ -3031,10 +2940,7 @@ exports[`SettingsComponent renders 1`] = `
                     "requestUnitsUsageCostShared": [Function],
                     "ruToolTipText": [Function],
                     "selectedAutoPilotThroughput": [Function],
-                    "selectedAutoPilotTier": [Function],
-                    "selectedSharedAutoPilotTier": [Function],
                     "sharedAutoPilotThroughput": [Function],
-                    "sharedAutoPilotTiersList": [Function],
                     "sharedThroughputRangeText": [Function],
                     "sharedThroughputSpendAck": [Function],
                     "sharedThroughputSpendAckText": [Function],
@@ -3227,12 +3133,8 @@ exports[`SettingsComponent renders 1`] = `
                 "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
                 "addCollectionPane": AddCollectionPane {
-                  "_databaseOffers": HashMap {
-                    "container": Object {},
-                  },
                   "_isSynapseLinkEnabled": [Function],
                   "autoPilotThroughput": [Function],
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -3254,7 +3156,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -3284,12 +3185,7 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
                   "shouldUseDatabaseThroughput": [Function],
@@ -3319,7 +3215,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "addCollectionText": [Function],
                 "addDatabasePane": AddDatabasePane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -3335,7 +3230,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3348,7 +3242,6 @@ exports[`SettingsComponent renders 1`] = `
                   "onMoreDetailsKeyPress": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "selectedAutoPilotTier": [Function],
                   "showUpsellMessage": [Function],
                   "throughput": [Function],
                   "throughputRangeText": [Function],
@@ -3425,7 +3318,6 @@ exports[`SettingsComponent renders 1`] = `
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
                 "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -3437,7 +3329,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "cassandraaddcollectionpane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -3458,10 +3349,7 @@ exports[`SettingsComponent renders 1`] = `
                   "requestUnitsUsageCostShared": [Function],
                   "ruToolTipText": [Function],
                   "selectedAutoPilotThroughput": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "sharedThroughputSpendAck": [Function],
                   "sharedThroughputSpendAckText": [Function],
@@ -3616,14 +3504,12 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
                 "isCodeOfConductEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
-                "isEmulator": false,
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isGalleryPublishEnabled": [Function],
@@ -3631,6 +3517,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
                 "isLinkInjectionEnabled": [Function],
+                "isMongoIndexEditorEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
                 "isNotificationConsoleExpanded": [Function],
@@ -3699,7 +3586,6 @@ exports[`SettingsComponent renders 1`] = `
                   "parameters": [Function],
                 },
                 "notificationConsoleData": [Function],
-                "notificationsClient": undefined,
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
@@ -3995,7 +3881,6 @@ exports[`SettingsComponent renders 1`] = `
               "_openShareDialog": [Function],
               "_panes": Array [
                 AddDatabasePane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -4011,7 +3896,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "adddatabasepane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -4024,7 +3908,6 @@ exports[`SettingsComponent renders 1`] = `
                   "onMoreDetailsKeyPress": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "selectedAutoPilotTier": [Function],
                   "showUpsellMessage": [Function],
                   "throughput": [Function],
                   "throughputRangeText": [Function],
@@ -4039,12 +3922,8 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 AddCollectionPane {
-                  "_databaseOffers": HashMap {
-                    "container": Object {},
-                  },
                   "_isSynapseLinkEnabled": [Function],
                   "autoPilotThroughput": [Function],
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -4066,7 +3945,6 @@ exports[`SettingsComponent renders 1`] = `
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
                   "formWarnings": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "addcollectionpane",
                   "isAnalyticalStorageOn": [Function],
                   "isAutoPilotSelected": [Function],
@@ -4096,12 +3974,7 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
                   "shouldUseDatabaseThroughput": [Function],
@@ -4312,7 +4185,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 CassandraAddCollectionPane {
-                  "autoPilotTiersList": [Function],
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
                   "canExceedMaximumValue": [Function],
@@ -4324,7 +4196,6 @@ exports[`SettingsComponent renders 1`] = `
                   "firstFieldHasFocus": [Function],
                   "formErrors": [Function],
                   "formErrorsDetails": [Function],
-                  "hasAutoPilotV2FeatureFlag": [Function],
                   "id": "cassandraaddcollectionpane",
                   "isAutoPilotSelected": [Function],
                   "isExecuting": [Function],
@@ -4345,10 +4216,7 @@ exports[`SettingsComponent renders 1`] = `
                   "requestUnitsUsageCostShared": [Function],
                   "ruToolTipText": [Function],
                   "selectedAutoPilotThroughput": [Function],
-                  "selectedAutoPilotTier": [Function],
-                  "selectedSharedAutoPilotTier": [Function],
                   "sharedAutoPilotThroughput": [Function],
-                  "sharedAutoPilotTiersList": [Function],
                   "sharedThroughputRangeText": [Function],
                   "sharedThroughputSpendAck": [Function],
                   "sharedThroughputSpendAckText": [Function],
@@ -4541,12 +4409,8 @@ exports[`SettingsComponent renders 1`] = `
               "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
               "addCollectionPane": AddCollectionPane {
-                "_databaseOffers": HashMap {
-                  "container": Object {},
-                },
                 "_isSynapseLinkEnabled": [Function],
                 "autoPilotThroughput": [Function],
-                "autoPilotTiersList": [Function],
                 "autoPilotUsageCost": [Function],
                 "canConfigureThroughput": [Function],
                 "canExceedMaximumValue": [Function],
@@ -4568,7 +4432,6 @@ exports[`SettingsComponent renders 1`] = `
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
                 "formWarnings": [Function],
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "id": "addcollectionpane",
                 "isAnalyticalStorageOn": [Function],
                 "isAutoPilotSelected": [Function],
@@ -4598,12 +4461,7 @@ exports[`SettingsComponent renders 1`] = `
                 "partitionKeyVisible": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
-                "rupm": [Function],
-                "rupmVisible": [Function],
-                "selectedAutoPilotTier": [Function],
-                "selectedSharedAutoPilotTier": [Function],
                 "sharedAutoPilotThroughput": [Function],
-                "sharedAutoPilotTiersList": [Function],
                 "sharedThroughputRangeText": [Function],
                 "shouldCreateMongoWildcardIndex": [Function],
                 "shouldUseDatabaseThroughput": [Function],
@@ -4633,7 +4491,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "addCollectionText": [Function],
               "addDatabasePane": AddDatabasePane {
-                "autoPilotTiersList": [Function],
                 "autoPilotUsageCost": [Function],
                 "canConfigureThroughput": [Function],
                 "canExceedMaximumValue": [Function],
@@ -4649,7 +4506,6 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "id": "adddatabasepane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -4662,7 +4518,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onMoreDetailsKeyPress": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
-                "selectedAutoPilotTier": [Function],
                 "showUpsellMessage": [Function],
                 "throughput": [Function],
                 "throughputRangeText": [Function],
@@ -4739,7 +4594,6 @@ exports[`SettingsComponent renders 1`] = `
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
               "cassandraAddCollectionPane": CassandraAddCollectionPane {
-                "autoPilotTiersList": [Function],
                 "autoPilotUsageCost": [Function],
                 "canConfigureThroughput": [Function],
                 "canExceedMaximumValue": [Function],
@@ -4751,7 +4605,6 @@ exports[`SettingsComponent renders 1`] = `
                 "firstFieldHasFocus": [Function],
                 "formErrors": [Function],
                 "formErrorsDetails": [Function],
-                "hasAutoPilotV2FeatureFlag": [Function],
                 "id": "cassandraaddcollectionpane",
                 "isAutoPilotSelected": [Function],
                 "isExecuting": [Function],
@@ -4772,10 +4625,7 @@ exports[`SettingsComponent renders 1`] = `
                 "requestUnitsUsageCostShared": [Function],
                 "ruToolTipText": [Function],
                 "selectedAutoPilotThroughput": [Function],
-                "selectedAutoPilotTier": [Function],
-                "selectedSharedAutoPilotTier": [Function],
                 "sharedAutoPilotThroughput": [Function],
-                "sharedAutoPilotTiersList": [Function],
                 "sharedThroughputRangeText": [Function],
                 "sharedThroughputSpendAck": [Function],
                 "sharedThroughputSpendAckText": [Function],
@@ -4930,14 +4780,12 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "hasAutoPilotV2FeatureFlag": [Function],
               "hasStorageAnalyticsAfecFeature": [Function],
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
               "isCodeOfConductEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
-              "isEmulator": false,
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isGalleryPublishEnabled": [Function],
@@ -4945,6 +4793,7 @@ exports[`SettingsComponent renders 1`] = `
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
               "isLinkInjectionEnabled": [Function],
+              "isMongoIndexEditorEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
               "isNotificationConsoleExpanded": [Function],
@@ -5013,7 +4862,6 @@ exports[`SettingsComponent renders 1`] = `
                 "parameters": [Function],
               },
               "notificationConsoleData": [Function],
-              "notificationsClient": undefined,
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
@@ -5325,7 +5173,6 @@ exports[`SettingsComponent renders 1`] = `
           logIndexingPolicySuccessMessage={[Function]}
           onIndexingPolicyContentChange={[Function]}
           onIndexingPolicyDirtyChange={[Function]}
-          onIndexingPolicyElementFocusChange={[Function]}
           resetShouldDiscardIndexingPolicy={[Function]}
           shouldDiscardIndexingPolicy={false}
         />

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

@@ -69,15 +69,15 @@ exports[`SettingsUtils functions render 1`] = `
      
     <b>
       ¥
-      1.29
+      1.02
        hourly 
        / 
       ¥
-      31.06
+      24.48
        daily 
        / 
       ¥
-      944.60
+      744.60
        monthly
        
     </b>
@@ -310,5 +310,59 @@ exports[`SettingsUtils functions render 1`] = `
   >
     Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
   </Text>
+  <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>
+  <StyledMessageBarBase
+    messageBarType={1}
+  >
+    <Text>
+      To use the indexing policy editor, please login to the
+      <StyledLinkBase
+        href="https://portal.azure.com"
+        target="_blank"
+      >
+        azure portal.
+      </StyledLinkBase>
+    </Text>
+  </StyledMessageBarBase>
+  <Stack
+    horizontal={true}
+    tokens={
+      Object {
+        "childrenGap": 5,
+      }
+    }
+  >
+    <Text>
+      Refreshing index transformation progress
+    </Text>
+    <StyledSpinnerBase
+      size={2}
+    />
+  </Stack>
+  <Text>
+    You can make more indexing changes once the current index transformation is complete. 
+    <StyledLinkBase
+      onClick={[Function]}
+    >
+      Refresh to check if it has completed.
+    </StyledLinkBase>
+  </Text>
+  <Text>
+    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>
 </Fragment>
 `;

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.ts

@@ -1,222 +0,0 @@
-import * as ko from "knockout";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import editable from "../../../Common/EditableUtility";
-import { ThroughputInputComponent, ThroughputInputParams, ThroughputInputViewModel } from "./ThroughputInputComponent";
-
-const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
-
-describe.skip("Throughput Input Component", () => {
-  let component: any;
-  let vm: ThroughputInputViewModel;
-  const testId: string = "ThroughputValue";
-  const value: ViewModels.Editable<number> = editable.observable(500);
-  const minimum: ko.Observable<number> = ko.observable(400);
-  const maximum: ko.Observable<number> = ko.observable(2000);
-
-  function buildListOptions(
-    value: ViewModels.Editable<number>,
-    minimum: ko.Observable<number>,
-    maxium: ko.Observable<number>,
-    canExceedMaximumValue?: boolean
-  ): ThroughputInputParams {
-    return {
-      testId,
-      value,
-      minimum,
-      maximum,
-      canExceedMaximumValue: ko.computed<boolean>(() => Boolean(canExceedMaximumValue)),
-      costsVisible: ko.observable(false),
-      isFixed: false,
-      label: ko.observable("Label"),
-      requestUnitsUsageCost: ko.observable("requestUnitsUsageCost"),
-      showAsMandatory: false,
-      autoPilotTiersList: null,
-      autoPilotUsageCost: null,
-      isAutoPilotSelected: null,
-      selectedAutoPilotTier: null,
-      throughputAutoPilotRadioId: null,
-      throughputProvisionedRadioId: null,
-      throughputModeRadioName: null
-    };
-  }
-
-  function simulateKeyPressSpace(target: HTMLElement): Promise<boolean> {
-    const event = new KeyboardEvent("keydown", {
-      key: "space"
-    });
-
-    const result = target.dispatchEvent(event);
-
-    return new Promise(resolve => {
-      setTimeout(() => {
-        resolve(result);
-      }, 1000);
-    });
-  }
-
-  beforeEach(() => {
-    component = ThroughputInputComponent;
-    document.body.innerHTML = component.template as any;
-  });
-
-  afterEach(async () => {
-    await ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display value text", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      expect(($("input") as HTMLInputElement).value).toContain(value().toString());
-    });
-  });
-
-  describe("Behavior", () => {
-    it("should decrease value", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      value(450);
-      $(".testhook-decreaseThroughput").click();
-      expect(value()).toBe(400);
-      $(".testhook-decreaseThroughput").click();
-      expect(value()).toBe(400);
-    });
-
-    it("should increase value", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      value(1950);
-      $(".test-increaseThroughput").click();
-      expect(value()).toBe(2000);
-      $(".test-increaseThroughput").click();
-      expect(value()).toBe(2000);
-    });
-
-    it("should respect lower bound limits", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      value(minimum());
-      $(".testhook-decreaseThroughput").click();
-      expect(value()).toBe(minimum());
-    });
-
-    it("should respect upper bound limits", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      value(maximum());
-      $(".test-increaseThroughput").click();
-      expect(value()).toBe(maximum());
-    });
-
-    it("should allow throughput to exceed upper bound limit when canExceedMaximumValue is set", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      value(maximum());
-      $(".test-increaseThroughput").click();
-      expect(value()).toBe(maximum() + 100);
-    });
-  });
-
-  describe("Accessibility", () => {
-    it.skip("should decrease value with keypress", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      const target = $(".testhook-decreaseThroughput");
-
-      value(500);
-      expect(value()).toBe(500);
-
-      const result = await simulateKeyPressSpace(target);
-      expect(value()).toBe(400);
-    });
-
-    it.skip("should increase value with keypress", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
-      await ko.applyBindings(vm);
-      const target = $(".test-increaseThroughput");
-
-      value(400);
-      expect(value()).toBe(400);
-
-      const result = await simulateKeyPressSpace(target);
-      //    expect(value()).toBe(500);
-    });
-
-    it("should set the decreaseButtonAriaLabel using the default step value", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 100");
-    });
-
-    it("should set the increaseButtonAriaLabel using the default step value", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 100");
-    });
-
-    it("should set the increaseButtonAriaLabel using the params step value", async () => {
-      const options = buildListOptions(value, minimum, maximum, true);
-      options.step = 10;
-      vm = new component.viewModel(options);
-      await ko.applyBindings(vm);
-      expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 10");
-    });
-
-    it("should set the decreaseButtonAriaLabel using the params step value", async () => {
-      const options = buildListOptions(value, minimum, maximum, true);
-      options.step = 10;
-      vm = new component.viewModel(options);
-      await ko.applyBindings(vm);
-      expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 10");
-    });
-
-    it("should set the decreaseButtonAriaLabel using the params step value", async () => {
-      const options = buildListOptions(value, minimum, maximum, true);
-      options.step = 10;
-      vm = new component.viewModel(options);
-      await ko.applyBindings(vm);
-    });
-
-    it("should have aria-label attribute on increase button", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      const ariaLabel = $(".test-increaseThroughput").attributes.getNamedItem("aria-label").value;
-      expect(ariaLabel).toBe("Increase throughput by 100");
-    });
-
-    it("should have aria-label attribute on increase button", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      const ariaLabel = $(".testhook-decreaseThroughput").attributes.getNamedItem("aria-label").value;
-      expect(ariaLabel).toBe("Decrease throughput by 100");
-    });
-
-    it("should have role on increase button", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      const role = $(".test-increaseThroughput").attributes.getNamedItem("role").value;
-      expect(role).toBe("button");
-    });
-
-    it("should have role on decrease button", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("role").value;
-      expect(role).toBe("button");
-    });
-
-    it("should have tabindex 0 on increase button", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
-      expect(role).toBe("0");
-    });
-
-    it("should have tabindex 0 on decrease button", async () => {
-      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
-      await ko.applyBindings(vm);
-      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
-      expect(role).toBe("0");
-    });
-  });
-});

src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.html

@@ -1,145 +0,0 @@
-<div>
-  <div>
-    <p class="pkPadding">
-      <!-- ko if: showAsMandatory -->
-      <span class="mandatoryStar">*</span>
-      <!-- /ko -->
-
-      <span class="addCollectionLabel" data-bind="text: label"></span>
-
-      <!-- ko if: infoBubbleText -->
-      <span class="infoTooltip" role="tooltip" tabindex="0">
-        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
-        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
-      </span>
-      <!-- /ko -->
-    </p>
-  </div>
-
-  <!-- ko if: !isFixed -->
-  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
-    <input
-      class="throughputModeRadio"
-      aria-label="Autopilot mode"
-      data-test="throughput-autoPilot"
-      type="radio"
-      role="radio"
-      tabindex="0"
-      data-bind="
-      checked: isAutoPilotSelected,
-      checkedValue: true,
-      attr: {
-        id: throughputAutoPilotRadioId,
-        name: throughputModeRadioName,
-        'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
-      }"
-    />
-    <span
-      class="throughputModeSpace"
-      data-bind="
-      attr: {
-        for: throughputAutoPilotRadioId
-      }"
-      >Autopilot (preview)
-    </span>
-
-    <input
-      class="throughputModeRadio nonFirstRadio"
-      aria-label="Provisioned Throughput mode"
-      type="radio"
-      role="radio"
-      tabindex="0"
-      data-bind="
-      checked: isAutoPilotSelected,
-      checkedValue: false,
-      attr: {
-        id:  throughputProvisionedRadioId,
-        name: throughputModeRadioName,
-        'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
-      }"
-    />
-    <span
-      class="throughputModeSpace"
-      data-bind="
-      attr: {
-        for: throughputProvisionedRadioId
-      }"
-      >Manual
-    </span>
-  </div>
-  <!-- /ko -->
-
-  <div data-bind="visible: isAutoPilotSelected">
-    <select
-      name="autoPilotTiers"
-      class="collid select-font-size"
-      aria-label="Autopilot Max RU/s"
-      data-bind="
-          options: autoPilotTiersList,
-          optionsText: 'text',
-          optionsValue: 'value',
-          value: selectedAutoPilotTier,
-          optionsCaption: 'Choose Max RU/s'"
-    >
-    </select>
-    <p>
-      <span
-        data-bind="
-        html: autoPilotUsageCost,
-        visible: selectedAutoPilotTier"
-      >
-      </span>
-    </p>
-  </div>
-
-  <div data-bind="visible: !isAutoPilotSelected()">
-    <div data-bind="setTemplateReady: true">
-      <p class="addContainerThroughputInput">
-        <input
-          type="number"
-          required
-          data-bind="
-          textInput: value,
-          css: {
-              dirty: value.editableIsDirty
-          },
-          enable: isEnabled,
-          attr:{
-              'data-test': testId,
-              'class': cssClass,
-              step: step,
-              min: minimum,
-              max: canExceedMaximumValue() ? null : maximum,
-              'aria-label': ariaLabel
-          }"
-        />
-      </p>
-    </div>
-
-    <p data-bind="visible: costsVisible">
-      <span data-bind="html: requestUnitsUsageCost"></span>
-    </p>
-
-    <!-- ko if: spendAckVisible -->
-    <p class="pkPadding">
-      <input
-        type="checkbox"
-        aria-label="acknowledge spend throughput"
-        data-bind="
-        attr: {
-          title: spendAckText,
-          id: spendAckId
-        },
-        checked: spendAckChecked"
-      />
-      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
-    </p>
-    <!-- /ko -->
-
-    <!-- ko if: isFixed -->
-    <p>
-      Choose unlimited storage capacity for more than 10,000 RU/s.
-    </p>
-    <!-- /ko -->
-  </div>
-</div>