Force enable notebooks

* Added className to SelfServeBaseClass

* addressed PR comments

* addressed PR comments

* fixed lint errors

.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
@@ -98,7 +97,6 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -127,15 +125,10 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
@@ -143,13 +136,10 @@ src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
 src/Explorer/Panes/Tables/QuerySelectPane.ts
-src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/UploadFilePane.ts
-src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -256,11 +246,8 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
-src/Utils/DatabaseAccountUtils.test.ts
-src/Utils/DatabaseAccountUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
-src/Utils/QueryUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts

.github/dependabot.yml

@@ -0,0 +1,9 @@
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"

.github/workflows/ci.yml

@@ -70,7 +70,6 @@ jobs:
       - run: npm run test
   build:
     runs-on: ubuntu-latest
-    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
@@ -92,6 +91,14 @@ jobs:
         with:
           name: dist
           path: dist/
+      - name: Upload build to preview blob storage
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+      - name: Upload preview config to blob storage
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:
     name: "End To End Emulator Tests"
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')

README.md

@@ -18,7 +18,6 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)
 
 - Visit: `https://localhost:1234/hostedExplorer.html`
-- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
@@ -69,7 +68,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)
 

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: [
-  //   "src/Common/Headers*"
-  // ],
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: ["/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,
-      functions: 28,
-      lines: 33,
-      statements: 31,
+      branches: 25,
+      functions: 25,
+      lines: 30,
+      statements: 30,
     },
   },
 
@@ -71,7 +67,8 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
     "worker-loader": "<rootDir>/mockModule",
     "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
     "^dnd-core$": "dnd-core/dist/cjs",

less/documentDB.less

@@ -718,7 +718,7 @@ execute-sproc-params-pane {
   }
 }
 
-stored-procedure-tab {
+.stored-procedure-tab {
   @ToggleHeight: 30px;
   @ToggleWidth: 180px;
 

package.json

@@ -13,7 +13,7 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -44,9 +44,7 @@
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
     "@uifabric/styling": "7.13.7",
-    "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
-    "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
@@ -60,8 +58,6 @@
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
     "dotenv": "8.2.0",
-    "es6-object-assign": "1.1.0",
-    "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
@@ -79,12 +75,9 @@
     "monaco-editor": "0.18.1",
     "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",
-    "promise.prototype.finally": "3.1.0",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
@@ -101,13 +94,9 @@
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "text-encoding": "0.7.0",
+    "terser-webpack-plugin": "3.1.0",
     "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
-    "utility-types": "3.10.0",
-    "webcrypto-liner": "1.1.4",
-    "webfontloader": "1.6.28",
-    "whatwg-fetch": "3.0.0"
+    "utility-types": "3.10.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
@@ -121,15 +110,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",
@@ -137,9 +126,7 @@
     "@types/react-redux": "7.1.7",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
-    "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
-    "@types/webfontloader": "1.6.29",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
     "axe-puppeteer": "1.1.0",
@@ -164,7 +151,6 @@
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "3.2.0",
-    "inline-css": "2.2.5",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
     "jest-puppeteer": "4.4.0",
@@ -176,16 +162,15 @@
     "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",
     "style-loader": "0.23.0",
-    "terser-webpack-plugin": "3.0.5",
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.0.2",
+    "typescript": "4.2.3",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",

preview/.azure/config

@@ -0,0 +1,7 @@
+[defaults]
+group = stfaul
+sku = P1v2
+appserviceplan = stfaul_asp_Linux_centralus_0
+location = centralus
+web = cosmos-explorer-preview
+

preview/README.md

@@ -0,0 +1,20 @@
+# Cosmos Explorer Preview
+
+Cosmos Explorer Preview makes it possible to try a working version of any commit on master or in a PR. No need to run the app locally or deploy to staging.
+
+Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
+
+Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
+Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
+
+In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
+
+### Architechture
+
+- This folder contains a NodeJS app deployed to Azure App Service that powers preview URLs:
+  - Paths starting with `/commit/` are proxied to an Azure Storage account containing build artifacts
+  - Paths starting with `/proxy/` are proxied dynamically to Cosmos account endpoints. Required otherwise CORS would need to be configured for every account accessed.
+  - Paths starting with `/api/` are proxied to Portal APIs that do not support CORS.
+- On GitHub Actions build completion:
+  - All files in dist are uploaded to an Azure Storage account namespaced by the SHA of the commit
+  - `/preview/config.json` is uploaded to the same folder with preview specific configuration

preview/config.json

@@ -0,0 +1,3 @@
+{
+  "PROXY_PATH": "/proxy"
+}

preview/index.js

@@ -0,0 +1,44 @@
+const express = require("express");
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const port = process.env.PORT || 3000;
+
+const api = createProxyMiddleware("/api", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  logLevel: "debug",
+  bypass: (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.statusCode = 200;
+      res.send();
+    }
+  },
+});
+
+const proxy = createProxyMiddleware("/proxy", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/proxy": "" },
+  router: (req) => {
+    let newTarget = req.headers["x-ms-proxy-target"];
+    return newTarget;
+  },
+});
+
+const commit = createProxyMiddleware("/commit", {
+  target: "https://cosmosexplorerpreview.blob.core.windows.net",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/commit": "$web/" },
+});
+
+const app = express();
+
+app.use(api);
+app.use(proxy);
+app.use(commit);
+app.listen(port, () => {
+  console.log(`Example app listening on port: ${port}`);
+});

preview/package-lock.json

@@ -0,0 +1,491 @@
+{
+  "name": "preview",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/http-proxy": {
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.5.tgz",
+      "integrity": "sha512-GNkDE7bTv6Sf8JbV2GksknKOsk7OznNYHSdrtvPJXO0qJ9odZig6IZKUi5RFGi6d1bf6dgIAe4uXi3DBc7069Q==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/node": {
+      "version": "14.14.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
+      "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "camelcase": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
+      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.1.0.tgz",
+      "integrity": "sha512-OnjU5vyVgcZVe2AjLJyMrk8YLNOC2lspCHirB5ldM+B/dwEfZ5bgVTrFyzE9R7xRWAP/i/FXtvIqKjTNEZBhBg==",
+      "requires": {
+        "@types/http-proxy": "^1.17.5",
+        "camelcase": "^6.2.0",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
+    "is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "micromatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+      "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.0.5"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
+      "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ=="
+    },
+    "mime-types": {
+      "version": "2.1.29",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
+      "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
+      "requires": {
+        "mime-db": "1.46.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}

preview/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "cosmos-explorer-preview",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "deploy": "az webapp up -n cosmos-explorer-preview --subscription cosmosdb-portalteam-generaldemo -g stfaul",
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Microsoft Corporation",
+  "dependencies": {
+    "express": "^4.17.1",
+    "http-proxy-middleware": "^1.1.0"
+  }
+}

src/Common/Constants.ts

@@ -98,30 +98,6 @@ export class CapabilityNames {
   public static readonly EnableServerless: string = "EnableServerless";
 }
 
-export class Features {
-  public static readonly cosmosdb = "cosmosdb";
-  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly executeSproc = "dataexplorerexecutesproc";
-  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
-  public static readonly enableTtl = "enablettl";
-  public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableSpark = "enablespark";
-  public static readonly livyEndpoint = "livyendpoint";
-  public static readonly notebookServerUrl = "notebookserverurl";
-  public static readonly notebookServerToken = "notebookservertoken";
-  public static readonly notebookBasePath = "notebookbasepath";
-  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
-  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
-  public static readonly ttl90Days = "ttl90days";
-  public static readonly enableRightPanelV2 = "enablerightpanelv2";
-  public static readonly enableSchema = "enableschema";
-  public static readonly enableSDKoperations = "enablesdkoperations";
-  public static readonly showMinRUSurvey = "showminrusurvey";
-  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
-  public static readonly selfServeType = "selfservetype";
-  public static readonly enableKOPanel = "enablekopanel";
-}
-
 // flight names returned from the portal are always lowercase
 export class Flights {
   public static readonly SettingsV2 = "settingsv2";

src/Common/CosmosClient.ts

@@ -32,7 +32,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };
 
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = configContext.PROXY_PATH;
+  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
 };

src/Common/Logger.ts

@@ -1,7 +1,7 @@
-import { sendMessage } from "./MessageHandler";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { appInsights } from "../Shared/appInsights";
 import { SeverityLevel } from "@microsoft/applicationinsights-web";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { trackTrace } from "../Shared/appInsights";
+import { sendMessage } from "./MessageHandler";
 
 // TODO: Move to a separate Diagnostics folder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +46,7 @@ function _logEntry(entry: Diagnostics.LogEntry): void {
         return SeverityLevel.Information;
     }
   })(entry.level);
-  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }
 
 function _generateLogEntry(

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>;
@@ -56,7 +56,22 @@ export function sendMessage(data: any): void {
         signature: "pcIframe",
         data: data,
       },
-      portalChildWindow.document.referrer
+      portalChildWindow.document.referrer || "*"
+    );
+  }
+}
+
+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 || "*"
     );
   }
 }

src/Common/QueriesClient.ts

@@ -6,7 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { QueryUtils } from "../Utils/QueryUtils";
+import * as QueryUtils from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";

src/Common/Tooltip/index.tsx

@@ -0,0 +1,24 @@
+import { useId } from "@uifabric/react-hooks";
+import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
+import * as React from "react";
+import InfoBubble from "../../../images/info-bubble.svg";
+
+const calloutProps = { gapSpace: 0 };
+const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
+
+export interface TooltipProps {
+  children: string;
+}
+export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
+  const tooltipId = useId("tooltip");
+
+  return children ? (
+    <span>
+      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
+        <img className="infoImg" src={InfoBubble} alt="More information" />
+      </TooltipHost>
+    </span>
+  ) : (
+    <></>
+  );
+};

src/Common/Upload/index.tsx

@@ -0,0 +1,75 @@
+import { Image, Stack, TextField } from "office-ui-fabric-react";
+import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
+import FolderIcon from "../../../images/folder_16x16.svg";
+import * as Constants from "../../Common/Constants";
+import { Tooltip } from "../Tooltip";
+
+interface UploadProps {
+  label: string;
+  accept?: string;
+  tooltip?: string;
+  multiple?: boolean;
+  tabIndex?: number;
+  onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Upload: FunctionComponent<UploadProps> = ({
+  label,
+  accept,
+  tooltip,
+  multiple,
+  tabIndex,
+  ...props
+}: UploadProps) => {
+  const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
+
+  const fileRef = useRef<HTMLInputElement>();
+
+  const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      onImportLinkClick();
+    }
+  };
+
+  const onImportLinkClick = (): void => {
+    fileRef?.current?.click();
+  };
+
+  const onUpload = (event: ChangeEvent<HTMLInputElement>): void => {
+    const { files } = event.target;
+
+    const newFileList = [];
+    for (let i = 0; i < files.length; i++) {
+      newFileList.push(files.item(i).name);
+    }
+    if (newFileList) {
+      setSelectedFilesTitle(newFileList);
+      props.onUpload(event);
+    }
+  };
+  const title = label + " to upload";
+  return (
+    <div>
+      <span className="renewUploadItemsHeader">{label}</span>
+      <Tooltip>{tooltip}</Tooltip>
+      <Stack horizontal>
+        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
+        <input
+          type="file"
+          id="importFileInput"
+          style={{ display: "none" }}
+          ref={fileRef}
+          accept={accept}
+          tabIndex={tabIndex}
+          multiple={multiple}
+          title="Upload Icon"
+          onChange={onUpload}
+          role="button"
+        />
+        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
+          <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
+        </a>
+      </Stack>
+    </div>
+  );
+};

src/Common/UrlUtility.ts

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

src/Common/__snapshots__/CosmosClient.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
 Object {
-  "endpoint": "/proxy",
+  "endpoint": "http://localhost/proxy",
   "headers": Object {
     "x-ms-proxy-target": "http://localhost",
   },
@@ -12,7 +12,7 @@ Object {
 
 exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
 Object {
-  "endpoint": "/proxy",
+  "endpoint": "http://localhost/proxy",
   "headers": Object {
     "x-ms-proxy-target": "baz",
   },

src/Contracts/ViewModels.ts

@@ -88,7 +88,6 @@ export interface Database extends TreeNode {
   loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
-  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -376,7 +375,6 @@ export interface DataExplorerInputsFrame {
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;
-  features: { [key: string]: string };
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
@@ -390,7 +388,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/ComponentRegisterer.test.ts

@@ -77,18 +77,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
   });
 
-  it("should register delete-database-confirmation-pane component", () => {
-    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
-  });
-
-  it("should register save-query-pane component", () => {
-    expect(ko.components.isRegistered("save-query-pane")).toBe(true);
-  });
-
-  it("should register browse-queries-pane component", () => {
-    expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
-  });
-
   it("should register graph-new-vertex-pane component", () => {
     expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true);
   });
@@ -97,10 +85,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
   });
 
