Fix table api query projections

When building queries with projections, the resulting query does not include the "id" property as part of the projection. The "id" property is used by the results grid to display as the RowKey so the result is queries wih projections do not show the RowKey.

This change fixes this by including "id" as part of the projections.

.eslintignore

@@ -97,6 +97,7 @@ 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
@@ -125,10 +126,15 @@ 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
@@ -136,10 +142,13 @@ 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
@@ -246,8 +255,11 @@ 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

@@ -1,9 +0,0 @@
-# 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,6 +70,7 @@ jobs:
       - run: npm run test
   build:
     runs-on: ubuntu-latest
+    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
@@ -91,14 +92,6 @@ 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,6 +18,7 @@ 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

jest.config.js

@@ -67,8 +67,7 @@ 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|css)$": "<rootDir>/mockModule",
-    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less)$": "<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.6.1",
+    "@microsoft/applicationinsights-web": "2.5.9",
     "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -44,7 +44,9 @@
     "@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",
@@ -58,6 +60,8 @@
     "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",
@@ -75,9 +79,12 @@
     "monaco-editor": "0.18.1",
     "ms": "2.1.3",
     "msal": "1.4.4",
+    "object.entries": "1.1.0",
     "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",
@@ -94,9 +101,13 @@
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "text-encoding": "0.7.0",
     "underscore": "1.9.1",
-    "utility-types": "3.10.0"
+    "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
+    "webcrypto-liner": "1.1.4",
+    "webfontloader": "1.6.28",
+    "whatwg-fetch": "3.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
@@ -126,7 +137,9 @@
     "@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",
@@ -151,6 +164,7 @@
     "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",
@@ -167,10 +181,11 @@
     "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.2.3",
+    "typescript": "4.0.2",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",
@@ -223,4 +238,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

preview/.azure/config

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

preview/README.md

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

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

preview/index.js

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

@@ -1,491 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-{
-  "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,6 +98,31 @@ 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";
+  public static readonly enableReactPane = "enablereactpane";
+}
+
 // 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 = new URL(configContext.PROXY_PATH, window.location.href).href;
+  requestContext.endpoint = configContext.PROXY_PATH;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
 };

src/Common/Logger.ts

@@ -1,7 +1,7 @@
-import { SeverityLevel } from "@microsoft/applicationinsights-web";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { trackTrace } from "../Shared/appInsights";
 import { sendMessage } from "./MessageHandler";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { appInsights } from "../Shared/appInsights";
+import { SeverityLevel } from "@microsoft/applicationinsights-web";
 
 // 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);
-  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }
 
 function _generateLogEntry(

src/Common/MessageHandler.ts

@@ -56,7 +56,7 @@ export function sendMessage(data: any): void {
         signature: "pcIframe",
         data: data,
       },
-      portalChildWindow.document.referrer || "*"
+      portalChildWindow.document.referrer
     );
   }
 }
@@ -71,7 +71,7 @@ export function sendReadyMessage(): void {
         kind: "ready",
         data: "ready",
       },
-      portalChildWindow.document.referrer || "*"
+      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 * as QueryUtils from "../Utils/QueryUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";

src/Common/Tooltip/index.tsx

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

@@ -1,75 +0,0 @@
-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/__snapshots__/CosmosClient.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
 Object {
-  "endpoint": "http://localhost/proxy",
+  "endpoint": "/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": "http://localhost/proxy",
+  "endpoint": "/proxy",
   "headers": Object {
     "x-ms-proxy-target": "baz",
   },

src/Contracts/ViewModels.ts

@@ -88,6 +88,7 @@ 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>;
@@ -375,6 +376,7 @@ export interface DataExplorerInputsFrame {
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;
+  features: { [key: string]: string };
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;

src/Explorer/ComponentRegisterer.test.ts

@@ -77,6 +77,18 @@ 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);
   });
