default auto scale selected

.eslintignore

@@ -124,11 +124,9 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.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/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts

.github/workflows/ci.yml

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

package.json

@@ -43,7 +43,6 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
-    "@uifabric/react-hooks": "7.14.0",
     "@uifabric/styling": "7.13.7",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -172,7 +171,7 @@
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.0.2",
+    "typescript": "4.2.3",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",

preview/.azure/config

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

preview/README.md

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

preview/config.json

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

preview/index.js

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

preview/package-lock.json

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

preview/package.json

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

src/Common/CosmosClient.ts

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

src/Common/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/__snapshots__/CosmosClient.test.ts.snap

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

src/Explorer/ComponentRegisterer.test.ts

@@ -77,14 +77,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("delete-collection-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);
   });

src/Explorer/ComponentRegisterer.ts

@@ -71,9 +71,6 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt
 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("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("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/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap

@@ -350,11 +350,11 @@ exports[`test render renders with filters 1`] = `
       }
     >
       <div
-        className="ms-ScrollablePane root-72"
+        className="ms-ScrollablePane root-40"
         data-is-scrollable="true"
       >
         <div
-          className="stickyAbove-74"
+          className="stickyAbove-42"
           style={
             Object {
               "height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
           }
         />
         <div
-          className="ms-ScrollablePane--contentContainer contentContainer-73"
+          className="ms-ScrollablePane--contentContainer contentContainer-41"
           data-is-scrollable={true}
         >
           <Sticky
@@ -691,18 +691,18 @@ exports[`test render renders with filters 1`] = `
                       validateOnLoad={true}
                     >
                       <div
-                        className="ms-TextField directoryListFilterTextBox root-78"
+                        className="ms-TextField directoryListFilterTextBox root-46"
                       >
                         <div
                           className="ms-TextField-wrapper"
                         >
                           <div
-                            className="ms-TextField-fieldGroup fieldGroup-79"
+                            className="ms-TextField-fieldGroup fieldGroup-47"
                           >
                             <input
                               aria-invalid={false}
                               aria-label="Directory filter text box"
-                              className="ms-TextField-field field-80"
+                              className="ms-TextField-field field-48"
                               id="TextField0"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -1900,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
                         >
                           <button
                             aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
                             data-is-focusable={false}
                             disabled={true}
                             onClick={[Function]}
@@ -1912,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
                             type="button"
                           >
                             <span
-                              className="ms-Button-flexContainer flexContainer-90"
+                              className="ms-Button-flexContainer flexContainer-58"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1943,7 +1943,7 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          className="stickyBelow-75"
+          className="stickyBelow-43"
           style={
             Object {
               "bottom": "0px",
@@ -1954,7 +1954,7 @@ exports[`test render renders with filters 1`] = `
           }
         >
           <div
-            className="stickyBelowItems-76"
+            className="stickyBelowItems-44"
           />
         </div>
       </div>

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

@@ -1,33 +0,0 @@
-/**
- * This adapter is responsible to render the QueriesGrid React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as ko from "knockout";
-import * as React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import Explorer from "../../Explorer";
-
-export class QueriesGridComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(private container: Explorer) {
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    const props: QueriesGridComponentProps = {
-      queriesClient: this.container.queriesClient,
-      onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
-      containerVisible: this.container.browseQueriesPane.visible(),
-      saveQueryEnabled: this.container.canSaveQueries(),
-    };
-    return <QueriesGridComponent {...props} />;
-  }
-
-  public forceRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}

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

@@ -371,54 +371,6 @@ exports[`SettingsComponent renders 1`] = `
                     "userTableQuery": [Function],
                     "visible": [Function],
                   },
-                  LoadQueryPane {
-                    "container": [Circular],
-                    "files": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "loadquerypane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onImportLinkKeyPress": [Function],
-                    "selectedFilesTitle": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
-                  SaveQueryPane {
-                    "canSaveQueries": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "savequerypane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "queryName": [Function],
-                    "setupQueries": [Function],
-                    "setupSaveQueriesText": "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.",
-                    "submit": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
-                  BrowseQueriesPane {
-                    "canSaveQueries": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "browsequeriespane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "loadSavedQuery": [Function],
-                    "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                      "container": [Circular],
-                      "parameters": [Function],
-                    },
-                    "setupQueries": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   StringInputPane {
                     "container": [Circular],
                     "firstFieldHasFocus": [Function],
@@ -613,24 +565,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "browseQueriesPane": BrowseQueriesPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "browsequeriespane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "loadSavedQuery": [Function],
-                  "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                    "container": [Circular],
-                    "parameters": [Function],
-                  },
-                  "setupQueries": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
                 "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -805,20 +739,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "loadQueryPane": LoadQueryPane {
-                  "container": [Circular],
-                  "files": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "loadquerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onImportLinkKeyPress": [Function],
-                  "selectedFilesTitle": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "memoryUsageInfo": [Function],
                 "newVertexPane": NewVertexPane {
                   "buildString": [Function],
@@ -899,22 +819,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                   "parameters": [Function],
                 },
-                "saveQueryPane": SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "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.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -1357,54 +1261,6 @@ exports[`SettingsComponent renders 1`] = `
                   "userTableQuery": [Function],
                   "visible": [Function],
                 },
-                LoadQueryPane {
-                  "container": [Circular],
-                  "files": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "loadquerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onImportLinkKeyPress": [Function],
-                  "selectedFilesTitle": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
-                SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "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.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
-                BrowseQueriesPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "browsequeriespane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "loadSavedQuery": [Function],
-                  "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                    "container": [Circular],
-                    "parameters": [Function],
-                  },
-                  "setupQueries": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 StringInputPane {
                   "container": [Circular],
                   "firstFieldHasFocus": [Function],
@@ -1599,24 +1455,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "browseQueriesPane": BrowseQueriesPane {
-                "canSaveQueries": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "browsequeriespane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "loadSavedQuery": [Function],
-                "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "setupQueries": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
               "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -1791,20 +1629,6 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
-              "loadQueryPane": LoadQueryPane {
-                "container": [Circular],
-                "files": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "loadquerypane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onImportLinkKeyPress": [Function],
-                "selectedFilesTitle": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "memoryUsageInfo": [Function],
               "newVertexPane": NewVertexPane {
                 "buildString": [Function],
@@ -1885,22 +1709,6 @@ exports[`SettingsComponent renders 1`] = `
                 "container": [Circular],
                 "parameters": [Function],
               },
-              "saveQueryPane": SaveQueryPane {
-                "canSaveQueries": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "savequerypane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "queryName": [Function],
-                "setupQueries": [Function],
-                "setupSaveQueriesText": "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.",
-                "submit": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -2356,54 +2164,6 @@ exports[`SettingsComponent renders 1`] = `
                     "userTableQuery": [Function],
                     "visible": [Function],
                   },
-                  LoadQueryPane {
-                    "container": [Circular],
-                    "files": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "loadquerypane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onImportLinkKeyPress": [Function],
-                    "selectedFilesTitle": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
-                  SaveQueryPane {
-                    "canSaveQueries": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "savequerypane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "queryName": [Function],
-                    "setupQueries": [Function],
-                    "setupSaveQueriesText": "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.",
-                    "submit": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
-                  BrowseQueriesPane {
-                    "canSaveQueries": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "browsequeriespane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "loadSavedQuery": [Function],
-                    "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                      "container": [Circular],
-                      "parameters": [Function],
-                    },
-                    "setupQueries": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   StringInputPane {
                     "container": [Circular],
                     "firstFieldHasFocus": [Function],
@@ -2598,24 +2358,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "browseQueriesPane": BrowseQueriesPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "browsequeriespane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "loadSavedQuery": [Function],
-                  "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                    "container": [Circular],
-                    "parameters": [Function],
-                  },
-                  "setupQueries": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
                 "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -2790,20 +2532,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "loadQueryPane": LoadQueryPane {
-                  "container": [Circular],
-                  "files": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "loadquerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onImportLinkKeyPress": [Function],
-                  "selectedFilesTitle": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "memoryUsageInfo": [Function],
                 "newVertexPane": NewVertexPane {
                   "buildString": [Function],
@@ -2884,22 +2612,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                   "parameters": [Function],
                 },
-                "saveQueryPane": SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "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.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -3342,54 +3054,6 @@ exports[`SettingsComponent renders 1`] = `
                   "userTableQuery": [Function],
                   "visible": [Function],
                 },
-                LoadQueryPane {
-                  "container": [Circular],
-                  "files": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "loadquerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onImportLinkKeyPress": [Function],
-                  "selectedFilesTitle": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
-                SaveQueryPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "savequerypane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "queryName": [Function],
-                  "setupQueries": [Function],
-                  "setupSaveQueriesText": "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.",
-                  "submit": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
-                BrowseQueriesPane {
-                  "canSaveQueries": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "browsequeriespane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "loadSavedQuery": [Function],
-                  "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                    "container": [Circular],
-                    "parameters": [Function],
-                  },
-                  "setupQueries": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 StringInputPane {
                   "container": [Circular],
                   "firstFieldHasFocus": [Function],
@@ -3584,24 +3248,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "browseQueriesPane": BrowseQueriesPane {
-                "canSaveQueries": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "browsequeriespane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "loadSavedQuery": [Function],
-                "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "setupQueries": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
               "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -3776,20 +3422,6 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
-              "loadQueryPane": LoadQueryPane {
-                "container": [Circular],
-                "files": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "loadquerypane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onImportLinkKeyPress": [Function],
-                "selectedFilesTitle": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "memoryUsageInfo": [Function],
               "newVertexPane": NewVertexPane {
                 "buildString": [Function],
@@ -3870,22 +3502,6 @@ exports[`SettingsComponent renders 1`] = `
                 "container": [Circular],
                 "parameters": [Function],
               },
-              "saveQueryPane": SaveQueryPane {
-                "canSaveQueries": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "savequerypane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "queryName": [Function],
-                "setupQueries": [Function],
-                "setupSaveQueriesText": "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.",
-                "submit": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,

src/Explorer/Explorer.tsx

@@ -50,7 +50,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { AddDatabasePane } from "./Panes/AddDatabasePane";
-import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
@@ -58,9 +58,9 @@ import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfi
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
 import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPane } from "./Panes/LoadQueryPane";
+import { LoadQueryPanel } from "./Panes/LoadQueryPanel";
 import NewVertexPane from "./Panes/NewVertexPane";
-import { SaveQueryPane } from "./Panes/SaveQueryPane";
+import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
@@ -209,9 +209,6 @@ export default class Explorer {
   public querySelectPane: QuerySelectPane;
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
-  public loadQueryPane: LoadQueryPane;
-  public saveQueryPane: ContextualPaneBase;
-  public browseQueriesPane: BrowseQueriesPane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
   public gitHubReposPane: ContextualPaneBase;
@@ -603,27 +600,6 @@ export default class Explorer {
       container: 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.stringInputPane = new StringInputPane({
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
@@ -650,9 +626,6 @@ export default class Explorer {
       this.querySelectPane,
       this.newVertexPane,
       this.cassandraAddCollectionPane,
-      this.loadQueryPane,
-      this.saveQueryPane,
-      this.browseQueriesPane,
       this.stringInputPane,
       this.setupNotebooksPane,
     ];
@@ -2420,6 +2393,19 @@ export default class Explorer {
       <AddDatabasePane explorer={this} openNotificationConsole={this.expandConsole} closePanel={this.closeSidePanel} />
     );
   }
+
+  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(

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -420,7 +420,7 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
   return {
     iconSrc: BrowseQueriesIcon,
     iconAlt: label,
-    onCommandClick: () => container.browseQueriesPane.open(),
+    onCommandClick: () => container.openBrowseQueriesPanel(),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -433,7 +433,7 @@ function createOpenQueryFromDiskButton(container: Explorer): CommandButtonCompon
   return {
     iconSrc: OpenQueryFromDiskIcon,
     iconAlt: label,
-    onCommandClick: () => container.loadQueryPane.open(),
+    onCommandClick: () => container.openLoadQueryPanel(),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,

src/Explorer/Panes/AddDatabasePane/index.tsx

@@ -29,13 +29,8 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
   closePanel,
   openNotificationConsole,
 }: AddDatabasePaneProps) => {
-  const getSharedThroughputDefault = (): boolean => {
   const { subscriptionType } = userContext;
-    if (subscriptionType === SubscriptionType.EA || container.isServerlessEnabled()) {
+  const getSharedThroughputDefault = !(subscriptionType === SubscriptionType.EA || container.isServerlessEnabled());
-      return false;
-    }
-    return true;
-  };
   const _isAutoPilotSelectedAndWhatTier = (): DataModels.AutoPilotCreationSettings => {
     if (isAutoPilotSelected && maxAutoPilotThroughputSet) {
       return {
@@ -48,7 +43,6 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
   const isCassandraAccount: boolean = userContext.apiType === "Cassandra";
   const databaseLabel: string = isCassandraAccount ? "keyspace" : "database";
   const collectionsLabel: string = isCassandraAccount ? "tables" : "collections";
-
   const databaseIdLabel: string = isCassandraAccount ? "Keyspace id" : "Database id";
   const databaseIdPlaceHolder: string = isCassandraAccount ? "Type a new keyspace id" : "Type a new database id";
 
@@ -58,15 +52,14 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
   } is a logical container of one or more ${isCassandraAccount ? "tables" : "collections"}`;
 
   const databaseLevelThroughputTooltipText = `Provisioned throughput at the ${databaseLabel} level will be shared across all ${collectionsLabel} within the ${databaseLabel}.`;
-  const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState<boolean>(getSharedThroughputDefault());
+  const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState<boolean>(getSharedThroughputDefault);
   const [formErrorsDetails, setFormErrorsDetails] = useState<string>();
   const [formErrors, setFormErrors] = useState<string>("");
 
   const throughputDefaults = container.collectionCreationDefaults.throughput;
+  const [throughput, setThroughput] = useState<number>(AutoPilotUtils.minAutoPilotThroughput);
 
-  const [throughput, setThroughput] = useState<number>(throughputDefaults.shared);
+  const maxThroughputRU = throughputDefaults.unlimitedmax;
-
-  const [maxThroughputRU, setMaxThroughputRU] = useState<number>(throughputDefaults.unlimitedmax);
   const maxThroughputRUText: string = maxThroughputRU?.toLocaleString();
   const [isAutoPilotSelected, setIsAutoPilotSelected] = useState<boolean>(container.isAutoscaleDefaultEnabled());
 
@@ -96,9 +89,7 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
   const upsellAnchorUrl: string = isFreeTierAccount ? Constants.Urls.freeTierInformation : Constants.Urls.cosmosPricing;
 
   const upsellAnchorText: string = isFreeTierAccount ? "Learn more" : "More details";
-  const [maxAutoPilotThroughputSet, setMaxAutoPilotThroughputSet] = useState<number>(
+  const maxAutoPilotThroughputSet = AutoPilotUtils.minAutoPilotThroughput;
-    AutoPilotUtils.minAutoPilotThroughput
-  );
 
   const canConfigureThroughput = !container.isServerlessEnabled();
   const showUpsellMessage = () => {
@@ -115,31 +106,26 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
   const title: string = container?.addDatabaseText() || "New Database";
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
-  const _updateThroughputLimitByDatabase = () => {
+  useEffect(() => {
-    const throughputDefaults = container.collectionCreationDefaults.throughput;
+    setDatabaseCreateNewShared(getSharedThroughputDefault);
-    setThroughput(throughputDefaults.shared);
+  }, [subscriptionType]);
-    setMaxThroughputRU(throughputDefaults.unlimitedmax);
+
+  const addDatabasePaneMessage = {
+    database: {
+      id: databaseId,
+      shared: databaseCreateNewShared,
+    },
+    subscriptionType: SubscriptionType[subscriptionType],
+    subscriptionQuotaId: userContext.quotaId,
+    defaultsCheck: {
+      flight: container.flight(),
+    },
+    dataExplorerArea: Constants.Areas.ContextualPane,
   };
-  useEffect(() => {
-    _updateThroughputLimitByDatabase();
-  }, [databaseCreateNewShared]);
-
-  useEffect(() => {
-    setDatabaseCreateNewShared(getSharedThroughputDefault());
-  }, [userContext.subscriptionType]);
-
-  useEffect(() => {
-    setDatabaseId("");
-    setDatabaseCreateNewShared(getSharedThroughputDefault());
-    setIsAutoPilotSelected(container.isAutoscaleDefaultEnabled());
-    setMaxAutoPilotThroughputSet(AutoPilotUtils.minAutoPilotThroughput);
-    _updateThroughputLimitByDatabase();
-    setThroughputSpendAck(false);
-  }, [container.flight]);
 
   useEffect(() => {
     const addDatabasePaneOpenMessage = {
-      subscriptionType: SubscriptionType[userContext.subscriptionType],
+      subscriptionType: SubscriptionType[subscriptionType],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         throughput: throughput,
@@ -158,17 +144,8 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
     const offerThroughput: number = _computeOfferThroughput();
 
     const addDatabasePaneStartMessage = {
-      database: {
+      ...addDatabasePaneMessage,
-        id: databaseId,
-        shared: databaseCreateNewShared,
-      },
       offerThroughput,
-      subscriptionType: SubscriptionType[userContext.subscriptionType],
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        flight: container.flight(),
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
     };
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateDatabase, addDatabasePaneStartMessage);
     setFormErrors("");
@@ -178,9 +155,8 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
       databaseId: addDatabasePaneStartMessage.database.id,
       databaseLevelThroughput: addDatabasePaneStartMessage.database.shared,
     };
-
     if (isAutoPilotSelected) {
-      createDatabaseParams.autoPilotMaxThroughput = "" + maxAutoPilotThroughputSet;
+      createDatabaseParams.autoPilotMaxThroughput = "" + addDatabasePaneStartMessage.offerThroughput;
     } else {
       createDatabaseParams.offerThroughput = addDatabasePaneStartMessage.offerThroughput;
     }
@@ -200,17 +176,8 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
     closePanel();
     container.refreshAllDatabases();
     const addDatabasePaneSuccessMessage = {
-      database: {
+      ...addDatabasePaneMessage,
-        id: databaseId,
+      offerThroughput,
-        shared: databaseCreateNewShared,
-      },
-      offerThroughput: offerThroughput,
-      subscriptionType: SubscriptionType[userContext.subscriptionType],
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        flight: container.flight(),
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.traceSuccess(Action.CreateDatabase, addDatabasePaneSuccessMessage, startKey);
   };
@@ -221,17 +188,8 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
     setFormErrors(errorMessage);
     setFormErrorsDetails(errorMessage);
     const addDatabasePaneFailedMessage = {
-      database: {
+      ...addDatabasePaneMessage,
-        id: databaseId,
+      offerThroughput,
-        shared: databaseCreateNewShared,
-      },
-      offerThroughput: offerThroughput,
-      subscriptionType: SubscriptionType[userContext.subscriptionType],
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        flight: container.flight(),
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
       error: errorMessage,
       errorStack: getErrorStack(error),
     };
@@ -247,10 +205,6 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
       return undefined;
     }
 
-    if (isAutoPilotSelected) {
-      return undefined;
-    }
-
     return _getThroughput();
   };
 

src/Explorer/Panes/BrowseQueriesPane.html

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

src/Explorer/Panes/BrowseQueriesPane.ts

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

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

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

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

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

src/Explorer/Panes/BrowseQueriesPanel/index.tsx

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

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

@@ -1061,7 +1061,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 >
                   <button
                     aria-label="Close pane"
-                    className="ms-Button ms-Button--icon closePaneBtn root-72"
+                    className="ms-Button ms-Button--icon closePaneBtn root-40"
                     data-is-focusable={true}
                     onClick={[Function]}
                     onKeyDown={[Function]}
@@ -1074,16 +1074,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     type="button"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-73"
+                      className="ms-Button-flexContainer flexContainer-41"
                       data-automationid="splitbuttonprimary"
                     >
                       <Component
-                        className="ms-Button-icon icon-75"
+                        className="ms-Button-icon icon-43"
                         iconName="Cancel"
                       >
                         <i
                           aria-hidden={true}
-                          className="ms-Icon root-37 css-80 ms-Button-icon icon-75"
+                          className="ms-Icon root-37 css-48 ms-Button-icon icon-43"
                           data-icon-name="Cancel"
                           role="presentation"
                           style={
@@ -1429,7 +1429,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     }
                   >
                     <label
-                      className="ms-Label root-81"
+                      className="ms-Label root-49"
                     >
                       Partition key value
                     </label>
@@ -1439,7 +1439,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   horizontal={true}
                 >
                   <div
-                    className="ms-Stack css-82"
+                    className="ms-Stack css-50"
                   >
                     <StyledWithResponsiveMode
                       key=".0:$.0"
@@ -2336,7 +2336,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 }
                               >
                                 <label
-                                  className="ms-Label ms-Dropdown-label root-99"
+                                  className="ms-Label ms-Dropdown-label root-67"
                                   id="Dropdown3-label"
                                 >
                                   Key
@@ -2348,7 +2348,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 aria-expanded="false"
                                 aria-haspopup="listbox"
                                 aria-labelledby="Dropdown3-label Dropdown3-option"
-                                className="ms-Dropdown dropdown-83"
+                                className="ms-Dropdown dropdown-51"
                                 data-is-focusable={true}
                                 id="Dropdown3"
                                 onBlur={[Function]}
@@ -2368,23 +2368,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                   aria-posinset={1}
                                   aria-selected={true}
                                   aria-setsize={2}
-                                  className="ms-Dropdown-title title-84"
+                                  className="ms-Dropdown-title title-52"
                                   id="Dropdown3-option"
                                   role="option"
                                 >
                                   String
                                 </span>
                                 <span
-                                  className="ms-Dropdown-caretDownWrapper caretDownWrapper-85"
+                                  className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
                                 >
                                   <StyledIconBase
                                     aria-hidden={true}
-                                    className="ms-Dropdown-caretDown caretDown-86"
+                                    className="ms-Dropdown-caretDown caretDown-54"
                                     iconName="ChevronDown"
                                   >
                                     <IconBase
                                       aria-hidden={true}
-                                      className="ms-Dropdown-caretDown caretDown-86"
+                                      className="ms-Dropdown-caretDown caretDown-54"
                                       iconName="ChevronDown"
                                       styles={[Function]}
                                       theme={
@@ -2663,7 +2663,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                     >
                                       <i
                                         aria-hidden={true}
-                                        className="ms-Dropdown-caretDown caretDown-100"
+                                        className="ms-Dropdown-caretDown caretDown-68"
                                         data-icon-name="ChevronDown"
                                       >
                                         
@@ -2971,7 +2971,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         value=""
                       >
                         <div
-                          className="ms-TextField root-102"
+                          className="ms-TextField root-70"
                         >
                           <div
                             className="ms-TextField-wrapper"
@@ -3260,7 +3260,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 }
                               >
                                 <label
-                                  className="ms-Label root-81"
+                                  className="ms-Label root-49"
                                   htmlFor="confirmCollectionId"
                                   id="TextFieldLabel6"
                                 >
@@ -3269,13 +3269,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               </LabelBase>
                             </StyledLabelBase>
                             <div
-                              className="ms-TextField-fieldGroup fieldGroup-103"
+                              className="ms-TextField-fieldGroup fieldGroup-71"
                             >
                               <input
                                 aria-invalid={false}
                                 aria-labelledby="TextFieldLabel6"
                                 autoFocus={true}
-                                className="ms-TextField-field field-104"
+                                className="ms-TextField-field field-72"
                                 id="confirmCollectionId"
                                 onBlur={[Function]}
                                 onChange={[Function]}
@@ -3583,7 +3583,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     }
                   >
                     <label
-                      className="ms-Label root-81"
+                      className="ms-Label root-49"
                     >
                       Enter input parameters (if any)
                     </label>
@@ -3593,7 +3593,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   horizontal={true}
                 >
                   <div
-                    className="ms-Stack css-82"
+                    className="ms-Stack css-50"
                   >
                     <StyledWithResponsiveMode
                       key=".0:$.0"
@@ -4490,7 +4490,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 }
                               >
                                 <label
-                                  className="ms-Label ms-Dropdown-label root-99"
+                                  className="ms-Label ms-Dropdown-label root-67"
                                   id="Dropdown7-label"
                                 >
                                   Key
@@ -4502,7 +4502,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 aria-expanded="false"
                                 aria-haspopup="listbox"
                                 aria-labelledby="Dropdown7-label Dropdown7-option"
-                                className="ms-Dropdown dropdown-83"
+                                className="ms-Dropdown dropdown-51"
                                 data-is-focusable={true}
                                 id="Dropdown7"
                                 onBlur={[Function]}
@@ -4522,23 +4522,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                   aria-posinset={1}
                                   aria-selected={true}
                                   aria-setsize={2}
-                                  className="ms-Dropdown-title title-84"
+                                  className="ms-Dropdown-title title-52"
                                   id="Dropdown7-option"
                                   role="option"
                                 >
                                   String
                                 </span>
                                 <span
-                                  className="ms-Dropdown-caretDownWrapper caretDownWrapper-85"
+                                  className="ms-Dropdown-caretDownWrapper caretDownWrapper-53"
                                 >
                                   <StyledIconBase
                                     aria-hidden={true}
-                                    className="ms-Dropdown-caretDown caretDown-86"
+                                    className="ms-Dropdown-caretDown caretDown-54"
                                     iconName="ChevronDown"
                                   >
                                     <IconBase
                                       aria-hidden={true}
-                                      className="ms-Dropdown-caretDown caretDown-86"
+                                      className="ms-Dropdown-caretDown caretDown-54"
                                       iconName="ChevronDown"
                                       styles={[Function]}
                                       theme={
@@ -4817,7 +4817,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                     >
                                       <i
                                         aria-hidden={true}
-                                        className="ms-Dropdown-caretDown caretDown-100"
+                                        className="ms-Dropdown-caretDown caretDown-68"
                                         data-icon-name="ChevronDown"
                                       >
                                         
@@ -5125,7 +5125,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         value=""
                       >
                         <div
-                          className="ms-TextField root-102"
+                          className="ms-TextField root-70"
                         >
                           <div
                             className="ms-TextField-wrapper"
@@ -5414,7 +5414,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                                 }
                               >
                                 <label
-                                  className="ms-Label root-81"
+                                  className="ms-Label root-49"
                                   htmlFor="confirmCollectionId"
                                   id="TextFieldLabel10"
                                 >
@@ -5423,13 +5423,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                               </LabelBase>
                             </StyledLabelBase>
                             <div
-                              className="ms-TextField-fieldGroup fieldGroup-103"
+                              className="ms-TextField-fieldGroup fieldGroup-71"
                             >
                               <input
                                 aria-invalid={false}
                                 aria-labelledby="TextFieldLabel10"
                                 autoFocus={true}
-                                className="ms-TextField-field field-104"
+                                className="ms-TextField-field field-72"
                                 id="confirmCollectionId"
                                 onBlur={[Function]}
                                 onChange={[Function]}
@@ -5737,7 +5737,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         width={20}
                       >
                         <div
-                          className="ms-Image addRemoveIconLabel root-113"
+                          className="ms-Image addRemoveIconLabel root-81"
                           style={
                             Object {
                               "height": 30,
@@ -5747,7 +5747,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         >
                           <img
                             alt="Delete param"
-                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-114"
+                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
                             id="deleteparam"
                             key="fabricImage"
                             onClick={[Function]}
@@ -6052,7 +6052,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         width={20}
                       >
                         <div
-                          className="ms-Image addRemoveIconLabel root-113"
+                          className="ms-Image addRemoveIconLabel root-81"
                           style={
                             Object {
                               "height": 30,
@@ -6062,7 +6062,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         >
                           <img
                             alt="Add param"
-                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-114"
+                            className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
                             id="addparam"
                             key="fabricImage"
                             onClick={[Function]}
@@ -6081,7 +6081,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                 onClick={[Function]}
               >
                 <div
-                  className="ms-Stack css-82"
+                  className="ms-Stack css-50"
                   onClick={[Function]}
                 >
                   <StyledImageBase
@@ -6373,7 +6373,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       width={20}
                     >
                       <div
-                        className="ms-Image root-113"
+                        className="ms-Image root-81"
                         style={
                           Object {
                             "height": 30,
@@ -6383,7 +6383,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       >
                         <img
                           alt="Add param"
-                          className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-114"
+                          className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-82"
                           key="fabricImage"
                           onError={[Function]}
                           onLoad={[Function]}
@@ -6397,7 +6397,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     key=".0:$.1"
                   >
                     <span
-                      className="addNewParamStyle css-115"
+                      className="addNewParamStyle css-83"
                     >
                       Add New Param
                     </span>
@@ -8123,7 +8123,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       >
                         <button
                           aria-label="Submit"
-                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-116"
+                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-84"
                           data-is-focusable={true}
                           onClick={[Function]}
                           onKeyDown={[Function]}
@@ -8141,14 +8141,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           type="button"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-73"
+                            className="ms-Button-flexContainer flexContainer-41"
                             data-automationid="splitbuttonprimary"
                           >
                             <span
-                              className="ms-Button-textContainer textContainer-74"
+                              className="ms-Button-textContainer textContainer-42"
                             >
                               <span
-                                className="ms-Button-label label-117"
+                                className="ms-Button-label label-85"
                                 id="id__11"
                                 key="id__11"
                               >

src/Explorer/Panes/LoadQueryPane.html

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

src/Explorer/Panes/LoadQueryPane.ts

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

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

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

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

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

src/Explorer/Panes/LoadQueryPanel/index.tsx

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

src/Explorer/Panes/PaneComponents.ts

@@ -1,12 +1,9 @@
 import AddCollectionPaneTemplate from "./AddCollectionPane.html";
-import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
 import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
 import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
-import LoadQueryPaneTemplate from "./LoadQueryPane.html";
-import SaveQueryPaneTemplate from "./SaveQueryPane.html";
 import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
 import StringInputPaneTemplate from "./StringInputPane.html";
 import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
@@ -101,33 +98,6 @@ export class CassandraAddCollectionPaneComponent {
   }
 }
 
-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 StringInputPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/PanelComponent.less

@@ -126,6 +126,17 @@
 .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;

src/Explorer/Panes/SaveQueryPane.html

@@ -1,63 +0,0 @@
-<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
-  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
-  <div class="contextual-pane" id="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

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

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

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

@@ -0,0 +1,168 @@
+import { useBoolean } from "@uifabric/react-hooks";
+import { Text, TextField } from "office-ui-fabric-react";
+import React, { FunctionComponent, useState } from "react";
+import { Areas, 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/__snapshots__/index.test.tsx.snap

@@ -347,54 +347,6 @@ exports[`Settings Pane should render Default properly 1`] = `
           "userTableQuery": [Function],
           "visible": [Function],
         },
-        LoadQueryPane {
-          "container": [Circular],
-          "files": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "loadquerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onImportLinkKeyPress": [Function],
-          "selectedFilesTitle": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "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.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        BrowseQueriesPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "browsequeriespane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "loadSavedQuery": [Function],
-          "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-            "container": [Circular],
-            "parameters": [Function],
-          },
-          "setupQueries": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         StringInputPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -589,24 +541,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         "visible": [Function],
       },
       "arcadiaToken": [Function],
-      "browseQueriesPane": BrowseQueriesPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "browsequeriespane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "loadSavedQuery": [Function],
-        "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-          "container": [Circular],
-          "parameters": [Function],
-        },
-        "setupQueries": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
       "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -781,20 +715,6 @@ exports[`Settings Pane should render Default properly 1`] = `
       "isSparkEnabledForAccount": [Function],
       "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "loadQueryPane": LoadQueryPane {
-        "container": [Circular],
-        "files": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "loadquerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onImportLinkKeyPress": [Function],
-        "selectedFilesTitle": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "memoryUsageInfo": [Function],
       "newVertexPane": NewVertexPane {
         "buildString": [Function],
@@ -875,22 +795,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "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.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -1421,54 +1325,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           "userTableQuery": [Function],
           "visible": [Function],
         },
-        LoadQueryPane {
-          "container": [Circular],
-          "files": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "loadquerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onImportLinkKeyPress": [Function],
-          "selectedFilesTitle": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "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.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        BrowseQueriesPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "browsequeriespane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "loadSavedQuery": [Function],
-          "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-            "container": [Circular],
-            "parameters": [Function],
-          },
-          "setupQueries": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         StringInputPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -1663,24 +1519,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         "visible": [Function],
       },
       "arcadiaToken": [Function],
-      "browseQueriesPane": BrowseQueriesPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "browsequeriespane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "loadSavedQuery": [Function],
-        "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-          "container": [Circular],
-          "parameters": [Function],
-        },
-        "setupQueries": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
       "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -1855,20 +1693,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
       "isSparkEnabledForAccount": [Function],
       "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "loadQueryPane": LoadQueryPane {
-        "container": [Circular],
-        "files": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "loadquerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onImportLinkKeyPress": [Function],
-        "selectedFilesTitle": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "memoryUsageInfo": [Function],
       "newVertexPane": NewVertexPane {
         "buildString": [Function],
@@ -1949,22 +1773,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "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.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,

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

@@ -347,54 +347,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
           "userTableQuery": [Function],
           "visible": [Function],
         },
-        LoadQueryPane {
-          "container": [Circular],
-          "files": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "loadquerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onImportLinkKeyPress": [Function],
-          "selectedFilesTitle": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "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.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        BrowseQueriesPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "browsequeriespane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "loadSavedQuery": [Function],
-          "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-            "container": [Circular],
-            "parameters": [Function],
-          },
-          "setupQueries": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         StringInputPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -589,24 +541,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
         "visible": [Function],
       },
       "arcadiaToken": [Function],
-      "browseQueriesPane": BrowseQueriesPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "browsequeriespane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "loadSavedQuery": [Function],
-        "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-          "container": [Circular],
-          "parameters": [Function],
-        },
-        "setupQueries": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
       "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -781,20 +715,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       "isSparkEnabledForAccount": [Function],
       "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "loadQueryPane": LoadQueryPane {
-        "container": [Circular],
-        "files": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "loadquerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onImportLinkKeyPress": [Function],
-        "selectedFilesTitle": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "memoryUsageInfo": [Function],
       "newVertexPane": NewVertexPane {
         "buildString": [Function],
@@ -875,22 +795,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "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.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,

src/Explorer/Panes/UploadItemsPane/index.tsx

@@ -8,8 +8,6 @@ import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
 import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
 
-const UPLOAD_FILE_SIZE_LIMIT_KB = 2097152;
-
 export interface UploadItemsPaneProps {
   explorer: Explorer;
   closePanel: () => void;
@@ -47,10 +45,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
       setFormError("No files specified");
       setFormErrorDetail("No files were specified. Please input at least one file.");
       logConsoleError("Could not upload items -- No files were specified. Please input at least one file.");
-    } else if (_totalFileSizeForFileList(files) > UPLOAD_FILE_SIZE_LIMIT_KB) {
-      setFormError("Upload file size limit exceeded");
-      setFormErrorDetail("Total file upload size exceeds the 2 MB file size limit.");
-      logConsoleError("Could not upload items -- Total file upload size exceeds the 2 MB file size limit.");
     }
 
     const selectedCollection = explorer.findSelectedCollection();
@@ -79,14 +73,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
     setFiles(event.target.files);
   };
 
-  const _totalFileSizeForFileList = (fileList: FileList): number => {
-    let totalFileSize = 0;
-    for (let i = 0; i < fileList?.length; i++) {
-      totalFileSize += fileList.item(i).size;
-    }
-    return totalFileSize;
-  };
-
   const genericPaneProps: GenericRightPaneProps = {
     container: explorer,
     formError,

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

@@ -30,7 +30,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         verticalAlign="start"
       >
         <div
-          className="ms-Stack panelInfoErrorContainer css-204"
+          className="ms-Stack panelInfoErrorContainer css-140"
         >
           <StyledIconBase
             className="panelWarningIcon"
@@ -317,7 +317,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <i
                 aria-hidden={true}
-                className="panelWarningIcon root-206"
+                className="panelWarningIcon root-142"
                 data-icon-name="WarningSolid"
               >
                 
@@ -333,7 +333,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="panelWarningErrorMessage css-207"
+                className="panelWarningErrorMessage css-143"
               >
                 Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                  
@@ -358,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-207"
+            className="css-143"
           >
             Confirm by typing the collection id
           </span>
@@ -659,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField root-209"
+              className="ms-TextField root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-210"
+                  className="ms-TextField-fieldGroup fieldGroup-146"
                 >
                   <input
                     aria-invalid={false}
                     autoFocus={true}
-                    className="ms-TextField-field field-211"
+                    className="ms-TextField-field field-147"
                     id="confirmCollectionId"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -693,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-220"
+            className="css-156"
           >
             Help us improve Azure Cosmos DB!
           </span>
@@ -703,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-220"
+            className="css-156"
           >
             What is the reason why you are deleting this container?
           </span>
@@ -1006,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField ms-TextField--multiline root-209"
+              className="ms-TextField ms-TextField--multiline root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-221"
+                  className="ms-TextField-fieldGroup fieldGroup-157"
                 >
                   <textarea
                     aria-invalid={false}
-                    className="ms-TextField-field field-222"
+                    className="ms-TextField-field field-158"
                     id="deleteCollectionFeedbackInput"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -2708,7 +2708,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   variantClassName="ms-Button--primary"
                 >
                   <button
-                    className="ms-Button ms-Button--primary root-224"
+                    className="ms-Button ms-Button--primary root-160"
                     data-is-focusable={true}
                     id="sidePanelOkButton"
                     onClick={[Function]}
@@ -2720,14 +2720,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     type="submit"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-225"
+                      className="ms-Button-flexContainer flexContainer-161"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-226"
+                        className="ms-Button-textContainer textContainer-162"
                       >
                         <span
-                          className="ms-Button-label label-228"
+                          className="ms-Button-label label-164"
                           id="id__6"
                           key="id__6"
                         >

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

@@ -348,54 +348,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           "userTableQuery": [Function],
           "visible": [Function],
         },
-        LoadQueryPane {
-          "container": [Circular],
-          "files": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "loadquerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onImportLinkKeyPress": [Function],
-          "selectedFilesTitle": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "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.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        BrowseQueriesPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "browsequeriespane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "loadSavedQuery": [Function],
-          "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-            "container": [Circular],
-            "parameters": [Function],
-          },
-          "setupQueries": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
         StringInputPane {
           "container": [Circular],
           "firstFieldHasFocus": [Function],
@@ -590,24 +542,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         "visible": [Function],
       },
       "arcadiaToken": [Function],
-      "browseQueriesPane": BrowseQueriesPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "browsequeriespane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "loadSavedQuery": [Function],
-        "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-          "container": [Circular],
-          "parameters": [Function],
-        },
-        "setupQueries": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
       "cassandraAddCollectionPane": CassandraAddCollectionPane {
@@ -785,20 +719,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "isSparkEnabledForAccount": [Function],
       "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "loadQueryPane": LoadQueryPane {
-        "container": [Circular],
-        "files": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "loadquerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onImportLinkKeyPress": [Function],
-        "selectedFilesTitle": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "memoryUsageInfo": [Function],
       "newVertexPane": NewVertexPane {
         "buildString": [Function],
@@ -880,22 +800,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         "container": [Circular],
         "parameters": [Function],
       },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "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.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
       "setInProgressConsoleDataIdToBeDeleted": undefined,
@@ -999,7 +903,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         verticalAlign="start"
       >
         <div
-          className="ms-Stack panelInfoErrorContainer css-204"
+          className="ms-Stack panelInfoErrorContainer css-140"
         >
           <StyledIconBase
             className="panelWarningIcon"
@@ -1286,7 +1190,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             >
               <i
                 aria-hidden={true}
-                className="panelWarningIcon root-206"
+                className="panelWarningIcon root-142"
                 data-icon-name="WarningSolid"
               >
                 
@@ -1302,7 +1206,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               variant="small"
             >
               <span
-                className="panelWarningErrorMessage css-207"
+                className="panelWarningErrorMessage css-143"
               >
                 Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                  
@@ -1327,7 +1231,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           variant="small"
         >
           <span
-            className="css-207"
+            className="css-143"
           >
             Confirm by typing the database id
           </span>
@@ -1628,18 +1532,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField root-209"
+              className="ms-TextField root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-210"
+                  className="ms-TextField-fieldGroup fieldGroup-146"
                 >
                   <input
                     aria-invalid={false}
                     autoFocus={true}
-                    className="ms-TextField-field field-211"
+                    className="ms-TextField-field field-147"
                     id="confirmDatabaseId"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -1662,7 +1566,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           variant="small"
         >
           <span
-            className="css-228"
+            className="css-164"
           >
             Help us improve Azure Cosmos DB!
           </span>
@@ -1672,7 +1576,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           variant="small"
         >
           <span
-            className="css-228"
+            className="css-164"
           >
             What is the reason why you are deleting this database?
           </span>
@@ -1975,17 +1879,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField ms-TextField--multiline root-209"
+              className="ms-TextField ms-TextField--multiline root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-229"
+                  className="ms-TextField-fieldGroup fieldGroup-165"
                 >
                   <textarea
                     aria-invalid={false}
-                    className="ms-TextField-field field-230"
+                    className="ms-TextField-field field-166"
                     id="deleteDatabaseFeedbackInput"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -3677,7 +3581,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                   variantClassName="ms-Button--primary"
                 >
                   <button
-                    className="ms-Button ms-Button--primary root-220"
+                    className="ms-Button ms-Button--primary root-156"
                     data-is-focusable={true}
                     id="sidePanelOkButton"
                     onClick={[Function]}
@@ -3689,14 +3593,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                     type="submit"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-221"
+                      className="ms-Button-flexContainer flexContainer-157"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-222"
+                        className="ms-Button-textContainer textContainer-158"
                       >
                         <span
-                          className="ms-Button-label label-224"
+                          className="ms-Button-label label-160"
                           id="id__3"
                           key="id__3"
                         >

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -252,7 +252,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: OpenQueryIcon,
         title: "Open Query",
         description: null,
-        onClick: () => this.container.browseQueriesPane.open(),
+        onClick: () => this.container.openBrowseQueriesPanel(),
       });
 
       if (!this.container.isPreferredApiCassandra()) {

src/Explorer/Tabs/MongoShellTab.ts

@@ -6,11 +6,11 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import { isInvalidParentFrameOrigin, isReadyMessage } from "../../Utils/MessageValidation";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import template from "./MongoShellTab.html";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import template from "./MongoShellTab.html";
 import TabsBase from "./TabsBase";
 
 export default class MongoShellTab extends TabsBase {
@@ -85,10 +85,7 @@ export default class MongoShellTab extends TabsBase {
   }
 
   private handleReadyMessage(event: MessageEvent, shellIframe: HTMLIFrameElement) {
-    if (typeof event.data["kind"] !== "string") {
+    if (!isReadyMessage(event)) {
-      return;
-    }
-    if (event.data.kind !== "ready") {
       return;
     }
 

src/Explorer/Tabs/QueryTab.ts

@@ -1,23 +1,22 @@
 import * as ko from "knockout";
+import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
+import SaveQueryIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { HashMap } from "../../Common/HashMap";
+import * as HeadersUtility from "../../Common/HeadersUtility";
+import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import TabsBase from "./TabsBase";
-import { HashMap } from "../../Common/HashMap";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import * as QueryUtils from "../../Utils/QueryUtils";
-import SaveQueryIcon from "../../../images/save-cosmos.svg";
-
-import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
 import template from "./QueryTab.html";
+import TabsBase from "./TabsBase";
 
 enum ToggleState {
   Result,
@@ -185,16 +184,12 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     await this._executeQueryDocumentsPage(0);
   };
 
-  public onLoadQueryClick = (): void => {
-    this.collection && this.collection.container && this.collection.container.loadQueryPane.open();
-  };
-
   public onSaveQueryClick = (): void => {
-    this.collection && this.collection.container && this.collection.container.saveQueryPane.open();
+    this.collection && this.collection.container && this.collection.container.openSaveQueryPanel();
   };
 
   public onSavedQueriesClick = (): void => {
-    this.collection && this.collection.container && this.collection.container.browseQueriesPane.open();
+    this.collection && this.collection.container && this.collection.container.openBrowseQueriesPanel();
   };
 
   public async onFetchNextPageClick(): Promise<void> {

src/Main.tsx

@@ -238,9 +238,6 @@ const App: React.FunctionComponent = () => {
       <div data-bind='component: { name: "table-column-options-pane", params: { data: tableColumnOptionsPane} }' />
       <div data-bind='component: { name: "table-query-select-pane", params: { data: querySelectPane} }' />
       <div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
-      <div data-bind='component: { name: "load-query-pane", params: { data: loadQueryPane} }' />
-      <div data-bind='component: { name: "save-query-pane", params: { data: saveQueryPane} }' />
-      <div data-bind='component: { name: "browse-queries-pane", params: { data: browseQueriesPane} }' />
       <div data-bind='component: { name: "string-input-pane", params: { data: stringInputPane} }' />
       <div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />
       <KOCommentIfStart if="isGitHubPaneEnabled" />

src/Utils/MessageValidation.test.ts

@@ -1,5 +1,6 @@
-import { isInvalidParentFrameOrigin } from "./MessageValidation";
+import { isInvalidParentFrameOrigin, isReadyMessage } from "./MessageValidation";
 
+describe("isInvalidParentFrameOrigin", () => {
   test.each`
     domain                                                           | expected
     ${"https://cosmos.azure.com"}                                    | ${false}
@@ -24,3 +25,20 @@ test.each`
   `("returns $expected when called with $domain", ({ domain, expected }) => {
     expect(isInvalidParentFrameOrigin({ origin: domain } as MessageEvent)).toBe(expected);
   });
+});
+
+describe("isReadyMessage", () => {
+  test.each`
+    event                                                 | expected
+    ${{ data: { kind: "ready" } }}                        | ${true}
+    ${{ data: { data: "ready" } }}                        | ${true}
+    ${{ data: { data: "ready", kind: "ready" } }}         | ${true}
+    ${{ data: { kind: "not-ready" } }}                    | ${false}
+    ${{ data: { data: "not-ready" } }}                    | ${false}
+    ${{ data: { data: "not-ready", kind: "not-ready" } }} | ${false}
+    ${{ data: {} }}                                       | ${false}
+    ${{}}                                                 | ${false}
+  `("returns $expected when called with $event", ({ event, expected }) => {
+    expect(isReadyMessage(event as MessageEvent)).toBe(expected);
+  });
+});

src/Utils/MessageValidation.ts

@@ -20,3 +20,15 @@ function isValidOrigin(allowedOrigins: string[], event: MessageEvent): boolean {
   console.error(`Invalid parent frame origin detected: ${eventOrigin}`);
   return false;
 }
+
+export function isReadyMessage(event: MessageEvent): boolean {
+  if (!event?.data?.kind && !event?.data?.data) {
+    return false;
+  }
+
+  if (event.data.kind !== "ready" && event.data.data !== "ready") {
+    return false;
+  }
+
+  return true;
+}