-  it("should register upload-file-pane component", () => {
-    expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
-  });
-
   it("should register string-input-pane component", () => {
     expect(ko.components.isRegistered("string-input-pane")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -1,16 +1,29 @@
 import * as ko from "knockout";
-import * as PaneComponents from "./Panes/PaneComponents";
-import * as TabComponents from "./Tabs/TabComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent";
-import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
-import { TabsManagerKOComponent } from "./Tabs/TabsManager";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
+import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
+import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
+import * as PaneComponents from "./Panes/PaneComponents";
+import ConflictsTab from "./Tabs/ConflictsTab";
+import DocumentsTab from "./Tabs/DocumentsTab";
+import GalleryTab from "./Tabs/GalleryTab";
+import GraphTab from "./Tabs/GraphTab";
+import MongoShellTab from "./Tabs/MongoShellTab";
+import NotebookTabV2 from "./Tabs/NotebookV2Tab";
+import NotebookViewerTab from "./Tabs/NotebookViewerTab";
+import QueryTab from "./Tabs/QueryTab";
+import QueryTablesTab from "./Tabs/QueryTablesTab";
+import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
+import StoredProcedureTab from "./Tabs/StoredProcedureTab";
+import TabsManagerTemplate from "./Tabs/TabsManager.html";
+import TerminalTab from "./Tabs/TerminalTab";
+import TriggerTab from "./Tabs/TriggerTab";
+import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
@@ -21,28 +34,26 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", TabsManagerKOComponent());
+ko.components.register("tabs-manager", { template: TabsManagerTemplate });
 
 // Collection Tabs
-ko.components.register("documents-tab", new TabComponents.DocumentsTab());
-ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
-ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
-ko.components.register("trigger-tab", new TabComponents.TriggerTab());
-ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
-ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
-ko.components.register("query-tab", new TabComponents.QueryTab());
-ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
-ko.components.register("graph-tab", new TabComponents.GraphTab());
-ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
-ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
-ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
-ko.components.register("terminal-tab", new TabComponents.TerminalTab());
-ko.components.register("gallery-tab", new TabComponents.GalleryTab());
-ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
-
-// Database Tabs
-ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
-ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
+[
+  DocumentsTab,
+  StoredProcedureTab,
+  TriggerTab,
+  UserDefinedFunctionTab,
+  SettingsTabV2,
+  QueryTab,
+  QueryTablesTab,
+  GraphTab,
+  MongoShellTab,
+  ConflictsTab,
+  NotebookTabV2,
+  TerminalTab,
+  GalleryTab,
+  NotebookViewerTab,
+  DatabaseSettingsTabV2,
+].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
@@ -51,24 +62,13 @@ ko.components.register(
   "delete-collection-confirmation-pane",
   new PaneComponents.DeleteCollectionConfirmationPaneComponent()
 );
-ko.components.register(
-  "delete-database-confirmation-pane",
-  new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
-);
+
 ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
 ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEntityPaneComponent());
-ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
 ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
-ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
-ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
-ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
-ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
-ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
-ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
-ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
 ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -1,23 +1,22 @@
-import * as ko from "knockout";
-import * as ViewModels from "../Contracts/ViewModels";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
 import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
 import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import * as ViewModels from "../Contracts/ViewModels";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import { userContext } from "../UserContext";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import { userContext } from "../UserContext";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -43,7 +42,7 @@ export class ResourceTreeContextMenuButtonFactory {
     if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
       items.push({
         iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.deleteDatabaseConfirmationPane.open(),
+        onClick: () => container.openDeleteDatabaseConfirmationPane(),
         label: container.deleteDatabaseText(),
         styleClass: "deleteDatabaseMenuItem",
       });

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}>
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
+        <Stack
+          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

@@ -18,7 +18,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
-import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
+import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {
@@ -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/NotebookMetadataComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
-import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
+import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";

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/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -1,20 +1,15 @@
-import * as _ from "underscore";
-import * as React from "react";
-import * as Constants from "../../../Common/Constants";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
+import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
   DetailsList,
   DetailsListLayoutMode,
+  DetailsRow,
+  IColumn,
   IDetailsListProps,
   IDetailsRowProps,
-  DetailsRow,
 } from "office-ui-fabric-react/lib/DetailsList";
 import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
-import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
+import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import {
   IObjectWithKey,
   ISelectionZoneProps,
@@ -22,13 +17,18 @@ import {
   SelectionMode,
   SelectionZone,
 } from "office-ui-fabric-react/lib/utilities/selection/index";
+import * as React from "react";
+import * as _ from "underscore";
+import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
+import * as Constants from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/Constants";
-import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { QueriesClient } from "../../../Common/QueriesClient";
+import * as DataModels from "../../../Contracts/DataModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
-import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
-import { QueriesClient } from "../../../Common/QueriesClient";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+const title: string = "Open Saved Queries";
 
 export interface QueriesGridComponentProps {
   queriesClient: QueriesClient;
@@ -76,6 +76,11 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
     }
   }
 
+  // fetched saved queries when panel open
+  public componentDidMount() {
+    this.fetchSavedQueries();
+  }
+
   public render(): JSX.Element {
     if (this.state.queries.length === 0) {
       return this.renderBannerComponent();
@@ -136,7 +141,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
       },
     };
     return (
-      <div>
+      <div id="emptyQueryBanner">
         <div>
           You have not saved any queries yet. <br /> <br />
           To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
@@ -222,7 +227,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                       const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                         dataExplorerArea: Constants.Areas.ContextualPane,
-                        paneTitle: container && container.browseQueriesPane.title(),
+                        paneTitle: title,
                       });
                       try {
                         await this.props.queriesClient.deleteQuery(query);
@@ -230,7 +235,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           Action.DeleteSavedQuery,
                           {
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: container && container.browseQueriesPane.title(),
+                            paneTitle: title,
                           },
                           startKey
                         );
@@ -239,7 +244,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           Action.DeleteSavedQuery,
                           {
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: container && container.browseQueriesPane.title(),
+                            paneTitle: title,
                             error: getErrorMessage(error),
                             errorStack: getErrorStack(error),
                           },

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

@@ -1,33 +0,0 @@
-/**
- * This adapter is responsible to render the QueriesGrid 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 * as ViewModels from "../../../Contracts/ViewModels";
-import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import Explorer from "../../Explorer";
-
-export class QueriesGridComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(private container: Explorer) {
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    const props: QueriesGridComponentProps = {
-      queriesClient: this.container.queriesClient,
-      onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
-      containerVisible: this.container.browseQueriesPane.visible(),
-      saveQueryEnabled: this.container.canSaveQueries(),
-    };
-    return <QueriesGridComponent {...props} />;
-  }
-
-  public forceRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}

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

@@ -1,17 +1,19 @@
 import { shallow } from "enzyme";
-import React from "react";
-import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import React from "react";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 import Explorer from "../../Explorer";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
+import { isDirty, TtlType } from "./SettingsUtils";
+import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -29,8 +31,6 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     analyticalStorageTtl: undefined,
   } as MongoDBCollectionResource),
 }));
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,7 +134,6 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
-      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,

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 { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import Explorer from "../../Explorer";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { AuthType } from "../../../AuthType";
+import * as Constants from "../../../Common/Constants";
+import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+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 { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import {
+  MongoIndexingPolicyComponent,
+  MongoIndexingPolicyComponentProps,
+} 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;
@@ -137,9 +139,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor =
         this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
 
-      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
-        Constants.Features.enableChangeFeedPolicy
-      );
+      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =
@@ -325,7 +325,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 +698,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -862,7 +860,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         });
       }
     }
-    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -877,6 +874,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 +1003,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} />,
-        });
-      } else {
-        tabs.push({
-          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexingPolicyAADError,
+          content: mongoIndexTabContext,
         });
       }
     }

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 * as ViewModels from "../../../../Contracts/ViewModels";
+import { configContext, Platform } from "../../../../ConfigContext";
 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 { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
-import { configContext, Platform } from "../../../../ConfigContext";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 
 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,52 @@
-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,
-  IColumn,
+  Stack,
+  Text,
+  TextField,
 } from "office-ui-fabric-react";
-import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
-import * as SharedConstants from "../../../../../Shared/Constants";
+import React from "react";
 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 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 +179,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 +188,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 +196,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     } else {
       estimatedSpend = this.getEstimatedAutoscaleSpendElement(
         this.props.maxAutoPilotThroughputBaseline,
-        serverId,
+        userContext.portalEnv,
         regions,
         multimaster,
         isDirty ? this.props.maxAutoPilotThroughput : undefined
@@ -468,7 +464,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
     const oneTBinKB = 1000000000;
     const minRUperGB = 10;
-    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
+    const featureFlagEnabled = userContext.features.showMinRUSurvey;
     const collectionIsEligible =
       userContext.subscriptionType !== SubscriptionType.Internal &&
       this.props.usageSizeInKB > oneTBinKB &&

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/SettingsUtils.test.tsx

@@ -1,23 +1,23 @@
-import { collection } from "./TestUtils";
+import ko from "knockout";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import {
   getMongoIndexType,
+  getMongoIndexTypeText,
   getMongoNotification,
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
+  isIndexTransforming,
   MongoIndexTypes,
   MongoNotificationType,
+  MongoWildcardPlaceHolder,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  MongoWildcardPlaceHolder,
-  getMongoIndexTypeText,
   SingleFieldText,
   WildcardText,
-  isIndexTransforming,
 } from "./SettingsUtils";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import ko from "knockout";
+import { collection } from "./TestUtils";
 
 describe("SettingsUtils", () => {
   it("hasDatabaseSharedThroughput", () => {
@@ -42,7 +42,6 @@ describe("SettingsUtils", () => {
         loadCollections: undefined,
         findCollectionWithId: undefined,
         openAddCollection: undefined,
-        onDeleteDatabaseContextMenuClick: undefined,
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,

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

@@ -1,7 +1,7 @@
-import React from "react";
 import { shallow } from "enzyme";
+import React from "react";
+import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
-import { NumberUiType, SmartUiInput, DescriptionType } from "../../../SelfServe/SelfServeTypes";
 
 describe("SmartUiComponent", () => {
   const exampleData: SmartUiDescriptor = {
@@ -97,9 +97,9 @@ describe("SmartUiComponent", () => {
             dataFieldName: "database",
             type: "object",
             choices: [
-              { label: "Database 1", key: "db1" },
-              { label: "Database 2", key: "db2" },
-              { label: "Database 3", key: "db3" },
+              { labelTKey: "Database 1", key: "db1" },
+              { labelTKey: "Database 2", key: "db2" },
+              { labelTKey: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -1,14 +1,13 @@
-import * as React from "react";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
+import { TFunction } from "i18next";
+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 { TextField } from "office-ui-fabric-react/lib/TextField";
+import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
 import { Text } from "office-ui-fabric-react/lib/Text";
-import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
-import * as InputUtils from "./InputUtils";
-import "./SmartUiComponent.less";
+import { TextField } from "office-ui-fabric-react/lib/TextField";
+import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
+import * as React from "react";
 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,25 +156,32 @@ 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) {
-      return this.renderError("Description is not provided.");
+      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 = (
-      <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
-        {this.props.getTranslation(description.textTKey)}{" "}
-        {description.link && (
-          <Link target="_blank" href={description.link.href}>
-            {this.props.getTranslation(description.link.textTKey)}
-          </Link>
-        )}
-      </Text>
+      <Stack>
+        {labelElement}
+        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
+          {this.props.getTranslation(description.textTKey)}{" "}
+          {description.link && (
+            <Link target="_blank" href={description.link.href}>
+              {this.props.getTranslation(description.link.textTKey)}
+            </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,61 +248,72 @@ 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 styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
-          <SpinButton
-            {...props}
-            id={`${input.dataFieldName}-spinner-input`}
-            value={value?.toString()}
-            onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
-            onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
-            onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
-            labelPosition={Position.top}
-            aria-labelledby={labelId}
-            disabled={disabled}
-          />
-          {this.state.errors.has(dataFieldName) && (
-            <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
-          )}
+        <Stack>
+          {labelElement}
+          <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
+            <SpinButton
+              {...props}
+              id={`${input.dataFieldName}-spinner-input`}
+              value={value?.toString()}
+              onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
+              onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
+              onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
+              labelPosition={Position.top}
+              aria-labelledby={labelId}
+              disabled={disabled}
+            />
+            {this.state.errors.has(dataFieldName) && (
+              <MessageBar messageBarType={MessageBarType.error}>
+                Error: {this.state.errors.get(dataFieldName)}
+              </MessageBar>
+            )}
+          </Stack>
         </Stack>
       );
     } else if (input.uiType === NumberUiType.Slider) {
       return (
-        <div id={`${input.dataFieldName}-slider-input`}>
-          <Slider
-            {...props}
-            value={value}
-            disabled={disabled}
-            onChange={(newValue) => this.props.onInputChange(input, newValue)}
-            styles={{
-              root: { width: 400 },
-              valueLabel: SmartUiComponent.labelStyle,
-            }}
-          />
-        </div>
+        <Stack>
+          {labelElement}
+          <div id={`${input.dataFieldName}-slider-input`}>
+            <Slider
+              {...props}
+              value={value}
+              disabled={disabled}
+              onChange={(newValue) => this.props.onInputChange(input, newValue)}
+              styles={{
+                root: { width: 400 },
+                valueLabel: SmartUiComponent.labelStyle,
+              }}
+            />
+          </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 (
-      <Toggle
-        id={`${input.dataFieldName}-toggle-input`}
-        aria-labelledby={labelId}
-        checked={value || false}
-        onText={this.props.getTranslation(input.trueLabelTKey)}
-        offText={this.props.getTranslation(input.falseLabelTKey)}
-        disabled={disabled}
-        onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
-        styles={{ root: { width: 400 } }}
-      />
+      <Stack>
+        {labelElement}
+        <Toggle
+          id={`${input.dataFieldName}-toggle-input`}
+          aria-labelledby={labelId}
+          checked={value || false}
+          onText={this.props.getTranslation(input.trueLabelTKey)}
+          offText={this.props.getTranslation(input.falseLabelTKey)}
+          disabled={disabled}
+          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,22 +322,26 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       selectedKey = "";
     }
     return (
-      <Dropdown
-        id={`${input.dataFieldName}-dropdown-input`}
-        aria-labelledby={labelId}
-        selectedKey={selectedKey}
-        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
-        placeholder={this.props.getTranslation(placeholderTKey)}
-        disabled={disabled}
-        options={choices.map((c) => ({
-          key: c.key,
-          text: this.props.getTranslation(c.label),
-        }))}
-        styles={{
-          root: { width: 400 },
-          dropdown: SmartUiComponent.labelStyle,
-        }}
-      />
+      <Stack>
+        {labelElement}
+        <Dropdown
+          id={`${input.dataFieldName}-dropdown-input`}
+          aria-labelledby={labelId}
+          selectedKey={selectedKey}
+          onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
+          placeholder={this.props.getTranslation(placeholderTKey)}
+          disabled={disabled}
+          // Removed dropdownWidth="auto" as dropdown accept only number
+          options={choices.map((c) => ({
+            key: c.key,
+            text: this.props.getTranslation(c.labelTKey),
+          }))}
+          styles={{
+            root: { width: 400 },
+            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 (
-      <Stack>
-        {input.labelTKey && (
-          <Label id={labelId}>
-            <ToolTipLabelComponent
-              label={this.props.getTranslation(input.labelTKey)}
-              toolTipElement={this.renderInfo(info)}
-            />
-          </Label>
-        )}
-        {this.renderDisplay(input, labelId)}
-      </Stack>
+    const labelElement: JSX.Element = input.labelTKey && (
+      <Label id={labelId}>
+        <ToolTipLabelComponent
+          label={this.props.getTranslation(input.labelTKey)}
+          toolTipElement={this.renderInfo(info)}
+        />
+      </Label>
     );
+
+    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

@@ -23,19 +23,21 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Text
-            aria-labelledby="description-label"
-            id="description-text-display"
-          >
-            this is an example description text.
-             
-            <StyledLinkBase
-              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-              target="_blank"
+          <Stack>
+            <Text
+              aria-labelledby="description-label"
+              id="description-text-display"
             >
-              Click here for more information.
-            </StyledLinkBase>
-          </Text>
+              this is an example description text.
+               
+              <StyledLinkBase
+                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+                target="_blank"
+              >
+                Click here for more information.
+              </StyledLinkBase>
+            </Text>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -53,51 +55,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="throughput-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (input)"
-            />
-          </StyledLabelBase>
-          <Stack
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-              }
-            }
-            tokens={
-              Object {
-                "childrenGap": 2,
-              }
-            }
-          >
-            <CustomizedSpinButton
-              aria-labelledby="throughput-label"
-              ariaLabel="Throughput (input)"
-              decrementButtonIcon={
+          <Stack>
+            <StyledLabelBase
+              id="throughput-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (input)"
+              />
+            </StyledLabelBase>
+            <Stack
+              styles={
                 Object {
-                  "iconName": "ChevronDownSmall",
+                  "root": Object {
+                    "width": 400,
+                  },
                 }
               }
-              disabled={true}
-              id="throughput-spinner-input"
-              incrementButtonIcon={
+              tokens={
                 Object {
-                  "iconName": "ChevronUpSmall",
+                  "childrenGap": 2,
                 }
               }
-              label=""
-              labelPosition={0}
-              max={500}
-              min={400}
-              onDecrement={[Function]}
-              onIncrement={[Function]}
-              onValidate={[Function]}
-              step={10}
-            />
+            >
+              <CustomizedSpinButton
+                aria-labelledby="throughput-label"
+                ariaLabel="Throughput (input)"
+                decrementButtonIcon={
+                  Object {
+                    "iconName": "ChevronDownSmall",
+                  }
+                }
+                disabled={true}
+                id="throughput-spinner-input"
+                incrementButtonIcon={
+                  Object {
+                    "iconName": "ChevronUpSmall",
+                  }
+                }
+                label=""
+                labelPosition={0}
+                max={500}
+                min={400}
+                onDecrement={[Function]}
+                onIncrement={[Function]}
+                onValidate={[Function]}
+                step={10}
+              />
+            </Stack>
           </Stack>
         </Stack>
       </StackItem>
@@ -116,37 +120,39 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="throughput2-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (Slider)"
-            />
-          </StyledLabelBase>
-          <div
-            id="throughput2-slider-input"
-          >
-            <StyledSliderBase
-              ariaLabel="Throughput (Slider)"
-              disabled={true}
-              max={500}
-              min={400}
-              onChange={[Function]}
-              step={10}
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                  "valueLabel": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
+          <Stack>
+            <StyledLabelBase
+              id="throughput2-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (Slider)"
+              />
+            </StyledLabelBase>
+            <div
+              id="throughput2-slider-input"
+            >
+              <StyledSliderBase
+                ariaLabel="Throughput (Slider)"
+                disabled={true}
+                max={500}
+                min={400}
+                onChange={[Function]}
+                step={10}
+                styles={
+                  Object {
+                    "root": Object {
+                      "width": 400,
+                    },
+                    "valueLabel": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                    },
+                  }
                 }
-              }
-            />
-          </div>
+              />
+            </div>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -185,16 +191,14 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="containerId-label"
-          >
-            <ToolTipLabelComponent
-              label="Container id"
-            />
-          </StyledLabelBase>
-          <div
-            className="stringInputContainer"
-          >
+          <Stack>
+            <StyledLabelBase
+              id="containerId-label"
+            >
+              <ToolTipLabelComponent
+                label="Container id"
+              />
+            </StyledLabelBase>
             <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>
@@ -228,29 +232,31 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="analyticalStore-label"
-          >
-            <ToolTipLabelComponent
-              label="Analytical Store"
-            />
-          </StyledLabelBase>
-          <StyledToggleBase
-            aria-labelledby="analyticalStore-label"
-            checked={false}
-            disabled={true}
-            id="analyticalStore-toggle-input"
-            offText="Disabled"
-            onChange={[Function]}
-            onText="Enabled"
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
+          <Stack>
+            <StyledLabelBase
+              id="analyticalStore-label"
+            >
+              <ToolTipLabelComponent
+                label="Analytical Store"
+              />
+            </StyledLabelBase>
+            <StyledToggleBase
+              aria-labelledby="analyticalStore-label"
+              checked={false}
+              disabled={true}
+              id="analyticalStore-toggle-input"
+              offText="Disabled"
+              onChange={[Function]}
+              onText="Enabled"
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
               }
-            }
-          />
+            />
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -268,48 +274,50 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="database-label"
-          >
-            <ToolTipLabelComponent
-              label="Database"
-            />
-          </StyledLabelBase>
-          <StyledWithResponsiveMode
-            aria-labelledby="database-label"
-            disabled={true}
-            id="database-dropdown-input"
-            onChange={[Function]}
-            options={
-              Array [
-                Object {
-                  "key": "db1",
-                  "text": "Database 1",
-                },
-                Object {
-                  "key": "db2",
-                  "text": "Database 2",
-                },
-                Object {
-                  "key": "db3",
-                  "text": "Database 3",
-                },
-              ]
-            }
-            selectedKey="db2"
-            styles={
-              Object {
-                "dropdown": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-                "root": Object {
-                  "width": 400,
-                },
+          <Stack>
+            <StyledLabelBase
+              id="database-label"
+            >
+              <ToolTipLabelComponent
+                label="Database"
+              />
+            </StyledLabelBase>
+            <StyledWithResponsiveMode
+              aria-labelledby="database-label"
+              disabled={true}
+              id="database-dropdown-input"
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": "db1",
+                    "text": "Database 1",
+                  },
+                  Object {
+                    "key": "db2",
+                    "text": "Database 2",
+                  },
+                  Object {
+                    "key": "db3",
+                    "text": "Database 3",
+                  },
+                ]
               }
-            }
-          />
+              selectedKey="db2"
+              styles={
+                Object {
+                  "dropdown": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
+              }
+            />
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -340,19 +348,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Text
-            aria-labelledby="description-label"
-            id="description-text-display"
-          >
-            this is an example description text.
-             
-            <StyledLinkBase
-              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-              target="_blank"
+          <Stack>
+            <Text
+              aria-labelledby="description-label"
+              id="description-text-display"
             >
-              Click here for more information.
-            </StyledLinkBase>
-          </Text>
+              this is an example description text.
+               
+              <StyledLinkBase
+                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+                target="_blank"
+              >
+                Click here for more information.
+              </StyledLinkBase>
+            </Text>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -370,51 +380,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="throughput-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (input)"
-            />
-          </StyledLabelBase>
-          <Stack
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-              }
-            }
-            tokens={
-              Object {
-                "childrenGap": 2,
-              }
-            }
-          >
-            <CustomizedSpinButton
-              aria-labelledby="throughput-label"
-              ariaLabel="Throughput (input)"
-              decrementButtonIcon={
+          <Stack>
+            <StyledLabelBase
+              id="throughput-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (input)"
+              />
+            </StyledLabelBase>
+            <Stack
+              styles={
                 Object {
-                  "iconName": "ChevronDownSmall",
+                  "root": Object {
+                    "width": 400,
+                  },
                 }
               }
-              disabled={false}
-              id="throughput-spinner-input"
-              incrementButtonIcon={
+              tokens={
                 Object {
-                  "iconName": "ChevronUpSmall",
+                  "childrenGap": 2,
                 }
               }
-              label=""
-              labelPosition={0}
-              max={500}
-              min={400}
-              onDecrement={[Function]}
-              onIncrement={[Function]}
-              onValidate={[Function]}
-              step={10}
-            />
+            >
+              <CustomizedSpinButton
+                aria-labelledby="throughput-label"
+                ariaLabel="Throughput (input)"
+                decrementButtonIcon={
+                  Object {
+                    "iconName": "ChevronDownSmall",
+                  }
+                }
+                disabled={false}
+                id="throughput-spinner-input"
+                incrementButtonIcon={
+                  Object {
+                    "iconName": "ChevronUpSmall",
+                  }
+                }
+                label=""
+                labelPosition={0}
+                max={500}
+                min={400}
+                onDecrement={[Function]}
+                onIncrement={[Function]}
+                onValidate={[Function]}
+                step={10}
+              />
+            </Stack>
           </Stack>
         </Stack>
       </StackItem>
@@ -433,36 +445,38 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="throughput2-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (Slider)"
-            />
-          </StyledLabelBase>
-          <div
-            id="throughput2-slider-input"
-          >
-            <StyledSliderBase
-              ariaLabel="Throughput (Slider)"
-              max={500}
-              min={400}
-              onChange={[Function]}
-              step={10}
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                  "valueLabel": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
+          <Stack>
+            <StyledLabelBase
+              id="throughput2-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (Slider)"
+              />
+            </StyledLabelBase>
+            <div
+              id="throughput2-slider-input"
+            >
+              <StyledSliderBase
+                ariaLabel="Throughput (Slider)"
+                max={500}
+                min={400}
+                onChange={[Function]}
+                step={10}
+                styles={
+                  Object {
+                    "root": Object {
+                      "width": 400,
+                    },
+                    "valueLabel": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                    },
+                  }
                 }
-              }
-            />
-          </div>
+              />
+            </div>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -501,16 +515,14 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="containerId-label"
-          >
-            <ToolTipLabelComponent
-              label="Container id"
-            />
-          </StyledLabelBase>
-          <div
-            className="stringInputContainer"
-          >
+          <Stack>
+            <StyledLabelBase
+              id="containerId-label"
+            >
+              <ToolTipLabelComponent
+                label="Container id"
+              />
+            </StyledLabelBase>
             <StyledTextFieldBase
               aria-labelledby="containerId-label"
               id="containerId-textField-input"
@@ -525,7 +537,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               type="text"
               value=""
             />
-          </div>
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -543,28 +555,30 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="analyticalStore-label"
-          >
-            <ToolTipLabelComponent
-              label="Analytical Store"
-            />
-          </StyledLabelBase>
-          <StyledToggleBase
-            aria-labelledby="analyticalStore-label"
-            checked={false}
-            id="analyticalStore-toggle-input"
-            offText="Disabled"
-            onChange={[Function]}
-            onText="Enabled"
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
+          <Stack>
+            <StyledLabelBase
+              id="analyticalStore-label"
+            >
+              <ToolTipLabelComponent
+                label="Analytical Store"
+              />
+            </StyledLabelBase>
+            <StyledToggleBase
+              aria-labelledby="analyticalStore-label"
+              checked={false}
+              id="analyticalStore-toggle-input"
+              offText="Disabled"
+              onChange={[Function]}
+              onText="Enabled"
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
               }
-            }
-          />
+            />
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -582,47 +596,49 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <StyledLabelBase
-            id="database-label"
-          >
-            <ToolTipLabelComponent
-              label="Database"
-            />
-          </StyledLabelBase>
-          <StyledWithResponsiveMode
-            aria-labelledby="database-label"
-            id="database-dropdown-input"
-            onChange={[Function]}
-            options={
-              Array [
-                Object {
-                  "key": "db1",
-                  "text": "Database 1",
-                },
-                Object {
-                  "key": "db2",
-                  "text": "Database 2",
-                },
-                Object {
-                  "key": "db3",
-                  "text": "Database 3",
-                },
-              ]
-            }
-            selectedKey="db2"
-            styles={
-              Object {
-                "dropdown": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-                "root": Object {
-                  "width": 400,
-                },
+          <Stack>
+            <StyledLabelBase
+              id="database-label"
+            >
+              <ToolTipLabelComponent
+                label="Database"
+              />
+            </StyledLabelBase>
+            <StyledWithResponsiveMode
+              aria-labelledby="database-label"
+              id="database-dropdown-input"
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": "db1",
+                    "text": "Database 1",
+                  },
+                  Object {
+                    "key": "db2",
+                    "text": "Database 2",
+                  },
+                  Object {
+                    "key": "db3",
+                    "text": "Database 3",
+                  },
+                ]
               }
-            }
-          />
+              selectedKey="db2"
+              styles={
+                Object {
+                  "dropdown": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
+              }
+            />
+          </Stack>
         </Stack>
       </StackItem>
     </Stack>

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/DataSamples/ContainerSampleGenerator.test.ts

@@ -2,17 +2,17 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
 jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
 import Q from "q";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { createDocument } from "../../Common/dataAccess/createDocument";
-import Explorer from "../Explorer";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { updateUserContext } from "../../UserContext";
+import Explorer from "../Explorer";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
-    explorerStub.nonSystemDatabases = ko.computed(() => [database]);
+    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
     explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => false);

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -1,9 +1,9 @@
-import { DataSamplesUtil } from "./DataSamplesUtil";
-import * as sinon from "sinon";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import * as ko from "knockout";
+import * as sinon from "sinon";
+import { Collection, Database } from "../../Contracts/ViewModels";
 import Explorer from "../Explorer";
-import { Database, Collection } from "../../Contracts/ViewModels";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import { DataSamplesUtil } from "./DataSamplesUtil";
 
 describe("DataSampleUtils", () => {
   const sampleCollectionId = "sampleCollectionId";
@@ -16,7 +16,7 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.nonSystemDatabases = ko.computed(() => [database]);
+    explorer.databases = ko.observableArray<Database>([database]);
     explorer.showOkModalDialog = () => {};
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,8 +1,8 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import Explorer from "../Explorer";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 export class DataSamplesUtil {
   private static readonly DialogTitle = "Create Sample Container";
@@ -17,7 +17,7 @@ export class DataSamplesUtil {
 
     const databaseName = generator.getDatabaseId();
     const containerName = generator.getCollectionId();
-    if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
+    if (this.hasContainer(databaseName, containerName, this.container.databases())) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
       this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);

src/Explorer/Explorer.test.tsx

@@ -0,0 +1,43 @@
+jest.mock("./../Common/dataAccess/deleteDatabase");
+jest.mock("./../Shared/Telemetry/TelemetryProcessor");
+import * as ko from "knockout";
+import { deleteDatabase } from "./../Common/dataAccess/deleteDatabase";
+import * as ViewModels from "./../Contracts/ViewModels";
+import Explorer from "./Explorer";
+
+describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
+  let explorer: Explorer;
+  beforeAll(() => {
+    (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
+  });
+
+  beforeEach(() => {
+    explorer = new Explorer();
+  });
+
+  it("should be true if only 1 database", () => {
+    const database = {} as ViewModels.Database;
+    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+    expect(explorer.isLastDatabase()).toBe(true);
+  });
+
+  it("should be false if only 2 databases", () => {
+    const database = {} as ViewModels.Database;
+    const database2 = {} as ViewModels.Database;
+    explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
+    expect(explorer.isLastDatabase()).toBe(false);
+  });
+
+  it("should be false if not last empty database", () => {
+    const database = {} as ViewModels.Database;
+    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+    expect(explorer.isLastNonEmptyDatabase()).toBe(false);
+  });
+
+  it("should be true if last non empty database", () => {
+    const database = {} as ViewModels.Database;
+    database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
+    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+    expect(explorer.isLastNonEmptyDatabase()).toBe(true);
+  });
+});

src/Explorer/Explorer.tsx

@@ -19,13 +19,12 @@ import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter"
 import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { SubscriptionType } from "../Contracts/SubscriptionType";
 import * as ViewModels from "../Contracts/ViewModels";
 import { IGalleryItem } from "../Juno/JunoClient";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
 import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { appInsights } from "../Shared/appInsights";
+import { trackEvent } from "../Shared/appInsights";
 import * as SharedConstants from "../Shared/Constants";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
@@ -44,32 +43,31 @@ import { DialogProps, TextFieldProps } from "./Controls/Dialog";
 import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import { FileSystemUtil } from "./Notebook/FileSystemUtil";
+import * as 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 { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
+import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPane } from "./Panes/LoadQueryPane";
+import { LoadQueryPanel } from "./Panes/LoadQueryPanel";
 import NewVertexPane from "./Panes/NewVertexPane";
-import { SaveQueryPane } from "./Panes/SaveQueryPane";
+import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
 import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
 import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
-import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
-import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
@@ -95,13 +93,10 @@ export interface ExplorerParams {
   closeSidePanel: () => void;
   closeDialog: () => void;
   openDialog: (props: DialogProps) => void;
+  tabsManager: TabsManager;
 }
 
 export default class Explorer {
-  public flight: ko.Observable<string> = ko.observable<string>(
-    SharedConstants.CollectionCreation.DefaultAddCollectionDefaultFlight
-  );
-
   public addCollectionText: ko.Observable<string>;
   public addDatabaseText: ko.Observable<string>;
   public collectionTitle: ko.Observable<string>;
@@ -109,7 +104,6 @@ export default class Explorer {
   public deleteDatabaseText: ko.Observable<string>;
   public collectionTreeNodeAltText: ko.Observable<string>;
   public refreshTreeTitle: ko.Observable<string>;
-  public hasWriteAccess: ko.Observable<boolean>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
   /**
@@ -118,11 +112,6 @@ export default class Explorer {
    * */
   public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
-  /**
-   * @deprecated
-   * Use userContext.subscriptionType instead
-   * */
-  public subscriptionType: ko.Observable<SubscriptionType>;
   /**
    * @deprecated
    * Use userContext.apiType instead
@@ -163,8 +152,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;
@@ -181,16 +168,10 @@ export default class Explorer {
 
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
-  public nonSystemDatabases: ko.Computed<ViewModels.Database[]>;
   public selectedDatabaseId: ko.Computed<string>;
   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 +179,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>;
@@ -212,22 +192,12 @@ export default class Explorer {
   public addDatabasePane: AddDatabasePane;
   public addCollectionPane: AddCollectionPane;
   public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
-  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
-  public tableColumnOptionsPane: TableColumnOptionsPane;
   public querySelectPane: QuerySelectPane;
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
-  public settingsPane: SettingsPane;
-  public executeSprocParamsPane: ExecuteSprocParamsPane;
-  public uploadItemsPane: UploadItemsPane;
-  public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
-  public loadQueryPane: LoadQueryPane;
-  public saveQueryPane: ContextualPaneBase;
-  public browseQueriesPane: BrowseQueriesPane;
-  public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
   public gitHubReposPane: ContextualPaneBase;
@@ -264,7 +234,6 @@ export default class Explorer {
   public closeDialog: ExplorerParams["closeDialog"];
 
   private _panes: ContextualPaneBase[] = [];
-  private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false;
   private _isInitializingNotebooks: boolean;
   private notebookBasePath: ko.Observable<string>;
   private _arcadiaManager: ArcadiaResourceManager;
@@ -292,7 +261,6 @@ export default class Explorer {
     });
     this.addCollectionText = ko.observable<string>("New Collection");
     this.addDatabaseText = ko.observable<string>("New Database");
-    this.hasWriteAccess = ko.observable<boolean>(true);
     this.collectionTitle = ko.observable<string>("Collections");
     this.collectionTreeNodeAltText = ko.observable<string>("Collection");
     this.deleteCollectionText = ko.observable<string>("Delete Collection");
@@ -300,23 +268,6 @@ export default class Explorer {
     this.refreshTreeTitle = ko.observable<string>("Refresh collections");
 
     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 +288,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();
@@ -347,11 +300,7 @@ export default class Explorer {
         );
         Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
           async () => {
-            this.isNotebookEnabled(
-              !this.isAuthWithResourceToken() &&
-                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
-                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
-            );
+            this.isNotebookEnabled(false);
 
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
               isNotebookEnabled: this.isNotebookEnabled(),
@@ -372,10 +321,10 @@ export default class Explorer {
                 this.isSparkEnabledForAccount() &&
                 this.arcadiaWorkspaces() &&
                 this.arcadiaWorkspaces().length > 0) ||
-                this.isFeatureEnabled(Constants.Features.enableSpark)
+                userContext.features.enableSpark
             );
             if (this.isSparkEnabled()) {
-              appInsights.trackEvent(
+              trackEvent(
                 { name: "LoadedWithSparkEnabled" },
                 {
                   subscriptionId: userContext.subscriptionId,
@@ -396,26 +345,20 @@ 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);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
-    this.canExceedMaximumValue = ko.computed<boolean>(() =>
-      this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
-    );
+    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
 
-    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
+    this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
 
     this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
 
@@ -495,7 +438,7 @@ export default class Explorer {
     });
 
     this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
-      if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
+      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
         return true;
       }
 
@@ -554,20 +497,7 @@ export default class Explorer {
       () =>
         configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
     );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
-      this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
-    );
-    this.defaultExperience.subscribe((defaultExperience: string) => {
-      if (
-        defaultExperience &&
-        defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
-      ) {
-        this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
-          return database.id() === "system";
-        };
-      }
-    });
-
+    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
     this.selectedDatabaseId = ko.computed<string>(() => {
       const selectedNode = this.selectedNode();
       if (!selectedNode) {
@@ -589,10 +519,6 @@ export default class Explorer {
       }
     });
 
-    this.nonSystemDatabases = ko.computed(() => {
-      return this.databases().filter((database: ViewModels.Database) => !this._isSystemDatabasePredicate(database));
-    });
-
     this.addDatabasePane = new AddDatabasePane({
       id: "adddatabasepane",
       visible: ko.observable<boolean>(false),
@@ -615,13 +541,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
-      id: "deletedatabaseconfirmationpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.graphStylingPane = new GraphStylingPane({
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
@@ -643,13 +562,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.tableColumnOptionsPane = new TableColumnOptionsPane({
-      id: "tablecolumnoptionspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.querySelectPane = new QuerySelectPane({
       id: "queryselectpane",
       visible: ko.observable<boolean>(false),
@@ -671,57 +583,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.settingsPane = new SettingsPane({
-      id: "settingspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.executeSprocParamsPane = new ExecuteSprocParamsPane({
-      id: "executesprocparamspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.uploadItemsPane = new UploadItemsPane({
-      id: "uploaditemspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
-
-    this.loadQueryPane = new LoadQueryPane({
-      id: "loadquerypane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.saveQueryPane = new SaveQueryPane({
-      id: "savequerypane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.browseQueriesPane = new BrowseQueriesPane({
-      id: "browsequeriespane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.uploadFilePane = new UploadFilePane({
-      id: "uploadfilepane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.stringInputPane = new StringInputPane({
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
@@ -736,27 +597,18 @@ export default class Explorer {
       container: this,
     });
 
-    this.tabsManager = new TabsManager();
+    this.tabsManager = params?.tabsManager ?? new TabsManager();
 
     this._panes = [
       this.addDatabasePane,
       this.addCollectionPane,
       this.deleteCollectionConfirmationPane,
-      this.deleteDatabaseConfirmationPane,
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
-      this.tableColumnOptionsPane,
       this.querySelectPane,
       this.newVertexPane,
       this.cassandraAddCollectionPane,
-      this.settingsPane,
-      this.executeSprocParamsPane,
-      this.uploadItemsPane,
-      this.loadQueryPane,
-      this.saveQueryPane,
-      this.browseQueriesPane,
-      this.uploadFilePane,
       this.stringInputPane,
       this.setupNotebooksPane,
     ];
@@ -852,8 +704,6 @@ export default class Explorer {
         this.editTableEntityPane.title("Edit Table Row");
         this.deleteCollectionConfirmationPane.title("Delete Table");
         this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
-        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
     }
@@ -907,42 +757,29 @@ export default class Explorer {
     });
 
     // Override notebook server parameters from URL parameters
-    const featureSubcription = this.features.subscribe((features) => {
-      const serverInfo = this.notebookServerInfo();
-      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
-        serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
-      }
+    if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
+      this.notebookServerInfo({
+        notebookServerEndpoint: userContext.features.notebookServerUrl,
+        authToken: userContext.features.notebookServerToken,
+      });
+    }
 
-      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
-        serverInfo.authToken = features[Constants.Features.notebookServerToken];
-      }
-      this.notebookServerInfo(serverInfo);
-      this.notebookServerInfo.valueHasMutated();
+    if (userContext.features.notebookBasePath) {
+      this.notebookBasePath(userContext.features.notebookBasePath);
+    }
 
-      if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
-        this.notebookBasePath(features[Constants.Features.notebookBasePath]);
-      }
-
-      if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
-        this.sparkClusterConnectionInfo({
-          userName: undefined,
-          password: undefined,
-          endpoints: [
-            {
-              endpoint: features[Constants.Features.livyEndpoint],
-              kind: DataModels.SparkClusterEndpointKind.Livy,
-            },
-          ],
-        });
-        this.sparkClusterConnectionInfo.valueHasMutated();
-      }
-
-      if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
-        updateUserContext({ useSDKOperations: true });
-      }
-
-      featureSubcription.dispose();
-    });
+    if (userContext.features.livyEndpoint) {
+      this.sparkClusterConnectionInfo({
+        userName: undefined,
+        password: undefined,
+        endpoints: [
+          {
+            endpoint: userContext.features.livyEndpoint,
+            kind: DataModels.SparkClusterEndpointKind.Livy,
+          },
+        ],
+      });
+    }
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -1026,20 +863,6 @@ export default class Explorer {
     return this.selectedNode() == null;
   }
 
-  public isFeatureEnabled(feature: string): boolean {
-    const features = this.features();
-
-    if (!features) {
-      return false;
-    }
-
-    if (feature in features && features[feature]) {
-      return true;
-    }
-
-    return false;
-  }
-
   public logConsoleData(consoleData: ConsoleData): void {
     this.setNotificationConsoleData(consoleData);
   }
@@ -1086,7 +909,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,
     });
@@ -1099,10 +921,8 @@ export default class Explorer {
 
     // TODO: Refactor
     const deferred: Q.Deferred<any> = Q.defer();
-    this._setLoadingStatusText("Fetching databases...");
     readDatabases().then(
       (databases: DataModels.Database[]) => {
-        this._setLoadingStatusText("Successfully fetched databases.");
         TelemetryProcessor.traceSuccess(
           Action.LoadDatabases,
           {
@@ -1115,23 +935,16 @@ export default class Explorer {
         this.addDatabasesToList(deltaDatabases.toAdd);
         this.deleteDatabasesFromList(deltaDatabases.toDelete);
         this.selectedNode(currentlySelectedNode);
-        this._setLoadingStatusText("Fetching containers...");
-        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
-          .then(
-            () => {
-              this._setLoadingStatusText("Successfully fetched containers.");
-              deferred.resolve();
-            },
-            (reason) => {
-              this._setLoadingStatusText("Failed to fetch containers.");
-              deferred.reject(reason);
-            }
-          )
-          .finally(() => this.isRefreshingExplorer(false));
+        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
+          () => {
+            deferred.resolve();
+          },
+          (reason) => {
+            deferred.reject(reason);
+          }
+        );
       },
       (error) => {
-        this._setLoadingStatusText("Failed to fetch databases.");
-        this.isRefreshingExplorer(false);
         deferred.reject(error);
         const errorMessage = getErrorMessage(error);
         TelemetryProcessor.traceFailure(
@@ -1191,8 +1004,9 @@ export default class Explorer {
       description: "Refresh button clicked",
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    this.isRefreshingExplorer(true);
-    this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
+    userContext.authType === AuthType.ResourceToken
+      ? this.refreshDatabaseForResourceToken()
+      : this.refreshAllDatabases();
     this.refreshNotebookList();
   };
 
@@ -1285,12 +1099,12 @@ export default class Explorer {
       throw error;
     } finally {
       // Overwrite with feature flags
-      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
-        connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
+      if (userContext.features.notebookServerUrl) {
+        connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
       }
 
-      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
-        connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
+      if (userContext.features.notebookServerToken) {
+        connectionInfo.authToken = userContext.features.notebookServerToken;
       }
 
       this.notebookServerInfo(connectionInfo);
@@ -1406,7 +1220,12 @@ export default class Explorer {
   }
 
   public isLastNonEmptyDatabase(): boolean {
-    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
+    if (
+      this.isLastDatabase() &&
+      this.databases()[0] &&
+      this.databases()[0].collections &&
+      this.databases()[0].collections().length > 0
+    ) {
       return true;
     }
     return false;
@@ -1440,16 +1259,7 @@ export default class Explorer {
       if (inputs.defaultCollectionThroughput) {
         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 +1340,9 @@ export default class Explorer {
 
   public isRunningOnNationalCloud(): boolean {
     return (
-      this.serverId() === Constants.ServerIds.blackforest ||
-      this.serverId() === Constants.ServerIds.fairfax ||
-      this.serverId() === Constants.ServerIds.mooncake
+      userContext.portalEnv === "blackforest" ||
+      userContext.portalEnv === "fairfax" ||
+      userContext.portalEnv === "mooncake"
     );
   }
 
@@ -1996,11 +1806,7 @@ export default class Explorer {
 
   private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
     const authType = userContext.authType;
-    if (
-      authType === AuthType.EncryptedToken ||
-      authType === AuthType.ResourceToken ||
-      authType === AuthType.MasterKey
-    ) {
+    if (true) {
       this.isNotebooksEnabledForAccount(false);
       return;
     }
@@ -2203,38 +2009,6 @@ export default class Explorer {
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
   }
 
-  public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
-
-    this.uploadFilePane.openWithOptions({
-      paneTitle: "Upload file to notebook server",
-      selectFileInputLabel: "Select file to upload",
-      errorMessage: "Could not upload file",
-      inProgressMessage: "Uploading file to notebook server",
-      successMessage: "Successfully uploaded file to notebook server",
-      onSubmit: async (file: File): Promise<NotebookContentItem> => {
-        const readFileAsText = (inputFile: File): Promise<string> => {
-          const reader = new FileReader();
-          return new Promise((resolve, reject) => {
-            reader.onerror = () => {
-              reader.abort();
-              reject(`Problem parsing file: ${inputFile}`);
-            };
-            reader.onload = () => {
-              resolve(reader.result as string);
-            };
-            reader.readAsText(inputFile);
-          });
-        };
-
-        const fileContent = await readFileAsText(file);
-        return this.uploadFile(file.name, fileContent, parent);
-      },
-      extensions: undefined,
-      submitButtonLabel: "Upload",
-    });
-  }
-
   public refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to refresh notebook list, but notebook is not enabled";
@@ -2397,10 +2171,12 @@ export default class Explorer {
   public onNewCollectionClicked(): void {
     if (this.isPreferredApiCassandra()) {
       this.cassandraAddCollectionPane.open();
+    } else if (userContext.features.enableReactPane) {
+      this.openAddCollectionPanel();
     } else {
       this.addCollectionPane.open(this.selectedDatabaseId());
+      document.getElementById("linkAddCollection").focus();
     }
-    document.getElementById("linkAddCollection").focus();
   }
 
   private refreshCommandBarButtons(): void {
@@ -2436,32 +2212,6 @@ export default class Explorer {
     }
   }
 
-  private _setLoadingStatusText(text: string, title: string = "Welcome to Azure Cosmos DB") {
-    if (!text) {
-      return;
-    }
-
-    const loadingText = document.getElementById("explorerLoadingStatusText");
-    if (!loadingText) {
-      Logger.logError(
-        "getElementById('explorerLoadingStatusText') failed to find element",
-        "Explorer/_setLoadingStatusText"
-      );
-      return;
-    }
-    loadingText.innerHTML = text;
-
-    const loadingTitle = document.getElementById("explorerLoadingStatusTitle");
-    if (!loadingTitle) {
-      Logger.logError(
-        "getElementById('explorerLoadingStatusTitle') failed to find element",
-        "Explorer/_setLoadingStatusText"
-      );
-    } else {
-      loadingTitle.innerHTML = title;
-    }
-  }
-
   private _openSetupNotebooksPaneForQuickstart(): void {
     const title = "Enable Notebooks (Preview)";
     const description =
@@ -2529,7 +2279,7 @@ export default class Explorer {
   }
 
   public openDeleteCollectionConfirmationPane(): void {
-    this.isFeatureEnabled(Constants.Features.enableKOPanel)
+    userContext.features.enableKOPanel
       ? this.deleteCollectionConfirmationPane.open()
       : this.openSidePanel(
           "Delete Collection",
@@ -2540,4 +2290,67 @@ export default class Explorer {
           />
         );
   }
+
+  public openDeleteDatabaseConfirmationPane(): void {
+    this.openSidePanel(
+      "Delete Database",
+      <DeleteDatabaseConfirmationPanel
+        explorer={this}
+        openNotificationConsole={this.expandConsole}
+        closePanel={this.closeSidePanel}
+        selectedDatabase={this.findSelectedDatabase()}
+      />
+    );
+  }
+
+  public openUploadItemsPanePane(): void {
+    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
+  }
+
+  public openSettingPane(): void {
+    this.openSidePanel("Settings", <SettingsPane explorer={this} closePanel={this.closeSidePanel} />);
+  }
+
+  public openExecuteSprocParamsPanel(): void {
+    this.openSidePanel(
+      "Input parameters",
+      <ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
+    );
+  }
+
+  public async openAddCollectionPanel(): Promise<void> {
+    await this.loadDatabaseOffers();
+    this.openSidePanel(
+      "New Collection",
+      <AddCollectionPanel
+        explorer={this}
+        closePanel={() => this.closeSidePanel()}
+        openNotificationConsole={() => this.expandConsole()}
+      />
+    );
+  }
+
+  public openBrowseQueriesPanel(): void {
+    this.openSidePanel("Open Saved Queries", <BrowseQueriesPanel explorer={this} closePanel={this.closeSidePanel} />);
+  }
+
+  public openLoadQueryPanel(): void {
+    this.openSidePanel("Load Query", <LoadQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+  }
+
+  public openSaveQueryPanel(): void {
+    this.openSidePanel("Save Query", <SaveQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+  }
+
+  public openUploadFilePanel(parent?: NotebookContentItem): void {
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
+    this.openSidePanel(
+      "Upload File",
+      <UploadFilePane
+        explorer={this}
+        closePanel={this.closeSidePanel}
+        uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
+      />
+    );
+  }
 }

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -4,11 +4,8 @@
  * - inspired from gremlin-javascript for nodejs: https://github.com/jbmusso/gremlin-javascript
  * - tested on cosmosdb gremlin server
  * - only supports sessionless gremlin requests
- * - Relies on text-encoding polyfill (github.com/inexorabletash/text-encoding) for TextEncoder/TextDecoder on IE, Edge.
  */
 
-import { TextEncoder, TextDecoder } from "text-encoding";
-
 export interface GremlinSimpleClientParameters {
   endpoint: string; // The websocket endpoint
   user: string;

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 { 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 * as React from "react";
 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);
   }
 
@@ -163,7 +164,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     const settingsPaneButton: CommandButtonComponentProps = {
       iconSrc: SettingsIcon,
       iconAlt: label,
-      onCommandClick: () => container.settingsPane.open(),
+      onCommandClick: () => container.openSettingPane(),
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
@@ -406,7 +407,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
   return {
     iconSrc: NewNotebookIcon,
     iconAlt: label,
-    onCommandClick: () => container.onUploadToNotebookServerClicked(),
+    onCommandClick: () => container.openUploadFilePanel(),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,
@@ -419,7 +420,7 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
   return {
     iconSrc: BrowseQueriesIcon,
     iconAlt: label,
-    onCommandClick: () => container.browseQueriesPane.open(),
+    onCommandClick: () => container.openBrowseQueriesPanel(),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -432,7 +433,7 @@ function createOpenQueryFromDiskButton(container: Explorer): CommandButtonCompon
   return {
     iconSrc: OpenQueryFromDiskIcon,
     iconAlt: label,
-    onCommandClick: () => container.loadQueryPane.open(),
+    onCommandClick: () => container.openLoadQueryPanel(),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -455,7 +456,7 @@ function createEnableNotebooksButton(container: Explorer): CommandButtonComponen
     onCommandClick: () => container.setupNotebooksPane.openWithTitleAndDescription(label, description),
     commandButtonLabel: label,
     hasPopup: false,
-    disabled: !container.isNotebooksEnabledForAccount(),
+    disabled: false,
     ariaLabel: label,
     tooltipText: container.isNotebooksEnabledForAccount() ? "" : tooltip,
   };

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,37 +1,33 @@
-// Utilities for file system
-
-export class FileSystemUtil {
-  /**
-   * file list returns path starting with ./blah
-   * rename returns simply blah.
-   * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
-   * ./ inside the path.
-   * TODO: this should go away when not using jupyter for file operations and use normalized paths.
-   * @param path1
-   * @param path2
-   */
-  public static isPathEqual(path1: string, path2: string): boolean {
-    const normalize = (path: string): string => {
-      const dotSlash = "./";
-      if (path.indexOf(dotSlash) === 0) {
-        path = path.substring(dotSlash.length);
-      }
-      return path;
-    };
-
-    return normalize(path1) === normalize(path2);
-  }
-
-  /**
-   * Remove extension
-   * @param path
-   * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
-   */
-  public static stripExtension(path: string, extension: string): string {
-    const splitted = path.split(".");
-    if (splitted[splitted.length - 1] === extension) {
-      splitted.pop();
+/**
+ * file list returns path starting with ./blah
+ * rename returns simply blah.
+ * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
+ * ./ inside the path.
+ * TODO: this should go away when not using jupyter for file operations and use normalized paths.
+ * @param path1
+ * @param path2
+ */
+export function isPathEqual(path1: string, path2: string): boolean {
+  const normalize = (path: string): string => {
+    const dotSlash = "./";
+    if (path.indexOf(dotSlash) === 0) {
+      path = path.substring(dotSlash.length);
     }
-    return splitted.join(".");
-  }
+    return path;
+  };
+
+  return normalize(path1) === normalize(path2);
+}
+
+/**
+ * Remove extension
+ * @param path
+ * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
+ */
+export function stripExtension(path: string, extension: string): string {
+  const splitted = path.split(".");
+  if (splitted[splitted.length - 1] === extension) {
+    splitted.pop();
+  }
+  return splitted.join(".");
 }

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";
@@ -44,7 +44,7 @@ import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import * as TextFile from "./contents/file/text-file";
 import { NotebookUtil } from "../NotebookUtil";
-import { FileSystemUtil } from "../FileSystemUtil";
+import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";
 
@@ -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/Notebook/NotebookContentClient.ts

@@ -1,12 +1,11 @@
-import * as DataModels from "../../Contracts/DataModels";
-import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
-import * as StringUtils from "../../Utils/StringUtils";
-import { FileSystemUtil } from "./FileSystemUtil";
-import { NotebookUtil } from "./NotebookUtil";
-
-import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
-import { AjaxResponse } from "rxjs/ajax";
 import { stringifyNotebook } from "@nteract/commutable";
+import { FileType, IContent, IContentProvider, IEmptyContent, ServerConfig } from "@nteract/core";
+import { AjaxResponse } from "rxjs/ajax";
+import * as DataModels from "../../Contracts/DataModels";
+import * as StringUtils from "../../Utils/StringUtils";
+import * as FileSystemUtil from "./FileSystemUtil";
+import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
+import { NotebookUtil } from "./NotebookUtil";
 
 export class NotebookContentClient {
   constructor(

src/Explorer/OpenActions.ts

@@ -1,7 +1,7 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
 
-import * as ViewModels from "../Contracts/ViewModels";
 import { ActionContracts } from "../Contracts/ExplorerContracts";
+import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "./Explorer";
 
 export function handleOpenAction(
@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
     explorer.closeAllPanes();
-    explorer.settingsPane.open();
+    explorer.openSettingPane();
   }
 }
 

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 SharedConstants from "../../Shared/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 * as _ from "underscore";
+import * as Constants from "../../Common/Constants";
 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>;
@@ -105,10 +105,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.databaseId = ko.observable<string>();
     this.databaseCreateNew = ko.observable<boolean>(true);
     this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());
-    this.container.subscriptionType &&
-      this.container.subscriptionType.subscribe((subscriptionType) => {
-        this.databaseCreateNewShared(this.getSharedThroughputDefault());
-      });
     this.collectionWithThroughputInShared = ko.observable<boolean>(false);
     this.databaseIds = ko.observableArray<string>();
     this.uniqueKeys = ko.observableArray<DynamicListItem>();
@@ -186,7 +182,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -200,23 +195,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 +240,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -254,28 +253,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 +284,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return estimatedSpend;
     });
 
-    this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
-      return (this.container && this.container.isTryCosmosDBSubscription()) || false;
-    });
+    this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
 
     this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
       if (!!isTryCosmosDB) {
@@ -298,7 +295,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();
@@ -477,9 +474,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
     });
 
     this.resetData();
-    this.container.flight.subscribe(() => {
-      this.resetData();
-    });
 
     this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
       this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -489,7 +483,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(),
@@ -658,7 +652,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   }
 
   public getSharedThroughputDefault(): boolean {
-    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();
+    const subscriptionType = userContext.subscriptionType;
     if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
       return false;
     }
