Pass masterkey in connection string mode (#572)

* Portal changes for DedicatedGateway

Changes to support creation and deletion of DedicatedGateway resource.

Tested locally with various scenarios.

* Portal changes for DedicatedGateway. CR feedback

* Stylecop changes

* Removing TODO comments

* exposed baselineValues

* added getOnSaveNotification

* disable UI when onSave is taking place

* minro edits

* made polling optional

* added optional polling

* added default

* Added portal notifications

* merged more changes

* minor edits

* added label for description

* Added correlationids and polling of refresh

* Added correlationids and polling of refresh

* minor edit

* added label tooltip

* removed ClassInfo decorator

* Added dynamic decription

* added info and warninf types for description

* more changes to promise retry

* promise retry changes

* compile errors fixed

* New changes

* added operationstatus link

* merged sqlxEdits

* undid sqlx changes

* added completed notification

* passed retryInterval in notif options

* more changes

* added polling on landing on the page

* edits for error display

* added keys blade link

* added link generation

* added link to blade

* Modified info and description

* fixed format errors

* Second cut of the Portal

* OnChange for Number of instances

* added keys for texts

* fixed lint errors

* Added support for undefined dynamic description

* fixed failing test

* disable save/discard buttons

* fixed sqlx errors

* Dedicated Gateway changes to add the keys blade

* Change connectionStringText

* Change connectionStringText

* Text changes

* Added UI improvements

* Code review feedback

* undid package lock changes

* updated package.json

* undid package reverts

Co-authored-by: Balaji Sridharan <fnbalaji@microsoft.com>
Co-authored-by: fnbalaji <75445927+fnbalaji@users.noreply.github.com>

.eslintignore

@@ -24,7 +24,6 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts

README.md

@@ -69,7 +69,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
 
 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
 
-### Architechture
+### Architecture
 
 [![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
 

config.json

@@ -1,4 +0,0 @@
-{
-  "GITHUB_CLIENT_ID": "167ea4b09801db1de03d",
-  "GITHUB_CLIENT_SECRET": "e7bb10a3a8da428815805c6fc483560a035a73c1"
-}

jest-puppeteer.config.js

@@ -7,5 +7,6 @@ module.exports = {
     defaultViewport: null,
     ignoreHTTPSErrors: true,
     args: ["--disable-web-security"],
+    exitOnPageError: false,
   },
 };

jest.config.js

@@ -21,17 +21,13 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: [
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
-  //   "src/Common/Headers*"
-  // ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
+  coveragePathIgnorePatterns: ["/node_modules/"],
-  //   "/node_modules/"
-  // ],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ["json", "text", "cobertura"],
@@ -39,10 +35,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 22,
+      branches: 25,
-      functions: 28,
+      functions: 25,
-      lines: 33,
+      lines: 30,
-      statements: 31,
+      statements: 30,
     },
   },
 

package-lock.json

@@ -1552,17 +1552,6 @@
         }
       }
     },
-    "@fluentui/react-icons": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-0.3.9.tgz",
-      "integrity": "sha512-xGisio0Ds8/TWkbERtg6akoegp68/Vop3n6eD7X+0HqVL0rOl44iW+cmQrnOh1xIWiz7EqLVQU0w70bL2oLCGw==",
-      "requires": {
-        "@microsoft/load-themed-styles": "^1.10.26",
-        "@uifabric/set-version": "^7.0.23",
-        "@uifabric/utilities": "^7.33.2",
-        "tslib": "^1.10.0"
-      }
-    },
     "@fluentui/react-window-provider": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.1.tgz",
@@ -4428,9 +4417,9 @@
       }
     },
     "@types/expect-puppeteer": {
-      "version": "4.4.3",
+      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@types/expect-puppeteer/-/expect-puppeteer-4.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@types/expect-puppeteer/-/expect-puppeteer-4.4.5.tgz",
-      "integrity": "sha512-jWZOO9d8ST2vutV5yxZ1OYxxtYD0lOufIgOUlDjyTNBGo8um67shJs2NQDLVDG06wWrabpPPOUQlI8GSvsdKVQ==",
+      "integrity": "sha512-vxPaumA8Fj6xlm3llKCR9V8L936HX4PyipaNMxDbWQIOWZoCl99jabD/6xuxXnCptOWUdUhXwDuX5cAJgCHsLg==",
       "dev": true,
       "requires": {
         "@types/jest": "*",
@@ -4637,16 +4626,14 @@
       }
     },
     "@types/jest-environment-puppeteer": {
-      "version": "4.3.2",
+      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@types/jest-environment-puppeteer/-/jest-environment-puppeteer-4.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jest-environment-puppeteer/-/jest-environment-puppeteer-4.4.1.tgz",
-      "integrity": "sha512-QVR49cGaQMOrWRN7CXlvtPMuVAxa3Z+W3APxhWoSQLG/lvz1y03ECPvS7Y9eK+hgfndK+39400rO6IifDJV9YA==",
+      "integrity": "sha512-LiZTD6i63le6QMnxi7pJB0SFv/fWtss6VVEEDm/UaeowBgjduf8txyE//j3WEeDPxngTvioUjbzA7Rc6Wc3cBA==",
       "dev": true,
       "requires": {
-        "@jest/environment": "^24",
+        "@jest/types": ">=24 <=26",
-        "@jest/fake-timers": "^24",
-        "@jest/types": "^24",
         "@types/puppeteer": "*",
-        "jest-mock": "^24"
+        "jest-environment-node": ">=24 <=26"
       }
     },
     "@types/json-schema": {
@@ -4738,9 +4725,9 @@
       "dev": true
     },
     "@types/puppeteer": {
-      "version": "3.0.1",
+      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-5.4.3.tgz",
-      "integrity": "sha512-t03eNKCvWJXhQ8wkc5C6GYuSqMEdKLOX0GLMGtks25YZr38wKZlKTwGM/BoAPVtdysX7Bb9tdwrDS1+NrW3RRA==",
+      "integrity": "sha512-3nE8YgR9DIsgttLW+eJf6mnXxq8Ge+27m5SU3knWmrlfl6+KOG0Bf9f7Ua7K+C4BnaTMAh3/UpySqdAYvrsvjg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -8904,6 +8891,12 @@
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
+    "devtools-protocol": {
+      "version": "0.0.854822",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.854822.tgz",
+      "integrity": "sha512-xd4D8kHQtB0KtWW0c9xBZD5LVtm9chkMOfs/3Yn01RhT/sFIsVtzTtypfKoFfWBaL+7xCYLxjOLkhwPXaX/Kcg==",
+      "dev": true
+    },
     "diagnostic-channel": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/diagnostic-channel/-/diagnostic-channel-0.3.1.tgz",
@@ -15983,12 +15976,6 @@
         "through2": "^2.0.0"
       }
     },