@@ -85,6 +97,10 @@ 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,29 +1,16 @@
 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 { 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";
+import { TabsManagerKOComponent } from "./Tabs/TabsManager";
+import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
@@ -34,26 +21,28 @@ 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", { template: TabsManagerTemplate });
+ko.components.register("tabs-manager", TabsManagerKOComponent());
 
 // Collection Tabs
-[
-  DocumentsTab,
-  StoredProcedureTab,
-  TriggerTab,
-  UserDefinedFunctionTab,
-  SettingsTabV2,
-  QueryTab,
-  QueryTablesTab,
-  GraphTab,
-  MongoShellTab,
-  ConflictsTab,
-  NotebookTabV2,
-  TerminalTab,
-  GalleryTab,
-  NotebookViewerTab,
-  DatabaseSettingsTabV2,
-].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
+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());
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
@@ -62,13 +51,24 @@ 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,22 +1,23 @@
+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 DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.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 DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import Explorer from "./Explorer";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { userContext } from "../UserContext";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -42,7 +43,7 @@ export class ResourceTreeContextMenuButtonFactory {
     if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
       items.push({
         iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
+        onClick: () => container.deleteDatabaseConfirmationPane.open(),
         label: container.deleteDatabaseText(),
         styleClass: "deleteDatabaseMenuItem",
       });

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 * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {

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 * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -1,15 +1,20 @@
-import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
-import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
+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 {
   DetailsList,
   DetailsListLayoutMode,
-  DetailsRow,
-  IColumn,
   IDetailsListProps,
   IDetailsRowProps,
+  DetailsRow,
 } from "office-ui-fabric-react/lib/DetailsList";
 import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+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 {
   IObjectWithKey,
   ISelectionZoneProps,
@@ -17,18 +22,13 @@ 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 { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { QueriesClient } from "../../../Common/QueriesClient";
-import * as DataModels from "../../../Contracts/DataModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
-const title: string = "Open Saved Queries";
+import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
+import { QueriesClient } from "../../../Common/QueriesClient";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 
 export interface QueriesGridComponentProps {
   queriesClient: QueriesClient;
@@ -76,11 +76,6 @@ 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();
@@ -141,7 +136,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
       },
     };
     return (
-      <div id="emptyQueryBanner">
+      <div>
         <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
@@ -227,7 +222,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                       const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                         dataExplorerArea: Constants.Areas.ContextualPane,
-                        paneTitle: title,
+                        paneTitle: container && container.browseQueriesPane.title(),
                       });
                       try {
                         await this.props.queriesClient.deleteQuery(query);
@@ -235,7 +230,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           Action.DeleteSavedQuery,
                           {
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
+                            paneTitle: container && container.browseQueriesPane.title(),
                           },
                           startKey
                         );
@@ -244,7 +239,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           Action.DeleteSavedQuery,
                           {
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
+                            paneTitle: container && container.browseQueriesPane.title(),
                             error: getErrorMessage(error),
                             errorStack: getErrorStack(error),
                           },

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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,19 +1,17 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import * as DataModels from "../../../Contracts/DataModels";
+import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 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";
+import * as DataModels from "../../../Contracts/DataModels";
+import ko from "knockout";
+import { TtlType, isDirty } from "./SettingsUtils";
+import Explorer from "../../Explorer";
 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,
@@ -31,6 +29,8 @@ 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,6 +134,7 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -139,7 +139,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor =
         this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
 
-      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =

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

@@ -12,6 +12,7 @@ import {
   TextField,
 } from "office-ui-fabric-react";
 import React from "react";
+import { Features } from "../../../../../Common/Constants";
 import * as DataModels from "../../../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import * as SharedConstants from "../../../../../Shared/Constants";
@@ -464,7 +465,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 = userContext.features.showMinRUSurvey;
+    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
     const collectionIsEligible =
       userContext.subscriptionType !== SubscriptionType.Internal &&
       this.props.usageSizeInKB > oneTBinKB &&

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

@@ -1,23 +1,23 @@
-import ko from "knockout";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
+import { collection } from "./TestUtils";
 import {
   getMongoIndexType,
-  getMongoIndexTypeText,
   getMongoNotification,
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
-  isIndexTransforming,
   MongoIndexTypes,
   MongoNotificationType,
-  MongoWildcardPlaceHolder,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
+  MongoWildcardPlaceHolder,
+  getMongoIndexTypeText,
   SingleFieldText,
   WildcardText,
+  isIndexTransforming,
 } from "./SettingsUtils";
-import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ko from "knockout";
 
 describe("SettingsUtils", () => {
   it("hasDatabaseSharedThroughput", () => {
@@ -42,6 +42,7 @@ 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 { shallow } from "enzyme";
 import React from "react";
-import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
+import { shallow } from "enzyme";
 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: [
-              { labelTKey: "Database 1", key: "db1" },
-              { labelTKey: "Database 2", key: "db2" },
-              { labelTKey: "Database 3", key: "db3" },
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -331,10 +331,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
           placeholder={this.props.getTranslation(placeholderTKey)}
           disabled={disabled}
-          // Removed dropdownWidth="auto" as dropdown accept only number
+          dropdownWidth="auto"
           options={choices.map((c) => ({
             key: c.key,
-            text: this.props.getTranslation(c.labelTKey),
+            text: this.props.getTranslation(c.label),
           }))}
           styles={{
             root: { width: 400 },

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

@@ -285,6 +285,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
               disabled={true}
+              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={
@@ -606,6 +607,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             </StyledLabelBase>
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
+              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={

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 Q from "q";
-import { createDocument } from "../../Common/dataAccess/createDocument";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
+import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import Explorer from "../Explorer";
+import { updateUserContext } from "../../UserContext";
 
 describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
-    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
+    explorerStub.nonSystemDatabases = ko.computed(() => [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 * as ko from "knockout";
-import * as sinon from "sinon";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import Explorer from "../Explorer";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { DataSamplesUtil } from "./DataSamplesUtil";
+import * as sinon from "sinon";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as ko from "knockout";
+import Explorer from "../Explorer";
+import { Database, Collection } from "../../Contracts/ViewModels";
 
 describe("DataSampleUtils", () => {
   const sampleCollectionId = "sampleCollectionId";
@@ -16,7 +16,7 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.databases = ko.observableArray<Database>([database]);
+    explorer.nonSystemDatabases = ko.computed(() => [database]);
     explorer.showOkModalDialog = () => {};
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,8 +1,8 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import Explorer from "../Explorer";
 
 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.databases())) {
+    if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
       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

@@ -1,43 +0,0 @@
-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,12 +19,13 @@ 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 { trackEvent } from "../Shared/appInsights";
+import { appInsights } from "../Shared/appInsights";
 import * as SharedConstants from "../Shared/Constants";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
@@ -43,31 +44,33 @@ 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 * as FileSystemUtil from "./Notebook/FileSystemUtil";
+import { FileSystemUtil } from "./Notebook/FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
-import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
+import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
-import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
+import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
+import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPanel } from "./Panes/LoadQueryPanel";
+import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
-import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
+import { SaveQueryPane } from "./Panes/SaveQueryPane";
 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";
@@ -93,10 +96,13 @@ 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>;
@@ -104,6 +110,7 @@ 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;
 
   /**
@@ -112,6 +119,11 @@ 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
@@ -168,6 +180,7 @@ 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>;
@@ -192,12 +205,22 @@ 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;
@@ -234,6 +257,7 @@ 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;
@@ -261,6 +285,7 @@ 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");
@@ -268,6 +293,7 @@ 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);
     this.isAccountReady = ko.observable<boolean>(false);
     this._isInitializingNotebooks = false;
     this.arcadiaToken = ko.observable<string>();
@@ -300,7 +326,11 @@ export default class Explorer {
         );
         Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
           async () => {
-            this.isNotebookEnabled(false);
+            this.isNotebookEnabled(
+              userContext.authType !== AuthType.ResourceToken &&
+                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
+            );
 
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
               isNotebookEnabled: this.isNotebookEnabled(),
@@ -321,10 +351,10 @@ export default class Explorer {
                 this.isSparkEnabledForAccount() &&
                 this.arcadiaWorkspaces() &&
                 this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
+                this.isFeatureEnabled(Constants.Features.enableSpark)
             );
             if (this.isSparkEnabled()) {
-              trackEvent(
+              appInsights.trackEvent(
                 { name: "LoadedWithSparkEnabled" },
                 {
                   subscriptionId: userContext.subscriptionId,
@@ -345,6 +375,7 @@ export default class Explorer {
     });
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
 
+    this.features = ko.observable();
     this.queriesClient = new QueriesClient(this);
 
     this.resourceTokenDatabaseId = ko.observable<string>();
@@ -356,9 +387,11 @@ export default class Explorer {
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
+    this.canExceedMaximumValue = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
+    );
 
-    this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
+    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
 
     this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
 
@@ -438,7 +471,7 @@ export default class Explorer {
     });
 
     this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
-      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
+      if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
         return true;
       }
 
@@ -497,7 +530,20 @@ export default class Explorer {
       () =>
         configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
     );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
+    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.selectedDatabaseId = ko.computed<string>(() => {
       const selectedNode = this.selectedNode();
       if (!selectedNode) {
@@ -519,6 +565,10 @@ 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),
@@ -541,6 +591,13 @@ 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),
@@ -562,6 +619,13 @@ 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),
@@ -583,6 +647,57 @@ 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),
@@ -597,18 +712,27 @@ export default class Explorer {
       container: this,
     });
 
-    this.tabsManager = params?.tabsManager ?? new TabsManager();
+    this.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,
     ];
@@ -704,6 +828,8 @@ 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;
     }
@@ -757,29 +883,42 @@ export default class Explorer {
     });
 
     // Override notebook server parameters from URL parameters
-    if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
-      this.notebookServerInfo({
-        notebookServerEndpoint: userContext.features.notebookServerUrl,
-        authToken: userContext.features.notebookServerToken,
-      });
-    }
+    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.notebookBasePath) {
-      this.notebookBasePath(userContext.features.notebookBasePath);
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        serverInfo.authToken = features[Constants.Features.notebookServerToken];
+      }
+      this.notebookServerInfo(serverInfo);
+      this.notebookServerInfo.valueHasMutated();
 
-    if (userContext.features.livyEndpoint) {
-      this.sparkClusterConnectionInfo({
-        userName: undefined,
-        password: undefined,
-        endpoints: [
-          {
-            endpoint: userContext.features.livyEndpoint,
-            kind: DataModels.SparkClusterEndpointKind.Livy,
-          },
-        ],
-      });
-    }
+      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();
+    });
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -863,6 +1002,20 @@ 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);
   }
@@ -921,8 +1074,10 @@ 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,
           {
@@ -935,16 +1090,20 @@ 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);
           }
         );
       },
       (error) => {
+        this._setLoadingStatusText("Failed to fetch databases.");
         deferred.reject(error);
         const errorMessage = getErrorMessage(error);
         TelemetryProcessor.traceFailure(
@@ -1099,12 +1258,12 @@ export default class Explorer {
       throw error;
     } finally {
       // Overwrite with feature flags
-      if (userContext.features.notebookServerUrl) {
-        connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
       }
 
-      if (userContext.features.notebookServerToken) {
-        connectionInfo.authToken = userContext.features.notebookServerToken;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
       }
 
       this.notebookServerInfo(connectionInfo);
@@ -1220,12 +1379,7 @@ export default class Explorer {
   }
 
   public isLastNonEmptyDatabase(): boolean {
-    if (
-      this.isLastDatabase() &&
-      this.databases()[0] &&
-      this.databases()[0].collections &&
-      this.databases()[0].collections().length > 0
-    ) {
+    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
       return true;
     }
     return false;
@@ -1259,7 +1413,13 @@ export default class Explorer {
       if (inputs.defaultCollectionThroughput) {
         this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
       }
+      this.features(inputs.features);
       this.databaseAccount(databaseAccount);
+      this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
+      this.hasWriteAccess(inputs.hasWriteAccess ?? true);
+      if (inputs.addCollectionDefaultFlight) {
+        this.flight(inputs.addCollectionDefaultFlight);
+      }
       this.setFeatureFlagsFromFlights(inputs.flights);
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -1806,7 +1966,11 @@ export default class Explorer {
 
   private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
     const authType = userContext.authType;
-    if (true) {
+    if (
+      authType === AuthType.EncryptedToken ||
+      authType === AuthType.ResourceToken ||
+      authType === AuthType.MasterKey
+    ) {
       this.isNotebooksEnabledForAccount(false);
       return;
     }
@@ -2009,6 +2173,38 @@ 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";
@@ -2171,7 +2367,7 @@ export default class Explorer {
   public onNewCollectionClicked(): void {
     if (this.isPreferredApiCassandra()) {
       this.cassandraAddCollectionPane.open();
-    } else if (userContext.features.enableReactPane) {
+    } else if (this.isFeatureEnabled(Constants.Features.enableReactPane)) {
       this.openAddCollectionPanel();
     } else {
       this.addCollectionPane.open(this.selectedDatabaseId());
@@ -2212,6 +2408,32 @@ 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 =
@@ -2279,7 +2501,7 @@ export default class Explorer {
   }
 
   public openDeleteCollectionConfirmationPane(): void {
-    userContext.features.enableKOPanel
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
       ? this.deleteCollectionConfirmationPane.open()
       : this.openSidePanel(
           "Delete Collection",
@@ -2291,33 +2513,6 @@ 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(
@@ -2329,28 +2524,4 @@ export default class Explorer {
       />
     );
   }
-
-  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,8 +4,11 @@
  * - 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.tsx

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

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,33 +1,37 @@
-/**
- * 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 path;
-  };
+// Utilities for file system
 
-  return normalize(path1) === normalize(path2);
-}
+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;
+    };
 
-/**
- * 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 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();
+    }
+    return splitted.join(".");
   }
-  return splitted.join(".");
 }

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -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 * as FileSystemUtil from "../FileSystemUtil";
+import { FileSystemUtil } from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";
 

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,12 +1,13 @@
-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 * 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";
+
 export class NotebookContentClient {
   constructor(
     private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,

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 { ActionContracts } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
+import { ActionContracts } from "../Contracts/ExplorerContracts";
 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.openSettingPane();
+    explorer.settingsPane.open();
   }
 }
 

src/Explorer/Panes/AddCollectionPane.ts

@@ -105,6 +105,10 @@ 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>();
@@ -474,6 +478,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
     });
 
     this.resetData();
+    this.container.flight.subscribe(() => {
+      this.resetData();
+    });
 
     this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
       this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -652,7 +659,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   }
 
   public getSharedThroughputDefault(): boolean {
-    const subscriptionType = userContext.subscriptionType;
+    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();
     if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
       return false;
     }
@@ -694,12 +701,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
         partitionKey: this.partitionKey(),
         databaseId: this.databaseId(),
       }),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: this._getThroughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -798,12 +805,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
         uniqueKeyPolicy,
         collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
       }),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: offerThroughput,
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       useIndexingForSharedThroughput: this.useIndexingForSharedThroughput(),
@@ -870,12 +877,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
           }),
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
         };
@@ -902,12 +909,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
           },
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           error: errorMessage,
@@ -987,7 +994,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.container.openEnableSynapseLinkDialog();
   }
 
-  public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
+  public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);
 
   public isValid(): boolean {
     // TODO add feature flag that disables validation for customers with custom accounts
@@ -1195,7 +1202,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     if (this.isAnalyticalStorageOn()) {
       // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
         ? Constants.AnalyticalStorageTtl.Days90
         : Constants.AnalyticalStorageTtl.Infinite;
     }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -905,7 +905,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
     if (this.state.enableAnalyticalStore) {
       // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.props.explorer.isFeatureEnabled(Constants.Features.ttl90Days)
         ? Constants.AnalyticalStorageTtl.Days90
         : Constants.AnalyticalStorageTtl.Infinite;
     }

src/Explorer/Panes/AddDatabasePane.test.ts

@@ -1,9 +1,8 @@
 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()", () => {
@@ -45,41 +44,31 @@ describe("Add Database Pane", () => {
     });
 
     it("should be true if subscription type is Benefits", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Benefits,
-      });
+      explorer.subscriptionType(SubscriptionType.Benefits);
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });
 
     it("should be false if subscription type is EA", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.EA,
-      });
+      explorer.subscriptionType(SubscriptionType.EA);
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(false);
     });
 
     it("should be true if subscription type is Free", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Free,
-      });
+      explorer.subscriptionType(SubscriptionType.Free);
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });
 
     it("should be true if subscription type is Internal", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.Internal,
-      });
+      explorer.subscriptionType(SubscriptionType.Internal);
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });
 
     it("should be true if subscription type is PAYG", () => {
-      updateUserContext({
-        subscriptionType: SubscriptionType.PAYG,
-      });
+      explorer.subscriptionType(SubscriptionType.PAYG);
       const addDatabasePane = explorer.addDatabasePane as AddDatabasePane;
       expect(addDatabasePane.getSharedThroughputDefault()).toBe(true);
     });

src/Explorer/Panes/AddDatabasePane.ts

@@ -61,6 +61,11 @@ 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"
     );
@@ -226,6 +231,9 @@ export default class AddDatabasePane extends ContextualPaneBase {
     });
 
     this.resetData();
+    this.container.flight.subscribe(() => {
+      this.resetData();
+    });
 
     this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
       this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -268,11 +276,11 @@ export default class AddDatabasePane extends ContextualPaneBase {
     super.open();
     this.resetData();
     const addDatabasePaneOpenMessage = {
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -294,10 +302,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
         shared: this.databaseCreateNewShared(),
       }),
       offerThroughput,
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -337,7 +345,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
   }
 
   public getSharedThroughputDefault(): boolean {
-    const subscriptionType = userContext.subscriptionType;
+    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();
 
     if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
       return false;
@@ -356,10 +364,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
         shared: this.databaseCreateNewShared(),
       }),
       offerThroughput: offerThroughput,
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -378,10 +386,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
         shared: this.databaseCreateNewShared(),
       }),
       offerThroughput: offerThroughput,
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       error: errorMessage,

src/Explorer/Panes/BrowseQueriesPane.html

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

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

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

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

@@ -1,63 +0,0 @@
-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.databases">
+            <datalist id="keyspacesList" data-bind="foreach: container.nonSystemDatabases">
               <option data-bind="value: $data.id"></option>
             </datalist>
 

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -5,6 +5,7 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { HashMap } from "../../Common/HashMap";
 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";
@@ -116,6 +117,10 @@ 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) {
@@ -256,8 +261,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         });
         this.keyspaceIds(cachedKeyspaceIdsList);
       };
-      this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
-      updateKeyspaceIds(this.container.databases());
+      this.container.nonSystemDatabases.subscribe((newDatabases: ViewModels.Database[]) =>
+        updateKeyspaceIds(newDatabases)
+      );
+      updateKeyspaceIds(this.container.nonSystemDatabases());
     }
 
     this.autoPilotUsageCost = ko.pureComputed<string>(() => {
@@ -301,12 +308,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         partitionKey: "",
         databaseId: this.keyspaceId(),
       }),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -353,12 +360,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         hasDedicatedThroughput: this.dedicateTableThroughput(),
       }),
       keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-      subscriptionType: userContext.subscriptionType,
+      subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
+        flight: this.container.flight(),
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       toCreateKeyspace: toCreateKeyspace,
@@ -397,12 +404,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             hasDedicatedThroughput: this.dedicateTableThroughput(),
           }),
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           toCreateKeyspace: toCreateKeyspace,
@@ -425,12 +432,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             hasDedicatedThroughput: this.dedicateTableThroughput(),
           },
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
+          subscriptionType: SubscriptionType[this.container.subscriptionType()],
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
+            flight: this.container.flight(),
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           toCreateKeyspace: toCreateKeyspace,

src/Explorer/Panes/DeleteDatabaseConfirmationPane.html

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

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

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

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

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

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

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

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

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

@@ -1,163 +0,0 @@
-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 { Subscription } from "knockout";
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
 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 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

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

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

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

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

@@ -1,134 +0,0 @@
-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,15 +1,24 @@
-import AddCollectionPaneTemplate from "./AddCollectionPane.html";
 import AddDatabasePaneTemplate from "./AddDatabasePane.html";
-import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
+import AddCollectionPaneTemplate from "./AddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
-import GitHubReposPaneTemplate from "./GitHubReposPane.html";
+import DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.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) {
@@ -44,6 +53,15 @@ export class DeleteCollectionConfirmationPaneComponent {
   }
 }
 
+export class DeleteDatabaseConfirmationPaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: DeleteDatabaseConfirmationPaneTemplate,
+    };
+  }
+}
+
 export class GraphNewVertexPaneComponent {
   constructor() {
     return {
@@ -80,6 +98,15 @@ export class TableEditEntityPaneComponent {
   }
 }
 
+export class TableColumnOptionsPaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: TableColumnOptionsPaneTemplate,
+    };
+  }
+}
+
 export class TableQuerySelectPaneComponent {
   constructor() {
     return {
@@ -98,6 +125,69 @@ 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 {

src/Explorer/Panes/PanelComponent.less

@@ -110,45 +110,7 @@
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
-.addRemoveIcon {
-  margin-left: 4px !important;
-}
-.addRemoveIconLabel {
-  margin-top: 28px;
-  margin-left: 4px !important;
-}
-.addNewParamStyle {
-  margin-top: 5px;
-  margin-left: 5px !important;
-  cursor: pointer;
-}
 
 .panelGroupSpacing > * {
   margin-bottom: @SmallSpace;
 }
-.fileUpload {
-  display: none !important;
-}
-.customFileUpload {
-  padding: 25px 0px 0px 10px;
-  cursor: pointer;
-  display: flex;
-}
-.fileIcon {
-  align-self: center;
-}
-.panelAddIconLabel {
-  font-size: 20px;
-  width: 20px;
-  margin: 30px 0 0 10px;
-  cursor: default;
-}
-.panelAddIcon {
-  font-size: 20px;
-  width: 20px;
-  margin: 30px 0 0 10px;
-  cursor: default;
-}
-.removeIcon {
-  color: @InfoIconColor;
-}

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -14,7 +14,7 @@ import { handleError, getErrorMessage, getErrorStack } from "../../Common/ErrorH
 import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
 import { traceFailure, traceStart, traceSuccess } from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as FileSystemUtil from "../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 
 export class PublishNotebookPaneAdapter implements ReactAdapter {
   parameters: ko.Observable<number>;

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -1,7 +1,7 @@
 import { ITextFieldProps, Stack, Text, TextField, Dropdown, IDropdownProps } from "office-ui-fabric-react";
 import * as React from "react";
 import { GalleryCardComponent } from "../Controls/NotebookGallery/Cards/GalleryCardComponent";
-import * as FileSystemUtil from "../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 import "./PublishNotebookPaneComponent.less";
 import Html2Canvas from "html2canvas";
 import { ImmutableNotebook } from "@nteract/commutable/src";

src/Explorer/Panes/SaveQueryPane.html

@@ -0,0 +1,63 @@
+<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="savequerypane">
+    <!-- Save Query form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- 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">
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Save Query header - End -->
+
+        <!-- Save 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>
+        <!-- Save Query errors - End -->
+
+        <!-- Save Query inputs - Start -->
+        <div class="paneMainContent">
+          <div class="pkPadding" data-bind="visible: !canSaveQueries()">
+            <div data-bind="text: setupSaveQueriesText"></div>
+            <button class="btncreatecoll1 btnSetupQueries" type="button" data-bind="click: setupQueries">
+              Complete setup
+            </button>
+          </div>
+          <div class="pkPadding" data-bind="visible: canSaveQueries">
+            <p><span class="mandatoryStar">*</span> <span>Name</span></p>
+            <input class="textfontclr collid" required type="text" data-bind="value: queryName" />
+          </div>
+        </div>
+        <div class="paneFooter" data-bind="visible: canSaveQueries">
+          <div class="leftpanel-okbut"><input type="submit" value="Save" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Save Query inputs - End -->
+      </form>
+    </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/SaveQueryPane.ts

@@ -0,0 +1,153 @@
+import * as ko from "knockout";
+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 { ContextualPaneBase } from "./ContextualPaneBase";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import QueryTab from "../Tabs/QueryTab";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+
+export class SaveQueryPane extends ContextualPaneBase {
+  public queryName: ko.Observable<string>;
+  public canSaveQueries: ko.Computed<boolean>;
+  public setupSaveQueriesText: string = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${Constants.SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Save Query");
+    this.queryName = ko.observable<string>();
+    this.canSaveQueries = this.container && this.container.canSaveQueries;
+    this.resetData();
+  }
+
+  public submit = (): void => {
+    this.formErrors("");
+    this.formErrorsDetails("");
+    if (!this.canSaveQueries()) {
+      this.formErrors("Cannot save query");
+      this.formErrorsDetails("Failed to save query: account not set up to save queries");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Failed to save query: account not setup to save queries"
+      );
+    }
+
+    const queryName: string = this.queryName();
+    const queryTab = this.container && (this.container.tabsManager.activeTab() as QueryTab);
+    const query: string = queryTab && queryTab.sqlQueryEditorContent();
+    if (!queryName || queryName.length === 0) {
+      this.formErrors("No query name specified");
+      this.formErrorsDetails("No query name specified. Please specify a query name.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not save query -- No query name specified. Please specify a query name."
+      );
+      return;
+    } else if (!query || query.length === 0) {
+      this.formErrors("Invalid query content specified");
+      this.formErrorsDetails("Invalid query content specified. Please enter query content.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not save query -- Invalid query content specified. Please enter query content."
+      );
+      return;
+    }
+
+    const queryParam: DataModels.Query = {
+      id: queryName,
+      resourceId: this.container.queriesClient.getResourceId(),
+      queryName: queryName,
+      query: query,
+    };
+    const startKey: number = TelemetryProcessor.traceStart(Action.SaveQuery, {
+      dataExplorerArea: Constants.Areas.ContextualPane,
+      paneTitle: this.title(),
+    });
+    this.isExecuting(true);
+    this.container.queriesClient.saveQuery(queryParam).then(
+      () => {
+        this.isExecuting(false);
+        queryTab.tabTitle(queryParam.queryName);
+        queryTab.tabPath(`${queryTab.collection.databaseId}>${queryTab.collection.id()}>${queryParam.queryName}`);
+        TelemetryProcessor.traceSuccess(
+          Action.SaveQuery,
+          {
+            dataExplorerArea: Constants.Areas.ContextualPane,
+            paneTitle: this.title(),
+          },
+          startKey
+        );
+        this.close();
+      },
+      (error: any) => {
+        this.isExecuting(false);
+        const errorMessage = getErrorMessage(error);
+        this.formErrors("Failed to save query");
+        this.formErrorsDetails(`Failed to save query: ${errorMessage}`);
+        TelemetryProcessor.traceFailure(
+          Action.SaveQuery,
+          {
+            dataExplorerArea: Constants.Areas.ContextualPane,
+            paneTitle: this.title(),
+            error: errorMessage,
+            errorStack: getErrorStack(error),
+          },
+          startKey
+        );
+      }
+    );
+  };
+
+  public setupQueries = async (src: any, event: MouseEvent): Promise<void> => {
+    if (!this.container) {
+      return;
+    }
+
+    const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
+      dataExplorerArea: Constants.Areas.ContextualPane,
+      paneTitle: this.title(),
+    });
+    try {
+      this.isExecuting(true);
+      await this.container.queriesClient.setupQueriesCollection();
+      this.container.refreshAllDatabases();
+      TelemetryProcessor.traceSuccess(
+        Action.SetupSavedQueries,
+        {
+          dataExplorerArea: Constants.Areas.ContextualPane,
+          paneTitle: this.title(),
+        },
+        startKey
+      );
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      TelemetryProcessor.traceFailure(
+        Action.SetupSavedQueries,
+        {
+          dataExplorerArea: Constants.Areas.ContextualPane,
+          paneTitle: this.title(),
+          error: errorMessage,
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+      this.formErrors("Failed to setup a container for saved queries");
+      this.formErrorsDetails(`Failed to setup a container for saved queries: ${errorMessage}`);
+    } finally {
+      this.isExecuting(false);
+    }
+  };
+
+  public close() {
+    super.close();
+    this.resetData();
+  }
+
+  public resetData() {
+    super.resetData();
+    this.queryName("");
+  }
+}

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

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Save Query Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
-  container={
-    Object {
-      "canSaveQueries": [Function],
-    }
-  }
-  formError=""
-  formErrorDetail=""
-  id="saveQueryPane"
-  isExecuting={false}
-  onClose={[Function]}
-  onSubmit={[Function]}
-  submitButtonText="Complete setup"
-  title="Save Query"
->
-  <div
-    className="panelFormWrapper"
-  >
-    <div
-      className="panelMainContent"
-    >
-      <Text
-        variant="small"
-      >
-        For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.
-      </Text>
-    </div>
-  </div>
-</GenericRightPaneComponent>
-`;

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

@@ -1,32 +0,0 @@
-import { shallow } from "enzyme";
-import * as ko from "knockout";
-import React from "react";
-import Explorer from "../../Explorer";
-import { SaveQueryPanel } from "./index";
-
-describe("Save Query Pane", () => {
-  const fakeExplorer = {} as Explorer;
-  fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
-
-  const props = {
-    explorer: fakeExplorer,
-    closePanel: (): void => undefined,
-  };
-
-  const wrapper = shallow(<SaveQueryPanel {...props} />);
-
-  it("should return true if can save Queries else false", () => {
-    fakeExplorer.canSaveQueries = ko.computed<boolean>(() => true);
-    wrapper.setProps(props);
-    expect(wrapper.exists("#saveQueryInput")).toBe(true);
-
-    fakeExplorer.canSaveQueries = ko.computed<boolean>(() => false);
-    wrapper.setProps(props);
-    expect(wrapper.exists("#saveQueryInput")).toBe(false);
-  });
-
-  it("should render Default properly", () => {
-    const wrapper = shallow(<SaveQueryPanel {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Panes/SaveQueryPanel/index.tsx

@@ -1,168 +0,0 @@
-import { useBoolean } from "@uifabric/react-hooks";
-import { Text, TextField } from "office-ui-fabric-react";
-import React, { FunctionComponent, useState } from "react";
-import { Areas, SavedQueries } from "../../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { Query } from "../../../Contracts/DataModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
-import QueryTab from "../../Tabs/QueryTab";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-
-interface SaveQueryPanelProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-export const SaveQueryPanel: FunctionComponent<SaveQueryPanelProps> = ({
-  explorer,
-  closePanel,
-}: SaveQueryPanelProps): JSX.Element => {
-  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-  const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
-  const [queryName, setQueryName] = useState<string>("");
-
-  const setupSaveQueriesText = `For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “${SavedQueries.DatabaseName}”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.`;
-  const title = "Save Query";
-  const { canSaveQueries } = explorer;
-  const genericPaneProps: GenericRightPaneProps = {
-    container: explorer,
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "saveQueryPane",
-    isExecuting: isLoading,
-    title,
-    submitButtonText: canSaveQueries() ? "Save" : "Complete setup",
-    onClose: () => closePanel(),
-    onSubmit: () => {
-      canSaveQueries() ? submit() : setupQueries();
-    },
-  };
-
-  const submit = async (): Promise<void> => {
-    setFormError("");
-    setFormErrorsDetails("");
-    if (!canSaveQueries()) {
-      setFormError("Cannot save query");
-      setFormErrorsDetails("Failed to save query: account not set up to save queries");
-      logConsoleError("Failed to save query: account not setup to save queries");
-    }
-
-    const queryTab = explorer && (explorer.tabsManager.activeTab() as QueryTab);
-    const query: string = queryTab && queryTab.sqlQueryEditorContent();
-    if (!queryName || queryName.length === 0) {
-      setFormError("No query name specified");
-      setFormErrorsDetails("No query name specified. Please specify a query name.");
-      logConsoleError("Could not save query -- No query name specified. Please specify a query name.");
-      return;
-    } else if (!query || query.length === 0) {
-      setFormError("Invalid query content specified");
-      setFormErrorsDetails("Invalid query content specified. Please enter query content.");
-      logConsoleError("Could not save query -- Invalid query content specified. Please enter query content.");
-      return;
-    }
-
-    const queryParam: Query = {
-      id: queryName,
-      resourceId: explorer.queriesClient.getResourceId(),
-      queryName: queryName,
-      query: query,
-    };
-    const startKey: number = traceStart(Action.SaveQuery, {
-      dataExplorerArea: Areas.ContextualPane,
-      paneTitle: title,
-    });
-    setLoadingTrue();
-    try {
-      await explorer.queriesClient.saveQuery(queryParam);
-      setLoadingFalse();
-      queryTab.tabTitle(queryParam.queryName);
-      queryTab.tabPath(`${queryTab.collection.databaseId}>${queryTab.collection.id()}>${queryParam.queryName}`);
-      traceSuccess(
-        Action.SaveQuery,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: title,
-        },
-        startKey
-      );
-      closePanel();
-    } catch (error) {
-      setLoadingFalse();
-      const errorMessage = getErrorMessage(error);
-      setFormError("Failed to save query");
-      setFormErrorsDetails(`Failed to save query: ${errorMessage}`);
-      traceFailure(
-        Action.SaveQuery,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: title,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-    }
-  };
-
-  const setupQueries = async (): Promise<void> => {
-    const startKey: number = traceStart(Action.SetupSavedQueries, {
-      dataExplorerArea: Areas.ContextualPane,
-      paneTitle: title,
-    });
-
-    try {
-      setLoadingTrue();
-      await explorer.queriesClient.setupQueriesCollection();
-      explorer.refreshAllDatabases();
-      traceSuccess(
-        Action.SetupSavedQueries,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: title,
-        },
-        startKey
-      );
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      traceFailure(
-        Action.SetupSavedQueries,
-        {
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: title,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-      setFormError("Failed to setup a container for saved queries");
-      setFormErrorsDetails(`Failed to setup a container for saved queries: ${errorMessage}`);
-    } finally {
-      setLoadingFalse();
-    }
-  };
-
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="panelFormWrapper">
-        <div className="panelMainContent">
-          {!canSaveQueries() ? (
-            <Text variant="small">{setupSaveQueriesText}</Text>
-          ) : (
-            <TextField
-              id="saveQueryInput"
-              label="Name"
-              styles={{ fieldGroup: { width: 300 } }}
-              onChange={(event, newInput?: string) => {
-                setQueryName(newInput);
-              }}
-            />
-          )}
-        </div>
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/SettingsPane.html

@@ -0,0 +1,268 @@
+<!-- TODO: Move Pane to REACT -->
+<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="settingspane">
+    <!-- Settings Confirmation form - Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Settings 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: { keydown: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Settings Confirmation header - End -->
+
+        <!-- Settings 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="
+                            visible: formErrorsDetails() && formErrorsDetails() !== '',
+                            click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Settings Confirmation errors - End -->
+
+        <!-- Settings Confirmation inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="settingsSection" data-bind="visible: shouldShowQueryPageOptions">
+              <div class="settingsSectionPart pageOptionsPart">
+                <div class="settingsSectionLabel">
+                  Page options
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
+                      many query results per page.
+                    </span>
+                  </span>
+                </div>
+                <div class="tabs" role="radiogroup" aria-label="Page options">
+                  <!-- Fixed option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="customItemPerPage"
+                      name="pageOption"
+                      value="custom"
+                      data-bind="checked: pageOption"
+                    />
+                    <label
+                      for="customItemPerPage"
+                      id="custom-selection"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" attr:{ 
+                                            'aria-checked': pageOption() === 'custom' ? 'true' : 'false' },
+                                            event: { keydown: onCustomPageOptionsKeyDown 
+                                        }"
+                      >Custom</label
+                    >
+                  </div>
+                  <!-- Fixed option button - End -->
+
+                  <!-- Unlimited option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="unlimitedItemPerPage"
+                      name="pageOption"
+                      value="unlimited"
+                      data-bind="checked: pageOption"
+                    />
+                    <label
+                      for="unlimitedItemPerPage"
+                      id="unlimited-selection"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" attr:{ 
+                                            'aria-checked': pageOption() === 'unlimited' ? 'true' : 'false' },
+                                            event: { keydown: onUnlimitedPageOptionKeyDown 
+                                        }"
+                      >Unlimited</label
+                    >
+                  </div>
+                  <!-- Unlimited option button - End -->
+                </div>
+              </div>
+              <div class="tabs settingsSectionPart">
+                <div class="tabcontent" data-bind="visible: isCustomPageOptionSelected()">
+                  <div class="settingsSectionLabel">
+                    Query results per page
+                    <span class="infoTooltip" role="tooltip" tabindex="0">
+                      <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                      <span class="tooltiptext pageOptionTooltipWidth">
+                        Enter the number of query results that should be shown per page.
+                      </span>
+                    </span>
+                  </div>
+                  <input
+                    type="number"
+                    required
+                    min="1"
+                    step="1"
+                    class="textfontclr collid"
+                    aria-label="Custom query items per page"
+                    data-bind="textInput: customItemPerPage, enable: isCustomPageOptionSelected()"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="settingsSection" data-bind="visible: shouldShowCrossPartitionOption">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">
+                  Enable cross-partition query
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Send more than one request while executing a query. More than one request is necessary if the
+                      query is not scoped to single partition key value.
+                    </span>
+                  </span>
+                </div>
+                <input
+                  type="checkbox"
+                  tabindex="0"
+                  aria-label="Enable cross partition query"
+                  data-bind="checked: crossPartitionQueryEnabled"
+                />
+              </div>
+            </div>
+            <div class="settingsSection" data-bind="visible: shouldShowParallelismOption">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">
+                  Max degree of parallelism
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Gets or sets the number of concurrent operations run client side during parallel query execution.
+                      A positive property value limits the number of concurrent operations to the set value. If it is
+                      set to less than 0, the system automatically decides the number of concurrent operations to run.
+                    </span>
+                  </span>
+                </div>
+                <input
+                  type="number"
+                  required
+                  min="-1"
+                  step="1"
+                  class="textfontclr collid"
+                  role="textbox"
+                  tabindex="0"
+                  id="max-degree"
+                  aria-label="Max degree of parallelism"
+                  data-bind="value: maxDegreeOfParallelism"
+                  autofocus
+                />
+              </div>
+            </div>
+            <div class="settingsSection" data-bind="visible: shouldShowGraphAutoVizOption">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">
+                  Display Gremlin query results as:&nbsp;
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Select Graph to automatically visualize the query results as a Graph or JSON to display the
+                      results as JSON.
+                    </span>
+                  </span>
+                </div>
+                <div class="tabs" role="radiogroup" aria-label="Graph Auto-visualization">
+                  <!-- Fixed option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="graphAutoVizOn"
+                      name="graphAutoVizOption"
+                      value="false"
+                      data-bind="checked: graphAutoVizDisabled"
+                    />
+                    <label
+                      for="graphAutoVizOn"
+                      id="graph-display"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" 
+                                            attr: { 'aria-checked': graphAutoVizDisabled() === 'false' ? 'true' : 'false' }, 
+                                            event: { keypress: onGraphDisplayResultsKeyDown 
+                                        }"
+                      >Graph</label
+                    >
+                  </div>
+                  <!-- Fixed option button - End -->
+
+                  <!-- Unlimited option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="graphAutoVizOff"
+                      name="graphAutoVizOption"
+                      value="true"
+                      data-bind="checked: graphAutoVizDisabled"
+                    />
+                    <label
+                      for="graphAutoVizOff"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" 
+                                            attr: { 'aria-checked': graphAutoVizDisabled() === 'true' ? 'true' : 'false' },
+                                            event: { keypress: onJsonDisplayResultsKeyDown 
+                                        }"
+                      >JSON</label
+                    >
+                  </div>
+                  <!-- Unlimited option button - End -->
+                </div>
+              </div>
+            </div>
+            <div class="settingsSection">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">Explorer Version</div>
+
+                <div data-bind="text: explorerVersion"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="Apply" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Settings Confirmation inputs - End -->
+      </form>
+    </div>
+    <!-- Settings 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/SettingsPane.test.ts

@@ -0,0 +1,38 @@
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import Explorer from "../Explorer";
+
+describe("Settings Pane", () => {
+  describe("shouldShowQueryPageOptions()", () => {
+    let explorer: Explorer;
+
+    beforeEach(() => {
+      explorer = new Explorer();
+    });
+
+    it("should be true for SQL API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.DocumentDB.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(true);
+    });
+
+    it("should be false for Cassandra API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.Cassandra.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+
+    it("should be false for Tables API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.Table.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+
+    it("should be false for Graph API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.Graph.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+
+    it("should be false for Mongo API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.MongoDB.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+  });
+});

src/Explorer/Panes/SettingsPane.ts

@@ -0,0 +1,185 @@
+import * as Constants from "../../Common/Constants";
+import * as ko from "knockout";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as StringUtility from "../../Shared/StringUtility";
+import { configContext } from "../../ConfigContext";
+
+export class SettingsPane extends ContextualPaneBase {
+  public pageOption: ko.Observable<string>;
+  public customItemPerPage: ko.Observable<number>;
+  public crossPartitionQueryEnabled: ko.Observable<boolean>;
+  public maxDegreeOfParallelism: ko.Observable<number>;
+  public explorerVersion: string;
+  public shouldShowQueryPageOptions: ko.Computed<boolean>;
+  public shouldShowGraphAutoVizOption: ko.Computed<boolean>;
+
+  private graphAutoVizDisabled: ko.Observable<string>;
+  private shouldShowCrossPartitionOption: ko.Computed<boolean>;
+  private shouldShowParallelismOption: ko.Computed<boolean>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Settings");
+    this.resetData();
+
+    this.pageOption = ko.observable<string>();
+    this.customItemPerPage = ko.observable<number>();
+
+    const crossPartitionQueryEnabledState: boolean = LocalStorageUtility.hasItem(
+      StorageKey.IsCrossPartitionQueryEnabled
+    )
+      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+      : true;
+    this.crossPartitionQueryEnabled = ko.observable<boolean>(crossPartitionQueryEnabledState);
+
+    const maxDegreeOfParallelismState: number = LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
+      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
+      : Constants.Queries.DefaultMaxDegreeOfParallelism;
+    this.maxDegreeOfParallelism = ko.observable<number>(maxDegreeOfParallelismState);
+
+    const isGraphAutoVizDisabled: boolean = LocalStorageUtility.hasItem(StorageKey.IsGraphAutoVizDisabled)
+      ? LocalStorageUtility.getEntryBoolean(StorageKey.IsGraphAutoVizDisabled)
+      : false;
+    this.graphAutoVizDisabled = ko.observable<string>(`${isGraphAutoVizDisabled}`);
+
+    this.explorerVersion = configContext.gitSha;
+    this.shouldShowQueryPageOptions = ko.computed<boolean>(() => this.container.isPreferredApiDocumentDB());
+    this.shouldShowCrossPartitionOption = ko.computed<boolean>(() => !this.container.isPreferredApiGraph());
+    this.shouldShowParallelismOption = ko.computed<boolean>(() => !this.container.isPreferredApiGraph());
+    this.shouldShowGraphAutoVizOption = ko.computed<boolean>(() => this.container.isPreferredApiGraph());
+  }
+
+  public open() {
+    this._loadSettings();
+    super.open();
+    const pageOptionsFocus = document.getElementById("custom-selection");
+    const displayQueryFocus = document.getElementById("graph-display");
+    const maxDegreeFocus = document.getElementById("max-degree");
+    if (this.container.isPreferredApiGraph()) {
+      displayQueryFocus && displayQueryFocus.focus();
+    } else if (this.container.isPreferredApiTable()) {
+      maxDegreeFocus && maxDegreeFocus.focus();
+    }
+    pageOptionsFocus && pageOptionsFocus.focus();
+  }
+
+  public submit() {
+    this.formErrors("");
+    this.isExecuting(true);
+
+    LocalStorageUtility.setEntryNumber(
+      StorageKey.ActualItemPerPage,
+      this.isCustomPageOptionSelected() ? this.customItemPerPage() : Constants.Queries.unlimitedItemsPerPage
+    );
+    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, this.customItemPerPage());
+    LocalStorageUtility.setEntryString(
+      StorageKey.IsCrossPartitionQueryEnabled,
+      this.crossPartitionQueryEnabled().toString()
+    );
+    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, this.maxDegreeOfParallelism());
+
+    if (this.shouldShowGraphAutoVizOption()) {
+      LocalStorageUtility.setEntryBoolean(
+        StorageKey.IsGraphAutoVizDisabled,
+        StringUtility.toBoolean(this.graphAutoVizDisabled())
+      );
+    }
+
+    this.isExecuting(false);
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`
+    );
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `${this.crossPartitionQueryEnabled() ? "Enabled" : "Disabled"} cross-partition query feed option`
+    );
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `Updated the max degree of parallelism query feed option to ${LocalStorageUtility.getEntryNumber(
+        StorageKey.MaxDegreeOfParellism
+      )}`
+    );
+
+    if (this.shouldShowGraphAutoVizOption()) {
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Info,
+        `Graph result will be displayed as ${
+          LocalStorageUtility.getEntryBoolean(StorageKey.IsGraphAutoVizDisabled) ? "JSON" : "Graph"
+        }`
+      );
+    }
+
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`
+    );
+
+    this.close();
+  }
+
+  public isCustomPageOptionSelected = (): boolean => {
+    return this.pageOption() === Constants.Queries.CustomPageOption;
+  };
+
+  public isUnlimitedPageOptionSelected = (): boolean => {
+    return this.pageOption() === Constants.Queries.UnlimitedPageOption;
+  };
+
+  public onUnlimitedPageOptionKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.pageOption(Constants.Queries.UnlimitedPageOption);
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onCustomPageOptionsKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.pageOption(Constants.Queries.CustomPageOption);
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onJsonDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.graphAutoVizDisabled("true");
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onGraphDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.graphAutoVizDisabled("false");
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  private _loadSettings() {
+    this.isExecuting(true);
+    try {
+      this.pageOption(
+        LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) == Constants.Queries.unlimitedItemsPerPage
+          ? Constants.Queries.UnlimitedPageOption
+          : Constants.Queries.CustomPageOption
+      );
+      this.customItemPerPage(LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage));
+    } catch (exception) {
+      this.formErrors("Unable to load your settings");
+      this.formErrorsDetails(exception);
+    } finally {
+      this.isExecuting(false);
+    }
+  }
+}

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

@@ -1,28 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { SettingsPane } from ".";
-import { DatabaseAccount } from "../../../Contracts/DataModels";
-import { updateUserContext } from "../../../UserContext";
-import Explorer from "../../Explorer";
-const props = {
-  explorer: new Explorer(),
-  closePanel: (): void => undefined,
-};
-describe("Settings Pane", () => {
-  it("should render Default properly", () => {
-    const wrapper = shallow(<SettingsPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should render Gremlin properly", () => {
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableGremlin" }],
-        },
-      } as DatabaseAccount,
-    });
-    const wrapper = shallow(<SettingsPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Panes/SettingsPane/index.tsx

@@ -1,253 +0,0 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "office-ui-fabric-react";
-import React, { FunctionComponent, MouseEvent, useState } from "react";
-import * as Constants from "../../../Common/Constants";
-import { Tooltip } from "../../../Common/Tooltip";
-import { configContext } from "../../../ConfigContext";
-import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
-import * as StringUtility from "../../../Shared/StringUtility";
-import { userContext } from "../../../UserContext";
-import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-
-export interface SettingsPaneProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
-  explorer: container,
-  closePanel,
-}: SettingsPaneProps) => {
-  const [formErrors, setFormErrors] = useState<string>("");
-  const [isExecuting, setIsExecuting] = useState<boolean>(false);
-  const [pageOption, setPageOption] = useState<string>(
-    LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) === Constants.Queries.unlimitedItemsPerPage
-      ? Constants.Queries.UnlimitedPageOption
-      : Constants.Queries.CustomPageOption
-  );
-  const [customItemPerPage, setCustomItemPerPage] = useState<number>(
-    LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
-  );
-  const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
-    LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-      : true
-  );
-  const [graphAutoVizDisabled, setGraphAutoVizDisabled] = useState<string>(
-    LocalStorageUtility.hasItem(StorageKey.IsGraphAutoVizDisabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.IsGraphAutoVizDisabled)
-      : "false"
-  );
-  const [maxDegreeOfParallelism, setMaxDegreeOfParallelism] = useState<number>(
-    LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
-      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
-      : Constants.Queries.DefaultMaxDegreeOfParallelism
-  );
-  const explorerVersion = configContext.gitSha;
-  const shouldShowQueryPageOptions = userContext.apiType === "SQL";
-  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
-  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
-  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
-
-  const handlerOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
-    setFormErrors("");
-    setIsExecuting(true);
-
-    LocalStorageUtility.setEntryNumber(
-      StorageKey.ActualItemPerPage,
-      isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
-    );
-    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
-    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
-
-    if (shouldShowGraphAutoVizOption) {
-      LocalStorageUtility.setEntryBoolean(
-        StorageKey.IsGraphAutoVizDisabled,
-        StringUtility.toBoolean(graphAutoVizDisabled)
-      );
-    }
-
-    setIsExecuting(false);
-    logConsoleInfo(
-      `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`
-    );
-    logConsoleInfo(`${crossPartitionQueryEnabled ? "Enabled" : "Disabled"} cross-partition query feed option`);
-    logConsoleInfo(
-      `Updated the max degree of parallelism query feed option to ${LocalStorageUtility.getEntryNumber(
-        StorageKey.MaxDegreeOfParellism
-      )}`
-    );
-
-    if (shouldShowGraphAutoVizOption) {
-      logConsoleInfo(
-        `Graph result will be displayed as ${
-          LocalStorageUtility.getEntryBoolean(StorageKey.IsGraphAutoVizDisabled) ? "JSON" : "Graph"
-        }`
-      );
-    }
-
-    logConsoleInfo(
-      `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`
-    );
-    closePanel();
-    e.preventDefault();
-  };
-
-  const isCustomPageOptionSelected = () => {
-    return pageOption === Constants.Queries.CustomPageOption;
-  };
-
-  const handleOnGremlinChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
-    setGraphAutoVizDisabled(option.key);
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container,
-    formError: formErrors,
-    formErrorDetail: "",
-    id: "settingspane",
-    isExecuting,
-    title: "Setting",
-    submitButtonText: "Apply",
-    onClose: () => closePanel(),
-    onSubmit: () => handlerOnSubmit(undefined),
-  };
-  const pageOptionList: IChoiceGroupOption[] = [
-    { key: Constants.Queries.CustomPageOption, text: "Custom" },
-    { key: Constants.Queries.UnlimitedPageOption, text: "Unlimited" },
-  ];
-
-  const graphAutoOptionList: IChoiceGroupOption[] = [
-    { key: "false", text: "Graph" },
-    { key: "true", text: "JSON" },
-  ];
-
-  const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
-    setPageOption(option.key);
-  };
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="paneMainContent">
-        {shouldShowQueryPageOptions && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart pageOptionsPart">
-              <div className="settingsSectionLabel">
-                Page options
-                <Tooltip>
-                  Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
-                  query results per page.
-                </Tooltip>
-              </div>
-              <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
-            </div>
-            <div className="tabs settingsSectionPart">
-              {isCustomPageOptionSelected() && (
-                <div className="tabcontent">
-                  <div className="settingsSectionLabel">
-                    Query results per page
-                    <Tooltip>Enter the number of query results that should be shown per page.</Tooltip>
-                  </div>
-
-                  <SpinButton
-                    ariaLabel="Custom query items per page"
-                    value={"" + customItemPerPage}
-                    onIncrement={(newValue) => {
-                      setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
-                    }}
-                    onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
-                    onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
-                    min={1}
-                    step={1}
-                    className="textfontclr"
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-        {shouldShowCrossPartitionOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Enable cross-partition query
-                <Tooltip>
-                  Send more than one request while executing a query. More than one request is necessary if the query is
-                  not scoped to single partition key value.
-                </Tooltip>
-              </div>
-
-              <Checkbox
-                styles={{
-                  label: { padding: 0 },
-                }}
-                className="padding"
-                tabIndex={0}
-                ariaLabel="Enable cross partition query"
-                checked={crossPartitionQueryEnabled}
-                onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowParallelismOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Max degree of parallelism
-                <Tooltip>
-                  Gets or sets the number of concurrent operations run client side during parallel query execution. A
-                  positive property value limits the number of concurrent operations to the set value. If it is set to
-                  less than 0, the system automatically decides the number of concurrent operations to run.
-                </Tooltip>
-              </div>
-
-              <SpinButton
-                min={-1}
-                step={1}
-                className="textfontclr"
-                role="textbox"
-                tabIndex={0}
-                id="max-degree"
-                value={"" + maxDegreeOfParallelism}
-                onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}
-                onDecrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)}
-                onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
-                ariaLabel="Max degree of parallelism"
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowGraphAutoVizOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Display Gremlin query results as:&nbsp;
-                <Tooltip>
-                  Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
-                  JSON.
-                </Tooltip>
-              </div>
-
-              <ChoiceGroup
-                selectedKey={graphAutoVizDisabled}
-                options={graphAutoOptionList}
-                onChange={handleOnGremlinChange}
-                aria-label="Graph Auto-visualization"
-              />
-            </div>
-          </div>
-        )}
-        <div className="settingsSection">
-          <div className="settingsSectionPart">
-            <div className="settingsSectionLabel">Explorer Version</div>
-            <div>{explorerVersion}</div>
-          </div>
-        </div>
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/Tables/TableColumnOptionsPane.html

@@ -0,0 +1,78 @@
+<div data-bind="visible: visible">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+    click: cancel,
+    clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="tablecolumnoptionspane">
+    <!-- Table Column Options form - Start -->
+    <div class="contextual-pane-in">
+      <form
+        class="paneContentContainer"
+        data-bind="
+            submit: submit"
+      >
+        <!-- Table Column Options header - Start -->
+        <div class="firstdivbg headerline">
+          Column Options
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                    click: cancel"
+          >
+            <img src="../../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Table Column Options header - End -->
+        <div class="paneMainContent paneContentContainer">
+          <div><span>Choose the columns and the order in which you want to display them in the table.</span></div>
+          <div class="column-options">
+            <div class="columns-border">
+              <input class="all-select-check" type="checkbox" data-bind="checked: allSelected" />
+              <label
+                style="font-weight: 700"
+                id="availableColumnsLabel"
+                data-bind="text: availableColumnsLabel"
+              ></label>
+              <span class="column-arrows-svg" data-bind="click: moveDown, enable: canMoveDown">
+                <img class="column-opt-arrow-Img" src="/Down.svg" alt="Move down" />
+              </span>
+              <span class="column-arrows-svg" data-bind="click: moveUp, enable: canMoveUp">
+                <img class="column-opt-arrow-Img" src="/Up.svg" alt="Move up" />
+              </span>
+            </div>
+            <div class="content">
+              <section>
+                <ul data-bind="foreach: columnOptions" aria-labelledby="availableColumnsLabel" tabindex="0">
+                  <li
+                    class="list-item columns-border"
+                    data-bind="attr: { title: columnName }, click: $parent.handleClick "
+                  >
+                    <input
+                      type="checkbox"
+                      for="columnName"
+                      data-bind="attr: { title: columnName, 'aria-selected': (selected()? 'true': 'false') }, checked: selected"
+                    />
+                    <label id="columnName" data-bind="text: columnName"></label>
+                  </li>
+                </ul>
+              </section>
+            </div>
+          </div>
+
+          <div class="row-label" data-bind="style: { visibility: anyColumnSelected() ? 'hidden': 'visible' }">
+            <label class="warning" role="alert" aria-atomic="true" data-bind="text: noColumnSelectedWarning"></label>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
+        </div>
+      </form>
+    </div>
+    <!-- Table Column Options form - End -->
+  </div>
+</div>

src/Explorer/Panes/Tables/TableColumnOptionsPane.ts

@@ -0,0 +1,195 @@
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as DataTableOperations from "../../Tables/DataTable/DataTableOperations";
+import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
+import { ContextualPaneBase } from "../ContextualPaneBase";
+import _ from "underscore";
+
+/**
+ * Represents an item shown in the available columns.
+ * columnName: the name of the column.
+ * selected: indicate whether user wants to display the column in the table.
+ * order: the order in the initial table. E.g.,
+ *  Order array of initial table:  I = [0, 1, 2, 3, 4, 5, 6, 7, 8]   <---->   {prop0, prop1, prop2, prop3, prop4, prop5, prop6, prop7, prop8}
+ *  Order array of current table:  C = [0, 1, 2, 6, 7, 3, 4, 5, 8]   <---->   {prop0, prop1, prop2, prop6, prop7, prop3, prop4, prop5, prop8}
+ *  if order = 6, then this column will be the one with column name prop6
+ * index: index in the observable array, this used for selection and moving up/down.
+ */
+interface IColumnOption {
+  columnName: ko.Observable<string>;
+  selected: ko.Observable<boolean>;
+  order: number;
+  index: number;
+}
+
+export interface IColumnSetting {
+  columnNames: string[];
+  visible?: boolean[];
+  order?: number[];
+}
+
+export class TableColumnOptionsPane extends ContextualPaneBase {
+  public titleLabel: string = "Column Options";
+  public instructionLabel: string = "Choose the columns and the order in which you want to display them in the table.";
+  public availableColumnsLabel: string = "Available Columns";
+  public moveUpLabel: string = "Move Up";
+  public moveDownLabel: string = "Move Down";
+  public noColumnSelectedWarning: string = "At least one column should be selected.";
+
+  public columnOptions: ko.ObservableArray<IColumnOption>;
+  public allSelected: ko.Computed<boolean>;
+  public anyColumnSelected: ko.Computed<boolean>;
+  public canSelectAll: ko.Computed<boolean>;
+  public canMoveUp: ko.Observable<boolean>;
+  public canMoveDown: ko.Observable<boolean>;
+
+  public tableViewModel: TableEntityListViewModel;
+  public parameters: IColumnSetting;
+
+  private selectedColumnOption: IColumnOption = null;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+
+    this.columnOptions = ko.observableArray<IColumnOption>();
+    this.anyColumnSelected = ko.computed<boolean>(() => {
+      return _.some(this.columnOptions(), (value: IColumnOption) => {
+        return value.selected();
+      });
+    });
+
+    this.canSelectAll = ko.computed<boolean>(() => {
+      return _.some(this.columnOptions(), (value: IColumnOption) => {
+        return !value.selected();
+      });
+    });
+
+    this.canMoveUp = ko.observable<boolean>(false);
+    this.canMoveDown = ko.observable<boolean>(false);
+
+    this.allSelected = ko.pureComputed<boolean>({
+      read: () => {
+        return !this.canSelectAll();
+      },
+      write: (value) => {
+        if (value) {
+          this.selectAll();
+        } else {
+          this.clearAll();
+        }
+      },
+      owner: this,
+    });
+  }
+
+  public submit() {
+    var newColumnSetting = this.getParameters();
+    DataTableOperations.reorderColumns(this.tableViewModel.table, newColumnSetting.order).then(() => {
+      DataTableOperations.filterColumns(this.tableViewModel.table, newColumnSetting.visible);
+      this.visible(false);
+    });
+  }
+  public open() {
+    this.setDisplayedColumns(this.parameters.columnNames, this.parameters.order, this.parameters.visible);
+    super.open();
+  }
+
+  private getParameters(): IColumnSetting {
+    var newColumnSettings: IColumnSetting = <IColumnSetting>{
+      columnNames: [],
+      order: [],
+      visible: [],
+    };
+    this.columnOptions().map((value: IColumnOption) => {
+      newColumnSettings.columnNames.push(value.columnName());
+      newColumnSettings.order.push(value.order);
+      newColumnSettings.visible.push(value.selected());
+    });
+    return newColumnSettings;
+  }
+
+  public setDisplayedColumns(columnNames: string[], order: number[], visible: boolean[]): void {
+    var options: IColumnOption[] = order.map((value: number, index: number) => {
+      var columnOption: IColumnOption = {
+        columnName: ko.observable<string>(columnNames[index]),
+        order: value,
+        selected: ko.observable<boolean>(visible[index]),
+        index: index,
+      };
+      return columnOption;
+    });
+    this.columnOptions(options);
+  }
+
+  public selectAll(): void {
+    const columnOptions = this.columnOptions && this.columnOptions();
+    columnOptions &&
+      columnOptions.forEach((value: IColumnOption) => {
+        value.selected(true);
+      });
+  }
+
+  public clearAll(): void {
+    const columnOptions = this.columnOptions && this.columnOptions();
+    columnOptions &&
+      columnOptions.forEach((value: IColumnOption) => {
+        value.selected(false);
+      });
+
+    if (columnOptions && columnOptions.length > 0) {
+      columnOptions[0].selected(true);
+    }
+  }
+
+  public moveUp(): void {
+    if (this.selectedColumnOption) {
+      var currentSelectedIndex: number = this.selectedColumnOption.index;
+      var swapTargetIndex: number = currentSelectedIndex - 1;
+      //Debug.assert(currentSelectedIndex > 0);
+
+      this.swapColumnOption(this.columnOptions(), swapTargetIndex, currentSelectedIndex);
+      this.selectTargetItem($(`div.column-options li:eq(${swapTargetIndex})`), this.columnOptions()[swapTargetIndex]);
+    }
+  }
+
+  public moveDown(): void {
+    if (this.selectedColumnOption) {
+      var currentSelectedIndex: number = this.selectedColumnOption.index;
+      var swapTargetIndex: number = currentSelectedIndex + 1;
+      //Debug.assert(currentSelectedIndex < (this.columnOptions().length - 1));
+
+      this.swapColumnOption(this.columnOptions(), swapTargetIndex, currentSelectedIndex);
+      this.selectTargetItem($(`div.column-options li:eq(${swapTargetIndex})`), this.columnOptions()[swapTargetIndex]);
+    }
+  }
+
+  public handleClick = (data: IColumnOption, event: KeyboardEvent): boolean => {
+    this.selectTargetItem($(event.currentTarget), data);
+    return true;
+  };
+
+  private selectTargetItem($target: JQuery, targetColumn: IColumnOption): void {
+    this.selectedColumnOption = targetColumn;
+
+    this.canMoveUp(targetColumn.index !== 0);
+    this.canMoveDown(targetColumn.index !== this.columnOptions().length - 1);
+
+    $(".list-item.selected").removeClass("selected");
+    $target.addClass("selected");
+  }
+
+  private swapColumnOption(options: IColumnOption[], indexA: number, indexB: number): void {
+    var tempColumnName: string = options[indexA].columnName();
+    var tempSelected: boolean = options[indexA].selected();
+    var tempOrder: number = options[indexA].order;
+
+    options[indexA].columnName(options[indexB].columnName());
+    options[indexB].columnName(tempColumnName);
+
+    options[indexA].selected(options[indexB].selected());
+    options[indexB].selected(tempSelected);
+
+    options[indexA].order = options[indexB].order;
+    options[indexB].order = tempOrder;
+  }
+}

src/Explorer/Panes/UploadFilePane.html

@@ -0,0 +1,83 @@
+<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="uploadFilePane">
+    <!-- Upload File form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Upload File 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">
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Upload File header - End -->
+
+        <!-- Upload File 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>
+        <!-- Upload File errors - End -->
+
+        <!-- Upload File inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="renewUploadItemsHeader" data-bind="text: selectFileInputLabel"></div>
+            <input class="importFilesTitle" type="text" disabled data-bind="value: selectedFilesTitle" />
+            <input
+              type="file"
+              id="importFileInput"
+              style="display: none"
+              data-bind="event: { change: updateSelectedFiles }, attr: { accept: extensions }"
+            />
+            <a
+              href="#"
+              id="fileImportLinkNotebook"
+              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
+            >
+              <img
+                id="importFileButton"
+                class="fileImportImg"
+                src="/folder_16x16.svg"
+                alt="upload files"
+                title="Upload files"
+              />
+            </a>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input
+              id="uploadFileButton"
+              type="submit"
+              data-bind="attr: { value: submitButtonLabel }"
+              class="btncreatecoll1"
+            />
+          </div>
+        </div>
+        <!-- Upload File inputs - End -->
+      </form>
+    </div>
+    <!-- Upload File 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/UploadFilePane.ts

@@ -0,0 +1,137 @@
+import * as ko from "knockout";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+
+export interface UploadFilePaneOpenOptions {
+  paneTitle: string;
+  selectFileInputLabel: string;
+  errorMessage: string; // Could not upload notebook
+  inProgressMessage: string; // Uploading notebook
+  successMessage: string; // Successfully uploaded notebook
+  onSubmit: (file: File) => Promise<any>;
+  extensions?: string; // input accept field. E.g: .ipynb
+  submitButtonLabel?: string;
+}
+
+export class UploadFilePane extends ContextualPaneBase {
+  public selectedFilesTitle: ko.Observable<string>;
+  public files: ko.Observable<FileList>;
+  private openOptions: UploadFilePaneOpenOptions;
+  private submitButtonLabel: ko.Observable<string>;
+  private selectFileInputLabel: ko.Observable<string>;
+  private extensions: ko.Observable<string>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.resetData();
+    this.selectFileInputLabel = ko.observable("");
+    this.selectedFilesTitle = ko.observable<string>("");
+    this.extensions = ko.observable(null);
+    this.submitButtonLabel = ko.observable("Load");
+    this.files = ko.observable<FileList>();
+    this.files.subscribe((newFiles: FileList) => this.updateSelectedFilesTitle(newFiles));
+  }
+
+  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,
+        `${this.openOptions.errorMessage} -- No file specified. Please input a file.`
+      );
+      return;
+    }
+
+    const file: File = this.files().item(0);
+    const id: string = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `${this.openOptions.inProgressMessage}: ${file.name}`
+    );
+    this.isExecuting(true);
+    this.openOptions
+      .onSubmit(this.files().item(0))
+      .then(
+        () => {
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `${this.openOptions.successMessage} ${file.name}`
+          );
+          this.close();
+        },
+        (error: any) => {
+          this.formErrors(this.openOptions.errorMessage);
+          this.formErrorsDetails(`${this.openOptions.errorMessage}: ${error}`);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `${this.openOptions.errorMessage} ${file.name}: ${error}`
+          );
+        }
+      )
+      .finally(() => {
+        this.isExecuting(false);
+        NotificationConsoleUtils.clearInProgressMessageWithId(id);
+      });
+  }
+
+  public updateSelectedFiles(element: any, event: any): void {
+    this.files(event.target.files);
+  }
+
+  public close() {
+    super.close();
+    this.resetData();
+    this.files(undefined);
+    this.resetFileInput();
+  }
+
+  public openWithOptions(options: UploadFilePaneOpenOptions): void {
+    this.openOptions = options;
+    this.title(this.openOptions.paneTitle);
+    if (this.openOptions.submitButtonLabel) {
+      this.submitButtonLabel(this.openOptions.submitButtonLabel);
+    }
+    this.selectFileInputLabel(this.openOptions.selectFileInputLabel);
+    if (this.openOptions.extensions) {
+      this.extensions(this.openOptions.extensions);
+    }
+    super.open();
+  }
+
+  public onImportLinkClick(source: any, event: MouseEvent): boolean {
+    document.getElementById("importFileInput").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;
+  };
+
+  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 = $("#importFileInput");
+    inputElement.wrap("<form>").closest("form").get(0).reset();
+    inputElement.unwrap();
+  }
+}

src/Explorer/Panes/UploadFilePane/index.tsx

@@ -1,111 +0,0 @@
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
-import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-
-export interface UploadFilePanelProps {
-  explorer: Explorer;
-  closePanel: () => void;
-  uploadFile: (name: string, content: string) => Promise<NotebookContentItem>;
-}
-
-export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
-  explorer: container,
-  closePanel,
-  uploadFile,
-}: UploadFilePanelProps) => {
-  const title = "Upload file to notebook server";
-  const submitButtonLabel = "Upload";
-  const selectFileInputLabel = "Select file to upload";
-  const extensions: string = undefined; //ex. ".ipynb"
-  const errorMessage = "Could not upload file";
-  const inProgressMessage = "Uploading file to notebook server";
-  const successMessage = "Successfully uploaded file to notebook server";
-
-  const [files, setFiles] = useState<FileList>();
-  const [formErrors, setFormErrors] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
-  const [isExecuting, setIsExecuting] = useState<boolean>(false);
-
-  const submit = () => {
-    setFormErrors("");
-    setFormErrorsDetails("");
-    if (!files || files.length === 0) {
-      setFormErrors("No file specified");
-      setFormErrorsDetails("No file specified. Please input a file.");
-      logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
-      return;
-    }
-
-    const file: File = files.item(0);
-    // const id: string = logConsoleProgress(
-    //   `${inProgressMessage}: ${file.name}`
-    // );
-
-    logConsoleProgress(`${inProgressMessage}: ${file.name}`);
-
-    setIsExecuting(true);
-
-    onSubmit(files.item(0))
-      .then(
-        () => {
-          logConsoleInfo(`${successMessage} ${file.name}`);
-          closePanel();
-        },
-        (error: string) => {
-          setFormErrors(errorMessage);
-          setFormErrorsDetails(`${errorMessage}: ${error}`);
-          logConsoleError(`${errorMessage} ${file.name}: ${error}`);
-        }
-      )
-      .finally(() => {
-        setIsExecuting(false);
-        // clearInProgressMessageWithId(id);
-      });
-  };
-
-  const updateSelectedFiles = (event: ChangeEvent<HTMLInputElement>): void => {
-    setFiles(event.target.files);
-  };
-
-  const 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 uploadFile(file.name, fileContent);
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container: container,
-    formError: formErrors,
-    formErrorDetail: formErrorsDetails,
-    id: "uploadFilePane",
-    isExecuting: isExecuting,
-    title,
-    submitButtonText: submitButtonLabel,
-    onClose: closePanel,
-    onSubmit: submit,
-  };
-
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="paneMainContent">
-        <Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/UploadItemsPane.html

@@ -0,0 +1,130 @@
+<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="uploaditemspane">
+    <!-- Upload items form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Upload items 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: { keydown: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Upload items header - End -->
+
+        <!-- Upload items 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>
+        <!-- Upload items errors - End -->
+
+        <!-- Upload item inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="renewUploadItemsHeader">
+              <span> Select JSON Files </span>
+              <span class="infoTooltip" role="tooltip" tabindex="0">
+                <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                <span class="tooltiptext infoTooltipWidth"
+                  >Select one or more JSON files to upload. Each file can contain a single JSON document or an array of
+                  JSON documents. The combined size of all files in an individual upload operation must be less than 2
+                  MB. You can perform multiple upload operations for larger data sets.</span
+                >
+              </span>
+            </div>
+            <input
+              class="importFilesTitle"
+              type="text"
+              disabled
+              data-bind="value: selectedFilesTitle"
+              aria-label="Select JSON Files"
+            />
+            <input
+              type="file"
+              id="importDocsInput"
+              title="Upload Icon"
+              multiple
+              accept="application/json"
+              role="button"
+              tabindex="0"
+              style="display: none"
+              data-bind="event: { change: updateSelectedFiles }"
+            />
+            <a
+              href="#"
+              id="fileImportLink"
+              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
+              autofocus
+            >
+              <img
+                class="fileImportImg"
+                src="/folder_16x16.svg"
+                alt="Select JSON files to upload"
+                title="Select JSON files to upload"
+              />
+            </a>
+          </div>
+          <div class="fileUploadSummaryContainer" data-bind="visible: uploadFileDataVisible">
+            <b>File upload status</b>
+            <table class="fileUploadSummary">
+              <thead>
+                <tr class="fileUploadSummaryHeader fileUploadSummaryTuple">
+                  <th>FILE NAME</th>
+                  <th>STATUS</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- ko foreach: uploadFileData -->
+                <tr class="fileUploadSummaryTuple">
+                  <td data-bind="text: $data.fileName"></td>
+                  <td data-bind="text: $parent.fileUploadSummaryText($data.numSucceeded, $data.numFailed)"></td>
+                </tr>
+                <!-- /ko -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="Upload" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Upload item inputs - End -->
+      </form>
+    </div>
+    <!-- Upload items 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/UploadItemsPane.ts

@@ -0,0 +1,143 @@
+import * as ko from "knockout";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { UploadDetailsRecord, UploadDetails } from "../../workers/upload/definitions";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+
+const UPLOAD_FILE_SIZE_LIMIT = 2097152;
+
+export class UploadItemsPane extends ContextualPaneBase {
+  public selectedFilesTitle: ko.Observable<string>;
+  public files: ko.Observable<FileList>;
+  public uploadFileDataVisible: ko.Computed<boolean>;
+  public uploadFileData: ko.ObservableArray<UploadDetailsRecord>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this._initTitle();
+    this.resetData();
+
+    this.selectedFilesTitle = ko.observable<string>("");
+    this.uploadFileData = ko.observableArray<UploadDetailsRecord>();
+    this.uploadFileDataVisible = ko.computed<boolean>(
+      () => !!this.uploadFileData() && this.uploadFileData().length > 0
+    );
+    this.files = ko.observable<FileList>();
+    this.files.subscribe((newFiles: FileList) => this._updateSelectedFilesTitle(newFiles));
+  }
+
+  public submit() {
+    this.formErrors("");
+    if (!this.files() || this.files().length === 0) {
+      this.formErrors("No files specified");
+      this.formErrorsDetails("No files were specified. Please input at least one file.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not upload items -- No files were specified. Please input at least one file."
+      );
+      return;
+    } else if (this._totalFileSizeForFileList(this.files()) > UPLOAD_FILE_SIZE_LIMIT) {
+      this.formErrors("Upload file size limit exceeded");
+      this.formErrorsDetails("Total file upload size exceeds the 2 MB file size limit.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not upload items -- Total file upload size exceeds the 2 MB file size limit."
+      );
+      return;
+    }
+
+    const selectedCollection: ViewModels.Collection = this.container.findSelectedCollection();
+    this.isExecuting(true);
+    selectedCollection &&
+      selectedCollection
+        .uploadFiles(this.files())
+        .then(
+          (uploadDetails: UploadDetails) => {
+            this.uploadFileData(uploadDetails.data);
+            this.files(undefined);
+            this._resetFileInput();
+          },
+          (error: any) => {
+            const errorMessage = getErrorMessage(error);
+            this.formErrors(errorMessage);
+            this.formErrorsDetails(errorMessage);
+          }
+        )
+        .finally(() => {
+          this.isExecuting(false);
+        });
+  }
+
+  public updateSelectedFiles(element: any, event: any): void {
+    this.files(event.target.files);
+  }
+
+  public close() {
+    super.close();
+    this.resetData();
+    this.files(undefined);
+    this.uploadFileData([]);
+    this._resetFileInput();
+  }
+
+  public onImportLinkClick(source: any, event: MouseEvent): boolean {
+    document.getElementById("importDocsInput").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 fileUploadSummaryText = (numSucceeded: number, numFailed: number): string => {
+    return `${numSucceeded} items created, ${numFailed} errors`;
+  };
+
+  private _totalFileSizeForFileList(fileList: FileList): number {
+    let totalFileSize: number = 0;
+    if (!fileList) {
+      return totalFileSize;
+    }
+    for (let i = 0; i < fileList.length; i++) {
+      totalFileSize = totalFileSize + fileList.item(i).size;
+    }
+
+    return totalFileSize;
+  }
+
+  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 _initTitle(): void {
+    if (this.container.isPreferredApiCassandra() || this.container.isPreferredApiTable()) {
+      this.title("Upload Tables");
+    } else if (this.container.isPreferredApiGraph()) {
+      this.title("Upload Graph");
+    } else {
+      this.title("Upload Items");
+    }
+  }
+
+  private _resetFileInput(): void {
+    const inputElement = $("#importDocsInput");
+    inputElement.wrap("<form>").closest("form").get(0).reset();
+    inputElement.unwrap();
+  }
+}

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

@@ -1,846 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Upload Items Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
-  container={
-    Explorer {
-      "_closeModalDialog": [Function],
-      "_closeSynapseLinkModalDialog": [Function],
-      "_isAfecFeatureRegistered": [Function],
-      "_isInitializingNotebooks": false,
-      "_panes": Array [
-        AddDatabasePane {
-          "autoPilotUsageCost": [Function],
-          "canConfigureThroughput": [Function],
-          "canExceedMaximumValue": [Function],
-          "canRequestSupport": [Function],
-          "container": [Circular],
-          "costsVisible": [Function],
-          "databaseCreateNewShared": [Function],
-          "databaseId": [Function],
-          "databaseIdLabel": [Function],
-          "databaseIdPlaceHolder": [Function],
-          "databaseIdTooltipText": [Function],
-          "databaseLevelThroughputTooltipText": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "freeTierExceedThroughputTooltip": [Function],
-          "id": "adddatabasepane",
-          "isAutoPilotSelected": [Function],
-          "isExecuting": [Function],
-          "isFreeTierAccount": [Function],
-          "isTemplateReady": [Function],
-          "maxAutoPilotThroughputSet": [Function],
-          "maxThroughputRU": [Function],
-          "maxThroughputRUText": [Function],
-          "minThroughputRU": [Function],
-          "onMoreDetailsKeyPress": [Function],
-          "requestUnitsUsageCost": [Function],
-          "ruToolTipText": [Function],
-          "showUpsellMessage": [Function],
-          "throughput": [Function],
-          "throughputRangeText": [Function],
-          "throughputSpendAck": [Function],
-          "throughputSpendAckText": [Function],
-          "throughputSpendAckVisible": [Function],
-          "title": [Function],
-          "upsellAnchorText": [Function],
-          "upsellAnchorUrl": [Function],
-          "upsellMessage": [Function],
-          "upsellMessageAriaLabel": [Function],
-          "visible": [Function],
-        },
-        AddCollectionPane {
-          "_isSynapseLinkEnabled": [Function],
-          "autoPilotThroughput": [Function],
-          "autoPilotUsageCost": [Function],
-          "canConfigureThroughput": [Function],
-          "canExceedMaximumValue": [Function],
-          "canRequestSupport": [Function],
-          "collectionId": [Function],
-          "collectionIdTitle": [Function],
-          "collectionWithThroughputInShared": [Function],
-          "collectionWithThroughputInSharedTitle": [Function],
-          "container": [Circular],
-          "costsVisible": [Function],
-          "databaseCreateNew": [Function],
-          "databaseCreateNewShared": [Function],
-          "databaseHasSharedOffer": [Function],
-          "databaseId": [Function],
-          "databaseIds": [Function],
-          "dedicatedRequestUnitsUsageCost": [Function],
-          "displayCollectionThroughput": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "formWarnings": [Function],
-          "freeTierExceedThroughputTooltip": [Function],
-          "id": "addcollectionpane",
-          "isAnalyticalStorageOn": [Function],
-          "isAutoPilotSelected": [Function],
-          "isExecuting": [Function],
-          "isFixedStorageSelected": [Function],
-          "isFreeTierAccount": [Function],
-          "isNonTableApi": [Function],
-          "isPreferredApiTable": [Function],
-          "isSharedAutoPilotSelected": [Function],
-          "isSynapseLinkSupported": [Function],
-          "isSynapseLinkUpdating": [Function],
-          "isTemplateReady": [Function],
-          "isTryCosmosDBSubscription": [Function],
-          "isUnlimitedStorageSelected": [Function],
-          "largePartitionKey": [Function],
-          "lowerCasePartitionKeyName": [Function],
-          "maxCollectionsReached": [Function],
-          "maxCollectionsReachedMessage": [Function],
-          "maxThroughputRU": [Function],
-          "minThroughputRU": [Function],
-          "onMoreDetailsKeyPress": [Function],
-          "partitionKey": [Function],
-          "partitionKeyName": [Function],
-          "partitionKeyPattern": [Function],
-          "partitionKeyPlaceholder": [Function],
-          "partitionKeyTitle": [Function],
-          "partitionKeyVisible": [Function],
-          "requestUnitsUsageCost": [Function],
-          "ruToolTipText": [Function],
-          "sharedAutoPilotThroughput": [Function],
-          "sharedThroughputRangeText": [Function],
-          "shouldCreateMongoWildcardIndex": [Function],
-          "shouldUseDatabaseThroughput": [Function],
-          "showAnalyticalStore": [Function],
-          "showEnableSynapseLink": [Function],
-          "showIndexingOptionsForSharedThroughput": [Function],
-          "showUpsellMessage": [Function],
-          "storage": [Function],
-          "throughputDatabase": [Function],
-          "throughputMultiPartition": [Function],
-          "throughputRangeText": [Function],
-          "throughputSinglePartition": [Function],
-          "throughputSpendAck": [Function],
-          "throughputSpendAckText": [Function],
-          "throughputSpendAckVisible": [Function],
-          "title": [Function],
-          "ttl90DaysEnabled": [Function],
-          "uniqueKeys": [Function],
-          "uniqueKeysPlaceholder": [Function],
-          "uniqueKeysVisible": [Function],
-          "upsellAnchorText": [Function],
-          "upsellAnchorUrl": [Function],
-          "upsellMessage": [Function],
-          "upsellMessageAriaLabel": [Function],
-          "useIndexingForSharedThroughput": [Function],
-          "visible": [Function],
-        },
-        DeleteCollectionConfirmationPane {
-          "collectionIdConfirmation": [Function],
-          "collectionIdConfirmationText": [Function],
-          "container": [Circular],
-          "containerDeleteFeedback": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "deletecollectionconfirmationpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "recordDeleteFeedback": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        GraphStylingPane {
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "graphConfigUIData": Object {
-            "nodeCaptionChoice": [Function],
-            "nodeColorKeyChoice": [Function],
-            "nodeIconChoice": [Function],
-            "nodeIconSet": [Function],
-            "nodeProperties": [Function],
-            "nodePropertiesWithNone": [Function],
-            "showNeighborType": [Function],
-          },
-          "id": "graphstylingpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        AddTableEntityPane {
-          "addButtonLabel": "Add Property",
-          "attributeNameLabel": "Property Name",
-          "attributeValueLabel": "Value",
-          "canAdd": [Function],
-          "canApply": [Function],
-          "container": [Circular],
-          "dataTypeLabel": "Type",
-          "displayedAttributes": [Function],
-          "editAttribute": [Function],
-          "editButtonLabel": "Edit",
-          "editingProperty": [Function],
-          "edmTypes": [Function],
-          "enterRequiredValueLabel": "Enter identifier value.",
-          "enterValueLabel": "Enter value to keep property.",
-          "finishEditingAttribute": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "addtableentitypane",
-          "insertAttribute": [Function],
-          "isEditing": [Function],
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onAddPropertyKeyDown": [Function],
-          "onBackButtonKeyDown": [Function],
-          "onDeletePropertyKeyDown": [Function],
-          "onEditPropertyKeyDown": [Function],
-          "onKeyUp": [Function],
-          "removeAttribute": [Function],
-          "removeButtonLabel": "Remove",
-          "scrollId": [Function],
-          "submitButtonText": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        EditTableEntityPane {
-          "addButtonLabel": "Add Property",
-          "attributeNameLabel": "Property Name",
-          "attributeValueLabel": "Value",
-          "canAdd": [Function],
-          "canApply": [Function],
-          "container": [Circular],
-          "dataTypeLabel": "Type",
-          "displayedAttributes": [Function],
-          "editAttribute": [Function],
-          "editButtonLabel": "Edit",
-          "editingProperty": [Function],
-          "edmTypes": [Function],
-          "finishEditingAttribute": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "edittableentitypane",
-          "insertAttribute": [Function],
-          "isEditing": [Function],
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onAddPropertyKeyDown": [Function],
-          "onBackButtonKeyDown": [Function],
-          "onDeletePropertyKeyDown": [Function],
-          "onEditPropertyKeyDown": [Function],
-          "onKeyUp": [Function],
-          "removeAttribute": [Function],
-          "removeButtonLabel": "Remove",
-          "scrollId": [Function],
-          "submitButtonText": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        QuerySelectPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsTableQueryLabel": "Available Columns",
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "queryselectpane",
-          "instructionLabel": "Select the columns that you want to query.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Select Columns",
-          "visible": [Function],
-        },
-        NewVertexPane {
-          "buildString": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "newvertexpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onMoreDetailsKeyPress": [Function],
-          "onSubmitCreateCallback": null,
-          "partitionKeyProperty": [Function],
-          "tempVertexData": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        CassandraAddCollectionPane {
-          "autoPilotUsageCost": [Function],
-          "canConfigureThroughput": [Function],
-          "canExceedMaximumValue": [Function],
-          "canRequestSupport": [Function],
-          "container": [Circular],
-          "costsVisible": [Function],
-          "createTableQuery": [Function],
-          "dedicateTableThroughput": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "cassandraaddcollectionpane",
-          "isAutoPilotSelected": [Function],
-          "isExecuting": [Function],
-          "isFreeTierAccount": [Function],
-          "isSharedAutoPilotSelected": [Function],
-          "isTemplateReady": [Function],
-          "keyspaceCreateNew": [Function],
-          "keyspaceHasSharedOffer": [Function],
-          "keyspaceId": [Function],
-          "keyspaceIds": [Function],
-          "keyspaceOffers": HashMap {
-            "container": Object {},
-          },
-          "keyspaceThroughput": [Function],
-          "maxThroughputRU": [Function],
-          "minThroughputRU": [Function],
-          "requestUnitsUsageCostDedicated": [Function],
-          "requestUnitsUsageCostShared": [Function],
-          "ruToolTipText": [Function],
-          "selectedAutoPilotThroughput": [Function],
-          "sharedAutoPilotThroughput": [Function],
-          "sharedThroughputRangeText": [Function],
-          "sharedThroughputSpendAck": [Function],
-          "sharedThroughputSpendAckText": [Function],
-          "sharedThroughputSpendAckVisible": [Function],
-          "tableId": [Function],
-          "throughput": [Function],
-          "throughputRangeText": [Function],
-          "throughputSpendAck": [Function],
-          "throughputSpendAckText": [Function],
-          "throughputSpendAckVisible": [Function],
-          "title": [Function],
-          "userTableQuery": [Function],
-          "visible": [Function],
-        },
-        StringInputPane {
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "stringinputpane",
-          "inputLabel": [Function],
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "stringInput": [Function],
-          "submitButtonLabel": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SetupNotebooksPane {
-          "container": [Circular],
-          "description": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "setupnotebookspane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onCompleteSetupClick": [Function],
-          "onCompleteSetupKeyPress": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-      ],
-      "_refreshSparkEnabledStateForAccount": [Function],
-      "_resetNotebookWorkspace": [Function],
-      "addCollectionPane": AddCollectionPane {
-        "_isSynapseLinkEnabled": [Function],
-        "autoPilotThroughput": [Function],
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "collectionId": [Function],
-        "collectionIdTitle": [Function],
-        "collectionWithThroughputInShared": [Function],
-        "collectionWithThroughputInSharedTitle": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "databaseCreateNew": [Function],
-        "databaseCreateNewShared": [Function],
-        "databaseHasSharedOffer": [Function],
-        "databaseId": [Function],
-        "databaseIds": [Function],
-        "dedicatedRequestUnitsUsageCost": [Function],
-        "displayCollectionThroughput": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "formWarnings": [Function],
-        "freeTierExceedThroughputTooltip": [Function],
-        "id": "addcollectionpane",
-        "isAnalyticalStorageOn": [Function],
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFixedStorageSelected": [Function],
-        "isFreeTierAccount": [Function],
-        "isNonTableApi": [Function],
-        "isPreferredApiTable": [Function],
-        "isSharedAutoPilotSelected": [Function],
-        "isSynapseLinkSupported": [Function],
-        "isSynapseLinkUpdating": [Function],
-        "isTemplateReady": [Function],
-        "isTryCosmosDBSubscription": [Function],
-        "isUnlimitedStorageSelected": [Function],
-        "largePartitionKey": [Function],
-        "lowerCasePartitionKeyName": [Function],
-        "maxCollectionsReached": [Function],
-        "maxCollectionsReachedMessage": [Function],
-        "maxThroughputRU": [Function],
-        "minThroughputRU": [Function],
-        "onMoreDetailsKeyPress": [Function],
-        "partitionKey": [Function],
-        "partitionKeyName": [Function],
-        "partitionKeyPattern": [Function],
-        "partitionKeyPlaceholder": [Function],
-        "partitionKeyTitle": [Function],
-        "partitionKeyVisible": [Function],
-        "requestUnitsUsageCost": [Function],
-        "ruToolTipText": [Function],
-        "sharedAutoPilotThroughput": [Function],
-        "sharedThroughputRangeText": [Function],
-        "shouldCreateMongoWildcardIndex": [Function],
-        "shouldUseDatabaseThroughput": [Function],
-        "showAnalyticalStore": [Function],
-        "showEnableSynapseLink": [Function],
-        "showIndexingOptionsForSharedThroughput": [Function],
-        "showUpsellMessage": [Function],
-        "storage": [Function],
-        "throughputDatabase": [Function],
-        "throughputMultiPartition": [Function],
-        "throughputRangeText": [Function],
-        "throughputSinglePartition": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "ttl90DaysEnabled": [Function],
-        "uniqueKeys": [Function],
-        "uniqueKeysPlaceholder": [Function],
-        "uniqueKeysVisible": [Function],
-        "upsellAnchorText": [Function],
-        "upsellAnchorUrl": [Function],
-        "upsellMessage": [Function],
-        "upsellMessageAriaLabel": [Function],
-        "useIndexingForSharedThroughput": [Function],
-        "visible": [Function],
-      },
-      "addCollectionText": [Function],
-      "addDatabasePane": AddDatabasePane {
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "databaseCreateNewShared": [Function],
-        "databaseId": [Function],
-        "databaseIdLabel": [Function],
-        "databaseIdPlaceHolder": [Function],
-        "databaseIdTooltipText": [Function],
-        "databaseLevelThroughputTooltipText": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "freeTierExceedThroughputTooltip": [Function],
-        "id": "adddatabasepane",
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFreeTierAccount": [Function],
-        "isTemplateReady": [Function],
-        "maxAutoPilotThroughputSet": [Function],
-        "maxThroughputRU": [Function],
-        "maxThroughputRUText": [Function],
-        "minThroughputRU": [Function],
-        "onMoreDetailsKeyPress": [Function],
-        "requestUnitsUsageCost": [Function],
-        "ruToolTipText": [Function],
-        "showUpsellMessage": [Function],
-        "throughput": [Function],
-        "throughputRangeText": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "upsellAnchorText": [Function],
-        "upsellAnchorUrl": [Function],
-        "upsellMessage": [Function],
-        "upsellMessageAriaLabel": [Function],
-        "visible": [Function],
-      },
-      "addDatabaseText": [Function],
-      "addTableEntityPane": AddTableEntityPane {
-        "addButtonLabel": "Add Property",
-        "attributeNameLabel": "Property Name",
-        "attributeValueLabel": "Value",
-        "canAdd": [Function],
-        "canApply": [Function],
-        "container": [Circular],
-        "dataTypeLabel": "Type",
-        "displayedAttributes": [Function],
-        "editAttribute": [Function],
-        "editButtonLabel": "Edit",
-        "editingProperty": [Function],
-        "edmTypes": [Function],
-        "enterRequiredValueLabel": "Enter identifier value.",
-        "enterValueLabel": "Enter value to keep property.",
-        "finishEditingAttribute": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "addtableentitypane",
-        "insertAttribute": [Function],
-        "isEditing": [Function],
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onAddPropertyKeyDown": [Function],
-        "onBackButtonKeyDown": [Function],
-        "onDeletePropertyKeyDown": [Function],
-        "onEditPropertyKeyDown": [Function],
-        "onKeyUp": [Function],
-        "removeAttribute": [Function],
-        "removeButtonLabel": "Remove",
-        "scrollId": [Function],
-        "submitButtonText": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "arcadiaToken": [Function],
-      "canExceedMaximumValue": [Function],
-      "canSaveQueries": [Function],
-      "cassandraAddCollectionPane": CassandraAddCollectionPane {
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "createTableQuery": [Function],
-        "dedicateTableThroughput": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "cassandraaddcollectionpane",
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFreeTierAccount": [Function],
-        "isSharedAutoPilotSelected": [Function],
-        "isTemplateReady": [Function],
-        "keyspaceCreateNew": [Function],
-        "keyspaceHasSharedOffer": [Function],
-        "keyspaceId": [Function],
-        "keyspaceIds": [Function],
-        "keyspaceOffers": HashMap {
-          "container": Object {},
-        },
-        "keyspaceThroughput": [Function],
-        "maxThroughputRU": [Function],
-        "minThroughputRU": [Function],
-        "requestUnitsUsageCostDedicated": [Function],
-        "requestUnitsUsageCostShared": [Function],
-        "ruToolTipText": [Function],
-        "selectedAutoPilotThroughput": [Function],
-        "sharedAutoPilotThroughput": [Function],
-        "sharedThroughputRangeText": [Function],
-        "sharedThroughputSpendAck": [Function],
-        "sharedThroughputSpendAckText": [Function],
-        "sharedThroughputSpendAckVisible": [Function],
-        "tableId": [Function],
-        "throughput": [Function],
-        "throughputRangeText": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "userTableQuery": [Function],
-        "visible": [Function],
-      },
-      "clickHostedAccountSwitch": [Function],
-      "clickHostedDirectorySwitch": [Function],
-      "closeDialog": undefined,
-      "closeSidePanel": undefined,
-      "collapsedResourceTreeWidth": 36,
-      "collectionCreationDefaults": Object {
-        "storage": "100",
-        "throughput": Object {
-          "fixed": 400,
-          "shared": 400,
-          "unlimited": 400,
-          "unlimitedmax": 1000000,
-          "unlimitedmin": 400,
-        },
-      },
-      "collectionTitle": [Function],
-      "collectionTreeNodeAltText": [Function],
-      "commandBarComponentAdapter": CommandBarComponentAdapter {
-        "container": [Circular],
-        "isNotebookTabActive": [Function],
-        "parameters": [Function],
-        "tabsButtons": Array [],
-      },
-      "databaseAccount": [Function],
-      "databases": [Function],
-      "defaultExperience": [Function],
-      "deleteCollectionConfirmationPane": DeleteCollectionConfirmationPane {
-        "collectionIdConfirmation": [Function],
-        "collectionIdConfirmationText": [Function],
-        "container": [Circular],
-        "containerDeleteFeedback": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "deletecollectionconfirmationpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "recordDeleteFeedback": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "deleteCollectionText": [Function],
-      "deleteDatabaseText": [Function],
-      "editTableEntityPane": EditTableEntityPane {
-        "addButtonLabel": "Add Property",
-        "attributeNameLabel": "Property Name",
-        "attributeValueLabel": "Value",
-        "canAdd": [Function],
-        "canApply": [Function],
-        "container": [Circular],
-        "dataTypeLabel": "Type",
-        "displayedAttributes": [Function],
-        "editAttribute": [Function],
-        "editButtonLabel": "Edit",
-        "editingProperty": [Function],
-        "edmTypes": [Function],
-        "finishEditingAttribute": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "edittableentitypane",
-        "insertAttribute": [Function],
-        "isEditing": [Function],
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onAddPropertyKeyDown": [Function],
-        "onBackButtonKeyDown": [Function],
-        "onDeletePropertyKeyDown": [Function],
-        "onEditPropertyKeyDown": [Function],
-        "onKeyUp": [Function],
-        "removeAttribute": [Function],
-        "removeButtonLabel": "Remove",
-        "scrollId": [Function],
-        "submitButtonText": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "graphStylingPane": GraphStylingPane {
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "graphConfigUIData": Object {
-          "nodeCaptionChoice": [Function],
-          "nodeColorKeyChoice": [Function],
-          "nodeIconChoice": [Function],
-          "nodeIconSet": [Function],
-          "nodeProperties": [Function],
-          "nodePropertiesWithNone": [Function],
-          "showNeighborType": [Function],
-        },
-        "id": "graphstylingpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "hasStorageAnalyticsAfecFeature": [Function],
-      "isAccountReady": [Function],
-      "isAutoscaleDefaultEnabled": [Function],
-      "isCopyNotebookPaneEnabled": [Function],
-      "isEnableMongoCapabilityPresent": [Function],
-      "isFixedCollectionWithSharedThroughputSupported": [Function],
-      "isGitHubPaneEnabled": [Function],
-      "isHostedDataExplorerEnabled": [Function],
-      "isLeftPaneExpanded": [Function],
-      "isMongoIndexingEnabled": [Function],
-      "isNotebookEnabled": [Function],
-      "isNotebooksEnabledForAccount": [Function],
-      "isPreferredApiCassandra": [Function],
-      "isPreferredApiDocumentDB": [Function],
-      "isPreferredApiGraph": [Function],
-      "isPreferredApiMongoDB": [Function],
-      "isPreferredApiTable": [Function],
-      "isPublishNotebookPaneEnabled": [Function],
-      "isResourceTokenCollectionNodeSelected": [Function],
-      "isRightPanelV2Enabled": [Function],
-      "isSchemaEnabled": [Function],
-      "isServerlessEnabled": [Function],
-      "isSparkEnabled": [Function],
-      "isSparkEnabledForAccount": [Function],
-      "isSynapseLinkUpdating": [Function],
-      "isTabsContentExpanded": [Function],
-      "memoryUsageInfo": [Function],
-      "newVertexPane": NewVertexPane {
-        "buildString": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "newvertexpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onMoreDetailsKeyPress": [Function],
-        "onSubmitCreateCallback": null,
-        "partitionKeyProperty": [Function],
-        "tempVertexData": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "notebookBasePath": [Function],
-      "notebookServerInfo": [Function],
-      "onRefreshDatabasesKeyPress": [Function],
-      "onRefreshResourcesClick": [Function],
-      "onSwitchToConnectionString": [Function],
-      "openDialog": undefined,
-      "openSidePanel": undefined,
-      "provideFeedbackEmail": [Function],
-      "queriesClient": QueriesClient {
-        "container": [Circular],
-      },
-      "querySelectPane": QuerySelectPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsTableQueryLabel": "Available Columns",
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "queryselectpane",
-        "instructionLabel": "Select the columns that you want to query.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Select Columns",
-        "visible": [Function],
-      },
-      "refreshDatabaseAccount": [Function],
-      "refreshNotebookList": [Function],
-      "refreshTreeTitle": [Function],
-      "resourceTokenCollection": [Function],
-      "resourceTokenCollectionId": [Function],
-      "resourceTokenDatabaseId": [Function],
-      "resourceTokenPartitionKey": [Function],
-      "resourceTree": ResourceTreeAdapter {
-        "container": [Circular],
-        "copyNotebook": [Function],
-        "databaseCollectionIdMap": ArrayHashMap {
-          "store": HashMap {
-            "container": Object {},
-          },
-        },
-        "koSubsCollectionIdMap": ArrayHashMap {
-          "store": HashMap {
-            "container": Object {},
-          },
-        },
-        "koSubsDatabaseIdMap": ArrayHashMap {
-          "store": HashMap {
-            "container": Object {},
-          },
-        },
-        "parameters": [Function],
-      },
-      "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-        "container": [Circular],
-        "parameters": [Function],
-      },
-      "selectedDatabaseId": [Function],
-      "selectedNode": [Function],
-      "setInProgressConsoleDataIdToBeDeleted": undefined,
-      "setIsNotificationConsoleExpanded": undefined,
-      "setNotificationConsoleData": undefined,
-      "setupNotebooksPane": SetupNotebooksPane {
-        "container": [Circular],
-        "description": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "setupnotebookspane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onCompleteSetupClick": [Function],
-        "onCompleteSetupKeyPress": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "signInAad": [Function],
-      "sparkClusterConnectionInfo": [Function],
-      "splitter": Splitter {
-        "bounds": Object {
-          "max": 400,
-          "min": 240,
-        },
-        "direction": "vertical",
-        "isCollapsed": [Function],
-        "leftSideId": "resourcetree",
-        "onResizeStart": [Function],
-        "onResizeStop": [Function],
-        "splitterId": "h_splitter1",
-      },
-      "stringInputPane": StringInputPane {
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "stringinputpane",
-        "inputLabel": [Function],
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "stringInput": [Function],
-        "submitButtonLabel": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "tabsManager": TabsManager {
-        "activeTab": [Function],
-        "openedTabs": [Function],
-      },
-      "toggleLeftPaneExpandedKeyPress": [Function],
-    }
-  }
-  formError=""
-  formErrorDetail=""
-  id="uploaditemspane"
-  onClose={[Function]}
-  onSubmit={[Function]}
-  submitButtonText="Upload"
-  title="Upload Items"
->
-  <div
-    className="paneMainContent"
-  >
-    <Upload
-      accept="application/json"
-      label="Select JSON Files"
-      multiple={true}
-      onUpload={[Function]}
-      tabIndex={0}
-      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
-    />
-  </div>
-</GenericRightPaneComponent>
-`;