@@ -700,12 +694,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
         partitionKey: this.partitionKey(),
         databaseId: this.databaseId(),
       }),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: this._getThroughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -804,12 +798,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
         uniqueKeyPolicy,
         collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
       }),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: offerThroughput,
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       useIndexingForSharedThroughput: this.useIndexingForSharedThroughput(),
@@ -876,12 +870,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
           }),
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
         };
@@ -908,12 +902,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
           },
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           error: errorMessage,
@@ -993,7 +987,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.container.openEnableSynapseLinkDialog();
   }
 
-  public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);
+  public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
 
   public isValid(): boolean {
     // TODO add feature flag that disables validation for customers with custom accounts
@@ -1201,7 +1195,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     if (this.isAnalyticalStorageOn()) {
       // TODO: always default to 90 days once the backend hotfix is deployed
-      return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
+      return userContext.features.ttl90Days
         ? Constants.AnalyticalStorageTtl.Days90
         : Constants.AnalyticalStorageTtl.Infinite;
     }

src/Explorer/Panes/AddDatabasePane.test.ts

@@ -1,8 +1,9 @@
 import * as Constants from "../../Common/Constants";
+import { DatabaseAccount } from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { updateUserContext } from "../../UserContext";
 import Explorer from "../Explorer";
 import AddDatabasePane from "./AddDatabasePane";
-import { DatabaseAccount } from "../../Contracts/DataModels";
 
 describe("Add Database Pane", () => {
   describe("getSharedThroughputDefault()", () => {
@@ -44,31 +45,41 @@ describe("Add Database Pane", () => {
     });
 
     it("should be true if subscription type is Benefits", () => {
-      explorer.subscriptionType(SubscriptionType.Benefits);
+      updateUserContext({
+        subscriptionType: SubscriptionType.Benefits,
+      });
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });
 
     it("should be false if subscription type is EA", () => {
-      explorer.subscriptionType(SubscriptionType.EA);
+      updateUserContext({
+        subscriptionType: SubscriptionType.EA,
+      });
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(false);
     });
 
     it("should be true if subscription type is Free", () => {
-      explorer.subscriptionType(SubscriptionType.Free);
+      updateUserContext({
+        subscriptionType: SubscriptionType.Free,
+      });
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });
 
     it("should be true if subscription type is Internal", () => {
-      explorer.subscriptionType(SubscriptionType.Internal);
+      updateUserContext({
+        subscriptionType: SubscriptionType.Internal,
+      });
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });
 
     it("should be true if subscription type is PAYG", () => {
-      explorer.subscriptionType(SubscriptionType.PAYG);
+      updateUserContext({
+        subscriptionType: SubscriptionType.PAYG,
+      });
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });

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 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 * as Constants from "../../Common/Constants";
 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>;
@@ -61,11 +61,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
     // TODO 388844: get defaults from parent frame
     this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());
 
-    this.container.subscriptionType &&
-      this.container.subscriptionType.subscribe((subscriptionType) => {
-        this.databaseCreateNewShared(this.getSharedThroughputDefault());
-      });
-
     this.databaseIdLabel = ko.computed<string>(() =>
       this.container.isPreferredApiCassandra() ? "Keyspace id" : "Database id"
     );
@@ -122,7 +117,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -134,10 +128,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 +144,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 +164,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();
@@ -227,9 +226,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
     });
 
     this.resetData();
-    this.container.flight.subscribe(() => {
-      this.resetData();
-    });
 
     this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
       this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -239,7 +235,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(),
@@ -272,11 +268,11 @@ export default class AddDatabasePane extends ContextualPaneBase {
     super.open();
     this.resetData();
     const addDatabasePaneOpenMessage = {
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         throughput: this.throughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -298,10 +294,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
         shared: this.databaseCreateNewShared(),
       }),
       offerThroughput,
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -341,7 +337,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
   }
 
   public getSharedThroughputDefault(): boolean {
-    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();
+    const subscriptionType = userContext.subscriptionType;
 
     if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
       return false;
@@ -360,10 +356,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
         shared: this.databaseCreateNewShared(),
       }),
       offerThroughput: offerThroughput,
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -382,10 +378,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
         shared: this.databaseCreateNewShared(),
       }),
       offerThroughput: offerThroughput,
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       error: errorMessage,