-    "mitt": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==",
-      "dev": true
-    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -16611,45 +16598,148 @@
       "dev": true
     },
     "office-ui-fabric-react": {
-      "version": "7.134.1",
+      "version": "7.164.2",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.134.1.tgz",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.164.2.tgz",
-      "integrity": "sha512-yQhPdt5kQfzI/MQnqQMu9lf2mgdHSogEfVIYgfOjbvfMJoUzqA/hH3X2Z7RbncdJ/ca2H+GXVp5GvSgahCOs6g==",
+      "integrity": "sha512-qx8WbSXDJbcfq7MdJujUSAkiaYTQIQBkz4pb03r9LncwlrcnVx+thgKn8yztb2g0FlP0z5ONHv1wufrOHYxnHQ==",
       "requires": {
-        "@fluentui/date-time-utilities": "^7.7.0",
+        "@fluentui/date-time-utilities": "^7.9.1",
-        "@fluentui/react-focus": "^7.15.0",
+        "@fluentui/react-focus": "^7.17.6",
-        "@fluentui/react-icons": "^0.3.0",
+        "@fluentui/react-window-provider": "^1.0.2",
-        "@fluentui/react-window-provider": "^0.3.0",
         "@microsoft/load-themed-styles": "^1.10.26",
-        "@uifabric/foundation": "^7.9.0",
+        "@uifabric/foundation": "^7.9.26",
-        "@uifabric/icons": "^7.5.0",
+        "@uifabric/icons": "^7.5.23",
-        "@uifabric/merge-styles": "^7.18.0",
+        "@uifabric/merge-styles": "^7.19.2",
-        "@uifabric/react-hooks": "^7.11.0",
+        "@uifabric/react-hooks": "^7.13.12",
-        "@uifabric/set-version": "^7.0.22",
+        "@uifabric/set-version": "^7.0.24",
-        "@uifabric/styling": "^7.16.0",
+        "@uifabric/styling": "^7.19.0",
-        "@uifabric/utilities": "^7.31.0",
+        "@uifabric/utilities": "^7.33.5",
         "prop-types": "^15.7.2",
         "tslib": "^1.10.0"
       },
       "dependencies": {
-        "@fluentui/react-window-provider": {
+        "@fluentui/date-time-utilities": {
-          "version": "0.3.3",
+          "version": "7.9.1",
-          "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-0.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-7.9.1.tgz",
-          "integrity": "sha512-MVPf2hqOQ17LAZsuvGcr3oOHksAskUm+fCYdXFhbVoAgsCDVTIuH6i8XgHFd6YjBtzjZmI4+k/3NTQfDqBX8EQ==",
+          "integrity": "sha512-o8iU1VIY+QsqVRWARKiky29fh4KR1xaKSgMClXIi65qkt8EDDhjmlzL0KVDEoDA2GWukwb/1PpaVCWDg4v3cUQ==",
+          "requires": {
+            "@uifabric/set-version": "^7.0.24",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@fluentui/dom-utilities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-1.1.2.tgz",
+          "integrity": "sha512-XqPS7l3YoMwxdNlaYF6S2Mp0K3FmVIOIy2K3YkMc+eRxu9wFK6emr2Q/3rBhtG5u/On37NExRT7/5CTLnoi9gw==",
+          "requires": {
+            "@uifabric/set-version": "^7.0.24",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@fluentui/react-focus": {
+          "version": "7.17.6",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.17.6.tgz",
+          "integrity": "sha512-JkLWNDe567lhvbnIhbYv9nUWYDIVN06utc3krs0UZBI+A0YZtQmftBtY0ghXo4PSjgozZocdu9sYkkgZOgyRLg==",
+          "requires": {
+            "@fluentui/keyboard-key": "^0.2.12",
+            "@uifabric/merge-styles": "^7.19.2",
+            "@uifabric/set-version": "^7.0.24",
+            "@uifabric/styling": "^7.19.0",
+            "@uifabric/utilities": "^7.33.5",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@fluentui/react-window-provider": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.2.tgz",
+          "integrity": "sha512-fGSgL3Vp/+6t1Ysfz21FWZmqsU+iFVxOigvHnm5uKVyyRPwtaabv/F6kQ2y5isLMI2YmJaUd2i0cDJKu8ggrvw==",
+          "requires": {
+            "@uifabric/set-version": "^7.0.24",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@fluentui/theme": {
+          "version": "1.7.4",
+          "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-1.7.4.tgz",
+          "integrity": "sha512-o4eo7lstLxxXl1g2RR9yz18Yt8yjQO/LbQuZjsiAfv/4Bf0CRnb+3j1F7gxIdBWAchKj9gzaMpIFijfI98pvYQ==",
+          "requires": {
+            "@uifabric/merge-styles": "^7.19.2",
+            "@uifabric/set-version": "^7.0.24",
+            "@uifabric/utilities": "^7.33.5",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/foundation": {
+          "version": "7.9.26",
+          "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.26.tgz",
+          "integrity": "sha512-1FLTb+jlH/Tuel2L9wT/zLl5ZW6W4Lbjrs5VUVjv81vWxzznvPnTf8+Ew0qkzaH7xDuMNMl7okswhV0IfJyheg==",
+          "requires": {
+            "@uifabric/merge-styles": "^7.19.2",
+            "@uifabric/set-version": "^7.0.24",
+            "@uifabric/styling": "^7.19.0",
+            "@uifabric/utilities": "^7.33.5",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/icons": {
+          "version": "7.5.23",
+          "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-7.5.23.tgz",
+          "integrity": "sha512-eIvUbH0EWgFgdfgFfINgqS2ZVZTyJ/9n5nR4bmcyAe75wsKxm4ser4WIT9IvaBF6+HFVfjUF/v6+VMD7y2LBng==",
+          "requires": {
+            "@uifabric/set-version": "^7.0.24",
+            "@uifabric/styling": "^7.19.0",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/merge-styles": {
+          "version": "7.19.2",
+          "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.2.tgz",
+          "integrity": "sha512-kTlhwglDqwVgIaJq+0yXgzi65plGhmFcPrfme/rXUGMJZoU+qlGT5jXj5d3kuI59p6VB8jWEg9DAxHozhYeu0g==",
+          "requires": {
+            "@uifabric/set-version": "^7.0.24",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/react-hooks": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.14.0.tgz",
+          "integrity": "sha512-Ndu/DEKHF4gFXEZa2AGgSkdWaj+njVrsSyXbkWRh2UZReFWnH1LMko9p/ZCwk1i9kAd5CUmyIfURUzIEya9YCg==",
+          "requires": {
+            "@fluentui/react-window-provider": "^1.0.2",
+            "@uifabric/set-version": "^7.0.24",
+            "@uifabric/utilities": "^7.33.5",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/set-version": {
+          "version": "7.0.24",
+          "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.24.tgz",
+          "integrity": "sha512-t0Pt21dRqdC707/ConVJC0WvcQ/KF7tKLU8AZY7YdjgJpMHi1c0C427DB4jfUY19I92f60LOQyhJ4efH+KpFEg==",
           "requires": {
-            "@uifabric/set-version": "^7.0.23",
             "tslib": "^1.10.0"
           }
         },
         "@uifabric/styling": {
-          "version": "7.16.19",
+          "version": "7.19.0",
-          "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.16.19.tgz",
+          "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.19.0.tgz",
-          "integrity": "sha512-T5fjUCx0LbzUC8Myw15YCaBjdGbSrihWSiPHtLVW77k59yWAW947XnH73QngE8xU7kyKPH3AhQrUEBMB2NjHag==",
+          "integrity": "sha512-fXComDtGV7dHF4rP4cLHwI6fC+1f/nvPavpMBz4IQdySwixta9TVMKbzt0OA6i0mJztqZCVAd27F/sl9R/JmcQ==",
           "requires": {
-            "@fluentui/theme": "^1.7.1",
+            "@fluentui/theme": "^1.7.4",
             "@microsoft/load-themed-styles": "^1.10.26",
-            "@uifabric/merge-styles": "^7.19.1",
+            "@uifabric/merge-styles": "^7.19.2",
-            "@uifabric/set-version": "^7.0.23",
+            "@uifabric/set-version": "^7.0.24",
-            "@uifabric/utilities": "^7.33.2",
+            "@uifabric/utilities": "^7.33.5",
+            "tslib": "^1.10.0"
+          }
+        },
+        "@uifabric/utilities": {
+          "version": "7.33.5",
+          "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz",
+          "integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==",
+          "requires": {
+            "@fluentui/dom-utilities": "^1.1.2",
+            "@uifabric/merge-styles": "^7.19.2",
+            "@uifabric/set-version": "^7.0.24",
+            "prop-types": "^15.7.2",
             "tslib": "^1.10.0"
           }
         }
@@ -17690,38 +17780,66 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "puppeteer": {
-      "version": "4.0.0",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-8.0.0.tgz",
-      "integrity": "sha512-yNshT0M5DWfZ8DQoduZuGYpcwqXxKOZdgt5G0IF5VEKbydaDbWP/f5pQRfzQ4e+a4w0Rge3uzcogHeUPQM8nCA==",
+      "integrity": "sha512-D0RzSWlepeWkxPPdK3xhTcefj8rjah1791GE82Pdjsri49sy11ci/JQsAO8K2NRukqvwEtcI+ImP5F4ZiMvtIQ==",
       "dev": true,
       "requires": {
         "debug": "^4.1.0",
+        "devtools-protocol": "0.0.854822",
         "extract-zip": "^2.0.0",
-        "https-proxy-agent": "^4.0.0",
+        "https-proxy-agent": "^5.0.0",
-        "mime": "^2.0.3",
+        "node-fetch": "^2.6.1",
-        "mitt": "^2.0.1",
+        "pkg-dir": "^4.2.0",
         "progress": "^2.0.1",
-        "proxy-from-env": "^1.0.0",
+        "proxy-from-env": "^1.1.0",
         "rimraf": "^3.0.2",
         "tar-fs": "^2.0.0",
         "unbzip2-stream": "^1.3.3",
         "ws": "^7.2.3"
       },
       "dependencies": {
-        "agent-base": {
+        "find-up": {
-          "version": "5.1.1",
+          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true
-        },
-        "https-proxy-agent": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
-          "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
           "dev": true,
           "requires": {
-            "agent-base": "5",
+            "locate-path": "^5.0.0",
-            "debug": "4"
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
+        "pkg-dir": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+          "dev": true,
+          "requires": {
+            "find-up": "^4.0.0"
           }
         },
         "rimraf": {

package.json

@@ -80,7 +80,7 @@
     "ms": "2.1.3",
     "msal": "1.4.4",
     "object.entries": "1.1.0",
-    "office-ui-fabric-react": "7.134.1",
+    "office-ui-fabric-react": "7.164.2",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "promise-polyfill": "8.1.0",
@@ -121,15 +121,15 @@
     "@types/d3": "5.9.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.3",
+    "@types/expect-puppeteer": "4.4.5",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.3.2",
+    "@types/jest-environment-puppeteer": "4.4.1",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "3.0.1",
+    "@types/puppeteer": "5.4.3",
     "@types/q": "1.5.1",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
@@ -176,7 +176,7 @@
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "prettier": "2.2.1",
-    "puppeteer": "4.0.0",
+    "puppeteer": "8.0.0",
     "raw-loader": "0.5.1",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",

src/Common/Constants.ts

@@ -120,6 +120,7 @@ export class Features {
   public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
   public static readonly selfServeType = "selfservetype";
   public static readonly enableKOPanel = "enablekopanel";
+  public static readonly enableReactPane = "enablereactpane";
 }
 
 // flight names returned from the portal are always lowercase

src/Common/MessageHandler.ts

@@ -1,8 +1,8 @@
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import * as Constants from "./Constants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
+import * as Constants from "./Constants";
 
 export interface CachedDataPromise<T> {
   deferred: Q.Deferred<T>;
@@ -61,6 +61,21 @@ export function sendMessage(data: any): void {
   }
 }
 
+export function sendReadyMessage(): void {
+  if (canSendMessage()) {
+    // We try to find data explorer window first, then fallback to current window
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    portalChildWindow.parent.postMessage(
+      {
+        signature: "pcIframe",
+        kind: "ready",
+        data: "ready",
+      },
+      portalChildWindow.document.referrer
+    );
+  }
+}
+
 export function canSendMessage(): boolean {
   return window.parent !== window;
 }

src/Common/UrlUtility.ts

@@ -1,5 +1,12 @@
-export default class UrlUtility {
+interface Result {
-  public static parseDocumentsPath(resourcePath: string): any {
+  type?: string;
+  objectBody?: {
+    id: string;
+    self: string;
+  };
+}
+
+export function parseDocumentsPath(resourcePath: string): Result {
   if (typeof resourcePath !== "string") {
     return {};
   }
@@ -16,9 +23,9 @@ export default class UrlUtility {
     resourcePath = "/" + resourcePath;
   }
 
-    var id: string;
+  let id: string;
-    var type: string;
+  let type: string;
-    var pathParts = resourcePath.split("/");
+  const pathParts = resourcePath.split("/");
 
   if (pathParts.length % 2 === 0) {
     id = pathParts[pathParts.length - 2];
@@ -28,7 +35,7 @@ export default class UrlUtility {
     type = pathParts[pathParts.length - 2];
   }
 
-    var result = {
+  const result = {
     type: type,
     objectBody: {
       id: id,
@@ -39,17 +46,16 @@ export default class UrlUtility {
   return result;
 }
 
-  public static createUri(baseUri: string, relativeUri: string): string {
+export function createUri(baseUri: string, relativeUri: string): string {
   if (!baseUri) {
     throw new Error("baseUri is null or empty");
   }
 
-    var slashAtEndOfUriRegex = /\/$/,
+  const slashAtEndOfUriRegex = /\/$/,
     slashAtStartOfUriRegEx = /^\//;
 
-    var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+  const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
     normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
 
   return normalizedBaseUri + normalizedRelativeUri;
 }
-}

src/Contracts/ViewModels.ts

@@ -390,7 +390,6 @@ export interface DataExplorerInputsFrame {
   sharedThroughputMaximum?: number;
   sharedThroughputDefault?: number;
   dataExplorerVersion?: string;
-  isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
 }

src/Controls/Heatmap/Heatmap.ts

@@ -1,5 +1,10 @@
-import * as Plotly from "plotly.js-cartesian-dist-min";
 import dayjs from "dayjs";
+import * as Plotly from "plotly.js-cartesian-dist-min";
+import { StyleConstants } from "../../Common/Constants";
+import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import "./Heatmap.less";
 import {
   ChartSettings,
   DataPayload,
@@ -11,11 +16,6 @@ import {
   PartitionTimeStampToData,
   PortalTheme,
 } from "./HeatmapDatatypes";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { StyleConstants } from "../../Common/Constants";
-import "./Heatmap.less";
 
 export class Heatmap {
   public static readonly elementId: string = "heatmap";
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }
 
 window.addEventListener("message", handleMessage, false);
-sendMessage("ready");
+sendReadyMessage();

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

@@ -6,6 +6,7 @@ describe("CollapsibleSectionComponent", () => {
   it("renders", () => {
     const props: CollapsibleSectionProps = {
       title: "Sample title",
+      isExpandedByDefault: true,
     };
 
     const wrapper = shallow(<CollapsibleSectionComponent {...props} />);

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,9 +1,10 @@
 import { Icon, Label, Stack } from "office-ui-fabric-react";
 import * as React from "react";
-import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
+import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
 
 export interface CollapsibleSectionProps {
   title: string;
+  isExpandedByDefault: boolean;
 }
 
 export interface CollapsibleSectionState {
@@ -14,7 +15,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
   constructor(props: CollapsibleSectionProps) {
     super(props);
     this.state = {
-      isExpanded: true,
+      isExpanded: this.props.isExpandedByDefault,
     };
   }
 
@@ -25,8 +26,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
   public render(): JSX.Element {
     return (
       <>
-        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
+        <Stack
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
+          className="collapsibleSection"
+          horizontal
+          verticalAlign="center"
+          tokens={accordionStackTokens}
+          onClick={this.toggleCollapsed}
+        >
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>
         </Stack>
         {this.state.isExpanded && this.props.children}

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

@@ -11,16 +11,10 @@ exports[`CollapsibleSectionComponent renders 1`] = `
         "childrenGap": 10,
       }
     }
+    verticalAlign="center"
   >
-    <StyledIconBase
+    <Icon
       iconName="ChevronDown"
-      styles={
-        Object {
-          "root": Object {
-            "paddingTop": 7,
-          },
-        }
-      }
     />
     <StyledLabelBase>
       Sample title

src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap

@@ -354,7 +354,6 @@ exports[`test render renders with filters 1`] = `
         data-is-scrollable="true"
       >
         <div
-          aria-hidden="true"
           className="stickyAbove-42"
           style={
             Object {
@@ -375,7 +374,6 @@ exports[`test render renders with filters 1`] = `
           >
             <div>
               <div
-                aria-hidden={true}
                 style={
                   Object {
                     "pointerEvents": "none",
@@ -395,7 +393,6 @@ exports[`test render renders with filters 1`] = `
                 style={Object {}}
               >
                 <div
-                  aria-hidden={false}
                   style={
                     Object {
                       "backgroundColor": "",
@@ -411,6 +408,7 @@ exports[`test render renders with filters 1`] = `
                   >
                     <TextFieldBase
                       ariaLabel="Directory filter text box"
+                      canRevealPassword={false}
                       className="directoryListFilterTextBox"
                       deferredValidationTime={200}
                       onChange={[Function]}
@@ -1123,7 +1121,7 @@ exports[`test render renders with filters 1`] = `
                               "iconDisabled": Object {
                                 "color": "#a19f9d",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1149,7 +1147,7 @@ exports[`test render renders with filters 1`] = `
                               "menuIconDisabled": Object {
                                 "color": "#a19f9d",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1168,7 +1166,7 @@ exports[`test render renders with filters 1`] = `
                                       "position": "absolute",
                                       "right": 2,
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "bottom": -2,
                                           "left": -2,
                                           "outlineColor": "ButtonText",
@@ -1247,7 +1245,7 @@ exports[`test render renders with filters 1`] = `
                                       "position": "absolute",
                                       "right": 2,
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "bottom": -2,
                                           "left": -2,
                                           "outlineColor": "ButtonText",
@@ -1279,8 +1277,10 @@ exports[`test render renders with filters 1`] = `
                                   },
                                 },
                                 Object {
+                                  "backgroundColor": "#f3f2f1",
+                                  "color": "#a19f9d",
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "backgroundColor": "Window",
                                       "borderColor": "GrayText",
                                       "color": "GrayText",
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
                                   "backgroundColor": "#f3f2f1",
                                   "color": "#201f1e",
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "borderColor": "Highlight",
                                       "color": "Highlight",
                                     },
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
                               "splitButtonContainer": Array [
                                 Object {
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "border": "none",
                                     },
                                   },
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
                                       "position": "absolute",
                                       "right": 3,
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "border": "none",
                                           "bottom": -2,
                                           "left": -2,
@@ -1373,19 +1373,20 @@ exports[`test render renders with filters 1`] = `
                                       "borderBottomRightRadius": "0",
                                       "borderTopRightRadius": "0",
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "MsHighContrastAdjust": "none",
                                           "backgroundColor": "Window",
                                           "border": "1px solid WindowText",
                                           "borderRightWidth": "0",
                                           "color": "WindowText",
+                                          "forcedColorAdjust": "none",
                                         },
                                       },
                                     },
                                     ".ms-Button--primary + .ms-Button": Object {
                                       "border": "none",
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "border": "1px solid WindowText",
                                           "borderLeftWidth": "0",
                                         },
@@ -1398,10 +1399,11 @@ exports[`test render renders with filters 1`] = `
                                 "selectors": Object {
                                   ".ms-Button--primary": Object {
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                         "MsHighContrastAdjust": "none",
                                         "backgroundColor": "WindowText",
                                         "color": "Window",
+                                        "forcedColorAdjust": "none",
                                       },
                                     },
                                   },
@@ -1411,10 +1413,11 @@ exports[`test render renders with filters 1`] = `
                                 "selectors": Object {
                                   ".ms-Button--primary": Object {
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                         "MsHighContrastAdjust": "none",
                                         "backgroundColor": "WindowText",
                                         "color": "Window",
+                                        "forcedColorAdjust": "none",
                                       },
                                     },
                                   },
@@ -1424,12 +1427,11 @@ exports[`test render renders with filters 1`] = `
                                 "border": "none",
                                 "outline": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
-                                  },
-                                  "@media screen and (forced-colors: active)": Object {
                                     "forcedColorAdjust": "none",
                                   },
                                 },
@@ -1441,7 +1443,7 @@ exports[`test render renders with filters 1`] = `
                                 "selectors": Object {
                                   ".ms-Button--primary": Object {
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                         "backgroundColor": "Highlight",
                                         "color": "Window",
                                       },
@@ -1450,7 +1452,7 @@ exports[`test render renders with filters 1`] = `
                                   ".ms-Button.is-disabled": Object {
                                     "color": "#a19f9d",
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                         "backgroundColor": "Window",
                                         "borderColor": "GrayText",
                                         "color": "GrayText",
@@ -1466,7 +1468,7 @@ exports[`test render renders with filters 1`] = `
                                   "position": "absolute",
                                   "right": 31,
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "backgroundColor": "WindowText",
                                     },
                                   },
@@ -1478,7 +1480,7 @@ exports[`test render renders with filters 1`] = `
                                   "position": "absolute",
                                   "right": 31,
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "backgroundColor": "WindowText",
                                     },
                                   },
@@ -1495,7 +1497,7 @@ exports[`test render renders with filters 1`] = `
                                   "position": "absolute",
                                   "right": 31,
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "backgroundColor": "GrayText",
                                     },
                                   },
@@ -1518,7 +1520,7 @@ exports[`test render renders with filters 1`] = `
                                     ":hover": Object {
                                       "backgroundColor": "#edebe9",
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "color": "Highlight",
                                         },
                                       },
@@ -1526,6 +1528,11 @@ exports[`test render renders with filters 1`] = `
                                   },
                                 },
                                 Object {
+                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    ".ms-Button-menuIcon": Object {
+                                      "color": "WindowText",
+                                    },
+                                  },
                                   "border": "1px solid #8a8886",
                                   "borderBottomRightRadius": "2px",
                                   "borderLeft": "none",
@@ -1571,7 +1578,7 @@ exports[`test render renders with filters 1`] = `
                                   "selectors": Object {
                                     ".ms-Button--primary": Object {
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "backgroundColor": "Window",
                                           "borderColor": "GrayText",
                                           "color": "GrayText",
@@ -1580,7 +1587,7 @@ exports[`test render renders with filters 1`] = `
                                     },
                                     ".ms-Button-menuIcon": Object {
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                           "color": "GrayText",
                                         },
                                       },
@@ -1588,7 +1595,7 @@ exports[`test render renders with filters 1`] = `
                                     ":hover": Object {
                                       "cursor": "default",
                                     },
-                                    "@media screen and (-ms-high-contrast: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                       "backgroundColor": "Window",
                                       "border": "1px solid GrayText",
                                       "color": "GrayText",
@@ -1893,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
                         >
                           <button
                             aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
                             data-is-focusable={false}
                             disabled={true}
                             onClick={[Function]}
@@ -1905,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
                             type="button"
                           >
                             <span
-                              className="ms-Button-flexContainer flexContainer-55"
+                              className="ms-Button-flexContainer flexContainer-58"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1936,7 +1943,6 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          aria-hidden="true"
           className="stickyBelow-43"
           style={
             Object {

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -7,7 +7,7 @@ import { ChildrenMargin } from "./GitHubStyleConstants";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import UrlUtility from "../../../Common/UrlUtility";
+import * as UrlUtility from "../../../Common/UrlUtility";
 import Explorer from "../../Explorer";
 
 export interface AddRepoComponentProps {

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

@@ -47,6 +47,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
   private static readonly cardDeleteSpinnerHeight = 360;
+  private static readonly smallTextLineHeight = 18;
 
   constructor(props: GalleryCardComponentProps) {
     super(props);
@@ -103,7 +104,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
             </Card.Item>
 
             <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap>
+              <Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
                 {this.props.data.tags ? (
                   this.props.data.tags.map((tag, index, array) => (
                     <span key={tag}>
@@ -129,7 +130,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
                 {cardTitle}
               </Text>
 
-              <Text variant="small" styles={{ root: { height: 36 } }}>
+              <Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
                 {this.renderTruncatedDescription()}
               </Text>
 

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

@@ -50,6 +50,13 @@ exports[`GalleryCardComponent renders 1`] = `
   >
     <Text
       nowrap={true}
+      styles={
+        Object {
+          "root": Object {
+            "height": 18,
+          },
+        }
+      }
       variant="small"
     >
       <span
@@ -100,7 +107,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <StyledIconBase
+        <Icon
           iconName="RedEye"
           styles={
             Object {
@@ -124,7 +131,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <StyledIconBase
+        <Icon
           iconName="Download"
           styles={
             Object {
@@ -148,7 +155,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <StyledIconBase
+        <Icon
           iconName="Heart"
           styles={
             Object {
@@ -173,7 +180,7 @@ exports[`GalleryCardComponent renders 1`] = `
       }
     }
   >
-    <Styled
+    <Separator
       styles={
         Object {
           "root": Object {

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

@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
   <div
     className="infoPanelMain"
   >
-    <StyledIconBase
+    <Icon
       className="infoIconMain"
       iconName="Help"
       styles={

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

@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
       Invalid Date
     </Text>
     <Text>
-      <StyledIconBase
+      <Icon
         iconName="RedEye"
       />
        
       0
     </Text>
     <Text>
-      <StyledIconBase
+      <Icon
         iconName="Download"
       />
       0
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
       Invalid Date
     </Text>
     <Text>
-      <StyledIconBase
+      <Icon
         iconName="RedEye"
       />
        
       0
     </Text>
     <Text>
-      <StyledIconBase
+      <Icon
         iconName="Download"
       />
       0

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,49 +1,51 @@
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import * as Constants from "../../../Common/Constants";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
-import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { AuthType } from "../../../AuthType";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as Constants from "../../../Common/Constants";
-import Explorer from "../../Explorer";
+import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
 import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
-import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-import {
-  MongoIndexingPolicyComponent,
-  MongoIndexingPolicyComponentProps,
-} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
-import {
-  hasDatabaseSharedThroughput,
-  GeospatialConfigType,
-  TtlType,
-  ChangeFeedPolicyState,
-  SettingsV2TabTypes,
-  getTabTitle,
-  isDirty,
-  AddMongoIndexProps,
-  MongoIndexTypes,
-  parseConflictResolutionMode,
-  parseConflictResolutionProcedure,
-  getMongoNotification,
-} from "./SettingsUtils";
 import {
   ConflictResolutionComponent,
   ConflictResolutionComponentProps,
 } from "./SettingsSubComponents/ConflictResolutionComponent";
-import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
-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 {
-import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
+  MongoIndexingPolicyComponent,
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+  MongoIndexingPolicyComponentProps,
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
+import {
+  AddMongoIndexProps,
+  ChangeFeedPolicyState,
+  GeospatialConfigType,
+  getMongoNotification,
+  getTabTitle,
+  hasDatabaseSharedThroughput,
+  isDirty,
+  MongoIndexTypes,
+  parseConflictResolutionMode,
+  parseConflictResolutionProcedure,
+  SettingsV2TabTypes,
+  TtlType,
+} from "./SettingsUtils";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -325,7 +327,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         ? this.saveCollectionSettings(startKey)
         : this.saveDatabaseSettings(startKey));
     } catch (error) {
-      this.container.isRefreshingExplorer(false);
       this.props.settingsTab.isExecutionError(true);
       console.error(error);
       traceFailure(
@@ -699,7 +700,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -862,7 +862,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         });
       }
     }
-    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -877,6 +876,18 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     );
   };
 
+  public getMongoIndexTabContent = (
+    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
+  ): JSX.Element => {
+    if (userContext.authType === AuthType.AAD) {
+      if (this.container.isEnableMongoCapabilityPresent()) {
+        return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
+      }
+      return undefined;
+    }
+    return mongoIndexingPolicyAADError;
+  };
+
   public render(): JSX.Element {
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
@@ -994,15 +1005,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
       });
     } else if (this.container.isPreferredApiMongoDB()) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
+      const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
+      if (mongoIndexTabContext) {
         tabs.push({
           tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
+          content: mongoIndexTabContext,
-        });
-      } else {
-        tabs.push({
-          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexingPolicyAADError,
         });
       }
     }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -23,7 +23,6 @@ import {
   ITextStyles,
   IDetailsRowStyles,
   IStackStyles,
-  IIconStyles,
   IDetailsListStyles,
   IDropdownStyles,
   ISeparatorStyles,
@@ -116,8 +115,6 @@ 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 } };

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

@@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
 
     return (
       <Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Current index(es)">
+        <CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
           {
             <>
               <DetailsList
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
 
     return (
       <Stack styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Index(es) to be dropped">
+        <CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
           {indexesToBeDropped.length > 0 && (
             <DetailsList
               styles={customDetailsListStyles}

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

@@ -42,6 +42,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     }
   >
     <CollapsibleSectionComponent
+      isExpandedByDefault={true}
       title="Current index(es)"
     >
       <StyledWithViewportComponent
@@ -114,7 +115,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
       </Stack>
     </CollapsibleSectionComponent>
   </Stack>
-  <Styled
+  <Separator
     styles={
       Object {
         "root": Array [
@@ -139,6 +140,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     }
   >
     <CollapsibleSectionComponent
+      isExpandedByDefault={true}
       title="Index(es) to be dropped"
     />
   </Stack>

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

@@ -1,23 +1,24 @@
+import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import { configContext, Platform } from "../../../../ConfigContext";
-import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as DataModels from "../../../../Contracts/DataModels";
+import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as SharedConstants from "../../../../Shared/Constants";
+import { userContext } from "../../../../UserContext";
+import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import Explorer from "../../../Explorer";
 import {
   getTextFieldStyles,
-  subComponentStackProps,
-  titleAndInputStackProps,
-  throughputUnit,
   getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
+  subComponentStackProps,
+  throughputUnit,
+  titleAndInputStackProps,
   updateThroughputBeyondLimitWarningMessage,
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
-import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
-import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
-import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
   collection: ViewModels.Collection;
@@ -79,7 +80,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getMaxRUs = (): number => {
-    if (this.props.container?.isTryCosmosDBSubscription()) {
+    if (userContext.isTryCosmosDBSubscription) {
       return Constants.TryCosmosExperience.maxRU;
     }
 
@@ -91,7 +92,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getMinRUs = (): number => {
-    if (this.props.container?.isTryCosmosDBSubscription()) {
+    if (userContext.isTryCosmosDBSubscription) {
       return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
     }
 
@@ -172,7 +173,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       databaseAccount={this.props.container.databaseAccount()}
       databaseName={this.databaseId}
       collectionName={this.collectionId}
-      serverId={this.props.container.serverId()}
       throughput={this.props.throughput}
       throughputBaseline={this.props.throughputBaseline}
       onThroughputChange={this.props.onThroughputChange}

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

@@ -1,17 +1,16 @@
 import { shallow } from "enzyme";
 import React from "react";
+import * as DataModels from "../../../../../Contracts/DataModels";
 import {
   ThroughputInputAutoPilotV3Component,
   ThroughputInputAutoPilotV3Props,
 } from "./ThroughputInputAutoPilotV3Component";
-import * as DataModels from "../../../../../Contracts/DataModels";
 
 describe("ThroughputInputAutoPilotV3Component", () => {
   const baseProps: ThroughputInputAutoPilotV3Props = {
     databaseAccount: {} as DataModels.DatabaseAccount,
     databaseName: "test",
     collectionName: "test",
-    serverId: undefined,
     wasAutopilotOriginallySet: false,
     throughput: 100,
     throughputBaseline: 100,

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

@@ -1,55 +1,53 @@
-import React from "react";
-import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import {
-  getTextFieldStyles,
-  getToolTipContainer,
-  noLeftPaddingCheckBoxStyle,
-  titleAndInputStackProps,
-  checkBoxAndInputStackProps,
-  getChoiceGroupStyles,
-  messageBarStyles,
-  getEstimatedSpendingElement,
-  getAutoPilotV3SpendElement,
-  manualToAutoscaleDisclaimerElement,
-  saveThroughputWarningMessage,
-  ManualEstimatedSpendingDisplayProps,
-  AutoscaleEstimatedSpendingDisplayProps,
-  PriceBreakdown,
-  getRuPriceBreakdown,
-  transparentDetailsHeaderStyle,
-} from "../../SettingsRenderUtils";
-import {
-  Text,
-  TextField,
-  ChoiceGroup,
-  IChoiceGroupOption,
   Checkbox,
-  Stack,
+  ChoiceGroup,
+  FontIcon,
+  IChoiceGroupOption,
+  IColumn,
   Label,
   Link,
   MessageBar,
-  FontIcon,
+  Stack,
-  IColumn,
+  Text,
+  TextField,
 } from "office-ui-fabric-react";
-import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
+import React from "react";
-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";
-import { userContext } from "../../../../../UserContext";
-import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
 import { Features } from "../../../../../Common/Constants";
-import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+import * as DataModels from "../../../../../Contracts/DataModels";
-
+import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
+import * as SharedConstants from "../../../../../Shared/Constants";
 import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../../../UserContext";
+import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
+import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
+import {
+  AutoscaleEstimatedSpendingDisplayProps,
+  checkBoxAndInputStackProps,
+  getAutoPilotV3SpendElement,
+  getChoiceGroupStyles,
+  getEstimatedSpendingElement,
+  getRuPriceBreakdown,
+  getTextFieldStyles,
+  getToolTipContainer,
+  ManualEstimatedSpendingDisplayProps,
+  manualToAutoscaleDisclaimerElement,
+  messageBarStyles,
+  noLeftPaddingCheckBoxStyle,
+  PriceBreakdown,
+  saveThroughputWarningMessage,
+  titleAndInputStackProps,
+  transparentDetailsHeaderStyle,
+} from "../../SettingsRenderUtils";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 
 export interface ThroughputInputAutoPilotV3Props {
   databaseAccount: DataModels.DatabaseAccount;
   databaseName: string;
   collectionName: string;
-  serverId: string;
   throughput: number;
   throughputBaseline: number;
   onThroughputChange: (newThroughput: number) => void;
@@ -182,7 +180,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     }
 
     const isDirty: boolean = this.IsComponentDirty().isDiscardable;
-    const serverId: string = this.props.serverId;
     const regions = account?.properties?.readLocations?.length || 1;
     const multimaster = account?.properties?.enableMultipleWriteLocations || false;
 
@@ -192,7 +189,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       estimatedSpend = this.getEstimatedManualSpendElement(
         // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
         this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
-        serverId,
+        userContext.portalEnv,
         regions,
         multimaster,
         isDirty ? this.props.throughput : undefined
@@ -200,7 +197,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     } else {
       estimatedSpend = this.getEstimatedAutoscaleSpendElement(
         this.props.maxAutoPilotThroughputBaseline,
-        serverId,
+        userContext.portalEnv,
         regions,
         multimaster,
         isDirty ? this.props.maxAutoPilotThroughput : undefined

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

@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
         }
       }
     >
-      <StyledIconBase
+      <Icon
         ariaLabel="Info"
         iconName="Info"
         styles={

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

@@ -920,7 +920,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
-                "isAuthWithResourceToken": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
@@ -937,7 +936,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
-                "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
@@ -946,7 +944,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "isTryCosmosDBSubscription": [Function],
                 "loadQueryPane": LoadQueryPane {
                   "container": [Circular],
                   "files": [Function],
@@ -1060,7 +1057,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
-                "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
@@ -2121,7 +2117,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
-              "isAuthWithResourceToken": [Function],
               "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
@@ -2138,7 +2133,6 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
-              "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
@@ -2147,7 +2141,6 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
-              "isTryCosmosDBSubscription": [Function],
               "loadQueryPane": LoadQueryPane {
                 "container": [Circular],
                 "files": [Function],
@@ -2261,7 +2254,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
-              "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,
@@ -3335,7 +3327,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
-                "isAuthWithResourceToken": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
@@ -3352,7 +3343,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
-                "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
@@ -3361,7 +3351,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "isTryCosmosDBSubscription": [Function],
                 "loadQueryPane": LoadQueryPane {
                   "container": [Circular],
                   "files": [Function],
@@ -3475,7 +3464,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
-                "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
@@ -4536,7 +4524,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
-              "isAuthWithResourceToken": [Function],
               "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
@@ -4553,7 +4540,6 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
-              "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
@@ -4562,7 +4548,6 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
-              "isTryCosmosDBSubscription": [Function],
               "loadQueryPane": LoadQueryPane {
                 "container": [Circular],
                 "files": [Function],
@@ -4676,7 +4661,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
-              "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -1,14 +1,13 @@
-import * as React from "react";
+import { TFunction } from "i18next";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
+import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { Slider } from "office-ui-fabric-react/lib/Slider";
 import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
+import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
-import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { Text } from "office-ui-fabric-react/lib/Text";
-import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
+import { TextField } from "office-ui-fabric-react/lib/TextField";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
-import * as InputUtils from "./InputUtils";
+import * as React from "react";
-import "./SmartUiComponent.less";
 import {
   ChoiceItem,
   Description,
@@ -19,8 +18,9 @@ import {
   NumberUiType,
   SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
-import { TFunction } from "i18next";
 import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
+import * as InputUtils from "./InputUtils";
+import "./SmartUiComponent.less";
 
 /**
  * Generic UX renderer
@@ -138,11 +138,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     );
   }
 
-  private renderTextInput(input: StringInput, labelId: string): JSX.Element {
+  private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): JSX.Element {
     const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
     return (
-      <div className="stringInputContainer">
+      <Stack>
+        {labelElement}
         <TextField
           id={`${input.dataFieldName}-textField-input`}
           aria-labelledby={labelId}
@@ -155,17 +156,23 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             root: { width: 400 },
           }}
         />
-      </div>
+      </Stack>
     );
   }
 
-  private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
+  private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
     const dataFieldName = input.dataFieldName;
     const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
     if (!description) {
+      if (!input.isDynamicDescription) {
         return this.renderError("Description is not provided.");
       }
+      // If input is a dynamic description and description is not available, empty element is rendered
+      return <></>;
+    }
     const descriptionElement = (
+      <Stack>
+        {labelElement}
         <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
           {this.props.getTranslation(description.textTKey)}{" "}
           {description.link && (
@@ -174,6 +181,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             </Link>
           )}
         </Text>
+      </Stack>
     );
 
     if (description.type === DescriptionType.Text) {
@@ -227,7 +235,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return undefined;
   };
 
-  private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
+  private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
     const { labelTKey, min, max, dataFieldName, step } = input;
     const props = {
       min: min,
@@ -240,6 +248,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     if (input.uiType === NumberUiType.Spinner) {
       return (
+        <Stack>
+          {labelElement}
           <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
             <SpinButton
               {...props}
@@ -253,12 +263,17 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
               disabled={disabled}
             />
             {this.state.errors.has(dataFieldName) && (
-            <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
+              <MessageBar messageBarType={MessageBarType.error}>
+                Error: {this.state.errors.get(dataFieldName)}
+              </MessageBar>
             )}
           </Stack>
+        </Stack>
       );
     } else if (input.uiType === NumberUiType.Slider) {
       return (
+        <Stack>
+          {labelElement}
           <div id={`${input.dataFieldName}-slider-input`}>
             <Slider
               {...props}
@@ -271,16 +286,19 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
               }}
             />
           </div>
+        </Stack>
       );
     } else {
       return <>Unsupported number UI type {input.uiType}</>;
     }
   }
 
-  private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
+  private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): JSX.Element {
     const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
     const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
     return (
+      <Stack>
+        {labelElement}
         <Toggle
           id={`${input.dataFieldName}-toggle-input`}
           aria-labelledby={labelId}
@@ -291,10 +309,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
           styles={{ root: { width: 400 } }}
         />
+      </Stack>
     );
   }
 
-  private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
+  private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
     const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
     const value = this.props.currentValues.get(dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
@@ -303,6 +322,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       selectedKey = "";
     }
     return (
+      <Stack>
+        {labelElement}
         <Dropdown
           id={`${input.dataFieldName}-dropdown-input`}
           aria-labelledby={labelId}
@@ -310,6 +331,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
           placeholder={this.props.getTranslation(placeholderTKey)}
           disabled={disabled}
+          dropdownWidth="auto"
           options={choices.map((c) => ({
             key: c.key,
             text: this.props.getTranslation(c.label),
@@ -319,6 +341,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             dropdown: SmartUiComponent.labelStyle,
           }}
         />
+      </Stack>
     );
   }
 
@@ -326,7 +349,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
   }
 
-  private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
+  private renderElement(input: AnyDisplay, info: Info): JSX.Element {
     if (input.errorMessage) {
       return this.renderError(input.errorMessage);
     }
@@ -335,34 +358,31 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       return <></>;
     }
     const labelId = `${input.dataFieldName}-label`;
-    return (
+    const labelElement: JSX.Element = input.labelTKey && (
-      <Stack>
-        {input.labelTKey && (
       <Label id={labelId}>
         <ToolTipLabelComponent
           label={this.props.getTranslation(input.labelTKey)}
           toolTipElement={this.renderInfo(info)}
         />
       </Label>
-        )}
-        {this.renderDisplay(input, labelId)}
-      </Stack>
     );
+
+    return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
   }
 
-  private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
+  private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
     switch (input.type) {
       case "string":
         if ("description" in input || "isDynamicDescription" in input) {
-          return this.renderDescription(input as DescriptionDisplay, labelId);
+          return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
         }
-        return this.renderTextInput(input as StringInput, labelId);
+        return this.renderTextInput(input as StringInput, labelId, labelElement);
       case "number":
-        return this.renderNumberInput(input as NumberInput, labelId);
+        return this.renderNumberInput(input as NumberInput, labelId, labelElement);
       case "boolean":
-        return this.renderBooleanInput(input as BooleanInput, labelId);
+        return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
       case "object":
-        return this.renderChoiceInput(input as ChoiceInput, labelId);
+        return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
       default:
         throw new Error(`Unknown input type: ${input.type}`);
     }
@@ -373,7 +393,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
+        <Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
         {node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
       </Stack>
     );

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

@@ -22,6 +22,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <Text
               aria-labelledby="description-label"
@@ -37,6 +38,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               </StyledLinkBase>
             </Text>
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -52,6 +54,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="throughput-label"
@@ -100,6 +103,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               />
             </Stack>
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -115,6 +119,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="throughput2-label"
@@ -148,6 +153,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               />
             </div>
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -184,6 +190,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="containerId-label"
@@ -192,9 +199,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 label="Container id"
               />
             </StyledLabelBase>
-          <div
-            className="stringInputContainer"
-          >
             <StyledTextFieldBase
               aria-labelledby="containerId-label"
               disabled={true}
@@ -210,7 +214,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -227,6 +231,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="analyticalStore-label"
@@ -252,6 +257,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               }
             />
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -267,6 +273,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="database-label"
@@ -278,6 +285,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
               disabled={true}
+              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={
@@ -311,6 +319,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               }
             />
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -339,6 +348,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <Text
               aria-labelledby="description-label"
@@ -354,6 +364,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               </StyledLinkBase>
             </Text>
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -369,6 +380,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="throughput-label"
@@ -417,6 +429,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               />
             </Stack>
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -432,6 +445,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="throughput2-label"
@@ -464,6 +478,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               />
             </div>
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -500,6 +515,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="containerId-label"
@@ -508,9 +524,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 label="Container id"
               />
             </StyledLabelBase>
-          <div
-            className="stringInputContainer"
-          >
             <StyledTextFieldBase
               aria-labelledby="containerId-label"
               id="containerId-textField-input"
@@ -525,7 +538,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               type="text"
               value=""
             />
-          </div>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -542,6 +555,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="analyticalStore-label"
@@ -566,6 +580,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               }
             />
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -581,6 +596,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
+        <Stack>
           <Stack>
             <StyledLabelBase
               id="database-label"
@@ -591,6 +607,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             </StyledLabelBase>
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
+              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={
@@ -624,6 +641,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               }
             />
           </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -0,0 +1,20 @@
+@import "../../../../less/Common/Constants";
+
+.throughputInputContainer {
+  .throughputInputRadioBtn {
+    margin: 0;
+  }
+}
+
+.throughputInputRadioBtnLabel {
+  font-size: @mediumFontSize;
+  padding: 0 @LargeSpace 0 @SmallSpace;
+}
+
+.throughputInputSpacing {
+  margin-bottom: @SmallSpace;
+
+  & > * {
+    margin-bottom: @SmallSpace;
+  }
+}

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -0,0 +1,302 @@
+import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
+import React from "react";
+import * as Constants from "../../../Common/Constants";
+import * as SharedConstants from "../../../Shared/Constants";
+import { userContext } from "../../../UserContext";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import * as PricingUtils from "../../../Utils/PricingUtils";
+
+export interface ThroughputInputProps {
+  isDatabase: boolean;
+  showFreeTierExceedThroughputTooltip: boolean;
+  setThroughputValue: (throughput: number) => void;
+  setIsAutoscale: (isAutoscale: boolean) => void;
+  onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
+}
+
+export interface ThroughputInputState {
+  isAutoscaleSelected: boolean;
+  throughput: number;
+  isCostAcknowledged: boolean;
+}
+
+export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
+  constructor(props: ThroughputInputProps) {
+    super(props);
+
+    this.state = {
+      isAutoscaleSelected: true,
+      throughput: AutoPilotUtils.minAutoPilotThroughput,
+      isCostAcknowledged: false,
+    };
+
+    this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
+    this.props.setIsAutoscale(true);
+  }
+
+  render(): JSX.Element {
+    return (
+      <div className="throughputInputContainer throughputInputSpacing">
+        <Stack horizontal>
+          <span className="mandatoryStar">*&nbsp;</span>
+          <Text variant="small" style={{ lineHeight: "20px" }}>
+            {this.getThroughputLabelText()}
+          </Text>
+          <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
+            <Icon iconName="InfoSolid" className="panelInfoIcon" />
+          </TooltipHost>
+        </Stack>
+
+        <Stack horizontal verticalAlign="center">
+          <input
+            className="throughputInputRadioBtn"
+            aria-label="Autoscale mode"
+            checked={this.state.isAutoscaleSelected}
+            type="radio"
+            role="radio"
+            tabIndex={0}
+            onChange={this.onAutoscaleRadioBtnChange.bind(this)}
+          />
+          <span className="throughputInputRadioBtnLabel">Autoscale</span>
+
+          <input
+            className="throughputInputRadioBtn"
+            aria-label="Manual mode"
+            checked={!this.state.isAutoscaleSelected}
+            type="radio"
+            role="radio"
+            tabIndex={0}
+            onChange={this.onManualRadioBtnChange.bind(this)}
+          />
+          <span className="throughputInputRadioBtnLabel">Manual</span>
+        </Stack>
+
+        {this.state.isAutoscaleSelected && (
+          <Stack className="throughputInputSpacing">
+            <Text variant="small">
+              Provision maximum RU/s required by this resource. Estimate your required RU/s with&nbsp;
+              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+                capacity calculator
+              </Link>
+              .
+            </Text>
+
+            <Stack horizontal>
+              <Text variant="small" style={{ lineHeight: "20px" }}>
+                Max RU/s
+              </Text>
+              <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
+                <Icon iconName="InfoSolid" className="panelInfoIcon" />
+              </TooltipHost>
+            </Stack>
+
+            <TextField
+              type="number"
+              styles={{
+                fieldGroup: { width: 300, height: 27 },
+                field: { fontSize: 12 },
+              }}
+              onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
+              step={AutoPilotUtils.autoPilotIncrementStep}
+              min={AutoPilotUtils.minAutoPilotThroughput}
+              value={this.state.throughput.toString()}
+              aria-label="Max request units per second"
+              required={true}
+            />
+
+            <Text variant="small">
+              Your {this.props.isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
+              <b>
+                {AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
+                {this.state.throughput} RU/s
+              </b>{" "}
+              based on usage.
+            </Text>
+          </Stack>
+        )}
+
+        {!this.state.isAutoscaleSelected && (
+          <Stack className="throughputInputSpacing">
+            <Text variant="small">
+              Estimate your required RU/s with&nbsp;
+              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+                capacity calculator
+              </Link>
+              .
+            </Text>
+
+            <TooltipHost
+              directionalHint={DirectionalHint.topLeftEdge}
+              content={
+                this.props.showFreeTierExceedThroughputTooltip &&
+                this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
+                  ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
+                  : undefined
+              }
+            >
+              <TextField
+                type="number"
+                styles={{
+                  fieldGroup: { width: 300, height: 27 },
+                  field: { fontSize: 12 },
+                }}
+                onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
+                step={100}
+                min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
+                max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
+                value={this.state.throughput.toString()}
+                aria-label="Max request units per second"
+                required={true}
+              />
+            </TooltipHost>
+          </Stack>
+        )}
+
+        <CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
+
+        {this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
+          <Stack horizontal verticalAlign="start">
+            <Checkbox
+              checked={this.state.isCostAcknowledged}
+              styles={{
+                checkbox: { width: 12, height: 12 },
+                label: { padding: 0, margin: "4px 4px 0 0" },
+              }}
+              onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
+                this.setState({ isCostAcknowledged: isChecked });
+                this.props.onCostAcknowledgeChange(isChecked);
+              }}
+            />
+            <Text variant="small" style={{ lineHeight: "20px" }}>
+              {this.getCostAcknowledgeText()}
+            </Text>
+          </Stack>
+        )}
+      </div>
+    );
+  }
+
+  private getThroughputLabelText(): string {
+    if (this.state.isAutoscaleSelected) {
+      return AutoPilotUtils.getAutoPilotHeaderText();
+    }
+
+    const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
+    const maxRU: string = userContext.isTryCosmosDBSubscription
+      ? Constants.TryCosmosExperience.maxRU.toLocaleString()
+      : "unlimited";
+    return this.state.isAutoscaleSelected
+      ? AutoPilotUtils.getAutoPilotHeaderText()
+      : `Throughput (${minRU} - ${maxRU} RU/s)`;
+  }
+
+  private onThroughputValueChange(newInput: string): void {
+    const newThroughput = parseInt(newInput);
+    this.setState({ throughput: newThroughput });
+    this.props.setThroughputValue(newThroughput);
+  }
+
+  private getAutoScaleTooltip(): string {
+    return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
+      this.state.throughput
+    )} GB of data stored, the max
+    RU/s will be automatically upgraded based on the new storage value.`;
+  }
+
+  private getCostAcknowledgeText(): string {
+    const databaseAccount = userContext.databaseAccount;
+    if (!databaseAccount || !databaseAccount.properties) {
+      return "";
+    }
+
+    const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
+    const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
+
+    return PricingUtils.getEstimatedSpendAcknowledgeString(
+      this.state.throughput,
+      userContext.portalEnv,
+      numberOfRegions,
+      multimasterEnabled,
+      this.state.isAutoscaleSelected
+    );
+  }
+
+  private onAutoscaleRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    if (event.target.checked && !this.state.isAutoscaleSelected) {
+      this.setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
+      this.props.setIsAutoscale(true);
+    }
+  }
+
+  private onManualRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    if (event.target.checked && this.state.isAutoscaleSelected) {
+      this.setState({
+        isAutoscaleSelected: false,
+        throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
+      });
+      this.props.setIsAutoscale(false);
+      this.props.setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
+    }
+  }
+}
+
+interface CostEstimateTextProps {
+  requestUnits: number;
+  isAutoscale: boolean;
+}
+
+const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
+  const { requestUnits, isAutoscale } = props;
+  const databaseAccount = userContext.databaseAccount;
+  if (!databaseAccount || !databaseAccount.properties) {
+    return <></>;
+  }
+
+  const serverId: string = userContext.portalEnv;
+  const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
+  const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
+  const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
+    serverId,
+    requestUnits,
+    numberOfRegions,
+    multimasterEnabled,
+    isAutoscale,
+  });
+  const dailyPrice: number = hourlyPrice * 24;
+  const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
+  const currency: string = PricingUtils.getPriceCurrency(serverId);
+  const currencySign: string = PricingUtils.getCurrencySign(serverId);
+  const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
+  const pricePerRu = isAutoscale
+    ? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
+    : PricingUtils.getPricePerRu(serverId) * multiplier;
+
+  if (isAutoscale) {
+    return (
+      <Text variant="small">
+        Estimated monthly cost ({currency}):{" "}
+        <b>
+          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
+          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
+        </b>
+        ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
+        RU/s, {currencySign + pricePerRu}/RU)
+      </Text>
+    );
+  }
+
+  return (
+    <Text variant="small">
+      Cost ({currency}):{" "}
+      <b>
+        {currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
+        {currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
+        {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
+      </b>
+      ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
+      {currencySign + pricePerRu}/RU)
+      <br />
+      <em>{PricingUtils.estimatedCostDisclaimer}</em>
+    </Text>
+  );
+};

src/Explorer/Explorer.tsx

@@ -48,6 +48,7 @@ import { FileSystemUtil } from "./Notebook/FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
+import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
@@ -163,8 +164,6 @@ export default class Explorer {
   public isAccountReady: ko.Observable<boolean>;
   public canSaveQueries: ko.Computed<boolean>;
   public features: ko.Observable<any>;
-  public serverId: ko.Observable<string>;
-  public isTryCosmosDBSubscription: ko.Observable<boolean>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
@@ -186,11 +185,6 @@ export default class Explorer {
   public selectedCollectionId: ko.Computed<string>;
   public isLeftPaneExpanded: ko.Observable<boolean>;
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
-  /**
-   * @deprecated
-   * Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
-   * */
-  public isRefreshingExplorer: ko.Observable<boolean>;
   private resourceTree: ResourceTreeAdapter;
 
   // Resource Token
@@ -198,9 +192,8 @@ export default class Explorer {
   public resourceTokenCollectionId: ko.Observable<string>;
   public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
   public resourceTokenPartitionKey: ko.Observable<string>;
-  public isAuthWithResourceToken: ko.Observable<boolean>;
   public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
-  private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
+  public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
 
   // Tabs
   public isTabsContentExpanded: ko.Observable<boolean>;
@@ -301,22 +294,6 @@ export default class Explorer {
 
     this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
-    let firstInitialization = true;
-    this.isRefreshingExplorer = ko.observable<boolean>(true);
-    this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
-      if (!isRefreshing && firstInitialization) {
-        // set focus on first element
-        firstInitialization = false;
-        try {
-          document.getElementById("createNewContainerCommandButton").parentElement.parentElement.focus();
-        } catch (e) {
-          Logger.logWarning(
-            "getElementById('createNewContainerCommandButton') failed to find element",
-            "Explorer/this.isRefreshingExplorer.subscribe"
-          );
-        }
-      }
-    });
     this.isAccountReady = ko.observable<boolean>(false);
     this._isInitializingNotebooks = false;
     this.arcadiaToken = ko.observable<string>();
@@ -337,7 +314,9 @@ export default class Explorer {
     this.isSynapseLinkUpdating = ko.observable<boolean>(false);
     this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
       if (isAccountReady) {
-        this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
+        userContext.authType === AuthType.ResourceToken
+          ? this.refreshDatabaseForResourceToken()
+          : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
         this.notebookWorkspaceManager = new NotebookWorkspaceManager();
         this.arcadiaWorkspaces = ko.observableArray();
@@ -348,7 +327,7 @@ export default class Explorer {
         Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
           async () => {
             this.isNotebookEnabled(
-              !this.isAuthWithResourceToken() &&
+              userContext.authType !== AuthType.ResourceToken &&
                 ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
                   this.isFeatureEnabled(Constants.Features.enableNotebooks))
             );
@@ -397,15 +376,12 @@ export default class Explorer {
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
 
     this.features = ko.observable();
-    this.serverId = ko.observable<string>();
     this.queriesClient = new QueriesClient(this);
-    this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
 
     this.resourceTokenDatabaseId = ko.observable<string>();
     this.resourceTokenCollectionId = ko.observable<string>();
     this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.resourceTokenPartitionKey = ko.observable<string>();
-    this.isAuthWithResourceToken = ko.observable<boolean>(false);
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
@@ -1086,7 +1062,6 @@ export default class Explorer {
   }
 
   public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
-    this.isRefreshingExplorer(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
@@ -1116,8 +1091,7 @@ export default class Explorer {
         this.deleteDatabasesFromList(deltaDatabases.toDelete);
         this.selectedNode(currentlySelectedNode);
         this._setLoadingStatusText("Fetching containers...");
-        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
+        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
-          .then(
           () => {
             this._setLoadingStatusText("Successfully fetched containers.");
             deferred.resolve();
@@ -1126,12 +1100,10 @@ export default class Explorer {
             this._setLoadingStatusText("Failed to fetch containers.");
             deferred.reject(reason);
           }
-          )
+        );
-          .finally(() => this.isRefreshingExplorer(false));
       },
       (error) => {
         this._setLoadingStatusText("Failed to fetch databases.");
-        this.isRefreshingExplorer(false);
         deferred.reject(error);
         const errorMessage = getErrorMessage(error);
         TelemetryProcessor.traceFailure(
@@ -1191,8 +1163,9 @@ export default class Explorer {
       description: "Refresh button clicked",
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    this.isRefreshingExplorer(true);
+    userContext.authType === AuthType.ResourceToken
-    this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
+      ? this.refreshDatabaseForResourceToken()
+      : this.refreshAllDatabases();
     this.refreshNotebookList();
   };
 
@@ -1441,15 +1414,12 @@ export default class Explorer {
         this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
       }
       this.features(inputs.features);
-      this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
       this.databaseAccount(databaseAccount);
       this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
       this.hasWriteAccess(inputs.hasWriteAccess ?? true);
       if (inputs.addCollectionDefaultFlight) {
         this.flight(inputs.addCollectionDefaultFlight);
       }
-      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
-      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
       this.setFeatureFlagsFromFlights(inputs.flights);
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -1530,9 +1500,9 @@ export default class Explorer {
 
   public isRunningOnNationalCloud(): boolean {
     return (
-      this.serverId() === Constants.ServerIds.blackforest ||
+      userContext.portalEnv === "blackforest" ||
-      this.serverId() === Constants.ServerIds.fairfax ||
+      userContext.portalEnv === "fairfax" ||
-      this.serverId() === Constants.ServerIds.mooncake
+      userContext.portalEnv === "mooncake"
     );
   }
 
@@ -2397,11 +2367,13 @@ export default class Explorer {
   public onNewCollectionClicked(): void {
     if (this.isPreferredApiCassandra()) {
       this.cassandraAddCollectionPane.open();
+    } else if (this.isFeatureEnabled(Constants.Features.enableReactPane)) {
+      this.openAddCollectionPanel();
     } else {
       this.addCollectionPane.open(this.selectedDatabaseId());
-    }
       document.getElementById("linkAddCollection").focus();
     }
+  }
 
   private refreshCommandBarButtons(): void {
     const activeTab = this.tabsManager.activeTab();
@@ -2540,4 +2512,16 @@ export default class Explorer {
           />
         );
   }
+
+  public async openAddCollectionPanel(): Promise<void> {
+    await this.loadDatabaseOffers();
+    this.openSidePanel(
+      "New Collection",
+      <AddCollectionPanel
+        explorer={this}
+        closePanel={() => this.closeSidePanel()}
+        openNotificationConsole={() => this.expandConsole()}
+      />
+    );
+  }
 }

src/Explorer/Menus/CommandBar/CommandBarComponent.tsx

@@ -1,107 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as ko from "knockout";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import * as React from "react";
-import { StyleConstants } from "../../../Common/Constants";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
-import * as CommandBarUtil from "./CommandBarUtil";
-
-export interface CommandBarComponentProps {
-  isNotebookTabActive: boolean;
-  tabsButtons: CommandButtonComponentProps[];
-}
-
-export const CommandBarComponent: React.FunctionComponent = ({ isNotebookTabActive, tabsButtons }: CommandBarComponentProps) {
-
-  constructor(props: CommandBarComponentProps) {
-    super(props);
-    this.state = {
-      isNotebookTabActive: false
-    }
-
-    this.container = container;
-    this.tabsButtons = [];
-    // this.isNotebookTabActive = ko.computed(() =>
-    //   container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
-    // );
-
-    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
-    const toWatch = [
-      container.isPreferredApiTable,
-      container.isPreferredApiMongoDB,
-      container.isPreferredApiDocumentDB,
-      container.isPreferredApiCassandra,
-      container.isPreferredApiGraph,
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
-      container.addDatabaseText,
-      container.isDatabaseNodeOrNoneSelected,
-      container.isDatabaseNodeSelected,
-      container.isNoneSelected,
-      container.isResourceTokenCollectionNodeSelected,
-      container.isHostedDataExplorerEnabled,
-      container.isSynapseLinkUpdating,
-      container.databaseAccount,
-      this.isNotebookTabActive,
-      container.isServerlessEnabled,
-    ];
-
-    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
-    this.parameters = ko.observable(Date.now());
-  }
-
-  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
-  this.tabsButtons = buttons;
-  this.triggerRender();
-}
-
-const backgroundColor = StyleConstants.BaseLight;
-
-const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
-const contextButtons = (this.tabsButtons || []).concat(
-  CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
-);
-const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
-
-const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
-if (this.tabsButtons && this.tabsButtons.length > 0) {
-  uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-}
-
-const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
-
-if (uiFabricTabsButtons.length > 0) {
-  uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
-}
-
-const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
-uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-
-if (props.isNotebookTabActive) {
-  uiFabricControlButtons.unshift(
-    CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
-  );
-}
-
-return (
-  <React.Fragment>
-    <div className="commandBarContainer">
-      <CommandBar
-        ariaLabel="Use left and right arrow keys to navigate between commands"
-        items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
-        farItems={uiFabricControlButtons}
-        styles={{
-          root: { backgroundColor: backgroundColor },
-        }}
-        overflowButtonProps={{ ariaLabel: "More commands" }}
-      />
-    </div>
-  </React.Fragment>
-);
-}

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -0,0 +1,110 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import { StyleConstants } from "../../../Common/Constants";
+import * as CommandBarUtil from "./CommandBarUtil";
+import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+
+export class CommandBarComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+  public container: Explorer;
+  private tabsButtons: CommandButtonComponentProps[];
+  private isNotebookTabActive: ko.Computed<boolean>;
+
+  constructor(container: Explorer) {
+    this.container = container;
+    this.tabsButtons = [];
+    this.isNotebookTabActive = ko.computed(() =>
+      container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
+    );
+
+    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
+    const toWatch = [
+      container.isPreferredApiTable,
+      container.isPreferredApiMongoDB,
+      container.isPreferredApiDocumentDB,
+      container.isPreferredApiCassandra,
+      container.isPreferredApiGraph,
+      container.deleteCollectionText,
+      container.deleteDatabaseText,
+      container.addCollectionText,
+      container.addDatabaseText,
+      container.isDatabaseNodeOrNoneSelected,
+      container.isDatabaseNodeSelected,
+      container.isNoneSelected,
+      container.isResourceTokenCollectionNodeSelected,
+      container.isHostedDataExplorerEnabled,
+      container.isSynapseLinkUpdating,
+      container.databaseAccount,
+      this.isNotebookTabActive,
+      container.isServerlessEnabled,
+    ];
+
+    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
+    this.parameters = ko.observable(Date.now());
+  }
+
+  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
+    this.tabsButtons = buttons;
+    this.triggerRender();
+  }
+
+  public renderComponent(): JSX.Element {
+    const backgroundColor = StyleConstants.BaseLight;
+
+    const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
+    const contextButtons = (this.tabsButtons || []).concat(
+      CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
+    );
+    const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
+
+    const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+    if (this.tabsButtons && this.tabsButtons.length > 0) {
+      uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+    }
+
+    const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+
+    if (uiFabricTabsButtons.length > 0) {
+      uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
+    }
+
+    const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+    uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+
+    if (this.isNotebookTabActive()) {
+      uiFabricControlButtons.unshift(
+        CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <div className="commandBarContainer">
+          <CommandBar
+            ariaLabel="Use left and right arrow keys to navigate between commands"
+            items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
+            farItems={uiFabricControlButtons}
+            styles={{
+              root: { backgroundColor: backgroundColor },
+            }}
+            overflowButtonProps={{ ariaLabel: "More commands" }}
+          />
+        </div>
+      </React.Fragment>
+    );
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

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

@@ -1,8 +1,10 @@
 import * as ko from "knockout";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { AuthType } from "../../../AuthType";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
-import NotebookManager from "../../Notebook/NotebookManager";
+import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
+import NotebookManager from "../../Notebook/NotebookManager";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 
 describe("CommandBarComponentButtonFactory tests", () => {
   let mockExplorer: Explorer;
@@ -13,7 +15,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -53,7 +54,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -118,7 +118,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
@@ -199,7 +198,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
@@ -281,7 +279,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -340,12 +337,13 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isAuthWithResourceToken = ko.observable(true);
       mockExplorer.isPreferredApiDocumentDB = ko.computed(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
-
       mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
+      updateUserContext({
+        authType: AuthType.ResourceToken,
+      });
     });
 
     it("should only show New SQL Query and Open Query buttons", () => {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,37 +1,38 @@
-import * as ViewModels from "../../../Contracts/ViewModels";
+import * as React from "react";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { Areas } from "../../../Common/Constants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-
-import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
+import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
-import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
-import * as Constants from "../../../Common/Constants";
-import OpenInTabIcon from "../../../../images/open-in-tab.svg";
-import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
-import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
 import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
-import SettingsIcon from "../../../../images/settings_15x15.svg";
-import AddUdfIcon from "../../../../images/AddUdf.svg";
 import AddTriggerIcon from "../../../../images/AddTrigger.svg";
+import AddUdfIcon from "../../../../images/AddUdf.svg";
+import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
+import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import GitHubIcon from "../../../../images/github.svg";
+import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
 import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
 import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
 import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
-import GitHubIcon from "../../../../images/github.svg";
+import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
+import SettingsIcon from "../../../../images/settings_15x15.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
+import { AuthType } from "../../../AuthType";
+import * as Constants from "../../../Common/Constants";
+import { Areas } from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
-import Explorer from "../../Explorer";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import * as React from "react";
+import Explorer from "../../Explorer";
 import { OpenFullScreen } from "../../OpenFullScreen";
 
 let counter = 0;
 
 export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  if (container.isAuthWithResourceToken()) {
+  if (userContext.authType === AuthType.ResourceToken) {
     return createStaticCommandBarButtonsForResourceToken(container);
   }
 

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -1,4 +1,4 @@
-import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
+import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
 import { webSocket } from "rxjs/webSocket";
 import { StateObservable } from "redux-observable";
 import { ofType } from "redux-observable";
@@ -944,6 +944,39 @@ const traceNotebookKernelEpic = (
   );
 };
 
+const resetCellStatusOnExecuteCanceledEpic = (
+  action$: Observable<actions.ExecuteCanceled>,
+  state$: StateObservable<AppState>
+): Observable<actions.UpdateCellStatus> => {
+  return action$.pipe(
+    ofType(actions.EXECUTE_CANCELED),
+    mergeMap((action) => {
+      const contentRef = action.payload.contentRef;
+      const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
+      let busyCellIds: string[] = [];
+
+      if (model.type === "notebook") {
+        const cellMap = model.transient.get("cellMap");
+        if (cellMap) {
+          for (const entry of cellMap.toArray()) {
+            const cellId = entry[0];
+            const status = model.transient.getIn(["cellMap", cellId, "status"]);
+            if (status === "busy") {
+              busyCellIds.push(cellId);
+            }
+          }
+        }
+      }
+
+      return from(busyCellIds).pipe(
+        map((busyCellId) => {
+          return actions.updateCellStatus({ id: busyCellId, contentRef, status: undefined });
+        })
+      );
+    })
+  );
+};
+
 export const allEpics = [
   addInitialCodeCellEpic,
   focusInitialCodeCellEpic,
@@ -960,4 +993,5 @@ export const allEpics = [
   traceNotebookTelemetryEpic,
   traceNotebookInfoEpic,
   traceNotebookKernelEpic,
+  resetCellStatusOnExecuteCanceledEpic,
 ];

src/Explorer/Panes/AddCollectionPane.ts

@@ -1,22 +1,22 @@
-import * as _ from "underscore";
-import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
-import * as Constants from "../../Common/Constants";
-import * as DataModels from "../../Contracts/DataModels";
 import * as ko from "knockout";
-import * as PricingUtils from "../../Utils/PricingUtils";
+import * as _ from "underscore";
-import * as SharedConstants from "../../Shared/Constants";
+import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import editable from "../../Common/EditableUtility";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { configContext, Platform } from "../../ConfigContext";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
 import { createCollection } from "../../Common/dataAccess/createCollection";
+import editable from "../../Common/EditableUtility";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { configContext, Platform } from "../../ConfigContext";
+import * as DataModels from "../../Contracts/DataModels";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import * as ViewModels from "../../Contracts/ViewModels";
+import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
+import * as SharedConstants from "../../Shared/Constants";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as PricingUtils from "../../Utils/PricingUtils";
+import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import { ContextualPaneBase } from "./ContextualPaneBase";
 
 export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
   isPreferredApiTable: ko.Computed<boolean>;
@@ -49,7 +49,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   public throughputDatabase: ViewModels.Editable<number>;
   public isPreferredApiTable: ko.Computed<boolean>;
   public partitionKeyPlaceholder: ko.Computed<string>;
-  public isTryCosmosDBSubscription: ko.Computed<boolean>;
+  public isTryCosmosDBSubscription: ko.Observable<boolean>;
   public maxThroughputRU: ko.Observable<number>;
   public minThroughputRU: ko.Observable<number>;
   public throughputRangeText: ko.Computed<string>;
@@ -186,7 +186,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -200,23 +199,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (!this.isSharedAutoPilotSelected()) {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
         );
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+          offerThroughput,
+          userContext.portalEnv,
+          regions,
+          multimaster
+        );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.sharedAutoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.sharedAutoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
@@ -240,7 +244,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -254,28 +257,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (!this.isAutoPilotSelected()) {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.throughputMultiPartition(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedSpendHtml(
           this.throughputMultiPartition(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.autoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.autoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
@@ -285,9 +288,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return estimatedSpend;
     });
 
-    this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
+    this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
-      return (this.container && this.container.isTryCosmosDBSubscription()) || false;
-    });
 
     this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
       if (!!isTryCosmosDB) {
@@ -298,7 +299,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.canRequestSupport = ko.pureComputed(() => {
       if (
         configContext.platform !== Platform.Emulator &&
-        !this.container.isTryCosmosDBSubscription() &&
+        !userContext.isTryCosmosDBSubscription &&
         configContext.platform !== Platform.Portal
       ) {
         const offerThroughput: number = this._getThroughput();
@@ -489,7 +490,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     this.upsellMessage = ko.pureComputed<string>(() => {
       return PricingUtils.getUpsellMessage(
-        this.container.serverId(),
+        userContext.portalEnv,
         this.isFreeTierAccount(),
         this.container.isFirstResourceCreated(),
         this.container.defaultExperience(),

src/Explorer/Panes/AddDatabasePane.ts

@@ -1,19 +1,19 @@
-import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
-import * as Constants from "../../Common/Constants";
-import * as DataModels from "../../Contracts/DataModels";
 import * as ko from "knockout";
-import * as PricingUtils from "../../Utils/PricingUtils";
+import * as Constants from "../../Common/Constants";
-import * as SharedConstants from "../../Shared/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import editable from "../../Common/EditableUtility";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { ContextualPaneBase } from "./ContextualPaneBase";
 import { createDatabase } from "../../Common/dataAccess/createDatabase";
-import { configContext, Platform } from "../../ConfigContext";
+import editable from "../../Common/EditableUtility";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { configContext, Platform } from "../../ConfigContext";
+import * as DataModels from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import * as ViewModels from "../../Contracts/ViewModels";
+import * as SharedConstants from "../../Shared/Constants";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as PricingUtils from "../../Utils/PricingUtils";
+import { ContextualPaneBase } from "./ContextualPaneBase";
 
 export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
@@ -122,7 +122,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -134,10 +133,15 @@ export default class AddDatabasePane extends ContextualPaneBase {
       let estimatedSpendAcknowledge: string;
       let estimatedSpend: string;
       if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+          offerThroughput,
+          userContext.portalEnv,
+          regions,
+          multimaster
+        );
         estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -145,13 +149,13 @@ export default class AddDatabasePane extends ContextualPaneBase {
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.maxAutoPilotThroughputSet(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
         estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.maxAutoPilotThroughputSet(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -165,7 +169,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.canRequestSupport = ko.pureComputed(() => {
       if (
         configContext.platform !== Platform.Emulator &&
-        !this.container.isTryCosmosDBSubscription() &&
+        !userContext.isTryCosmosDBSubscription &&
         configContext.platform !== Platform.Portal
       ) {
         const offerThroughput: number = this.throughput();
@@ -239,7 +243,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
 
     this.upsellMessage = ko.pureComputed<string>(() => {
       return PricingUtils.getUpsellMessage(
-        this.container.serverId(),
+        userContext.portalEnv,
         this.isFreeTierAccount(),
         this.container.isFirstResourceCreated(),
         this.container.defaultExperience(),

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -1,21 +1,21 @@
-import * as _ from "underscore";
-import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
-import * as Constants from "../../Common/Constants";
-import * as DataModels from "../../Contracts/DataModels";
 import * as ko from "knockout";
-import * as PricingUtils from "../../Utils/PricingUtils";
+import * as _ from "underscore";
-import * as SharedConstants from "../../Shared/Constants";
+import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
-import { ContextualPaneBase } from "./ContextualPaneBase";
 import { HashMap } from "../../Common/HashMap";
 import { configContext, Platform } from "../../ConfigContext";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import * as DataModels from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import * as ViewModels from "../../Contracts/ViewModels";
+import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
+import * as SharedConstants from "../../Shared/Constants";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as PricingUtils from "../../Utils/PricingUtils";
+import { CassandraAPIDataClient } from "../Tables/TableDataClient";
+import { ContextualPaneBase } from "./ContextualPaneBase";
 
 export default class CassandraAddCollectionPane extends ContextualPaneBase {
   public createTableQuery: ko.Observable<string>;
@@ -127,7 +127,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -139,10 +138,15 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       let estimatedSpend: string;
       let estimatedDedicatedSpendAcknowledge: string;
       if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+          offerThroughput,
+          userContext.portalEnv,
+          regions,
+          multimaster
+        );
         estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -150,13 +154,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.selectedAutoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
         estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.selectedAutoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -172,7 +176,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -183,10 +186,15 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       let estimatedSpend: string;
       let estimatedSharedSpendAcknowledge: string;
       if (!this.isSharedAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+          this.keyspaceThroughput(),
+          userContext.portalEnv,
+          regions,
+          multimaster
+        );
         estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.keyspaceThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
@@ -194,13 +202,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.sharedAutoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
         estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.sharedAutoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
@@ -215,7 +223,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
     });
 
     this.canRequestSupport = ko.pureComputed(() => {
-      if (configContext.platform !== Platform.Emulator && !this.container.isTryCosmosDBSubscription()) {
+      if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
         const offerThroughput: number = this.throughput();
         return offerThroughput <= 100000;
       }

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx

@@ -133,7 +133,7 @@ describe("Delete Collection Confirmation Pane", () => {
         .simulate("change", { target: { value: selectedCollectionId } });
 
       expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       wrapper.unmount();
@@ -154,7 +154,7 @@ describe("Delete Collection Confirmation Pane", () => {
         .simulate("change", { target: { value: feedbackText } });
 
       expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       const deleteFeedback = new DeleteFeedback(

src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx

@@ -1,20 +1,19 @@
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import * as React from "react";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { Collection } from "../../Contracts/ViewModels";
 import { Text, TextField } from "office-ui-fabric-react";
-import { userContext } from "../../UserContext";
+import * as React from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
 import DeleteFeedback from "../../Common/DeleteFeedback";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { Collection } from "../../Contracts/ViewModels";
+import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
+import { PanelFooterComponent } from "./PanelFooterComponent";
-
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "./PanelLoadingScreen";
 export interface DeleteCollectionConfirmationPanelProps {
   explorer: Explorer;
   closePanel: () => void;
@@ -44,8 +43,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
 
   render(): JSX.Element {
     return (
-      <div className="panelContentContainer">
+      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
-        <PanelErrorComponent {...this.getPanelErrorProps()} />
+        <PanelInfoErrorComponent {...this.getPanelErrorProps()} />
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
             <span className="mandatoryStar">* </span>
@@ -79,18 +78,16 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
             </div>
           )}
         </div>
-        <PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
+        <PanelFooterComponent buttonLabel="OK" />
-        <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
+        {this.state.isExecuting && <PanelLoadingScreen />}
-          <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
+      </form>
-        </div>
-      </div>
     );
   }
 
-  private getPanelErrorProps(): PanelErrorProps {
+  private getPanelErrorProps(): PanelInfoErrorProps {
     if (this.state.formError) {
       return {
-        isWarning: false,
+        messageType: "error",
         message: this.state.formError,
         showErrorDetails: true,
         openNotificationConsole: this.props.openNotificationConsole,
@@ -98,7 +95,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
     }
 
     return {
-      isWarning: true,
+      messageType: "warning",
       showErrorDetails: false,
       message:
         "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
@@ -109,9 +106,10 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
     return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
   }
 
-  public async submit(): Promise<void> {
+  public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
-    const collection = this.props.explorer.findSelectedCollection();
+    event.preventDefault();
 
+    const collection = this.props.explorer.findSelectedCollection();
     if (!collection || this.inputCollectionName !== collection.id()) {
       const errorMessage = "Input collection name does not match the selected collection";
       this.setState({ formError: errorMessage });

src/Explorer/Panes/PanelComponent.less

@@ -1,12 +1,58 @@
 @import "../../../less/Common/Constants";
 
-.panelContentContainer {
+.panelFormWrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
+    padding: 0 34px;
+    margin: 20px 0;
+    overflow: auto;
+
+    & > * {
+      margin-bottom: @DefaultSpace;
+
+      & > * {
+        margin-bottom: @SmallSpace;
+      }
+    }
+
+    .panelInfoIcon {
+      font-size: @mediumFontSize;
+      width: @mediumFontSize;
+      margin: auto 0 auto @SmallSpace;
+      color: @InfoIconColor;
+      cursor: default;
+      vertical-align: middle;
+    }
+
+    .panelTextBold {
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .panelTextField {
+      font-size: @mediumFontSize;
+      border: 1px solid #605e5c;
+      color: #000;
+      padding: 4px 10px;
+      width: @newCollectionPaneInputWidth;
+    }
+
+    .panelRadioBtn {
+      margin: 0;
+    }
+
+    .panelRadioBtnLabel {
+      font-size: @mediumFontSize;
+      padding: 0 @LargeSpace 0 @SmallSpace;
+    }
+
+    .collapsibleSection {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -16,26 +62,30 @@
   font-weight: 400;
 }
 
-.panelWarningErrorContainer {
+.panelInfoErrorContainer {
   background-color: @BaseLow;
   padding: @DefaultSpace;
   display: inline-flex;
-  margin-bottom: 24px;
+  margin: 20px 34px 0 34px;
 
-  .panelWarningIcon {
+  i {
     font-size: @WarningErrorIconSize;
     width: @WarningErrorIconSize;
-    margin: auto 0 auto @SmallSpace;
+    margin-left: @SmallSpace;
+  }
+
+  .panelWarningIcon {
     color: @WarningIconColor;
   }
 
   .panelErrorIcon {
-    font-size: @WarningErrorIconSize;
-    width: @WarningErrorIconSize;
-    margin: auto 0 auto @SmallSpace;
     color: @ErrorIconColor;
   }
 
+  .panelLargeInfoIcon {
+    color: @InfoIconColor;
+  }
+
   .panelWarningErrorDetailsLinkContainer {
     display: flex;
     flex-direction: column;
@@ -48,10 +98,19 @@
   }
 }
 
-.panelFooter button {
+.panelFooter {
+  padding: 20px 34px;
+  border-top: solid 1px #bbbbbb;
+
+  & button {
     height: 30px;
   }
+}
 
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
+
+.panelGroupSpacing > * {
+  margin-bottom: @SmallSpace;
+}

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -9,10 +9,30 @@ export interface PanelContainerProps {
   closePanel: () => void;
 }
 
-export class PanelContainerComponent extends React.Component<PanelContainerProps> {
+export interface PanelContainerState {
+  height: string;
+}
+
+export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
   private static readonly consoleHeaderHeight = 32;
   private static readonly consoleContentHeight = 220;
 
+  constructor(props: PanelContainerProps) {
+    super(props);
+
+    this.state = {
+      height: this.getPanelHeight(),
+    };
+  }
+
+  componentDidMount(): void {
+    window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
+  }
+
   render(): JSX.Element {
     if (!this.props.panelContent) {
       return <></>;
@@ -30,8 +50,10 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         headerClassName="panelHeader"
         styles={{
           navigation: { borderBottom: "1px solid #cccccc" },
-          content: { padding: "24px 34px 20px 34px", height: "100%" },
+          content: { padding: 0, height: "100%" },
           scrollableContent: { height: "100%" },
+          header: { padding: "0 0 8px 34px" },
+          commands: { marginTop: 8 },
         }}
         style={{ height: this.getPanelHeight() }}
       >

src/Explorer/Panes/PanelErrorComponent.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { Icon, Text } from "office-ui-fabric-react";
-
-export interface PanelErrorProps {
-  message: string;
-  isWarning: boolean;
-  showErrorDetails: boolean;
-  openNotificationConsole?: () => void;
-}
-
-export const PanelErrorComponent: React.FunctionComponent<PanelErrorProps> = (props: PanelErrorProps): JSX.Element => (
-  <div className="panelWarningErrorContainer">
-    {props.isWarning ? (
-      <Icon iconName="WarningSolid" className="panelWarningIcon" />
-    ) : (
-      <Icon iconName="StatusErrorFull" className="panelErrorIcon" />
-    )}
-    <span className="panelWarningErrorDetailsLinkContainer">
-      <Text className="panelWarningErrorMessage" variant="small">
-        {props.message}
-      </Text>
-      {props.showErrorDetails && (
-        <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
-          More details
-        </a>
-      )}
-    </span>
-  </div>
-);

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -3,13 +3,12 @@ import { PrimaryButton } from "office-ui-fabric-react";
 
 export interface PanelFooterProps {
   buttonLabel: string;
-  onOKButtonClicked: () => void;
 }
 
 export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
   props: PanelFooterProps
 ): JSX.Element => (
   <div className="panelFooter">
-    <PrimaryButton id="sidePanelOkButton" text={props.buttonLabel} onClick={() => props.onOKButtonClicked()} />
+    <PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
   </div>
 );

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
+
+export interface PanelInfoErrorProps {
+  message: string;
+  messageType: string;
+  showErrorDetails: boolean;
+  link?: string;
+  linkText?: string;
+  openNotificationConsole?: () => void;
+}
+
+export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
+  props: PanelInfoErrorProps
+): JSX.Element => {
+  let icon: JSX.Element;
+  if (props.messageType === "error") {
+    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
+  } else if (props.messageType === "warning") {
+    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
+  } else if (props.messageType === "info") {
+    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
+  }
+
+  return (
+    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
+      {icon}
+      <span className="panelWarningErrorDetailsLinkContainer">
+        <Text className="panelWarningErrorMessage" variant="small">
+          {props.message}{" "}
+          {props.link && props.linkText && (
+            <Link target="_blank" href={props.link}>
+              {props.linkText}
+            </Link>
+          )}
+        </Text>
+        {props.showErrorDetails && (
+          <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
+            More details
+          </a>
+        )}
+      </span>
+    </Stack>
+  );
+};

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
+
+export const PanelLoadingScreen: React.FunctionComponent = () => (
+  <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
+    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
+  </div>
+);

src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -15,20 +15,27 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
   }
   openNotificationConsole={[Function]}
 >
-  <div
+  <form
-    className="panelContentContainer"
+    className="panelFormWrapper"
+    onSubmit={[Function]}
   >
-    <PanelErrorComponent
+    <PanelInfoErrorComponent
-      isWarning={true}
       message="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+      messageType="warning"
       showErrorDetails={false}
+    >
+      <Stack
+        className="panelInfoErrorContainer"
+        horizontal={true}
+        verticalAlign="start"
       >
         <div
-        className="panelWarningErrorContainer"
+          className="ms-Stack panelInfoErrorContainer css-140"
         >
           <StyledIconBase
             className="panelWarningIcon"
             iconName="WarningSolid"
+            key=".0:$.0"
           >
             <IconBase
               className="panelWarningIcon"
@@ -310,7 +317,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <i
                 aria-hidden={true}
-              className="panelWarningIcon root-109"
+                className="panelWarningIcon root-142"
                 data-icon-name="WarningSolid"
               >
                 
@@ -319,20 +326,23 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           </StyledIconBase>
           <span
             className="panelWarningErrorDetailsLinkContainer"
+            key=".0:$.1"
           >
             <Text
               className="panelWarningErrorMessage"
               variant="small"
             >
               <span
-              className="panelWarningErrorMessage css-110"
+                className="panelWarningErrorMessage css-143"
               >
                 Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
+                 
               </span>
             </Text>
           </span>
         </div>
-    </PanelErrorComponent>
+      </Stack>
+    </PanelInfoErrorComponent>
     <div
       className="panelMainContent"
     >
@@ -348,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-110"
+            className="css-143"
           >
             Confirm by typing the collection id
           </span>
@@ -367,6 +377,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         >
           <TextFieldBase
             autoFocus={true}
+            canRevealPassword={false}
             deferredValidationTime={200}
             id="confirmCollectionId"
             onChange={[Function]}
@@ -648,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField root-112"
+              className="ms-TextField root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-113"
+                  className="ms-TextField-fieldGroup fieldGroup-146"
                 >
                   <input
                     aria-invalid={false}
                     autoFocus={true}
-                    className="ms-TextField-field field-114"
+                    className="ms-TextField-field field-147"
                     id="confirmCollectionId"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -682,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-120"
+            className="css-156"
           >
             Help us improve Azure Cosmos DB!
           </span>
@@ -692,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-120"
+            className="css-156"
           >
             What is the reason why you are deleting this container?
           </span>
@@ -711,6 +722,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           }
         >
           <TextFieldBase
+            canRevealPassword={false}
             deferredValidationTime={200}
             id="deleteCollectionFeedbackInput"
             multiline={true}
@@ -994,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField ms-TextField--multiline root-112"
+              className="ms-TextField ms-TextField--multiline root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-121"
+                  className="ms-TextField-fieldGroup fieldGroup-157"
                 >
                   <textarea
                     aria-invalid={false}
-                    className="ms-TextField-field field-122"
+                    className="ms-TextField-field field-158"
                     id="deleteCollectionFeedbackInput"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -1022,19 +1034,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
     </div>
     <PanelFooterComponent
       buttonLabel="OK"
-      onOKButtonClicked={[Function]}
     >
       <div
         className="panelFooter"
       >
         <CustomizedPrimaryButton
           id="sidePanelOkButton"
-          onClick={[Function]}
           text="OK"
+          type="submit"
         >
           <PrimaryButton
             id="sidePanelOkButton"
-            onClick={[Function]}
             text="OK"
             theme={
               Object {
@@ -1309,10 +1319,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 },
               }
             }
+            type="submit"
           >
             <CustomizedDefaultButton
               id="sidePanelOkButton"
-              onClick={[Function]}
               onRenderDescription={[Function]}
               primary={true}
               text="OK"
@@ -1589,10 +1599,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   },
                 }
               }
+              type="submit"
             >
               <DefaultButton
                 id="sidePanelOkButton"
-                onClick={[Function]}
                 onRenderDescription={[Function]}
                 primary={true}
                 text="OK"
@@ -1869,11 +1879,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     },
                   }
                 }
+                type="submit"
               >
                 <BaseButton
                   baseClassName="ms-Button"
                   id="sidePanelOkButton"
-                  onClick={[Function]}
                   onRenderDescription={[Function]}
                   primary={true}
                   split={false}
@@ -1900,7 +1910,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       "iconDisabled": Object {
                         "color": "#a19f9d",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "color": "GrayText",
                           },
                         },
@@ -1926,7 +1936,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       "menuIconDisabled": Object {
                         "color": "#a19f9d",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "color": "GrayText",
                           },
                         },
@@ -1945,7 +1955,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               "position": "absolute",
                               "right": 2,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "bottom": -2,
                                   "left": -2,
                                   "outlineColor": "ButtonText",
@@ -2003,11 +2013,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                                 },
                               },
                             },
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "MsHighContrastAdjust": "none",
                               "backgroundColor": "WindowText",
                               "borderColor": "WindowText",
                               "color": "Window",
+                              "forcedColorAdjust": "none",
                             },
                           },
                         },
@@ -2034,7 +2045,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               "position": "absolute",
                               "right": 2,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "bottom": -2,
                                   "left": -2,
                                   "outlineColor": "ButtonText",
@@ -2066,8 +2077,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           },
                         },
                         Object {
+                          "backgroundColor": "#f3f2f1",
+                          "color": "#d2d0ce",
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Window",
                               "borderColor": "GrayText",
                               "color": "GrayText",
@@ -2084,7 +2097,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "border": "1px solid #106ebe",
                         "color": "#ffffff",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "backgroundColor": "Highlight",
                             "borderColor": "Highlight",
                             "color": "Window",
@@ -2096,11 +2109,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "border": "1px solid #005a9e",
                         "color": "#ffffff",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "MsHighContrastAdjust": "none",
                             "backgroundColor": "WindowText",
                             "borderColor": "WindowText",
                             "color": "Window",
+                            "forcedColorAdjust": "none",
                           },
                         },
                       },
@@ -2116,7 +2130,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       "splitButtonContainer": Array [
                         Object {
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "border": "none",
                             },
                           },
@@ -2134,7 +2148,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               "position": "absolute",
                               "right": 3,
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "none",
                                   "bottom": -2,
                                   "left": -2,
@@ -2163,19 +2177,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                               "borderBottomRightRadius": "0",
                               "borderTopRightRadius": "0",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "MsHighContrastAdjust": "none",
                                   "backgroundColor": "Window",
                                   "border": "1px solid WindowText",
                                   "borderRightWidth": "0",
                                   "color": "WindowText",
+                                  "forcedColorAdjust": "none",
                                 },
                               },
                             },
                             ".ms-Button--primary + .ms-Button": Object {
                               "border": "none",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "border": "1px solid WindowText",
                                   "borderLeftWidth": "0",
                                 },
@@ -2188,10 +2203,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "selectors": Object {
                           ".ms-Button--primary": Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "color": "Window",
+                                "forcedColorAdjust": "none",
                               },
                             },
                           },
@@ -2201,10 +2217,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "selectors": Object {
                           ".ms-Button--primary": Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "MsHighContrastAdjust": "none",
                                 "backgroundColor": "WindowText",
                                 "color": "Window",
+                                "forcedColorAdjust": "none",
                               },
                             },
                           },
@@ -2214,12 +2231,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "border": "none",
                         "outline": "none",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                            "MsHighContrastAdjust": "none",
                             "backgroundColor": "Window",
                             "borderColor": "GrayText",
                             "color": "GrayText",
-                          },
-                          "@media screen and (forced-colors: active)": Object {
                             "forcedColorAdjust": "none",
                           },
                         },
@@ -2231,7 +2247,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "selectors": Object {
                           ".ms-Button--primary": Object {
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Highlight",
                                 "color": "Window",
                               },
@@ -2240,7 +2256,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           ".ms-Button.is-disabled": Object {
                             "color": "#a19f9d",
                             "selectors": Object {
-                              "@media screen and (-ms-high-contrast: active)": Object {
+                              "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                 "backgroundColor": "Window",
                                 "borderColor": "GrayText",
                                 "color": "GrayText",
@@ -2256,7 +2272,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Window",
                             },
                           },
@@ -2268,7 +2284,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "position": "absolute",
                           "right": 31,
                           "selectors": Object {
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "WindowText",
                             },
                           },
@@ -2281,7 +2297,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         "position": "absolute",
                         "right": 31,
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "backgroundColor": "GrayText",
                           },
                         },
@@ -2303,17 +2319,22 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             ":hover": Object {
                               "backgroundColor": "#106ebe",
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "color": "Highlight",
                                 },
                               },
                             },
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "WindowText",
                             },
                           },
                         },
                         Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                            ".ms-Button-menuIcon": Object {
+                              "color": "WindowText",
+                            },
+                          },
                           "border": "1px solid #8a8886",
                           "borderBottomRightRadius": "2px",
                           "borderLeft": "none",
@@ -2359,7 +2380,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           "selectors": Object {
                             ".ms-Button--primary": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "backgroundColor": "Window",
                                   "borderColor": "GrayText",
                                   "color": "GrayText",
@@ -2368,7 +2389,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             },
                             ".ms-Button-menuIcon": Object {
                               "selectors": Object {
-                                "@media screen and (-ms-high-contrast: active)": Object {
+                                "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                                   "color": "GrayText",
                                 },
                               },
@@ -2376,7 +2397,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             ":hover": Object {
                               "cursor": "default",
                             },
-                            "@media screen and (-ms-high-contrast: active)": Object {
+                            "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                               "backgroundColor": "Window",
                               "border": "1px solid GrayText",
                               "color": "GrayText",
@@ -2398,7 +2419,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       "splitButtonMenuIconDisabled": Object {
                         "color": "#a19f9d",
                         "selectors": Object {
-                          "@media screen and (-ms-high-contrast: active)": Object {
+                          "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
                             "color": "GrayText",
                           },
                         },
@@ -2683,10 +2704,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       },
                     }
                   }
+                  type="submit"
                   variantClassName="ms-Button--primary"
                 >
                   <button
-                    className="ms-Button ms-Button--primary root-124"
+                    className="ms-Button ms-Button--primary root-160"
                     data-is-focusable={true}
                     id="sidePanelOkButton"
                     onClick={[Function]}
@@ -2695,17 +2717,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     onKeyUp={[Function]}
                     onMouseDown={[Function]}
                     onMouseUp={[Function]}
-                    type="button"
+                    type="submit"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-125"
+                      className="ms-Button-flexContainer flexContainer-161"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-126"
+                        className="ms-Button-textContainer textContainer-162"
                       >
                         <span
-                          className="ms-Button-label label-128"
+                          className="ms-Button-label label-164"
                           id="id__6"
                           key="id__6"
                         >
@@ -2722,15 +2744,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         </CustomizedPrimaryButton>
       </div>
     </PanelFooterComponent>
-    <div
+  </form>
-      className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
-      hidden={true}
-    >
-      <img
-        className="dataExplorerLoader"
-        src=""
-      />
-    </div>
-  </div>
 </DeleteCollectionConfirmationPanel>
 `;

src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap

@@ -16,9 +16,15 @@ exports[`PaneContainerComponent test should be resize if notification console is
   }
   styles={
     Object {
+      "commands": Object {
+        "marginTop": 8,
+      },
       "content": Object {
         "height": "100%",
-        "padding": "24px 34px 20px 34px",
+        "padding": 0,
+      },
+      "header": Object {
+        "padding": "0 0 8px 34px",
       },
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",
@@ -52,9 +58,15 @@ exports[`PaneContainerComponent test should render with panel content and header
   }
   styles={
     Object {
+      "commands": Object {
+        "marginTop": 8,
+      },
       "content": Object {
         "height": "100%",
-        "padding": "24px 34px 20px 34px",
+        "padding": 0,
+      },
+      "header": Object {
+        "padding": "0 0 8px 34px",
       },
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -1,25 +1,26 @@
 /**
  * Accordion top class
  */
-import * as React from "react";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as Constants from "../../Common/Constants";
 import { Link } from "office-ui-fabric-react/lib/Link";
+import * as React from "react";
+import AddDatabaseIcon from "../../../images/AddDatabase.svg";
+import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
+import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
+import OpenQueryIcon from "../../../images/BrowseQuery.svg";
 import NewContainerIcon from "../../../images/Hero-new-container.svg";
 import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
-import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
-import OpenQueryIcon from "../../../images/BrowseQuery.svg";
-import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
-import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
-import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
-import AddDatabaseIcon from "../../../images/AddDatabase.svg";
 import SampleIcon from "../../../images/Hero-sample.svg";
-import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import Explorer from "../Explorer";
+import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
+import CollectionIcon from "../../../images/tree-collection.svg";
+import { AuthType } from "../../AuthType";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
 import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
-import CollectionIcon from "../../../images/tree-collection.svg";
+import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import Explorer from "../Explorer";
+import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 
 export interface SplashScreenItem {
   iconSrc: string;
@@ -220,7 +221,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   private createCommonTaskItems(): SplashScreenItem[] {
     const items: SplashScreenItem[] = [];
 
-    if (this.container.isAuthWithResourceToken()) {
+    if (userContext.authType === AuthType.ResourceToken) {
       return items;
     }
 

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -1,22 +1,21 @@
 import * as ko from "knockout";
-import * as _ from "underscore";
 import Q from "q";
-
+import * as _ from "underscore";
+import { Areas } from "../../../Common/Constants";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import { CassandraTableKey, CassandraAPIDataClient } from "../TableDataClient";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import DataTableViewModel from "./DataTableViewModel";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
-import * as DataTableUtilities from "./DataTableUtilities";
+import * as Constants from "../Constants";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
+import * as Entities from "../Entities";
+import { CassandraAPIDataClient, CassandraTableKey } from "../TableDataClient";
+import * as TableEntityProcessor from "../TableEntityProcessor";
+import * as Utilities from "../Utilities";
+import * as DataTableUtilities from "./DataTableUtilities";
+import DataTableViewModel from "./DataTableViewModel";
 import TableCommands from "./TableCommands";
 import TableEntityCache from "./TableEntityCache";
-import * as Constants from "../Constants";
-import { Areas } from "../../../Common/Constants";
-import * as Utilities from "../Utilities";
-import * as Entities from "../Entities";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
-import * as TableEntityProcessor from "../TableEntityProcessor";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as ViewModels from "../../../Contracts/ViewModels";
 
 interface IListTableEntitiesSegmentedResult extends Entities.IListTableEntitiesResult {
   ExceedMaximumRetries?: boolean;
@@ -354,8 +353,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
           itemB = new Date(<string>(<any>rowB[col])._);
           break;
         default:
-          itemA = <string>(<any>rowA[col])._.toLowerCase();
+          itemA = <string>(<any>rowA[col])._?.toLowerCase();
-          itemB = <string>(<any>rowB[col])._.toLowerCase();
+          itemB = <string>(<any>rowB[col])._?.toLowerCase();
       }
       var compareResult: number = itemA < itemB ? -1 : itemA > itemB ? 1 : 0;
       if (compareResult !== 0) {

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -136,7 +136,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -150,14 +149,14 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
         estimatedSpend = PricingUtils.getEstimatedSpendHtml(
           // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
           this.overrideWithAutoPilotSettings() ? this.autoPilotThroughput() : this.throughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.autoPilotThroughput(),
-          serverId,
+          userContext.portalEnv,
           regions,
           multimaster
         );
@@ -402,7 +401,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       this._setBaseline();
       this._wasAutopilotOriginallySet(this.isAutoPilotSelected());
     } catch (error) {
-      this.container.isRefreshingExplorer(false);
       this.isExecutionError(true);
       console.error(error);
       const errorMessage = getErrorMessage(error);

src/Explorer/Tabs/GalleryTab.tsx

@@ -36,7 +36,7 @@ export default class GalleryTab extends TabsBase {
       galleryItem: options.galleryItem,
       isFavorite: options.isFavorite,
       selectedTab: options.selectedTab,
-      sortBy: SortBy.MostViewed,
+      sortBy: SortBy.MostRecent,
       searchText: undefined,
     };
     this.galleryAndNotebookViewerComponentAdapter = new GalleryAndNotebookViewerComponentAdapter(

src/Explorer/Tabs/MongoShellTab.ts

@@ -1,18 +1,16 @@
-import * as Constants from "../../Common/Constants";
 import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
+import * as Constants from "../../Common/Constants";
-import AuthHeadersUtil from "../../Platform/Hosted/Authorization";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import Q from "q";
-import TabsBase from "./TabsBase";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { HashMap } from "../../Common/HashMap";
+import { configContext, Platform } from "../../ConfigContext";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { userContext } from "../../UserContext";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import { configContext, Platform } from "../../ConfigContext";
+import TabsBase from "./TabsBase";
 
 export default class MongoShellTab extends TabsBase {
   public url: ko.Computed<string>;
@@ -33,7 +31,7 @@ export default class MongoShellTab extends TabsBase {
       this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
       const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
       let baseUrl = "/content/mongoshell/dist/";
-      if (this._container.serverId() === "localhost") {
+      if (userContext.portalEnv === "localhost") {
         baseUrl = "/content/mongoshell/";
       }
 
@@ -85,10 +83,10 @@ export default class MongoShellTab extends TabsBase {
   }
 
   private handleReadyMessage(event: MessageEvent, shellIframe: HTMLIFrameElement) {
-    if (typeof event.data["data"] !== "string") {
+    if (typeof event.data["kind"] !== "string") {
       return;
     }
-    if (event.data.data !== "ready") {
+    if (event.data.kind !== "ready") {
       return;
     }
 

src/Explorer/Tree/Collection.ts

@@ -4,18 +4,24 @@ import * as _ from "underscore";
 import UploadWorker from "worker-loader!../../workers/upload";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
+import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
 import { readStoredProcedures } from "../../Common/dataAccess/readStoredProcedures";
 import { readTriggers } from "../../Common/dataAccess/readTriggers";
 import { readUserDefinedFunctions } from "../../Common/dataAccess/readUserDefinedFunctions";
-import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
 import * as Logger from "../../Common/Logger";
+import { fetchPortalNotifications } from "../../Common/PortalNotifications";
+import { configContext, Platform } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { StartUploadMessageParams, UploadDetails, UploadDetailsRecord } from "../../workers/upload/definitions";
+import Explorer from "../Explorer";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
 import ConflictsTab from "../Tabs/ConflictsTab";
@@ -32,12 +38,6 @@ import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
-import { configContext, Platform } from "../../ConfigContext";
-import Explorer from "../Explorer";
-import { userContext } from "../../UserContext";
-import { fetchPortalNotifications } from "../../Common/PortalNotifications";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { createDocument } from "../../Common/dataAccess/createDocument";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -1200,7 +1200,6 @@ export default class Collection implements ViewModels.Collection {
 
   public async loadOffer(): Promise<void> {
     if (!this.container.isServerlessEnabled() && !this.offer()) {
-      this.container.isRefreshingExplorer(true);
       const startKey: number = TelemetryProcessor.traceStart(Action.LoadOffers, {
         databaseName: this.databaseId,
         collectionName: this.id(),
@@ -1237,8 +1236,6 @@ export default class Collection implements ViewModels.Collection {
           startKey
         );
         throw error;
-      } finally {
-        this.container.isRefreshingExplorer(false);
       }
     }
   }

src/GalleryViewer/GalleryViewer.tsx

@@ -27,7 +27,7 @@ const onInit = async () => {
   const props: GalleryAndNotebookViewerComponentProps = {
     junoClient: new JunoClient(),
     selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
-    sortBy: galleryViewerProps.sortBy || SortBy.MostViewed,
+    sortBy: galleryViewerProps.sortBy || SortBy.MostRecent,
     searchText: galleryViewerProps.searchText,
   };
 

src/GitHub/GitHubClient.ts

@@ -1,7 +1,7 @@
 import { Octokit } from "@octokit/rest";
 import { HttpStatusCodes } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
-import UrlUtility from "../Common/UrlUtility";
+import * as UrlUtility from "../Common/UrlUtility";
 import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
 import { getErrorMessage } from "../Common/ErrorHandlingUtils";
 

src/GitHub/GitHubContentProvider.ts

@@ -8,7 +8,7 @@ import * as Logger from "../Common/Logger";
 import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
 import { GitHubClient, IGitHubFile, IGitHubResponse } from "./GitHubClient";
 import * as GitHubUtils from "../Utils/GitHubUtils";
-import UrlUtility from "../Common/UrlUtility";
+import * as UrlUtility from "../Common/UrlUtility";
 import { getErrorMessage } from "../Common/ErrorHandlingUtils";
 
 export interface GitHubContentProviderParams {

src/Localization/en/translations.json

@@ -28,7 +28,7 @@
             "Database Throughput": "Database Throughput",
             "UpdateInProgressMessage": "Data is being updated",
             "UpdateCompletedMessageTitle": "Update succeeded",
-            "UpdateCompletedMessageText":  "Data updation completed.",
+            "UpdateCompletedMessageText": "Data update completed.",
             "SubmissionMessageSuccessTitle": "Update started",
             "SubmissionMessageForNewRegionText": "Data update started. Region changed.",
             "SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
@@ -37,6 +37,56 @@
             "OnSaveFailureMessage": "Data save operation not currently permitted."
         },
         "SqlX": {
+            "DedicatedGatewayDescription": "Provision a dedicated gateway cluster for your Azure Cosmos DB account. A dedicated gateway is compute that is a front-end to data in your Azure Cosmos DB account. Your dedicated gateway automatically includes the integrated cache, which can improve read performance. ",
+            "DedicatedGateway": "Dedicated Gateway",
+            "Enable": "Enable",
+            "Disable": "Disable",
+            "LearnAboutDedicatedGateway": "Learn more about dedicated gateway.",
+            "DeprovisioningDetailsText": "Learn more about deprovisioning the dedicated gateway.",
+            "DedicatedGatewayPricing": "Learn more about dedicated gateway pricing",
+            "SKUs": "SKUs",
+            "SKUsPlaceHolder": "Select SKUs",
+            "NumberOfInstances": "Number of instances",
+            "CosmosD4s": "Cosmos.D4s (General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory)",
+            "CosmosD8s": "Cosmos.D8s (General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory)",
+            "CosmosD16s": "Cosmos.D16s (General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory)",
+            "CosmosD32s": "Cosmos.D32s (General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory)",
+            "CreateMessage": "Dedicated gateway resource is being created.",
+            "CreateInitializeTitle": "Provisioning resource",
+            "CreateInitializeMessage": "Dedicated gateway resource will be provisioned.",
+            "CreateSuccessTitle": "Resource provisioned",
+            "CreateSuccesseMessage": "Dedicated gateway resource provisioned.",
+            "CreateFailureTitle": "Failed to provision resource",
+            "CreateFailureMessage": "Dedicated gateway resource provisioning failed.",
+            "UpdateMessage": "Dedicated gateway resource is being updated.",
+            "UpdateInitializeTitle": "Updating resource",
+            "UpdateInitializeMessage": "Dedicated gateway resource will be updated.",
+            "UpdateSuccessTitle": "Resource updated",
+            "UpdateSuccesseMessage": "Dedicated gateway resource updated.",
+            "UpdateFailureTitle": "Failed to update resource",
+            "UpdateFailureMessage": "Dedicated gateway resource updation failed.",
+            "DeleteMessage": "Dedicated gateway resource is being deleted.",
+            "DeleteInitializeTitle": "Deleting resource",
+            "DeleteInitializeMessage": "Dedicated gateway resource will be deleted.",
+            "DeleteSuccessTitle": "Resource deleted",
+            "DeleteSuccesseMessage": "Dedicated gateway resource deleted.",
+            "DeleteFailureTitle": "Failed to delete resource",
+            "DeleteFailureMessage": "Dedicated gateway resource deletion failed.",
+            "CannotSave": "Cannot save the changes to the Dedicated gateway resource at the moment",
+            "DedicatedGatewayEndpoint": "Dedicated gatewayEndpoint",
+            "NoValue": "",
+            "SKUDetails": "SKU Details: ",
+            "CosmosD4Details": "General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory",
+            "CosmosD8Details": "General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory",
+            "CosmosD16Details": "General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory",
+            "CosmosD32Details": "General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory",
+            "Cost": "Cost",
+            "CostText": "Hourly cost of the dedicated gateway resource depends on the SKU selection, number of instances per region, and number of regions.",
+            "ConnectionString": "Connection String",
+            "ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
+            "KeysBlade": "the keys blade",
+            "WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",
+            "WarningBannerOnDelete": "After deprovisioning the dedicated gateway, you must update any applications using the old dedicated gateway connection string."
         }
     }
 }

src/Main.tsx

@@ -37,6 +37,7 @@ import "../less/TableStyles/EntityEditor.less";
 import "../less/TableStyles/fulldatatables.less";
 import "../less/TableStyles/queryBuilder.less";
 import "../less/tree.less";
+import { AuthType } from "./AuthType";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
 import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
@@ -44,11 +45,11 @@ import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
+import "./Explorer/Controls/ThroughputInput/ThroughputInput.less";
 import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import { ExplorerParams } from "./Explorer/Explorer";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
-import { CommandBarComponent } from "./Explorer/Menus/CommandBar/CommandBarComponent";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
@@ -60,13 +61,13 @@ import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import "./Explorer/Tabs/QueryTab.less";
 import { useConfig } from "./hooks/useConfig";
-import { useExplorerState } from "./hooks/useExplorerState";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { useSidePanel } from "./hooks/useSidePanel";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
 import "./Libs/is-integer-polyfill";
 import "./Libs/jquery";
 import "./Shared/appInsights";
+import { userContext } from "./UserContext";
 
 initializeIcons();
 
@@ -101,8 +102,6 @@ const App: React.FunctionComponent = () => {
   const config = useConfig();
   const explorer = useKnockoutExplorer(config?.platform, explorerParams);
 
-  const { commandBarProperties } = useExplorerState(explorer);
-
   if (!explorer) {
     return <LoadingExplorer />;
   }
@@ -111,7 +110,7 @@ const App: React.FunctionComponent = () => {
     <div className="flexContainer">
       <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
         {/* Main Command Bar - Start */}
-        <CommandBarComponent {...commandBarProperties} />
+        <div data-bind="react: commandBarComponentAdapter" />
         {/* Collections Tree and Tabs - Begin */}
         <div className="resourceTreeAndTabs">
           {/* Collections Tree - Start */}
@@ -158,11 +157,11 @@ const App: React.FunctionComponent = () => {
                       </div>
                     </div>
                   </div>
-                  <div
+                  {userContext.authType === AuthType.ResourceToken ? (
-                    style={{ overflowY: "auto" }}
+                    <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
-                    data-bind="if: isAuthWithResourceToken(), react:resourceTreeForResourceToken"
+                  ) : (
-                  />
+                    <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
-                  <div style={{ overflowY: "auto" }} data-bind="if: !isAuthWithResourceToken(), react:resourceTree" />
+                  )}
                 </div>
                 {/*  Collections Window - End */}
               </div>
@@ -212,10 +211,7 @@ const App: React.FunctionComponent = () => {
             {/* Splitter - End */}
           </div>
           {/* Collections Tree - End */}
-          <div
+          <div className="connectExplorerContainer" data-bind="visible: tabsManager.openedTabs().length === 0">
-            className="connectExplorerContainer"
-            data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
-          >
             <form className="connectExplorerFormContainer">
               <SplashScreen explorer={explorer} />
             </form>

src/ResourceProvider/ResourceProviderClient.ts

@@ -3,7 +3,7 @@ import { HttpStatusCodes } from "../Common/Constants";
 import { IResourceProviderClient, IResourceProviderRequestOptions } from "./IResourceProviderClient";
 import { OperationStatus } from "../Contracts/DataModels";
 import { TokenProviderFactory } from "../TokenProviders/TokenProviderFactory";
-import UrlUtility from "../Common/UrlUtility";
+import * as UrlUtility from "../Common/UrlUtility";
 
 export class ResourceProviderClient<T> implements IResourceProviderClient<T> {
   private httpClient: HttpClient;

src/RouteHandlers/TabRouteHandler.ts

@@ -1,9 +1,8 @@
+import crossroads from "crossroads";
+import hasher from "hasher";
 import * as _ from "underscore";
 import * as Constants from "../Common/Constants";
 import * as ViewModels from "../Contracts/ViewModels";
-
-import crossroads from "crossroads";
-import hasher from "hasher";
 import ScriptTabBase from "../Explorer/Tabs/ScriptTabBase";
 import TabsBase from "../Explorer/Tabs/TabsBase";
 
@@ -398,14 +397,7 @@ export class TabRouteHandler {
 
   private _executeActionHelper(action: () => void): void {
     const explorer = window.dataExplorer;
-    if (!!explorer && (explorer.isRefreshingExplorer() || !explorer.isAccountReady())) {
+    if (explorer && explorer.isAccountReady()) {
-      const refreshSubscription = explorer.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
-        if (!isRefreshing) {
-          action();
-          refreshSubscription.dispose();
-        }
-      });
-    } else {
       action();
     }
   }

src/SelfServe/Example/SelfServeExample.tsx

@@ -1,4 +1,4 @@
-import { PropertyInfo, OnChange, Values, IsDisplayable, RefreshOptions } from "../Decorators";
+import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
 import {
   ChoiceItem,
   Description,
@@ -12,14 +12,14 @@ import {
   SmartUiInput,
 } from "../SelfServeTypes";
 import {
+  getMaxCollectionThroughput,
+  getMaxDatabaseThroughput,
+  getMinCollectionThroughput,
+  getMinDatabaseThroughput,
+  initialize,
   onRefreshSelfServeExample,
   Regions,
   update,
-  initialize,
-  getMinDatabaseThroughput,
-  getMaxDatabaseThroughput,
-  getMinCollectionThroughput,
-  getMaxCollectionThroughput,
 } from "./SelfServeExample.rp";
 
 const regionDropdownItems: ChoiceItem[] = [
@@ -203,11 +203,7 @@ export default class SelfServeExample extends SelfServeBaseClass {
   public initialize = async (): Promise<Map<string, SmartUiInput>> => {
     const initializeResponse = await initialize();
     const defaults = new Map<string, SmartUiInput>();
-    const currentRegionText = `current region selected is ${initializeResponse.regions}`;
+    defaults.set("currentRegionText", undefined);
-    defaults.set("currentRegionText", {
-      value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description,
-      hidden: false,
-    });
     defaults.set("regions", { value: initializeResponse.regions });
     defaults.set("enableLogging", { value: initializeResponse.enableLogging });
     const accountName = initializeResponse.accountName;

src/SelfServe/SelfServe.tsx

@@ -1,17 +1,17 @@
+import { Spinner, SpinnerSize } from "office-ui-fabric-react";
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import { sendMessage } from "../Common/MessageHandler";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
+import { sendReadyMessage } from "../Common/MessageHandler";
+import { configContext, updateConfigContext } from "../ConfigContext";
+import { SelfServeFrameInputs } from "../Contracts/ViewModels";
+import { updateUserContext } from "../UserContext";
 import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
+import "./SelfServe.less";
 import { SelfServeComponent } from "./SelfServeComponent";
 import { SelfServeDescriptor } from "./SelfServeTypes";
 import { SelfServeType } from "./SelfServeUtils";
-import { SelfServeFrameInputs } from "../Contracts/ViewModels";
-import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
-import { configContext, updateConfigContext } from "../ConfigContext";
-import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { updateUserContext } from "../UserContext";
-import "./SelfServe.less";
-import { Spinner, SpinnerSize } from "office-ui-fabric-react";
 initializeIcons();
 
 const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
@@ -89,4 +89,4 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
 ReactDOM.render(renderSpinner(), document.getElementById("selfServeContent"));
 window.addEventListener("message", handleMessage, false);
-sendMessage("ready");
+sendReadyMessage();

src/SelfServe/SelfServeComponent.tsx

@@ -1,34 +1,36 @@
-import React from "react";
+import { TFunction } from "i18next";
 import {
   CommandBar,
   ICommandBarItemProps,
-  IStackTokens,
   MessageBar,
   MessageBarType,
+  Separator,
   Spinner,
   SpinnerSize,
   Stack,
 } from "office-ui-fabric-react";
+import promiseRetry, { AbortError } from "p-retry";
+import React from "react";
+import { Translation } from "react-i18next";
+import * as _ from "underscore";
+import { sendMessage } from "../Common/MessageHandler";
+import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
+import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import "../i18n";
+import { commandBarItemStyles, commandBarStyles, containerStackTokens, separatorStyles } from "./SelfServeStyles";
 import {
   AnyDisplay,
-  Node,
+  BooleanInput,
+  ChoiceInput,
+  DescriptionDisplay,
   InputType,
+  Node,
+  NumberInput,
   RefreshResult,
   SelfServeDescriptor,
   SmartUiInput,
-  DescriptionDisplay,
   StringInput,
-  NumberInput,
-  BooleanInput,
-  ChoiceInput,
 } from "./SelfServeTypes";
-import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
-import { Translation } from "react-i18next";
-import { TFunction } from "i18next";
-import "../i18n";
-import { sendMessage } from "../Common/MessageHandler";
-import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
-import promiseRetry, { AbortError } from "p-retry";
 
 interface SelfServeNotification {
   message: string;
@@ -127,7 +129,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     this.props.descriptor.inputNames.map((inputName) => {
       let initialValue = initialValues.get(inputName);
       if (!initialValue) {
-        initialValue = { value: undefined, hidden: false };
+        initialValue = { value: undefined, hidden: false, disabled: false };
       }
       currentValues = currentValues.set(inputName, initialValue);
       baselineValues = baselineValues.set(inputName, initialValue);
@@ -311,34 +313,41 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     this.performSave();
   };
 
-  public isDiscardButtonDisabled = (): boolean => {
+  public isInputModified = (): boolean => {
-    if (this.state.isSaving) {
-      return true;
-    }
     for (const key of this.state.currentValues.keys()) {
-      const currentValue = JSON.stringify(this.state.currentValues.get(key));
+      const currentValue = this.state.currentValues.get(key);
-      const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
+      if (currentValue && currentValue.hidden === undefined) {
+        currentValue.hidden = false;
+      }
+      if (currentValue && currentValue.disabled === undefined) {
+        currentValue.disabled = false;
+      }
 
-      if (currentValue !== baselineValue) {
+      const baselineValue = this.state.baselineValues.get(key);
-        return false;
+      if (baselineValue && baselineValue.hidden === undefined) {
+        baselineValue.hidden = false;
       }
+      if (baselineValue && baselineValue.disabled === undefined) {
+        baselineValue.disabled = false;
       }
+
+      if (!_.isEqual(currentValue, baselineValue)) {
         return true;
+      }
+    }
+    return false;
+  };
+
+  public isRefreshing = (): boolean => {
+    return this.state.isSaving || this.state.isInitializing || this.state.refreshResult?.isUpdateInProgress;
+  };
+
+  public isDiscardButtonDisabled = (): boolean => {
+    return this.isRefreshing() || !this.isInputModified();
   };
 
   public isSaveButtonDisabled = (): boolean => {
-    if (this.state.hasErrors || this.state.isSaving) {
+    return this.state.hasErrors || this.isRefreshing() || !this.isInputModified();
-      return true;
-    }
-    for (const key of this.state.currentValues.keys()) {
-      const currentValue = JSON.stringify(this.state.currentValues.get(key));
-      const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
-
-      if (currentValue !== baselineValue) {
-        return false;
-      }
-    }
-    return true;
   };
 
   private performRefresh = async (): Promise<void> => {
@@ -397,7 +406,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
         key: "save",
         text: this.getCommonTranslation("Save"),
         iconProps: { iconName: "Save" },
-        split: true,
         disabled: this.isSaveButtonDisabled(),
         onClick: () => this.onSaveButtonClick(),
       },
@@ -405,21 +413,21 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
         key: "discard",
         text: this.getCommonTranslation("Discard"),
         iconProps: { iconName: "Undo" },
-        split: true,
         disabled: this.isDiscardButtonDisabled(),
         onClick: () => {
           this.discard();
         },
+        buttonStyles: commandBarItemStyles,
       },
       {
         key: "refresh",
         text: this.getCommonTranslation("Refresh"),
         disabled: this.state.isInitializing,
         iconProps: { iconName: "Refresh" },
-        split: true,
         onClick: () => {
           this.onRefreshClicked();
         },
+        buttonStyles: commandBarItemStyles,
       },
     ];
   };
@@ -432,7 +440,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
   };
 
   public render(): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 5 };
     if (this.state.compileErrorMessage) {
       return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>;
     }
@@ -445,13 +452,13 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
 
           return (
             <div style={{ overflowX: "auto" }}>
-              <Stack tokens={containerStackTokens} styles={{ root: { padding: 10 } }}>
+              <Stack tokens={containerStackTokens}>
-                <CommandBar styles={{ root: { paddingLeft: 0 } }} items={this.getCommandBarItems()} />
+                <Stack.Item>
+                  <CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
+                  <Separator styles={separatorStyles} />
+                </Stack.Item>
                 {this.state.isInitializing ? (
-                  <Spinner
+                  <Spinner size={SpinnerSize.large} />
-                    size={SpinnerSize.large}
-                    styles={{ root: { textAlign: "center", justifyContent: "center", width: "100%", height: "100%" } }}
-                  />
                 ) : (
                   <>
                     {this.state.notification && (

src/SelfServe/SelfServeStyles.tsx

@@ -0,0 +1,20 @@
+import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "office-ui-fabric-react";
+import { StyleConstants } from "../Common/Constants";
+
+export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };
+
+export const commandBarStyles: ICommandBarStyles = { root: { paddingLeft: 0 } };
+
+export const containerStackTokens: IStackTokens = { childrenGap: 5, padding: 10 };
+
+export const separatorStyles: Partial<ISeparatorStyles> = {
+  root: {
+    selectors: {
+      "::before": {
+        background: StyleConstants.BaseMedium,
+      },
+    },
+    padding: 0,
+    height: 1,
+  },
+};

src/SelfServe/SelfServeUtils.tsx

@@ -1,6 +1,6 @@
 import "reflect-metadata";
+import { userContext } from "../UserContext";
 import {
-  Node,
   AnyDisplay,
   BooleanInput,
   ChoiceInput,
@@ -10,13 +10,13 @@ import {
   Info,
   InputType,
   InputTypeValue,
+  Node,
   NumberInput,
+  RefreshParams,
   SelfServeDescriptor,
   SmartUiInput,
   StringInput,
-  RefreshParams,
 } from "./SelfServeTypes";
-import { userContext } from "../UserContext";
 
 export enum SelfServeType {
   // No self serve type passed, launch explorer
@@ -195,5 +195,5 @@ export const generateBladeLink = (blade: BladeType): string => {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroupName = userContext.resourceGroup;
   const databaseAccountName = userContext.databaseAccount.name;
-  return `www.portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
+  return `https://portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
 };

src/SelfServe/SqlX/SqlX.rp.ts

@@ -1,33 +1,98 @@
 import { RefreshResult } from "../SelfServeTypes";
+import { userContext } from "../../UserContext";
+import { armRequestWithoutPolling } from "../../Utils/arm/request";
+import { configContext } from "../../ConfigContext";
+import { SqlxServiceResource, UpdateDedicatedGatewayRequestParameters } from "./SqlxTypes";
+
+const apiVersion = "2020-06-01-preview";
+
+export enum ResourceStatus {
+  Running = "Running",
+  Creating = "Creating",
+  Updating = "Updating",
+  Deleting = "Deleting",
+}
 
 export interface DedicatedGatewayResponse {
   sku: string;
   instances: number;
+  status: string;
+  endpoint: string;
 }
 
-export const getRegionSpecificMinInstances = async (): Promise<number> => {
+export const getPath = (subscriptionId: string, resourceGroup: string, name: string): string => {
-  // TODO: write RP call to get min number of instances needed for this region
+  return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}/services/sqlx`;
-  throw new Error("getRegionSpecificMinInstances not implemented");
 };
 
-export const getRegionSpecificMaxInstances = async (): Promise<number> => {
+export const updateDedicatedGatewayResource = async (sku: string, instances: number): Promise<string> => {
-  // TODO: write RP call to get max number of instances needed for this region
+  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  throw new Error("getRegionSpecificMaxInstances not implemented");
+  const body: UpdateDedicatedGatewayRequestParameters = {
+    properties: {
+      instanceSize: sku,
+      instanceCount: instances,
+      serviceType: "Sqlx",
+    },
+  };
+  const armRequestResult = await armRequestWithoutPolling({
+    host: configContext.ARM_ENDPOINT,
+    path,
+    method: "PUT",
+    apiVersion,
+    body,
+  });
+  return armRequestResult.operationStatusUrl;
 };
 
-export const updateDedicatedGatewayProvisioning = async (sku: string, instances: number): Promise<void> => {
+export const deleteDedicatedGatewayResource = async (): Promise<string> => {
-  // TODO: write RP call to update dedicated gateway provisioning
+  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  throw new Error(
+  const armRequestResult = await armRequestWithoutPolling({
-    `updateDedicatedGatewayProvisioning not implemented. Parameters- sku: ${sku}, instances:${instances}`
+    host: configContext.ARM_ENDPOINT,
-  );
+    path,
+    method: "DELETE",
+    apiVersion,
+  });
+  return armRequestResult.operationStatusUrl;
 };
 
-export const initializeDedicatedGatewayProvisioning = async (): Promise<DedicatedGatewayResponse> => {
+export const getDedicatedGatewayResource = async (): Promise<SqlxServiceResource> => {
-  // TODO: write RP call to initialize UI for dedicated gateway provisioning
+  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  throw new Error("initializeDedicatedGatewayProvisioning not implemented");
+  const armRequestResult = await armRequestWithoutPolling<SqlxServiceResource>({
+    host: configContext.ARM_ENDPOINT,
+    path,
+    method: "GET",
+    apiVersion,
+  });
+  return armRequestResult.result;
+};
+
+export const getCurrentProvisioningState = async (): Promise<DedicatedGatewayResponse> => {
+  try {
+    const response = await getDedicatedGatewayResource();
+    return {
+      sku: response.properties.instanceSize,
+      instances: response.properties.instanceCount,
+      status: response.properties.status,
+      endpoint: response.properties.sqlxEndPoint,
+    };
+  } catch (e) {
+    return { sku: undefined, instances: undefined, status: undefined, endpoint: undefined };
+  }
 };
 
 export const refreshDedicatedGatewayProvisioning = async (): Promise<RefreshResult> => {
-  // TODO: write RP call to check if dedicated gateway update has gone through
+  try {
-  throw new Error("refreshDedicatedGatewayProvisioning not implemented");
+    const response = await getDedicatedGatewayResource();
+    if (response.properties.status === ResourceStatus.Running.toString()) {
+      return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
+    } else if (response.properties.status === ResourceStatus.Creating.toString()) {
+      return { isUpdateInProgress: true, updateInProgressMessageTKey: "CreateMessage" };
+    } else if (response.properties.status === ResourceStatus.Deleting.toString()) {
+      return { isUpdateInProgress: true, updateInProgressMessageTKey: "DeleteMessage" };
+    } else {
+      return { isUpdateInProgress: true, updateInProgressMessageTKey: "UpdateMessage" };
+    }
+  } catch {
+    //TODO differentiate between different failures
+    return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
+  }
 };

src/SelfServe/SqlX/SqlX.tsx

@@ -1,6 +1,7 @@
-import { IsDisplayable, OnChange, Values } from "../Decorators";
+import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
 import {
   ChoiceItem,
+  Description,
   DescriptionType,
   InputType,
   NumberUiType,
@@ -9,65 +10,284 @@ import {
   SelfServeBaseClass,
   SmartUiInput,
 } from "../SelfServeTypes";
-import { refreshDedicatedGatewayProvisioning } from "./SqlX.rp";
+import { BladeType, generateBladeLink } from "../SelfServeUtils";
+import {
+  deleteDedicatedGatewayResource,
+  getCurrentProvisioningState,
+  refreshDedicatedGatewayProvisioning,
+  updateDedicatedGatewayResource,
+} from "./SqlX.rp";
+
+const costPerHourValue: Description = {
+  textTKey: "CostText",
+  type: DescriptionType.Text,
+  link: {
+    href: "https://azure.microsoft.com/en-us/pricing/details/cosmos-db/",
+    textTKey: "DedicatedGatewayPricing",
+  },
+};
+
+const connectionStringValue: Description = {
+  textTKey: "ConnectionStringText",
+  type: DescriptionType.Text,
+  link: {
+    href: generateBladeLink(BladeType.SqlKeys),
+    textTKey: "KeysBlade",
+  },
+};
+
+const CosmosD4s = "Cosmos.D4s";
+const CosmosD8s = "Cosmos.D8s";
+const CosmosD16s = "Cosmos.D16s";
+const CosmosD32s = "Cosmos.D32s";
+
+const getSKUDetails = (sku: string): string => {
+  if (sku === CosmosD4s) {
+    return "CosmosD4Details";
+  } else if (sku === CosmosD8s) {
+    return "CosmosD8Details";
+  } else if (sku === CosmosD16s) {
+    return "CosmosD16Details";
+  } else if (sku === CosmosD32s) {
+    return "CosmosD32Details";
+  }
+  return "Not Supported Yet";
+};
+
+const onSKUChange = (newValue: InputType, currentValues: Map<string, SmartUiInput>): Map<string, SmartUiInput> => {
+  currentValues.set("sku", { value: newValue });
+  currentValues.set("skuDetails", {
+    value: { textTKey: getSKUDetails(`${newValue.toString()}`), type: DescriptionType.Text } as Description,
+  });
+  currentValues.set("costPerHour", { value: costPerHourValue });
+  return currentValues;
+};
+
+const onNumberOfInstancesChange = (
+  newValue: InputType,
+  currentValues: Map<string, SmartUiInput>
+): Map<string, SmartUiInput> => {
+  currentValues.set("instances", { value: newValue });
+  currentValues.set("warningBanner", {
+    value: { textTKey: "WarningBannerOnUpdate" } as Description,
+    hidden: false,
+  });
+
+  return currentValues;
+};
 
 const onEnableDedicatedGatewayChange = (
   newValue: InputType,
-  currentState: Map<string, SmartUiInput>
+  currentValues: Map<string, SmartUiInput>,
+  baselineValues: ReadonlyMap<string, SmartUiInput>
 ): Map<string, SmartUiInput> => {
-  const sku = currentState.get("sku");
+  currentValues.set("enableDedicatedGateway", { value: newValue });
-  const instances = currentState.get("instances");
+  const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
-  const isSkuHidden = newValue === undefined || !(newValue as boolean);
+  if (dedicatedGatewayOriginallyEnabled === newValue) {
-  currentState.set("enableDedicatedGateway", { value: newValue });
+    currentValues.set("sku", baselineValues.get("sku"));
-  currentState.set("sku", { value: sku.value, hidden: isSkuHidden });
+    currentValues.set("instances", baselineValues.get("instances"));
-  currentState.set("instances", { value: instances.value, hidden: isSkuHidden });
+    currentValues.set("skuDetails", baselineValues.get("skuDetails"));
-  return currentState;
+    currentValues.set("costPerHour", baselineValues.get("costPerHour"));
+    currentValues.set("warningBanner", baselineValues.get("warningBanner"));
+    currentValues.set("connectionString", baselineValues.get("connectionString"));
+    return currentValues;
+  }
+
+  currentValues.set("warningBanner", undefined);
+  if (newValue === true) {
+    currentValues.set("warningBanner", {
+      value: {
+        textTKey: "WarningBannerOnUpdate",
+        link: {
+          href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+          textTKey: "DedicatedGatewayPricing",
+        },
+      } as Description,
+      hidden: false,
+    });
+  } else {
+    currentValues.set("warningBanner", {
+      value: {
+        textTKey: "WarningBannerOnDelete",
+        link: {
+          href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
+          textTKey: "DeprovisioningDetailsText",
+        },
+      } as Description,
+      hidden: false,
+    });
+  }
+  const sku = currentValues.get("sku");
+  const instances = currentValues.get("instances");
+  const hideAttributes = newValue === undefined || !(newValue as boolean);
+  currentValues.set("sku", {
+    value: sku.value,
+    hidden: hideAttributes,
+    disabled: dedicatedGatewayOriginallyEnabled,
+  });
+  currentValues.set("instances", {
+    value: instances.value,
+    hidden: hideAttributes,
+    disabled: dedicatedGatewayOriginallyEnabled,
+  });
+
+  currentValues.set("skuDetails", {
+    value: { textTKey: getSKUDetails(`${currentValues.get("sku").value}`), type: DescriptionType.Text } as Description,
+    hidden: hideAttributes,
+    disabled: dedicatedGatewayOriginallyEnabled,
+  });
+
+  currentValues.set("costPerHour", { value: costPerHourValue, hidden: hideAttributes });
+  currentValues.set("connectionString", {
+    value: connectionStringValue,
+    hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
+  });
+
+  return currentValues;
 };
 
+const skuDropDownItems: ChoiceItem[] = [
+  { label: "CosmosD4s", key: CosmosD4s },
+  { label: "CosmosD8s", key: CosmosD8s },
+  { label: "CosmosD16s", key: CosmosD16s },
+  { label: "CosmosD32s", key: CosmosD32s },
+];
+
 const getSkus = async (): Promise<ChoiceItem[]> => {
-  // TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
+  return skuDropDownItems;
-  throw new Error("getSkus not implemented.");
 };
 
 const getInstancesMin = async (): Promise<number> => {
-  // TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
+  return 1;
-  throw new Error("getInstancesMin not implemented.");
 };
 
 const getInstancesMax = async (): Promise<number> => {
-  // TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
+  return 5;
-  throw new Error("getInstancesMax not implemented.");
-};
-
-const validate = (currentValues: Map<string, SmartUiInput>): void => {
-  // TODO: add cusom validation logic to be called before Saving the data.
-  throw new Error(`validate not implemented. No. of properties to validate: ${currentValues.size}`);
 };
 
 @IsDisplayable()
+@RefreshOptions({ retryIntervalInMs: 20000 })
 export default class SqlX extends SelfServeBaseClass {
   public onRefresh = async (): Promise<RefreshResult> => {
-    return refreshDedicatedGatewayProvisioning();
+    return await refreshDedicatedGatewayProvisioning();
   };
 
-  public onSave = async (currentValues: Map<string, SmartUiInput>): Promise<OnSaveResult> => {
+  public onSave = async (
-    validate(currentValues);
+    currentValues: Map<string, SmartUiInput>,
-    // TODO: add pre processing logic before calling the updateDedicatedGatewayProvisioning() RP call.
+    baselineValues: Map<string, SmartUiInput>
-    throw new Error(`onSave not implemented. No. of properties to save: ${currentValues.size}`);
+  ): Promise<OnSaveResult> => {
+    const dedicatedGatewayCurrentlyEnabled = currentValues.get("enableDedicatedGateway")?.value as boolean;
+    const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
+
+    currentValues.set("warningBanner", undefined);
+
+    //TODO : Add try catch for each RP call and return relevant notifications
+    if (dedicatedGatewayOriginallyEnabled) {
+      if (!dedicatedGatewayCurrentlyEnabled) {
+        const operationStatusUrl = await deleteDedicatedGatewayResource();
+        return {
+          operationStatusUrl: operationStatusUrl,
+          portalNotification: {
+            initialize: {
+              titleTKey: "DeleteInitializeTitle",
+              messageTKey: "DeleteInitializeMessage",
+            },
+            success: {
+              titleTKey: "DeleteSuccessTitle",
+              messageTKey: "DeleteSuccesseMessage",
+            },
+            failure: {
+              titleTKey: "DeleteFailureTitle",
+              messageTKey: "DeleteFailureMessage",
+            },
+          },
+        };
+      } else {
+        // Check for scaling up/down/in/out
+        return {
+          operationStatusUrl: undefined,
+          portalNotification: {
+            initialize: {
+              titleTKey: "UpdateInitializeTitle",
+              messageTKey: "UpdateInitializeMessage",
+            },
+            success: {
+              titleTKey: "UpdateSuccessTitle",
+              messageTKey: "UpdateSuccesseMessage",
+            },
+            failure: {
+              titleTKey: "UpdateFailureTitle",
+              messageTKey: "UpdateFailureMessage",
+            },
+          },
+        };
+      }
+    } else {
+      const sku = currentValues.get("sku")?.value as string;
+      const instances = currentValues.get("instances").value as number;
+      const operationStatusUrl = await updateDedicatedGatewayResource(sku, instances);
+      return {
+        operationStatusUrl: operationStatusUrl,
+        portalNotification: {
+          initialize: {
+            titleTKey: "CreateInitializeTitle",
+            messageTKey: "CreateInitializeTitle",
+          },
+          success: {
+            titleTKey: "CreateSuccessTitle",
+            messageTKey: "CreateSuccesseMessage",
+          },
+          failure: {
+            titleTKey: "CreateFailureTitle",
+            messageTKey: "CreateFailureMessage",
+          },
+        },
+      };
+    }
   };
 
   public initialize = async (): Promise<Map<string, SmartUiInput>> => {
-    // TODO: get initialization data from initializeDedicatedGatewayProvisioning() RP call.
+    // Based on the RP call enableDedicatedGateway will be true if it has not yet been enabled and false if it has.
-    throw new Error("onSave not implemented");
+    const defaults = new Map<string, SmartUiInput>();
+    defaults.set("enableDedicatedGateway", { value: false });
+    defaults.set("sku", { value: CosmosD4s, hidden: true });
+    defaults.set("instances", { value: await getInstancesMin(), hidden: true });
+    defaults.set("skuDetails", undefined);
+    defaults.set("costPerHour", undefined);
+    defaults.set("connectionString", undefined);
+
+    const response = await getCurrentProvisioningState();
+    if (response.status && response.status !== "Deleting") {
+      defaults.set("enableDedicatedGateway", { value: true });
+      defaults.set("sku", { value: response.sku, disabled: true });
+      defaults.set("instances", { value: response.instances, disabled: true });
+      defaults.set("costPerHour", { value: costPerHourValue });
+      defaults.set("skuDetails", {
+        value: { textTKey: getSKUDetails(`${defaults.get("sku").value}`), type: DescriptionType.Text } as Description,
+        hidden: false,
+      });
+      defaults.set("connectionString", {
+        value: connectionStringValue,
+        hidden: false,
+      });
+    }
+
+    defaults.set("warningBanner", undefined);
+    return defaults;
   };
 
+  @Values({
+    isDynamicDescription: true,
+  })
+  warningBanner: string;
+
   @Values({
     description: {
-      textTKey: "Provisioning dedicated gateways for SqlX accounts.",
+      textTKey: "DedicatedGatewayDescription",
       type: DescriptionType.Text,
       link: {
         href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-        textTKey: "Learn more about dedicated gateway.",
+        textTKey: "LearnAboutDedicatedGateway",
       },
     },
   })
@@ -76,24 +296,44 @@ export default class SqlX extends SelfServeBaseClass {
   @OnChange(onEnableDedicatedGatewayChange)
   @Values({
     labelTKey: "DedicatedGateway",
-    trueLabelTKey: "Enable",
+    trueLabelTKey: "Provisioned",
-    falseLabelTKey: "Disable",
+    falseLabelTKey: "Deprovisioned",
   })
   enableDedicatedGateway: boolean;
 
+  @OnChange(onSKUChange)
   @Values({
     labelTKey: "SKUs",
     choices: getSkus,
-    placeholderTKey: "Select SKUs",
+    placeholderTKey: "SKUsPlaceHolder",
   })
   sku: ChoiceItem;
 
   @Values({
-    labelTKey: "Number of instances",
+    labelTKey: "SKUDetails",
+    isDynamicDescription: true,
+  })
+  skuDetails: string;
+
+  @OnChange(onNumberOfInstancesChange)
+  @Values({
+    labelTKey: "NumberOfInstances",
     min: getInstancesMin,
     max: getInstancesMax,
     step: 1,
     uiType: NumberUiType.Spinner,
   })
   instances: number;
+
+  @Values({
+    labelTKey: "Cost",
+    isDynamicDescription: true,
+  })
+  costPerHour: string;
+
+  @Values({
+    labelTKey: "ConnectionString",
+    isDynamicDescription: true,
+  })
+  connectionString: string;
 }

src/SelfServe/SqlX/SqlxTypes.ts

@@ -0,0 +1,31 @@
+export type SqlxServiceResource = {
+  id: string;
+  name: string;
+  type: string;
+  properties: SqlxServiceProps;
+  locations: SqlxServiceLocations;
+};
+export type SqlxServiceProps = {
+  serviceType: string;
+  creationTime: string;
+  status: string;
+  instanceSize: string;
+  instanceCount: number;
+  sqlxEndPoint: string;
+};
+
+export type SqlxServiceLocations = {
+  location: string;
+  status: string;
+  sqlxEndpoint: string;
+};
+
+export type UpdateDedicatedGatewayRequestParameters = {
+  properties: UpdateDedicatedGatewayRequestProperties;
+};
+
+export type UpdateDedicatedGatewayRequestProperties = {
+  instanceSize: string;
+  instanceCount: number;
+  serviceType: string;
+};

src/UserContext.ts

@@ -20,11 +20,14 @@ interface UserContext {
   // API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
   // This is coming in a future Cosmos ARM API version as a prperty on databaseAccount
   apiType?: ApiType;
+  isTryCosmosDBSubscription?: boolean;
+  portalEnv?: PortalEnv;
 }
 
 type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
+export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
 
-const userContext: UserContext = {};
+const userContext: UserContext = { isTryCosmosDBSubscription: false, portalEnv: "prod" };
 
 function updateUserContext(newContext: UserContext): void {
   Object.assign(userContext, newContext);

src/hooks/useExplorerState.ts

@@ -1,15 +0,0 @@
-import { useState } from "react";
-import Explorer from "../Explorer/Explorer";
-
-export interface ExplorerStateProperties {
-  commandBarProperties: {
-
-  }
-}
-
-export const useExplorerState = (container: Explorer): ExplorerStateProperties => {
-  const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
-
-
-  return {};
-};

src/hooks/useKnockoutExplorer.ts

@@ -3,7 +3,7 @@ import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, DefaultAccountExperience } from "../Common/Constants";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendMessage } from "../Common/MessageHandler";
+import { sendReadyMessage } from "../Common/MessageHandler";
 import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
@@ -25,7 +25,7 @@ import {
   getDatabaseAccountPropertiesFromMetadata,
 } from "../Platform/Hosted/HostedUtils";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
-import { updateUserContext } from "../UserContext";
+import { PortalEnv, updateUserContext } from "../UserContext";
 import { listKeys } from "../Utils/arm/generatedClients/2020-04-01/databaseAccounts";
 import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 
@@ -78,18 +78,22 @@ async function configureHosted(explorerParams: ExplorerParams): Promise<Explorer
 }
 
 async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParams): Promise<Explorer> {
+  // TODO: Refactor. updateUserContext needs to be called twice because listKeys below depends on userContext.authorizationToken
+  updateUserContext({
+    authType: AuthType.AAD,
+    authorizationToken: `Bearer ${config.authorizationToken}`,
+  });
   const account = config.databaseAccount;
   const accountResourceId = account.id;
   const subscriptionId = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
   const resourceGroup = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
+  const keys = await listKeys(subscriptionId, resourceGroup, account.name);
   updateUserContext({
     subscriptionId,
     resourceGroup,
-    authType: AuthType.AAD,
-    authorizationToken: `Bearer ${config.authorizationToken}`,
     databaseAccount: config.databaseAccount,
+    masterKey: keys.primaryMasterKey,
   });
-  const keys = await listKeys(subscriptionId, resourceGroup, account.name);
   const explorer = new Explorer(explorerParams);
   explorer.configure({
     databaseAccount: account,
@@ -118,6 +122,7 @@ function configureHostedWithConnectionString(config: ConnectionString, explorerP
     authType: AuthType.EncryptedToken,
     accessToken: encodeURIComponent(config.encryptedToken),
     databaseAccount,
+    masterKey: config.masterKey,
   });
   const explorer = new Explorer(explorerParams);
   explorer.configure({
@@ -155,9 +160,7 @@ function configureHostedWithResourceToken(config: ResourceToken, explorerParams:
   explorer.configure({
     databaseAccount,
     features: extractFeatures(),
-    isAuthWithresourceToken: true,
   });
-  explorer.isRefreshingExplorer(false);
   return explorer;
 }
 
@@ -257,6 +260,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
             subscriptionId: inputs.subscriptionId,
             subscriptionType: inputs.subscriptionType,
             quotaId: inputs.quotaId,
+            portalEnv: inputs.serverId as PortalEnv,
           });
 
           const explorer = new Explorer(explorerParams);
@@ -270,7 +274,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
       false
     );
 
-    sendMessage("ready");
+    sendReadyMessage();
   });
 }
 

test/mongo/mongoIndexPolicy.spec.ts

@@ -33,7 +33,7 @@ describe("MongoDB Index policy tests", () => {
       await frame.click(`div[data-test="${collectionId}"]`);
 
       await frame.waitFor(`div[data-test="Scale & Settings"]`), { visible: true };
-      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitFor(10000);
       await frame.click(`div[data-test="Scale & Settings"]`);
 
       await frame.waitFor(`button[data-content="Indexing Policy"]`), { visible: true };

test/selfServe/selfServeExample.spec.ts

@@ -12,14 +12,19 @@ describe("Self Serve", () => {
 
       // id of the display element is in the format {PROPERTY_NAME}-{DISPLAY_NAME}-{DISPLAY_TYPE}
       await frame.waitForSelector("#description-text-display");
-      await frame.waitForSelector("#currentRegionText-text-display");
 
       const regions = await frame.waitForSelector("#regions-dropdown-input");
+
+      const currentRegionsDescription = await frame.$$("#currentRegionText-text-display");
+      expect(currentRegionsDescription).toHaveLength(0);
       let disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
       expect(disabledLoggingToggle).toHaveLength(0);
+
       await regions.click();
       const regionsDropdownElement1 = await frame.waitForSelector("#regions-dropdown-input-list0");
       await regionsDropdownElement1.click();
+
+      await frame.waitForSelector("#currentRegionText-text-display");
       disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
       expect(disabledLoggingToggle).toHaveLength(1);
 

test/sql/container.spec.ts

@@ -65,12 +65,6 @@ describe("Collection Add and Delete SQL spec", () => {
       await frame.waitFor(CREATE_DELAY);
       await frame.waitFor("div[class='rowData'] > span[class='message']");
 
-      const didCreateContainer = await frame.$$eval("div[class='rowData'] > span[class='message']", (elements) => {
-        return elements.some((el) => el.textContent.includes("Successfully created"));
-      });
-
-      expect(didCreateContainer).toBe(true);
-
       await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
       await frame.waitFor(LOADING_STATE_DELAY);
 

test/testExplorer/TestExplorer.ts

@@ -33,7 +33,7 @@ console.log("Subcription: ", subscriptionId);
 console.log("Account Name: ", accountName);
 
 const initTestExplorer = async (): Promise<void> => {
-  const { token } = await credentials.getToken("https://management.core.windows.net/.default");
+  const { token } = await credentials.getToken("https://management.azure.com//.default");
   updateUserContext({
     authorizationToken: `bearer ${token}`,
   });
@@ -79,7 +79,7 @@ const initTestExplorer = async (): Promise<void> => {
       // After we have received the "ready" message from the child iframe we can post configuration
       // This simulates the same action that happens in the portal
       console.dir(event.data);
-      if (event.data?.data === "ready") {
+      if (event.data?.kind === "ready") {
         iframe.contentWindow.postMessage(
           {
             signature: "pcIframe",