src/Explorer/Panes/BrowseQueriesPane.html

@@ -1,33 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
-  <div class="contextual-pane" id="browsequeriespane">
-    <!-- Save Query form -- Start -->
-    <div class="contextual-pane-in">
-      <div class="paneContentContainer">
-        <!-- Save Query header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Save Query header - End -->
-
-        <!-- Save Query inputs - Start -->
-        <div class="paneMainContent"><div class="pkPadding" data-bind="react: queriesGridComponentAdapter"></div></div>
-      </div>
-    </div>
-    <!-- Save Query form  - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/BrowseQueriesPane.ts

@@ -1,100 +0,0 @@
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { Areas } from "../../Common/Constants";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import * as Logger from "../../Common/Logger";
-import { QueriesGridComponentAdapter } from "../Controls/QueriesGridReactComponent/QueriesGridComponentAdapter";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import QueryTab from "../Tabs/QueryTab";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-
-export class BrowseQueriesPane extends ContextualPaneBase {
-  public queriesGridComponentAdapter: QueriesGridComponentAdapter;
-  public canSaveQueries: ko.Computed<boolean>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Open Saved Queries");
-    this.resetData();
-    this.canSaveQueries = this.container && this.container.canSaveQueries;
-    this.queriesGridComponentAdapter = new QueriesGridComponentAdapter(this.container);
-  }
-
-  public open() {
-    super.open();
-    this.queriesGridComponentAdapter.forceRender();
-  }
-
-  public close() {
-    super.close();
-    this.queriesGridComponentAdapter.forceRender();
-  }
-
-  public submit() {
-    // override default behavior because this is not a form
-  }
-
-  public setupQueries = async (src: any, event: MouseEvent): Promise<void> => {
-    if (!this.container) {
-      return;
-    }
-
-    const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
-      dataExplorerArea: Areas.ContextualPane,
-      paneTitle: this.title(),
-    });
-    try {
-      this.isExecuting(true);
-      await this.container.queriesClient.setupQueriesCollection();
-      this.container.refreshAllDatabases().done(() => this.queriesGridComponentAdapter.forceRender());
-      TelemetryProcessor.traceSuccess(
-        Action.SetupSavedQueries,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: this.title(),
-        },
-        startKey
-      );
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      TelemetryProcessor.traceFailure(
-        Action.SetupSavedQueries,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: this.title(),
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-      this.formErrors(`Failed to setup a collection for saved queries: ${errorMessage}`);
-    } finally {
-      this.isExecuting(false);
-    }
-  };
-
-  public loadSavedQuery = (savedQuery: DataModels.Query): void => {
-    const selectedCollection: ViewModels.Collection = this.container && this.container.findSelectedCollection();
-    if (!selectedCollection) {
-      // should never get into this state because this pane is only accessible through the query tab
-      Logger.logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
-      return;
-    } else if (this.container.isPreferredApiMongoDB()) {
-      selectedCollection.onNewMongoQueryClick(selectedCollection, null);
-    } else {
-      selectedCollection.onNewQueryClick(selectedCollection, null);
-    }
-    const queryTab = this.container.tabsManager.activeTab() as QueryTab;
-    queryTab.tabTitle(savedQuery.queryName);
-    queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
-    queryTab.initialEditorContent(savedQuery.query);
-    queryTab.sqlQueryEditorContent(savedQuery.query);
-    TelemetryProcessor.trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
-      dataExplorerArea: Areas.ContextualPane,
-      queryName: savedQuery.queryName,
-      paneTitle: this.title(),
-    });
-    this.close();
-  };
-}

src/Explorer/Panes/BrowseQueriesPanel/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Browse queries panel Should render Default properly 1`] = `
+<BrowseQueriesPanel
+  closePanel={[Function]}
+  explorer={
+    Object {
+      "canSaveQueries": [Function],
+      "queriesClient": Object {
+        "getQueries": [Function],
+      },
+    }
+  }
+>
+  <div
+    className="panelFormWrapper"
+  >
+    <div
+      className="panelMainContent"
+    >
+      <QueriesGridComponent
+        containerVisible={true}
+        onQuerySelect={[Function]}
+        queriesClient={
+          Object {
+            "getQueries": [Function],
+          }
+        }
+        saveQueryEnabled={true}
+      >
+        <div
+          id="emptyQueryBanner"
+        >
+          <div>
+            You have not saved any queries yet. 
+            <br />
+             
+            <br />
+            To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save Query and follow the prompt in order to save the query.
+          </div>
+          <img
+            alt="Save query helper banner"
+            src=""
+            style={
+              Object {
+                "border": "1px solid undefined",
+                "height": "150px",
+                "marginTop": "20px",
+                "width": "310px",
+              }
+            }
+          />
+        </div>
+      </QueriesGridComponent>
+    </div>
+  </div>
+</BrowseQueriesPanel>
+`;

src/Explorer/Panes/BrowseQueriesPanel/index.test.tsx

@@ -0,0 +1,30 @@
+import { mount } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import { QueriesClient } from "../../../Common/QueriesClient";
+import { Query } from "../../../Contracts/DataModels";
+import Explorer from "../../Explorer";
+import { BrowseQueriesPanel } from "./index";
+
+describe("Browse queries panel", () => {
+  const fakeExplorer = {} as Explorer;
+  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
+  const fakeClientQuery = {} as QueriesClient;
+  const fakeQueryData = {} as Query[];
+  fakeClientQuery.getQueries = async () => fakeQueryData;
+  fakeExplorer.queriesClient = fakeClientQuery;
+  const props = {
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
+  };
+
+  it("Should render Default properly", () => {
+    const wrapper = mount(<BrowseQueriesPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should show empty view when query is empty []", () => {
+    const wrapper = mount(<BrowseQueriesPanel {...props} />);
+    expect(wrapper.exists("#emptyQueryBanner")).toBe(true);
+  });
+});

src/Explorer/Panes/BrowseQueriesPanel/index.tsx

@@ -0,0 +1,63 @@
+import React, { FunctionComponent } from "react";
+import { Areas } from "../../../Common/Constants";
+import { logError } from "../../../Common/Logger";
+import { Query } from "../../../Contracts/DataModels";
+import { Collection } from "../../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import {
+  QueriesGridComponent,
+  QueriesGridComponentProps,
+} from "../../Controls/QueriesGridReactComponent/QueriesGridComponent";
+import Explorer from "../../Explorer";
+import QueryTab from "../../Tabs/QueryTab";
+
+interface BrowseQueriesPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+}
+
+export const BrowseQueriesPanel: FunctionComponent<BrowseQueriesPanelProps> = ({
+  explorer,
+  closePanel,
+}: BrowseQueriesPanelProps): JSX.Element => {
+  const loadSavedQuery = (savedQuery: Query): void => {
+    const selectedCollection: Collection = explorer && explorer.findSelectedCollection();
+    if (!selectedCollection) {
+      // should never get into this state because this pane is only accessible through the query tab
+      logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");
+      return;
+    } else if (userContext.apiType === "Mongo") {
+      selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
+    } else {
+      selectedCollection.onNewQueryClick(selectedCollection, undefined);
+    }
+    const queryTab = explorer.tabsManager.activeTab() as QueryTab;
+    queryTab.tabTitle(savedQuery.queryName);
+    queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
+    queryTab.initialEditorContent(savedQuery.query);
+    queryTab.sqlQueryEditorContent(savedQuery.query);
+    trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
+      dataExplorerArea: Areas.ContextualPane,
+      queryName: savedQuery.queryName,
+      paneTitle: "Open Saved Queries",
+    });
+    closePanel();
+  };
+
+  const props: QueriesGridComponentProps = {
+    queriesClient: explorer.queriesClient,
+    onQuerySelect: loadSavedQuery,
+    containerVisible: true,
+    saveQueryEnabled: explorer.canSaveQueries(),
+  };
+
+  return (
+    <div className="panelFormWrapper">
+      <div className="panelMainContent">
+        <QueriesGridComponent {...props} />
+      </div>
+    </div>
+  );
+};

src/Explorer/Panes/CassandraAddCollectionPane.html

@@ -114,7 +114,7 @@
               aria-label="Keyspace id"
             />
 
-            <datalist id="keyspacesList" data-bind="foreach: container.nonSystemDatabases">
+            <datalist id="keyspacesList" data-bind="foreach: container.databases">
               <option data-bind="value: $data.id"></option>
             </datalist>
 

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -1,21 +1,20 @@
-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 SharedConstants from "../../Shared/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
-import { ContextualPaneBase } from "./ContextualPaneBase";
+import * as _ from "underscore";
+import * as Constants from "../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { HashMap } from "../../Common/HashMap";
 import { configContext, Platform } from "../../ConfigContext";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import * as DataModels from "../../Contracts/DataModels";
+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>;
@@ -117,17 +116,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
 
     this.resetData();
 
-    this.container.flight.subscribe(() => {
-      this.resetData();
-    });
-
     this.requestUnitsUsageCostDedicated = ko.computed(() => {
       const account = this.container.databaseAccount();
       if (!account) {
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -139,10 +133,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 +149,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 +171,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
-      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -183,10 +181,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 +197,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 +218,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;
       }
@@ -253,10 +256,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         });
         this.keyspaceIds(cachedKeyspaceIdsList);
       };
-      this.container.nonSystemDatabases.subscribe((newDatabases: ViewModels.Database[]) =>
-        updateKeyspaceIds(newDatabases)
-      );
-      updateKeyspaceIds(this.container.nonSystemDatabases());
+      this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
+      updateKeyspaceIds(this.container.databases());
     }
 
     this.autoPilotUsageCost = ko.pureComputed<string>(() => {
@@ -300,12 +301,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         partitionKey: "",
         databaseId: this.keyspaceId(),
       }),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -352,12 +353,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         hasDedicatedThroughput: this.dedicateTableThroughput(),
       }),
       keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       toCreateKeyspace: toCreateKeyspace,
@@ -396,12 +397,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             hasDedicatedThroughput: this.dedicateTableThroughput(),
           }),
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           toCreateKeyspace: toCreateKeyspace,
@@ -424,12 +425,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             hasDedicatedThroughput: this.dedicateTableThroughput(),
           },
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           toCreateKeyspace: toCreateKeyspace,

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">
-        <PanelErrorComponent {...this.getPanelErrorProps()} />
+      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
+        <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()} />
-        <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
-          <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
-        </div>
-      </div>
+        <PanelFooterComponent buttonLabel="OK" />
+        {this.state.isExecuting && <PanelLoadingScreen />}
+      </form>
     );
   }
 
-  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> {
-    const collection = this.props.explorer.findSelectedCollection();
+  public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
+    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/DeleteDatabaseConfirmationPane.html

@@ -1,109 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div
-    class="contextual-pane-out"
-    data-bind="
-            click: cancel,
-            clickBubble: false"
-  ></div>
-  <div class="contextual-pane" id="deletedatabaseconfirmationpane">
-    <!-- Delete Databaes Confirmation form - Start -->
-    <div class="contextual-pane-in">
-      <form
-        class="paneContentContainer"
-        data-bind="
-                    submit: submit"
-      >
-        <!-- Delete Database Confirmation header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="
-                            click: cancel, event: { keypress: onCloseKeyPress }"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Delete Database Confirmation header - End -->
-
-        <div class="warningErrorContainer" data-bind="visible: !formErrors()">
-          <div class="warningErrorContent">
-            <span><img class="paneWarningIcon" src="/warning.svg" alt="Warning" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              Warning! The action you are about to take cannot be undone. Continuing will permanently delete this
-              resource and all of its children resources.
-            </span>
-          </div>
-        </div>
-
-        <!-- Delete Database Confirmation errors - Start -->
-        <div
-          class="warningErrorContainer"
-          aria-live="assertive"
-          data-bind="
-                        visible: formErrors() && formErrors() !== ''"
-        >
-          <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-              <a class="errorLink" role="link" data-bind="click: showErrorDetails">More details</a>
-            </span>
-          </div>
-        </div>
-        <!-- Delete Database Confirmation errors - End -->
-
-        <!-- Delete Database Confirmation inputs - Start -->
-        <div class="paneMainContent">
-          <div>
-            <span class="mandatoryStar">*</span> <span data-bind="text: databaseIdConfirmationText"></span>
-            <p>
-              <input
-                type="text"
-                name="databaseIdConfirmation"
-                data-test="confirmDatabaseId"
-                required
-                class="collid"
-                data-bind="value: databaseIdConfirmation, hasFocus: firstFieldHasFocus"
-                aria-label="Confirm by typing the database id"
-              />
-            </p>
-          </div>
-          <div data-bind="visible: recordDeleteFeedback">
-            <div>Help us improve Azure Cosmos DB!</div>
-            <div>What is the reason why you are deleting this database?</div>
-            <p>
-              <textarea
-                type="text"
-                data-test="databaseDeleteFeedback"
-                name="databaseDeleteFeedback"
-                rows="3"
-                cols="53"
-                maxlength="512"
-                class="collid"
-                data-bind="value: databaseDeleteFeedback"
-                aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
-              >
-              </textarea>
-            </p>
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut">
-            <input type="submit" data-test="deleteDatabase" value="OK" class="btncreatecoll1" />
-          </div>
-        </div>
-        <!-- Delete Database Confirmation inputs - End -->
-      </form>
-    </div>
-    <!-- Delete Database Confirmation form - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts

@@ -1,127 +0,0 @@
-jest.mock("../../Common/dataAccess/deleteDatabase");
-jest.mock("../../Shared/Telemetry/TelemetryProcessor");
-import * as ko from "knockout";
-import Q from "q";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import DeleteDatabaseConfirmationPane from "./DeleteDatabaseConfirmationPane";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import Explorer from "../Explorer";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { TreeNode } from "../../Contracts/ViewModels";
-import { TabsManager } from "../Tabs/TabsManager";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-
-describe("Delete Database Confirmation Pane", () => {
-  describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
-    let explorer: Explorer;
-
-    beforeAll(() => {
-      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-    });
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
-
-    it("should be true if only 1 database", () => {
-      let database = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastDatabase()).toBe(true);
-    });
-
-    it("should be false if only 2 databases", () => {
-      let database = {} as ViewModels.Database;
-      let database2 = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-      expect(explorer.isLastDatabase()).toBe(false);
-    });
-
-    it("should be false if not last empty database", () => {
-      let database = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastNonEmptyDatabase()).toBe(false);
-    });
-
-    it("should be true if last non empty database", () => {
-      let database = {} as ViewModels.Database;
-      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastNonEmptyDatabase()).toBe(true);
-    });
-  });
-
-  describe("shouldRecordFeedback()", () => {
-    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
-      let fakeExplorer = {} as Explorer;
-
-      let pane = new DeleteDatabaseConfirmationPane({
-        id: "deletedatabaseconfirmationpane",
-        visible: ko.observable<boolean>(false),
-        container: fakeExplorer as any,
-      });
-
-      fakeExplorer.isLastNonEmptyDatabase = () => true;
-      pane.container = fakeExplorer as any;
-      expect(pane.shouldRecordFeedback()).toBe(true);
-
-      fakeExplorer.isLastDatabase = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => true;
-      pane.container = fakeExplorer as any;
-      expect(pane.shouldRecordFeedback()).toBe(true);
-
-      fakeExplorer.isLastNonEmptyDatabase = () => false;
-      fakeExplorer.isLastDatabase = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      pane.container = fakeExplorer as any;
-      expect(pane.shouldRecordFeedback()).toBe(false);
-    });
-  });
-
-  describe("submit()", () => {
-    it("on submit() it should log feedback if last non empty database or is last database that has shared throughput", () => {
-      let selectedDatabaseId = "testDB";
-      let fakeExplorer = {} as Explorer;
-      fakeExplorer.findSelectedDatabase = () => {
-        return {
-          id: ko.observable<string>(selectedDatabaseId),
-          rid: "test",
-          collections: ko.observableArray<ViewModels.Collection>(),
-        } as ViewModels.Database;
-      };
-      fakeExplorer.refreshAllDatabases = () => Q.resolve();
-      fakeExplorer.selectedDatabaseId = ko.computed<string>(() => selectedDatabaseId);
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      const SubscriptionId = "testId";
-      const AccountName = "testAccount";
-      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
-        id: SubscriptionId,
-        name: AccountName,
-      } as DataModels.DatabaseAccount);
-      fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
-      fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
-        return false;
-      });
-      fakeExplorer.selectedNode = ko.observable<TreeNode>();
-      fakeExplorer.tabsManager = new TabsManager();
-      fakeExplorer.isLastNonEmptyDatabase = () => true;
-
-      let pane = new DeleteDatabaseConfirmationPane({
-        id: "deletedatabaseconfirmationpane",
-        visible: ko.observable<boolean>(false),
-        container: fakeExplorer as any,
-      });
-      pane.databaseIdConfirmation = ko.observable<string>(selectedDatabaseId);
-      const Feedback = "my feedback";
-      pane.databaseDeleteFeedback(Feedback);
-
-      return pane.submit().then(() => {
-        let deleteFeedback = new DeleteFeedback(SubscriptionId, AccountName, DataModels.ApiKind.SQL, Feedback);
-        expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
-          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-        });
-      });
-    });
-  });
-});

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -1,143 +0,0 @@
-import * as ko from "knockout";
-import Q from "q";
-import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-import { ARMError } from "../../Utils/arm/request";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-
-export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
-  public databaseIdConfirmationText: ko.Observable<string>;
-  public databaseIdConfirmation: ko.Observable<string>;
-  public databaseDeleteFeedback: ko.Observable<string>;
-  public recordDeleteFeedback: ko.Observable<boolean>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.databaseIdConfirmationText = ko.observable<string>("Confirm by typing the database id");
-    this.databaseIdConfirmation = ko.observable<string>();
-    this.databaseDeleteFeedback = ko.observable<string>();
-    this.recordDeleteFeedback = ko.observable<boolean>(false);
-    this.title("Delete Database");
-    this.resetData();
-  }
-
-  public submit(): Q.Promise<any> {
-    if (!this._isValid()) {
-      const selectedDatabase: ViewModels.Database = this.container.findSelectedDatabase();
-      this.formErrors("Input database name does not match the selected database");
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Error while deleting collection ${selectedDatabase && selectedDatabase.id()}: ${this.formErrors()}`
-      );
-      return Q.resolve();
-    }
-
-    this.formErrors("");
-    this.isExecuting(true);
-    const selectedDatabase = this.container.findSelectedDatabase();
-    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
-      databaseId: selectedDatabase.id(),
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      paneTitle: this.title(),
-    });
-    return Q(
-      deleteDatabase(selectedDatabase.id()).then(
-        () => {
-          this.isExecuting(false);
-          this.close();
-          this.container.refreshAllDatabases();
-          this.container.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
-          this.container.selectedNode(null);
-          selectedDatabase
-            .collections()
-            .forEach((collection: ViewModels.Collection) =>
-              this.container.tabsManager.closeTabsByComparator(
-                (tab) =>
-                  tab.node?.id() === collection.id() &&
-                  (tab.node as ViewModels.Collection).databaseId === collection.databaseId
-              )
-            );
-          this.resetData();
-          TelemetryProcessor.traceSuccess(
-            Action.DeleteDatabase,
-            {
-              databaseId: selectedDatabase.id(),
-              dataExplorerArea: Constants.Areas.ContextualPane,
-              paneTitle: this.title(),
-            },
-            startKey
-          );
-
-          if (this.shouldRecordFeedback()) {
-            let deleteFeedback = new DeleteFeedback(
-              this.container.databaseAccount().id,
-              this.container.databaseAccount().name,
-              DefaultExperienceUtility.getApiKindFromDefaultExperience(this.container.defaultExperience()),
-              this.databaseDeleteFeedback()
-            );
-
-            TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
-              message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-            });
-
-            this.databaseDeleteFeedback("");
-          }
-        },
-        (error: any) => {
-          this.isExecuting(false);
-          const errorMessage = getErrorMessage(error);
-          this.formErrors(errorMessage);
-          this.formErrorsDetails(errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.DeleteDatabase,
-            {
-              databaseId: selectedDatabase.id(),
-              dataExplorerArea: Constants.Areas.ContextualPane,
-              paneTitle: this.title(),
-              error: errorMessage,
-              errorStack: getErrorStack(error),
-            },
-            startKey
-          );
-        }
-      )
-    );
-  }
-
-  public resetData() {
-    this.databaseIdConfirmation("");
-    super.resetData();
-  }
-
-  public async open() {
-    await this.container.loadSelectedDatabaseOffer();
-    this.recordDeleteFeedback(this.shouldRecordFeedback());
-    super.open();
-  }
-
-  public shouldRecordFeedback(): boolean {
-    return (
-      this.container.isLastNonEmptyDatabase() ||
-      (this.container.isLastDatabase() && this.container.isSelectedDatabaseShared())
-    );
-  }
-
-  private _isValid(): boolean {
-    const selectedDatabase = this.container.findSelectedDatabase();
-    if (!selectedDatabase) {
-      return false;
-    }
-
-    return this.databaseIdConfirmation() === selectedDatabase.id();
-  }
-}

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

@@ -0,0 +1,139 @@
+jest.mock("../../Common/dataAccess/deleteDatabase");
+jest.mock("../../Shared/Telemetry/TelemetryProcessor");
+import { mount, ReactWrapper, shallow } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+import { ApiKind, DatabaseAccount } from "../../Contracts/DataModels";
+import { Collection, Database } from "../../Contracts/ViewModels";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { updateUserContext } from "../../UserContext";
+import Explorer from "../Explorer";
+import { DeleteDatabaseConfirmationPanel } from "./DeleteDatabaseConfirmationPanel";
+
+describe("Delete Database Confirmation Pane", () => {
+  describe("shouldRecordFeedback()", () => {
+    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
+      const fakeExplorer = new Explorer();
+      fakeExplorer.refreshAllDatabases = () => undefined;
+      fakeExplorer.isLastCollection = () => true;
+      fakeExplorer.isSelectedDatabaseShared = () => false;
+
+      const database = {} as Database;
+      database.collections = ko.observableArray<Collection>([{} as Collection]);
+      database.id = ko.observable<string>("testDatabse");
+
+      const props = {
+        explorer: fakeExplorer,
+        closePanel: (): void => undefined,
+        openNotificationConsole: (): void => undefined,
+        selectedDatabase: database,
+      };
+
+      const wrapper = shallow(<DeleteDatabaseConfirmationPanel {...props} />);
+      props.explorer.isLastNonEmptyDatabase = () => true;
+      wrapper.setProps(props);
+      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
+
+      props.explorer.isLastNonEmptyDatabase = () => false;
+      props.explorer.isLastDatabase = () => false;
+      wrapper.setProps(props);
+      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
+
+      props.explorer.isLastNonEmptyDatabase = () => false;
+      props.explorer.isLastDatabase = () => true;
+      props.explorer.isSelectedDatabaseShared = () => false;
+      wrapper.setProps(props);
+      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
+    });
+  });
+
+  describe("submit()", () => {
+    const selectedDatabaseId = "testDatabse";
+    const fakeExplorer = new Explorer();
+    fakeExplorer.refreshAllDatabases = () => undefined;
+    fakeExplorer.isLastCollection = () => true;
+    fakeExplorer.isSelectedDatabaseShared = () => false;
+
+    let wrapper: ReactWrapper;
+    beforeAll(() => {
+      updateUserContext({
+        databaseAccount: {
+          name: "testDatabaseAccountName",
+          properties: {
+            cassandraEndpoint: "testEndpoint",
+          },
+          id: "testDatabaseAccountId",
+        } as DatabaseAccount,
+        defaultExperience: DefaultAccountExperienceType.DocumentDB,
+      });
+      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
+      (TelemetryProcessor.trace as jest.Mock).mockReturnValue(undefined);
+    });
+
+    beforeEach(() => {
+      const database = {} as Database;
+      database.collections = ko.observableArray<Collection>([{} as Collection]);
+      database.id = ko.observable<string>(selectedDatabaseId);
+
+      const props = {
+        explorer: fakeExplorer,
+        closePanel: (): void => undefined,
+        openNotificationConsole: (): void => undefined,
+        selectedDatabase: database,
+      };
+
+      wrapper = mount(<DeleteDatabaseConfirmationPanel {...props} />);
+      props.explorer.isLastNonEmptyDatabase = () => true;
+      wrapper.setProps(props);
+    });
+
+    it("Should call delete database", () => {
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
+
+      wrapper
+        .find("#confirmDatabaseId")
+        .hostNodes()
+        .simulate("change", { target: { value: selectedDatabaseId } });
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
+      wrapper.unmount();
+    });
+
+    it("should record feedback", async () => {
+      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
+      wrapper
+        .find("#confirmDatabaseId")
+        .hostNodes()
+        .simulate("change", { target: { value: selectedDatabaseId } });
+
+      expect(wrapper.exists("#deleteDatabaseFeedbackInput")).toBe(true);
+      const feedbackText = "Test delete Database feedback text";
+      wrapper
+        .find("#deleteDatabaseFeedbackInput")
+        .hostNodes()
+        .simulate("change", { target: { value: feedbackText } });
+
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
+
+      const deleteFeedback = new DeleteFeedback(
+        "testDatabaseAccountId",
+        "testDatabaseAccountName",
+        ApiKind.SQL,
+        feedbackText
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
+        message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+      });
+      wrapper.unmount();
+    });
+  });
+});

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -0,0 +1,168 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { Text, TextField } from "office-ui-fabric-react";
+import React, { FunctionComponent, useState } from "react";
+import { Areas } from "../../Common/Constants";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { Collection, Database } 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 { logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import Explorer from "../Explorer";
+import { PanelFooterComponent } from "./PanelFooterComponent";
+import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "./PanelLoadingScreen";
+
+interface DeleteDatabaseConfirmationPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+  openNotificationConsole: () => void;
+  selectedDatabase: Database;
+}
+
+export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = (
+  props: DeleteDatabaseConfirmationPanelProps
+): JSX.Element => {
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+
+  const [formError, setFormError] = useState<string>("");
+  const [databaseInput, setDatabaseInput] = useState<string>("");
+  const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
+
+  const getPanelErrorProps = (): PanelInfoErrorProps => {
+    if (formError) {
+      return {
+        messageType: "error",
+        message: formError,
+        showErrorDetails: true,
+        openNotificationConsole: props.openNotificationConsole,
+      };
+    }
+
+    return {
+      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.",
+    };
+  };
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    const { selectedDatabase, explorer } = props;
+    event.preventDefault();
+    if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
+      setFormError("Input database name does not match the selected database");
+      logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
+      return;
+    }
+    setFormError("");
+    setLoadingTrue();
+
+    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
+      databaseId: selectedDatabase.id(),
+      dataExplorerArea: Areas.ContextualPane,
+      paneTitle: "Delete Database",
+    });
+
+    try {
+      await deleteDatabase(selectedDatabase.id());
+      props.closePanel();
+      explorer.refreshAllDatabases();
+      explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
+      explorer.selectedNode(undefined);
+      selectedDatabase
+        .collections()
+        .forEach((collection: Collection) =>
+          explorer.tabsManager.closeTabsByComparator(
+            (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
+          )
+        );
+      TelemetryProcessor.traceSuccess(
+        Action.DeleteDatabase,
+        {
+          databaseId: selectedDatabase.id(),
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: "Delete Database",
+        },
+        startKey
+      );
+
+      if (shouldRecordFeedback()) {
+        const deleteFeedback = new DeleteFeedback(
+          userContext?.databaseAccount.id,
+          userContext?.databaseAccount.name,
+          DefaultExperienceUtility.getApiKindFromDefaultExperience(userContext.defaultExperience),
+          databaseFeedbackInput
+        );
+
+        TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
+          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+        });
+      }
+    } catch (error) {
+      setLoadingFalse();
+      setFormError(error);
+      const errorMessage = getErrorMessage(error);
+      TelemetryProcessor.traceFailure(
+        Action.DeleteDatabase,
+        {
+          databaseId: selectedDatabase.id(),
+          dataExplorerArea: Areas.ContextualPane,
+          paneTitle: "Delete Database",
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+    }
+  };
+
+  const shouldRecordFeedback = (): boolean => {
+    const { explorer } = props;
+    return explorer.isLastNonEmptyDatabase() || (explorer.isLastDatabase() && explorer.isSelectedDatabaseShared());
+  };
+
+  return (
+    <form className="panelFormWrapper" onSubmit={submit}>
+      <PanelInfoErrorComponent {...getPanelErrorProps()} />
+      <div className="panelMainContent">
+        <div className="confirmDeleteInput">
+          <span className="mandatoryStar">* </span>
+          <Text variant="small">Confirm by typing the database id</Text>
+          <TextField
+            id="confirmDatabaseId"
+            autoFocus
+            styles={{ fieldGroup: { width: 300 } }}
+            onChange={(event, newInput?: string) => {
+              setDatabaseInput(newInput);
+            }}
+          />
+        </div>
+        {shouldRecordFeedback() && (
+          <div className="deleteDatabaseFeedback">
+            <Text variant="small" block>
+              Help us improve Azure Cosmos DB!
+            </Text>
+            <Text variant="small" block>
+              What is the reason why you are deleting this database?
+            </Text>
+            <TextField
+              id="deleteDatabaseFeedbackInput"
+              styles={{ fieldGroup: { width: 300 } }}
+              multiline
+              rows={3}
+              onChange={(event, newInput?: string) => {
+                setDatabaseFeedbackInput(newInput);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <PanelFooterComponent buttonLabel="OK" />
+      {isLoading && <PanelLoadingScreen />}
+    </form>
+  );
+};

src/Explorer/Panes/ExecuteSprocParamsPane.html

@@ -1,175 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div
-    class="contextual-pane-out"
-    data-bind="
-                    click: cancel,
-                    clickBubble: false"
-  ></div>
-  <div class="contextual-pane" id="executesprocparamspane">
-    <!-- Input params form  -- Start -->
-    <div class="contextual-pane-in">
-      <form class="paneContentContainer" data-bind="submit: execute">
-        <!-- Input params header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="
-                                    click: cancel, event: { keypress: onCloseKeyPress }"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Input params header - End -->
-
-        <!-- Input params errors - Start -->
-        <div
-          class="warningErrorContainer"
-          aria-live="assertive"
-          data-bind="visible: formErrors() && formErrors() !== ''"
-        >
-          <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-              <a
-                class="errorLink"
-                role="link"
-                data-bind="
-                            visible: formErrorsDetails() && formErrorsDetails() !== '',
-                            click: showErrorDetails"
-                >More details</a
-              >
-            </span>
-          </div>
-        </div>
-        <!-- Input params errors - End -->
-
-        <!-- Script for each param clause to be used for executing a stored procedure -->
-        <script type="text/html" id="param-template">
-          <tr>
-            <td class="paramTemplateRow">
-              <select class="dataTypeSelector" data-bind="value: type, attr: { 'aria-label': type }">
-                <option value="custom">Custom</option>
-                <option value="string">String</option>
-              </select>
-            </td>
-            <td class="paramTemplateRow">
-              <input class="valueTextBox" aria-label="Param" data-bind="textInput: value" />
-              <span
-                class="spEntityAddCancel"
-                data-bind="click: $parent.deleteParam.bind($parent, $index()), event: { keypress: $parent.onDeleteParamKeyPress.bind($parent, $index()) }"
-                role="button"
-                tabindex="0"
-              >
-                <img src="/Entity_cancel.svg" alt="Delete param" />
-              </span>
-              <span
-                class="spEntityAddCancel"
-                data-bind="click: $parent.addNewParamAtIndex.bind($parent, $index()), event: { keypress: $parent.onAddNewParamAtIndexKeyPress.bind($parent, $index()) }"
-                role="button"
-                tabindex="0"
-              >
-                <img src="/Add-property.svg" alt="Add param" />
-              </span>
-            </td>
-          </tr>
-        </script>
-
-        <!-- Input params input - Start -->
-        <div class="paneMainContent">
-          <div>
-            <!-- Partition key input - Start -->
-            <div class="partitionKeyContainer" data-bind="visible: collectionHasPartitionKey">
-              <div class="inputHeader">Partition key value</div>
-              <div class="scrollBox">
-                <table class="paramsClauseTable">
-                  <thead>
-                    <tr>
-                      <th>Type</th>
-                      <th>Value</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td class="paramTemplateRow">
-                        <select
-                          class="dataTypeSelector"
-                          data-bind="value: partitionKeyType, attr: { 'aria-label': partitionKeyType }"
-                        >
-                          <option value="custom">Custom</option>
-                          <option value="string">String</option>
-                        </select>
-                      </td>
-                      <td class="paramTemplateRow">
-                        <input
-                          class="partitionKeyValue"
-                          id="partitionKeyValue"
-                          role="textbox"
-                          tabindex="0"
-                          aria-label="Partition key value"
-                          data-bind="textInput: partitionKeyValue"
-                          autofocus
-                        />
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <!-- Partition key input - End -->
-
-            <!-- Input params table - Start -->
-            <div class="paramsTable">
-              <div class="enterInputParams">Enter input parameters (if any)</div>
-              <div class="scrollBox" id="executeSprocParamsScroll">
-                <table class="paramsClauseTable">
-                  <thead>
-                    <tr>
-                      <th class="paramTableTypeHead">Type</th>
-                      <th>Param</th>
-                    </tr>
-                  </thead>
-                  <tbody data-bind="template: { name: 'param-template', foreach: params }"></tbody>
-                </table>
-              </div>
-              <div
-                id="addNewParamLink"
-                class="addNewParam"
-                data-bind="click: addNewParam, event: { keypress: onAddNewParamKeyPress }, attr:{ title: addNewParamLabel }"
-                role="button"
-                tabindex="0"
-              >
-                <span>
-                  <img src="/Add-property.svg" alt="Add new param" />
-                  <span class="addNewParamLabel" data-bind="text: addNewParamLabel" />
-                </span>
-              </div>
-            </div>
-            <!-- Input params table - End -->
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut">
-            <input
-              type="submit"
-              value="Execute"
-              class="btncreatecoll1"
-              data-bind="{ css: { btnDisabled: !executeButtonEnabled() }}"
-            />
-          </div>
-        </div>
-        <!-- Input param input - End -->
-      </form>
-    </div>
-    <!-- Input params form - End -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/ExecuteSprocParamsPane.ts

@@ -1,172 +0,0 @@
-import * as ko from "knockout";
-import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import StoredProcedure from "../Tree/StoredProcedure";
-
-export interface ExecuteSprocParam {
-  type: ko.Observable<string>;
-  value: ko.Observable<string>;
-}
-
-type UnwrappedExecuteSprocParam = {
-  type: string;
-  value: any;
-};
-
-export class ExecuteSprocParamsPane extends ContextualPaneBase {
-  public params: ko.ObservableArray<ExecuteSprocParam>;
-  public partitionKeyType: ko.Observable<string>;
-  public partitionKeyValue: ko.Observable<string>;
-  public collectionHasPartitionKey: ko.Observable<boolean>;
-  public addNewParamLabel: string = "Add New Param";
-  public executeButtonEnabled: ko.Computed<boolean>;
-
-  private _selectedSproc: StoredProcedure;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Input parameters");
-    this.partitionKeyType = ko.observable<string>("custom");
-    this.partitionKeyValue = ko.observable<string>();
-    this.executeButtonEnabled = ko.computed<boolean>(() => this.validPartitionKeyValue());
-    this.params = ko.observableArray<ExecuteSprocParam>([
-      { type: ko.observable<string>("string"), value: ko.observable<string>() },
-    ]);
-    this.collectionHasPartitionKey = ko.observable<boolean>();
-    this.resetData();
-  }
-
-  public open() {
-    super.open();
-    const currentSelectedSproc = this.container && this.container.findSelectedStoredProcedure();
-    if (!!currentSelectedSproc && !!this._selectedSproc && this._selectedSproc.rid !== currentSelectedSproc.rid) {
-      this.params([]);
-      this.partitionKeyValue("");
-    }
-    this._selectedSproc = currentSelectedSproc;
-    this.collectionHasPartitionKey((this.container && !!this.container.findSelectedCollection().partitionKey) || false);
-    const focusElement = document.getElementById("partitionKeyValue");
-    focusElement && focusElement.focus();
-  }
-
-  public execute = () => {
-    this.formErrors("");
-    const partitionKeyValue: string = (() => {
-      if (!this.collectionHasPartitionKey()) {
-        return undefined;
-      }
-
-      const type: string = this.partitionKeyType();
-      let value: string = this.partitionKeyValue();
-
-      if (type === "custom") {
-        if (value === "undefined" || value === undefined) {
-          return undefined;
-        }
-
-        if (value === "null" || value === null) {
-          return null;
-        }
-
-        try {
-          value = JSON.parse(value);
-        } catch (e) {
-          this.formErrors(`Invalid param specified: ${value}`);
-          this.formErrorsDetails(`Invalid param specified: ${value} is not a valid literal value`);
-        }
-      }
-
-      return value;
-    })();
-    const unwrappedParams: UnwrappedExecuteSprocParam[] = ko.toJS(this.params());
-    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = !this.params()
-      ? undefined
-      : _.map(unwrappedParams, (unwrappedParam: UnwrappedExecuteSprocParam) => {
-          let paramValue: string = unwrappedParam.value;
-
-          if (unwrappedParam.type === "custom" && (paramValue === "undefined" || paramValue === "")) {
-            paramValue = undefined;
-          } else if (unwrappedParam.type === "custom") {
-            try {
-              paramValue = JSON.parse(paramValue);
-            } catch (e) {
-              this.formErrors(`Invalid param specified: ${paramValue}`);
-              this.formErrorsDetails(`Invalid param specified: ${paramValue} is not a valid literal value`);
-            }
-          }
-
-          unwrappedParam.value = paramValue;
-          return unwrappedParam;
-        });
-
-    if (this.formErrors()) {
-      return;
-    }
-
-    const sprocParams = wrappedSprocParams && _.pluck(wrappedSprocParams, "value");
-    this._selectedSproc.execute(sprocParams, partitionKeyValue);
-    this.close();
-  };
-
-  private validPartitionKeyValue = (): boolean => {
-    return !this.collectionHasPartitionKey || (this.partitionKeyValue() != null && this.partitionKeyValue().length > 0);
-  };
-
-  public addNewParam = (): void => {
-    this.params.push({ type: ko.observable<string>("string"), value: ko.observable<string>() });
-    this._maintainFocusOnAddNewParamLink();
-  };
-
-  public onAddNewParamKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.addNewParam();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addNewParamAtIndex = (index: number): void => {
-    this.params.splice(index, 0, { type: ko.observable<string>("string"), value: ko.observable<string>() });
-  };
-
-  public onAddNewParamAtIndexKeyPress = (index: number, source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.addNewParamAtIndex(index);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public deleteParam = (indexToRemove: number): void => {
-    const params = _.reject(this.params(), (param: ExecuteSprocParam, index: number) => {
-      return index === indexToRemove;
-    });
-    this.params(params);
-  };
-
-  public onDeleteParamKeyPress = (indexToRemove: number, source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.deleteParam(indexToRemove);
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public close(): void {
-    super.close();
-    this.formErrors("");
-    this.formErrorsDetails("");
-  }
-
-  private _maintainFocusOnAddNewParamLink(): void {
-    const addNewParamLink = document.getElementById("addNewParamLink");
-    addNewParamLink.scrollIntoView();
-  }
-}

src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx

@@ -0,0 +1,91 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  IImageProps,
+  Image,
+  Label,
+  Stack,
+  TextField,
+} from "office-ui-fabric-react";
+import React, { FunctionComponent } from "react";
+import AddPropertyIcon from "../../../../images/Add-property.svg";
+import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
+
+const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
+const options = [
+  { key: "string", text: "String" },
+  { key: "custom", text: "Custom" },
+];
+
+export interface InputParameterProps {
+  dropdownLabel?: string;
+  inputParameterTitle?: string;
+  inputLabel?: string;
+  isAddRemoveVisible: boolean;
+  onDeleteParamKeyPress?: () => void;
+  onAddNewParamKeyPress?: () => void;
+  onParamValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onParamKeyChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  paramValue: string;
+  selectedKey: string | number;
+}
+
+export const InputParameter: FunctionComponent<InputParameterProps> = ({
+  dropdownLabel,
+  inputParameterTitle,
+  inputLabel,
+  isAddRemoveVisible,
+  paramValue,
+  selectedKey,
+  onDeleteParamKeyPress,
+  onAddNewParamKeyPress,
+  onParamValueChange,
+  onParamKeyChange,
+}: InputParameterProps): JSX.Element => {
+  const imageProps: IImageProps = {
+    width: 20,
+    height: 30,
+    className: dropdownLabel ? "addRemoveIconLabel" : "addRemoveIcon",
+  };
+
+  return (
+    <>
+      {inputParameterTitle && <Label>{inputParameterTitle}</Label>}
+      <Stack horizontal>
+        <Dropdown
+          label={dropdownLabel && dropdownLabel}
+          selectedKey={selectedKey}
+          onChange={onParamKeyChange}
+          options={options}
+          styles={dropdownStyles}
+        />
+        <TextField
+          label={inputLabel && inputLabel}
+          id="confirmCollectionId"
+          autoFocus
+          value={paramValue}
+          onChange={onParamValueChange}
+        />
+        {isAddRemoveVisible && (
+          <>
+            <Image
+              {...imageProps}
+              src={EntityCancelIcon}
+              alt="Delete param"
+              id="deleteparam"
+              onClick={onDeleteParamKeyPress}
+            />
+            <Image
+              {...imageProps}
+              src={AddPropertyIcon}
+              alt="Add param"
+              id="addparam"
+              onClick={onAddNewParamKeyPress}
+            />
+          </>
+        )}
+      </Stack>
+    </>
+  );
+};

src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx

@@ -0,0 +1,34 @@
+import { mount } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { ExecuteSprocParamsPanel } from "./index";
+
+describe("Excute Sproc Param Pane", () => {
+  const fakeExplorer = {} as Explorer;
+  const props = {
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
+  };
+
+  it("should render Default properly", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("initially display 2 input field, 1 partition and 1 parameter", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    expect(wrapper.find("input[type='text']")).toHaveLength(2);
+  });
+
+  it("add a new parameter field", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    wrapper.find("#addparam").last().simulate("click");
+    expect(wrapper.find("input[type='text']")).toHaveLength(3);
+  });
+
+  it("remove a parameter field", () => {
+    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    wrapper.find("#deleteparam").last().simulate("click");
+    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+  });
+});

src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx

@@ -0,0 +1,163 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
+import React, { FunctionComponent, useState } from "react";
+import AddPropertyIcon from "../../../../images/Add-property.svg";
+import Explorer from "../../Explorer";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import { InputParameter } from "./InputParameter";
+
+interface ExecuteSprocParamsPaneProps {
+  explorer: Explorer;
+  closePanel: () => void;
+}
+
+const imageProps: IImageProps = {
+  width: 20,
+  height: 30,
+};
+
+interface UnwrappedExecuteSprocParam {
+  key: string;
+  text: string;
+}
+
+export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
+  explorer,
+  closePanel,
+}: ExecuteSprocParamsPaneProps): JSX.Element => {
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+  const [paramKeyValues, setParamKeyValues] = useState<UnwrappedExecuteSprocParam[]>([{ key: "string", text: "" }]);
+  const [partitionValue, setPartitionValue] = useState<string>("");
+  const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
+  const [formError, setFormError] = useState<string>("");
+  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
+
+  const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
+    setSelectedKey(item);
+  };
+
+  const genericPaneProps: GenericRightPaneProps = {
+    container: explorer,
+    formError: formError,
+    formErrorDetail: formErrorsDetails,
+    id: "executesprocparamspane",
+    isExecuting: isLoading,
+    title: "Input parameters",
+    submitButtonText: "Execute",
+    onClose: () => closePanel(),
+    onSubmit: () => submit(),
+  };
+
+  const validateUnwrappedParams = (): boolean => {
+    const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
+    for (let i = 0; i < unwrappedParams.length; i++) {
+      const { key: paramType, text: paramValue } = unwrappedParams[i];
+      if (paramType === "custom" && (paramValue === "" || paramValue === undefined)) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const setInvalidParamError = (invalidParam: string): void => {
+    setFormError(`Invalid param specified: ${invalidParam}`);
+    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
+  };
+
+  const submit = (): void => {
+    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
+    const { key: partitionKey } = selectedKey;
+    if (partitionKey === "custom" && (partitionValue === "" || partitionValue === undefined)) {
+      setInvalidParamError(partitionValue);
+      return;
+    }
+    if (!validateUnwrappedParams()) {
+      setInvalidParamError("");
+      return;
+    }
+    setLoadingTrue();
+    const sprocParams = wrappedSprocParams && wrappedSprocParams.map((sprocParam) => sprocParam.text);
+    const currentSelectedSproc = explorer.findSelectedStoredProcedure();
+    currentSelectedSproc.execute(sprocParams, partitionValue);
+    setLoadingFalse();
+    closePanel();
+  };
+
+  const deleteParamAtIndex = (indexToRemove: number): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue.splice(indexToRemove, 1);
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const addNewParamAtIndex = (indexToAdd: number): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue.splice(indexToAdd, 0, { key: "string", text: "" });
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const paramValueChange = (value: string, indexOfInput: number): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue[indexOfInput].text = value;
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const paramKeyChange = (
+    _event: React.FormEvent<HTMLDivElement>,
+    selectedParam: IDropdownOption,
+    indexOfParam: number
+  ): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue[indexOfParam].key = selectedParam.key.toString();
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  const addNewParamAtLastIndex = (): void => {
+    const cloneParamKeyValue = [...paramKeyValues];
+    cloneParamKeyValue.splice(cloneParamKeyValue.length, 0, { key: "string", text: "" });
+    setParamKeyValues(cloneParamKeyValue);
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <div className="panelFormWrapper">
+        <div className="panelMainContent">
+          <InputParameter
+            dropdownLabel="Key"
+            inputParameterTitle="Partition key value"
+            inputLabel="Value"
+            isAddRemoveVisible={false}
+            onParamValueChange={(_event, newInput?: string) => {
+              setPartitionValue(newInput);
+            }}
+            onParamKeyChange={onPartitionKeyChange}
+            paramValue={partitionValue}
+            selectedKey={selectedKey.key}
+          />
+          {paramKeyValues.map((paramKeyValue, index) => (
+            <InputParameter
+              key={paramKeyValue && paramKeyValue.text + index}
+              dropdownLabel={!index && "Key"}
+              inputParameterTitle={!index && "Enter input parameters (if any)"}
+              inputLabel={!index && "Param"}
+              isAddRemoveVisible={true}
+              onDeleteParamKeyPress={() => deleteParamAtIndex(index)}
+              onAddNewParamKeyPress={() => addNewParamAtIndex(index + 1)}
+              onParamValueChange={(event, newInput?: string) => {
+                paramValueChange(newInput, index);
+              }}
+              onParamKeyChange={(event: React.FormEvent<HTMLDivElement>, selectedParam: IDropdownOption) => {
+                paramKeyChange(event, selectedParam, index);
+              }}
+              paramValue={paramKeyValue && paramKeyValue.text}
+              selectedKey={paramKeyValue && paramKeyValue.key}
+            />
+          ))}
+          <Stack horizontal onClick={addNewParamAtLastIndex}>
+            <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
+            <Text className="addNewParamStyle">Add New Param</Text>
+          </Stack>
+        </div>
+      </div>
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/GenericRightPaneComponent.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
-import { KeyCodes } from "../../Common/Constants";
 import { Subscription } from "knockout";
+import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import * as React from "react";
 import ErrorRedIcon from "../../../images/error_red.svg";
 import LoadingIndicatorIcon from "../../../images/LoadingIndicator_3Squares.gif";
+import { KeyCodes } from "../../Common/Constants";
 import Explorer from "../Explorer";
 
 export interface GenericRightPaneProps {

src/Explorer/Panes/LoadQueryPane.html

@@ -1,88 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
-  <div class="contextual-pane" id="loadQueryPane">
-    <!-- Load Query form  -- Start -->
-    <div class="contextual-pane-in">
-      <form class="paneContentContainer" data-bind="submit: submit">
-        <!-- Load Query header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Load Query header - End -->
-
-        <!-- Load Query errors - Start -->
-        <div
-          class="warningErrorContainer"
-          aria-live="assertive"
-          data-bind="visible: formErrors() && formErrors() !== ''"
-        >
-          <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-              <a
-                class="errorLink"
-                role="link"
-                data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails"
-                >More details</a
-              >
-            </span>
-          </div>
-        </div>
-        <!-- Load Query errors - End -->
-
-        <!-- Load Query inputs - Start -->
-        <div class="paneMainContent">
-          <div>
-            <div class="renewUploadItemsHeader">Select a query document</div>
-            <input
-              class="importFilesTitle"
-              type="text"
-              role="textbox"
-              disabled
-              data-bind="value: selectedFilesTitle"
-              aria-label="Select a query document"
-              autofocus
-            />
-            <input
-              type="file"
-              id="importQueryInput"
-              accept="text/plain"
-              style="display: none"
-              data-bind="event: { change: updateSelectedFiles }"
-            />
-            <a
-              href="#"
-              id="queryFileImportLink"
-              aria-label="Upload files"
-              tabindex="0"
-              role="button"
-              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
-            >
-              <img class="fileImportImg" src="/folder_16x16.svg" alt="upload files" title="upload files" />
-            </a>
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut"><input type="submit" value="Load" class="btncreatecoll1" /></div>
-        </div>
-        <!-- Load Query inputs - End -->
-      </form>
-    </div>
-    <!-- Load Query form  - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/LoadQueryPane.ts

@@ -1,147 +0,0 @@
-import * as ko from "knockout";
-import * as Q from "q";
-import * as Constants from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as Logger from "../../Common/Logger";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import QueryTab from "../Tabs/QueryTab";
-
-export class LoadQueryPane extends ContextualPaneBase {
-  public selectedFilesTitle: ko.Observable<string>;
-  public files: ko.Observable<FileList>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Load Query");
-    this.resetData();
-
-    this.selectedFilesTitle = ko.observable<string>("");
-    this.files = ko.observable<FileList>();
-    this.files.subscribe((newFiles: FileList) => this.updateSelectedFilesTitle(newFiles));
-    const focusElement = document.getElementById("queryFileImportLink");
-    focusElement && focusElement.focus();
-  }
-
-  public submit() {
-    this.formErrors("");
-    this.formErrorsDetails("");
-    if (!this.files() || this.files().length === 0) {
-      this.formErrors("No file specified");
-      this.formErrorsDetails("No file specified. Please input a file.");
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        "Could not load query -- No file specified. Please input a file."
-      );
-      return;
-    }
-
-    const file: File = this.files().item(0);
-    const id: string = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      `Loading query from file ${file.name}`
-    );
-    this.isExecuting(true);
-    this.loadQueryFromFile(this.files().item(0))
-      .then(
-        () => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully loaded query from file ${file.name}`
-          );
-          this.close();
-        },
-        (error: any) => {
-          this.formErrors("Failed to load query");
-          this.formErrorsDetails(`Failed to load query: ${error}`);
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Error,
-            `Failed to load query from file ${file.name}: ${error}`
-          );
-        }
-      )
-      .finally(() => {
-        this.isExecuting(false);
-        NotificationConsoleUtils.clearInProgressMessageWithId(id);
-      });
-  }
-
-  public updateSelectedFiles(element: any, event: any): void {
-    this.files(event.target.files);
-  }
-
-  public open() {
-    super.open();
-    const focusElement = document.getElementById("queryFileImportLink");
-    focusElement && focusElement.focus();
-  }
-
-  public close() {
-    super.close();
-    this.resetData();
-    this.files(undefined);
-    this.resetFileInput();
-  }
-
-  public onImportLinkClick(source: any, event: MouseEvent): boolean {
-    document.getElementById("importQueryInput").click();
-    return false;
-  }
-
-  public onImportLinkKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      this.onImportLinkClick(source, null);
-      return false;
-    }
-    return true;
-  };
-
-  public loadQueryFromFile(file: File): Q.Promise<void> {
-    const selectedCollection: ViewModels.Collection = this.container && this.container.findSelectedCollection();
-    if (!selectedCollection) {
-      // should never get into this state
-      Logger.logError("No collection was selected", "LoadQueryPane.loadQueryFromFile");
-      return Q.reject("No collection was selected");
-    } else if (this.container.isPreferredApiMongoDB()) {
-      selectedCollection.onNewMongoQueryClick(selectedCollection, null);
-    } else {
-      selectedCollection.onNewQueryClick(selectedCollection, null);
-    }
-    const deferred: Q.Deferred<void> = Q.defer<void>();
-    const reader = new FileReader();
-    reader.onload = (evt: any): void => {
-      const fileData: string = evt.target.result;
-      const queryTab = this.container.tabsManager.activeTab() as QueryTab;
-      queryTab.initialEditorContent(fileData);
-      queryTab.sqlQueryEditorContent(fileData);
-      deferred.resolve();
-    };
-
-    reader.onerror = (evt: ProgressEvent): void => {
-      deferred.reject((evt as any).error.message);
-    };
-
-    reader.readAsText(file);
-    return deferred.promise;
-  }
-
-  private updateSelectedFilesTitle(fileList: FileList) {
-    this.selectedFilesTitle("");
-
-    if (!fileList || fileList.length === 0) {
-      return;
-    }
-
-    for (let i = 0; i < fileList.length; i++) {
-      const originalTitle = this.selectedFilesTitle();
-      this.selectedFilesTitle(originalTitle + `"${fileList.item(i).name}"`);
-    }
-  }
-
-  private resetFileInput(): void {
-    const inputElement = $("#importQueryInput");
-    inputElement.wrap("<form>").closest("form").get(0).reset();
-    inputElement.unwrap();
-  }
-}

src/Explorer/Panes/LoadQueryPanel/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Load Query Pane should render Default properly 1`] = `
+<GenericRightPaneComponent
+  container={Object {}}
+  formError=""
+  formErrorDetail=""
+  id="loadQueryPane"
+  isExecuting={false}
+  onClose={[Function]}
+  onSubmit={[Function]}
+  submitButtonText="Load"
+  title="Load Query"
+>
+  <div
+    className="panelFormWrapper"
+  >
+    <div
+      className="panelMainContent"
+    >
+      <Stack
+        horizontal={true}
+      >
+        <StyledTextFieldBase
+          autoFocus={true}
+          id="confirmCollectionId"
+          label="Select a query document"
+          readOnly={true}
+          styles={
+            Object {
+              "fieldGroup": Object {
+                "width": 300,
+              },
+            }
+          }
+          value=""
+        />
+        <label
+          className="customFileUpload"
+          htmlFor="importQueryInputId"
+        >
+          <StyledImageBase
+            alt="upload files"
+            className="fileIcon"
+            height={20}
+            imageFit={4}
+            src=""
+            width={20}
+          />
+          <input
+            accept="text/plain"
+            className="fileUpload"
+            id="importQueryInputId"
+            onChange={[Function]}
+            type="file"
+          />
+        </label>
+      </Stack>
+    </div>
+  </div>
+</GenericRightPaneComponent>
+`;

src/Explorer/Panes/LoadQueryPanel/index.test.tsx

@@ -0,0 +1,17 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { LoadQueryPanel } from "./index";
+
+describe("Load Query Pane", () => {
+  it("should render Default properly", () => {
+    const fakeExplorer = {} as Explorer;
+    const props = {
+      explorer: fakeExplorer,
+      closePanel: (): void => undefined,
+    };
+
+    const wrapper = shallow(<LoadQueryPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Panes/LoadQueryPanel/index.tsx

@@ -0,0 +1,134 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { IImageProps, Image, ImageFit, Stack, TextField } from "office-ui-fabric-react";
+import React, { FunctionComponent, useState } from "react";
+import folderIcon from "../../../../images/folder_16x16.svg";
+import { logError } from "../../../Common/Logger";
+import { userContext } from "../../../UserContext";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
+import Explorer from "../../Explorer";
+import QueryTab from "../../Tabs/QueryTab";
+import { Collection } from "..//../../Contracts/ViewModels";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+
+interface LoadQueryPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+}
+
+export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
+  explorer,
+  closePanel,
+}: LoadQueryPanelProps): JSX.Element => {
+  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
+  const [formError, setFormError] = useState<string>("");
+  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
+  const [selectedFileName, setSelectedFileName] = useState<string>("");
+  const [selectedFiles, setSelectedFiles] = useState<FileList>();
+
+  const imageProps: Partial<IImageProps> = {
+    imageFit: ImageFit.centerCover,
+    width: 20,
+    height: 20,
+    className: "fileIcon",
+  };
+
+  const title = "Load Query";
+  const genericPaneProps: GenericRightPaneProps = {
+    container: explorer,
+    formError: formError,
+    formErrorDetail: formErrorsDetails,
+    id: "loadQueryPane",
+    isExecuting: isLoading,
+    title,
+    submitButtonText: "Load",
+    onClose: () => closePanel(),
+    onSubmit: () => submit(),
+  };
+
+  const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { files } = e.target;
+    setSelectedFiles(files);
+    setSelectedFileName(files && files[0] && `"${files[0].name}"`);
+  };
+
+  const submit = async (): Promise<void> => {
+    setFormError("");
+    setFormErrorsDetails("");
+    if (!selectedFiles || selectedFiles.length === 0) {
+      setFormError("No file specified");
+      setFormErrorsDetails("No file specified. Please input a file.");
+      logConsoleError("Could not load query -- No file specified. Please input a file.");
+      return;
+    }
+
+    const file: File = selectedFiles[0];
+    logConsoleProgress(`Loading query from file ${file.name}`);
+    setLoadingTrue();
+    try {
+      await loadQueryFromFile(file);
+      logConsoleInfo(`Successfully loaded query from file ${file.name}`);
+      closePanel();
+      setLoadingFalse();
+    } catch (error) {
+      setLoadingFalse();
+      setFormError("Failed to load query");
+      setFormErrorsDetails(`Failed to load query: ${error}`);
+      logConsoleError(`Failed to load query from file ${file.name}: ${error}`);
+    }
+  };
+
+  const loadQueryFromFile = async (file: File): Promise<void> => {
+    const selectedCollection: Collection = explorer?.findSelectedCollection();
+    if (!selectedCollection) {
+      logError("No collection was selected", "LoadQueryPane.loadQueryFromFile");
+    } else if (userContext.apiType === "Mongo") {
+      selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
+    } else {
+      selectedCollection.onNewQueryClick(selectedCollection, undefined);
+    }
+    const reader = new FileReader();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    reader.onload = (evt: any): void => {
+      const fileData: string = evt.target.result;
+      const queryTab = explorer.tabsManager.activeTab() as QueryTab;
+      queryTab.initialEditorContent(fileData);
+      queryTab.sqlQueryEditorContent(fileData);
+    };
+
+    reader.onerror = (): void => {
+      setFormError("Failed to load query");
+      setFormErrorsDetails(`Failed to load query`);
+      logConsoleError(`Failed to load query from file ${file.name}`);
+    };
+    return reader.readAsText(file);
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <div className="panelFormWrapper">
+        <div className="panelMainContent">
+          <Stack horizontal>
+            <TextField
+              id="confirmCollectionId"
+              label="Select a query document"
+              value={selectedFileName}
+              autoFocus
+              readOnly
+              styles={{ fieldGroup: { width: 300 } }}
+            />
+            <label htmlFor="importQueryInputId" className="customFileUpload">
+              <Image {...imageProps} src={folderIcon} alt="upload files" />
+              <input
+                className="fileUpload"
+                type="file"
+                id="importQueryInputId"
+                accept="text/plain"
+                onChange={onFileSelected}
+              />
+            </label>
+          </Stack>
+        </div>
+      </div>
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/PaneComponents.ts

@@ -1,24 +1,15 @@
-import AddDatabasePaneTemplate from "./AddDatabasePane.html";
 import AddCollectionPaneTemplate from "./AddCollectionPane.html";
+import AddDatabasePaneTemplate from "./AddDatabasePane.html";
+import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
-import DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.html";
+import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
+import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
+import StringInputPaneTemplate from "./StringInputPane.html";
 import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
 import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
-import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
 import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
-import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
-import SettingsPaneTemplate from "./SettingsPane.html";
-import ExecuteSprocParamsPaneTemplate from "./ExecuteSprocParamsPane.html";
-import UploadItemsPaneTemplate from "./UploadItemsPane.html";
-import LoadQueryPaneTemplate from "./LoadQueryPane.html";
-import SaveQueryPaneTemplate from "./SaveQueryPane.html";
-import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
-import UploadFilePaneTemplate from "./UploadFilePane.html";
-import StringInputPaneTemplate from "./StringInputPane.html";
-import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
-import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 
 export class PaneComponent {
   constructor(data: any) {
@@ -53,15 +44,6 @@ export class DeleteCollectionConfirmationPaneComponent {
   }
 }
 
-export class DeleteDatabaseConfirmationPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: DeleteDatabaseConfirmationPaneTemplate,
-    };
-  }
-}
-
 export class GraphNewVertexPaneComponent {
   constructor() {
     return {
@@ -98,15 +80,6 @@ export class TableEditEntityPaneComponent {
   }
 }
 
-export class TableColumnOptionsPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: TableColumnOptionsPaneTemplate,
-    };
-  }
-}
-
 export class TableQuerySelectPaneComponent {
   constructor() {
     return {
@@ -125,69 +98,6 @@ export class CassandraAddCollectionPaneComponent {
   }
 }
 
-export class SettingsPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: SettingsPaneTemplate,
-    };
-  }
-}
-
-export class ExecuteSprocParamsComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: ExecuteSprocParamsPaneTemplate,
-    };
-  }
-}
-
-export class UploadItemsPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: UploadItemsPaneTemplate,
-    };
-  }
-}
-
-export class LoadQueryPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: LoadQueryPaneTemplate,
-    };
-  }
-}
-
-export class SaveQueryPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: SaveQueryPaneTemplate,
-    };
-  }
-}
-
-export class BrowseQueriesPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: BrowseQueriesPaneTemplate,
-    };
-  }
-}
-
-export class UploadFilePaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: UploadFilePaneTemplate,
-    };
-  }
-}
-
 export class StringInputPaneComponent {
   constructor() {
     return {